*{box-sizing:border-box}
body{margin:0;background:#0d0f0a;color:#f1f2e9;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding-left:20px;padding-right:20px}
.mono{font-family:'IBM Plex Mono',monospace}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0 0}
.logo{height:28px;width:auto;opacity:.96}
.eyebrow{font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#c8ff00}
header.hero{padding:40px 0;border-bottom:1px solid #2a2d20}
.hero h1{font-weight:900;font-size:clamp(34px,6vw,58px);line-height:1.02;letter-spacing:-.02em;margin:16px 0 0}
.hero h1 .x{color:#9ea295;font-weight:700}
.hero p{color:#9ea295;font-size:17px;line-height:1.6;max-width:600px;margin:18px 0 0}
section{padding:38px 0;border-bottom:1px solid #2a2d20}
.slabel{font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#9ea295;margin-bottom:18px}
.lead{font-size:22px;line-height:1.4;font-weight:700;max-width:640px}
.lead .hl{color:#c8ff00}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:640px){.two{grid-template-columns:1fr}}
.tile{background:#15170f;border:1px solid #2a2d20;border-radius:14px;padding:20px}
.tile h3{margin:0 0 8px;font-size:17px;font-weight:800}
.tile p{margin:0;color:#9ea295;font-size:14px;line-height:1.55}
.reels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:640px){.reels{grid-template-columns:1fr}}
.reel{background:#0a0b07;border:1px solid #2a2d20;border-radius:14px;overflow:hidden}
.reel .frame{aspect-ratio:16/9;background:linear-gradient(135deg,#1c1f14,#0a0b07);display:flex;align-items:center;justify-content:center}
.reel .play{width:52px;height:52px;border-radius:50%;border:2px solid #c8ff00;display:flex;align-items:center;justify-content:center}
.reel .play::after{content:"";border-left:14px solid #c8ff00;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.reel .cap{padding:12px 14px}
.reel .cap b{font-size:14px}.reel .cap span{display:block;color:#9ea295;font-size:12px;margin-top:2px}
.steps{list-style:none;padding:0;margin:18px 0 0;counter-reset:s}
.steps li{counter-increment:s;padding:14px 0 14px 46px;position:relative;border-top:1px solid #2a2d20;color:#9ea295;font-size:15px;line-height:1.5}
.steps li:first-child{border-top:0}.steps li b{color:#f1f2e9}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;font:500 13px 'IBM Plex Mono',monospace;color:#c8ff00}
.cta{padding:44px 0 20px}
.cta h2{font-size:26px;font-weight:800;margin:0 0 8px}
.cta p{color:#9ea295;font-size:15px;max-width:560px;line-height:1.6}
.cta .btn{display:inline-block;margin-top:18px;background:#c8ff00;color:#0d0f0a;font-weight:800;font-size:15px;padding:14px 24px;border-radius:10px;text-decoration:none}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font:500 12px 'IBM Plex Mono',monospace;color:#9ea295;border:1px solid #2a2d20;border-radius:20px;padding:5px 12px}
footer{padding:30px 0 60px;color:#9ea295;font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:14px}
footer img{height:24px;width:auto;opacity:.8}