/* BeBetr — Landing page. Cool M design system (petrol / amber / olive on airy near-white). */

/* ---- self-hosted fonts (no Google CDN — DSGVO-konform) ---- */
@font-face{
  font-family:'Geist';
  src:url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  font-style:normal;
}
@font-face{
  font-family:'Geist Mono';
  src:url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  font-style:normal;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  font-style:normal;
}

/* ---- tokens ---- */
:root{
  --bg:#FAFBFA;
  --bg-tint:#F2F5F4;      /* cool section */
  --bg-warm:#F6F3EE;      /* warm section */
  --panel:#FFFFFF;
  --ink:#1A2124;
  --body:#3A4448;
  --dim:#7B8589;
  --hair:rgba(30,40,44,0.10);
  --hair-2:rgba(30,40,44,0.16);

  --accent:#1F5A5E;       /* deep petrol (primary)  */
  --accent-ink:color-mix(in srgb, var(--accent) 78%, #000);
  --accent-soft:color-mix(in srgb, var(--accent) 11%, transparent);
  --amber:#C97B2E;
  --olive:#6B7A3A;
  --red:#B84E3A;

  --deep:#143437;         /* dark petrol band */
  --deep-2:#0F2A2C;
  --cream:#EFF2F0;

  --sans:'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:'Geist Mono', 'SF Mono', ui-monospace, monospace;

  --head-font:var(--sans);
  --band-pad:clamp(60px,9vw,118px);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;
  --maxw:1160px;
  --pad:clamp(20px, 5vw, 64px);
  --shadow-phone: 0 2px 4px rgba(20,40,44,.05), 0 24px 50px rgba(20,40,44,.16), 0 8px 18px rgba(20,40,44,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:17px;
  line-height:1.55;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:rgba(31,90,94,.16);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

/* ---- type ---- */
.kicker{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);display:inline-flex;align-items:center;gap:.55em;
}
.kicker::before{content:"";width:18px;height:1px;background:var(--hair-2);}
.kicker.center::before{display:none;}
.display{
  font-weight:600;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.5rem, 6.2vw, 4.4rem);
  margin:0;color:var(--ink);
}
h2.sect{
  font-weight:600;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.85rem, 3.6vw, 2.9rem);margin:.5rem 0 0;color:var(--ink);
}
.lead{
  font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.5;color:var(--body);
  font-weight:400;text-wrap:pretty;
}
.muted{color:var(--dim);}
.tnum{font-variant-numeric:tabular-nums;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  padding:.72em 1.25em;border-radius:999px;border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(20,40,44,.18);}
.btn-primary:hover{background:var(--accent-ink);box-shadow:0 6px 16px rgba(20,40,44,.18);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair-2);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-on-dark{background:var(--cream);color:var(--deep-2);}
.btn-on-dark:hover{background:#fff;}

/* store badges */
.stores{display:flex;gap:12px;flex-wrap:wrap;}
.store{
  display:inline-flex;align-items:center;gap:11px;
  padding:10px 18px 10px 15px;border-radius:14px;
  min-width:168px;justify-content:center;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  transition:transform .18s ease, background .18s ease;
}
.store:hover{transform:translateY(-2px);background:#000;}
.store svg{flex:none;}
.store .s1{display:block;font-size:.62rem;letter-spacing:.04em;opacity:.75;line-height:1.1;text-transform:uppercase;}
.store .s2{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.stores.on-light .store{background:var(--ink);}

/* ---- nav ---- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
header.nav.scrolled{border-bottom-color:var(--hair);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.18rem;letter-spacing:-.02em;}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;object-fit:cover;
  box-shadow:0 1px 3px rgba(20,40,44,.16);
}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a.lnk{font-size:.93rem;font-weight:500;color:var(--body);transition:color .15s;}
.nav-links a.lnk:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:14px;}

/* language toggle */
.langtog{display:inline-flex;border:1px solid var(--hair-2);border-radius:999px;overflow:hidden;}
.langtog button{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  padding:.42em .72em;border:0;background:transparent;color:var(--dim);cursor:pointer;transition:.15s;
}
.langtog button.on{background:var(--ink);color:#fff;}

/* match nav CTA height to the DE/EN toggle so they line up */
.nav-right .langtog{height:36px;}
.nav-right .langtog button{display:inline-flex;align-items:center;padding:0 .82em;}
.nav-right .btn-primary{height:36px;padding-top:0;padding-bottom:0;}

/* ---- hero ---- */
.hero{position:relative;padding-top:clamp(40px,7vw,84px);padding-bottom:clamp(48px,7vw,90px);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero-copy{max-width:580px;}
.hero h1{margin:18px 0 0;}
.hero .lead{margin-top:22px;max-width:480px;}
.hero-cta{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hero-meta{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;}
.hero-meta .hm{display:flex;flex-direction:column;gap:2px;}
.hero-meta .hm b{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.hero-meta .hm span{font-size:.8rem;color:var(--dim);}

.phone-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:560px;}
.glow{
  position:absolute;inset:-8% -4% 4%;z-index:0;
  background:
    radial-gradient(42% 38% at 64% 30%, rgba(31,90,94,.16), transparent 70%),
    radial-gradient(38% 34% at 30% 70%, rgba(201,123,46,.13), transparent 72%);
  filter:blur(8px);
}
.phone{
  width:264px;height:auto;position:relative;z-index:2;
  border-radius:28px;
  filter:drop-shadow(0 28px 46px rgba(20,40,44,.20)) drop-shadow(0 8px 16px rgba(20,40,44,.10));
}
.phone.sm{width:230px;}
.phone-stage .p-back{
  position:absolute;width:206px;z-index:1;bottom:36px;right:6%;
  filter:drop-shadow(0 18px 34px rgba(20,40,44,.16));opacity:.96;
}
.phone-stage .p-front{position:relative;z-index:2;}

/* ---- generic section ---- */
section.band{padding-block:var(--band-pad);}
.band.tint{background:var(--bg-tint);}
.band.warm{background:var(--bg-warm);}
.sect-head{max-width:640px;}
.sect-head.center{margin-inline:auto;text-align:center;}
.sect-head .lead{margin-top:16px;}

/* logos / trust row */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:30px;}
.trust .pill{
  display:inline-flex;align-items:center;gap:9px;font-size:.86rem;color:var(--body);font-weight:500;
  padding:8px 15px;border:1px solid var(--hair);border-radius:999px;background:var(--panel);
}
.trust .pill i{width:7px;height:7px;border-radius:50%;display:block;flex:none;}

/* ---- feature rows ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,86px);align-items:center;}
.frow + .frow{margin-top:clamp(64px,9vw,120px);}
.frow.flip .f-media{order:-1;}
.f-media{display:flex;justify-content:center;position:relative;}
.f-media .platter{
  position:absolute;inset:auto;width:86%;height:86%;border-radius:30px;
  background:linear-gradient(160deg, rgba(31,90,94,.07), rgba(201,123,46,.05));
  z-index:0;align-self:center;
}
.f-copy .kicker{margin-bottom:8px;}
.f-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:.2rem 0 0;}
.f-copy p{margin:16px 0 0;color:var(--body);font-size:1.06rem;max-width:440px;text-wrap:pretty;}
.f-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px;}
.f-list li{display:flex;align-items:flex-start;gap:11px;font-size:.97rem;color:var(--body);}
.f-list li svg{margin-top:3px;flex:none;}

/* ---- feature grid cards ---- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px;}
.card{
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:24px 22px 26px;display:flex;flex-direction:column;gap:13px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,40,44,.08);border-color:var(--hair-2);}
.card .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;}
.card h4{margin:4px 0 0;font-size:1.08rem;font-weight:600;letter-spacing:-.02em;}
.card p{margin:0;font-size:.92rem;color:var(--dim);line-height:1.5;}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;}
.step{position:relative;padding-top:30px;border-top:1px solid var(--hair-2);}
.step .n{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--accent);letter-spacing:.06em;}
.step h4{margin:14px 0 0;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;}
.step p{margin:9px 0 0;color:var(--body);font-size:.97rem;max-width:300px;}

/* ---- dark AI demo band ---- */
.band.dark{background:var(--deep);color:var(--cream);position:relative;overflow:hidden;}
.band.dark .kicker{color:rgba(239,242,240,.6);}
.band.dark .kicker::before{background:rgba(239,242,240,.3);}
.band.dark h2.sect, .band.dark .f-copy h3{color:#fff;}
.band.dark .lead, .band.dark .f-copy p{color:rgba(239,242,240,.78);}
.band.dark .f-list li{color:rgba(239,242,240,.82);}
.demo-glow{
  position:absolute;top:-20%;right:-6%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(47,127,128,.36), transparent 66%);filter:blur(20px);
}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:.87rem;color:rgba(239,242,240,.9);
}
.chip .d{width:6px;height:6px;border-radius:50%;flex:none;}

/* ---- testimonials ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
.quote{
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;gap:18px;
}
.quote p{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty;}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:auto;}
.quote .av{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;}
.quote .who b{display:block;font-size:.9rem;font-weight:600;}
.quote .who span{display:block;font-size:.8rem;color:var(--dim);}
.stars{display:flex;gap:3px;}

/* ---- "Loved everywhere" photo collage ---- */
#loved .wrap{max-width:1280px;}
.loved-collage{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(6px,0.9vw,15px);padding-bottom:6px;
}
.loved-collage .ph{
  flex:none;width:clamp(52px,6.6vw,112px);height:var(--h);
  transform:translateY(var(--y));
  border-radius:18px;overflow:hidden;
  background:linear-gradient(140deg, rgba(31,90,94,.10), rgba(127,176,174,.16));
  border:1px solid var(--hair-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.loved-collage .ph image-slot{display:block;width:100%;height:100%;background:transparent;border:0;}
.loved-copy{
  position:relative;z-index:2;text-align:center;max-width:660px;
  margin:clamp(-24px,-2vw,-8px) auto 0;
}
.loved-copy h2{font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2rem,4vw,3.2rem);margin:0;color:var(--ink);font-family:var(--head-font);}
.loved-copy .lead{margin:18px auto 0;max-width:520px;}
@media (max-width:1000px){
  .loved-collage .ph:nth-child(1),.loved-collage .ph:nth-child(13){display:none;}
}
@media (max-width:760px){
  .loved-collage{flex-wrap:wrap;gap:8px;justify-content:center;}
  .loved-collage .ph{transform:none;width:clamp(78px,22vw,110px);height:clamp(110px,30vw,150px);}
  .loved-collage .ph:nth-child(n+9){display:none;}
  .loved-copy{margin-top:26px;}
}

/* ---- FAQ ---- */
.faq{max-width:780px;margin:44px auto 0;border-top:1px solid var(--hair);}
.qa{border-bottom:1px solid var(--hair);}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none;}
.qa .pm{width:22px;height:22px;flex:none;position:relative;transition:transform .25s ease;}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--accent);border-radius:2px;}
.qa .pm::before{left:0;right:0;top:10px;height:2px;}
.qa .pm::after{top:0;bottom:0;left:10px;width:2px;transition:opacity .2s;}
.qa[open] .pm::after{opacity:0;}
.qa .a{padding:0 4px 26px;max-width:660px;color:var(--body);font-size:1rem;line-height:1.6;}

/* ---- CTA band ---- */
.cta{
  background:var(--deep);color:#fff;border-radius:var(--r-lg);overflow:hidden;position:relative;
  padding:clamp(40px,6vw,68px) clamp(28px,5vw,64px);
  display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0;color:#fff;}
.cta p{margin:16px 0 0;color:rgba(239,242,240,.78);max-width:420px;}
.cta .cta-glow{position:absolute;left:-8%;bottom:-40%;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,123,46,.3),transparent 66%);filter:blur(18px);}
.cta-right{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;z-index:2;}

/* ---- footer ---- */
footer.ft{padding-block:56px 40px;border-top:1px solid var(--hair);}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
.ft-col h5{margin:0 0 14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;}
.ft-col a{display:block;font-size:.93rem;color:var(--body);padding:5px 0;transition:color .15s;}
.ft-col a:hover{color:var(--ink);}
.ft-brand p{margin:14px 0 0;font-size:.92rem;color:var(--dim);max-width:280px;}
/* keep the footer brand as a row (icon + wordmark), like the header */
.ft-brand a.brand{display:flex;align-items:center;gap:10px;padding:0;font-size:1.18rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.ft-brand a.brand:hover{color:var(--ink);}
.ft-base{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:42px;padding-top:22px;border-top:1px solid var(--hair);flex-wrap:wrap;}
.ft-base span{font-size:.84rem;color:var(--dim);}
.ft-base .disc{max-width:560px;line-height:1.5;}

/* ---- reveal anim ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---- responsive ---- */
@media (max-width:1000px){
  .cards{grid-template-columns:1fr 1fr;}
  .ft-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .phone-stage{min-height:auto;margin-top:8px;order:-1;}
  .hero-copy{max-width:none;}
  .frow{grid-template-columns:1fr;gap:34px;}
  .frow.flip .f-media{order:0;}
  .steps{grid-template-columns:1fr;}
  .quotes{grid-template-columns:1fr;}
  .cta{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;}
  .ft-grid{grid-template-columns:1fr 1fr;}
  .hero-meta{gap:18px;}
}

/* ---- tweak hooks ---- */
.display, h2.sect, .f-copy h3, .step h4, .card h4, .cta h2, .qa summary{font-family:var(--head-font);}

body.head-serif{--head-font:'Fraunces', Georgia, serif;}
body.head-serif .display{letter-spacing:-.02em;}

body.density-compact{--band-pad:clamp(40px,6vw,76px);}
body.density-comfy{--band-pad:clamp(80px,12vw,150px);}

/* centered hero variant */
body.hero-centered .hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center;}
body.hero-centered .hero-copy{max-width:720px;}
body.hero-centered .hero .lead{margin-left:auto;margin-right:auto;}
body.hero-centered .hero-cta,
body.hero-centered .hero-meta{justify-content:center;}
body.hero-centered .kicker{justify-content:center;}
body.hero-centered .kicker::before{display:none;}
body.hero-centered .phone-stage{order:2;min-height:auto;margin-top:18px;}

/* dark theme */
body.theme-dark{
  --bg:#0E1818; --bg-tint:#14201F; --bg-warm:#171F1C; --panel:#141E1D;
  --ink:#EEF2F0; --body:#B7C1BF; --dim:#7E8A88;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.16);
  --cream:#EEF2F0; --deep:#0A1212; --deep-2:#070D0D;
}
body.theme-dark .store{background:var(--accent);border-color:var(--accent);color:#fff;}
body.theme-dark .store .s2,body.theme-dark .store svg path{fill:#fff;}
body.theme-dark .cta .store{background:var(--cream)!important;color:#0E1818!important;border-color:var(--cream)!important;}
body.theme-dark .card:hover{box-shadow:0 18px 40px rgba(0,0,0,.4);}
body.theme-dark .glow{opacity:.6;}

/* hidden-by-lang helper handled in JS via textContent swap */

/* ============ MOTION ============ */

/* richer scroll reveal (replaces flat fade) + directional + stagger */
.reveal{will-change:opacity, transform;}
.reveal.up{transform:translateY(26px);}
.reveal.in.up{transform:none;}

/* stagger inside grids */
.cards .card.reveal{transition-delay:calc((var(--i, 0)) * .08s);}
.steps .step.reveal{transition-delay:calc((var(--i, 0)) * .1s);}
.quotes .quote.reveal{transition-delay:calc((var(--i, 0)) * .09s);}
.hero-meta .hm{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in .hm{opacity:1;transform:none;}
.hero-meta .hm:nth-child(1){transition-delay:.18s;}
.hero-meta .hm:nth-child(2){transition-delay:.28s;}
.hero-meta .hm:nth-child(3){transition-delay:.38s;}

/* kicker rule draws in */
.kicker::before{transition:width .6s cubic-bezier(.2,.7,.2,1) .15s;}
.reveal .kicker::before{width:0;}
.reveal.in .kicker::before{width:18px;}

/* hero phones: entrance + gentle perpetual float */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes heroRise{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
.phone-stage .p-front{animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both;}
.phone-stage .p-back{animation:heroRise 1.05s cubic-bezier(.2,.7,.2,1) .12s both;}
.phone-stage.lit .p-front{animation:floatA 6.5s ease-in-out infinite;}
.phone-stage.lit .p-back{animation:floatB 8s ease-in-out infinite .4s;}

/* soft breathing glows */
@keyframes glowPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.glow{animation:glowPulse 9s ease-in-out infinite;}
.demo-glow{animation:glowPulse 8s ease-in-out infinite;}
.cta-glow{animation:glowPulse 10s ease-in-out infinite;}

/* feature-row media: a touch of depth on the platter as it parallaxes */
.f-media .phone[data-parallax]{will-change:transform;}

/* ---- floating badges around phone ---- */
.phone-badges-wrap{position:relative;}
.phone-badge{
  position:absolute;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hair);
  border-radius:16px;
  box-shadow:0 4px 18px rgba(20,52,55,.10), 0 1px 4px rgba(20,52,55,.06);
  text-align:center;
  font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.01em;
  opacity:0;transform:translateY(12px) scale(.92);
  animation:badgePop .5s cubic-bezier(.2,.7,.2,1) var(--bd, 0s) forwards;
}
.phone-badge svg{flex:none;opacity:.85;}
@keyframes badgePop{to{opacity:1;transform:translateY(0) scale(1);}}

.badge-tl{left:-52px;top:4%;}
.badge-ml{left:-62px;top:34%;}
.badge-bl{left:-46px;bottom:14%;}
.badge-tr{right:-52px;top:12%;}
.badge-br{right:-48px;bottom:22%;}

@media (max-width:860px){
  .phone-badges-wrap{overflow:visible;}
  .phone-badge{padding:10px 12px;font-size:.7rem;border-radius:12px;}
  .phone-badge svg{width:22px;height:22px;}
  .badge-tl{left:-36px;top:2%;}
  .badge-ml{left:-42px;top:32%;}
  .badge-bl{left:-32px;bottom:12%;}
  .badge-tr{right:-36px;top:10%;}
  .badge-br{right:-32px;bottom:18%;}
}
@media (max-width:560px){
  .phone-badge{padding:8px 10px;font-size:.65rem;border-radius:10px;}
  .phone-badge svg{width:18px;height:18px;}
  .badge-tl{left:-28px;top:0;}
  .badge-ml{left:-32px;top:30%;}
  .badge-bl{left:-26px;bottom:8%;}
  .badge-tr{right:-28px;top:6%;}
  .badge-br{right:-24px;bottom:14%;}
}

/* button + card micro-interactions already present; add link underline shimmer */
.nav-links a.lnk{position:relative;}
.nav-links a.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--accent);border-radius:2px;transition:right .28s cubic-bezier(.2,.7,.2,1);}
.nav-links a.lnk:hover::after{right:0;}

/* ---- capability grid (dark band) ---- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px;}
.cap{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;}
.cap:hover{transform:translateY(-3px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}
.cap-ico{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(127,176,174,.15);}
.cap h4{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:#fff;}
.cap p{margin:5px 0 0;font-size:.86rem;line-height:1.45;color:rgba(239,242,240,.64);}
.caps .cap.reveal{transition-delay:calc((var(--i, 0)) * .05s);}
@media (max-width:900px){ .caps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .caps{grid-template-columns:1fr;} }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.up,.hero-meta .hm{transition:none!important;transform:none!important;opacity:1!important;}
  .phone-stage .p-front,.phone-stage .p-back,.phone-stage.lit .p-front,.phone-stage.lit .p-back{animation:none!important;}
  .glow,.demo-glow,.cta-glow{animation:none!important;}
  .f-media .phone[data-parallax]{transform:none!important;}
  html{scroll-behavior:auto;}
}