/* ============================================================
   Kuldeep AI Academy — Ultra Premium v4
   Light-Yellow Luxury + Dark Mode + Morpankh Cursor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   Design Tokens — Light Mode (Default)
   ============================================================ */
:root {
  /* Background */
  --bg:        #faf6ed;
  --bg-warm:   #f5f0e4;
  --bg-card:   #ffffff;
  --bg-glass:  rgba(255, 255, 255, 0.72);
  --bg-hover:  #fefcf7;

  /* Text */
  --text:      #1a1612;
  --text-dim:  #5c554a;
  --text-muted:#9b9285;

  /* Accents */
  --olive:     #7a8a3a;
  --olive-l:   #8fa042;
  --orange:    #d4952e;
  --yellow:    #c9a84c;
  --gold:      #b8941e;

  /* Urgent (red) */
  --red:       #d93240;
  --red-dk:    #b81c28;
  --red-glow:  rgba(217, 50, 64, 0.25);

  --green:     #3da843;

  /* Borders / Surfaces */
  --border:    rgba(180, 170, 148, 0.22);
  --border-hl: rgba(122, 138, 58, 0.3);
  --shadow-sm: 0 2px 12px rgba(120, 100, 60, 0.06);
  --shadow-md: 0 8px 30px rgba(120, 100, 60, 0.08);
  --shadow-lg: 0 20px 50px rgba(100, 80, 40, 0.1);
  --shadow-card-hover: 0 24px 56px rgba(100, 80, 40, 0.14), 0 0 0 1px var(--border-hl);

  /* Radius */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px;

  /* Motion */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-o:  cubic-bezier(0, 0, 0.2, 1);
  --ease-s:  cubic-bezier(0.22, 1, 0.36, 1);

  /* Theme transition */
  --tt: 0.45s var(--ease);
}

/* ============================================================
   Dark Mode Tokens
   ============================================================ */
[data-theme="dark"] {
  --bg:        #0d0d0d;
  --bg-warm:   #141310;
  --bg-card:   #1a1917;
  --bg-glass:  rgba(26, 25, 23, 0.78);
  --bg-hover:  #1f1e1b;

  --text:      #f0ebe3;
  --text-dim:  #a09b93;
  --text-muted:#5e5a54;

  --olive:     #8b9a46;
  --olive-l:   #a3b35c;
  --orange:    #e8a849;
  --yellow:    #f5e6a3;
  --gold:      #d4b44e;

  --red:       #e63946;
  --red-dk:    #c1121f;
  --red-glow:  rgba(230, 57, 70, 0.3);

  --border:    rgba(139, 154, 70, 0.12);
  --border-hl: rgba(139, 154, 70, 0.28);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 154, 70, 0.06);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--tt), color var(--tt);
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:inherit; position:relative; overflow:hidden; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--olive); border-radius:3px; }



/* ============================================================
   Top Controls (Lang + Theme)
   ============================================================ */
.top-controls {
  position:fixed; top:10px; right:14px; z-index:1100;
  display:flex; align-items:center; gap:8px;
}
.lang-switcher {
  display:flex; align-items:center; gap:2px;
  background: var(--bg-glass);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:24px; padding:4px 6px;
  transition: background var(--tt), border-color var(--tt);
}
.lang-btn {
  background:none; color:var(--text-muted);
  font-size:0.68rem; font-weight:500;
  padding:4px 8px; border-radius:16px;
  transition: all 0.3s var(--ease);
}
.lang-btn.active { background:rgba(122,138,58,0.12); color:var(--olive-l); }
.lang-btn:hover { color:var(--text); }

.theme-toggle {
  width:36px; height:36px;
  background: var(--bg-glass);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem;
  transition: background var(--tt), border-color var(--tt), transform 0.3s var(--ease-s);
}
.theme-toggle:hover { transform:scale(1.08); }
.theme-icon-dark { display:none; }
[data-theme="dark"] .theme-icon-light { display:none; }
[data-theme="dark"] .theme-icon-dark { display:inline; }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.page { display:none; min-height:100vh; }
.page.active { display:block; }

/* ============================================================
   Brand Header
   ============================================================ */
.brand-header {
  position:sticky; top:0; z-index:1000;
  background: var(--bg-glass);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  padding:12px 0;
  transition: background var(--tt), border-color var(--tt);
}
.header-inner { text-align:center; }
.top-badge {
  display:inline-block;
  font-size:0.64rem; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--olive-l);
  border:1px solid var(--border-hl);
  padding:3px 13px; border-radius:20px; margin-bottom:5px;
  transition: color var(--tt), border-color var(--tt);
}
.brand-title {
  font-family:'Outfit',sans-serif;
  font-size:1.5rem; font-weight:800; letter-spacing:-0.5px;
  background:linear-gradient(135deg, var(--text) 40%, var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-title-sm {
  font-family:'Outfit',sans-serif;
  font-size:1.1rem; font-weight:700;
  background:linear-gradient(135deg, var(--text) 40%, var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-tagline {
  color:var(--text-dim); font-size:0.72rem;
  letter-spacing:2px; text-transform:uppercase; margin-top:1px;
  transition: color var(--tt);
}

/* ============================================================
   Hero Split (Left Text + Right Video)
   ============================================================ */
.hero-split {
  display:flex; align-items:center; gap:48px;
  padding:52px 0 20px;
  min-height:55vh;
}
.hero-left { flex:1; }
.hero-right { flex:0 0 380px; }

/* Hero Eyebrow */
.hero-eyebrow {
  display:inline-block;
  font-size:0.78rem; font-weight:600;
  color:var(--olive);
  background:rgba(122,138,58,0.08);
  border:1px solid rgba(122,138,58,0.22);
  padding:6px 16px; border-radius:40px;
  margin-bottom:14px;
  letter-spacing:0.3px;
  transition: color var(--tt), background var(--tt), border-color var(--tt);
}

.hero-headline {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-0.5px;
  color:var(--text);
  margin-bottom:14px;
  transition: color var(--tt);
}
.hl-olive { color:var(--olive); }
.hl-orange { color:var(--orange); }
.hl-red { color:var(--red); }

.hero-sub-text {
  color:var(--text-dim); font-size:0.92rem;
  margin-bottom:24px; transition: color var(--tt);
}

.hero-cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding:13px 30px;
  background:linear-gradient(135deg, var(--olive), #5e7226);
  color:#fff; font-size:0.88rem; font-weight:600;
  border-radius:var(--r-md); letter-spacing:0.4px;
  transition: transform 0.4s var(--ease-s), box-shadow 0.4s var(--ease-s);
  box-shadow:0 4px 18px rgba(122,138,58,0.2);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(122,138,58,0.28);
}

/* Video Card */
.video-card {
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  transition: transform 0.5s var(--ease-s), box-shadow 0.5s var(--ease-s), border-color var(--tt);
  background: var(--bg-card);
}
.video-card:hover {
  transform:scale(1.015) translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.video-placeholder {
  aspect-ratio:16/9;
  background:linear-gradient(135deg, var(--bg-warm), var(--bg));
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  cursor:pointer;
  transition: background var(--tt);
}
.play-btn-wrap {
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(122,138,58,0.12);
  border:1.5px solid var(--olive);
  display:flex; align-items:center; justify-content:center;
  color:var(--olive-l);
  transition: all 0.4s var(--ease-s);
}
.video-card:hover .play-btn-wrap {
  background:rgba(122,138,58,0.22);
  transform:scale(1.08);
}
.video-label { color:var(--text-muted); font-size:0.76rem; letter-spacing:0.4px; }

/* ============================================================
   Scroll Gesture (finger icon)
   ============================================================ */
.scroll-gesture {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) rotate(180deg);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  z-index:100; pointer-events:none;
  opacity:1; transition:opacity 0.6s var(--ease-s);
  color:var(--text-muted);
}
.scroll-gesture.hidden { opacity:0; }

.gesture-hand {
  animation:gesture-float 2.4s var(--ease-s) infinite;
}
.gesture-arrows {
  display:flex; flex-direction:column; align-items:center;
  gap:0; line-height:1; font-size:0.7rem;
  transform:rotate(90deg);
  opacity:0.5;
}
.g-arrow { animation:gesture-arrow 2.4s var(--ease-s) infinite; }
.g-arrow:nth-child(1) { animation-delay:0s; }
.g-arrow:nth-child(2) { animation-delay:0.15s; }
.g-arrow:nth-child(3) { animation-delay:0.3s; }

@keyframes gesture-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
@keyframes gesture-arrow {
  0%,100% { opacity:0.2; }
  50% { opacity:0.7; }
}

/* ============================================================
   About Kuldeep Section
   ============================================================ */
.about-section {
  margin:36px 0 40px;
}
.about-card {
  padding:32px;
}
.about-inner {
  display:flex; gap:28px; align-items:flex-start;
}
.about-avatar-wrap {
  flex:0 0 120px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.about-avatar {
  width:120px; height:120px;
  border-radius:50%;
  border:3px solid var(--olive);
  object-fit:cover;
  background:var(--bg-warm);
  box-shadow:0 8px 24px rgba(122,138,58,0.12);
}
.about-avatar-caption {
  font-size:0.68rem;
  color:var(--text-muted);
  font-weight:500;
  letter-spacing:0.5px;
  text-align:center;
}
.about-text { flex:1; }
.about-name {
  font-family:'Outfit',sans-serif;
  font-size:1.3rem; font-weight:800;
  margin-bottom:10px;
  background:linear-gradient(135deg, var(--text) 40%, var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.about-bio {
  color:var(--text-dim);
  font-size:0.85rem;
  line-height:1.7;
  margin-bottom:14px;
}
.about-highlights {
  display:flex; flex-wrap:wrap; gap:8px;
}
.about-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(122,138,58,0.08);
  border:1px solid rgba(122,138,58,0.2);
  padding:5px 12px; border-radius:40px;
  font-size:0.72rem; font-weight:500;
  color:var(--olive-l);
  transition: all 0.3s var(--ease-s);
}
.about-tag:hover {
  background:rgba(122,138,58,0.15);
  transform:translateY(-1px);
}
.about-trust-message {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.about-trust-message p {
  font-size:0.82rem;
  color:var(--text-dim);
  line-height:1.7;
  font-style:italic;
}

/* ============================================================
   Pricing Strip (replaces sale banner)
   ============================================================ */
.pricing-strip {
  background:linear-gradient(135deg, var(--olive), #5e7226);
  position:relative; overflow:hidden;
  margin-bottom:48px;
}
.pricing-strip::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  animation:shimmer-slide 4.5s linear infinite;
}
.pricing-strip-inner {
  padding:28px 0;
  text-align:center;
  position:relative; z-index:1;
}
.pricing-strip-icon {
  font-size:1.4rem;
  display:block;
  margin-bottom:6px;
}
.pricing-strip-title {
  font-family:'Outfit',sans-serif;
  font-size:1.4rem; font-weight:800;
  color:#fff;
  margin-bottom:4px;
}
.pricing-strip-sub {
  font-size:0.82rem;
  color:rgba(255,255,255,0.7);
}

@keyframes shimmer-slide {
  from { transform:translateX(-100%); }
  to { transform:translateX(100%); }
}

/* ============================================================
   Section Title
   ============================================================ */
.section-title {
  font-family:'Outfit',sans-serif;
  font-size:1.2rem; font-weight:700;
  text-align:center;
  margin:40px 0 26px;
  color:var(--text);
  letter-spacing:1.2px; text-transform:uppercase;
  transition: color var(--tt);
}

/* ============================================================
   Course Cards
   ============================================================ */
.courses-row-3 {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px; margin-bottom:32px;
}
.courses-row-2 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; margin-bottom:24px;
}
.bundle-row {
  margin-bottom:32px;
}
.bonus-row {
  margin-bottom:48px;
}
.course-card {
  background:var(--bg-card);
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition: transform 0.5s var(--ease-s), box-shadow 0.5s var(--ease-s), border-color 0.4s var(--ease);
  will-change:transform; position:relative;
}
.course-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--border-hl);
}
/* Glass reflection */
.course-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
  opacity:0; transition:opacity 0.5s var(--ease-s);
  pointer-events:none; border-radius:var(--r-2xl);
}
.course-card:hover::after { opacity:1; }
[data-theme="dark"] .course-card::after {
  background:linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
}

.card-img-wrap { position:relative; overflow:hidden; }
.card-img-wrap img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 0.6s var(--ease-s);
}
.course-card:hover .card-img-wrap img { transform:scale(1.04); }

.card-badge {
  position:absolute; top:12px; left:12px;
  background:var(--olive); color:#fff;
  padding:3px 11px; border-radius:20px;
  font-size:0.6rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
}
.badge-gold {
  background:linear-gradient(135deg,var(--orange),#e8c24a);
  color:#1a1612;
}

.card-body { padding:20px; }
.card-title {
  font-family:'Outfit',sans-serif;
  font-size:1.1rem; font-weight:700; margin-bottom:5px;
  transition: color var(--tt);
}
.card-desc {
  color:var(--text-dim); font-size:0.8rem;
  margin-bottom:15px; line-height:1.5;
  transition: color var(--tt);
}

/* Bundle Card SM (2-up bundles without image) */
.card-bundle-sm {
  border-color:var(--olive);
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(122,138,58,0.1);
}
.card-bundle-sm:hover {
  box-shadow:var(--shadow-card-hover);
}
.bundle-badge-sm {
  display:inline-block;
  background:linear-gradient(135deg,var(--orange),#e8c24a);
  color:#1a1612;
  padding:3px 12px; border-radius:20px;
  font-size:0.62rem; font-weight:700; letter-spacing:1px;
  margin-bottom:10px;
}

/* Bundle Card (full-width, horizontal) */
.card-bundle {
  border-color:var(--olive);
  box-shadow:var(--shadow-md), 0 0 0 1px var(--border-hl);
}
.card-bundle:hover {
  box-shadow:var(--shadow-card-hover), 0 0 40px rgba(122,138,58,0.08);
}
.bundle-star {
  position:absolute; top:-1px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--orange),#e8c24a);
  color:#1a1612;
  padding:4px 18px; border-radius:0 0 12px 12px;
  font-size:0.66rem; font-weight:700; letter-spacing:1px;
  z-index:5; white-space:nowrap;
}
.bundle-inner {
  display:flex; align-items:stretch;
}
.bundle-img {
  flex:0 0 42%; max-width:42%;
}
.bundle-img img { aspect-ratio:auto; height:100%; object-fit:cover; }
.bundle-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.bundle-title { font-size:1.3rem; }

/* Bonus card */
.card-bonus {
  border-color:var(--gold);
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(184,148,30,0.15);
}
.card-bonus:hover {
  box-shadow:var(--shadow-card-hover);
  border-color:var(--gold);
}
.bonus-badge {
  display:inline-block;
  background:rgba(184,148,30,0.12);
  border:1px solid rgba(184,148,30,0.3);
  color:var(--gold);
  padding:4px 14px; border-radius:20px;
  font-size:0.64rem; font-weight:700; letter-spacing:0.8px;
  margin-bottom:10px;
}

/* ============================================================
   Pricing
   ============================================================ */
.price-row {
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px; flex-wrap:wrap;
}
.price-old {
  text-decoration:line-through;
  color:var(--text-muted); font-size:0.92rem;
}
.price-old-sm {
  text-decoration:line-through;
  color:var(--text-muted); font-size:0.85rem;
}
.price-now {
  font-family:'Outfit',sans-serif;
  font-size:1.45rem; font-weight:800; color:var(--red);
}
.price-tag {
  background:rgba(122,138,58,0.1);
  color:var(--olive); padding:2px 7px; border-radius:5px;
  font-size:0.62rem; font-weight:700; letter-spacing:0.5px;
  border:1px solid rgba(122,138,58,0.2);
}

/* ============================================================
   Buy Button
   ============================================================ */
.buy-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:12px 24px;
  background:linear-gradient(135deg,var(--red),var(--red-dk));
  color:#fff; font-size:0.86rem; font-weight:700;
  border-radius:var(--r-md); letter-spacing:0.7px;
  transition:transform 0.4s var(--ease-s), box-shadow 0.4s var(--ease-s);
  box-shadow:0 4px 16px var(--red-glow);
}
.buy-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px var(--red-glow);
}

/* ============================================================
   Features
   ============================================================ */
.features-row {
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px;
  margin:0 0 36px;
}
.feature-chip {
  display:flex; align-items:center; gap:7px;
  background:rgba(122,138,58,0.07);
  border:1px solid rgba(122,138,58,0.18);
  padding:9px 16px; border-radius:40px;
  font-size:0.78rem; font-weight:500; color:var(--text);
  transition:all 0.35s var(--ease-s);
}
.feature-chip:hover {
  background:rgba(122,138,58,0.13);
  transform:translateY(-2px);
}

/* ============================================================
   CTA Strip
   ============================================================ */
.cta-strip {
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:52px 20px; text-align:center;
  position:relative;
  transition: background var(--tt), border-color var(--tt);
}
.cta-strip::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--olive),var(--orange),transparent);
}
.cta-title {
  font-family:'Outfit',sans-serif;
  font-size:1.7rem; font-weight:800; margin-bottom:5px;
  transition: color var(--tt);
}
.cta-sub { color:var(--text-dim); font-size:0.9rem; margin-bottom:22px; }
.cta-action { max-width:260px; margin:0 auto; padding:13px 36px; font-size:0.95rem; }

/* ============================================================
   Contact Section
   ============================================================ */
.contact-section {
  background:var(--bg-warm);
  padding:48px 20px 56px;
  border-top:1px solid var(--border);
  transition: background var(--tt), border-color var(--tt);
}
.contact-sub {
  text-align:center;
  color:var(--text-dim);
  font-size:0.9rem;
  margin-bottom:24px;
}
.contact-btns {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.contact-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  border-radius:var(--r-md);
  font-size:0.88rem; font-weight:600;
  letter-spacing:0.3px;
  transition: transform 0.4s var(--ease-s), box-shadow 0.4s var(--ease-s);
  text-decoration:none;
}
.whatsapp-btn {
  background:linear-gradient(135deg, #25d366, #128c7e);
  color:#fff;
  box-shadow:0 4px 18px rgba(37,211,102,0.2);
}
.whatsapp-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,211,102,0.3);
}
.email-btn {
  background:var(--bg-card);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.email-btn:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-hl);
}

/* ============================================================
   Checkout Page Styles
   ============================================================ */
.checkout-header { display:flex; align-items:center; justify-content:space-between; }
.back-link { color:var(--text-dim); font-size:0.82rem; font-weight:500; transition:color 0.3s var(--ease); }
.back-link:hover { color:var(--olive-l); }
.secure-badge { font-size:0.72rem; color:var(--olive); font-weight:500; }

.hero-section {
  display:flex; align-items:center; gap:36px; margin:36px 0;
}
.hero-text { flex:1; }
.hero-title {
  font-family:'Outfit',sans-serif;
  font-size:2.2rem; font-weight:800;
  line-height:1.15; margin-bottom:8px; letter-spacing:-1px;
}
.hero-desc { color:var(--text-dim); font-size:0.92rem; margin-bottom:5px; line-height:1.6; }
.hero-sub { color:var(--text-muted); font-size:0.82rem; margin-bottom:12px; }
.hero-image { flex:0 0 300px; border-radius:var(--r-2xl); overflow:hidden; }
.hero-image img { width:100%; border-radius:var(--r-2xl); object-fit:cover; }

.chips-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.chip {
  background:rgba(122,138,58,0.08);
  border:1px solid rgba(122,138,58,0.22);
  padding:5px 13px; border-radius:40px;
  font-size:0.72rem; font-weight:500; color:var(--olive-l);
  transition:all 0.3s var(--ease-s);
}
.chip:hover { background:rgba(122,138,58,0.15); }

.checkout-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:24px 0; }
.glass-card {
  background:var(--bg-glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-xl); padding:22px;
  transition: background var(--tt), border-color var(--tt);
}
.panel-title { font-family:'Outfit',sans-serif; font-size:1rem; font-weight:700; margin-bottom:16px; }
.order-item {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.order-thumb { width:68px; height:50px; border-radius:var(--r-sm); object-fit:cover; }
.order-details { display:flex; flex-direction:column; gap:2px; }
.order-name { font-weight:600; font-size:0.88rem; }
.order-sub { font-size:0.72rem; color:var(--text-muted); }
.order-lines { display:flex; flex-direction:column; gap:9px; }
.order-line { display:flex; justify-content:space-between; font-size:0.82rem; color:var(--text-dim); }
.line-disc { color:var(--olive); }
.text-olive { color:var(--olive-l); }
.line-total {
  padding-top:12px; border-top:1px solid var(--border);
  font-weight:700; font-size:0.9rem; color:var(--text);
}
.line-total .price-now { font-size:1.25rem; }
.savings-box {
  background:rgba(122,138,58,0.08);
  border:1px solid rgba(122,138,58,0.2);
  color:var(--olive-l); padding:9px 13px;
  border-radius:var(--r-sm); text-align:center;
  font-weight:600; font-size:0.82rem; margin-top:14px;
}

.trust-panel { padding:22px; }
.trust-social { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.trust-count { font-weight:600; font-size:0.82rem; }
.trust-rating { display:flex; align-items:center; gap:7px; margin-bottom:18px; font-size:0.8rem; color:var(--text-dim); }
.stars { color:var(--orange); font-size:0.9rem; letter-spacing:1px; }
.benefits-list { display:flex; flex-direction:column; gap:10px; }
.benefit-item { display:flex; align-items:center; gap:9px; font-size:0.8rem; color:var(--text-dim); }
.chk { color:var(--olive); font-weight:700; font-size:0.9rem; flex-shrink:0; }

.complete-btn {
  display:block; width:100%; max-width:500px;
  margin:26px auto 8px; padding:15px 34px;
  background:linear-gradient(135deg,var(--red),var(--red-dk));
  color:#fff; font-size:1rem; font-weight:700;
  border-radius:var(--r-md); letter-spacing:0.7px;
  transition:transform 0.4s var(--ease-s), box-shadow 0.4s var(--ease-s);
  box-shadow:0 4px 22px var(--red-glow);
}
.complete-btn:hover { transform:translateY(-2px); box-shadow:0 12px 36px var(--red-glow); }

.secure-text { text-align:center; color:var(--text-muted); font-size:0.72rem; margin-bottom:18px; }
.trust-badges {
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
  margin:10px 0 36px; padding:14px 0;
  border-top:1px solid var(--border);
  color:var(--text-muted); font-size:0.72rem; font-weight:500;
}

.what-learn { margin:28px 0; }
.learn-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.learn-chip {
  background:var(--bg-card); border:1px solid var(--border);
  padding:11px 18px; border-radius:var(--r-xl);
  font-size:0.82rem; font-weight:500; color:var(--text);
  transition:all 0.35s var(--ease-s);
  box-shadow:var(--shadow-sm);
}
.learn-chip:hover { border-color:var(--olive); transform:translateY(-2px); }

/* ============================================================
   Reveal Animations
   ============================================================ */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition: opacity 0.7s var(--ease-o), transform 0.7s var(--ease-s);
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

/* Page Transitions */
.page.page-exit { animation:pgOut 0.35s var(--ease) forwards; }
.page.page-enter { animation:pgIn 0.45s var(--ease-o) forwards; }
@keyframes pgOut { to { opacity:0; transform:translateY(-14px); } }
@keyframes pgIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* Ripple */
.ripple-fx {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:scale(0);
  animation:ripple 0.55s linear;
  pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px) {
  .hero-split { gap:32px; }
  .hero-right { flex:0 0 300px; }
  .courses-row-3 { grid-template-columns:repeat(2, 1fr); }
  .courses-row-2 { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .container { padding:0 16px; }
  .top-controls { top:auto; bottom:12px; right:12px; }

  .hero-split {
    flex-direction:column; gap:24px;
    padding:32px 0 16px; min-height:auto;
  }
  .hero-right { flex:none; width:100%; }
  .hero-headline { font-size:clamp(1.3rem,5vw,1.7rem); }

  .courses-row-3 { grid-template-columns:1fr; }
  .courses-row-2 { grid-template-columns:1fr; }
  .bundle-inner { flex-direction:column; }
  .bundle-img { flex:none; max-width:100%; }
  .bundle-img img { aspect-ratio:16/9; height:auto; }

  .about-inner { flex-direction:column; align-items:center; text-align:center; }
  .about-avatar-wrap { flex:none; }
  .about-highlights { justify-content:center; }

  .hero-section { flex-direction:column; gap:18px; margin:24px 0; }
  .hero-image { flex:none; width:100%; }
  .hero-title { font-size:1.7rem; }
  .checkout-grid { grid-template-columns:1fr; }
  .checkout-header { flex-wrap:wrap; gap:5px; }
  .brand-title-sm { order:-1; width:100%; text-align:center; margin-bottom:5px; }

  .features-row { gap:7px; }
  .feature-chip { padding:7px 12px; font-size:0.72rem; }
  .section-title { font-size:1rem; }
  .cta-title { font-size:1.3rem; }

  .scroll-gesture { bottom:50px; }

  .contact-btns { flex-direction:column; align-items:center; }
  .contact-btn { width:100%; max-width:320px; justify-content:center; }
}

@media (max-width:480px) {
  .brand-title { font-size:1.25rem; }
  .hero-title { font-size:1.4rem; }
  .hero-eyebrow { font-size:0.7rem; padding:5px 12px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
}