:root{
  --bg:#08111f;
  --panel:#0f172a;
  --panel-2:#111c34;
  --text:#e5eef9;
  --muted:#9eb0c7;
  --line:rgba(255,255,255,.08);
  --accent:#f97316;
  --accent-2:#06b6d4;
  --green:#22c55e;
  --danger:#ef4444;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:22px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(249,115,22,.18), transparent 22%),
    radial-gradient(circle at top right, rgba(6,182,212,.18), transparent 20%),
    linear-gradient(180deg,#08111f 0%, #091523 100%);
  color:var(--text);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(8,17,31,.75);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand img{width:54px; height:54px; border-radius:14px; background:#0b1220; padding:4px}
.brand span{font-size:1.04rem; letter-spacing:.06em}
.menu{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.menu a{color:var(--muted); font-weight:600}
.menu a:hover{color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:999px; font-weight:800;
  transition:.2s ease; border:1px solid transparent;
}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--danger)); color:white; box-shadow:var(--shadow)}
.btn.secondary{border-color:var(--line); background:rgba(255,255,255,.02); color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.hero{padding:64px 0 34px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center}
.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:#dbeafe; font-weight:700; font-size:.92rem;
}
.hero h1{
  font-size:clamp(2.5rem, 6vw, 5.2rem);
  line-height:.96; margin:18px 0 14px; letter-spacing:-.04em;
}
.hero p{
  font-size:1.1rem; color:var(--muted); max-width:62ch; line-height:1.7;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px;
}
.metric{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid var(--line); border-radius:20px; padding:18px;
}
.metric strong{font-size:1.8rem; display:block}
.metric span{color:var(--muted); font-weight:600}
.hero-card, .panel{
  background:linear-gradient(180deg, rgba(17,28,52,.95), rgba(11,18,32,.95));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.hero-card{padding:26px}
.logo-box{
  padding:14px; border-radius:22px; background:#0b1220; border:1px solid var(--line); margin-bottom:18px;
}
.schedule{
  display:grid; gap:12px; margin-top:18px;
}
.schedule .row{
  display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center;
  padding:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:18px;
}
.schedule .time{font-weight:900; color:#fff}
.schedule .desc{color:var(--muted)}
.section{padding:34px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:20px}
.section-head h2{font-size:clamp(1.7rem,4vw,2.7rem); margin:0}
.section-head p{color:var(--muted); max-width:62ch}
.cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.card{
  padding:22px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid var(--line);
}
.card .tag{
  display:inline-block; padding:7px 10px; border-radius:999px; font-size:.78rem; font-weight:800; letter-spacing:.05em;
  background:rgba(255,255,255,.07); color:#e2e8f0; margin-bottom:14px;
}
.card h3{margin:0 0 10px; font-size:1.35rem}
.card p{margin:0 0 16px; color:var(--muted); line-height:1.65}
.card ul{margin:0; padding-left:18px; color:#d5e0ee}
.card li{margin:7px 0}
.card.crossfit .tag{background:rgba(239,68,68,.14); color:#fecaca}
.card.hybrid .tag{background:rgba(34,197,94,.14); color:#bbf7d0}
.card.hyrox .tag{background:rgba(6,182,212,.14); color:#bae6fd}
.card.cardio .tag{background:rgba(249,115,22,.14); color:#fed7aa}

.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.feature{
  padding:24px; border-radius:24px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.feature h3{margin-top:0; margin-bottom:12px}
.feature p{color:var(--muted); line-height:1.7}
.wod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.wod{
  padding:22px; border-radius:24px; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.wod .meta{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 14px}
.pill{
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); color:#dbe5f3; font-size:.82rem; font-weight:700;
}
.wod h3{margin:0}
.wod ol{padding-left:18px; color:#dbe5f3; line-height:1.65}
.note{
  padding:18px 20px; border-left:4px solid var(--accent); background:rgba(249,115,22,.08);
  color:#ffedd5; border-radius:16px;
}
.cta{
  padding:28px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
footer{padding:30px 0 50px; color:var(--muted)}
footer .foot{
  padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.small{font-size:.92rem; color:var(--muted)}
@media (max-width: 1040px){
  .hero-grid,.feature-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .wod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .menu{display:none}
  .metrics,.cards,.wod-grid{grid-template-columns:1fr}
  .hero{padding-top:34px}
  .section{padding:24px 0}
}