/* =========================================================
   MALICE CLIENT · black/white matrix theme
   ========================================================= */
 
:root {
  /* monochrome palette */
  --bg: #000000;
  --bg-1: #050505;
  --bg-2: #0a0a0a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-dim: rgba(255, 255, 255, 0.42);
  --accent: #ffffff;
  --shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
 
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
 
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
 
* { box-sizing: border-box; }
 
html, body { margin: 0; padding: 0; }

/* copy protection */
html, body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
}
 
html { scroll-behavior: smooth; }
 
body {
  font-family: var(--font-sans);
  background: #000;
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
 
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
 
::selection { background: rgba(255,255,255,0.85); color: #000; }
 
.muted { color: var(--text-muted); }
.kw { color: #fff; font-weight: 600; }
.kbd {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: #111;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  letter-spacing: 0.08em;
}
 
/* =========================================================
   Background layers: matrix rain, scanlines, vignette
   ========================================================= */
#rain {
  position: fixed; inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
  background: #000;
  opacity: 0.9;
  pointer-events: none;
}
 
.scanlines {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0.025) 3px,
      rgba(255,255,255,0) 4px
    );
  opacity: 0.6;
  /* mix-blend-mode removed — forced extra GPU compositing layer. */
}
@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}
 
.vignette {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.7) 100%),
    radial-gradient(120% 80% at 50% 100%, transparent 45%, rgba(0,0,0,0.65) 100%);
}
 
/* Frame corners */
.frame {
  position: fixed; inset: 18px;
  z-index: 5;
  pointer-events: none;
}
.corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,0.55);
}
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
 
/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 28px; left: 28px; right: 28px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.82);
  border-radius: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.28))
    drop-shadow(0 -1px 6px rgba(255,225,160,0.22));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-top: 4px;
}
.links {
  display: flex;
  gap: 4px;
}
.links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 8px 12px;
  color: var(--text-muted);
  text-transform: lowercase;
  border-radius: 6px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
 
/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: #fff;
  margin: 2px 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
 
/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }
 
.btn-primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.btn-primary:hover {
  background: #000;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
}
.btn-primary:hover::after { transform: translateX(100%); }
 
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}
 
.btn.big {
  font-size: 14px;
  padding: 16px 26px;
}

/* primary buy button — bigger and louder than the rest */
.btn-buy {
  font-size: 15px;
  padding: 16px 28px;
  letter-spacing: 0.16em;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.85),
    0 0 24px rgba(255,255,255,0.18),
    0 0 48px rgba(255,255,255,0.08);
  animation: buy-pulse 2.6s ease-in-out infinite;
}
.btn-buy.big {
  font-size: 16px;
  padding: 18px 32px;
}
.btn-buy:hover {
  transform: translateY(-2px);
}
@keyframes buy-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.85),
      0 0 18px rgba(255,255,255,0.14),
      0 0 36px rgba(255,255,255,0.06);
  }
  50% {
    box-shadow:
      0 0 0 1px #fff,
      0 0 32px rgba(255,255,255,0.30),
      0 0 60px rgba(255,255,255,0.14);
  }
}

/* language-scoped payment buttons */
html[lang="ru"] .pay-funpay { display: none !important; }
html[lang="en"] .pay-sbp { display: none !important; }

.nav-cta { display: inline-flex; }
 
/* SBP buy button — outlined fill so it reads as a secondary CTA next to
   the white FunPay button, but keeps enough weight to be obvious. */
.btn-sbp {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: var(--line-strong);
}
.btn-sbp:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}
 
/* =========================================================
   LANGUAGE SWITCH
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
  font-family: var(--font-mono);
}
.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-btn:hover { color: #fff; }
.lang-btn.active {
  color: #000;
  background: #fff;
}
.lang-btn[aria-pressed="true"] {
  color: #000;
  background: #fff;
}
.lang-sep {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.5;
}
 
/* =========================================================
   TOAST (for SBP placeholder)
   ========================================================= */
.toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(0,0,0,0.92);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 16px;
  max-width: min(92vw, 480px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: toast-in 0.25s var(--ease);
  pointer-events: auto;
}
.toast.leave { animation: toast-out 0.35s var(--ease) forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}
 
/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 140px var(--gutter) 80px;
}
.hero-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
 
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  margin-bottom: 28px;
}
.status-line .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.status-line .status-text { color: var(--text); }
.status-line .status-sep { color: var(--text-dim); }
.status-line .status-clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
 
.hero-title {
  margin: 0 0 22px 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(54px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero-title .line {
  display: block;
  position: relative;
}
.hero-title .line.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}
 
/* Glitch effect */
[data-glitch] {
  position: relative;
  display: inline-block;
}
[data-glitch]::before,
[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
  overflow: hidden;
}
[data-glitch]::before {
  left: 2px;
  text-shadow: -1px 0 rgba(255,255,255,0.6);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-1 3s infinite linear alternate-reverse;
}
[data-glitch]::after {
  left: -2px;
  text-shadow: 1px 0 rgba(255,255,255,0.4);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-2 2.4s infinite linear alternate-reverse;
}
/* Note: @keyframes glitch-1 / glitch-2 are defined further down in the
   "data-glitch — lighter version" section. The selector rules above
   (animation: glitch-1 3s / glitch-2 2.4s) are overridden there too,
   so only the static properties (left, clip-path, content, etc.) from
   those blocks survive the cascade. */
 
.tag {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 0 36px 0;
}
 
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 56px;
}
 
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 580px;
}
.stat {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.015);
}
.stat .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 4px;
}
.stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: lowercase;
}
 
/* Hero media: rotating logo stage */
.hero-media {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 480px;
}
.logo-stage {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Main halo behind the whole jester (kept gentle) */
.logo-glow {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 45%, transparent 72%);
  filter: blur(26px);
  animation: glow-pulse 5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Targeted crown halo: subtle warm spot at the top of the logo (the crown). */
.logo-glow::before,
.logo-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.logo-glow::before {
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0.15) 40%, transparent 72%);
  filter: blur(16px);
  animation: crown-pulse 4s ease-in-out infinite;
}
.logo-glow::after {
  background: radial-gradient(closest-side, rgba(255,225,160,0.30), rgba(255,200,120,0.08) 48%, transparent 78%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: crown-pulse 4s ease-in-out infinite;
  animation-delay: -1.5s;
  opacity: 0.7;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
@keyframes crown-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}

.hero-logo {
  position: relative;
  width: 64%;
  z-index: 1;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.22))
    drop-shadow(0 -4px 18px rgba(255,225,160,0.20))
    drop-shadow(0 0 36px rgba(200,200,255,0.10));
  animation: logo-float 6s ease-in-out infinite, hero-logo-glow 5s ease-in-out infinite;
}
@keyframes hero-logo-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,0.18))
      drop-shadow(0 -4px 14px rgba(255,225,160,0.16))
      drop-shadow(0 0 28px rgba(200,200,255,0.08));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,0.28))
      drop-shadow(0 -6px 22px rgba(255,225,160,0.26))
      drop-shadow(0 0 40px rgba(200,200,255,0.14));
  }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.ring {
  position: absolute;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 50%;
  pointer-events: none;
}
.ring.r1 { inset: 8%;  animation: spin 30s linear infinite; }
.ring.r2 { inset: -4%; border-style: solid; border-color: rgba(255,255,255,0.08); animation: spin 80s linear infinite reverse; }
.ring.r3 { inset: 22%; border-color: rgba(255,255,255,0.28); animation: spin 18s linear infinite; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
 
.hud {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
}
.hud-tl { top: 6%; left: -8%; }
.hud-tr { top: 14%; right: -10%; }
.hud-bl { bottom: 10%; left: -4%; }
.hud-br { bottom: 4%; right: 0; }
 
/* Hero marquee */
.hero-marquee {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: rgba(0,0,0,0.55);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hero-marquee .track {
  display: flex;
  width: max-content;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.hero-marquee .mq-set {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-left: 28px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-marquee .mq-set > span { display: inline-block; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.hero-marquee:hover .track { animation-play-state: paused; }
 
/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  padding: 110px var(--gutter);
  position: relative;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.section-head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  text-transform: lowercase;
  margin-bottom: 14px;
}
.h2 {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}
.lead {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
 
/* =========================================================
   FEATURES
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* Headline merged card spans the full row so the grid lays out cleanly. */
.feature-grid > .feature.highlight {
  grid-column: 1 / -1;
}
.feature {
  position: relative;
  padding: 28px 26px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
  overflow: hidden;
}
.feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 1px;
  background: rgba(255,255,255,0.6);
}
.feature::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  height: 38px; width: 1px;
  background: rgba(255,255,255,0.6);
}
.feature:hover {
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-4px);
  background: rgba(255,255,255,0.04);
}
.feature.highlight {
  border-color: #fff;
  background: rgba(255,255,255,0.06);
}
.feature-icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  margin-bottom: 18px;
  color: #fff;
}
.feature-icon svg {
  width: 22px; height: 22px;
}
.feature h3 {
  margin: 0 0 8px 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.feature p {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.feature .meta {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feature .meta li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: lowercase;
}
 
/* =========================================================
   STEPS
   ========================================================= */
.steps {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: rgba(255,255,255,0.015);
}
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: #fff;
}
.step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.step h3 {
  margin: 0 0 10px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  text-transform: lowercase;
}
.step p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.step a {
  color: #fff;
  border-bottom: 1px dashed rgba(255,255,255,0.4);
}
 
/* =========================================================
   TERMINAL
   ========================================================= */
.terminal-section { padding-top: 0; }
.terminal {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.85);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.terminal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.terminal-head .dots {
  display: inline-flex;
  gap: 6px;
}
.terminal-head .dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: block;
}
.terminal-head .tt { letter-spacing: 0.12em; color: #fff; }
.terminal-head .tt-r {
  margin-left: auto;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.terminal-body {
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 22px 22px 28px;
  line-height: 1.9;
}
.terminal-body p { margin: 0; }
.terminal-body .prompt { color: #fff; margin-right: 8px; }
.terminal-body .dim { color: var(--text-muted); }
.caret {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
 
/* =========================================================
   FAQ
   ========================================================= */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}
.faq {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.faq[open] {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.25s var(--ease);
}
.faq[open] summary::after {
  content: "−";
  color: #fff;
}
.faq p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}
 
/* =========================================================
   CTA
   ========================================================= */
.cta-section { padding-bottom: 130px; }
.cta-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 50px 50px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    rgba(0,0,0,0.7);
}
.cta-card::before {
  content: "";
  position: absolute;
  top: -2px; left: 36px; width: 60px; height: 1px;
  background: #fff;
}
.cta-card::after {
  content: "";
  position: absolute;
  bottom: -2px; right: 36px; width: 60px; height: 1px;
  background: #fff;
}
.cta-text .eyebrow { margin-bottom: 10px; }
.cta-text .h2 { margin-bottom: 8px; }
.cta-text .lead { max-width: 480px; }
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
 
/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  border-top: 1px solid var(--line-2);
  padding: 32px var(--gutter);
  background: rgba(0,0,0,0.8);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-brand .brand-name {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  font-size: 13px;
}
.footer-brand .brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.footer-links {
  display: inline-flex;
  gap: 20px;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: lowercase;
}
.footer-links a:hover { color: #fff; }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}
 
/* =========================================================
   Reveal animations  — smooth lag-style: fade + slide + slight blur
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.992);
  filter: blur(2px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
 
/* stagger reveals inside grids for that cascading lag feel */
.feature.reveal       { transition-delay: 0ms; }
.feature.reveal:nth-child(3n+2) { transition-delay: 60ms; }
.feature.reveal:nth-child(3n)   { transition-delay: 120ms; }
.step.reveal          { transition-delay: 0ms; }
.step.reveal:nth-child(2) { transition-delay: 80ms; }
.step.reveal:nth-child(3) { transition-delay: 160ms; }
.step.reveal:nth-child(4) { transition-delay: 240ms; }
 
/* =========================================================
   SMOOTH-LAG GLOBAL ANIMATIONS
   ========================================================= */
 
/* Hero / nav: smooth fade-in on initial load (subtle lag-up) */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(3px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.nav             { animation: fade-down 0.9s var(--ease) 0.05s both; }
.status-line     { animation: fade-up 0.85s var(--ease) 0.15s both; }
.hero-title      { animation: fade-up 0.95s var(--ease) 0.25s both; }
.tag             { animation: fade-up 0.95s var(--ease) 0.45s both; }
.hero-cta        { animation: fade-up 0.95s var(--ease) 0.60s both; }
.hero-stats      { animation: fade-up 0.95s var(--ease) 0.75s both; }
.hero-media      { animation: fade-up 1.20s var(--ease) 0.35s both; }
.hero-marquee    { animation: fade-up 1.10s var(--ease) 1.10s both; }
 
/* lag-spike jitter REMOVED — caused stutter on weaker GPUs (whole-hero repaint).
   Hero title and brand-name now stay perfectly still; visual interest comes
   from the data-glitch RGB shadow which is a one-shot CSS effect. */
 
/* lag-bar — thin horizontal white band sweeping top-to-bottom every ~16s.
   No mix-blend-mode (was eating GPU). Plain opacity overlay. */
.lag-bar {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 24px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%
  );
  opacity: 0;
  animation: lag-bar 8s linear 2s infinite;
  will-change: transform, opacity;
  transform: translate3d(0, -40px, 0);
}
@keyframes lag-bar {
  0%, 100% { opacity: 0; transform: translate3d(0, -40px, 0); }
  5%   { opacity: 0.85; transform: translate3d(0, -40px, 0); }
  40%  { opacity: 0.85; transform: translate3d(0, 100vh, 0); }
  45%  { opacity: 0;   transform: translate3d(0, 100vh, 0); }
}
 
/* lag-tear — sharp single horizontal line that snaps down once every ~22s. */
.lag-tear {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 1.5px;
  z-index: 4;
  pointer-events: none;
  background: rgba(255,255,255,0.7);
  opacity: 0;
  animation: lag-tear 11s linear 4s infinite;
  will-change: transform, opacity;
  transform: translate3d(0, -10px, 0);
}
@keyframes lag-tear {
  0%, 92%, 100% { opacity: 0; transform: translate3d(0, -10px, 0); }
  93%   { opacity: 1; transform: translate3d(-3px, 15vh, 0); }
  94%   { opacity: 0.8; transform: translate3d(4px, 45vh, 0); }
  95%   { opacity: 0.5; transform: translate3d(-2px, 75vh, 0); }
  96%   { opacity: 0;   transform: translate3d(0, 100vh, 0); }
}
 
/* data-glitch — lighter version: pseudo-elements stay still most of the
   time, only "glitch" briefly at the end of each cycle. Cheaper than the
   original because we don't animate transforms every frame, only at
   keyframe transitions, and pseudos are invisible 90% of the time. */
[data-glitch]::before,
[data-glitch]::after {
  opacity: 0;
  background: transparent;
}
[data-glitch]::before {
  animation: glitch-1 3.5s steps(1) infinite;
  text-shadow: -2px 0 rgba(255,255,255,0.85);
}
[data-glitch]::after {
  animation: glitch-2 4.2s steps(1) infinite;
  text-shadow: 2px 0 rgba(255,255,255,0.65);
}
@keyframes glitch-1 {
  0%, 100%  { opacity: 0; transform: translate3d(0, 0, 0); }
  85%       { opacity: 1; transform: translate3d(-3px, 0, 0); }
  88%       { opacity: 0.8; transform: translate3d(3px, 0, 0); }
  91%       { opacity: 1; transform: translate3d(-2px, 0, 0); }
  94%       { opacity: 0; transform: translate3d(0, 0, 0); }
}
@keyframes glitch-2 {
  0%, 100%  { opacity: 0; transform: translate3d(0, 0, 0); }
  82%       { opacity: 0.9; transform: translate3d(3px, 1px, 0); }
  86%       { opacity: 0.7; transform: translate3d(-3px, -1px, 0); }
  90%       { opacity: 0.9; transform: translate3d(2px, 0, 0); }
  94%       { opacity: 0; transform: translate3d(0, 0, 0); }
}
 
/* Subtle RGB ghost on the hero title — GPU-cheap text-shadow only. */
.hero-title .line {
  text-shadow:
    -1.2px 0 rgba(255,255,255,0.18),
    1.2px 0 rgba(255,255,255,0.18);
}
.hero-title .line.outline {
  text-shadow: none;
}
 
/* Buttons: smooth chromatic glow on hover */
.btn-primary:hover {
  box-shadow:
    0 0 0 1px #fff,
    0 12px 30px rgba(255,255,255,0.18),
    0 0 24px rgba(255,255,255,0.08);
}
.btn-ghost:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 18px rgba(255,255,255,0.08);
  text-shadow:
    -0.7px 0 rgba(255,255,255,0.6),
    0.7px 0 rgba(255,255,255,0.5);
}
 
/* Feature cards: lift + chromatic title on hover */
.feature {
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.feature:hover {
  transform: translate3d(0, -3px, 0);
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.035);
  box-shadow:
    0 24px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05);
}
.feature h3 {
  transition: text-shadow 0.45s var(--ease), letter-spacing 0.45s var(--ease);
}
.feature:hover h3 {
  text-shadow:
    -1.2px 0 rgba(255,255,255,0.45),
    1.2px 0 rgba(255,255,255,0.45),
    0 0 14px rgba(255,255,255,0.22);
  letter-spacing: 0.01em;
}
 
/* Step card subtle lift */
.step {
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.step:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.03);
}
.step-num {
  display: inline-block;
  transition: transform 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.step:hover .step-num {
  transform: translateX(3px);
  text-shadow:
    -1px 0 rgba(255,255,255,0.55),
    1px 0 rgba(255,255,255,0.35);
}
 
/* Logo glow: keep the pulse going (no lag-spike interruption). */
.logo-glow {
  animation: glow-pulse 5s ease-in-out infinite;
}
 
/* HUD chips: stay still (drift animations removed to cut GPU work). */
 
/* Terminal caret — already blinks; make line entries fade in if needed */
.terminal-body p {
  transition: color 0.3s var(--ease);
}
 
/* Stronger pulse on the status dot */
.status-line .dot {
  animation: pulse 1.8s ease-out infinite;
}
 
/* Note: we intentionally do NOT honour prefers-reduced-motion here.
   The animations are part of the brand aesthetic. Users who want them
   off can use Windows' "reduce motion" — the browser will still play
   them because we don't gate on the media query. */
 
/* =========================================================
   RESPONSIVE
   ========================================================= */
 
/* large desktop / TV (>= ~1600px) — scale up container & hero */
@media (min-width: 1600px) {
  :root { --container: 1480px; }
  .hero-title { font-size: clamp(120px, 9vw, 168px); }
  .h2 { font-size: clamp(56px, 5vw, 96px); }
  .section { padding: 140px var(--gutter); }
  .feature p { font-size: 15px; }
}

/* very large / 4K TV (>= ~2200px) */
@media (min-width: 2200px) {
  :root { --container: 1760px; --gutter: clamp(40px, 4vw, 96px); }
  .hero { padding: 200px var(--gutter) 120px; }
  .hero-title { font-size: clamp(160px, 8.5vw, 220px); }
  .h2 { font-size: clamp(72px, 4.8vw, 120px); }
  .feature p { font-size: 16px; line-height: 1.65; }
  .feature h3 { font-size: 22px; }
}

/* compact desktop / large tablet landscape */
@media (max-width: 1180px) {
  .hero-inner { gap: 40px; }
  .hud-tl { left: 0; }
  .hud-tr { right: 0; }
  .hud-bl { left: 4%; }
}
 
/* tablet portrait */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid > .feature.highlight { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-card { padding: 38px; }
}
 
/* hero stacks */
@media (max-width: 880px) {
  .nav { top: 14px; left: 14px; right: 14px; padding: 10px 12px 10px 14px; }
  .frame { inset: 10px; }
  .links { display: none; }
  .nav-cta { display: none; }
  .burger { display: inline-flex; }
 
  .hero { padding: 130px var(--gutter) 60px; min-height: auto; }
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 40px;
  }
  .hero-media { min-height: 340px; order: -1; }
  .logo-stage { width: min(340px, 80%); }
  .hud-tl { top: 0; left: 0; }
  .hud-tr { top: 0; right: 0; }
  .hud-bl { bottom: 0; left: 0; }
  .hud-br { bottom: 0; right: 0; }
 
  /* Mobile menu */
  .nav.open { overflow: visible; }
  .nav .links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--line-2);
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    gap: 2px;
    z-index: 60;
  }
  .nav.open .links {
    display: flex;
    animation: drop 0.25s var(--ease);
  }
  .nav.open .links a { padding: 14px 18px; font-size: 14px; }
  @keyframes drop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
 
/* phone */
@media (max-width: 720px) {
  :root { --gutter: 22px; }
  .frame { inset: 8px; }
  .corner { width: 16px; height: 16px; }
  .section { padding: 70px var(--gutter); }
 
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-grid > .feature.highlight { grid-column: 1 / -1; }
  .feature { padding: 22px 20px 20px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 22px 20px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 12px 10px 10px; }
  .stat .num { font-size: 20px; }
  .stat .lbl { font-size: 9px; line-height: 1.3; }
 
  .cta-card {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 24px;
  }
  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { width: 100%; justify-content: center; }
 
  .footer-inner { justify-content: center; text-align: center; }
  .footer-brand { width: 100%; justify-content: center; }
 
  /* Marquee: smaller font, faster on phones */
  .hero-marquee .track {
    font-size: 10px;
    animation-duration: 16s;
    padding: 10px 0;
  }
  .hero-marquee .mq-set { gap: 18px; padding-left: 18px; }
 
  /* FAQ: tighter padding */
  .faq summary { padding: 16px 18px; font-size: 14px; }
  .faq[open] .answer { padding: 0 18px 16px; }
 
  /* Terminal: smaller on phones */
  .terminal { padding: 18px; font-size: 12px; }
  .terminal-head { font-size: 10px; }
 
  /* h2: scale down */
  .h2 { font-size: clamp(28px, 8vw, 42px); }
  .lead { font-size: 13px; }
}
 
/* small phone */
@media (max-width: 540px) {
  .hero { padding-top: 100px; padding-bottom: 50px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: 1fr; gap: 8px; }
  .stat { padding: 12px 16px; }
  .stat .num { font-size: 22px; }
  .stat .lbl { font-size: 10px; }
  .hero-title { font-size: clamp(42px, 13vw, 68px); line-height: 1.04; }
  .tag { font-size: 13px; line-height: 1.55; }
 
  .hud { font-size: 8.5px; padding: 2px 5px; }
  .hero-media { min-height: 260px; }
  .logo-stage { width: min(280px, 75%); }
 
  /* Brand text: compact */
  .brand-name { font-size: 13px; }
  .brand-sub { font-size: 9px; }
  .brand img { width: 30px; height: 30px; }
 
  /* Burger CTA: full-width on small phones via burger-menu only */
  .nav { gap: 12px; }
}
 
/* tiny phone */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .hero-title { font-size: 40px; }
  .h2 { font-size: 26px; }
  .hero-marquee .track { font-size: 9px; }
  .hero-marquee .mq-set { gap: 14px; padding-left: 14px; }
  .feature h3 { font-size: 16px; }
  .feature p { font-size: 13px; }
}
 
/* landscape phones — keep hero compact */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 90px; padding-bottom: 40px; min-height: auto; }
  .hero-media { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
}
 
/* touch devices: drop hover transforms (replace with active-press feedback) */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; }
  .feature:hover { transform: none; }
  .step:hover { transform: none; }
  .btn:active { transform: translateY(1px); }
  .feature:active { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.4); }
}