@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&family=Syne:wght@700;800&display=swap");

/* ═══════════════════════════════════
   WARPIX × SKILLORA — DESIGN SYSTEM
   Scroll-stopping. Portfolio-grade.
═══════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --color-cloud-white: #FAFAFA;
  --color-pure-white: #FFFFFF;
  --color-cool-slate: #E5E7EB;
  --color-near-black: #0D0F14;
  --color-steel-gray: #6B7280;
  --color-electric-blue: #2563EB;
  --color-blue-vivid: #3B6FFF;
  --color-blue-deep: #1D4ED8;
  --color-amber-gold: #F59E0B;
  --color-teal: #0EA5E9;
  --color-success: #10B981;

  /* ── Semantic Tokens ── */
  --color-bg: var(--color-cloud-white);
  --color-surface: var(--color-pure-white);
  --color-muted: #F1F5F9;
  --color-text: var(--color-near-black);
  --color-text-muted: #64748B;
  --color-border: #E2E8F0;

  /* ── Dark Section ── */
  --color-dark-bg: #080B12;
  --color-dark-surface: #0F1420;
  --color-dark-border: rgba(255,255,255,0.08);
  --color-dark-text: #F8FAFC;
  --color-dark-muted: rgba(248,250,252,0.55);

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-course: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ── Type Scale ── */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.5rem;
  --text-4xl: 4.5rem;

  /* ── Spacing ── */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3.5rem;
  --space-8: 6rem;

  /* ── Shape ── */
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-hover: 0 8px 32px rgba(37,99,235,.14), 0 2px 8px rgba(0,0,0,.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-glow: 0 0 0 3px rgba(37,99,235,.15);

  /* ── Motion ── */
  --transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --transition-base: 220ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 400ms cubic-bezier(.4,0,.2,1);
  --transition-spring: 500ms cubic-bezier(.34,1.56,.64,1);

  /* ── Layout ── */
  --container: 1240px;
  --navbar-height: 72px;
  --z-navbar: 100;
  --z-cursor: 999;
  --z-overlay: 200;
}

/* ═══════════════════════════════════
   BASE RESET
═══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box }
* { margin: 0; padding: 0 }
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased }
body { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; overflow-x: hidden }
img, svg, video { display: block; max-width: 100% }
img { width: 100%; height: 100%; object-fit: cover }
button, input, textarea, select { font: inherit }
button { border: 0; cursor: pointer; background: none }
a { text-decoration: none; color: inherit }
ul, ol { list-style: none }
::selection { background: var(--color-electric-blue); color: #fff }

/* ═══════════════════════════════════
   LAYOUT
═══════════════════════════════════ */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto }
.section { padding: var(--space-8) 0 }
.section-sm { padding: var(--space-7) 0 }

/* ═══════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
}
h1 { font-size: clamp(2.6rem, 6.5vw, var(--text-4xl)) }
h2 { font-size: clamp(2rem, 4.5vw, var(--text-3xl)) }
h3 { font-size: var(--text-xl); font-weight: 700 }
h4 { font-size: var(--text-lg); font-weight: 600 }

p { color: var(--color-text-muted); line-height: 1.75 }
small, .small { font-size: var(--text-sm); color: var(--color-text-muted) }
.caption { font-size: var(--text-xs); color: #94A3B8 }
.course-title { font-family: var(--font-course); font-weight: 800; letter-spacing: -.025em }
.text-primary { color: var(--color-text) }
.text-accent { color: var(--color-electric-blue) }
.text-muted { color: var(--color-text-muted) }

/* Gradient headline — use on key words */
.gradient-text {
  background: linear-gradient(135deg, var(--color-electric-blue) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-fast);
}
.btn:hover::after { background: rgba(255,255,255,0.08) }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) }

.btn-primary {
  background: var(--color-electric-blue);
  color: #fff;
  border-color: var(--color-electric-blue);
  box-shadow: 0 1px 3px rgba(37,99,235,0.3), 0 4px 12px rgba(37,99,235,0.2);
}
.btn-primary:hover { box-shadow: 0 4px 20px rgba(37,99,235,0.4), 0 1px 3px rgba(37,99,235,0.3) }

.btn-secondary {
  background: #fff;
  color: var(--color-electric-blue);
  border-color: #BFDBFE;
}
.btn-secondary:hover { background: #EFF6FF; border-color: var(--color-electric-blue) }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-muted); color: var(--color-text) }

.btn-dark {
  background: var(--color-dark-bg);
  color: #fff;
  border-color: var(--color-dark-border);
}
.btn-dark:hover { background: #0F1420 }

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--color-muted);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.wishlist-btn { /* alias for btn-icon on course cards */ }
.btn-icon.active, .btn-icon:hover {
  color: var(--color-electric-blue);
  border-color: #BFDBFE;
  background: #EFF6FF;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}
/* Navbar right-side action group */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Search pill */
.navbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-muted);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  min-width: 160px;
}
.navbar-search:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: var(--color-electric-blue);
  box-shadow: 0 2px 8px rgba(37,99,235,0.1);
}
.navbar-search svg { flex-shrink: 0 }

/* Wishlist button with badge */
.navbar-wishlist {
  position: relative;
  flex-shrink: 0;
}
.navbar-wishlist-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-electric-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  line-height: 1;
  pointer-events: none;
}

/* Divider between icon actions and auth buttons */
.navbar-divider {
  width: 1.5px;
  height: 24px;
  background: var(--color-border);
  border-radius: 2px;
  flex-shrink: 0;
}

.navbar-auth-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none }

/* ═══════════════════════════════════
   CARDS
═══════════════════════════════════ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  border-color: #BFDBFE;
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* ═══════════════════════════════════
   BADGES & PILLS
═══════════════════════════════════ */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.badge { padding: .3rem .65rem; text-transform: uppercase; letter-spacing: .06em }
.pill { padding: .5rem .875rem; gap: .4rem }

.badge-primary, .pill-primary { background: #EFF6FF; color: var(--color-electric-blue); border: 1px solid #BFDBFE }
.badge-reward, .pill-reward { background: #FEF9C3; color: #854D0E; border: 1px solid #FDE68A }
.badge-muted, .pill-muted { background: var(--color-muted); color: var(--color-text-muted); border: 1px solid var(--color-border) }
.badge-level { background: var(--color-muted); color: var(--color-text-muted); border: 1px solid var(--color-border) }
.badge-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0 }
.badge-dark { background: var(--color-dark-bg); color: rgba(255,255,255,0.8); border: 1px solid var(--color-dark-border) }

/* ═══════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════ */
.form-group { display: grid; gap: var(--space-2) }
label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text) }
.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  background: #fff;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-size: var(--text-sm);
}
.textarea { min-height: 120px; resize: vertical; padding-block: var(--space-3) }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-electric-blue);
  box-shadow: var(--shadow-glow);
}

/* Search bar — special */
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.search-bar:focus-within {
  border-color: var(--color-electric-blue);
  box-shadow: var(--shadow-glow);
}
.search-bar input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 0;
}

/* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  height: var(--navbar-height);
  background: rgba(250,250,250,0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: all var(--transition-base);
}
.navbar.is-solid {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 var(--color-border);
}
.navbar-inner {
  width: min(100% - 2rem, var(--container));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--color-text);
  flex-shrink: 0;
}
.logo span { color: var(--color-electric-blue) }
.nav-links { display: flex; align-items: center; gap: var(--space-5) }
.nav-link { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--transition-fast); position: relative }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-electric-blue);
  border-radius: 2px;
  transition: width var(--transition-base);
}
.nav-link:hover, .nav-link.active { color: var(--color-electric-blue) }
.nav-link:hover::after, .nav-link.active::after { width: 100% }

/* ═══════════════════════════════════
   HERO — THE WOW SECTION
═══════════════════════════════════ */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-8) * 1.2) 0 var(--space-8);
}

/* Grid dot pattern background */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #E2E8F0 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* Blue glow top */
.hero-section::after {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-electric-blue);
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-electric-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1) }
  50% { opacity: 0.5; transform: scale(0.8) }
}

.hero-title { color: var(--color-text) }
.hero-sub { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 300; line-height: 1.75; max-width: 540px; margin: 1.25rem 0 2rem }

/* Trust bar */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.hero-trust-item { display: flex; flex-direction: column; gap: 2px }
.hero-trust-val { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--color-text); letter-spacing: -.03em; line-height: 1 }
.hero-trust-val .accent { color: var(--color-electric-blue) }
.hero-trust-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em }
.hero-trust-sep { width: 1px; height: 32px; background: var(--color-border); flex-shrink: 0 }

/* Hero visual — dashboard card */
.hero-visual {
  background: var(--color-dark-bg);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  min-height: 440px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.12);
}
.hero-visual::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.hero-visual-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: rgba(255,255,255,0.9) }
.hero-visual-badge { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-teal); background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); padding: 3px 8px; border-radius: var(--radius-full); font-weight: 600 }

/* Dark dashboard metric cards */
.dash-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 1rem }
.dash-metric {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.dash-metric-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 4px }
.dash-metric-val.blue { color: var(--color-blue-vivid) }
.dash-metric-val.teal { color: var(--color-teal) }
.dash-metric-val.gold { color: var(--color-amber-gold) }
.dash-metric-val.white { color: rgba(255,255,255,0.9) }
.dash-metric-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.35) }

/* Dark course card inside hero */
.dash-course-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 8px;
  transition: border-color var(--transition-fast);
}
.dash-course-card:hover { border-color: rgba(37,99,235,0.4) }
.dash-course-card-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-blue-vivid); margin-bottom: 6px; font-weight: 600 }
.dash-course-card-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 10px; line-height: 1.3 }
.dash-progress-wrap { display: flex; align-items: center; gap: 8px }
.dash-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden }
.dash-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--color-electric-blue), var(--color-teal)); transition: width .6s ease }
.dash-progress-label { font-size: var(--text-xs); color: rgba(255,255,255,0.4); flex-shrink: 0; min-width: 28px; text-align: right }

/* ═══════════════════════════════════
   SECTION LABELS
═══════════════════════════════════ */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-electric-blue);
  margin-bottom: 1rem;
}
.section-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--color-electric-blue);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   COURSE CARDS — ELEVATED
═══════════════════════════════════ */
.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  border-color: #BFDBFE;
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}
.course-card-media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--color-muted) 0%, #E2E8F0 100%);
  overflow: hidden;
  position: relative;
  display: block;
}
.course-card-media img { transition: transform .5s ease }
.course-card:hover .course-card-media img { transform: scale(1.05) }

/* Overlay on hover */
.course-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,11,18,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.course-card:hover .course-card-media::after { opacity: 1 }

.course-card-body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column }
.course-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  letter-spacing: -.02em;
}
.course-card-title a { color: var(--color-text); transition: color var(--transition-fast) }
.course-card-title a:hover { color: var(--color-electric-blue) }
.course-card-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.6; flex: 1 }
.course-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: var(--space-4) }
.course-card-price { font-size: 1.2rem; font-weight: 800; color: var(--color-electric-blue); font-family: var(--font-display); letter-spacing: -.03em }

/* ═══════════════════════════════════
   STATS — ANIMATED COUNTERS
═══════════════════════════════════ */
.stats-band {
  background: var(--color-dark-bg);
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(37,99,235,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.stats-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.stats-band-item {
  padding: 3rem 2rem;
  text-align: center;
  border-right: 1px solid var(--color-dark-border);
  transition: background var(--transition-base);
}
.stats-band-item:last-child { border-right: none }
.stats-band-item:hover { background: rgba(255,255,255,0.03) }
.stats-band-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}
.stats-band-num.blue {
  background: linear-gradient(135deg, var(--color-blue-vivid) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.stats-band-label { font-size: var(--text-sm); color: rgba(255,255,255,0.4); letter-spacing: .06em; text-transform: uppercase; font-size: var(--text-xs) }

/* ═══════════════════════════════════
   CATEGORY STRIP
═══════════════════════════════════ */
.category-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none }
.category-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}
.category-pill:hover, .category-pill.active {
  border-color: var(--color-electric-blue);
  color: var(--color-electric-blue);
  background: #EFF6FF;
}
.category-pill-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-muted);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-weight: 600;
}

/* ═══════════════════════════════════
   HOW IT WORKS — STEPS
═══════════════════════════════════ */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); position: relative }
.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), var(--color-electric-blue), var(--color-border));
  z-index: 0;
}
.step-card { text-align: center; position: relative; z-index: 1 }
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-electric-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 0 8px #EFF6FF, 0 4px 16px rgba(37,99,235,0.3);
  position: relative;
  z-index: 1;
}
.step-card h3 { margin-bottom: .5rem }
.step-card p { font-size: var(--text-sm) }

/* ═══════════════════════════════════
   INSTRUCTOR CARDS
═══════════════════════════════════ */
.instructor-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  color: var(--color-electric-blue);
  border: 2px solid #BFDBFE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
  overflow: hidden;
  flex: 0 0 auto;
  font-size: var(--text-sm);
}
.instructor-avatar img { width: 100%; height: 100%; object-fit: cover }

/* ═══════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════ */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.testimonial-card:hover { box-shadow: var(--shadow-md); border-color: #BFDBFE; transform: translateY(-2px) }
.testimonial-quote {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  color: var(--color-electric-blue);
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  opacity: 0.15;
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
}

/* ═══════════════════════════════════
   CTA DARK SECTION
═══════════════════════════════════ */
.cta-dark {
  background: var(--color-dark-bg);
  position: relative;
  overflow: hidden;
}
.cta-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 20% 50%, rgba(37,99,235,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 80% 50%, rgba(14,165,233,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.cta-dark-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
.cta-dark h2 { color: rgba(255,255,255,0.95) }
.cta-dark p { color: rgba(255,255,255,0.5) }

/* ═══════════════════════════════════
   PROGRESS & LMS COMPONENTS
═══════════════════════════════════ */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--color-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-electric-blue), var(--color-teal));
  border-radius: inherit;
  transition: width var(--transition-slow);
}
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  color: var(--color-amber-gold);
  font-size: var(--text-sm);
  line-height: 1;
}
.lesson-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.lesson-item:hover, .lesson-item.active {
  border-color: var(--color-electric-blue);
  background: #EFF6FF;
}
.lesson-item-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-text) }
.lesson-item-meta { font-size: var(--text-xs); color: var(--color-text-muted) }

/* Curriculum accordion */
.curriculum-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 2px }
.curriculum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-weight: 600;
  font-size: var(--text-sm);
}
.curriculum-header:hover { background: #E2E8F0 }
.curriculum-body { padding: var(--space-3); display: none }
.curriculum-section.open .curriculum-body { display: block }

/* ═══════════════════════════════════
   FILTER SIDEBAR
═══════════════════════════════════ */
.filter-sidebar { position: sticky; top: calc(var(--navbar-height) + 1.5rem) }
.filter-block { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-bottom: var(--space-4) }
.filter-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-4); letter-spacing: -.01em }
.filter-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer }
.filter-option label { font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast) }
.filter-option:hover label { color: var(--color-electric-blue) }
.filter-count { font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-muted); padding: 1px 7px; border-radius: var(--radius-full) }

/* Active filters */
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4) }
.active-filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #EFF6FF;
  color: var(--color-electric-blue);
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-full);
  padding: 4px 10px 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.active-filter-pill:hover { background: #DBEAFE }
.active-filter-remove { opacity: 0.7; font-size: 14px; line-height: 1; padding: 0 2px }

/* ═══════════════════════════════════
   DASHBOARD
═══════════════════════════════════ */
.dashboard-header {
  background: var(--color-dark-bg);
  padding: var(--space-7) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
.dashboard-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(37,99,235,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.dashboard-welcome { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: -.035em; margin-bottom: .5rem }
.dashboard-sub { font-size: var(--text-base); color: rgba(255,255,255,0.45) }

.dashboard-stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin-top: calc(-2.5rem); position: relative; z-index: 10 }
.dashboard-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dashboard-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.dashboard-stat-icon.blue { background: #EFF6FF }
.dashboard-stat-icon.teal { background: #E0F2FE }
.dashboard-stat-icon.gold { background: #FEF9C3 }
.dashboard-stat-icon.green { background: #D1FAE5 }
.dashboard-stat-val { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--color-text); letter-spacing: -.03em; margin-bottom: 4px }
.dashboard-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500 }

/* Progress course card */
.progress-course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  gap: 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.progress-course-card:hover { box-shadow: var(--shadow-md); border-color: #BFDBFE; transform: translateY(-2px) }
.progress-course-media { width: 120px; flex-shrink: 0; background: var(--color-muted) }
.progress-course-body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2) }
.progress-course-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--color-text); line-height: 1.3; letter-spacing: -.02em }
.progress-course-meta { font-size: var(--text-xs); color: var(--color-text-muted) }

/* ═══════════════════════════════════
   COURSE DETAIL
═══════════════════════════════════ */
.detail-hero {
  background: var(--color-dark-bg);
  padding: var(--space-8) 0;
  position: relative;
  overflow: hidden;
}
.detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 100% at 0% 50%, rgba(37,99,235,0.12) 0%, transparent 60%);
}
.detail-hero h1 { color: rgba(255,255,255,0.95) }
.detail-hero p { color: rgba(255,255,255,0.55) }

.what-you-learn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.learn-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.learn-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #065F46;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

/* Sidebar card */
.sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.sidebar-card-media { aspect-ratio: 16/9; background: var(--color-muted); position: relative }
.sidebar-card-body { padding: var(--space-5) }
.sidebar-price-row { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5) }
.sidebar-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--color-text); letter-spacing: -.04em }
.sidebar-original { font-size: var(--text-base); color: var(--color-text-muted); text-decoration: line-through }
.sidebar-discount { font-size: var(--text-sm); font-weight: 700; color: #065F46; background: #D1FAE5; padding: 2px 8px; border-radius: var(--radius-full) }

.includes-list { display: flex; flex-direction: column; gap: var(--space-2) }
.include-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted) }
.include-item-icon { font-size: var(--text-base); flex-shrink: 0 }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.footer {
  background: var(--color-dark-bg);
  border-top: 1px solid var(--color-dark-border);
  padding: var(--space-7) 0 var(--space-6);
}
.footer-grid {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3,1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-dark-border);
}
.footer-brand-text { font-size: var(--text-sm); color: rgba(255,255,255,0.35); line-height: 1.75; margin-top: var(--space-4); max-width: 240px }
.footer-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--space-4) }
.footer-link { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.35); margin-bottom: var(--space-2); transition: color var(--transition-fast) }
.footer-link:hover { color: rgba(255,255,255,0.8) }
.footer-bottom {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: rgba(255,255,255,0.2);
  font-size: var(--text-xs);
}
.footer .logo { color: rgba(255,255,255,0.9) }
.footer .logo span { color: var(--color-blue-vivid) }

/* ═══════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════ */
.fade-up, .slide-in, .scale-in {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-up { transform: translateY(32px) }
.slide-in { transform: translateX(-32px) }
.scale-in { transform: scale(0.95) }
.visible { opacity: 1; transform: translate(0) scale(1) }
.delay-1 { transition-delay: 80ms }
.delay-2 { transition-delay: 160ms }
.delay-3 { transition-delay: 240ms }
.delay-4 { transition-delay: 320ms }

/* ═══════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════ */
.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--color-electric-blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--transition-fast), height var(--transition-fast), background var(--transition-fast);
}
.custom-cursor.is-active {
  width: 36px;
  height: 36px;
  background: rgba(37,99,235,0.12);
  border: 1.5px solid var(--color-electric-blue);
}

/* ═══════════════════════════════════
   GRID UTILITIES
═══════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-5) }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5) }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5) }
.layout-catalog { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: start }
.layout-detail { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-7); align-items: start }
.sticky-sidebar { position: sticky; top: calc(var(--navbar-height) + 1.5rem) }

/* ═══════════════════════════════════
   FLEX UTILITIES
═══════════════════════════════════ */
.flex { display: flex }
.flex-center { display: flex; align-items: center; justify-content: center }
.flex-between { display: flex; align-items: center; justify-content: space-between }
.wrap { flex-wrap: wrap }
.gap-2 { gap: var(--space-2) }
.gap-3 { gap: var(--space-3) }
.gap-4 { gap: var(--space-4) }
.gap-5 { gap: var(--space-5) }

/* ═══════════════════════════════════
   SPACING UTILITIES
═══════════════════════════════════ */
.mt-4 { margin-top: var(--space-4) }
.mt-5 { margin-top: var(--space-5) }
.mt-6 { margin-top: var(--space-6) }
.mb-4 { margin-bottom: var(--space-4) }
.mb-5 { margin-bottom: var(--space-5) }
.mb-6 { margin-bottom: var(--space-6) }

/* ═══════════════════════════════════
   DIVIDER
═══════════════════════════════════ */
.divider { height: 1px; background: var(--color-border); margin: var(--space-5) 0 }

/* ═══════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 3.2rem;
    --text-3xl: 2.6rem;
    --text-2xl: 2rem;
    --space-8: 4.5rem;
    --space-7: 3rem;
  }
  .grid-4 { grid-template-columns: repeat(2,1fr) }
  .grid-3 { grid-template-columns: repeat(2,1fr) }
  .footer-grid { grid-template-columns: repeat(2,1fr) }
  .layout-detail, .layout-catalog { grid-template-columns: 1fr }
  .sticky-sidebar { position: static }
  .stats-band-inner { grid-template-columns: repeat(2,1fr) }
  .stats-band-item { border-bottom: 1px solid var(--color-dark-border) }
  .stats-band-item:nth-child(2), .stats-band-item:nth-child(4) { border-right: none }
  .dashboard-stat-cards { grid-template-columns: repeat(2,1fr) }
  .steps-grid::before { display: none }
  .what-you-learn { grid-template-columns: 1fr }
}

/* ═══════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --navbar-height: 64px;
    --space-8: 3.5rem;
    --space-7: 2.5rem;
  }
  .nav-links { display: none }
  .navbar-inner { gap: var(--space-3) }
  .navbar-inner > .flex { gap: var(--space-2) }
  .navbar .btn-ghost { display: none }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .footer-bottom { flex-direction: column; text-align: center }
  .section, .section-sm { padding-block: var(--space-7) }
  .flex-between { align-items: flex-start; flex-direction: column; gap: var(--space-4) }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) }
  .steps-grid::before { display: none }
  .hero-trust { gap: 1rem }
  .hero-trust-sep { display: none }
  .stats-band-inner { grid-template-columns: repeat(2,1fr) }
  .dashboard-stat-cards { grid-template-columns: repeat(2,1fr) }
  .progress-course-media { width: 80px }
}

/* ═══════════════════════════════════
   RESPONSIVE — SMALL MOBILE
═══════════════════════════════════ */
@media (max-width: 480px) {
  .container, .navbar-inner, .footer-grid, .footer-bottom { width: min(100% - 1.25rem, var(--container)) }
  .logo { font-size: 1.05rem }
  .btn-icon { width: 36px; height: 36px; font-size: .9rem }
  .dashboard-stat-cards { grid-template-columns: 1fr 1fr }
  .steps-grid { grid-template-columns: 1fr }
  h1 { font-size: 2.2rem }
  h2 { font-size: 1.75rem }
}

/* ═══════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important }
  .fade-up, .slide-in, .scale-in { opacity: 1; transform: none }
}

:focus-visible {
  outline: 2px solid var(--color-electric-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}