:root {
  --ink: #050914; --panel: #0b1425; --line: #1d3150;
  --white: #f3f7ff; --muted: #a8b5ca; --cyan: #16c9f5; --violet: #8d5cff;
}
:root[data-theme="light"] {
  --ink: #f7faff; --panel: #ffffff; --line: #d7e1ee;
  --white: #0b1b32; --muted: #51627a;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: radial-gradient(circle at 70% 0, #112951 0, transparent 34rem), var(--ink); color: var(--white); font: 16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; transition: .2s }
:root[data-theme="light"] body { background: linear-gradient(145deg, #f7faff, #eaf1f9 70%, #f7faff); }
.shell { width: min(1180px, calc(100% - 40px)); margin: auto }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #8aaedc2b }
.brand { color: var(--white); text-decoration: none; font-weight: 800; letter-spacing: .08em; white-space: nowrap }
.brand i { font-style: normal; color: var(--cyan); font-weight: 500 }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 9px; border: 2px solid var(--cyan); border-radius: 50%; color: var(--violet) }
.nav-tools { display: flex; align-items: center; gap: 10px }
.nav-link, .text-link { color: var(--cyan); text-decoration: none }
.nav-link { font-size: .9rem }
select, .theme-toggle { border: 1px solid #3b5980; background: var(--panel); color: var(--white); border-radius: 999px; padding: 8px 11px; font: inherit; font-size: .75rem }
.theme-toggle { width: 36px; height: 36px; padding: 0; cursor: pointer }
.hero { min-height: 680px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 36px; padding: 65px 0 }
.eyebrow { color: var(--cyan); font-size: .72rem; letter-spacing: .2em; font-weight: 800; margin: 0 0 20px }
.hero h1 { font-size: clamp(3.2rem, 7vw, 6.6rem); line-height: .93; letter-spacing: -.07em; margin: 0 0 28px }
.hero h1 span, h2 span { background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent }
.lede { color: var(--muted); font-size: 1.18rem; max-width: 520px }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px }
.button { display: inline-block; border-radius: 999px; padding: 13px 19px; text-decoration: none; font-weight: 800 }
.primary { background: linear-gradient(100deg, var(--cyan), #5c8aff); color: #03101c }
.ghost { border: 1px solid #3b5980; color: var(--white) }
.note { color: #71839f; font-size: .82rem; max-width: 520px }
.hero-art { filter: drop-shadow(0 30px 60px #000); transform: rotate(2deg) }
.hero-art img { width: 100%; display: block; border-radius: 22px }
.section { padding: 60px 0 }
.section h2, .split h2, .cta h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.06em; margin: 0 0 34px }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.feature-grid article { background: linear-gradient(145deg, #112543e6, #071120e6); border: 1px solid var(--line); border-radius: 18px; padding: 26px }
:root[data-theme="light"] .feature-grid article { background: rgba(255,255,255,.82); box-shadow: 0 14px 35px #7890aa24 }
.feature-grid span { color: var(--violet); font-weight: 800 }
.feature-grid h3 { font-size: 1.7rem; margin: 30px 0 8px }
.feature-grid p, .split-copy p, .cta p { color: var(--muted) }
.split { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; padding: 90px 0 }
.split-image img { width: 100%; display: block; border-radius: 20px; box-shadow: 0 25px 80px #0008 }
.split-copy { max-width: 470px }
.text-link { display: inline-block; margin-top: 14px; font-weight: 800 }
.cta { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 34px; padding: 50px 0 100px }
.cta img { width: 100%; border-radius: 20px; box-shadow: 0 25px 80px #0008 }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 35px; border-top: 1px solid #8aaedc2b; color: #6f819e; font-size: .82rem }
.footer a { color: var(--cyan); text-decoration: none }
@media (max-width: 800px) {
  .shell { width: min(calc(100% - 28px), 560px) }
  .nav { height: 68px }
  .nav-tools { gap: 6px }
  .hero, .split, .cta { grid-template-columns: 1fr; padding: 52px 0 }
  .hero { padding-top: 60px }
  .hero-art { order: -1 }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 5rem) }
  .feature-grid { grid-template-columns: 1fr }
  .split { gap: 30px }
  .cta { padding-bottom: 65px }
  .footer { display: block }
  .footer span { display: block; margin-top: 7px }
}
@media (max-width: 520px) {
  .brand { font-size: .9rem }
  .nav-link { font-size: 0; white-space: nowrap }
  .nav-link::after { content: "Play ↗"; font-size: .72rem }
}
:root[data-theme="light"] .hero-art { filter: drop-shadow(0 20px 30px rgba(35,52,75,.18)) }
:root[data-theme="light"] .split-image img, :root[data-theme="light"] .cta img { box-shadow: 0 20px 50px rgba(35,52,75,.16) }