/* v3 motion layer: 3D hero, story chapters, reveals, tilt, cursor (30 Oct 2026) */
:root{--night:#07090d;--night-2:#0e1118;--glow:#5b78ff;--ease:cubic-bezier(.2,.7,.1,1)}

/* ---------- home: dark cinematic header ---------- */
.home-cinema .header{position:sticky;top:0;z-index:50;background:rgba(7,9,13,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff;transition:background .3s}
.home-cinema .header.light{background:rgba(247,247,243,.86);color:var(--ink);border-color:var(--line)}
.home-cinema .header .nav{min-height:84px}
.home-cinema .header:not(.light) .nav-cta{border-color:#fff}
.home-cinema .header:not(.light) nav a:hover{color:var(--glow)}

/* ---------- 3D hero ---------- */
.hero3d{position:relative;min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);background:radial-gradient(1200px 700px at 72% 40%,#14204d 0%,var(--night) 62%);color:#fff;overflow:hidden;display:flex;align-items:center}
.hero3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero3d-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,9,13,.95) 0%,rgba(7,9,13,.75) 40%,rgba(7,9,13,0) 62%),linear-gradient(0deg,var(--night) 0%,rgba(7,9,13,0) 28%)}
.hero3d-inner{position:relative;z-index:2;padding:56px 0 96px}
.hero3d-meta{display:flex;justify-content:space-between;gap:24px}
.hero3d-meta .eyebrow{color:#b5c3ff}.hero3d-meta .muted{color:#8a90a0}
.hero3d-grid{display:grid;grid-template-columns:1fr 230px;gap:56px;align-items:end;margin-top:36px}
.hero3d h1{font-size:clamp(46px,5.8vw,92px);line-height:1;letter-spacing:-.05em;margin:0 0 30px;color:#fff;max-width:820px;text-shadow:0 2px 30px rgba(7,9,13,.6)}
.hero3d h1 .blue{color:var(--glow)}
.hero3d-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:#c3c8d4;max-width:560px;margin-bottom:34px}
.hero3d .button.secondary{color:#fff;border-color:rgba(255,255,255,.28)}
.hero3d .button.secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}
.hero3d-card{display:block;position:relative;border-radius:4px;overflow:hidden;background:#11151e;box-shadow:0 40px 90px -30px rgba(34,72,229,.55),0 0 0 1px rgba(255,255,255,.08);transform-style:preserve-3d;will-change:transform}
.hero3d-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.hero3d-card span{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font-size:11px;letter-spacing:.14em;font-weight:650;background:linear-gradient(0deg,rgba(7,9,13,.92),rgba(7,9,13,0))}
.hero3d-card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 260px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.18),transparent 60%);pointer-events:none;mix-blend-mode:overlay}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;color:#8a90a0;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:42px;background:linear-gradient(#8a90a0,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{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}}
.no-webgl .hero3d{background:radial-gradient(900px 600px at 75% 45%,#1d2e78 0%,#0d1430 40%,var(--night) 75%)}

/* word-by-word headline */
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.split-words.in .w>span{transform:none}

/* ---------- story chapters ---------- */
.story{position:relative;background:var(--night);color:#fff;padding:120px 0 140px;overflow:hidden}
.story::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 15% 10%,rgba(34,72,229,.22),transparent 70%);pointer-events:none}
.story .eyebrow{color:#b5c3ff}
.story h2{color:#fff;max-width:900px;margin-bottom:84px}
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px 80px;align-items:start}
.story-head{position:sticky;top:150px}
.story-grid .story-end{grid-column:1/-1}
.story-grid .chapter{grid-template-columns:120px 1fr;gap:28px}
.story-track{position:relative;display:grid;gap:96px;padding-left:72px}
.story-track::before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.12)}
.story-track::after{content:"";position:absolute;left:12px;top:8px;width:1px;height:calc((100% - 16px) * var(--p,0));background:linear-gradient(var(--glow),#9fb1ff);box-shadow:0 0 18px var(--glow)}
.chapter{position:relative;display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:baseline}
.chapter::before{content:"";position:absolute;left:-66px;top:22px;width:13px;height:13px;border-radius:50%;background:var(--night);border:1px solid rgba(255,255,255,.35);transition:background .5s,border-color .5s,box-shadow .5s}
.chapter.in::before{background:var(--glow);border-color:var(--glow);box-shadow:0 0 0 6px rgba(91,120,255,.18)}
.ch-num{font-family:var(--display);font-size:clamp(64px,8vw,120px);line-height:.9;font-weight:700;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
.chapter.in .ch-num{-webkit-text-stroke:1px var(--glow)}
.chapter h3{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.045em;margin:0 0 14px;color:#fff}
.chapter p{font-size:clamp(17px,1.5vw,21px);color:#aeb4c2;max-width:560px;margin:0}
.story-end{margin:110px 0 0;font-family:var(--display);font-size:clamp(26px,3vw,44px);letter-spacing:-.04em;line-height:1.2;max-width:820px}
.story-end span{color:var(--glow)}

/* ---------- home: whole page in the same night theme ---------- */
.home-cinema{background:var(--night);color:#e9ebf1;--line:rgba(255,255,255,.1);--muted:#9aa1b0}
.home-cinema h1,.home-cinema h2,.home-cinema h3{color:#fff}
.home-cinema .subdued{color:#6c7384}
.home-cinema .blue{color:var(--glow)}
.home-cinema .dark{background:var(--night-2)}
.home-cinema .contact-panel,.home-cinema .artwork{background:#111521;color:#e9ebf1}
.home-cinema .lead,.home-cinema .body-copy p{color:#aeb4c2}
.home-cinema .note,.home-cinema .section-tail p{color:#9aa1b0}
.home-cinema .eyebrow{color:#b5c3ff}
.home-cinema .index{color:var(--glow)}
.home-cinema .trust-strip{border-color:rgba(255,255,255,.1)}
.home-cinema .trust-value{color:#fff}
.home-cinema .trust-label{color:#9aa1b0}
.home-cinema .svc-grid{gap:18px}
.home-cinema .svc{background:linear-gradient(160deg,#121827 0%,#0b0e15 100%);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:30px 26px 32px}
.home-cinema .svc:hover{border-color:rgba(91,120,255,.45)}
.home-cinema .svc h3{color:#fff}
.home-cinema .svc p{color:#9aa1b0}
.home-cinema .intro-video{background:radial-gradient(900px 500px at 20% 50%,#16224f,var(--night) 70%)}
.home-cinema .thumb{background:#11151e;border-radius:6px}
.home-cinema .tag{background:rgba(7,9,13,.85);color:#fff;backdrop-filter:blur(6px)}
.home-cinema .industry-list li{color:#fff;transition:color .3s,padding .3s}
.home-cinema .industry-list li:hover{color:var(--glow);padding-left:10px}
.home-cinema .background-section{background:var(--night-2)}
.home-cinema .moat-grid p,.home-cinema .process p{color:#9aa1b0}
.home-cinema .text-link:hover{color:var(--glow)}
.home-cinema .button.secondary{color:#fff;border-color:rgba(255,255,255,.28)}
.home-cinema .button.secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}
.home-cinema .cta{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 80% 20%,#2248e5 0%,#14246b 45%,var(--night) 85%)}
.home-cinema .cta .eyebrow{color:#dfe5ff}
.home-cinema .cta p{color:#c9cfdd}
.home-cinema footer{color:#e9ebf1}
.home-cinema .footer-top p,.home-cinema .footer-bottom{color:#8a90a0}
.home-cinema .social a:hover{color:var(--glow)}

/* ---------- marquee ---------- */
.marquee{background:var(--blue);color:#fff;overflow:hidden;white-space:nowrap;padding:22px 0;font-family:var(--display);font-weight:650;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.03em}
.marquee-track{display:inline-flex;gap:48px;padding-right:48px;animation:marquee 38s linear infinite}
.marquee-track span::after{content:"\2726";margin-left:48px;opacity:.6;font-size:.6em;vertical-align:middle}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- site-wide reveals + tilt ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s;will-change:transform}
.thumb{overflow:hidden}
.thumb img{transition:transform .8s var(--ease)}
.thumb:hover img{transform:scale(1.06)}
.svc{transition:transform .5s var(--ease),box-shadow .5s,background .4s}
.svc:hover{box-shadow:0 24px 60px -30px rgba(34,72,229,.45)}

/* ---------- cursor + grain ---------- */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--glow)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(91,120,255,.6);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
.cursor-ring.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(91,120,255,.12)}
.grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- responsive ---------- */
@media(max-width:1000px){.hero3d-grid{grid-template-columns:1fr 220px;gap:32px}}
@media(max-width:760px){
.home-cinema .header .nav{min-height:68px}
.hero3d{min-height:auto}
.hero3d-inner{padding:36px 0 84px}
.hero3d-veil{background:linear-gradient(0deg,rgba(7,9,13,.95) 10%,rgba(7,9,13,.45) 60%,rgba(7,9,13,.2) 100%)}
.hero3d-grid{grid-template-columns:1fr;gap:36px;margin-top:22px}
.hero3d h1{font-size:clamp(34px,9.6vw,46px)}
.hero3d canvas{opacity:.55}
.hero3d-card{max-width:240px}
.hero3d-meta .muted{display:none}
.story{padding:84px 0 96px}
.story-grid{grid-template-columns:1fr}
.story-head{position:static}
.story-grid .chapter{grid-template-columns:1fr;gap:6px}
.story h2{margin-bottom:56px}
.story-track{padding-left:40px;gap:64px}
.story-track::before,.story-track::after{left:6px}
.chapter{grid-template-columns:1fr;gap:6px}
.chapter::before{left:-40px;top:14px;width:11px;height:11px}
.story-end{margin-top:72px}
.grain{display:none}
}
@media(prefers-reduced-motion:reduce){
.reveal,.split-words .w>span{opacity:1;transform:none;transition:none}
.marquee-track,.grain,.scroll-cue::after{animation:none}
.cursor-dot,.cursor-ring{display:none}
}