@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');

:root{
  --bg:#0a0a0a;
  --layer:#0f0f11;
  --text:#f3f3f3;
  --muted:#a1a1a1;
  --border:rgba(255,255,255,.08);
  --accent:#ef233c;
  --accent-2:#ff4d6d;
  --radius:14px;
  --container:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.hidden{display:none !important}

/* Header/Nav */
.header{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.65);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{width:42px;height:42px}
nav ul{list-style:none;display:flex;gap:26px;align-items:center;margin:0;padding:0}
nav a{opacity:.85;transition:.2s}
nav a:hover{opacity:1}
nav a.active{color:var(--accent);opacity:1}
nav .btn{border:1px solid var(--accent);color:var(--accent);padding:8px 14px;border-radius:10px}
nav .btn:hover{background:var(--accent);color:#fff}

/* Hero */
.hero{display:flex;align-items:center;justify-content:center;min-height:72vh;text-align:center}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-size:12px;margin-bottom:8px}
h1.big{font-size:clamp(2.4rem,6vw,4rem);line-height:1.08;margin:.2rem 0 1rem}
h1.big span{color:var(--accent)}
.tagline{color:var(--accent);font-size:1.1rem;margin-bottom:12px}
.desc{max-width:60ch;margin:0 auto;color:var(--muted)}
.btns{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700}
.btn-outline{border:1px solid var(--accent);color:var(--accent);padding:12px 18px;border-radius:12px;font-weight:700;background:transparent}
.btn-ghost{border:1px solid var(--border);padding:12px 18px;border-radius:12px;color:#fff;background:linear-gradient(180deg,#141417,#0e0e10)}

/* Sections generic */
main section{padding:38px 0;border-top:1px solid var(--border)}
h2{font-size:1.8rem;margin:0 0 12px}
p{line-height:1.7}

/* About page refinements */
.header-spacer{height:10px}
.lead{color:#d7d7d7}
.list{margin:0;padding-left:18px;color:#d7d7d7}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#dcdcdc;font-size:12px}

/* Videos Grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.col-4{grid-column:span 4}
@media(max-width:920px){.col-4{grid-column:span 6}}
@media(max-width:560px){.col-4{grid-column:span 12}}
.card{background:radial-gradient(1200px 400px at 20% -30%, rgba(239,35,60,.07), transparent 60%), var(--layer);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card .frame{aspect-ratio:16/9;border-bottom:1px solid var(--border)}
.card iframe{width:100%;height:100%;border:0}
.card .body{padding:14px 16px}
.card .eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.4px}
.card .title{margin:.3rem 0 .2rem;font-weight:700}

/* Locked */
.locked{align-items:center;justify-content:center;text-align:center}
.lock{font-size:36px;opacity:.5;margin-top:30px}
.soon{color:#b6b6b6;font-size:.9rem}

/* Contact form */
.form{max-width:700px;margin:0 auto}
.field{display:flex;flex-direction:column;margin:12px 0}
label{font-size:.9rem;color:#cfcfcf;margin-bottom:6px}
input,textarea{background:#0c0c0e;border:1px solid var(--border);color:#fff;padding:12px 14px;border-radius:10px;outline:none}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(239,35,60,.15)}
textarea{min-height:140px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:720px){.form .row{grid-template-columns:1fr}}
.note{color:#9aa0a6;font-size:.85rem;margin-top:8px}

/* Footer */
footer{padding:28px 0;border-top:1px solid var(--border);color:#bdbdbd;text-align:center}

/* Animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}