/* =========================================================
   جهانی — سیستم طراحی (فقط تم تیره)
   همه مقادیر بصری از :root خوانده می‌شوند. inline style ممنوع.
   ========================================================= */
:root{
  /* رنگ */
  --c-bg:#0A0F12;
  --c-surface:#12181C;
  --c-surface-2:#182025;
  --c-surface-3:#212A30;
  --c-border:#1F282D;
  --c-border-strong:#2C373D;
  --c-border-hover:#3A464D;
  --c-text:#F5F5F7;
  --c-text-2:#9AA3A8;
  --c-text-3:#85929B;
  --c-accent:#3FC8D6;
  --c-accent-hover:#2AA9B8;
  --c-accent-soft:rgba(63,200,214,.12);
  --c-on-accent:#0A0F12;
  --c-ok:#7DD3A8;   --c-ok-soft:rgba(125,211,168,.13);
  --c-warn:#E8C27A; --c-warn-soft:rgba(232,194,122,.13);
  --c-bad:#EE8F86;  --c-bad-soft:rgba(238,143,134,.13);
  --c-scrim:rgba(4,7,9,.66);
  --c-glass:rgba(10,15,18,.86);
  --c-device:#05080A;
  --c-device-edge:#2A3439;

  /* تایپ */
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fs-display:clamp(2.75rem,1.5rem + 5.6vw,6rem);
  --fs-h1:clamp(2.125rem,1.4rem + 3.2vw,3.75rem);
  --fs-h2:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);
  --fs-h3:1.375rem;
  --fs-lead:clamp(1.125rem,1rem + .6vw,1.5rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:800;
  --lh-tight:1.25; --lh-body:1.75;

  /* فاصله (پایه ۴) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:56px; --s-10:80px; --s-11:120px; --s-12:160px;

  /* شعاع */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --r-device:52px; --r-mark:12px;

  /* سایه */
  --shadow-1:0 8px 24px rgba(0,0,0,.28);
  --shadow-2:0 40px 90px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
  --shadow-focus:0 0 0 3px rgba(63,200,214,.35);

  /* حرکت — فقط transform و opacity */
  --dur-1:120ms;  /* فشار */
  --dur-2:220ms;  /* hover و تغییر حالت */
  --dur-3:420ms;  /* انتقال صفحه، کشو */
  --dur-4:800ms;  /* ظاهر شدن با اسکرول */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --rise:24px;

  /* چیدمان */
  --tap:44px;
  --container:1180px;
  --gutter:clamp(20px,5vw,48px);
  --header-h:64px;
  --tabbar-h:68px;
  --sidebar-w:272px;
}

/* ---------- پایه ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s-4))}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);direction:rtl;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--c-accent);text-decoration:none}
a:hover{color:var(--c-accent-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
svg{display:block}
:focus{outline:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
::selection{background:var(--c-accent);color:var(--c-on-accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:var(--s-4);top:var(--s-3);z-index:100;padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-accent);font-weight:var(--fw-bold);transform:translateY(-200%)}
.skip-link:focus-visible{transform:none;color:var(--c-on-accent)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--c-text-2)}
.ltr{direction:ltr;unicode-bidi:isolate}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:20px;height:20px}
.icon--fill{fill:currentColor;stroke:none}

/* ---------- تایپوگرافی ---------- */
.t-display{font-size:var(--fs-display);font-weight:var(--fw-black);line-height:1.15;text-wrap:balance}
.t-h1{font-size:var(--fs-h1);font-weight:var(--fw-black);line-height:var(--lh-tight);text-wrap:balance}
.t-h2{font-size:var(--fs-h2);font-weight:var(--fw-black);line-height:var(--lh-tight);text-wrap:balance}
.t-h3{font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:1.4}
.t-lead{font-size:var(--fs-lead);color:var(--c-text-2);text-wrap:pretty}
.t-body{font-size:var(--fs-body)}
.t-sm{font-size:var(--fs-sm)}
.t-xs{font-size:var(--fs-xs);color:var(--c-text-2)}
.t-num{font-weight:var(--fw-black);color:var(--c-accent)}
.eyebrow{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-2)}

/* ---------- لوگو ---------- */
.logo{display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--tap);color:var(--c-text)}
.logo:hover{color:var(--c-text)}
.logo__mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-mark);background:var(--c-surface);border:1px solid var(--c-border-strong)}
.logo__mark svg{width:24px;height:24px;fill:none;stroke:var(--c-accent);stroke-width:2.2;stroke-linecap:round}
.logo__word{font-size:1.25rem;font-weight:var(--fw-bold);line-height:1}
.logo--sm .logo__mark{width:34px;height:34px;border-radius:10px}
.logo--sm .logo__mark svg{width:20px;height:20px}
.logo--lg{gap:var(--s-5)}
.logo--lg .logo__mark{width:96px;height:96px;border-radius:28px}
.logo--lg .logo__mark svg{width:56px;height:56px;stroke-width:2}
.logo--lg .logo__word{font-size:3rem}

/* ---------- دکمه ---------- */
.btn{--btn-bg:transparent;--btn-fg:var(--c-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-6);border:1px solid transparent;border-radius:var(--r-pill);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1;white-space:nowrap;user-select:none;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.btn:hover{color:var(--btn-fg);transform:translateY(-1px)}
.btn:active{transform:scale(.97);transition-duration:var(--dur-1)}
.btn--primary{--btn-bg:var(--c-accent);--btn-fg:var(--c-on-accent)}
.btn--primary:hover{--btn-bg:var(--c-accent-hover)}
.btn--secondary{--btn-bg:var(--c-surface-2);border-color:var(--c-border-strong)}
.btn--secondary:hover{border-color:var(--c-border-hover)}
.btn--ghost:hover{--btn-bg:var(--c-surface-2)}
.btn--sm{min-height:var(--tap);padding:0 var(--s-4);font-size:var(--fs-sm)}
.btn--lg{min-height:56px;padding:0 var(--s-7);font-size:1.125rem}
.btn--block{width:100%}
.btn--icon{width:var(--tap);min-height:var(--tap);padding:0;flex:none}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}
.link{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:var(--fw-medium)}

/* ---------- کارت ---------- */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5)}
.card--interactive{transition:transform var(--dur-2) var(--ease-out)}
.card--interactive:hover{transform:translateY(-2px)}
.card--interactive:active{transform:scale(.99)}
.card--accent{border-color:var(--c-accent)}
.card--list{padding-block:var(--s-1)}
@media (min-width:600px){.card{padding:var(--s-6)}.card--list{padding-block:var(--s-2)}}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-text-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;white-space:nowrap}
.badge--ok{background:var(--c-ok-soft);color:var(--c-ok)}
.badge--warn{background:var(--c-warn-soft);color:var(--c-warn)}
.badge--bad{background:var(--c-bad-soft);color:var(--c-bad)}
.badge--ok::before,.badge--warn::before,.badge--bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--accent{background:var(--c-accent-soft);color:var(--c-accent)}
.badge--pro{min-height:22px;padding:0 8px;background:transparent;border:1px solid var(--c-border-strong);color:var(--c-text-2);font-size:11px}

/* ---------- فرم ---------- */
.field{display:grid;gap:var(--s-2)}
.field__label{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.field__hint{font-size:var(--fs-xs);color:var(--c-text-2)}
.field__error{font-size:var(--fs-xs);color:var(--c-bad)}
.input{width:100%;min-height:52px;padding:0 var(--s-4);background:var(--c-bg);border:1px solid var(--c-border-strong);border-radius:var(--r-md);color:var(--c-text);font-size:var(--fs-body)}
.input::placeholder{color:var(--c-text-3)}
.input:hover{border-color:var(--c-border-hover)}
.input:focus,.input:focus-visible{outline:none;border-color:var(--c-accent);box-shadow:var(--shadow-focus)}
.input--ltr{direction:ltr;text-align:right}
.input--error,.input--error:hover{border-color:var(--c-bad)}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;inset-inline-start:14px;top:50%;width:20px;height:20px;color:var(--c-text-2);pointer-events:none;transform:translateY(-50%)}
.input-wrap .input{padding-inline-start:46px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);font-size:var(--fs-sm);color:var(--c-text-2)}

.seg{display:flex;gap:4px;padding:4px;max-width:100%;overflow-x:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-pill);scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg__btn{display:inline-flex;align-items:center;justify-content:center;flex:1 0 auto;min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-pill);color:var(--c-text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap;transition:transform var(--dur-1) var(--ease-out)}
.seg__btn:hover{color:var(--c-text)}
.seg__btn:active{transform:scale(.96)}
.seg__btn.is-active{background:var(--c-surface-3);color:var(--c-text);font-weight:var(--fw-bold)}

/* وضعیت حضور (سه حالته) */
.att{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.att__btn{min-height:var(--tap);padding:0 var(--s-2);border-radius:var(--r-md);background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-2);font-size:var(--fs-sm);font-weight:var(--fw-bold);transition:transform var(--dur-1) var(--ease-out)}
.att__btn:hover{color:var(--c-text)}
.att__btn:active{transform:scale(.95)}
.att__btn--ok.is-on{background:var(--c-ok-soft);border-color:var(--c-ok);color:var(--c-ok)}
.att__btn--warn.is-on{background:var(--c-warn-soft);border-color:var(--c-warn);color:var(--c-warn)}
.att__btn--bad.is-on{background:var(--c-bad-soft);border-color:var(--c-bad);color:var(--c-bad)}

/* ---------- ناوبری ---------- */
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:6px var(--s-2) calc(6px + env(safe-area-inset-bottom));background:var(--c-glass);border-top:1px solid var(--c-border);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px)}
.tabbar--static{position:relative;inset:auto;z-index:auto}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:var(--r-md);color:var(--c-text-2);font-size:12px;font-weight:var(--fw-medium);line-height:1.2;transition:transform var(--dur-1) var(--ease-out)}
.tab:hover{color:var(--c-text)}
.tab:active{transform:scale(.92)}
.tab.is-active{color:var(--c-accent);font-weight:var(--fw-bold)}
.tab .icon{transition:transform var(--dur-2) var(--ease-out)}
.tab.is-active .icon{transform:translateY(-1px) scale(1.06)}

.sidebar{display:none}
.nav{display:grid;gap:2px}
.nav__label{padding:var(--s-4) var(--s-3) var(--s-2);font-size:var(--fs-xs);color:var(--c-text-3)}
.nav-item{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-md);color:var(--c-text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:start;transition:transform var(--dur-1) var(--ease-out)}
.nav-item:hover{background:var(--c-surface);color:var(--c-text)}
.nav-item:active{transform:scale(.98)}
.nav-item.is-active{background:var(--c-surface-2);color:var(--c-text);font-weight:var(--fw-bold)}
.nav-item.is-active .icon{color:var(--c-accent)}
.nav-item .badge{margin-inline-start:auto}
.nav-item--lg{min-height:56px;font-size:var(--fs-body)}

.scrim{position:fixed;inset:0;z-index:50;background:var(--c-scrim);animation:fade-in var(--dur-3) var(--ease-out) both}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:51;max-height:86vh;overflow-y:auto;padding:var(--s-3) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));background:var(--c-surface);border-top:1px solid var(--c-border);border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sheet-up var(--dur-3) var(--ease-out) both}
.sheet__grab{width:40px;height:5px;margin:0 auto var(--s-4);border-radius:3px;background:var(--c-border-strong)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-2) var(--s-3)}
.sheet__title{font-size:var(--fs-h3);font-weight:var(--fw-black)}
.sheet__sep{height:1px;margin:var(--s-2) var(--s-3);background:var(--c-border)}

/* ---------- حرکت ---------- */
@keyframes fade-in{from{opacity:0}}
@keyframes rise-in{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes view-in{from{opacity:0;transform:translateY(12px)}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes pulse-ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@keyframes bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.intro{animation:rise-in var(--dur-4) var(--ease-out) both}
.intro--d1{animation-delay:80ms}
.intro--d2{animation-delay:170ms}
.intro--d3{animation-delay:280ms}
.intro--d4{animation-delay:520ms}
.intro--d5{animation-delay:680ms}
.intro--d6{animation-delay:840ms}
.js-motion .reveal{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.js-motion .reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:90ms}
.reveal--d2{transition-delay:180ms}
.reveal--d3{transition-delay:270ms}
.view{animation:view-in var(--dur-3) var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-4:1ms;--rise:0px}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .js-motion .reveal{opacity:1;transform:none}
  .hero__phone,.float{transform:none!important}
}

/* =========================================================
   لندینگ
   ========================================================= */
.site-header{position:sticky;top:0;z-index:30;background:var(--c-glass);border-bottom:1px solid var(--c-border);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--header-h)}
.site-nav{display:flex;align-items:center;gap:var(--s-1)}
.site-nav__link{display:none;align-items:center;min-height:var(--tap);padding:0 var(--s-3);color:var(--c-text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.site-nav__link:hover{color:var(--c-text)}
@media (min-width:600px){.site-nav{gap:var(--s-2)}.site-nav__link{display:inline-flex}}

.hero{padding-top:clamp(56px,10vw,120px);overflow:hidden}
.hero__copy{display:grid;justify-items:center;gap:var(--s-5);text-align:center}
.hero__title{font-size:var(--fs-display);font-weight:var(--fw-black);line-height:1.15;text-wrap:balance}
.hero__sub{max-width:30ch;font-size:var(--fs-lead);color:var(--c-text-2)}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-3)}
.hero__sample{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:var(--s-2);font-size:var(--fs-xs);color:var(--c-text-2);text-align:center}
.hero__stage{position:relative;display:flex;justify-content:center;margin-top:clamp(56px,8vw,104px);padding-bottom:clamp(64px,8vw,112px)}
.hero__phone{position:relative;z-index:1;transform:translateY(calc(var(--hero-p,0) * -36px))}

.phone{position:relative;width:min(320px,82vw);aspect-ratio:9/19.5;padding:11px;border-radius:var(--r-device);background:var(--c-device);border:1px solid var(--c-device-edge);box-shadow:var(--shadow-2)}
.phone__screen{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:calc(var(--r-device) - 11px);background:var(--c-bg);container-type:inline-size}
@media (min-width:960px){.phone{width:360px}}

.float{position:absolute;z-index:2;display:none;transform:translateY(calc(var(--hero-p,0) * var(--float-shift,-60px)))}
.float--a{top:9%;inset-inline-start:calc(50% + 200px);--float-shift:-110px}
.float--b{top:40%;inset-inline-end:calc(50% + 205px);--float-shift:-70px}
.float--c{top:68%;inset-inline-start:calc(50% + 230px);--float-shift:-150px}
@media (min-width:1080px){.float{display:block}}
.float-card{width:264px;padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-2);background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.float-card__title{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-2)}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:36px;font-size:var(--fs-sm)}
.mini-row + .mini-row{border-top:1px solid var(--c-border)}
.mini-amount{font-size:1.5rem;font-weight:var(--fw-black);line-height:1.3}
.mini-amount__unit{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-2)}

/* موکاپ داخل گوشی — واحدها نسبت به عرض صفحه گوشی */
.mock{flex:1;min-height:0;display:flex;flex-direction:column;gap:.7em;padding:0 1.15em 1em;overflow:hidden;font-size:4.1cqi;line-height:1.55}
.mock__status{display:flex;align-items:center;justify-content:space-between;flex:none;height:3.3em;padding:0 .7em;font-size:.95em;font-weight:var(--fw-bold);direction:ltr}
.mock__island{width:7.4em;height:2.1em;border-radius:2em;background:#000}
.mock__batt{width:1.9em;height:.95em;border:1.5px solid var(--c-text);border-radius:.3em}
.mock__head{display:flex;align-items:flex-end;justify-content:space-between;gap:.5em}
.mock__date{font-size:.82em;color:var(--c-text-2)}
.mock__title{font-size:2.2em;font-weight:var(--fw-black);line-height:1.2}
.mock__me{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--c-surface-2);font-size:.85em;font-weight:var(--fw-bold)}
.mock__card{padding:.95em 1em;background:var(--c-surface);border:1px solid var(--c-border);border-radius:1.2em}
.mock__label{font-size:.78em;color:var(--c-text-2)}
.mock__time{margin-top:.1em;font-size:2.5em;font-weight:var(--fw-black);line-height:1.15;color:var(--c-accent)}
.mock__group{font-weight:var(--fw-bold)}
.mock__meta{font-size:.82em;color:var(--c-text-2)}
.mock__btn{display:flex;align-items:center;justify-content:center;height:2.8em;margin-top:.8em;border-radius:2em;background:var(--c-accent);color:var(--c-on-accent);font-size:.9em;font-weight:var(--fw-bold)}
.mock__h{display:flex;justify-content:space-between;align-items:baseline;margin-top:.2em;font-size:1.05em;font-weight:var(--fw-black)}
.mock__h span{font-size:.78em;font-weight:var(--fw-medium);color:var(--c-text-2)}
.mock__row{display:flex;align-items:center;justify-content:space-between;gap:.6em;min-height:2.7em}
.mock__row + .mock__row{border-top:1px solid var(--c-border)}
.mock__who{display:flex;align-items:center;gap:.6em;min-width:0}
.mock__av{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--c-surface-2);color:var(--c-text-2);font-size:.8em;font-weight:var(--fw-bold)}
.mock__name{font-size:.9em;font-weight:var(--fw-bold);white-space:nowrap}
.mock__t{font-weight:var(--fw-black)}
.mock__pill{padding:.25em .7em;border-radius:2em;font-size:.72em;font-weight:var(--fw-bold);white-space:nowrap}
.mock__pill--bad{background:var(--c-bad-soft);color:var(--c-bad)}
.mock__pill--warn{background:var(--c-warn-soft);color:var(--c-warn)}
.mock__pill--ok{background:var(--c-ok-soft);color:var(--c-ok)}
.mock__amount{font-size:1.75em;font-weight:var(--fw-black);line-height:1.3;color:var(--c-accent)}
.mock__unit{font-size:.48em;font-weight:var(--fw-medium);color:var(--c-text-2)}
.mock__tabbar{display:grid;grid-template-columns:repeat(5,1fr);flex:none;padding:.6em .4em 1.7em;background:var(--c-surface);border-top:1px solid var(--c-border);font-size:4.1cqi}
.mock__tab{display:grid;justify-items:center;gap:.15em;color:var(--c-text-2);font-size:.66em}
.mock__tab .icon{width:2.1em;height:2.1em}
.mock__tab.is-active{color:var(--c-accent);font-weight:var(--fw-bold)}

/* بخش‌ها */
.section{padding-block:clamp(88px,12vw,168px)}
.section--tight{padding-block:clamp(64px,8vw,112px)}
.section__head{display:grid;gap:var(--s-4);max-width:760px;margin-bottom:clamp(40px,6vw,80px)}
.section__head--center{justify-items:center;margin-inline:auto;text-align:center}
.section__title{font-size:var(--fs-h1);font-weight:var(--fw-black);line-height:var(--lh-tight);text-wrap:balance}
.section__title--sm{font-size:var(--fs-h2)}

.features{display:grid;gap:clamp(80px,11vw,152px)}
.feature{display:grid;gap:var(--s-7);align-items:center}
.feature__title{font-size:var(--fs-h1);font-weight:var(--fw-black);line-height:var(--lh-tight);text-wrap:balance}
.feature__text{margin-top:var(--s-4);font-size:var(--fs-lead);color:var(--c-text-2);text-wrap:pretty}
@media (min-width:960px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s-10)}
  .feature--flip .feature__copy{order:2}
}

.demo{display:grid;gap:var(--s-5);padding:clamp(20px,4vw,36px);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl)}
.demo__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.demo__title{font-weight:var(--fw-bold)}
.voice{display:flex;align-items:center;gap:var(--s-5)}
.voice__mic{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--c-accent);color:var(--c-on-accent)}
.voice__mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-accent);animation:pulse-ring 2.4s var(--ease-out) infinite}
.voice__bars{display:flex;align-items:center;gap:5px;flex:1;height:36px}
.voice__bars span{flex:1;max-width:5px;height:100%;border-radius:3px;background:var(--c-text-2);animation:bar 1.3s var(--ease-in-out) infinite}
.voice__bars span:nth-child(3n+1){animation-delay:-.3s}
.voice__bars span:nth-child(3n+2){animation-delay:-.75s}
.voice__bars span:nth-child(4n){animation-delay:-1s;background:var(--c-accent)}
.js-motion .reveal:not(.is-in) .voice__bars span,.js-motion .reveal:not(.is-in) .voice__mic::after{animation-play-state:paused}
.quote{padding:var(--s-4);background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);line-height:1.9;text-wrap:pretty}
.sets{display:grid}
.set{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;border-bottom:1px solid var(--c-border)}
.set__m{font-size:var(--fs-sm);color:var(--c-text-2);white-space:nowrap}
.sets__total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-sm);color:var(--c-text-2)}
.sets__total strong{font-size:1.5rem;font-weight:var(--fw-black);color:var(--c-accent)}

.chart{width:100%;height:auto;overflow:visible}
.chart__grid{stroke:var(--c-border);stroke-width:1}
.chart__line{fill:none;stroke:var(--c-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart__dot{fill:var(--c-bg);stroke:var(--c-accent);stroke-width:2}
.chart__label{fill:var(--c-text-2);font-family:var(--font);font-size:11px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.metric{padding:var(--s-3) var(--s-4);background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md)}
.metric dt{font-size:var(--fs-xs);color:var(--c-text-2)}
.metric dd{font-size:1.5rem;font-weight:var(--fw-black);line-height:1.4}
.metric--key dd{color:var(--c-accent)}

.who{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.avatar--sm{width:32px;height:32px;font-size:var(--fs-xs)}
.who__name{font-weight:var(--fw-bold)}
.who__meta{font-size:var(--fs-xs);color:var(--c-text-2)}
.line-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;border-top:1px solid var(--c-border)}

.problems{display:grid;gap:var(--s-4)}
@media (min-width:640px){.problems{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.problems{grid-template-columns:repeat(4,minmax(0,1fr))}}
.problem{display:flex;flex-direction:column;gap:var(--s-3);height:100%;min-height:260px;padding:var(--s-6);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);transition:transform var(--dur-2) var(--ease-out)}
.problem:hover{transform:translateY(-3px)}
.problem__title{font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:1.45;text-wrap:balance}
.problem__text{color:var(--c-text-2)}
.problem__fix{display:grid;gap:2px;margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--c-border)}
.problem__fix-label{font-size:var(--fs-xs);color:var(--c-text-2)}
.problem__fix-name{display:flex;align-items:center;gap:var(--s-2);font-weight:var(--fw-bold)}
.problem__fix-name .icon{width:20px;height:20px;color:var(--c-accent)}

.plans{display:grid;gap:var(--s-5);max-width:980px;margin-inline:auto}
@media (min-width:860px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{display:flex;flex-direction:column;gap:var(--s-6);height:100%;padding:clamp(24px,4vw,40px);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl)}
.plan--pro{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.plan__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.plan__name{font-size:var(--fs-h2);font-weight:var(--fw-black);line-height:1.2}
.plan__for{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--c-text-2)}
.plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2)}
.plan__amount{font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);font-weight:var(--fw-black);line-height:1.1}
.plan--pro .plan__amount{color:var(--c-accent)}
.plan__unit{font-size:var(--fs-sm);color:var(--c-text-2)}
.plan__cta{margin-top:auto}
.checklist{display:grid;gap:var(--s-3)}
.checklist li{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--fs-sm);line-height:1.7}
.checklist .icon{width:20px;height:20px;margin-top:2px;color:var(--c-accent)}
.checklist--locked li{color:var(--c-text-2)}
.checklist--locked .icon{color:var(--c-text-3)}
.disclosure{border-top:1px solid var(--c-border)}
.disclosure summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;list-style:none;cursor:pointer;color:var(--c-text-2);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary:hover{color:var(--c-text)}
.disclosure summary .icon{width:20px;height:20px;transform:rotate(-90deg);transition:transform var(--dur-2) var(--ease-out)}
.disclosure[open] summary .icon{transform:rotate(90deg)}
.disclosure[open] .checklist{padding-bottom:var(--s-2);animation:view-in var(--dur-3) var(--ease-out) both}

.org{display:grid;gap:var(--s-4);max-width:980px;margin-inline:auto}
@media (min-width:860px){.org{grid-template-columns:repeat(2,minmax(0,1fr))}}
.org__item{display:flex;flex-direction:column;gap:var(--s-3);height:100%;padding:var(--s-6);border:1px solid var(--c-border);border-radius:var(--r-xl)}
.org__title{font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:1.45}
.org__text{font-size:var(--fs-sm);color:var(--c-text-2)}
.org__price{margin-top:auto;padding-top:var(--s-3);font-weight:var(--fw-bold)}

.closing{display:grid;justify-items:center;gap:var(--s-7);padding-block:clamp(112px,16vw,208px);text-align:center}
.closing__title{font-size:var(--fs-display);font-weight:var(--fw-black);line-height:1.15;text-wrap:balance}

.site-footer{padding-block:var(--s-8);border-top:1px solid var(--c-border)}
.site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5)}
.site-footer__meta{display:grid;gap:var(--s-1);font-size:var(--fs-xs);color:var(--c-text-2)}
.site-footer__links{display:flex;gap:var(--s-2)}

/* =========================================================
   پنل مربی (کاکپیت)
   ========================================================= */
.app{min-height:100vh;min-height:100dvh}
.app__main{width:100%;max-width:1240px;margin-inline:auto;padding:0 var(--s-5) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-8))}
@media (min-width:960px){
  .app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .sidebar{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--s-5);height:100vh;height:100dvh;padding:var(--s-5) var(--s-4);overflow-y:auto;border-inline-end:1px solid var(--c-border)}
  .sidebar__foot{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--c-border)}
  .tabbar{display:none}
  .app__main{padding:0 var(--s-8) var(--s-10)}
  .only-mobile{display:none!important}
}
@media (max-width:959.98px){.only-desktop{display:none!important}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);padding:var(--s-8) 0 var(--s-6)}
.page-head__date{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-2)}
.page-head__title{display:flex;align-items:center;gap:var(--s-3);font-size:clamp(2.25rem,1.8rem + 1.6vw,3rem);font-weight:var(--fw-black);line-height:1.2}
@media (min-width:960px){.page-head{padding:var(--s-9) 0 var(--s-7)}}

.cockpit{display:grid;gap:var(--s-8)}
@media (min-width:960px){
  .cockpit{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:var(--s-7) var(--s-7)}
  .cockpit__main{grid-row:span 2}
}
.panel{display:grid;gap:var(--s-4)}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.panel__title{font-size:var(--fs-h3);font-weight:var(--fw-black)}
.panel__meta{font-size:var(--fs-sm);color:var(--c-text-2)}

.next{display:grid;gap:var(--s-1)}
.next__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.next__time{margin-top:var(--s-2);font-size:clamp(3rem,2.4rem + 2vw,4rem);font-weight:var(--fw-black);line-height:1.1;color:var(--c-accent)}
.next__group{font-size:1.25rem;font-weight:var(--fw-bold)}
.next__meta{font-size:var(--fs-sm);color:var(--c-text-2)}
.next__actions{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.roster{display:grid;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--c-border);animation:view-in var(--dur-3) var(--ease-out) both}
.roster__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2)}
.roster__sum{font-size:var(--fs-sm);color:var(--c-text-2)}
.roster__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-2) var(--s-3);padding-block:var(--s-3);border-bottom:1px solid var(--c-border)}
.roster__row .att{grid-column:1/-1}
.roster__name{font-weight:var(--fw-bold)}
@media (min-width:600px){.roster__row{grid-template-columns:auto minmax(0,1fr) 236px}.roster__row .att{grid-column:auto}}

.list{display:grid}
.list__row{display:flex;align-items:center;gap:var(--s-3);min-height:68px;padding-block:var(--s-3);border-bottom:1px solid var(--c-border)}
.list__row:last-child{border-bottom:0}
.list__row--btn{width:100%;text-align:start;transition:transform var(--dur-1) var(--ease-out)}
.list__row--btn:active{transform:scale(.99)}
.list__main{display:grid;flex:1;min-width:0}
.list__title{overflow:hidden;font-weight:var(--fw-bold);white-space:nowrap;text-overflow:ellipsis}
.list__meta{font-size:var(--fs-sm);color:var(--c-text-2)}
.list__end{display:flex;align-items:center;gap:var(--s-2);flex:none}
.list__chev{color:var(--c-text-3)}
.session__time{min-width:3.3em;font-size:1.25rem;font-weight:var(--fw-black)}
.session--done .session__time,.session--done .list__title{color:var(--c-text-2)}
.amount{font-weight:var(--fw-bold);white-space:nowrap}

.due__head{display:grid;gap:2px;padding-bottom:var(--s-4);border-bottom:1px solid var(--c-border)}
.due__label{font-size:var(--fs-sm);color:var(--c-text-2)}
.due__amount{font-size:clamp(2rem,1.7rem + 1.2vw,2.5rem);font-weight:var(--fw-black);line-height:1.25;color:var(--c-accent)}
.due__unit{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-2)}
.card__foot{padding-top:var(--s-3);border-top:1px solid var(--c-border)}

.narrow{display:grid;gap:var(--s-5);max-width:780px}
.toolbar{display:grid;gap:var(--s-3)}
.empty{padding:var(--s-8) 0;text-align:center;color:var(--c-text-2)}

.voice-card{display:grid;justify-items:center;gap:var(--s-5);padding-block:var(--s-9);text-align:center}
.mic{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--c-accent);color:var(--c-on-accent);transition:transform var(--dur-2) var(--ease-out)}
.mic:hover{transform:scale(1.03)}
.mic:active{transform:scale(.95)}
.mic .icon{width:40px;height:40px;stroke-width:2}
.mic::before,.mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-accent);opacity:0;pointer-events:none}
.mic.is-listening::before{animation:pulse-ring 1.6s var(--ease-out) infinite}
.mic.is-listening::after{animation:pulse-ring 1.6s var(--ease-out) .8s infinite}
.voice-card__hint{max-width:22ch;font-size:var(--fs-lead);font-weight:var(--fw-bold);text-wrap:balance}
.voice-card__sub{font-size:var(--fs-sm);color:var(--c-text-2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.stack{display:grid;gap:var(--s-5)}
