/* ============================================================
   GoalBall 2026 v2 — skin از DESIGN.md (برند = رنگ/فونت، Cassette = حس)
   جریان عادی صفحه + سکشن ویدیوی اسکرول‌محور + کرسر توپ
   ============================================================ */

/* فونت کلمه — CDN (D5/D14) */
@font-face {
  font-family: 'Kalameh';
  src: url('https://cdn.jsdelivr.net/gh/puya-pro/kalameh_font@main/KalamehWeb-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kalameh';
  src: url('https://cdn.jsdelivr.net/gh/puya-pro/kalameh_font@main/KalamehWeb-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kalameh';
  src: url('https://cdn.jsdelivr.net/gh/puya-pro/kalameh_font@main/KalamehWeb-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* Colors — برند GoalBall */
  --color-navy: #0B1026;
  --color-white: #F7FAFC;
  --color-yellow: #FFD400;
  --color-blue: #0066FF;
  --color-blue-hover: #0052CC;
  --color-red: #FF2D2D;
  --color-green: #00C853;
  --color-line: #1C2340;
  --color-line-strong: #6B7694; /* بوردر فیلدها — ≥3:1 روی پرکننده فیلد (M1 ممیزی v2) */
  --color-muted: #C9CFDD;
  --color-surface: #10152A; /* معادل مات rgba(247,250,252,.02) روی Navy — مات تا خط سفر پشت کارت‌ها پنهان بماند */

  /* Fonts — برند GoalBall */
  --font-fa-display: 'Kalameh', 'Vazirmatn', system-ui, sans-serif;
  --font-fa-body: 'Vazirmatn', system-ui, sans-serif;
  --font-en-display: 'Space Grotesk', 'Noto Sans Display', sans-serif;

  /* Spacing — Cassette (پایه 4px) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-128: 128px;

  --page-max-width: 1280px;

  /* Radius — امضای Cassette */
  --radius-pill: 900px;
  --radius-card: 0px;
}

/* ---------- Reset / پایه ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; color-scheme: dark; scroll-padding-top: var(--sp-24); }
a, button, input, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-fa-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-yellow); color: var(--color-navy); }
:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }

/* ---------- کرسر توپ فوتبال (D24) — CSS خالص، fallback همیشه در انتها ----------
   فقط برای پوینتر دقیق و بدون ترجیح کنتراست/رنگ اجباری (m5 ممیزی) */
@media (pointer: fine) and (forced-colors: none) and (prefers-contrast: no-preference) {
  html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='%23F7FAFC' stroke='%230B1026' stroke-width='2'/%3E%3Cpolygon points='15,10 19.6,13.4 17.9,18.7 12.1,18.7 10.4,13.4' fill='%230B1026'/%3E%3Cg stroke='%230B1026' stroke-width='1.5'%3E%3Cline x1='15' y1='10' x2='15' y2='4.5'/%3E%3Cline x1='19.6' y1='13.4' x2='24.7' y2='11.7'/%3E%3Cline x1='17.9' y1='18.7' x2='21' y2='23.2'/%3E%3Cline x1='12.1' y1='18.7' x2='9' y2='23.2'/%3E%3Cline x1='10.4' y1='13.4' x2='5.3' y2='11.7'/%3E%3C/g%3E%3C/svg%3E") 15 15, auto;
  }
  a, button, select, label, .pill, .cat-cell, .nav-toggle {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='15' fill='none' stroke='%23FFD400' stroke-width='2.4'/%3E%3Ccircle cx='17' cy='17' r='10' fill='%23F7FAFC' stroke='%230B1026' stroke-width='1.8'/%3E%3Cpolygon points='17,12.6 21,15.5 19.5,20.1 14.5,20.1 13,15.5' fill='%230B1026'/%3E%3Cg stroke='%230B1026' stroke-width='1.3'%3E%3Cline x1='17' y1='12.6' x2='17' y2='7.8'/%3E%3Cline x1='21' y1='15.5' x2='25.4' y2='14'/%3E%3Cline x1='19.5' y1='20.1' x2='22.2' y2='24'/%3E%3Cline x1='14.5' y1='20.1' x2='11.8' y2='24'/%3E%3Cline x1='13' y1='15.5' x2='8.6' y2='14'/%3E%3C/g%3E%3C/svg%3E") 17 17, pointer;
  }
  input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea { cursor: text; }
}

/* ابزارها */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; inset-inline-start: var(--sp-16); z-index: 300;
  background: var(--color-yellow); color: var(--color-navy);
  padding: var(--sp-12) var(--sp-24); border-radius: var(--radius-pill);
  font-weight: 500; transition: top .2s ease-out;
}
.skip-link:focus-visible { top: var(--sp-16); }

/* بافت نویز ظریف (حس ریسوگراف Cassette) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- پیل‌ها (Cassette) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--sp-8) var(--sp-24);
  border-radius: var(--radius-pill);
  font-family: var(--font-fa-body); font-size: 14px; font-weight: 500;
  /* بدون letter-spacing — tracking اتصال حروف فارسی را می‌شکند؛ فقط برای [lang=en] */
  /* هاور با پراپرتی translate — جدا از transform ِ :active و GSAP */
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out,
    transform .15s ease-out, translate .25s ease-out;
}
.pill:hover, .pill:focus-visible { translate: 0 -2px; }
.pill:active { transform: scale(.96); translate: 0 0; }
.pill-outline { border: 1px solid var(--color-yellow); color: var(--color-yellow); background: transparent; }
.pill-outline:hover, .pill-outline:focus-visible { background: rgba(255, 212, 0, .12); }
.pill-filled { border: 1px solid var(--color-blue); background: var(--color-blue); color: #fff; }
.pill-filled:hover, .pill-filled:focus-visible { background: var(--color-blue-hover); border-color: var(--color-blue-hover); }

/* ---------- بج سکشن ---------- */
.section-badge {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--color-yellow); border-radius: var(--sp-16);
  padding: var(--sp-8) var(--sp-16); margin-bottom: var(--sp-24);
  color: var(--color-yellow); font-size: 12px; line-height: 1.5;
}
.section-badge [lang="en"] {
  font-family: var(--font-en-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
}

/* ---------- هدر ایستا — وسط‌چین (D22) ---------- */
.site-header {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-16);
  padding: var(--sp-24) var(--sp-16);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-navy);
}
.brand-mark {
  font-family: var(--font-en-display); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; color: var(--color-yellow);
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px;
}
.brand-mark b { color: var(--color-white); margin-inline-start: .3em; }
.brand-ball {
  display: inline-block; width: .58em; height: .58em; margin: 0 .05em;
  border-radius: 50%; border: .09em solid currentColor;
  transition: rotate .6s ease-out; /* توپ برند با هاور آرام می‌غلتد */
  background:
    radial-gradient(circle at 50% 42%, transparent 54%, currentColor 56% 62%, transparent 64%),
    conic-gradient(currentColor 0 8%, transparent 8% 28%, currentColor 28% 34%, transparent 34% 62%, currentColor 62% 68%, transparent 68% 100%);
}
.brand-mark:hover .brand-ball, .brand-mark:focus-visible .brand-ball { rotate: 180deg; }
.pill-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: center; }
.nav-toggle { display: none; }

/* ---------- هدر مینی موبایل — با اسکرول به بالا نرم ظاهر می‌شود (B1/D31) ---------- */
.mini-header { display: none; }
@media (max-width: 900px) {
  .mini-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
    position: fixed; top: 0; inset-inline: 0; z-index: 100; min-height: 56px;
    padding: var(--sp-8) var(--sp-16);
    background: rgba(11, 16, 38, .92);
    border-bottom: 1px solid var(--color-line);
    translate: 0 -110%;
    transition: translate .3s ease-out;
  }
  .mini-header.show { translate: 0 0; }
  .mini-header .brand-mark { font-size: 16px; min-height: 44px; }
  /* WCAG 2.4.11: وقتی نوار ثابت نمایان است، هدف فوکوس/انکر زیر نوار نرود */
  html.mini-shown { scroll-padding-top: 64px; }
}

/* ---------- هیرو — sticky زیر سکشن ویدیو؛ حس پس‌زمینه ثابت از خود pin می‌آید (D21/D26) ---------- */
.stage-wrap { position: relative; }
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  position: sticky; top: 0; /* ویدیو رویش می‌لغزد؛ top در JS برای زوم بالا جبران می‌شود (F4) */
  padding: var(--sp-48) var(--sp-24) var(--sp-64);
  background:
    linear-gradient(rgba(11, 16, 38, .75), rgba(11, 16, 38, .84)),
    url('../assets/hero.jpg') center / cover no-repeat;
}
.hero-heading {
  font-family: var(--font-fa-display); font-weight: 900;
  font-size: clamp(34px, min(8.6vw, 12.5vh), 120px);
  line-height: 1.25; max-width: 15ch; margin-bottom: var(--sp-24);
}
.hero-heading .w { display: inline-block; }
.hero-heading .hl { color: var(--color-yellow); }
.hero-tagline {
  max-width: 52ch; color: var(--color-muted); font-size: clamp(15px, 1.4vw, 19px);
  margin-bottom: var(--sp-32);
}
.hero-cta { font-size: 16px; padding: var(--sp-12) var(--sp-48); }
.label-row {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-8) var(--sp-32); margin-top: var(--sp-48);
  font-size: 13px; font-weight: 500; color: var(--color-muted);
}
.label-row li { position: relative; }
.label-row li:not(:last-child)::after {
  content: "·"; position: absolute; inset-inline-start: calc(100% + var(--sp-12)); color: var(--color-yellow);
}
.scroll-hint {
  position: absolute; bottom: var(--sp-16); inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-8);
  color: var(--color-muted); font-size: 12px;
}
.scroll-hint i {
  width: 1px; height: 36px; background: var(--color-yellow); display: block;
  animation: hint 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* ویوپورت کوتاه (مثل ۱۳۶۶×۶۶۲): فاصله‌ها فشرده تا هیچ روی‌هم‌افتادگی نباشد */
@media (max-height: 760px) {
  .hero { padding-top: var(--sp-32); }
  .hero .section-badge { margin-bottom: var(--sp-16); }
  .hero-heading { margin-bottom: var(--sp-16); }
  .hero-tagline { margin-bottom: var(--sp-20); }
  .label-row { margin-top: var(--sp-24); }
  .scroll-hint { display: none; }
}

/* ---------- سکشن ویدیوی اسکرول‌محور (D20) ---------- */
.video-stage { height: 400vh; position: relative; }
.video-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: var(--color-navy);
}
#canvas { width: 100%; height: 100%; display: block; }
.video-badge {
  position: absolute; bottom: var(--sp-24); inset-inline-start: var(--sp-24);
  margin: 0; background: rgba(11, 16, 38, .85);
}
.video-progress {
  position: absolute; bottom: 0; inset-inline: 0; height: 3px;
  background: var(--color-line);
}
#video-progress-bar { display: block; width: 0; height: 100%; background: var(--color-yellow); }

/* ---------- خط سفر زرد + توپ غلتان (D25) — تزئینی، پشت محتوا ---------- */
.journey-zone { position: relative; }
.journey {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.journey-zone > :not(.journey) { position: relative; z-index: 1; }
.journey-path {
  fill: none; stroke: var(--color-yellow); stroke-width: 2.5;
  stroke-linecap: round; opacity: .5;
}
.journey-ball { opacity: 0; } /* پس از ساخت مسیر در JS دیده می‌شود */
/* بج سکشن‌های وسط‌چین روی بدنه صفحه — پس‌زمینه مات تا خط از پشت متن رد نشود */
.section-categories .section-badge, .section-contact .section-badge { background: var(--color-navy); }
.journey-ball circle { fill: var(--color-white); stroke: var(--color-navy); stroke-width: 2; }
.journey-ball polygon { fill: var(--color-navy); }
.journey-stitch line { stroke: var(--color-navy); stroke-width: 1.6; }

/* ---------- سکشن‌های جریان عادی ---------- */
.reveal { padding-block: var(--sp-64); scroll-margin-top: var(--sp-24); }
.section-content {
  max-width: var(--page-max-width); margin-inline: auto;
  display: flex; padding-inline: var(--sp-24);
}
.align-right { justify-content: flex-start; }
.align-left { justify-content: flex-end; }
.section-inner {
  max-width: 620px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--sp-32);
}
.section-heading {
  font-family: var(--font-fa-display); font-weight: 900;
  font-size: clamp(28px, 3.6vw, 56px); line-height: 1.3; margin-bottom: var(--sp-20);
}
.hero-heading, .section-heading { text-wrap: balance; }
.section-body { font-size: clamp(15px, 1.25vw, 18px); max-width: 46ch; }
.section-body + .section-body { margin-top: var(--sp-16); }
.section-note { color: var(--color-yellow); font-weight: 500; }
.story-img { margin-top: var(--sp-24); border: 1px solid var(--color-line); width: 100%; }

/* ---------- نوار marquee در جریان صفحه ---------- */
.marquee-band {
  overflow: hidden; padding-block: var(--sp-32);
  border-block: 1px solid var(--color-line);
}
.marquee-text {
  white-space: nowrap; display: inline-block; will-change: transform;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 9vw; line-height: 1.05; /* بدون tracking — متن مارکی بخش فارسی هم دارد (F7 ممیزی) */
  color: transparent; -webkit-text-stroke: 1px rgba(255, 212, 0, .55);
}

/* ---------- دسته‌بندی — کارت‌های بازسازی‌شده + هاور خلاقانه (D23) ---------- */
.section-categories .section-inner-wide,
.section-contact .section-inner-wide {
  max-width: 1100px; margin-inline: auto; text-align: center; padding-inline: var(--sp-24);
}
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line); margin-top: var(--sp-32);
}
.cat-cell {
  display: block; position: relative;
  border-inline-start: 1px solid var(--color-line);
  background: var(--color-navy);
  /* هاور با پراپرتی translate تا با transform ِ GSAP (انیمیشن ورود) تداخل نکند */
  transition: translate .3s cubic-bezier(.2, .8, .2, 1);
}
.cat-cell:first-child { border-inline-start: none; }
/* قاب تصویر: تصویر هرگز از کادر بیرون نمی‌زند */
.cat-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cat-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease-out;
}
.cat-label {
  display: block; position: relative; padding: var(--sp-16) var(--sp-16) var(--sp-20);
  font-weight: 500; font-size: 16px; text-align: start;
  border-top: 1px solid var(--color-line);
}
.cat-label i {
  display: block; font-style: normal; font-weight: 400; font-size: 13px;
  color: var(--color-muted); margin-top: 2px; max-width: 30ch;
}
.cat-arrow {
  position: absolute; inset-inline-end: var(--sp-16); top: var(--sp-16);
  font-weight: 400; font-size: 20px; color: var(--color-yellow);
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.cat-cell:hover, .cat-cell:focus-visible {
  translate: 0 -6px;
  outline: 1px solid var(--color-yellow); outline-offset: -1px;
  z-index: 1;
}
.cat-cell:hover .cat-media img, .cat-cell:focus-visible .cat-media img { transform: scale(1.06); filter: brightness(1.06); }
.cat-cell:hover .cat-arrow, .cat-cell:focus-visible .cat-arrow { opacity: 1; transform: translateX(0); }
.cat-cell:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

/* ---------- فرم ---------- */
.section-form { display: flex; justify-content: center; padding-inline: var(--sp-24); }
.form-card {
  width: min(620px, 100%);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--sp-32);
}
.form-intro { color: var(--color-muted); font-size: 14px; margin-bottom: var(--sp-24); max-width: 50ch; }
.form-note { font-size: 12px; color: var(--color-muted); margin-bottom: var(--sp-16); text-align: start; }
.form-note b { color: var(--color-red); }
.field { margin-bottom: var(--sp-16); text-align: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--color-muted); margin-bottom: var(--sp-8);
}
.field label b { color: var(--color-red); font-weight: 700; }
.field label { transition: color .2s ease-out; }
.field:focus-within label { color: var(--color-yellow); } /* واکنش ظریف فرم به فوکوس */
.field input, .field select {
  width: 100%; min-height: 48px; padding: var(--sp-8) var(--sp-12);
  background: rgba(247, 250, 252, .05); color: var(--color-white);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-card);
  font-family: var(--font-fa-body); font-size: 16px;
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
.field input::placeholder { color: var(--color-muted); opacity: 1; }
.field select option { background-color: var(--color-navy); color: var(--color-white); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23FFD400' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: left 14px center;
  background-repeat: no-repeat;
  padding-inline-end: var(--sp-12);
}
.field input:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--color-yellow); outline-offset: 2px; border-color: var(--color-yellow);
  background-color: rgba(247, 250, 252, .08);
}
.field input.invalid { border-color: var(--color-red); }
.field-error { min-height: 20px; font-size: 12px; color: var(--color-red); margin-top: var(--sp-4); }
.field-hint { font-size: 12px; color: var(--color-muted); margin-top: var(--sp-4); }
.form-submit { width: 100%; font-size: 16px; margin-top: var(--sp-8); }
.form-submit[disabled] { opacity: .5; }
.btn-spinner {
  display: none; width: 18px; height: 18px; margin-inline-start: var(--sp-8);
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.form-submit.loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { min-height: 24px; margin-top: var(--sp-16); color: var(--color-green); font-weight: 500; }
/* ورود آرام پیام‌های فرم — فقط opacity/translate؛ المان هرگز hidden نمی‌شود (aria-live سالم می‌ماند) */
.msg-in { animation: msg-in .25s ease-out both; }
@keyframes msg-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* ---------- تماس / فوتر ---------- */
.section-contact { text-align: center; }
.contact-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line); margin-top: var(--sp-32); text-align: start;
}
.contact-grid li {
  padding: var(--sp-20); border-inline-start: 1px solid var(--color-line); border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.contact-grid li:nth-child(-n+3) { border-top: none; }
.contact-grid li:nth-child(3n+1) { border-inline-start: none; }
.c-label { display: block; font-size: 12px; color: var(--color-yellow); margin-bottom: var(--sp-4); }
.c-value { font-size: 15px; }
/* تارگت لمسی ≥44px + جابه‌جایی ظریف هم‌جهت RTL روی هاور */
.contact-grid a.c-value {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .2s ease-out, translate .25s ease-out;
}
.contact-grid a.c-value:hover, .contact-grid a.c-value:focus-visible { color: var(--color-yellow); translate: -3px 0; }
.site-footer { text-align: center; padding-inline: var(--sp-24); }
.footer-word {
  font-family: var(--font-en-display); font-weight: 700; font-size: 16vw; line-height: 1;
  margin-top: var(--sp-48); color: transparent; -webkit-text-stroke: 1px rgba(255, 212, 0, .5);
  user-select: none;
}
.footer-sign { font-family: var(--font-fa-display); font-weight: 500; font-size: clamp(16px, 2vw, 24px); margin-top: var(--sp-16); }
.footer-legal { color: var(--color-muted); font-size: 12px; margin-top: var(--sp-8); padding-bottom: var(--sp-48); }

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  body::after { content: none; } /* نویز fixed + mix-blend روی موبایل هزینه compositing دارد — اسکرول روان‌تر */
  .nav-toggle { display: inline-flex; }
  .pill-cluster { display: none; width: 100%; flex-direction: column; align-items: stretch; text-align: center; }
  .pill-cluster.open { display: flex; }
  .video-stage { height: 250vh; }
  .section-content { display: block; }
  .section-inner { max-width: 100%; padding: var(--sp-24); }
  .reveal { padding-block: var(--sp-48); }
  .site-header { padding: var(--sp-16); }
  .marquee-band { padding-block: var(--sp-20); }
  .footer-word { margin-top: var(--sp-24); }
  .section-heading { margin-bottom: var(--sp-16); }
  .hero-cta { min-height: 52px; width: min(100%, 320px); }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-cell { border-inline-start: none; border-top: 1px solid var(--color-line); }
  .cat-cell:first-child { border-top: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid li { border-inline-start: none; border-top: 1px solid var(--color-line); }
  .contact-grid li:first-child { border-top: none; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--sp-20); }
  .marquee-text { font-size: 16vw; }
  .label-row { gap: var(--sp-8) var(--sp-24); }
  .journey { display: none; } /* F6: در عرض کم خط سفر شلوغی می‌سازد */
}

/* لمسی: hover وجود ندارد — فلش کارت دسته‌بندی همیشه دیده شود */
@media (hover: none) {
  .cat-arrow { opacity: 1; transform: translateX(0); }
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none; }
  .pill, .cat-cell, .cat-media img, .cat-arrow, .skip-link,
  .brand-ball, .field label, .field input, .field select,
  .contact-grid a.c-value, .mini-header { transition: none; }
  .pill:hover, .pill:focus-visible { translate: none; }
  .brand-mark:hover .brand-ball, .brand-mark:focus-visible .brand-ball { rotate: none; }
  .contact-grid a.c-value:hover, .contact-grid a.c-value:focus-visible { translate: none; }
  .msg-in { animation: none; }
  .btn-spinner { animation-duration: 1.5s; }
  .video-stage { height: auto; }
  .video-sticky { position: relative; height: 60vh; }
  .marquee-band { display: none; }
  .hero { position: static; } /* بدون pin و بدون حرکت — سکشن عادی */
  .journey { display: none; } /* F6: backstop مستقل از JS */
}
.form-submit[aria-disabled="true"] { opacity: .5; }