:root{--bg:#07070b;--bg2:#0f0f17;--fg:#f2f2f7;--mut:#9a9ab0;--a:#7cff4f;--b:#22d3ee;--line:#ffffff14}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 24px}
h1,h2,.logo,.num{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:400}
h1{font-size:clamp(3rem,7vw,5.6rem);line-height:.95}h2{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.05;margin-bottom:40px;max-width:780px}
.grad{background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--a);font-weight:800;font-size:.8rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px}
.nav{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#07070bcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-size:1.4rem}.logo span{color:var(--a)}.logo em{font-style:normal;font-family:Inter;font-weight:600;font-size:.65rem;letter-spacing:3px;color:var(--mut);margin-left:8px}
nav{display:flex;gap:26px;align-items:center;font-weight:500;font-size:.92rem}nav a:not(.btn){color:var(--mut);transition:.2s}nav a:not(.btn):hover{color:var(--fg)}
.btn{display:inline-block;background:var(--a);color:#07070b;font-weight:800;padding:14px 26px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #7cff4f55}.btn.ghost{background:transparent;color:var(--fg);border:1px solid #ffffff33}.btn.ghost:hover{border-color:var(--a);box-shadow:none}
.btn.sm{padding:9px 18px;font-size:.85rem}.btn.big{padding:18px 36px;font-size:1.1rem}
.hero{position:relative;padding:90px 0 0;overflow:hidden}.glow{position:absolute;inset:-30% -10% auto auto;width:700px;height:700px;background:radial-gradient(circle closest-side,#7cff4f22,transparent),radial-gradient(circle closest-side at 30% 70%,#22d3ee1a,transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.lead{color:var(--mut);font-size:1.12rem;margin:26px 0 34px;max-width:540px}.ctas{display:flex;gap:14px;flex-wrap:wrap}
.reel{aspect-ratio:16/9;border-radius:20px;padding:2px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 30px 80px #000a}
.reel video,.reel iframe,.slot{width:100%;height:100%;border-radius:18px;border:0;display:block}
.slot{background:repeating-linear-gradient(45deg,#11111a,#11111a 14px,#14141f 14px,#14141f 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.slot small{color:var(--mut)}.play{width:66px;height:66px;border-radius:50%;background:var(--a);color:#07070b;display:grid;place-items:center;font-size:1.4rem;margin-bottom:8px;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 16px #7cff4f00}0%{box-shadow:0 0 0 0 #7cff4f88}}
.ticker{margin-top:80px;border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0;font-family:Anton;letter-spacing:2px;color:var(--mut)}
.ticker div{display:inline-block;animation:tick 30s linear infinite}@keyframes tick{to{transform:translateX(-50%)}}
.sec{padding:110px 24px}.alt{background:var(--bg2);border-block:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:linear-gradient(180deg,#14141f,#0d0d14);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:#7cff4f66}.num{color:var(--a);font-size:1.6rem}.card h3{margin:14px 0 10px;font-size:1.15rem}.card p,.steps p,.std p{color:var(--mut);font-size:.95rem}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{counter-increment:s;padding:28px;border:1px solid var(--line);border-radius:18px;background:#0a0a11;position:relative}
.steps li::before{content:"0" counter(s);font-family:Anton;font-size:2.6rem;color:transparent;-webkit-text-stroke:1px var(--a);display:block;line-height:1;margin-bottom:12px}
.steps b{font-size:1.1rem;display:block;margin-bottom:6px}
.std{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.std div{background:var(--bg);padding:28px 24px;transition:background .25s}.std div:hover{background:#10101a}
.std h4{font-size:1rem;margin-bottom:8px}.std h4::before{content:"✓ ";color:var(--a)}
.note{color:#ffb84d;font-size:.85rem;margin-bottom:24px;display:block}
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.ph{border:2px dashed #ffffff26;border-radius:16px;display:grid;place-items:center;text-align:center;color:var(--mut);font-weight:600;background:#0a0a11;transition:border-color .25s}.ph:hover{border-color:var(--a)}
.ph small{color:#ffb84d;font-weight:500}.ph.v{grid-column:span 2;aspect-ratio:9/16}.ph.w{grid-column:span 3;aspect-ratio:16/9}
.cta{text-align:center;margin:110px auto;padding:80px 24px;border-radius:28px;background:radial-gradient(circle at 50% 0,#7cff4f26,transparent 60%),var(--bg2);border:1px solid var(--line)}
.cta h2{margin:0 auto 16px}.cta p{color:var(--mut);margin-bottom:30px}.cta .note{margin:16px 0 0}
.foot{display:flex;justify-content:space-between;padding:30px 24px;color:var(--mut);font-size:.85rem;border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.ticker div,.play{animation:none}}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.cards,.std{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}nav a:not(.btn){display:none}}
@media(max-width:600px){.hero{padding-top:50px}.cards,.std,.steps{grid-template-columns:1fr}.sec{padding:70px 20px}.work{grid-template-columns:repeat(3,1fr);gap:10px}.ph.v{grid-column:span 1}.ph.w{grid-column:span 3}.logo em{display:none}.cta{margin:70px 16px}}