:root{ --header-top:0px; --header-h:72px; --offset-total:72px; --bg:#111; --panel:#1a1a1a; --border:#2b2b2b; --ink:#fff; --muted:#ccc }
*{ box-sizing:border-box }
body{ margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6 }
a{ color:inherit; text-decoration:none }
.container{ width:min(1200px,92%); margin:0 auto }
.section{ padding:40px 20px }

/* Sticky header */
.site-header{ background:#000; color:#fff; position:fixed; top:var(--header-top); left:0; right:0; width:100%; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.35) }
.site-header .inner{ width:min(1200px,92%); margin:0 auto; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:14px }
.brand a{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none }
.brand .name{ font-weight:800; font-size:1.1rem }
body.has-fixed-header{ padding-top:var(--offset-total) }

/* Desktop nav */
.nav-desktop ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px }
.nav-desktop a{ color:#fff; text-decoration:none; padding:8px 10px; transition:color .2s, background .2s }
.nav-desktop a:hover{ color:#ccc; background:#1a1a1a }

/* Burger */
.burger{ display:none; background:none; border:1px solid #333; color:#fff; border-radius:8px; padding:6px 10px; cursor:pointer }

/* Mobile overlay */
#fu-overlay{ position:fixed; inset:0; padding-top:calc(var(--header-top) + 10px); background:#000; z-index:9999; display:none; overflow:auto }
#fu-overlay.open{ display:block }
#fu-overlay header{ width:min(1200px,92%); margin:0 auto; padding:14px 0; display:flex; align-items:center; justify-content:space-between }
#fu-overlay .brand-text{ color:#fff; font-weight:800 }
#fu-overlay ul{ list-style:none; margin:40px 0; padding:0; text-align:center }
#fu-overlay a{ display:block; color:#fff; text-decoration:underline; font-size:32px; font-weight:700; padding:16px 0; transition:color .2s }
#fu-overlay a:hover{ color:#ccc }

/* Responsive */
@media (max-width:768px){
  .nav-desktop{ display:none }
  .burger{ display:inline-flex; align-items:center; gap:6px }
}

/* Common components */
.btn{ display:inline-block; padding:14px 24px; border-radius:8px; font-weight:700; border:1px solid #444; background:#444; color:#fff; transition:.2s }
.btn.secondary{ background:#666 }
.btn:hover,.btn:focus-visible{ background:#fff; color:#111; border-color:#fff }
.btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:18px }

.hero{
  padding:60px 20px; text-align:center;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%),
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    var(--hero-img) center/cover no-repeat;
  background-color:#222;
}
.hero h1{ font-size:2.3rem; margin:0 0 12px }
.hero .lead{ font-size:1.15rem; max-width:900px; margin:0 auto; color:var(--muted) }

.grid{ display:grid; gap:18px }
.cards{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card{ display:flex; flex-direction:column; overflow:hidden; border-radius:12px; border:1px solid var(--border); background:#1a1a1a; transition:transform .2s, background .2s }
.card:hover{ transform:translateY(-4px); background:#2a2a2a }
.card img{ width:100%; height:160px; object-fit:cover; display:block }
.card h3{ font-size:1.05rem; margin:12px }

.aud-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.aud-card{ display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; min-height:110px; padding:16px; color:#fff; background:#1a1a1a; border:1px solid #2b2b2b; border-radius:12px; transition:background .2s, transform .2s; text-decoration:none }
.aud-card:hover,.aud-card:focus-visible{ background:#2a2a2a; transform:translateY(-2px); outline:0 }

/* Accessibility utility */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

@media (max-width:640px){
  .section{ padding:32px 16px }
  .hero{ padding:50px 16px }
  .hero h1{ font-size:1.9rem }
}