:root{
  --bg-0:#000000;
  --bg-1:#111111;
  --bg-2:#1a1a1a;
  --txt:#ffffff;
  --muted:#cccccc;
  --brand:#a8ff7f; /* subtle green */
  --brand-2:#ffffff;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  --radius:22px;
  --speed:240ms;
}
*{box-sizing:border-box;}
html,body{height:100%; margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Helvetica,sans-serif; color:var(--txt); background:var(--bg-0); overflow-x:hidden;}
a{color:var(--brand); text-decoration:none;} a:hover{opacity:.8;} ::selection{background:rgba(255,255,255,.25);}

/* BACKGROUND */
.bg-wrap{position:fixed; inset:0; z-index:-1; overflow:hidden;}
.glow{position:absolute; filter:blur(80px); opacity:.25; will-change:transform; width:520px; height:520px; top:-120px; left:-120px; mix-blend-mode:screen; animation:float1 16s ease-in-out infinite; background: radial-gradient(circle at 30% 30%, var(--brand), #ff6fff 55%);}
.glow.g2{background:radial-gradient(circle at 70% 40%, var(--brand-2), #6fffeb 55%); width:560px; height:560px; right:-140px; bottom:-160px; animation:float2 20s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,30px);}} 
@keyframes float2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-50px);}}
#space{position:absolute; inset:0;}

/* HEADER, NAV, BURGER */
.shell{position:relative; min-height:100dvh; display:flex; flex-direction:column;}
.topbar{position:sticky; top:0; z-index:5; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.55)); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 6px 30px rgba(0,0,0,.5);}
.topbar-inner{max-width:1100px; margin:0 auto; padding:14px 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;}
.brand{font-weight:800; letter-spacing:.5px; color:#ffffff; display:flex; align-items:center; gap:10px;}
.brand-badge{width:10px;height:10px;border-radius:999px;background:var(--brand); box-shadow:0 0 12px rgba(255,255,255,.6);}
.nav{display:flex; justify-content:center; gap:24px; font-weight:700;}
.nav a{color:var(--txt); opacity:.9; padding:6px 10px; border-radius:10px;} .nav a:hover{background:var(--glass-strong);}
.hamburger{margin-left:auto; display:flex; justify-content:flex-end;}
.btn-burger{width:44px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08); background:var(--glass); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); transition:transform var(--speed);}
.btn-burger:active{transform:scale(.96);}
.lines{width:20px;} .lines,.lines::before,.lines::after{display:block; height:2px; background:#ffffff; border-radius:2px; position:relative; content:"";}
.lines::before,.lines::after{position:absolute; left:0; width:100%;} .lines::before{top:-6px;} .lines::after{top:6px;}
.dropdown{display:none; position:absolute; right:18px; top:56px; z-index:6; background:rgba(0,0,0,.92); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.65);}
.dropdown a{display:block; padding:12px 16px; color:var(--txt); white-space:nowrap;} .dropdown a:hover{background:rgba(255,255,255,.08);}
@media (max-width:820px){.nav{display:none;} .hamburger{display:flex;}}

/* MAIN CARDS */
main{flex:1; display:grid; place-items:center;}
.wrap{width:100%; max-width:1100px; padding:30px 18px 80px; margin-inline:auto;}
.card{grid-column: span 6; min-height: 220px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px) saturate(130%); padding: 20px; position:relative; overflow:hidden; transform-style:preserve-3d; will-change:transform, box-shadow; transition: box-shadow var(--speed), transform var(--speed);}
.card:hover{box-shadow:0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);}
.card h3{margin:0 0 10px; font-size:20px; letter-spacing:.3px; color:#ffffff; display:flex; align-items:center; gap:10px;}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; color:#000; background:linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow:0 0 14px rgba(255,255,255,.35);}
.muted{color:var(--muted);}
.hero{grid-column: span 12; min-height:260px; display:grid; align-content:center; gap:10px;}
.hero h1{margin:0; font-size: clamp(26px, 3.6vw, 44px); letter-spacing:.6px;}
.hero p{margin:0; color:var(--muted);}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--txt); transition: transform var(--speed), background var(--speed);}
.btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.12);}
.btn.primary{background:var(--brand); color:#000; border-color:transparent;}
.btn.primary:hover{filter:brightness(1.1);}
.video{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.1);}
.video video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}
footer{text-align:center; color:var(--muted); font-size:13px; padding:26px; opacity:.8;}
@media (max-width:900px){.card{grid-column: span 12;}}