:root{
  --bg-1:#0b0d14;
  --bg-2:#0f1421;
  --ink:#eaf0ff;
  --muted:#9fb1d6;
  --brand-1:#60a5fa;
  --brand-2:#22d3ee;
  --brand-3:#a78bfa;
  --warn:#f59e0b;
  --ok:#10b981;
  --card:#121a2b;
  --border:1px solid rgba(255,255,255,.12);
  --radius:18px;
  --maxw:1500px;

  --shadow-hard: 10px 10px 0 #0a0f1d, 0 0 0 2px rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%; width: 100%; max-width: 100%; overflow-x: hidden;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at -10% -10%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, rgba(167,139,250,.22), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 40%, #0a0f1d);
  background-attachment: fixed;
}

.container{max-width:100%; width: 100%; margin:0; padding: 22px 22px}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.center{text-align:center}
.small{font-size:14px; color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

a{color:#bfe2ff; text-decoration:none}
a:hover{text-decoration:underline}

.card{background:var(--card); border:var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-hard)}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; border:var(--border); background:rgba(255,255,255,.04)}
.pill{display:inline-block; padding:8px 12px; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04)}

.btn{display:inline-block; padding:12px 16px; border-radius:14px; border:var(--border); font-weight:800; color:#071221;
  background:linear-gradient(135deg, var(--brand-2), var(--brand-3)); box-shadow: 8px 8px 0 #0a0f1d}
.btn.ghost{background:transparent; color:var(--ink)}

.topbar{ z-index:70; border-bottom:var(--border);
  background:linear-gradient(90deg, rgba(34,211,238,.25), rgba(96,165,250,.25), rgba(167,139,250,.25))}
.ticker{white-space:nowrap; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.ticker span{display:inline-block; padding:10px 22px; animation: slide 18s linear infinite}
@keyframes slide{from{transform: translateX(0)} to{transform: translateX(-50%)}}

.header{position:sticky; top:0px; width: 100%; display: flex; justify-content: center; align-items: center; z-index:90; border-bottom:var(--border);
  background:linear-gradient(180deg, rgba(7, 7, 7, 0.918), rgba(255,255,255,.02))}
.nav{display:flex; align-items:center; justify-content:space-around; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand .logo{width:42px; height:42px; border-radius:12px; background:
  conic-gradient(from 180deg at 50% 50%, var(--brand-2), var(--brand-1), var(--brand-3), var(--brand-2))}
.menu{display:flex; gap:12px; flex-wrap:wrap}
.menu a{padding:10px 12px; border-radius:12px; opacity:.9}
.menu a:hover{background:rgba(255,255,255,.06); opacity:1}

.hero{padding: 54px 54px; width: 100%;}
.hero h1{font-size: clamp(42px, 6vw, 68px); line-height:1.05; margin:0 0 10px}
.hero p{color:var(--muted); font-size: clamp(16px,2.2vw,20px)}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.gallery img{width:100%; height:120px; object-fit:cover; border-radius:12px; border:var(--border); box-shadow:var(--shadow-hard)}

section{padding:70px 0}
section h2{font-size: clamp(28px, 4.8vw, 44px); margin:0 0 8px}
.lead{color:var(--muted); width: 100%; text-align: center}
.divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); margin:18px 0}

.tiers{display:grid; width: 100%; grid-template-columns:repeat(3,1fr); gap:18px}
.tier .head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tier h3{margin:0}
.ribbon{font-size:12px; padding:6px 10px; border-radius:999px; border:var(--border); background:rgba(34,211,238,.18)}
.price{display:flex; align-items:baseline; gap:10px; margin:6px 0 10px}
.price-old{text-decoration: line-through; color:#c7cfe7; opacity:.7}
.price-new{font-size:32px; font-weight:900; background:linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent}
.meta{display:flex; gap:8px; flex-wrap:wrap}
.meta .badge{border-color: rgba(34,211,238,.4)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px}
.split .card{padding:14px}
.split h4{margin:0 0 4px}
ul.clean{list-style:none; padding:0; margin:0}
ul.clean li{display:flex; gap:8px; align-items:flex-start; margin:6px 0}
.dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,#22d3ee,#a78bfa); margin-top:6px}

.coaches{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.coach{display:flex; flex-direction:column; gap:10px}
.coach img{width:100%; height:300px; object-fit:cover; border-radius:12px; border:var(--border); box-shadow:var(--shadow-hard)}
.coach h3{margin:0}

.contactgrid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
iframe.map{width:100%; min-height:320px; border:var(--border); border-radius:14px; box-shadow:var(--shadow-hard)}
textarea {
  resize: none;
}
.footer{padding:40px 0 80px; border-top:var(--border); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02))}
.footgrid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:26px}
.copy{color:var(--muted); font-size:13px; margin-top:10px}

.reveal{opacity:0; transform: translateY(10px)}
.reveal.show{opacity:1; transform:none; transition: transform .7s ease, opacity .7s ease}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.show{transition:none; transform:none; opacity:1}
}

@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .coaches{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr}
  .header{top:34px}
}
@media (max-width:560px){
  .menu{display:none}
}