/* =========================================================
   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; }

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.55;
  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 40%, rgba(0,0,0,0.9) 100%),
    radial-gradient(120% 80% at 50% 100%, transparent 30%, rgba(0,0,0,0.85) 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 6px rgba(255,255,255,0.3));
}
.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;
}

.nav-cta { display: inline-flex; }

/* =========================================================
   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); }

.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;
}
@keyframes glitch-1 {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-2px,-1px); }
  40% { transform: translate(2px,1px); }
  60% { transform: translate(-1px,2px); }
  80% { transform: translate(1px,-2px); }
}
@keyframes glitch-2 {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(2px,1px); }
  40% { transform: translate(-2px,-1px); }
  60% { transform: translate(1px,-2px); }
  80% { transform: translate(-1px,2px); }
}

.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;
}
.logo-glow {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
  filter: blur(20px);
  animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.hero-logo {
  position: relative;
  width: 64%;
  filter: drop-shadow(0 0 28px rgba(255,255,255,0.18));
  animation: logo-float 6s ease-in-out infinite;
}
@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;
}
.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 gentle pulse, no lag-spike. */
.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
   ========================================================= */

/* 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 > :nth-child(5),
  .feature-grid > :nth-child(6) {}
  .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 { 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); }
}