/* ============================================================
   POLVORIA — main.css
   Single-page site. References tokens.css only.
   No hardcoded hex, no px font-sizes, no physical left/right.
   Layout is built entirely on CSS logical properties so it
   mirrors automatically for Persian (dir="rtl").
   ============================================================ */

@import url("tokens.css");

/* ---- Kalameh (Persian/Arabic) — self-hosted, no third-party CDN ----
   Regular covers 400/500; Bold covers 600/700. font-display:swap so text
   paints immediately and re-flows to Kalameh once loaded. */
@font-face {
  font-family: "Kalameh";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/kalameh/KalamehWeb_Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Kalameh";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/kalameh/KalamehWeb_Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Kalameh";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/kalameh/KalamehWeb_Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Kalameh";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/kalameh/KalamehWeb_Bold.woff2") format("woff2");
}

/* ---- Persian / RTL: re-point the font tokens once ----
   Every rule already uses var(--font-display/-body/-mono),
   so this single block swaps all text to Kalameh. The
   [dir="rtl"] selector also covers Arabic; :lang(ar) below
   then overrides the family with a dedicated Arabic face. */
:lang(fa),
[dir="rtl"] {
  --font-display: var(--font-fa);
  --font-body:    var(--font-fa);
  --font-mono:    var(--font-fa);
}

/* ---- Arabic: same RTL mirroring, dedicated Arabic font face.
   Comes after the block above so it wins for :lang(ar). */
:lang(ar) {
  --font-display: var(--font-ar);
  --font-body:    var(--font-ar);
  --font-mono:    var(--font-ar);
}

/* Latin technical terms & metrics stay LTR + Latin inside RTL copy */
.tech,
bdi {
  unicode-bidi: isolate;
  font-family: var(--font-mono);
  font-style: normal;
}

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

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* signature motif: faint convergence grid on the page field only */
  background-image:
    linear-gradient(var(--green) 1px, transparent 1px),
    linear-gradient(90deg, var(--green) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  opacity: .965;
  z-index: -1;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--color-accent-text); text-decoration: none; }
::selection { background: var(--green); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Skip link */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-cta);
  color: var(--color-cta-text);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-mid) var(--ease-standard);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-y); border-block-end: 1px solid var(--color-border); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-block-end: var(--space-4);
  display: block;
}
:lang(fa) .eyebrow, [dir="rtl"] .eyebrow { letter-spacing: normal; }

.sec-title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-3);
  text-wrap: balance;
}
.sec-note {
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-block-end: var(--space-8);
  font-size: var(--text-lg);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease-standard),
              background var(--dur-mid) var(--ease-standard);
}
.site-header.is-scrolled {
  border-block-end-color: var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.brand .wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-heading);
}
/* keep the wordmark visually LTR even in RTL (brand mark is not mirrored) */
.brand { direction: ltr; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--color-heading); }

/* language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  direction: ltr; /* EN · TR · FA always reads left-to-right */
}
.lang-switch a {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-subtle);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.lang-switch a[aria-current="true"] { color: var(--color-heading); background: var(--color-surface); }
.lang-switch .sep { color: var(--color-border-strong); }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-mid) var(--ease-standard),
              border-color var(--dur-mid) var(--ease-standard),
              color var(--dur-mid) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-cta); color: var(--color-cta-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-cta-hover); }
.btn--secondary {
  background: transparent;
  color: var(--color-accent-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) {
  border-color: var(--green-text);
  background: var(--color-surface-hover);
}
.btn--ghost { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover:not(:disabled) { color: var(--color-heading); }
/* directional arrow flips for RTL; convergence marks never do */
.btn .arrow { transition: transform var(--dur-fast) var(--ease-standard); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-block-end: 1px solid var(--color-border);
  overflow: hidden;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero .wrap { width: 100%; position: relative; z-index: 1; }
.brandline { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-8); direction: ltr; }
.brandline .wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  max-width: 16ch;
  margin-block-end: var(--space-5);
  text-wrap: balance;
}
:lang(fa) .hero h1, [dir="rtl"] .hero h1 { letter-spacing: normal; }
.hero h1 em { font-style: normal; color: var(--color-accent-text); }
.hero p.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 54ch;
  margin-block-end: var(--space-7);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ============================================================
   WORK CARDS
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-standard),
              background var(--dur-mid) var(--ease-standard);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}
.card .kicker {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-block-end: var(--space-3);
}
:lang(fa) .card .kicker, [dir="rtl"] .card .kicker { letter-spacing: normal; }
.card h3 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.card .metric {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-accent-text);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  letter-spacing: var(--tracking-mono);
}
.card .badge {
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  margin-block-end: var(--space-3);
}

/* ============================================================
   RESEARCH / APPROACH
   ============================================================ */
.approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}
.step {
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-4);
}
.step .n {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-text);
  margin-block-end: var(--space-2);
}
.step h3 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

.callout {
  margin-block-start: var(--space-7);
  padding: var(--space-6);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-accent);
}
.callout p { color: var(--color-text); max-width: 70ch; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
  align-items: start;
}
.about-lead { font-size: var(--text-lg); color: var(--color-text); max-width: 60ch; }
.about-lead + .about-lead { margin-block-start: var(--space-4); }
.open-to { list-style: none; display: grid; gap: var(--space-3); }
.open-to li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.open-to .marker { color: var(--color-accent-text); font-family: var(--font-mono); font-size: var(--text-caption); flex-shrink: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-8);
  align-items: start;
}
.field { margin-block-end: var(--space-4); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-heading);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: start;
  transition: border-color var(--dur-mid) var(--ease-standard),
              box-shadow var(--dur-mid) var(--ease-standard);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-subtle); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--green-text); box-shadow: var(--focus-ring); }
/* email stays LTR even in RTL form */
.field input[type="email"] { direction: ltr; text-align: start; }

.form-status {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-accent-text);
  margin-block-start: var(--space-3);
  min-height: 1.2em;
}

.contact-aside { display: grid; gap: var(--space-4); align-content: start; }
.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-mid) var(--ease-standard),
              background var(--dur-mid) var(--ease-standard);
}
.contact-link:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.contact-link .label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  display: block;
}
.contact-link .value { color: var(--color-heading); font-size: var(--text-base); }
.contact-link svg { flex-shrink: 0; color: var(--color-accent-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding-block: var(--space-9);
  border-block-end: none;
  text-align: center;
}
.site-footer .wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-heading);
  display: inline-block;
  direction: ltr;
  margin-block-end: var(--space-4);
}
.site-footer .taglines { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); }
.site-footer .taglines span { color: var(--color-text-muted); font-size: var(--text-base); }
.site-footer .meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-subtle); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(78vw, 320px);
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: var(--space-6);
    margin-inline-start: 0;
    padding-inline: var(--gutter);
    background: var(--color-surface);
    border-inline-start: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
    /* closed: out of flow + untabbable, no off-screen translate (avoids overflow) */
    visibility: hidden;
    opacity: 0;
    transform: translateX(6%);
    transition: opacity var(--dur-mid) var(--ease-standard),
                transform var(--dur-mid) var(--ease-out),
                visibility 0s linear var(--dur-mid);
  }
  [dir="rtl"] .nav-links { transform: translateX(-6%); }
  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .nav-links a { font-size: var(--text-lg); color: var(--color-heading); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover { transform: none; }
  * { transition-duration: 0.001ms !important; }
}

/* Scroll-reveal (progressive enhancement — JS adds .reveal-ready) */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------- Coming soon — robotic terminal window ---------------- */
.soon {
  position: relative;
  max-inline-size: 720px;
  margin-inline: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(63, 160, 92, 0.12), transparent 60%),
    var(--color-surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* faint scanlines for the robotic/terminal feel */
.soon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}

.soon__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface-sunk);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-subtle);
}
.soon__dots { display: inline-flex; gap: 6px; }
.soon__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-border-strong); }
.soon__dots i:nth-child(2) { background: var(--color-accent); }
.soon__dots i:nth-child(3) { background: var(--color-accent-text); }
.soon__path { color: var(--color-text-muted); }
.soon__live {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-text);
  text-transform: uppercase;
}
.soon__live-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--color-accent-text);
  box-shadow: var(--focus-ring);
  animation: soon-pulse 1.6s var(--ease-standard) infinite;
}

.soon__body {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.soon__bot {
  inline-size: clamp(64px, 12vw, 92px);
  block-size: auto;
  display: block;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.soon__bot-head { fill: var(--color-surface-hover); }
.soon__bot-tip { fill: var(--color-accent-text); stroke: none; animation: soon-pulse 1.6s var(--ease-standard) infinite; }
.soon__mouth { fill: var(--color-accent); stroke: none; }
.soon__eye {
  fill: var(--color-accent-text);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: soon-blink 3.6s steps(1, end) infinite;
}

.soon__title {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-heading);
  margin-block-end: var(--space-4);
}
.soon__desc {
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}
.soon__status {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-text);
}
.soon__caret {
  display: inline-block;
  inline-size: 8px;
  block-size: 1em;
  margin-inline-start: 4px;
  vertical-align: -2px;
  background: var(--color-accent-text);
  animation: soon-caret 1.06s steps(1, end) infinite;
}

/* RTL / non-Latin scripts: no uppercase or Latin letter-spacing */
:lang(fa) .soon__title, :lang(ar) .soon__title, [dir="rtl"] .soon__title,
:lang(fa) .soon__live, :lang(ar) .soon__live, [dir="rtl"] .soon__live {
  text-transform: none;
  letter-spacing: normal;
}

@keyframes soon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes soon-blink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 98% { transform: scaleY(0.1); } }
@keyframes soon-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .soon__eye, .soon__bot-tip, .soon__live-dot, .soon__caret { animation: none; }
}

/* ============================================================
   LIGHT STUDIO RESTYLE — playful, multi-color layer
   (refs: frankli, phenomenonstudio, helloaria)
   Palette is flipped in tokens.css; this layer adds the studio
   feel: soft shadows, varied accent colors, alternating section
   panels, decorative shapes — so the page is never monotone.
   ============================================================ */

::selection { background: var(--green); color: #fff; }

/* Alternating section panels break the single-color field (light pages only) */
body:not(.theme-dark) #services { background: var(--white); }
body:not(.theme-dark) #work     { background: var(--white); }
body:not(.theme-dark) #research { background: var(--cream-2); }
body:not(.theme-dark) #contact  { background: var(--green-soft); }

/* Cards: soft floating panels */
.card { box-shadow: var(--shadow-1); }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-6px); }
.contact-link { box-shadow: var(--shadow-1); }

/* Services: each card carries a playful colored chip */
#services .card::before {
  content: "";
  display: block;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 14px;
  margin-block-end: var(--space-4);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, #fff 35%, transparent);
}
#services .card:nth-child(1)::before { background: var(--green); }
#services .card:nth-child(2)::before { background: var(--violet); }
#services .card:nth-child(3)::before { background: var(--coral); }
#services .card:nth-child(4)::before { background: var(--gold); }
#services .card:nth-child(5)::before { background: var(--violet); }
#services .card:nth-child(6)::before { background: var(--green); }
#services .card h3 { font-size: var(--text-xl); }

/* Research steps: each accent bar a different color (light pages only) */
body:not(.theme-dark) #research .step:nth-child(1) { border-inline-start-color: var(--green); }
body:not(.theme-dark) #research .step:nth-child(2) { border-inline-start-color: var(--violet); }
body:not(.theme-dark) #research .step:nth-child(3) { border-inline-start-color: var(--coral); }
body:not(.theme-dark) #research .step:nth-child(4) { border-inline-start-color: var(--gold); }

/* Callout gets a warm accent instead of green for variety (light pages only) */
body:not(.theme-dark) .callout { border-inline-start-color: var(--coral); background: var(--white); }

/* Hero: retire the dark particle net, add soft geometric shapes */
.hero-canvas { display: none; }
.hero { background: var(--color-bg); }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hero::before {
  inline-size: clamp(220px, 34vw, 460px);
  block-size: clamp(220px, 34vw, 460px);
  background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 70%);
  inset-block-start: -8%;
  inset-inline-end: -6%;
}
.hero::after {
  inline-size: clamp(240px, 40vw, 520px);
  block-size: clamp(240px, 40vw, 520px);
  background: radial-gradient(circle at 50% 50%, var(--violet-soft), transparent 70%);
  inset-block-end: -14%;
  inset-inline-start: -10%;
}
.hero h1 em { color: var(--coral); }

/* Robotic "Coming soon" window stays a DARK terminal on the light page.
   Remap the semantic color vars locally so the existing .soon rules
   render dark with bright accents. */
.soon {
  --color-surface:       var(--term-bg);
  --color-surface-sunk:  var(--term-sunk);
  --color-surface-hover: var(--term-hover);
  --color-heading:       var(--term-heading);
  --color-text-muted:    var(--term-muted);
  --color-text-subtle:   var(--term-subtle);
  --color-accent-text:   var(--term-accent);
  --color-border:        var(--term-line);
  --color-border-strong: var(--term-line-2);
  border-color: var(--term-line-2);
}

/* ============================================================
   DARK THEME — the About / research page keeps the original
   dark identity (studio home = light, research = dark).
   Applied via <body class="theme-dark">; remaps the semantic
   color tokens so every existing rule renders dark.
   ============================================================ */
.theme-dark {
  --color-bg:            var(--d-bg);
  --color-surface:       var(--d-surface);
  --color-surface-sunk:  var(--d-surface-sunk);
  --color-surface-hover: var(--d-surface-hover);
  --color-heading:       var(--d-heading);
  --color-text:          var(--d-text);
  --color-text-muted:    var(--d-muted);
  --color-text-subtle:   var(--d-subtle);
  --color-accent-text:   var(--d-accent-text);
  --color-border:        var(--d-border);
  --color-border-strong: var(--d-border-strong);
  --color-cta:           var(--d-heading);
  --color-cta-hover:     var(--d-cta-hover);
  --color-cta-text:      var(--d-bg);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.55);
  background: var(--color-bg);
}

/* On dark, the hero shapes glow with saturated color (pale pastels would wash out) */
.theme-dark .hero::before {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--coral) 42%, transparent), transparent 70%);
  filter: blur(14px);
}
.theme-dark .hero::after {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--violet) 42%, transparent), transparent 70%);
  filter: blur(14px);
}
/* keep the colored service chips lively on dark */
.theme-dark #services .card::before { box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--d-bg) 28%, transparent); }

/* ---------------- Intro video frame (About) ---------------- */
.videoframe { margin-block: var(--space-7) 0; }
.videoframe__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 60%),
    var(--color-surface);
}
.videoframe__video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* placeholder until a real <video> is dropped in */
.videoframe__ph { position: absolute; inset: 0; display: grid; place-items: center; }
.videoframe__play {
  inline-size: 76px; block-size: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-cta); color: var(--color-cta-text);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.videoframe:hover .videoframe__play { transform: scale(1.06); }
.videoframe__play svg { inline-size: 28px; block-size: 28px; margin-inline-start: 4px; }
.videoframe__tag {
  position: absolute;
  pointer-events: none;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
.videoframe__cap {
  margin-block-start: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
:lang(fa) .videoframe__tag, :lang(ar) .videoframe__tag, [dir="rtl"] .videoframe__tag {
  letter-spacing: normal;
  text-transform: none;
}

/* ============================================================
   REDESIGN POLISH  v2 (2026)
   Keeps the dark identity; fixes hero dead-space + CTA contrast,
   gives service cards real icons, and lifts overall rhythm.
   Appended last so it wins over the base layer. Token-only.
   ============================================================ */

/* ---- Hero: data-convergence canvas returns on dark, fills the field ---- */
.theme-dark .hero-canvas { display: block; opacity: 0.5; }
.hero { min-height: var(--hero-min); }
/* calmer corner glows so the canvas + text stay dominant */
.theme-dark .hero::before { opacity: 0.6; }
.theme-dark .hero::after  { opacity: 0.55; }

/* Eyebrow becomes a small status chip with a live dot */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-eyebrow__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--color-accent-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-text) 16%, transparent);
  flex-shrink: 0;
}

/* a touch more presence for the headline + lead on the larger hero */
.hero h1 { margin-block-end: var(--space-6); max-width: 18ch; }
.hero p.lead { max-width: 52ch; }

/* Scroll cue: a hairline track with a dot that drifts down */
.hero-scroll {
  position: absolute;
  inset-block-end: var(--space-6);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1;
  inline-size: 1px;
  block-size: 48px;
}
.hero-scroll__line {
  display: block;
  inline-size: 1px;
  block-size: 100%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-text) 55%, transparent), transparent);
}
.hero-scroll::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--color-accent-text);
  transform: translateX(-50%);
  animation: hero-scroll-cue 1.9s var(--ease-standard) infinite;
}
@keyframes hero-scroll-cue {
  0%   { transform: translate(-50%, 0);    opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(-50%, 44px); opacity: 0; }
}

/* ---- Services: real line icons replace the plain colored square ---- */
#services .card::before { content: none; }   /* retire the old chip */
#services .card { padding: var(--space-6); }
.card__icon {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  margin-block-end: var(--space-5);
  color: var(--color-accent);
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-standard);
}
.card__icon svg { inline-size: 25px; block-size: 25px; }
.card:hover .card__icon { transform: translateY(-2px); background: color-mix(in srgb, currentColor 20%, transparent); }

/* per-card accent (same playful rotation as before, now on the icon) */
#services .card:nth-child(1) .card__icon { color: var(--green); }
#services .card:nth-child(2) .card__icon { color: var(--violet); }
#services .card:nth-child(3) .card__icon { color: var(--coral); }
#services .card:nth-child(4) .card__icon { color: var(--gold); }
#services .card:nth-child(5) .card__icon { color: var(--violet); }
#services .card:nth-child(6) .card__icon { color: var(--green); }

/* premium depth: hairline top-edge highlight on raised dark surfaces */
.theme-dark .card,
.theme-dark .contact-link,
.theme-dark .videoframe__media { box-shadow: var(--shadow-1), var(--edge-light); }
.theme-dark .card:hover { box-shadow: var(--shadow-2), var(--edge-light); }

/* ---- Section rhythm: a bit more breathing room between bands ---- */
.section { padding-block: var(--space-section); }

/* ---- Contact: lift the form panel into a defined card on dark ---- */
.theme-dark #contact .contact-grid {
  padding: var(--space-7);
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge-light);
}

@media (max-width: 720px) {
  .theme-dark #contact .contact-grid { padding: var(--space-5); }
  .hero h1 { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll::after { animation: none; }
}

/* ---- Typography roles (Fraunces serif used with restraint) ----
   Display serif carries headlines + the wordmark; all UI chrome
   (nav links, buttons) uses the legible Inter body face. */
.nav-links a,
.btn { font-family: var(--font-body); font-weight: var(--weight-medium); }

/* serif wordmark reads better with tighter tracking than the old sans */
.brand .wordmark,
.site-footer .wordmark { letter-spacing: .14em; }

/* serif headlines: ease the very-tight hero tracking a touch so the
   Fraunces letterforms breathe */
.hero h1 { letter-spacing: -0.015em; }
/* RTL scripts (Kalameh) read visually larger — bring the hero down a notch */
:lang(fa) .hero h1, [dir="rtl"] .hero h1 {
  letter-spacing: normal;
  font-size: clamp(1.7rem, 1.1rem + 3vw, 3rem);
}

/* ============================================================
   HERO PORTRAIT  — founder photo beside the headline (home)
   Two-column: portrait on the inline-start side, copy on the
   inline-end. Mirrors automatically in RTL (logical properties).
   ============================================================ */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
}
.hero-content { min-inline-size: 0; }

/* Portrait stays physically on the LEFT in every language (per brand
   request). We lay the grid out LTR even in RTL, then restore RTL flow
   inside the copy column so the Persian/Arabic text reads correctly. */
[dir="rtl"] .hero-grid { direction: ltr; }
[dir="rtl"] .hero-content { direction: rtl; }

.hero-media {
  margin: 0;
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-media img {
  display: block;
  inline-size: 100%;
  max-inline-size: 400px;
  block-size: auto;
  aspect-ratio: 900 / 1205;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.theme-dark .hero-media img {
  box-shadow: var(--shadow-2), var(--edge-light);
  border: 1px solid var(--color-border);
}
/* a soft accent halo grounds the portrait without a hard frame */
.hero-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 8%;
  inset-inline: 6% 14%;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 30%,
              color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%);
  filter: blur(34px);
}

/* in the two-column hero the headline column is narrower — keep lines tight */
.hero-grid .hero-content h1 { max-width: 14ch; }
.hero-grid .hero-content p.lead { max-width: 42ch; }

/* Stack on tablet/phone: portrait on top, capped, centered; copy below */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1rem + 4vw, 2.75rem);
    text-align: start;
  }
  .hero-media { order: -1; }
  .hero-media img { max-inline-size: 248px; }
  .hero-media::before { inset-inline: 18%; }
  .hero-grid .hero-content h1,
  .hero-grid .hero-content p.lead { max-width: 100%; }
}