/* ===========================================================================
   Akshara Edutech — design system
   ---------------------------------------------------------------------------
   Warm paper light theme (primary, default) + a true dark theme.

   Deliberate choices, so nobody "fixes" them later:
   - Background is warm off-white (#FAF7F0), not #FFF. Students stare at this
     for two-hour mock tests; paper white is kinder than screen white.
   - Display type is a serif (Fraunces). Every ed-tech site uses geometric sans
     for headlines; a serif reads like a textbook, which is the point.
   - Shadows are warm-tinted, never neutral grey — grey shadows on a warm
     background look muddy.
   - Correct/wrong/review colours are fixed and never reused for anything else,
     because in an exam UI those three colours carry meaning.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --ink:            #191A1F;
  --ink-soft:       #4A4D5C;
  --ink-faint:      #82869A;

  --indigo:         #22307A;
  --indigo-700:     #1A2560;
  --indigo-100:     #E6E9F7;

  --marigold:       #E07B18;
  --marigold-100:   #FDF0DF;

  --paper:          #FAF7F0;
  --surface:        #FFFFFF;
  --surface-2:      #F4F1E9;
  --line:           #E6E1D5;
  --line-strong:    #D5CEBE;

  /* Exam identities */
  --neet:           #12805C;
  --jee:            #22307A;
  --cuet:           #B8451F;

  /* Answer states — reserved meanings */
  --correct:        #12805C;
  --correct-bg:     #E4F3EC;
  --wrong:          #C2321B;
  --wrong-bg:       #FBE9E5;
  --review:         #8B5CF6;
  --review-bg:      #F1EAFE;
  --skipped:        #A0A4B8;

  --radius:         14px;
  --radius-lg:      22px;
  --shadow-sm:      0 1px 2px rgba(60,44,20,.06);
  --shadow:         0 2px 4px rgba(60,44,20,.05), 0 8px 22px rgba(60,44,20,.07);
  --shadow-lg:      0 4px 8px rgba(60,44,20,.06), 0 20px 48px rgba(60,44,20,.11);

  --sans:  'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --ink:            #F0EEE9;
  --ink-soft:       #B4B2AC;
  --ink-faint:      #7E7C78;

  --indigo:         #8D9BEC;
  --indigo-700:     #A5B0F2;
  --indigo-100:     #1E2138;

  --marigold:       #EFA24A;
  --marigold-100:   #2E2313;

  --paper:          #14151A;
  --surface:        #1C1E26;
  --surface-2:      #24262F;
  --line:           #2E313C;
  --line-strong:    #3C4050;

  --neet:           #3CBF92;
  --jee:            #8D9BEC;
  --cuet:           #E8825C;

  --correct:        #3CBF92;
  --correct-bg:     #16302A;
  --wrong:          #F0715A;
  --wrong-bg:       #351C1A;
  --review:         #A88BFA;
  --review-bg:      #251E3A;
  --skipped:        #6A6E80;

  --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
  --shadow:         0 2px 4px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.4);
  --shadow-lg:      0 4px 8px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}

/* Paper grain. Two hairline gradients, no image request — keeps the warm
   background from looking like flat #FAF7F0 fill. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    repeating-linear-gradient(0deg,   transparent 0 3px, rgba(120,90,40,.014) 3px 4px),
    repeating-linear-gradient(90deg,  transparent 0 3px, rgba(120,90,40,.014) 3px 4px);
}
:root[data-theme="dark"] body::before { opacity: .35;
  background:
    repeating-linear-gradient(0deg,  transparent 0 3px, rgba(255,255,255,.012) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.08rem; }

a { color: var(--indigo); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
input, button, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; position: relative; z-index: 1; }
.wrap-narrow { max-width: 760px; }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--marigold);
}
.lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }

/* Marigold underline on key words — hand-drawn feel, not a highlighter block */
.underline-sketch {
  background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--marigold) 34%, transparent) 62%);
  background-size: 100% 100%;
  padding: 0 .06em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--indigo); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--indigo-700); box-shadow: var(--shadow); transform: translateY(-1px); }
:root[data-theme="dark"] .btn-primary { color: #14151A; }

.btn-accent { background: var(--marigold); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover:not(:disabled) { filter: brightness(.94); transform: translateY(-1px); }
:root[data-theme="dark"] .btn-accent { color: #14151A; }

.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn-sm { padding: 8px 15px; font-size: 13.5px; border-radius: 9px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.card-pad { padding: 26px; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chip-neet { background: color-mix(in srgb, var(--neet) 12%, transparent); color: var(--neet); border-color: color-mix(in srgb, var(--neet) 26%, transparent); }
.chip-jee  { background: color-mix(in srgb, var(--jee) 12%, transparent);  color: var(--jee);  border-color: color-mix(in srgb, var(--jee) 26%, transparent); }
.chip-cuet { background: color-mix(in srgb, var(--cuet) 12%, transparent); color: var(--cuet); border-color: color-mix(in srgb, var(--cuet) 26%, transparent); }
.chip-free { background: var(--correct-bg); color: var(--correct); border-color: color-mix(in srgb, var(--correct) 28%, transparent); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 17px; }
.label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.hint  { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--indigo) 15%, transparent);
}
.input::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.input.is-error, .select.is-error { border-color: var(--wrong); }
.error-text { color: var(--wrong); font-size: 12.5px; margin-top: 6px; font-weight: 500; }
.input-mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: 12px;
  font-size: 14px; border: 1px solid; line-height: 1.55;
}
.alert-info    { background: var(--indigo-100);  color: var(--indigo);  border-color: color-mix(in srgb, var(--indigo) 22%, transparent); }
.alert-success { background: var(--correct-bg);  color: var(--correct); border-color: color-mix(in srgb, var(--correct) 26%, transparent); }
.alert-warn    { background: var(--marigold-100);color: var(--marigold);border-color: color-mix(in srgb, var(--marigold) 30%, transparent); }
.alert-error   { background: var(--wrong-bg);    color: var(--wrong);   border-color: color-mix(in srgb, var(--wrong) 26%, transparent); }

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 17px; height: 17px; flex: none;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 8px 14px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-link.active { background: var(--surface-2); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 9px; }

.brand { display: flex; align-items: center; gap: 11px; color: inherit; }
.brand-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--indigo), var(--indigo-700));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .brand-mark { color: #14151A; }
.brand-text b { font-family: var(--serif); font-size: 17px; font-weight: 600; display: block; letter-spacing: -.01em; }
.brand-text span { font-size: 11.5px; color: var(--ink-faint); display: block; margin-top: -3px; letter-spacing: .02em; }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, transform .12s, background .15s;
}
.icon-btn:hover { border-color: var(--indigo); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; stroke: var(--ink-soft); fill: none; stroke-width: 1.8; }
.icon-btn:hover svg { stroke: var(--indigo); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 84px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding: 56px 0 40px;
}
.footer-grid h5 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 15px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-soft); font-size: 14.5px; }
.footer-grid a:hover { color: var(--indigo); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-sm { gap: 8px; } .gap { gap: 14px; } .gap-lg { gap: 24px; }
.wrap-flex { flex-wrap: wrap; }
.section { padding: 84px 0; }
.section-sm { padding: 52px 0; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}

/* Reveal on scroll — subtle, no bounce */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .nav-links {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 14px 20px 22px; box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform .25s ease;
  }
  .nav-links.open { transform: none; }
  .nav-link { padding: 12px 14px; font-size: 15.5px; }
  .nav-toggle { display: grid; }
  .section { padding: 58px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; }
}