: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-grid {
  display:grid;
  grid-template-columns:repeat(2,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:25px;
  margin-bottom:14px;
}

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

/* 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;
}

.footer-links {
  margin-top:18px;
}

.footer-links a {
  color:var(--cyan);
  font-weight:bold;
  text-decoration:none;
}

.footer-links a:hover {
  text-decoration:underline;
}

.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);
}

@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;
  }

  .feature-grid {
    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 {
    grid-template-columns:1fr;
  }

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

  section {
    padding:60px 15px;
  }
}