D




Files



reebuff


Limited access, verify country
New chat
Daily
17
Wallet
5

Get 7x usage for $5

Projects


Chats


i have this poster ad on fb and i need a higly conversion landingpage mobile first that user can con
Desktop app
Command line

Legacy
i have this poster ad on fb and i need a higly conversion landingpage mobile first that user can contact us on whatsap or telegram
Image 1

Turn Prompts Into Production-Ready React Components
Ad
Turn your landing page ideas into production-ready React and Tailwind components with v0.
v0.app ↗

Worked for 8m 59s
I'll build you a mobile-first, high-conversion landing page in Italian that matches your poster, with WhatsApp + Telegram as the main contact actions. Let me set up a plan and workspace.

Workspace is ready. Now building the landing page — static HTML/CSS/JS (fast load = better ad conversion, no framework needed).

Files are in place. Now let me start the dev server and verify the page actually loads correctly.

Done — your landing page is live in the preview panel. 🎉

What you got (mobile-first, single-page, Italian, matching your poster):

Sticky top bar with brand + "Consulenza Gratis" CTA
Hero with the exact poster copy: "Recupera il Tuo Capitale.", teal "Consulenza Gratuita" pill, dual CTA buttons (WhatsApp green / Telegram blue)
Problem card: Truffe Online · Criptovalute Perse · Frodi Bancarie · Bonifici Fraudolenti
Teal urgency band: "Ogni giorno di attesa è capitale perso." + yellow "CONTATTACI ORA" button (like your poster's yellow CTA)
Come funziona (3 steps), Perché sceglierci, FAQ accordion (handles price/recupero objections)
Sticky bottom CTA bar on mobile that slides up after the hero — WhatsApp/Telegram always one tap away, with iOS safe-area padding
Conversion extras: pre-filled WhatsApp message ("Ciao! Ho visto il vostro annuncio…"), click tracking hooks for GTM/Meta Pixel, UTM/fbclid capture for ad attribution, FAQ schema for SEO, fast zero-dependency load
⚠️ Two things you must replace before going live:

WhatsApp number — search wa.me/390000000000 in index.html → replace with your real number in international format (e.g. 393331234567). It's marked with ✎ LINK WHATSAPP comments; the other buttons inherit it automatically.
Telegram — replace t.me/yourusername with your username.
Also optional: the Meta Pixel snippet is in index.html (commented out, marked ▶▶ META PIXEL) — drop in your pixel ID from Ads Manager to track conversions from the FB campaign.

Verified: all assets return 200, all copy from the poster is present, 5 WhatsApp + 3 Telegram CTAs wired up. Want me to tweak colors/copy, add a testimonials or results section, or prepare it for deployment?

no this is a basic it is not a ui ux visual html five well structured 

Run ads on Codebuff with Gravity
Ad
Reach Codebuff users with native sponsored suggestions inside AI conversations. Launch in minutes.
trygravity.ai ↗

Worked for 9m 45s
You're right — that was a plain first pass. Let me rebuild it as a proper premium landing page: semantic HTML5 structure, design system, hero with animated chat mockup, bento layout, timeline, stats counters, marquee, and refined interactions.

Now rebuilding from scratch — semantic HTML5 first:

Now the design system CSS:

Now the enhanced JS:

Let me do a visual check by taking screenshots at mobile and desktop widths if a headless browser is available:

No headless browser in this environment for automated screenshots — but the HTML is validated well-formed, all assets serve 200, and the preview panel is live. Let me refresh the preview:

Rebuilt from scratch — same poster DNA, but now a proper designed page. Check the preview panel. 🎨

Structure (semantic HTML5):

<header> sticky glass nav with anchor links, <main> with 7 <section>s, <article> tiles, <figure> chat mockup, <footer>, skip-link + aria-labelledby on every section, ARIA-expanded FAQ, scroll progress bar.
Visual design:

Design system: Outfit (display) + Inter (body), fluid clamp() type, tokens for color/radius/shadow — one palette from your poster (navy #0D2440, teal #0F7C7B, yellow #FFC629)
Hero — dark navy with animated glow orbs, live-status badge with pulsing dot, yellow accent dot on the headline, teal gradient "Consulenza Gratuita" pill, and a WhatsApp chat mockup that animates messages appearing with typing indicator + floating chips ("⚡ Risposta in pochi minuti", "🛡️ 40+ Paesi") — instant psychological trust
Scrolling ticker of the 4 services (like a stock ticker, urgency feel)
Bento grid services with hover lift + gradient side-bar reveal
Dark timeline section with numbered gold step markers, glowing ring
Animated stat counters (40+ Paesi, 24h, 0€, 100%) counting up on scroll
Testimonials with stars (marked for replacement with real reviews)
Teal urgency band → matching poster's "Ogni giorno di attesa è capitale perso"
CTA finale on dark gradient with radial glow
Buttons have a subtle shine sweep animation, channel-colored shadows
Conversion + tech:

Sticky bottom dock (mobile) slides up after hero; hidden on desktop (nav CTA covers it)
WhatsApp deep-link with pre-filled message; Telegram as secondary ghost button
GTM/Meta Pixel contact_click events, UTM/fbclid attribution
prefers-reduced-motion respected, focus-visible rings, mobile-first breakpoints @640/960
Still to do before going live: replace 390000000000 with your WhatsApp number and yourusername with your Telegram handle (search in index.html), and swap in real testimonials.

Want me to add the poster image itself to the hero, adjust colors, or wire in your real contact details?




To-dos
5/5

Build your app with OnSpace AI
Ad
Turn your landing page ideas into professional projects with OnSpace AI's design system and app builder.
onspaceai.sjv.io ↗
what if we could use some background imake and better visuals 

Efficient

Cloud


Filter files
Back to files
styles.css
Read-only
/* ══════════════════════════════════════════════════════════════
   ESPERTI INTERNAZIONALI — Landing design system
   Mobile-first · Outfit (display) + Inter (body)
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root{
  --navy:#0D2440; --navy-2:#0A1C33; --navy-3:#143252;
  --teal:#0F7C7B; --teal-2:#0B615F; --teal-soft:rgba(15,124,123,.10);
  --yellow:#FFC629; --yellow-2:#F0B400;
  --wa:#25D366; --wa-dark:#1FB858; --tg:#229ED9;
  --ink:#0B1B2B; --muted:#5B6C7E; --line:#E4ECF2; --surface:#F4F8FA;
  --white:#fff;

  --font-display:"Outfit",Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --radius-s:12px; --radius:18px; --radius-l:26px; --pill:999px;
  --shadow-s:0 2px 10px rgba(13,36,64,.06);
  --shadow:0 10px 34px rgba(13,36,64,.10);
  --shadow-l:0 24px 60px rgba(13,36,64,.18);
  --ring:0 0 0 3px rgba(15,124,123,.25);

  --container:1120px; --container-narrow:720px;
  --space-section:clamp(64px,10vw,110px);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--white);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
h1,h2,h3{font-family:var(--font-display); margin:0; color:var(--navy); letter-spacing:-.025em; line-height:1.1}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}

.skip-link{
  position:fixed; top:-100px; left:12px; z-index:999; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:var(--radius-s); transition:top .2s;
}
.skip-link:focus{top:12px}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px}
.container--narrow{max-width:var(--container-narrow)}

/* ── Progress bar ── */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:100; background:transparent; pointer-events:none}
.progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--yellow)); transition:width .1s linear}

/* ── Header ── */
.header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px}
.brand__mark{width:34px; height:34px; flex:none; display:grid; place-items:center; background:var(--white); border-radius:10px; box-shadow:var(--shadow-s)}
.brand__mark svg{width:22px; height:22px}
.brand__text{font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.05; color:var(--navy); display:flex; flex-direction:column}
.brand__text small{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal)}
.nav__links{display:none}
.nav__cta{flex:none}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; cursor:pointer; border:0;
  padding:15px 24px; border-radius:var(--pill); font-size:16px; color:#fff; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.btn svg{width:21px; height:21px; flex:none}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.06); box-shadow:var(--shadow-l)}
.btn::after{ /* lucidità sweep */
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); animation:sweep 4.5s ease-in-out infinite;
}
@keyframes sweep{0%,72%{left:-70%}100%{left:130%}}
.btn--sm{padding:10px 18px; font-size:14px}
.btn--sm svg{width:17px; height:17px}
.btn--lg{padding:18px 30px; font-size:17.5px}
.btn--wa{background:linear-gradient(180deg,var(--wa),var(--wa-dark)); color:#04320f; box-shadow:0 10px 26px rgba(37,211,102,.35)}
.btn--tg{background:linear-gradient(180deg,#2AA8E4,var(--tg)); box-shadow:0 10px 26px rgba(34,158,217,.32)}
.btn--yellow{background:linear-gradient(180deg,var(--yellow),var(--yellow-2)); color:var(--navy); box-shadow:0 12px 30px rgba(255,198,41,.4)}
.btn--ghost{background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.35); box-shadow:none; backdrop-filter:blur(6px)}

.cta-group{display:flex; flex-direction:column; gap:12px}
.cta-group .btn{width:100%}

/* ── Hero ── */
.hero{position:relative; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 78%,#091727 100%); color:#fff; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5}
.orb--1{width:420px; height:420px; background:radial-gradient(circle,var(--teal),transparent 65%); top:-120px; left:-140px; animation:float 9s ease-in-out infinite}
.orb--2{width:340px; height:340px; background:radial-gradient(circle,rgba(255,198,41,.5),transparent 65%); bottom:-100px; right:-120px; animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}

.hero__grid{position:relative; display:grid; gap:44px; padding-block:clamp(44px,8vw,84px) 40px}

.badge{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:8px 16px; border-radius:var(--pill); margin-bottom:22px; color:#EAF3F7;
}
.badge__dot{width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.22); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(37,211,102,.25)}50%{box-shadow:0 0 0 8px rgba(37,211,102,0)}}

.hero h1{color:#fff; font-size:clamp(2.5rem,10.5vw,4.4rem); font-weight:900; margin-bottom:18px}
.accent-dot{color:var(--yellow)}
.hero__highlight{margin-bottom:18px}
.pill{
  display:inline-block; background:linear-gradient(180deg,var(--teal),var(--teal-2)); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.05rem,4.6vw,1.4rem);
  padding:11px 26px; border-radius:var(--pill); box-shadow:0 10px 30px rgba(15,124,123,.45);
}
.hero__sub{color:rgba(255,255,255,.78); font-size:clamp(1rem,3.6vw,1.12rem); max-width:34rem; margin-bottom:30px}
.hero__sub strong{color:#fff}
.hero .cta-group{max-width:420px}

.hero__trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; font-size:14px; font-weight:600; color:rgba(255,255,255,.85)}
.hero__trust li{display:flex; align-items:center; gap:8px}
.check{width:19px; height:19px; border-radius:50%; background:var(--teal); color:#fff; font-size:11px; display:grid; place-items:center; flex:none}

/* chat mockup */
.hero__visual{position:relative; margin:0; max-width:420px; width:100%; justify-self:center}
.chat{
  background:#ECE5DD; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-l);
  border:6px solid rgba(255,255,255,.14); position:relative; z-index:2;
}
.chat__head{display:flex; align-items:center; gap:12px; background:#075E54; color:#fff; padding:13px 16px}
.chat__avatar{width:38px; height:38px; border-radius:50%; background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:800; font-size:15px; display:grid; place-items:center; flex:none}
.chat__meta{display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0}
.chat__meta strong{font-size:14.5px}
.chat__meta span{font-size:11.5px; opacity:.8}
.chat__body{
  padding:16px 14px; display:flex; flex-direction:column; gap:8px; min-height:250px;
  background-color:#ECE5DD;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:16px 16px;
}
.bubble{
  max-width:82%; padding:9px 13px; border-radius:12px; font-size:14px; line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,.08); color:#111;
  opacity:0; transform:translateY(10px); animation:bubble .45s ease forwards;
}
.bubble--in{align-self:flex-start; background:#fff; border-top-left-radius:3px}
.bubble--out{align-self:flex-end; background:#DCF8C6; border-top-right-radius:3px}
.bubble:nth-of-type(1){animation-delay:.3s}
.bubble:nth-of-type(2){animation-delay:.8s}
.bubble--typing{animation-delay:1.4s; display:flex; gap:4px; align-items:center; padding:12px 14px}
.bubble--typing i{width:6px; height:6px; border-radius:50%; background:#9AA0A6; animation:blink 1.2s infinite}
.bubble--typing i:nth-child(2){animation-delay:.2s}
.bubble--typing i:nth-child(3){animation-delay:.4s}
.bubble--out:nth-of-type(5){animation-delay:2.2s}
.bubble--out:nth-of-type(6){animation-delay:2.9s}
@keyframes bubble{to{opacity:1; transform:none}}
@keyframes blink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.chat__input{display:flex; align-items:center; justify-content:space-between; background:#fff; margin:0 8px 8px; padding:9px 14px; border-radius:var(--pill); font-size:13px; color:#9AA0A6}
.chat__send{color:#075E54}

.float-chip{
  position:absolute; z-index:3; background:#fff; color:var(--navy); font-family:var(--font-display);
  font-weight:700; font-size:13px; padding:9px 15px; border-radius:var(--pill); box-shadow:var(--shadow-l);
  animation:float 5s ease-in-out infinite;
}
.float-chip--top{top:-16px; right:8px}
.float-chip--bottom{bottom:34px; left:-10px; animation-delay:1.2s}

/* ticker */
.ticker{position:relative; border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25); overflow:hidden; padding:12px 0}
.ticker__track{display:flex; gap:22px; white-space:nowrap; width:max-content; animation:ticker 22s linear infinite; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.ticker .dot{color:var(--yellow)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ── Sezioni ── */
.section{padding-block:var(--space-section)}
.section--dark{background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff}
.section--dark h2{color:#fff}
.section__head{text-align:center; max-width:640px; margin:0 auto clamp(36px,6vw,56px)}
.kicker{display:inline-block; font-family:var(--font-display); font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:12px}
.kicker--light{color:var(--yellow)}
.section__head h2{font-size:clamp(1.75rem,6.5vw,2.6rem); font-weight:800; margin-bottom:14px}
.section__sub{color:var(--muted); font-size:clamp(.98rem,3.4vw,1.08rem)}
.section--dark .section__sub{color:rgba(255,255,255,.7)}

/* ── Bento servizi ── */
.bento{display:grid; grid-template-columns:1fr; gap:16px}
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.tile::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--teal),var(--yellow)); transform:scaleY(0); transform-origin:top; transition:transform .28s ease}
.tile:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent}
.tile:hover::before{transform:scaleY(1)}
.tile__icon{width:54px; height:54px; border-radius:16px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; margin-bottom:16px}
.tile__icon svg{width:30px; height:30px}
.tile h3{font-size:1.22rem; font-weight:800; margin-bottom:6px}
.tile p{color:var(--muted); font-size:.95rem}

/* ── Timeline ── */
.timeline{position:relative; max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.timeline::before{content:""; position:absolute; left:21px; top:20px; bottom:20px; width:2px; background:linear-gradient(180deg,var(--teal),rgba(255,255,255,.12))}
.timeline__step{display:flex; gap:20px; align-items:flex-start; position:relative}
.timeline__num{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy);
  background:linear-gradient(180deg,var(--yellow),var(--yellow-2)); box-shadow:0 0 0 6px rgba(255,198,41,.14); z-index:1;
}
.timeline__card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:20px 22px; flex:1}
.timeline__card h3{color:#fff; font-size:1.14rem; font-weight:800; margin-bottom:6px}
.timeline__card p{color:rgba(255,255,255,.72); font-size:.95rem}

/* ── Stats ── */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:clamp(38px,6vw,56px)}
.stat{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:22px 16px; text-align:center}
.stat__num{display:block; font-family:var(--font-display); font-weight:900; font-size:clamp(1.9rem,7vw,2.6rem); color:var(--yellow); line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums}
.stat__label{font-size:13px; color:rgba(255,255,255,.7); font-weight:500}

/* ── Perché noi ── */
.perks{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.perk{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 18px; text-align:center; transition:transform .22s ease, box-shadow .22s ease}
.perk:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.perk__icon{font-size:2rem; display:block; margin-bottom:10px}
.perk h3{font-size:1.02rem; font-weight:800; margin-bottom:4px}
.perk p{color:var(--muted); font-size:.85rem}

/* testimonianze */
.voices{display:grid; grid-template-columns:1fr; gap:16px; margin-top:clamp(30px,5vw,44px)}
.voice{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-s)}
.voice__stars{color:var(--yellow-2); letter-spacing:3px; font-size:15px; margin-bottom:10px}
.voice blockquote{margin:0 0 12px; font-size:1rem; color:var(--ink); line-height:1.6}
.voice figcaption{font-size:.85rem; color:var(--muted); font-weight:600}

/* ── Urgenza ── */
.urgency{background:linear-gradient(140deg,var(--teal),var(--teal-2)); color:#fff; text-align:center; padding-block:clamp(56px,9vw,84px); position:relative; overflow:hidden}
.urgency::before{content:""; position:absolute; inset:-40% -20% auto; height:80%; background:radial-gradient(ellipse at center,rgba(255,255,255,.14),transparent 65%)}
.urgency .container{position:relative}
.urgency h2{color:#fff; font-size:clamp(1.8rem,7.2vw,2.9rem); font-weight:900; margin-bottom:12px; max-width:20ch; margin-inline:auto}
.urgency p{color:rgba(255,255,255,.85); margin-bottom:28px; font-size:1.02rem}
.urgency .btn{max-width:320px; width:100%; margin-inline:auto}

/* ── FAQ ── */
.faq{display:flex; flex-direction:column; gap:12px}
.faq__item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s, border-color .2s}
.faq__item[open]{box-shadow:var(--shadow); border-color:transparent}
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:19px 22px; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--navy);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; font-size:19px; font-weight:600; transition:transform .25s ease, background .25s, color .25s;
}
.faq__item[open] .faq__icon{transform:rotate(45deg); background:var(--teal); color:#fff}
.faq__item p{padding:0 22px 20px; color:var(--muted); font-size:.95rem}

/* ── CTA finale ── */
.final{background:linear-gradient(180deg,var(--navy),#071527); color:#fff; text-align:center; padding-block:var(--space-section); position:relative; overflow:hidden}
.final::before{content:""; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(15,124,123,.4),transparent 65%); top:-200px; left:50%; transform:translateX(-50%); filter:blur(40px)}
.final .container{position:relative}
.final h2{color:#fff; font-size:clamp(1.9rem,7.5vw,3rem); font-weight:900; margin-bottom:12px}
.final__sub{color:rgba(255,255,255,.75); margin-bottom:30px; font-size:1.05rem}
.cta-group--row{max-width:420px; margin-inline:auto}

/* ── Footer ── */
.footer{background:#06121F; color:rgba(255,255,255,.65); padding-block:48px 120px; font-size:.9rem}
.footer__grid{display:flex; flex-direction:column; gap:26px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer__brand{display:flex; flex-direction:column; gap:8px}
.footer__brand .brand__mark{background:rgba(255,255,255,.08)}
.footer__brand strong{color:#fff; font-family:var(--font-display); font-size:1.05rem}
.footer__brand p{max-width:32ch}
.footer__nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.footer__nav a{color:rgba(255,255,255,.75); font-weight:500; transition:color .15s}
.footer__nav a:hover{color:var(--yellow)}
.footer__legal{padding-top:22px; display:flex; flex-direction:column; gap:6px; font-size:.78rem; opacity:.75}

/* ── Dock mobile ── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line); box-shadow:0 -10px 34px rgba(13,36,64,.14);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.dock.is-visible{transform:translateY(0)}
.dock .btn{flex:1; padding:14px 10px; font-size:15.5px; box-shadow:none}

/* ── Reveal ── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1; transform:none}

/* ════════ TABLET+ ════════ */
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:repeat(4,1fr)}
  .voices{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .cta-group{max-width:460px}
}

/* ════════ DESKTOP ════════ */
@media (min-width:960px){
  body{padding-bottom:0}
  .dock{display:none}
  .footer{padding-bottom:48px}

  .nav__links{display:flex; gap:30px; font-weight:600; font-size:14.5px; color:var(--navy)}
  .nav__links a{position:relative; padding-block:4px}
  .nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--teal); transition:right .22s ease}
  .nav__links a:hover::after{right:0}

  .hero__grid{grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; padding-block:clamp(60px,7vw,96px) 56px}
  .hero .cta-group{flex-direction:row; max-width:none}
  .hero .cta-group .btn{width:auto; flex:1}
  .hero__visual{justify-self:end; max-width:440px}

  .timeline{max-width:760px}
  .footer__grid{flex-direction:row; justify-content:space-between; align-items:flex-start}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  .bubble{opacity:1; transform:none}
  html{scroll-behavior:auto}
}