:root{
  --bg:#0a0a0a;
  --panel:#111;
  --text:#fff;
  --muted:#c9c9c9;
  --accent:#f9d342;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid #1c1c1c}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px; padding-block:8px}
.nav{ overflow: visible; }   /* ensure nothing gets clipped */
.logo img{display:block;height:40px;width:auto;}
.nav .links a{margin-left:20px;color:#ddd}
.nav .links a:hover{color:var(--accent)}
.logo{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--accent);color:#000;font-weight:700}
.btn.dark{background:#1c1c1c;color:#fff;border:1px solid #2a2a2a}
.section{padding:72px 0}
.hero{position:relative;padding:0}
.hero-inner{position:relative;min-height:68vh;display:flex;align-items:center}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.65));}
.hero .content{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center}
.hero h1{font-size:56px;line-height:1.05;margin:0 0 12px}
.hero p{font-size:18px;color:#ddd;max-width:720px;margin:0 0 24px}
.media{width:100%;border-radius:16px;border:1px solid #222;background:#000;overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.card{background:var(--panel);padding:20px;border:1px solid #1e1e1e;border-radius:16px}
.card h3{margin:8px 0 8px}
.muted{color:var(--muted)}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:12px}
.divider{height:1px;background:#1c1c1c;margin:36px 0}
.footer{padding:48px 0;background:#000;border-top:1px solid #1c1c1c;color:#bdbdbd}
.form{display:grid;grid-template-columns:1fr;gap:16px}
.input, .textarea{padding:14px 16px;border-radius:10px;background:#0f0f0f;border:1px solid #222;color:#fff}
.input:focus, .textarea:focus{outline:none;border-color:var(--accent)}
.small{font-size:12px;color:#9a9a9a}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #242424;border-radius:999px;background:#0f0f0f;color:#dcdcdc}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:960px){ .cards{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:40px} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} .hero h1{font-size:32px} }
/* Hero: comfortable spacing */
#hero.section { padding: 36px 0; }   /* try 36–48px if you want to fine-tune */
.hero-inner   { min-height: 48vh; }  /* a touch of height so it feels open */

/* ===== Mobile layout tweaks ===== */
@media (max-width: 960px) {
  /* Make any 12-col grid collapse to one column */
  .grid { grid-template-columns: 1fr; gap: 16px; }

  /* Force every direct child in .grid to full width
     (overrides inline "grid-column: span 7/5" in the HTML) */
  .grid > * { grid-column: 1 / -1 !important; }

  /* Softer cards on mobile */
  .card { padding: 16px; }

  /* Video/iframe sizing */
  .media { border-radius: 12px; }
  .media video,
  .media iframe,
  .media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* Tighten hero a touch on mobile only (optional) */
  #hero.section { padding: 32px 0; }
  .hero h1 { font-size: 32px; }
  .hero p  { font-size: 16px; }
}

/* Ultra-small phones */
@media (max-width: 420px) {
  .grid { gap: 12px; }
  .card { padding: 12px; }
}

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* CTA bar style */
.cta-bar { 
  padding: 20px 0; 
  background:#0b0b0b; 
  border-top:1px solid #1c1c1c; 
  border-bottom:1px solid #1c1c1c; 
}
.cta-bar .btn { font-weight:800; }

/* ===== Navbar dropdown ===== */
.nav .links { display: flex; gap: 12px; align-items: center; }
.nav .dropdown { position: relative; }
.nav .dropbtn {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 6px 8px;
  cursor: pointer;
}
.nav .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #0f0f0f;
  color: #fff;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 999;
  overflow: hidden;
}
.nav .dropdown-content a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}
.nav .dropdown-content a:hover { background: #141414; }

/* show on hover (pointer devices) */
@media (hover:hover) {
  .nav .dropdown:hover .dropdown-content { display: block; }
}

/* class for JS toggle */
.nav .dropdown.open .dropdown-content { display: block; }

/* Grid column spans */
.span-12 { grid-column: span 12; }
.span-8  { grid-column: span 8; }
.span-6  { grid-column: span 6; }
.span-4  { grid-column: span 4; }

/* On mobile, make every span full width */
@media (max-width: 960px) {
  .span-12, .span-8, .span-6, .span-4 { grid-column: 1 / -1; }
}

/* Make iframes fill the media block */
.media iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Keep dropdown open on hover OR keyboard focus OR JS toggle */
.nav .dropdown:hover .dropdown-content,
.nav .dropdown:focus-within .dropdown-content,
.nav .dropdown.open .dropdown-content { display: block; }

/* Remove the "hover gap" between button and panel */
.nav .dropdown { position: relative; }
.nav .dropdown-content {
  top: 100%;          /* sit flush under the button */
  margin-top: 0;      /* no gap that can break hover */
}

/* Optional: slightly larger hit area on the button */
.nav .dropbtn { padding-bottom: 10px; }

/* (Nice-to-have) keep it open if you move diagonally into the panel */
@media (hover:hover) {
  .nav .dropdown-content { pointer-events: auto; }
}