.hero { background: radial-gradient(1100px 800px at 70% 0%, #1C3168 0%, #0C1530 60%, #0A1122 100%); color: #fff; }
.hero-in { max-width: 1200px; margin: 0 auto; padding: 22px 20px 80px; }
.hero nav { display: flex; align-items: center; gap: 16px; }
.hero h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -2px; margin-top: 70px; max-width: 900px; }
.hero h1 em { font-style: normal; color: var(--mint); }
.hero .lead { font-size: clamp(17px, 2vw, 21px); color: #C9D4EE; margin-top: 22px; max-width: 720px; }
.hero .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero .btn { min-height: 54px; font-size: 16px; padding: 0 26px; }
.kick { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--green); text-transform: uppercase; }
.sec { max-width: 1200px; margin: 0 auto; padding: 70px 20px; display: flex; flex-direction: column; gap: 28px; }
.sec h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -1px; font-weight: 800; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.feat { display: flex; flex-direction: column; gap: 10px; }
.feat li { margin: 6px 0; }
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 24px; justify-content: center; }
.vids video { width: 100%; border-radius: 18px; background: #0A1122; aspect-ratio: 9 / 16; }
.modes .card { padding: 26px; }
footer { background: var(--navy); color: #A9B4CC; }
footer .fin { max-width: 1200px; margin: 0 auto; padding: 30px 20px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; }
footer a { color: #C9D2E6; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.step { position: relative; padding-top: 52px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.hero-grid { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hero-grid > div { flex: 1 1 520px; min-width: 0; }
.hero-grid video { width: 300px; max-width: 100%; border-radius: 22px; aspect-ratio: 9 / 16; background: #0A1122; box-shadow: 0 40px 90px rgba(0,0,0,.5); margin-top: 40px; }
.switch { color: #A9B4CC; font-size: 14px; }
.switch a { color: #fff; }