@font-face{
  font-family:'Morabba';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Morabba-Regular.woff2") format("woff2");
}
@font-face{
  font-family:'Morabba';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/Morabba-Bold.woff2") format("woff2");
}
@font-face{
  font-family:'IRANSansX';font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/IRANSansX-Regular.woff") format("woff");
}
@font-face{
  font-family:'IRANSansX';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/IRANSansX-Regular.woff") format("woff");
}
@font-face{
  font-family:'IRANSansX';font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/IRANSansX-Medium.woff") format("woff");
}
@font-face{
  font-family:'IRANSansX';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/IRANSansX-Bold.woff") format("woff");
}
@font-face{
  font-family:'IRANSansX';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/IRANSansX-Bold.woff") format("woff");
}

/* ── فصل اول: قایق، دریا، ابر، ساحل ──────────────────────────────
   بوم تمام‌صفحه که با اسکرول فریم عوض می‌کند؛ متن‌ها لایه‌ای رویش.
   تا وقتی فریم‌های واقعی نرسیده، صحنه به‌صورت وکتور تولید می‌شود.

   شیشه سه لایه دارد، چون وزنِ متریال در سیستم اپل بیانگر سلسله‌مراتب
   است: سطح بزرگ‌تر = بلور بیشتر و سایهٔ عمیق‌تر. ته‌رنگ سرمه‌ای است نه
   سفید، چون صحنه گاهی روشن می‌شود و شیشهٔ سفید متن سفید را می‌خورد.
   ───────────────────────────────────────────────────────────── */
:root{
  --navy:#042C39;
  --blue-shadow:#004466;
  --blue:#0060A0;
  --blue-light:#0D85BD;
  --white:#F3F4F4;
  --ochre:#E4AA51;
  --teal:#55C4CF;
  --sand:#F2E7D5;

  --ink-1:rgba(243,244,244,.95);
  --ink-2:rgba(243,244,244,.82);
  --ink-3:rgba(243,244,244,.46);
  --hair:rgba(243,244,244,.13);

  /* three tiers, never more. the inset top highlight is what sells it. */
  --g1-bg:rgba(4,44,57,.34);   --g1-blur:14px;
  --g1-edge:inset 0 1px 0 rgba(243,244,244,.14);
  --g2-bg:rgba(4,44,57,.46);   --g2-blur:22px;
  --g2-edge:inset 0 1px 0 rgba(243,244,244,.18), 0 8px 32px rgba(2,24,32,.42);
  --g3-bg:rgba(4,44,57,.58);   --g3-blur:34px;
  --g3-edge:inset 0 1px 0 rgba(243,244,244,.22), 0 20px 64px rgba(2,24,32,.55);
  /* لایهٔ چهارم فقط برای صفحهٔ اعداد. بزرگ‌ترین سطح صفحه است، پس در
     منطق اپل باید ضخیم‌ترین هم باشد.

     «شیشه‌ای‌تر» یعنی ته‌رنگ کمتر و بلور بیشتر، نه رنگِ روشن‌تر. پس
     پرکننده از ۰٫۵۲ به ۰٫۲۸ آمد و بلور از ۴۴ به ۵۶ رفت؛ چیزی که
     جایش را می‌گیرد نور است: رِفلکس روی لبهٔ بالا، یک بازتاب مورب
     روی سطح، و اشباع بیشترِ پس‌زمینه‌ای که از پشتش می‌گذرد. */
  /* روشن‌تر و شیشه‌ای‌تر: ته‌رنگ از ۰٫۲۸ به ۰٫۱۴ آمد و رنگش هم دیگر
     سرمه‌ای نیست، خاکستریِ خنثی — «جعبهٔ آبیِ تیره» از همین می‌آمد.
     شعاع بلور **ثابت** است، نه وابسته به پیشرفت: تغییر دادن شعاع
     backdrop-filter در هر فریم یعنی مرورگر نمی‌تواند نتیجه را کش کند
     و مجبور است پس‌زمینه را از نو محو کند. */
  --g4-bg:rgba(10,32,42,.18);  --g4-blur:32px;
  --g4-sheen:linear-gradient(152deg,
             rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 30%,
             rgba(255,255,255,0) 58%);
  --g4-rim:rgba(255,255,255,.20);
  --g4-edge:inset 0 1px 0 rgba(255,255,255,.34),
            inset 0 -1px 0 rgba(2,24,32,.14),
            0 26px 70px -30px rgba(2,24,32,.52);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --ease-fluid:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-micro:120ms; --d-std:220ms; --d-enter:380ms;

  --sans:'IRANSansX','Segoe UI',Tahoma,sans-serif;
  --display:'Morabba','IRANSansX',Tahoma,serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--navy);font-family:var(--sans)}

.hero{position:relative;direction:rtl;font-family:var(--sans);color:var(--white)}
/* Persian shaping breaks the moment tracking is applied — zero, everywhere,
   no exception. Only the Latin monospace dev overlay opts out. */
.hero,.hero *{letter-spacing:0}
.hero :focus-visible{outline:2px solid var(--ochre);outline-offset:4px;border-radius:var(--r-sm)}

.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}

/* موج تعاملی: فقط یک لایهٔ نور روی ویدیو.
   شیدر خاکستری ۵۰٪ می‌سازد و با soft-light می‌نشیند — خاکستری ۵۰٪ در
   soft-light یعنی «هیچ»، پس جایی که موجی نیست هیچ اثری ندارد و رنگ
   ویدیو دست‌نخورده می‌ماند. هیچ‌وقت هیچ چیزی را deform نمی‌کند. */
.ripple{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:var(--ripple-opacity,1);
}
/* تزئین است، پس وقتی کاربر شفافیت کمتر خواسته کلاً می‌رود */
@media (prefers-reduced-transparency:reduce){ .ripple{display:none} }

/* حجاب و پردهٔ متن حالا داخل خودِ بوم کشیده می‌شوند (drawFrame →
   overlay در hero.js). قبلاً دو div تمام‌صفحه بودند و در هر فریمِ
   اسکرول دو ترکیبِ تمام‌صفحهٔ اضافه می‌ساختند. */

/* ── beats: چیدمان صحنه‌به‌صحنه ──────────────────────────────
   یک قاعدهٔ ثابت («همیشه راست») امن بود ولی تکراری. جای متن در هر
   صحنه از روی *همان فریم* انتخاب شده — جعبهٔ قایق روی هر ۱۲ فریمِ
   کلیدی اندازه‌گیری شد و بعد فضای خالی سنجیده شد:

     hero   قایق مورب بالا-چپ (x ۰٫۲۲–۰٫۵۴)   → ستون راست
     prize  قایق مورب وسط-چپ، پایین کادر باز   → نوار پایین، وسط‌چین
     sea    قایق سوزنیِ باریک دقیقاً وسط        → ستون چپ
     storm  فقط ابر، هیچ سوژه‌ای                → وسط‌چین، تمام‌قد
     people فقط ابر                             → وسط‌چین، تمام‌قد
     s0–s4  ستون نور وسط، قایق پایین کادر       → وسط‌چین، نوار بالا
     s5     قایق تمام ارتفاع را می‌گیرد         → ستون راست
     nav    ساحل؛ قایق وسط، پاروها تا x ۰٫۶۱    → ستون CTA سمت راست

   dataset دو صفت می‌نویسد: data-d برای سینمایی و data-m برای پرتره.
   بقیه‌اش CSS است. */
.beat{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding:0 clamp(22px,6vw,80px) clamp(96px,21vh,190px);
  pointer-events:none;
  opacity:var(--o,0);
}
.beat[data-hidden]{visibility:hidden}

/* ── پرتره ─────────────────────────────────────────────────
   برش cover دو طرف کادر را می‌برد، پس ستون کناری جا ندارد. سه حالت
   می‌ماند: نوار پایین، نوار بالا، و وسطِ کامل وقتی صحنه ابر است. */
@media (max-aspect-ratio:7/5){
  .beat[data-m="top"]{
    justify-content:flex-start;
    padding-top:clamp(52px,10vh,100px);
    padding-bottom:clamp(36px,7vh,64px);
  }
  .beat[data-m="center"]{justify-content:center;padding-bottom:0}
  /* پرتره: در فریم ساحل قایق و پاروها کل عرض را می‌گیرند و فقط نوار
     بالای کادر (تا y ۰٫۱۸) آزاد است. پس شبکهٔ دوتایی، جمع و جور. */
  .beat[data-m="shore"]{
    justify-content:flex-start;
    padding:clamp(26px,5vh,46px) clamp(24px,6.5vw,40px) 0;
  }
  .beat[data-m="shore"] .nav{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    width:100%;max-width:430px;margin-inline:auto;
  }
  .beat[data-m="shore"] .nav a{
    justify-content:center;text-align:center;
    padding:13px 10px;font-size:13.5px;
  }
}

/* ── سینمایی ────────────────────────────────────────────────
   --copy-clear عرضِ کنار گذاشته‌شده برای محور سوژه است. چون در هر
   نسبتِ پهن‌تر از منبع (۱٫۴۲) برش cover افقی نیست، نگاشت x همانی
   است و یک عدد ثابت برای همهٔ عرض‌ها درست کار می‌کند. */
@media (min-aspect-ratio:7/5){
  .beat{justify-content:center;padding-bottom:0}

  /* ستون راست — flex-start در RTL یعنی لبهٔ راست */
  .beat[data-d="right"]{
    align-items:flex-start;text-align:start;
    padding-inline:clamp(34px,5.4vw,104px) var(--copy-clear,60%);
  }
  /* ستون چپ — flex-end یعنی لبهٔ چپ. متن داخل بلوک همچنان راست‌چین
     می‌ماند؛ فقط خودِ بلوک آن طرف می‌نشیند. */
  .beat[data-d="left"]{
    align-items:flex-end;text-align:start;
    padding-inline:var(--copy-clear,60%) clamp(34px,5.4vw,104px);
  }
  /* وسط‌چین تمام‌قد — وقتی هیچ سوژه‌ای نیست */
  .beat[data-d="center"]{
    align-items:center;text-align:center;
    padding-inline:clamp(40px,8vw,140px);
  }
  /* وسط‌چین، نوار بالا — سوژه پایین کادر است */
  .beat[data-d="center-high"]{
    align-items:center;text-align:center;justify-content:flex-start;
    padding:clamp(68px,15vh,150px) clamp(40px,8vw,140px) 0;
  }
  /* وسط‌چین، نوار پایین — سوژه بالای کادر است */
  .beat[data-d="center-low"]{
    align-items:center;text-align:center;justify-content:flex-end;
    padding:0 clamp(40px,8vw,140px) clamp(56px,12vh,120px);
  }
  /* ساحل: ستون CTA کنار پاروها */
  .beat[data-d="shore"]{
    align-items:flex-start;text-align:start;justify-content:center;
    padding-inline:clamp(28px,4.2vw,76px) 64%;
  }
  .beat[data-d="shore"] .nav{
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    width:100%;max-width:340px;
    gap:clamp(9px,1.5vh,17px);
  }
  /* ستون کمی بالاتر از وسط می‌نشیند: مرکز قایق در هر نسبتِ پهنِ
     رایج حدود y=۰٫۴۲ کادر می‌افتد، نه ۰٫۵۰ */
  .beat[data-d="shore"] .nav{padding-bottom:min(13vh,120px);max-width:300px}
  .beat[data-d="shore"] .nav a{
    position:relative;
    display:flex;align-items:center;justify-content:flex-start;
    padding:clamp(13px,1.7vh,19px) clamp(18px,1.5vw,26px);
  }
  /* نخِ اتصال: از لبهٔ چپِ هر دکمه به سمت نوک پاروها می‌رود و محو
     می‌شود. تزئین نیست — همان چیزی است که ستون را به قایق می‌بندد
     به‌جای اینکه چهار دکمهٔ معمولیِ وب‌سایت کنار کادر بایستند. */
  .beat[data-d="shore"] .nav a::after{
    /* right فیزیکی، نه inset-inline-end: صفحه RTL است و منطقیِ end
       همان چپ می‌شود، که لبهٔ اشتباه است. */
    content:"";position:absolute;top:50%;right:100%;
    width:clamp(30px,9vw,230px);height:1px;
    background:linear-gradient(to left,rgba(243,244,244,.42),rgba(243,244,244,0));
  }

  .beat[data-d="right"] .say,   .beat[data-d="left"] .say,
  .beat[data-d="right"] .slogan,.beat[data-d="left"] .slogan{text-align:start}
  .beat[data-d="right"] .prize, .beat[data-d="right"] .stat,
  .beat[data-d="left"]  .prize, .beat[data-d="left"]  .stat,
  .beat[data-d="right"] .fields,.beat[data-d="left"]  .fields{text-align:start}
  .beat[data-d="right"] .prize, .beat[data-d="right"] .stat,
  .beat[data-d="left"]  .prize, .beat[data-d="left"]  .stat{align-items:flex-start}
  .beat[data-d="right"] .fields,.beat[data-d="left"] .fields{justify-content:flex-start}
}

/* word-by-word blur-in. Persian is cursive — words are the smallest unit
   that can move without breaking the joins, so never split to letters.
   The stagger index is capped at 6 upstream; past that the tail moves
   as one, so a long sentence doesn't dribble in. */
/* ═══ زبان حرکتی ═══════════════════════════════════════════
   پنج فعل، نه پنج افکت. همه‌شان یک چیز مشترک دارند: چیزی از دور یا
   از زیر می‌آید، تیز می‌شود، و **می‌ایستد**. هیچ‌کدام نمی‌پرد،
   نمی‌چرخد و بعد از رسیدن تکان نمی‌خورد.

   --p پیشرفتِ ورودِ بیت است (۰ تا ۱، از اسکرول). --i شمارهٔ سطر.
   --lp پیشرفت همان سطر است، با تأخیر پلکانی. */
.ln{
  display:block;
  --stagger:.12; --dur:.42;
  --lp:clamp(0, calc((var(--p,0) - var(--i,0) * var(--stagger)) / var(--dur)), 1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * var(--rise,14px)));
}
/* بلور فقط در لحظهٔ ورود. blur(0) هم برای هر span یک سطح رندر جدا
   می‌سازد، پس بیرون از حرکت اصلاً اعمال نمی‌شود. */
.beat[data-anim] .ln{filter:blur(calc((1 - var(--lp)) * var(--soft,5px)))}

/* ── settle — نشستن آرام (آغاز، ساحل) ───────────────────── */
.beat[data-mo="settle"] .ln{--stagger:.13; --dur:.44; --rise:16px; --soft:5px}
.hero-cta{
  --lp:clamp(0, calc((var(--p,0) - .34) / .44), 1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 14px));
}

/* ── emerge — از زیر سطح آب بالا آمدن (عدد جایزه) ──────────
   سه چیز با هم: بالا آمدن، بازشدنِ عمودی (مثل چیزی که از زیر آب
   کشیده می‌شود)، و یک لبهٔ نرمِ ماسک که از بالا پایین می‌رود —
   یعنی اول سرِ عدد از سطح بیرون می‌زند و آخر پایش. بدون قطره،
   بدون پاشش. */
.beat[data-mo="emerge"] .num{
  /* حرکت در ۸۰٪ اولِ ورود تمام می‌شود تا بعدش یک لحظهٔ واقعیِ
     ایستادن بماند.

     ماسکِ «سطح آب» برداشته شد: یک لایهٔ ماسکِ متحرک در هر فریم
     می‌ساخت و در مقابل، خیلی هم دیده نمی‌شد. همان حس از سه چیزِ
     ارزان‌تر و حالا **قوی‌تر** می‌آید — از عمق کوچک‌تر، پایین‌تر،
     و محوتر شروع می‌کند و تیز و ثابت تمام می‌شود. */
  --e:clamp(0, calc(var(--p,0) / .8), 1);
  opacity:clamp(0, calc(var(--e) * 1.5), 1);
  transform:
    translateY(calc((1 - var(--e)) * .62em))
    scale(calc(.74 + var(--e) * .26))
    scaleY(calc(.90 + var(--e) * .10));
  transform-origin:50% 92%;
}
/* بلور روی کل عدد، نه روی تک‌تک سطرها — یک سطح رندر به‌جای چند تا */
.beat[data-anim][data-mo="emerge"] .num{filter:blur(calc((1 - var(--e)) * 22px))}
.beat[data-anim][data-mo="emerge"] .num .ln{filter:none}
.beat[data-mo="emerge"] .num .ln{opacity:1;transform:none}
.beat[data-mo="emerge"] .cap .ln{--stagger:.10; --dur:.38; --rise:12px; --soft:4px}
.beat[data-mo="emerge"] .cap{
  opacity:clamp(0, calc((var(--p,0) - .42) / .40), 1);
}

/* ── trail — سطر پشت سطر (فصل دریا) ────────────────────────
   هر سطر که می‌آید می‌ماند؛ بلوک کم‌کم کامل می‌شود، مثل مسیری که
   پشت سر جا می‌ماند. */
/* سطرها با فاصلهٔ واضح: هر سطر تا نزدیک تمام شدنِ قبلی شروع نمی‌شود،
   پس چشم واقعاً «یکی پس از دیگری» را می‌بیند. */
.beat[data-mo="trail"] .ln{--stagger:.165; --dur:.20; --rise:22px; --soft:6px}

/* ── flash — با نور رعد (دو فصل ابری) ──────────────────────
   زمان‌مبنا، نه اسکرول‌مبنا: با اسکرول آهسته، «جرقه» تبدیل می‌شد به
   یک روشن‌شدنِ کُند. یک‌بار می‌زند و تمام. */
.beat[data-mo="flash"] .ln,
.beat[data-mo="flash"] .fields{opacity:0;transform:none}
.beat[data-anim][data-mo="flash"] .ln{filter:none}
.beat[data-mo="flash"].lit .ln{
  animation:strike .62s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--g,0) * 430ms);
}
/* چیپ‌های صنعت با جرقهٔ دوم می‌آیند، آرام‌تر از متن */
.beat[data-mo="flash"].lit .fields{
  animation:chips .7s cubic-bezier(.16,1,.3,1) 500ms forwards;
}
@keyframes chips{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
@keyframes strike{
  0%   {opacity:0;   text-shadow:0 0 0 rgba(206,196,255,0)}
  9%   {opacity:1;   text-shadow:0 0 24px rgba(210,201,255,.92)}
  34%  {opacity:1;   text-shadow:0 0 12px rgba(210,201,255,.30)}
  100% {opacity:1;   text-shadow:0 1px 2px rgba(2,24,32,.70), 0 3px 16px rgba(2,24,32,.86)}
}
/* خودِ نور: از دل همان ابرها، نه یک فلاشِ سفیدِ تمام‌صفحه. رنگش از
   بنفشِ رعدِ همین فریم‌ها گرفته شده و هیچ‌وقت کدر نمی‌شود. */
/* content:none یعنی این جعبه تا لحظهٔ جرقه اصلاً ساخته نمی‌شود */
.beat[data-mo="flash"]::after{
  content:none;position:absolute;inset:-14% -8%;
  pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(62% 46% at 50% 44%,
    rgba(206,196,255,.52) 0%, rgba(150,140,225,.22) 38%, rgba(120,112,190,0) 72%);
}
.beat[data-mo="flash"].lit::after{content:"";animation:bolt 1.5s linear forwards}
@keyframes bolt{
  0%,100%{opacity:0}
  2%  {opacity:.70}
  5%  {opacity:.20}
  8%  {opacity:.52}
  13% {opacity:.05}
  18% {opacity:0}
  /* جرقهٔ دوم، دورتر و نرم‌تر — بقیهٔ متن با آن باز می‌شود */
  29% {opacity:.24}
  33% {opacity:.06}
  37% {opacity:.13}
  46% {opacity:0}
}

/* ── depth — از عمق جلو آمدن (اعداد کارنامه) ───────────────
   کوچک و مات از دور، بزرگ و تیز در جای خود. حرکت **قبل** از مکث
   تمام می‌شود: --p در ۲۲٪ اولِ سهمِ هر عدد به ۱ می‌رسد و بعد از آن
   عدد تا ته مکث کاملاً بی‌حرکت است. */
.beat[data-mo="depth"] .stat{
  --d:var(--p,0);
  transform:scale(calc(.82 + var(--d) * .18));
}
.beat[data-mo="depth"] .ln{--stagger:.06; --dur:.52; --rise:10px}
.beat[data-anim][data-mo="depth"] .ln{filter:none}
.beat[data-anim][data-mo="depth"] .num{filter:blur(calc((1 - var(--d)) * 11px))}

/* ── ساحل: دکمه‌ها یکی‌یکی می‌نشینند، بدون جهش ────────────── */
.beat[data-beat="nav"] .nav a{
  /* پلکانِ کندتر: با پنجرهٔ بازترِ ورود، هر دکمه حدود ۱۶۰ پیکسل
     اسکرول بعد از قبلی شروع می‌شود — به اندازه‌ای که دیده شود. */
  --lp:clamp(0, calc((var(--p,0) - var(--j,0) * .17) / .30), 1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 12px));
}
.beat[data-beat="nav"] .nav a:active{transform:translateY(0) scale(.97)}

/* ── glass ───────────────────────────────────────────────────
   Materialize, don't just fade: blur radius and scale arrive together
   with the beat, so the surface reads as a material forming rather
   than a rectangle turning opaque. */
.g1,.g2,.g3{border:1px solid var(--hair)}
.g1{
  background:var(--g1-bg);box-shadow:var(--g1-edge);
  -webkit-backdrop-filter:blur(var(--g1-blur)) saturate(130%);
  backdrop-filter:blur(var(--g1-blur)) saturate(130%);
}
.g2{
  background:var(--g2-bg);box-shadow:var(--g2-edge);
  -webkit-backdrop-filter:blur(calc(var(--o,1) * var(--g2-blur))) saturate(140%);
  backdrop-filter:blur(calc(var(--o,1) * var(--g2-blur))) saturate(140%);
  transform:scale(calc(.985 + var(--o,1) * .015));
}
.g3{
  background:var(--g3-bg);box-shadow:var(--g3-edge);
  -webkit-backdrop-filter:blur(var(--g3-blur)) saturate(150%);
  backdrop-filter:blur(var(--g3-blur)) saturate(150%);
}

/* ── hero ── */
.kicker{
  align-self:flex-start;
  font-size:clamp(12px,1.4vw,15px);font-weight:500;color:var(--ochre);
  padding:8px 16px;border-radius:var(--r-pill);
  margin-bottom:clamp(16px,2vw,24px);
}
.slogan{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,6.2vw,84px);
  line-height:1.25;                 /* Latin display 1.05 + the Persian 0.2 */
  margin:0;text-wrap:balance;max-width:16ch;
  text-shadow:0 2px 26px rgba(4,44,57,.55);
}
.hero-cta{
  pointer-events:auto;
  margin-top:clamp(24px,3vw,40px);
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ochre);color:var(--navy);
  font-family:var(--sans);font-size:clamp(15px,1.7vw,18px);font-weight:600;
  padding:16px 32px;border-radius:var(--r-md);text-decoration:none;
  /* solid, not glass — the primary action sits above the material layer */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 12px 34px -14px rgba(228,170,81,.75);
  transition:transform var(--d-micro) var(--ease-fluid),filter var(--d-micro) var(--ease-fluid);
}
.hero-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hero-cta:hover{filter:brightness(1.07)}}
.hero-cta small{font-size:12px;font-weight:400;opacity:.74;
  padding-inline-start:12px;border-inline-start:1px solid rgba(4,44,57,.3)}

/* ── پشتیبانِ محلیِ متن روایی ────────────────────────────────
   نه کارت، نه حتی یک لایهٔ جدا. چهار سایهٔ تودرتو زیر خودِ حروف
   همان هالهٔ نرم را می‌سازد، بدون اینکه هیچ‌جا لبهٔ مستطیل دیده شود
   و بدون یک pseudo تمام‌اندازه که در هر فریم رنگ‌آمیزی شود.

   (نسخهٔ قبل یک گرادیانِ شعاعی روی ::before بود؛ در پروفایل یک vsync
   کامل می‌گرفت و روی بعضی فریم‌ها هم مثل کارت خوانده می‌شد.) */
.say,.slogan{
  /* دو لایه، نه چهار. شعاع ۵۶ پیکسلی روی حروف درشت در هر رسمِ دوباره
     از نو رستر می‌شد؛ همین بخش قابل‌توجهی از هزینهٔ رنگ‌آمیزی بود. */
  text-shadow:
    0 1px 2px  rgba(2,24,32,.70),
    0 3px 16px rgba(2,24,32,.86);
}
@media (prefers-reduced-transparency:reduce){
  .say,.slogan{
    text-shadow:0 1px 2px rgba(2,24,32,.95), 0 0 14px rgba(2,24,32,1);
  }
}

/* ── copy through the journey ── */
.say{
  font-family:var(--display);font-weight:700;text-align:center;
  font-size:clamp(26px,4.4vw,58px);line-height:1.28;margin:0;
  max-width:19ch;text-wrap:balance;
  text-shadow:0 2px 26px rgba(4,44,57,.55);
}
.say.sm{font-size:clamp(22px,3.4vw,44px);max-width:23ch}

.prize .num{
  font-family:var(--display);font-weight:700;color:var(--ochre);
  font-size:clamp(38px,8.6vw,124px);line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 30px rgba(4,44,57,.6);
}
/* یک سطر می‌ماند تا وقتی جا دارد؛ balance فقط برای وقتی که مجبور
   شود بشکند، تا دو سطرِ هم‌طول بدهد نه یک یتیم. */
.prize .cap{font-size:clamp(15px,2.1vw,26px);font-weight:600;color:var(--ink-1);
  text-wrap:balance;max-width:34ch}

/* industry chips — smallest surface, so the lightest material */
.fields{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:clamp(24px,3vw,32px);max-width:660px;
}
.fields span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:clamp(11.5px,1.3vw,14px);font-weight:500;color:var(--ink-1);
  padding:8px 14px;border-radius:var(--r-pill);
}
/* حوزه‌ها حالا خودشان یک صحنه‌اند: بدون متن بالایشان، و یکی‌یکی می‌آیند */
.fields:first-child{margin-top:0}
.beat[data-mo="trail"] .fields span{
  --lp:clamp(0, calc((var(--p,0) - var(--i,0) * .07) / .3), 1);
  opacity:var(--lp);transform:translateY(calc((1 - var(--lp)) * 12px));
}
.say b,.slogan b{font-weight:inherit;color:var(--ochre)}
.stat-lead{margin:0 0 clamp(14px,2vh,22px);font-size:clamp(17px,1.7vw,26px);font-weight:500;line-height:1.7;
  color:var(--ink-1);text-shadow:0 1px 2px rgba(2,24,32,.70), 0 3px 16px rgba(2,24,32,.86);text-wrap:balance}
.fields svg{width:15px;height:15px;flex:none;stroke:var(--teal);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── صفحهٔ شیشه‌ای اعداد ──────────────────────────────────────
   materialize، نه fade: بلور و مقیاس با هم و همراه خودِ بیت می‌آیند،
   پس سطح مثل یک متریال شکل می‌گیرد نه مثل مستطیلی که مات می‌شود. */
/* جایزه دیگر کارت ندارد — عدد از دل آب بیرون می‌آید و کارت آن
   توهم را می‌شکست. فقط سایهٔ نرم زیر حروف. */
.prize{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.prize .num,.prize .cap{
  text-shadow:0 2px 4px rgba(2,24,32,.6), 0 4px 22px rgba(2,24,32,.86);
}

/* ── شیشه، فقط اینجا ─────────────────────────────────────────
   سطح خودش یک لایهٔ جداست تا بتواند *همراه با نشستن عدد* ظاهر شود،
   نه اینکه از اول یک مستطیل تیره آنجا باشد. --p همان پیشرفتِ ورودِ
   بیت است: وقتی عدد از عمق جلو می‌آید، شیشه هم شکل می‌گیرد. */
/* سطح روی خودِ عنصر است، نه یک لایهٔ جدا. «شکل گرفتن همراه با نشستن
   عدد» از راه *آلفا و شعاع بلور* می‌آید که هر دو به --p بسته‌اند —
   نه از راه opacity یک pseudo با backdrop-filter، که یک سطح رندر
   اضافه می‌ساخت و در پروفایل یک vsync کامل هزینه داشت. */
/* سطح با خودِ بیت محو می‌شود (opacity روی .beat)، پس لازم نیست آلفا و
   شعاع را هم جداگانه انیمیت کنیم — همان کار بود که گران تمام می‌شد. */
.stat{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:clamp(20px,2.6vw,34px) clamp(26px,3.4vw,46px);
  border-radius:clamp(20px,2.2vw,32px);
  border:1px solid var(--g4-rim);
  background-color:var(--g4-bg);
  background-image:var(--g4-sheen);
  box-shadow:var(--g4-edge);
  -webkit-backdrop-filter:blur(var(--g4-blur)) saturate(150%);
  backdrop-filter:blur(var(--g4-blur)) saturate(150%);
}
/* با پرکنندهٔ نازک‌تر، خواناییِ متن دیگر از سطح نمی‌آید — از خودِ متن
   می‌آید. سایهٔ نرم زیر حروف همان کاری را می‌کند که قبلاً ته‌رنگ
   می‌کرد، بدون اینکه شیشه را مات کند. */
.stat .num{text-shadow:0 1px 3px rgba(2,24,32,.78), 0 3px 18px rgba(2,24,32,.94)}
.stat .lab{text-shadow:0 1px 2px rgba(2,24,32,.8), 0 2px 12px rgba(2,24,32,.95)}
.stat .num{
  font-family:var(--display);font-weight:700;color:var(--white);
  font-size:clamp(52px,10.5vw,150px);line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 30px rgba(4,44,57,.6);
}
/* vibrancy: روی شیشه، خاکستریِ ملایم خوانده نمی‌شود — کنتراست و وزن
   کمی بالاتر. (tracking دست نمی‌خورد؛ فارسی با هر مقدارِ غیرصفر
   اتصال حروفش می‌شکند.) */
.stat .lab{font-size:clamp(14px,2vw,24px);font-weight:600;color:var(--ink-1);
  max-width:19ch;line-height:1.7;text-wrap:balance}
.stat.pending .num{
  color:var(--ink-3);border-bottom:3px dashed rgba(243,244,244,.26);
  padding:0 .32em .06em;font-size:clamp(38px,7vw,96px);
}

/* ── ساحل: پایانِ سفر ────────────────────────────────────────
   در فریم آخر قایق روی محور وسط است و پاروها تا x ۰٫۶۱ می‌رسند
   (اندازه‌گیری‌شده). سمت راستِ پاروها یک ستون آبِ کاملاً خالی است —
   دکمه‌ها همان‌جا، عمودی، می‌نشینند.

   گامِ عمودیِ ردیف‌ها عمداً نزدیک گامِ پاروهاست: چهار پاروزن با فاصلهٔ
   ۰٫۰۶۴ ارتفاع فریم، که در هر نسبتِ پهنِ رایج حدود ۷۰ پیکسل می‌شود —
   یعنی دکمهٔ ~۵۲ پیکسلی به‌علاوهٔ gap. پس چهار دکمه کنار چهار پارو
   می‌افتند بی‌آنکه لازم باشد جایشان را با JS حساب کنیم. */
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;pointer-events:auto}
.nav a{
  font-size:clamp(14px,1.6vw,17px);font-weight:500;
  color:var(--white);text-decoration:none;
  border-radius:var(--r-md);padding:16px 26px;
  transition:border-color var(--d-micro) var(--ease-fluid),
             background var(--d-micro) var(--ease-fluid);
}
.nav a:active{transform:scale(calc(.985 + var(--o,1) * .015)) scale(.97)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{border-color:rgba(228,170,81,.5);background:rgba(4,44,57,.6)}
}
.nav a.key{
  background:var(--ochre);border-color:transparent;color:var(--navy);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 12px 34px -16px rgba(228,170,81,.7);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media (hover:hover) and (pointer:fine){
  .nav a.key:hover{background:#EDB65E;border-color:transparent}
}

/* ── راهنمای اسکرول ──────────────────────────────────────────
   نه نوار پیشرفت، نه نام فصل — فقط یک نماد و یک کلمه، تا کسی که
   صفحه را باز می‌کند بداند باید اسکرول کند. با اولین حرکت محو
   می‌شود؛ opacity را JS از روی پیشرفت اسکرول می‌نویسد. */
.hint{
  position:absolute;bottom:clamp(22px,3.4vh,38px);left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--white);pointer-events:none;
  opacity:var(--hint,1);
  filter:drop-shadow(0 2px 14px rgba(2,24,32,.75));
}
.hint-mark{width:23px;height:35px;flex:none;overflow:visible}
.hint-chev{display:none}
.hint-dot{animation:hint-fall 1.7s var(--ease-fluid) infinite}
@keyframes hint-fall{
  0%   {transform:translateY(0);opacity:0}
  22%  {opacity:1}
  70%  {transform:translateY(13px);opacity:0}
  100% {transform:translateY(13px);opacity:0}
}
/* روی صفحهٔ لمسی «موس» بی‌معنی است — دو پیکان رو به پایین */
@media (pointer:coarse){
  .hint-shell,.hint-dot{display:none}
  .hint-chev{display:block;animation:hint-nudge 1.7s var(--ease-fluid) infinite}
}
@keyframes hint-nudge{
  0%,100%{transform:translateY(0);opacity:.55}
  45%    {transform:translateY(5px);opacity:1}
}
.hint-word{
  font-size:12.5px;font-weight:500;color:var(--ink-1);white-space:nowrap;
  text-shadow:0 1px 10px rgba(2,24,32,.75);
}
/* چرخهٔ آهسته و تکراری برای بعضی افراد آزاردهنده است */
@media (prefers-reduced-motion:reduce){
  .hint-dot,.hint-chev{animation:none;opacity:.9}
}

.loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-3);background:var(--navy);
  transition:opacity var(--d-enter) var(--ease-fluid);
}
.loading[hidden]{display:none}

/* ── dev overlay: the frame budget the animator needs ── */
.beats-map{
  position:absolute;top:14px;right:16px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;line-height:1.8;
  color:var(--ink-3);padding:10px 14px;border-radius:var(--r-md);
  direction:ltr;text-align:left;pointer-events:none;
}
.beats-map,.beats-map *{letter-spacing:.02em}
.beats-map b{color:var(--ochre);font-weight:500}
.beats-map .on{color:var(--white)}

/* ── پرتره: قایق از وسط کادر عبور می‌کند، بالا به پایین ──────
   اندازه‌گیری‌شده روی خود فریم‌ها: در فصل‌های اول قایق در نیمهٔ
   بالای کادر است (y ۰٫۱ تا ۰٫۵۶) و نوار پایین آزاد؛ از کارنامه به
   بعد قایق پایین می‌آید (تا y ۰٫۸۸) و این‌بار نوار بالا آزاد است.
   پس متن یک بار، دقیقاً سر فصلِ «کارنامه»، جای خود را عوض می‌کند. */
@media (max-aspect-ratio:7/5){
  .beat[data-beat="stats"],.beat[data-beat="nav"]{
    justify-content:flex-start;
    padding-top:clamp(56px,11vh,104px);
    padding-bottom:clamp(40px,8vh,72px);
  }
}

/* ── حالت سینمایی: تایپ برای یک ستون، نه برای کل عرض ──────────
   ستون حدود ۴۰٪ عرض است، پس اندازه‌ها کمی جمع‌تر می‌شوند و در عوض
   هر سطر طول خواناتری پیدا می‌کند (۱۲ تا ۲۰ حرف، نه ۳۰). */
@media (min-aspect-ratio:7/5){
  /* سقف‌ها سخاوتمندند چون روی صفحهٔ خیلی پهن ستون هم پهن می‌شود؛
     عرض واقعی را max-width بر حسب «حرف» می‌بندد، نه اندازهٔ قلم. */
  .slogan{font-size:clamp(30px,3.9vw,76px);max-width:12ch}
  /* balance نه pretty: سطرها هم‌طول می‌شوند و بلوک مربع می‌ماند.
     pretty فقط یتیمِ سطر آخر را درست می‌کند و وسطش را رها. */
  .say{font-size:clamp(24px,3.1vw,60px);max-width:16ch;text-wrap:balance}
  .say.sm{font-size:clamp(21px,2.5vw,46px);max-width:19ch}
  .prize .num{font-size:clamp(36px,5.8vw,116px)}
  .prize .cap{font-size:clamp(15px,1.8vw,28px)}
  .stat .num{font-size:clamp(44px,6.6vw,132px)}
  .stat.pending .num{font-size:clamp(34px,4.6vw,88px)}
  .stat .lab{font-size:clamp(14px,1.6vw,28px);max-width:17ch}
  .nav a{font-size:clamp(14px,1.2vw,19px)}
  .fields span{font-size:clamp(11.5px,1vw,16px)}
  .fields{justify-content:flex-start;max-width:100%}
  .nav{justify-content:flex-start;max-width:100%}
  .beat[data-d="right"] .kicker{align-self:flex-start}
  .beat[data-d="left"]  .kicker{align-self:flex-end}

  /* وسط‌چین: قاب کامل در اختیار است، پس سطرها بلندتر و بلوک
     مربع‌تر می‌شود — همان ترکیب‌بندی سینماییِ قبلی، و این‌بار
     عمدی، نه از سر ناچاری. */
  .beat[data-d="center"] .say,
  .beat[data-d="center-low"] .say{
    font-size:clamp(26px,3.7vw,70px);max-width:19ch;text-wrap:balance;
  }
  .beat[data-d="center"] .say.sm,
  .beat[data-d="center-low"] .say.sm{
    font-size:clamp(22px,2.9vw,52px);max-width:24ch;
  }
  .beat[data-d="center"] .fields,
  .beat[data-d="center-low"] .fields{justify-content:center;max-width:660px}
  .beat[data-d="center-high"] .stat .lab{max-width:22ch}
  .beat[data-d="center-low"] .prize .cap{max-width:24ch}
}

/* ── پرتره و صفحهٔ کوچک ───────────────────────────────────────
   برش cover دو طرف کادر را می‌برد، پس ستون کناری ممکن نیست: متن
   نوار پایین را می‌گیرد، زیر قایق. اندازه‌ها برای یک ستونِ کامل
   ولی باریک تنظیم شده‌اند. */
@media (max-width:720px){
  .beat{padding:0 22px clamp(92px,20vh,150px)}
  .slogan{font-size:clamp(30px,7.6vw,44px);max-width:14ch;text-align:center}
  .kicker{align-self:center;margin-bottom:14px}
  .say{font-size:clamp(23px,5.8vw,34px);max-width:17ch}
  .say.sm{font-size:clamp(20px,5vw,29px);max-width:20ch}
  .prize .num{font-size:clamp(40px,12vw,64px)}
  .stat .num{font-size:clamp(48px,15vw,88px)}
  .stat.pending .num{font-size:clamp(36px,10vw,62px)}
  .stat .lab{font-size:clamp(13.5px,3.8vw,17px);max-width:20ch}
  .fields{gap:6px;margin-top:16px}
  .fields span{padding:7px 11px}
  .hero-cta{margin-top:20px;padding:14px 26px}
  .nav a{padding:13px 18px}
  .beats-map{display:none}
}
/* ── همان حرکت‌ها روی موبایل، کوتاه‌تر و سبک‌تر ───────────────
   مسافت‌ها نصف، بلورها کمتر، ماسکِ «بیرون آمدن از آب» برداشته (یک
   سطح رندر کمتر)، و رعد نرم‌تر. پایداری و خوانایی مهم‌تر از
   بازتولید همهٔ جزئیات دسکتاپ است. */
@media (max-width:720px){
  .ln{--rise:10px; --soft:3px}
  .beat[data-mo="settle"] .ln{--rise:11px; --soft:3px; --dur:.40}
  .beat[data-mo="trail"] .ln{--stagger:.145; --dur:.24; --rise:13px; --soft:3.5px}

  .beat[data-mo="emerge"] .num{
    transform:
      translateY(calc((1 - var(--e)) * .40em))
      scale(calc(.82 + var(--e) * .18));
  }
  .beat[data-anim][data-mo="emerge"] .num{filter:blur(calc((1 - var(--e)) * 13px))}

  .beat[data-mo="depth"] .stat{transform:scale(calc(.90 + var(--d) * .10))}
  .beat[data-anim][data-mo="depth"] .num{filter:blur(calc((1 - var(--d)) * 6px))}

  .beat[data-mo="flash"].lit .ln{animation-duration:.5s; animation-delay:calc(var(--g,0) * 360ms)}
  .beat[data-mo="flash"].lit::after{animation-name:bolt-soft;animation-duration:1.2s}

  .hero-cta{--lp:clamp(0, calc((var(--p,0) - .30) / .40), 1)}
  .beat[data-mo="trail"] .ln{--stagger:.16; --dur:.19; --rise:14px; --soft:3.5px}
  .beat[data-beat="nav"] .nav a{--lp:clamp(0, calc((var(--p,0) - var(--j,0) * .15) / .28), 1)}
}
@keyframes bolt-soft{
  0%,100%{opacity:0}
  3%  {opacity:.52}
  9%  {opacity:.16}
  14% {opacity:.34}
  22% {opacity:0}
  32% {opacity:.16}
  44% {opacity:0}
}

/* صفحهٔ کوتاه: نوار پایین را بالا نیاور، فقط فشرده‌اش کن */
@media (max-height:620px) and (max-width:720px){
  .beat{padding-bottom:clamp(72px,14vh,104px)}
  .fields{gap:5px}
  .fields span{padding:6px 10px}
}

/* ── fallbacks: glass must never become an unreadable grey box ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .g1{background:rgba(4,44,57,.80)}
  .g2{background:rgba(4,44,57,.86);transform:none}
  .g3{background:rgba(4,44,57,.90)}
  .stat{background-color:rgba(4,44,57,.86);background-image:none}
}
@media (prefers-reduced-transparency:reduce){
  .g1{background:rgba(4,44,57,.88);-webkit-backdrop-filter:none;backdrop-filter:none}
  .g2{background:rgba(4,44,57,.92);-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  .g3{background:rgba(4,44,57,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .stat{background-color:rgba(4,44,57,.93);background-image:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
/* کنتراست بالا: سطح تقریباً مات با لبهٔ مشخص، نه شیشه */
@media (prefers-contrast:more){
  .stat{background-color:rgba(4,44,57,.96);background-image:none;
    border-color:rgba(243,244,244,.44);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ── کاهش حرکت: همه‌چیز همان‌جا که باید باشد، بدون هیچ حرکتی ── */
@media (prefers-reduced-motion:reduce){
  .ln{opacity:1;transform:none;filter:none}
  .beat[data-anim] .ln{filter:none}
  .beat[data-mo="flash"] .ln,
  .beat[data-mo="flash"] .fields{opacity:1}
  .beat[data-mo="flash"].lit .ln,
  .beat[data-mo="flash"].lit .fields{animation:none;transform:none}
  .beat[data-mo="flash"]::after,
  .beat[data-mo="flash"].lit::after{display:none;animation:none}
  .beat[data-mo="emerge"] .num{opacity:1;transform:none}
  .beat[data-anim][data-mo="emerge"] .num{filter:none}
  .beat[data-mo="emerge"] .cap{opacity:1}
  .beat[data-mo="depth"] .stat{transform:none}
  .beat[data-anim][data-mo="depth"] .num{filter:none}
  .beat[data-beat="nav"] .nav a,.hero-cta{opacity:1;transform:none}
  .g2,.stat{transform:none}
  .hero-cta,.nav a{transition-duration:1ms}
}

/* ── سطرهای دستیِ content.json روی صفحهٔ پهن نمی‌شکنند ────────
   هر Enter در پنل یک سطر طراحی‌شده است. روی دسکتاپ همان سطر می‌ماند؛
   روی گوشی اگر جا نشد، balance آن را هم‌طول می‌شکند. */
@media (min-aspect-ratio:7/5){
  .hero .beat .slogan,.hero .beat .say,.hero .beat .say.sm{max-width:none}
  .hero .beat .slogan .ln,.hero .beat .say .ln,.hero .prize .cap .ln{white-space:nowrap}
  .hero .beat .slogan{font-size:clamp(28px,3.25vw,64px)}
  /* حوزه‌ها وقتی تنها محتوای صحنه‌اند، کمی درشت‌تر */
  .hero .fields:first-child{max-width:560px}
  .hero .fields:first-child span{font-size:clamp(12.5px,1.05vw,17px);padding:10px 16px}
}


/* ───────── Minimal Shore Footer ───────── */

.gv-footer{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translate(-50%,12px);

  z-index:40;
  width:min(1680px,calc(100% - 100px));

  direction:rtl;
  font-family:'IRANSansX',Tahoma,sans-serif;
  color:rgba(4,44,57,.96);

  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .7s var(--ease-fluid),
    transform .7s var(--ease-fluid),
    visibility .7s;
}

.gv-footer.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}


/* ═══════════════════════════════════════
   DESKTOP
   سه گروه مستقل:
   لوگوها | شبکه اجتماعی | اطلاعات تماس
   ═══════════════════════════════════════ */

@media (min-width:1101px){

  .gv-footer{
    display:grid;
    grid-template-columns:max-content max-content max-content;
    justify-content:center;
    align-items:center;

    /* فاصله اصلی بین سه گروه */
    column-gap:clamp(90px,7vw,150px);
  }

  /* باعث می‌شود socials و contact
     مستقیم سه ستون footer شوند */
  .gv-footer-info{
    display:contents;
  }


  /* ── لوگوها ── */

  .gv-footer-logos{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:22px;
    white-space:nowrap;
  }

  .gv-footer-logos img{
    display:block;
    width:auto;
    height:auto;
    object-fit:contain;
  }

  /* لوگوی گلرنگ ونچرز */
  .gv-footer-logos img:first-child{
    max-width:185px;
    max-height:72px;
  }

  /* لوگوی جایزه B.svg */
  .gv-footer-logos img:last-child{
    max-width:145px;
    max-height:56px;
  }


  /* ── لینکدین / اینستاگرام ── */

  .gv-footer-socials{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;
    white-space:nowrap;

    font-size:13px;
    font-weight:700;
  }


  /* ── اطلاعات تماس ── */

  .gv-footer-contact{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;

    gap:28px;
    white-space:nowrap;

    font-size:12px;
    line-height:1.8;
    font-weight:600;
  }
}


/* لینک‌ها */

.gv-footer-socials a,
.gv-footer-contact a{
  color:inherit;
  text-decoration:none;
}

.gv-footer-socials span{
  opacity:.42;
}


/* نقطه ظریف بین تماس / ایمیل / آدرس */

.gv-footer-contact > div{
  position:relative;
}

.gv-footer-contact > div:not(:last-child)::after{
  content:"";
  position:absolute;

  left:-15px;
  top:50%;

  width:3px;
  height:3px;

  transform:translateY(-50%);
  border-radius:50%;

  background:rgba(4,44,57,.40);
}


/* کمی کمک به خوانایی روی ساحل روشن */

.gv-footer{
  filter:drop-shadow(0 1px 5px rgba(255,255,255,.42));
}


/* ═══════════════════════════════════════
   TABLET
   فعلاً همان رفتار ساده قبلی
   ═══════════════════════════════════════ */

@media (max-width:1100px){

  .gv-footer{
    bottom:22px;
    width:calc(100% - 36px);

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:18px;
  }

  .gv-footer-info{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:14px;
  }

  .gv-footer-logos{
    display:flex;
    flex-direction:row;
    align-items:center;

    gap:12px;
  }

  .gv-footer-logos img:first-child{
    max-width:120px;
    max-height:44px;
  }

  .gv-footer-logos img:last-child{
    max-width:95px;
    max-height:38px;
  }

  .gv-footer-socials{
    display:flex;
    align-items:center;

    gap:8px;
    white-space:nowrap;

    font-size:11px;
    font-weight:700;
  }

  .gv-footer-contact{
    display:flex;
    flex-direction:row;
    align-items:center;

    gap:12px;
    white-space:nowrap;

    font-size:10.5px;
    font-weight:600;
  }
}


/* ═══════════════════════════════════════
   MOBILE
   فعلاً همان ساختار قبلی
   ═══════════════════════════════════════ */

@media (max-width:720px){

  .gv-footer{
    bottom:14px;
    width:calc(100% - 24px);

    flex-direction:column;

    gap:8px;
  }

  .gv-footer-logos{
    justify-content:center;
    gap:10px;
  }

  .gv-footer-logos img:first-child{
    max-width:95px;
    max-height:34px;
  }

  .gv-footer-logos img:last-child{
    max-width:78px;
    max-height:32px;
  }

  .gv-footer-info{
    flex-direction:column;
    align-items:center;

    gap:6px;
  }

  .gv-footer-socials{
    justify-content:center;

    font-size:10.5px;
  }

  .gv-footer-contact{
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:2px;
    white-space:normal;

    text-align:center;

    font-size:9.5px;
    line-height:1.6;
  }

  .gv-footer-contact > div::after{
    display:none;
  }
}