/* ============================================================
   Meridian — base layer: reset, typography, layout primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-field);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Georgian needs a face that actually has the glyphs */
:lang(ka), [lang='ka'] {
  --font-display: 'Noto Sans Georgian', 'Sora', system-ui, sans-serif;
  --font-body: 'Noto Sans Georgian', 'Inter', system-ui, sans-serif;
  --font-serif: 'Noto Serif Georgian', 'Newsreader', Georgia, serif;
  letter-spacing: 0;
}

/* Arabic: its own faces, no letter-spacing (it breaks joined letters) */
:lang(ar), [lang='ar'] {
  --font-display: 'Noto Kufi Arabic', 'Sora', system-ui, sans-serif;
  --font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  --font-serif: 'Noto Sans Arabic', 'Newsreader', serif;
  letter-spacing: 0;
}
[lang='ar'] .eyebrow, [lang='ar'] h1, [lang='ar'] h2, [lang='ar'] h3 { letter-spacing: 0 !important; }
[lang='ar'] h1, [lang='ar'] h2 { line-height: 1.35; }
/* Right-to-left: arrows and chevrons point the other way */
[dir='rtl'] .btn svg:last-child:not(:first-child), [dir='rtl'] .btn-link svg, [dir='rtl'] .rtl-flip { transform: scaleX(-1); }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

ul, ol { list-style: none; padding: 0; }

/* flex/grid display rules must not defeat the hidden attribute */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand); color: var(--brand-ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); }

p { text-wrap: pretty; }

.display {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-hover);
}

[data-theme='light'] .eyebrow { color: var(--royal-700); }
[data-theme='light'] .on-field .eyebrow { color: #ffffff; }

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.strong { color: var(--text-strong); }
.mono { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.02em; }

/* The lari sign (U+20BE) is missing from Sora/Inter, and the Georgian webfont
   subset claims the codepoint without shipping the glyph — which stops the
   fallback chain at a notdef box. Printing it from the system UI font fixes it. */
.gel {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: inherit;
}

.gradient-text {
  background: linear-gradient(100deg, var(--logo-a) 0%, var(--logo-b) 44%, var(--logo-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container-wide { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-9); position: relative; }
.section-sm { padding-block: var(--space-8); }
.section-head { max-width: 68ch; margin-bottom: var(--space-7); }
.section-head .lede { margin-top: var(--space-4); }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.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;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 999;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--brand-ink); font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* Faint meridian grid that reinforces the brand idea */
.grid-backdrop {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}

.section-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  border: 0;
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal='left']  { transform: translate3d(-28px, 0, 0); }
[data-reveal='right'] { transform: translate3d(28px, 0, 0); }
[data-reveal='scale'] { transform: scale(0.94); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Scrollbar ---------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--brand); background-clip: content-box; }
}

/* Theme swap should feel like a dimmer, not a flash */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 380ms var(--ease-in-out),
              border-color 380ms var(--ease-in-out),
              color 260ms var(--ease-in-out),
              fill 260ms var(--ease-in-out) !important;
}

/* ------------------------------------------------------------ ambient light
   Three soft lights drift very slowly behind the content, plus a faint
   meridian grid that breathes. Transform/opacity only; static when the
   visitor asks for reduced motion. */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.am-a, .am-b, .am-c { width: 62vmax; height: 62vmax; filter: blur(90px); }
.am-a { left: -18vmax; top: -12vmax; background: radial-gradient(circle, rgba(21, 83, 230, 0.42), transparent 65%); animation: am-drift-a 46s ease-in-out infinite alternate; }
.am-b { right: -20vmax; top: 30vh; background: radial-gradient(circle, rgba(41, 169, 224, 0.26), transparent 65%); animation: am-drift-b 58s ease-in-out infinite alternate; }
.am-c { left: 20vw; bottom: -30vmax; background: radial-gradient(circle, rgba(255, 215, 110, 0.10), transparent 65%); animation: am-drift-c 64s ease-in-out infinite alternate; }
.am-grid {
  inset: -10%; border-radius: 0;
  background-image:
    linear-gradient(to right, rgba(124, 168, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 168, 255, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
  animation: am-grid 30s linear infinite;
}
@keyframes am-drift-a { to { transform: translate3d(22vw, 18vh, 0) scale(1.15); } }
@keyframes am-drift-b { to { transform: translate3d(-26vw, -14vh, 0) scale(0.9); } }
@keyframes am-drift-c { to { transform: translate3d(18vw, -22vh, 0) scale(1.2); } }
@keyframes am-grid { to { transform: translate3d(88px, 88px, 0); } }

[data-theme='light'] .am-a { background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 65%); }
[data-theme='light'] .am-b { background: radial-gradient(circle, rgba(43, 80, 216, 0.38), transparent 65%); }
[data-theme='light'] .am-c { background: radial-gradient(circle, rgba(140, 214, 255, 0.55), transparent 65%); }
[data-theme='light'] .am-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
/* Moving light: two soft beams sweep across, and meridian lines flow along */
.am-beam { left: -40vw; top: -20vh; width: 45vw; height: 140vh; border-radius: 0 !important; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(120, 180, 255, 0.07), transparent);
  animation: am-beam 22s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.am-beam-2 { animation-delay: -11s; animation-duration: 28s; }
@keyframes am-beam { from { transform: translate3d(0, 0, 0) rotate(18deg); } to { transform: translate3d(190vw, 0, 0) rotate(18deg); } }
.am-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-lines path { fill: none; stroke: rgba(120, 170, 255, 0.10); stroke-width: 1.2; stroke-dasharray: 14 86;
  animation: am-flow 18s linear infinite; }
.am-lines path:nth-child(2) { animation-duration: 24s; animation-direction: reverse; }
.am-lines path:nth-child(3) { animation-duration: 30s; }
@keyframes am-flow { to { stroke-dashoffset: -100; } }
/* light mode: the field is bright, so movement shows as white light and deeper blues */
[data-theme='light'] .am-beam { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); }
[data-theme='light'] .am-lines path { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-dasharray: 18 82; }
[data-theme='light'] .am-a { animation-duration: 26s; }
[data-theme='light'] .am-b { animation-duration: 32s; }
[data-theme='light'] .am-c { animation-duration: 36s; }
@media (prefers-reduced-motion: reduce) { .ambient i, .am-lines path { animation: none !important; } }

/* ------------------------------------------------------------ light-mode ink
   Text that sits straight on the dodger-blue field gets deep-navy ink;
   anything inside a white surface keeps the softer greys. */
[data-theme='light'] main {
  --text: #061637;
  --text-strong: #030c22;
  --text-muted: #0a2250;
  --text-dim: #163872;
}
[data-theme='light'] main :is(.card, .plan, .panel, .filter-panel, .globe-panel, .lock-card, .modal,
  .deadline-rail, .cta-band, .explore-bar, .hl-card, .fact, .method, .price-lines, .tutor-stats .card, .compare-wrap, .success-card) {
  --text: #0d2148;
  --text-strong: #061229;
  --text-muted: #46608f;
  --text-dim: #5f769f;
}
/* (doubled class: the :is() list above carries .tutor-stats .card's weight) */
[data-theme='light'] main .plan.plan-premium.plan-premium { --text-strong: #fff; --text: #eaf1ff; --text-muted: #c3d1ef; --text-dim: #93a6cf; }
[data-theme='light'] .eyebrow { color: #0a2a74; }
[data-theme='light'] .btn-link { color: #0a2a74; }
[data-theme='light'] main :is(.card, .plan, .hl-card, .fact) .btn-link { color: var(--royal-700); }
[data-theme='light'] .pillar-mark, [data-theme='light'] .value-icon { background: #ffffff; }