/* ============================================================
   NextGen Tutors — Design Tokens & Base
   ============================================================ */

:root {
  /* Brand */
  --navy:        #092746;
  --navy-800:    #0a2c50;
  --navy-700:    #0e3a66;
  --blue:        #134477;
  --blue-600:    #1a5594;
  --lime:        #aece61;
  --lime-bright: #c4e07a;
  --lime-soft:   #e9f3d4;
  --lime-deep:   #8ba44d;
  --amber:       #f5b740;
  --amber-deep:  #d99417;

  /* Neutrals */
  --ink:      #0b1220;
  --slate-900:#0f172a;
  --slate-800:#1e293b;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748b;
  --slate-400:#94a3b8;
  --slate-300:#cbd5e1;
  --slate-200:#e2e8f0;
  --slate-100:#f1f5f9;
  --slate-50: #f8fafc;
  --cream:    #fcfaf3;
  --white:    #ffffff;

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-serif:   "Sanchez", Georgia, serif;
  --font-sans:    "Open Sans", system-ui, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm:  0 2px 8px rgba(9, 39, 70, 0.06);
  --sh-md:  0 10px 30px rgba(9, 39, 70, 0.10);
  --sh-lg:  0 22px 50px rgba(9, 39, 70, 0.16);
  --sh-xl:  0 30px 70px rgba(9, 39, 70, 0.22);
  --sh-float: 0 40px 90px rgba(4, 16, 32, 0.45);

  /* Easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --maxw: 1240px;
  --nav-h: 132px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--slate-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1; }
p { margin: 0; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--slate-100); }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 6px; border: 2px solid var(--slate-100); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }

@media (max-width: 760px) {
  :root { --nav-h: 72px; }
  .section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
}

/* ---------- Typography utilities ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.h-serif {
  font-family: var(--font-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 0.98;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate-500);
  font-weight: 500;
}

.text-lime { color: var(--lime-deep); }
.text-amber { color: var(--amber-deep); }
.italic-serif { font-style: italic; font-family: var(--font-serif); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: var(--r-md);
  transition: transform .18s var(--ease-spring), background .25s, box-shadow .25s, color .25s, border-color .25s;
  will-change: transform;
  overflow: hidden;
}
.btn:active { transform: scale(0.96); }

.btn--primary {
  background: var(--navy);
  color: var(--white);
  border-bottom: 4px solid #04162c;
  box-shadow: var(--sh-md);
}
.btn--primary:hover { background: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-lg); }

.btn--lime {
  background: var(--lime);
  color: var(--navy);
  border-bottom: 4px solid var(--lime-deep);
  box-shadow: 0 8px 24px rgba(174, 206, 97, 0.4);
}
.btn--lime:hover { background: var(--lime-bright); transform: translateY(-2px); }

.btn--amber {
  background: var(--amber);
  color: var(--navy);
  border-bottom: 4px solid var(--amber-deep);
}
.btn--amber:hover { background: #ffc658; transform: translateY(-2px); }

.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }

.btn--block { width: 100%; }

/* Shine sweep on buttons */
.btn--shine::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-expo);
}
.btn--shine:hover::after { left: 130%; }

/* ---------- Pill / chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--lime-soft);
  color: var(--navy);
  border: 1px solid rgba(174,206,97,0.45);
}

/* ---------- Reveal (scroll-in) base ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  will-change: transform, opacity;
}
[data-reveal-x] { opacity: 0; transform: translateX(var(--rx, -40px)); }
[data-reveal-scale] { opacity: 0; transform: scale(0.92); }

.reveal-ready [data-reveal],
.reveal-ready [data-reveal-x],
.reveal-ready [data-reveal-scale] { /* JS will animate */ }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-x], [data-reveal-scale] { opacity: 1 !important; transform: none !important; }
}

/* lucide icon micro-interaction */
.lucide, [data-lucide] svg, svg.lucide { transition: transform .35s var(--ease-spring), color .25s; }
.icon-pop:hover .lucide { transform: scale(1.18) rotate(7deg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}