/* Hoody — hoodyapp.in */
:root{
  --paper:#FAFBFC; --paper-2:#F1F4F8; --card:#FFFFFF;
  --ink:#131416; --text:#14161A; --text-2:#666C76; --text-3:#9BA2AC;
  --rule:#E4E8EE; --rule-2:#EFF2F6;
  --night:#0A0B0D; --night-2:#16181C; --on-night:#F7F8FA; --on-night-2:#8E959F;
  --blue:#2F6BFF; --green:#16A34A; --orange:#F97316; --purple:#8B5CF6; --cyan:#06B6D4;
  --shadow:0 1px 1px rgba(19,20,22,.03),0 12px 32px -14px rgba(19,20,22,.16);
  --shadow-xl:0 2px 4px rgba(19,20,22,.04),0 40px 80px -32px rgba(19,20,22,.28);
  --d:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --b:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --m:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --max:1120px; --ease:cubic-bezier(.16,1,.3,1);
  /* AI-lab accent — gradient/grid language layered on top of the existing
     monochrome system, used for headline emphasis, glows and card hovers. */
  --accent-grad:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  --grid-line:rgba(19,20,22,.05);
  --glow-a:rgba(6,182,212,.32); --glow-b:rgba(47,107,255,.26);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0C0D10; --paper-2:#141619; --card:#17191D;
  --ink:#F4F5F7; --text:#F4F5F7; --text-2:#9AA1AB; --text-3:#6A717B;
  --rule:#26292F; --rule-2:#1E2125;
  --night:#000; --night-2:#111316;
  --blue:#6E9BFF; --green:#3FCB74; --orange:#FF9445; --purple:#A98BFF; --cyan:#22D3EE;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -14px rgba(0,0,0,.8);
  --shadow-xl:0 2px 4px rgba(0,0,0,.6),0 40px 80px -32px rgba(0,0,0,.9);
  --grid-line:rgba(255,255,255,.07);
  --glow-a:rgba(34,211,238,.24); --glow-b:rgba(110,155,255,.22);
}}
:root[data-theme="dark"]{
  --paper:#0C0D10; --paper-2:#141619; --card:#17191D;
  --ink:#F4F5F7; --text:#F4F5F7; --text-2:#9AA1AB; --text-3:#6A717B;
  --rule:#26292F; --rule-2:#1E2125;
  --night:#000; --night-2:#111316;
  --blue:#6E9BFF; --green:#3FCB74; --orange:#FF9445; --purple:#A98BFF; --cyan:#22D3EE;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -14px rgba(0,0,0,.8);
  --shadow-xl:0 2px 4px rgba(0,0,0,.6),0 40px 80px -32px rgba(0,0,0,.9);
  --grid-line:rgba(255,255,255,.07);
  --glow-a:rgba(34,211,238,.24); --glow-b:rgba(110,155,255,.22);
}
.grad-text{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--b);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto}
section{padding:132px 0}
@media(max-width:760px){section{padding:84px 0}body{font-size:16px}}

/* ============ REVEAL ANIMATIONS ============ */
/* `.in` is added by app.js (via IntersectionObserver, or immediately for
   the hero) — but content must NEVER depend on JS actually succeeding to
   become visible at all. A blocked/failed/slow script (an extension, an
   ad-blocker heuristic matching "app.js", a network hiccup) must not be
   able to leave the entire page permanently blank. `reveal-fallback` is a
   plain CSS animation — no JS involved — that forces the visible end state
   after a short delay no matter what happens on the JS side. If `.in`
   arrives first (the common case), its transition runs and this fallback
   just confirms the same end state a moment later; either way the content
   is guaranteed visible well within a couple of seconds.               */
@keyframes reveal-fallback{to{opacity:1;transform:none}}
.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  animation:reveal-fallback 0s linear 2s forwards}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}
[data-reveal][data-d="5"]{transition-delay:.45s}
.js [data-scale]{opacity:0;transform:scale(.94) translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  animation:reveal-fallback 0s linear 2s forwards}
.js [data-scale].in{opacity:1;transform:none}
.meter i{transform:scaleY(.15);transform-origin:center;
  transition:transform .6s var(--ease),background .4s}
.in .meter i,.showcase-frame .meter i{transform:none}
.meter i:nth-child(2){transition-delay:.05s}.meter i:nth-child(3){transition-delay:.1s}
.meter i:nth-child(4){transition-delay:.15s}.meter i:nth-child(5){transition-delay:.2s}
.meter i:nth-child(6){transition-delay:.25s}.meter i:nth-child(7){transition-delay:.3s}
.meter i:nth-child(8){transition-delay:.35s}
.bar i{width:0;transition:width 1.1s var(--ease) .2s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],[data-scale]{opacity:1!important;transform:none!important}
  .meter i{transform:none!important}
}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  border-bottom:1px solid var(--rule-2)}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-a) 35%,var(--glow-b) 65%,transparent);
  opacity:.7;pointer-events:none}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:54px;
  display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand svg{width:22px;height:22px;display:block}
.brand span{font-family:var(--d);font-weight:700;font-size:17.5px;letter-spacing:-.02em}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:13.5px;color:var(--text-2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-size:13.5px;font-weight:500;background:var(--ink);color:var(--paper);
  padding:7px 16px;border-radius:99px;text-decoration:none;transition:opacity .2s,transform .2s}
.nav-cta:hover{opacity:.85;transform:translateY(-1px)}
.site-main-nav{padding-left:20px;padding-right:20px;column-gap:12px}
.site-nav-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.site-contact-link{padding:8px 16px;font-size:13.5px}
.site-presentation-link{font-size:13.5px;color:var(--text-2);text-decoration:none;transition:color .2s}
.site-presentation-link:hover{color:var(--ink)}
@media(max-width:820px){
  .nav-links a:not(.nav-cta):not(.nav-presentation){display:none}
  .nav-links{gap:14px}
}
@media(max-width:540px){
  .site-main-nav{padding-left:14px;padding-right:14px}
  .site-nav-actions{gap:10px}
  .site-presentation-link{font-size:12px}
  .site-nav-actions .site-contact-link{padding:8px 12px;font-size:12px}
  .nav-in{padding:0 18px}
  .nav-links{gap:10px}
  .nav-links .nav-presentation{font-size:12px}
}

/* ============ TYPE ============ */
h1,h2,h3{font-family:var(--d);color:var(--ink);letter-spacing:-.035em;
  line-height:1.02;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(46px,8.2vw,88px)}
h2{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.032em}
h3{font-size:clamp(21px,2.5vw,28px);letter-spacing:-.022em;line-height:1.14}
.lede{font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--text-2);
  margin:26px auto 0;max-width:620px}
p{margin:0 0 20px}
.center{text-align:center}
a{color:var(--blue)}

/* ============ AUDIENCE BADGE — high visibility ============ */
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--m);
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);background:var(--card);border:1px solid var(--rule);
  padding:9px 17px 9px 14px;border-radius:99px;margin:0 0 30px;box-shadow:var(--shadow)}
.badge::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--blue);flex:0 0 auto}
.badge.t::before{background:var(--green)}
.badge.p::before{background:var(--orange)}
.badge.s::before{background:var(--purple)}
.night .badge{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  color:var(--on-night);box-shadow:none}
.eyebrow{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 24px}
.eyebrow::before{content:"[ ";opacity:.55}
.eyebrow::after{content:" ]";opacity:.55}

/* ============ BUTTONS ============ */
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:500;
  padding:13px 27px;border-radius:99px;text-decoration:none;border:1px solid transparent;
  transition:transform .22s var(--ease),opacity .22s,border-color .22s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--ink);color:var(--paper)}.btn-p:hover{opacity:.87}
.btn-s{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-s:hover{border-color:var(--text-3)}
.btn-l{background:var(--on-night);color:var(--night)}
.btn-lo{background:transparent;color:var(--on-night);border-color:rgba(255,255,255,.24)}

/* ============ HERO ============ */
.hero{padding:64px 0 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 45%,transparent 100%)}
.hero-glow{position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:1040px;height:640px;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 420px 380px at 32% 32%,var(--glow-a) 0%,transparent 68%),
    radial-gradient(ellipse 420px 380px at 68% 40%,var(--glow-b) 0%,transparent 68%)}
/* Targeted at .wrap specifically, NOT `.hero>*` — a wildcard here also
   matches .grid-veil/.hero-glow (both real divs, both direct children of
   .hero) and overrides THEIR OWN position:absolute back to relative,
   pulling their height into normal document flow and pushing all real
   content down by however tall the glow happens to be. That was silently
   inflating the gap between the nav and the headline by ~640px. */
.hero>.wrap{position:relative;z-index:1}
.hero-stage{position:relative;margin:60px auto 0;display:flex;align-items:flex-end;
  justify-content:center;gap:clamp(0px,3vw,34px);max-width:640px}
.hero-stage .phone{transform:rotate(-2.2deg);transition:transform .6s var(--ease)}
.hero-stage:hover .phone{transform:rotate(0deg) translateY(-6px)}
.mascot{width:min(224px,40vw);height:auto;display:block;flex:0 0 auto;
  filter:drop-shadow(0 30px 46px rgba(19,20,22,.18))}
@media(max-width:680px){
  .hero-stage{flex-direction:column-reverse;align-items:center;gap:22px}
  .hero-stage .phone{transform:none}
  .mascot{width:min(190px,52vw)}
}
.hero-trust{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:34px 0 0}
.hero-trust span{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);background:var(--card);border:1px solid var(--rule);
  border-radius:99px;padding:7px 14px}
.hero-foot{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:36px 0 0}

/* ============ CINEMATIC SHOWCASE ============ */
/* Track height directly sets scroll-to-progress pace — taller track = more
   scroll distance per frame transition = a slower, more deliberate feel.
   500vh across 4 frames means roughly a page-height of scrolling per frame. */
.showcase-track{height:500vh;position:relative}
.showcase-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;overflow:hidden;
  background:var(--paper);text-align:center}
.showcase-sticky .eyebrow{margin:0}
.showcase-copy{position:relative;width:min(560px,88vw);
  font-size:clamp(18px,2.4vw,26px);height:2.5em}
.showcase-h{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;margin:0;opacity:0;will-change:opacity;text-align:center;text-wrap:normal;
  font-size:clamp(18px,2.4vw,26px);line-height:1.18}
.showcase-stage{position:relative;width:min(340px,80vw);height:min(700px,76vh)}
.showcase-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;will-change:opacity,transform}
/* Same defensive principle as the reveal-fallback above — this crossfade is
   entirely scroll/JS-driven, so without a static default the whole section
   would render as 300vh of blank space if that JS never runs. Show frame
   one as a plain static card until JS actually takes over. */
.showcase-h:first-of-type,.showcase-frame:first-child{opacity:1}
.showcase-dot:first-child{background:var(--ink)}
.showcase-frame .phone,.showcase-frame .heat,.showcase-frame .wa{width:100%;max-width:300px;margin:0}
.showcase-dots{display:flex;gap:8px}
.showcase-dot{width:7px;height:7px;border-radius:99px;background:var(--rule);
  transition:background .3s,transform .3s}
.showcase-dot.active{background:var(--ink);transform:scale(1.3)}
.showcase-stage.wide{width:min(640px,90vw);height:min(460px,55vh)}
.showcase-night .showcase-sticky{background:var(--night)}
.showcase-night .eyebrow,.showcase-night .showcase-h{color:var(--on-night)}
.showcase-night .showcase-dot{background:rgba(255,255,255,.18)}
.showcase-night .showcase-dot.active{background:var(--on-night)}
@media (prefers-reduced-motion:reduce){
  .showcase-track{height:auto}
  .showcase-sticky{position:relative;height:auto;padding:80px 0}
}

/* ============ DEVICE FRAMES ============ */
/* Pure-CSS bezels — the ONLY thing that changes when the app's UI changes
   is the image referenced by .device-screen. Frame markup/CSS never needs
   to be touched again for a routine screenshot refresh. */
/* Height-driven, not width-driven: inside .showcase-stage this sits next to
   a fixed-height sibling (the heading). If width drove the sizing instead,
   the aspect-ratio would compute a height that can exceed the stage's own
   height budget with nothing to clip it — the frame then overflows upward
   and visually covers the sibling above it. */
/* Thin bezel + Dynamic-Island-style cutout, matching current iPhones rather
   than an old thick-notch mockup. */
.device-phone{position:relative;height:100%;width:auto;max-width:340px;
  aspect-ratio:1206/2622;margin:0 auto;border-radius:15%/6.8%;background:#0b0b0d;padding:3.2%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.08) inset}
.device-phone::before{content:"";position:absolute;top:5.5%;left:50%;
  transform:translateX(-50%);width:28%;height:1.9%;background:#0b0b0d;
  border-radius:99px;z-index:2}
.device-phone .device-screen{width:100%;height:100%;object-fit:cover;
  object-position:top center;border-radius:12%/5.2%;display:block;background:var(--paper)}

.device-laptop{position:relative;width:100%;max-width:640px;margin:0 auto}
.device-laptop-screen{position:relative;background:#1a1b1e;border-radius:14px 14px 3px 3px;
  padding:12px 12px 0;box-shadow:0 30px 60px -24px rgba(0,0,0,.4)}
.device-laptop .device-screen{width:100%;aspect-ratio:1440/900;object-fit:cover;
  object-position:top center;border-radius:5px;display:block;background:var(--paper)}
.device-laptop-base{height:14px;background:linear-gradient(180deg,#d7dbe0,#aeb4bb);
  border-radius:0 0 9px 9px;position:relative}
.device-laptop-base::after{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:86px;height:5px;background:#8b9096;border-radius:0 0 5px 5px}

/* ============ STAT STRIP — bold gradient metrics band ============ */
.strip{position:relative;overflow:hidden;background:
    radial-gradient(ellipse 60% 140% at 0% 50%,color-mix(in srgb,var(--cyan) 30%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 60% 140% at 100% 50%,color-mix(in srgb,var(--blue) 34%,transparent) 0%,transparent 70%),
    var(--night)}
.strip::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px}
.strip-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.strip-c{background:transparent;padding:38px 22px;text-align:center}
.strip-v{font-family:var(--d);font-weight:700;font-size:36px;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#fff 0%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.strip-k{font-family:var(--m);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-night-2);margin-top:11px;line-height:1.4}
@media(max-width:700px){.strip-in{grid-template-columns:repeat(2,1fr)}}

/* ============ WHO IT'S FOR ============ */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
@media(max-width:880px){.who{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.who-c{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--rule);
  border-radius:20px;padding:34px 30px 30px;text-decoration:none;display:block;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.who-c::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent-grad);opacity:0;transition:opacity .3s var(--ease)}
.who-c:hover{transform:translateY(-4px);
  box-shadow:var(--shadow-xl),0 0 36px -12px color-mix(in srgb,var(--blue) 45%,var(--purple) 55%);
  border-color:var(--text-3)}
.who-c:hover::before{opacity:1}
.who-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:20px;font-size:20px}
.who-c h3{margin-bottom:11px;font-size:23px}
.who-c p{font-size:14.5px;color:var(--text-2);margin:0 0 18px;line-height:1.5}
.who-go{font-size:13.5px;font-weight:500;color:var(--blue);display:inline-flex;
  align-items:center;gap:6px}
.who-go::after{content:"→";transition:transform .3s var(--ease)}
.who-c:hover .who-go::after{transform:translateX(4px)}

/* ============ NIGHT ============ */
.night{background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.night::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 40%,transparent 100%)}
.night::after{content:"";position:absolute;top:-140px;right:-140px;width:520px;height:520px;
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--purple) 22%,transparent) 0%,transparent 70%)}
.night>*{position:relative;z-index:1}
.night h2,.night h3{color:var(--on-night)}
.night .lede,.night p{color:var(--on-night-2)}
.night .eyebrow{color:var(--on-night-2)}

/* Final CTA — a stronger dual-tone glow than the default .night corner
   accent, so the last section before the footer lands with real punch. */
.cta-finale::after{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:900px;height:640px;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 380px 340px at 30% 30%,color-mix(in srgb,var(--cyan) 30%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 380px 340px at 70% 40%,color-mix(in srgb,var(--blue) 30%,transparent) 0%,transparent 70%)}

/* Soft multi-hue wash — used on sections that would otherwise be flat gray. */
.color-wash{background:
    radial-gradient(ellipse 55% 75% at 12% 15%,color-mix(in srgb,var(--cyan) 12%,transparent) 0%,transparent 62%),
    radial-gradient(ellipse 55% 75% at 88% 30%,color-mix(in srgb,var(--blue) 11%,transparent) 0%,transparent 62%),
    radial-gradient(ellipse 50% 60% at 50% 105%,color-mix(in srgb,var(--purple) 9%,transparent) 0%,transparent 62%),
    var(--paper-2)}

/* ============ PHONE ============ */
.phone{width:272px;background:var(--card);border:1px solid var(--rule);border-radius:34px;
  padding:20px 18px 22px;
  box-shadow:var(--shadow-xl),0 0 46px -14px var(--glow-a);
  display:flex;flex-direction:column;gap:13px;flex:0 0 auto}
.phone.dark{background:var(--night-2);border-color:#24272C;
  box-shadow:var(--shadow-xl),0 0 52px -14px var(--glow-b)}
.ph-cap{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0}
.phone.dark .ph-cap{color:var(--on-night-2)}
.ph-h{font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:-.022em;
  line-height:1.14;margin:0;color:var(--ink)}
.phone.dark .ph-h{color:var(--on-night)}
.ph-p{font-size:12.5px;line-height:1.45;color:var(--text-2);margin:0}
.phone.dark .ph-p{color:var(--on-night-2)}
.ph-num{font-family:var(--d);font-weight:800;font-size:64px;line-height:.92;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.ph-box{background:var(--paper-2);border-radius:14px;padding:13px 14px}
.phone.dark .ph-box{background:rgba(255,255,255,.06)}
.ph-r{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
  padding:6px 0;border-bottom:1px solid var(--rule-2);font-variant-numeric:tabular-nums}
.phone.dark .ph-r{border-bottom-color:rgba(255,255,255,.09)}
.ph-r:last-child{border-bottom:0}
.ph-r span{color:var(--text-2)}
.phone.dark .ph-r span{color:var(--on-night-2)}
.ph-r b{font-family:var(--m);font-weight:500;color:var(--ink)}
.phone.dark .ph-r b{color:var(--on-night)}
.ph-r b.g{color:var(--green)}.ph-r b.b{color:var(--blue)}
.ph-r b.d{color:var(--text-3);font-weight:400}
.ph-btn{background:var(--ink);color:var(--paper);border-radius:99px;text-align:center;
  padding:10px;font-size:12.5px;font-weight:600;margin-top:auto}
.phone.dark .ph-btn{background:var(--on-night);color:var(--night)}
.bar{height:5px;border-radius:99px;background:var(--rule-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--green)}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:54px;margin-top:74px}
@media(max-width:880px){.steps{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
.step-mascot{width:56px;height:56px;border-radius:16px;object-fit:cover;margin:0 0 18px;
  background:var(--paper-2);box-shadow:var(--shadow)}
.step-n{font-family:var(--m);font-size:11px;letter-spacing:.15em;color:var(--cyan);
  margin:0 0 16px;font-weight:500}
.step h3{margin-bottom:12px}
.step p{font-size:15.5px;color:var(--text-2);margin:0}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:50px}}
.split-flip .split-a{order:2}
@media(max-width:900px){.split-flip .split-a{order:0}}

/* ============ HEATMAP ============ */
.heat{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:24px;
  box-shadow:var(--shadow);overflow-x:auto}
.heat-t{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 18px}
.heat-r{display:grid;grid-template-columns:1fr 62px 78px;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:13.5px;min-width:330px}
.heat-r:last-child{border-bottom:0}
.heat-r b{font-weight:500;color:var(--text)}
.heat-n{font-family:var(--m);font-size:12px;color:var(--text-2);text-align:right;
  font-variant-numeric:tabular-nums}
.meter{display:flex;gap:2.5px}
.meter i{width:8px;height:16px;border-radius:2px;background:var(--rule)}
.meter i.on{background:var(--ink)}
.meter i.w{background:var(--orange)}
.reteach{margin-top:18px;padding:14px 16px;background:var(--paper-2);border-radius:12px;
  font-size:13.5px;color:var(--text)}
.reteach b{color:var(--ink)}

/* ============ WHATSAPP ============ */
.wa{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:24px 26px;
  box-shadow:var(--shadow);max-width:420px}
.wa-h{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 16px}
.wa-b{background:var(--paper-2);border-radius:16px 16px 16px 5px;padding:16px 18px;
  font-size:14.5px;line-height:1.6;color:var(--text)}
.wa-b b{color:var(--ink);font-weight:600}

/* ============ TRUST ============ */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:18px;overflow:hidden;margin-top:62px}
@media(max-width:820px){.trust{grid-template-columns:repeat(2,1fr)}}
.trust-c{background:var(--paper);padding:30px 26px}
.trust-c h3{font-size:16px;letter-spacing:-.012em;margin-bottom:9px}
.trust-c p{font-size:13.5px;color:var(--text-2);margin:0;line-height:1.5}

/* ============ LEGAL PAGES ============ */
.legal{padding:76px 0 110px;max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(36px,5.4vw,54px);margin-bottom:14px}
.legal .meta{font-family:var(--m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 46px}
.legal h2{font-size:clamp(22px,2.6vw,28px);margin:56px 0 14px}
.legal h3{font-size:18px;margin:34px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--text-2);line-height:1.65}
.legal strong{color:var(--text);font-weight:600}
.legal ul,.legal ol{padding-left:22px;margin:0 0 20px}
.legal li{margin-bottom:9px}
.legal li::marker{color:var(--text-3)}
.legal table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:14.5px}
.legal th{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule)}
.legal td{padding:12px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top;color:var(--text-2)}
.legal td:first-child{color:var(--text);font-weight:500}
.note{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--orange);
  border-radius:3px 12px 12px 3px;padding:20px 24px;margin:28px 0}
.note p{margin:0;font-size:15px}
.tw{overflow-x:auto}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--rule);padding:62px 0 50px;background:var(--paper-2)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr;gap:34px}}
.f-h{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 16px}
.f-l{display:flex;flex-direction:column;gap:11px}
.f-l a{font-size:14px;color:var(--text-2);text-decoration:none}
.f-l a:hover{color:var(--ink)}
.f-tag{font-size:14.5px;color:var(--text-2);margin:16px 0 0;max-width:280px;line-height:1.5}
.f-bot{margin-top:50px;padding-top:26px;border-top:1px solid var(--rule);display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}

a:focus-visible,.btn:focus-visible,.who-c:focus-visible{outline:2px solid var(--blue);
  outline-offset:3px;border-radius:6px}

/* ============ CTA ============ */
#pilot{position:relative;overflow:hidden}
#pilot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 40%,transparent 100%)}
#pilot .wrap{position:relative;z-index:1}

/* ============ CONTACT ============ */
.ct-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
@media(max-width:820px){.ct-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.ct-c{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--rule);
  border-radius:20px;padding:32px 30px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.ct-c::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent-grad);opacity:0;transition:opacity .3s var(--ease)}
.ct-c:hover{transform:translateY(-3px);
  box-shadow:var(--shadow-xl),0 0 36px -12px color-mix(in srgb,var(--blue) 45%,var(--purple) 55%);
  border-color:var(--text-3)}
.ct-c:hover::before{opacity:1}
.ct-c h3{font-size:21px;margin-bottom:10px}
.ct-c p{font-size:14.5px;color:var(--text-2);margin:0 0 20px;line-height:1.55}
.ct-mail{font-family:var(--m);font-size:14px;color:var(--blue);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;font-weight:500}
.ct-mail::after{content:"→";transition:transform .3s var(--ease)}
.ct-c:hover .ct-mail::after{transform:translateX(4px)}
.ct-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--rule-2)}
.ct-meta div{font-size:13px;color:var(--text-2)}
.ct-meta b{display:block;font-family:var(--m);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px;font-weight:500}

/* ============ PROCESS TIMELINE ============ */
.tl{margin-top:62px;border-top:1px solid var(--rule)}
.tl-r{display:grid;grid-template-columns:112px 1fr;gap:32px;padding:30px 0;
  border-bottom:1px solid var(--rule);align-items:start}
@media(max-width:700px){.tl-r{grid-template-columns:1fr;gap:10px}}
.tl-w{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);padding-top:5px}
.tl-w b{display:block;font-family:var(--d);font-size:25px;letter-spacing:-.025em;
  color:var(--blue);margin-bottom:2px}
@media(max-width:700px){.tl-w b{display:inline;font-size:17px;margin-right:9px}}
.tl-b h3{font-size:19px;margin:0 0 8px}
.tl-b p{font-size:15px;color:var(--text-2);margin:0}
.tl-b ul{margin:8px 0 0;padding-left:19px}
.tl-b li{font-size:14.5px;color:var(--text-2);margin-bottom:6px}
.tl-b li::marker{color:var(--text-3)}

.pill-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.pill{font-family:var(--m);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--card);border:1px solid var(--rule);border-radius:99px;padding:9px 16px;
  color:var(--text-2)}
.night .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:var(--on-night-2)}