*{box-sizing:border-box} html,body{height:100%}
:root{
  --fg:#e7e9ee;
  --muted:#aeb4bf;
  --card:rgba(18,20,26,.60);
  --card-border:rgba(255,255,255,.10);
  --shadow:0 20px 60px rgba(0,0,0,.65);
  --shadow-hover:0 28px 90px rgba(0,0,0,.85);
  --accent:#F73434;
  --accent-soft:rgba(247,52,52,.22);
}

body{
  margin:0;
  background:#000;
  color:var(--fg);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#space{position:fixed; inset:0; z-index:-2}

/* Rocket floating */
#cursor-rocket{
  position:fixed;
  width:30px; height:30px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:9999;
  font-size:26px;
  transition:transform 0.2s linear;
  filter: drop-shadow(0 0 12px rgba(247,52,52,.55)) drop-shadow(0 0 26px rgba(247,52,52,.35));
}

/* Nav */
.nav{position:sticky; top:0; z-index:3; backdrop-filter:blur(8px); background:rgba(5,6,10,.35); border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:1160px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:120px; height:auto; opacity:.95}
.brand-name{font-weight:800; letter-spacing:.4px}
.link{color:var(--fg); text-decoration:none; opacity:.85}
.link:hover{opacity:1}

/* Hero */
.container{max-width:1160px; margin:0 auto; padding:44px 20px 60px}
.hero{text-align:center; padding:100px 0 40px}
.hero-title{
  font-weight:900; letter-spacing:.3px; margin:0;
  font-size:clamp(48px,7.5vw,80px);
  background:linear-gradient(90deg,#ffffff,#F73434 55%,#9b1515 100%);
  -webkit-background-clip:text; color:transparent;
  text-shadow:0 6px 50px rgba(247,52,52,.28);
}
.hero-sub{color:var(--muted); max-width:760px; margin:16px auto 0; line-height:1.65}
.cta-row{display:flex; gap:12px; justify-content:center; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:12px; text-decoration:none; font-weight:800;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  border:1px solid rgba(255,255,255,.12);
}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn-primary{background:linear-gradient(90deg,#F73434,#c41f1f); color:#fff; box-shadow:0 10px 34px rgba(247,52,52,.45)}
.btn-primary:hover{box-shadow:0 16px 46px rgba(247,52,52,.6)}
.btn-ghost{background:rgba(255,255,255,.09); color:#fff}
.note{color:#9fa6b5; font-size:.9rem; margin-top:14px}

/* Cards */
.grid{display:grid; gap:18px; margin-top:30px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:18px; padding:22px 20px; backdrop-filter:blur(12px);
  box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-8px) scale(1.06);
  border-color:var(--accent);
  box-shadow:var(--shadow-hover), 0 0 26px var(--accent), 0 0 60px var(--accent-soft);
  background:rgba(18,20,26,.72);
}
.card-badge{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.10); font-size:1.4rem; margin-bottom:12px}
.card h3{margin:0 0 6px; font-size:1.06rem; font-weight:800;}
.card p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.55}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08); text-align:center; color:#8d93a3; padding:24px 0 34px}