:root {
  --cyan:#00e5ff;
  --blue:#3478ff;
  --pink:#ff28c8;
  --yellow:#ffdf00;
  --green:#36ff9b;
  --orange:#ff7b19;
  --purple:#9b5cff;
  --dark:#080d1c;
  --panel:#121c32;
  --text:#f7faff;
  --muted:#b4c2d6;
}

* { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(ellipse at 5% 5%,#142c66 0,transparent 30%),
    radial-gradient(ellipse at 95% 15%,#4a1558 0,transparent 30%),
    radial-gradient(ellipse at 50% 100%,#073b4b 0,transparent 35%),
    var(--dark);
  min-height:100vh;
}

button { font:inherit; cursor:pointer; }

button:focus-visible {
  outline:3px solid white;
  outline-offset:4px;
}

.hidden { display:none!important; }

header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(5,9,20,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #2b4563;
}

.navbar {
  max-width:1400px;
  margin:auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:1px;
  text-decoration:none;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--yellow));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand:focus-visible {
  outline:2px solid white;
  outline-offset:4px;
  border-radius:4px;
}

.brand img {
  width:48px;
  height:48px;
  object-fit:contain;
}

.nav-links { display:flex; gap:8px; flex-wrap:wrap; }

.nav-links button {
  border:0;
  background:transparent;
  color:white;
  font-weight:bold;
  padding:12px 15px;
  border-radius:12px;
}

.nav-links button:hover {
  background:linear-gradient(120deg,var(--blue),var(--pink));
}

.menu-button {
  display:none;
  background:none;
  color:white;
  border:0;
  font-size:28px;
}

.hero {
  min-height:680px;
  padding:80px 20px;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.hero:before,.hero:after {
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.22;
  pointer-events:none;
  animation:float 7s ease-in-out infinite alternate;
}

.hero:before { background:var(--pink); left:-150px; top:30px; }
.hero:after { background:var(--cyan); right:-150px; bottom:0; }

@keyframes float {
  to { transform:translateY(35px) scale(1.15); }
}

.hero-content { position:relative; z-index:1; max-width:950px; }

.hero-logo {
  display:block;
  width:min(650px,90vw);
  max-height:380px;
  object-fit:contain;
  margin:0 auto 20px;
  filter:drop-shadow(0 0 25px #00e5ff44);
}

.hero h1 {
  font-size:clamp(42px,8vw,88px);
  line-height:.98;
  font-weight:1000;
  letter-spacing:-3px;
  background:linear-gradient(90deg,var(--cyan),white,var(--pink),var(--yellow));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero h2 {
  margin:22px 0;
  color:var(--yellow);
  font-size:clamp(18px,3vw,29px);
}

.hero p {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  max-width:720px;
  margin:0 auto 25px;
}

.eyebrow {
  display:inline-block;
  padding:10px 17px;
  border:1px solid #00e5ff77;
  border-radius:40px;
  color:var(--cyan);
  background:#00e5ff12;
  font-weight:bold;
  margin-bottom:20px;
}

.btn {
  border:0;
  border-radius:13px;
  padding:15px 23px;
  font-weight:900;
  margin:6px;
  transition:.2s;
}

.btn:hover {
  transform:translateY(-3px);
  filter:brightness(1.1);
}

.btn-primary {
  color:#07111b;
  background:linear-gradient(120deg,var(--cyan),var(--green));
  box-shadow:0 8px 25px #00e5ff33;
}

.btn-secondary {
  color:#1a0b20;
  background:linear-gradient(120deg,var(--pink),var(--yellow));
}

.btn-outline {
  color:white;
  background:transparent;
  border:1px solid #56708e;
}

section { padding:80px 20px; }

.container { max-width:1250px; margin:auto; }

.section-heading { text-align:center; margin-bottom:42px; }

.section-heading h2 {
  font-size:clamp(32px,5vw,52px);
  background:linear-gradient(90deg,white,var(--cyan),var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.section-heading p {
  color:var(--muted);
  margin-top:12px;
  line-height:1.6;
}

.sports-grid,.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.sport-card {
  display:block;
  text-align:center;
  padding:30px 18px;
  border-radius:24px;
  background:linear-gradient(145deg,#14213b,#101226);
  border:2px solid var(--accent);
  cursor:pointer;
  transition:.25s;
  box-shadow:0 10px 35px #0003;
  color:var(--text);
  text-decoration:none;
}

.sport-card:focus-visible {
  outline:3px solid white;
  outline-offset:4px;
}

.sport-card:hover {
  transform:translateY(-9px) scale(1.02);
  box-shadow:0 15px 35px color-mix(in srgb,var(--accent) 25%,transparent);
}

.sport-icon {
  font-size:65px;
  margin-bottom:14px;
}

.sport-card h3 { color:white; font-size:25px; }

.sport-card p {
  color:var(--muted);
  margin-top:9px;
  line-height:1.5;
}

.feature-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.feature-card {
  background:linear-gradient(140deg,#17213b,#211331);
  border:1px solid #40516c;
  border-radius:22px;
  padding:28px;
  cursor:pointer;
  transition:.2s;
}

.feature-card:hover {
  transform:translateY(-6px);
  border-color:var(--cyan);
}

.feature-card .icon { font-size:45px; }

.feature-card h3 {
  font-size:24px;
  margin:14px 0 8px;
}

.feature-card p {
  color:var(--muted);
  line-height:1.6;
}

.page {
  min-height:75vh;
  padding:65px 20px 90px;
}

.page-heading {
  text-align:center;
  margin-bottom:42px;
}

.page-heading .big-icon { font-size:75px; }

.page-heading h2 {
  font-size:clamp(36px,6vw,58px);
  margin:10px 0;
  background:linear-gradient(90deg,var(--cyan),white,var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.page-heading p {
  color:var(--muted);
  line-height:1.6;
}

.choice-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  max-width:1000px;
  margin:auto;
}

.choice-card {
  text-align:center;
  background:var(--panel);
  border:1px solid #435575;
  border-radius:22px;
  padding:35px 20px;
  cursor:pointer;
  transition:.2s;
}

.choice-card:hover {
  transform:translateY(-7px);
  border-color:var(--cyan);
}

.choice-card .icon { font-size:55px; }

.choice-card h3 {
  color:white;
  font-size:25px;
  margin:12px 0;
}

.choice-card p {
  color:var(--muted);
  line-height:1.5;
}

.skills-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  max-width:1100px;
  margin:auto;
}

.skill-card {
  text-align:left;
  background:linear-gradient(135deg,#14213a,#21142f);
  color:white;
  border:1px solid #405472;
  border-radius:16px;
  padding:22px;
  cursor:pointer;
  transition:.2s;
}

.skill-card:hover {
  transform:translateY(-4px);
  border-color:var(--yellow);
}

.skill-card h3 {
  color:var(--yellow);
  font-size:19px;
  padding-right:18px;
}

.skill-card p {
  color:var(--muted);
  margin-top:8px;
  line-height:1.5;
}

.skill-card span {
  float:right;
  color:var(--cyan);
  font-size:22px;
}

.lesson-wrap {
  max-width:1050px;
  margin:auto;
}

.lesson-panel {
  background:linear-gradient(145deg,#15213a,#21152f);
  border:1px solid #425a7a;
  border-radius:26px;
  padding:clamp(20px,4vw,42px);
  box-shadow:0 20px 60px #0005;
}

.lesson-title {
  color:var(--cyan);
  font-size:clamp(32px,5vw,48px);
  margin-bottom:12px;
}

.lesson-intro {
  color:var(--muted);
  line-height:1.7;
  font-size:18px;
}

.video-box {
  margin:28px 0;
  min-height:230px;
  border:2px dashed #55708e;
  border-radius:22px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:25px;
  background:
    radial-gradient(circle,#00e5ff20,transparent 65%),
    #080f1d;
}

.video-box .video-icon { font-size:58px; }

.video-box h3 {
  color:var(--cyan);
  font-size:24px;
  margin:10px;
}

.video-box p {
  color:var(--muted);
  line-height:1.5;
}

.video-box.is-portrait-video {
  display:flex;
  justify-content:center;
  min-height:0;
  padding:0;
  border:0;
  background:none;
}

.video-box iframe {
  width:min(100%,360px,63vh);
  aspect-ratio:9 / 16;
  height:auto;
  border:0;
  border-radius:16px;
}

.lesson-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.lesson-card {
  background:#0c1425;
  border:1px solid #40516a;
  border-radius:18px;
  padding:24px;
}

.lesson-card h3 {
  font-size:22px;
  margin-bottom:14px;
}

.lesson-card p,
.lesson-card li {
  color:#c4d0df;
  line-height:1.7;
}

.lesson-card ul { padding-left:21px; }

.lesson-card li { margin:7px 0; }

.lesson-card.what { border-color:var(--cyan); }
.lesson-card.when { border-color:var(--purple); }
.lesson-card.how { border-color:var(--green); }
.lesson-card.mistakes { border-color:var(--pink); }
.lesson-card.tips { border-color:var(--yellow); }
.lesson-card.drill { border-color:var(--orange); }

.steps {
  display:grid;
  gap:12px;
}

.step {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px;
  border-radius:12px;
  background:#00e5ff0b;
}

.step-number {
  flex:0 0 32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(130deg,var(--blue),var(--pink));
  font-weight:900;
}

.step p { margin:0; }

.back-row {
  text-align:center;
  margin-top:28px;
}

.training-step-heading,
.training-plan-heading {
  text-align:center;
  margin:0 auto 24px;
}

.training-step-heading h3,
.training-plan-heading h3 {
  color:white;
  font-size:clamp(23px,4vw,32px);
  margin-bottom:8px;
}

.training-step-heading p,
.training-plan-heading p,
.training-duration,
.training-safety-note {
  color:var(--muted);
  line-height:1.6;
}

.training-sport-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1100px;
}

.training-frequency-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px;
}

.training-day-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  max-width:850px;
  margin:auto;
}

.training-day-choice {
  min-height:56px;
  color:white;
  background:var(--panel);
  border:1px solid #435575;
  border-radius:14px;
  font-weight:700;
  transition:.2s;
}

.training-day-choice:hover:not(:disabled),
.training-day-choice[aria-pressed="true"] {
  background:#123b4a;
  border-color:var(--cyan);
}

.training-day-choice:disabled {
  cursor:not-allowed;
  opacity:.55;
}

.training-day-status {
  min-height:24px;
  margin:16px 0 0;
  color:var(--muted);
  text-align:center;
}

.training-exercise-list li {
  margin-bottom:14px;
}

.training-exercise-list li strong,
.training-exercise-list li span {
  display:block;
}

.training-exercise-list li strong {
  color:white;
}

.training-exercise-list li span {
  margin:3px 0;
  color:var(--cyan);
  font-size:14px;
}

.training-exercise-list li p {
  color:var(--muted);
  line-height:1.55;
}

.training-session-note {
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px;
}

.training-exercise-link {
  margin-top:5px;
  padding:0;
  color:var(--cyan);
  background:transparent;
  border:0;
  font-size:14px;
  font-weight:700;
}

.training-exercise-link:hover {
  text-decoration:underline;
}

.training-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.training-card {
  background:var(--panel);
  border:1px solid #405675;
  border-radius:20px;
  padding:28px;
}

.training-card h3 {
  color:var(--cyan);
  font-size:22px;
  line-height:1.35;
  margin-bottom:8px;
}

.training-duration {
  margin-bottom:12px;
  font-size:14px;
}

.training-card li {
  color:var(--muted);
  line-height:1.65;
  margin-left:20px;
  margin-bottom:6px;
}

.training-safety-note {
  max-width:900px;
  margin:24px auto 0;
  padding:16px 20px;
  text-align:center;
  background:#121c32;
  border:1px solid #405675;
  border-radius:14px;
}

/* QUIZ */
.quiz-wrap {
  max-width:900px;
  margin:auto;
}

.quiz-question {
  padding:25px;
  background:linear-gradient(140deg,#17213a,#241530);
  border:1px solid #455575;
  border-radius:18px;
  margin-bottom:18px;
  box-shadow:0 8px 25px #0003;
}

.quiz-question h3 {
  line-height:1.6;
  margin-bottom:15px;
}

.quiz-option {
  display:block;
  width:100%;
  text-align:left;
  color:white;
  background:#091426;
  border:1px solid #405472;
  border-radius:11px;
  padding:14px;
  margin:8px 0;
  cursor:pointer;
  transition:.2s;
}

.quiz-option:hover:not(:disabled) {
  border-color:var(--cyan);
  transform:translateX(4px);
  background:#102544;
}

.quiz-option:disabled {
  cursor:default;
}

.quiz-option.correct {
  background:#075d3d;
  border-color:var(--green);
  box-shadow:0 0 12px #36ff9b44;
}

.quiz-option.wrong {
  background:#6a203b;
  border-color:var(--pink);
  box-shadow:0 0 12px #ff28c844;
}

.quiz-feedback {
  color:var(--yellow);
  margin-top:10px;
  min-height:22px;
  line-height:1.5;
}

.quiz-score {
  text-align:center;
  color:var(--yellow);
  font-size:28px;
  font-weight:bold;
  margin:25px;
}

/* EXTRA COLOUR */
.sport-card:nth-child(1) {
  background:linear-gradient(145deg,#092c45,#101a31);
}

.sport-card:nth-child(2) {
  background:linear-gradient(145deg,#0b3929,#151b30);
}

.sport-card:nth-child(3) {
  background:linear-gradient(145deg,#401334,#17152d);
}

.sport-card:nth-child(4) {
  background:linear-gradient(145deg,#493016,#17172c);
}

.feature-card:nth-child(1) {
  border-color:var(--green);
}

.feature-card:nth-child(2) {
  border-color:var(--pink);
}

.feature-card:nth-child(3) {
  border-color:var(--cyan);
}

.choice-card:nth-child(1) {
  background:linear-gradient(145deg,#102e43,#121c32);
}

.choice-card:nth-child(2) {
  background:linear-gradient(145deg,#113a29,#121c32);
}

.choice-card:nth-child(3) {
  background:linear-gradient(145deg,#3c1638,#121c32);
}

.skill-card:nth-child(3n+1) {
  border-left:4px solid var(--cyan);
}

.skill-card:nth-child(3n+2) {
  border-left:4px solid var(--pink);
}

.skill-card:nth-child(3n) {
  border-left:4px solid var(--yellow);
}

.training-card:nth-child(1) {
  border-color:var(--cyan);
}

.training-card:nth-child(2) {
  border-color:var(--green);
}

.training-card:nth-child(3) {
  border-color:var(--pink);
}

.training-card:nth-child(4) {
  border-color:var(--orange);
}

footer {
  background:#03060d;
  border-top:1px solid #293b54;
  padding:40px 20px;
  text-align:center;
}

footer h2 {
  font-size:28px;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--yellow));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

footer p {
  color:#8291a6;
  margin-top:10px;
}

.about-panel {
  max-width:850px;
  margin:auto;
  padding:clamp(24px,5vw,44px);
  background:linear-gradient(145deg,#15213a,#21152f);
  border:1px solid #425a7a;
  border-radius:26px;
  box-shadow:0 20px 60px #0005;
}

.about-panel h3 {
  color:var(--cyan);
  font-size:clamp(24px,4vw,32px);
  margin-bottom:18px;
}

.about-panel p {
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  margin-top:14px;
}

.about-panel .highlight-pink {
  color:var(--pink);
}

.about-panel .highlight-cyan {
  color:var(--cyan);
}

.about-panel .highlight-green {
  color:var(--green);
}

.about-panel .highlight-blue {
  color:var(--blue);
}

.about-panel .highlight-purple {
  color:var(--purple);
}

.about-panel .highlight-yellow {
  color:var(--yellow);
}

.ai-lab-container {
  max-width:1100px;
}

.ai-lab-heading strong {
  display:inline-block;
  padding:10px 20px;
  border:1px solid #36ff9b66;
  border-radius:30px;
  background:#36ff9b12;
  color:var(--green);
}

.ai-lab-card {
  padding:clamp(22px,4vw,34px);
  border:1px solid #425a7a;
  border-radius:24px;
  background:
    radial-gradient(ellipse at 0% 0%,#3478ff22,transparent 45%),
    linear-gradient(145deg,#15213a,#21152f);
  box-shadow:0 16px 40px #0004;
}

.ai-lab-card h3,
.ai-lab-section-heading h3 {
  color:var(--cyan);
  font-size:clamp(23px,3.5vw,30px);
}

.ai-lab-card p {
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin-top:12px;
}

.ai-lab-intro {
  position:relative;
  overflow:hidden;
  border-color:#3478ff88;
  background:
    radial-gradient(ellipse at 100% 0%,#ff28c833,transparent 48%),
    linear-gradient(125deg,#142c50,#21152f);
}

.ai-lab-section {
  margin-top:42px;
}

.ai-lab-section-heading {
  text-align:center;
  margin-bottom:20px;
}

.ai-lab-section-heading p {
  color:var(--muted);
  line-height:1.6;
  margin-top:7px;
}

.ai-sports-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.ai-sport-card {
  min-width:0;
  padding:22px 18px;
  border:1px solid color-mix(in srgb,var(--sport-accent) 70%,transparent);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--sport-accent) 18%,transparent),transparent 55%),
    linear-gradient(145deg,#15213a,#101426);
  box-shadow:0 10px 28px #0003;
  transition:transform .2s,box-shadow .2s;
}

.ai-sport-card:hover {
  transform:translateY(-5px) rotate(-.5deg);
  box-shadow:0 15px 32px color-mix(in srgb,var(--sport-accent) 18%,transparent);
}

.ai-sport-icon {
  font-size:44px;
  line-height:1;
  margin-bottom:14px;
}

.ai-sport-card h4 {
  color:var(--sport-accent);
  font-size:20px;
}

.ai-sport-card p {
  color:var(--muted);
  line-height:1.6;
  margin-top:9px;
}

.ai-athletics { --sport-accent:var(--pink); }
.ai-cricket { --sport-accent:var(--cyan); }
.ai-football { --sport-accent:var(--green); }
.ai-unihockey { --sport-accent:var(--orange); }

.ai-lab-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  list-style:none;
}

.ai-lab-steps li {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  min-height:170px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--step-accent) 75%,transparent);
  border-radius:20px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--step-accent) 13%,#121c32),#101426);
  color:var(--muted);
  line-height:1.5;
  transition:transform .2s;
}

.ai-lab-steps li:hover {
  transform:translateY(-4px);
}

.ai-step-record { --step-accent:var(--cyan); }
.ai-step-discover { --step-accent:var(--pink); }
.ai-step-practise { --step-accent:var(--yellow); }
.ai-step-improve { --step-accent:var(--green); }

.ai-step-icon {
  font-size:34px;
  margin-bottom:12px;
}

.ai-lab-steps strong {
  display:block;
  color:var(--step-accent,var(--blue));
  font-weight:900;
  font-size:18px;
  margin-bottom:4px;
}

.ai-lab-journey {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:20px;
  margin-top:42px;
  border-color:#9b5cff88;
  background:
    radial-gradient(ellipse at 0% 100%,#9b5cff25,transparent 50%),
    linear-gradient(145deg,#15213a,#21152f);
}

.ai-journey-icon {
  font-size:46px;
  line-height:1;
}

.ai-lab-journey .ai-lab-signoff {
  color:var(--yellow);
  font-style:italic;
  font-weight:bold;
}

.pose-analyzer-card {
  border-color:#00e5ff66;
  background:
    radial-gradient(ellipse at 100% 0%,#00e5ff18,transparent 45%),
    linear-gradient(145deg,#15213a,#101426);
}

.pose-upload-label {
  display:block;
  margin-bottom:10px;
  color:var(--text);
  font-size:18px;
  font-weight:900;
}

.pose-video-input {
  display:block;
  width:100%;
  padding:12px;
  border:1px solid #56708e;
  border-radius:12px;
  background:#080d1c99;
  color:var(--text);
}

.pose-video-input::file-selector-button {
  margin-right:12px;
  padding:9px 13px;
  border:0;
  border-radius:8px;
  background:var(--cyan);
  color:#07111b;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.pose-privacy-note,
.pose-measurement-note {
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.pose-preview {
  margin-top:22px;
}

.pose-video-wrap {
  position:relative;
  overflow:hidden;
  width:100%;
  border:1px solid #425a7a;
  border-radius:16px;
  background:#03060d;
}

.pose-video-wrap video {
  display:block;
  width:100%;
  height:auto;
}

.pose-video-wrap canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.pose-controls {
  margin-top:12px;
  text-align:center;
}

.pose-controls .btn:disabled {
  cursor:wait;
  opacity:.65;
  transform:none;
}

.pose-status {
  min-height:24px;
  margin-top:16px;
  color:var(--cyan);
  line-height:1.5;
}

.pose-measurements {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.pose-metric {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:16px;
  border:1px solid #425a7a;
  border-radius:14px;
  background:#080d1c99;
}

.pose-metric span {
  color:var(--muted);
  font-size:14px;
}

.pose-metric strong {
  color:var(--green);
  font-size:clamp(22px,4vw,30px);
}

.pose-metric small {
  color:#8fa2bd;
  line-height:1.4;
}

@media(max-width:900px) {
  .sports-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .skills-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .choice-grid {
    grid-template-columns:1fr;
  }

  .training-sport-grid,
  .training-frequency-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .training-day-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .training-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .feature-grid {
    grid-template-columns:1fr;
  }

  .ai-sports-grid,
  .ai-lab-steps {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pose-measurements {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  .ai-sports-grid,
  .ai-lab-steps {
    grid-template-columns:1fr;
  }

  .ai-lab-steps li {
    min-height:0;
  }

  .ai-lab-journey {
    grid-template-columns:1fr;
    gap:12px;
  }

  .pose-measurements {
    grid-template-columns:1fr;
  }
}

@media(max-width:650px) {
  .nav-links {
    display:none;
    position:absolute;
    top:70px;
    left:12px;
    right:12px;
    background:#080e1d;
    padding:12px;
    border:1px solid #344966;
    border-radius:15px;
  }

  .nav-links.open {
    display:flex;
    flex-direction:column;
  }

  .menu-button {
    display:block;
  }

  .sports-grid,
  .skills-grid,
  .lesson-grid,
  .training-grid,
  .training-sport-grid,
  .training-frequency-grid {
    grid-template-columns:1fr;
  }

  .hero {
    min-height:600px;
    padding:60px 18px;
  }

  section {
    padding:60px 15px;
  }
}