*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  color-scheme:dark;
  scrollbar-gutter:stable;
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

body{
  background:var(--sy-void);
  color:var(--sy-text);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* fixed radial vignette — pulls every section into the same cold chamber */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(122,124,255,0.05) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 115%, var(--sy-void-deep) 0%, transparent 60%);
  pointer-events:none;
}

/* film grain — static SVG turbulence, blended over the whole render (reduced-motion safe) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2000;
  pointer-events:none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:0.05;
  mix-blend-mode:overlay;
}

img,video{max-width:100%;display:block}

a{color:var(--sy-ice);text-decoration:none;transition:color var(--sy-fast) var(--sy-ease)}
a:hover{color:var(--sy-cyan)}

::selection{background:rgba(42,238,247,0.28);color:var(--sy-ice)}

:focus-visible{
  outline:1px solid var(--sy-cyan);
  outline-offset:3px;
  border-radius:2px;
}

.sy-container{
  width:100%;
  max-width:var(--sy-container);
  margin:0 auto;
  padding:0 28px;
}

.sy-skip{
  position:absolute;
  left:-9999px;
  top:12px;
  z-index:300;
  padding:10px 16px;
  background:var(--sy-surface);
  border:1px solid var(--sy-border);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.sy-skip:focus-visible{left:12px}

/* ---- shared type ---- */
.sy-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sy-cyan);
}
.sy-kicker::before{
  content:"";
  width:22px;
  height:1px;
  background:linear-gradient(90deg,var(--sy-cyan),transparent);
}

.section-header{
  max-width:680px;
  margin-bottom:56px;
}
.section-title{
  margin-top:14px;
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--sy-text);
}
.section-subtitle{
  margin-top:14px;
  font-size:1.02rem;
  color:var(--sy-dim);
}

/* ---- HUD chips ---- */
.sy-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid var(--sy-border);
  background:rgba(17,19,23,0.55);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sy-ice);
  white-space:nowrap;
}
.sy-chip .sy-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sy-cyan);
  box-shadow:var(--sy-glow-cyan);
}
.sy-chip--mint{border-color:rgba(0,255,200,0.25);color:var(--sy-mint)}
.sy-chip--mint .sy-dot{background:var(--sy-mint);box-shadow:var(--sy-glow-mint)}
.sy-chip--amber{border-color:rgba(245,160,60,0.3);color:var(--sy-amber)}

/* ---- buttons ---- */
.sy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border:1px solid var(--sy-border-strong);
  background:var(--sy-surface);
  color:var(--sy-ice);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--sy-fast) var(--sy-ease),box-shadow var(--sy-fast) var(--sy-ease),color var(--sy-fast) var(--sy-ease),background var(--sy-fast) var(--sy-ease);
}
.sy-btn--primary{
  position:relative;
  border:none;
  padding:16px 30px;
  background:
    linear-gradient(var(--sy-surface),var(--sy-surface)) padding-box,
    var(--sy-grad-drop) border-box;
  border:1px solid transparent;
}
.sy-btn--primary:not(:disabled):hover{
  box-shadow:var(--sy-glow-cyan);
  color:#fff;
}
.sy-btn--primary.is-locked,
.sy-btn--primary:disabled{
  cursor:default;
  color:var(--sy-dim);
  background:
    linear-gradient(var(--sy-surface),var(--sy-surface)) padding-box,
    linear-gradient(135deg,rgba(42,238,247,0.45),rgba(122,124,255,0.45)) border-box;
}
.sy-btn--primary.is-open{
  background:var(--sy-grad-drop);
  color:var(--sy-void);
  font-weight:700;
}
.sy-btn--primary.is-open:hover{box-shadow:var(--sy-glow-cyan),var(--sy-glow-violet)}
.sy-btn--ghost{
  background:transparent;
  border-color:var(--sy-border);
  color:var(--sy-dim);
}
.sy-btn--ghost:hover{
  border-color:var(--sy-border-strong);
  color:var(--sy-ice);
}

.sy-cta-note{
  display:block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sy-faint);
}

/* ---- reveal-on-scroll (hard-off under reduced motion) ---- */
.sy-reveal{opacity:0;transform:translateY(20px)}
.sy-reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity var(--sy-slow) var(--sy-ease),transform var(--sy-slow) var(--sy-ease);
}
@media (prefers-reduced-motion: reduce){
  .sy-reveal{opacity:1;transform:none;transition:none}
}

/* hover lifts only where motion is welcome */
@media (prefers-reduced-motion: no-preference){
  .sy-lift{transition:transform var(--sy-fast) var(--sy-ease),box-shadow var(--sy-fast) var(--sy-ease),border-color var(--sy-fast) var(--sy-ease)}
  .sy-lift:hover{transform:translateY(-4px)}
}

/* ---- sticky mobile conversion bar ---- */
.sy-mobilebar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,12,0.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--sy-border);
}
.sy-mobilebar-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sy-ice);
  white-space:nowrap;
}
.sy-mobilebar-label b{color:var(--sy-cyan);font-weight:500}
.sy-mobilebar .sy-btn{padding:11px 20px;font-size:11px}
@media (max-width:719px){
  .sy-mobilebar{display:flex}
  body{padding-bottom:64px}
}