:root,
    html[data-theme="dark"] {
      --deep: #060A14;
      --page-bg: #060A14;
      --gold: #C9A84C;
      --gold-light: #F0D080;
      --gold-bright: #F0D080;
      --gold-rgb: 201, 168, 76;
      --gold-dark: #8a6910;
      --gold-pale: #fff4c8;
      --gold-deep: #3d2e0a;
      /* اتمسفر صحنه/شهر — در تک‌رنگ = همان accent؛ در ترکیبی جداست */
      --atm: #C9A84C;
      --atm-rgb: 201, 168, 76;
      --atm-deep: #3d2e0a;
      /* ذرات معلق — از accent و اتمسفر مشتق می‌شوند تا روی هر پالت دیده شوند */
      --atm-glow: color-mix(in srgb, var(--atm) 55%, #e8f0ff);
      --particle-1: var(--gold);
      --particle-2: var(--gold-bright);
      --particle-3: color-mix(in srgb, var(--gold) 50%, var(--atm-glow));
      --particle-4: var(--atm-glow);
      --particle-5: color-mix(in srgb, var(--gold-pale) 65%, var(--atm-glow));
      --particle-op: 0.6;
      --particle-glow: 6px;
      --blue: #1A6EFF;
      --purple: #8B5CF6;
      --cyan: #00D4FF;
      --green: #10E87A;
      --ink-rgb: 255, 255, 255;
      --shade-rgb: 0, 0, 0;
      --fg: #ffffff;
      --fg-strong: #ffffff;
      --fg-muted: rgba(255, 255, 255, 0.7);
      --surface: rgba(255, 255, 255, 0.06);
      --border: rgba(255, 255, 255, 0.1);
      --header-scrolled-bg: rgba(6, 10, 20, 0.75);
      --bg-shade: rgba(6, 10, 20, 0.72);
      --door-bg: linear-gradient(135deg, #0a1020 0%, #121a30 50%, #0a1020 100%);
      --panel-border: rgba(255, 255, 255, 0.08);
      --panel-fg-strong: #ffffff;
      --panel-theme-btn-bg: rgba(255, 255, 255, 0.06);
      --panel-theme-btn-hover: rgba(255, 255, 255, 0.1);
      --mouse-x: 50%;
      --mouse-y: 50%;
      --header-h: 72px;
      --scene-h: 100vh;
      --scene-h: 100svh;
      --scene-h: 100dvh;
      --safe-top: env(safe-area-inset-top, 0px);
      --scene-count: 6;
      --scene-gap: 1rem;
      --scene-pad-x: clamp(1.25rem, 4vw, 2.5rem);
      --flow-section-pad: clamp(3.5rem, 8vh, 5rem);
      /* ارتفاع تقریبی بلوک ثبت ایده — برای هم‌تراز کردن فاصلهٔ چشم‌انداز→مشارکت با مشارکت→ثبت ایده */
      --scene-form-block-h: clamp(18rem, 52vh, 26rem);

      /* ── جای عمودی محتوا (منفی = بالا · مثبت = پایین) ── */
      /* روی .scene-overlay اعمال می‌شود — GSAP روی .scene-content را کنترل می‌کند */
      /* دسکتاپ */
      --scene-y-splash: 0%;
      --scene-y-city: 0%;
      --scene-y-building: -4%;
      --scene-y-sky: -4%;
      --scene-y-wall: -4%;
      --scene-y-form: 0%;
      /* موبایل — اگر با دسکتاپ یکی باشد همان عدد را بگذار */
      --scene-y-splash-mobile: 0%;
      --scene-y-city-mobile: 0%;
      --scene-y-building-mobile: -3%;
      --scene-y-sky-mobile: -3%;
      --scene-y-wall-mobile: -3%;
      --scene-y-form-mobile: 0%;
    }

    /* لایت مود لندینگ — هم‌تراز با پنل‌ها؛ --deep برای متن روی طلا ثابت می‌ماند */
    html[data-theme="light"] {
      --page-bg: #eef1f7;
      --ink-rgb: 15, 23, 42;
      --shade-rgb: 0, 0, 0;
      --fg: #1e293b;
      --fg-strong: #0f172a;
      --fg-muted: rgba(15, 23, 42, 0.65);
      --surface: #ffffff;
      --border: rgba(15, 23, 42, 0.1);
      --header-scrolled-bg: rgba(255, 255, 255, 0.9);
      --bg-shade: rgba(238, 241, 247, 0.82);
      --door-bg: linear-gradient(135deg, #e8ecf4 0%, #f5f7fb 50%, #e8ecf4 100%);
      --green: #0a9f56;
      --panel-border: rgba(15, 23, 42, 0.1);
      --panel-fg-strong: #0f172a;
      --panel-theme-btn-bg: rgba(15, 23, 42, 0.05);
      --panel-theme-btn-hover: rgba(15, 23, 42, 0.09);
      color-scheme: light;
    }

    /* ── پالت‌های رنگی (accent) — جدا از دارک/لایت ── */
    html[data-accent="blue"] {
      --gold: #4C8DD9;
      --gold-light: #8FC2F5;
      --gold-bright: #8FC2F5;
      --gold-rgb: 76, 141, 217;
      --gold-dark: #1d5a9e;
      --gold-pale: #e3f1ff;
      --gold-deep: #0a2440;
      --atm: #4C8DD9;
      --atm-rgb: 76, 141, 217;
      --atm-deep: #0a2440;
    }
    html[data-accent="green"] {
      --gold: #2FAE6F;
      --gold-light: #7FE0AC;
      --gold-bright: #7FE0AC;
      --gold-rgb: 47, 174, 111;
      --gold-dark: #17714a;
      --gold-pale: #e2ffee;
      --gold-deep: #06301c;
      --atm: #2FAE6F;
      --atm-rgb: 47, 174, 111;
      --atm-deep: #06301c;
    }
    html[data-accent="purple"] {
      --gold: #9B6DF0;
      --gold-light: #C9AAF8;
      --gold-bright: #C9AAF8;
      --gold-rgb: 155, 109, 240;
      --gold-dark: #6a3fc0;
      --gold-pale: #f1e8ff;
      --gold-deep: #2a1354;
      --atm: #9B6DF0;
      --atm-rgb: 155, 109, 240;
      --atm-deep: #2a1354;
    }
    html[data-accent="rose"] {
      --gold: #E0637E;
      --gold-light: #F5A0B2;
      --gold-bright: #F5A0B2;
      --gold-rgb: 224, 99, 126;
      --gold-dark: #a52947;
      --gold-pale: #ffe9ee;
      --gold-deep: #47101f;
      --atm: #E0637E;
      --atm-rgb: 224, 99, 126;
      --atm-deep: #47101f;
    }

    /* ── پالت‌های ترکیبی: اتمسفر (--atm) جدا از UI (--gold) ── */
    html[data-accent="navy-gold"] {
      --gold: #C9A84C;
      --gold-light: #F0D080;
      --gold-bright: #F0D080;
      --gold-rgb: 201, 168, 76;
      --gold-dark: #8a6910;
      --gold-pale: #fff4c8;
      --gold-deep: #3d2e0a;
      /* آبی اتمسفر — زنده و پر اشباع */
      --atm: #0A4DFF;
      --atm-rgb: 10, 77, 255;
      --atm-deep: #001A7A;
      --particle-op: 0.72;
      --particle-glow: 8px;
    }
    html[data-accent="navy-gold"] .city-skyline__art {
      filter: saturate(1.55) brightness(1.12) contrast(1.08) hue-rotate(-8deg);
      opacity: 0.42;
    }
    html[data-theme="light"][data-accent="navy-gold"] .city-skyline__art {
      filter: saturate(1.65) brightness(1.05) contrast(1.1) hue-rotate(-6deg);
      opacity: 0.48;
    }
    html[data-accent="navy-gold"] .city-skyline__glow {
      background:
        radial-gradient(ellipse 80% 50% at 50% 85%, rgba(10, 77, 255, 0.28), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(10, 77, 255, 0.16), transparent 55%);
    }
    html[data-accent="forest-gold"] {
      --gold: #C9A84C;
      --gold-light: #F0D080;
      --gold-bright: #F0D080;
      --gold-rgb: 201, 168, 76;
      --gold-dark: #8a6910;
      --gold-pale: #fff4c8;
      --gold-deep: #3d2e0a;
      --atm: #1A5C3A;
      --atm-rgb: 26, 92, 58;
      --atm-deep: #0A2416;
    }
    html[data-accent="wine-gold"] {
      --gold: #C9A84C;
      --gold-light: #F0D080;
      --gold-bright: #F0D080;
      --gold-rgb: 201, 168, 76;
      --gold-dark: #8a6910;
      --gold-pale: #fff4c8;
      --gold-deep: #3d2e0a;
      /* قرمز اتمسفر — زنده و پررنگ */
      --atm: #F0103C;
      --atm-rgb: 240, 16, 60;
      --atm-deep: #6A0018;
      --particle-op: 0.72;
      --particle-glow: 8px;
    }
    html[data-accent="ink-cyan"] {
      --gold: #00E8FF;
      --gold-light: #7AFAFF;
      --gold-bright: #5CF4FF;
      --gold-rgb: 0, 232, 255;
      --gold-dark: #0090A8;
      --gold-pale: #D6FBFF;
      --gold-deep: #003840;
      --atm: #0A2FFF;
      --atm-rgb: 10, 47, 255;
      --atm-deep: #000E66;
      --particle-op: 0.72;
      --particle-glow: 8px;
    }

    /* ── شارپ / جیغ: آبی–قرمز و طلایی–سرمه‌ای پررنگ ── */
    html[data-accent="vivid-blaze"] {
      --gold: #FF0033;
      --gold-light: #FF5C7A;
      --gold-bright: #FF3360;
      --gold-rgb: 255, 0, 51;
      --gold-dark: #B00024;
      --gold-pale: #FFE0E8;
      --gold-deep: #4A0010;
      --atm: #0040FF;
      --atm-rgb: 0, 64, 255;
      --atm-deep: #0018AA;
      --particle-op: 0.82;
      --particle-glow: 10px;
    }
    html[data-accent="vivid-royal"] {
      --gold: #FFD000;
      --gold-light: #FFE566;
      --gold-bright: #FFEA7A;
      --gold-rgb: 255, 208, 0;
      --gold-dark: #B88600;
      --gold-pale: #FFF6C2;
      --gold-deep: #3D2E00;
      /* سرمه‌ای زنده، نه نزدیک به مشکی */
      --atm: #0A2CFF;
      --atm-rgb: 10, 44, 255;
      --atm-deep: #00106A;
      --particle-op: 0.78;
      --particle-glow: 9px;
    }

    /* ── موج شناور: رنگ‌ها در زمان و با اسکرول جابه‌جا می‌شوند (JS مقدار --gold/--atm را می‌نویسد) ── */
    html[data-accent="chroma-wave"] {
      --gold: #FF2D55;
      --gold-light: #FF7A93;
      --gold-bright: #FF5C7A;
      --gold-rgb: 255, 45, 85;
      --gold-dark: #9E1030;
      --gold-pale: #FFE4EA;
      --gold-deep: #3A0A16;
      --atm: #1A6EFF;
      --atm-rgb: 26, 110, 255;
      --atm-deep: #061C4A;
      --particle-op: 0.72;
      --particle-glow: 8px;
    }

    /* ── طلایی درخشان انیمیشنی + سرمه‌ای شارپ #051650 ── */
    html[data-accent="shine-royal"] {
      --gold: #E0AA3E;
      --gold-light: #F9F295;
      --gold-bright: #FAF398;
      --gold-rgb: 224, 170, 62;
      --gold-dark: #B88A44;
      --gold-pale: #F9F295;
      --gold-deep: #3d2a0a;
      --atm: #051650;
      --atm-rgb: 5, 22, 80;
      --atm-deep: #020B28;
      --particle-op: 0.75;
      --particle-glow: 9px;
      --shine-a: #F9F295;
      --shine-b: #E0AA3E;
      --shine-c: #FAF398;
      --shine-d: #B88A44;
    }
    html[data-accent="shine-royal"] .header__cta,
    html[data-accent="shine-royal"] .cta-card__btn,
    html[data-accent="shine-royal"] .accent-picker__dot,
    html[data-accent="shine-royal"] .progress-bar__fill,
    html[data-accent="shine-royal"] .cursor-dot {
      background-image: linear-gradient(
        110deg,
        var(--shine-a) 0%,
        var(--shine-b) 22%,
        var(--shine-c) 44%,
        var(--shine-d) 66%,
        var(--shine-b) 82%,
        var(--shine-a) 100%
      );
      background-size: 240% 100%;
      animation: shine-gold-flow 3.2s linear infinite;
    }
    html[data-accent="shine-royal"] .cursor-dot {
      box-shadow: 0 0 14px rgba(224, 170, 62, 0.75);
    }
    html[data-accent="shine-royal"] .splash-text,
    html[data-accent="shine-royal"] .scene-heading--gold,
    html[data-accent="shine-royal"] .m-title--gold {
      background-image: linear-gradient(
        110deg,
        var(--shine-a) 0%,
        var(--shine-b) 24%,
        var(--shine-c) 48%,
        var(--shine-d) 72%,
        var(--shine-a) 100%
      );
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine-gold-flow 4s ease-in-out infinite;
    }
    html[data-accent="shine-royal"] .city-skyline__glow {
      background:
        radial-gradient(ellipse 80% 50% at 50% 85%, rgba(5, 22, 80, 0.55), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(224, 170, 62, 0.12), transparent 55%);
    }
    html[data-accent="shine-royal"] body::before {
      background:
        radial-gradient(ellipse 70% 55% at var(--mouse-x) var(--mouse-y), rgba(224, 170, 62, 0.1), transparent 58%),
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(5, 22, 80, 0.45), transparent 70%);
    }
    html[data-accent="shine-royal"] .accent-picker__swatch--shine {
      background: linear-gradient(135deg, #051650 45%, #E0AA3E 45%, #F9F295 70%, #B88A44 100%);
    }
    @keyframes shine-gold-flow {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
      html[data-accent="shine-royal"] .header__cta,
      html[data-accent="shine-royal"] .cta-card__btn,
      html[data-accent="shine-royal"] .accent-picker__dot,
      html[data-accent="shine-royal"] .progress-bar__fill,
      html[data-accent="shine-royal"] .cursor-dot,
      html[data-accent="shine-royal"] .splash-text,
      html[data-accent="shine-royal"] .scene-heading--gold,
      html[data-accent="shine-royal"] .m-title--gold {
        animation: none !important;
        background-position: 30% 50%;
      }
    }
    html.accent-wave body::before {
      animation: wave-aura-shift 10s ease-in-out infinite;
      opacity: 0.55;
    }
    html.accent-wave .holo-bg__mesh {
      animation-duration: 14s;
      filter: blur(40px) saturate(1.45);
    }
    html.accent-wave .city-skyline__glow {
      animation: wave-glow-pulse 6s ease-in-out infinite;
    }
    html.accent-wave .accent-picker__dot {
      background: conic-gradient(from 0deg, #FF2D55, #FFB020, #14E8A8, #3B82F6, #A855F7, #FF2D55);
      animation: wave-swatch-spin 4s linear infinite;
    }
    /* لوگو در موج شناور — رنگ از پایه طلایی به --gold جاری می‌چرخد */
    html.accent-wave [data-accent-logo] {
      filter:
        hue-rotate(var(--logo-hue, 0deg))
        saturate(var(--logo-sat, 1.3))
        drop-shadow(0 0 24px rgba(var(--gold-rgb), 0.45));
    }

    @keyframes wave-aura-shift {
      0%, 100% { filter: hue-rotate(0deg) saturate(1.2); }
      50% { filter: hue-rotate(70deg) saturate(1.45); }
    }
    @keyframes wave-glow-pulse {
      0%, 100% { opacity: 0.85; filter: hue-rotate(0deg); }
      50% { opacity: 1; filter: hue-rotate(40deg); }
    }
    @keyframes wave-swatch-spin {
      to { filter: hue-rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      html.accent-wave body::before,
      html.accent-wave .city-skyline__glow,
      html.accent-wave .accent-picker__dot {
        animation: none !important;
      }
    }
    /* در لایت، متن‌های accent باید تیره بمانند (بعد از پالت‌ها) */
    html[data-theme="light"] {
      --gold-light: var(--gold-dark);
      /* در لایت ذرات باید تیره‌تر از پس‌زمینه باشند تا دیده شوند */
      --atm-glow: color-mix(in srgb, var(--atm) 72%, #0b1220);
      --particle-1: var(--gold-dark);
      --particle-2: color-mix(in srgb, var(--gold) 45%, var(--gold-dark));
      --particle-3: color-mix(in srgb, var(--gold-dark) 55%, var(--atm-glow));
      --particle-4: var(--atm-glow);
      --particle-5: color-mix(in srgb, var(--gold-dark) 55%, #10203a);
      --particle-op: 0.78;
      --particle-glow: 2px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: auto;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-family: 'Vazirmatn', sans-serif;
      background: var(--page-bg);
      color: var(--fg);
      overflow-x: hidden;
      cursor: none;
      min-height: 100vh;
      color-scheme: dark;
    }

    html[data-theme="light"] body {
      color-scheme: light;
    }

    body.no-custom-cursor { cursor: auto; }

    body.holo-active::before {
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    /* Holographic dark bg — از صحنه شهر به بعد */
    .holo-bg {
      position: fixed;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      overflow: hidden;
      transition: opacity 0.6s ease;
    }
    .holo-bg.is-active .holo-bg__mesh {
      animation-play-state: running;
    }
    .holo-bg__base {
      position: absolute;
      inset: 0;
      background: var(--deep);
    }
    .holo-bg__mesh {
      position: absolute;
      inset: -60%;
      opacity: 0.55;
      background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(26,110,255,0.14),
        rgba(var(--gold-rgb),0.10),
        rgba(139,92,246,0.12),
        rgba(0,212,255,0.08),
        rgba(16,232,122,0.06),
        rgba(26,110,255,0.14)
      );
      animation: holo-spin 28s linear infinite;
      animation-play-state: paused;
      filter: blur(60px);
    }
    .holo-bg__mesh--reverse {
      opacity: 0.35;
      animation-direction: reverse;
      animation-duration: 36s;
      filter: blur(80px);
    }
    .holo-bg__glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at var(--mouse-x) var(--mouse-y), rgba(var(--gold-rgb),0.09), transparent 58%),
        radial-gradient(ellipse 50% 40% at 75% 25%, rgba(26,110,255,0.07), transparent 52%),
        radial-gradient(ellipse 45% 45% at 25% 75%, rgba(139,92,246,0.06), transparent 48%);
      mix-blend-mode: screen;
    }
    .holo-bg__vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 35%, rgba(6,10,20,0.92) 100%);
    }
    @keyframes holo-spin {
      to { transform: rotate(360deg); }
    }

    /* Holographic bg (subtle, splash only) */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: conic-gradient(
        from 0deg at var(--mouse-x) var(--mouse-y),
        rgba(26,110,255,0.06),
        rgba(var(--gold-rgb),0.08),
        rgba(139,92,246,0.06),
        rgba(0,212,255,0.05),
        rgba(26,110,255,0.06)
      );
      pointer-events: none;
      z-index: 0;
      transition: background 0.3s ease;
    }

    /* Grain */
    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998;
      opacity: 0.06;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px 180px;
    }

    /* Custom cursor */
    .cursor-dot, .cursor-ring {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 10000;
      transform: translate(-50%, -50%);
    }
    .cursor-dot {
      width: 6px; height: 6px;
      background: var(--gold);
      box-shadow: 0 0 12px var(--gold);
    }
    .cursor-ring {
      width: 36px; height: 36px;
      border: 1.5px solid rgba(var(--gold-rgb),0.5);
    }

    /* Progress bar */
    .progress-bar {
      position: fixed;
      top: var(--safe-top);
      left: 0; right: 0;
      height: 3px;
      z-index: 10001;
      background: rgba(var(--ink-rgb),0.05);
    }
    .progress-bar__fill {
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      transform-origin: left center;
      transform: scaleX(0);
      box-shadow: 0 0 10px var(--gold);
    }

    /* Header */
    .header {
      position: fixed;
      top: calc(3px + var(--safe-top));
      left: 0; right: 0;
      height: var(--header-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0 clamp(1rem, 4vw, 3rem);
      z-index: 9000;
      overflow: visible;
      transition: background 0.4s, backdrop-filter 0.4s;
    }
    .header.scrolled {
      background: var(--header-scrolled-bg);
      backdrop-filter: blur(16px);
    }
    .header__actions {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      flex-shrink: 0;
    }
    .header__logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
      flex: 1;
      text-decoration: none;
      color: var(--fg-strong);
    }
    .header__brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
    }
    .header__city-gif {
      width: 40px;
      height: 40px;
      object-fit: contain;
      flex-shrink: 0;
    }
    html[data-theme="light"] .header__city-gif {
      filter: invert(1) hue-rotate(180deg);
    }
    .header__title {
      font-weight: 700;
      font-size: 1rem;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .header__nav {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }
    .header__nav a {
      color: var(--fg-muted);
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.3s;
    }
    .header__nav a:hover { color: var(--gold-light); }
    .header__cta {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: var(--deep);
      border: none;
      padding: 0.6rem 1.4rem;
      border-radius: 999px;
      font-family: inherit;
      font-weight: 700;
      font-size: 0.875rem;
      cursor: none;
      flex-shrink: 0;
      white-space: nowrap;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .header__cta:hover {
      transform: scale(1.05);
      box-shadow: 0 0 24px rgba(var(--gold-rgb),0.4);
    }

    /* Splash doors */
    .splash-doors { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
    .splash-door {
      position: absolute;
      top: 0; bottom: 0;
      width: 50%;
      background: var(--door-bg);
      border: 1px solid rgba(var(--gold-rgb),0.15);
      transition: transform 1.4s cubic-bezier(0.76, 0, 0.24, 1);
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .splash-door--left { left: 0; transform-origin: left center; }
    .splash-door--right { right: 0; transform-origin: right center; }
    .splash-doors.open .splash-door--left { transform: translate3d(-100%, 0, 0); }
    .splash-doors.open .splash-door--right { transform: translate3d(100%, 0, 0); }
    .splash-door::after {
      content: '';
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 4px; height: 120px;
      background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    }
    .splash-door--left::after { right: 2rem; }
    .splash-door--right::after { left: 2rem; }

    /* WebGL canvas */
    #webgl {
      position: fixed;
      inset: 0;
      width: 100%; height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    /* افق اهواز — مرحله شهر */
    .city-skyline {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      overflow: hidden;
    }
    .city-skyline.is-visible { visibility: visible; }
    .city-skyline:not(.is-visible) { visibility: hidden; }
    .city-skyline__glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% 85%, rgba(var(--atm-rgb),0.14), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(var(--atm-rgb),0.08), transparent 55%);
    }
    .city-skyline__art {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: bottom center;
      transform-origin: bottom center;
      opacity: 0.28;
      filter: saturate(1.15) brightness(1.05) contrast(1.05);
      transform: scale(1);
      will-change: transform;
    }

    /* Ambient particles */
    .ambient-particles {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    .ambient-particle {
      position: absolute;
      width: 2px; height: 2px;
      border-radius: 50%;
      background: var(--particle-tint, var(--gold));
      box-shadow: 0 0 var(--particle-glow, 6px) var(--particle-tint, var(--gold));
      opacity: 0;
      animation: ambient-rise linear infinite;
    }
    .ambient-particle--1 { --particle-tint: var(--particle-1); }
    .ambient-particle--2 { --particle-tint: var(--particle-2); }
    .ambient-particle--3 { --particle-tint: var(--particle-3); }
    .ambient-particle--4 { --particle-tint: var(--particle-4); }
    .ambient-particle--5 { --particle-tint: var(--particle-5); }
    html[data-theme="light"] .ambient-particle {
      width: 2.5px; height: 2.5px;
    }
    @keyframes ambient-rise {
      0% { opacity: 0; transform: translateY(0) scale(1); }
      10% { opacity: var(--particle-op, 0.6); }
      90% { opacity: calc(var(--particle-op, 0.6) * 0.5); }
      100% { opacity: 0; transform: translateY(-100vh) scale(0.5); }
    }

    /* Scroll container — ارتفاع از ۶ سکشن sticky (هر کدام --scene-h) */
    #scroll-container {
      position: relative;
      z-index: 10;
    }

    .scene {
      position: sticky;
      top: 0;
      height: var(--scene-h);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }
    .scene.scene--active {
      z-index: 100;
    }
    .scene.scene--active .scene-overlay.is-visible {
      pointer-events: auto;
    }

    /* سکشن‌های جریان‌یاب — اسکرول معمولی سایت، بدون sticky و fade */
    .scene.scene--flow {
      position: relative;
      top: auto;
      height: auto;
      min-height: 0;
      overflow: visible;
      pointer-events: auto;
      z-index: 2;
    }
    .scene.scene--flow .scene-overlay {
      position: relative;
      inset: auto;
      opacity: 1;
      visibility: visible;
      transform: none;
      overflow: visible;
      pointer-events: auto;
      padding: var(--flow-section-pad) var(--scene-pad-x);
    }
    /* فاصلهٔ چشم‌انداز→مشارکت = فاصلهٔ مشارکت→ثبت ایده (وسط‌چین بودن سکشن ۶) */
    #scene-sky .scene-overlay {
      padding-bottom: max(
        var(--flow-section-pad),
        calc((var(--scene-h) - var(--scene-form-block-h)) / 2 - var(--flow-section-pad))
      );
    }
    .scene.scene--flow .scene-overlay::before {
      opacity: 1;
    }
    .scene.scene--flow.is-entered .scene-meta {
      opacity: 0.85;
    }

    .scene .scene-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 var(--scene-pad-x);
      text-align: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      will-change: opacity, transform;
      transform: translateY(var(--scene-overlay-y, 0%));
      overflow: hidden;
    }
    #scene-splash   { --scene-overlay-y: var(--scene-y-splash); }
    #scene-city     { --scene-overlay-y: var(--scene-y-city); }
    #scene-building { --scene-overlay-y: var(--scene-y-building); }
    #scene-sky      { --scene-overlay-y: var(--scene-y-sky); }
    #scene-wall     { --scene-overlay-y: var(--scene-y-wall); }
    #scene-form     { --scene-overlay-y: var(--scene-y-form); }
    .scene-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(var(--gold-rgb),0.04), transparent 70%);
      opacity: 0;
      transition: opacity 0.6s;
      pointer-events: none;
    }
    .scene-overlay.is-hold::before {
      opacity: 1;
    }
    .scene-overlay.is-visible {
      visibility: visible;
    }

    /* محتوای مرکزی — همراه با شماره فصل در یک بلوک */
    .scene-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-shrink: 0;
      will-change: transform, opacity, filter;
    }
    .scene-overlay.is-hold .scene-content[data-scroll-lock] {
      max-height: calc(var(--scene-h) - 2rem);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--gold-rgb),0.35) transparent;
    }
    .scene-content--hero { max-width: 860px; }
    .scene-content--wide { max-width: 1100px; }

    #scene-city .scene-content,
    #scene-building .scene-content {
      height: 100%;
    }
    #scene-city .scene-overlay.is-hold .scene-content[data-scroll-lock],
    #scene-building .scene-overlay.is-hold .scene-content[data-scroll-lock] {
      max-height: 100%;
    }

    .scene-meta {
      position: relative;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: var(--scene-gap);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      opacity: 0;
      z-index: 3;
    }
    .scene-meta::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: calc(var(--scene-gap) * -0.55);
      transform: translateX(-50%);
      width: 28px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.5), transparent);
    }
    .scene-meta__chapter {
      color: var(--gold);
      font-weight: 800;
      padding: 0.25rem 0.6rem;
      border: 1px solid rgba(var(--gold-rgb),0.35);
      border-radius: 999px;
    }
    .scene-meta__label {
      color: rgba(var(--ink-rgb),0.45);
      font-weight: 500;
    }

    .scene-tagline {
      margin-top: 0.875rem;
      font-size: clamp(0.95rem, 2vw, 1.1rem);
      max-width: 520px;
      line-height: 1.65;
      opacity: 0;
      display: inline-block;
      padding: 0.5em 1em;
      border-radius: 10px;
      /* دارک مود: بک‌گراند روشن پالت، متن تیره — از --gold زنده (موج) پیروی می‌کند */
      color: var(--gold-deep);
      background: color-mix(in srgb, var(--gold) 22%, #fff 78%);
      text-shadow: none;
      transition: background-color 0.35s ease, color 0.35s ease;
    }

    .scene-sub {
      font-size: clamp(0.9rem, 1.8vw, 1.05rem);
      color: rgba(var(--ink-rgb),0.55);
      max-width: 540px;
      line-height: 1.65;
      margin-bottom: 1rem;
      opacity: 0;
    }

    .form-sub {
      text-align: center;
      color: rgba(var(--ink-rgb),0.5);
      font-size: 0.875rem;
      margin: -0.25rem 0 1rem;
    }

    .scene-content--cta {
      text-align: center;
      max-width: 720px;
    }

    /* CTA — مرحله ۶ */
    .cta-card {
      width: 100%;
      background: rgba(var(--ink-rgb),0.04);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(var(--ink-rgb),0.1);
      border-radius: 24px;
      padding: clamp(2rem, 5vw, 3rem);
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateX(72px);
      will-change: transform, opacity;
    }
    .cta-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--gold), var(--purple), var(--blue));
      background-size: 200% 100%;
      animation: gradient-move 3s linear infinite;
    }
    .cta-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),0.08), transparent 60%);
      pointer-events: none;
    }
    .cta-card__title {
      position: relative;
      z-index: 1;
      font-size: clamp(1.6rem, 4.5vw, 2.4rem);
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-pale));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cta-card__sub {
      position: relative;
      z-index: 1;
      font-size: clamp(0.95rem, 2vw, 1.1rem);
      color: rgba(var(--ink-rgb),0.6);
      line-height: 1.7;
      max-width: 520px;
      margin: 0 auto 2rem;
    }
    .cta-card__btn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 1.1rem 2.5rem;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border-radius: 999px;
      color: var(--deep);
      font-family: inherit;
      font-size: clamp(1rem, 2.2vw, 1.15rem);
      font-weight: 800;
      text-decoration: none;
      cursor: none;
      transition: transform 0.35s, box-shadow 0.35s;
      overflow: hidden;
    }
    .cta-card__btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 40px rgba(var(--gold-rgb),0.45);
    }
    .cta-card__btn::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb),0.4), transparent);
      transition: left 0.5s;
    }
    .cta-card__btn:hover::after { left: 150%; }
    .cta-card__btn-icon {
      font-size: 1.2rem;
      transition: transform 0.3s;
    }
    .cta-card__btn:hover .cta-card__btn-icon { transform: translateX(-4px); }
    .cta-card__note {
      position: relative;
      z-index: 1;
      margin-top: 1.25rem;
      font-size: 0.8rem;
      color: rgba(var(--ink-rgb),0.4);
    }

    .scene-scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: rgba(var(--ink-rgb),0.4);
      opacity: 0;
      z-index: 3;
    }
    .scene-scroll-hint__line {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scroll-hint-pulse 2s ease-in-out infinite;
    }

    .scene-credit {
      position: absolute;
      right: var(--scene-pad-x);
      bottom: 1.5rem;
      z-index: 3;
      font-size: 0.72rem;
      color: rgba(var(--ink-rgb),0.38);
      letter-spacing: 0.02em;
      opacity: 0;
      pointer-events: none;
    }
    .scene-credit__link {
      color: rgba(var(--gold-rgb),0.65);
      text-decoration: none;
      transition: color 0.25s;
    }
    .scene-credit__link:hover {
      color: var(--gold);
    }
    #scene-splash.scene--active .scene-credit {
      pointer-events: auto;
    }
    @keyframes scroll-hint-pulse {
      0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
      50% { transform: scaleY(1); opacity: 1; }
    }

    /* Scene navigator */
    .scene-nav {
      position: fixed;
      left: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9001;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .scene-nav__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1px solid rgba(var(--gold-rgb),0.35);
      background: transparent;
      padding: 0;
      cursor: none;
      transition: transform 0.35s, background 0.35s, box-shadow 0.35s;
    }
    .scene-nav__dot--active {
      background: var(--gold);
      box-shadow: 0 0 12px rgba(var(--gold-rgb),0.6);
      transform: scale(1.35);
    }
    .scene-nav__dot:hover {
      background: rgba(var(--gold-rgb),0.5);
    }

    .scene-indicator {
      position: fixed;
      bottom: 1.5rem;
      left: 1.5rem;
      z-index: 9001;
      font-size: 0.75rem;
      color: rgba(var(--ink-rgb),0.4);
      letter-spacing: 0.05em;
    }

    .scroll-top-badge {
      position: fixed;
      right: 1.5rem;
      bottom: 1.5rem;
      z-index: 9001;
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(var(--gold-rgb), 0.45);
      border-radius: 50%;
      background: rgba(6, 10, 20, 0.72);
      backdrop-filter: blur(10px);
      color: var(--gold-light);
      padding: 0;
      cursor: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(0.75rem) scale(0.92);
      transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, border-color 0.25s, box-shadow 0.25s, background 0.25s;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    }
    .scroll-top-badge.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    .scroll-top-badge:hover {
      border-color: rgba(var(--gold-rgb), 0.75);
      background: rgba(var(--gold-rgb), 0.12);
      box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.35);
    }
    .scroll-top-badge__icon {
      font-size: 1.15rem;
      line-height: 1;
      font-weight: 600;
    }

    .scene-flash {
      position: fixed;
      inset: 0;
      z-index: 7999;
      pointer-events: none;
      background: radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb),0.12), transparent 65%);
      opacity: 0;
    }
    .scene-flash.scene-flash--active {
      animation: scene-flash-burst 0.55s ease-out forwards;
    }
    @keyframes scene-flash-burst {
      0% { opacity: 0; }
      15% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Splash logo */
    .splash-logo {
      opacity: 0;
      width: clamp(100px, 18vw, 160px);
      height: auto;
      margin-bottom: 1.25rem;
      filter: drop-shadow(0 0 24px rgba(var(--gold-rgb), 0.35));
    }

    /* Splash text */
    .splash-text {
      opacity: 0;
      font-size: clamp(1.8rem, 5vw, 3.5rem);
      font-weight: 800;
      line-height: 1.15;
      word-spacing: -0.08em;
      background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-pale));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      max-width: 800px;
    }

    /* Scene text utilities */
    .scene-heading {
      font-size: clamp(1.45rem, 3.6vw, 2.5rem);
      font-weight: 700;
      margin-bottom: 0.5rem;
      max-width: 680px;
      line-height: 1.35;
      opacity: 0;
    }

    /* بلوک پایین محتوا — شمارنده / کارت‌ها با فاصله یکسان */
    .scene-action {
      width: 100%;
      margin-top: 0.875rem;
      flex-shrink: 0;
    }
    #ideaCounter {
      font-size: clamp(1.85rem, 4.5vw, 3rem);
      font-weight: 800;
      color: var(--gold-light);
      line-height: 1.2;
      text-align: center;
    }
    #ideaCounter span { font-size: 0.5em; color: rgba(var(--ink-rgb),0.5); display: block; margin-top: 0.25rem; }

    /* Building doors */
    .doors-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
      max-width: 900px;
    }
    .door-card {
      width: 142px;
      padding: 1rem 0.875rem;
      border-radius: 12px;
      background: rgba(var(--ink-rgb),0.04);
      border: 1px solid rgba(var(--ink-rgb),0.1);
      text-align: center;
      cursor: none;
      transition: transform 0.4s, box-shadow 0.4s;
      position: relative;
      overflow: hidden;
    }
    .door-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .door-card:hover { transform: scale(1.08) translateY(-4px); }
    .door-card:hover::before { opacity: 1; }
    .door-card[data-group="municipality"] { box-shadow: 0 0 20px rgba(26,110,255,0.3); border-color: var(--blue); }
    .door-card[data-group="municipality"]::before { background: radial-gradient(circle, rgba(26,110,255,0.3), transparent); }
    .door-card[data-group="citizens"] { box-shadow: 0 0 20px rgba(16,232,122,0.3); border-color: var(--green); }
    .door-card[data-group="citizens"]::before { background: radial-gradient(circle, rgba(16,232,122,0.3), transparent); }
    .door-card[data-group="faculty"] { box-shadow: 0 0 20px rgba(201,168,76,0.3); border-color: #C9A84C; }
    .door-card[data-group="faculty"]::before { background: radial-gradient(circle, rgba(201,168,76,0.3), transparent); }
    .door-card[data-group="elites"] { box-shadow: 0 0 20px rgba(139,92,246,0.3); border-color: var(--purple); }
    .door-card[data-group="elites"]::before { background: radial-gradient(circle, rgba(139,92,246,0.3), transparent); }
    .door-card__emoji { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
    .door-card__label { font-size: 0.8rem; font-weight: 600; }

    /* Sky scene */
    #scene-sky .scene-content { max-width: 1200px; }
    .sky-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(1rem, 3vw, 2rem);
      width: 100%;
      perspective: 900px;
    }
    .sky-mayor {
      width: clamp(320px, 68vw, 680px);
      height: auto;
      flex-shrink: 0;
      object-fit: contain;
      opacity: 0;
      transform: translateX(72px);
      will-change: transform, opacity;
    }
    .sky-text .word {
      display: inline-block;
      opacity: 0;
      transform: translateX(56px);
      margin: 0 0.2em;
      will-change: transform, opacity;
    }
    .sky-lines {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: clamp(0.75rem, 2vw, 1.5rem);
      width: 100%;
      text-align: center;
    }
    .sky-lines p {
      position: relative;
      padding-right: 1.1em;
      font-size: clamp(0.85rem, 1.8vw, 1.1rem);
      font-weight: 600;
      margin-bottom: 0;
      line-height: 1.55;
      flex: 0 1 auto;
    }
    .sky-lines p::before {
      content: "•";
      position: absolute;
      right: 0;
      color: var(--green);
      font-size: 1.1em;
      line-height: inherit;
    }
    .category-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
      justify-content: center;
      margin-bottom: 1.75rem;
    }
    .category-card {
      padding: 0.6rem 1.2rem;
      border-radius: 999px;
      background: rgba(var(--ink-rgb),0.06);
      border: 1px solid rgba(var(--ink-rgb),0.12);
      font-size: 0.875rem;
      opacity: 0;
      transform: translateX(-72px);
      will-change: transform, opacity;
    }

    /* Idea marquee wall */
    .wall-section {
      width: 100%;
      max-width: 1100px;
      padding-block: 1.25rem;
    }
    #scene-wall .scene-content {
      max-width: 1100px;
    }
    .wall-label-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 0.5rem;
      width: 100%;
      margin-bottom: 1.35rem;
    }
    .wall-label-row__title {
      flex-shrink: 0;
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1.25;
      padding: 0.3rem 0;
      color: var(--gold-light);
      letter-spacing: 0.02em;
    }
    #scene-wall .category-cards {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0;
    }
    #scene-wall .category-card {
      padding: 0.3rem 0.7rem;
      font-size: 0.72rem;
      line-height: 1.25;
    }
    .wall-heading {
      font-size: clamp(1.25rem, 2.4vw, 1.75rem);
      font-weight: 700;
      margin-bottom: 0.25rem;
      text-align: center;
      line-height: 1.35;
      opacity: 0;
      transform: translateX(-72px);
      will-change: transform, opacity;
    }
    .wall-counter {
      text-align: center;
      color: var(--gold-light);
      font-size: 0.9rem;
      margin-bottom: 1.35rem;
      opacity: 0;
      transform: translateX(-64px);
      will-change: transform, opacity;
    }
    .wall-marquee {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1.85rem;
      width: 100%;
      flex-shrink: 0;
      padding-block: 1.75rem;
      opacity: 0;
      transform: translateX(-88px);
      will-change: transform, opacity;
    }
    .wall-marquee__row {
      overflow: hidden;
      width: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
    }
    .wall-marquee__track {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.45rem;
      width: max-content;
      min-width: 100%;
      padding-inline: 0.25rem;
    }
    .wall-marquee__row--sway .wall-marquee__track {
      animation: wall-row-sway var(--sway-duration, 9s) ease-in-out infinite alternate;
      will-change: transform;
    }
    .wall-marquee__row--sway-alt .wall-marquee__track {
      animation-direction: alternate-reverse;
    }
    @keyframes wall-row-sway {
      from { transform: translate3d(var(--sway-amount, 2.25rem), 0, 0); }
      to   { transform: translate3d(calc(-1 * var(--sway-amount, 2.25rem)), 0, 0); }
    }
    .marquee-chip {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.72rem;
      border-radius: 999px;
      background: rgba(var(--ink-rgb),0.06);
      border: 1px solid rgba(var(--ink-rgb),0.14);
      color: var(--fg);
      font-family: inherit;
      font-size: clamp(0.65rem, 1.2vw, 0.76rem);
      font-weight: 500;
      white-space: nowrap;
      line-height: 1.25;
      cursor: pointer;
      opacity: 1;
      transition: background 0.2s, border-color 0.2s;
    }
    .marquee-chip:hover,
    .marquee-chip:focus-visible {
      background: rgba(var(--ink-rgb),0.1);
      border-color: rgba(var(--ink-rgb),0.28);
      outline: none;
    }
    .marquee-chip:active {
      opacity: 0.85;
    }
    .marquee-chip__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--chip-color, var(--green));
      flex-shrink: 0;
      box-shadow: 0 0 8px rgba(16, 232, 122, 0.45);
      box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color, var(--green)) 60%, transparent);
    }
    .marquee-chip__text {
      max-width: 11rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #scene-sky .scene-meta {
      transform: translateX(72px);
      will-change: transform, opacity;
    }
    #scene-wall .scene-meta {
      transform: translateX(-72px);
      will-change: transform, opacity;
    }
    #scene-form .scene-meta {
      transform: translateX(72px);
      will-change: transform, opacity;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
      margin-top: 1.75rem;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      color: rgba(var(--ink-rgb),0.7);
      opacity: 0;
      transform: translateX(-48px);
      will-change: transform, opacity;
    }
    .legend-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
    }

    /* Legacy form styles removed — CTA uses .cta-card above */
    @keyframes gradient-move {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    /* Sparks */
    .spark {
      position: fixed;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--gold-light);
      pointer-events: none;
      z-index: 10002;
    }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: rgba(6,10,20,0.9);
      backdrop-filter: blur(12px);
      border: 1px solid var(--gold);
      padding: 1rem 2rem;
      border-radius: 12px;
      font-size: 0.95rem;
      z-index: 10003;
      opacity: 0;
      transition: transform 0.5s, opacity 0.5s;
      pointer-events: none;
    }
    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* Footer — داخل سکشن ۶ */
    .scene-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      text-align: center;
      padding: 1rem var(--scene-pad-x) 1.25rem;
      border-top: 1px solid rgba(var(--gold-rgb),0.25);
      color: rgba(var(--ink-rgb),0.5);
      font-size: 0.8rem;
      line-height: 1.7;
      opacity: 0;
      transform: translateX(56px);
      pointer-events: none;
      will-change: transform, opacity;
    }
    #scene-form.scene--active .scene-footer {
      pointer-events: auto;
    }
    .footer-credit__link {
      color: rgba(var(--gold-rgb),0.65);
      text-decoration: none;
      transition: color 0.25s;
    }
    .footer-credit__link:hover {
      color: var(--gold);
    }

    /* Mobile fallback */
    .mobile-bg {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 0;
    }
    .mobile-bg__layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.8s;
    }
    .mobile-bg__layer.active { opacity: 1; }
    .mobile-bg__layer--splash {
      background: var(--deep);
    }
    .mobile-bg__layer--splash::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(6, 10, 20, 0.62);
      pointer-events: none;
    }
    .mobile-bg__splash-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.32) saturate(0.35) contrast(1.05);
    }

    @media (max-width: 768px) {
      html {
        font-size: 14px;
      }
      :root {
        --header-h: 52px;
        --scene-h: 100vh;
        --scene-h: 100svh;
      }
      #webgl { display: none; }
      .mobile-bg { display: block; }
      .holo-bg { display: block; }
      body { cursor: auto; }
      .cursor-dot, .cursor-ring { display: none; }
      .header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 0 0.65rem;
        height: var(--header-h);
        min-height: var(--header-h);
        max-height: var(--header-h);
      }
      .header__logo {
        flex: unset;
        max-width: 100%;
        overflow: hidden;
      }
      .header__cta {
        position: relative;
        z-index: 1;
      }
      /* موبایل: بدون در intro — فقط anime.js روی صحنه‌ها */
      .splash-doors {
        display: none !important;
      }
      .header.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(6, 10, 20, 0.94);
      }
      .header__nav { display: none; }
      .header__city-gif {
        width: 28px;
        height: 28px;
      }
      .header__title {
        font-size: 0.75rem;
      }
      .header__cta {
        padding: 0.45rem 0.75rem;
        font-size: 0.72rem;
      }
      .doors-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 0.5rem;
      }
      .door-card { width: auto; padding: 0.75rem 0.5rem; }
      .door-card__emoji { font-size: 1.625rem; margin-bottom: 0.35rem; }
      .scene-nav { left: 0.5rem; }
      .scene-indicator { display: none; }
      .scroll-top-badge {
        right: 1rem;
        bottom: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
      }
      .scene-overlay {
        padding: 0 1.125rem;
      }
      .scene-footer {
        font-size: 0.72rem;
        padding: 0.875rem 1.125rem 1rem;
      }
      :root {
        --scene-gap: 0.75rem;
        --scene-y-splash: var(--scene-y-splash-mobile);
        --scene-y-city: var(--scene-y-city-mobile);
        --scene-y-building: var(--scene-y-building-mobile);
        --scene-y-sky: var(--scene-y-sky-mobile);
        --scene-y-wall: var(--scene-y-wall-mobile);
        --scene-y-form: var(--scene-y-form-mobile);
      }
      .scene-meta { font-size: 0.68rem; }
      #scene-splash .scene-credit {
        display: none;
      }
      #scene-splash .splash-logo {
        width: clamp(168px, 46vw, 240px);
        margin-bottom: 1.5rem;
      }
      #scene-sky .scene-overlay.sky-text {
        padding-left: 0;
        padding-right: 0;
      }
      #scene-sky .scene-meta,
      #scene-sky .sky-lines {
        padding-inline: 1.125rem;
      }
      #scene-sky .sky-mayor {
        width: 100%;
        max-width: none;
      }
      #scene-sky .sky-lines {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.875rem;
      }
      #scene-sky .sky-lines p {
        display: inline-flex;
        align-items: baseline;
        gap: 0.45em;
        flex: none;
        width: auto;
        max-width: 100%;
        padding-right: 0;
        font-size: clamp(1.1rem, 4.8vw, 1.4rem);
        line-height: 1.5;
        text-align: right;
      }
      #scene-sky .sky-lines p::before {
        position: static;
        flex-shrink: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .splash-door { transition: none; }
      .holo-bg__mesh { animation: none; opacity: 0.4; filter: blur(50px); }
      .wall-marquee__row--sway .wall-marquee__track { animation: none; }
      body { cursor: auto; }
      .cursor-dot, .cursor-ring { display: none; }
    }

    .interactive { cursor: none; }
    @media (max-width: 768px) { .interactive { cursor: pointer; } }

    /* ─── Theme toggle (shared with panels) ─── */
    .panel-theme-btn {
      flex-shrink: 0;
      position: relative;
      width: 40px;
      height: 40px;
      border: 1px solid var(--panel-border);
      border-radius: 10px;
      background: var(--panel-theme-btn-bg);
      color: var(--panel-fg-strong);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .panel-theme-btn.interactive { cursor: none; }
    @media (max-width: 768px) {
      .panel-theme-btn.interactive { cursor: pointer; }
    }
    .panel-theme-btn:hover {
      background: var(--panel-theme-btn-hover);
      border-color: rgba(var(--gold-rgb), 0.35);
    }
    .panel-theme-btn:active { transform: scale(0.96); }
    .panel-theme-btn svg {
      width: 18px;
      height: 18px;
      position: absolute;
      inset: 0;
      margin: auto;
    }
    .panel-theme-btn .icon-sun { display: none; }
    .panel-theme-btn .icon-moon { display: block; }
    html[data-theme="light"] .panel-theme-btn .icon-sun { display: block; }
    html[data-theme="light"] .panel-theme-btn .icon-moon { display: none; }

    /* ─── انتخاب رنگ‌بندی (accent picker) — فقط لندینگ دسکتاپ ─── */
    .accent-picker {
      position: relative;
      flex-shrink: 0;
      z-index: 10004;
    }
    .accent-picker__dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      box-shadow: 0 0 0 1.5px rgba(var(--ink-rgb), 0.25);
    }
    .accent-picker__pop {
      position: absolute;
      top: calc(100% + 8px);
      inset-inline-end: 0;
      display: none;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 0.45rem;
      width: max-content;
      max-width: min(260px, calc(100vw - 2rem));
      padding: 0.55rem 0.7rem;
      border-radius: 12px;
      background: var(--header-scrolled-bg, rgba(6, 10, 20, 0.92));
      border: 1px solid var(--panel-border);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 30px rgba(var(--shade-rgb), 0.25);
      z-index: 10005;
    }
    .accent-picker.is-open .accent-picker__pop { display: flex; }
    .accent-picker__swatch {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      background: var(--swatch);
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s;
      flex-shrink: 0;
    }
    .accent-picker__swatch--dual {
      background: linear-gradient(135deg, var(--swatch) 50%, var(--swatch2) 50%);
    }
    .accent-picker__swatch--wave {
      background: conic-gradient(from 0deg, #FF2D55, #FFB020, #14E8A8, #3B82F6, #A855F7, #FF2D55);
    }
    .accent-picker__swatch--sharp {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
    .accent-picker__swatch--shine {
      background: linear-gradient(135deg, #051650 42%, #F9F295 42%, #E0AA3E 62%, #FAF398 78%, #B88A44 100%);
    }
    .accent-picker__swatch:hover { transform: scale(1.15); }
    .accent-picker__swatch.is-active {
      border-color: var(--fg-strong);
      box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.2);
    }
    @media (max-width: 768px) {
      /* لندینگ دسکتاپ روی عرض موبایل picker ندارد (به mobile.html می‌رود) */
      .accent-picker { display: none; }
      body.panel-page .accent-picker,
      body.auth-page .accent-picker { display: block; }
    }
    .panel-page .accent-picker__pop {
      background: var(--panel-topbar-bg, var(--panel-surface, rgba(6, 10, 20, 0.92)));
      border-color: var(--panel-border);
    }
    .panel-page .accent-picker__swatch.is-active {
      border-color: var(--panel-fg-strong);
    }

    .auth-theme-float {
      position: fixed;
      top: calc(0.85rem + env(safe-area-inset-top, 0px) + 6px);
      left: calc(0.85rem + env(safe-area-inset-left, 0px));
      z-index: 40;
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }
    .auth-theme-float .accent-picker__pop {
      background: var(--header-scrolled-bg, rgba(6, 10, 20, 0.92));
      border-color: var(--panel-border);
    }

    /* ─── Light mode: UI روشن + صحنه ۳بعدی روز (نه شب دارک) ─── */
    html[data-theme="light"] .holo-bg__glow {
      mix-blend-mode: multiply;
      opacity: 0.55;
    }
    html[data-theme="light"] .holo-bg__vignette {
      background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 45%, rgba(238, 241, 247, 0.7) 100%);
    }
    html[data-theme="light"] .holo-bg__base {
      background: var(--page-bg);
    }
    html[data-theme="light"] .holo-bg__mesh {
      opacity: 0.22;
    }
    html[data-theme="light"] #webgl {
      filter: saturate(0.78) brightness(1.08) contrast(0.93);
    }
    html[data-theme="light"] .grain {
      opacity: 0.025;
    }
    html[data-theme="light"] body::before {
      opacity: 0.25;
    }
    html[data-theme="light"] .city-skyline__art {
      opacity: 0.32;
      filter: saturate(1.2) brightness(1.08) contrast(1.05);
    }

    /* هیرو روی آسمان روشن ۳بعدی */
    html[data-theme="light"] .splash-text {
      background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--gold) 66%, #1a1204) 0%,
        color-mix(in srgb, var(--gold) 85%, #2a1d06) 24%,
        var(--gold-bright) 44%,
        var(--gold-pale) 50%,
        var(--gold) 58%,
        color-mix(in srgb, var(--gold) 76%, #1a1204) 78%,
        color-mix(in srgb, var(--gold) 66%, #1a1204) 100%
      );
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
      animation: light-hero-gold-flow 4.5s ease-in-out infinite;
    }
    html[data-theme="light"][data-accent="shine-royal"] .splash-text,
    html[data-theme="light"][data-accent="shine-royal"] .cta-card__title {
      background-image: linear-gradient(
        110deg,
        #B88A44 0%,
        #E0AA3E 22%,
        #F9F295 44%,
        #FAF398 55%,
        #E0AA3E 72%,
        #B88A44 100%
      );
      background-size: 240% 100%;
      animation: shine-gold-flow 4s ease-in-out infinite;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
    }
    html[data-theme="light"] .cta-card__title {
      background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--gold) 66%, #1a1204) 0%,
        color-mix(in srgb, var(--gold) 85%, #2a1d06) 24%,
        var(--gold-bright) 44%,
        var(--gold-pale) 50%,
        var(--gold) 58%,
        color-mix(in srgb, var(--gold) 76%, #1a1204) 78%,
        color-mix(in srgb, var(--gold) 66%, #1a1204) 100%
      );
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
      animation: light-hero-gold-flow 4.5s ease-in-out infinite;
    }
    html[data-theme="light"] .cta-card__btn {
      background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 82%, #fff) 0%, var(--gold-bright) 45%, var(--gold-pale) 100%);
      color: var(--gold-deep);
      box-shadow: 0 2px 14px rgba(var(--gold-rgb), 0.45);
    }
    html[data-theme="light"] .cta-card__btn:hover {
      box-shadow: 0 4px 22px rgba(var(--gold-rgb), 0.55);
    }
    @keyframes light-hero-gold-flow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    html[data-theme="light"] .scene-heading,
    html[data-theme="light"] .wall-heading {
      color: var(--fg-strong);
      text-shadow: none;
    }
    html[data-theme="light"] .scene-sub,
    html[data-theme="light"] .cta-card__sub,
    html[data-theme="light"] .scene-credit,
    html[data-theme="light"] .sky-lines p,
    html[data-theme="light"] #ideaCounter span {
      color: rgba(15, 23, 42, 0.62);
      text-shadow: none;
    }
    /* لایت مود: بک‌گراند تیره پالت، متن سفید */
    html[data-theme="light"] .scene-tagline {
      color: #fff;
      background: color-mix(in srgb, var(--gold) 55%, #0a0610 45%);
      text-shadow: none;
    }
    html.accent-wave .scene-tagline {
      transition: none;
    }
    html[data-theme="light"] .marquee-chip {
      color: var(--fg);
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(15, 23, 42, 0.12);
      text-shadow: none;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    }
    html[data-theme="light"] .scene-meta__label {
      color: rgba(15, 23, 42, 0.5);
    }
    html[data-theme="light"] .wall-label-row__title,
    html[data-theme="light"] .wall-counter,
    html[data-theme="light"] #ideaCounter {
      color: var(--gold-dark);
      text-shadow: none;
    }
    html[data-theme="light"] #scene-wall .category-card {
      color: var(--gold-dark);
      background: color-mix(in srgb, var(--gold-bright) 30%, transparent);
      border-color: rgba(var(--gold-rgb), 0.38);
    }
    html[data-theme="light"] .door-card {
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(15, 23, 42, 0.12);
      color: var(--fg-strong);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    }
    html[data-theme="light"] .door-card__label {
      color: var(--fg-strong);
    }
    html[data-theme="light"] .splash-logo {
      filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.12));
    }
    html[data-theme="light"].accent-wave [data-accent-logo],
    html[data-theme="light"].accent-wave .splash-logo {
      filter:
        hue-rotate(var(--logo-hue, 0deg))
        saturate(var(--logo-sat, 1.25))
        drop-shadow(0 8px 24px rgba(15, 23, 42, 0.14));
    }
    html[data-theme="light"] .header__cta {
      background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 82%, #fff) 0%, var(--gold-bright) 45%, var(--gold-pale) 100%);
      color: var(--gold-deep);
      box-shadow: 0 2px 14px rgba(var(--gold-rgb), 0.45);
    }
    html[data-theme="light"] .header__cta:hover {
      box-shadow: 0 4px 22px rgba(var(--gold-rgb), 0.55);
    }
    html[data-theme="light"] .toast {
      background: rgba(255, 255, 255, 0.96);
      border-color: var(--border);
      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
      color: var(--fg);
    }
    html[data-theme="light"] .scene-indicator {
      color: rgba(15, 23, 42, 0.55);
    }
    html[data-theme="light"] .scroll-top-badge {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(var(--gold-rgb), 0.5);
      color: var(--gold-dark);
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
    }
    html[data-theme="light"] .scroll-top-badge:hover {
      border-color: rgba(var(--gold-rgb), 0.85);
      background: color-mix(in srgb, var(--gold-bright) 22%, #ffffff);
      box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.3);
    }
    html[data-theme="light"] .scene-nav__dot {
      background: rgba(15, 23, 42, 0.28);
    }
    html[data-theme="light"] .scene-nav__dot--active {
      background: var(--gold);
    }

    html[data-theme="light"] .mobile-bg__layer {
      opacity: 0.7;
      filter: saturate(0.8) brightness(1.12);
    }
    html[data-theme="light"] .mobile-bg__layer--splash .mobile-bg__splash-img {
      filter: brightness(1.05) saturate(0.55);
      opacity: 0.55;
    }
    html[data-theme="light"] .auth-bg img {
      filter: brightness(1.05) saturate(0.55) contrast(0.95);
      opacity: 0.35;
    }
    html[data-theme="light"] .auth-card {
      background: #ffffff;
      border-color: var(--border);
      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    }
    html[data-theme="light"] .auth-input,
    html[data-theme="light"] .auth-card input,
    html[data-theme="light"] .auth-card select {
      background: #f8fafc;
      border-color: var(--border);
      color: var(--fg-strong);
    }