@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #131117;
  --surface: #1d1921;
  --border: #3a303c;
  --muted: #c2b7c5;
  --red: #ff8764;
  color-scheme: dark;
}
body { background: var(--bg); font-family: "DM Sans", system-ui, sans-serif; }
.sidebar { background: #17131a; }
.brand-name, h1, h2, h3, .stat strong {
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}
.brand-name { font-size: 22px; letter-spacing: .04em; }
.mark, .dot { background: #ff8764; color: #211016; }
.top h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.eyebrow { color: #ffac93; }
.hero {
  min-height: 430px;
  padding: clamp(24px, 5vw, 64px);
  background: linear-gradient(90deg, #120a17 2%, #120a17dc 35%, #120a1720 78%),
    url("assets/studio.jpg") center / cover;
  border: 1px solid #51404b;
  border-radius: 22px;
}
.hero::after { content: none; }
.hero h2 {
  font-size: clamp(3.3rem, 8vw, 7.4rem);
  font-weight: 800;
  line-height: .83;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 16px 0 20px;
}
.hero h2 em { color: #ff997a; font-style: normal; }
.hero p { max-width: 32ch; color: #f4e6ed; }
.btn { background: #ff8764; color: #211016; box-shadow: none; }
.btn.alt, .btn.ghost { color: #fff3f5; }
:where(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid #ffbb9c;
  outline-offset: 3px;
}
.course { transition: transform .2s ease, border-color .2s ease; }
.course:hover { transform: translateY(-3px); border-color: #f38e75; }
.course h3, .plan h3 { font-size: 1.55rem; }
.section-title h2 { font-size: 2rem; }
.stat strong { color: #ffc1ab; font-size: 2rem; }
.popular { color: #211016; }
@media (max-width: 620px) {
  .hero {
    min-height: 380px;
    background-image: linear-gradient(90deg, #120a17f5, #120a176b),
      url("assets/studio.jpg");
    background-position: 60% center;
  }
  .hero h2 { letter-spacing: -.035em; }
  .mobile-nav button { min-height: 44px; flex: 1; padding-inline: 1px; }
  .mobile-nav button.active { color: #ffad92; }
  .toast { bottom: calc(75px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .course { transition: none; }
}