:root{
  --bg:#0b0b0b;
  --text:#f5f5f5;
  --muted:#c8c8c8;
  --brand:#FFC62B;     /* rush yellow */
  --accent:#3AD1FF;    /* cyan accent */
  --card:#121212;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

.container{width:min(1200px,92%); margin-inline:auto}

.header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  backdrop-filter:saturate(140%) blur(4px);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
.brand .logo{
  width:36px; height:36px; border-radius:12px;
  background:radial-gradient(60% 80% at 30% 30%, var(--brand), #ff9f0f 70%), #222;
  box-shadow:inset 0 0 0 2px #000, 0 6px 20px rgba(255,198,43,.25);
}
.brand .name{font-size:20px}
.badge{font-size:12px; color:#0b0b0b; background:var(--brand); padding:2px 8px; border-radius:999px; font-weight:700}

.nav-actions{display:flex; gap:10px; align-items:center}
.btn{appearance:none; border:none; cursor:pointer; padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.3px}
.btn.primary{background:var(--brand); color:#171717}
.btn.ghost{background:#1b1b1bcc; color:var(--text); border:1px solid #2a2a2a}
.btn.ghost:hover{border-color:#3a3a3a}

.hero{
  position:relative; padding-top:88px;
  background:#000;
}
.hero-media{
  position:relative; height:76vh; min-height:560px; max-height:860px;
  display:grid; place-items:center; overflow:hidden;
  border-bottom:1px solid #222;
}
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(110%) contrast(105%);
  transform:scale(1.02);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 50% 30%, transparent 0%, transparent 60%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100%),
             linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.65) 60%, #0b0b0b 100%);
}

.hero .content{
  position:absolute; inset:0; display:grid; align-content:end;
  padding-bottom:48px;
}
.kicker{color:var(--accent); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:13px; margin-bottom:10px}
h1.title{
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.95;
  margin: 0 0 14px 0;
  letter-spacing: .02em;
  text-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.subtitle{max-width: 720px; color:var(--muted); font-size: clamp(16px, 2.2vw, 20px)}

.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

.section{
  padding:56px 0;
}
.cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 4;
  background:linear-gradient(180deg, #161616, #0f0f0f);
  border:1px solid #1f1f1f; border-radius: var(--radius); padding:22px;
  box-shadow: var(--shadow);
}
.card .icon{font-size:26px}
.card h3{margin:.3rem 0 .25rem 0}
.card p{color:var(--muted); margin:.25rem 0 0 0}

@media (max-width: 980px){
  .card{grid-column: span 6}
  .hero-media{height:68vh}
}
@media (max-width: 640px){
  .nav-actions .hide-sm{display:none}
  .card{grid-column: span 12}
  .hero-media{height:70vh; min-height:520px}
}

.split{
  display:grid; gap:26px; grid-template-columns: 1.2fr .8fr; align-items:center;
}
.split .panel{
  background:linear-gradient(180deg, #141414, #0f0f0f);
  border:1px solid #1f1f1f; border-radius:var(--radius); padding:22px;
}
.split .panel h3{margin-top:0}
.split .panel p{color:var(--muted)}

.preview{
  aspect-ratio: 16 / 10; border-radius: var(--radius); overflow:hidden;
  border:1px solid #262626; box-shadow: var(--shadow);
}
.preview img{width:100%; height:100%; object-fit:cover}

.footer{
  margin-top:56px; padding:26px 0; border-top:1px solid #1a1a1a; color:#9a9a9a;
  font-size:14px;
}
.footer a{color:#cfcfcf}