:root {
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --bg0: #070a0f;
  --bg1: #0b1020;
  --fg0: #eef2ff;
  --fg1: color-mix(in oklab, var(--fg0) 75%, #aab4d8);

  --card: color-mix(in oklab, #0f1630 65%, transparent);
  --stroke: color-mix(in oklab, var(--fg0) 12%, transparent);
  --shadow: 0 24px 80px color-mix(in oklab, #000 55%, transparent);

  --r-xl: 28px;
  --r-lg: 18px;
  --r-md: 12px;

  --s-0: 6px;
  --s-1: 10px;
  --s-2: 14px;
  --s-3: 20px;
  --s-4: 28px;
  --s-5: 40px;
  --s-6: 64px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  --accent0: #7c3aed;
  --accent1: #22c55e;
  --accent2: #38bdf8;
  --accent3: #fb7185;
}

/* Accents */
:root[data-accent="aurora"] { --accent0: #38bdf8; --accent1: #22c55e; --accent2: #fb7185; }
:root[data-accent="ember"] { --accent0: #fb7185; --accent1: #f59e0b; --accent2: #a78bfa; }
:root[data-accent="neon"] { --accent0: #22c55e; --accent1: #38bdf8; --accent2: #a78bfa; }

/* Light theme */
:root[data-theme="light"] {
  --bg0: #f7f8ff;
  --bg1: #eef1ff;
  --fg0: #0b0f1a;
  --fg1: color-mix(in oklab, var(--fg0) 70%, #58608a);
  --card: color-mix(in oklab, #fff 75%, transparent);
  --stroke: color-mix(in oklab, #0b0f1a 12%, transparent);
  --shadow: 0 24px 70px color-mix(in oklab, #0b0f1a 18%, transparent);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg0: #f7f8ff;
    --bg1: #eef1ff;
    --fg0: #0b0f1a;
    --fg1: color-mix(in oklab, var(--fg0) 70%, #58608a);
    --card: color-mix(in oklab, #fff 75%, transparent);
    --stroke: color-mix(in oklab, #0b0f1a 12%, transparent);
    --shadow: 0 24px 70px color-mix(in oklab, #0b0f1a 18%, transparent);
  }
}

/* Persian / RTL mode */
:root[data-lang="fa"] {
  --font-display: "Vazirmatn", Tahoma, "Segoe UI", Arial, system-ui, sans-serif;
  --font-sans: "Vazirmatn", Tahoma, "Segoe UI", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg0);
  text-align: start;
  background:
    radial-gradient(1200px 680px at 8% -12%, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 92% 6%, color-mix(in oklab, var(--accent0) 16%, transparent), transparent 58%),
    radial-gradient(760px 520px at 72% 108%, color-mix(in oklab, var(--accent1) 14%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: hidden;
}

[dir="rtl"] body {
  direction: rtl;
}

.skip {
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card);
  color: var(--fg0);
  border: 1px solid var(--stroke);
  transform: translateY(-140%);
  transition: transform var(--dur-2) var(--ease);
  z-index: 1000;
}
.skip:focus { transform: translateY(0); outline: none; }

a { color: inherit; text-decoration-color: color-mix(in oklab, var(--fg1) 55%, transparent); }
a:hover { text-decoration-color: color-mix(in oklab, var(--accent0) 65%, transparent); }

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.glass {
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--card) 75%, transparent);
  color: var(--fg0);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent0) 40%, var(--stroke));
}
.btn:active { transform: translateY(0); }

.pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--card) 85%, transparent);
  color: var(--fg1);
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.muted { color: var(--fg1); }

/* Below-the-fold rendering hint */
.cv {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* Skeletons */
.skel {
  position: relative;
  overflow: hidden;
}
.skel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--card) 70%, transparent),
    color-mix(in oklab, var(--card) 92%, transparent),
    color-mix(in oklab, var(--card) 70%, transparent)
  );
  transform: translateX(-60%);
  animation: skel 1100ms var(--ease) infinite;
}
.skel__line {
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  margin: 8px 0;
}
.skel__line--sm { width: 40%; }
@keyframes skel {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
  .skel::before { display: none; }
}

/* Reveal animation hook */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal].is-in { transition: none; }
}