/* =====================================================================
   LARA — HERO VARIANT 02
   Centered · AI-first · no imagery · cream + warm-green light wall
   Loads AFTER css/styles.css and only overrides / adds hero + navbar.
   ===================================================================== */

:root{
  /* warm-green extension of the brand ramp (olive-leaning, never neon) */
  --wg-900:#1E4033;
  --wg-700:#2F6B52;          /* brand primary */
  --wg-800:#26543F;          /* pressed / filled states (was missing, which
                                silently invalidated every rule using it) */
  --wg-600:#3C7355;
  --wg-500:#4E7D5B;          /* warm / mossy */
  --wg-400:#6E9A76;
  --wg-rgb:78,125,91;        /* warm green */
  --wg-warm-rgb:132,158,110; /* olive haze */
  --hx-cream:#FBF8F2;
  --hx-cream-2:#F6F2E8;
}

/* ============ 1. NAVBAR — Material 3 top app bar, 8dp grid ============ */
/* Metrics: bar 64dp · actions 40dp · chip 32dp · gutter 24dp
   Spacing steps used: 4 · 8 · 12 · 16 · 24 · 32 — nothing off the grid. */
.nv{ --bar-h:64px; --act-h:40px; --gap-xs:4px; --gap-sm:8px; --gap-md:16px; --gap-lg:24px;
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  border-block-end:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease); }
.nv__inner{ max-width:var(--maxw); margin-inline:auto; min-height:var(--bar-h);
  padding-inline:max(var(--gap-lg), var(--gutter)); padding-block:12px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:var(--gap-lg); }
.nv.scrolled{ background:rgba(251,248,242,.82); backdrop-filter:saturate(1.5) blur(18px);
  -webkit-backdrop-filter:saturate(1.5) blur(18px); border-block-end-color:rgba(30,40,36,.07); }

/* leading: brand */
.nv__brand{ justify-self:start; display:inline-flex; align-items:center; gap:var(--gap-sm);
  height:var(--act-h); padding-inline-end:var(--gap-sm); border-radius:var(--r-pill); }
.nv__mark{ width:24px; height:24px; color:var(--wg-700); flex:none; }
.nv__mark svg{ width:100%; height:100%; }
.nv__name{ font-size:20px; line-height:1; font-weight:700; letter-spacing:normal; color:var(--ink);
  font-variation-settings:"wght" 700; }

/* centre: primary menu — 40dp targets, 4dp apart */
.nv__menu{ justify-self:center; display:flex; align-items:center; gap:var(--gap-xs); }
.nv__link{ position:relative; display:inline-flex; align-items:center; height:var(--act-h);
  padding-inline:var(--gap-md); border-radius:var(--r-pill);
  font-size:14px; font-weight:500; line-height:1; color:var(--ink-2);
  transition:color .25s, background .25s; }
.nv__link::after{ content:""; position:absolute; inset-block-end:6px; inset-inline:var(--gap-md);
  height:1.5px; background:var(--wg-600); border-radius:2px; transform:scaleX(0);
  transform-origin:100% 50%; transition:transform .3s var(--ease); }
.nv__link:hover{ color:var(--ink); background:rgba(30,40,36,.04); }
.nv__link:hover::after{ transform:scaleX(1); }

/* trailing: quota chip · text button · filled button — 8dp apart */
.nv__actions{ justify-self:end; display:flex; align-items:center; gap:var(--gap-sm); }
.nv__signin{ display:inline-flex; align-items:center; height:var(--act-h); padding-inline:var(--gap-md);
  border-radius:var(--r-pill); font-size:14px; font-weight:500; line-height:1; color:var(--ink-2);
  transition:color .25s, background .25s; }
.nv__signin:hover{ color:var(--ink); background:rgba(30,40,36,.04); }
.nv__cta{ display:inline-flex; align-items:center; height:var(--act-h); padding-inline:var(--gap-lg);
  border-radius:var(--r-pill); font-size:14px; font-weight:600; line-height:1; color:#F6FAF6;
  background:var(--wg-700);
  box-shadow:0 8px 22px -14px rgba(var(--wg-rgb),.7), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .25s, transform .25s, box-shadow .25s; }
.nv__cta:hover{ background:var(--wg-900); transform:translateY(-1px);
  box-shadow:0 14px 28px -14px rgba(var(--wg-rgb),.75); }
.nv__burger{ display:none; width:var(--act-h); height:var(--act-h); border-radius:var(--r-pill);
  border:1px solid rgba(30,40,36,.08); background:rgba(255,255,255,.6);
  align-items:center; justify-content:center; color:var(--ink); }
.nv__burger svg{ width:20px; height:20px; }

/* ============ 2. HERO SHELL ============ */
.hx{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:clamp(104px,12vh,134px) clamp(40px,5vh,60px); overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #FFFDF8 0%, rgba(255,253,248,0) 60%),
    linear-gradient(180deg, var(--hx-cream) 0%, var(--hx-cream) 42%, var(--hx-cream-2) 100%); }

.hx__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* warm-green light wall — abstract vertical rhythm, heavily softened */
.hx__bars{ position:absolute; inset-inline:-6%; inset-block-end:0; height:78%;
  display:flex; align-items:flex-end; gap:clamp(8px,1.1vw,16px);
  filter:blur(13px); opacity:1;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.55) 0%, #000 10%, #000 46%, transparent 96%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.55) 0%, #000 10%, #000 46%, transparent 96%); }
.hx__bars i{ flex:1 1 0; height:var(--h);
  background:linear-gradient(to top,
    rgba(var(--wg-rgb), calc(var(--o) * 1.9)) 0%,
    rgba(var(--wg-warm-rgb), calc(var(--o) * 1.05)) 34%,
    rgba(var(--wg-warm-rgb), calc(var(--o) * .34)) 66%,
    rgba(var(--wg-warm-rgb), 0) 100%);
  border-radius:40px 40px 0 0;
  transform-origin:50% 100%;
  animation:hxBar 26s ease-in-out infinite alternate;
  animation-delay:calc(var(--o) * -18s); }
@keyframes hxBar{ from{ transform:scaleY(.985); opacity:.94; } to{ transform:scaleY(1.015); opacity:1; } }

/* focused green light behind the card */
.hx__glow{ position:absolute; inset-block-end:-6%; inset-inline-start:50%;
  width:min(900px,86vw); height:min(520px,52vh); transform:translateX(50%);
  background:radial-gradient(50% 50% at 50% 50%,
      rgba(var(--wg-rgb),.30) 0%, rgba(var(--wg-warm-rgb),.15) 42%, rgba(var(--wg-rgb),0) 72%);
  filter:blur(12px); }
/* dissolve the wall into the next section */
.hx__fade{ position:absolute; inset-inline:0; inset-block-end:0; height:84px;
  background:linear-gradient(to top, var(--hx-cream-2) 12%, rgba(246,242,232,0) 100%); }

.hx__inner{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center; }

/* ============ 3. HEADLINE BLOCK ============ */
.hx__pill{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500;
  color:var(--ink-2); background:rgba(255,255,255,.62); border:1px solid rgba(30,40,36,.07);
  padding:8px 16px 8px 16px; border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(30,40,36,.03); backdrop-filter:blur(8px); }
.hx__pulse{ width:7px; height:7px; border-radius:50%; background:var(--wg-600); flex:none;
  box-shadow:0 0 0 0 rgba(var(--wg-rgb),.45); animation:hxPulse 2.6s ease-out infinite; }
@keyframes hxPulse{ 0%{box-shadow:0 0 0 0 rgba(var(--wg-rgb),.4)} 70%{box-shadow:0 0 0 8px rgba(var(--wg-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--wg-rgb),0)} }

/* Persian display type needs room: descenders (ق ن ج) sit below the baseline,
   so 1.24 made the last line collide with what follows. */
.hx__title{ margin-top:var(--sp-5); font-size:clamp(32px,5vw,60px); font-weight:800;
  font-variation-settings:"wght" 800; line-height:1.42; letter-spacing:normal; color:var(--ink);
  text-wrap:balance; max-width:18ch; }
.hx__hl{ position:relative; color:var(--wg-700); white-space:nowrap; }
.hx__hl::after{ content:""; position:absolute; inset-inline:0; inset-block-end:-.1em; height:.055em;
  background:linear-gradient(to left, rgba(var(--wg-rgb),0), rgba(var(--wg-rgb),.45) 18%, rgba(var(--wg-rgb),.45) 82%, rgba(var(--wg-rgb),0));
  border-radius:99px; }

.hx__sub{ margin-top:var(--sp-6); max-width:56ch; font-size:clamp(16px,1.5vw,18px);
  line-height:2; color:var(--ink-3); text-wrap:balance; }

.hx__cta{ margin-top:var(--sp-8); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:center; }
.hxbtn{ display:inline-flex; align-items:center; gap:var(--btn-gap); font-size:16px; font-weight:600;
  line-height:1; min-height:54px; padding-inline:28px; border-radius:var(--btn-r);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, color .22s; }
.hxbtn svg{ width:17px; height:17px; transition:transform .22s var(--ease); }
.hxbtn--primary{ background:var(--wg-700); color:#F6FAF6;
  box-shadow:0 14px 34px -16px rgba(var(--wg-rgb),.85), inset 0 1px 0 rgba(255,255,255,.16); }
.hxbtn--primary:hover{ background:var(--wg-900); transform:translateY(-2px);
  box-shadow:0 20px 40px -16px rgba(var(--wg-rgb),.9); }
.hxbtn--primary:hover svg{ transform:translateX(-4px); }
.hxbtn--quiet{ color:var(--ink-2); background:transparent; }
.hxbtn--quiet:hover{ color:var(--ink); background:rgba(30,40,36,.05); }

/* free-quota chip — sits at the foot of the question card */
.hx__quota{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; height:32px;
  padding-inline:16px; border-radius:var(--r-pill); white-space:nowrap;
  font-size:12.5px; font-weight:500; line-height:1; color:var(--ink-4);
  background:rgba(255,255,255,.72); border:1px solid rgba(30,40,36,.08);
  box-shadow:0 1px 2px rgba(30,40,36,.03); }
.hx__quotaBar{ width:26px; height:4px; border-radius:2px; background:rgba(30,40,36,.10);
  overflow:hidden; flex:none; }
.hx__quotaBar i{ display:block; width:var(--p); height:100%; border-radius:2px;
  background:var(--wg-600); }

/* ============ 4. AI QUESTION CARD ============ */
.ask{ margin-top:clamp(24px,3.2vh,38px); width:100%; max-width:820px; text-align:start;
  background:linear-gradient(180deg, #FFFFFF 0%, #FEFDFB 100%);
  border:1px solid rgba(30,40,36,.075); border-radius:24px;
  padding:clamp(18px,2.2vw,24px);
  box-shadow:
    0 1px 2px rgba(30,40,36,.03),
    0 26px 60px -34px rgba(30,40,36,.24),
    0 0 70px -24px rgba(var(--wg-rgb),.20);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease); }
.ask[data-state="thinking"], .ask[data-state="answer"], .ask[data-state="gate"]{
  border-color:rgba(var(--wg-rgb),.18);
  box-shadow:
    0 1px 2px rgba(30,40,36,.03),
    0 34px 70px -36px rgba(30,40,36,.28),
    0 0 90px -22px rgba(var(--wg-rgb),.30); }

.ask__top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-inline:8px; margin-bottom:8px; }
.ask__label{ font-size:13.5px; font-weight:500; color:var(--ink-3); }
.ask__badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  color:var(--wg-700); background:rgba(var(--wg-rgb),.07); border:1px solid rgba(var(--wg-rgb),.13);
  padding:4px 12px; border-radius:var(--r-pill); }
.ask__dot{ width:6px; height:6px; border-radius:50%; background:var(--wg-600); }

.ask__field{ position:relative; display:flex; align-items:center; gap:12px;
  min-height:64px; padding:16px 16px 16px 68px;
  background:#FFFFFF; border:1px solid rgba(30,40,36,.09); border-radius:16px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.ask[data-state="typing"] .ask__field{ border-color:rgba(var(--wg-rgb),.28);
  box-shadow:0 0 0 4px rgba(var(--wg-rgb),.06); }
.ask__spark{ width:26px; height:26px; flex:none; color:var(--wg-600); opacity:.5;
  transition:opacity .3s, transform .5s var(--ease); }
.ask__spark svg{ width:100%; height:100%; }
.ask[data-state="thinking"] .ask__spark{ opacity:1; transform:rotate(90deg); }
.ask__text{ flex:1; min-width:0; font-size:clamp(15px,1.5vw,17px); line-height:1.7; color:var(--ink);
  font-weight:500; }
/* live input — takes over the moment the visitor touches the card */
.ask__input{ display:none; flex:1; min-width:0; border:none; outline:none; background:none;
  font-size:clamp(15px,1.5vw,17px); line-height:1.7; font-weight:500; color:var(--ink); }
.ask__input::placeholder{ color:var(--ink-4); font-weight:400; }
.ask.is-live .ask__text{ display:none; }
.ask.is-live .ask__input{ display:block; }
.ask.is-live .ask__field{ border-color:rgba(var(--wg-rgb),.28); box-shadow:0 0 0 4px rgba(var(--wg-rgb),.06); }
.ask__text:empty::before{ content:""; }
.ask__caret{ display:inline-block; width:1.5px; height:1.05em; vertical-align:-.16em;
  margin-inline-start:2px; background:var(--wg-600); opacity:0; }
.ask.is-caret .ask__caret{ animation:hxCaret 1s steps(1) infinite; }
@keyframes hxCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.ask__send{ position:absolute; inset-block-start:50%; inset-inline-end:12px; transform:translateY(-50%);
  width:44px; height:44px; border-radius:12px; background:var(--wg-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -12px rgba(var(--wg-rgb),.8);
  transition:background .25s, transform .25s var(--ease), opacity .25s; }
.ask__send svg{ width:18px; height:18px; }
.ask__send:hover{ background:var(--wg-900); transform:translateY(-50%) scale(1.05); }
.ask.is-sending .ask__send{ transform:translateY(-50%) scale(.9); opacity:.65; }

/* expanding area */
.ask__reveal{ height:0; overflow:hidden; transition:height .58s var(--ease); }
.ask__revealIn{ padding-block-start:18px; } /* height measured by js/hero-v2.js */

.ask__thinking{ display:flex; align-items:center; gap:12px; padding:8px 8px 8px;
  font-size:14px; font-weight:500; color:var(--ink-3);
  opacity:0; transition:opacity .35s var(--ease); }
.ask[data-state="thinking"] .ask__thinking{ opacity:1; }
.ask[data-state="answer"] .ask__thinking,
.ask[data-state="gate"] .ask__thinking{ display:none; }
/* while thinking, the card stays compact — it only grows for the answer */
.ask[data-state="thinking"] .ask__answer,
.ask[data-state="idle"] .ask__answer{ display:none; }
.ask__orbit{ display:inline-flex; gap:4px; }
.ask__orbit i{ width:6px; height:6px; border-radius:50%; background:var(--wg-500);
  animation:hxDots 1.15s var(--ease) infinite; }
.ask__orbit i:nth-child(2){ animation-delay:.14s; }
.ask__orbit i:nth-child(3){ animation-delay:.28s; }
@keyframes hxDots{ 0%,100%{ opacity:.25; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }

.ask__answer{ padding:16px 8px 2px; opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  border-block-start:1px solid rgba(30,40,36,.06); }
.ask[data-state="answer"] .ask__answer{ opacity:1; transform:none; }
.ask__answerTx{ font-size:clamp(14.5px,1.4vw,16px); line-height:2.05; color:var(--ink-2); }
.ask__answerTx b{ font-weight:700; color:var(--ink); }
.ask__foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; }
.ask__meta{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-4); }
.ask__meta svg{ width:15px; height:15px; color:var(--wg-500); }
.ask__more{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--wg-700); padding:8px 16px; border-radius:var(--r-pill);
  background:rgba(var(--wg-rgb),.07); border:1px solid rgba(var(--wg-rgb),.14);
  transition:background .25s, transform .25s var(--ease); }
.ask__more svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.ask__more:hover{ background:rgba(var(--wg-rgb),.12); }
.ask__more:hover svg{ transform:translateX(-3px); }

/* gate — shown when a visitor asks their own question */
.ask__gate{ display:none; padding:16px 8px 2px; border-block-start:1px solid rgba(30,40,36,.06);
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ask[data-state="gate"] .ask__gate{ display:flex; }
.ask[data-state="gate"] .ask__answer{ display:none; }
.ask__gateTx{ flex:1; min-width:240px; font-size:14.5px; line-height:1.9; color:var(--ink-2); }
.hxbtn--sm{ padding:12px 24px; font-size:14.5px; }

/* ============ 5. HANDOFF TO THE REST OF THE PAGE ============ */
/* the stats bar is not part of this variant — the hero hands straight over to the sections */
.statsbar-wrap{ display:none; }

/* ============ 5b. آموزش — quiet three-card row (replaces "how it works") ============ */
.learn{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.learn__card{ display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(24px,2.6vw,32px); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-xs);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; }
.learn__card:hover{ transform:translateY(-3px); border-color:rgba(var(--wg-rgb),.22);
  box-shadow:0 24px 50px -34px rgba(30,40,36,.3), 0 0 40px -22px rgba(var(--wg-rgb),.35); }
.learn__ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; color:var(--wg-700); background:rgba(var(--wg-rgb),.07);
  border:1px solid rgba(var(--wg-rgb),.13); }
.learn__ic svg{ width:22px; height:22px; }
.learn__card h3{ margin-top:20px; font-size:20px; font-weight:700; color:var(--ink);
  font-variation-settings:"wght" 700; letter-spacing:normal; }
.learn__card p{ margin-top:8px; font-size:15.5px; line-height:1.95; color:var(--ink-3); }
.learn__go{ margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--wg-700); }
.learn__go svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.learn__card:hover .learn__go svg{ transform:translateX(-4px); }

/* ============ 6. RESPONSIVE ============ */
/* the bar sheds items in priority order, never crowds */
@media (max-width:1060px){ .nv__signin{ display:none; } }
@media (max-width:960px){
  .nv__menu{ display:none; }
  .nv__inner{ grid-template-columns:1fr auto; }
  .nv__burger{ display:inline-flex; }
}
@media (max-width:640px){
  .nv{ --bar-h:56px; }
  .nv__inner{ padding-inline:max(16px, var(--gutter)); padding-block:8px; }
}
@media (max-width:900px){
  .learn{ grid-template-columns:1fr; }
}
/* short laptop screens: keep the whole answer state above the fold */
@media (min-width:900px) and (max-height:840px){
  .hx{ padding-block:clamp(76px,9vh,96px) 20px; }
  .hx__quota{ margin-top:12px; }
  .hx__title{ margin-top:var(--sp-4); font-size:clamp(28px,3.8vw,46px); line-height:1.34; }
  .hx__sub{ margin-top:var(--sp-5); }
  .hx__cta{ margin-top:var(--sp-6); }
  .ask{ margin-top:16px; }
}
@media (max-width:640px){
  .nv__cta{ padding:8px 16px; font-size:14px; }
  .hx{ padding-block:112px 56px; }
  .hx__title{ max-width:100%; }
  .hx__bars{ height:56%; gap:8px; filter:blur(20px); }
  .ask__field{ padding-inline:16px 60px; }
  .ask__top{ margin-bottom:8px; }
  .hxbtn{ padding:16px 24px; }
  .hx__cta{ width:100%; flex-direction:column; }
  .hxbtn{ width:100%; justify-content:center; }
}

/* ============ 7. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .hx__bars i{ animation:none; }
  .hx__pulse{ animation:none; }
  .ask__caret{ display:none; }
  .ask__reveal{ transition:none; }
  .ask__answer{ transition:none; }
}

/* =====================================================================
   8. PAGE HARMONY — the rest of the page, tuned to the new hero
   Cream + one green. Hairlines, pill buttons, soft lift, no second hue.
   ===================================================================== */

/* 8.1 shared primitives */
.btn{ border-radius:var(--r-pill); }
.btn--primary{ background:var(--wg-700); color:#F6FAF6;
  box-shadow:0 12px 30px -16px rgba(var(--wg-rgb),.8), inset 0 1px 0 rgba(255,255,255,.15); }
.btn--primary:hover{ background:var(--wg-900); box-shadow:0 18px 38px -16px rgba(var(--wg-rgb),.85); }
.btn--ghost{ border-color:rgba(30,40,36,.10); box-shadow:none; }
.btn--ghost:hover{ border-color:rgba(var(--wg-rgb),.28); background:rgba(var(--wg-rgb),.05);
  box-shadow:0 12px 26px -18px rgba(var(--wg-rgb),.5); }

.eyebrow{ color:var(--ink-2); background:rgba(255,255,255,.66); border-color:rgba(30,40,36,.07);
  font-weight:500; box-shadow:0 1px 2px rgba(30,40,36,.03); }
.eyebrow svg{ color:var(--wg-600); }
.sec-title{ font-weight:800; font-variation-settings:"wght" 800; letter-spacing:normal; line-height:1.24; }
.accent{ color:var(--wg-700); }

/* 8.2 امکانات — rail + stage */
.ftabs::before{ background:rgba(30,40,36,.08); }
.ftab{ border-radius:16px; }
.ftab__ic{ background:rgba(255,255,255,.7); border-color:rgba(30,40,36,.07);
  box-shadow:none; color:var(--wg-600); }
.ftab__node{ border-color:rgba(30,40,36,.14); }
.ftab:hover{ background:rgba(255,255,255,.7); }
.ftab.is-active{ background:var(--paper); border-color:rgba(30,40,36,.075);
  box-shadow:0 22px 48px -30px rgba(30,40,36,.3), 0 0 44px -24px rgba(var(--wg-rgb),.35); }
.ftab.is-active .ftab__ic{ background:var(--wg-700); color:#fff; border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(var(--wg-rgb),.7); }
.ftab.is-active .ftab__node{ background:var(--wg-600); border-color:var(--wg-600);
  box-shadow:0 0 0 4px rgba(var(--wg-rgb),.14); }
.ftab.is-active .ftab__ch{ color:var(--wg-600); }

/* the real example sits on the RIGHT of the card, the copy on the left */
.stage__card{ background:var(--paper); border-color:rgba(30,40,36,.075); border-radius:24px;
  box-shadow:0 1px 2px rgba(30,40,36,.03), 0 30px 64px -38px rgba(30,40,36,.26); }
.stage__mock{ order:1; }
.stage__body{ order:2; }
.stage__spark{ color:var(--wg-400); }
.stage__ic{ background:rgba(var(--wg-rgb),.07); border:1px solid rgba(var(--wg-rgb),.13);
  border-radius:16px; box-shadow:none; color:var(--wg-700); }
.stage__title{ font-weight:700; font-variation-settings:"wght" 700; }
.stage__list .ck{ background:rgba(var(--wg-rgb),.09); color:var(--wg-700); }
.stage__cta{ border-radius:var(--r-pill); }

/* 8.3 the mock itself — a real screen, not a skeleton */
.stage__mock{ background:var(--stone); border:1px solid rgba(30,40,36,.06); border-radius:20px;
  padding:16px; box-shadow:none; }
.mv{ width:100%; background:var(--paper); border:1px solid rgba(30,40,36,.07); border-radius:14px;
  overflow:hidden; box-shadow:0 10px 30px -22px rgba(30,40,36,.4); font-size:12px; line-height:1.9; }
.mv__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-block-end:1px solid rgba(30,40,36,.06); background:var(--paper-warm); }
.mv__dots{ display:flex; gap:4px; }
.mv__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(30,40,36,.14); }
.mv__file{ display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; color:var(--ink-3); }
.mv__file b{ font-size:9px; padding:2px 8px; border-radius:5px; background:rgba(var(--wg-rgb),.08);
  color:var(--wg-700); font-weight:700; }

.mv__doc{ padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.mv__clause{ font-size:11.5px; line-height:1.95; color:var(--ink-3); }
.mv__clause b{ color:var(--ink); font-weight:700; }
.mv__to{ font-size:11.5px; font-weight:700; color:var(--ink); }
.mv__clause.is-risk{ position:relative; padding:8px 12px; border-radius:10px;
  background:rgba(203,95,76,.05); border:1px solid rgba(203,95,76,.16); color:var(--ink-2); }
.mv__flag{ display:inline-block; margin-bottom:4px; font-size:9.5px; font-weight:700;
  color:#B4503E; background:rgba(203,95,76,.12); padding:2px 8px; border-radius:999px; }
.mv__note{ display:block; margin-top:4px; font-size:10.5px; color:#A85544; }

.mv__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 16px; border-block-start:1px solid rgba(30,40,36,.06); background:var(--paper-warm); }
.mv__foot--split{ justify-content:space-between; }
.mv__stat{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; color:var(--ink-3); }
.mv__ghost{ font-size:10.5px; font-weight:600; color:var(--wg-700);
  padding:4px 12px; border-radius:999px; background:rgba(var(--wg-rgb),.07); }
.d{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.d--r{ background:#CB5F4C; } .d--a{ background:#C98A3C; } .d--g{ background:var(--wg-600); }

/* chat */
.mv--chat{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.mv__msg{ max-width:92%; font-size:11.5px; line-height:1.95; padding:8px 12px; border-radius:14px; }
.mv__msg--me{ align-self:flex-end; background:rgba(30,40,36,.045); color:var(--ink-2);
  border-end-end-radius:5px; }
.mv__msg--ai{ align-self:flex-start; background:rgba(var(--wg-rgb),.055);
  border:1px solid rgba(var(--wg-rgb),.12); color:var(--ink-2); border-end-start-radius:5px; }
.mv__who{ display:flex; align-items:center; gap:4px; margin-bottom:4px;
  font-size:10px; font-weight:700; color:var(--wg-700); }
.mv__who svg{ width:11px; height:11px; }
.mv__cites{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.mv__cite{ font-size:9.5px; font-weight:600; color:var(--wg-700); background:var(--paper);
  border:1px solid rgba(var(--wg-rgb),.18); padding:4px 8px; border-radius:999px; }
.mv__composer{ margin-top:2px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:11px; color:var(--ink-4); background:var(--stone);
  border:1px solid rgba(30,40,36,.07); border-radius:11px; padding:8px 8px 8px 12px; }
.mv__send{ width:26px; height:26px; border-radius:8px; background:var(--wg-700); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; }
.mv__send svg{ width:13px; height:13px; }

/* lists / calc / calendar */
.mv__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  font-size:11.5px; font-weight:700; color:var(--ink);
  border-block-end:1px solid rgba(30,40,36,.06); background:var(--paper-warm); }
.mv__count{ font-size:10px; font-weight:600; color:var(--wg-700);
  background:rgba(var(--wg-rgb),.08); padding:4px 8px; border-radius:999px; }
.mv__row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 16px; border-block-end:1px solid rgba(30,40,36,.05); }
.mv__row:last-child{ border-block-end:none; }
.mv__rowmain{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mv__rowmain b{ font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.5; }
.mv__rowmain span{ font-size:10px; color:var(--ink-4); line-height:1.5; }
.mv__chip{ flex:none; font-size:9.5px; font-weight:600; padding:4px 8px; border-radius:999px;
  color:var(--ink-3); background:rgba(30,40,36,.05); }
.mv__chip--g{ color:var(--wg-700); background:rgba(var(--wg-rgb),.09); }
.mv__chip--a{ color:#9A6B25; background:rgba(201,138,60,.12); }

.mv__field{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 16px; font-size:11px; color:var(--ink-4);
  border-block-end:1px solid rgba(30,40,36,.05); }
.mv__field b{ font-size:11.5px; font-weight:700; color:var(--ink-2); }
.mv__total{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 16px; background:rgba(var(--wg-rgb),.06); }
.mv__total span{ font-size:11px; color:var(--ink-3); }
.mv__total b{ font-size:14.5px; font-weight:800; color:var(--wg-800);
  font-variation-settings:"wght" 800; direction:rtl; }
.mv__hint{ padding:8px 16px; font-size:10px; color:var(--ink-4);
  border-block-start:1px solid rgba(30,40,36,.05); }

.mv__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:8px 8px 8px; }
.mv__grid span{ height:24px; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--ink-2); border-radius:7px; position:relative; }
.mv__grid .h{ font-size:9px; color:var(--ink-4); font-weight:600; }
.mv__grid .on{ background:var(--wg-700); color:#fff; font-weight:700; }
.mv__grid .dot::after{ content:""; position:absolute; inset-block-end:3px; inset-inline-start:50%;
  transform:translateX(50%); width:4px; height:4px; border-radius:50%; background:var(--wg-500); }
.mv__ev{ display:flex; align-items:center; gap:8px; padding:8px 16px;
  border-block-start:1px solid rgba(30,40,36,.05); }
.mv__ev b{ flex:1; font-size:11px; font-weight:600; color:var(--ink-2); }
.mv__ev span{ font-size:9.5px; color:var(--ink-4); }

/* 8.4 چرا لاإرا — a comparison built around ONE raised object, not a grid of boxes
   · criterion column deliberately narrow (it is a label, not content)
   · the لاإرا column is a single floating card that breaks the row rhythm
   · the competitor column is recessive: muted, hairline dash, no alarm colour  */
.vswrap{ width:100%; }
.vs{ position:relative; display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.14fr) minmax(0,1fr);
  grid-template-rows:repeat(8, auto);
  column-gap:clamp(10px,1.4vw,20px); padding-block:24px; }

/* every cell is placed explicitly, so .vs__raise may overlap the middle column
   without pushing the auto-placement cursor around */
.vs > div:nth-child(3n+2){ grid-column:1; }
.vs > div:nth-child(3n+3){ grid-column:2; }
.vs > div:nth-child(3n+4){ grid-column:3; }
.vs > div:nth-child(n+2):nth-child(-n+4){ grid-row:1; }
.vs > div:nth-child(n+5):nth-child(-n+7){ grid-row:2; }
.vs > div:nth-child(n+8):nth-child(-n+10){ grid-row:3; }
.vs > div:nth-child(n+11):nth-child(-n+13){ grid-row:4; }
.vs > div:nth-child(n+14):nth-child(-n+16){ grid-row:5; }
.vs > div:nth-child(n+17):nth-child(-n+19){ grid-row:6; }
.vs > div:nth-child(n+20):nth-child(-n+22){ grid-row:7; }
.vs > div:nth-child(n+23):nth-child(-n+25){ grid-row:8; }


/* the raised لاإرا card, spanning every row of the middle column */
.vs__raise{ grid-column:2; grid-row:1 / -1; z-index:0; border-radius:26px;
  background:linear-gradient(180deg, #FFFFFF 0%, #FDFCF9 100%);
  border:1px solid rgba(var(--wg-rgb),.16);
  box-shadow:0 2px 4px rgba(30,40,36,.03),
    0 40px 80px -44px rgba(30,40,36,.34),
    0 0 90px -34px rgba(var(--wg-rgb),.5); }
.vs > div:not(.vs__raise){ position:relative; z-index:1; }

/* ---- criterion column: a quiet label rail ---- */
.vs__crit{ display:flex; align-items:center; gap:12px; padding:16px 8px 16px 0;
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5;
  border-block-end:1px solid rgba(30,40,36,.06); }
.vs__ic{ width:32px; height:32px; flex:none; border-radius:10px; display:flex;
  align-items:center; justify-content:center; color:var(--wg-700);
  background:rgba(var(--wg-rgb),.06); }
.vs__ic svg{ width:17px; height:17px; }

/* ---- لاإرا cells: inside the card, lighter rules ---- */
.vs__lara{ display:flex; align-items:center; gap:12px; padding:18px clamp(18px,2vw,26px);
  font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.7;
  border-block-end:1px solid rgba(var(--wg-rgb),.10); }
.vs__tick{ width:22px; height:22px; flex:none; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#fff; background:var(--wg-700);
  box-shadow:0 4px 10px -5px rgba(var(--wg-rgb),.9); }
.vs__tick svg{ width:11px; height:11px; }

/* ---- competitor cells: present, but never competing for attention ---- */
.vs__gpt{ display:flex; align-items:center; gap:12px; padding:18px clamp(8px,1.2vw,16px);
  font-size:13.5px; font-weight:400; color:var(--ink-4); line-height:1.7;
  border-block-end:1px solid rgba(30,40,36,.06); }
.vs__dash{ width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; }
.vs__dash::before{ content:""; width:11px; height:1.5px; border-radius:2px; background:rgba(30,40,36,.22); }

.vs__crit.is-last, .vs__gpt.is-last{ border-block-end:none; }
.vs__lara.is-last{ border-block-end:none; }

/* ---- header row ---- */
.vs__crit--head{ font-size:12px; font-weight:600; color:var(--ink-4); letter-spacing:.04em;
  padding-block:0 16px; align-items:flex-end; border-block-end-color:rgba(30,40,36,.08); }
.vs__lara--head, .vs__gpt--head{ flex-direction:column; align-items:center; justify-content:flex-end;
  gap:4px; text-align:center; padding-block:32px 20px; }
.vs__lara--head{ border-block-end-color:rgba(var(--wg-rgb),.14); }
.vs__gpt--head{ border-block-end-color:rgba(30,40,36,.08); }
.vs__badge{ position:absolute; inset-block-start:-13px; inset-inline-start:50%; transform:translateX(50%);
  font-size:11.5px; font-weight:700; line-height:1; color:#F6FAF6; background:var(--wg-700);
  padding:8px 16px; border-radius:var(--r-pill);
  box-shadow:0 8px 20px -10px rgba(var(--wg-rgb),.8); }
.vs__name{ display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:800;
  font-variation-settings:"wght" 800; letter-spacing:normal; color:var(--wg-800); }
.vs__name svg{ width:18px; height:18px; color:var(--wg-600); }
.vs__name--muted{ font-size:17px; font-weight:600; font-variation-settings:"wght" 600; color:var(--ink-3); }
.vs__role{ font-size:12px; font-weight:500; color:var(--ink-4); }

/* ---- quiet interactivity: the لاإرا line lifts on hover, the rail icon warms ---- */
@media (hover:hover){
  .vs__lara, .vs__crit .vs__ic{ transition:background .25s var(--ease); }
  .vs__lara:not(.vs__lara--head):hover{ background:rgba(var(--wg-rgb),.05); }
  .vs__crit:not(.vs__crit--head):hover .vs__ic{ background:rgba(var(--wg-rgb),.13); }
}

/* the raised card carries its own top spacing, so the heading sits closer */
#why .sec-head{ margin-bottom:clamp(28px,3.2vw,42px); }

/* try-it strip closing the section */
.vstry{ margin-top:clamp(30px,3.6vw,46px); display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:clamp(24px,2.8vw,34px) clamp(26px,3vw,42px);
  background:linear-gradient(to left, rgba(var(--wg-rgb),.07), rgba(var(--wg-rgb),.02) 60%, var(--paper));
  border:1px solid rgba(30,40,36,.075); border-radius:24px; }
.vstry__tx h3{ font-size:clamp(19px,2.1vw,23px); font-weight:800;
  font-variation-settings:"wght" 800; letter-spacing:normal; color:var(--ink); }
.vstry__tx p{ margin-top:8px; font-size:14.5px; color:var(--ink-3); }
.vstry__act{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.vstry__act .hxbtn svg:first-child{ width:15px; height:15px; }
.vstry__note{ font-size:12px; color:var(--ink-4); }

@media (max-width:860px){
  .vswrap{ overflow-x:auto; padding-block-end:10px; -webkit-overflow-scrolling:touch; }
  .vs{ min-width:700px; }
  .vstry{ flex-direction:column; align-items:stretch; text-align:center; }
  .vstry__act{ align-items:stretch; }
}

/* 8.5 تعرفه‌ها — segmented control + cleaner cards */
.seg{ margin:0 auto clamp(36px,4vw,52px); width:fit-content; display:flex; align-items:center; gap:4px;
  padding:4px; background:rgba(255,255,255,.7); border:1px solid rgba(30,40,36,.07);
  border-radius:var(--r-pill); box-shadow:0 1px 2px rgba(30,40,36,.03); }
.seg__opt{ display:inline-flex; align-items:center; gap:8px; padding:8px 24px;
  border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--ink-3);
  transition:background .25s var(--ease), color .25s, box-shadow .25s; }
.seg__opt:hover{ color:var(--ink); }
.seg__opt.is-active{ background:var(--paper); color:var(--ink);
  box-shadow:0 6px 18px -12px rgba(30,40,36,.5), 0 0 0 1px rgba(30,40,36,.05); }
.seg__save{ font-size:11px; font-weight:700; color:var(--wg-700);
  background:rgba(var(--wg-rgb),.1); padding:4px 8px; border-radius:var(--r-pill); }


.price{ border-color:rgba(30,40,36,.075); border-radius:24px; padding:32px 32px 32px; }
.price:hover{ transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(30,40,36,.03), 0 32px 66px -42px rgba(30,40,36,.3); }
.price__name{ font-size:13px; font-weight:600; color:var(--ink-4); letter-spacing:.02em; }
.price__num{ font-size:clamp(34px,3.6vw,44px); font-weight:800;
  font-variation-settings:"wght" 800; letter-spacing:normal; }
.price__per{ color:var(--ink-4); }
.price__desc{ font-size:14px; color:var(--ink-3); }
.price__list li{ font-size:14px; align-items:center; }
.price__list svg{ width:16px; height:16px; margin-top:0; padding:4px; border-radius:50%;
  background:rgba(var(--wg-rgb),.1); box-sizing:content-box; }
.price .btn{ padding-block:16px; }
.price--pop{ border-color:rgba(var(--wg-rgb),.2);
  background:radial-gradient(120% 60% at 50% 0%, rgba(var(--wg-rgb),.05), var(--paper) 62%);
  box-shadow:0 1px 2px rgba(30,40,36,.03), 0 36px 74px -42px rgba(30,40,36,.3),
    0 0 70px -28px rgba(var(--wg-rgb),.4); }
.price__pop-badge{ background:var(--wg-700); box-shadow:0 10px 24px -12px rgba(var(--wg-rgb),.7); }
.price__list svg{ color:var(--wg-600); }
.price__note b{ color:var(--wg-700); }

/* 8.6 final CTA — the architectural scene stays, calmed for the cream palette */
.cta2{ background:var(--cream); }
.cta2__bg img{ opacity:.52; object-position:60% 55%; }
.cta2__wash{ background:
    radial-gradient(75% 60% at 50% 52%, rgba(var(--wg-rgb),.10), rgba(var(--wg-rgb),0) 70%),
    linear-gradient(180deg, rgba(251,248,242,.82) 0%, rgba(251,248,242,.55) 45%, rgba(251,248,242,.9) 100%); }
.cta2__eyebrow{ color:var(--ink-2); background:rgba(255,255,255,.7);
  border-color:rgba(30,40,36,.07); font-weight:500; }
.cta2__eyebrow svg{ color:var(--wg-600); }
.cta2 h2{ font-weight:800; font-variation-settings:"wght" 800; letter-spacing:normal; }
.cta2__form{ background:rgba(255,255,255,.82); border-color:rgba(255,255,255,.9);
  border-radius:var(--r-pill); padding:8px 8px 8px 24px;
  box-shadow:0 26px 62px -36px rgba(30,40,36,.34), 0 0 50px -14px rgba(var(--wg-rgb),.18); }
.cta2__sub svg{ color:var(--wg-600); }

/* 8.7 footer */
.nfooter{ border-block-start-color:rgba(30,40,36,.07); }


/* ===================================================================
   9. UX audit — trust row under the hero CTA, «به‌زودی» learn card
   =================================================================== */
.hx__trust{
  margin-top:var(--sp-5); list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  font-size:13.5px; color:var(--ink-3);
}
.hx__trust li{ display:inline-flex; align-items:center; gap:8px; }
.hx__trust li::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* a card that promises nothing it cannot deliver yet */
.learn__card.is-soon{ cursor:default; opacity:.72; }
.learn__card.is-soon:hover{ transform:none; box-shadow:var(--sh-xs); }
.learn__soon{
  display:inline-flex; align-items:center; align-self:flex-start; margin-top:auto;
  padding:4px 12px; border-radius:var(--r-pill);
  background:var(--cream); border:1px solid var(--line-2);
  font-size:12.5px; font-weight:600; color:var(--ink-3);
}

/* ===================================================================
   10. Feature previews — each mock mirrors the real screen it links to
   (filings, contract builder, ruling search). Same tokens, same shapes,
   scaled down; nothing here is a screenshot, so it stays crisp.
   =================================================================== */
.mv__tbl{ display:grid; grid-template-columns:max-content 1fr; border:1px solid var(--line-2);
  border-radius:8px; overflow:hidden; }
.mv__tbl dt, .mv__tbl dd{ padding:8px 8px; font-size:10.5px; line-height:1.8;
  border-block-end:1px solid var(--line); }
.mv__tbl dt{ background:var(--cream); font-weight:700; color:var(--ink-2); }
.mv__tbl dd{ color:var(--ink-3); }
.mv__tbl > :nth-last-child(-n+2){ border-block-end:0; }
.mv__blank{ background:var(--amber-bg); color:var(--amber-ink); padding:2px 8px; border-radius:4px;
  border:1px dashed var(--amber-tile); font-size:10px; white-space:nowrap; }

/* contract builder: template chips · form · live paper */
.mv--build{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.mv__tpls{ display:flex; gap:8px; flex-wrap:wrap; }
.mv__tpl{ font-size:9.5px; font-weight:600; padding:4px 8px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-3); background:var(--paper); }
.mv__tpl.is-on{ border-color:var(--wg-700); color:var(--wg-800); background:rgba(var(--wg-rgb),.08); }
.mv__split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:8px; align-items:start; }
.mv__form{ display:flex; flex-direction:column; gap:8px; }
.mv__form label{ display:flex; flex-direction:column; gap:4px; }
.mv__form span{ font-size:9px; font-weight:600; color:var(--ink-4); }
.mv__form label i{ font-style:normal; font-size:10.5px; color:var(--ink-2); padding:8px 8px;
  border:1px solid var(--line-2); border-radius:8px; background:var(--paper-warm); }
.mv__prog{ margin-top:2px; }
.mv__prog span{ font-size:9px; color:var(--ink-4); }
.mv__prog i{ display:block; height:4px; margin-top:4px; padding:0; border:0; border-radius:99px;
  background:var(--line); overflow:hidden; }
.mv__prog i b{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--wg-600),var(--wg-400)); }
.mv__paper{ background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:8px 12px;
  box-shadow:0 8px 18px -14px rgba(30,40,36,.3); }
.mv__paper > b{ display:block; text-align:center; font-size:10.5px; font-weight:800; color:var(--ink);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.mv__paper p{ font-size:10px; line-height:1.95; color:var(--ink-3); }
.mv__paper p + p{ margin-top:4px; }
.mv__paper u{ display:block; text-decoration:none; font-weight:700; color:var(--wg-800); }
.mv__paper em{ font-style:normal; font-weight:700; color:var(--ink); }

/* ruling search: search field · filters · one result card */
.mv--rulings{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.mv__search{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line-2); font-size:10.5px; color:var(--ink-2); }
.mv__search svg{ width:13px; height:13px; color:var(--ink-4); flex:none; }
.mv__fchips{ display:flex; gap:4px; flex-wrap:wrap; }
.mv__fchips span{ font-size:9.5px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-3); background:var(--paper); }
.mv__fchips .is-on{ background:var(--wg-800); border-color:var(--wg-800); color:#F0F6F1; font-weight:600; }
.mv__rcard{ padding:8px 12px; border-radius:10px; background:var(--paper);
  border:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px; }
.mv__rtop{ display:flex; align-items:center; gap:8px; font-size:9px; font-weight:600; color:var(--wg-800); }
.mv__rtop i{ font-style:normal; margin-inline-start:auto; font-weight:500; color:var(--ink-4);
  background:var(--cream); padding:2px 8px; border-radius:999px; }
.mv__rcard b{ font-size:11px; font-weight:700; color:var(--ink); line-height:1.6; }
.mv__rcard p{ font-size:10px; line-height:1.85; color:var(--ink-3); }
.mv__tags{ display:flex; gap:4px; flex-wrap:wrap; }
.mv__tags i{ font-style:normal; font-size:9px; padding:2px 8px; border-radius:999px;
  background:rgba(var(--wg-rgb),.08); color:var(--wg-800); }

@media (max-width:560px){
  .mv__split{ grid-template-columns:1fr; }
}

/* ===================================================================
   11. Trust: retrieval made visible
   The product's whole claim is "we show you the law, we don't assert it",
   so the hero says how an answer is built and the demo card shows what it
   was built from.
   =================================================================== */
.ask__cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ask__cite{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:var(--r-pill);
  background:rgba(var(--wg-rgb),.07); border:1px solid var(--green-line);
  font-size:12px; font-weight:600; color:var(--wg-800); }
.ask__cite svg{ width:12px; height:12px; }

.hx__how{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px;
  margin-top:var(--sp-5); width:min(820px,100%); margin-inline:auto; }
.hx__how li{ flex:1 1 220px; display:flex; align-items:flex-start; gap:8px; text-align:start;
  padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.62);
  border:1px solid rgba(30,40,36,.06); backdrop-filter:blur(8px); }
.hx__how li > span{ width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--wg-700); color:#F6FAF6; font-size:11px; font-weight:700; }
.hx__how b{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.hx__how i{ display:block; margin-top:2px; font-style:normal; font-size:12px; line-height:1.7; color:var(--ink-3); }

@media (max-width:640px){
  .hx__how li{ flex:1 1 100%; }
}

/* ===================================================================
   12. Live page previews in the امکانات section
   Each panel embeds the real tool page (app.html?preview=1#/…) scaled to
   fit. No screenshots to keep in sync: what you see is the page itself.
   =================================================================== */
.pv{ position:relative; width:100%; border-radius:18px; overflow:hidden;
  background:var(--stone); border:1px solid rgba(30,40,36,.08);
  box-shadow:0 26px 60px -42px rgba(30,40,36,.4); }
.pv{ height:clamp(400px,56vh,520px); }
/* the preview is the point of this card, so it gets the wider column
   (the mock has order:1, so it sits in the FIRST column) */
.stage__card{ grid-template-columns:1.12fr .88fr; }
.stage__mock{ padding:12px; }
@media (max-width:900px){ .stage__card{ grid-template-columns:1fr; } }
.pv__frame{ display:block; width:100%; height:100%; border:0; background:var(--stone); }
.pv__tag{ position:absolute; z-index:2; inset-block-end:10px; inset-inline-start:10px;
  padding:4px 12px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600;
  color:var(--wg-800); background:rgba(255,255,255,.82); border:1px solid var(--green-line);
  backdrop-filter:blur(8px); }
.pv::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); border-radius:inherit; }

/* ===================================================================
   13. Round two of visual polish
   · a green light that looks like light, not a flat wash
   · آموزش cards with a quiet green gradient and corner marks
   · previews rendered smaller so they read as a screen, not a page
   =================================================================== */

/* --- 13.1 the hero light: two offset pools + a warm core, so the glow has
   a direction and a falloff instead of one even circle --- */
.hx__glow{
  width:min(1040px,94vw); height:min(600px,58vh);
  background:
    radial-gradient(42% 46% at 38% 58%, rgba(var(--wg-rgb),.34) 0%, rgba(var(--wg-rgb),0) 70%),
    radial-gradient(38% 42% at 66% 44%, rgba(var(--wg-warm-rgb),.26) 0%, rgba(var(--wg-warm-rgb),0) 72%),
    radial-gradient(60% 55% at 50% 52%, rgba(var(--wg-rgb),.16) 0%, rgba(var(--wg-rgb),0) 78%);
  filter:blur(26px);
  animation:hxGlow 18s ease-in-out infinite alternate;
}
@keyframes hxGlow{
  from{ transform:translateX(50%) scale(1); opacity:.92; }
  to{ transform:translateX(50%) scale(1.06) translateY(-1.5%); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .hx__glow{ animation:none; } }

/* the same light, softly, behind the raised comparison card and the popular plan */
.duel__lara, .vs__card, .price--pop{ position:relative; }
.duel__lara::before, .vs__card::before{
  content:""; position:absolute; inset:-14% -8% -18%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 55%, rgba(var(--wg-rgb),.22), rgba(var(--wg-rgb),0) 72%);
  filter:blur(22px);
}

/* --- 13.2 آموزش cards: subtle green gradient, hairline grid, corner marks --- */
.learn__card{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(var(--wg-rgb),.14) 0%, rgba(var(--wg-rgb),.03) 45%, rgba(var(--wg-rgb),0) 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.learn__card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background:
    linear-gradient(to left, rgba(var(--wg-rgb),.13) 1px, transparent 1px) 0 0/34px 100%,
    linear-gradient(to top, rgba(var(--wg-rgb),.13) 1px, transparent 1px) 0 0/100% 34px;
  -webkit-mask-image:radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(90% 70% at 100% 0%, #000 0%, transparent 70%);
}
/* the small cross-hairs of the reference, drawn with two hairlines */
.learn__card::after{
  content:""; position:absolute; inset-block-start:14px; inset-inline-start:14px;
  width:11px; height:11px; pointer-events:none; opacity:.8;
  background:
    linear-gradient(to right, var(--wg-600) 0 100%) center/11px 1px no-repeat,
    linear-gradient(to bottom, var(--wg-600) 0 100%) center/1px 11px no-repeat;
}
.learn__card:not(.is-soon):hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(30,40,36,.04), 0 28px 56px -32px rgba(var(--wg-rgb),.5);
  border-color:rgba(var(--wg-rgb),.3);
}
.learn__ic{ background:linear-gradient(180deg, rgba(var(--wg-rgb),.12), rgba(var(--wg-rgb),.05));
  border:1px solid rgba(var(--wg-rgb),.16); }
.learn__card:hover .learn__ic{ background:var(--wg-700); color:#F6FAF6; border-color:var(--wg-700); }

/* --- 13.3 footer: a lit surface, not a plain block ---------------------
   A wide green pool behind the top edge (the way the hero is lit), a
   hairline that fades in from both ends, and column heads that read as
   labels. Same tokens, same links, nothing added to the markup. */
.nfooter{
  position:relative; overflow:hidden; border-top:0;
  /* a slightly deeper ground so the light above it has something to sit on */
  background:linear-gradient(180deg, #F2EEE4 0%, #F6F2EA 42%, #FBF8F2 100%);
}
.nfooter::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:-28%; inset-inline-start:50%; transform:translateX(50%);
  width:min(1280px,130vw); height:min(620px,64vh);
  background:
    radial-gradient(46% 52% at 38% 58%, rgba(var(--wg-rgb),.42) 0%, rgba(var(--wg-rgb),0) 70%),
    radial-gradient(42% 46% at 66% 42%, rgba(var(--wg-warm-rgb),.34) 0%, rgba(var(--wg-warm-rgb),0) 72%);
  filter:blur(34px);
}
/* the hairline the border used to draw, now fading out at both ends */
.nfooter::after{
  content:""; position:absolute; z-index:1; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(to left, rgba(var(--wg-rgb),0), rgba(var(--wg-rgb),.35) 22%,
    rgba(var(--wg-rgb),.35) 78%, rgba(var(--wg-rgb),0));
}
.nfooter .container{ position:relative; z-index:2; }

.nfooter__brand p{ font-size:14px; line-height:2; }
.nfooter__col h4{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.06em; color:var(--wg-800);
}
.nfooter__col h4::before{
  content:""; width:14px; height:1px; background:rgba(var(--wg-rgb),.45);
}
.nfooter__col a{ position:relative; display:inline-block; padding-block:2px; }
.nfooter__col a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0; width:0; height:1px;
  background:var(--wg-600); transition:width .28s var(--ease);
}
.nfooter__col a:hover::after{ width:100%; }
.nfooter__contact li{ font-size:14px; }

.nfooter__bar{ border-top:1px solid rgba(var(--wg-rgb),.14); }
.nfooter__word{
  -webkit-text-stroke:1px rgba(var(--wg-rgb),.16); text-stroke:1px rgba(var(--wg-rgb),.16);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
}

/* ===================================================================
   14. Green with a job, and cards that are not boxes
   Green stops being the default tint of everything. It now marks four
   things only: the primary action, the active state, the proof (citation,
   check), and one pool of light per section. Everything else goes back to
   ink and paper — which is what makes the green read as deliberate.
   =================================================================== */

/* 14.1 — neutral hairlines for ordinary surfaces */
.stage__card,
.price,
.learn__card,
.duel__card,
.cta2__form{
  border-color:rgba(30,40,36,.07) !important;
}
.stage__card{ background:var(--paper); }          /* the green corner wash goes */
.stage__mock{ background:var(--stone); border-color:rgba(30,40,36,.05); }

/* the eyebrow chips were green-on-green; ink reads calmer and lets the
   section title carry the eye */
.eyebrow{ color:var(--ink-2); }
.eyebrow svg{ color:var(--ink-4); }

/* icon tiles: stone by default, green only when the thing is selected */
.stage__ic,
.learn__ic{
  background:linear-gradient(180deg, #F4F1EA, #EFEBE2);
  border:1px solid rgba(30,40,36,.06);
  color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
/* hover has to be unmistakable: the tile fills, the icon turns white,
   and a soft ring separates it from the card underneath */
.learn__card:not(.is-soon):hover .learn__ic,
.learn__card:not(.is-soon):focus-visible .learn__ic,
.stage.is-active .stage__ic{
  background:linear-gradient(180deg, var(--wg-700), var(--wg-800));
  border-color:var(--wg-800); color:#F6FAF6;
  box-shadow:0 12px 24px -12px rgba(var(--wg-rgb),.75),
             0 0 0 5px rgba(var(--wg-rgb),.10);
  transform:translateY(-2px) scale(1.04);
}
.learn__ic{ transition:background .26s var(--ease), color .26s var(--ease),
  border-color .26s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease); }
/* and the card itself answers the pointer, not just the tile */
.learn__card:not(.is-soon):hover h3{ color:var(--wg-900); }
.learn__card:not(.is-soon):hover .learn__go{ color:var(--wg-800); }
.learn__card:not(.is-soon):hover::after{ opacity:1; background:
    linear-gradient(to right, var(--wg-700) 0 100%) center/11px 1px no-repeat,
    linear-gradient(to bottom, var(--wg-700) 0 100%) center/1px 11px no-repeat; }
.ftab__ic{ background:var(--paper); border:1px solid rgba(30,40,36,.07); color:var(--ink-3); }
.ftab.is-active .ftab__ic{ background:var(--wg-700); border-color:var(--wg-700); color:#F6FAF6; }

/* 14.2 — softer bodies: bigger radius, shadow-first elevation, no hard edges */
:root{ --r-2xl:30px; }
.stage__card{ border-radius:32px; box-shadow:0 1px 2px rgba(30,40,36,.03), 0 40px 80px -52px rgba(30,40,36,.34); }
.stage__mock{ border-radius:24px; }
.learn__card{ border-radius:26px; box-shadow:0 1px 2px rgba(30,40,36,.03), 0 22px 44px -34px rgba(30,40,36,.3); }
.price{ border-radius:28px; }
.stage__ic, .learn__ic{ border-radius:18px; }
.ftab{ border-radius:20px; }
.ftab__ic{ border-radius:14px; }
.pv{ border-radius:22px; }

/* the check marks are proof, so they keep the colour */
.ck{ color:var(--wg-700); }