/* ==========================================================
   JOSEPH IMPORT CONSULTING - MAIN STYLESHEET
   ----------------------------------------------------------
   Table of contents:
   1.  Colour variables & theme
   2.  Reset & base
   3.  Reusable helpers (buttons, cards, text)
   4.  Navigation
   5.  Hero
   6.  Course section
   7.  Portfolio
   8.  Testimonials carousel
   9.  Services
   10. Results / counters
   11. Process timeline
   12. FAQ
   13. Final CTA + form
   14. Footer + WhatsApp
   15. Animations
   16. Responsive (tablet + desktop)
   ========================================================== */


/* ==========================================================
   1. COLOUR VARIABLES  -- change colours here
   ========================================================== */
:root {
  --navy-deep:  #060912;
  --navy:       #0a1024;
  --navy-light: #121a35;
  --gold:       #d4af37;
  --gold-light: #f2d580;
  --gold-pale:  #f7e2a0;
  --white:      #ffffff;
  --muted:      rgba(255, 255, 255, 0.75);
  --muted-dim:  rgba(255, 255, 255, 0.5);
  --line:       rgba(255, 255, 255, 0.1);

  --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --radius:    16px;
  --radius-lg: 32px;
}


/* ==========================================================
   2. RESET & BASE
   ========================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* stops the fixed nav covering anchors */
  -webkit-text-size-adjust: 100%; /* stops iPhone inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;            /* never scroll sideways on phones */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* no grey flash when tapping */
}

/* Buttons and links should feel instant to tap on touch screens */
a, button { touch-action: manipulation; }

img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }

::selection { background: var(--gold); color: var(--navy-deep); }


/* ==========================================================
   3. REUSABLE HELPERS
   ========================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative; /* keeps content above decorative blobs */
  z-index: 1;
}
.container--narrow { max-width: 860px; }

.section { padding: 80px 0; position: relative; overflow: hidden; }
.section--light    { background: var(--navy-light); }
.section--lighter  { background: var(--navy); }
.section--gradient { background: linear-gradient(to bottom, var(--navy-deep), var(--navy)); }

.section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section__head h2 { font-size: 30px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
h2 { font-size: 30px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 12px;
}

.gold  { color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Shimmering gold gradient text */
.gold-gradient {
  background: linear-gradient(90deg, var(--gold-pale) 0%, var(--gold-light) 25%,
              #e0b940 50%, var(--gold-light) 75%, var(--gold-pale) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  text-align: center;
}
.btn--gold {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn--full { width: 100%; }
.btn:hover  { transform: scale(1.05); }
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }
.btn:active { transform: scale(0.95); } /* tap feedback on phones */

/* --- Cards --- */
.card {
  background: var(--navy-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.08);
}
.card--pad    { padding: 28px; }
.card--center { text-align: center; }
.card__body   { padding: 22px; }
.card h3      { margin-bottom: 6px; }

.icon-badge {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.icon-badge--round { border-radius: 50%; margin: 0 auto 16px; }

/* --- Grids --- */
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

/* --- Check lists --- */
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.check { color: var(--gold); font-weight: 700; }

/* --- Placeholder boxes --- */
.placeholder-label {
  position: absolute;
  bottom: 14px;
  font-size: 11px;
  color: var(--muted-dim);
  background: rgba(6, 9, 18, 0.7);
  padding: 4px 12px;
  border-radius: 999px;
}
.play-icon { width: 60px; height: 60px; color: rgba(212, 175, 55, 0.7); }

.video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 40px;
}

.swipe-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin: 12px 0;
}


/* ==========================================================
   4. NAVIGATION
   ========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.3s ease, padding 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(6, 9, 18, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__logo { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.nav__links { display: none; }
.nav__cta   { display: none; padding: 10px 20px; font-size: 14px; }

/* Hamburger button */
.nav__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav__toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown */
.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
  padding: 12px 24px 20px;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.nav__mobile a:active { color: var(--gold); }
.nav__mobile .btn { margin-top: 14px; border-bottom: none; color: var(--navy-deep); }


/* ==========================================================
   5. HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100svh;  /* correct height on mobile Safari/Chrome (ignores address bar) */
  display: flex;
  align-items: center;
  /* Top padding only needs to clear the fixed nav bar (72px) plus a
     little breathing room - any more just wastes the first screen. */
  padding: 92px 0 48px;
  background: linear-gradient(to bottom, var(--navy-deep), var(--navy) 60%, var(--navy-light));
  overflow: hidden;
}

/* ---- Background video ----
   Two layers on purpose:
   .hero__bg       = the wrapper that slides for the parallax
   .hero__bg-video = the footage itself, doing the slow zoom
   Keeping them separate stops the two movements fighting
   over the same transform property. */
.hero__bg {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 120%;        /* extra height so parallax never reveals a gap */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform;   /* hands this layer to the GPU */
}

.hero__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops to fill, never squashes */
  display: block;

  /* Slow cinematic drift-and-zoom (Ken Burns) */
  animation: kenBurns 32s ease-in-out infinite alternate;
  transform-origin: 55% 45%;
  will-change: transform;
}

/* Soft light slowly sweeping across, adds depth over the footage */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 30% 35%,
              rgba(212, 175, 55, 0.16), transparent 70%);
  animation: lightDrift 20s ease-in-out infinite alternate;
}

/* Dark tint so white text stays readable over the footage.
   Heavier at the top and bottom, lighter in the middle. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6, 9, 18, 0.92) 0%,
      rgba(6, 9, 18, 0.72) 30%,
      rgba(6, 9, 18, 0.75) 70%,
      rgba(6, 9, 18, 0.96) 100%),
    linear-gradient(90deg,
      rgba(10, 16, 36, 0.55),
      rgba(10, 16, 36, 0.2) 50%,
      rgba(10, 16, 36, 0.55));
}

/* Dotted background pattern */
.hero__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
  background-image: radial-gradient(rgba(212, 175, 55, 0.35) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Shipping route SVG - hidden on small phones to reduce clutter */
.hero__route { display: none; }
.hero__route svg { width: 100%; height: 100%; opacity: 0.7; }

/* Floating icons - hidden on small phones */
.hero__float { display: none; }
.hero__float svg { width: 32px; height: 32px; }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title { font-size: 36px; font-weight: 700; }
.hero__subtitle {
  margin-top: 18px;
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
}

/* Promo video.
   The footage is shot vertically (portrait, like a phone video),
   so the frame is portrait too - that way nothing is cropped or
   squashed and it looks intentional. */
.hero__video {
  position: relative;
  width: 100%;
  max-width: 236px;
  aspect-ratio: 9 / 16;
  margin-top: 26px;
}
.hero__video-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), transparent 60%);
  filter: blur(40px);
  animation: pulseGlow 3.5s ease-in-out infinite;
}
.hero__video-box {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: linear-gradient(to bottom, var(--navy-light), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* The video fills the frame without being stretched */
.hero__video-box iframe,
.hero__video-box video {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  display: block;
  background: var(--navy-deep);
}

/* Photo + short bio that now leads the Hero instead of the video
   (the video moved to its own section further down - id="video").
   Kept as its own compact, always-vertical block - narrower and
   simpler than the full .about-me layout so it fits the Hero's
   single centered column at every screen size. */
.hero__about {
  width: 100%;
  max-width: 320px;
  margin-top: 26px;
  text-align: center;
}
.hero__about-photo {
  display: block;
  width: 260px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 3px solid var(--gold);
  margin: 0 auto;
}
.hero__about-name { margin-top: 16px; font-size: 22px; }
.hero__about-title { font-weight: 600; margin-top: 2px; font-size: 14px; }
.hero__about-bio { margin-top: 12px; font-size: 14px; line-height: 1.65; }
.hero__about-socials { justify-content: center; margin: 16px 0 0; }

/* Promo video section (further down the page) - just the video
   the Hero used to show, plus a Buy button under it. */
.video-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Single "Buy The Course" button under the hero video. Same
   max-width as the video above it so it doesn't stretch full-bleed
   on wider phones. */
.hero__buy {
  width: 100%;
  max-width: 236px;
  margin: 18px auto 0;
}

/* Trust badges */
.hero__trust {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}
.hero__trust li { display: flex; align-items: center; gap: 10px; }

.hero__course-heading { margin-top: 26px; }
.hero__course-heading h2 { font-size: 26px; }


/* ==========================================================
   6. COURSE SECTION  (liquid glass cards)
   ========================================================== */

/* Dark base the colour blobs sit on */
.section--glass {
  background: radial-gradient(120% 120% at 50% 0%, #14204a 0%, var(--navy) 45%, var(--navy-deep) 100%);
  position: relative;
  overflow: hidden;
}

/* ---- Colour blobs drifting behind the glass ----
   These give the frosted cards something colourful to pick up. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
.blob--gold {
  width: 460px; height: 460px;
  background: rgba(212, 175, 55, 0.45);
  top: -120px; left: -80px;
  animation: blobDrift1 18s ease-in-out infinite;
}
.blob--blue {
  width: 420px; height: 420px;
  background: rgba(64, 130, 255, 0.35);
  bottom: -140px; right: -60px;
  animation: blobDrift2 22s ease-in-out infinite;
}
.blob--violet {
  width: 380px; height: 380px;
  background: rgba(150, 90, 255, 0.28);
  top: 40%; left: 45%;
  animation: blobDrift3 26s ease-in-out infinite;
}

/* ---- The liquid glass card itself ---- */
.glass-card {
  position: relative;
  padding: 34px 28px;
  border-radius: 28px;
  overflow: hidden;

  /* the frost */
  background: linear-gradient(150deg,
              rgba(255, 255, 255, 0.12),
              rgba(255, 255, 255, 0.04) 55%,
              rgba(255, 255, 255, 0.07));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.18);

  /* inner top highlight + soft drop shadow = the "liquid" look */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    0 26px 60px rgba(0, 0, 0, 0.45);

  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* glossy sheen across the top */
.glass-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42%;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.18),
              rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* faint gold rim light along the bottom edge */
.glass-card::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(212, 175, 55, 0.65),
              transparent);
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 34px 70px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.12);
}

/* keep the text above the sheen layer */
.glass-card > * { position: relative; z-index: 1; }

.course__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.course__subhead {
  color: var(--gold);
  font-size: 19px;
  margin-bottom: 18px;
}
.course__price-block {
  margin-top: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.course__price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
}
.pay-methods {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--muted-dim);
  flex-wrap: wrap;
  justify-content: center;
}
.pay-methods--center { margin-top: 26px; }

/* ---- Pricing cards (Part One / Part Two / Both) ---- */
/* The course section ends on buttons, so it does not need the
   usual big breathing room underneath. */
#course { padding-bottom: 44px; }

.pricing-head {
  margin-top: 30px;
  text-align: center;
}
/* When it is the first thing in the section, the section's own
   top padding is enough - no extra margin needed. */
.pricing-head:first-child { margin-top: 0; }
.pricing-head h3 { font-size: 24px; margin-bottom: 8px; }

/* The "two parts" explanation under the heading */
.pricing-head__explain {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
}
.pricing-head__explain strong { color: var(--gold); font-weight: 600; }

.pricing { margin-top: 24px; }

/* Enroll button + payment methods under the cards */
.enroll-block {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.enroll-block .btn { width: 100%; max-width: 420px; }

.pricing {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35),
              0 20px 46px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.price-card:hover { transform: translateY(-5px); }

/* The "Both Parts" card stands out */
.price-card--featured {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.07);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
              0 24px 56px rgba(0, 0, 0, 0.5),
              0 0 40px rgba(212, 175, 55, 0.12);
}

.price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.price-card__tagline {
  font-size: 13px;
  color: var(--muted-dim);
  margin-top: 3px;
}
.price-card__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--gold);
  margin: 14px 0 18px;
}
.price-card__features {
  margin-bottom: 24px;
  flex-grow: 1;   /* pushes every button down to the same line */
}
.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---- Package chooser inside the checkout ---- */
.pack-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pack { cursor: pointer; }
.pack input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pack__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--navy-deep);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pack__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pack__name  { font-size: 15px; font-weight: 600; color: var(--muted); }
.pack__price { font-size: 15px; font-weight: 700; color: var(--white); }
.pack__price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pack__price-was {
  font-size: 13px;
  color: var(--muted-dim);
  text-decoration: line-through;
}
.pack__discount-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: -4px;
}
.pack__tagline {
  font-size: 12px;
  color: var(--muted-dim);
  margin-top: -6px;
}
.pack__timer {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 2px;
}
.pack__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pack__features li:last-child { margin-bottom: 0; }

.pack input:checked + .pack__box {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
}
.pack input:checked + .pack__box .pack__name,
.pack input:checked + .pack__box .pack__price { color: var(--gold); }

.pack input:focus-visible + .pack__box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Small escape hatch under the package list - its own quiet card,
   not styled to look like a 4th package option. */
.pack-contact-card {
  text-align: center;
  padding: 16px;
  margin: 14px 0 4px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
}
.pack-contact-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.pack-contact-card__desc {
  font-size: 12px;
  color: var(--muted-dim);
  line-height: 1.55;
  margin: 6px 0 12px;
}
.course__cta {
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.course__price-block .btn,
.course__cta .btn { width: 100%; }


/* ==========================================================
   7. PORTFOLIO
   ========================================================== */
/* On phones this is a swipeable horizontal row.
   On tablet/desktop it becomes a normal grid (see responsive section). */
.portfolio__grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.portfolio__grid::-webkit-scrollbar { display: none; }

.portfolio__item {
  flex: 0 0 80%;
  scroll-snap-align: center;
}
/* Phones are not all the same width - a card sized for a small
   phone leaves a huge gap on a big one, and a card sized for a
   big phone gets clipped on a small one. Tune the peek per tier. */
@media (max-width: 359px) {
  /* Small phones (iPhone SE, older/cheaper Android): almost full
     width so the card itself stays readable. */
  .portfolio__item, .testimonial { flex-basis: 90%; }
}
@media (min-width: 400px) and (max-width: 767px) {
  /* Bigger phones (Pro Max / phablet class): show more of the
     next card so it still reads as a slider, not a static page. */
  .portfolio__item, .testimonial { flex-basis: 72%; }
}

/* A slight bar under the slider showing how far through the
   swipe you are. Phone-only - the grid stops being a slider
   once tablet/desktop switches it to a static layout below. */
.portfolio__progress {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.portfolio__progress-bar {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(0);
  transition: transform 0.1s linear;
}

/* Holds either a photo or a video for each import.
   9:16 (TikTok/Reels ratio) because the real import clips are
   shot vertically on a phone - a 4:3 box would crop most of them out. */
.portfolio__media {
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, var(--navy), var(--navy-light), var(--navy-deep));
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portfolio__media img,
.portfolio__media video,
.portfolio__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
}
.box-icon { font-size: 46px; opacity: 0.5; transition: transform 0.5s ease; }
.portfolio__item:hover .box-icon { transform: scale(1.12); }


/* ==========================================================
   8. TESTIMONIALS (client video cards)
   ----------------------------------------------------------
   Same idea as Portfolio: a swipeable row on phones (any size -
   see the shared breakpoints below), a static grid on
   tablet/desktop where there's no swiping to begin with.
   ========================================================== */
.testimonials__grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.testimonials__grid::-webkit-scrollbar { display: none; }

.testimonial {
  flex: 0 0 80%;
  scroll-snap-align: center;
}
.testimonial .card__body { text-align: center; }

.stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 2px; }
.quote { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.author {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold);
}

/* Video / photo box used by testimonials.
   9:16 (TikTok/Reels ratio) to match the real vertical client
   clips - same reasoning as .portfolio__media above. */
.media-box {
  position: relative;
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, var(--navy), var(--navy-light), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Whatever you drop in fills the box neatly */
.media-box img,
.media-box video,
.media-box iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
}


/* ==========================================================
   8b. CTA STRIP (repeats after Portfolio and after Testimonials)
   ========================================================== */
.cta-strip-section { padding: 48px 0; }
.cta-strip {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.cta-strip h3 { font-size: 26px; }
.cta-strip p { margin-top: 8px; }
.cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
@media (min-width: 480px) {
  .cta-strip__actions { flex-direction: row; justify-content: center; }
  .cta-strip__actions .btn { width: auto; }
}


/* ==========================================================
   8c. ABOUT ME
   ========================================================== */
.about-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
/* Portrait rectangle, not a circle - a circle crop would cut off
   whatever's near the edges of the photo. aspect-ratio matches
   the actual photo (images/joseph-portrait.jpg is 3:4) so the
   whole picture shows, nothing gets cropped. */
.about-me__photo {
  width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 3px solid var(--gold);
}
.about-me__title { font-weight: 600; margin-top: 4px; }
.about-me__bio { margin-top: 14px; line-height: 1.7; }
.about-me__socials { justify-content: center; margin: 20px 0; }

@media (min-width: 640px) {
  .about-me {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 40px;
  }
  .about-me__photo { width: 240px; flex-shrink: 0; }
  .about-me__socials { justify-content: flex-start; }
}


/* ==========================================================
   9. SERVICES
   ========================================================== */
.glow-orb {
  position: absolute;
  top: 0; left: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  filter: blur(70px);
  animation: pulseGlow 7s ease-in-out infinite;
  pointer-events: none;
}


/* ==========================================================
   10. RESULTS / COUNTERS
   ========================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
}


/* ==========================================================
   11. PROCESS TIMELINE
   ========================================================== */
.timeline { position: relative; padding-left: 8px; }

.timeline__line {
  position: absolute;
  left: 24px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.timeline__progress {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;                 /* grows as you scroll - see reveal.js */
  background: linear-gradient(to bottom, var(--gold), rgba(212, 175, 55, 0.1));
  transition: height 0.1s linear;
}

.timeline__step {
  position: relative;
  display: flex;
  gap: 22px;
  margin-bottom: 34px;
  align-items: flex-start;
}
.timeline__num {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--navy-deep);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  z-index: 2;
}
.timeline__text h3 { margin-bottom: 4px; }


/* ==========================================================
   12. FAQ
   ========================================================== */
.faq__item {
  background: var(--navy-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq__question {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  padding: 20px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__icon { color: var(--gold); transition: transform 0.3s ease; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq__answer p {
  padding: 0 22px 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.faq__item.is-open .faq__answer { max-height: 300px; }


/* ==========================================================
   13. FINAL CTA + FORM
   ========================================================== */
.final-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep) 60%, #000);
  position: relative;
}
.final-cta__glow {
  position: absolute;
  top: 0; left: 50%;
  width: 460px; height: 460px;
  transform: translate(-50%, -35%);
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  filter: blur(80px);
  animation: pulseGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Shipping containers drifting across the background */
.containers-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.18;
  pointer-events: none;
}
.container-icon {
  position: absolute;
  font-size: 30px;
  animation: driftAcross linear infinite;
}
.container-icon:nth-child(1) { top: 10%; animation-duration: 14s; animation-delay: 0s; }
.container-icon:nth-child(2) { top: 28%; animation-duration: 18s; animation-delay: 2s; }
.container-icon:nth-child(3) { top: 48%; animation-duration: 16s; animation-delay: 5s; }
.container-icon:nth-child(4) { top: 66%; animation-duration: 20s; animation-delay: 3s; }
.container-icon:nth-child(5) { top: 84%; animation-duration: 15s; animation-delay: 7s; }

.final-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 30px auto 0;
}

.form-wrap {
  margin-top: 56px;
  background: var(--navy-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 24px;
}

/* The "why does this cost money" note above the paid inquiry form */
.inquiry-box__why {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  padding: 14px 16px;
  margin-bottom: 24px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.06);
}
.inquiry-box__why strong { color: var(--gold); }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--navy-light);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;  /* 16px minimum - stops iPhone zooming in when tapped */
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;  /* removes iOS default inner shadow */
  appearance: none;
}
.field input:focus,
.field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; }

.form-status { margin-top: 14px; text-align: center; font-size: 14px; }
.form-status.is-success { color: var(--gold); }
.form-status.is-error   { color: #f87171; }


/* ==========================================================
   13b. PAYMENT POP-UP (Paystack checkout)
   ========================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;              /* above everything, including the nav */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;          /* scrolls on short screens */
  -webkit-overflow-scrolling: touch;
  background: var(--navy-light);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 22px;
  padding: 32px 26px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: modalPop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;     /* comfortable tap target */
  border: none;
  background: none;
  color: var(--muted-dim);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.modal__close:hover { color: var(--gold); background: rgba(255, 255, 255, 0.06); }

.modal__title { font-size: 21px; padding-right: 34px; }
.modal__sub   { margin: 6px 0 22px; }

.field__hint {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted-dim);
}

.modal__secure {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-dim);
}

/* ---- "Where should we send your course?" chooser ---- */
.choice-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.choice { cursor: pointer; }

/* Hide the real radio button but keep it usable by keyboard */
.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice__box {
  display: block;
  text-align: center;
  padding: 12px 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--navy-deep);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.choice input:checked + .choice__box {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold);
}

/* visible outline when tabbing with a keyboard */
.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Success screen after paying ---- */
.success-tick {
  width: 62px;
  height: 62px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.access-box {
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.06);
  text-align: center;
}
.access-box__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================
   14. FOOTER + WHATSAPP
   ========================================================== */
.footer {
  background: #000;
  border-top: 1px solid var(--line);
  padding: 54px 0 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
.footer__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.footer__title { font-weight: 600; margin-bottom: 12px; color: rgba(255,255,255,0.8); }
.footer__links li { margin-bottom: 9px; font-size: 14px; color: var(--muted-dim); }
.footer__links a:hover { color: var(--gold); }

.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--muted-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.socials a:hover { color: var(--gold); border-color: var(--gold); }

.footer__bottom {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Floating WhatsApp button */
.whatsapp {
  position: fixed;
  /* env(safe-area-inset-*) keeps it clear of the iPhone home bar */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right:  calc(24px + env(safe-area-inset-right, 0px));
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}
.whatsapp:hover { transform: scale(1.1); }
.whatsapp svg  { width: 28px; height: 28px; }


/* ==========================================================
   15. ANIMATIONS
   ========================================================== */

/* ---- HERO ENTRANCE (pure CSS, no JavaScript) ----
   The hero is on screen the instant the page opens, so it must
   NEVER depend on JavaScript to become visible. If a script failed
   the whole first screen would be blank. These elements are visible
   by default and simply animate in as the page loads. */
.hero-in {
  /* Opacity is deliberately NOT animated. If it were, any hiccup that
     stopped the animation would leave the hero invisible. Only the
     gentle slide is animated, so worst case the content still shows,
     just without movement. */
  animation: heroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* stagger them so they arrive one after another */
.hero-in:nth-of-type(1) { animation-delay: 0.05s; }
.hero-in:nth-of-type(2) { animation-delay: 0.15s; }
.hero-in:nth-of-type(3) { animation-delay: 0.25s; }
.hero-in:nth-of-type(4) { animation-delay: 0.35s; }
.hero-in:nth-of-type(5) { animation-delay: 0.45s; }
.hero-in:nth-of-type(6) { animation-delay: 0.55s; }

@keyframes heroIn {
  from { transform: translateY(24px); }
  to   { transform: translateY(0); }
}

/* ---- Scroll reveal for content BELOW the fold ----
   JS adds .is-visible when the element scrolls into view. Only used
   further down the page, where a failure is far less damaging. */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
}
/* the hero glow is not centre-positioned, so it needs its own version */
.hero__video-glow { animation-name: pulseGlowPlain; }
@keyframes pulseGlowPlain {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes driftAcross {
  from { transform: translateX(-15vw); }
  to   { transform: translateX(115vw); }
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Cinematic slow zoom + drift on the hero footage.
   Small numbers on purpose - it should feel alive, not seasick. */
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.18) translate3d(-1.6%, -1.2%, 0); }
}

/* Light slowly sweeping across the hero */
@keyframes lightDrift {
  0%   { opacity: 0.55; transform: translate3d(-6%, -3%, 0); }
  50%  { opacity: 0.9;  transform: translate3d(4%, 2%, 0); }
  100% { opacity: 0.6;  transform: translate3d(8%, -2%, 0); }
}

/* Slow drifting colour blobs behind the liquid glass cards */
@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(90px, 60px) scale(1.15); }
  66%      { transform: translate(40px, 120px) scale(0.95); }
}
@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-100px, -70px) scale(1.12); }
  66%      { transform: translate(-30px, -130px) scale(0.92); }
}
@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-120px, 80px) scale(1.2); }
}

.pulse { animation: pulseFade 2s ease-in-out infinite; display: inline-block; }
@keyframes pulseFade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }

  /* Hero must stay visible even with animations switched off */
  .hero-in { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Swap the moving background video for a still image */
  .hero__bg-video { display: none; }
  .hero {
    background-image: url('../images/ship-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}


/* ==========================================================
   16. RESPONSIVE
   ----------------------------------------------------------
   Written mobile-first: the styles above are for phones,
   these blocks add tablet and desktop layouts on top.
   ========================================================== */

/* ---------- TABLET (640px and up) ---------- */
@media (min-width: 640px) {

  .section { padding: 96px 0; }
  .section__head h2 { font-size: 38px; }
  h2 { font-size: 38px; }

  .hero__title    { font-size: 52px; }
  .hero__subtitle { font-size: 18px; }
  .hero__video    { max-width: 300px; }
  .hero__trust    { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
  .hero__course-heading h2 { font-size: 34px; }
  .course__cta,
  .final-cta__buttons { flex-direction: row; justify-content: center; }
  .course__cta .btn,
  .final-cta__buttons .btn,
  .course__price-block .btn { width: auto; }

  /* Show the shipping route + floating icons on bigger screens */
  .hero__route {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero__float {
    display: block;
    position: absolute;
    color: rgba(212, 175, 55, 0.65);
    pointer-events: none;
    animation: floatUpDown 4s ease-in-out infinite;
  }
  .hero__float--ship  { left: 10%; top: 18%; }
  .hero__float--plane { right: 14%; top: 16%; animation-duration: 5s; }
  .hero__float--box   { right: 22%; bottom: 16%; animation-duration: 3.5s; }

  /* Portfolio becomes a 2-column grid instead of a swipe row */
  .portfolio__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    overflow: visible;
  }
  .portfolio__item { flex: none; }
  .swipe-hint { display: none; }
  .portfolio__progress { display: none; }

  /* Testimonials: same swap, swipe row -> static grid */
  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    overflow: visible;
  }
  .testimonial { flex: none; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .course__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .pricing { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .enroll-block .btn { width: auto; }
  #course { padding-bottom: 54px; }
  .pack-group { grid-template-columns: repeat(3, 1fr); }
  .pack__box { gap: 8px; padding: 14px 12px; }
  .pack__name { font-size: 13px; }
  .pack__price { font-size: 14px; }
  .pack__features li { font-size: 12px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat__value { font-size: 44px; }

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

  .form-wrap { padding: 34px; }

  /* Timeline: alternate sides */
  .timeline__line { left: 50%; }
  .timeline__step { width: 50%; padding-right: 46px; }
  .timeline__step:nth-child(even) {
    margin-left: auto;
    flex-direction: row-reverse;
    text-align: right;
    padding-right: 0;
    padding-left: 46px;
  }
  .timeline__num { position: absolute; top: 0; }
  .timeline__step:nth-child(odd)  .timeline__num { right: -23px; }
  .timeline__step:nth-child(even) .timeline__num { left: -23px; }
}

/* ---------- DESKTOP (1024px and up) ---------- */
@media (min-width: 1024px) {

  /* Show the full desktop navigation, hide the hamburger */
  .nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .nav__links a {
    font-size: 14px;
    color: var(--muted);
    transition: color 0.2s ease;
  }
  .nav__links a:hover { color: var(--gold); }
  .nav__cta   { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }

  .hero__title { font-size: 62px; }
  .section__head h2 { font-size: 46px; }

  .portfolio__grid,
  .testimonials__grid,
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .footer__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================
   17. DEVICE COMPATIBILITY
   ----------------------------------------------------------
   Fixes for specific devices and older browsers.
   ========================================================== */

/* ---------- SMALL PHONES (iPhone SE, older Android, 320-360px) ---------- */
@media (max-width: 360px) {
  .container { padding: 0 16px; }
  .hero__title { font-size: 30px; }
  .hero__course-heading h2 { font-size: 22px; }
  .section__head h2, h2 { font-size: 26px; }
  .btn { padding: 14px 20px; font-size: 14px; }
  .glass-card { padding: 26px 20px; }
  .course__price { font-size: 28px; }
  .stat__value { font-size: 28px; }
  .nav__logo, .footer__logo { font-size: 18px; }
  /* portfolio__item flex-basis for this width is set once, in the
     PORTFOLIO section above, so the two rules can't fight each other */
  .pay-methods { gap: 14px; font-size: 12px; }
}

/* ---------- PHONE IN LANDSCAPE (short screens) ----------
   Stops the hero forcing a full screen height when there is
   very little vertical room. */
@media (max-height: 620px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 110px 0 60px;
  }
  .hero__video { max-width: 380px; }
}

/* ---------- BIG DESKTOP / TV (1600px and up) ---------- */
@media (min-width: 1600px) {
  .container { max-width: 1360px; }
  .hero__title { font-size: 70px; }
  .section { padding: 110px 0; }
}

/* ---------- OLDER BROWSERS: no backdrop-filter ----------
   Safari 8, older Android browsers and Firefox before v103
   cannot frost the glass. They get a solid card instead so
   the text stays perfectly readable. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass-card {
    background: rgba(18, 26, 53, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
  }
}

/* ---------- OLDER BROWSERS: no aspect-ratio ----------
   Safari before 15 and older Android. Falls back to the
   classic padding-top trick so boxes keep their shape. */
@supports not (aspect-ratio: 16 / 9) {
  .hero__video,
  .media-box,
  .video-box {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
  }
  .portfolio__media {
    height: 0;
    padding-bottom: 177.78%;    /* 9:16 */
  }
  .media-box > *,
  .video-box > *,
  .portfolio__media > * {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .media-box, .video-box, .portfolio__media { position: relative; }
}

/* ---------- LOW-POWER DEVICES / COARSE POINTERS ----------
   Phones and tablets: hover effects never trigger on touch,
   and heavy blur is expensive on cheaper hardware. */
@media (hover: none) {
  .card:hover,
  .glass-card:hover { transform: none; }

  /* lighter blur = smoother scrolling on budget phones */
  .blob { filter: blur(60px); }
  .glass-card {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

/* ---------- PRINT ---------- */
@media print {
  .nav, .whatsapp, .blob, .containers-anim,
  .hero__route, .hero__float, .glow-orb { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}