:root {
  --ink: #0E0B2E;
  --ink-2: #1E1B4B;
  --indigo: #4338CA;
  --indigo-2: #6366F1;
  --amber: #F59E0B;
  --amber-2: #FBBF24;
  --teal: #0D9488;
  --emerald: #10B981;
  --cream: #FFFBF2;
  --paper: #F6F5FF;
  --line: rgba(67, 56, 202, 0.12);
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.02em;
}

.mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 10%, rgba(99, 102, 241, 0.35), transparent 60%),
    radial-gradient(35% 45% at 85% 15%, rgba(245, 158, 11, 0.28), transparent 60%),
    radial-gradient(45% 55% at 70% 90%, rgba(13, 148, 136, 0.25), transparent 60%);
  filter: blur(10px);
}

.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.marquee { display: flex; width: max-content; animation: scrollX 32s linear infinite; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }

.reveal {
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

.grad-text {
  background: linear-gradient(100deg, #4338CA 0%, #6366F1 40%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-amber {
  background: linear-gradient(100deg, #F59E0B, #FBBF24 60%, #F59E0B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg); transition: left 0.7s;
}
.btn-shine:hover::after { left: 130%; }

.course-card { transition: all 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.course-card:hover { transform: translateY(-6px); }
.course-card:hover .cc-icon { transform: scale(1.08) rotate(-4deg); }
.cc-icon { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }

.uni-card { transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.uni-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(67, 56, 202, 0.35); border-color: rgba(99, 102, 241, 0.4); }

.step-line { background-image: linear-gradient(90deg, #4338CA 0%, #F59E0B 100%); height: 3px; border-radius: 3px; }

.vs-pill { background: linear-gradient(135deg, #4338CA, #6366F1); box-shadow: 0 8px 24px -8px rgba(67, 56, 202, 0.5); }

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
  background: linear-gradient(90deg, #F59E0B, #4338CA); transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

.tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; display: inline-block;
}

.search-glow:focus-within { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 20px 50px -12px rgba(67, 56, 202, 0.4); }

.star-fill { color: #F59E0B; }

.blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(40px); opacity: 0.5; }

.counter { font-variant-numeric: tabular-nums; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer-bar {
  background: linear-gradient(90deg, #4338CA 0%, #6366F1 40%, #F59E0B 60%, #4338CA 100%);
  background-size: 200% 100%; animation: shimmer 4s linear infinite;
}

.step-dot {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid rgba(67, 56, 202, 0.12); transition: all 0.3s;
}
.step-item:hover .step-dot { background: linear-gradient(135deg, #4338CA, #6366F1); color: #fff; border-color: transparent; transform: scale(1.08); }

.grad-border { position: relative; background: #fff; border-radius: 24px; }
.grad-border::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(245, 158, 11, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.dots-bg {
  background-image:
    radial-gradient(circle at 20% 30%, white 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, white 1px, transparent 1px);
  background-size: 30px 30px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EEEAFB; }
::-webkit-scrollbar-thumb { background: linear-gradient(#6366F1, #4338CA); border-radius: 10px; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform 0.25s; }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}