/* ==========================================================
   Netrademy — custom styles & animations
   (Layout/utility classes come from Tailwind via CDN)
   ========================================================== */

/* ---------- Base ---------- */
* { font-family: "Plus Jakarta Sans", sans-serif; }
.display { font-family: "Fraunces", serif; }
.mono { font-family: "JetBrains Mono", monospace; }
html { scroll-behavior: smooth; }
.glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #9EC4EE; border-radius: 999px; }
::selection { background: #F0B32E; color: #0A2540; }

/* ---------- Keyframes ---------- */
@keyframes heroIn   { from { opacity: 0; transform: translateY(24px); } }
@keyframes fadeIn   { from { opacity: 0; } }
@keyframes pop      { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes toastIn  { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes sweep    { to { background-size: 100% 100%; } }
@keyframes float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shine    { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes pulseRing{ 0% { box-shadow: 0 0 0 0 rgba(240,179,46,.55); } 70%,100% { box-shadow: 0 0 0 12px rgba(240,179,46,0); } }
@keyframes glow     { 0%,100% { box-shadow: 0 0 0 0 rgba(240,179,46,.0); } 50% { box-shadow: 0 0 14px 2px rgba(240,179,46,.55); } }
@keyframes blob     { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,20px) scale(1.15); } 100% { transform: translate(0,0) scale(1); } }
@keyframes blink    { 50% { opacity: 0; } }
@keyframes ping     { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tick     { 0% { transform: translateY(-6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes bob      { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }

/* ---------- Scroll progress + nav ---------- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #0B66C3, #F0B32E);
  z-index: 70; pointer-events: none;
}
#mainNav { transition: box-shadow .3s ease, background-color .3s ease; }
#mainNav.scrolled { box-shadow: 0 10px 30px rgba(17,24,39,.07); }

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: #0B66C3; border-radius: 2px;
  transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: #0B66C3; }

.logo-mark { transition: transform .5s cubic-bezier(.2,.9,.3,1.3); }
.logo-mark:hover { transform: rotate(-12deg) scale(1.08); }

/* ---------- Hero entrance ---------- */
.hero-in { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--d, 0s); }

/* Highlighter sweep behind "pay on the" */
.highlight {
  background-image: linear-gradient(#F0B32E, #F0B32E);
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  animation: sweep 1s .7s cubic-bezier(.7,0,.2,1) forwards;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Underline that draws in on reveal */
.draw-underline {
  background-image: linear-gradient(#F0B32E, #F0B32E);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 4px;
  padding-bottom: 6px; transition: background-size 1s .3s cubic-bezier(.7,0,.2,1);
}
.reveal.in .draw-underline { background-size: 100% 4px; }

/* Floating cohort card + tilt wrapper */
.float { animation: float 6s ease-in-out infinite; }
.tilt { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }

.card-glow {
  position: absolute; width: 220px; height: 220px; right: -60px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,179,46,.45), transparent 65%);
  filter: blur(10px); animation: blob 9s ease-in-out infinite; pointer-events: none;
}

.avatar-stack img, .avatar-stack div { transition: transform .3s ease; }
.avatar-stack:hover img, .avatar-stack:hover div { transform: translateX(4px); }
.avatar-stack:hover > :nth-child(2) { transform: translateX(8px); }
.avatar-stack:hover > :nth-child(3) { transform: translateX(12px); }
.avatar-stack:hover > :nth-child(4) { transform: translateX(16px); }

.play-ping { display: inline-block; animation: ping 2s ease-in-out infinite; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.stagger.in > * { opacity: 1; transform: none; }

/* Course cards animate each time the grid renders */
.card-in { animation: pop .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--d, 0s); }

/* ---------- Interactions ---------- */
.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(17,24,39,.12); }
.popular:hover { box-shadow: 0 18px 50px rgba(11,102,195,.4); }

.press { transition: transform .15s ease; }
.press:active, .shine:active { transform: scale(.97); }

.shine { position: relative; overflow: hidden; isolation: isolate; transition: transform .15s ease; }
.shine::after {
  content: ""; position: absolute; inset: 0; z-index: -0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-130%);
}
.shine:hover::after { transform: translateX(130%); transition: transform .8s ease; }
.shine-auto::after { animation: shine 4.5s ease-in-out infinite; }

.arrow-nudge i { display: inline-block; transition: transform .3s ease; }
.arrow-nudge:hover i { transform: translateX(5px); }

.pulse-soft { animation: pulseRing 2.2s ease-out infinite; }
.badge-glow { animation: glow 2.6s ease-in-out infinite; }

.icon-bob { transition: transform .3s; }
.lift:hover .icon-bob { animation: bob .8s ease-in-out infinite; }

.brand { transition: color .25s, transform .25s; cursor: default; }
.brand:hover { color: #0B66C3; transform: translateY(-2px); }

.learner-photo {
  box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px #F0B32E;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s ease;
}
.testimonial:hover .learner-photo { transform: scale(1.12) rotate(-4deg); box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px #0B66C3; }

.slide-hover { transition: transform .3s ease, border-color .3s ease; }
.slide-hover:hover { transform: translateX(6px); border-color: #0B66C3; }

.step-dot { transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
li:hover > .step-dot { transform: scale(1.15) rotate(-8deg); }

.spin-hover { transition: transform .35s ease; }
.spin-hover:hover { transform: rotate(90deg); }

.caret::after { content: "▍"; margin-left: 2px; animation: blink 1s steps(1) infinite; }

.price-tick.bump { animation: tick .35s ease-out; }

.search-input, .field { transition: border-color .25s, box-shadow .25s; }
.search-input:focus, .field:focus { border-color: #0B66C3; box-shadow: 0 0 0 4px rgba(11,102,195,.18); outline: none; }

/* FAQ open animation */
.faq summary { list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: -2px; font-size: 20px; font-weight: 700;
  transition: transform .3s ease;
}
.faq[open] summary::after { transform: rotate(45deg); color: #0B66C3; }
.faq[open] { background: #F8FAFC; border-radius: 12px; }
[data-theme="dark"] .faq[open] { background: #1C1E23; }
.faq[open] p { animation: heroIn .4s ease; }

/* ---------- Modals & toast ---------- */
.modal-backdrop { animation: fadeIn .25s ease both; }
.modal-panel { animation: pop .4s cubic-bezier(.2,.9,.3,1.15) both; }
#toast:not(.hidden) { animation: toastIn .35s ease both; }

/* ---------- Back to top ---------- */
#toTop { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }
#toTop:hover { background: #F0B32E; color: #0A2540; }

/* ==========================================================
   Light / dark theme
   Dark mode remaps the Tailwind colour classes used on the page.
   ========================================================== */
:root { --ring-gap: #fff; color-scheme: light; }

/* Logo swap + toggle button */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
.site-logo img { transition: transform .4s cubic-bezier(.2,.9,.3,1.3); }
.site-logo:hover img { transform: scale(1.04); }

.theme-toggle { position: relative; overflow: hidden; transition: background-color .3s, border-color .3s, transform .15s; }
.theme-toggle:hover { border-color: #0B66C3; }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle i { position: absolute; transition: transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .3s; }
.theme-toggle .icon-sun  { transform: translateY(140%) rotate(-90deg); opacity: 0; color: #F0B32E; }
.theme-toggle .icon-moon { transform: none; opacity: 1; }
[data-theme="dark"] .theme-toggle .icon-sun  { transform: none; opacity: 1; }
[data-theme="dark"] .theme-toggle .icon-moon { transform: translateY(-140%) rotate(90deg); opacity: 0; }

/* Smooth colour fade while switching */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important;
}

[data-theme="dark"] { --ring-gap: #18191D; color-scheme: dark; }
[data-theme="dark"] body,
[data-theme="dark"] .bg-\[\#FFFDF7\] { background-color: #0F1013; color: #F2F0EA; }
[data-theme="dark"] .bg-\[\#FFFDF7\]\/90 { background-color: rgba(15,16,19,.86); }
[data-theme="dark"] #mainNav.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* Surfaces (neutral charcoal, so the brand blue and yellow stay the stars) */
[data-theme="dark"] .bg-white   { background-color: #18191D; }
[data-theme="dark"] .bg-zinc-50 { background-color: #131417; }
[data-theme="dark"] .bg-zinc-100{ background-color: #24262B; }
[data-theme="dark"] .bg-zinc-900{ background-color: #2A2C31; }
[data-theme="dark"] .bg-\[\#F1F6FD\] { background-color: #12161D; }
[data-theme="dark"] .bg-\[\#E3EEFB\] { background-color: #11263F; }
[data-theme="dark"] .bg-\[\#EAF2FC\] { background-color: #13253B; }
[data-theme="dark"] .bg-\[\#E8FFF1\] { background-color: #13291F; }
[data-theme="dark"] .bg-\[\#FEF5E1\] { background-color: #2B2312; }
[data-theme="dark"] .bg-emerald-50   { background-color: #10261C; }

/* Brand blue panels stay blue; white cards inside them get a deeper blue */
[data-theme="dark"] .bg-\[\#0B66C3\] .bg-white { background-color: #0A4E96; }
[data-theme="dark"] #founders .bg-white.lg\:p-8 { background-color: #18191D; }

/* Brand yellow keeps dark ink text in both themes */
[data-theme="dark"] .bg-\[\#F0B32E\],
[data-theme="dark"] .highlight { color: #0A2540; }
[data-theme="dark"] .bg-\[\#F0B32E\] :is(.text-zinc-500,.text-zinc-600,.text-zinc-700,.text-zinc-900) { color: #3B2F0E; }
[data-theme="dark"] .icon-bob[style]:not(.text-white) { color: #0A2540; }
/* White chips and icon circles sitting on yellow stay white with dark ink */
[data-theme="dark"] .bg-\[\#F0B32E\] .bg-white { background-color: #fff; color: #0A2540; }
[data-theme="dark"] .bg-\[\#F0B32E\] .bg-white * { color: #0A2540; }

/* Text */
[data-theme="dark"] .text-zinc-900 { color: #F2F0EA; }
[data-theme="dark"] .text-zinc-700 { color: #D0D2D6; }
[data-theme="dark"] .text-zinc-600 { color: #B0B3BA; }
[data-theme="dark"] .text-zinc-500 { color: #8E929B; }
[data-theme="dark"] .text-zinc-400 { color: #6E727B; }
[data-theme="dark"] .text-emerald-700 { color: #4ADE80; }
[data-theme="dark"] .text-blue-700    { color: #6AAEF2; }
[data-theme="dark"] .text-\[\#0B66C3\] { color: #4F9BEA; }
[data-theme="dark"] .nav-link.active, [data-theme="dark"] .nav-link:hover { color: #4F9BEA; }
[data-theme="dark"] .nav-link::after { background: #4F9BEA; }

/* Borders */
[data-theme="dark"] .border-zinc-200 { border-color: #2C2F36; }
[data-theme="dark"] .border-zinc-400 { border-color: #4A4E57; }
[data-theme="dark"] .border-zinc-900 { border-color: #D4D4D8; }
[data-theme="dark"] .border-white    { border-color: #18191D; }
[data-theme="dark"] .border-amber-200   { border-color: #5A4618; }
[data-theme="dark"] .border-emerald-200 { border-color: #1F4A38; }
[data-theme="dark"] .border-blue-200    { border-color: #1E4673; }
[data-theme="dark"] :is(.border,.border-y,.border-t,.border-b,.border-l):not([class*="border-zinc"]):not([class*="border-["]):not([class*="border-white"]):not([class*="-200"]) { border-color: #2C2F36; }
[data-theme="dark"] .divide-y > * { border-color: #2C2F36; }
[data-theme="dark"] .lift:hover { box-shadow: 0 18px 40px rgba(0,0,0,.55); }
[data-theme="dark"] input::placeholder { color: #6E727B; }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .highlight { background-size: 100% 100% !important; }
  .draw-underline { background-size: 100% 4px !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Founder cards ---------- */
.founder-photo { box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px #F0B32E; transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
.lift:hover .founder-photo { transform: scale(1.08) rotate(-3deg); }
.linkedin-btn { transition: transform .3s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s ease; }
.linkedin-btn:hover { transform: translateY(-2px) scale(1.1); box-shadow: 0 8px 18px rgba(10,102,194,.45); }
@media (prefers-reduced-motion: reduce) { html.theme-anim * { transition: none !important; } }