/* ═══════════════════════════════════════════════════════════════════════════ * SalesTeem AI - front-end sales page * Carries the JV page's "Thread" language forward (one green accent, bubble * corners, red reserved for silence) and adds light sections for reading. * * Layout rhythm follows the MagicPods / ClipsField launch pages: light reading * sections with soft gradient washes, broken up by dark bands. A dark band is * either full-bleed (curved edge where it meets light) or an inset rounded panel. * * Section themes - every component reads these scoped tokens, so it renders * correctly on any of them: * .s-dark dark band (full-bleed; the network canvas shows through) * .s-dark.is-panel dark band drawn as an inset rounded panel on white * .s-light reading section, white with soft washes * .s-paper alternate reading section, cool off-white * .curve-top / .curve-bottom light section with a convex edge into dark * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Brand */ --green: #1CBD58; --green-hover: #22D364; --green-ink: #04150B; --green-deep: #0B7F3A; /* green text on light: 4.9:1 on white */ --green-soft: rgba(28, 189, 88, .12); --green-line: rgba(28, 189, 88, .38); --red: #F0616D; --red-deep: #C2313F; /* red text on light: 5.6:1 on white */ --gold: #F5C451; --amber: #B7791F; /* Neutrals */ --ink-950: #07090B; --ink-900: #0B0F12; --ink-850: #0F1417; --ink-800: #161D21; --ink-700: #1F2A2F; --ink-600: #2C3A40; /* Radii - derived from the chat bubble */ --r-sm: 10px; --r: 20px; --r-lg: 28px; --bubble: var(--r) var(--r) var(--r) 6px; --bubble-r: var(--r) var(--r) 6px var(--r); /* Type */ /* Three cuts from the Adobe kit, each used at the size it was drawn for. */ --display-xl: "degular-display", "degular", ui-sans-serif, system-ui, sans-serif; /* 48px+ */ --display: "degular", "degular-display", ui-sans-serif, system-ui, sans-serif; /* 24-46px */ --ui: "degular-text", "degular", ui-sans-serif, system-ui, sans-serif; /* under 24px */ --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Hero headline scales with the hero's content width so it stays on 3 lines. */ --fs-hero: clamp(2.1rem, max(.9rem + 3.4vw, (min(100vw, 1440px) - 2 * var(--gutter)) / 19.5), 4.5rem); --fs-h2: clamp(2.2rem, 1.1rem + 3.7vw, 4.25rem); --fs-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); --fs-card: 1.5rem; --fs-lead: clamp(1.1rem, 1rem + .4vw, 1.25rem); --fs-small: .875rem; /* Layout */ --container: 1200px; --narrow: 860px; --gutter: clamp(16px, 4vw, 32px); --sec-pad: clamp(56px, 6vw, 88px); /* the only section padding - keep it that way */ --bar-h: 70px; --curve: clamp(28px, 5vw, 72px); /* depth of curved section edges */ --panel-inset: clamp(8px, 2.6vw, 40px); /* gap around inset dark panels */ /* Motion */ --ease: cubic-bezier(.2, .8, .2, 1); } /* Section themes */ .s-dark { /* Translucent so the page-wide network canvas shows through. */ --bg: rgba(7, 9, 11, .55); --fg: #F1F5F4; --muted: #A1B0AC; --line: var(--ink-700); --card: var(--ink-850); --card-2: var(--ink-800); --accent: var(--green); --neg: #FF8C96; color-scheme: dark; } .s-light, .s-paper { --fg: #0C1613; --muted: #4A5955; --line: #E1E8E4; --card: #FFFFFF; --card-2: #F3F7F5; --accent: var(--green-deep); --neg: var(--red-deep); color-scheme: light; } .s-light { --bg: /* Washes sit away from the edges so they fade out before the section ends. */ radial-gradient(40% 32% at 0% 35%, rgba(28, 189, 88, .07), transparent 100%), radial-gradient(40% 32% at 100% 65%, rgba(190, 235, 90, .1), transparent 100%), #FFFFFF; } .s-paper { --bg: #F0F5F2; --line: #DDE5E1; } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; interpolate-size: allow-keywords; } body { margin: 0; background: var(--ink-950); color: #0C1613; font-family: var(--body); font-size: 1rem; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(28, 189, 88, .18); overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: .012em; margin: 0; text-wrap: balance; } cite { font-style: italic; color: var(--muted); } strong, b { font-weight: 700; } button, a, summary { touch-action: manipulation; } [hidden] { display: none !important; } .icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: -9999px; top: 12px; z-index: 200; background: var(--green); color: var(--green-ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; } .skip-link:focus { left: 12px; } /* No focus rings. Keyboard focus is shown with each element's own hover-style cue instead, so tabbing through the page still shows where you are. */ :focus, :focus-visible { outline: none; } .btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); } .btn-primary:focus-visible { --sb-percent: 20%; --sb-offset: 95deg; --sb-shine: var(--sb-accent-soft); --sb-hover: 8px; --sb-inner: 1; } .qa:has(summary:focus-visible) { border-color: var(--green); } .qa summary:focus-visible span { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; } a:not(.btn):focus-visible { color: var(--green); text-decoration: underline; } .replay:focus-visible { color: #fff; border-color: var(--green); background: var(--green-soft); } .exit-close:focus-visible { border-color: var(--green); } /* ── Background layer (ported from the JV page) ─────────────────────────── */ .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7; } /* Content needs its own layer, above the fixed canvas. */ main, .site-footer { position: relative; z-index: 1; } /* main sits above the footer so the last section's curved edge overlaps it. */ main { z-index: 2; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); } /* ── Sections ───────────────────────────────────────────────────────────── */ section { position: relative; padding: var(--sec-pad) 0; } .s-dark, .s-light, .s-paper { background: var(--bg); color: var(--fg); } .s-dark strong, .s-dark b { color: #fff; } /* Inset dark panel: the section stays white and the dark band is drawn as a large rounded card inside it (MagicPods). Opaque, with a faint grid. */ .s-dark.is-panel { background: #fff; padding: calc(var(--sec-pad) + clamp(16px, 2vw, 28px)) 0; } .is-panel::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: clamp(8px, 1.2vw, 16px) var(--panel-inset); border-radius: clamp(24px, 3vw, 48px); background: var(--panel-glow, radial-gradient(55% 40% at 50% 0%, rgba(28, 189, 88, .18), transparent 70%)), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px, var(--ink-950); box-shadow: 0 50px 90px -60px rgba(7, 30, 18, .7); } .is-panel > .container { position: relative; z-index: 1; max-width: calc(var(--container) + 2 * var(--panel-inset)); padding-inline: calc(var(--gutter) + var(--panel-inset)); } /* Curved edges where a light section meets a full-bleed dark band. The light section overlaps the dark one by --curve; its rounded corners reveal the dark band underneath. */ .curve-top, .curve-bottom { z-index: 2; } .curve-top { margin-top: calc(-1 * var(--curve)); border-top-left-radius: 50% var(--curve); border-top-right-radius: 50% var(--curve); } .curve-bottom { margin-bottom: calc(-1 * var(--curve)); border-bottom-left-radius: 50% var(--curve); border-bottom-right-radius: 50% var(--curve); } .s-dark:has(+ .curve-top) { padding-bottom: calc(var(--sec-pad) + var(--curve)); } .curve-bottom + .s-dark, .curve-bottom + .site-footer { padding-top: calc(var(--sec-pad) + var(--curve)); } /* Dotted down-arrow between sections (both references). */ .dot-arrow { width: 48px; height: 66px; margin: clamp(44px, 5vw, 64px) auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 66' fill='%231CBD58'%3E%3Ccircle cx='24' cy='3' r='2' opacity='.15'/%3E%3Ccircle cx='24' cy='10' r='2' opacity='.25'/%3E%3Ccircle cx='24' cy='17' r='2' opacity='.35'/%3E%3Ccircle cx='24' cy='24' r='2' opacity='.5'/%3E%3Ccircle cx='24' cy='31' r='2' opacity='.65'/%3E%3Ccircle cx='24' cy='38' r='2' opacity='.8'/%3E%3Ccircle cx='10' cy='42' r='2'/%3E%3Ccircle cx='17' cy='42' r='2'/%3E%3Ccircle cx='24' cy='45' r='2'/%3E%3Ccircle cx='31' cy='42' r='2'/%3E%3Ccircle cx='38' cy='42' r='2'/%3E%3Ccircle cx='17' cy='50' r='2'/%3E%3Ccircle cx='24' cy='52' r='2'/%3E%3Ccircle cx='31' cy='50' r='2'/%3E%3Ccircle cx='24' cy='59' r='2'/%3E%3C/svg%3E") center / contain no-repeat; animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .section-head { margin-bottom: clamp(32px, 4vw, 52px); max-width: 60rem; } .section-head.center { text-align: center; margin-left: auto; margin-right: auto; } .section-head.center .lead { margin-left: auto; margin-right: auto; } .h-section { font-size: var(--fs-h2); margin: 16px 0 0; } .h-section.wide { max-width: 24ch; } .section-head.center .h-section { margin-left: auto; margin-right: auto; max-width: 22ch; } .section-head.center .h-section.wide { max-width: 28ch; } .h-sub { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 68ch; margin-top: 22px; } .lead strong { color: var(--fg); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 clamp(.95rem, .9rem + .25vw, 1.1rem)/1.25 var(--body); letter-spacing: -.005em; color: var(--fg); padding: 9px 22px; border: 1.5px solid var(--green); border-radius: 999px; background: color-mix(in srgb, var(--green) 8%, transparent); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: ping 2.2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(28, 189, 88, .6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(28, 189, 88, 0); } } .num { color: var(--accent); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--bubble); border: 1px solid transparent; font: 700 1.08rem/1.15 var(--display); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease), color .2s var(--ease); } /* Primary button - "shiny button" effect (after a shadcn ShinyButton component), rebuilt in plain CSS in the SalesTeem palette: a light streak that orbits the border, a slow inner sheen, a speckle texture that follows the streak, and an inner glow on hover. */ @property --sb-angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --sb-offset { syntax: ""; initial-value: 0deg; inherits: false; } @property --sb-percent { syntax: ""; initial-value: 6%; inherits: false; } @property --sb-shine { syntax: ""; initial-value: #ffffff; inherits: false; } /* Glow is driven by custom properties so the idle pulse and the hover state blend smoothly instead of the shadow snapping. */ @property --sb-pulse { syntax: ""; initial-value: 12px; inherits: false; } @property --sb-hover { syntax: ""; initial-value: 0px; inherits: false; } @property --sb-inner { syntax: ""; initial-value: 0; inherits: false; } .btn-primary { /* Deeper green so white text stays readable (3.3:1 to 5:1). */ --sb-fill: linear-gradient(90deg, #1AA651, #14994A 55%, #0C7F3B); --sb-accent: #E9FFF1; --sb-accent-soft: #ffffff; --sb-ease: .8s cubic-bezier(.25, 1, .5, 1); --sb-lift: .55s cubic-bezier(.22, 1, .36, 1); overflow: hidden; isolation: isolate; border: 2px solid transparent; border-radius: 999px; color: #fff; text-shadow: 0 1px 2px rgba(4, 40, 18, .35); background: var(--sb-fill) padding-box, conic-gradient( from calc(var(--sb-angle) - var(--sb-offset)), transparent, var(--sb-accent) var(--sb-percent), var(--sb-shine) calc(var(--sb-percent) * 2), var(--sb-accent) calc(var(--sb-percent) * 3), transparent calc(var(--sb-percent) * 4) ) border-box, #07652E border-box; box-shadow: 0 0 calc(var(--sb-pulse) + var(--sb-hover)) -3px rgba(28, 189, 88, .6), 0 calc(6px + var(--sb-hover) / 4) 14px -8px rgba(7, 60, 30, .5), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1ex 2rem 4px rgba(255, 255, 255, calc(.28 * var(--sb-inner))); animation: sb-angle 3s linear infinite, sb-glow 2.6s ease-in-out infinite; transition: transform var(--sb-lift), filter var(--sb-lift), --sb-hover var(--sb-lift), --sb-inner var(--sb-lift), --sb-offset var(--sb-ease), --sb-percent var(--sb-ease), --sb-shine var(--sb-ease); will-change: transform; } /* Speckle texture, revealed only near the orbiting streak. */ .btn-primary::before { content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .9) .5px, transparent 0) 0 0 / 4px 4px space; -webkit-mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), #000, transparent 10% 90%, #000); mask-image: conic-gradient(from calc(var(--sb-angle) + 45deg), #000, transparent 10% 90%, #000); opacity: .35; animation: sb-angle 3s linear infinite; } /* Slow rotating sheen inside the button. */ .btn-primary::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; width: 100%; aspect-ratio: 1; translate: -50% -50%; background: linear-gradient(-50deg, transparent, rgba(255, 255, 255, .55), transparent); -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000); mask-image: radial-gradient(circle at bottom, transparent 40%, #000); opacity: .35; animation: sb-spin 6s linear infinite; } .btn-primary:hover { --sb-percent: 20%; --sb-offset: 95deg; --sb-shine: var(--sb-accent-soft); --sb-hover: 8px; --sb-inner: 1; transform: translateY(-2px); filter: brightness(1.06) saturate(1.1); } .btn-primary::before { transition: opacity var(--sb-lift); } .btn-primary:hover::before { opacity: .45; } .btn-primary:active { transform: translateY(0); --sb-hover: 0px; transition-duration: .15s; } @keyframes sb-glow { 0%, 100% { --sb-pulse: 10px; } 50% { --sb-pulse: 20px; } } @keyframes sb-angle { to { --sb-angle: 360deg; } } @keyframes sb-spin { to { rotate: 360deg; } } .btn-ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 32%, transparent); } .btn-ghost:hover { border-color: var(--green); background: var(--green-soft); } .btn .icon-arrow { transition: transform .25s var(--ease); } .btn:hover .icon-arrow { transform: translateX(4px); } .btn-sm { min-height: 40px; padding: 8px 16px; font-size: .98rem; } .btn-xl { min-height: 76px; min-width: min(100%, 560px); padding: 20px 44px; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); } .btn-full { width: 100%; } /* Repeating CTA block */ .cta-block { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: clamp(40px, 5vw, 56px); text-align: center; } .cta-block.left { align-items: flex-start; text-align: left; } .cta-note { margin: 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.7; } .cta-note .sep { opacity: .45; margin: 0 .15em; } /* ── Placeholders - intentional, easy to find (grep "ph-") ─────────────── */ .ph-tag { display: inline-block; font: 600 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; background: #FFF4D6; border: 1px solid #F1D48A; padding: 4px 8px; border-radius: 6px; } .s-dark .ph-tag { color: var(--gold); background: rgba(245, 196, 81, .1); border-color: rgba(245, 196, 81, .35); } .ph-text { font-size: var(--fs-small); color: var(--muted); max-width: 46ch; } .ph-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; min-height: 200px; border: 1.5px dashed color-mix(in srgb, var(--fg) 22%, transparent); border-radius: var(--bubble); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--fg) 3%, transparent) 14px 15px), var(--card-2); } .ph-card > .icon { width: 28px; height: 28px; color: var(--accent); opacity: .6; } .ph-val { font-family: var(--mono); font-size: .92em; font-weight: 600; color: #8A5A00; background: #FFF4D6; border: 1px dashed #E2BB5A; padding: 1px 6px; border-radius: 5px; white-space: nowrap; } /* Values the copy doc bracketed as "to be confirmed". Visible normally; highlighted with ?review in the URL. */ .review .tbc { outline: 2px dashed var(--gold); outline-offset: 2px; background: rgba(245, 196, 81, .18); } /* ── 1 · Sticky bar ─────────────────────────────────────────────────────── */ .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: linear-gradient(90deg, #F7A91E 0%, #FFC62B 22%, #FFDD3A 50%, #FFC62B 78%, #F7A91E 100%); border-top: 1px solid #D9A92F; color: #1A1405; padding-bottom: env(safe-area-inset-bottom); /* Pinned to the bottom, visible from the first paint. */ } /* Keeps the footer's last line clear of the bar. */ body.has-sticky-bar .site-footer { padding-bottom: calc(36px + var(--bar-h)); } /* Close cross and "Show offer" pill exist for phones only. */ .sticky-close, .sticky-show { display: none; } .sticky-bar .sticky-inner { max-width: none; width: 100%; padding-left: 50px; padding-right: 50px; } .sticky-inner { display: flex; align-items: center; gap: 24px; min-height: var(--bar-h); padding-top: 8px; padding-bottom: 8px; } /* Two-line title with a green accent rule: reads as a heading, not a button. */ .sticky-deal { flex: none; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid #1F1F1F; line-height: 1.1; } .sticky-deal .sd-top { font: 600 .82rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #1F1F1F; } .sticky-deal .sd-main { font: 700 1.3rem/1.1 var(--display); color: #1F1F1F; } .sticky-msg { margin: 0 auto; font-size: 1rem; line-height: 1.35; text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; row-gap: 4px; } .sticky-msg strong { color: #1F1F1F; font-weight: 700; } .sticky-tail { color: #1F1F1F; font-weight: 500; } .sticky-tail .st-disc { font-style: normal; font-weight: 600; color: #1B7F32; } .sticky-tail .st-short { display: none; } .sticky-label { font: 600 1rem/1.2 var(--display); color: #1F1F1F; } .sticky-bar .btn { flex: none; } .cd { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; } .cd-u { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 44px; padding: 4px 6px 3px; background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: 8px; } .cd-u b { font: 700 1.05rem/1.1 var(--display); color: var(--green); min-width: 2ch; text-align: center; } .cd-u i { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A1B0AC; } /* ── 2 + 3 · Hero + VSL ─────────────────────────────────────────────────── */ .hero { padding-top: clamp(32px, 3.5vw, 52px); overflow: hidden; isolation: isolate; } .hero-glow { position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none; animation: glow 14s ease-in-out infinite alternate; background: radial-gradient(46% 18% at 50% 7%, rgba(40, 210, 110, .42), transparent 72%), radial-gradient(70% 26% at 50% 36%, rgba(28, 189, 88, .2), transparent 74%), radial-gradient(30% 20% at 0% 12%, rgba(28, 189, 88, .26), transparent 72%), radial-gradient(30% 20% at 100% 12%, rgba(28, 189, 88, .26), transparent 72%), radial-gradient(60% 16% at 50% 66%, rgba(28, 189, 88, .16), transparent 74%), radial-gradient(26% 14% at 0% 58%, rgba(28, 189, 88, .16), transparent 72%), radial-gradient(26% 14% at 100% 58%, rgba(28, 189, 88, .16), transparent 72%); } /* Stage-light rays fanning down from above the logo, swaying very slowly. The layer starts 300px above the hero and is much wider than it, so its edges and corners stay out of view while it sways (the hero clips the overflow). The ray origin and mask centre sit where they always did: 120px above and level with the top of the hero. */ .hero::before { content: ""; position: absolute; left: -25%; right: -25%; top: -300px; height: 1800px; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 180deg at 50% 180px, rgba(70, 235, 150, .06) 0deg 1.6deg, transparent 1.6deg 6.4deg), repeating-conic-gradient(from 183deg at 50% 180px, rgba(70, 235, 150, .04) 0deg 3.4deg, transparent 3.4deg 11.3deg); -webkit-mask-image: radial-gradient(50% 930px at 50% 300px, #000 8%, transparent 74%); mask-image: radial-gradient(50% 930px at 50% 300px, #000 8%, transparent 74%); transform-origin: 50% 300px; animation: hero-rays-sway 16s ease-in-out infinite alternate, hero-rays-pulse 7s ease-in-out infinite; } /* The beams swing wide from side to side while their brightness slowly rises and falls (both on the compositor). */ @keyframes hero-rays-sway { from { transform: rotate(-4.5deg); } to { transform: rotate(4.5deg); } } @keyframes hero-rays-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* Fine sparkle dust that twinkles, thicker toward the top. */ .hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 1600px; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(150, 255, 200, .95) 0 1.4px, transparent 2px) 0 0 / 173px 211px, radial-gradient(circle, rgba(110, 240, 170, .7) 0 1.1px, transparent 1.8px) 61px 87px / 119px 137px, radial-gradient(circle, rgba(200, 255, 225, .9) 0 1.8px, transparent 2.6px) 23px 143px / 257px 233px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 85%); animation: hero-twinkle 5s ease-in-out infinite alternate; } @keyframes hero-twinkle { from { opacity: .22; } to { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } } .hero-glow::after { /* faint dot grid, masked to the top */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%); } .hero > .container { max-width: 1440px; } .hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-logo { width: clamp(190px, 18vw, 270px); height: auto; margin-bottom: clamp(22px, 3vw, 34px); } /* Solid dark-green glass pill so it stays readable over the light rays behind it. */ .hero .eyebrow { font-size: .95rem; font-weight: 500; color: #fff; background: linear-gradient(135deg, rgba(22, 92, 58, .85), rgba(4, 22, 14, .92) 75%); border: 1px solid rgba(40, 210, 110, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 22px rgba(28, 189, 88, .25), inset 0 1px 0 rgba(255, 255, 255, .08); } .hero .eyebrow strong { color: #5BEF9D; letter-spacing: .12em; font-size: .8rem; } .hero .eyebrow .dot { background: #5BEF9D; } .h-hero { font-size: var(--fs-hero); line-height: 1.08; max-width: none; margin-top: 26px; letter-spacing: .02em; word-spacing: .04em; } .hl-silence { color: var(--neg); position: relative; white-space: nowrap; } .hl-win { color: var(--green); background: linear-gradient(transparent 82%, rgba(28, 189, 88, .32) 82%, rgba(28, 189, 88, .32) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero-sub { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; color: #C3CFCC; max-width: 100%; text-wrap: pretty; margin: 28px 0 0; } .hero-sub strong { color: #fff; } /* Match the width the 3-line headline actually occupies. */ @media (min-width: 900px) { .hero-sub { max-width: 86%; } } .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 28px; } .hero-chips li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #E6F1EC; padding: 7px 15px 7px 8px; border: 1px solid rgba(40, 210, 110, .32); border-radius: 999px; background: linear-gradient(180deg, rgba(14, 58, 36, .62), rgba(6, 26, 16, .72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -12px rgba(28, 189, 88, .55); } /* Check mark sits in a small glossy green disc. */ .hero-chips .icon { width: 20px; height: 20px; padding: 4px; border-radius: 50%; stroke-width: 3.2; color: #04150B; background: radial-gradient(120% 120% at 30% 20%, #7DF0B0, #1CBD58 60%, #0B8A43); box-shadow: 0 0 10px rgba(40, 210, 110, .55); } .vsl-wrap { max-width: 980px; margin: clamp(40px, 5vw, 56px) auto 0; position: relative; } /* Floating status chips around the video (as on the JV hero). Desktop only. */ .hs-chip { position: absolute; z-index: 3; display: none; align-items: center; width: max-content; max-width: 168px; min-height: 52px; padding: 8px 16px 8px 52px; border-radius: 999px; isolation: isolate; background: linear-gradient(135deg, rgba(22, 92, 58, .88), rgba(4, 22, 14, .94) 70%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 34px rgba(28, 189, 88, .32), 0 22px 40px -18px rgba(0, 0, 0, .95), inset 0 -10px 18px rgba(0, 0, 0, .25); font: 800 .92rem/1.18 var(--display); letter-spacing: .01em; color: #fff; animation: chip-float 6s ease-in-out infinite; } /* Gradient rim: bright top-left edge fading to a dimmer bottom, drawn with a masked 1.5px ring. */ .hs-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, rgba(140, 255, 190, .95), rgba(40, 210, 110, .16) 48%, rgba(40, 210, 110, .75)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Soft glass sheen across the top half. */ .hs-chip::after { content: ""; position: absolute; left: 14px; right: 14px; top: 3px; height: 45%; z-index: -1; border-radius: 999px 999px 40% 40%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); } /* The 3D icon sits on the left and pops out past the rim. */ .hs-chip .hs-icon3d { position: absolute; left: -12px; top: 50%; translate: 0 -50%; width: 58px; height: auto; margin: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(40, 210, 110, .35)); } .hs-chip .icon { width: 17px; height: 17px; color: var(--green); } .hs-chip b { color: #fff; font-variant-numeric: tabular-nums; } /* The chips stand clear of the video: the left ones end 18px before its left edge, the right ones start 30px after its right edge (their icon pokes 12px towards the video). */ .hs-c1 { top: 12%; right: calc(100% + 18px); animation-delay: -1s; } .hs-c2 { top: 28%; left: calc(100% + 30px); animation-delay: -3s; } .hs-c3 { bottom: 24%; right: calc(100% + 18px); animation-delay: -2s; } .hs-c4 { bottom: 12%; left: calc(100% + 30px); animation-delay: -4.5s; } @keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* Needs about 230px of free space on each side of the 980px video. */ @media (min-width: 1440px) { .hs-chip { display: inline-flex; } } /* 1300px to 1439px: the video narrows to 860px and the chips shrink so they still fit beside it. */ @media (min-width: 1300px) and (max-width: 1439px) { .vsl-wrap { max-width: 860px; } .hs-chip { display: inline-flex; max-width: 138px; min-height: 44px; padding: 6px 12px 6px 44px; font-size: .8rem; } .hs-chip .hs-icon3d { width: 48px; left: -10px; } .hs-c1, .hs-c3 { right: calc(100% + 14px); } .hs-c2, .hs-c4 { left: calc(100% + 24px); } } /* Big floating 3D icons either side of the video (desktop). */ .hs-deco { position: absolute; z-index: 3; display: none; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(28, 189, 88, .35)); animation: chip-float 7s ease-in-out infinite; } .hs-deco-wa { left: clamp(24px, 9vw, 190px); top: 52px; width: 112px; animation-delay: -2s; } .hs-deco-lead { right: clamp(24px, 9vw, 190px); top: 48px; width: 100px; animation-delay: -4s; } @media (min-width: 1180px) { .hs-deco { display: block; } } .vsl-wrap::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: calc(var(--r-lg) + 1px); background: linear-gradient(160deg, rgba(28, 189, 88, .7), rgba(28, 189, 88, 0) 40%, rgba(28, 189, 88, 0) 60%, rgba(28, 189, 88, .45)); filter: blur(14px); opacity: .25; } .vsl { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: #050708; border: 1px solid rgba(40, 210, 110, .3); box-shadow: 0 0 22px rgba(28, 189, 88, .18), 0 40px 80px -40px rgba(0, 0, 0, .9); } .vsl iframe, .vsl video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* The Vimeo video can carry a thin bright line along its left and right edges. The player is zoomed in slightly (about 5px per side at 980px wide) so those edges fall outside .vsl, which clips them (overflow: hidden). */ .vsl iframe { background: #000; transform: scale(1.02); transform-origin: 50% 50%; } .vsl-poster { position: absolute; inset: 0; } .vsl-stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } .vsl-box { position: absolute; left: 50%; bottom: 17%; width: 30%; transform: translateX(-50%); filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .6)); animation: float 7s ease-in-out infinite; } @keyframes glow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .vsl-play { border: 0; padding: 0; cursor: pointer; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(28, 189, 88, .92); color: var(--green-ink); box-shadow: 0 0 0 10px rgba(28, 189, 88, .18), 0 18px 40px -10px rgba(0, 0, 0, .7); } .vsl-play .icon { width: 42%; height: 42%; margin-left: 6%; } .vsl-play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(28, 189, 88, .55); animation: ring 2.4s var(--ease) infinite; } @keyframes ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } .vsl-ph { position: absolute; left: 14px; top: 14px; max-width: calc(100% - 28px); } .vsl-unmute { white-space: nowrap; position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--display); color: var(--green-ink); background: var(--green); border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); } .vsl.has-video .vsl-poster, .vsl.has-video .vsl-ph, .vsl.has-video .demo-poster { display: none; } /* ── The Silence Test - two phones, same message (ported from the JV page) ── */ /* Floating 3D icons beside the silence-test phones (desktop). */ .sl-deco { position: absolute; z-index: 3; display: none; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(28, 189, 88, .3)); animation: chip-float 7.5s ease-in-out infinite; } .sl-deco-chat { left: 0; top: 56%; width: 190px; } .sl-deco-chart { right: 1%; top: 40%; width: 150px; animation-delay: -3s; } /* Needs the free space beside the 960px phones, so it starts at 1440px (below that the icons would sit on the phones). */ @media (min-width: 1440px) { .sl-deco { display: block; } } .silence { position: relative; margin-top: clamp(56px, 7vw, 88px); } .icon-wa { fill: currentColor; stroke: none; } .phones { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; max-width: 960px; margin: 0 auto; } .phones > .phone-col { display: flex; flex-direction: column; } .phones-vs { align-self: center; font: 700 .9rem/1 var(--display); letter-spacing: .14em; color: #A1B0AC; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ink-600); background: var(--ink-850); box-shadow: 0 0 0 8px rgba(255, 255, 255, .02); } /* Device frame: a dark bezel with a thin metallic rim and a short speaker slot. */ .phone { position: relative; display: flex; flex-direction: column; flex: 1; border-radius: 40px; padding: 12px; background: #0A0E10; border: 1px solid #2C3A40; box-shadow: inset 0 0 0 2px #151C20, 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 70px -20px rgba(240, 97, 109, .18); } .phone::before { content: ""; position: absolute; top: 5px; left: 50%; translate: -50% 0; z-index: 2; width: 64px; height: 4px; border-radius: 4px; background: #222C31; } .phone.win { border-color: rgba(28, 189, 88, .45); box-shadow: inset 0 0 0 2px #151C20, 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 80px -16px rgba(28, 189, 88, .35); } .phone-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 30px 30px 0 0; background: #1F2C33; color: #E9EDEF; } .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--display); color: #fff; background: #3B4A54; flex: none; } .phone.win .avatar { background: var(--green); color: var(--green-ink); } .phone-name { font: 600 .9rem/1.2 var(--body); } .phone-status { font-size: 12px; color: #9AA9B1; } .phone-status.online { color: var(--green); } .phone-wa { width: 18px; height: 18px; margin-left: auto; color: #25D366; opacity: .9; } .phone-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 420px; padding: 16px 12px 18px; border-radius: 0 0 30px 30px; background-color: #0B141A; background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 18px 18px; color: #E9EDEF; } .msg { max-width: 86%; padding: 8px 10px 6px; border-radius: var(--bubble); font-size: .86rem; line-height: 1.45; } .msg.out { align-self: flex-end; background: #005C4B; border-radius: var(--bubble-r); } .msg.in { align-self: flex-start; background: #202C33; } .msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11px; color: rgba(233, 237, 239, .85); } .ticks { width: 16px; height: 11px; color: #9FB0BA; transition: color .3s; } .ticks.read { color: #53BDEB; } .slot-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .slot { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(83, 189, 235, .55); color: #7fd3f5; transition: background-color .3s, color .3s, border-color .3s; } .slot.picked { background: var(--green); border-color: var(--green); color: var(--green-ink); } /* The typing bubble takes no space in the flow (height 0) and is drawn over the spot where the next, still hidden, message lands. That keeps the chat height constant, so the section never jumps. */ .typing { position: relative; align-self: flex-start; width: 56px; height: 0; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .typing::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 35px; border-radius: var(--bubble); background: #202C33; } .typing.show { opacity: 1; transform: none; } .typing i { position: absolute; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: bounce 1.2s infinite ease-in-out; } .typing i:nth-child(1) { left: 13px; } .typing i:nth-child(2) { left: 24px; animation-delay: .15s; } .typing i:nth-child(3) { left: 35px; animation-delay: .3s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .sys { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 12px; border-radius: var(--r-sm); background: rgba(32, 44, 51, .9); color: #b4c0c6; } .sys .icon { width: 14px; height: 14px; } .sys.bad { background: rgba(240, 97, 109, .12); color: #ffb3ba; border: 1px solid rgba(240, 97, 109, .3); } .clock { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; } /* Animated states are only hidden when JS is there to reveal them again. */ .js .msg, .js .sys { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease); } .js .msg.show, .js .sys.show { opacity: 1; transform: none; } .phone-result { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; margin: 16px 0 0; padding: 13px; border-radius: 999px; font: 700 1rem/1.2 var(--display); letter-spacing: .01em; } .phone-result.bad { color: #ffb3ba; background: rgba(240, 97, 109, .12); border: 1px solid rgba(240, 97, 109, .25); } .phone-result.good { color: #8ff0b4; background: var(--green-soft); border: 1px solid var(--green-line); } .silence-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 30px; } .replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid #5E6F75; background: transparent; color: #C3CFCC; font: 600 .9rem/1 var(--body); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; } .replay:hover { color: #fff; border-color: var(--green); background: var(--green-soft); } .replay .icon { transition: transform .5s var(--ease); } .replay:hover .icon { transform: rotate(-360deg); } @media (max-width: 900px) { .phones { grid-template-columns: 1fr; max-width: 440px; } .phones-vs { justify-self: center; } .phone-body { min-height: 0; } } /* ── 4 · Six bullets ────────────────────────────────────────────────────── */ .sec-bullets .container { position: relative; max-width: 1700px; } .b-head { margin-bottom: clamp(32px, 3.6vw, 48px); } .b-eyebrow { padding: 10px 30px; border: 1px solid rgba(28, 189, 88, .32); background: #DDF5E6; color: var(--green-deep); font: 700 .92rem/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; } .b-head .h-section { letter-spacing: -.005em; line-height: .94; } .section-head.center.b-head .h-section { max-width: none; } .b-hl { color: #18A957; } .b-head .lead { max-width: 46ch; margin: 16px auto 0; font-size: 1.12rem; } .b-deco { position: absolute; pointer-events: none; } .b-deco-spark { left: 17%; top: 70px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231CBD58' d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } .b-deco-plane { right: 210px; top: 80px; width: 80px; height: auto; filter: drop-shadow(0 16px 18px rgba(8, 70, 36, .22)); } .b-deco-chart { left: var(--gutter); top: 100px; width: 100px; height: auto; filter: drop-shadow(0 10px 12px rgba(8, 70, 36, .22)); } /* Both vectors drift gently; they run out of step so they never move together. */ .b-deco-plane { animation: b-fly 11s ease-in-out infinite; } .b-deco-chart { animation: b-bob 8.5s ease-in-out infinite; } @keyframes b-fly { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: -10px -12px; rotate: -4deg; } 50% { translate: 6px -20px; rotate: 3deg; } 75% { translate: 12px -8px; rotate: -2deg; } } @keyframes b-bob { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 5deg; } } /* Below ~1340px the heading runs on one line and fills the width, so the vectors move off it: the plane to the top corner, the chart a little smaller, and the sparkle goes. Hidden under 1100px (see below). */ @media (max-width: 1339px) { .b-deco-plane { right: var(--gutter); top: 0; width: 64px; } .b-deco-chart { top: 110px; width: 80px; } .b-deco-spark { display: none; } } .bullet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 1399px) { .bullet-grid { grid-template-columns: repeat(2, 1fr); } } .bullet { display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 12px; min-height: 236px; padding: 22px 18px 22px 24px; background: linear-gradient(135deg, var(--tint-a), var(--tint-b)); border: 1px solid rgba(12, 22, 19, .06); border-radius: 20px; box-shadow: 0 18px 40px -30px rgba(11, 60, 32, .35); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .bullet:hover { transform: translateY(-5px); border-color: var(--green-line); box-shadow: 0 28px 50px -30px rgba(11, 60, 32, .45); } /* Per-card tint (gradient start/end) and icon tile colour, in card order. */ .bullet:nth-child(1) { --tint-a: #EFFAF3; --tint-b: #DCF3E5; --ic: #5FD892; } .bullet:nth-child(2) { --tint-a: #F0F7FE; --tint-b: #DCEAF9; --ic: #A7D3F5; } .bullet:nth-child(3) { --tint-a: #F5FBE3; --tint-b: #E5F3C7; --ic: #86DA75; } .bullet:nth-child(4) { --tint-a: #FFF6EE; --tint-b: #FDE5D1; --ic: #FDB57F; } .bullet:nth-child(5) { --tint-a: #F6F2FE; --tint-b: #E6DDFA; --ic: #BCA6F2; } .bullet:nth-child(6) { --tint-a: #FFFAEA; --tint-b: #FCEEC4; --ic: #FAD565; } /* Pastel tints, in card order. */ .agent:nth-child(1) { --tint: #E6F7EE; } .agent:nth-child(2) { --tint: #E6F2FB; } .agent:nth-child(3) { --tint: #F1F9DA; } .agent:nth-child(4) { --tint: #FDEFE5; } .b-copy { min-width: 0; align-self: start; } .bullet p { color: var(--muted); font-size: .9rem; line-height: 1.5; } .bullet strong { display: block; font: 700 var(--fs-card)/1.15 var(--display); color: var(--fg); margin-bottom: 10px; } .b-icon { display: block; width: 58px; height: 58px; margin-bottom: 14px; filter: drop-shadow(0 12px 10px color-mix(in srgb, var(--ic) 55%, transparent)); transition: transform .4s var(--ease); } .b-icon svg { display: block; width: 100%; height: 100%; } .bullet:hover .b-icon { transform: translateY(-3px) rotate(-4deg); } .b-art { justify-self: center; width: 100%; max-width: 250px; height: auto; transition: transform .5s var(--ease); } .bullet:hover .b-art { transform: translateY(-6px); } @media (max-width: 991px) { .b-art { display: none; } .bullet { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 24px; } } /* Dummy slot until the vector illustrations arrive. */ /* ── 5 · Ticker ─────────────────────────────────────────────────────────── */ .ticker { background: var(--green); color: #fff; overflow: hidden; padding: 14px 0; } .ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-run { flex: none; display: flex; align-items: center; font: 600 clamp(.85rem, .8rem + .25vw, 1rem)/1 var(--display); letter-spacing: .04em; white-space: nowrap; } /* A star (eight-spoke asterisk) between items, drawn with a mask so it takes the text colour. */ .ticker-run i { flex: none; width: 15px; height: 15px; margin: 0 24px; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M2 12h20M5 5l14 14M19 5 5 19'/%3E%3C/g%3E%3C/svg%3E"); } @keyframes marquee { to { transform: translateX(-50%); } } /* ── 6 · How it works ───────────────────────────────────────────────────── */ /* Drifting background shapes: blurred colour blobs, dots, rings, sparkles and rounded squares. */ #how-it-works { overflow: hidden; } #how-it-works > .container { position: relative; z-index: 1; } .hw-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hw { position: absolute; display: block; width: var(--s, var(--w)); height: var(--s, var(--h)); animation: hw-drift var(--d, 12s) ease-in-out var(--dl, 0s) infinite; } .hw.blob { border-radius: 50%; filter: blur(70px); opacity: .55; animation-name: hw-blob; } .hw.b1 { background: radial-gradient(circle at 35% 35%, #7DF0B0, rgba(28, 189, 88, .0) 70%); } .hw.b2 { background: radial-gradient(circle at 50% 50%, #C9F26B, rgba(190, 235, 90, 0) 70%); opacity: .45; } .hw.b3 { background: radial-gradient(circle at 50% 50%, #5ADCC0, rgba(40, 200, 170, 0) 70%); opacity: .4; } .hw.dot { border-radius: 50%; background: linear-gradient(145deg, #5BE394, #14B25A); box-shadow: 0 4px 8px -2px rgba(11, 138, 67, .45); } .hw.dot.l { background: linear-gradient(145deg, #D6F58A, #A6D63C); box-shadow: 0 4px 8px -2px rgba(120, 160, 20, .4); } .hw.ring { border-radius: 50%; border: 3px solid rgba(28, 189, 88, .55); } .hw.ring.l { border-color: rgba(166, 214, 60, .75); } .hw.star { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231CBD58' d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; animation-name: hw-spin; } .hw.dots { border-radius: 16px; background: radial-gradient(circle, rgba(28, 189, 88, .75) 2.4px, transparent 2.8px) 0 0 / 16px 16px; opacity: .8; } .hw.dots.l { background-image: radial-gradient(circle, rgba(150, 200, 40, .85) 2.4px, transparent 2.8px); } @keyframes hw-drift { 0%, 100% { translate: 0 0; } 25% { translate: 14px -22px; } 50% { translate: -10px -38px; } 75% { translate: -18px -14px; } } @keyframes hw-blob { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 50px -40px; scale: 1.18; } } @keyframes hw-spin { 0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; } 50% { translate: 8px -26px; rotate: 90deg; scale: 1.25; } } @media (max-width: 700px) { .hw.ring { display: none; } .hw.blob { filter: blur(50px); } } @media (prefers-reduced-motion: reduce) { .hw { animation: none; } } .steps { --sg: clamp(64px, 8vw, 110px); display: grid; gap: var(--sg); } .step { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); } .step:nth-child(even) .step-visual { order: 2; } .step-visual, .step-copy, .dm-col, .dm-row { min-width: 0; } .step-visual { position: relative; isolation: isolate; } /* Soft green glow behind each visual. */ .step-visual::before { content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 50%, rgba(28, 189, 88, .16), transparent 100%); } .step-title { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; color: #0C1613; letter-spacing: .02em; margin-bottom: 20px; } .step-tag { display: flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 18px; padding: 8px 16px 8px 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(28, 189, 88, .55); color: var(--green-deep); font: 700 .82rem/1 var(--ui); letter-spacing: .08em; } .step-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .step-copy p { font-size: 1.14rem; line-height: 1.5; color: #3F4E49; max-width: 44ch; } /* Curved arrows linking the steps; the second one is mirrored so the path zigzags with the visuals. */ .step:nth-child(1)::after, .step:nth-child(2)::after { content: ""; position: absolute; left: 50%; top: calc(100% + var(--sg) / 2); z-index: 2; pointer-events: none; width: clamp(80px, 8.5vw, 128px); aspect-ratio: 351 / 250; translate: -50% -50%; background: url("../images/step_arrow.png") center / contain no-repeat; filter: drop-shadow(0 8px 8px rgba(11, 100, 50, .22)); } .step:nth-child(2)::after { scale: -1 1; } /* Arrow pops in when its step is revealed, then keeps nudging along its own direction. Uses `transform` only, so the centring `translate` and the mirroring `scale` stay untouched. */ .step:nth-child(1)::after, .step:nth-child(2)::after { animation: step-arrow-in .7s var(--ease) .5s both, step-arrow-nudge 2.2s ease-in-out 1.3s infinite; } .js .step:not(.is-in):nth-child(1)::after, .js .step:not(.is-in):nth-child(2)::after { animation: none; opacity: 0; } @keyframes step-arrow-in { from { opacity: 0; transform: translate(-14px, -18px) scale(.7); } to { opacity: 1; transform: none; } } @keyframes step-arrow-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, 10px); } } @media (prefers-reduced-motion: reduce) { .step:nth-child(1)::after, .step:nth-child(2)::after { animation: none; } } @media (max-width: 900px) { .step:nth-child(1)::after, .step:nth-child(2)::after { display: none; } } .window { position: relative; border-radius: 16px; overflow: hidden; background: var(--ink-850); border: 1px solid #22302F; box-shadow: 0 40px 70px -40px rgba(7, 30, 18, .55), 0 0 0 6px rgba(28, 189, 88, .06); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .step:hover .window { transform: translateY(-4px) rotate(-.3deg); box-shadow: 0 50px 80px -40px rgba(7, 30, 18, .6), 0 0 0 6px rgba(28, 189, 88, .1); } .window-bar { display: flex; gap: 6px; padding: 11px 14px; background: #0B1013; border-bottom: 1px solid #1B2528; } .window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2C3A40; } .window-bar i:first-child { background: #F0616D; } .window-bar i:nth-child(2) { background: var(--gold); } .window-bar i:nth-child(3) { background: var(--green); } .window img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* Step 2 mockup */ .deploy-mock .dm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: clamp(16px, 3vw, 28px); aspect-ratio: 16 / 9; align-content: center; } .dm-col { display: grid; gap: 8px; align-content: start; } .dm-label { margin: 0 0 4px; font: 700 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #7D8E8A; } .dm-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: #121A1D; border: 1px solid #1F2A2F; font-size: clamp(.72rem, .6rem + .4vw, .88rem); font-weight: 600; color: #DDE7E4; } .dm-row .icon { width: 16px; height: 16px; } .dm-wa { color: #25D366; } .dm-tg { color: #2AABEE; } .tog { margin-left: auto; width: 30px; height: 17px; border-radius: 999px; background: #2C3A40; position: relative; flex: none; transition: background-color .3s var(--ease); } .tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8696A0; transition: transform .3s var(--ease), background-color .3s var(--ease); } .dm-row.on .tog { background: var(--green); transition-delay: calc(var(--t) * 180ms + 300ms); } .dm-row.on .tog::after { transform: translateX(13px); background: #fff; transition-delay: calc(var(--t) * 180ms + 300ms); } .dm-row.on { border-color: rgba(28, 189, 88, .3); transition: border-color .3s var(--ease) calc(var(--t) * 180ms + 300ms); } /* Before the step is revealed, toggles sit in the off state. */ .js .step:not(.is-in) .dm-row.on .tog { background: #2C3A40; } .js .step:not(.is-in) .dm-row.on .tog::after { transform: none; background: #8696A0; } .js .step:not(.is-in) .dm-row.on { border-color: #1F2A2F; } /* ── 7 · First proof / 21 · Results - testimonial cards ───────────────── */ /* Wrapping row, centred, so any count (2, 4, 5, 6) lines up without gaps. */ .t-grid { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .t-grid-2 { --cols: 2; } .t-grid > .t-card { flex: 0 1 calc((100% - (var(--cols) - 1) * 20px) / var(--cols)); } .t-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 34px); margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 50px -36px rgba(12, 22, 19, .4); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .t-card:hover { transform: translateY(-4px); border-color: var(--green-line); box-shadow: 0 30px 60px -36px rgba(11, 60, 32, .5); } /* Large faint quote mark in the corner. */ .t-card::before { content: "\201C"; position: absolute; right: 22px; top: 2px; font: 700 6.5rem/1 var(--display); color: rgba(28, 189, 88, .12); pointer-events: none; } .t-stars { display: flex; gap: 3px; color: #F5B301; } .t-stars .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; } .t-headline { margin: 0; font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.2 var(--display); letter-spacing: .01em; color: var(--fg); max-width: 26ch; } .t-text { margin: 0; color: var(--muted); font-size: 1rem; } .t-result { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font: 700 .88rem/1.2 var(--body); } .t-result .icon { width: 15px; height: 15px; stroke-width: 2.6; } .t-person { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); } .t-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; font: 700 1.05rem/1 var(--display); color: var(--green-ink); background: linear-gradient(135deg, #7BE3A4, var(--green)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green-line); } .t-name { display: block; font: 700 1.05rem/1.2 var(--body); color: var(--fg); } .t-role { display: block; font-size: .88rem; color: var(--muted); } /* ?review preview only. */ .t-sample { position: absolute; left: 22px; top: -11px; font: 700 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8A5A00; background: #FFF4D6; border: 1px solid #F1D48A; padding: 5px 8px; border-radius: 6px; } @media (max-width: 1024px) { .t-grid { --cols: 2; } } @media (max-width: 680px) { .t-grid, .t-grid-2 { --cols: 1; } } /* ── 8 · Market ─────────────────────────────────────────────────────────── */ .market-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; text-align: center; margin-bottom: clamp(48px, 6vw, 72px); } .market-head .h-section { max-width: 22ch; } .market-intro { max-width: 70ch; } .market-intro p { font-size: var(--fs-lead); color: var(--muted); } .stats-lead { font-size: var(--fs-lead); margin-bottom: 20px; } .stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .stat { padding: clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease); } .stat:hover { background: rgba(28, 189, 88, .05); } .stat:last-child { grid-column: span 2; background: linear-gradient(160deg, rgba(28, 189, 88, .16), rgba(28, 189, 88, .03)); } .stat-num { display: block; font: 700 clamp(2.6rem, 1.8rem + 3vw, 4.4rem)/1 var(--display); color: var(--green); letter-spacing: 0; font-variant-numeric: tabular-nums; margin-bottom: 14px; } .stat-sym { font: 800 .64em/1 var(--body); margin-left: .04em; letter-spacing: 0; } .stat-sym:first-child { margin: 0 .04em 0 0; vertical-align: .22em; } .stat-num small { font-size: .42em; color: var(--fg); letter-spacing: 0; vertical-align: .55em; margin-right: .1em; } .stat p { color: #C3CFCC; font-size: .95rem; } .stat cite { display: block; margin-top: 6px; font-size: .8rem; } .market-read { max-width: 62rem; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; } .market-read p { font-size: var(--fs-lead); color: var(--muted); max-width: 66ch; margin-left: auto; margin-right: auto; } .market-read .pull { margin-top: 32px; font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem)/1.2 var(--display); color: var(--fg); max-width: 34ch; text-wrap: balance; } .market-read .pull strong { color: var(--fg); } /* ── 9 · Problem ────────────────────────────────────────────────────────── */ #problem .container { max-width: 1600px; } #problem .section-head.center { max-width: 100%; } #problem .section-head.center .h-section.wide { max-width: none; text-wrap: wrap; } /* Five compact cards on a 24-track grid: the top two sit centred and narrower, the bottom three run the full width. Every card is art left, copy right, and the cost strip across the foot. */ .problems { display: grid; grid-template-columns: repeat(24, 1fr); column-gap: 20px; row-gap: 22px; } .problem { grid-column: span 8; } .problem:nth-child(1) { grid-column: 4 / span 9; } .problem:nth-child(2) { grid-column: 13 / span 9; } .problem { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 20px; align-items: center; padding: 22px 24px 20px 20px; border-radius: 16px; background: radial-gradient(130px 130px at 76px 70px, rgba(28, 189, 88, .1), transparent 70%), #fff; border: 1px solid #E8EFEA; box-shadow: 0 1px 2px rgba(12, 22, 19, .04), 0 20px 40px -32px rgba(11, 60, 32, .4); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .problem:hover { transform: translateY(-4px); border-color: var(--green-line); box-shadow: 0 2px 4px rgba(12, 22, 19, .04), 0 28px 50px -32px rgba(11, 60, 32, .5); } .p-art { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(8, 50, 26, .18)); transition: transform .5s var(--ease); } .problem:hover .p-art { transform: translateY(-4px) rotate(-3deg); } .p-body { min-width: 0; } .problem h3 { font-size: 1.15rem; line-height: 1.25; color: #0C1613; margin-bottom: 6px; } .problem p { color: var(--muted); font-size: .9rem; line-height: 1.5; } .p-cost { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 16px 0 0 !important; padding: 10px 14px; border-radius: 10px; background: #FFF1F2; border: 1px solid rgba(240, 97, 109, .18); } .p-warn { width: 18px; height: 18px; flex: none; color: #E5484D; } .p-cost em { color: var(--red-deep); font-weight: 600; font-size: .85rem; line-height: 1.35; } /* TRIAL: red colourway for the five cards (section carries .is-red). */ #problem.is-red .problem { background: radial-gradient(130px 130px at 76px 70px, rgba(240, 72, 80, .12), transparent 70%), linear-gradient(180deg, #fff, #FFF8F8); border-color: #F5DCDE; box-shadow: 0 22px 44px -32px rgba(120, 18, 28, .38); } #problem.is-red .problem:hover { border-color: rgba(229, 72, 77, .45); box-shadow: 0 30px 52px -32px rgba(120, 18, 28, .5); } #problem.is-red .p-art { filter: drop-shadow(0 12px 14px rgba(120, 18, 28, .2)); } #problem.is-red .p-cost { background: #FFEDEE; border-color: rgba(229, 72, 77, .26); } #problem.is-red .eyebrow { border-color: #E5484D; background: #FFEDEE; color: var(--red-deep); } #problem.is-red #h-problem .hl { color: var(--red-deep); } /* ── 10 · Obvious fixes ─────────────────────────────────────────────────── */ #obvious-fixes { --fg: #fff; --muted: #B4C0BB; color-scheme: dark; overflow: hidden; padding-top: 70px; padding-bottom: 100px; background: url("../images/dont_work/waves.svg") center / 100% 100% no-repeat, radial-gradient(60% 46% at 50% 0%, rgba(28, 189, 88, .2), transparent 72%), /* Green glow along the bottom, so the section reads as separate from the dark one below. */ radial-gradient(75% 30% at 50% 100%, rgba(28, 189, 88, .24), transparent 78%), linear-gradient(180deg, #07130E 0%, #050B09 55%, #050E0A 100%); } /* Two faint dot grids, as in the reference: top-left and bottom-right. */ #obvious-fixes::before, #obvious-fixes::after { content: ""; position: absolute; width: 132px; height: 84px; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .28) 1.1px, transparent 1.6px) 0 0 / 22px 21px; } #obvious-fixes::before { left: clamp(24px, 8vw, 150px); top: 90px; } #obvious-fixes::after { right: clamp(24px, 8vw, 150px); bottom: 120px; } #obvious-fixes .container { position: relative; z-index: 1; max-width: 1300px; } #obvious-fixes .h-section { color: #fff; } .fx-hl { background: linear-gradient(180deg, #B6FFD6, #3DE08A); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Compact two-column cards: an icon tile on the left, title and copy on the right. */ .fixes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 auto; } .fix { display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 18px 26px 18px 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 44px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* .js .reveal sets its own slow transition; restate it so the hover (lift, border, shadow) animates smoothly too. */ .js .reveal.fix { transition: opacity .6s var(--ease), transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .fix:hover { transform: translateY(-3px); border-color: rgba(28, 189, 88, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 54px -30px rgba(28, 189, 88, .35); } /* The picture already carries its red cross badge, so it overhangs the tile's top-left corner. */ .fix-ico { position: relative; flex: none; width: 96px; height: 96px; border-radius: 22px; background: radial-gradient(90% 90% at 30% 20%, #4A1A1F, #2A0F13 70%); border: 1px solid rgba(240, 72, 80, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 24px -14px rgba(0, 0, 0, .8); } .fix-art { position: absolute; left: -10px; top: 50%; width: 112px; height: auto; transform: translateY(-50%); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); transition: transform .4s var(--ease); } .fix:hover .fix-art { transform: translateY(-53%) rotate(-3deg); } .fix h3 { font-size: 1.2rem; line-height: 1.2; color: #fff; margin-bottom: 6px; } .fix p { color: var(--muted); font-size: .95rem; line-height: 1.5; } /* ── 11 + 12 · Bridge + Introducing ─────────────────────────────────────── */ .sec-bridge { overflow: hidden; } .bridge { text-align: center; max-width: 60rem; margin: 0 auto; } .bridge .h-section { margin: 0 auto 28px; max-width: 22ch; } .bridge p { font-size: var(--fs-lead); color: var(--muted); max-width: 64ch; margin-left: auto; margin-right: auto; } .bridge-q { margin-top: 28px !important; font: 700 clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem)/1.25 var(--display) !important; color: var(--fg) !important; max-width: 40ch !important; } .intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: stretch; margin-top: clamp(56px, 8vw, 104px); } /* Grid panel behind a product box: canvas grid + pulses drawn by main.js. */ .grid-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); border: 1px solid var(--ink-700); background: radial-gradient(58% 58% at 50% 55%, rgba(28, 189, 88, .16), transparent 72%), var(--ink-800); } .grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .grid-panel img { position: relative; z-index: 1; } /* Fills the full height of the text column beside it. */ .intro-visual { min-height: 460px; } .intro-copy { align-self: center; } .intro-box { position: absolute !important; left: 50%; top: 50%; height: 86%; width: auto; max-width: 90%; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); animation: float 7s ease-in-out infinite; } .intro-name { font-size: clamp(3rem, 2rem + 4.6vw, 6rem); line-height: .95; letter-spacing: -.01em; } .brand-ai { color: var(--green); } .intro-tag { font-size: var(--fs-h3); margin: 14px 0 22px; color: #CFE9D9; font-weight: 400; } .intro-copy > p { font-size: var(--fs-lead); color: var(--muted); max-width: 52ch; } /* ── 13 · Founder ───────────────────────────────────────────────────────── */ #founder .container { max-width: 1180px; } .founder { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(28px, 4.5vw, 60px); background: radial-gradient(60% 70% at 100% 0%, rgba(28, 189, 88, .12), transparent 70%), linear-gradient(135deg, #F1FBF5, #FAFFFC 65%); border: 1px solid rgba(28, 189, 88, .24); border-radius: 30px; box-shadow: 0 40px 80px -56px rgba(11, 100, 50, .55); } .f-tag { margin-bottom: 18px; padding: 8px 18px; font-size: .95rem; background: #fff; } .f-name { font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); line-height: 1; letter-spacing: .005em; color: #0C1613; font-family: var(--display-xl); } .f-role { margin: 12px 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); color: #3E4B47; } .f-rule { display: block; width: 78px; height: 3px; margin: 20px 0; border-radius: 3px; background: var(--green); } .f-text { max-width: 36ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: #24302D; } .f-chips { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 540px; margin-top: 28px; } .f-chips li { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 2px 10px; text-align: center; font: 600 .95rem/1.3 var(--ui); color: #24302D; } .f-chips li + li { border-left: 1px solid rgba(12, 22, 19, .16); } .f-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #E4F7EB; border: 1px solid rgba(28, 189, 88, .2); color: var(--green-deep); } .f-ic .icon { width: 26px; height: 26px; stroke-width: 1.8; } .f-hand { display: flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1 "Caveat", "Segoe Script", "Brush Script MT", cursive; color: var(--green-deep); transform: rotate(-2deg); transform-origin: left; } .f-arrow { width: 54px; height: 30px; margin-top: 8px; color: #0C1613; } .founder-media { position: relative; padding: 18px 0 30px 22px; } .f-shape { position: absolute; inset: -34px -34px -10px 30%; z-index: 0; border-radius: 40px 90px 40px 80px; rotate: 6deg; background: linear-gradient(150deg, #CDEFD9, #A9E4BF); } .f-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 4.6; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 50px -28px rgba(8, 70, 36, .55); } .f-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .f-badge { position: absolute; z-index: 2; left: -8px; bottom: 0; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 22px 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 22px 40px -22px rgba(8, 70, 36, .6); font: 500 .96rem/1.25 var(--ui); color: #24302D; } .f-badge strong { font-weight: 800; color: #0C1613; } .f-bars { width: 34px; height: 34px; flex: none; fill: var(--green); } .ph-inline-card { min-height: 0; padding: 20px; } /* ── 14 · What's inside ─────────────────────────────────────────────────── */ #whats-inside .container { max-width: 1850px; } /* Four columns, one agent each: art on top, then the title, then the copy. */ .agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .agent { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-lg); background: var(--tint, var(--card)); border: 1px solid rgba(12, 22, 19, .05); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .agent:hover { transform: translateY(-5px); border-color: var(--green-line); box-shadow: 0 26px 48px -30px rgba(11, 60, 32, .45); } .agent-img { display: block; width: 96px; height: 96px; margin-bottom: 18px; } .agent-img img { width: 96px; height: 96px; transition: transform .4s var(--ease); } .agent:hover .agent-img img { transform: scale(1.06) rotate(-3deg); } .agent h3 { font-size: clamp(1.45rem, 1.05rem + .75vw, 1.8rem); margin: 0 0 10px; } .agent p { color: var(--muted); font-size: 1.02rem; } .tools-wrap { margin: clamp(56px, 7vw, 88px) auto 0; max-width: 1400px; } .tools-title { text-align: center; margin-bottom: 32px; } /* Two columns of horizontal cards: picture left, then a category tag, the title and the copy. */ .tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .tool { display: flex; align-items: center; gap: 24px; padding: 24px 30px 24px 22px; background: #fff; border: 1px solid #DEE8E2; border-radius: 18px; box-shadow: 0 1px 2px rgba(12, 22, 19, .04), 0 18px 36px -30px rgba(11, 60, 32, .35); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .tool:hover { transform: translateY(-3px); border-color: var(--green-line); box-shadow: 0 2px 4px rgba(12, 22, 19, .04), 0 24px 44px -30px rgba(11, 60, 32, .5); } .t-img { flex: none; width: 104px; height: auto; filter: drop-shadow(0 10px 12px rgba(8, 50, 26, .18)); transition: transform .4s var(--ease); } .tool:hover .t-img { transform: translateY(-3px) rotate(-3deg); } .t-body { min-width: 0; } .tools .tool h4 { display: inline-block; margin-bottom: 12px; padding: 7px 16px; border-radius: 999px; background: #EEFAF3; border: 1px solid rgba(28, 189, 88, .16); color: var(--green-deep); font-size: 1.15rem; line-height: 1.2; } .tool p { color: var(--muted); font-size: .98rem; line-height: 1.55; } /* 21: results. */ #results .container { max-width: 1600px; } /* ── 15 · Second demo ───────────────────────────────────────────────────── */ .vsl-demo { max-width: 980px; margin: 0 auto; } .demo-poster { position: absolute; inset: 0; } .demo-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: saturate(.8); } /* ── 16 + 27 · Comparison tables ────────────────────────────────────────── */ .compare { max-width: 980px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: 0 30px 60px -44px rgba(12, 22, 19, .4); } .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .compare-table th, .compare-table td { padding: 18px clamp(14px, 2.4vw, 28px); text-align: left; vertical-align: top; } .compare-table thead th { font: 700 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.2 var(--display); } .compare-table thead .c-old { background: #F6F7F7; color: #5B6966; } .compare-table thead .c-new { background: var(--green); color: var(--green-ink); } .compare-table tbody tr + tr td { border-top: 1px solid var(--line); } .compare-table td.c-old { color: #6B7976; background: #FBFCFC; } .compare-table td.c-new { color: var(--fg); font-weight: 600; background: #F4FCF7; } .compare-table tbody td { position: relative; padding-left: calc(clamp(14px, 2.4vw, 28px) + 26px); } .compare-table tbody td::before { position: absolute; left: clamp(14px, 2.4vw, 28px); top: 23px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/18px var(--body); text-align: center; } .compare-table td.c-old::before { content: "✕"; background: #FDECEE; color: var(--red-deep); } .compare-table td.c-new::before { content: "✓"; background: var(--green); color: var(--green-ink); } .compare-table tbody tr { transition: background-color .2s var(--ease); } .compare-table tbody tr:hover td.c-new { background: #E9F8EF; } .compare-life { max-width: 900px; } /* 27 only: the 30-day table on a dark stage. The bg art carries the red and green calendars at its edges, so the table stays in the middle. */ #thirty-days { background: url("../images/thirty_day/bg.webp") center / cover no-repeat, #04110A; /* The FAQ section below has a curved top edge that overlaps this one by --curve, so the bottom padding adds it back to match the top. */ padding: calc(var(--sec-pad) + 8px) 0 calc(var(--sec-pad) + 8px + var(--curve)); } #thirty-days .section-head { margin-bottom: clamp(26px, 3vw, 40px); } #thirty-days .eyebrow { padding: 9px 20px; border-color: rgba(28, 189, 88, .45); background: rgba(28, 189, 88, .12); color: #7BEFA6; letter-spacing: .08em; text-transform: uppercase; font-size: .86rem; font-weight: 700; } #thirty-days .eyebrow .icon { width: 16px; height: 16px; color: var(--green); } #thirty-days .h-section { color: #fff; } #thirty-days .t-hl { color: var(--green); } #thirty-days .lead { color: #BFD0C8; max-width: 44ch; margin: 18px auto 0; } #thirty-days .compare-life { max-width: 860px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(6, 16, 11, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(28, 189, 88, .08); } #thirty-days .compare-table thead th { color: #fff; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); padding-top: 22px; padding-bottom: 22px; } #thirty-days .compare-table thead .c-old { background: rgba(255, 255, 255, .06); color: #E4ECE8; } #thirty-days .compare-table thead .c-new { background: linear-gradient(120deg, #22C863, #0E9F49); color: #fff; } #thirty-days .compare-table tbody tr + tr td { border-top-color: rgba(255, 255, 255, .08); } #thirty-days .compare-table td.c-old { background: transparent; color: #D3DDD9; } #thirty-days .compare-table td.c-new { background: rgba(28, 189, 88, .09); color: #fff; font-weight: 600; } #thirty-days .compare-table td.c-old::before { background: #E5484D; color: #fff; } #thirty-days .compare-table td.c-new::before { background: var(--green); color: #04150B; } #thirty-days .compare-table tbody tr:hover td.c-new { background: rgba(28, 189, 88, .16); } /* 27 redesigned after the reference: the table is the focus (stronger glow and shadow), the background is dimmed, and the red "without" and green "with" calendars stand at the lower left and right, just overlapping the table's corners. These rules come after the earlier #thirty-days rules and override them. */ #thirty-days { /* Two dark layers over the picture: an even one, and an extra one behind the table so the table stands out. */ background: radial-gradient(62% 52% at 50% 58%, rgba(1, 8, 5, .6), transparent 100%), linear-gradient(rgba(1, 8, 5, .74), rgba(1, 8, 5, .74)), url("../images/thirty_day/bg.webp") center / cover no-repeat, #04110A; } #thirty-days .compare-life { position: relative; z-index: 1; max-width: 860px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); background: rgba(4, 12, 8, .88); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(28, 189, 88, .22), 0 0 70px -14px rgba(28, 189, 88, .3); } #thirty-days .compare-table thead th { padding: 18px 28px; font: 700 clamp(1rem, .95rem + .25vw, 1.12rem)/1.2 var(--ui); letter-spacing: .005em; } #thirty-days .compare-table thead .c-old { background: rgba(255, 255, 255, .08); color: #fff; } #thirty-days .compare-table thead .c-new { background: linear-gradient(180deg, #22D872, #0E9F49); color: #fff; } #thirty-days .compare-table tbody td { padding-top: 15px; padding-bottom: 15px; padding-left: 62px; font-size: .96rem; line-height: 1.4; vertical-align: middle; } #thirty-days .compare-table tbody td::before { left: 28px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; font-size: 12px; line-height: 24px; } #thirty-days .compare-table td.c-old { color: #E6EEEA; font-weight: 500; } #thirty-days .compare-table td.c-new { background: rgba(28, 189, 88, .1); border-left: 1px solid rgba(28, 189, 88, .28); color: #F1FBF5; font-weight: 500; } #thirty-days .compare-table td.c-old::before { background: #E5484D; color: #fff; box-shadow: 0 0 0 3px rgba(229, 72, 77, .22); } #thirty-days .compare-table td.c-new::before { background: linear-gradient(160deg, #36DC7E, #0FAE57); color: #fff; box-shadow: 0 0 0 3px rgba(28, 189, 88, .22); } /* The two calendars. Width follows the free space beside the table; hidden when there is no room. */ .t30-art { --art: clamp(0px, calc(50vw - 420px), 250px); position: absolute; z-index: 2; bottom: calc(var(--sec-pad) + 6px + var(--curve)); width: var(--art); height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .65)); animation: t30-float 7s ease-in-out infinite; } .t30-art-l { left: calc(50% - 430px - var(--art) + 18px); } .t30-art-r { right: calc(50% - 430px - var(--art) + 18px); animation-delay: -3.5s; } @keyframes t30-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @media (max-width: 1099px) { .t30-art { display: none; } } /* ── 16 · DESIGN 1 (original two-card table), disabled ────────────────────── To use it again: remove the comment marks around this block and the responsive block further down, and un-comment the table in index.html. Inner notes are shown in [brackets] because comments cannot be nested. [16 only: two cards, old way pink and new way green. Each card is drawn by a pseudo-element behind its column (--hang insets it if the pills should overhang). The table stays a table, so the rows still line up.] #compare .compare { --gap: 44px; --hang: 0px; position: relative; max-width: 1140px; padding-bottom: 14px; overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; } #compare .compare::before, #compare .compare::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; border-radius: 24px; } #compare .compare::before { left: var(--hang); width: calc(50% - var(--gap) / 2 - var(--hang)); background: #FFF3F3; border: 1px solid #F6B3B6; } #compare .compare::after { left: calc(50% + var(--gap) / 2 + var(--hang)); right: 0; background: linear-gradient(160deg, #0FC56C, #069E52); box-shadow: 0 40px 70px -40px rgba(6, 120, 60, .7); } #compare .compare-table { position: relative; z-index: 1; border-collapse: separate; border-spacing: var(--gap) 14px; width: calc(100% + 2 * var(--gap)); margin: 0 calc(-1 * var(--gap)); } #compare .compare-table thead th { padding: 10px 18px 10px calc(var(--hang) + 18px); background: none; } #compare .c-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 22px; border-radius: 18px; text-align: center; } #compare .c-kick { font: 700 1.15rem/1.1 var(--ui); } #compare .c-brand { font: 700 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--display); } #compare th.c-old .c-brand { color: #0C1613; } [The light logo has a white wordmark, so it sits on a dark pill. Only the "With" card uses it.] #compare .c-logo { display: block; box-sizing: content-box; width: auto; height: 32px; padding: 15px 30px; border-radius: 999px; background: linear-gradient(180deg, #14231B, #0A120E); box-shadow: 0 12px 26px -12px rgba(0, 30, 15, .65), inset 0 0 0 1px rgba(255, 255, 255, .06); } #compare th.c-old .c-head { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .6)); } #compare th.c-old .c-kick { color: #EE3B43; } #compare th.c-new .c-head { background: rgba(255, 255, 255, .14); } #compare th.c-new .c-kick { color: #fff; } [Reaction emoji perched on each card's top-right corner.] #compare .c-emoji { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(12, 22, 19, .22)); } #compare .c-emoji-sad { width: clamp(52px, 6vw, 100px); top: calc(clamp(52px, 6vw, 100px) * -.3); right: calc(50% + var(--gap) / 2 - clamp(52px, 6vw, 100px) * .26); } #compare .c-emoji-happy { width: clamp(60px, 8vw, 135px); top: calc(clamp(60px, 8vw, 135px) * -.4); right: calc(clamp(60px, 8vw, 135px) * -.3); [rotate: -8deg;] } #compare .compare-table tbody td { padding: 16px 20px 16px 58px; border-radius: 14px; font-size: 1.02rem; line-height: 1.4; vertical-align: middle; } #compare .compare-table tbody tr + tr td { border-top: 0; } [Each pill sits flush with its card's border and fades to nothing at both ends, so it melts into the card behind it.] #compare .compare-table td.c-old { background: linear-gradient(90deg, rgba(255, 218, 220, 0) 0%, #FFDADC 16%, #FFE4E5 55%, rgba(255, 228, 229, 0) 100%); color: #24302D; font-weight: 500; } #compare .compare-table td.c-new { background: linear-gradient(90deg, rgba(34, 227, 154, 0) 0%, #22E39A 16%, #15CD7B 55%, rgba(18, 199, 116, 0) 100%); color: #fff; font-weight: 700; } #compare .compare-table tbody td::before { left: 20px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; font-size: 12px; line-height: 24px; } #compare .compare-table td.c-old::before { background: #EE3B43; color: #fff; } #compare .compare-table td.c-new::before { background: #fff; color: #0BB461; } #compare .compare-table tbody tr:hover td.c-old { background: linear-gradient(90deg, rgba(255, 205, 208, 0) 0%, #FFCDD0 16%, #FFD9DB 55%, rgba(255, 217, 219, 0) 100%); } #compare .compare-table tbody tr:hover td.c-new { background: linear-gradient(90deg, rgba(53, 235, 168, 0) 0%, #35EBA8 16%, #1DD887 55%, rgba(24, 212, 125, 0) 100%); } ── end of design 1 ── */ /* ── 16 · DESIGN 2 (.vs2 tilted glass cards), disabled ───────────────────── To use it again: remove the comment marks around this block and un-comment the .vs2 markup in index.html. Inner notes are shown in [brackets]. [The two cards share one set of rows (subgrid), so row 1 of "Without" always sits level with row 1 of "With". Only the card shapes are tilted (the ::before / ::after layers); the text stays flat so the rows stay level.] .vs2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(26px, 4vw, 56px); max-width: 1100px; margin: 72px auto 0; padding: 18px 0 10px; [top margin only while the old table is shown above it] } .vs2-card { position: relative; display: grid; grid-template-rows: subgrid; grid-row: 1 / span 9; padding: 38px clamp(24px, 3.4vw, 48px) clamp(100px, 10vw, 134px); } .vs2-card > * { position: relative; z-index: 1; } .vs2-card::before, .vs2-card::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } .vs2-card::before { inset: 0; border-radius: 22px; } [Glass: a pale centre that deepens towards the edges, with a bright rim.] .vs2-old::before { background: radial-gradient(130% 95% at 50% 42%, #FFF7F7 0%, #FFE6E7 62%, #FFD3D6 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(246, 170, 175, .45), 0 36px 60px -40px rgba(190, 40, 50, .55), inset 0 0 40px rgba(255, 255, 255, .55); transform: perspective(1000px) rotateY(6deg); transform-origin: 100% 50%; } [The green card is a bright green slab (::before) with the mint face (::after) drawn smaller on top, so green shows as a thick slanted edge at the left and top.] .vs2-new::before { background: linear-gradient(160deg, #1CE077, #06A24F); box-shadow: 0 36px 60px -40px rgba(6, 120, 60, .65); transform: perspective(1000px) rotateY(-6deg); transform-origin: 0 50%; } .vs2-new::after { inset: 8px 0 0 12px; border-radius: 18px 22px 22px 18px; background: radial-gradient(130% 95% at 50% 42%, #F5FFF9 0%, #E0F9EA 62%, #CDF4DE 100%); box-shadow: inset 0 0 36px rgba(255, 255, 255, .6); transform: perspective(1000px) rotateY(-6deg); transform-origin: 0 50%; } .vs2-head { grid-row: 1; text-align: center; margin-bottom: 20px; } .vs2-pill { display: inline-block; padding: 6px 17px; border-radius: 999px; font: 700 .72rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; } .vs2-old .vs2-pill { color: #E5484D; border: 1px solid #F2A0A5; background: #FFF1F1; } .vs2-new .vs2-pill { color: #0E9F49; border: 1px solid #86DDAE; background: #EAFBF1; } .vs2-title { margin-top: 12px; font: 700 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--display); color: #0C1613; } .vs2 ul { display: grid; grid-row: 2 / span 8; grid-template-rows: subgrid; } .vs2 li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 1.02rem; line-height: 1.4; color: #1F2B27; } .vs2 li::before { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--body); color: #fff; } .vs2-old li::before { content: "✕"; background: #EE3B43; } .vs2-new li::before { content: "✓"; background: #14B862; } [Charts: the falling one sits bottom-left under the list, the rising one bottom-right.] .vs2-chart { position: absolute !important; bottom: clamp(18px, 2.4vw, 30px); width: clamp(96px, 10vw, 136px); height: auto; pointer-events: none; } .vs2-old .vs2-chart { left: clamp(24px, 3.4vw, 48px); } .vs2-new .vs2-chart { right: clamp(24px, 3.4vw, 48px); } [Reaction emoji perched on each card's top-right corner (as in the old design).] .vs2-emoji { position: absolute !important; z-index: 3 !important; height: auto; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(12, 22, 19, .22)); } .vs2-emoji-sad { width: clamp(52px, 6vw, 100px); top: calc(clamp(52px, 6vw, 100px) * -.3); right: calc(clamp(52px, 6vw, 100px) * -.26); } .vs2-emoji-happy { width: clamp(60px, 8vw, 135px); top: calc(clamp(60px, 8vw, 135px) * -.4); right: calc(clamp(60px, 8vw, 135px) * -.3); } @media (max-width: 860px) { .vs2 { grid-template-columns: 1fr; max-width: 560px; row-gap: 40px; } .vs2-card { display: block; grid-row: auto; } .vs2 ul { display: block; } .vs2-old::before, .vs2-new::before, .vs2-new::after { transform: none; } } ── end of design 2 ── */ /* ── 16 · DESIGN 3 (.vs3), the one in use: photo cards, a night with no replies vs a night with SalesTeem ───── */ /* Same idea as .vs2: the two cards share rows (subgrid) so the lists line up. Everything is prefixed vs3. */ .vs3 { --media: clamp(230px, 24vw, 330px); --lift: 30px; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 84px); max-width: 1100px; margin: 0 auto; } .vs3-card { position: relative; display: grid; grid-template-rows: subgrid; grid-row: 1 / span 9; border-radius: 22px; isolation: isolate; } .vs3-old { background: #170B0C; box-shadow: 0 0 0 1px rgba(238, 59, 67, .5), 0 36px 60px -40px rgba(190, 30, 40, .55); } .vs3-new { background: #fff; box-shadow: 0 0 0 2px #19C964, 0 0 40px -6px rgba(25, 201, 100, .45), 0 36px 60px -34px rgba(6, 120, 60, .6); } .vs3-media { position: relative; grid-row: 1; height: var(--media); overflow: hidden; border-radius: 22px 22px 0 0; } /* The photos carry a thin white frame, so they are drawn slightly oversize and the frame falls outside the card. */ .vs3-media > img { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; object-position: 50% 22%; } .vs3-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .vs3-old .vs3-media::after { background: linear-gradient(180deg, rgba(23, 11, 12, 0) 38%, rgba(23, 11, 12, .72) 78%, #170B0C 100%); } .vs3-new .vs3-media::after { background: linear-gradient(180deg, rgba(4, 50, 28, 0) 40%, rgba(4, 50, 28, .7) 100%); } .vs3-head { position: absolute; z-index: 1; left: clamp(22px, 3vw, 40px); bottom: calc(var(--lift) + 18px); } .vs3-pill { display: inline-block; padding: 6px 15px; border-radius: 999px; font: 700 .72rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; } .vs3-old .vs3-pill { background: #B3232C; box-shadow: 0 8px 18px -8px rgba(238, 59, 67, .8); } .vs3-new .vs3-pill { background: #14B862; box-shadow: 0 8px 18px -8px rgba(25, 201, 100, .8); } .vs3-title { margin-top: 10px; font: 700 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--display); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); } .vs3-logo { display: block; width: auto; height: clamp(26px, 2.4vw, 34px); filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); } /* The list sits over the bottom of the photo. Both lists have the same padding so their rows match exactly. */ .vs3 ul { position: relative; z-index: 2; display: grid; grid-row: 2 / span 8; grid-template-rows: subgrid; margin: calc(-1 * var(--lift)) 14px 14px; padding: 6px clamp(18px, 2.4vw, 28px) 10px; border-radius: 18px; } .vs3-new ul { background: #fff; box-shadow: 0 16px 34px -20px rgba(5, 80, 40, .55); } .vs3 li { display: flex; align-items: center; gap: 14px; padding: 13px 0; font-size: 1.02rem; line-height: 1.4; } .vs3 li + li { border-top: 1px solid transparent; } .vs3-old li { color: #F4E9EA; } .vs3-old li + li { border-top-color: rgba(255, 255, 255, .12); } .vs3-new li { color: #1B2724; } .vs3-new li + li { border-top-color: #E4EEE8; } .vs3 li::before { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--body); color: #fff; } .vs3-old li::before { content: "✕"; background: linear-gradient(160deg, #F25A62, #D32F3A); } .vs3-new li::before { content: "✓"; background: linear-gradient(160deg, #2FD479, #0FAE57); } /* "VS" badge between the cards: a white disc with a mint ring. */ .vs3-mid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; pointer-events: none; display: grid; place-items: center; width: clamp(44px, 4.6vw, 60px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 2px solid #BFEBD2; color: #0E9F49; box-shadow: 0 0 0 8px rgba(28, 189, 88, .1), 0 12px 26px -10px rgba(6, 120, 60, .5); font: 800 italic clamp(1.05rem, 1rem + .3vw, 1.35rem)/1 var(--display); letter-spacing: .02em; } /* "New Appointment" notification on the With card: top right, hanging over the card's edge. */ .vs3-chip { position: absolute; z-index: 4; top: clamp(14px, 1.8vw, 24px); right: calc(-1 * clamp(14px, 2vw, 28px)); margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(15, 174, 87, .12); } .vs3-chip-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(160deg, #2FD479, #0FAE57); color: #fff; } .vs3-chip-ic .icon { width: 18px; height: 18px; } .vs3-chip strong { display: block; font: 700 .86rem/1.2 var(--ui); color: #0C1613; } .vs3-chip small { display: block; margin-top: 2px; font: 500 .72rem/1.2 var(--body); color: #6B7976; } /* Motion: the VS disc pulses with two rings spreading out; the appointment chip floats, its icon pops and a dot pings. */ .vs3-mid { animation: vs3-pulse 2.8s ease-in-out infinite; } .vs3-mid::before, .vs3-mid::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(25, 201, 100, .55); animation: vs3-ring 2.8s ease-out infinite; } .vs3-mid::after { animation-delay: 1.4s; } @keyframes vs3-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } } @keyframes vs3-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } } .vs3-chip { animation: vs3-float 4.6s ease-in-out infinite; } .vs3-chip::after { content: ""; position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; border-radius: 50%; background: #19C964; border: 2px solid #fff; animation: vs3-dot 2s ease-out infinite; } .vs3-chip-ic { animation: vs3-pop 4.6s ease-in-out infinite; } @keyframes vs3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes vs3-dot { 0% { box-shadow: 0 0 0 0 rgba(25, 201, 100, .6); } 100% { box-shadow: 0 0 0 10px rgba(25, 201, 100, 0); } } @keyframes vs3-pop { 0%, 70%, 100% { scale: 1; rotate: 0deg; } 78% { scale: 1.18; rotate: -8deg; } 86% { scale: 1.1; rotate: 6deg; } 94% { scale: 1; rotate: 0deg; } } /* Floating vectors across the whole #compare section (placed outside .vs3, so they run from top to bottom). Left: night (ignored bell top), drifting slowly and a little dimmed. Right: a good day (calendar top, target middle, growth chart bottom), bobbing upwards, with sparkles. They sit in the page margins, so they only show on wide screens (hidden below 1320px, shrunk below 1440px). */ #compare .container { position: relative; z-index: 1; } .vs3-deco { position: absolute; top: 0; bottom: 0; width: 0; z-index: 0; pointer-events: none; } .vs3-deco-l { left: 0; transform-origin: 0 50%; } .vs3-deco-r { right: 0; transform-origin: 100% 50%; } .vs3-d { position: absolute; max-width: none; height: auto; } .vs3-deco-l .vs3-d { filter: drop-shadow(0 14px 16px rgba(60, 20, 30, .28)); } .vs3-deco-r .vs3-d { filter: drop-shadow(0 14px 16px rgba(8, 70, 36, .24)); } .vs3-deco-l .vs3-d-bell { top: calc(50% - 45px); left: 70px; width: 108px; filter: drop-shadow(0 14px 16px rgba(60, 20, 30, .28)) saturate(.75) !important; animation: vs3-drift 13s ease-in-out -4s infinite; } .vs3-deco-r .vs3-d-cal { top: 7%; right: 64px; width: 132px; animation: vs3-rise 6.4s ease-in-out infinite; } .vs3-d-spark { width: 32px; height: 32px; filter: none !important; animation: vs3-twinkle 3.2s ease-in-out infinite; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231CBD58' d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } .vs3-d-star { width: 22px; height: 22px; filter: none !important; animation: vs3-twinkle 3.8s ease-in-out infinite; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F5C451' d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } .vs3-deco-l .vs3-d-star1 { top: 27%; left: 132px; } .vs3-deco-l .vs3-d-star2 { top: 63%; left: 118px; width: 16px; height: 16px; animation-delay: -2s; } .vs3-deco-r .vs3-d-spark1 { top: 25%; right: 122px; } .vs3-deco-r .vs3-d-spark2 { top: 63%; right: 108px; width: 24px; height: 24px; animation-delay: -1.6s; } @keyframes vs3-drift { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 4px 14px; rotate: 3deg; } } @keyframes vs3-rise { 0%, 100% { translate: 0 0; rotate: 3deg; } 50% { translate: 0 -16px; rotate: -3deg; } } @keyframes vs3-twinkle { 0%, 100% { scale: .7; opacity: .45; } 50% { scale: 1.15; opacity: 1; } } @media (max-width: 1439px) { .vs3-deco { scale: .66; } } @media (max-width: 1320px) { .vs3-deco { display: none; } } @media (max-width: 860px) { .vs3 { grid-template-columns: 1fr; max-width: 560px; row-gap: 28px; } .vs3-card { display: block; grid-row: auto; } .vs3 ul { display: block; } .vs3-mid { display: none; } .vs3-chip { right: 14px; } } /* ── 17 · What it replaces (receipt) ────────────────────────────────────── */ .receipt { position: relative; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 40px) clamp(28px, 4vw, 44px); box-shadow: 0 30px 60px -40px rgba(12, 22, 19, .45); } .receipt::after { /* torn edge */ content: ""; position: absolute; left: -1px; right: -1px; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, #fff 0) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, #fff 0) 0 0 / 16px 12px repeat-x; } .receipt-table { width: 100%; border-collapse: collapse; } .receipt-table th, .receipt-table td { padding: 12px 0; text-align: left; } .receipt-table td:last-child, .receipt-table th:last-child { text-align: right; } .receipt-table thead th { font: 700 .74rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--fg); padding-bottom: 14px; } .receipt-table tbody td { border-bottom: 1px dashed #D3DCD8; } .receipt-table tfoot th, .receipt-table tfoot td { padding-top: 16px; } .r-total th, .r-total td { font: 700 1.2rem/1.3 var(--display); border-bottom: 2px solid var(--fg); padding-bottom: 16px; } .receipt-table tbody td:last-child, .r-total td { font-variant-numeric: tabular-nums; font-weight: 600; } /* 17: three columns. What it replaces (picture) -> receipt -> the one thing that replaces it (picture). */ #replaces .container { max-width: 1660px; } .replaces { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, .8fr); justify-content: center; align-items: center; gap: clamp(16px, 2.4vw, 44px); } .replaces .receipt { max-width: none; margin: 0; } .rp-left img, .rp-art { width: 100%; height: auto; } .rp-left img { filter: drop-shadow(0 18px 24px rgba(11, 60, 32, .12)); } .rp-product { position: relative; } .rp-art { filter: drop-shadow(0 30px 34px rgba(6, 70, 34, .28)); } /* Arrow from the receipt to the product picture. */ .rp-go { position: absolute; left: -62px; top: 50%; width: 52px; height: 36px; color: var(--green); translate: 0 -50%; } /* 17 only: a rounded card with a soft shadow, plain rows, and a highlighted SalesTeem line. */ #replaces .receipt { border: 1px solid #DDE8E1; border-radius: 24px; padding: clamp(24px, 3vw, 38px) clamp(24px, 3.2vw, 42px) clamp(22px, 2.6vw, 34px); box-shadow: 0 34px 64px -40px rgba(11, 60, 32, .5), 0 2px 6px rgba(12, 22, 19, .04); } #replaces .receipt::after { content: none; } #replaces .receipt-table { border-collapse: separate; border-spacing: 0; } #replaces .receipt-table thead th { color: #6B7976; border-bottom: 1px solid #CBD6D0; padding-bottom: 14px; } #replaces .receipt-table tbody td { padding: 13px 0; color: #1B2623; border-bottom: 1px solid #E9EFEB; } #replaces .receipt-table tbody td:last-child { font-weight: 700; color: #0C1613; } #replaces .r-total th, #replaces .r-total td { border-bottom: 0; padding: 18px 0 14px; } #replaces .r-us th, #replaces .r-us td { background: #E6F8ED; padding: 16px 18px !important; } #replaces .r-us th { border-radius: 14px 0 0 14px; } #replaces .r-us td { border-radius: 0 14px 14px 0; } #replaces .receipt-note { max-width: 600px; margin-top: 26px; font-size: .8rem; color: #7A8885; } /* Each call-to-action promise gets a small green tick, as in the reference. */ .cta-note span:not(.sep)::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 7px 0 0; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%231CBD58'/%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .cta-note .sep { margin: 0 8px; color: #B5C2BC; } .receipt-note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: .82rem; line-height: 1.6; color: var(--muted); } .r-us th, .r-us td { font: 700 clamp(1.4rem, 1.2rem + .8vw, 1.8rem)/1.2 var(--display); color: var(--green-deep); padding-top: 18px !important; } /* ── 18 + 19 · Make money + license ─────────────────────────────────────── */ .ways { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .way { grid-column: span 2; } .way:nth-child(-n+4) { grid-column: span 3; } .way { padding: 30px; border-radius: var(--bubble); background: var(--card); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .way:hover { transform: translateY(-4px); border-color: var(--green-line); background: var(--card-2); } .way h3 { font-size: var(--fs-card); margin-bottom: 12px; } .way p { color: var(--muted); } .way-key { background: linear-gradient(160deg, rgba(28, 189, 88, .18), rgba(28, 189, 88, .02) 60%), var(--card); border-color: var(--green-line); } .fineprint { margin: 28px auto 0; max-width: 72ch; text-align: center; font-size: var(--fs-small); color: var(--muted); } .license { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; margin-top: clamp(56px, 7vw, 88px); padding: clamp(26px, 4vw, 52px); border-radius: var(--r-lg); background: radial-gradient(80% 120% at 0% 0%, rgba(28, 189, 88, .2), transparent 60%), var(--card); border: 1px solid var(--green-line); } .license-icon { width: 64px; height: 64px; border-radius: 18px 18px 18px 6px; display: grid; place-items: center; background: var(--green); color: var(--green-ink); box-shadow: 0 16px 30px -14px rgba(28, 189, 88, .9); } .license-icon .icon { width: 30px; height: 30px; } .license .h-sub { margin: 14px 0 18px; } .license p:not(.eyebrow) { color: var(--muted); font-size: var(--fs-lead); max-width: 64ch; } .license-no { color: var(--fg) !important; font-weight: 600; } /* ── 20 · Who this is for ───────────────────────────────────────────────── */ #who .container { max-width: 1700px; } .w-hl { color: #18A957; } #who .section-head .lead { max-width: 52ch; margin: 18px auto 0; } /* Two cards. Each has its 3D vector inside, green card on the left, red card on the right. */ .who { --art: clamp(170px, 15vw, 250px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-inline: calc(var(--art) * .84); margin-top: 8px; } .who-col { position: relative; isolation: isolate; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px); border-radius: 26px; border: 1.5px solid var(--line); } .who-yes { background: linear-gradient(160deg, #E9FAF0, #FAFFFC 72%); border-color: rgba(28, 189, 88, .38); box-shadow: 0 34px 60px -42px rgba(11, 100, 50, .6), inset 0 1px 0 #fff; } .who-no { background: linear-gradient(200deg, #FFEDED, #FFFAFA 72%); border-color: rgba(229, 72, 77, .32); box-shadow: 0 34px 60px -42px rgba(140, 20, 30, .5), inset 0 1px 0 #fff; } /* Soft curved wave in the bottom-right corner of each card, tinted to the card colour. */ .who-yes { --rgb: 28, 189, 88; } .who-no { --rgb: 229, 72, 77; } .who-col::after { content: ""; position: absolute; inset: auto 0 0 auto; width: 60%; height: 46%; z-index: -1; pointer-events: none; border-radius: 0 0 24px 0; background: linear-gradient(180deg, rgba(var(--rgb), .04), rgba(var(--rgb), .16)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 C 120 190 220 150 290 80 C 330 40 370 20 400 0 V200 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 C 120 190 220 150 290 80 C 330 40 370 20 400 0 V200 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .who-art { position: absolute; z-index: 2; width: var(--art); top: 0; filter: drop-shadow(0 22px 20px rgba(8, 60, 30, .24)); } .who-no { padding-right: calc(var(--art) * .16 + clamp(24px, 3vw, 44px)); } .who-yes .who-art { left: calc(var(--art) * -.84); } .who-no .who-art { top: auto; bottom: 0; right: calc(var(--art) * -.84); filter: drop-shadow(0 22px 20px rgba(140, 20, 30, .26)); } .who-art img { width: 100%; height: auto; transform-origin: 50% 60%; animation: who-float 5.5s ease-in-out infinite; } .who-no .who-art img { animation-name: who-float-b; animation-duration: 6.2s; animation-delay: -2s; } @keyframes who-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } } @keyframes who-float-b { 0%, 100% { transform: translateY(-10px) rotate(2deg); } 50% { transform: translateY(6px) rotate(-2deg); } } /* Below 1200px the two cards stack, each with its mascot above it. */ @media (max-width: 1199px) { .who { grid-template-columns: 1fr; padding-inline: 0; gap: 26px; max-width: 594px; margin-inline: auto; } .who-col, .who-yes, .who-no { padding: 24px 20px 22px; } .who-art, .who-yes .who-art, .who-no .who-art { position: static; translate: none; width: 150px; margin: 0 auto 14px; } } /* Laptops: smaller mascots so the two cards keep enough width for their headings. */ @media (min-width: 1200px) and (max-width: 1399px) { .who { --art: clamp(120px, 10vw, 140px); gap: 20px; } .who .who-col h3 { font-size: clamp(1.4rem, 1.1rem + .5vw, 1.7rem); white-space: normal; } } .who-body { min-width: 0; } .who-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--rgb), .22); } .who-badge { width: 64px; height: 64px; display: block; filter: drop-shadow(0 12px 12px var(--bd)); } .who-badge svg { width: 100%; height: 100%; display: block; } .who-yes { --bd: rgba(8, 130, 60, .35); } .who-no { --bd: rgba(200, 30, 45, .35); } .who-col h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; color: #0C1613; margin-bottom: 0; white-space: nowrap; } .hl-yes { color: #18A957; } .hl-no { color: #E5242F; } .who-head p { color: #3E4B47; font-size: .98rem; line-height: 1.5; } .who-col ul { margin: 0; padding: 0; } .who-col li { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #1B2623; font-size: 1.02rem; line-height: 1.45; } .who-col li:first-child { padding-top: 0; } .who-col li:last-child { padding-bottom: 0; } .who-col li svg { flex: none; width: 28px; height: 28px; display: block; filter: drop-shadow(0 4px 4px var(--bd)); } /* ── 22 + 23 · Bonuses + value stack ────────────────────────────────────── */ .sec-bonuses { --panel-glow: radial-gradient(50% 30% at 50% 0%, rgba(245, 196, 81, .12), transparent 70%); } /* Glowing dot-matrix patches in the panel background. */ .dot-patch { position: absolute; z-index: 0; pointer-events: none; width: 112px; height: 112px; background: radial-gradient(circle, rgba(123, 239, 166, .75) 1.3px, transparent 1.9px) 0 0 / 16px 16px; -webkit-mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 75%); mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 75%); filter: drop-shadow(0 0 4px rgba(28, 189, 88, .7)); opacity: .75; animation: dot-twinkle 4.5s ease-in-out infinite; } .dp-1 { right: calc(var(--panel-inset) + 6px); top: 26%; } .dp-2 { left: calc(var(--panel-inset) + 6px); top: 40%; animation-delay: -1.5s; } .dp-3 { left: calc(var(--panel-inset) + 6px); bottom: 12%; animation-delay: -3s; } .dp-4 { right: calc(var(--panel-inset) + 6px); bottom: 10%; animation-delay: -2.2s; } @keyframes dot-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } } @media (max-width: 1240px), (prefers-reduced-motion: reduce) { .dot-patch { animation: none; } } @media (max-width: 1240px) { .dot-patch { display: none; } } .bonus-head { position: relative; } .bh-img { position: absolute; z-index: 0; height: auto; pointer-events: none; filter: drop-shadow(0 18px 26px rgba(28, 189, 88, .35)); animation: who-float 5.5s ease-in-out infinite; } .bh-l { left: calc(-1 * clamp(0px, calc((100vw - 1100px) * .45), 150px)); top: 18%; width: clamp(56px, 6vw, 88px); } .bh-r { right: calc(-1 * clamp(0px, calc((100vw - 1100px) * .45), 150px)); top: 0; width: clamp(72px, 8vw, 116px); animation-delay: -2.6s; } @media (max-width: 900px) { .bh-img { display: none; } } .sec-bonuses::before { background: radial-gradient(58% 30% at 50% 90%, rgba(28, 189, 88, .42), transparent 72%), radial-gradient(50% 24% at 50% 0%, rgba(245, 196, 81, .10), transparent 70%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(180deg, var(--ink-950) 0%, #04170C 100%); } .bonuses { position: relative; display: grid; gap: 28px; } .bonus { position: relative; overflow: hidden; border-radius: 28px; border: 2px solid rgba(28, 189, 88, .65); background: radial-gradient(60% 60% at 0% 20%, rgba(28, 189, 88, .2), transparent 70%), linear-gradient(160deg, rgba(9, 42, 26, .96), rgba(4, 21, 12, .98)); box-shadow: 0 0 46px -14px rgba(28, 189, 88, .65), inset 0 0 44px rgba(28, 189, 88, .08); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .bonus:hover { transform: translateY(-3px); border-color: rgba(77, 255, 146, .85); box-shadow: 0 0 56px -10px rgba(28, 189, 88, .8), inset 0 0 44px rgba(28, 189, 88, .1); } /* Top: product box + value beside the intro copy */ .bonus-hero { display: grid; grid-template-columns: minmax(230px, 30%) 1fr; align-items: stretch; } .bonus-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 26px); border-right: 1px solid rgba(28, 189, 88, .32); background: radial-gradient(70% 60% at 50% 40%, rgba(28, 189, 88, .3), transparent 72%); } .bonus-box { width: auto; height: clamp(170px, 17vw, 230px); max-width: 100%; margin: -3% 0 -1%; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(28, 189, 88, .4)); } .bonus-val { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 26px; border-radius: 16px; font: 800 clamp(1.5rem, 1.3rem + .8vw, 1.9rem)/1 var(--display); color: #FFC93C; border: 2px solid rgba(245, 196, 81, .85); background: rgba(2, 14, 8, .82); box-shadow: 0 0 26px -6px rgba(245, 196, 81, .55), inset 0 0 18px rgba(245, 196, 81, .1); } .bonus-val small { font: 700 1rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #fff; } .bonus-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.6vw, 36px) clamp(14px, 1.6vw, 20px); } .bonus-tag { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; } .bonus-tag::before, .bonus-tag::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(77, 255, 146, .55)); } .bonus-tag::after { transform: scaleX(-1); } .bonus-n { display: inline-flex; align-items: center; gap: 10px; padding: 9px 26px; border-radius: 999px; font: 800 1.15rem/1 var(--display); letter-spacing: .04em; color: #fff; border: 1.5px solid #3CE678; background: linear-gradient(180deg, rgba(28, 189, 88, .38), rgba(7, 58, 31, .92)); box-shadow: 0 0 26px -6px rgba(28, 189, 88, .75), inset 0 1px 0 rgba(255, 255, 255, .2); } .bonus-n .icon { width: 22px; height: 22px; } .bonus .bonus-title { margin: 0 0 10px; font: 800 clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem)/1.06 var(--display); letter-spacing: -.015em; color: #fff; } .bonus-title .bt-1, .bonus-title .bt-2 { display: block; } .bonus-title .bt-2 { background: linear-gradient(90deg, #7DF7A9, #1CBD58 85%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .bonus .bonus-lead { margin: 0 0 6px; font: 700 clamp(1.02rem, .95rem + .4vw, 1.2rem)/1.3 var(--display); color: #fff; text-wrap: balance; } .bonus .bonus-intro { margin: 0 0 6px; color: var(--muted); font-size: .96rem; line-height: 1.5; } .bonus .bonus-intro:last-child { margin-bottom: 0; } /* Bottom: full-width receive list (3 across) + callout */ .bonus-more { padding: 6px clamp(20px, 2.6vw, 36px) clamp(18px, 2vw, 26px); border-top: 1px solid rgba(28, 189, 88, .22); } .bonus .bonus-get { display: flex; align-items: center; gap: 14px; margin: 12px 0 12px; font: 700 .82rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-hover); } .bonus .bonus-get::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(28, 189, 88, .6), transparent); } .bonus-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; } .bonus-list li { grid-column: span 2; } .bonus-list li:nth-child(n+4) { grid-column: span 3; } .bonus-list li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: rgba(28, 189, 88, .07); border: 1.5px solid rgba(28, 189, 88, .45); color: #C9D6D1; font-size: .9rem; line-height: 1.42; } .bonus-list strong { color: #fff; font-weight: 700; } .bl-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.2 8.3 2.4 2.4 5-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(180deg, #2FD46B, #12963F); box-shadow: 0 0 14px -2px rgba(28, 189, 88, .75), inset 0 1px 0 rgba(255, 255, 255, .3); } .bonus-out { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; padding: 11px 16px; border-radius: 14px; border: 1.5px solid rgba(245, 196, 81, .85); background: linear-gradient(90deg, rgba(245, 196, 81, .14), rgba(245, 196, 81, .04)); box-shadow: 0 0 24px -10px rgba(245, 196, 81, .6); } .bonus-out > .icon { flex: none; width: 24px; height: 24px; margin-top: 1px; color: #FFC93C; } .bonus .bonus-out p { margin: 0 0 4px; color: #F7F3E6; font-size: .93rem; line-height: 1.45; } .bonus .bonus-out p:last-child { margin-bottom: 0; } .bonus-lede { margin: 16px auto 0; max-width: 62ch; text-wrap: balance; font-size: 1.05rem; line-height: 1.5; color: var(--muted); } .bonus-lede strong { color: #fff; font-weight: 600; } .bl-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 8px; } .bl-sep { color: var(--green-hover); } @media (max-width: 900px) { /* Stacked: BONUS pill on top, then box + value in one compact row, then the copy. */ .bonus-hero { display: flex; flex-direction: column; } .bonus-copy { display: contents; } .bonus .bonus-copy > * { margin-left: clamp(18px, 4vw, 28px); margin-right: clamp(18px, 4vw, 28px); } .bonus .bonus-copy > .bonus-tag { order: -2; margin-top: 16px; } .bonus-side { order: -1; flex-direction: row; justify-content: center; gap: clamp(14px, 4vw, 28px); border-right: 0; border-bottom: 1px solid rgba(28, 189, 88, .32); margin-bottom: 14px; padding: 4px 18px 16px; background: radial-gradient(60% 90% at 30% 50%, rgba(28, 189, 88, .28), transparent 72%); } .bonus-box { height: auto; width: min(200px, 44%); margin: 0; } .bonus .bonus-copy > .bonus-intro:last-child { margin-bottom: 16px; } .bonus-list { grid-template-columns: repeat(2, 1fr); } .bonus-list li, .bonus-list li:nth-child(n+4) { grid-column: auto; } .bonus-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 640px) { .bonus { border-radius: 22px; } .bonus-list { grid-template-columns: 1fr; } .bonus-out { flex-direction: column; gap: 6px; } .bonus-n { padding: 8px 20px; font-size: 1.05rem; } .bonus-box { width: min(150px, 38%); } .bonus-val { padding: 8px 14px; font-size: 1.3rem; gap: 6px; } .bonus-val small { font-size: .78rem; } } .bonus-total { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); margin-top: 32px; font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.2 var(--display); } .bt-pill { display: inline-block; padding: 12px clamp(22px, 3vw, 38px); border-radius: 999px; border: 1.5px solid rgba(28, 189, 88, .7); background: rgba(28, 189, 88, .08); box-shadow: 0 0 0 4px rgba(28, 189, 88, .06), 0 0 28px -6px rgba(28, 189, 88, .55), inset 0 0 18px rgba(28, 189, 88, .1); } .bonus-total .tbc, .bonus-total .bt-val { color: var(--green-hover); } .bt-arrow { flex: none; width: clamp(44px, 6vw, 70px); height: auto; fill: none; stroke: var(--green-hover); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(28, 189, 88, .55)); } .bt-arrow-r { transform: scaleX(-1); } @media (max-width: 600px) { .bt-arrow { display: none; } } .stack-wrap { position: relative; max-width: 680px; margin: clamp(72px, 8vw, 112px) auto 0; } .stack-layer { position: absolute; inset: -14px; border-radius: calc(var(--r-lg) + 14px); border: 1.5px solid rgba(28, 189, 88, .6); background: linear-gradient(180deg, rgba(28, 189, 88, .18), rgba(28, 189, 88, .05)); box-shadow: 0 0 60px -8px rgba(28, 189, 88, .5), inset 0 0 30px rgba(28, 189, 88, .15); } .stack-perks { position: absolute; left: calc(100% + 44px); top: 22%; } .stack-perks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .stack-perks li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 9px 22px 9px 10px; border-radius: 999px; color: #fff; font: 700 1.05rem/1 var(--display); border: 1.5px solid rgba(28, 189, 88, .7); background: rgba(4, 23, 12, .75); box-shadow: 0 0 24px -6px rgba(28, 189, 88, .55), inset 0 0 14px rgba(28, 189, 88, .12); margin-left: calc(var(--i) * 9px); transform: rotate(-8deg); } .pk-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--green-ink); } .pk-ic .icon { width: 15px; height: 15px; stroke-width: 3; } .pk-arrow { display: block; width: 70px; height: auto; margin: 0 0 6px 18px; fill: none; stroke: var(--green-hover); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(28, 189, 88, .55)); } /* Bubbles pop in one by one when the stack scrolls into view, then bob gently. */ .js .stack-perks.reveal { opacity: 1; transform: none; } .js .stack-perks li { opacity: 0; transform: translateY(18px) scale(.4) rotate(-8deg); transition: opacity .45s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * .3s + .45s); } .js .stack-perks.is-in li { opacity: 1; transform: rotate(-8deg); animation: pk-bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .3s + 1.7s); } .js .stack-perks .pk-arrow path { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .7s var(--ease) .1s; } .js .stack-perks.is-in .pk-arrow path { stroke-dashoffset: 0; } @keyframes pk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @media (prefers-reduced-motion: reduce) { .js .stack-perks li { opacity: 1; transform: rotate(-8deg); transition: none; animation: none; } .js .stack-perks .pk-arrow path { stroke-dashoffset: 0; transition: none; } } @media (max-width: 1240px) { .stack-perks { display: none; } } .stack { position: relative; max-width: 680px; margin: 0 auto; background: #FBFCFB; color: #0C1613; border-radius: var(--r-lg); padding: clamp(40px, 5vw, 56px) clamp(20px, 4vw, 40px) clamp(22px, 3vw, 32px); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 90px -10px rgba(28, 189, 88, .45), 0 0 0 1px rgba(28, 189, 88, .25); --muted: #4A5955; --fg: #0C1613; } .stack-title { position: absolute; left: 50%; top: 0; transform: translate(-50%, -56%); margin: 0; font-size: 1rem; white-space: nowrap; } .stack-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: clamp(250px, 56vw, 360px); aspect-ratio: 1100 / 190; padding: 0 9% 1%; color: #fff; text-shadow: 0 2px 6px rgba(4, 40, 18, .55); font: 700 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1 var(--display); position: relative; isolation: isolate; filter: drop-shadow(0 14px 18px rgba(12, 127, 59, .45)); } /* The ribbon's folded ears tuck behind the card: below the card's top edge (56% of the ribbon height, see .stack-title) only the centre band shows. */ .stack-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/bonuse/glossy-green-ribbon.png") center / 100% 100% no-repeat; clip-path: polygon(0 0, 100% 0, 100% 56%, 89% 56%, 86% 100%, 14% 100%, 11% 56%, 0 56%); } .stack-pill .icon { width: 1.2em; height: 1.2em; } .stack-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } .stack-table td, .stack-table th { padding: 11px 12px; text-align: left; vertical-align: middle; } .stack-table td:last-child, .stack-table th:last-child { width: 180px; } .stack-table td:last-child, .stack-table th:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; } .stack-table tbody td { border-bottom: 1px dashed #D3DCD8; } .stack-table tbody tr:last-child td { border-bottom: 0; } .st-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; vertical-align: middle; margin-right: 14px; border-radius: 12px; background: var(--green-soft); color: var(--green-deep); box-shadow: inset 0 0 0 1px var(--green-line); } .st-ic .icon { width: 22px; height: 22px; } .st-name { display: inline-block; width: calc(100% - 56px); font-weight: 600; white-space: normal; vertical-align: middle; } .stack-table .s-bonus td { background: var(--green-soft); border-bottom: 0; } .stack-table .s-bonus td:first-child { border-radius: 14px 0 0 14px; } .stack-table .s-bonus td:last-child { border-radius: 0 14px 14px 0; } .stack-table tfoot { border-top: 0; } .s-total th, .s-total td { font: 700 1.25rem/1.3 var(--display); padding-top: 22px; } .s-total s { color: var(--red-deep); text-decoration-color: var(--red-deep); text-decoration-thickness: 2px; } .s-today th, .s-today td { font: 700 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem)/1.1 var(--display); color: var(--green-deep); padding-top: 10px; } .s-today td strong { display: inline-block; color: #fff; padding: 9px 20px; border-radius: 999px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); background: linear-gradient(90deg, #1AA651, #14994A 55%, #0C7F3B); box-shadow: 0 12px 24px -12px rgba(12, 127, 59, .7); } /* ── 24 · Offer ───────────────────────────────────────────────────────── Three bands, nothing sticky: product + title header, the full-width checklist, then a purchase bar with the price and the CTA side by side. */ .offer { position: relative; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 4vw, 44px); grid-template-areas: "visual eyebrow" "visual title" "list list" "buy buy"; padding: clamp(22px, 4vw, 52px); border-radius: calc(var(--r-lg) + 4px); background: linear-gradient(180deg, #FFFFFF, #F7FBF9); color: #0C1613; --fg: #0C1613; --muted: #4A5955; --accent: var(--green-deep); --line: #E1E8E4; box-shadow: 0 0 0 1px rgba(28, 189, 88, .45), 0 0 0 8px rgba(28, 189, 88, .1), 0 60px 120px -50px rgba(28, 189, 88, .55); } .offer strong, .stack strong { color: inherit; } .offer-body { display: contents; } .offer-visual { grid-area: visual; align-self: center; width: clamp(150px, 22vw, 230px); aspect-ratio: 1; display: grid; place-items: center; padding: 8%; } .offer-visual img { width: 100%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); animation: float 7s ease-in-out infinite; } .offer .eyebrow { grid-area: eyebrow; align-self: end; justify-self: start; } .offer-body .h-sub { grid-area: title; align-self: start; margin: 14px 0 0; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); } .offer-list { grid-area: list; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line); } .offer-list li { display: flex; gap: 10px; font-size: 1rem; line-height: 1.5; padding: 11px 0; border-bottom: 1px dashed var(--line); } .offer-list li > span:first-child { flex: none; } .offer-list .o-check { flex: none; align-self: flex-start; width: 24px; height: 24px; margin-top: 1px; } .offer-buy { grid-area: buy; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px 36px; margin-top: clamp(28px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: linear-gradient(120deg, #EAF8EF, #F6FBF2); border: 1px solid rgba(28, 189, 88, .25); } .price-regular { color: var(--muted); font-size: 1.05rem; margin-bottom: 6px; } .price-regular s { text-decoration-color: var(--red); text-decoration-thickness: 2px; color: #0C1613; } .price-today { font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem)/1.12 var(--display); letter-spacing: .01em; color: #0C1613; margin: 0; } .offer .cta-block { margin-top: 0; width: 100%; } /* Keep the guarantee notes to exactly two lines: each line wraps only between its parts. */ .offer .cta-note { font-size: .8rem; } .offer .cta-note span:not(.sep) { white-space: nowrap; } .offer .btn-xl { min-width: 0; } @media (max-width: 900px) { .offer-buy { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 680px) { .offer { grid-template-columns: 1fr; grid-template-areas: "visual" "eyebrow" "title" "list" "buy"; text-align: center; } .offer-visual { justify-self: center; margin-bottom: 8px; } .offer .eyebrow { justify-self: center; } .offer-list { grid-template-columns: 1fr; text-align: left; } } /* ── 25 · Guarantee ─────────────────────────────────────────────────────── */ .guarantee { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; max-width: 1040px; margin: 0 auto; } .seal { width: clamp(170px, 22vw, 260px); } .seal-svg { width: 100%; height: auto; } .seal-arc-text { transform-box: view-box; transform-origin: 100px 100px; animation: spin 40s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .seal-ring { fill: var(--green); } .seal-core { fill: var(--ink-950); } .seal-arc-text { font: 700 13.2px var(--body); letter-spacing: .14em; fill: var(--green-ink); } .seal-num { font: 700 60px var(--display); fill: #fff; } .seal-days { font: 700 15px var(--body); letter-spacing: .3em; fill: var(--green); } .guarantee-body .h-section { margin-bottom: 22px; } .guarantee-body p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--muted); max-width: 62ch; } .guarantee-body p strong { color: var(--fg); } /* ── 25 · Guarantee, new dark design (.gx): one dark card, text left, 3D shield right, five promise chips below ── */ .gx { position: relative; isolation: isolate; margin: 0 auto; overflow: hidden; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(22px, 3vw, 34px); border-radius: 30px; background: radial-gradient(70% 90% at 88% 18%, rgba(28, 189, 88, .24), transparent 70%), linear-gradient(160deg, #0C1F16, #06110B 72%); border: 1px solid rgba(28, 189, 88, .28); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(28, 189, 88, .35), inset 0 1px 0 rgba(255, 255, 255, .06); } #guarantee .container { max-width: 1600px; } .gx-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(20px, 3vw, 44px); align-items: center; } .gx-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 18px 8px 14px; border-radius: 999px; border: 1px solid rgba(28, 189, 88, .45); background: rgba(28, 189, 88, .12); color: #7BEFA6; font: 700 .84rem/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; } .gx-pill .icon { width: 16px; height: 16px; color: var(--green); } .gx-title { margin: 20px 0 22px; font: 700 clamp(2.3rem, 1.5rem + 3.2vw, 4rem)/1.04 var(--display-xl); color: #fff; letter-spacing: .005em; } .gx-hl { display: block; color: var(--gold); } .gx-hl > span { white-space: nowrap; } .gx-text p:not(.gx-pill) { max-width: 54ch; margin: 0 0 14px; color: #B9C9C2; font-size: 1.02rem; line-height: 1.65; } .gx-text p strong { color: #fff; } .gx-shield { justify-self: center; width: min(100%, clamp(250px, 31vw, 400px)); } .gx-shield-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55)); animation: float 7s ease-in-out infinite; } .gx-s-num { font: 800 112px/1 var(--display-xl); fill: #fff; letter-spacing: -.01em; } .gx-s-days { font: 700 26px var(--ui); letter-spacing: .38em; fill: #3DE08A; } .gx-s-rib { font: 800 21px var(--display); letter-spacing: .07em; fill: #fff; } .gx-chips { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(24px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(255, 255, 255, .04); } .gx-chips li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; text-align: center; color: #E6F0EB; font: 600 .92rem/1.3 var(--ui); } .gx-chips li + li { border-left: 1px solid rgba(255, 255, 255, .08); } .gx-ic { display: grid; place-items: center; width: 60px; height: 64px; margin: -6px 0 -2px; } .gx-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); transition: transform .4s var(--ease); } .gx-chips li:hover .gx-ic img { transform: translateY(-3px) rotate(-6deg) scale(1.07); } @media (max-width: 900px) { .gx-main { grid-template-columns: 1fr; text-align: center; } .gx-text p:not(.gx-pill) { margin-left: auto; margin-right: auto; } .gx-shield { grid-row: 1; } .gx-chips { display: flex; flex-wrap: wrap; justify-content: center; } .gx-chips li { flex: 1 1 33%; border-left: 0 !important; } } /* ── 26 · Why the price won't last ──────────────────────────────────────── */ #price .container { max-width: 1500px; } .p-hl { color: #18A957; } #price .section-head .lead { max-width: 52ch; margin: 16px auto 0; } .price-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 8px; } .price-art img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; filter: drop-shadow(0 28px 30px rgba(8, 70, 36, .22)); } .reasons { display: grid; gap: 18px; } .reason { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px 28px 24px 24px; border-radius: 22px; background: var(--rbg, #fff); border: 1px solid var(--rline, #E3ECE7); box-shadow: 0 1px 2px rgba(12, 22, 19, .03), 0 18px 36px -30px var(--rsh, rgba(11, 60, 32, .4)); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .reason:hover { transform: translateY(-3px); } .r-green { --rbg: linear-gradient(120deg, #E9FAEF, #F5FFF9); --rline: rgba(28, 189, 88, .28); --rsh: rgba(11, 100, 50, .5); } .r-gold { --rbg: linear-gradient(120deg, #FFF7DF, #FFFCF1); --rline: rgba(236, 180, 30, .3); --rsh: rgba(150, 100, 0, .45); } .r-blue { --rbg: linear-gradient(120deg, #E8F1FF, #F6FAFF); --rline: rgba(80, 140, 240, .3); --rsh: rgba(30, 80, 170, .45); } .r-num { position: absolute; left: 14px; top: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0E4D2C; color: #fff; font: 700 .8rem/1 var(--ui); letter-spacing: .04em; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); } .r-img { display: block; width: 120px; height: auto; filter: drop-shadow(0 10px 12px rgba(8, 50, 26, .2)); } .r-body h3 { font-size: clamp(1.1rem, 1rem + .35vw, 1.32rem); line-height: 1.25; color: #0C1613; margin-bottom: 8px; } .r-hl { color: #18A957; } .r-body p { color: #4A5955; font-size: .94rem; line-height: 1.55; } .cart-close { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; margin: 40px auto 0; width: fit-content; max-width: 100%; padding: 16px 40px; border-radius: 999px; background: linear-gradient(180deg, #FFF6F6, #FFE9EA); color: #24302D; border: 1.5px solid rgba(229, 72, 77, .32); box-shadow: 0 18px 36px -26px rgba(190, 30, 40, .55); font-size: 1.12rem; font-weight: 500; } .cart-close .icon { width: 28px; height: 28px; color: #D9242F; stroke-width: 2.2; } .cart-close strong { color: #D9242F; font-weight: 700; } @media (max-width: 991px) { .price-stage { grid-template-columns: 1fr; } } @media (max-width: 600px) { .stack-table th:last-child, .stack-table td:last-child { width: 118px; } .stack-table td, .stack-table th { padding: 10px 4px; } .st-ic { width: 34px; height: 34px; margin-right: 10px; } .st-ic .icon { width: 19px; height: 19px; } .st-name { width: calc(100% - 46px); } .stack-table .s-today th { font-size: 1.5rem; } .stack-table .s-total th, .stack-table .s-total td { font-size: 1.05rem; } .stack-table .s-today td strong { padding: 6px 10px; font-size: 1.05rem; white-space: nowrap; } .stack-pill { font-size: 1.1rem; } .reason { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px 16px 18px 14px; } .r-img { width: 64px; } .r-num { width: 28px; height: 28px; left: 8px; top: 8px; font-size: .7rem; } .cart-close { padding: 14px 20px; font-size: 1rem; } } @media (max-width: 575px) { .reason { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .r-img { width: 72px; } } /* ── 28 · FAQ ───────────────────────────────────────────────────────────── */ /* Two independent columns: opening a question only pushes its own column. */ .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: start; } .faq-col { display: grid; gap: 12px; min-width: 0; } @media (max-width: 860px) { .faq { grid-template-columns: 1fr; } } .qa { background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .qa:hover { border-color: var(--green-line); } .qa[open] { border-color: var(--green-line); box-shadow: 0 18px 40px -32px rgba(11, 60, 32, .5); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font: 700 clamp(1.08rem, 1rem + .3vw, 1.25rem)/1.3 var(--display); } .qa summary::-webkit-details-marker { display: none; } .qa summary .icon { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); transition: transform .3s var(--ease), background-color .3s var(--ease); } .qa[open] summary .icon { transform: rotate(180deg); background: var(--green); color: var(--green-ink); } .qa-a { padding: 0 24px 22px; color: var(--muted); } .qa::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; } .qa[open]::details-content { block-size: auto; } /* FAQ cards (after the Local/Global page): white cards with a 3D "?" icon; the open card turns mint with a filled chevron, an accent bar and a ruled answer. */ #faq .section-head.center .faq-title { max-width: none; margin: 18px auto 0; } #faq .faq { gap: 16px 24px; max-width: 1120px; margin: 0 auto; } #faq .faq-col { gap: 16px; } #faq .qa { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, #ffffff, #f8fbf9); border: 1px solid #e3ebe6; box-shadow: 0 1px 0 #fff inset, 0 14px 30px -26px rgba(12, 22, 19, .35); transition: opacity .7s var(--ease), transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } #faq .qa:hover { transform: translateY(-2px); border-color: rgba(16, 185, 129, .45); box-shadow: 0 1px 0 #fff inset, 0 20px 36px -26px rgba(11, 100, 60, .45); } #faq .qa[open] { background: radial-gradient(90% 120% at 0% 0%, rgba(16, 185, 129, .07), transparent 60%), linear-gradient(180deg, #f9fefb, #f1fbf6); border-color: rgba(16, 185, 129, .5); box-shadow: 0 1px 0 #fff inset, 0 26px 46px -30px rgba(11, 100, 60, .55); } #faq .qa summary { gap: 16px; padding: 20px 22px; line-height: 1.4; color: #0b1a2b; justify-content: flex-start; } #faq .qa summary > span { flex: 1; min-width: 0; } /* Answer text stays small; the question size is the shared .qa summary rule. */ #faq .qa-a p { font-size: .88rem; line-height: 1.6; } #faq .qa summary::before { content: ""; flex: none; width: 48px; height: 50px; margin: -4px -2px -4px -4px; background: url("../images/faq-question.svg") center / contain no-repeat; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } #faq .qa:hover summary::before { transform: translateY(-2px) rotate(-6deg) scale(1.06); } #faq .qa[open] summary::before { transform: scale(1.08); } #faq .qa summary .icon { width: 34px; height: 34px; padding: 8px; stroke-width: 2.6; color: #047857; background: #fff; box-shadow: 0 0 0 1px rgba(16, 185, 129, .28) inset; } #faq .qa:hover summary .icon { background: #e6f9ef; } #faq .qa[open] summary .icon { transform: rotate(180deg); color: #fff; background: linear-gradient(150deg, #34d399, #059669); box-shadow: 0 10px 18px -10px rgba(5, 150, 105, .9); } #faq .qa-a { margin: 0 22px; padding: 16px 0 24px 0; border-top: 1px solid rgba(16, 185, 129, .2); line-height: 1.68; color: #3d4a5c; } /* ── 29 · Final CTA ─────────────────────────────────────────────────────── */ .sec-final { --panel-glow: radial-gradient(60% 50% at 50% 0%, rgba(28, 189, 88, .26), transparent 70%); } .final { text-align: center; max-width: 54rem; margin: 0 auto; } .final-icon { display: block; width: clamp(110px, 10vw, 150px); margin: 0 auto 8px; filter: drop-shadow(0 18px 22px rgba(28, 189, 88, .28)); } .final-icon img { width: 100%; height: auto; animation: who-float 5.5s ease-in-out infinite; } .final .h-section { margin: 16px auto 26px; max-width: 20ch; } .final p { font-size: var(--fs-lead); color: var(--muted); } .final .final-punch { font: 400 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.25 var(--display); color: var(--fg); margin-top: 26px; } .final .final-punch strong { color: var(--neg); } /* ── 30 · P.S. ──────────────────────────────────────────────────────────── */ .sec-ps .section-head .lead { max-width: 52ch; margin: 16px auto 0; } .p-hl { color: #18A957; } /* Three cards in a row, each with a 3D icon on top, joined by curved arrows. */ .sec-ps { --bg: radial-gradient(60% 70% at 50% 0%, #F4FBF6, transparent 100%), linear-gradient(180deg, #E9F6EE, #F2FAF5 60%, #E6F4EC); } .sec-ps .container { max-width: 1500px; } /* The curved bottom edge visually eats into the space under the cards, so add back half its depth to read the same as the top. */ .sec-ps { padding-bottom: calc(var(--sec-pad) + var(--curve) / 2); } .ps-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5.2vw, 76px); margin-top: 8px; align-items: stretch; } .ps-box { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; --ps-pt: clamp(24px, 2.4vw, 32px); padding: var(--ps-pt) clamp(20px, 2.2vw, 28px) clamp(26px, 2.6vw, 32px); background: var(--pbg); border: 1px solid var(--pline); border-radius: 22px; box-shadow: 0 1px 2px rgba(12, 22, 19, .03), 0 22px 38px -30px var(--psh); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .ps-box:hover { transform: translateY(-8px); border-color: var(--pline-h); box-shadow: 0 1px 2px rgba(12, 22, 19, .04), 0 34px 50px -26px var(--psh), 0 0 0 4px var(--pring); } /* Soft light sweep across the card, text stays above it. */ .ps-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; opacity: 0; transition: background-position .9s var(--ease), opacity .3s; } .ps-box:hover::before { background-position: -30% 0; opacity: 1; } .ps-box h3, .ps-box p { position: relative; } .ps-box .ps-icon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .3s; } .ps-box:hover .ps-icon { transform: translateY(-6px) scale(1.08) rotate(-4deg); filter: drop-shadow(0 20px 16px rgba(12, 22, 19, .3)); } .ps-green { --pbg: linear-gradient(180deg, #E6F8ED, #F3FCF6); --pline: rgba(24, 190, 90, .35); --pline-h: rgba(24, 190, 90, .7); --pring: rgba(24, 190, 90, .12); --psh: rgba(11, 100, 50, .5); } .ps-gold { --pbg: linear-gradient(180deg, #FFF3D6, #FFFAEB); --pline: rgba(245, 160, 20, .38); --pline-h: rgba(245, 160, 20, .75); --pring: rgba(245, 160, 20, .14); --psh: rgba(170, 100, 0, .45); } .ps-blue { --pbg: linear-gradient(180deg, #E3EFFF, #F1F7FF); --pline: rgba(40, 120, 245, .35); --pline-h: rgba(40, 120, 245, .7); --pring: rgba(40, 120, 245, .12); --psh: rgba(30, 80, 170, .45); } /* The icon straddles the top edge of its card: half above the border, half inside. */ .ps-stack { --ic: clamp(66px, 6vw, 84px); padding-top: calc(var(--ic) / 2); } .ps-icon { position: relative; z-index: 1; width: var(--ic); height: auto; margin: calc(-1 * (var(--ps-pt) + var(--ic) / 2)) auto 14px; filter: drop-shadow(0 12px 12px rgba(12, 22, 19, .25)); } .ps-box h3 { font: 800 clamp(1rem, .95rem + .25vw, 1.15rem)/1.25 var(--ui); letter-spacing: 0; color: #0A1A12; margin-bottom: 10px; } .ps-tag { display: block; } .ps-dash { display: none; } .ps-box p { color: #3F4E49; font-size: .88rem; line-height: 1.55; } /* Curved arrow from card 1 to 2 and from 2 to 3 (desktop only). */ .ps-green::after, .ps-gold::after { content: ""; position: absolute; top: 44%; left: calc(100% + 3px); width: clamp(36px, 4.8vw, 70px); aspect-ratio: 444 / 248; translate: 0 -50%; background: url("../images/before_go/arrow.png") center / contain no-repeat; } /* PS arrows: pop in with their card, then keep nudging forward. */ .ps-green::after, .ps-gold::after { animation: step-arrow-in .7s var(--ease) .5s both, ps-arrow-nudge 2.2s ease-in-out 1.3s infinite; } .js .ps-box:not(.is-in).ps-green::after, .js .ps-box:not(.is-in).ps-gold::after { animation: none; opacity: 0; } @keyframes ps-arrow-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 0); } } @media (prefers-reduced-motion: reduce) { .ps-green::after, .ps-gold::after { animation: none; } } @media (max-width: 900px) { .ps-stack { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 64px; } .ps-green::after, .ps-gold::after { display: none; } } /* ── 32 · Footer ────────────────────────────────────────────────────────── Same markup and styles as the legal pages' footer (assets/css/legal.css at the site root): watermark + logo, disclaimers, copyright, link row. */ .site-footer { padding: calc(56px + var(--curve)) 0 36px; overflow: hidden; } .site-footer { color: #A1B0AC; } .ft-inner { text-align: center; } .ft-brand { position: relative; display: grid; place-items: center; padding: clamp(8px, 2vw, 20px) 0 clamp(22px, 3vw, 32px); } /* Large faint wordmark behind the logo. */ .ft-watermark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 0; font: 700 clamp(3.4rem, 1.2rem + 9vw, 8.5rem)/1 var(--display); letter-spacing: .01em; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .015) 85%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; } .ft-logo { position: relative; z-index: 1; display: inline-flex; border-radius: 8px; } .ft-logo img { width: clamp(200px, 20vw, 290px); height: auto; } .ft-legal { max-width: 1000px; margin: 0 auto; } .ft-legal p { margin: 0 auto 18px; font-size: clamp(.86rem, .82rem + .2vw, .98rem); line-height: 1.75; color: #A1B0AC; text-wrap: pretty; } .ft-legal p:last-child { margin-bottom: 0; } .ft-rule { height: 1px; margin: clamp(28px, 4vw, 44px) auto; border: 0; max-width: 1200px; background: linear-gradient(90deg, transparent, rgba(28, 189, 88, .35), transparent); } .ft-copy { margin: 0 0 18px; font-size: .95rem; color: #A1B0AC; } .ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; padding: 0; list-style: none; } .ft-links a { display: inline-block; padding: 6px 0; color: #C3CFCC; font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(195, 207, 204, .45); text-underline-offset: 4px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); } .ft-links a:hover, .ft-links a:focus-visible { color: var(--green); text-decoration-color: var(--green); } .ft-links a[aria-current="page"] { color: #fff; } @media (max-width: 600px) { .ft-legal p { text-align: center; } .ft-links { gap: 4px 16px; } } /* ── 31 · Exit-intent popup ─────────────────────────────────────────────── */ .exit { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(28px, 5vw, 44px); border: 0; border-radius: var(--r-lg); background: #fff; color: #0C1613; box-shadow: 0 0 0 1px rgba(28, 189, 88, .35), 0 50px 100px -30px rgba(0, 0, 0, .7); --fg: #0C1613; --muted: #4A5955; } .exit::backdrop { background: rgba(4, 8, 7, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .exit[open] { animation: pop .35s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } } .exit-title { font: 700 clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem)/1.1 var(--display); margin-bottom: 16px; padding-right: 32px; } .exit p { color: var(--muted); } .exit .exit-title { color: #0C1613; } .exit-close { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E1E8E4; background: #fff; display: grid; place-items: center; cursor: pointer; color: #0C1613; } .exit-close:hover { border-color: var(--green); } .exit-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } /* ── Scroll reveal ──────────────────────────────────────────────────────── */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rd, 0ms); } .js .reveal.is-in { opacity: 1; transform: none; } /* Cards keep their hover lift after the reveal finishes. */ .js .reveal.is-in.bullet, .js .reveal.is-in.problem, .js .reveal.is-in.fix, .js .reveal.is-in.agent, .js .reveal.is-in.tool, .js .reveal.is-in.way, .js .reveal.is-in.bonus { transition-delay: 0ms; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:last-child { grid-column: span 2; } } @media (max-width: 1024px) { .bullet-grid, .tools { grid-template-columns: repeat(2, 1fr); } .market-head { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 900px) { .step, .intro { grid-template-columns: minmax(0, 1fr); } .step:nth-child(even) .step-visual { order: 0; } .intro-visual { max-width: 560px; width: 100%; margin: 0 auto; min-height: 0; aspect-ratio: 1 / 1; } .intro-copy { text-align: center; } .intro-copy > p { margin-left: auto; margin-right: auto; } .intro .cta-block.left { align-items: center; text-align: center; } .problems, .ways { grid-template-columns: 1fr 1fr; } .problem, .problem:nth-child(-n+2), .way, .way:nth-child(-n+4) { grid-column: span 1; } .problem:last-child { grid-column: span 2; } .fixes, .who, .agents { grid-template-columns: 1fr; } .guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; } .guarantee-body p { margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .sticky-bar .sticky-inner { padding-left: var(--gutter); padding-right: var(--gutter); } .sticky-inner { flex-direction: column; align-items: center; gap: 8px; } .sticky-deal { display: none; } .sticky-msg { margin: 0; text-align: center; justify-content: center; font-size: .82rem; } .sticky-tail { font-size: .78rem; } /* Short copy on mobile: "Now $37, then $97/mo" */ .sticky-tail .st-disc, .sticky-tail .st-long { display: none; } .sticky-tail .st-short { display: inline; } /* Cross hides the bar; a "Show offer" pill brings it back. */ .sticky-bar { transition: transform .35s var(--ease), visibility 0s; } .sticky-bar.is-closed { transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; } .sticky-bar .sticky-inner { position: relative; } .sticky-close { position: absolute; top: -14px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(245, 196, 81, .55); border-radius: 50%; background: #14100a; color: var(--gold); cursor: pointer; box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .7); } .sticky-close .icon { width: 16px; height: 16px; } .sticky-show { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font: 800 .85rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #1aa651, #0c7f3b); box-shadow: 0 0 22px -4px rgba(28, 189, 88, .6), 0 10px 20px -8px rgba(0, 0, 0, .6); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .sticky-show::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); } .sticky-show.is-on { opacity: 1; pointer-events: auto; transform: none; } .sticky-close:focus-visible, .sticky-show:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } body.has-sticky-bar.sticky-closed .site-footer { padding-bottom: 36px; } } @media (max-width: 600px) { :root { --bar-h: 72px; } html { font-size: 16px; } .bullet-grid, .tools, .problems, .ways, .agents, .offer-list { grid-template-columns: 1fr; } .problem:last-child { grid-column: span 1; } .stats { grid-template-columns: 1fr 1fr; } .stat:last-child { grid-column: span 2; } .shots { gap: 12px; } .shot-ph { padding: 12px; } .shot-ph .ph-text { font-size: .75rem; } .ph-tag { font-size: .62rem; } .vsl-ph { left: 8px; top: 8px; max-width: calc(100% - 16px); } .hero-chips li { font-size: .8rem; padding: 6px 11px 6px 9px; } .founder { grid-template-columns: 1fr; text-align: center; justify-items: center; } .agent { grid-template-columns: 1fr; } .agent-img { grid-row: auto; width: 88px; height: 88px; margin-bottom: 16px; } .agent-img img { width: 74px; height: 74px; } .license { grid-template-columns: 1fr; } .agent, .bullet, .problem, .way, .tool, .fix { padding: 22px; } .fix { flex-direction: column; align-items: flex-start; gap: 16px; } .compare-table th, .compare-table td { font-size: .9rem; } .compare-table tbody td { padding-left: calc(clamp(14px, 2.4vw, 28px) + 22px); } .compare-table tbody td::before { width: 16px; height: 16px; font-size: 10px; line-height: 16px; top: 22px; } .qa summary { padding: 18px; } .qa-a { padding: 0 18px 20px; } .btn-xl { width: 100%; } .cta-note .sep { display: none; } .cta-note span:not(.sep) { display: inline-block; margin: 0 .35em; } } @media (max-width: 480px) { .sticky-label { flex-basis: 100%; font-size: .9rem; } .cd { gap: 4px; } .cd-u { min-width: 36px; padding: 3px 4px 2px; } .cd-u b { font-size: .92rem; } .btn-sm { padding: 8px 12px; font-size: .9rem; } .stat-num { font-size: 2.3rem; } .stat p { font-size: .88rem; } .stat { padding: 16px; } .compare-table thead th { font-size: .98rem; } .compare-table th, .compare-table td { padding-top: 14px; padding-bottom: 14px; } .receipt-table td, .receipt-table th { font-size: .92rem; } .stack-table td, .stack-table th { font-size: .92rem; } } @media (max-width: 380px) { .stats { grid-template-columns: 1fr; } .stat:last-child { grid-column: span 1; } .sticky-bar .btn-sm .icon-arrow { display: none; } } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; } .js .reveal { opacity: 1; transform: none; } .ticker-track { animation: none; width: auto; } .ticker-run { white-space: normal; text-align: center; padding: 0 var(--gutter); line-height: 1.5; } .ticker-run + .ticker-run { display: none; } .vsl-play::after, .eyebrow .dot { animation: none; } .js .msg, .js .sys { opacity: 1; transform: none; } .typing { display: none; } .bg-canvas { display: none; } .btn-primary, .btn-primary::before, .btn-primary::after { animation: none !important; } } .nowrap { white-space: nowrap; } /* Sticky bar countdown boxes on the yellow bar. */ .sticky-bar .cd-u { background: #000; border-color: #000; } .sticky-bar .cd-u b { color: #FFC62B; } .sticky-bar .cd-u i { color: #fff; } /* Sticky bar on tablet / small laptop widths: keep it to one tidy row. */ @media (max-width: 1200px) and (min-width: 769px) { .sticky-bar .sticky-inner { padding-left: 24px; padding-right: 24px; } .sticky-inner { gap: 16px; } .sticky-msg { column-gap: 10px; font-size: .88rem; } .sticky-label { font-size: .92rem; } .sticky-tail .st-disc { display: none; } } @media (max-width: 960px) and (min-width: 769px) { .sticky-deal { display: none; } .sticky-msg { margin: 0 auto; } } /* Sticky bar button: plain theme green, no shiny effect. */ .sticky-bar .btn-primary { animation: none; border: 1px solid transparent; background: #14994A; color: #fff; box-shadow: none; } .sticky-bar .btn-primary::before, .sticky-bar .btn-primary::after { content: none; } .sticky-bar .btn-primary:hover { background: #17A24F; box-shadow: none; transform: none; } /* Headings set to break at a fixed point: each .h-line is one line on wider screens. */ .section-head.center .h-section.h-two-line { max-width: none; } @media (min-width: 860px) { .h-two-line .h-line { display: block; white-space: nowrap; } } /* ── Type cuts by size ────────────────────────────────────────────────────── Degular Display only for big headlines; standard Degular (the --display default) for sub-headings and card titles; Degular Text for small labels. Bold lead-ins inside paragraphs use the body font so they read as text. */ .h-hero, .h-section, .intro-name, .stat-num, .seal-num { font-family: var(--display-xl); } .h-section, .intro-name, .stat-num { letter-spacing: .012em; } h3, h4, .h-sub, .step-title, .bridge-q, .pull, .final-punch, .price-today, .t-headline, .stack-title { letter-spacing: .005em; } .btn-sm, .vsl-unmute, .hs-chip, .cd-u b, .phone-result, .avatar, .phones-vs, .t-avatar, .tool h4, .qa summary, .ticker-run, .r-total th, .r-total td, .s-total th, .s-total td, .compare-table thead th, .bonus-n, .exit-title { font-family: var(--ui); letter-spacing: .005em; } .ticker-run { letter-spacing: .04em; } .qa summary { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); font-weight: 700; } .tool h4 { font-size: 1.12rem; } .bullet strong { font-size: 1.14rem; line-height: 1.2; } /* ── Section-head system (taken from section 4, the six bullets) ───────────── Uppercase tinted pill eyebrow, tight display heading, one green highlight phrase, and a lead. Light sections use the green-on-pale pill; dark and green sections use the same pill on a translucent green with mint text. */ :is(.s-light, .s-paper) .eyebrow:not(.b-eyebrow, .f-tag), .s-dark:not(.hero) .eyebrow { padding: 10px 30px; font: 700 .92rem/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; } :is(.s-light, .s-paper) .eyebrow:not(.b-eyebrow, .f-tag) { border: 1px solid rgba(28, 189, 88, .32); background: #DDF5E6; color: var(--green-deep); } .s-dark:not(.hero) .eyebrow { border: 1px solid rgba(28, 189, 88, .45); background: rgba(28, 189, 88, .12); color: #7BEFA6; } #problem.is-red .eyebrow { border-color: rgba(229, 72, 77, .35); } :is(.s-light, .s-paper, .s-dark:not(.hero)) .h-section { letter-spacing: -.005em; line-height: .94; } :is(.s-light, .s-paper, .s-dark:not(.hero)) .section-head .lead { font-size: 1.12rem; } /* Highlight phrase: one class, every section. */ .hl, .w-hl, .p-hl, .t-hl, .faq-title span { color: #18A957; } .s-dark .hl, .s-dark .t-hl { color: #3DE08A; } /* ═══════════════════════════════════════════════════════════════════════════ * Responsive pass (laptop → tablet → phone). Kept together at the end so the * desktop rules above stay readable; every block narrows the design only. * ═══════════════════════════════════════════════════════════════════════════ */ /* Laptops and small desktops */ @media (min-width: 701px) and (max-width: 1399px) { .agents { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1280px) { .who { gap: 22px; } .replaces { gap: 16px; } } /* Small laptops and tablets: the three-column pictures stack, the problem cards pair up */ @media (max-width: 1100px) { .replaces { grid-template-columns: minmax(0, 580px); justify-content: center; gap: 26px; } .rp-left, .rp-product { display: none; } .problems { grid-template-columns: repeat(2, 1fr); } .problem, .problem:nth-child(1), .problem:nth-child(2) { grid-column: auto; } .problem:last-child { grid-column: 1 / -1; } #replaces .container, #who .container { max-width: 100%; } /* decorative sparkle and plane sit on the heading at this width */ .b-deco { display: none; } } /* Tablets: the two "who" cards stack and their vectors sit on top of each card */ @media (max-width: 900px) { .who { grid-template-columns: 1fr; padding-inline: 0; gap: 26px; } .who { padding-inline: 0; } .who-col, .who-yes, .who-no { padding: 24px 20px 22px; } .who-art, .who-yes .who-art, .who-no .who-art { position: static; translate: none; width: 150px; margin: 0 auto 14px; } .tools { grid-template-columns: 1fr; } .problems { grid-template-columns: 1fr; } .problem:last-child { grid-column: auto; } #obvious-fixes .container, #problem .container { max-width: 100%; } } /* Phones */ @media (max-width: 700px) { /* Old way vs new way: keep two columns but tighten everything so they fit */ /* DESIGN 1 responsive rules, disabled: #compare .compare { --gap: 12px; } #compare .compare-table { border-spacing: var(--gap) 8px; } #compare .compare-table thead th { padding: 4px 0; } #compare .c-head { padding: 12px 6px 14px; border-radius: 14px; } #compare .c-kick { font-size: .92rem; } #compare .c-brand { font-size: 1.15rem; } #compare .c-logo { height: 18px; padding: 9px 12px; } #compare .compare-table tbody td { padding: 12px 6px 12px 34px; font-size: .84rem; line-height: 1.35; border-radius: 12px; } #compare .compare-table tbody td::before { left: 7px; width: 19px; height: 19px; font-size: 10px; line-height: 19px; } #compare .compare::before { border-radius: 18px; } #compare .compare::after { border-radius: 18px; } #compare .c-emoji-sad { width: 44px; top: -18px; right: calc(50% + var(--gap) / 2 - 8px); } #compare .c-emoji-happy { width: 52px; top: -22px; right: -4px; } */ /* the 30-day table */ #thirty-days .compare-table thead th { font-size: .98rem; padding: 16px 12px; } /* what it replaces */ .receipt-table th, .receipt-table td { font-size: .9rem; } #replaces .r-us th, #replaces .r-us td { padding: 14px 12px !important; } .problems { grid-template-columns: 1fr; } .problem:last-child { grid-column: auto; } .problem { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 12px; align-items: start; padding: 18px 16px 16px; } .problem .p-art { width: 96px; } .problem .p-cost { margin-top: 4px !important; } .problem h3 { font-size: 1.08rem; } } @media (max-width: 600px) { /* tools: picture on top of the copy so the title pill has room */ .tool { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; } .t-img { width: 84px; } .tools .tool h4 { font-size: 1.05rem; } .btn-xl { font-size: 1.05rem; padding-inline: 18px; } .who-col { padding: 24px 20px 22px; } .who-badge { width: 52px; height: 52px; } .who-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; } .who-col h3 { font-size: 1.5rem; } #results .container, #whats-inside .container { max-width: 100%; } } /* "30 days from now" table on phones: slimmer icon gutter so the copy gets more of each narrow column. */ @media (max-width: 480px) { #thirty-days .compare-table thead th { padding: 14px 12px; font-size: .86rem; line-height: 1.25; } #thirty-days .compare-table tbody td { padding: 14px 10px 14px 40px; font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; } #thirty-days .compare-table tbody td::before { left: 10px; width: 20px; height: 20px; font-size: 10px; line-height: 20px; } } @media (max-width: 360px) { #thirty-days .compare-table tbody td { font-size: .82rem; } #thirty-days .eyebrow { padding: 8px 14px; letter-spacing: .04em; font-size: .78rem; } } /* TEMP: hide a section while checking sections one by one. Remove this rule and the d-none classes when done. */ .d-none { display: none !important; } @media (max-width: 420px) { .st-ic { display: none; } .st-name { width: 100%; } .stack-table th:last-child, .stack-table td:last-child { width: 108px; } }