/* Base Reset and Typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: #1b1b1b;
  background: #fff3e6;
}
:root {
  --cream: #fff3e6;
  --purple: #9e3b86;
  --pink: #ffb3b3;
  --peach: #ffd0a3;
  --maroon: #5a2b2b;
  --bg: var(--cream);
  --text: #1b1b1b;
  --muted: #664f4f;
  --primary: var(--purple);
  --accent: var(--maroon);
  --elev: rgba(0,0,0,.06);
}

.no-js .reveal-on-scroll { opacity: 1; transform: none; }

.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; background: #000; color:#fff; padding:.5rem .75rem; border-radius:.25rem; z-index: 10000; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Layout */
.container { width: min(1200px, 92vw); margin: 0 auto; }

/* Header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; opacity: 1; transition: opacity .3s ease, transform .3s ease; }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; }
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; }
.logo { position: fixed; top: 28px; left: 5vw; z-index: 61; }
.logo img { display:block; width: 170px; height: auto; }

/* Navigation */
.site-nav .burger { position: fixed; top: 28px; right: 28px; z-index: 60; background: transparent; border: 0; width: 42px; height: 36px; display: grid; place-content: center; gap:6px; cursor: pointer; }
.site-nav .burger span { display:block; width: 22px; height: 3px; background: var(--maroon); border-radius: 3px; transition: transform .2s ease, opacity .2s ease; }
.site-nav .menu { list-style: none; display: none; gap: 1rem; margin: 0; padding: 0; }
.site-nav .menu a { padding: .5rem .75rem; border-radius: .5rem; }
.site-nav .menu a.enrol { background: var(--primary); color: #fff; }
.site-nav .menu a.enrol { align-self: center; width: max-content; }

/* Always use burger menu at all sizes */
.site-nav .menu { position: fixed; right: 1rem; top: 64px; background: var(--bg); border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); box-shadow: 0 10px 30px var(--elev); border-radius: .75rem; padding: .75rem .5rem; flex-direction: column; min-width: 220px; }
.site-nav .menu.open { display: flex; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap:.5rem; padding: .85rem 1.1rem; border-radius: .75rem; font-weight: 700; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn.solid.primary { background: var(--primary); color:#fff; }
.btn.solid.accent { background: var(--maroon); color:#fff; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px var(--elev); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Slide Navigation UI */
.slide-nav { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; place-items: center; gap:1rem; }
.slide-nav .arrow { position: static; width: 24px; height: 24px; background: transparent; border: none; color: var(--maroon); cursor: pointer; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.slide-nav .dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; background: transparent; border: 0; justify-items: center; }
.slide-nav .dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #feead3; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.03) inset; }
.slide-nav .dots button[aria-selected="true"] { background: var(--maroon); box-shadow: none; }

/* Slides Base */
.slides { scroll-snap-type: y mandatory; height: 100vh; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.slide { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 24px 0 64px; scroll-snap-align: start; }
.slide .container { z-index: 1; }
.slide[data-hidden="true"] { display: none; }

/* Hero */
.hero { color: var(--maroon); }
.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; }
.hero .container { width: 100%; }
.hero .hero-inner { max-width: 40%; margin-left: 5vw; }
.slide .section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.headline { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 700; margin: 0 0 1rem; }
.subhead { font-size: clamp(1rem, 2.3vw, 1.15rem); max-width: 60ch; opacity: 1; background: #feead3; border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); color: var(--maroon); padding: .9rem 1rem; border-radius: .75rem; box-shadow: 0 6px 18px var(--elev); }
.hero .cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* About */
.about { background: linear-gradient(180deg, var(--cream), #fff); color: var(--text); }
.about .about-inner { margin-left: auto; width: 50%; text-align: left; color: var(--maroon); }
.about .about-inner .headline { color: var(--maroon); }
.about .about-inner p { color: var(--maroon); }
.about .about-inner .stat .label { color: var(--maroon); }
.about .about-inner .subhead { margin-bottom: 1.1rem; }
.about .about-inner .stat { margin: 1rem 0 1.25rem; }
.about .about-inner .stat .count { font-size: clamp(2.2rem, 4.5vw, 3rem); color: var(--primary); }
.about .about-inner .stat .label { font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-weight: 700; }
.about .about-inner .cta-group { gap: .9rem; }
.stat { display: flex; align-items: baseline; gap: .35rem; margin-top: 1rem; font-weight:700; }
.stat .count { font-size: 2rem; color: var(--primary); }
.stat .label { color: var(--muted); font-weight: 600; }
.stat .label strong { color: var(--primary); font-weight: 700; }

@keyframes stat-pop {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.stat.reveal-on-scroll.visible { animation: stat-pop .7s ease-out both; }

/* Course */
.course { background: color-mix(in oklab, var(--pink) 35%, white); }
.course .course-inner { margin-left: auto; width: 40%; color: var(--maroon); }
.course .course-inner .cta-row { margin-top: 1rem; }
.course .course-inner .headline { color: var(--maroon); }
.course .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.card { background: #fff; border: 1px solid #f0e6e6; border-radius: .9rem; padding: 1rem; box-shadow: 0 10px 24px var(--elev); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; will-change: transform; }
.card:hover, .card:focus-within { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 46px var(--elev); border-color: color-mix(in oklab, var(--primary) 28%, #f0e6e6); background: linear-gradient(180deg, #ffffff, #fff8f9); }
.card:active { transform: translateY(-2px) scale(1.01); }
.card .icon { color: var(--primary); margin-bottom: .5rem; }
.card h3 { margin: .25rem 0 .25rem; font-size: 1.05rem; }
.card p { margin: 0; color: #4b3d3d; }
@media (max-width: 900px) { .course .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .course .grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-within { transform: none; }
}

/* Launch Offer */
.offer { background: linear-gradient(135deg, var(--peach), var(--pink)); color: var(--maroon); }
.offer .offer-inner { margin-left: auto; width: 40%; background: rgba(255, 243, 230, 0.98); padding: 1.5rem 1.75rem; border-radius: 1.1rem; box-shadow: 0 16px 40px var(--elev); }
.offer .headline { color: var(--maroon); }
.offer .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--primary); margin: 0 0 .4rem; }
.offer .subhead { margin-top: .5rem; margin-bottom: 1.2rem; }
.offer .offer-countdown { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.offer .time-box { background: #ffffff; border-radius: .9rem; padding: .65rem .9rem; min-width: 70px; text-align: center; box-shadow: 0 10px 24px var(--elev); }
.offer .time-value { display: block; font-size: 1.45rem; font-weight: 700; color: var(--primary); }
.offer .time-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.offer .offer-note { font-size: .9rem; color: var(--muted); margin: 0 0 1rem; }
.offer .cta-group { gap: .9rem; }
@media (max-width: 860px) { .offer .offer-inner { width: 100%; margin: 0 auto; } }

/* Affiliate */
.affiliate { background: #fff; }
.affiliate .affiliate-inner { margin-left: auto; width: 45%; background: #fffdf8; padding: 1.5rem 1.75rem; border-radius: 1.1rem; box-shadow: 0 16px 40px var(--elev); color: var(--maroon); }
.affiliate .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--primary); margin: 0 0 .4rem; }
.affiliate .headline { color: var(--maroon); }
.affiliate .subhead { margin-top: .5rem; margin-bottom: 1rem; }
.affiliate .affiliate-points { margin: 0 0 1.1rem; padding-left: 1.1rem; color: #4b3d3d; }
.affiliate .affiliate-points li { margin-bottom: .35rem; }
.affiliate .cta-group { gap: .75rem; }
@media (max-width: 860px) { .affiliate .affiliate-inner { width: 100%; margin: 0 auto; } }

/* Community */
.community { background: color-mix(in oklab, var(--peach) 35%, white); }
.community .community-inner { width: 40%; color: #fff3e2; }
.community .headline { color: #fff3e2; }
.community .subhead { color: #622c2c; background: #fff3e2; }
.community .subtext { margin-top: .75rem; color: #fff3e2; }
.community .community-cta { background: #fff3e2; color: #622c2c; }

/* Testimonials */
.testimonials { background: #fff; }
.testimonial-slider { position: relative; overflow: hidden; }
.testimonial-slider .slides-wrap { display: flex; transition: transform .5s ease; }
.tcard { flex: 0 0 100%; padding: 1rem; }
.tcard blockquote { font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 0 0 .5rem; color: var(--maroon); }
.tcard figcaption { color: var(--muted); }
.ts-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
.ts-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--text) 20%, transparent); }
.ts-dots button.active { background: var(--primary); }

/* FAQs */
.faqs .faqs-inner { margin-left: auto; width: 50%; color: var(--maroon); }
.faqs .headline { color: var(--maroon); }
.faqs .accordion { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.faqs details { background: #fff; border: 1px solid #f0e6e6; border-radius: .75rem; padding: .75rem 1rem; box-shadow: 0 10px 24px var(--elev); }
.faqs summary { cursor: pointer; font-weight: 700; color: var(--maroon); }
.faqs details p { margin: .5rem 0 0; color: #4b3d3d; }
@media (max-width: 860px) { .faqs .faqs-inner { width: 100%; } }
.faqs { background: color-mix(in oklab, var(--cream) 60%, white); }
.accordion details { border: 1px solid #f0e6e6; background: #fff; border-radius: .75rem; padding: .75rem 1rem; margin: .5rem 0; }
.accordion summary { cursor: pointer; font-weight: 700; }

/* CTA */
.cta { color: var(--maroon); }
.cta .cta-inner { margin-left: auto; width: 40%; display: grid; place-items: center; text-align: center; }
.cta .headline { color: var(--maroon); }
.cta .cta-box { background: #fff3e6; border: 1px solid #f0e6e6; border-radius: 1rem; padding: 1.4rem 1.75rem 1.6rem; box-shadow: 0 12px 32px var(--elev); }
.cta .cta-box .headline { margin-bottom: 1rem; }
.cta .cta-group { justify-content: center; margin-top: .9rem; gap: .75rem; }
.cta .legal { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; color: #fff; opacity: .95; }

/* Vertically center CTA box within the slide while keeping it on the right */
.cta .container { display: flex; align-items: center; justify-content: flex-end; height: 100%; }

/* On smaller screens, center the CTA card so it doesn't get cut off */
@media (max-width: 900px) {
  .cta .container { justify-content: center; }
  .cta .cta-inner { margin: 0 auto; width: min(520px, 92vw); }
}

/* Footer */
.site-footer { background: #0f0f0f; color: #e9e9e9; padding: 1.25rem 0; }
.footer-inner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; }
.footer-links a { color: #e9e9e9; margin: 0 .5rem; }
.sicon { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; background: #1b1b1b; }

@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; text-align: center; } }

/* Animations */
.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.visible { opacity: 1; transform: none; }

/* Sticky header on scroll effect */
/* keep header present; logo remains sticky */
.scrolled .site-header { opacity: 1; transform: none; }

/* Theme toggle */
/* theme toggle removed */

/* Hero overlay spacing on smaller screens */
@media (max-width: 640px) {
  .headline { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* Mobile layout refinements */
@media (max-width: 640px) {
  .slide-nav { display: none; }
  .slide { padding: 120px 0 100px; }
  .container { width: min(1100px, 92vw); }
  .hero .hero-inner { max-width: 100%; margin: 0 auto; padding: 0 1rem; }
  .about .about-inner,
  .course .course-inner,
  .community .community-inner,
  .faqs .faqs-inner,
  .cta .cta-inner { width: 100%; margin: 0 auto; padding: 0 1rem; text-align: center; }
  /* Let the About content breathe and feel centered on small screens */
  .about .about-inner { max-width: 520px; }
  .about .about-inner .subhead { text-align: left; }
  .about .about-inner .stat { justify-content: flex-start; }
  .course .grid { grid-template-columns: 1fr; }
  .cta .legal { bottom: 24px; }
  .subhead { max-width: 100%; }
  .cta .cta-group,
  .about .about-inner .cta-group,
  .course .cta-row { justify-content: center; }
  /* Stack CTA buttons with spacing on the final slide */
  .cta .cta-group { flex-direction: column; align-items: stretch; gap: .75rem; }
  .logo img { width: 120px; }
}