/* ===== OnlineTomorrow home — "night to tomorrow" =====
   Layout idea: the page starts at night (ink), the hero horizon glows,
   and scrolling brings daylight (paper). The brand cursor is the protagonist. */
:root{--night:#0B0E0A;--night-2:#141912;--dawn:#9EC400;--dawn-soft:rgba(158,196,0,.18);--on-night:#F4F5EF;--on-night-muted:#A3A89B}
.home{background:var(--paper)}
/* header over the night hero */
.home .hdr{transition:background .3s ease,border-color .3s ease,color .3s ease}
.home .hdr.night{background:transparent;border-color:transparent;color:var(--on-night);backdrop-filter:none;-webkit-backdrop-filter:none}
.home .hdr.night .btn{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.home .hdr.night .loc{color:var(--on-night-muted)}
.home .hdr.night .menu-btn{background:transparent;border-color:rgba(255,255,255,.25)}.home .hdr.night .menu-btn span,.home .hdr.night .menu-btn span::before,.home .hdr.night .menu-btn span::after{background:var(--on-night)}
.home .hdr{position:fixed;left:0;right:0}
.logo svg path{fill:currentColor}
/* ---------- HERO ---------- */
.night-hero{position:relative;background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.night-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(1200px 520px at var(--mx,62%) 118%,rgba(158,196,0,.38),rgba(158,196,0,.08) 45%,transparent 70%),
             radial-gradient(900px 400px at 15% -10%,rgba(255,255,255,.06),transparent 60%)}
.night-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  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;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.night-hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:150px;padding-bottom:110px;min-height:min(900px,100svh)}
.night-hero h1{font-size:clamp(44px,5.4vw,78px);line-height:.98;letter-spacing:-.045em;margin:26px 0 26px;text-wrap:balance}
.night-hero h1 .on{position:relative;white-space:nowrap}
.night-hero h1 .caret{display:inline-block;width:.08em;height:.82em;background:var(--dawn);margin-left:.06em;vertical-align:-.04em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.night-hero h1 .tm{color:transparent;-webkit-text-stroke:1.5px var(--on-night);background:linear-gradient(90deg,var(--on-night) 0 var(--fill,0%),transparent var(--fill,0%));-webkit-background-clip:text;background-clip:text;transition:--fill .2s}
.night-hero .lead{color:var(--on-night-muted);font-size:clamp(17px,1.5vw,20px);max-width:520px}
.night-hero .status{color:var(--on-night-muted)}
.night-hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.night-hero .btn{background:var(--dawn);color:var(--night);border-color:var(--dawn)}
.night-hero .btn.ghost{background:transparent;color:var(--on-night);border-color:rgba(255,255,255,.35)}.night-hero .btn.ghost:hover{background:rgba(255,255,255,.08)}
.night-hero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;font-size:14px;color:var(--on-night-muted)}.night-hero .facts b{color:var(--on-night);font-weight:600}
/* 3D deck */
.deck{position:relative;height:540px;perspective:1600px;transform-style:preserve-3d}
.deck .stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(14deg + var(--ry,0deg))) rotateY(calc(-22deg + var(--rx,0deg)));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.deck .win{position:absolute;width:74%;left:13%;top:12%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);transform-style:preserve-3d}
.deck .win .bar{height:30px;background:#EDEBEF;display:flex;align-items:center;gap:6px;padding:0 12px}.deck .win .bar i{width:9px;height:9px;border-radius:50%;background:#CFCAD6}
.deck .win .bar em{margin-left:10px;font-style:normal;font-size:11px;color:#55505F;background:#fff;border-radius:5px;padding:2px 10px;max-width:60%;overflow:hidden;white-space:nowrap}
.deck .win .shot{aspect-ratio:16/10;overflow:hidden;background:#E9E7EC}.deck .win .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.deck .w1{transform:translate3d(-26%,-18%,-260px) rotateZ(-4deg);filter:brightness(.55)}
.deck .w2{transform:translate3d(24%,-24%,-180px) rotateZ(3deg);filter:brightness(.62)}
.deck .w3{transform:translate3d(-30%,26%,-120px) rotateZ(2deg);filter:brightness(.7)}
.deck .w4{transform:translate3d(28%,22%,-60px) rotateZ(-3deg);filter:brightness(.78)}
.deck .w5{transform:translate3d(0,0,40px);animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate3d(0,0,40px)}50%{transform:translate3d(0,-10px,60px)}}
.deck .live-chip{position:absolute;right:12px;top:42px;z-index:3;display:flex;align-items:center;gap:8px;font:600 12px Inter,sans-serif;padding:7px 12px;border-radius:999px;background:rgba(11,14,10,.86);color:#fff;transform:translateZ(1px)}
.deck .live-chip .d{width:8px;height:8px;border-radius:50%;background:#7a7f75;transition:background .3s,box-shadow .3s}
.deck .win.is-live .live-chip .d{background:var(--dawn);box-shadow:0 0 0 4px rgba(158,196,0,.25)}
.deck .win .golive{position:absolute;left:8%;bottom:14%;z-index:3;font:600 14px Inter,sans-serif;background:var(--night);color:#fff;border-radius:999px;padding:12px 20px;display:flex;gap:8px;align-items:center;transition:transform .15s,background .3s}
.deck .win.is-live .golive{background:var(--dawn);color:var(--night)}
.deck .win .golive.press{transform:scale(.94)}
.deck .ripple{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid var(--dawn);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;z-index:4}
.deck .ripple.go{animation:ripple .7s ease-out}
@keyframes ripple{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
.deck .bcur{position:absolute;z-index:6;width:36px;left:0;top:0;transform:translate(var(--cx,70%),var(--cy,80%));transition:transform 1.1s cubic-bezier(.65,0,.25,1);filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));pointer-events:none}
.deck .bcur svg{width:100%;height:auto;display:block}
.hero-ticker{border-top:1px solid rgba(255,255,255,.08);overflow:hidden;white-space:nowrap;color:var(--on-night-muted);font:500 14px Inter,sans-serif}
.hero-ticker .track{display:inline-flex;gap:56px;padding:18px 0;animation:tick 38s linear infinite}
.hero-ticker span{display:inline-flex;align-items:center;gap:12px}.hero-ticker span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dawn)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:980px){.night-hero .wrap{grid-template-columns:1fr;padding-top:110px;padding-bottom:56px;min-height:0}.deck{height:380px}.deck .w1,.deck .w3{display:none}}
@media (max-width:560px){.deck{height:300px}.deck .win{width:86%;left:7%}.night-hero .ctas .btn{flex:1 1 100%}}
/* ---------- dawn transition band ---------- */
.dawn-band{height:140px;background:linear-gradient(var(--night),#2A3313 30%,#C9D98A 72%,var(--paper))}
/* ---------- statement ---------- */
.statement{padding:clamp(64px,10vw,140px) 0 clamp(40px,6vw,80px)}
.statement p{font:600 clamp(30px,4.4vw,62px)/1.08 Outfit,sans-serif;letter-spacing:-.035em;max-width:1120px;text-wrap:balance}
.statement .w{color:#C4C1C9;transition:color .4s ease}.statement .w.lit{color:var(--ink)}
.statement .w.hl{color:var(--ink);background:linear-gradient(transparent 62%,rgba(158,196,0,.45) 62%)}
/* ---------- services spotlight ---------- */
.svc{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
@media (max-width:980px){.svc{grid-template-columns:1fr}}
.spot{position:relative;overflow:hidden;border-radius:28px;background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:16px;text-decoration:none;min-height:420px;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .25s ease,box-shadow .25s ease}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(158,196,0,.18),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover::before{opacity:1}.spot:hover{box-shadow:0 30px 60px -30px rgba(16,20,15,.45)}
.spot.dark{background:var(--night);color:var(--on-night);border-color:var(--night)}.spot.dark .muted{color:var(--on-night-muted)}
.spot h3{font-size:clamp(30px,3vw,42px)}
.spot .big{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.spot .big .h{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em}.spot .big .h small{font-size:.38em;letter-spacing:0;opacity:.7;margin-right:6px}
.spot .arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .25s,background .25s}
.spot:hover .arrow{transform:rotate(-45deg);background:var(--dawn);border-color:var(--dawn);color:var(--night)}
.spot .mock{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--ph)}.spot .mock img{width:100%;height:100%;object-fit:cover;object-position:top}
.spot.dark .mock{border-color:rgba(255,255,255,.12)}
/* ---------- sticky build ---------- */
.build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
.build .steps-v{display:flex;flex-direction:column}
.build .stp{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;border-left:2px solid var(--line);padding-left:28px;transition:border-color .3s}
.build .stp .n{font:600 15px Outfit,sans-serif;color:var(--muted)}.build .stp h3{font-size:clamp(30px,3.2vw,44px);color:#BDB9C3;transition:color .3s}.build .stp p{color:var(--muted);max-width:420px}
.build .stp.on{border-color:var(--ink)}.build .stp.on h3{color:var(--ink)}
.build .pin{position:sticky;top:120px}
.bwin{border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -40px rgba(16,20,15,.45)}
.bwin .bar{height:40px;background:var(--mist);display:flex;align-items:center;gap:8px;padding:0 14px}.bwin .bar i{width:10px;height:10px;border-radius:50%;background:#D6D2DB}
.bwin .url{margin-left:12px;flex:1;max-width:320px;height:26px;border-radius:7px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;font:500 12px Inter,sans-serif;color:var(--muted)}
.bwin .url .lock{opacity:0;transition:opacity .3s}.bwin .url .ld{width:7px;height:7px;border-radius:50%;background:#C9C6CF;transition:background .3s}
.bwin .view{position:relative;aspect-ratio:16/11;overflow:hidden}
.bwin .layer{position:absolute;inset:0;transition:opacity .6s ease,transform .6s ease}
.bwin .wire{padding:6%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:5%;background:#fff}
.bwin .wire div{border:2px dashed #D3CFD8;border-radius:10px}.bwin .wire .a{grid-column:1/-1;height:28px}.bwin .wire .c{grid-column:1/-1;height:70px}
.bwin .design img{width:100%;height:100%;object-fit:cover;object-position:top}
.bwin .grow{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 55%);display:flex;align-items:flex-end;padding:6%}
.bwin .grow .panel{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 20px 40px -20px rgba(0,0,0,.25)}
.bwin .grow .panel b{font:600 13px Inter,sans-serif;color:var(--muted)}.bwin .grow svg{width:100%;height:90px;display:block;margin-top:8px}
.bwin .grow .line{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s ease .2s}
.bwin[data-s="0"] .design,.bwin[data-s="0"] .grow{opacity:0}
.bwin[data-s="1"] .wire,.bwin[data-s="1"] .grow{opacity:0}
.bwin[data-s="2"] .wire,.bwin[data-s="2"] .grow{opacity:0}
.bwin[data-s="3"] .wire{opacity:0}
.bwin[data-s="2"] .url .lock,.bwin[data-s="3"] .url .lock{opacity:1}
.bwin[data-s="2"] .url .ld,.bwin[data-s="3"] .url .ld{background:var(--dawn)}
.bwin[data-s="3"] .grow .line{stroke-dashoffset:0}
.bwin .stamp{position:absolute;right:5%;top:6%;z-index:3;display:flex;align-items:center;gap:8px;font:600 13px Inter,sans-serif;background:var(--night);color:#fff;border-radius:999px;padding:8px 14px;opacity:0;transform:translateY(-6px);transition:.4s}
.bwin[data-s="2"] .stamp,.bwin[data-s="3"] .stamp{opacity:1;transform:none}.bwin .stamp i{width:8px;height:8px;border-radius:50%;background:var(--dawn)}
@media (max-width:980px){.build{grid-template-columns:1fr}.build .pin{position:sticky;top:72px;z-index:2}.build .stp{min-height:46vh}.bwin .view{aspect-ratio:16/9}}
/* ---------- work marquee ---------- */
.reel{overflow:hidden;padding:30px 0 10px;perspective:1400px}
.reel .plane{transform:rotateX(16deg) rotateZ(-3deg) scale(1.06);display:flex;flex-direction:column;gap:22px}
.reel .row{display:flex;gap:22px;width:max-content;animation:reel 60s linear infinite}
.reel .row.r2{animation-direction:reverse;animation-duration:70s}
.reel:hover .row{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
.reel a{display:block;width:340px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -26px rgba(16,20,15,.5);text-decoration:none;transition:transform .25s}
.reel a:hover{transform:translateY(-6px) scale(1.02)}
.reel a .shot{aspect-ratio:16/10;overflow:hidden;background:var(--ph)}.reel a .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.reel a .cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font:600 14px Inter,sans-serif}
@media (max-width:640px){.reel a{width:250px}}
/* ---------- final CTA (night again) ---------- */
.night-cta{background:var(--night);color:var(--on-night);border-radius:36px;padding:clamp(40px,7vw,100px);position:relative;overflow:hidden;isolation:isolate;margin-bottom:clamp(40px,6vw,72px)}
.night-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 320px at 80% 120%,rgba(158,196,0,.4),transparent 70%)}
.night-cta h2{font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.045em;max-width:900px;margin:18px 0 34px}
.night-cta .status{color:var(--on-night-muted)}
.night-cta .mag{display:inline-flex;align-items:center;gap:12px;min-height:64px;padding:0 34px;border-radius:999px;background:var(--dawn);color:var(--night);font:700 18px Inter,sans-serif;text-decoration:none;transition:transform .2s ease}
.night-cta .mag svg{width:16px}
.night-cta .note2{color:var(--on-night-muted);font-size:14px;margin-top:22px}
@media (prefers-reduced-motion:reduce){.deck .stage{transform:rotateX(14deg) rotateY(-22deg)!important}.statement .w{color:var(--ink)}}
/* ===== WebGL hero layer ===== */
#hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.night-hero.gl::before{opacity:.35}
.night-hero.gl::after{opacity:.25}
.night-hero.gl .deck .w1,.night-hero.gl .deck .w2,.night-hero.gl .deck .w3,.night-hero.gl .deck .w4{display:none}
.night-hero.gl .deck .w5{box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14),0 0 80px -20px rgba(158,196,0,.35)}
.night-hero.gl .deck .w5::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 38%);pointer-events:none;z-index:2}
/* title reveal */
.night-hero h1 .ch{display:inline-block;transform:translateY(110%);opacity:0;animation:chUp .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*22ms + 120ms)}
.night-hero h1 .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
@keyframes chUp{to{transform:none;opacity:1}}
.night-hero .lead,.night-hero .ctas,.night-hero .facts,.night-hero .status{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.night-hero .status{animation-delay:.05s}.night-hero .lead{animation-delay:.75s}.night-hero .ctas{animation-delay:.9s}.night-hero .facts{animation-delay:1.05s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.night-hero .scroll-hint{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px Inter,sans-serif;letter-spacing:.14em;color:var(--on-night-muted);opacity:0;animation:fadeUp 1s 1.6s both}
.night-hero .scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--dawn),transparent);display:block;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:980px){.night-hero .scroll-hint{display:none}}
/* counters */
.count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.night-hero h1 .ch,.night-hero .lead,.night-hero .ctas,.night-hero .facts,.night-hero .status{animation:none;opacity:1;transform:none}}
/* mobile: the live deck comes right after the title, so the first screen shows the work */
@media (max-width:560px){
  .night-hero .wrap{padding-top:92px;row-gap:0}
  .night-hero .wrap>div:first-child{display:contents}
  .night-hero .status{order:1}
  .night-hero h1{order:2;margin:14px 0 4px;font-size:clamp(38px,11vw,46px)}
  .night-hero .deck{order:3;height:270px;margin:0 -6px 6px}
  .night-hero .lead{order:4;font-size:16px}
  .night-hero .ctas{order:5;margin-top:20px}
  .night-hero .facts{order:6;margin-top:22px}
}