:root{
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  --bg:   #0a0d12;
  --bg-2: #0d1219;
  --ink:  #eef2f7;
  --dim:  #9aa7b6;
  --faint:#5c6773;
  --line: #1b2431;
  --accent:  #5b9bff;
  --accent-2:#8fbfff;
  --warm: #f0b429;
  --scrim:#060a0f;
  --r: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:clip;                 
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.02em; }
img{ display:block; max-width:100%; }

.sy-bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px clamp(18px,4vw,44px);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.sy-bar.is-solid{ background:rgba(10,13,18,.72); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.sy-brand img{ height:25px; width:auto; }
.sy-bar-nav{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); }
.sy-bar-cta{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1px solid var(--line); border-radius:99px; padding:7px 16px; color:var(--ink);
  transition:border-color .15s, background .15s, color .15s;
}
.sy-bar-cta:hover{ border-color:var(--accent); color:var(--accent-2); }

.sy-tc{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color .3s;
}
.sy-tc-dot{ width:6px; height:6px; border-radius:50%; background:var(--faint); transition:background .3s, box-shadow .3s; }
.sy-tc.run{ color:var(--dim); }
.sy-tc.run .sy-tc-dot{ background:var(--warm); box-shadow:0 0 8px rgba(240,180,41,.8); }

.sy-burger{
  display:none; position:relative; width:40px; height:40px; padding:0;
  background:rgba(10,13,18,.4); border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.sy-burger span{
  position:absolute; left:11px; right:11px; height:1.6px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.sy-burger span:nth-child(1){ top:15px; }
.sy-burger span:nth-child(2){ top:23px; }
.sy-burger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.sy-burger.open span:nth-child(2){ top:19px; transform:rotate(-45deg); }
@media(max-width:720px){
  .sy-burger{ display:block; }
  .sy-bar-cta{ display:none; }
}

.sy-menu[hidden]{ display:none; }
.sy-menu{
  position:fixed; inset:0; z-index:59; background:rgba(6,9,14,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
}
.sy-menu nav{ display:flex; flex-direction:column; gap:4px; min-width:min(320px,80vw); }
.sy-menu a{
  display:flex; align-items:baseline; gap:16px; padding:10px 6px;
  font-size:clamp(1.15rem,4.6vw,1.5rem); font-weight:650; letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.07); transition:color .15s, padding-left .2s var(--ease);
}
.sy-menu a b{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--warm); letter-spacing:.1em; }
.sy-menu a:hover{ color:var(--accent-2); padding-left:12px; }
.sy-menu .sy-menu-cta{ margin-top:18px; border:1px solid var(--accent); border-radius:12px; justify-content:center;
  padding:12px; font-size:1.05rem; color:var(--accent-2); }

.sy-spine{ position:fixed; top:0; left:0; width:2px; height:100vh; background:rgba(255,255,255,.05); z-index:55; }
.sy-spine-fill{ position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); }

html.sy-intro-lock{ overflow:hidden; }        
.sy-intro{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%, #0b1017, #06090e 72%);
  transition:opacity .5s var(--ease), visibility .5s;
}
.sy-intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.sy-intro-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.sy-intro-ring{ position:relative; width:92px; height:92px; display:grid; place-items:center; }
.sy-intro-ring::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--warm) calc(var(--prog,0) * 360deg), rgba(255,255,255,.12) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.sy-intro-pct{ font-family:var(--mono); font-weight:700; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
.sy-intro-pct::after{ content:"%"; font-size:11px; color:var(--dim); margin-left:1px; vertical-align:top; }
.sy-intro-logo{ height:26px; width:auto; opacity:.96; }
.sy-intro-hint{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.sy-intro-dot{ width:6px; height:6px; border-radius:50%; background:var(--warm); animation:syIntroPulse 1.5s ease-in-out infinite; }
@keyframes syIntroPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.sy-intro-note{
  margin:2px 0 0; max-width:34ch; text-align:center;
  font-size:13.5px; line-height:1.55; color:var(--dim);
  opacity:0; transition:opacity .4s var(--ease);
}
.sy-intro.has-note .sy-intro-note{ opacity:1; }

@media (prefers-reduced-motion: reduce){ .sy-intro{ display:none !important; } }

.scene{ position:relative; }
.scene-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--scrim);
}
.scene-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  filter:saturate(1.02) contrast(1.02);
}
.scene-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.scrim-hero{
  background:
    linear-gradient(to bottom, rgba(6,10,15,.58), rgba(6,10,15,.05) 20%, transparent 34%),
    linear-gradient(to top, rgba(6,10,15,.9) 2%, rgba(6,10,15,.2) 42%, transparent 66%),
    linear-gradient(to right, rgba(6,10,15,.72), rgba(6,10,15,.1) 52%, transparent 72%);
}
.scrim-left{
  background:linear-gradient(to right, rgba(6,10,15,.9), rgba(6,10,15,.42) 44%, rgba(6,10,15,.05) 72%);
}
.scrim-right{
  background:linear-gradient(to left, rgba(6,10,15,.9), rgba(6,10,15,.42) 44%, rgba(6,10,15,.05) 72%);
}
.scrim-center{
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(6,10,15,.66) 100%),
    linear-gradient(to top, rgba(6,10,15,.6), transparent 40%);
}
.scrim-bottom{
  background:linear-gradient(to top, rgba(6,10,15,.92) 4%, rgba(6,10,15,.5) 30%, transparent 58%);
}

.scene-content{
  position:absolute; z-index:3; max-width:min(640px,86vw);
  padding:0 clamp(20px,6vw,90px);
  top:50%; transform:translateY(-50%);
}
.align-left{ left:0; }
.align-right{ right:0; text-align:right; }
.align-center{ left:50%; transform:translate(-50%,-50%); text-align:center; max-width:min(760px,90vw); }
.align-bottom{ left:0; right:auto; top:auto; bottom:9vh; transform:none; max-width:min(620px,88vw); }
.align-top{ left:0; right:auto; top:12vh; bottom:auto; transform:none; max-width:min(560px,88vw); }

.iris-cover{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:var(--scrim);
  --ic:50% 54%;
  opacity:clamp(0, calc((.26 - var(--p, 1)) * 14), 1);
  -webkit-mask:radial-gradient(circle at var(--ic),
      transparent calc(8vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      #000       calc(8.5vmax + min(var(--p, 1) * 4.5, 1) * 160vmax));
  mask:radial-gradient(circle at var(--ic),
      transparent calc(8vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      #000       calc(8.5vmax + min(var(--p, 1) * 4.5, 1) * 160vmax));
}
.iris-cover::after{
  content:""; position:absolute; inset:0; background:var(--warm); opacity:.5;
  -webkit-mask:radial-gradient(circle at var(--ic),
      transparent calc(8vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      #000       calc(8.5vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      transparent calc(9.6vmax + min(var(--p, 1) * 4.5, 1) * 160vmax));
  mask:radial-gradient(circle at var(--ic),
      transparent calc(8vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      #000       calc(8.5vmax + min(var(--p, 1) * 4.5, 1) * 160vmax),
      transparent calc(9.6vmax + min(var(--p, 1) * 4.5, 1) * 160vmax));
}
#zeitlupe .iris-cover{ --ic:50% 50%; }

.shutter-cover{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  display:flex; perspective:900px;
  opacity:clamp(0, calc((.34 - var(--p, 1)) * 10), 1);
}
.shutter-cover i{
  flex:1 1 auto; background:linear-gradient(to bottom, #090c11, #05070b);
  will-change:transform;
}
.shutter-cover i.l{
  transform-origin:left center;
  border-right:1px solid rgba(240,180,41,.30);
  transform:rotateY(calc(clamp(0, calc((var(--p, 1) - var(--d, 0)) * 9), 1) * -104deg));
}
.shutter-cover i.r{
  transform-origin:right center;
  border-left:1px solid rgba(240,180,41,.30);
  transform:rotateY(calc(clamp(0, calc((var(--p, 1) - var(--d, 0)) * 9), 1) * 104deg));
}

.sy-warp .scene-vid{ transform:scale(calc(1 + var(--p, 0) * .25)); transform-origin:50% 50%; }
.sy-warp-line{
  margin:0; font-size:clamp(1.5rem,3.8vw,2.7rem); font-weight:750; letter-spacing:-.02em;
  text-wrap:balance; text-shadow:0 2px 30px rgba(6,10,15,.7);
}
.warp-flash{
  position:absolute; inset:0; z-index:5; pointer-events:none; background:#e9f1ff;
  opacity:clamp(0, min(calc((var(--p, 0) - .8) * 12), calc((1 - var(--p, 0)) * 12)), 1);
}

.scene-index{
  position:absolute; left:clamp(20px,6vw,90px); bottom:26px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); mix-blend-mode:screen;
}
.scene-index::before{
  content:""; width:9px; height:9px; flex:none;
  background:linear-gradient(135deg, var(--warm) 0 50%, transparent 50%);
  border:1px solid var(--warm); border-radius:2px; opacity:.85;
}

.beat{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); will-change:opacity,transform; }
.beat.on{ opacity:1; transform:none; }

.sy-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 18px;
}
.sy-hl{ color:var(--accent); }
.sy-hero-content{ max-width:min(920px,88vw); z-index:4; }

.sy-hero .scene-vid{ transform:scale(calc(1.04 + var(--p,0) * .14)); transform-origin:50% 46%; }
.hero-knockout{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none;
  transform:scale(calc(1 + var(--p,0) * 1.5)); transform-origin:50% 50%;
  opacity:clamp(0, calc(1 - var(--p,0) * 2.4), 1);
}
.hk-line{ fill:#06090e; font-family:var(--sans); font-weight:800; font-size:22px; letter-spacing:-.5px; }
.sy-hero .scrim-hero{ z-index:2; }
.sy-hero .scene-index{ z-index:4; }

.sy-hero-cue{
  position:absolute; left:50%; bottom:46px; transform:translateX(-50%); z-index:4; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  text-shadow:0 2px 16px rgba(6,10,15,.6);
}
.cue-wrap{ position:relative; width:58px; height:58px; }
.cue-ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--warm) calc(var(--sweep, 0) * 360deg), rgba(255,255,255,.16) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}

.cue-num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-style:normal; font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink);
}
.cue-label{ animation:cuePulse 2.4s var(--ease) infinite; }
@keyframes cuePulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.sy-hero-title{
  font-size:clamp(2.7rem,8vw,6rem); line-height:1.0; letter-spacing:-.035em; font-weight:800;
  text-wrap:balance;
}
.sy-hero-subs{ position:relative; margin-top:26px; min-height:4.6em; max-width:44ch; }
.sy-hero-sub{
  position:absolute; left:0; right:0; top:0; margin:0;
  font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.42; color:var(--dim);
}

.sy-bridge{
  min-height:92vh; display:flex; align-items:center; justify-content:center;
  padding:16vh clamp(20px,6vw,90px);
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(91,155,255,.09), transparent 60%),
    var(--bg);
}
.sy-bridge-inner{ max-width:900px; text-align:center; }
.sy-bridge .sy-eyebrow{ color:var(--faint); }
.sy-bridge-line{
  font-size:clamp(1.6rem,4vw,2.9rem); line-height:1.26; letter-spacing:-.02em;
  color:var(--ink); font-weight:640; margin:0;
}
.sy-strike{ position:relative; color:var(--dim); white-space:nowrap; }
.sy-strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:2px;
  background:var(--warm); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .2s; }
.sy-strike.lined::after{ transform:scaleX(1); }
.sy-bridge-note{
  margin:28px auto 0; max-width:60ch; font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--dim); line-height:1.55;
}

.sy-tech-tag{
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid rgba(143,191,255,.32); border-radius:99px;
  padding:5px 13px; margin:0 0 20px; background:rgba(10,13,18,.35); backdrop-filter:blur(3px);
}
.sy-demo-title{
  font-size:clamp(1.9rem,5.4vw,3.9rem); line-height:1.04; letter-spacing:-.03em; font-weight:750;
  text-wrap:balance;
}
.sy-demo-beats{ position:relative; margin-top:22px; min-height:5.2em; }
.align-center .sy-demo-beats{ min-height:4em; }
.sy-demo-line{
  position:absolute; left:0; right:0; top:0; margin:0;
  font-size:clamp(1.05rem,2vw,1.5rem); line-height:1.4; color:var(--ink);
  max-width:40ch;
}
.align-right .sy-demo-line{ margin-left:auto; }
.align-center .sy-demo-line{ margin-inline:auto; }

.sy-count-line{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:20px 0 0; }
.sy-count-line .countup{ font-size:clamp(3rem,8vw,6rem); font-weight:800; letter-spacing:-.04em; line-height:.9;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.sy-count-unit{ font-size:clamp(1rem,1.7vw,1.3rem); color:var(--dim); max-width:22ch; }

.sy-moment .scene-content{ max-width:min(860px,92vw); display:flex; flex-direction:column; align-items:center; }
.sy-moment .sy-tech-tag{ margin-bottom:14px; }
.sy-moment-num{ text-align:center; margin:0; }
.sy-moment-num .countup{
  font-size:clamp(4rem,13vw,10rem); font-weight:800; letter-spacing:-.05em; line-height:.9;
  color:var(--ink); font-variant-numeric:tabular-nums;
  text-shadow:0 4px 40px rgba(6,10,15,.65); display:inline-block;
}
.sy-moment-num .sy-moment-unit{
  font-style:normal; font-family:var(--mono); font-size:clamp(1.1rem,2.6vw,1.9rem);
  color:var(--warm); margin-left:12px; letter-spacing:.08em;
  text-shadow:0 2px 20px rgba(6,10,15,.7);
}
.sy-moment .sy-demo-title{ font-size:clamp(1.7rem,4.4vw,3rem); margin-top:10px; }
.sy-moment .sy-demo-line{ position:relative; left:auto; right:auto; top:auto; margin:16px auto 0; text-align:center; max-width:44ch; }

.hpass .scene-pin{ background:var(--scrim); }
.hp-track{
  position:absolute; inset:0; z-index:1;
  display:flex; width:300vw; height:100%;
  will-change:transform;
}
.hp-panel{ position:relative; width:100vw; height:100%; overflow:hidden; flex:none; }
.hp-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}
.hp-panel .scene-scrim{ z-index:2; }
.hp-copy{
  position:absolute; z-index:3; left:0; top:50%; transform:translateY(-50%);
  max-width:min(620px,86vw); padding:0 clamp(20px,6vw,90px);
  opacity:0; transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hp-panel.on .hp-copy{ opacity:1; }
.hp-copy-bottom{ top:auto; bottom:9vh; transform:none; }
.hp-copy-center{ left:50%; transform:translate(-50%,-50%); text-align:center; }
.hp-copy-center .hp-line{ margin-inline:auto; }
.hp-line{
  margin:20px 0 0; font-size:clamp(1.05rem,2vw,1.5rem); line-height:1.4; color:var(--ink); max-width:40ch;
}
.hp-head{
  position:absolute; top:86px; left:50%; transform:translateX(-50%); z-index:4; margin:0;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); text-shadow:0 2px 12px rgba(6,10,15,.6); white-space:nowrap;
}
.hp-dots{
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%); z-index:4;
  display:flex; gap:9px;
}
.hp-dots i{
  width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.22);
  transition:background .3s;
}
.hp-dots i.on{ background:var(--warm); }

.scrim-aura{
  background:
    radial-gradient(120% 90% at 50% 44%, transparent 34%, rgba(6,10,15,.6) 100%),
    linear-gradient(to top, rgba(6,10,15,.55), transparent 40%);
}

.sy-ink{ --p:0; }
.sy-ink .scene-vid{ filter:saturate(1.22) contrast(1.08) brightness(.5); }

.ink-knockout{
  position:absolute; inset:0; z-index:4; width:100%; height:100%; pointer-events:none;
  transform:none;                                          
  opacity:clamp(0, calc((0.32 - var(--p, 0)) * 11), 1);    
}

.ink-knockout .ik-zoom{
  
  transform:scale(calc(0.1 + (min(var(--p, 0) / 0.28, 1) * min(var(--p, 0) / 0.28, 1)) * 3.4));
  transform-origin:50% 51%;
  transform-box:view-box;
}
.ik-line{ fill:#06090e; font-family:var(--sans); font-weight:800; font-size:21px; letter-spacing:-.5px; }
.scrim-ink{
  background:
    radial-gradient(130% 100% at 50% 46%, transparent 22%, rgba(6,10,15,.66) 100%),
    linear-gradient(to top, rgba(6,10,15,.78), transparent 36%),
    linear-gradient(to bottom, rgba(6,10,15,.55), transparent 24%);
}
.sy-ink-eyebrow{
  position:absolute; top:96px; left:clamp(20px,6vw,90px); z-index:3;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2);
}
.sy-ink-say{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:0 clamp(20px,6vw,90px); text-shadow:0 2px 30px rgba(6,10,15,.6); }
.sy-ink-line{ margin:0; font-size:clamp(2.2rem,6vw,4.4rem); line-height:1.06; letter-spacing:-.03em; font-weight:750; text-wrap:balance; }
.sy-ink-line.big{ font-size:clamp(2.6rem,7.4vw,5.4rem); }
.sy-ink-sub{ margin:22px 0 0; max-width:46ch; font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.42; color:var(--dim); }

.sy-mosaic{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:16vh clamp(20px,6vw,90px); background:var(--scrim);
}
.mosaic-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter:saturate(1.05) brightness(.55);
  animation:mosaicDrift 26s ease-in-out infinite alternate;
}
@keyframes mosaicDrift{
  from{ transform:scale(1.02) translate3d(-0.8%,0,0); }
  to{   transform:scale(1.1)  translate3d(0.8%,-1%,0); }
}
.scrim-mosaic{
  background:
    radial-gradient(90% 72% at 50% 50%, rgba(6,10,15,.78), rgba(6,10,15,.38) 62%, rgba(6,10,15,.66)),
    linear-gradient(to top, rgba(6,10,15,.7), transparent 32%);
}
.sy-mosaic-inner{ position:relative; z-index:3; max-width:900px; text-align:center; }
.sy-mosaic .sy-eyebrow{ color:var(--warm); }
.sy-mosaic-title{
  font-size:clamp(2rem,5.6vw,4.2rem); line-height:1.06; letter-spacing:-.03em; font-weight:800;
  text-wrap:balance; text-shadow:0 2px 30px rgba(6,10,15,.6);
}
.sy-mosaic-sub{
  margin:24px auto 0; max-width:56ch; font-size:clamp(1.02rem,1.7vw,1.3rem); line-height:1.5; color:var(--dim);
}

.sy-outro{
  position:relative; min-height:96vh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:14vh clamp(20px,6vw,90px) 20vh; overflow:hidden; background:var(--bg);
}
.sy-outro-glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:90vw; height:70vw;
  max-width:1100px; max-height:900px; pointer-events:none;
  background:radial-gradient(circle at center, rgba(91,155,255,.16), transparent 60%); filter:blur(10px);
}
.sy-outro-inner{ position:relative; z-index:2; max-width:960px; }
.sy-outro .sy-eyebrow{ color:var(--faint); }
.sy-outro-title{ font-size:clamp(2rem,5.4vw,4rem); line-height:1.08; letter-spacing:-.03em; font-weight:750; text-wrap:balance; }
.sy-outro-sub{ margin:26px auto 0; max-width:58ch; font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.55; color:var(--dim); }
.sy-outro-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.sy-btn{
  font-family:var(--mono); font-size:13.5px; letter-spacing:.02em; padding:13px 26px; border-radius:99px;
  border:1px solid var(--line); color:var(--ink); transition:border-color .16s, background .16s, color .16s, transform .16s var(--ease);
}
.sy-btn:hover{ border-color:var(--accent); color:var(--accent-2); transform:translateY(-2px); }
.sy-btn-solid{ background:var(--accent); border-color:var(--accent); color:#071018; font-weight:600; }
.sy-btn-solid:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#071018; }

.sy-foot{
  display:flex; align-items:center; gap:clamp(14px,3vw,30px); flex-wrap:wrap;
  padding:34px clamp(20px,6vw,90px); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--faint); background:var(--bg);
}
.sy-foot a{ color:var(--dim); transition:color .15s; }
.sy-foot a:hover{ color:var(--accent-2); }
.sy-foot-grow{ flex:1; }

.sy-strip{
  position:fixed; left:50%; bottom:16px; z-index:58;
  transform:translateX(-50%) translateY(96px);
  display:flex; gap:7px; padding:10px 10px;
  background:rgba(8,11,16,.72); border:1px solid var(--line); border-radius:13px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}

.sy-strip::before, .sy-strip::after{
  content:""; position:absolute; left:12px; right:12px; height:3px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 11px);
  border-radius:2px; pointer-events:none;
}
.sy-strip::before{ top:3px; }
.sy-strip::after{ bottom:3px; }
.sy-strip.show{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.strip-th{
  position:relative; display:block; width:52px; height:32px; border-radius:5px; overflow:visible;
  opacity:.5; transition:opacity .25s, transform .25s var(--ease);
}
.strip-th img{
  width:100%; height:100%; object-fit:cover; border-radius:5px;
  border:1px solid rgba(255,255,255,.14);
}
.strip-th:hover{ opacity:.95; transform:translateY(-2px); }
.strip-th.active{ opacity:1; }
.strip-th.active img{ border-color:var(--warm); box-shadow:0 0 0 1px var(--warm); }
.strip-th b{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.08em;
  color:var(--ink); background:rgba(8,11,16,.9); border:1px solid var(--line);
  padding:4px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .2s;
}
.strip-th:hover b{ opacity:1; }
@media(max-width:760px){ .sy-strip{ display:none; } }

.sy-top{
  position:fixed; right:22px; bottom:22px; z-index:65; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:rgba(10,13,18,.7); border:1px solid var(--line); backdrop-filter:blur(8px);
  color:var(--ink); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .18s;
}
.sy-top.show{ opacity:1; transform:none; pointer-events:auto; }
.sy-top:hover{ border-color:var(--accent); }
.sy-top svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.sy-cursor{
  position:fixed; top:0; left:0; z-index:90; width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1.5px solid rgba(143,191,255,.75); border-radius:50%; pointer-events:none;
  transition:width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease),
             border-color .2s, background .2s, opacity .25s;
  mix-blend-mode:screen; opacity:0;
}
.sy-cursor span{ position:absolute; left:50%; top:50%; width:1.5px; height:11px; margin:-5.5px 0 0 -.75px;
  background:var(--accent-2); transition:height .2s var(--ease); }
.sy-cursor.ready{ opacity:1; }
.sy-cursor.link{ width:46px; height:46px; margin:-23px 0 0 -23px; border-color:var(--accent);
  background:rgba(91,155,255,.1); }
.sy-cursor.link span{ height:0; }

@media (hover:none), (pointer:coarse){
  .sy-cursor{ display:none; }
}

@media (max-width:760px), (hover:none) and (pointer:coarse){
  .hpass .scene-pin{ position:sticky; top:0; height:100svh; overflow:hidden; }
  .hp-track{ position:absolute; inset:0; display:block; width:100%; transform:none !important; }
  .hp-panel{ position:absolute; inset:0; width:100%; height:100%; opacity:0;
    transition:opacity .5s var(--ease); will-change:opacity; }
  .hp-panel.on{ opacity:1; }
  .hp-panel .hp-copy{ opacity:1; }
  .hp-head{ top:66px; }               
  .hp-dots{ display:flex; bottom:54px; }
  
  .hpass .hp-copy{ width:100%; max-width:min(720px,100%); padding-inline:clamp(22px,7vw,48px); }
  .hpass .sy-demo-title{ font-size:clamp(1.7rem,6.6vw,2.6rem); line-height:1.14; letter-spacing:-.02em; }
  .hpass .sy-demo-title br{ display:none; }
  .hpass .hp-line{ font-size:clamp(1.05rem,4vw,1.3rem); line-height:1.5; max-width:36ch; }
  .hpass .hp-copy-center .hp-line{ max-width:32ch; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .scene-pin{ position:relative; height:auto; min-height:70vh; }
  .scene-content{ position:relative; top:auto; transform:none; padding-block:16vh; }
  .align-center{ left:auto; transform:none; }
  .align-bottom{ left:auto; bottom:auto; }
  .beat{ opacity:1; transform:none; transition:none; }
  .sy-demo-beats{ min-height:0; }
  .sy-demo-line{ position:relative; margin-block:.5em; }
  .sy-hero-subs{ min-height:0; }
  .sy-hero-sub{ position:relative; }
  .sy-hero-sub + .sy-hero-sub{ margin-top:.6em; }
  .hero-knockout{ display:none; }
  .sy-hero-cue{ display:none; }
  .sy-hero .scene-vid, .sy-ink .scene-vid, .sy-warp .scene-vid{ transform:none; }
  .reveal{ opacity:1; transform:none; }
  .sy-ink-say{ position:relative; inset:auto; padding-block:7vh; }
  .sy-ink-eyebrow{ position:relative; top:auto; left:auto; display:block; padding:16vh clamp(20px,6vw,90px) 0; }
  .scene-index{ position:relative; left:auto; bottom:auto; display:inline-flex; margin:2vh clamp(20px,6vw,90px) 8vh; }
  .iris-cover, .shutter-cover, .warp-flash, .ink-knockout{ display:none; }
  
  .hpass .scene-pin{ position:relative; height:auto; overflow:visible; }
  .hp-track{ position:relative; inset:auto; display:block; width:100%; transform:none !important; }
  .hp-panel{ position:relative; inset:auto; width:100%; height:auto; min-height:70vh; opacity:1; }
  .hp-panel .hp-copy{ opacity:1; position:relative; top:auto; bottom:auto; left:auto; transform:none; padding-block:12vh; }
  .hp-dots{ display:none; }
  .hp-head{ position:relative; top:auto; left:auto; transform:none; display:block; padding:6vh clamp(20px,6vw,90px) 0; }
  .mosaic-vid{ animation:none; }
  .cue-label{ animation:none; }
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media(max-width:640px){
  .scene-content{ max-width:92vw; }
  .align-right{ text-align:left; }
  .align-right .sy-demo-line{ margin-left:0; }
  .sy-demo-beats{ min-height:6.5em; }
  .sy-hero-sub{ max-width:38ch; }
  .sy-tc{ font-size:10.5px; }
}