body.intro-active { background:#020303; }
body.intro-active .site-header { opacity:0; visibility:hidden; transform:translateY(-100%); }
#engine-intro-root[hidden] { display:none; }
.cinematic-intro { position:relative; z-index:80; height:500vh; background:#020303; }
.intro-sticky { position:sticky; top:0; width:100%; height:100svh; overflow:hidden; color:#f5f1ea; background:#020303; will-change:transform; }
.intro-canvas,.intro-grain,.ignition-flash { position:absolute; inset:0; width:100%; height:100%; }
.intro-canvas { display:block; }
.intro-grain { pointer-events:none; opacity:.085; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.ignition-flash { opacity:0; background:radial-gradient(circle at 50% 52%,#fff 0,#ffd8cb 7%,rgba(255,74,31,.55) 24%,transparent 58%); mix-blend-mode:screen; }
.intro-copy,.intro-manifesto,.intro-brand { position:absolute; z-index:3; left:50%; margin:0; text-align:center; opacity:0; visibility:hidden; }
.intro-copy { top:11vh; width:min(680px,90vw); transform:translateX(-50%); opacity:1; visibility:visible; }
.intro-logo { position:absolute; z-index:4; top:24px; left:28px; width:205px; color:#f5f1ea; }
.intro-logo .brand-wordmark { width:100%; }
.intro-whisper { margin:0; color:#f2efea; font-size:clamp(22px,2.25vw,36px); font-weight:740; line-height:1.1; letter-spacing:-.035em; text-transform:none; white-space:nowrap; text-shadow:0 2px 24px #000; }
.intro-copy>span { display:block; margin-top:12px; color:#aaa6a0; font:700 9px/1.3 ui-monospace,SFMono-Regular,monospace; letter-spacing:.15em; text-transform:uppercase; }
.intro-copy>i { display:block; margin-top:11px; color:#ff5a36; font:400 18px/1 sans-serif; animation:intro-nudge 1.5s ease-in-out infinite; }
@keyframes intro-nudge { 50% { transform:translateY(6px); } }
.intro-manifesto,.intro-brand { top:50%; transform:translate(-50%,-50%); }
.intro-data-cloud { position:absolute; z-index:4; inset:0; pointer-events:none; opacity:0; visibility:hidden; }
.data-token { position:absolute; min-width:150px; padding-top:10px; border-top:1px solid rgba(255,255,255,.2); text-shadow:0 3px 24px #000; opacity:0; visibility:hidden; }
.data-token::before { content:""; position:absolute; left:0; top:-2px; width:34%; height:3px; background:#ff5a36; box-shadow:0 0 15px rgba(255,75,35,.65); }
.data-token span { display:block; color:#a5a9a7; font:700 8px/1 monospace; letter-spacing:.17em; }
.data-token b { display:block; margin-top:8px; color:#f5f1ea; font-size:clamp(22px,2.5vw,39px); line-height:1; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.data-token--views { left:27%; top:25%; }.data-token--visitors { right:8%; top:20%; }.data-token--engagement { right:17%; bottom:16%; }.data-token--clicks { left:43%; bottom:10%; }.data-token--requests { right:38%; top:11%; }
.intro-reach,.intro-views { position:absolute; z-index:5; left:50%; top:50%; width:100%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; opacity:0; visibility:hidden; }
.intro-reach>span,.intro-views>span { display:block; color:#ff7657; font:800 11px/1 monospace; letter-spacing:.32em; }
.intro-reach strong,.intro-views strong { display:block; margin-top:5px; color:#f4f0e9; font-size:clamp(110px,20vw,330px); font-weight:880; line-height:.78; letter-spacing:-.09em; font-variant-numeric:tabular-nums; text-shadow:0 0 75px rgba(255,80,38,.18); }
.intro-reach small,.intro-views small { display:block; margin-top:25px; color:#b4b0aa; font:700 9px/1 monospace; letter-spacing:.16em; text-transform:uppercase; }
.intro-views { text-align:left; padding-left:7vw; }.intro-views>span,.intro-views>small { padding-left:1vw; }
.intro-views strong { font-size:clamp(125px,23vw,370px); white-space:nowrap; }
.intro-manifesto { width:min(1000px,90vw); }
.intro-manifesto span { display:block; margin-bottom:22px; color:#ff7658; font:700 10px/1 ui-monospace,SFMono-Regular,monospace; letter-spacing:.2em; text-transform:uppercase; }
.intro-manifesto strong { display:block; font-size:clamp(48px,7vw,108px); line-height:.84; letter-spacing:-.075em; text-transform:uppercase; text-shadow:0 0 38px rgba(255,88,48,.22); }
.intro-brand { width:96vw; }
.intro-brand__name { display:flex; justify-content:center; overflow:hidden; font-size:clamp(49px,10.5vw,170px); font-weight:900; line-height:.85; letter-spacing:-.078em; white-space:nowrap; }
.intro-brand__name span { display:inline-block; }
.intro-brand p { margin:28px auto 0; color:#aaa7a2; font-size:clamp(14px,1.35vw,20px); letter-spacing:-.015em; }
.intro-skip { position:absolute; z-index:5; right:28px; bottom:25px; display:flex; align-items:center; gap:14px; padding:11px 0; border:0; border-bottom:1px solid rgba(255,255,255,.25); color:#a7aaa8; background:none; font:700 10px/1 ui-monospace,SFMono-Regular,monospace; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; }
.intro-skip:hover { color:#fff; border-color:#ff5a36; }
.intro-skip span { color:#ff5a36; font-size:15px; }
@media (max-width:980px) {
  .cinematic-intro { height:420vh; }
  .intro-logo { display:none; }
  .data-token--views { left:15%; }.data-token--visitors { right:5%; }
}
@media (max-width:640px) {
  .cinematic-intro { height:360vh; }
  .intro-copy { top:9svh; }
  .intro-whisper { font-size:24px; white-space:normal; }
  .intro-copy>span { max-width:260px; margin:10px auto 0; }
  .data-token { min-width:112px; }
  .data-token b { font-size:25px; }
  .data-token--views { left:7%; top:24%; }.data-token--visitors { right:5%; top:36%; }.data-token--engagement { right:8%; bottom:19%; }.data-token--clicks { left:9%; bottom:31%; }.data-token--requests { right:4%; top:14%; }
  .intro-reach strong,.intro-views strong { font-size:24vw; line-height:.86; }
  .intro-reach small,.intro-views small { margin-top:15px; }
  .intro-views { padding-left:5vw; }
  .intro-skip { right:16px; bottom:18px; min-height:42px; }
  .intro-manifesto strong { font-size:43px; }
  .intro-brand__name { font-size:13vw; }
  .intro-brand p { max-width:280px; }
}
@media (prefers-reduced-motion:reduce) {
  #engine-intro-root,.cinematic-intro { display:none!important; }
}