:root{
  --font-display:'Archivo','Vazirmatn',sans-serif;
  --font-body:'Inter','Vazirmatn',sans-serif;
  --font-fa:'Vazirmatn',sans-serif;
  --font-serif:'Instrument Serif',serif;
  --container:1360px; --pad-x:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --accent:#e0a458; --radius:24px;
}
html[data-theme="dark"]{
  --bg:#07090d; --bg-soft:#080b11;
  --text:#ece7db; --text-muted:rgba(236,231,219,.66); --text-dim:rgba(236,231,219,.42);
  --glass:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.032) 48%,rgba(255,255,255,.068));
  --glass-solid:rgba(12,16,22,.5);
  --border:rgba(236,231,219,.16); --border-soft:rgba(236,231,219,.085); --hair:rgba(236,231,219,.14);
  --hi:inset 0 1px 0 rgba(255,255,255,.2);
  --shadow:0 40px 90px -46px rgba(0,0,0,.95);
  --blob1:rgba(70,120,180,.2); --blob2:rgba(224,164,88,.14);
  --grid:rgba(255,255,255,.045);
  --btn-inv:#ece7db; --btn-inv-t:#0e1418;
}
html[data-theme="light"]{
  --bg:#e9edf2; --bg-soft:#f4f7fa;
  --text:#141a20; --text-muted:rgba(20,26,32,.68); --text-dim:rgba(20,26,32,.46);
  --glass:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.58) 48%,rgba(255,255,255,.76));
  --glass-solid:rgba(255,255,255,.62);
  --border:rgba(20,26,32,.14); --border-soft:rgba(20,26,32,.085); --hair:rgba(20,26,32,.14);
  --hi:inset 0 1px 0 rgba(255,255,255,.92);
  --shadow:0 34px 70px -40px rgba(20,26,32,.42);
  --blob1:rgba(96,148,206,.3); --blob2:rgba(224,164,88,.3);
  --grid:rgba(20,26,32,.05);
  --accent:#a2620f; --btn-inv:#141a20; --btn-inv-t:#fff;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .7s var(--ease), color .7s var(--ease);
}
.container-x{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); }
::selection{ background:var(--accent); color:#0e1418; }

#canvas-container{ position:fixed; inset:0; z-index:0; pointer-events:none; transition:opacity 1.1s var(--ease);
  background:radial-gradient(125% 95% at 50% 6%, #16283c 0%, #0a0e14 60%, #05070a 100%); }
#canvas-container canvas{ display:block; width:100%; height:100%; }
body.zone-2d #canvas-container{ opacity:0; }
#soft-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.1s var(--ease);
  background:var(--bg-soft); overflow:hidden; }
body.zone-2d #soft-bg{ opacity:1; }
#soft-bg::before,#soft-bg::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); }
#soft-bg::before{ width:56vw; height:56vw; left:-12vw; top:6vh; background:var(--blob1); animation:drift1 26s ease-in-out infinite; }
#soft-bg::after{ width:48vw; height:48vw; right:-10vw; bottom:-6vh; background:var(--blob2); animation:drift2 32s ease-in-out infinite; }
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-6vw,-6vh,0) scale(.94)}}
#soft-grid{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.1s var(--ease);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 78%); }
body.zone-2d #soft-grid{ opacity:1; }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none; transition:opacity .8s var(--ease);
  background:radial-gradient(120% 84% at 50% 44%, transparent 42%, rgba(4,6,10,.62) 100%),
             linear-gradient(to bottom, rgba(4,6,10,.68) 0%, transparent 18%, transparent 66%, rgba(4,6,10,.88) 100%); }
html[data-theme="light"] .veil{
  background:radial-gradient(120% 84% at 50% 44%, transparent 46%, rgba(240,244,248,.3) 100%),
             linear-gradient(to bottom, rgba(244,247,250,.42) 0%, transparent 22%, transparent 70%, rgba(238,242,247,.62) 100%); }
body.zone-2d .veil{ opacity:0; }
.grain{ position:fixed; inset:-60%; z-index:2; pointer-events:none; opacity:.11; mix-blend-mode:overlay; transition:opacity .8s var(--ease);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
  animation:grain 1.1s steps(3) infinite; }
html[data-theme="light"] .grain{ opacity:.045; }
body.zone-2d .grain{ opacity:0; }
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
#drag-layer{ position:fixed; inset:0; z-index:5; touch-action:pan-y; cursor:grab; transition:opacity .6s var(--ease); }
#drag-layer.is-dragging{ cursor:grabbing; }
body.orbit-mode #drag-layer{ touch-action:none; }
body.zone-2d #drag-layer, body.modal-open #drag-layer, body.drawer-open #drag-layer{ pointer-events:none; opacity:0; }

.glass{ position:relative; background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(165%); backdrop-filter:blur(22px) saturate(165%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow), var(--hi); }
.glass-chip{ background:var(--glass-solid);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--border); box-shadow:0 16px 40px -26px rgba(0,0,0,.9), var(--hi); border-radius:999px; }
.hair{ height:1px; background:var(--hair); border:0; margin:0; }

.eyebrow{ display:flex; align-items:center; gap:.7em; flex-wrap:wrap; margin:0 0 20px;
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--text-dim); }
.eyebrow .num{ color:var(--accent); }
.fa-in{ font-family:var(--font-fa); direction:rtl; letter-spacing:0; text-transform:none; font-weight:500; opacity:.72; }
.hd{ display:flex; flex-direction:column; margin:0; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.03em; line-height:.96; font-size:clamp(30px,4.7vw,64px); }
.hd-en,.hd-fa{ display:block; }
.hd-fa{ font-family:var(--font-fa); font-weight:500; text-transform:none; letter-spacing:0; direction:rtl;
  font-size:.3em; line-height:1.85; color:var(--text-muted); margin-top:1.1em; }
html[lang="fa"] .hd{ font-family:var(--font-fa); font-weight:800; text-transform:none; letter-spacing:0;
  line-height:1.38; font-size:clamp(26px,4.1vw,54px); }
html[lang="fa"] .hd-fa{ order:1; font-size:1em; color:var(--text); margin-top:0; }
html[lang="fa"] .hd-en{ order:2; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.01em; direction:ltr; font-size:.34em; line-height:1.25; color:var(--text-muted); margin-top:.9em; }
.hd-sm{ font-size:clamp(24px,3.2vw,42px); }
.hd-lg{ font-size:clamp(36px,6.6vw,96px); letter-spacing:-.045em; }
.bd{ display:flex; flex-direction:column; gap:.9em; margin:22px 0 0; }
.bd-en{ font-size:16px; line-height:1.72; color:var(--text-muted); max-width:60ch; }
.bd-fa{ font-family:var(--font-fa); direction:rtl; font-size:14.5px; line-height:2; color:var(--text-dim); max-width:62ch; }
html[lang="fa"] .bd-en{ font-size:14px; color:var(--text-dim); order:2; }
html[lang="fa"] .bd-fa{ font-size:16.5px; color:var(--text-muted); order:1; }
.serif{ font-family:var(--font-serif); font-weight:400; letter-spacing:-.02em; }
.mono-tag{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:500; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer;
  text-decoration:none; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:transform .2s ease-in-out, box-shadow .3s, background-color .3s, color .3s, border-color .3s; will-change:transform; }
.btn:hover{ transform:scale(1.03); } .btn:active{ transform:scale(.99); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn--inv{ background:var(--btn-inv); color:var(--btn-inv-t); padding:16px 34px; }
.btn--inv:hover{ box-shadow:0 24px 54px -26px rgba(0,0,0,.7); }
.btn--glass{ background:var(--glass-solid); color:var(--text); border:1px solid var(--border); padding:15px 32px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.btn--glass:hover{ border-color:var(--accent); }
.btn--hero{ padding:20px 46px; font-size:13px; }
.btn--sm{ padding:10px 22px; font-size:11px; }
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
html[dir="rtl"] .btn .arw{ transform:scaleX(-1); }
html[dir="rtl"] .btn:hover .arw{ transform:translateX(-4px) scaleX(-1); }
.icon-btn{ width:38px; height:38px; display:grid; place-items:center; border-radius:999px; cursor:pointer;
  background:var(--glass-solid); border:1px solid var(--border); color:var(--text);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .2s ease-in-out, background-color .3s, color .3s, border-color .3s; }
.icon-btn:hover{ transform:scale(1.08); border-color:var(--accent); }
.icon-btn.is-on{ background:var(--accent); color:#0e1418; border-color:var(--accent); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#0e1418; padding:10px 18px; }
.skip:focus{ left:0; }
.nav-shell{ position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), backdrop-filter .45s, border-color .45s; }
.nav-shell.is-stuck{ background:var(--glass-solid);
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--border-soft); }
.nav{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding-block:16px; }
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--text); }
.brand__mark{ font-family:var(--font-serif); font-size:26px; line-height:1; letter-spacing:.02em; }
.brand__sub{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.nav__links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; justify-content:center; }
.nav__links a{ position:relative; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); text-decoration:none; padding-block:5px; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
html[dir="rtl"] .nav__links a::after{ transform-origin:right; }
.nav__links a:hover{ color:var(--text); } .nav__links a:hover::after{ transform:scaleX(1); }
.lang-switch{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.18em; font-weight:700; }
.lang-btn{ cursor:pointer; color:var(--text-dim); transition:color .3s; padding:3px 0; }
.lang-btn:hover{ color:var(--text); } .lang-btn.is-active{ color:var(--accent); }
.lang-sep{ color:var(--text-dim); opacity:.5; }
.drawer{ position:fixed; inset:0; z-index:70; background:var(--glass-solid);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  display:flex; flex-direction:column; justify-content:center; padding:28px; gap:2px;
  clip-path:circle(0% at calc(100% - 44px) 44px); transition:clip-path .7s var(--ease); pointer-events:none; }
html[dir="rtl"] .drawer{ clip-path:circle(0% at 44px 44px); }
.drawer.is-open{ clip-path:circle(150% at 50% 50%); pointer-events:auto; }
.drawer a.dr{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--font-display); font-weight:700; font-size:24px; text-transform:uppercase; letter-spacing:-.02em;
  color:var(--text); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--border-soft);
  transition:color .3s, padding-inline-start .3s var(--ease); }
.drawer a.dr:hover{ color:var(--accent); padding-inline-start:10px; }
.drawer a.dr .fa{ font-family:var(--font-fa); font-size:15px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-dim); direction:rtl; }

.scroll-content{ position:relative; z-index:10; pointer-events:none; }
.scene{ min-height:132vh; display:flex; align-items:center; position:relative; pointer-events:none; }
.scene-panel{ pointer-events:auto; will-change:opacity,transform; }
.scene--hero{ min-height:100vh; min-height:100svh; align-items:center; padding-top:92px; padding-bottom:36px; }
.hero-inner{ display:flex; align-items:center; justify-content:flex-end; width:100%; min-height:calc(100svh - 128px); }
.hero-panel{ width:min(540px,44vw); padding:34px; }
.spec{ display:flex; flex-direction:column; margin-top:22px; border-top:1px solid var(--border-soft); }
.spec__row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.spec__k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.spec__v{ font-size:12px; letter-spacing:.05em; color:var(--text); font-weight:500; text-align:end; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--text-muted);
  padding:7px 14px; border-radius:999px; border:1px solid var(--border-soft); background:var(--glass-solid); }
.chip--accent{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 42%, transparent); }
.scene-rail{ position:fixed; top:50%; transform:translateY(-50%); z-index:55; inset-inline-end:22px;
  display:flex; flex-direction:column; gap:2px; align-items:flex-end; transition:opacity .6s var(--ease); }
body.zone-2d .scene-rail{ opacity:0; pointer-events:none; }
.scene-rail button{ display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:5px 0;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); font-weight:600;
  font-family:var(--font-body); transition:color .3s; }
.scene-rail button i{ display:block; width:14px; height:1px; background:currentColor; transition:width .35s var(--ease); }
.scene-rail button:hover{ color:var(--text); }
.scene-rail button.is-active{ color:var(--accent); }
.scene-rail button.is-active i{ width:30px; }
.rail{ position:fixed; bottom:20px; inset-inline-start:22px; z-index:55; display:flex; align-items:center; gap:13px;
  padding:9px 18px; transition:opacity .6s var(--ease); }
body.zone-2d .rail{ opacity:0; pointer-events:none; }
.rail__track{ width:54px; height:2px; background:var(--border-soft); position:relative; overflow:hidden; border-radius:2px; }
.rail__bar{ position:absolute; inset-block:0; inset-inline-start:0; width:0%; background:var(--accent); border-radius:2px; }
.rail__label,.rail__idx,.rail__bld{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; font-weight:600; }
.rail__idx,.rail__bld{ color:var(--text); }
.orbit-hud{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:56;
  display:flex; align-items:center; gap:9px; padding:7px 9px 7px 16px; transition:opacity .6s var(--ease); }
body.zone-2d .orbit-hud{ opacity:0; pointer-events:none; }
.orbit-hud__hint{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; font-weight:600; }
.scroll-cue{ display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.scroll-cue i{ position:relative; display:block; width:1px; height:30px; background:var(--border); overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--accent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.anno{ position:absolute; padding:9px 16px; border-radius:16px; pointer-events:auto; }
.anno__n{ font-size:9.5px; letter-spacing:.22em; color:var(--text-dim); font-weight:600; }
.anno__t{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }

#zone-2d{ position:relative; z-index:10; pointer-events:auto; }
.section{ padding:120px 0; position:relative; }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:54px; }
.marquee{ overflow:hidden; border-block:1px solid var(--border-soft); padding:16px 0; background:var(--glass-solid); }
.marquee__track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ display:inline-flex; align-items:center; gap:26px; padding-inline-end:26px;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.marquee__track span b{ color:var(--accent); font-weight:600; }
.marquee__track span i{ font-family:var(--font-fa); direction:rtl; letter-spacing:0; text-transform:none; font-weight:500; color:var(--text-dim); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%);} }
.grid-cards{ display:grid; gap:20px; }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ padding:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease), border-color .4s; }
.card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0a0e16; color:var(--text); }
.card__media svg{ display:block; width:100%; height:100%; transition:transform 1.1s var(--ease); }
.card:hover .card__media svg{ transform:scale(1.05); }
.card__badge{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(6,8,12,.68);
  color:#fff; border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.card__body{ padding:24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.card__title{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.015em; text-transform:uppercase; margin:0; line-height:1.18; }
.card__fa{ font-family:var(--font-fa); direction:rtl; font-size:13px; color:var(--text-dim); margin:0; }
.card__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.card__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:var(--accent); background:none; border:0; cursor:pointer; padding:0; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filter{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; cursor:pointer; padding:9px 18px;
  border-radius:999px; border:1px solid var(--border-soft); background:transparent; color:var(--text-dim);
  transition:all .3s var(--ease); font-family:var(--font-body); }
.filter:hover{ color:var(--text); border-color:var(--border); }
.filter.is-on{ background:var(--accent); border-color:var(--accent); color:#0e1418; }
.count-note{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.step{ display:grid; grid-template-columns:78px 1fr auto; gap:22px; align-items:baseline; padding:22px 0; border-top:1px solid var(--border-soft); }
.step:last-child{ border-bottom:1px solid var(--border-soft); }
.step__n{ font-family:var(--font-serif); font-size:30px; color:var(--text-dim); line-height:1; }
.step__t{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:17px; letter-spacing:-.01em; margin:0; }
.step__fa{ font-family:var(--font-fa); direction:rtl; color:var(--accent); font-size:14px; font-weight:700; margin-inline-start:10px; }
.step__d{ margin:6px 0 0; font-size:14px; color:var(--text-muted); max-width:56ch; }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-soft);
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; }
.stat-cell{ background:var(--glass-solid); padding:28px 22px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.stat-num{ font-family:var(--font-serif); font-size:clamp(30px,4vw,48px); line-height:1; letter-spacing:-.02em; }
.stat-k{ margin-top:10px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.stat-fa{ font-family:var(--font-fa); direction:rtl; font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.list-block{ padding:26px; }
.list-block h4{ margin:0 0 18px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); font-weight:700; }
.li{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--border-soft); font-size:14px; }
.li:first-of-type{ border-top:0; }
.li span.code{ font-size:9.5px; letter-spacing:.16em; color:var(--accent); font-weight:700; }
.li .fa{ font-family:var(--font-fa); direction:rtl; font-size:12px; color:var(--text-dim); }
.quote{ font-family:var(--font-serif); font-size:clamp(22px,2.9vw,36px); line-height:1.3; letter-spacing:-.02em; margin:0; }
.quote-fa{ font-family:var(--font-fa); direction:rtl; font-size:15px; line-height:2; color:var(--text-muted); margin:16px 0 0; }
.shot{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); }
.shot svg{ display:block; width:100%; height:100%; }
.shot figcaption{ position:absolute; inset-inline:0; bottom:0; padding:14px 18px; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; font-weight:600; background:linear-gradient(to top, rgba(4,6,10,.88), transparent); }
.shot figcaption em{ font-family:var(--font-fa); font-style:normal; letter-spacing:0; text-transform:none; direction:rtl; opacity:.72; margin-inline-start:8px; }
.tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.tab{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:10px 18px; border-radius:999px;
  border:1px solid var(--border-soft); background:transparent; color:var(--text-dim); cursor:pointer; transition:all .3s var(--ease); font-family:var(--font-body); }
.tab.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fld label{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin-bottom:7px; }
.fld input,.fld textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--border);
  padding:11px 0; color:var(--text); font-family:var(--font-body); font-size:15px; outline:none; transition:border-color .3s; }
.fld input:focus,.fld textarea:focus{ border-color:var(--accent); }
.fld textarea{ resize:vertical; min-height:74px; }
.ok-msg{ display:none; align-items:center; gap:10px; font-size:13px; color:var(--accent); font-weight:600; }
.ok-msg.on{ display:flex; }
.info-row{ display:flex; flex-direction:column; gap:3px; padding:15px 0; border-top:1px solid var(--border-soft); }
.info-row .k{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:700; }
.info-row .v{ font-size:15px; color:var(--text); text-decoration:none; }
a.v:hover{ color:var(--accent); }
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,5,9,.76); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; }
.modal.is-open{ opacity:1; visibility:visible; }
.modal__card{ width:100%; max-width:860px; max-height:88vh; overflow-y:auto; padding:0;
  transform:translateY(24px); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease); }
.modal.is-open .modal__card{ transform:translateY(0); opacity:1; }
.close-x{ position:absolute; top:14px; inset-inline-end:14px; z-index:3; }
.footer{ position:relative; z-index:10; pointer-events:auto; border-top:1px solid var(--border-soft); padding:70px 0 30px;
  background:var(--glass-solid); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.f-col h5{ margin:0 0 18px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-dim); font-weight:700; }
.f-col a{ display:block; font-size:13.5px; color:var(--text-muted); text-decoration:none; padding:5px 0; transition:color .3s; }
.f-col a:hover{ color:var(--accent); }
.to-top{ position:fixed; inset-inline-end:22px; bottom:22px; z-index:58; opacity:0; pointer-events:none; transition:opacity .4s, transform .3s; }
.to-top.on{ opacity:1; pointer-events:auto; }
.loading-screen{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; transition:opacity 1s ease, visibility 1s; }
.loading-screen.hide-loading{ opacity:0; visibility:hidden; pointer-events:none; }
.ld-step{ display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim); font-weight:600; opacity:.32; transition:opacity .4s, color .4s; }
.ld-step.on{ opacity:1; color:var(--text); } .ld-step.done{ opacity:.6; color:var(--accent); }
.load-track{ width:240px; height:2px; background:var(--border-soft); position:relative; overflow:hidden; border-radius:2px; }
.load-bar{ position:absolute; inset-block:0; left:0; width:0%; background:var(--accent); transition:width .3s var(--ease); }
@keyframes fade-rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.rise{ opacity:0; }
body.is-ready .rise{ animation:fade-rise .8s var(--ease) forwards; }
.d-0{animation-delay:0s!important}.d-2{animation-delay:.2s!important}.d-3{animation-delay:.3s!important}.d-4{animation-delay:.4s!important}
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }

@media (max-width:1180px){
  :root{ --pad-x:24px; }
  .nav__links{ gap:18px; }
  .hero-panel{ width:min(500px,48vw); padding:28px; }
}
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav{ grid-template-columns:1fr auto; }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-rail{ display:none; }
}
@media (max-width:900px){
  :root{ --pad-x:18px; --radius:20px; }
  .scene{ min-height:118vh; }
  /* mobile hero: building + title together on one screen */
  .scene--hero{ min-height:100svh; display:flex; align-items:flex-end; padding:84px 0 14px; }
  .hero-inner{ min-height:100svh; align-items:flex-end; justify-content:stretch; }
  .hero-panel{ width:100%; padding:22px 18px 24px; }
  .hd-lg{ font-size:clamp(34px,10vw,56px); }
  .section{ padding:78px 0; }
  .g-3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step{ grid-template-columns:48px 1fr; gap:14px; }
  .step__badge{ grid-column:2; }
  .field-row{ grid-template-columns:1fr; }
  .rail{ bottom:14px; inset-inline-start:12px; padding:8px 14px; gap:9px; }
  .orbit-hud{ bottom:66px; padding:6px 8px 6px 12px; }
  .orbit-hud__hint{ display:none; }
  .anno{ padding:7px 12px; border-radius:12px; }
  .to-top{ bottom:66px; }
}
@media (max-width:520px){
  .hero-actions .btn{ width:100%; }
  .section-head{ align-items:flex-start; }
  .rail__label{ display:none; }
  .nav{ padding-block:12px; }
  .brand__mark{ font-size:22px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .rise,.rv{ opacity:1!important; transform:none!important; }
  .grain{ display:none; }
}

/* ==========================================================================
   SHELL ADDITIONS — sits after the ported makan-8 design system.
   Contains: (0) Persian typefaces, (1) the layout-utility subset the markup
   uses, (2) language purity, (3) contrast/readability over the 3D,
   (4) mobile behaviour, (5) inline icons, (6) scene animation hooks.
   ========================================================================== */

/* ------------------------------------------------- 0 آ· Persian typefaces
   Dana (headings) and Iran Yekan (body) from the persian-fonts-cdn mirror on
   jsDelivr. Both declare a Persian-only unicode-range, so a visitor reading
   the English site never downloads them — Latin glyphs fall through to
   Archivo / Inter in the stack, Persian glyphs pick these up.            */
@font-face{ font-family:'Dana'; font-weight:500; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/dana/DanaFaNum-Medium.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'Dana'; font-weight:700; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/dana/DanaFaNum-Bold.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'Dana'; font-weight:800; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/dana/DanaFaNum-ExtraBold.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'Dana'; font-weight:900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/dana/DanaFaNum-Heavy.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'IranYekan'; font-weight:400; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/iran-yekan/IRANYekanWebRegular.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'IranYekan'; font-weight:500; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/iran-yekan/IRANYekanWebMedium.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:'IranYekan'; font-weight:700; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/AmirAbbasVafaee/persian-fonts-cdn@main/fonts/iran-yekan/IRANYekanWebBold.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
:root{
  --font-fa-head:'Dana','IranYekan','Vazirmatn',sans-serif;
  --font-fa:'IranYekan','Dana','Vazirmatn',sans-serif;
}

/* ---------------------------------------------- 1 آ· layout utility subset */
.flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.items-center{align-items:center} .items-start{align-items:flex-start} .items-baseline{align-items:baseline}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-5{gap:20px} .gap-8{gap:32px}
.mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-7{margin-top:28px}
.mt-8{margin-top:32px} .mt-10{margin-top:40px} .mt-14{margin-top:56px} .mt-16{margin-top:64px}
.mb-1{margin-bottom:4px} .mb-5{margin-bottom:20px} .mb-8{margin-bottom:32px}
.my-8{margin-block:32px} .mx-auto{margin-inline:auto}
.absolute{position:absolute} .relative{position:relative} .top-5{top:20px}
.text-center{text-align:center} .text-start{text-align:start}
.leading-none{line-height:1} .align-super{vertical-align:super} .opacity-50{opacity:.5}
.ms-1{margin-inline-start:4px} .ms-auto{margin-inline-start:auto}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hidden{display:none}
@media (min-width:768px){
  .md\:inline-flex{display:inline-flex!important}
  .md\:items-end{align-items:flex-end}
  .md\:gap-3{gap:12px}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-4{grid-column:span 4/span 4}
}
@media (max-width:1023.98px){ .lg\:hidden{display:grid} }
@media (min-width:1024px){
  .lg\:hidden{display:none!important}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-5{grid-column:span 5/span 5}
  .lg\:col-span-7{grid-column:span 7/span 7}
}
.text-\[30px\]{font-size:30px} .text-\[11px\]{font-size:11px}
.js-scroll{cursor:pointer}

/* ------------------------------------------------------------ 2 آ· icons */
svg.ic{width:17px;height:17px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.icon-btn svg.ic{width:16px;height:16px}
.ok-msg svg.ic{width:17px;height:17px}

/* ------------------------------------------- 3 آ· legibility over the 3D */
:root{ --panel-a:rgba(10,13,18,.7); --panel-b:rgba(10,13,18,.52); --panel-brd:rgba(255,255,255,.17); }
html[data-theme="light"]{ --panel-a:rgba(255,255,255,.9); --panel-b:rgba(255,255,255,.72); --panel-brd:rgba(255,255,255,.86); }
.scene-panel.glass{
  background:linear-gradient(150deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--panel-brd);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%);
}
html[data-theme="light"] .scene-panel.glass{ box-shadow:0 34px 70px -40px rgba(20,26,32,.4), inset 0 1px 0 rgba(255,255,255,.9); }
.scene-panel .hd{ text-wrap:normal; }
/* leave the scene rail its own gutter on wide screens */
@media (min-width:1024px){
  .hero-panel{ margin-inline-end:54px; }
  .scene-panel.ms-auto{ margin-inline-end:54px; }
}
.scene-panel .bd-en,.scene-panel .bd-fa{ text-wrap:pretty; }
.anno.glass-chip{ background:var(--panel-a); border-color:var(--panel-brd); }

/* ==========================================================================
   TOUCH RELIABILITY
   A tap on a phone must always land. Three things break that in the wild:
   the browser's 300 ms double-tap-zoom wait, a tap target smaller than the
   44 px a finger needs, and the notch / status-bar area that `viewport-fit=
   cover` lets the top bar slide under. All three are handled here so the
   menu button, the theme switch and the view controls answer on the first tap.
   ========================================================================== */
.icon-btn,.btn,.filter,.tab,.lang-btn,.card__cta,.card__badge,.scene-rail button,
.drawer a.dr,.f-col a,input,textarea,select{
  touch-action:manipulation;              /* no double-tap-zoom delay */
  -webkit-tap-highlight-color:transparent;
}
.nav-shell{ padding-top:env(safe-area-inset-top, 0px); }
@media (max-width:900px){
  /* comfortable tap targets in the top bar */
  .nav .icon-btn{ width:44px; height:44px; }
  .nav{ padding-block:10px; }
  /* the view controls and the rail also respect the notch and the home bar */
  .orbit-hud{ top:calc(62px + env(safe-area-inset-top, 0px)); }
  .rail{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
  .to-top{ bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* the hero panel is the first thing a visitor reads: give it a touch more presence */
.hero-panel{ width:min(620px,46vw); box-shadow:0 50px 110px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16);
  padding:30px 34px; }
/* display type scaled to the viewport so the whole hero card fits one screen —
   a visitor must never have to scroll to finish reading a sentence          */
.scene-panel .hd-lg{ font-size:clamp(32px,4.7vw,66px); letter-spacing:-.04em; }
.scene-panel .hd-sm{ font-size:clamp(23px,2.9vw,38px); }
.hero-panel .hd-fa{ font-size:.34em; line-height:1.7; margin-top:.85em; }
.hero-panel .eyebrow{ font-size:10px; letter-spacing:.22em; margin-bottom:15px; }
.hero-panel .bd{ margin-top:16px; }
.hero-panel .bd-en{ font-size:15px; line-height:1.66; }
.hero-panel .bd-fa{ font-size:13.5px; line-height:1.85; }
.hero-panel .spec{ margin-top:16px; }
.hero-panel .spec__row{ padding:7px 0; }
.hero-panel .spec__k{ font-size:9.5px; }
.hero-panel .spec__v{ font-size:11.5px; }
.hero-panel .btn--hero{ padding:15px 26px; font-size:11.5px; }
.hero-panel .hero-actions{ margin-top:20px; gap:10px; }
.hero-panel .chips{ margin-top:14px; }

/* ------------------------------------------------------------- 4 آ· canvas */
#canvas-container canvas{ display:block; width:100%; height:100%; }
#drag-layer{ touch-action:pan-y; }
body.touch-hero #drag-layer{ touch-action:none; }
body.is-locked{ overflow:hidden; }

/* the loader fades out when the world is ready */
#loading-screen.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ------------------------------------------------- 5 آ· scene animation */
body.anim-ready .scene-panel,
body.anim-ready [data-anno]{ opacity:0; transform:translateY(26px); }
body.anim-ready .scene-panel.is-live,
body.anim-ready [data-anno].is-live{ opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease); }
body.anim-ready [data-anno].is-live{ transition-delay:.16s; }
.scene-panel{ max-height:none; }

/* progress bar inside the bottom rail is driven by JS */
.rail__bar{ transition:width .18s linear; }

/* --------------------------------------------------- 6 آ· mobile framing */
/* the seven scenes set the scroll length of the story: 100vh for the hero
   plus 150vh for each of the six acts (see SPEC.md for the timeline map)  */
.scene:not(.scene--hero){ min-height:150vh; }
.scene--hero{ min-height:100vh; min-height:100svh; }
@media (max-width:900px){
  .scene:not(.scene--hero){ min-height:140vh; }
  /* the hero is tall enough to hold a card that starts below the fold: the
     first screen belongs to the building, the copy is scrolled into view.
     The offset is PADDING, not margin — a top margin would collapse out of
     the section and shift the whole scroll story down the page.            */
  .scene--hero{ min-height:126svh; padding:0; display:block; }
  .hero-inner{ min-height:0; padding-top:62svh; padding-bottom:0; display:block; }
  .hero-panel{ width:100%; padding:22px 18px; border-radius:20px; max-height:none; }
  /* the story must leave room for the building itself: on a phone each card
     carries ONE language of body copy (the echo paragraph is dropped, and the
     language switch simply swaps which one that is)                        */
  html[lang="en"] .scene-panel .bd-fa,
  html[lang="fa"] .scene-panel .bd-en{ display:none; }
  .hero-actions .btn:nth-child(2){ display:none; }
  .hero-actions .btn{ width:100%; }
  .hero-panel .spec{ margin-top:14px; }
  /* the HUD collapses to one button on a phone and only lives in the hero */
  .orbit-hud{
    top:64px; bottom:auto; left:auto; transform:translateY(-6px);
    inset-inline-end:14px; padding:6px; gap:6px;
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  body.hud-live .orbit-hud{ opacity:1; pointer-events:auto; transform:none; }
  .orbit-hud:not(.is-open) .icon-btn:not(#hud-toggle){ display:none; }
  .orbit-hud__hint{ display:none; }
  .to-top{ bottom:22px; }
  .scene-panel{ padding:22px 18px!important; border-radius:20px; max-width:100%!important; }
  .scene-panel .hd{ font-size:clamp(27px,8.4vw,40px); }
  .scene-panel .hd-lg{ font-size:clamp(33px,10.5vw,52px); }
  .scene-panel .bd-en{ font-size:15px; line-height:1.75; }
  .scene-panel .bd-fa{ font-size:14.5px; line-height:2; }
  .spec__row{ padding:7px 0; }
  .spec__k{ font-size:9px; }
  .spec__v{ font-size:11.5px; }
  .hero-actions{ margin-top:22px; }
  .hero-panel .spec{ margin-top:16px; }
  .chips{ margin-top:16px; }
  #scene-rail{ display:none; }
  /* the floating annotations collide with the HUD on a phone: the card already
     names the stage, so they are desktop-only                                 */
  [data-anno]{ display:none!important; }
  .anno{ transform:scale(.92); transform-origin:center; }
}
@media (max-width:520px){
  .scene-panel .hd{ font-size:clamp(25px,8.6vw,34px); }
  .scene-panel .hd-lg{ font-size:clamp(30px,10.8vw,44px); }
  .eyebrow{ font-size:9.5px; letter-spacing:.2em; margin-bottom:14px; }
  .hero-panel .spec{ display:none; }
  .scene-panel .bd-fa{ font-size:13.5px; }
}
/* a phone in landscape should still see the tower */
@media (max-height:520px) and (max-width:900px){
  .scene-panel .spec,.scene-panel .chips{ display:none; }
  .scene-panel{ padding:18px 16px!important; }
}

/* ------------------------------------------------------------ 7 آ· misc */
/* the skip link must not park itself off-canvas: in RTL a negative `left`
   turns into real horizontal overflow and the phone zooms the whole page out */
.skip{ left:50%; top:0; transform:translate(-50%,-130%); transition:transform .25s var(--ease); }
.skip:focus{ left:50%; transform:translate(-50%,0); }
.rail__bld{ color:var(--accent); }
#scene-rail button{ padding:4px 0; }
#scene-rail button i{ width:12px; }
#to-top.on{ opacity:1; pointer-events:auto; }
.mono-tag a{ color:inherit; text-decoration:none; }
.card__media svg{ color:var(--text); }
/* every generated SVG is an illustration inside a fixed frame: without this the
   case-file header would grow past its 300 px band and cover its own title */
.card__media svg,.shot svg,.modal__card svg{ display:block; width:100%; height:100%; }
.filter,.tab{ font-family:var(--font-body); }
::focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
html[dir="rtl"] #canvas-container{ direction:ltr; }

/* ==========================================================================
   8 آ· ONE LANGUAGE AT A TIME
   The design reference prints English and Persian side by side; this build
   shows only the language the visitor selected. `.fa-in` (the inline Persian
   echo) is never rendered — the primary string is swapped instead — and each
   span that belongs to one language is switched off in the other.
   ========================================================================== */
.fa-in{ display:none!important; }
html[lang="en"] .hd-fa,
html[lang="en"] .bd-fa,
html[lang="en"] .card__fa,
html[lang="en"] .stat-fa,
html[lang="en"] .step__fa,
html[lang="en"] .quote-fa,
html[lang="en"] .li .fa,
html[lang="en"] .shot figcaption em,
html[lang="en"] .drawer a .fa,
html[lang="en"] .m-fa,
html[lang="en"] .mono-tag .fa{ display:none!important; }
html[lang="fa"] .hd-en,
html[lang="fa"] .bd-en,
html[lang="fa"] .m-en{ display:none!important; }

/* Persian reading: Dana for display type, Iran Yekan for text */
html[lang="fa"] .hd,
html[lang="fa"] .card__title,
html[lang="fa"] .step__t,
html[lang="fa"] .drawer a.dr,
html[lang="fa"] .stat-num,
html[lang="fa"] .brand__mark,
html[lang="fa"] .case-title,
html[lang="fa"] #case-title{
  font-family:var(--font-fa-head); font-weight:800; letter-spacing:-.01em;
}
html[lang="fa"] body,
html[lang="fa"] .bd-fa,
html[lang="fa"] .card__fa,
html[lang="fa"] .step__fa,
html[lang="fa"] .quote-fa,
html[lang="fa"] .li .fa{ font-family:var(--font-fa); }
html[lang="fa"] .bd-fa{ font-size:15.5px; line-height:2.05; }
html[lang="fa"] .step__fa{ font-size:15px; color:var(--accent); }
html[lang="fa"] .eyebrow{ letter-spacing:.12em; }
html[lang="fa"] .btn{ font-family:var(--font-fa); font-weight:700; letter-spacing:.02em; text-transform:none; font-size:13px; }
html[lang="fa"] .chip,
html[lang="fa"] .filter,
html[lang="fa"] .tab,
html[lang="fa"] .mono-tag,
html[lang="fa"] .count-note,
html[lang="fa"] .spec__k,
html[lang="fa"] .spec__v,
html[lang="fa"] .nav__links a,
html[lang="fa"] .lang-switch{ font-family:var(--font-fa); letter-spacing:0; text-transform:none; }
html[lang="fa"] .nav__links a{ font-size:12.5px; }
html[lang="fa"] .fld label,
html[lang="fa"] .fld input,
html[lang="fa"] .fld textarea{ font-family:var(--font-fa); letter-spacing:0; text-transform:none; }
html[lang="fa"] .fld input,
html[lang="fa"] .fld textarea{ font-size:15px; }
html[lang="fa"] .stat-k{ letter-spacing:0; text-transform:none; font-family:var(--font-fa); font-size:10.5px; }
html[lang="fa"] .card__meta,
html[lang="fa"] .card__cta,
html[lang="fa"] .f-col h5,
html[lang="fa"] .f-col a,
html[lang="fa"] .info-row .k{ font-family:var(--font-fa); letter-spacing:0; text-transform:none; }
html[lang="fa"] .f-col a,
html[lang="fa"] .info-row .v{ font-size:14.5px; line-height:1.9; }
html[lang="fa"] .marquee__track span{ letter-spacing:0; text-transform:none; font-family:var(--font-fa); font-size:13px; }
html[lang="fa"] .rail__label,
html[lang="fa"] .rail__idx,
html[lang="fa"] .rail__bld,
html[lang="fa"] .orbit-hud__hint{ font-family:var(--font-fa); letter-spacing:.06em; text-transform:none; }
html[lang="fa"] .hd-lg{ font-size:clamp(30px,4.4vw,62px); line-height:1.35; }
html[lang="fa"] .hd-sm{ font-size:clamp(22px,2.8vw,36px); line-height:1.45; }
html[lang="fa"] .hd{ line-height:1.5; }
html[lang="fa"] .modal__card .hd{ font-size:clamp(22px,3vw,34px); }
/* ==========================================================================
   LARAVEL PORT — helpers for the server-rendered markup
   ========================================================================== */
/* one language at a time: every string Blade prints in both editions */
html[lang="en"] .tpl-fa,
html[lang="fa"] .tpl-en{ display:none!important; }

/* procedural card artwork (generated from data-art / data-seed / data-cfg) */
[data-art]{ display:block; width:100%; height:100%; }

/* the case-file dialog shows the same artwork at a fixed height */
.case-art{ position:relative; height:300px; background:#070b12; }

/* in-place filtering of the server-rendered cards */
.is-hidden{ display:none!important; }

/* the orbit hint follows body.orbit-mode, the drawer label follows the theme */
#orbit-hint .hint-on{ display:none; }
body.orbit-mode #orbit-hint .hint-off{ display:none; }
body.orbit-mode #orbit-hint .hint-on{ display:inline; }
html[data-theme="light"] .when-night{ display:none; }
html[data-theme="dark"] .when-day{ display:none; }

/* contact form: field errors and the honeypot */
.fld-err{ margin:8px 0 0; font-size:12.5px; font-weight:600; color:#d9604c; }
html[lang="fa"] .fld-err{ font-family:var(--font-fa); }
/* visually hidden without any sideways overflow: a left:-9999px box would
   make an RTL document 10 000px wide and break the whole mobile layout */
.hp-field{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* language and card actions are real links now */
a.lang-btn{ text-decoration:none; color:inherit; }
a.card__cta{ text-decoration:none; }
/* ==========================================================================
   INNER PAGES — section listings, detail pages, gallery
   ========================================================================== */
.page-body{ background:var(--bg); }
.page-body .rv{ opacity:1; transform:none; }   /* no reveal observer on inner pages */
.page-main{ padding:128px 0 60px; position:relative; z-index:2; }
.page-head{ max-width:860px; margin-bottom:30px; }
.page-head .hd{ margin:12px 0 16px; }
.page-head .bd p{ margin:0; }

.crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); }
.crumbs a{ color:inherit; text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }

.filters--links{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.filters--links .filter{ text-decoration:none; }
.section-foot{ display:flex; justify-content:center; margin-top:44px; }
.page-cta{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  margin-top:60px; padding:26px 30px; border:1px solid var(--border); border-radius:var(--radius); background:var(--glass-solid); }

.pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:44px; }
.pager__btn{ width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--border); color:var(--text); text-decoration:none; }
.pager__btn:hover{ border-color:var(--accent); color:var(--accent); }
.pager__btn.is-off{ opacity:.3; }
.pager__info{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }

/* cards hold photographs now */
a.card__media{ display:block; text-decoration:none; }
.card__img{ display:block; width:100%; height:100%; object-fit:cover; }
.card__title a{ color:inherit; text-decoration:none; }

/* ------------------------------------------------------------------ detail */
.detail{ display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:30px; align-items:start; }
.detail__media{ min-width:0; }
.detail__side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
.detail__block{ padding:24px 24px 8px; }
.detail__label{ margin:0 0 14px; font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-dim); }
.detail__block .spec__row:last-child{ border-bottom:0; }
.detail__body{ margin-top:48px; max-width:82ch; }
.detail__body .bd p{ margin:0 0 14px; }
.detail__art{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:#070b12; }
.btn--wide{ width:100%; justify-content:center; }

/* ----------------------------------------------------------------- gallery */
.gallery{ display:flex; flex-direction:column; gap:12px; }
.gallery__main{ display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:#070b12; }
.gallery__main img, .gallery__main video{ display:block; width:100%; max-height:72vh; object-fit:cover; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.gallery__thumb{ display:block; position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  border:1px solid var(--border); }
.gallery__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.gallery__thumb.is-on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.gallery__play{ display:grid; place-items:center; height:100%; background:#0b1119; color:var(--accent); font-size:18px; }

.lightbox{ position:fixed; inset:0; z-index:120; display:grid; grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center; padding:24px; background:rgba(4,6,10,.95); }
.lightbox[hidden]{ display:none; }
/* every part is placed explicitly: the source order must not decide the layout */
.lightbox__stage{ grid-area:1 / 2; display:grid; place-items:center; overflow:hidden; min-width:0; }
.lightbox__stage img{ max-width:100%; max-height:88vh; width:auto; height:auto; cursor:zoom-in;
  transition:transform .25s var(--ease); }
.lightbox__stage.is-zoomed img{ transform:scale(2.4); cursor:zoom-out; }
.lightbox__stage video{ max-width:100%; max-height:88vh; }
.lightbox__nav{ background:none; border:0; color:var(--text); font-size:34px; cursor:pointer; line-height:1; }
.lightbox__nav--prev{ grid-area:1 / 1; }
.lightbox__nav--next{ grid-area:1 / 3; }
.lightbox__nav:hover{ color:var(--accent); }
.lightbox__close{ grid-area:1 / 4; position:absolute; top:16px; inset-inline-end:22px; background:none; border:0;
  color:var(--text); font-size:20px; cursor:pointer; }
.lightbox__count{ position:absolute; bottom:20px; inset-inline:0; text-align:center; font-size:11px;
  letter-spacing:.22em; color:var(--text-muted); }
body.lb-open{ overflow:hidden; }

@media (max-width:980px){
  .detail{ grid-template-columns:1fr; }
  .detail__side{ position:static; }
  .page-main{ padding:104px 0 50px; }
  .lightbox{ grid-template-columns:46px minmax(0,1fr) 46px; padding:14px; }
  .lightbox__nav{ font-size:26px; }
  .page-cta{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   ROUND 2 — inner pages, cards, gallery arrows
   ========================================================================== */
/* the same soft background the home page shows in its 2D zone */
body.page-body #soft-bg,
body.page-body #soft-grid{ opacity:1; }
body.page-body{ background:var(--bg); }

/* day / night works on the inner pages through page.js */
html[data-theme="light"] .grain{ opacity:.35; }

/* ------------------------------------------------------------------- cards */
.card__kicker{ margin:0; }
.card__cat{ margin:0; font-size:12.5px; color:var(--text-dim); letter-spacing:0; text-transform:none; }
html[lang="fa"] .card__cat{ font-family:var(--font-fa); }
.card__text{ margin:0; font-size:14px; color:var(--text-muted); }
.card__body{ gap:13px; }
.card__title + .card__cat{ margin-top:-6px; }

/* ------------------------------------------------------------------ detail */
.detail-head{ margin-bottom:6px; }
.detail__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:16px 0 0; font-size:13.5px; color:var(--text-muted); }
.detail__meta > span{ display:inline-flex; align-items:center; gap:6px; }
.detail__meta > span + span::before{ content:"·"; color:var(--text-dim); margin-inline-end:10px; }
.detail__cat{ color:var(--text); font-weight:600; }
html[lang="fa"] .detail__meta{ font-family:var(--font-fa); }
.detail{ margin-top:34px; }

/* ------------------------------------------------------- gallery on the page */
.gallery__stage{ position:relative; border-radius:var(--radius); overflow:hidden; }
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; display:grid; place-items:center; border-radius:999px; cursor:pointer;
  background:rgba(8,11,16,.55); border:1px solid var(--border); color:#fff; font-size:22px; line-height:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .25s var(--ease); }
.gallery__nav:hover{ background:rgba(224,164,88,.85); color:#1a1206; }
.gallery__nav--prev{ inset-inline-start:14px; }
.gallery__nav--next{ inset-inline-end:14px; }
.gallery__count{ position:absolute; bottom:14px; inset-inline-end:16px; z-index:3; font-size:11px;
  letter-spacing:.16em; color:#fff; background:rgba(8,11,16,.55); border:1px solid var(--border);
  padding:4px 10px; border-radius:999px; }
html[dir="rtl"] .gallery__nav--prev,
html[dir="rtl"] .gallery__nav--next{ --x:0; }
html[dir="rtl"] .gallery__nav--prev{ transform:translateY(-50%) scaleX(-1); }
html[dir="rtl"] .gallery__nav--next{ transform:translateY(-50%) scaleX(-1); }
@media (max-width:640px){
  .gallery__nav{ width:38px; height:38px; font-size:19px; }
  .gallery__nav--prev{ inset-inline-start:8px; }
  .gallery__nav--next{ inset-inline-end:8px; }
}

/* the RTL rule that parks the drawer off-screen must not win over .is-open:
   in Persian the mobile menu could never open */
html[dir="rtl"] .drawer.is-open{ clip-path:circle(150% at 50% 50%); pointer-events:auto; }

/* ------------------------------------------------------------------- brand */
.brand__logo{ height:34px; width:auto; display:block; }
.footer__logo{ height:42px; width:auto; display:block; }
@media (max-width:900px){ .brand__logo{ height:28px; } }

/* --------------------------------------------------------------------- map */
.map-frame{ display:block; width:100%; height:260px; border:0; }
.map-link{ display:block; text-decoration:none; color:inherit; }
.map-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:18px 24px; }
.link{ color:var(--accent); text-decoration:none; font-size:13px; }
.link:hover{ text-decoration:underline; }

/* the hero carries several calls to action now: show them all on a phone too */
@media (max-width:900px){
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-actions .btn:nth-child(2){ display:inline-flex; }
}