/* =========================================
   ZEIN COMSYS — "Global Circuit"
   ========================================= */

:root {
  /* ---- Dark theme (default) ---- */
  --bg: #05070D;
  --bg-rgb: 5,7,13;
  --bg-panel: #1A1F2E;
  --panel-rgb: 26,31,46;
  --border-rgb: 255,255,255;
  --cyan: #00D9FF;
  --cyan-rgb: 0,217,255;
  --violet: #7B61FF;
  --violet-rgb: 123,97,255;
  --white: #FFFFFF;
  --grey: #9AA3B5;
  --grey-dim: #5B6478;
  --on-accent: #000000;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-power3: cubic-bezier(0.22, 1, 0.36, 1);

  --container: min(1200px, 92vw);
  --nav-h: clamp(64px, 8vh, 88px);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F4F6FB;
  --bg-rgb: 244,246,251;
  --bg-panel: #FFFFFF;
  --panel-rgb: 255,255,255;
  --border-rgb: 5,7,13;
  --cyan: #00748F;
  --cyan-rgb: 0,116,143;
  --violet: #6A4FE0;
  --violet-rgb: 106,79,224;
  --white: #0B1020;
  --grey: #4C5468;
  --grey-dim: #717B92;
  --on-accent: #FFFFFF;

  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Smooth, inexpensive cross-fade when the theme attribute flips. More
   specific transitions declared later (buttons, cards, etc.) win on
   specificity and are unaffected. */
*, *::before, *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

html {
  scroll-behavior: auto;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  transition: background-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo);
}

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cyan);
  color: var(--on-accent);
  padding: 10px 16px;
  z-index: 10000;
  font-weight: 600;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(var(--cyan-rgb),0.5);
  transition: width .25s var(--ease-out-expo), height .25s var(--ease-out-expo), border-color .25s;
}
.cursor-ring.is-active {
  width: 56px; height: 56px;
  border-color: var(--violet);
  background: rgba(var(--violet-rgb),0.08);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease-out-expo), visibility .6s;
}
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-inner {
  text-align: center;
  width: min(320px, 80vw);
}
.preloader-logo {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.preloader-logo span { color: var(--cyan); }
.preloader-bar-track {
  width: 100%;
  height: 2px;
  background: rgba(var(--border-rgb),0.1);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width .2s var(--ease-out-expo);
}
.preloader-percent {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--grey);
  letter-spacing: 0.1em;
}

/* ---------- Sound toggle ---------- */
.sound-toggle {
  position: fixed;
  bottom: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--panel-rgb),0.8);
  border: 1px solid rgba(var(--border-rgb),0.1);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  transition: border-color .3s, background .3s;
}
.sound-toggle:hover { border-color: var(--cyan); }
.sound-toggle svg { width: 18px; height: 18px; color: var(--white); }
.sound-toggle .icon-sound-on { display: none; }
.sound-toggle[aria-pressed="true"] .icon-sound-off { display: none; }
.sound-toggle[aria-pressed="true"] .icon-sound-on { display: block; }
.sound-toggle[aria-pressed="true"] { background: rgba(var(--cyan-rgb),0.15); }

/* ---------- WhatsApp chat button ---------- */
.whatsapp-button {
  position: fixed;
  bottom: clamp(16px, 3vw, 28px);
  left: clamp(16px, 3vw, 28px);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #25D366;
  color: #06241A;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s;
}
.whatsapp-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37,211,102,0.45);
}
.whatsapp-button svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.whatsapp-button span {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .whatsapp-button span { display: none; }
  .whatsapp-button {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

/* ---------- Theme toggle ---------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--border-rgb),0.15);
  color: var(--white);
  transition: border-color .3s, color .3s, background .3s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-theme-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-theme-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-theme-moon { display: block; }

/* ---------- Header / Nav ----------
   Pinned dark like the hero: the header overlaps the hero at the top of
   the page in both themes, and keeps its own dark, blurred backdrop once
   scrolled past the hero (see navScrollState in animations.js), so it
   reads as a persistent dark toolbar rather than switching with the page. */
.site-header {
  --bg-rgb: 5,7,13;
  --panel-rgb: 26,31,46;
  --border-rgb: 255,255,255;
  --cyan: #00D9FF;
  --violet: #7B61FF;
  --white: #FFFFFF;
  --grey: #9AA3B5;
  --grey-dim: #5B6478;
  --on-accent: #000000;

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  height: var(--nav-h);
  color: var(--white);
  /* Baseline translucent dark backdrop so nav text stays legible even if
     the scroll-driven opacity boost in navScrollState() (animations.js)
     never runs — e.g. a failed GSAP load. JS only deepens this on scroll. */
  background: rgba(var(--bg-rgb), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s;
}
.main-nav {
  width: var(--container);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.04em;
}
.nav-logo span { color: var(--cyan); }
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.nav-menu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--grey);
  transition: color .25s;
}
.nav-menu a:hover, .nav-menu a:focus-visible { color: var(--white); }
.nav-cta {
  padding: 10px 20px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: var(--cyan) !important;
}
.nav-cta:hover { background: var(--cyan); color: var(--on-accent) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  z-index: 410;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease-out-expo), opacity .3s;
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 80vw);
    background: rgba(var(--bg-rgb),0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    transform: translateX(100%);
    transition: transform .4s var(--ease-out-expo);
    border-left: 1px solid rgba(var(--border-rgb),0.08);
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu a { font-size: 1.1rem; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ----------
   The hero stays an immersive dark "island" in both themes — the globe,
   particles and glow are tuned for a dark backdrop and would wash out on
   light. These local custom-property overrides pin it to the dark palette
   regardless of [data-theme] on <html>. The site header gets the same
   treatment just below, since it visually overlaps the hero. */
.hero {
  --bg: #05070D;
  --bg-panel: #1A1F2E;
  --panel-rgb: 26,31,46;
  --border-rgb: 255,255,255;
  --cyan: #00D9FF;
  --cyan-rgb: 0,217,255;
  --violet: #7B61FF;
  --violet-rgb: 123,97,255;
  --white: #FFFFFF;
  --grey: #9AA3B5;
  --grey-dim: #5B6478;
  --on-accent: #000000;

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
  background: var(--bg);
  color: var(--white);
}
#globeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 70% 40%, rgba(var(--cyan-rgb),0.18), transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(var(--violet-rgb),0.15), transparent 50%);
  display: none;
}
.hero-fallback::before {
  content: '';
  position: absolute;
  top: 50%; right: 8%;
  width: min(45vw, 420px);
  height: min(45vw, 420px);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--cyan-rgb),0.3);
  background: radial-gradient(circle at 35% 30%, rgba(var(--cyan-rgb),0.12), transparent 60%);
  animation: fallback-pulse 4s ease-in-out infinite;
}
@keyframes fallback-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.03); }
}
.hero.webgl-unavailable .hero-fallback { display: block; }

.hero-content {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: 0 auto;
  max-width: 760px;
}
.hero-eyebrow {
  color: var(--cyan);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.hero-title {
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  margin-bottom: 28px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title em {
  font-style: normal;
  color: var(--cyan);
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--grey);
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--grey-dim);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-cue-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform .3s var(--ease-out-expo), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--cyan);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--white); color: var(--on-accent); }
.btn-ghost {
  border: 1px solid rgba(var(--border-rgb),0.25);
  color: var(--white);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- Sections general ---------- */
main section {
  position: relative;
  padding: clamp(80px, 14vh, 160px) 0;
  width: var(--container);
  margin: 0 auto;
}
.section-head {
  margin-bottom: clamp(40px, 6vw, 72px);
  max-width: 640px;
}
.section-tag {
  color: var(--cyan);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.section-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  overflow: hidden;
}
.section-sub {
  color: var(--grey);
  margin-top: 16px;
  font-size: 1.05rem;
}

/* ---------- Source section ---------- */
.source-section { overflow: hidden; }
.source-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.source-card {
  background: linear-gradient(160deg, rgba(var(--panel-rgb),0.8), rgba(var(--panel-rgb),0.3));
  border: 1px solid rgba(var(--border-rgb),0.08);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  transition: transform .4s var(--ease-out-expo), border-color .4s;
  will-change: transform;
}
.source-card:hover {
  border-color: var(--cyan);
  transform: translateY(-6px);
}
.source-card-icon {
  width: 56px; height: 56px;
  color: var(--cyan);
  margin-bottom: 20px;
}
.source-card-icon svg { width: 100%; height: 100%; }
.source-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.source-card p {
  color: var(--grey);
  font-size: 0.92rem;
}

@media (max-width: 1024px) {
  .source-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .source-track { grid-template-columns: 1fr; }
}

/* ---------- How section ---------- */
.how-section { position: relative; }
.how-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.how-step {
  padding: 28px 24px;
  border-left: 2px solid rgba(var(--cyan-rgb),0.25);
}
.how-step-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--cyan);
  margin-bottom: 14px;
  font-weight: 700;
}
.how-step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.how-step p { color: var(--grey); font-size: 0.92rem; }
.route-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 200px;
  transform: translateY(-50%);
  color: rgba(var(--cyan-rgb),0.15);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 900px) {
  .how-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how-timeline { grid-template-columns: 1fr; }
}

/* ---------- Why section ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.stat-card {
  text-align: center;
  padding: clamp(28px, 4vw, 44px) 16px;
  background: rgba(var(--panel-rgb),0.4);
  border: 1px solid rgba(var(--border-rgb),0.06);
  border-radius: 20px;
  position: relative;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--white);
  display: inline;
}
.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--cyan);
  display: inline;
}
.stat-label {
  color: var(--grey);
  font-size: 0.85rem;
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.why-copy {
  max-width: 680px;
}
.why-copy p {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--grey);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contact / Form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  max-width: 760px;
}
.contact-info {
  background: rgba(var(--panel-rgb),0.4);
  border: 1px solid rgba(var(--border-rgb),0.08);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
}
.contact-info h3 {
  font-size: 1.05rem;
  margin-bottom: 20px;
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-info-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--cyan);
  margin-top: 2px;
}
.contact-info-icon svg { width: 100%; height: 100%; }
.contact-info-list a,
.contact-info-list span {
  color: var(--grey);
  font-size: 0.92rem;
  line-height: 1.5;
  transition: color .25s;
}
.contact-info-list a:hover { color: var(--cyan); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { max-width: 480px; }
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row-full { grid-column: 1 / -1; }
.form-row label {
  font-size: 0.85rem;
  color: var(--grey);
  letter-spacing: 0.02em;
}
.form-row input,
.form-row select,
.form-row textarea {
  background: rgba(var(--panel-rgb),0.6);
  border: 1px solid rgba(var(--border-rgb),0.12);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .25s, background .25s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--cyan);
  background: rgba(var(--panel-rgb),0.9);
}
.form-row textarea { resize: vertical; min-height: 110px; }
.hidden-field { position: absolute; left: -9999px; }
.form-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}
.form-success {
  max-width: 760px;
  padding: 32px;
  border: 1px solid rgba(var(--cyan-rgb),0.3);
  border-radius: 16px;
  background: rgba(var(--cyan-rgb),0.06);
}
.form-success h3 { color: var(--cyan); margin-bottom: 8px; }

@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  width: var(--container);
  margin: 0 auto;
  padding: clamp(50px, 8vh, 90px) 0 40px;
  border-top: 1px solid rgba(var(--border-rgb),0.08);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-top .footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
.footer-logo span { color: var(--cyan); }
.footer-top p { color: var(--grey); margin-top: 8px; font-size: 0.9rem; }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact a,
.footer-contact span {
  color: var(--grey);
  font-size: 0.9rem;
  transition: color .25s;
}
.footer-contact a:hover { color: var(--cyan); }
.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--grey);
  font-size: 0.9rem;
  transition: color .25s;
}
.footer-links a:hover { color: var(--cyan); }
.footer-bottom {
  color: var(--grey-dim);
  font-size: 0.8rem;
}

/* ---------- Light theme refinements ----------
   Panels are near-white in light mode, so a flat background + hairline
   border reads too flat against the equally light page background.
   A soft shadow restores the card-like depth the dark theme gets for free
   from translucency over a dark page. */
[data-theme="light"] .source-card,
[data-theme="light"] .stat-card {
  box-shadow: 0 1px 2px rgba(var(--border-rgb),0.04), 0 8px 24px rgba(var(--border-rgb),0.06);
}
[data-theme="light"] .form-row input,
[data-theme="light"] .form-row select,
[data-theme="light"] .form-row textarea {
  background: rgba(var(--border-rgb),0.03);
}
[data-theme="light"] .form-row input:focus,
[data-theme="light"] .form-row select:focus,
[data-theme="light"] .form-row textarea:focus {
  background: #FFFFFF;
}
[data-theme="light"] .sound-toggle {
  box-shadow: 0 1px 2px rgba(var(--border-rgb),0.06);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-cue-line { animation: none; }
}

/* ---------- Container queries (progressive enhancement) ---------- */
@container (min-width: 900px) {
  .source-track { gap: 28px; }
}