:root {
  --c1: #14d4dc;
  /* cyan */
  --c2: #f01af8;
  /* magenta */
  --bg: #0b0b10;
  --bgElev: #11121a;
  --card: #161828;
  --text: #e6f1ff;
  --muted: #8a90a2;
  --line: rgba(255, 255, 255, 0.08);
  --gradient: linear-gradient(90deg, var(--c1), var(--c2));
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  /* Solid base; glows rendered via body::before overlay to avoid section seams */
  background: var(--bg);
  line-height: 1.6;
}

/* Global glow overlay (fixed, behind content) */
body::before {
  content: "";
  position: fixed;
  inset: -25% -20% -20% -25%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70vw 70vh at 8% -10%,
      rgba(20, 212, 220, 0.18) 0%,
      rgba(20, 212, 220, 0.10) 35%,
      rgba(20, 212, 220, 0.05) 65%,
      rgba(20, 212, 220, 0.00) 100%),
    radial-gradient(80vw 65vh at 105% 6%,
      rgba(240, 26, 248, 0.16) 0%,
      rgba(240, 26, 248, 0.09) 38%,
      rgba(240, 26, 248, 0.04) 70%,
      rgba(240, 26, 248, 0.00) 100%),
    radial-gradient(90vw 70vh at 10% 120%,
      rgba(20, 212, 220, 0.12) 0%,
      rgba(20, 212, 220, 0.06) 40%,
      rgba(20, 212, 220, 0.02) 75%,
      rgba(20, 212, 220, 0.00) 100%);
  /* Slight blend to avoid banding */
  background-blend-mode: screen;
}

/* Subtle dithering to hide banding/seams across large gradients */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* above glow, below UI interactions */
  opacity: .018;
  mix-blend-mode: overlay;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'>\
    <filter id='n'>\
      <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/>\
    </filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/>\
  </svg>");
}

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

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(150%) blur(8px);
  background: rgba(15, 15, 22, 0.55);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px
}

.logo {
  height: 36px;
  filter: drop-shadow(0 2px 12px rgba(20, 212, 220, 0.25))
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: all .25s ease
}

.btn .icon {
  display: inline-flex
}

.btn.lg {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px
}

.btn.primary {
  background: var(--gradient);
  color: #0b0b10;
  box-shadow: 0 10px 30px rgba(240, 26, 248, 0.22), 0 3px 12px rgba(20, 212, 220, 0.22)
}

.btn.primary:hover {
  transform: translateY(-1px);
  filter: saturate(110%)
}

.btn.secondary {
  background: #1a1d2e;
  border: 1px solid var(--line);
  color: var(--text)
}

.btn.secondary:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px)
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text)
}

.btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.2)
}

.btn.outline {
  border: 1px solid var(--c1);
  color: var(--text);
  background: transparent
}

.btn.outline:hover {
  border-color: var(--c2)
}

/* Hero */
.hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: visible;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center
}

.hero h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: -0.02em
}

.hero .accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 40px rgba(240, 26, 248, 0.18)
}

.hero p {
  color: var(--muted);
  max-width: 56ch
}

.hero-highlights {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: #b8c3e0;
  display: grid;
  gap: 6px
}

.hero-media {
  display: flex;
  justify-content: center
}

.media-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 212, 220, 0.05), rgba(240, 26, 248, 0.05));
}

.media-frame.glow {
  box-shadow: 0 20px 60px rgba(20, 212, 220, 0.15), 0 6px 24px rgba(240, 26, 248, 0.12)
}

.float {
  animation: float 8s ease-in-out infinite
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

.hero-bg {
  display: none;
}

/* Orbs are handled by global overlay; keep definitions for safety but unused */
.orb {
  display: none;
}

.orb-a {
  display: none;
}

.orb-b {
  display: none;
}

/* Features */
.section-head {
  text-align: center;
  margin: 30px 0 20px
}

.section-head h2 {
  font-size: 34px;
  margin: 0 0 6px
}

.section-head p {
  color: var(--muted);
  margin: 0 auto;
  max-width: 60ch
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px
}

.feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease, box-shadow .25s
}

.feature-card.in-view {
  transform: translateY(0);
  opacity: 1
}

.feature-card:hover {
  box-shadow: 0 10px 30px rgba(20, 212, 220, 0.12), 0 6px 18px rgba(240, 26, 248, 0.10)
}

.card-media img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover
}

.card-body {
  padding: 14px
}

.card-body h3 {
  margin: 2px 0 6px
}

.card-body p {
  margin: 0;
  color: #b8c3e0
}

/* CTA */
.cta {
  padding: 30px 0 80px
}

.cta-inner {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  backdrop-filter: saturate(120%) blur(2px);
}

.cta .cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  background: rgba(15, 15, 22, 0.6)
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.favicon {
  height: 18px;
  margin-right: 8px;
  vertical-align: middle
}

.footer-inner .left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c3e0
}

.footer-inner .right {
  display: flex;
  gap: 12px
}

.footer-inner a {
  color: #b8c3e0;
  text-decoration: none
}

.footer-inner a:hover {
  color: var(--text)
}

/* Utilities */
.cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}

/* Responsive */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .hero {
    padding-top: 64px
  }

  .feature-grid {
    grid-template-columns: 1fr
  }

  .site-header .nav .btn.primary {
    display: none
  }
}