/* ==========================================================================
   DINAVO — style.css
   Premium editorial-technical theme for Amir / Dinavo personal site
   Structure: tokens → base → utilities → components → sections → states →
   responsive → motion/contrast → rtl
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. RESET
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; line-height: 1.08; }

/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS
--------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* --- surface / bg --- */
  --bg:        oklch(11.5% 0.026 262);
  --bg-deep:   oklch(7.5% 0.024 262);
  --surface:   oklch(15.5% 0.028 262);
  --surface-2: oklch(19% 0.03 260);
  --surface-3: oklch(23.5% 0.032 258);
  --glass:     color-mix(in oklch, var(--surface) 62%, transparent);
  --glass-strong: color-mix(in oklch, var(--surface-2) 78%, transparent);

  /* --- borders / lines --- */
  --border:        color-mix(in oklch, white 14%, transparent);
  --border-strong: color-mix(in oklch, white 24%, transparent);
  --border-accent: color-mix(in oklch, var(--accent) 45%, transparent);

  /* --- text --- */
  --text:      oklch(97% 0.006 260);
  --text-dim:  oklch(79% 0.018 258);
  --text-faint: oklch(66% 0.018 258);
  --text-mute: oklch(62% 0.016 258);

  /* --- accent --- */
  --accent:     oklch(76% 0.135 231);
  --accent-2:   oklch(73% 0.15 297);
  --accent-warm: oklch(80% 0.12 78);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --accent-grad-soft: linear-gradient(135deg, color-mix(in oklch, var(--accent) 24%, transparent), color-mix(in oklch, var(--accent-2) 20%, transparent));
  --on-accent: oklch(12% 0.02 260);

  /* --- radii --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* --- motion --- */
  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: .18s;
  --dur: .35s;
  --dur-slow: .7s;

  /* --- fonts --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-fa: "Vazirmatn", "Segoe UI", Tahoma, var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* --- type scale --- */
  --fs-h1: clamp(2.35rem, 1.55rem + 3.6vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.9vw, 3.25rem);
  --fs-h3: clamp(1.15rem, 1.06rem + 0.4vw, 1.5rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.35vw, 1.3rem);
  --fs-body: clamp(0.98rem, 0.94rem + 0.15vw, 1.06rem);
  --fs-small: 0.84rem;
  --fs-xs: 0.72rem;

  /* --- layout --- */
  --container: 1360px;
  --pad-inline: clamp(1.25rem, 3vw + 0.5rem, 3rem);
  --section-pad: clamp(4.5rem, 3.4rem + 5vw, 8.5rem);
  --gap: clamp(1rem, 0.7rem + 1vw, 2rem);
  --header-h: 68px;
  --dock-h: 68px;

  /* --- shadow --- */
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / .35);
  --shadow-md: 0 10px 28px -12px oklch(0% 0 0 / .5);
  --shadow-lg: 0 30px 70px -24px oklch(0% 0 0 / .6);
  --shadow-inset: inset 0 1px 0 color-mix(in oklch, white 8%, transparent);

  /* --- z-index --- */
  --z-bg: 0;
  --z-nav-side: 30;
  --z-header: 50;
  --z-dock: 60;
  --z-cursor: 65;
  --z-toast: 80;
  --z-command: 90;
  --z-preloader: 100;
}

@media (min-width: 1024px) { :root { --header-h: 84px; } }

/* ---------------------------------------------------------------------------
   3. BASE
--------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  overflow-x: clip;
  position: relative;
}
html[lang="fa"] body { font-family: var(--font-fa); }

::selection { background: color-mix(in oklch, var(--accent) 55%, transparent); color: var(--bg-deep); }

/* ---------------------------------------------------------------------------
   4. ACCESSIBILITY / FOCUS
--------------------------------------------------------------------------- */
.skip {
  position: fixed;
  inset-inline-start: 1rem;
  top: -60px;
  z-index: 999;
  background: var(--accent);
  color: var(--on-accent);
  padding: .75rem 1.25rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: 1rem; }

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

@media (prefers-contrast: more) {
  :root {
    --border: color-mix(in oklch, white 40%, transparent);
    --border-strong: color-mix(in oklch, white 55%, transparent);
    --text-dim: oklch(90% 0.01 260);
    --text-faint: oklch(78% 0.015 258);
  }
  :focus-visible { outline-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   5. LAYOUT UTILITIES
--------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.section {
  padding-block: var(--section-pad);
  scroll-margin-block-start: calc(var(--header-h) + 12px);
  position: relative;
}
.section-head { max-width: 46rem; margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head-flush { margin-block-end: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
.section-head p { margin-block-start: 1rem; color: var(--text-dim); font-size: var(--fs-lead); max-width: 40ch; }

/* ---------------------------------------------------------------------------
   6. AMBIENT BACKGROUND
--------------------------------------------------------------------------- */
.ambient-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
}
.ambient-scene span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  will-change: transform;
  animation: drift 34s var(--ease) infinite alternate;
}
.ambient-scene span:nth-child(1) {
  inline-size: 46vw; block-size: 46vw;
  inset-inline-start: -12%; top: -10%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 55%, transparent), transparent 70%);
}
.ambient-scene span:nth-child(2) {
  inline-size: 38vw; block-size: 38vw;
  inset-inline-end: -10%; top: 20%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent-2) 50%, transparent), transparent 70%);
  animation-delay: -8s;
}
.ambient-scene span:nth-child(3) {
  inline-size: 34vw; block-size: 34vw;
  inset-inline-start: 20%; bottom: -14%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent-warm) 32%, transparent), transparent 72%);
  animation-delay: -18s;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
@media (max-width: 767px) {
  .ambient-scene span { filter: blur(46px); opacity: .28; }
  .ambient-scene span:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------------------
   7. SCROLL PROGRESS / CURSOR / TOAST
--------------------------------------------------------------------------- */
#progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  width: 100%;
  background: var(--accent-grad);
  z-index: calc(var(--z-header) + 1);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
  will-change: transform;
}
[dir="rtl"] #progress { transform-origin: right center; }

.cursor {
  position: fixed;
  top: 0; inset-inline-start: 0;
  inline-size: 18px; block-size: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--accent) 70%, transparent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: difference;
  transform: translate3d(-50%, -50%, 0);
  transition: inline-size var(--dur-fast) var(--ease), block-size var(--dur-fast) var(--ease), opacity var(--dur-fast);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) { .cursor { opacity: .85; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: fit-content;
  max-width: min(90vw, 24rem);
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: .75rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--text);
  box-shadow: var(--shadow-md);
  z-index: var(--z-toast);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.show, .toast.is-visible, .toast:not(:empty):not([hidden]).active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@supports not (backdrop-filter: blur(1px)) {
  .toast { background: color-mix(in oklch, var(--surface-2) 96%, transparent); }
}

/* ---------------------------------------------------------------------------
   8. PRELOADER
--------------------------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hidden, #preloader.is-hidden, #preloader.loaded, body.loaded #preloader, #preloader[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-center { text-align: center; }
.loader-logo-wrap { inline-size: 64px; block-size: 64px; margin-inline: auto; margin-block-end: 1.25rem; }
.loader-logo { inline-size: 100%; block-size: 100%; object-fit: contain; }
.loader-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.loader-line {
  inline-size: 140px;
  block-size: 2px;
  margin-block-start: 1.1rem;
  margin-inline: auto;
  background: var(--border);
  overflow: hidden;
  border-radius: var(--r-full);
}
.loader-line span {
  display: block;
  inline-size: 40%;
  block-size: 100%;
  background: var(--accent-grad);
  animation: loaderSlide 1.1s var(--ease) infinite;
}
@keyframes loaderSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---------------------------------------------------------------------------
   9. REVEAL / SPOTLIGHT
--------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-visible, .reveal.revealed, .reveal.in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.spotlight-card { position: relative; isolation: isolate; }
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 20%), color-mix(in oklch, var(--accent) 16%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .spotlight-card:hover::before { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   10. BUTTONS
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95rem 1.6rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .98rem;
  min-block-size: 48px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur), border-color var(--dur);
}
.btn b { font-weight: 500; transition: transform var(--dur-fast) var(--ease); }
.btn-primary {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:hover b { transform: translate(3px, -3px); }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover { border-color: var(--border-accent); background: color-mix(in oklch, var(--surface-2) 70%, transparent); transform: translateY(-2px); }
[data-magnetic] { transition: transform .4s var(--ease-out); }

/* ---------------------------------------------------------------------------
   11. HEADER
--------------------------------------------------------------------------- */
#header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in oklch, var(--bg-deep) 45%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-block-end: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
  #header { background: color-mix(in oklch, var(--bg-deep) 92%, transparent); }
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { inline-size: 32px; block-size: 32px; }
.brand-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-mark small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 2rem);
  position: fixed;
  inset-inline: 0;
  top: var(--header-h);
  flex-direction: column;
  background: var(--bg-deep);
  padding: 2rem var(--pad-inline);
  border-block-end: 1px solid var(--border);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-bar:has(#mobileToggle[aria-expanded="true"]) .primary-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.primary-nav a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-dim);
  padding-block: .35rem;
  position: relative;
}
.primary-nav a:hover, .primary-nav a[aria-current] { color: var(--text); }
.primary-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background: var(--accent-grad);
  transition: inline-size var(--dur) var(--ease);
}
.primary-nav a:hover::after { inline-size: 100%; }

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.lang-switch {
  inline-size: 44px; block-size: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lang-switch svg { inline-size: 100%; block-size: 100%; object-fit: cover; }

.command-trigger {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-faint);
  font-size: var(--fs-small);
}
.command-trigger kbd {
  font-family: var(--font-mono);
  font-size: .72rem;
  background: var(--surface-3);
  padding: .15rem .4rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
}
.command-trigger:hover { border-color: var(--border-accent); color: var(--text); }

.nav-cta {
  display: none;
  padding: .6rem 1.2rem;
  border-radius: var(--r-full);
  background: var(--accent-grad);
  color: var(--on-accent);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: transform var(--dur) var(--ease);
}
.nav-cta:hover { transform: translateY(-2px); }

.menu-toggle {
  inline-size: 44px; block-size: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--r-sm);
}
.menu-toggle span {
  inline-size: 20px; block-size: 2px;
  background: var(--text);
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   12. SIDE SECTION NAV (desktop progress dots)
--------------------------------------------------------------------------- */
.section-nav {
  display: none;
  position: fixed;
  inset-inline-end: clamp(1rem, 2vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav-side);
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
}
.section-nav-brand {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--text-mute);
  margin-block-end: .5rem;
}
.section-nav-list { display: flex; flex-direction: column; gap: .25rem; }
.section-nav-list li {
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.section-nav-list li::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.section-nav-list li span {
  position: absolute;
  inset-inline-end: calc(100% + .15rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  opacity: 0;
  transition: opacity var(--dur);
  pointer-events: none;
}
.section-nav-list li:hover span,
.section-nav-list li:focus-visible span { opacity: 1; }
.section-nav-list li:hover::before,
.section-nav-list li:focus-visible::before,
.section-nav-list li.active::before,
.section-nav-list li[aria-current]::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}

/* ---------------------------------------------------------------------------
   13. HERO
--------------------------------------------------------------------------- */
.hero { padding-block-start: 0; }
.hero-frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  padding-block-start: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem));
  padding-block-end: clamp(2rem, 4vw, 3.5rem);
  padding-inline: clamp(1.25rem, 4vw, 3.25rem);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.hero-bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--bg-deep) 78%, transparent) 0%, color-mix(in oklch, var(--bg-deep) 55%, transparent) 40%, var(--bg-deep) 92%),
    linear-gradient(120deg, color-mix(in oklch, var(--bg-deep) 92%, transparent) 0%, color-mix(in oklch, var(--bg-deep) 40%, transparent) 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  flex: 1;
  align-content: center;
}
.hero-copy { max-width: 42rem; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 1.1rem;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-block-end: 1.6rem;
}
.status-dot {
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-warm) 22%, transparent);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
.hero h1 span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin-block-start: 1.4rem; font-size: var(--fs-lead); color: var(--text-dim); max-width: 38ch; }

.hero-signal {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-block-start: 1.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-signal strong {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
}
.hero-signal strong::after {
  content: "";
  display: inline-block;
  inline-size: 2px;
  block-size: 1em;
  margin-inline-start: .4em;
  background: var(--accent);
  vertical-align: -0.15em;
  animation: caretBlink 1.1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.2rem; }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-block-start: 2.75rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--border);
  max-width: 34rem;
}
.hero-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.hero-facts dd { font-size: var(--fs-xs); color: var(--text-mute); margin-block-start: .3rem; }

.hero-identity {
  justify-self: start;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  max-width: 30rem;
}
@supports not (backdrop-filter: blur(1px)) {
  .hero-identity { background: color-mix(in oklch, var(--surface-2) 92%, transparent); }
}
.identity-avatar {
  inline-size: 52px; block-size: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  flex: 0 0 auto;
}
.identity-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.identity-chips { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; }
.identity-chips li {
  font-size: var(--fs-xs);
  padding: .35rem .7rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.identity-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid var(--border);
  margin-inline-start: auto;
}
.identity-clock span { font-size: var(--fs-xs); color: var(--text-mute); }
.identity-clock strong { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent); }

.hero-scroll-cue {
  align-self: center;
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.hero-scroll-cue span {
  inline-size: 1px; block-size: 34px;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-cue span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  block-size: 10px;
  background: var(--accent);
  transform: translateY(-120%);
  will-change: transform;
  animation: cueDrop 1.8s var(--ease) infinite;
}
@keyframes cueDrop {
  from { transform: translateY(-120%); }
  to { transform: translateY(440%); }
}
.hero-scroll-cue b { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

/* ---------------------------------------------------------------------------
   14. SIGNAL STRIP (marquee)
--------------------------------------------------------------------------- */
.signal-strip {
  border-block: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
}
.signal-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
[dir="rtl"] .signal-track { animation-direction: reverse; }
@media (hover: hover) { .signal-strip:hover .signal-track { animation-play-state: paused; } }
.signal-list { display: flex; align-items: center; }
.signal-list li {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-block: 1.1rem;
  padding-inline-end: 2.5rem;
  white-space: nowrap;
  position: relative;
}
.signal-list li::after {
  content: "•";
  position: absolute;
  inset-inline-end: 1.1rem;
  color: var(--accent);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   15. ABOUT
--------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
.about-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.about-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.about-content h3 { font-size: var(--fs-h3); margin-block-end: 1rem; }
.about-content p { color: var(--text-dim); margin-block-end: 1rem; max-width: 52ch; }
.about-content strong { color: var(--text); }
.about-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-block-start: 1.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}
.about-meta dt { font-size: var(--fs-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; }
.about-meta dd { font-size: var(--fs-small); font-weight: 600; margin-block-start: .3rem; }

/* ---------------------------------------------------------------------------
   16. LAB / SYSTEMS
--------------------------------------------------------------------------- */
.lab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.lab-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.lab-card:hover { transform: translateY(-4px); border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.lab-card-number {
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-end: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  z-index: 1;
}
.lab-card-head { display: flex; align-items: center; gap: .75rem; margin-block-end: 1.4rem; position: relative; z-index: 1; }
.lab-card-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--r-full);
  background: var(--accent-grad-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
}
.lab-card-live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-xs);
  color: var(--accent-warm);
}
.lab-card-live i {
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--accent-warm);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.lab-card-state { font-size: var(--fs-xs); color: var(--text-mute); }
.lab-card h3 { font-size: var(--fs-h3); margin-block-end: .7rem; position: relative; z-index: 1; }
.lab-card p { color: var(--text-dim); max-width: 48ch; position: relative; z-index: 1; }
.lab-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.5rem; position: relative; z-index: 1; }
.lab-tags li {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  padding: .35rem .7rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-faint);
}

.lab-card-feature { background: linear-gradient(155deg, var(--surface-2), var(--surface)); }
.lab-card-wide { container-type: inline-size; }
.engineering-body { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
.engineering-copy p { margin-block: .8rem 1.1rem; }
.engineering-domains { display: flex; flex-wrap: wrap; gap: .6rem; }
.engineering-domains li {
  font-size: var(--fs-xs);
  padding: .35rem .75rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.engineering-figure { opacity: .9; }
.engineering-wave { inline-size: 100%; block-size: auto; }
.wave-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 45%, transparent));
}
@container (max-width: 560px) {
  .engineering-body { grid-template-columns: 1fr; }
  .engineering-figure { order: -1; }
}

/* ---------------------------------------------------------------------------
   17. PRINCIPLES / METHOD
--------------------------------------------------------------------------- */
.method-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-block-start: 1px solid var(--border);
}
.method-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--border);
}
.method-index { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-mute); padding-block-start: .2rem; }
.method-symbol {
  inline-size: 42px; block-size: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--accent);
  flex: 0 0 auto;
  background: var(--surface);
}
.method-step h3 { font-size: 1.1rem; margin-block-end: .4rem; }
.method-step p { color: var(--text-dim); max-width: 46ch; }

/* ---------------------------------------------------------------------------
   18. JOURNEY
--------------------------------------------------------------------------- */
.journey-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: stretch;
}
.journey-card {
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.journey-content { padding: clamp(1.5rem, 3vw, 2.5rem); }
.timeline { position: relative; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.75rem; }
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.6875rem;
  top: .3rem;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--surface);
}
.timeline-item time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline-item h3 { font-size: 1.05rem; margin-block: .4rem .35rem; }
.timeline-item p { font-size: var(--fs-small); color: var(--text-dim); max-width: 44ch; }
.journey-media { aspect-ratio: 16 / 10; }
.journey-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@container (max-width: 620px) {
  .journey-card { grid-template-columns: 1fr; }
}

.skills-card {
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.skills-card h3 { font-size: 1.05rem; margin-block-end: 1.5rem; }
.skills-list { display: flex; flex-direction: column; gap: 1.25rem; }
.skill-top { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: .55rem; font-size: var(--fs-small); }
.skill-top span:first-child { color: var(--text); font-weight: 500; }
.skill-top span:last-child { color: var(--text-mute); font-size: var(--fs-xs); }
.bar { block-size: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar span[class^="level-"] {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--accent-grad);
  transform-origin: left;
}
[dir="rtl"] .bar span[class^="level-"] { transform-origin: right; }
.level-68 { width: 68%; }
.level-73 { width: 73%; }
.level-76 { width: 76%; }
.level-82 { width: 82%; }
.level-88 { width: 88%; }

/* ---------------------------------------------------------------------------
   19. CONNECT
--------------------------------------------------------------------------- */
.connect-panel {
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 5vw, 4rem);
}
.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block-start: 1rem;
}
.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), border-color var(--dur), background var(--dur);
}
.social-card:hover { transform: translateY(-3px); border-color: var(--border-accent); background: var(--surface-2); }
.social-icon {
  inline-size: 44px; block-size: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-grad-soft);
  border: 1px solid var(--border-accent);
  font-size: 1.1rem;
  color: var(--accent);
  flex: 0 0 auto;
}
.social-copy { display: flex; flex-direction: column; gap: .15rem; }
.social-copy strong { font-size: .98rem; }
.social-copy span { font-size: var(--fs-xs); color: var(--text-mute); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   20. MOBILE DOCK
--------------------------------------------------------------------------- */
.mobile-dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-dock);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in oklch, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-block-start: 1px solid var(--border);
  padding-block: .55rem;
  padding-block-end: calc(.55rem + env(safe-area-inset-bottom));
}
@supports not (backdrop-filter: blur(1px)) {
  .mobile-dock { background: color-mix(in oklch, var(--bg-deep) 97%, transparent); }
}
.mobile-dock a, .mobile-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-block-size: 48px;
  color: var(--text-faint);
  border-radius: var(--r-md);
}
.mobile-dock span { font-size: 1.05rem; }
.mobile-dock b { font-size: .64rem; font-weight: 500; letter-spacing: .02em; }
.mobile-dock a.active, .mobile-dock a[aria-current], .mobile-dock :is(a,button):hover { color: var(--accent); }
#mobileDockCommand span {
  display: grid;
  place-items: center;
  inline-size: 30px; block-size: 30px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: .85rem;
}

/* ---------------------------------------------------------------------------
   21. COMMAND PALETTE
--------------------------------------------------------------------------- */
.command-shell { position: fixed; inset: 0; z-index: var(--z-command); }
.command-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--bg-deep) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.command-dialog {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-block-size: 82svh;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
  padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: sheetUp .35s var(--ease-out);
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle {
  inline-size: 40px; block-size: 4px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  align-self: center;
}
.command-head { display: flex; align-items: center; justify-content: space-between; }
.command-eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: .1em; }
.command-head h2 { font-size: 1.1rem; margin-block-start: .2rem; }
.command-head button {
  min-inline-size: 44px;
  min-block-size: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: .35rem .6rem;
  border-radius: var(--r-sm);
}
.command-search {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.command-search input { flex: 1; background: none; border: 0; color: var(--text); font-size: .95rem; }
.command-search input::placeholder { color: var(--text-mute); }
.command-search input:focus-visible { outline: none; }
.command-list { display: flex; flex-direction: column; gap: .4rem; }
.command-list button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem .9rem;
  border-radius: var(--r-md);
  min-block-size: 48px;
  text-align: start;
  transition: background var(--dur-fast);
}
.command-list button:hover, .command-list button:focus-visible { background: var(--surface-3); }
.command-list button > span:first-child {
  inline-size: 36px; block-size: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.command-copy { display: flex; flex-direction: column; gap: .1rem; }
.command-copy strong { font-size: .92rem; }
.command-copy small { font-size: var(--fs-xs); color: var(--text-mute); }
.command-foot { display: none; align-items: center; gap: 1.25rem; border-block-start: 1px solid var(--border); padding-block-start: .9rem; }
.command-foot span { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-mute); }
.command-foot kbd {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: .1rem .4rem;
}

/* ---------------------------------------------------------------------------
   22. FOOTER / BACK TO TOP
--------------------------------------------------------------------------- */
.site-footer { border-block-start: 1px solid var(--border); padding-block: 2.5rem calc(2.5rem + var(--dock-h)); }
.footer-inner { display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.footer-inner p { font-size: var(--fs-small); color: var(--text-mute); }

.backtop {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: calc(var(--dock-h) + 1.25rem + env(safe-area-inset-bottom));
  inline-size: 46px; block-size: 46px;
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--text);
  z-index: var(--z-dock);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: var(--shadow-md);
}
.backtop.show, .backtop.is-visible, .backtop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
[dir="rtl"] .backtop { transform: translateY(10px) scaleX(-1); }
[dir="rtl"] .backtop.show, [dir="rtl"] .backtop.is-visible, [dir="rtl"] .backtop.visible { transform: translateY(0) scaleX(-1); }

/* ---------------------------------------------------------------------------
   23. RTL REFINEMENTS
--------------------------------------------------------------------------- */
[dir="rtl"] .kicker,
[dir="rtl"] .eyebrow,
[dir="rtl"] .brand-mark small,
[dir="rtl"] .nav-cta,
[dir="rtl"] .status-pill,
[dir="rtl"] .lab-card-tag,
[dir="rtl"] .lab-tags li,
[dir="rtl"] .hero-signal,
[dir="rtl"] .signal-list li,
[dir="rtl"] .section-nav-brand {
  letter-spacing: normal;
}
[dir="rtl"] .section-nav-brand { writing-mode: vertical-rl; }
[dir="rtl"] .btn b,
[dir="rtl"] .hero-scroll-cue span::after { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   24. RESPONSIVE — 768px
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-facts { max-width: none; }
  .about-meta { grid-template-columns: repeat(4, 1fr); }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
  .method-list { grid-template-columns: repeat(2, 1fr); }
  .method-step:nth-last-child(-n+1) { border-block-end: 1px solid var(--border); }
  .lab-tags { max-width: 30rem; }
}

/* ---------------------------------------------------------------------------
   25. RESPONSIVE — 1024px (desktop nav switches on)
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .primary-nav {
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    gap: clamp(1rem, 1.6vw, 2.2rem);
  }
  .primary-nav a { font-size: .95rem; }
  .command-trigger, .nav-cta { display: inline-flex; }
  .section-nav { display: flex; }
  .mobile-dock { display: none; }
  .backtop { bottom: 1.5rem; }
  .site-footer { padding-block-end: 2.5rem; }
  .command-dialog {
    inset-inline: auto;
    inset-inline-start: 50%;
    top: 12svh;
    bottom: auto;
    transform: translateX(-50%);
    inline-size: min(560px, 90vw);
    max-block-size: 70svh;
    border-radius: var(--r-xl);
  }
  [dir="rtl"] .command-dialog { transform: translateX(50%); }
  .sheet-handle { display: none; }
  .command-foot { display: flex; }

  .hero-grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .hero-identity { justify-self: end; margin-block-end: .5rem; }
  .hero-scroll-cue { grid-column: 1 / -1; align-self: end; }

  .about-grid { grid-template-columns: 1fr 1fr; }
  .journey-content { padding: 2.75rem; }
  .connect-panel { padding-inline: 3.5rem; }

  .lab-grid { grid-template-columns: repeat(12, 1fr); }
  .lab-card-feature { grid-column: span 7; }
  .lab-card:not(.lab-card-feature):not(.lab-card-wide) { grid-column: span 5; }
  .lab-card-wide { grid-column: span 12; }
  .engineering-body { grid-template-columns: 1.1fr 1fr; }

  .journey-grid { grid-template-columns: 1.35fr 1fr; }
  .journey-card { grid-template-columns: 1.1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   26. RESPONSIVE — 1280 / 1366
--------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero-frame { min-block-size: 94svh; }
  .about-media { aspect-ratio: 4 / 3.2; }
}

/* ---------------------------------------------------------------------------
   27. RESPONSIVE — 1440 / 1600
--------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --container: 1400px; }
  .hero-copy { max-width: 46rem; }
  .lab-card p, .lab-card-wide p { max-width: 54ch; }
}

/* ---------------------------------------------------------------------------
   28. RESPONSIVE — 1920 (ultra-wide guard)
--------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  :root { --container: 1520px; }
  .hero-frame { min-block-size: 88svh; }
}

/* ---------------------------------------------------------------------------
   29. FINE MOBILE TUNING (≤430px safety)
--------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .hero-facts dt { font-size: .78rem; }
  .identity-clock { padding-inline-start: .75rem; }
  .brand-mark small { display: none; }
  .command-trigger { display: none; }
}
@media (max-width: 360px) {
  .hero-identity { flex-direction: column; align-items: stretch; }
  .identity-clock { border-inline-start: none; border-block-start: 1px solid var(--border); padding-inline-start: 0; padding-block-start: .75rem; margin-inline-start: 0; align-items: flex-start; flex-direction: row; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   30. TOUCH TARGET / SAFE AREA GUARANTEES
--------------------------------------------------------------------------- */
a, button { touch-action: manipulation; }
.primary-nav a, .social-card, .command-list button, .mobile-dock a, .mobile-dock button, .btn, .lang-switch, .menu-toggle, .backtop, .lab-card, .section-nav-list li {
  min-block-size: 44px;
}
body { padding-block-end: 0; }
@media (max-width: 1023px) {
  body { padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   DINAVO — ChatGPT QA patch after Step 2
   ========================================================================== */

/* User-controlled motion switch used by Step 3 JS. */
html.motion-off {
  scroll-behavior: auto !important;
}
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation: none !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Small, progressive enhancement for same-document View Transitions. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .22s;
    animation-timing-function: var(--ease-out);
  }
}

/* Mobile gets a deliberate full-bleed hero rather than a doubly padded desktop card. */
@media (max-width: 767px) {
  .hero > .container {
    padding-inline: 0;
  }

  .hero-frame {
    border-inline: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    padding-left: max(1.1rem, env(safe-area-inset-left));
    padding-right: max(1.1rem, env(safe-area-inset-right));
  }

  /* Fixed blur + continuous movement is expensive on phones; keep the atmosphere static. */
  .ambient-scene span {
    animation: none;
    will-change: auto;
  }

  .mobile-dock {
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }

  .hero-actions .btn {
    justify-content: center;
  }
}

/* Prevent sticky hover transforms on touch/coarse-pointer browsers. */
@media (hover: none), (pointer: coarse) {
  .lab-card:hover,
  .social-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .nav-cta:hover {
    transform: none;
  }
}

/* 3 long fact labels are cramped below ~430px; use an intentional 2+1 composition. */
@media (max-width: 430px) {
  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
  }
  .hero-facts > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* Keep keyboard/focus usability visible even where hover is unavailable. */
.primary-nav a[aria-current="true"]::after {
  inline-size: 100%;
}


/* ==========================================================================
   DINAVO — Final integration fixes
   ========================================================================== */
html.command-open,
html.command-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
.command-dialog { overscroll-behavior: contain; }
main, .site-footer { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .cursor { opacity: 0; }
  .cursor.is-active { opacity: .85; }
}
html.motion-off .cursor { display: none !important; }

/* ==========================================================================
   DINAVO — V24.2 QA polish
   ========================================================================== */
@media (max-width: 767px) {
  .hero-frame {
    padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom) + 1.35rem);
  }

  .toast {
    bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 1rem);
  }
}

[dir="rtl"] :is(.signal-list li, .lab-tags li, .social-copy span, .identity-clock strong) {
  direction: ltr;
  unicode-bidi: isolate;
}


/* ==========================================================================
   V24.3 — DINAVO SIGNAL MAP
   Signature engineering / code / AI spatial experience
   ========================================================================== */
.signal-map {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  scroll-margin-block-start: calc(var(--header-h) + 12px);
  overflow: clip;
  border-block: 1px solid color-mix(in oklch, var(--accent) 12%, var(--border));
  background:
    radial-gradient(70% 85% at 50% 48%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 16%, transparent), transparent 22% 78%, color-mix(in oklch, var(--surface) 14%, transparent));
}

.signal-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(color-mix(in oklch, var(--accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 10%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 0 28%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 0 28%, transparent 78%);
}

.signal-map-head {
  position: relative;
  z-index: 2;
  max-width: 52rem;
  margin-inline: auto;
  margin-block-end: clamp(2.2rem, 1.5rem + 2.4vw, 4.25rem);
  text-align: center;
}

.signal-map-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-block-end: .9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}
.signal-map-eyebrow::before,
.signal-map-eyebrow::after {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  background: color-mix(in oklch, var(--accent) 54%, transparent);
}

.signal-map-head h2 {
  font-size: clamp(2rem, 1.55rem + 2.35vw, 4rem);
  letter-spacing: -.025em;
  max-width: 18ch;
  margin-inline: auto;
}
.signal-map-head > p:last-child {
  max-width: 56ch;
  margin: 1rem auto 0;
  color: var(--text-dim);
  font-size: var(--fs-lead);
}

.signal-map-graph {
  --signal-line: color-mix(in oklch, var(--accent) 34%, var(--border));
  position: relative;
  width: min(100%, 1120px);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  min-height: 620px;
  border-block: 1px solid color-mix(in oklch, white 9%, transparent);
}

.signal-map-graph::before,
.signal-map-graph::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.signal-map-graph::before {
  inset: 8% 5%;
  border: 1px solid color-mix(in oklch, white 7%, transparent);
  clip-path: polygon(0 0, 17% 0, 17% 1px, 83% 1px, 83% 0, 100% 0, 100% 100%, 83% 100%, 83% calc(100% - 1px), 17% calc(100% - 1px), 17% 100%, 0 100%);
  opacity: .65;
}
.signal-map-graph::after {
  left: 50%;
  top: 50%;
  inline-size: min(36vw, 390px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 13%, transparent), transparent 66%);
  opacity: .9;
}

.signal-map-paths {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.signal-path {
  fill: none;
  stroke: var(--signal-line);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 5 11;
  opacity: .72;
  transition: stroke var(--dur) var(--ease), opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.signal-path.is-preview {
  stroke: color-mix(in oklch, var(--accent) 68%, white 6%);
  opacity: .95;
  stroke-width: 1.7;
}
.signal-path.is-active {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 3 12;
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in oklch, var(--accent) 34%, transparent));
}

/* `display: contents` lets node controls and their readouts share the graph
   coordinate system while preserving the semantic wrapper state. */
@media (min-width: 1024px) {
  .signal-node { display: contents; }

  .signal-node-trigger {
    position: absolute;
    z-index: 4;
    min-inline-size: 176px;
    min-block-size: 70px;
    padding: .8rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background:
      linear-gradient(135deg, color-mix(in oklch, var(--surface-2) 88%, transparent), color-mix(in oklch, var(--surface) 58%, transparent));
    box-shadow: var(--shadow-sm), var(--shadow-inset);
    color: var(--text);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    text-align: start;
    translate: -50% -50%;
    transition:
      border-color var(--dur) var(--ease),
      background var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease),
      scale var(--dur-fast) var(--ease);
  }
  [dir="rtl"] .signal-node-trigger { translate: 50% -50%; }

  [data-signal-node="dinavo"] .signal-node-trigger {
    inset-inline-start: 50%;
    top: 50%;
    inline-size: 142px;
    min-inline-size: 142px;
    block-size: 142px;
    min-block-size: 142px;
    padding: 1rem;
    border-radius: 50%;
    grid-template-columns: 1fr;
    place-content: center;
    gap: .2rem;
    text-align: center;
    background:
      radial-gradient(circle at 38% 30%, color-mix(in oklch, white 8%, transparent), transparent 34%),
      radial-gradient(circle, color-mix(in oklch, var(--accent) 14%, var(--surface-2)), var(--surface) 74%);
    border-color: color-mix(in oklch, var(--accent) 48%, var(--border-strong));
    box-shadow:
      0 0 0 10px color-mix(in oklch, var(--accent) 4%, transparent),
      0 0 0 24px color-mix(in oklch, var(--accent) 2.5%, transparent),
      0 24px 54px -28px color-mix(in oklch, var(--accent) 52%, black);
  }
  [data-signal-node="ee"] .signal-node-trigger { inset-inline-start: 19.8%; top: 23.45%; }
  [data-signal-node="programming"] .signal-node-trigger { inset-inline-start: 80.2%; top: 23.45%; }
  [data-signal-node="ai"] .signal-node-trigger { inset-inline-start: 50%; top: 89%; }

  .signal-node-index {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .67rem;
    color: var(--accent);
    background: color-mix(in oklch, var(--bg-deep) 62%, transparent);
  }
  .signal-node-label {
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.15;
  }
  [data-signal-node="dinavo"] .signal-node-mark {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: .16em;
    text-indent: .16em;
    color: var(--text);
  }
  [data-signal-node="dinavo"] .signal-node-label {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .signal-node-trigger::after {
    content: "";
    position: absolute;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--text-faint);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--text-faint) 8%, transparent);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), scale var(--dur) var(--ease);
  }
  [data-signal-node="ee"] .signal-node-trigger::after,
  [data-signal-node="programming"] .signal-node-trigger::after {
    inset-inline-start: 50%;
    bottom: -13px;
    translate: -50% 0;
  }
  [dir="rtl"] [data-signal-node="ee"] .signal-node-trigger::after,
  [dir="rtl"] [data-signal-node="programming"] .signal-node-trigger::after { translate: 50% 0; }
  [data-signal-node="ai"] .signal-node-trigger::after {
    inset-inline-start: 50%;
    top: -13px;
    translate: -50% 0;
  }
  [dir="rtl"] [data-signal-node="ai"] .signal-node-trigger::after { translate: 50% 0; }
  [data-signal-node="dinavo"] .signal-node-trigger::after {
    inset: 50% auto auto 50%;
    inline-size: 10px;
    block-size: 10px;
    translate: -50% -50%;
    background: var(--accent);
    opacity: 0;
  }

  [data-signal-node][data-active="true"] .signal-node-trigger {
    border-color: color-mix(in oklch, var(--accent) 76%, white 4%);
    background:
      linear-gradient(135deg, color-mix(in oklch, var(--accent) 13%, var(--surface-2)), color-mix(in oklch, var(--surface) 78%, transparent));
    box-shadow: 0 14px 38px -22px color-mix(in oklch, var(--accent) 50%, black), var(--shadow-inset);
    scale: 1.025;
  }
  [data-signal-node][data-active="true"] .signal-node-trigger::after {
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 11%, transparent), 0 0 16px color-mix(in oklch, var(--accent) 55%, transparent);
    scale: 1.15;
  }
  [data-signal-node="dinavo"][data-active="true"] .signal-node-trigger {
    box-shadow:
      0 0 0 10px color-mix(in oklch, var(--accent) 7%, transparent),
      0 0 0 24px color-mix(in oklch, var(--accent) 3.5%, transparent),
      0 26px 62px -26px color-mix(in oklch, var(--accent) 64%, black);
  }

  .signal-node-detail {
    position: absolute;
    z-index: 5;
    inline-size: min(340px, 31%);
    padding: .95rem 1rem .95rem 1.1rem;
    border-inline-start: 1px solid color-mix(in oklch, var(--accent) 68%, var(--border));
    background: linear-gradient(90deg, color-mix(in oklch, var(--surface) 76%, transparent), transparent 92%);
    opacity: 1;
    transform: none;
  }
  [dir="rtl"] .signal-node-detail {
    background: linear-gradient(270deg, color-mix(in oklch, var(--surface) 76%, transparent), transparent 92%);
  }
  [data-signal-node="dinavo"] .signal-node-detail {
    left: 50%;
    top: 62.5%;
    translate: -50% 0;
    inline-size: min(390px, 38%);
    text-align: center;
    border-inline-start: 0;
    border-block-start: 1px solid color-mix(in oklch, var(--accent) 45%, var(--border));
    background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 58%, transparent), transparent 100%);
  }
  [data-signal-node="ee"] .signal-node-detail { inset-inline-start: 5%; top: 35%; }
  [data-signal-node="programming"] .signal-node-detail { inset-inline-end: 5%; top: 35%; }
  [data-signal-node="ai"] .signal-node-detail { inset-inline-end: 6%; bottom: 2.5%; }

  .signal-node-detail h3 {
    font-size: clamp(1rem, .9rem + .25vw, 1.18rem);
    letter-spacing: -.01em;
  }
  .signal-node-detail p {
    margin-block-start: .55rem;
    color: var(--text-dim);
    font-size: .88rem;
    line-height: 1.62;
    max-width: 38ch;
  }
  [data-signal-node="dinavo"] .signal-node-detail p { margin-inline: auto; }
  .signal-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-block-start: .8rem;
  }
  .signal-node-tags li {
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: .28rem .55rem;
    font-family: var(--font-mono);
    font-size: .63rem;
    color: var(--text-faint);
    background: color-mix(in oklch, var(--surface-2) 52%, transparent);
  }
}

.signal-node-detail[hidden] { display: none !important; }

.signal-node-detail:not([hidden]) {
  animation: signalDetailIn .38s var(--ease-out) both;
}
@keyframes signalDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signalPathFlow {
  to { stroke-dashoffset: -30; }
}

@media (prefers-reduced-motion: no-preference) {
  .signal-path.is-active { animation: signalPathFlow 1.35s linear infinite; }
  [data-signal-node="dinavo"][data-active="true"] .signal-node-trigger {
    animation: signalCoreBreath 4.6s ease-in-out infinite;
  }
  @keyframes signalCoreBreath {
    0%, 100% { scale: 1; }
    50% { scale: 1.025; }
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .signal-node-trigger:hover {
    border-color: color-mix(in oklch, var(--accent) 52%, var(--border-strong));
    scale: 1.02;
  }
  [data-signal-node="dinavo"] .signal-node-trigger:hover { scale: 1.035; }
}

.signal-node-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* Tablet: a deliberate two-column signal matrix, not a compressed graph. */
@media (min-width: 768px) and (max-width: 1023px) {
  .signal-map { padding-block: clamp(4.75rem, 8vw, 6.5rem); }
  .signal-map-graph {
    aspect-ratio: auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    border-block: 0;
  }
  .signal-map-paths { display: none; }
  .signal-map-graph::before,
  .signal-map-graph::after { display: none; }
  .signal-node {
    position: relative;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: color-mix(in oklch, var(--surface) 64%, transparent);
  }
  .signal-node-core {
    grid-column: 1 / -1;
    width: min(100%, 560px);
    justify-self: center;
    text-align: center;
    border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 8%, var(--surface)), color-mix(in oklch, var(--surface) 68%, transparent));
  }
  .signal-node-discipline:last-child { grid-column: 1 / -1; }
  .signal-node-trigger {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: .8rem;
    text-align: start;
    border-radius: var(--r-md);
    padding: .75rem .8rem;
    border: 1px solid var(--border-strong);
    background: color-mix(in oklch, var(--bg-deep) 34%, transparent);
  }
  .signal-node-core .signal-node-trigger { justify-content: center; flex-wrap: wrap; }
  .signal-node-index {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: .67rem;
    color: var(--accent);
  }
  .signal-node-mark { font-family: var(--font-mono); font-weight: 800; letter-spacing: .15em; }
  .signal-node-label { font-weight: 650; }
  [data-signal-node][data-active="true"] .signal-node-trigger {
    border-color: color-mix(in oklch, var(--accent) 66%, var(--border));
    background: color-mix(in oklch, var(--accent) 9%, var(--surface-2));
  }
  .signal-node-detail {
    margin-block-start: .85rem;
    padding-block-start: .85rem;
    border-block-start: 1px solid var(--border);
  }
  .signal-node-detail h3 { font-size: var(--fs-h3); }
  .signal-node-detail p { margin-block-start: .45rem; color: var(--text-dim); max-width: 46ch; }
  .signal-node-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .7rem; }
  .signal-node-tags li {
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: .3rem .55rem;
    font-family: var(--font-mono);
    font-size: .67rem;
    color: var(--text-faint);
  }
}

/* Mobile: a vertical, touch-first signal journey. */
@media (max-width: 767px) {
  .signal-map {
    padding-block: 4.5rem calc(4.8rem + env(safe-area-inset-bottom));
  }
  .signal-map::before { opacity: .18; background-size: 48px 48px; }
  .signal-map-head { text-align: start; margin-block-end: 2rem; }
  .signal-map-eyebrow { letter-spacing: .13em; }
  .signal-map-eyebrow::after { display: none; }
  .signal-map-head h2 {
    margin-inline: 0;
    max-width: 14ch;
    font-size: clamp(2rem, 1.55rem + 4vw, 2.65rem);
  }
  .signal-map-head > p:last-child {
    margin-inline: 0;
    max-width: 42ch;
    font-size: 1rem;
  }
  .signal-map-graph {
    aspect-ratio: auto;
    min-height: 0;
    width: 100%;
    border-block: 0;
    display: block;
    padding-inline: .1rem;
  }
  .signal-map-paths,
  .signal-map-graph::after { display: none; }
  .signal-map-graph::before {
    display: block;
    inset: 32px auto 32px 24px;
    inline-size: 1px;
    border: 0;
    clip-path: none;
    background: linear-gradient(to bottom,
      color-mix(in oklch, var(--accent) 68%, transparent),
      color-mix(in oklch, var(--accent-2) 26%, transparent) 68%,
      transparent);
    opacity: .72;
  }
  [dir="rtl"] .signal-map-graph::before { left: auto; right: 24px; }

  .signal-node {
    position: relative;
    padding-block-end: .8rem;
  }
  .signal-node + .signal-node { margin-block-start: .35rem; }

  .signal-node-trigger {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    min-block-size: 64px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem .55rem 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    text-align: start;
    background: transparent;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  [dir="rtl"] .signal-node-trigger { padding: .55rem 0 .55rem .7rem; }
  .signal-node-trigger::before {
    content: "";
    position: absolute;
    inset-inline-start: 1px;
    top: 50%;
    inline-size: 46px;
    block-size: 46px;
    translate: 0 -50%;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: color-mix(in oklch, var(--surface-2) 80%, var(--bg));
    box-shadow: var(--shadow-inset);
    z-index: -1;
  }
  .signal-node-index {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--accent);
  }
  .signal-node-label {
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.2;
  }
  .signal-node-core .signal-node-trigger {
    min-block-size: 78px;
    margin-block-end: .3rem;
    border-color: color-mix(in oklch, var(--accent) 24%, var(--border));
    background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 8%, var(--surface)), transparent);
  }
  [dir="rtl"] .signal-node-core .signal-node-trigger {
    background: linear-gradient(270deg, color-mix(in oklch, var(--accent) 8%, var(--surface)), transparent);
  }
  .signal-node-core .signal-node-trigger::before {
    border-radius: 50%;
    border-color: color-mix(in oklch, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 5%, transparent);
  }
  .signal-node-core .signal-node-mark {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    place-self: center;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--accent);
  }
  .signal-node-core .signal-node-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.12rem;
    letter-spacing: .02em;
  }

  [data-signal-node][data-active="true"] .signal-node-trigger {
    border-color: color-mix(in oklch, var(--accent) 42%, var(--border));
    background: color-mix(in oklch, var(--accent) 7%, var(--surface));
  }
  [data-signal-node][data-active="true"] .signal-node-trigger::before {
    border-color: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 6%, transparent), 0 0 18px color-mix(in oklch, var(--accent) 20%, transparent);
  }

  .signal-node-detail {
    position: relative;
    margin-inline-start: 3.8rem;
    margin-block: .15rem .7rem;
    padding: .7rem .75rem .8rem;
    border-inline-start: 1px solid color-mix(in oklch, var(--accent) 38%, var(--border));
    background: linear-gradient(90deg, color-mix(in oklch, var(--surface) 50%, transparent), transparent);
  }
  [dir="rtl"] .signal-node-detail {
    background: linear-gradient(270deg, color-mix(in oklch, var(--surface) 50%, transparent), transparent);
  }
  .signal-node-detail h3 { font-size: 1rem; }
  .signal-node-detail p {
    margin-block-start: .4rem;
    color: var(--text-dim);
    font-size: .9rem;
    line-height: 1.6;
  }
  .signal-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin-block-start: .65rem;
  }
  .signal-node-tags li {
    padding: .27rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-size: .64rem;
    color: var(--text-faint);
    background: color-mix(in oklch, var(--surface-2) 48%, transparent);
  }
}

@media (max-width: 360px) {
  .signal-map { padding-block-start: 4rem; }
  .signal-map-graph::before { inset-inline-start: 22px; }
  [dir="rtl"] .signal-map-graph::before { inset-inline-start: auto; inset-inline-end: 22px; }
  .signal-node-trigger {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .62rem;
  }
  .signal-node-trigger::before,
  .signal-node-index { inline-size: 42px; block-size: 42px; }
  .signal-node-detail { margin-inline-start: 3.4rem; padding-inline: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-path,
  .signal-path.is-active,
  [data-signal-node="dinavo"][data-active="true"] .signal-node-trigger,
  .signal-node-detail:not([hidden]) {
    animation: none !important;
  }
}
html.motion-off .signal-path,
html.motion-off .signal-path.is-active,
html.motion-off [data-signal-node="dinavo"][data-active="true"] .signal-node-trigger,
html.motion-off .signal-node-detail:not([hidden]) {
  animation: none !important;
}

/* RTL mirrors the purely spatial desktop SVG while text remains untouched. */
@media (min-width: 1024px) {
  [dir="rtl"] .signal-map-paths { transform: scaleX(-1); transform-origin: center; }
}