/* ============================================================
   Nadel — Online Ordering & Digital Store Platform
   Dark theme built on the brand green #009C4A.
   ============================================================ */

:root{
  /* ---------- surfaces ---------- */
  --bg:#FFFFFF;
  --bg-2:#F7F8FA;              /* alternating band, barely off-white */
  --card:#FFFFFF;
  --card-2:#F4F6F8;

  /* ---------- lines & washes ----------
     Every fill that used to be a hardcoded white-alpha wash on the dark
     theme now reads from these, so chrome and skeleton art follow the
     palette instead of carrying baked-in values. */
  --line:rgba(16,18,21,.09);
  --line-2:rgba(16,18,21,.15);
  --wash-1:rgba(16,18,21,.025);
  --wash-2:rgba(16,18,21,.055);
  --wash-3:rgba(16,18,21,.11);

  /* ---------- brand ---------- */
  --brand:#009C4A;             /* global brand colour */
  --accent:#009C4A;            /* fills: green behind white text */
  --accent-hi:#00753A;         /* accent INK: 5.6:1 on white */
  --accent-dim:rgba(0,156,74,.08);
  --accent-line:rgba(0,156,74,.26);

  /* ---------- text ---------- */
  --text:#0E1013;
  --muted:#5A6068;             /* 6.5:1 on white */
  --muted-2:#6B7178;           /* 4.9:1 — still legal for body text */

  /* ---------- radii: Clario's measured 12 / 20 / 30 / pill scale ---------- */
  --r-sm:12px;
  --r:20px;
  --r-lg:30px;
  --r-xl:38px;

  /* ---------- elevation: soft and low-opacity, never muddy ---------- */
  --sh-1:0 1px 2px rgba(16,18,21,.04),0 8px 22px -16px rgba(16,18,21,.20);
  --sh-2:0 2px 4px rgba(16,18,21,.05),0 18px 40px -22px rgba(16,18,21,.26);
  --sh-3:0 30px 70px -40px rgba(16,18,21,.36);
  /* the Clario card tell: a bright hairline inside the top edge */
  --sh-card:0 1px 2px rgba(16,18,21,.04),0 14px 34px -20px rgba(16,18,21,.20),
            inset 0 1px 0 rgba(255,255,255,.9);

  /* ---------- surfaces that invert per band ----------
     Declared as pairs so .band-dark can swap them in one place instead of
     each component carrying a hardcoded light value. */
  --panel-1:#FFFFFF;           /* large panels: quote, QR card, final CTA */
  --panel-2:#F4F7F8;
  --art-1:#F6F8F9;             /* inset mockup art */
  --art-2:#EDF0F2;
  --tile-1:#EDF0F2;            /* small tiles: avatar */
  --tile-2:#E2E6E9;
  --em-1:#00753A;              /* gradient display text */
  --em-2:#009C4A;
  --bloom:rgba(0,156,74,.075); /* hero bloom */

  --shell:1160px;
  --measure:880px;             /* prose column — Clario's text measure */
  --pad:24px;
}

/* ============================================================
   ALTERNATING BANDS
   The page runs dark / light / dark down its length. Rather than
   styling each section, .band-dark redeclares the same token layer
   every component already reads from — so cards, hairlines, icon
   tiles, buttons and the mockup art all follow with no per-section
   rules. Adding or reordering a band is a one-class change.
   ============================================================ */
.band-dark{
  --bg:#0A0B0C;
  --bg-2:#0E0F11;
  --card:#131417;
  --card-2:#1B1D21;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --wash-1:rgba(255,255,255,.03);
  --wash-2:rgba(255,255,255,.06);
  --wash-3:rgba(255,255,255,.13);
  --text:#F5F6F7;
  --muted:#A9AEB5;
  --muted-2:#959BA3;           /* lifted off the light value: 4.5:1 on #0A0B0C */
  --accent-hi:#2BD07E;         /* accent ink readable on black */
  --accent-dim:rgba(0,156,74,.18);
  --accent-line:rgba(43,208,126,.32);
  --panel-1:#17191E;  --panel-2:#0C0D0F;
  --art-1:#131417;    --art-2:#0A0B0C;
  --tile-1:#2A2D33;   --tile-2:#1B1D21;
  --em-1:#2BD07E;     --em-2:#3DDCC8;
  --bloom:rgba(0,156,74,.20);
  --sh-1:0 8px 22px -16px rgba(0,0,0,.75);
  --sh-2:0 18px 44px -24px rgba(0,0,0,.85);
  --sh-3:0 30px 70px -40px rgba(0,0,0,.90);
  --sh-card:0 1px 2px rgba(0,0,0,.35),0 14px 34px -20px rgba(0,0,0,.80),
            inset 0 1px 0 rgba(255,255,255,.055);
  background:var(--bg);
  color:var(--text);
  position:relative;z-index:1;
}
/* the supplied lockup is white artwork: un-invert it back on dark bands */
.band-dark .brand-logo{filter:none}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

::selection{background:var(--accent);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typography ---------- */
/* Clario's typographic signature is medium weight with tight negative
   tracking — presence comes from size and letter-spacing, not from a heavy
   face. The old 800-weight display read as shouty once the page went white. */
.display{
  font-family:"Manrope",sans-serif;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.05;
}
h1.display{font-size:clamp(38px,5.6vw,66px);line-height:1.02}
h2.display{font-size:clamp(28px,3.9vw,48px);line-height:1.12;letter-spacing:-.038em}
h3.display{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.022em;line-height:1.28;font-weight:600}

.lead{color:var(--muted);font-size:clamp(15.5px,1.35vw,18px);line-height:1.62}
.muted{color:var(--muted)}
.dim{color:var(--muted-2)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(48px,6.5vw,88px)}
.sec-head{max-width:720px;margin-inline:auto;text-align:center}
.sec-head .lead{margin-top:18px}

/* Asymmetric section header: eyebrow + heading on the left, the supporting
   line set against it on the right, closed by a hairline. Replaces the
   centred stack on the main sections. */
.sec-head.wide,.sec-head.lean{max-width:none;margin-inline:0;text-align:left}
.sec-head.wide{
  display:grid;grid-template-columns:1.06fr .78fr;
  gap:clamp(18px,5vw,72px);align-items:end;
}
.sec-head.wide,.sec-head.lean{
  padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid var(--line);
}
.sec-head.wide h2,.sec-head.lean h2{margin-top:20px}
/* centred variant of the lean header: eyebrow and heading stacked on the
   section's axis. No hairline here — it only earns its keep on .wide, where
   it ties the left title to the right lead across the column gap. The
   padding-bottom stays: it is the gap to the content below. */
.sec-head.lean.centered{max-width:900px;margin-inline:auto;text-align:center;
  border-bottom:none}
.sec-head.wide .lead{margin-top:0;padding-bottom:4px}
.sec-head.wide+.steps,.sec-head.wide+.feat,.sec-head.wide+.bento,
.sec-head.lean+.faq,.sec-head.wide+.faq{margin-top:clamp(30px,4vw,52px)}
@media (max-width:820px){
  .sec-head.wide{grid-template-columns:1fr;align-items:start;gap:16px}
  .sec-head.wide .lead{padding-bottom:0}
}

/* ---------- eyebrow pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 11px;
  border:1px solid var(--accent-line);
  background:var(--accent-dim);
  border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-hi);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,156,74,.14)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 24px;border-radius:999px;
  font-family:"Manrope",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 8px 20px rgba(0,156,74,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{background:#00AE53;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,156,74,.36)}
/* on white the old translucent wash was invisible — the ghost button is now
   a real white surface that lifts on hover */
.btn-ghost{background:var(--card);border-color:var(--line-2);color:var(--text);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--wash-1);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px}
.btn-block{width:100%}

/* ---------- glow ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:80;padding-top:14px;margin-bottom:-80px}  /* 14 + 66 */
.nav-in{
  display:flex;align-items:center;gap:20px;
  height:66px;padding-inline:16px 16px;
  border:1px solid var(--line);
  /* .78 composited to rgb(201) over a dark band, dropping the nav links to
     3.85:1. .86 is the threshold for 4.5:1; .90 keeps margin and still reads
     as glass, and the bar now crosses both band colours safely. */
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-radius:999px;
  box-shadow:var(--sh-1);
}
/* the supplied lockup is white artwork — it would vanish on either light
   surface, so it is knocked back to ink wherever it appears. */
.brand-logo{filter:brightness(0)}
.nav-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Manrope",sans-serif;font-weight:800;font-size:17px;letter-spacing:-.03em}
.brand-mark{
  width:32px;height:32px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,#00B857,var(--accent) 55%,#00662F);
  display:grid;place-items:center;
  box-shadow:0 6px 18px -6px rgba(0,156,74,.7),inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-mark svg{width:17px;height:17px}
.brand-logo{height:42px;width:auto;display:block}
.foot-brand .brand-logo{height:48px}
@media (max-width:560px){.brand-logo{height:34px}}
.brand span{color:var(--accent-hi)}
.nav-links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav-links a{
  padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);
  transition:color .16s ease,background .16s ease;
}
.nav-links a:hover{color:var(--text);background:var(--wash-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{height:42px;padding:0 18px;font-size:14px}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);place-items:center}
.burger span{display:block;width:16px;height:1.6px;background:var(--text);border-radius:2px;transition:.2s}
.burger span+span{margin-top:4px}
.mobile-menu{display:none}

/* ============================================================
   HERO
   ============================================================ */
/* Clario's hero composition: eyebrow -> headline -> supporting copy -> CTAs
   -> one large rounded visual. The room photo moves OUT of the background
   and INTO that framed visual, so the page can stay white while the photo
   still does the work it was added for. */
.hero{
  position:relative;isolation:isolate;z-index:2;
  padding-top:calc(clamp(28px,4.5vw,52px) + 80px); /* clears the overlaid nav */
  padding-bottom:clamp(44px,5.5vw,72px);
  text-align:center;
  /* visible, not hidden: the product shot is meant to hang past the band's
     bottom edge. z-index:2 keeps it over the section that follows. */
  overflow:visible;
}
/* --bg and --bg-2 are four steps apart, which at this size read as one dead
   black rectangle. Five layers instead: the brand bloom behind the headline,
   a cool top light, two off-axis brand glows that give the black a
   direction, and a vertical wash that lifts at the top and again at the
   bottom, where the product shot needs a ground to sit on. Every stop stays
   dark enough that --muted-2 body copy still clears 6:1. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 40% at 50% -4%,  var(--bloom),                transparent 70%),
    radial-gradient(120% 70% at 50% 0%,  rgba(255,255,255,.05),       transparent 58%),
    radial-gradient(75% 55% at 4% 6%,    rgba(43,208,126,.10),        transparent 62%),
    radial-gradient(70% 60% at 98% 36%,  rgba(61,220,200,.07),        transparent 64%),
    linear-gradient(180deg,#12161C 0%,#0A0B0C 48%,#0D1218 100%);
}
.hero-in{position:relative;z-index:1;max-width:var(--measure);margin-inline:auto}
.hero h1{margin-top:24px}
/* large display text, so the lighter stop still clears AA at 3:1 */
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--em-1),var(--em-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-top:22px;max-width:680px;margin-inline:auto;
  text-wrap:balance}  /* 680px = ~60ch: three even lines, no orphan */

/* ---- hero supporting visual: the product shot, floating in 3D ----
   Three nested elements, one job each, so nothing fights for `transform`:
     .hero-stage  owns the perspective + the reveal (.rv) translate
     .hero-tilt   owns the tilt, the scroll scale and the pointer parallax
                  (JS writes only custom properties on it)
     .hero-float  owns the idle float keyframes
   Every moving value is a transform or an opacity — no layout is touched. */
.hero-stage{
  /* the shot sits closer to the page edge than the text column does. It is
     centred against the band, not the .wrap, so the width can never exceed
     its container — an over-constrained box would drop `auto` margins and
     spill to the right, which is where horizontal overflow comes from. */
  --edge:clamp(10px,1.4vw,18px);

  /* ---- the scroll-driven unfold ----
     The shot starts tilted back, lifted and small, and turns flat to face
     the reader as the hero scrolls away. JS writes exactly two things:
     --p (0 at the top of the page, 1 once the unfold has finished) and the
     pointer-parallax pair. Everything else is derived here, so a
     breakpoint only has to restate the four start values. */
  --p:0;              /* unfold progress, written by JS */
  --rx0:15deg;        /* start tilt,  unfolds to 0 */
  --ry0:-5deg;
  --lift0:52px;       /* start rise,  settles to 0 */
  --sc0:.82;          /* start scale, grows to 1 */

  --mx:0deg;          /* pointer parallax, written by JS (desktop only) */
  --my:0deg;

  --rx:calc(var(--rx0) * (1 - var(--p)));
  --ry:calc(var(--ry0) * (1 - var(--p)));
  --lift:calc(var(--lift0) * (1 - var(--p)));
  --scale:calc(var(--sc0) + (1 - var(--sc0)) * var(--p));

  position:relative;z-index:1;
  /* nothing here is interactive, so the strip that hangs over the next
     section must not eat that section's hovers or clicks */
  pointer-events:none;
  width:min(1120px,calc(100% - var(--edge) * 2));
  /* the bottom margin is negative by more than the band's own bottom
     padding — that difference is what hangs past the hero */
  margin:clamp(44px,6vw,76px) auto clamp(-130px,-8vw,-70px);
  perspective:1500px;
  /* vanishing point above the panel: the tilt reads as a lid opening
     towards the reader rather than as a box seen from below */
  perspective-origin:50% 0%;
}
.hero-tilt{
  transform-style:preserve-3d;
  transform:
    translate3d(0,var(--lift),0)
    rotateX(calc(var(--rx) + var(--my)))
    rotateY(calc(var(--ry) + var(--mx)))
    scale(var(--scale));
}
/* no will-change: a permanently promoted layer here left the screenshot
   unrasterised in Chrome, and an active transform animation is promoted
   for the duration anyway */
.hero-float{animation:heroFloat 6.4s ease-in-out infinite}
@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-9px,0)}
}

.hero-visual{
  position:relative;margin:0;
  border-radius:24px;overflow:hidden;
  border:1px solid var(--line);background:var(--card-2);
  /* no drop shadow: the panel hangs over the pale section below, where a
     soft shadow only reads as a grey smear under the bottom edge */
  aspect-ratio:2000/1059;
  /* keeps the rasterised layer sharp through the 3D transform */
  backface-visibility:hidden;
}
/* an accent halo under the panel so it reads as lit, not pasted on */
.hero-stage::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:6%;right:6%;top:14%;bottom:-6%;
  background:radial-gradient(60% 60% at 50% 60%,var(--bloom),transparent 72%);
  filter:blur(28px);opacity:.9;
}
/* the shot is a UI screenshot: it is never scaled past 1, so it stays as
   sharp as the source file */
.hero-visual img{width:100%;height:auto;display:block}

/* ---- tablet: much shallower depth, still a little dimensional ---- */
@media (max-width:1024px){
  .hero-stage{--rx0:11deg;--ry0:-3deg;--lift0:40px;--sc0:.86;perspective:2200px}
  .hero-float{animation-duration:7s}
  @keyframes heroFloat{
    0%,100%{transform:translate3d(0,0,0)}
    50%    {transform:translate3d(0,-7px,0)}
  }
}
/* ---- phone: a shallow unfold, cropped to the readable part of the UI ---- */
@media (max-width:720px){
  .hero-stage{--rx0:7deg;--ry0:0deg;--lift0:26px;--sc0:.88;perspective:1100px;
    --edge:var(--pad);
    margin-bottom:clamp(-70px,-8vw,-34px)}
  .hero-visual{
    border-radius:var(--r);
    aspect-ratio:16/11;
  }
  /* the full 2000px UI shrunk to a phone is a grey smudge — show the top
     left ~60% instead, so the sidebar, the title and the counters stay
     legible at this size */
  .hero-visual img{width:165%;height:auto;max-width:none}
  .hero-stage::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-stage{--p:1;--rx0:0deg;--ry0:0deg;--mx:0deg;--my:0deg;--lift0:0px;--sc0:1}
  .hero-tilt{transform:none}
  .hero-float{animation:none}
}

.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.checks li{
  display:flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-size:13.5px;color:var(--muted);
}
.checks svg{width:14px;height:14px;color:var(--cyan);flex:none}

.hero-actions{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:18px}
.platforms{display:flex;align-items:center;gap:20px;color:var(--muted-2);font-size:13px;font-weight:500}
.platforms span{display:flex;align-items:center;gap:7px}
.platforms svg{width:15px;height:15px}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.step{
  position:relative;padding:28px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);overflow:hidden;
  box-shadow:var(--sh-card);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--accent-line)}
.step::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,156,74,.42),transparent);
}
.step-n{
  font-family:"Manrope",sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;
  color:var(--accent-hi);
}
.step h3{margin-top:20px}
.step p{margin-top:10px;color:var(--muted);font-size:14.5px}
.step-ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-top:22px;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent-hi);
}
.step-ico svg{width:20px;height:20px}

/* ============================================================
   FEATURES
   ============================================================ */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.f{
  padding:26px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-card);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.f:hover{border-color:var(--accent-line);transform:translateY(-4px);box-shadow:var(--sh-2)}
.f h3{margin-top:20px;font-size:19px}
.f p{margin-top:9px;color:var(--muted);font-size:14.5px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.marquee{margin-top:56px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.mrow{display:flex;gap:16px;width:max-content;animation:slide 46s linear infinite}
.mrow.rev{animation-direction:reverse;margin-top:16px;animation-duration:54s}
.marquee:hover .mrow{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tcard{
  width:370px;flex:none;padding:24px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
}
.tcard .q{width:26px;height:26px;color:rgba(43,208,126,.5)}
.tcard p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text)}
.tfoot{display:flex;align-items:center;gap:11px;margin-top:20px}
.tfoot .av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--tile-1),var(--tile-2));border:1px solid var(--line-2);
  font-family:"Manrope",sans-serif;font-weight:700;font-size:12.5px;color:var(--accent-hi);
}
.tfoot b{display:block;font-size:14px;font-weight:600}
.tfoot span{font-size:12.5px;color:var(--muted-2)}

.feature-quote{
  /* the header above already carries its own padding-bottom, so a flat 64px
     on top of it opened a hole between the heading and the card */
  margin-top:clamp(20px,2.4vw,32px);max-width:860px;margin-inline:auto;text-align:center;
  padding:clamp(34px,5vw,58px);border-radius:var(--r-xl);
  background:linear-gradient(165deg,var(--panel-1),var(--panel-2));border:1px solid var(--accent-line);
  box-shadow:var(--sh-2);
}
.feature-quote .stars{display:flex;justify-content:center;gap:4px;color:var(--amber)}
.feature-quote .stars svg{width:17px;height:17px}
.feature-quote blockquote{
  margin:22px 0 0;font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.028em;
  font-size:clamp(20px,2.7vw,30px);line-height:1.32;
}
.feature-quote .tfoot{justify-content:center;margin-top:26px}
.feature-quote .tfoot b,.feature-quote .tfoot span{text-align:left}

/* ============================================================
   COVERAGE (replaces Clario pricing block)
   ============================================================ */
.cover{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.site{
  display:flex;align-items:center;gap:14px;padding:20px 22px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease;
}
.site:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.site .sq{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line-2);
  font-family:"Manrope",sans-serif;font-weight:800;font-size:15px;color:var(--accent-hi);
}
.site b{display:block;font-size:15px;font-weight:600;font-family:"Manrope",sans-serif;letter-spacing:-.02em}
.site span{font-size:12.5px;color:var(--muted-2)}

.free-band{
  margin-top:26px;padding:clamp(28px,4vw,44px);border-radius:var(--r-xl);
  background:linear-gradient(120deg,#191B20,#0F1013 60%);
  border:1px solid rgba(43,208,126,.32);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.free-band h3{font-size:clamp(22px,2.6vw,30px)}
.free-band p{margin-top:9px;color:var(--muted);max-width:520px;font-size:15px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:880px;margin:56px auto 0}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:flex-start;gap:18px;padding:24px 0;cursor:pointer;list-style:none;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:clamp(16px,1.8vw,19.5px);
  letter-spacing:-.022em;transition:color .18s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-hi)}
.qa .num{font-size:13px;font-weight:800;color:var(--accent-hi);opacity:.65;padding-top:4px;flex:none;width:26px}
.qa .plus{
  margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);display:grid;place-items:center;transition:.25s;
}
.qa .plus svg{width:13px;height:13px;transition:.25s}
.qa[open] .plus{background:var(--accent);border-color:transparent}
.qa[open] .plus svg{transform:rotate(45deg);color:#fff}
.qa .ans{padding:0 60px 26px 44px;color:var(--muted);font-size:15px;line-height:1.68}

/* ============================================================
   FINAL CTA
   ============================================================ */
/* FAQ runs straight into the CTA card: collapse the doubled band padding */
#faq{padding-bottom:clamp(36px,4.5vw,60px)}
.final{position:relative;overflow:hidden;padding-top:clamp(8px,1.4vw,20px)}
.final .glow{width:820px;height:500px;left:50%;bottom:-210px;transform:translateX(-50%);background:rgba(0,156,74,.07)}
.final-in{
  position:relative;z-index:1;text-align:center;
  padding:clamp(48px,7vw,86px) clamp(24px,5vw,60px);
  border-radius:var(--r-xl);
  background:linear-gradient(165deg,var(--panel-1),var(--panel-2));
  border:1px solid var(--accent-line);
  box-shadow:var(--sh-2);
}
.final-in .lead{margin:20px auto 0;max-width:520px}
.final-in .hero-actions{margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding-block:48px 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot-brand p{margin-top:18px;color:var(--muted);font-size:14.5px;max-width:320px}
.foot-brand .follow{margin:26px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.socials{display:flex;gap:10px;margin-top:22px}
.follow+.socials{margin-top:12px}
.socials a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted);transition:.18s;
}
.socials a:hover{color:var(--text);border-color:var(--accent);background:var(--accent-dim)}
.socials svg{width:16px;height:16px}
.foot h5{margin:0 0 16px;font-family:"Manrope",sans-serif;font-size:14px;font-weight:700;letter-spacing:-.01em}
.foot li+li{margin-top:11px}
.foot li a{font-size:14.5px;color:var(--muted);transition:color .16s ease}
.foot li a:hover{color:var(--accent-hi)}
.foot-bot{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted-2);
}
.foot-bot .made{display:flex;align-items:center;gap:7px}
.foot-bot .made svg{width:13px;height:13px;color:var(--accent)}

/* ============================================================
   REVEAL
   ============================================================ */
/* ============================================================
   SECTION TITLES — word-by-word reveal
   Each word rides up from behind a mask. Words are staggered by
   index so the line unrolls rather than appearing all at once.
   ============================================================ */
.anim-head{--stagger:44ms}
.anim-head .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em;   /* room for descenders inside the mask */
}
.anim-head .w>span{
  display:inline-block;
  transform:translateY(115%);opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .55s ease;
  transition-delay:calc(var(--i,0) * var(--stagger));
}
.anim-head.in .w>span{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .anim-head .w>span{transform:none;opacity:1;transition:none}
}

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:.09s}.rv-3{transition-delay:.18s}.rv-4{transition-delay:.27s}
.rv-5{transition-delay:.36s}.rv-6{transition-delay:.45s}

@media (max-width:560px){
  /* the CTA keeps its label — an unlabelled arrow reads as ambiguous, and
     there is room for the words: brand + burger + gaps leave ~230px at 390px */
  .nav-cta .btn-primary{height:40px;padding:0 15px;gap:6px;font-size:13.5px}
  .nav-cta .btn-primary svg{width:15px;height:15px}
  .brand{font-size:15.5px}
  .brand-mark{width:28px;height:28px;border-radius:9px}
  .brand-mark svg{width:15px;height:15px}
  .nav-in{gap:12px;padding-inline:14px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- 1280: ease the gutters before anything reflows ---- */
@media (max-width:1280px){
  :root{--pad:28px}
}

/* ---- 1024 tablet: nav collapses to the sheet, grids halve ---- */
@media (max-width:1024px){
  :root{--pad:24px}
  .nav-links{display:none}
  .burger{display:grid}
  .nav-in{padding-inline:16px 12px}
  .nav-cta .btn-ghost{display:none}
  .mobile-menu{
    display:block;max-height:0;overflow:hidden;transition:max-height .32s ease;
    margin-top:0;border-radius:var(--r-lg);
  }
  /* the gap lives inside the clipped box, so it collapses with it */
  .mobile-menu ul{margin-top:10px}
  .mobile-menu.open{max-height:400px}
  .mobile-menu ul{
    padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
    box-shadow:var(--sh-2);
  }
  .mobile-menu a{display:block;padding:12px 14px;border-radius:12px;font-size:15px;color:var(--muted)}
  .mobile-menu a:hover{background:var(--wash-2);color:var(--text)}
  .steps,.feat{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:34px}
  .foot-brand{grid-column:span 3}
}

/* ---- 768 tablet-portrait: one column, tighter rhythm ---- */
@media (max-width:768px){
  :root{--pad:20px}
  .sec{padding-block:clamp(40px,6vw,60px)}
  .steps,.feat{grid-template-columns:1fr}
  .qa .ans{padding-left:0;padding-right:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:span 2}
}

/* ---- 430 and below: real phone layout, not a squeezed desktop ---- */
@media (max-width:430px){
  :root{--pad:16px}
  .sec{padding-block:40px}
  .hero{padding-top:24px;padding-bottom:36px}
  .hero h1{margin-top:18px}
  .hero .lead{margin-top:16px}
  /* full-width stacked CTAs are easier to hit than side-by-side pills */
  .hero-actions{margin-top:26px;width:100%}
  .hero-actions .btn{width:100%}
  .btn-lg{height:52px;font-size:15.5px}
  .step,.f{padding:20px;border-radius:var(--r)}
  .step-art{padding:11px}
  .final-in{padding:36px 20px;border-radius:var(--r-lg)}
  .feature-quote{padding:28px 20px;border-radius:var(--r-lg)}
  .qrcard{padding:24px 20px;border-radius:var(--r-lg)}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-brand{grid-column:span 1}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ============================================================
   NADEL — additional components
   ============================================================ */

/* ---------- generic split layout ---------- */
.split{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,5vw,64px);align-items:center;margin-top:56px;
}
.split.top{align-items:start}
.split-head{text-align:left;max-width:none}
.split-head .lead{margin-top:18px}
.split-head p+p{margin-top:14px}
.split-head .btn{margin-top:30px}

/* ---------- solution / feature cards ---------- */
.grid-4{grid-template-columns:repeat(4,1fr)}
/* feature icon tile — a green rounded square above the title */
.f-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent-hi);
}
.f-ico svg{width:21px;height:21px}
.f .f-num{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.14em;opacity:.6}

/* ============================================================
   WHY NADEL — horizontal cards: icon left, copy in a column right
   ============================================================ */
/* one image on the left, the six boxes stacked on the right */
.why-split{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(30px,4vw,52px);align-items:start;
}
.why-media{
  margin:0;position:sticky;top:100px;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/4;background:var(--card-2);
}
.why-media img{width:100%;height:100%;object-fit:cover;display:block}

.why-list{display:flex;flex-direction:column;gap:12px}
.why-box{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
  box-shadow:var(--sh-card);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.why-box:hover{border-color:var(--accent-line);transform:translateX(3px);box-shadow:var(--sh-2)}
.why-ico{
  width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent-hi);
}
.why-ico svg{width:22px;height:22px}
.why-txt{min-width:0;flex:1}
.why-txt h3{
  font-family:"Manrope",sans-serif;font-size:17.5px;font-weight:700;
  letter-spacing:-.025em;line-height:1.3;
}
.why-txt p{margin-top:7px;color:var(--muted);font-size:14.5px;line-height:1.6}

@media (max-width:1024px){
  .why-split{grid-template-columns:1fr}
  .why-media{position:static;aspect-ratio:16/9}
}
@media (max-width:480px){
  .why-box{padding:16px;gap:13px}
  .why-ico{width:42px;height:42px;border-radius:12px}
  .why-ico svg{width:19px;height:19px}
}

.f h3{margin-top:8px}

/* step cards lead with a visual panel, then the label and copy */
.step-art{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(165deg,var(--art-1),var(--art-2));padding:14px;margin-bottom:20px;
}
.sa-card{display:flex;flex-direction:column;gap:9px}
.sa-line{display:block;height:8px;border-radius:99px;background:var(--wash-3)}
.sa-line.w60{width:60%}.sa-line.w40{width:40%}
.sa-field{display:block;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line-2)}
.sa-btn{
  margin-top:3px;height:32px;border-radius:99px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:-.01em;
}
.sa-row{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--wash-1)}
.sa-thumb{width:26px;height:26px;border-radius:7px;flex:none;background:var(--card-2);border:1px solid var(--line)}
.sa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sa-txt i{display:block;height:6px;border-radius:99px;background:var(--wash-3)}
.sa-txt i.w70{width:70%}.sa-txt i.w55{width:55%}.sa-txt i.w65{width:65%}
.sa-txt i.w40{width:40%}.sa-txt i.w35{width:35%}.sa-txt i.w30{width:30%}
.sa-row em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent-hi);flex:none}
.sa-share{align-items:center}
.sa-qr{
  width:104px;aspect-ratio:1;padding:8px;border-radius:12px;background:#fff;
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;margin-inline:auto;
}
.sa-qr i{display:block;border-radius:1px}
.sa-qr i.on{background:#14161A}
.sa-chips{display:flex;gap:6px;justify-content:center;margin-top:4px;flex-wrap:wrap}
.sa-chips span{
  padding:4px 10px;border-radius:99px;border:1px solid var(--accent-line);
  background:var(--accent-dim);color:var(--accent-hi);font-size:10.5px;font-weight:700;
}

.f-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;
  background:var(--accent-dim);border:1px solid var(--accent-line);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-hi);
}
.f-num{
  font-family:"Manrope",sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  color:var(--accent-hi);opacity:.75;
}
.f h3{margin-top:16px}

/* ---------- QR block ---------- */
.qrcard{
  border:1px solid var(--accent-line);border-radius:var(--r-xl);padding:clamp(26px,3vw,40px);
  background:linear-gradient(165deg,var(--panel-1),var(--panel-2));text-align:center;box-shadow:var(--sh-2);
}
.qrcard small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.qr-grid{
  width:min(232px,64vw);aspect-ratio:1;margin:20px auto 0;padding:14px;border-radius:20px;background:#fff;
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:4px;
}
.qr-grid i{display:block;border-radius:2px}
.qr-grid i.on{background:#14161A}
.qrcard h3{margin-top:22px;font-family:"Manrope",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.025em}
.qrcard p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- tick lists ---------- */
.tick-list{display:grid;gap:10px;margin-top:26px}
.tick-list.two{grid-template-columns:1fr 1fr}
.tick-list li{
  display:flex;align-items:center;gap:11px;padding:13px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:14.5px;color:var(--muted);
}
.tick-list li .tk{
  width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(43,208,126,.35);
}
.tick-list li .tk svg{width:10px;height:10px;color:var(--accent-hi)}

/* ---------- contact ---------- */
.contact-meta{display:flex;flex-direction:column;gap:20px;margin-top:34px}
.contact-meta dt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.contact-meta dd{margin:6px 0 0;font-family:"Manrope",sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.contact-meta a:hover{color:var(--accent-hi)}
.form{
  border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,38px);
  background:linear-gradient(165deg,#15171B,#0C0D0F);
}
.field{display:flex;flex-direction:column;gap:8px}
.field+.field{margin-top:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row .field+.field{margin-top:0}
.field label{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--text);
  background:rgba(0,0,0,.3);border:1px solid var(--line-2);border-radius:999px;
  padding:13px 18px;transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{border-radius:20px;resize:vertical;line-height:1.6;min-height:132px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,156,74,.2);
}
.field .err{font-size:12.5px;color:var(--rose)}
.form .btn{margin-top:22px;width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{
  margin-top:16px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--accent-dim);border:1px solid var(--accent-line);
  font-size:14px;color:var(--accent-hi);
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:36px}
  .feat.grid-4{grid-template-columns:1fr 1fr}
}
/* matches the ladder above: the 4-up grid collapses at the same width the
   3-up steps do, so the whole page reaches one column together */
@media (max-width:768px){
  .feat.grid-4{grid-template-columns:1fr}
  .tick-list.two{grid-template-columns:1fr}
}

.hero-note{margin-top:22px;font-size:13.5px;color:var(--muted-2);font-weight:500}  /* the photo scrim is gone, so this returns to the token */
.hero-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:34px}
@media (max-width:560px){.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{justify-content:center}}
/* the why-grid photo stops being sticky once it is above the list, not beside it */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 14px 0;font-weight:600;
}
.skip:focus{left:0}