:root {
  color-scheme:dark;
  --bg:#0c1019; --panel:#121b2b; --ink:#eef3ff; --muted:#a9bad2;
  --line:#273955; --blue:#9abfff; --mint:#8bdfcc;
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
}
* { box-sizing:border-box }
body { margin:0; background:radial-gradient(ellipse at 80% 2%,#172b4b 0%,transparent 42rem),var(--bg) }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; cursor:pointer }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px }
p,h1,h2,h3,figure { margin:0 }
.wrap { width:min(1240px,calc(100% - 80px)); margin-inline:auto }
.header { border-bottom:1px solid #28364d; background:#0e1521e6 }
.bar { min-height:72px; display:flex; gap:24px; align-items:center; justify-content:space-between }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.16em; line-height:1.08 }
.brand small { display:block; color:var(--blue); font-size:8px; letter-spacing:.27em; margin-top:4px }
.mark { display:grid; place-items:center; width:36px; height:38px; background:#1d3457; color:#a8caff; border:1px solid #5076ac; border-radius:8px; transform:skew(-8deg); font-size:23px; letter-spacing:0 }
nav { display:flex; gap:27px; color:var(--muted); font-size:14px }
nav a:hover { color:var(--ink) }
.capture { border:1px solid #48638a; background:#182741; border-radius:8px; padding:8px 13px; font-size:13px }
.capture:hover { background:#253958 }
.hero { display:grid; grid-template-columns:.86fr 1.4fr; align-items:center; gap:58px; min-height:510px; padding:53px 0 44px }
.eyebrow { color:var(--blue); font-size:11px; text-transform:uppercase; letter-spacing:.17em; font-weight:740 }
.eyebrow span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px #8bdfcc83 }
h1,h2 { font-family:Geist,"Segoe UI Variable Display","Segoe UI",sans-serif; font-weight:740; letter-spacing:-.057em }
h1 { font-size:clamp(64px,8vw,118px); line-height:.92; margin:22px 0 20px }
h1 em { font-style:normal; color:var(--blue) }
.lead { max-width:32ch; font-size:18px; line-height:1.55; color:#c3d3eb }
.action { display:inline-flex; align-items:center; gap:14px; background:#a5c7ff; color:#10203a; padding:11px 14px; border-radius:8px; font-weight:700; font-size:13px; margin-top:24px }
.action:hover { background:#c5dcff }
.product { min-width:0; background:#0d1420; border:1px solid #486894; border-radius:15px; overflow:hidden; box-shadow:0 26px 72px #030711a0 }
.window-bar { min-height:38px; display:flex; align-items:center; gap:12px; padding:0 12px; border-bottom:1px solid var(--line); color:#c0d3ef; font-size:11px }
.window-bar span { display:flex; gap:4px }
.window-bar i { width:6px; height:6px; border-radius:50%; background:#577ba9 }
.window-bar b { font-size:10px; color:var(--muted); margin-left:auto; font-weight:500 }
.product img,.theme-grid img { display:block; width:100%; height:auto }
.section { padding:32px 0; border-top:1px solid var(--line); scroll-margin-top:18px }
.section-head { margin-bottom:20px }
h2 { font-size:clamp(32px,4vw,55px); line-height:1.06; margin-top:6px }
h3 { font-size:19px; letter-spacing:-.025em; line-height:1.25 }
.modules,.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.module { position:relative; padding:20px 20px 17px; background:linear-gradient(120deg,color-mix(in srgb,var(--module) 7%,var(--panel)),var(--panel) 70%); border:1px solid var(--line); border-radius:11px }
.module h3 { padding-right:31px }
.icon { position:absolute; right:17px; top:15px; color:var(--module); font-size:23px }
ul { color:var(--muted); padding-left:16px; font-size:14px; line-height:1.52; margin:12px 0 0 }
li + li { margin-top:5px }
.module li::marker { color:var(--module) }
.grabber { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.9fr); gap:26px; align-items:center }
.grabber-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.55; margin-top:12px }
.grabber-copy>p.note { font-size:12px; color:#cbd9ed }
.roster-panel { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:11px; overflow:hidden }
.roster-title { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 15px }
.roster-title span { color:var(--muted); font-size:11px }
.table-scroll { overflow:auto }
table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; white-space:nowrap }
th,td { padding:9px 8px; border-top:1px solid var(--line) }
th:first-child { padding-left:14px }
thead { color:#c2d1e7; background:#17243a }
.team { color:var(--mint); background:#142a32 }
.enemy { color:#ffafbd; background:#302332 }
.mint { color:var(--mint) } .pink { color:#f0a1d8 } .blue { color:#a9caff } .gold { color:#f1d393 }
.tool-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px }
.tool-list article { padding:14px 14px 14px 16px; border-left:2px solid #5276a5; background:#111a29; border-radius:0 8px 8px 0 }
.tool-list p { color:var(--muted); margin-top:7px; font-size:14px; line-height:1.5 }
kbd { border:1px solid #405574; border-radius:4px; padding:0 3px; font-size:11px }
.theme-grid figure { border:1px solid var(--line); background:var(--panel); border-radius:10px; overflow:hidden }
.theme-grid figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:7px; padding:10px 12px }
.theme-grid figcaption span { color:var(--muted); font-size:11px; text-align:right }
.footer { border-top:1px solid var(--line); padding:22px 0 30px; display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--muted); font-size:13px }
.capture-mode :is(.header nav,.capture,.action) { visibility:hidden }
@media (max-width:1080px) {
  .wrap { width:calc(100% - 50px) }
  .hero { gap:30px; min-height:0 }
  .grabber { grid-template-columns:1fr }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 32px) }
  .bar { flex-wrap:wrap; min-height:62px; gap:11px; padding-block:12px }
  nav { order:3; flex-basis:100%; justify-content:center }
  .hero { grid-template-columns:1fr; padding-block:33px; gap:24px }
  .lead { max-width:45ch }
  h1 { font-size:clamp(64px,13vw,90px) }
  .modules,.theme-grid,.tool-list { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:490px) {
  .modules,.theme-grid { grid-template-columns:1fr }
  .module { padding:15px 16px }
  .footer { align-items:flex-start; flex-direction:column }
}

.promo { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #486894; background:linear-gradient(106deg,#1b3154,#131d30); border-radius:12px; padding:20px 24px; margin-bottom:30px }
.promo h2 { font-size:clamp(24px,3vw,39px); letter-spacing:-.035em }
.promo .action { margin:0; flex-shrink:0 }
@media(max-width:570px){.promo{align-items:flex-start;flex-direction:column;padding:17px}}

.showcase-video { display:block; width:100%; max-width:960px; height:auto; aspect-ratio:16/9; border:1px solid var(--line); border-radius:12px; background:#080c13 }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 }
.stat { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:11px; background:var(--panel) }
.stat-featured { border-color:#486894; background:linear-gradient(110deg,#1b3154,var(--panel)) }
.stat dt { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; color:var(--muted); font-size:14px }
.stat a { color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.stat dt span { color:var(--mint); font-size:11px; font-weight:700 }
.stat dd { margin:6px 0 0; font-size:clamp(28px,4vw,44px); line-height:1.1; font-weight:740; font-variant-numeric:tabular-nums }
.stat small { color:var(--muted); font-size:14px; font-weight:500 }
.usage-status { display:flex; flex-wrap:wrap; gap:8px 24px; margin:15px 0 0; font-size:13px }
.usage-status div { display:flex; align-items:baseline; gap:8px }
.usage-status dd { margin:0; color:var(--muted) }
.community-note { margin-top:10px; color:var(--muted); font-size:14px }
@media (max-width:490px) {
  nav { flex-wrap:wrap; gap:10px 14px }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .stat-featured { grid-column:1/-1 }
}