@charset "UTF-8";
/* ============================================================================
   main.css — v8 · سبک «پنل دیتا»
   ----------------------------------------------------------------------------
   جهت طراحی: ابزار تحلیل، نه لندینگ‌پیج. فشرده، جدول‌محور، با مونواسپیس
   به‌عنوان شهروند درجه‌یک (نه لهجه). لبه‌های تیز، شبکه‌ی کاغذ مهندسی،
   و یک لهجه‌ی لایم پرکنتراست.
   ----------------------------------------------------------------------------
   موبایل‌محور: هر چیدمانی از تک‌ستون شروع می‌شود و رو به بالا باز می‌شود.
   نقاط شکست: 30rem(480) · 48rem(768) · 64rem(1024) · 80rem(1280)
   ========================================================================= */

@layer tokens, base, layout, components, game, motion, utils;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root{
    /* پایه — سردتر و ابزارگونه‌تر از نسخه قبل */
    --bg:#0A0C0B; --band:#0F1211; --surface:#141817; --surface-2:#1C211F;
    --line:#262C2A; --line-strong:#6E7A76;
    --text:#E9EEEB; --dim:#98A29D;

    /* لهجه: سایان پرکنتراست، کنش اصلی */
    --accent:#5FE3C0; --accent-ink:#04211B;
    /* لهجه دوم: نارنجی داغ، تأکید و هشدار */
    --hot:#FF6B2C;
    --red:#F0645A; --amber:#F5B93D; --blue:#5FA8F0;

    --grid:rgb(255 255 255 / .045);
    --grid-2:rgb(255 255 255 / .022);
    --glow:rgb(95 227 192 / .14);

    --tf:cubic-bezier(.2,.7,.25,1);
    /* لبه‌های تیز — امضای پنل دیتا */
    --r-sm:3px; --r-md:5px; --r-lg:7px;
    --shell:1180px;

    /* مقیاس تایپ سیال، موبایل‌محور */
    --t-2xs:clamp(.68rem,.66rem + .1vw,.72rem);
    --t-xs:clamp(.75rem,.73rem + .12vw,.8rem);
    --t-sm:clamp(.86rem,.84rem + .14vw,.93rem);
    --t-md:clamp(.97rem,.95rem + .18vw,1.05rem);
    --t-lg:clamp(1.05rem,1rem + .3vw,1.2rem);
    --t-h3:clamp(1.1rem,1rem + .5vw,1.32rem);
    --t-h2:clamp(1.5rem,1.2rem + 1.4vw,2rem);
    --t-h1:clamp(2rem,1.4rem + 3.2vw,3.2rem);

    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;

    color-scheme:dark;
  }
  [data-theme="light"]{
    --bg:#F4F4F1; --band:#EBEBE6; --surface:#FFFFFF; --surface-2:#F1F1EC;
    --line:#DEDED7; --line-strong:#7C837E;
    --text:#141816; --dim:#5A625C;
    --accent:#5FE3C0; --accent-ink:#0B2A24;
    --hot:#A8410F; --red:#B23A31; --amber:#8A5B08; --blue:#1F5FA8;
    --grid:rgb(0 0 0 / .05); --grid-2:rgb(0 0 0 / .025);
    --glow:rgb(7 105 90 / .13);
    color-scheme:light;
  }
  /* در تم روشن، لایم روی متن خوانا نیست؛ برای متن نسخه تیره‌اش را داریم */
  [data-theme="light"]{ --accent-text:#07695A; }
  :root{ --accent-text:var(--accent); }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
    scroll-padding-block-start:4.5rem}
  body{background:var(--bg);color:var(--text);
    font-family:Vazirmatn,system-ui,sans-serif;
    font-size:clamp(1rem,.98rem + .15vw,1.04rem);
    line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    /* بافت: کاغذ مهندسی. شبکه‌ی ریز روی شبکه‌ی درشت. */
    background-image:
      linear-gradient(var(--grid-2) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
    background-size:12px 12px}
  img,svg,canvas{display:block;max-inline-size:100%}
  img{block-size:auto}
  button,input,select,textarea{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  ul{list-style:none;padding:0}
  h1,h2,h3,h4{line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
  h1{font-size:var(--t-h1);font-weight:800}
  h2{font-size:var(--t-h2);font-weight:800}
  h3{font-size:var(--t-h3);font-weight:700}
  p{text-wrap:pretty}
  strong{color:var(--text);font-weight:700}
  hr{border:0;border-block-start:1px solid var(--line)}

  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  ::selection{background:var(--accent);color:var(--accent-ink)}
  ::-webkit-scrollbar{inline-size:9px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
  .shell{max-inline-size:var(--shell);margin-inline:auto;
    padding-inline:clamp(1rem,4vw,2rem)}
  .section{padding-block:clamp(2.75rem,7vw,5rem)}
  .band{background:var(--band)}
  .rule{border-block:1px solid var(--line)}

  /* --- شبکه‌ها: موبایل‌محور، با پله‌ی تبلت که قبلاً جا افتاده بود --- */
  .grid{display:grid;gap:var(--s5)}
  @media (min-width:48rem){
    .g-3{grid-template-columns:repeat(2,1fr)}
    .g-7-5,.g-5-7,.g-4-8{grid-template-columns:1fr 1fr;gap:var(--s5)}
  }
  @media (min-width:64rem){
    .g-7-5{grid-template-columns:7fr 5fr}
    .g-5-7{grid-template-columns:5fr 7fr}
    .g-4-8{grid-template-columns:4fr 8fr}
    .g-3{grid-template-columns:repeat(3,1fr)}
  }

  .stack > * + *{margin-block-start:var(--s4)}
  .row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
  .mt-2{margin-block-start:var(--s2)} .mt-3{margin-block-start:var(--s3)}
  .mt-4{margin-block-start:var(--s4)} .mt-5{margin-block-start:var(--s5)}
  .mt-6{margin-block-start:var(--s6)} .mt-7{margin-block-start:var(--s7)}
}

/* ------------------------------------------------------------ components -- */
@layer components {
  /* --- برچسب بخش: شماره‌دار، مثل ردیف یک جدول --- */
  .eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--t-2xs);
    letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
    direction:ltr;display:inline-flex;gap:.55rem;align-items:center}
  .eyebrow::before{content:"";inline-size:14px;block-size:2px;background:var(--hot)}

  .mono{font-family:"JetBrains Mono",ui-monospace,monospace;
    font-feature-settings:"tnum";direction:ltr;display:inline-block}
  .dim{color:var(--dim)} .accent{color:var(--hot)}
  .ok{color:var(--accent-text)}
  .t-sm{font-size:var(--t-sm)} .t-xs{font-size:var(--t-xs)}

  /* --- پنل: جای «کارت». لبه‌ی تیز، سربرگ اختیاری --- */
  .card{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:clamp(1rem,3.5vw,1.6rem);
    transition:border-color .3s var(--tf),transform .3s var(--tf)}
  .card--hover:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .card--live{border-color:var(--accent)}

  .chip{display:inline-flex;align-items:center;gap:.3rem;
    border:1px solid var(--line);border-radius:var(--r-sm);
    padding:.22rem .5rem;font-size:var(--t-2xs);color:var(--dim);
    background:var(--surface-2);font-family:"JetBrains Mono",monospace;
    letter-spacing:.02em}
  .chip--live{border-color:var(--accent);color:var(--accent-text)}

  /* --- دکمه‌ها: تیز، ضخیم، بدون گرد شدن زیاد --- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-weight:700;border-radius:var(--r-md);padding:.8rem 1.3rem;
    min-block-size:48px;font-size:var(--t-sm);
    transition:transform .16s var(--tf),background .2s,border-color .2s,
      color .2s,filter .2s}
  .btn:active{transform:translateY(1px)}
  .btn--primary{background:var(--accent);color:var(--accent-ink)}
  .btn--primary:hover{filter:brightness(1.06)}
  .btn--ghost{border:1px solid var(--line-strong)}
  .btn--ghost:hover{border-color:var(--accent);color:var(--accent-text)}
  .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
  .btn svg{inline-size:1rem;block-size:1rem;flex:none}
  .btn--wide{inline-size:100%}

  .social{display:inline-flex;align-items:center;gap:.5rem;min-block-size:48px;
    padding:.7rem 1rem;border-radius:var(--r-md);
    border:1px solid var(--line-strong);font-weight:600;font-size:var(--t-sm);
    transition:border-color .25s,color .25s,transform .25s var(--tf)}
  .social:hover{border-color:var(--accent);color:var(--accent-text);
    transform:translateY(-2px)}
  .social svg{inline-size:18px;block-size:18px;flex:none}

  /* --- فرم --- */
  .field{inline-size:100%;border-radius:var(--r-md);padding:.75rem .9rem;
    font-size:var(--t-sm);min-block-size:48px;background:var(--surface-2);
    border:1px solid var(--line-strong);transition:border-color .2s}
  .field:focus{border-color:var(--accent);outline:none}
  .field::placeholder{color:var(--dim);opacity:.8}
  textarea.field{min-block-size:auto;resize:vertical;line-height:1.8}
  .lbl{display:block;font-size:var(--t-xs);font-weight:700;
    margin-block-end:.45rem;letter-spacing:.01em}
  .err{margin-block-start:.45rem;font-size:var(--t-2xs);color:var(--red)}
  .fieldset:has(.field[aria-invalid="true"]) .lbl{color:var(--red)}
  .field[aria-invalid="true"]{border-color:var(--red)}
  .form-grid{display:grid;gap:var(--s4)}
  @media (min-width:48rem){
    .form-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}
    .col-2{grid-column:span 2}
  }

  /* --- سربرگ --- */
  .hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
    border-block-end:1px solid var(--line);backdrop-filter:blur(14px);
    background:color-mix(in srgb, var(--bg) 88%, transparent)}
  .hdr__in{block-size:56px;display:flex;align-items:center;gap:var(--s3)}
  @media (min-width:48rem){.hdr__in{block-size:64px;gap:var(--s4)}}
  .hdr__mark{inline-size:34px;block-size:34px;border-radius:var(--r-sm);
    border:1px solid var(--line);background:var(--surface-2);
    display:grid;place-items:center;font-weight:800;font-size:.9rem}
  .hdr__name{font-weight:700;font-size:var(--t-sm)}
  @media (max-width:22rem){.hdr__name{display:none}}
  .nav{display:none;margin-inline:auto;gap:.1rem;font-size:var(--t-xs)}
  .nav a{padding:.5rem .7rem;border-radius:var(--r-sm);color:var(--dim);
    font-family:"JetBrains Mono",monospace;letter-spacing:.02em;
    transition:color .2s,background .2s}
  .nav a:hover{color:var(--text);background:var(--surface-2)}
  .nav a[aria-current="true"]{color:var(--accent-text);background:var(--surface-2)}
  .hdr__end{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto}
  @media (min-width:64rem){
    .nav{display:flex}.hdr__burger{display:none}.hdr__end{margin-inline-start:0}
  }
  /* هدف لمسی ۴۴px — قبلاً ۴۰ بود */
  .icon-btn{inline-size:44px;block-size:44px;border-radius:var(--r-sm);
    border:1px solid var(--line);display:grid;place-items:center;
    color:var(--dim);transition:color .2s,border-color .2s}
  .icon-btn:hover{color:var(--text);border-color:var(--line-strong)}
  .menu{display:none;border-block-start:1px solid var(--line);background:var(--band)}
  .menu[data-open="true"]{display:block}
  .menu nav{display:grid;gap:.15rem;padding-block:.6rem}
  @media (min-width:30rem){.menu nav{grid-template-columns:1fr 1fr}}
  .menu a{padding:.85rem .75rem;border-radius:var(--r-sm);
    font-size:var(--t-sm);min-block-size:48px;display:flex;align-items:center}
  .menu a:hover{background:var(--surface-2)}

  #progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;
    z-index:50;transform:scaleX(0);transform-origin:right;
    background:linear-gradient(90deg,var(--hot),var(--accent))}

  .skip{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
    clip-path:inset(50%)}
  .skip:focus{position:fixed;inset-block-start:.6rem;inset-inline-end:.6rem;
    z-index:60;inline-size:auto;block-size:auto;clip-path:none;
    background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;
    border-radius:var(--r-sm)}

  /* --- ردیف آمار: امضای پنل دیتا --- */
  .stats{display:grid;gap:0;border:1px solid var(--line);
    border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
  @media (min-width:30rem){.stats{grid-template-columns:1fr 1fr}}
  @media (min-width:64rem){.stats{grid-template-columns:repeat(3,1fr)}}
  .stats__c{padding:.9rem 1rem;border-block-end:1px solid var(--line);
    display:flex;flex-direction:column;gap:.15rem}
  .stats__c:last-child{border-block-end:0}
  @media (min-width:30rem){
    .stats__c{border-inline-end:1px solid var(--line)}
    .stats__c:nth-child(2n){border-inline-end:0}
    .stats__c:nth-last-child(-n+2){border-block-end:0}
  }
  @media (min-width:64rem){
    .stats__c{border-block-end:0;border-inline-end:1px solid var(--line)}
    .stats__c:last-child{border-inline-end:0}
    .stats__c:nth-child(2n){border-inline-end:1px solid var(--line)}
  }
  .stats__n{font-family:"JetBrains Mono",monospace;font-size:1.25rem;
    font-weight:600;color:var(--accent-text);line-height:1.2}
  .stats__l{font-size:var(--t-2xs);color:var(--dim);letter-spacing:.02em}

  /* --- متن یادداشت --- */
  .prose{max-inline-size:36rem}
  .prose p{margin-block-start:1.3em;line-height:2;font-size:var(--t-md)}
  .prose p:first-child{margin-block-start:0}
  .prose .lead{font-size:var(--t-lg);line-height:1.9}

  /* --- یادداشت تاشو --- */
  .note{border-block-start:1px solid var(--line);padding-block:var(--s5)}
  .note__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
  .note__i{font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs);
    color:var(--hot);letter-spacing:.1em}
  .note__h{margin-block-start:.6rem;font-size:var(--t-h2)}
  .note__body{position:relative;overflow:hidden;
    transition:block-size .45s var(--tf)}
  /* حالت بسته: سه خط، با محو شدن انتها */
  .note__body[data-open="false"]{block-size:7.5em}
  .note__body[data-open="false"]::after{content:"";position:absolute;
    inset-inline:0;inset-block-end:0;block-size:4em;pointer-events:none;
    background:linear-gradient(to top,var(--band),transparent)}
  .note--onbg .note__body[data-open="false"]::after{
    background:linear-gradient(to top,var(--bg),transparent)}
  .note__more{margin-block-start:var(--s4);display:inline-flex;align-items:center;
    gap:.5rem;min-block-size:44px;padding:.5rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r-md);
    font-size:var(--t-sm);font-weight:700;transition:border-color .2s,color .2s}
  .note__more:hover{border-color:var(--accent);color:var(--accent-text)}
  .note__more svg{inline-size:1rem;block-size:1rem;transition:transform .3s var(--tf)}
  .note__more[aria-expanded="true"] svg{transform:rotate(180deg)}

  /* --- جدول خط زمانی: حالا واقعاً جدول است --- */
  .tl{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .tl__item{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;
    padding:.85rem 1rem;border-block-end:1px solid var(--line);
    transition:background .3s}
  .tl__item:last-child{border-block-end:0}
  .tl__item[data-lit="true"]{background:var(--surface)}
  .tl__when{font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs);
    color:var(--dim);padding-block-start:.3rem;
    min-inline-size:5.5rem;position:relative;padding-inline-start:.9rem}
  .tl__when::before{content:"";position:absolute;inset-inline-start:0;
    inset-block-start:.55rem;inline-size:6px;block-size:6px;
    border-radius:50%;background:var(--line-strong);transition:background .35s,box-shadow .35s}
  .tl__item[data-lit="true"] .tl__when::before{background:var(--accent);
    box-shadow:0 0 0 3px var(--glow)}
  .tl__what h3{font-size:var(--t-sm);font-weight:700}
  .tl__what p{font-size:var(--t-xs);color:var(--dim);margin-block-start:.2rem;line-height:1.7}

  /* --- آکاردئون --- */
  .acc{border-block-start:1px solid var(--line)}
  .acc > div{border-block-end:1px solid var(--line)}
  .acc__head{inline-size:100%;text-align:start;display:flex;gap:.8rem;
    align-items:center;padding-block:.95rem;min-block-size:48px;
    font-weight:700;font-size:var(--t-sm);transition:color .25s}
  .acc__head:hover{color:var(--accent-text)}
  .acc__head svg{inline-size:1.1rem;block-size:1.1rem;color:var(--dim);
    transition:transform .3s var(--tf);flex:none}
  .acc__head[aria-expanded="true"] svg{transform:rotate(180deg)}
  .acc__body{overflow:hidden;transition:block-size .3s var(--tf)}
  .acc__body > *{padding-block-end:1.1rem;color:var(--dim);font-size:var(--t-sm)}

  /* --- جمله خطاب به مخاطب هدف --- */
  .consult__who{margin-block-start:var(--s5);padding:.9rem 1rem;
    border-radius:var(--r-md);border-inline-start:3px solid var(--hot);
    background:var(--surface);font-size:var(--t-md);line-height:1.8;
    max-inline-size:44ch}

  /* --- نرخ: جدول، نه کارت --- */
  .price{border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--surface);overflow:hidden}
  .price__hd{padding:.7rem 1rem;border-block-end:1px solid var(--line);
    background:var(--surface-2)}
  .price__list{display:grid}
  .price__list li{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:.3rem .9rem;padding:.85rem 1rem;border-block-end:1px solid var(--line)}
  .price__list li:last-child{border-block-end:0}
  .price__hi{background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    border-inline-start:3px solid var(--accent)}
  .price__n{font-family:"JetBrains Mono",monospace;font-size:1.05rem;
    font-weight:600;color:var(--accent-text);min-inline-size:5rem;flex:none}
  .price__w{font-size:var(--t-sm);color:var(--dim);line-height:1.65}
  .price__hi .price__w{color:var(--text)}
  .price__note{padding:.9rem 1rem;font-size:var(--t-xs);color:var(--dim);
    line-height:1.85;border-block-start:1px solid var(--line);
    background:var(--surface-2)}
}

/* -------------------------------------------------------------------- game -- */
@layer game {
  .stage{position:relative;overflow:hidden;border-radius:var(--r-lg);
    border:1px solid var(--line);background:var(--surface)}
  .stage::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:24px 24px}
  .stage__in{position:relative;padding:clamp(.9rem,3.5vw,1.75rem)}

  /* ====== حالت تمام‌صفحه روی موبایل ====== */
  .stage[data-full="true"]{position:fixed;inset:0;z-index:60;
    border-radius:0;border:0;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);display:flex;flex-direction:column}
  .stage[data-full="true"] .stage__in{flex:1;display:flex;flex-direction:column;
    padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom));
    padding-block-start:calc(.9rem + env(safe-area-inset-top))}
  .stage[data-full="true"] .scene{flex:1;display:flex;flex-direction:column}
  .stage[data-full="true"] .choices{margin-block-start:auto;padding-block-start:var(--s5)}
  body:has(.stage[data-full="true"]){overflow:hidden}

  .stage__close{display:none;position:sticky;inset-block-start:0;
    margin-inline-start:auto;inline-size:44px;block-size:44px;
    border-radius:var(--r-sm);border:1px solid var(--line);
    align-items:center;justify-content:center;color:var(--dim);
    background:var(--surface);z-index:2}
  .stage[data-full="true"] .stage__close{display:flex}

  /* ====== نوار منابع: مثل هدر یک داشبورد ====== */
  .hud{display:grid;gap:.6rem;padding-block-end:.9rem;
    border-block-end:1px solid var(--line)}
  .hud__round{font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs);
    color:var(--dim);letter-spacing:.1em;order:-1}
  .meters{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .meter{display:grid;gap:.3rem;padding:.5rem .55rem;
    border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--surface-2);min-inline-size:0}
  .meter__top{display:flex;flex-direction:column;gap:.1rem;min-inline-size:0}
  .meter__top > span:first-child{font-size:var(--t-2xs);color:var(--dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meter__goal{font-style:normal;opacity:.7;display:block}
  .meter__val{font-family:"JetBrains Mono",monospace;font-weight:600;
    font-size:clamp(.85rem,.75rem + .5vw,1rem);color:var(--text);white-space:nowrap}
  .meter__bar{block-size:4px;border-radius:0;background:var(--bg);
    border:1px solid var(--line);overflow:hidden}
  .meter__fill{block-size:100%;inline-size:100%;background:var(--accent);
    transition:inline-size .7s var(--tf),background .4s}
  .meter[data-state="warn"] .meter__fill{background:var(--amber)}
  .meter[data-state="bad"]  .meter__fill{background:var(--red)}
  .meter[data-bump="up"]   .meter__val{animation:bumpUp .7s var(--tf)}
  .meter[data-bump="down"] .meter__val{animation:bumpDown .7s var(--tf)}
  @keyframes bumpUp{0%{transform:translateY(0)}35%{transform:translateY(-6px);color:var(--accent-text)}100%{transform:translateY(0)}}
  @keyframes bumpDown{0%{transform:translateY(0)}35%{transform:translateY(6px);color:var(--red)}100%{transform:translateY(0)}}
  @media (min-width:30rem){
    .hud{grid-template-columns:1fr auto;align-items:end;gap:.9rem}
    .hud__round{order:0}
    .meter__top{flex-direction:row;justify-content:space-between;align-items:baseline;gap:.5rem}
    .meter__goal{display:inline}
  }

  /* ====== صحنه ====== */
  .scene{margin-block-start:var(--s4);min-block-size:14rem}
  .scene__q{margin-block-start:.6rem;
    font-size:clamp(1.05rem,.95rem + .8vw,1.35rem);font-weight:700;
    line-height:1.55;max-inline-size:40rem}
  .scene__hint{margin-block-start:.45rem;font-size:var(--t-xs);color:var(--dim)}

  /* ====== گزینه‌ها: انگشت‌پسند، هزینه در ردیف جدا ====== */
  .choices{display:grid;gap:.6rem;margin-block-start:var(--s4)}
  .choice{display:grid;grid-template-columns:auto 1fr;gap:.7rem;
    text-align:start;padding:.85rem .9rem;min-block-size:56px;
    border-radius:var(--r-md);border:1px solid var(--line-strong);
    background:var(--surface-2);align-items:start;
    transition:border-color .22s,background .22s,transform .22s var(--tf)}
  .choice:hover:not([disabled]){border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
  .choice:active:not([disabled]){transform:scale(.99)}
  .choice__k{font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs);
    color:var(--dim);inline-size:1.4rem;block-size:1.4rem;
    display:grid;place-items:center;border:1px solid var(--line);
    border-radius:var(--r-sm);flex:none;margin-block-start:.1rem}
  .choice__body{display:grid;gap:.45rem;min-inline-size:0}
  .choice__t{font-size:var(--t-sm);line-height:1.6;font-weight:600}
  .choice[data-picked="true"]{border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
  .choice[disabled]{opacity:.42;cursor:default}
  .choice[data-picked="true"][disabled]{opacity:1}

  .costs{display:flex;flex-wrap:wrap;gap:.35rem}
  .tagc{font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs);
    border:1px solid var(--line);border-radius:var(--r-sm);
    padding:.1rem .4rem;color:var(--dim)}
  .tagc--cost{border-color:color-mix(in srgb,var(--hot) 45%,var(--line));
    color:var(--hot)}
  .tagc--warn{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));
    color:var(--amber)}

  /* ====== پیامد ====== */
  .verdict{margin-block-start:var(--s4);padding:.85rem 1rem;
    border-radius:var(--r-md);border-inline-start:3px solid var(--hot);
    background:var(--surface-2)}
  .verdict p{font-size:var(--t-sm);line-height:1.85;color:var(--dim)}
  .verdict__delta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;
    margin-block-start:.55rem;padding-block-start:.55rem;
    border-block-start:1px solid var(--line);
    font-family:"JetBrains Mono",monospace;font-size:var(--t-2xs)}
  .verdict__delta .up{color:var(--accent-text)}
  .verdict__delta .down{color:var(--red)}
  .verdict__next{margin-block-start:var(--s4);inline-size:100%}
  @media (min-width:30rem){.verdict__next{inline-size:auto}}

  /* ====== شروع ====== */
  .start{text-align:center;padding-block:var(--s4);max-inline-size:36rem;
    margin-inline:auto}
  .start__title{margin-block-start:var(--s3);font-size:var(--t-h2)}
  .start__lead{margin-block-start:var(--s3);color:var(--dim);
    font-size:var(--t-sm);line-height:1.95}
  .start__go{margin-block-start:var(--s5);inline-size:100%}
  @media (min-width:30rem){.start__go{inline-size:auto;min-inline-size:14rem}}
  .start__kbd{margin-block-start:var(--s4);font-size:var(--t-2xs);color:var(--dim)}
  @media (max-width:30rem){.start__kbd{display:none}}
  kbd{font-family:"JetBrains Mono",monospace;font-size:.66rem;
    border:1px solid var(--line-strong);border-radius:2px;
    padding:.05rem .3rem;background:var(--surface-2)}

  /* ====== نتیجه ====== */
  .result{text-align:center;padding-block:var(--s3)}
  .result__badge{inline-size:58px;block-size:58px;border-radius:var(--r-md);
    margin-inline:auto;display:grid;place-items:center;font-size:1.6rem;
    background:color-mix(in srgb,var(--accent) 16%,var(--surface));
    border:1px solid var(--accent);animation:pop .5s var(--tf) both}
  .result[data-tone="warn"] .result__badge{
    background:color-mix(in srgb,var(--amber) 14%,var(--surface));border-color:var(--amber)}
  .result[data-tone="bad"] .result__badge{
    background:color-mix(in srgb,var(--red) 14%,var(--surface));border-color:var(--red)}
  @keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
  .result__title{margin-block-start:var(--s4);font-size:var(--t-h3);font-weight:800}
  .result__text{margin-block-start:var(--s3);color:var(--dim);font-size:var(--t-sm);
    max-inline-size:34rem;margin-inline:auto;line-height:1.95}
  .result__stats{display:grid;grid-template-columns:repeat(3,1fr);
    margin-block-start:var(--s5);border:1px solid var(--line);
    border-radius:var(--r-md);overflow:hidden}
  .result__stats div{display:grid;gap:.1rem;padding:.7rem .4rem;
    border-inline-end:1px solid var(--line)}
  .result__stats div:last-child{border-inline-end:0}
  .result__stats span{font-family:"JetBrains Mono",monospace;
    font-size:clamp(.9rem,.8rem + .5vw,1.1rem);font-weight:600;color:var(--text)}
  .result__stats small{font-size:var(--t-2xs);color:var(--dim)}
  .result__note{margin-block-start:var(--s4);font-size:var(--t-sm);
    color:var(--accent-text)}
  .result__late{margin-block-start:var(--s4);padding:.8rem .95rem;
    border-radius:var(--r-md);
    border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line));
    background:color-mix(in srgb,var(--amber) 7%,var(--surface));
    font-size:var(--t-xs);color:var(--dim);line-height:1.85;
    max-inline-size:38rem;margin-inline:auto;text-align:start}
  .result__lesson{margin-block-start:var(--s4);font-size:var(--t-md);
    font-weight:700;max-inline-size:32rem;margin-inline:auto;line-height:1.7}
  .result__row{margin-block-start:var(--s5);display:grid;gap:.6rem}
  @media (min-width:30rem){
    .result__row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
  }
}

/* ------------------------------------------------------------------ motion -- */
@layer motion {
  .hero{position:relative;overflow:hidden;
    padding-block:clamp(5rem,14vw,8rem) clamp(2.5rem,6vw,4rem)}
  .hero__grid{position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(120% 90% at 80% 0%,#000 5%,transparent 62%);
    -webkit-mask-image:radial-gradient(120% 90% at 80% 0%,#000 5%,transparent 62%)}
  .hero__glow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,70%) var(--my,10%),
      var(--glow),transparent 62%)}
  /* خط اسکن آرام — بافت، نه تزئین صرف */
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent 0 3px,
      rgb(0 0 0 / .05) 3px 4px);opacity:.5;mix-blend-mode:overlay}

  .hero__line{margin-block-start:var(--s5);
    font-size:clamp(1.1rem,.95rem + 1vw,1.55rem);line-height:1.65;
    max-inline-size:24ch;font-weight:700}
  .hero__line strong{color:var(--accent-text)}

  .mask{display:block;overflow:hidden}
  .mask > span{display:block;transform:translateY(105%);opacity:0;
    transition:transform .8s var(--tf),opacity .5s var(--tf)}
  .mask[data-in="true"] > span{transform:none;opacity:1}

  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--tf),transform .55s var(--tf)}
  .reveal[data-in="true"]{opacity:1;transform:none}
  .stagger > *{opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--tf),transform .5s var(--tf)}
  .stagger[data-in="true"] > *{opacity:1;transform:none}
  .stagger[data-in="true"] > *:nth-child(1){transition-delay:.03s}
  .stagger[data-in="true"] > *:nth-child(2){transition-delay:.1s}
  .stagger[data-in="true"] > *:nth-child(3){transition-delay:.17s}
  .stagger[data-in="true"] > *:nth-child(4){transition-delay:.24s}

  /* خطِ کشیده‌شونده زیر تیتر بخش‌ها — نشانه‌ی ورود به دید */
  .h-rule{position:relative;padding-block-end:.7rem}
  .h-rule::after{content:"";position:absolute;inset-inline-start:0;
    inset-block-end:0;block-size:2px;inline-size:0;background:var(--hot);
    transition:inline-size .7s var(--tf) .1s}
  .h-rule[data-in="true"]::after{inline-size:2.5rem}

  .tilt{transition:transform .5s var(--tf)}
  .float{animation:float 7s ease-in-out infinite}
  .float:nth-child(2){animation-delay:-2.3s}
  .float:nth-child(3){animation-delay:-4.6s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  .pulse-dot{inline-size:7px;block-size:7px;border-radius:50%;
    background:var(--accent-ink);box-shadow:0 0 0 0 rgb(4 33 27 / .5);
    animation:pulse 2.2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgb(4 33 27 / .45)}
    70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal,.stagger > *{opacity:1;transform:none;transition:none}
    .mask > span{transform:none;opacity:1;transition:none}
    .h-rule::after{inline-size:2.5rem;transition:none}
    .float,.pulse-dot{animation:none}
    .hero__glow,.hero::after{display:none}
    .card--hover:hover,.social:hover,.choice:hover{transform:none}
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important}
  }
}

/* ------------------------------------------------------------------- utils -- */
@layer utils {
  .sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .hidden{display:none !important}
  .center{text-align:center}
  .ratio-45{aspect-ratio:4/5;object-fit:cover}
  .ratio-916{aspect-ratio:9/16;object-fit:cover}
  .ratio-85{aspect-ratio:8/5;object-fit:cover}
  .rounded{border-radius:var(--r-lg);border:1px solid var(--line)}
  .rounded-sm{border-radius:var(--r-md);border:1px solid var(--line)}
  .maxw-46{max-inline-size:46ch} .maxw-38{max-inline-size:38ch}

  /* نوار اسکرین‌شات: روی موبایل اسکرول افقی به‌جای سه ستون ۹۰پیکسلی */
  .shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(38%,1fr);
    gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-block-end:.4rem;scrollbar-width:thin}
  .shots > *{scroll-snap-align:start}
  @media (min-width:30rem){
    .shots{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
      overflow:visible}
  }
  /* دو ستونه‌ی اقتصاد — روی موبایل تک‌ستون */
  .duo{display:grid;gap:.9rem}
  @media (min-width:30rem){.duo{grid-template-columns:1fr 1fr}}
}