/* ============================================================
   WISH IMPORTED · iPhone 18 Pro · Landing Page
   Mobile-first · Editorial · Black + White · Navy #092452
   ============================================================ */
:root{
  --bg:#000000;
  --ink:#f5f5f7;                          /* Apple off-white */
  --muted:rgba(245,245,247,.56);
  --faint:rgba(245,245,247,.32);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.05);
  --accent:#092452;                      /* brand navy — pops on white */
  --accent-2:#7d97cf;                     /* light navy — legible accent on black */
  --accent-dim:rgba(125,151,207,.12);
  --card:rgba(255,255,255,.025);
  --card-hi:rgba(255,255,255,.05);
  --pill:#f5f5f7;                         /* CTA pill on dark = near-white */
  --pill-ink:#092452;
  --pigment:0,0,0;            /* dynamic scroll pigment (rgb) */
  --pigment-a:0;              /* dynamic pigment alpha */
  --pick:#5a2a3a;
  --pick-a:0;
  --nav-h:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --wipe:cubic-bezier(.7,0,.2,1);         /* hard-edged editorial wipe */
  --maxw:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  background:#000;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;line-height:1.5;
  letter-spacing:-.01em;
}
/* Reactive scroll background layer */
#bg-field{
  position:fixed;inset:0;z-index:-2;background:#000;
}
#bg-field::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--pigment),calc(var(--pigment-a)*.9)) 0%, transparent 60%),
    linear-gradient(180deg, rgba(var(--pigment),calc(var(--pigment-a)*.5)) 0%, transparent 100%);
  transition:background .9s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#092452;color:#fff}

/* ---------- Light containers (white sections for contrast) ---------- */
section.light{
  background:#ffffff;color:#0a0a0a;position:relative;z-index:1;
  --ink:#0a0a0a;
  --muted:rgba(10,12,20,.56);
  --faint:rgba(10,12,20,.40);
  --line:rgba(9,36,82,.14);
  --line-2:rgba(9,36,82,.07);
  --card:rgba(9,36,82,.028);
  --card-hi:rgba(9,36,82,.06);
  --accent-2:#092452;          /* on white, accents become full navy */
  --accent-dim:rgba(9,36,82,.07);
  --pill:#092452;
  --pill-ink:#ffffff;
}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{position:relative}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent-2);font-weight:500;
}
/* editorial section label: index + name on a hairline */
/* section labels ("06 Câmera" etc.) and the section counter removed for a cleaner look */
.kicker{display:none!important}
#rail{display:none!important}
h1,h2,h3{letter-spacing:-.035em;line-height:1.03;font-weight:600}
.h2{font-size:clamp(21px,5.2vw,38px);font-weight:600;line-height:1.1;letter-spacing:-.035em}
.lead{color:var(--muted);font-size:clamp(13px,3.5vw,16px);line-height:1.62;font-weight:400;letter-spacing:-.01em}
.muted{color:var(--muted)}
.pad{padding:clamp(64px,12vw,128px) 0}
/* consistent vertical rhythm inside content blocks */
.stack>*+*{margin-top:14px}

/* ---------- Reveal on scroll · hard-edged editorial wipe ---------- */
.reveal{
  opacity:0;transform:translateY(14px);
  clip-path:inset(0 0 100% 0);
  transition:opacity .8s var(--wipe),transform .8s var(--wipe),clip-path .8s var(--wipe);
}
.reveal.in{opacity:1;transform:none;clip-path:inset(-40% -40% -40% -40%)}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
/* line-sweep accent: a hairline that draws across on reveal */
.sweep{position:relative}
.sweep::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent-2);
  transition:width 1s var(--wipe) .2s}
.sweep.in::after{width:100%}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;clip-path:none;transition:none}.sweep::after{transition:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--pill);color:var(--pill-ink);font-weight:600;font-size:14px;letter-spacing:-.011em;
  padding:13px 22px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);opacity:1}
.btn svg{width:15px;height:15px}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:200;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease);
}
#preloader.gone{opacity:0;pointer-events:none}
.pl-text{
  font-size:clamp(18px,5.5vw,30px);font-weight:600;letter-spacing:-.02em;
  text-align:center;padding:0 24px;
}
.pl-text b{color:var(--ink)}
.pl-text .y{color:var(--accent-2)}
.pl-caret{display:inline-block;width:2px;height:1em;background:var(--accent-2);
  vertical-align:-2px;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   01 · HEADER
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;
  transition:height .35s var(--ease),background .35s var(--ease),backdrop-filter .35s;
}
header.scrolled{
  height:48px;background:rgba(0,0,0,.6);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.nav-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:center}
.brand{display:flex;align-items:center;gap:0;height:22px}
.brand svg{height:20px;width:auto}
.nav-cta-text{display:none}
.nav-cta-icon{
  width:40px;height:40px;border-radius:50%;background:var(--accent-2);color:#000;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(255,218,0,.3);transition:transform .3s var(--ease);
}
.nav-cta-icon:active{transform:scale(.92)}
.nav-cta-icon svg{width:18px;height:18px}

/* ============================================================
   02 · HERO
   ============================================================ */
/* ---------- Scroll-driven video panel (0001 → 0002, contínuo) ---------- */
.vpanel{position:relative;height:300vh;background:#f4f4f2;z-index:1}
.vsticky{position:sticky;top:0;height:100svh;overflow:hidden}
.vseq{position:absolute;inset:0;width:100%;height:100%;display:block}
.vscrim-top{position:absolute;top:0;left:0;right:0;height:140px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.09) 55%,transparent)}
.vscrim-bottom{position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;z-index:2;
  background:linear-gradient(0deg,#f4f4f2 2%,rgba(244,244,242,.80) 26%,rgba(244,244,242,0) 100%)}
.vcopy{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:3;
  width:100%;max-width:var(--maxw);padding:0 22px;transition:opacity .5s var(--ease)}
.vcopy-b{opacity:0}
.vcopy .eyebrow{margin-bottom:10px}
.vcopy h1{font-size:clamp(30px,7.6vw,62px);font-weight:600;letter-spacing:-.045em;line-height:1.05;
  color:#0a0a0a;margin-bottom:10px}
.vcopy h2{font-size:clamp(26px,6.4vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.06;
  color:#0a0a0a;margin-bottom:10px}
.vcopy .lead{color:rgba(10,12,20,.6);max-width:480px}
@media (prefers-reduced-motion:reduce){.vpanel{height:100svh}.vsticky{height:100svh}}

/* ============================================================
   03 · O QUE MUDOU (comparison)
   ============================================================ */
.section-head{max-width:620px;margin-bottom:clamp(32px,6vw,52px)}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center .lead{margin-left:auto;margin-right:auto}
.section-head .lead{max-width:52ch}
.section-head .h2{margin-bottom:14px}
/* mobile accordion */
.cmp-list{display:flex;flex-direction:column;gap:10px}
.cmp-row{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);
}
.cmp-q{width:100%;background:none;border:none;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 18px;font-size:15px;font-weight:600;text-align:left;letter-spacing:-.01em}
.cmp-q .plus{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .35s var(--ease)}
.cmp-q .plus::before,.cmp-q .plus::after{content:"";position:absolute;background:var(--accent-2);
  top:50%;left:50%;transform:translate(-50%,-50%)}
.cmp-q .plus::before{width:13px;height:1.5px}
.cmp-q .plus::after{width:1.5px;height:13px;transition:transform .35s var(--ease)}
.cmp-row.open .plus{transform:rotate(180deg)}
.cmp-row.open .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.cmp-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.cmp-cells{display:flex;padding:0 18px 18px}
.cmp-cell{flex:1;min-width:0}
.cmp-cell .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.cmp-cell .val{font-size:16px;font-weight:600}
.cmp-cell.new{padding-left:16px;border-left:1px solid var(--line);position:relative}
.cmp-cell.new .lbl{color:var(--accent-2)}
.cmp-cell.new .val{color:var(--accent-2)}
/* desktop table */
.cmp-table{display:none}

/* ============================================================
   04 · DARK CHERRY (sticky)
   ============================================================ */
#cherry{position:relative}
.cherry-sticky{
  position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;
  z-index:0;
}
.cherry-phone{width:min(44vw,200px);filter:drop-shadow(0 40px 80px rgba(90,20,40,.55));
  transition:transform .08s linear;will-change:transform}
.cherry-copy{position:relative;z-index:2;padding:22vh 0 32vh;max-width:520px;margin:0 auto;text-align:center}
.cherry-copy .h2{margin:0 0 20px}
.cherry-glow{color:var(--accent-2)}

/* ============================================================
   05 · ESCOLHA SUA COR (color picker)
   ============================================================ */
#colorway{overflow:hidden}
/* phone on the left, colour swatches in a column beside it — never clipped */
.cw-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.cw-row{display:flex;align-items:center;justify-content:center;gap:clamp(18px,6vw,44px);width:100%}
.cw-phone-wrap{position:relative;flex:0 0 auto;
  height:min(46vh,420px);aspect-ratio:900/1882}
.cw-phone{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease);
  transform:scale(.96);filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.cw-phone.active{opacity:1;transform:scale(1)}
.cw-name{font-size:clamp(20px,5.4vw,28px);font-weight:600;letter-spacing:-.03em;
  min-height:1.1em;text-align:center;margin:clamp(18px,4vw,26px) 0 5px}
.cw-name .caret{color:var(--accent-2)}
.cw-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);min-height:1.2em;text-align:center}
.cw-dots{display:flex;flex-direction:column;gap:clamp(12px,3vw,18px);
  align-items:center;flex:0 0 auto}
.cw-dot{flex:0 0 auto;width:44px;height:44px;border-radius:50%;cursor:pointer;
  position:relative;border:2px solid transparent;padding:0;background:transparent;
  transition:transform .3s var(--ease),border-color .3s}
.cw-dot i{position:absolute;inset:5px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 10px rgba(0,0,0,.35)}
.cw-dot.active{border-color:var(--accent-2);transform:scale(1.1)}
.cw-cta{margin-top:26px;text-align:center}
.cw-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase;margin-top:14px}

/* ============================================================
   06 · CÂMERA (aperture)
   ============================================================ */
#camera .cam-stage{display:flex;flex-direction:column;align-items:center;gap:30px}
.iris-wrap{position:relative;width:min(74vw,320px);aspect-ratio:1}
.iris{width:100%;height:100%}
.cam-caption{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);text-align:center;min-height:1.4em;
  transition:opacity .3s}
.cam-micro{color:var(--faint);font-size:14px;text-align:center;max-width:420px;margin:0 auto}

/* ============================================================
   07 · PERFORMANCE
   ============================================================ */
.perf-chip{position:relative;width:min(62vw,248px);aspect-ratio:1;margin:0 auto 40px}
.perf-chip .core{position:absolute;inset:29%;border-radius:16px;
  background:#092452;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:clamp(15px,4.6vw,20px);letter-spacing:-.02em}
/* etched silicon traces — static, geometric */
.perf-chip .core::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.22);border-radius:9px}
.perf-chip .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.perf-chip .ring.r2{inset:14.5%;border-color:var(--line-2)}
.perf-chip .orbit{display:none}
.perf-chip .tick{position:absolute;top:50%;left:50%;width:1px;height:50%;transform-origin:top center;
  background:linear-gradient(var(--line),transparent)}
.perf-stats{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
.perf-stat{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.perf-stat .n{font-size:clamp(22px,6vw,30px);font-weight:700;letter-spacing:-.03em}
.perf-stat .n .u{color:var(--accent-2)}
.perf-stat .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:right}
.perf-close{text-align:center;font-size:clamp(17px,4.4vw,23px);font-weight:600;
  letter-spacing:-.03em;margin-top:40px;max-width:520px;margin-left:auto;margin-right:auto}

/* ============================================================
   08 · CORPO E TELA (split)
   ============================================================ */

/* ============================================================
   09 · WISH · QUEM É
   ============================================================ */
.slogan{font-size:clamp(20px,5.6vw,34px);font-weight:600;letter-spacing:-.035em;
  line-height:1.1;margin:8px 0 22px}
.slogan .y{color:var(--accent-2)}
.wish-close{border-left:2px solid var(--accent-2);padding-left:18px;color:var(--muted);
  font-size:15px;margin-top:24px;max-width:560px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.stat{border:1px solid var(--line);border-radius:18px;padding:24px 20px;background:var(--card)}
.stat .n{font-size:clamp(26px,7.5vw,40px);font-weight:700;letter-spacing:-.04em;color:var(--accent-2);line-height:1}
.stat .l{color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:10px}

/* ============================================================
   10 · FEEDBACK (testimonials)
   ============================================================ */
#feedback{overflow:hidden}
.marquee{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;
  animation:marquee 46s linear infinite;padding:8px 8px}
.marquee:hover .marquee-track,.marquee.paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tcard{flex:0 0 auto;width:min(80vw,340px);border:1px solid var(--line);border-radius:20px;
  padding:22px 22px;background:var(--card);position:relative}
.tcard .chat{display:flex;gap:12px;align-items:flex-start}
.tcard .avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#3a3a3f,#1a1a1d);display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--accent-2);font-size:15px}
.tcard .bubble{background:rgba(255,255,255,.05);border-radius:4px 16px 16px 16px;padding:13px 15px;
  font-size:14px;line-height:1.5;color:var(--ink)}
.tcard .who{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:12px;padding-left:50px}

/* ============================================================
   13 · FORMULÁRIO
   ============================================================ */
#form-sec{scroll-margin-top:70px}
.form-grid{display:grid;grid-template-columns:1fr;gap:30px}
.form-title .h2{margin:14px 0 14px}
.form-fields{display:flex;flex-direction:column;gap:2px}
.field{position:relative;padding:14px 0 10px;border-bottom:1px solid var(--line)}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px;transition:color .3s}
.field input,.field select,.field textarea{
  width:100%;background:none;border:none;color:var(--ink);font-family:inherit;font-size:16px;
  outline:none;padding:2px 0;letter-spacing:-.01em}
.field textarea{resize:none;min-height:26px;line-height:1.4}
.field select{appearance:none;cursor:pointer}
.field select option{background:#111;color:#fff}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;
  background:var(--accent-2);transition:width .4s var(--ease)}
.field.focused::after{width:100%}
.field.focused label{color:var(--accent-2)}
.field.half-row{display:grid}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.25)}
.form-legal{font-size:12px;color:var(--faint);line-height:1.5;margin-top:20px}
#submitBtn{width:100%;margin-top:24px;padding:17px}
.form-sticky-submit{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(255,255,255,.94) 34%);transform:translateY(130%);
  transition:transform .4s var(--ease);pointer-events:none}
.form-sticky-submit.show{transform:none;pointer-events:auto}
.form-sticky-submit .btn{width:100%;padding:16px;background:#092452;color:#fff}
/* success */
.form-success{display:none;text-align:center;padding:20px 0}
.form-success.show{display:block;animation:fadeUp .7s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.success-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:#092452;
  padding:8px 16px;border-radius:999px;font-weight:600;margin-bottom:24px}
.form-success h3{font-size:clamp(28px,8vw,44px);margin-bottom:16px;letter-spacing:-.03em}
.form-success p{color:var(--muted);max-width:400px;margin:0 auto;font-size:15px}

/* ============================================================
   14 · FAQ
   ============================================================ */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;min-height:44px;text-align:left;font-size:clamp(16px,4.4vw,19px);font-weight:600;letter-spacing:-.02em;
  transition:color .3s}
.faq-item.open .faq-q{color:var(--accent-2)}
.faq-q .ic{flex:0 0 auto;width:20px;height:20px;position:relative}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);background:currentColor;transition:transform .35s var(--ease)}
.faq-q .ic::before{width:13px;height:1.6px}
.faq-q .ic::after{width:1.6px;height:13px}
.faq-item.open .faq-q .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{color:var(--muted);font-size:15px;line-height:1.6;padding:0 0 24px;max-width:640px}

/* ============================================================
   15 · FOOTER
   ============================================================ */
footer{padding:90px 0 60px;text-align:center;border-top:1px solid var(--line-2)}
.foot-logo{height:34px;width:auto;margin:0 auto 22px}
.foot-slogan{font-size:clamp(18px,5vw,26px);font-weight:600;letter-spacing:-.03em;margin-bottom:36px}
.foot-slogan .y{color:var(--accent-2)}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;max-width:340px;margin:0 auto 40px}
.foot-links a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .3s;padding:6px 0;min-height:44px;
  display:flex;align-items:center;justify-content:center}
.foot-links a:hover{color:var(--accent-2)}
.foot-wa{grid-column:1/-1;color:var(--accent-2)!important;border:1px solid rgba(125,151,207,.3);border-radius:999px}
.foot-addr{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);line-height:2}

/* ============================================================
   PERSISTENT SIGNATURE + COUNTDOWN
   ============================================================ */
/* top scroll progress bar */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent-2);z-index:120;
  transition:width .08s linear}
/* section counter (Trackline instrument) */
#rail{position:fixed;left:18px;bottom:16px;z-index:70;display:none;align-items:baseline;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--faint);
  pointer-events:none;text-transform:uppercase}
#rail #railIdx{color:var(--accent-2);font-weight:500}
#rail .rail-sep,#rail .rail-tot{color:var(--faint)}
#rail #railName{margin-left:8px;color:var(--muted);letter-spacing:.12em}
#signature{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--faint);
  pointer-events:none;font-weight:500}
#signature .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-2);margin-left:2px;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* ============================================================
   RESPONSIVE · MOBILE FINE-TUNING
   ============================================================ */
/* respect notch / safe areas on fixed chrome */
.nav-inner{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
#rail{left:max(18px,env(safe-area-inset-left))}
#signature{right:max(16px,env(safe-area-inset-right))}
@media (max-width:600px){
  .vcopy .lead{max-width:88%}
  .marquee-track{gap:12px}
  .tcard{width:min(84vw,320px);padding:20px}
}
@media (max-width:400px){
  .wrap{padding:0 18px}
  .vcopy{padding:0 18px;bottom:66px}
  .section-head{margin-bottom:34px}
  .pad{padding:clamp(60px,14vw,150px) 0}
  .stats-grid{gap:10px}
  .stat{padding:20px 16px;border-radius:16px}
  .stat .n{font-size:clamp(24px,8vw,40px)}
  .cmp-cell .val{font-size:15px}
  .faq-q{font-size:16px}
  .success-badge{font-size:10px}
}
@media (max-width:340px){
  .vcopy h1{font-size:28px}
}

/* ============================================================
   RESPONSIVE · DESKTOP
   ============================================================ */
@media (min-width:768px){
  :root{--nav-h:72px}
  .nav-cta-text{display:inline-flex}
  .nav-cta-icon{display:none}
  .vcopy{padding:0 max(40px,calc((100vw - var(--maxw))/2 + 22px))}
  .form-sticky-submit{display:none}

  /* comparison → table */
  .cmp-list{display:none}
  .cmp-table{display:table;width:100%;border-collapse:collapse;
    border:1px solid var(--line);border-radius:18px;overflow:hidden;table-layout:fixed}
  .cmp-table th,.cmp-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line-2);font-size:16px}
  .cmp-table thead th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);font-weight:500}
  .cmp-table th:first-child,.cmp-table td:first-child{color:var(--muted)}
  .cmp-table .col-new{background:var(--accent-dim);color:var(--accent-2);font-weight:600}
  .cmp-table thead .col-new{color:var(--accent-2)}
  .cmp-table tr:last-child td{border-bottom:none}

  .split{grid-template-columns:1fr 1fr;gap:20px}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .perf-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .perf-chip{margin:0}
  .cw-stage{max-width:640px;margin:0 auto}
  .form-grid{grid-template-columns:.8fr 1fr;gap:60px;align-items:start}
  .form-title{position:sticky;top:110px}
  .foot-links{max-width:600px;grid-template-columns:repeat(4,1fr)}
  .foot-wa{grid-column:auto}
  #signature{font-size:13px}
  #rail{display:flex}
  .cw-phone-wrap{height:min(50vh,430px)}
  .iris-wrap{width:340px}
}
@media (min-width:1024px){
  .vcopy h1{font-size:clamp(48px,5vw,72px)}
  .vcopy h2{font-size:clamp(36px,4vw,54px)}
}