:root {
  --bg: #050b1c;
  --bg-mid: #081633;
  --node-bg: #0b1a3a;
  --step-bg: #07142e;
  --badge-bg: rgba(10, 22, 48, .7);
  --accent: #3ee6ff;
  --accent-rgb: 62, 230, 255;
  --accent-light: #9ff3ff;
  --accent-2: #8ab4ff;
  --text: #e8f1ff;
  --heading: #f4f8ff;
  --brand: #f2f7ff;
  --muted: #a9bbd6;
  --faint: #7f93b3;
  --fainter: #5f7394;
  --on-accent: #041024;
  --outline-text: #dffaff;
  --gutter: clamp(20px, 4vw, 48px);
  --max-width: 1240px;
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
}

@keyframes nxFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes nxPing { 0% { transform: scale(.35); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes nxGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45), 0 0 24px rgba(var(--accent-rgb), .35) }
  50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0), 0 0 48px rgba(var(--accent-rgb), .6) }
}
@keyframes nxBar { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
@keyframes nxTravel { 0% { left: 0%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@keyframes nxStreak { 0% { transform: translateX(-30vw) } 100% { transform: translateX(130vw) } }
@keyframes nxBlink { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes nxDash { to { stroke-dashoffset: -40 } }

html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none }

.page { background: var(--bg); min-height: 100vh; overflow: hidden }
.wrap { max-width: var(--max-width); margin: 0 auto }
.section { position: relative }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 11, 28, .55);
  border-bottom: 1px solid rgba(var(--accent-rgb), .08);
}
.site-header__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; font-size: 22px; letter-spacing: -.03em }
.brand__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent) }
.brand--footer { font-size: 20px }
.brand--footer .brand__dot { width: 9px; height: 9px; box-shadow: 0 0 12px var(--accent) }
.btn-outline {
  padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .45);
  color: var(--outline-text); font-weight: 600; font-size: 15px; transition: all .25s;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 34px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 17px;
  animation: nxGlow 2.8s ease-in-out infinite; transition: transform .25s;
}
.btn-primary__arrow { font-size: 20px }
.btn-primary--lg {
  margin-top: 56px; gap: 14px; padding: 24px 56px; font-weight: 800;
  font-size: clamp(20px, 2vw, 24px); letter-spacing: -.01em;
}

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 28, .94) 0%, rgba(5, 11, 28, .7) 40%, rgba(5, 11, 28, 0) 68%),
    linear-gradient(180deg, rgba(5, 11, 28, 0) 70%, var(--bg) 100%);
}
.hero__content {
  position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto;
  padding: 120px var(--gutter) 80px; box-sizing: border-box;
}
.hero__title {
  margin: 0; font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800;
  max-width: 13ch; text-wrap: balance; color: var(--heading);
}
.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead {
  margin: 32px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--muted);
  max-width: 34ch; text-wrap: pretty;
}
.hero__actions { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap }

.hero-badge {
  display: none; position: absolute; z-index: 2; right: clamp(24px, 6vw, 96px); bottom: 14%;
  padding: 14px 18px; border-radius: 16px; background: var(--badge-bg);
  border: 1px solid rgba(var(--accent-rgb), .2); backdrop-filter: blur(10px);
  align-items: center; gap: 14px; animation: nxFloat 6s ease-in-out infinite;
}
.hero-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: nxBlink 1.6s infinite }
.hero-badge__text { display: flex; flex-direction: column; gap: 2px }
.hero-badge__label { font-size: 12px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase }
.hero-badge__value { font-size: 15px; font-weight: 700; color: var(--text) }
.hero-badge__bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-left: 6px }
.hero-badge__bars span {
  width: 5px; height: 100%; border-radius: 2px; background: var(--accent);
  transform-origin: bottom; animation: nxBar 1.8s ease-in-out infinite;
}
.hero-badge__bars span:nth-child(2) { animation-delay: .2s }
.hero-badge__bars span:nth-child(3) { animation-delay: .4s }
.hero-badge__bars span:nth-child(4) { animation-delay: .6s }

/* Shared section headings */
.section-title {
  margin: 0; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.04em;
  font-weight: 800; color: var(--heading);
}
.section-title--value { margin-bottom: 72px; max-width: 16ch }
.section-title--steps { margin-bottom: 88px }

/* Value cards */
.section--value { padding: clamp(100px, 14vw, 180px) var(--gutter) }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px }
.card {
  position: relative; padding: 44px 40px; border-radius: 28px; min-height: 380px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), rgba(var(--accent-rgb), 0) 70%);
  border: 1px solid rgba(var(--accent-rgb), .12);
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.card__title { margin: 0 0 14px; font-size: 30px; letter-spacing: -.03em; font-weight: 800; color: var(--heading) }
.card__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: pretty }

.icon { position: relative; width: 120px; height: 120px; animation: nxFloat 6s ease-in-out infinite }
.icon--network { animation-delay: 1s }
.icon--bars {
  display: flex; align-items: flex-end; gap: 10px; padding: 10px 6px; box-sizing: border-box;
  border-bottom: 1px solid rgba(var(--accent-rgb), .3); animation-delay: 2s;
}

.icon-radar__ring, .icon-radar__ping { position: absolute; border-radius: 50% }
.icon-radar__ring--outer { inset: 0; border: 1px solid rgba(var(--accent-rgb), .25) }
.icon-radar__ring--inner { inset: 24px; border: 1px solid rgba(var(--accent-rgb), .4) }
.icon-radar__ping { inset: 0; border: 2px solid var(--accent); animation: nxPing 2.6s ease-out infinite }
.icon-radar__core {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px var(--accent);
}
.icon-radar__blip {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light);
  animation: nxBlink 2s infinite;
}
.icon-radar__blip--1 { left: 8px; top: 22px }
.icon-radar__blip--2 { right: 4px; top: 52px; animation-delay: .6s }
.icon-radar__blip--3 { left: 44px; bottom: 2px; animation-delay: 1.2s }

.icon-network__lines { position: absolute; inset: 0 }
.icon-network__lines line {
  stroke: rgba(var(--accent-rgb), .55); stroke-width: 1.5; stroke-dasharray: 4 6;
  animation: nxDash 1.6s linear infinite;
}
.icon-network__node {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--node-bg);
  border: 2px solid var(--accent); animation: nxBlink 2.4s infinite;
}
.icon-network__node--1 { left: 14px; top: 22px }
.icon-network__node--2 { left: 84px; top: 16px; animation-delay: .8s }
.icon-network__hub {
  position: absolute; left: 48px; top: 82px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 24px var(--accent);
}
.icon-network__hub--ping {
  background: none; box-shadow: none; border: 2px solid var(--accent);
  animation: nxPing 2.2s ease-out infinite;
}

.icon--bars span {
  flex: 1; border-radius: 4px; transform-origin: bottom; animation: nxBar 2.4s ease-in-out infinite;
}
.icon--bars span:nth-child(1) { height: 40%; background: rgba(var(--accent-rgb), .35) }
.icon--bars span:nth-child(2) { height: 60%; background: rgba(var(--accent-rgb), .55); animation-delay: .3s }
.icon--bars span:nth-child(3) { height: 80%; background: rgba(var(--accent-rgb), .75); animation-delay: .6s }
.icon--bars span:nth-child(4) {
  height: 100%; background: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .6); animation-delay: .9s;
}

/* Steps */
.section--steps { padding: clamp(60px, 10vw, 140px) var(--gutter) clamp(100px, 14vw, 180px) }
.steps-wrap { position: relative }
.steps-line {
  display: none; position: absolute; top: 44px; left: 44px; right: calc(33.33% - 44px); height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .5), rgba(var(--accent-rgb), .1));
}
.steps-line span {
  position: absolute; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 18px 4px rgba(var(--accent-rgb), .7);
  animation: nxTravel 4s ease-in-out infinite;
}
.steps-line span:nth-child(2) { animation-delay: 2s }
.steps {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 56px 32px; margin: 0; padding: 0; list-style: none;
}
.step { display: flex; flex-direction: column; gap: 28px }
.step__num {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--step-bg); border: 1px solid rgba(var(--accent-rgb), .5); box-shadow: 0 0 30px rgba(var(--accent-rgb), .15);
  font-weight: 800; font-size: 20px; color: var(--accent); transition: transform .3s, box-shadow .3s;
}
.step__num--active { background: var(--accent); border: 0; box-shadow: 0 0 40px rgba(var(--accent-rgb), .5); color: var(--on-accent) }
.step__title { margin: 0; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.04em; font-weight: 800; color: var(--heading) }
.step__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 28ch }

/* Statement */
.section--statement {
  padding: clamp(120px, 16vw, 220px) var(--gutter); overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), .14), rgba(5, 11, 28, 0) 65%),
    linear-gradient(180deg, var(--bg), var(--bg-mid) 50%, var(--bg));
}
.statement__grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(var(--accent-rgb), .18) 1px, transparent 1px); background-size: 36px 36px;
}
.statement__streak { position: absolute; left: 0; height: 1px; animation: nxStreak linear infinite }
.statement__streak--1 { top: 22%; width: 30vw; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation-duration: 7s }
.statement__streak--2 { top: 58%; width: 22vw; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); animation-duration: 9s; animation-delay: 2s }
.statement__streak--3 { top: 80%; width: 26vw; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation-duration: 11s; animation-delay: 4s }
.statement__text {
  position: relative; margin: 0 auto; max-width: 20ch; text-align: center; font-size: clamp(34px, 5vw, 76px);
  line-height: 1.08; letter-spacing: -.045em; font-weight: 800; color: var(--heading); text-wrap: balance;
}
.statement__accent { color: var(--accent) }

/* CTA */
.section--cta { padding: clamp(120px, 16vw, 200px) var(--gutter); text-align: center }
.cta__glow {
  position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); height: 600px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), .16), rgba(5, 11, 28, 0) 60%); pointer-events: none;
}
.cta__inner { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center }
.cta__title {
  margin: 0; font-size: clamp(36px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800;
  color: var(--heading); text-wrap: balance;
}
.cta__lead { margin: 28px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); max-width: 38ch }
.cta__email { margin-top: 24px; font-size: 17px; color: var(--faint); letter-spacing: .01em }

/* Footer */
.site-footer { border-top: 1px solid rgba(var(--accent-rgb), .1) }
.site-footer__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 36px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer__email { font-size: 15px; color: var(--muted) }
.site-footer__copy { font-size: 14px; color: var(--fainter) }

/* Wide-screen-only decorations */
@media (min-width: 860px) {
  .hero-badge { display: flex }
  .steps-line { display: block }
}

/* Narrow screens: pin the CTA bottom-right, below the canvas hub (NARROW_HUB_BOTTOM_PX in main.js keeps the hub above it) */
@media (max-width: 859.98px) {
  .hero__content {
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-bottom: 160px;
  }
  .hero__actions { position: absolute; right: var(--gutter); bottom: 24px; margin: 0 }
}

/* Touch screens would keep hover styles stuck after a tap */
@media (hover: hover) {
  .btn-outline:hover { background: rgba(var(--accent-rgb), .12); border-color: var(--accent); color: #fff }
  .btn-primary:hover { transform: translateY(-2px) }
  .btn-primary--lg:hover { transform: translateY(-3px) scale(1.02) }
  .card:hover { transform: translateY(-8px); border-color: rgba(var(--accent-rgb), .4); box-shadow: 0 30px 80px -30px rgba(var(--accent-rgb), .35) }
  .step__num:hover { transform: scale(1.08); box-shadow: 0 0 40px rgba(var(--accent-rgb), .45) }
  .step__num--active:hover { box-shadow: 0 0 40px rgba(var(--accent-rgb), .5) }
  .cta__email:hover, .site-footer__email:hover { color: var(--accent) }
}

/* Scroll reveal (classes set by main.js); after the hover rules so the reveal transition wins while it runs */
.reveal-run {
  transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-hidden { opacity: 0; transform: translateY(36px) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
}