html, body { margin: 0; padding: 0; background: #0d0d0f; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: oklch(0.62 0.19 248); }
  ::selection { background: oklch(0.62 0.19 248); color: #fff; }
  img { display: block; max-width: 100%; }
  @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
  html { scroll-behavior: smooth; }
  [data-hero="grain"] { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); }
  section[id] { scroll-margin-top: 68px; }
  .lp { container-type: inline-size; }
  [data-grid="stats"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-grid="coach"] { grid-template-columns: minmax(0,1fr); }
  [data-grid="intl"] { grid-template-columns: minmax(0,1fr); }
  [data-only="wide"] { display: none; }
  [data-only="narrow"] { display: flex; }
  [data-hero="col"] { padding-right: clamp(14px, 3.5vw, 40px); }
  [data-grid="podium"] { grid-template-columns: minmax(0,1fr); }
  [data-grid="gallery"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-belt="card"] { grid-template-columns: minmax(0,1fr); }
  [data-belt="photo"] { aspect-ratio: 2/3; }
  @container (min-width: 700px) {
    [data-belt="photo"] { aspect-ratio: auto; height: 100%; }
    [data-belt="photo"] img { position: absolute; inset: 0; }
    [data-belt="card"] { min-height: clamp(330px, 29vw, 410px); }
  }
  @container (min-width: 760px) { [data-side="about-fig"] { order: 2; } }
  @container (min-width: 700px) { [data-side="podium-fig"] { order: 2; } [data-grid="podium"] { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); } [data-belt="card"] { grid-template-columns: minmax(0,0.44fr) minmax(0,0.56fr); } }
  @container (min-width: 900px) { [data-grid="gallery"] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  [data-grid="gallery"] > button:first-child { background: #0b0b0d !important; }
  [data-grid="gallery"] > button:first-child img { object-fit: contain !important; object-position: 50% 50% !important; }
  @container (min-width: 520px) { [data-grid="coach"] { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @container (min-width: 560px) { [data-grid="stats"] { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  @container (min-width: 760px) { [data-grid="intl"] { grid-template-columns: repeat(2, minmax(0,1fr)); } [data-only="wide"] { display: flex; } [data-hero="col"] { padding-right: clamp(300px, 37vw, 540px); }
    [data-only="narrow"] { display: none; } }
  @container (min-width: 1000px) { [data-grid="coach"] { grid-template-columns: repeat(4, minmax(0,1fr)); } }
  @container (min-width: 1040px) { [data-grid="stats"] { grid-template-columns: repeat(6, minmax(0,1fr)); } }
  @keyframes lp-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
  @keyframes lp-wave { 0%, 100% { transform: translateY(0) skewX(0deg); } 42% { transform: translateY(-0.055em) skewX(-2.5deg); } 70% { transform: translateY(0.02em) skewX(0.8deg); } }
  @keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* the wave is em-based: at the mobile title size it collapses to ~3px, so scale it up */
  @media (max-width: 860px) {
    @keyframes lp-wave { 0%, 100% { transform: translateY(0) skewX(0deg); } 42% { transform: translateY(-0.14em) skewX(-5.5deg); } 70% { transform: translateY(0.055em) skewX(1.8deg); } }
  }
  [data-ytplayer] { container-type: inline-size; }
  @container (max-width: 430px) {
    [data-ytplayer] [data-bar] { flex-wrap: wrap; row-gap: 10px; }
    [data-ytplayer] [data-track] { flex: 1 1 100%; order: 3; }
    [data-ytplayer] [data-bar] button { height: 44px; }
    [data-ytplayer] [data-time] { order: 2; margin-left: auto; }
  }

/* hover states (were inline in the design component) */
.hv1:hover { background:#fff !important;color:#0d0d0f !important; }
.hv2:hover { transform:scale(1.05) !important;filter:grayscale(0) !important; }
.hv3:hover { background:oklch(0.62 0.19 248) !important;color:#fff !important; }
.hv4:hover { opacity: 1 !important; }