/* Hagens Media: site styles. One file, no framework, system fonts (zero font downloads). */
:root{
  --bg:#000;--bg-2:#0a0a0d;--card:#111116;--card-2:#17171d;--line:rgba(255,255,255,.12);
  --fg:#f5f5f7;--muted:#a1a1a6;--accent:#2997ff;
  --ign-1:#00d2c6;--ign-2:#00a3ff;--ign-3:#3d5afe;
  --ignite:linear-gradient(92deg,var(--ign-1) 0%,var(--ign-2) 48%,var(--ign-3) 100%);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1180px;--gut:max(20px,env(safe-area-inset-left,0px));--gut-r:max(20px,env(safe-area-inset-right,0px));
  --r:22px;--hdr:56px;--mbar:0px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.08;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(40px,7.4vw,96px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(32px,5.2vw,64px);letter-spacing:-.03em}
h3{font-size:clamp(21px,2.2vw,26px)}
ul,ol{margin:0 0 1em;padding-left:1.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:#000;padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.narrow{max-width:780px}
.grad{background:var(--ignite);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-block;font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.eyebrow.hot{background:var(--ignite);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lede{font-size:clamp(19px,2vw,24px);line-height:1.45;color:var(--muted);max-width:760px}
.lede strong{color:var(--fg);font-weight:600}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font:600 17px/1.1 var(--font);text-decoration:none!important;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--fg);color:#000}
.btn-primary:hover{background:#fff}
.btn-hot{background:linear-gradient(92deg,#00d2c6 0%,#00a3ff 55%,#3a86ff 100%);color:#000}
.btn-hot:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:rgba(255,255,255,.04)}
.btn-ghost:hover{border-color:var(--fg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .btn-row{justify-content:center}
.link-arrow{font-weight:600}
.link-arrow::after{content:" \203A";font-size:1.15em}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--hdr) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:border-color .3s}
/* The blur sits on a pseudo-element: a backdrop-filter on .hdr itself would trap the fixed mobile menu inside the header. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.55);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:background .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr.scrolled::before{background:rgba(0,0,0,.72)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none!important;font-weight:600;font-size:18px;letter-spacing:-.02em;flex:none}
.brand svg{width:30px;height:30px}
.brand .wm{letter-spacing:-.02em}.brand .wm b{font-weight:600}.brand .wm i{font-style:normal;font-weight:800;background:var(--ignite);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.brand .wm em{font-style:normal;font-weight:400;opacity:.6}
.nav{display:flex;align-items:center;gap:2px}
.nav a{color:var(--fg);opacity:.82;font-size:14px;padding:8px 11px;border-radius:999px;text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;background:rgba(255,255,255,.08)}
.nav a.ext::after{content:" \2197";opacity:.7}
.nav .nav-cta{background:var(--fg);color:#000;opacity:1;font-weight:600;margin-left:8px;padding:8px 16px}
.nav .nav-cta:hover{background:#fff}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;color:var(--fg);cursor:pointer;border-radius:999px;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
@media (max-width:1020px){
  .js .menu-btn{display:inline-flex}
  .js .nav{position:fixed;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut-r) 40px var(--gut);background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
  .js .nav a{font-size:24px;font-weight:600;padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line);opacity:1}
  .js .nav a:hover{background:none}
  .js .nav .nav-cta{margin:24px 0 0;text-align:center;border-radius:999px;border:0;font-size:19px;padding:16px}
  .js body.menu-open{overflow:hidden}
  .js body.menu-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .js body.menu-open .menu-btn .x{display:block}
  .js body.menu-open .menu-btn .bars{display:none}
  /* Without JavaScript the full nav wraps onto several rows, so the header sits in the page flow
     instead of over it, and nothing below can slide under it. */
  .no-js .hdr{position:relative;height:auto}
  .no-js .hdr-in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px}
  .no-js .nav{flex-wrap:wrap}
  .no-js .phero{padding-top:clamp(48px,8vw,96px)}
  .no-js .hero-stage{padding-top:28px}
}
/* The reel buttons need JavaScript; without it the poster stays and the buttons are hidden. */
.no-js #reelToggle,.no-js #bandToggle{display:none}

/* Sections */
main{display:block}
.section{padding:clamp(80px,12vw,160px) 0;position:relative}
.section.tight{padding:clamp(56px,8vw,96px) 0}
.light{--bg:#f5f5f7;--card:#fff;--card-2:#fafafc;--line:rgba(0,0,0,.1);--fg:#1d1d1f;--muted:#6e6e73;--accent:#0066cc;--ign-1:#00a99f;--ign-2:#0086dd;--ign-3:#3d5afe;--ignite:linear-gradient(92deg,var(--ign-1) 0%,var(--ign-2) 48%,var(--ign-3) 100%);background:var(--bg);color:var(--fg);color-scheme:light}
.light .btn-primary{background:#1d1d1f;color:#fff}
.light .btn-ghost{background:#fff}
.white{--bg:#fff;--card:#f5f5f7;--card-2:#fafafc}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{margin-top:12px}

/* Page hero (inner pages) */
.phero{position:relative;padding:calc(var(--hdr) + clamp(72px,11vw,150px)) 0 clamp(64px,9vw,120px);overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;background:radial-gradient(60% 50% at 70% 30%,rgba(61,90,254,.22),transparent 70%),radial-gradient(45% 40% at 20% 20%,rgba(0,163,255,.16),transparent 70%),radial-gradient(40% 35% at 50% 0%,rgba(0,210,198,.12),transparent 70%)}
.phero .stars{position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(1px 1px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 42% 62%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 48%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 82%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 38%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 8% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 94% 86%,#fff 50%,transparent 51%);background-size:420px 420px}
@media (prefers-reduced-motion:no-preference){.phero .stars{animation:drift 90s linear infinite}}
@keyframes drift{to{background-position:420px -420px}}
.phero h1{max-width:980px}
.phero .lede{margin-top:20px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--fg)}
.crumbs span[aria-hidden]{margin:0 8px;opacity:.5}

/* Home hero: full-bleed reel that settles into a framed screen as you scroll.
   The stage is never shorter than the screen and never shorter than its own copy, and it always
   leaves room for the fixed header, so the tagline can't be clipped or hidden on a short phone.
   The pinned pull-back effect only runs when JavaScript has confirmed the copy fits on one screen
   (.hero-pin); otherwise the hero is a normal full-screen block that scrolls away. */
.hero{position:relative;--p:0}
.hero-stage{position:relative;min-height:100vh;min-height:100svh;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 20px);overflow:hidden;display:flex;align-items:flex-end}
.hero.hero-pin{height:170vh;height:170svh}
.hero.hero-pin .hero-stage{position:sticky;top:0}
.hero-media{position:absolute;inset:0;overflow:hidden;background:#05060a url(/poster.jpg) center/cover no-repeat;transform-origin:50% 40%;will-change:transform;transform:scale(calc(1 - var(--p) * .12));border-radius:calc(var(--p) * 34px)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity .8s ease}
.hero-media video.on{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.88) 72%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 70%);opacity:calc(1 - var(--p) * .55)}
.hero-copy{position:relative;z-index:2;width:100%;padding-bottom:clamp(64px,8vh,96px);transform:translateY(calc(var(--p) * -60px));opacity:calc(1 - var(--p) * 1.1)}
.hero-copy h1{font-size:clamp(40px,min(6.6vw,9.6vh),104px);margin-bottom:.25em}
.hero-copy h1 .l2{display:block}
.hero-copy .lede{color:#e8e8ed;max-width:720px;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero-copy .lede strong{color:#fff}
.hero-ctrl{position:absolute;z-index:3;right:var(--gut-r);bottom:18px;display:flex;align-items:center;gap:10px;font-size:12px;color:#d2d2d7}
.hero-ctrl button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font:600 13px var(--font);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-ctrl button svg{width:12px;height:12px}
.hero-ctrl .credit{opacity:.75}
.hero-next{position:absolute;inset:auto 0 0;z-index:2;height:0}
@media (max-width:700px){
  .hero.hero-pin{height:150vh;height:150svh}
  /* Keep the reel's Pause button and the counter above the fixed call / free-audit bar. */
  .hero-ctrl{left:var(--gut);right:auto;bottom:calc(var(--mbar) + 10px)}
  .hero-copy{padding-bottom:calc(var(--mbar) + 58px)}
}
/* Short phones (iPhone SE, iPhone 12-15 with Safari's bars showing, small Androids): tighter type
   so the whole first screen, tagline to counter, fits without scrolling. */
@media (max-width:700px) and (max-height:780px){
  .hero-stage{padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 12px)}
  .hero-copy .eyebrow{margin-bottom:8px}
  .hero-copy h1{font-size:clamp(30px,9.4vw,40px)}
  .hero-copy .lede{font-size:16px;line-height:1.4}
  .hero-copy .btn-row{margin-top:16px;gap:8px;flex-wrap:nowrap}
  .hero-copy .btn{min-height:46px;padding:0 15px;font-size:15px;white-space:nowrap}
  .hero-copy .counter{margin-top:16px}
  .hero-copy .counter .num{font-size:28px}
}
@media (max-width:359px){.hero-copy .btn-row{flex-wrap:wrap}}
/* No pinning: copy sits still and fully visible. */
.hero:not(.hero-pin) .hero-media,.hero:not(.hero-pin) .hero-copy{transform:none;opacity:1;border-radius:0}
.hero:not(.hero-pin) .hero-media::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto!important}
  .hero-stage{position:relative!important}
  .hero-media,.hero-copy{transform:none!important;opacity:1!important;border-radius:0!important}
}

/* Counter */
.counter{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:30px}
.counter .num{font:700 clamp(30px,4.4vw,52px)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counter .lab{font-size:14px;color:#d2d2d7;max-width:220px;line-height:1.35}

/* Scroll-lit statement */
.statement{font-size:clamp(34px,5.6vw,76px);line-height:1.08;letter-spacing:-.03em;font-weight:700;max-width:1100px}
.js .statement[data-lit] .w{opacity:.18;transition:opacity .25s linear}
.js .statement[data-lit] .w.on{opacity:1}
.leaks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,7vw,88px)}
.leak{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.leak b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.leak b.grad{display:inline-block}
.leak h3{margin-bottom:8px}
.leak p{color:var(--muted);margin:0}
@media (max-width:860px){.leaks{grid-template-columns:1fr}}

/* Bento service grid */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;grid-column:span 2;display:flex;flex-direction:column;min-height:300px;padding:30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:var(--fg);text-decoration:none!important;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.light .tile:hover{border-color:rgba(0,0,0,.25)}
.tile.wide{grid-column:span 3;min-height:340px}
.tile .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);margin-bottom:auto}
.light .tile .ico{background:#f0f0f3}
.tile .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile h3{margin:28px 0 8px}
.tile p{color:var(--muted);margin:0 0 18px;font-size:16px}
.tile .go{margin-top:auto;font-weight:600;color:var(--accent);font-size:15px}
.tile .go::after{content:" \203A"}
.tile::after{content:"";position:absolute;z-index:-1;width:300px;height:300px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(61,90,254,.28)),transparent 70%);opacity:.8;transition:opacity .3s,transform .5s}
.tile:hover::after{transform:scale(1.2)}
.light .tile::after{opacity:.45}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.tile,.tile.wide{grid-column:span 1}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.tile{min-height:0}.tile h3{margin-top:22px}}

/* AI block */
.ai-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.ai-sticky{position:sticky;top:calc(var(--hdr) + 32px)}
.uses{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.uses li{padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.uses li b{display:block;font-size:18px;margin-bottom:4px}
.uses li span{color:var(--muted);font-size:16px}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr}.ai-sticky{position:static}}
.console{margin-top:30px;border-radius:18px;background:#0b0c10;border:1px solid rgba(255,255,255,.12);overflow:hidden;font:13.5px/1.6 var(--mono);color:#d2d2d7;box-shadow:0 30px 80px -30px rgba(61,90,254,.35)}
.console-top{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:#8e8e93;font-size:12px}
.console-top i{width:10px;height:10px;border-radius:50%;background:#3a3a3f}
.console-top i:nth-child(1){background:#ff5f57}.console-top i:nth-child(2){background:#febc2e}.console-top i:nth-child(3){background:#28c840}
.console-top span{margin-left:8px}
.console ol{list-style:none;margin:0;padding:16px 18px 18px;min-height:228px}
.console li{white-space:pre-wrap;word-break:break-word}
.console li .t{color:#8e8e93}
.console li .ok{color:#30d158}
.console li .ai{color:var(--ign-3)}
.js .console[data-play] li{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.js .console[data-play] li.on{opacity:1;transform:none}

/* Stats + quotes */
.stats{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:16px}
.stat{padding:28px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.stat .num{display:block;font:700 clamp(30px,3.6vw,46px)/1.05 var(--font);letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stat span{color:var(--muted);font-size:15px;line-height:1.4;display:block}
@media (max-width:980px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats .stat:first-child{grid-column:1/-1}}
@media (max-width:480px){.stats{grid-template-columns:minmax(0,1fr)}}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.quote{margin:0;padding:clamp(28px,4vw,44px);border-radius:var(--r);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.quote blockquote{margin:0 0 24px;font-size:clamp(20px,2.1vw,26px);line-height:1.35;letter-spacing:-.015em;font-weight:500}
.quote figcaption{margin-top:auto;color:var(--muted);font-size:15px}
.quote figcaption b{display:block;color:var(--fg);font-size:17px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* Industries chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);color:var(--fg);background:var(--card);font-weight:500;text-decoration:none}
.chips a:hover{border-color:var(--fg)}

/* Work cards */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.case{border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.case-art{aspect-ratio:16/10;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--art,linear-gradient(135deg,#1b1b2f,#3a1c71))}
.case-art svg{width:min(62%,320px);height:auto}
.case-body{padding:26px 28px 30px}
.case-body .tag{font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.case-body h3{margin:8px 0 8px}
.case-body p{color:var(--muted);margin:0}
@media (max-width:820px){.work{grid-template-columns:1fr}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{padding:28px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font:600 14px var(--mono);margin-bottom:18px;background:var(--ignite);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.steps b{display:block;font-size:20px;margin-bottom:6px;letter-spacing:-.01em}
.steps span{color:var(--muted);font-size:16px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Feature lists on service pages */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{position:relative;padding:16px 18px 16px 50px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;background:var(--ignite)}
.checks li::after{content:"";position:absolute;left:23.5px;top:23px;width:6px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checks b{display:block}
.checks span{color:var(--muted);font-size:16px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);margin:0}
.card p+p{margin-top:.8em}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose h2{font-size:clamp(28px,3.6vw,40px);margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose p,.prose li{color:var(--fg)}
.prose li{margin-bottom:.45em}
.prose .note{padding:18px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:16px}

/* FAQ */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:19px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:28px;font-weight:300;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 22px;color:var(--muted)}
.faq details>div p:last-child{margin-bottom:0}

/* Callout bands */
.band{border-radius:calc(var(--r) + 6px);padding:clamp(36px,6vw,72px);background:radial-gradient(80% 120% at 100% 0%,rgba(61,90,254,.3),transparent 60%),radial-gradient(60% 100% at 0% 100%,rgba(0,163,255,.22),transparent 60%),var(--card-2);border:1px solid var(--line);display:grid;grid-template-columns:1.3fr auto;gap:28px;align-items:center}
.band h2{font-size:clamp(28px,4vw,48px);margin-bottom:.3em}
.band p{color:var(--muted);margin:0;max-width:640px}
@media (max-width:820px){.band{grid-template-columns:1fr}}

/* Forms */
.form{display:grid;gap:16px;padding:clamp(24px,4vw,40px);border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:14px;font-weight:600}
.form label>input,.form label>textarea,.form label>select{display:block;margin-top:6px}
.form label .opt{font-weight:400;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;font:16px/1.4 var(--font);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px;min-height:48px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,151,255,.25)}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;min-height:44px;background:var(--bg)}
.opts input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--ign-2)}
.opts label:has(input:checked){border-color:var(--ign-2)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .fine{font-size:13px;color:var(--muted);margin:0}
.form-msg{padding:14px 16px;border-radius:12px;font-size:15px}
.form-msg.ok{background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.4)}
.form-msg.err{background:rgba(0,163,255,.12);border:1px solid rgba(0,163,255,.45)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.direct{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.direct li{font-size:15px;color:var(--muted)}
.direct a{display:block;font-size:22px;font-weight:600;color:var(--fg);letter-spacing:-.01em}

/* Self-check */
.check-q{display:grid;gap:12px;list-style:none;padding:0;margin:0;counter-reset:q}
.check-q li{padding:20px 22px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center}
.check-q li p{margin:0;font-weight:500}
.check-q li small{display:block;color:var(--muted);font-weight:400;font-size:14px;margin-top:4px}
.yn{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--bg)}
.yn label{position:relative;cursor:pointer}
.yn input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.yn span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:40px;padding:0 14px;border-radius:999px;font-weight:600;font-size:15px}
.yn input:checked+span{background:var(--fg);color:var(--bg)}
.yn input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:620px){.check-q li{grid-template-columns:1fr}}
.result{margin-top:24px;padding:28px;border-radius:var(--r);border:1px solid var(--line);background:var(--card-2)}
.result .score{font:700 56px/1 var(--font);letter-spacing:-.03em}
.result ol{margin:14px 0 0;padding-left:1.3em}
.result li{margin-bottom:.5em}

/* Logo strip / marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee ul{display:flex;gap:44px;list-style:none;margin:0;padding:0;width:max-content;font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.marquee li::before{content:"\2726";margin-right:44px;background:var(--ignite);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){.marquee ul{animation:marq 40s linear infinite}}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover ul{animation-play-state:paused}

/* Reveal on scroll (only when JS is running, so content never hides without it) */
.js [data-in]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-in].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-in]{opacity:1;transform:none;transition:none}}

/* AI page reel band */
.reel-band{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;aspect-ratio:21/9;background:#05060a url(/poster.jpg) center/cover;border:1px solid var(--line)}
.reel-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.reel-band video.on{opacity:1}
.reel-band .cap{position:absolute;left:20px;bottom:16px;font-size:12px;color:#d2d2d7;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:999px}
.reel-band button{position:absolute;right:16px;bottom:12px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font:600 13px var(--font);cursor:pointer}
@media (max-width:620px){.reel-band{aspect-ratio:4/3}}

/* Footer */
.ftr{border-top:1px solid var(--line);padding:64px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--muted);background:var(--bg-2)}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ftr h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin-bottom:14px;font-weight:600}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--fg)}
.ftr .tagline{font-size:20px;color:var(--fg);font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:16px 0 18px;max-width:320px}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:12px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--fg)}
.social a:hover{border-color:var(--fg)}
.social svg{width:18px;height:18px;fill:currentColor}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.ftr-grid{grid-template-columns:1fr}}

/* Mobile action bar (the old site's call button, rebuilt) */
.mbar{display:none}
@media (max-width:700px){
  :root{--mbar:calc(73px + env(safe-area-inset-bottom,0px))}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px));background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.12)}
  /* Fixed 52px buttons, so the bar is always var(--mbar) tall even when "Call (646) 808-9989" wraps. */
  .mbar a{min-height:0;height:52px;padding:0 10px;font-size:15px;line-height:1.15;white-space:normal;text-align:center}
  body{padding-bottom:var(--mbar)}
}
@media (max-width:420px){.btn{white-space:normal;text-align:center;padding-left:20px;padding-right:20px}}
@media print{.hdr,.mbar,.hero-ctrl,video{display:none!important}body{background:#fff;color:#000}.hero{height:auto}.hero-stage{position:static}}

.mbar .btn{white-space:nowrap}
@media (max-width:374px){.mbar .btn{font-size:15px;padding-left:12px;padding-right:12px}}