/* ==========================================================================
   ARZDOON — ارزدون | صرافی ارز دیجیتال
   Design system: "شمش و سند" — gold bullion + engraved certificate
   Author: Arzdoon Design Studio
   ========================================================================== */

/* ---------- 1. Fonts (offline) ---------- */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
      url('../fonts/Vazirmatn-Variable.woff2') format('woff2 supports variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{font-family:'Vazirmatn Static';src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn Static';src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn Static';src:url('../fonts/Vazirmatn-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  /* palette — dark (default) */
  --bg:#08060B;
  --bg-2:#0D0A10;
  --surface:#131019;
  --surface-2:#1A1620;
  --surface-3:#231D2C;
  --border:rgba(226,180,74,.16);
  --border-soft:rgba(255,255,255,.07);
  --text:#F4EDE0;
  --text-2:#CFC3B0;
  --muted:#94886F;

  --gold:#E2B44A;
  --gold-hi:#F8E3A8;
  --gold-lo:#A87C1B;
  --gold-ink:#1A1200;
  --gold-grad:linear-gradient(135deg,#F8E3A8 0%,#E2B44A 38%,#B98C22 72%,#F3D68C 100%);
  --gold-grad-soft:linear-gradient(135deg,rgba(248,227,168,.16),rgba(185,140,34,.06));

  --up:#2ED3A0;
  --down:#F2555A;
  --violet:#8C6BFF;

  --glow:0 0 0 1px rgba(226,180,74,.18), 0 24px 60px -28px rgba(226,180,74,.45);
  --shadow:0 30px 70px -40px rgba(0,0,0,.9);
  --shadow-sm:0 10px 30px -20px rgba(0,0,0,.8);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --wrap:1240px;
  --gut:clamp(16px,4vw,28px);
  --sp-sec:clamp(56px,7vw,104px);

  --fs-hero:clamp(2.2rem,1.2rem + 3.4vw,4.1rem);
  --fs-h2:clamp(1.5rem,1rem + 1.7vw,2.4rem);
  --fs-h3:clamp(1.1rem,.95rem + .6vw,1.4rem);

  --ease:cubic-bezier(.22,.68,.28,1);
  --guilloche:radial-gradient(circle at 20% 10%,rgba(226,180,74,.10),transparent 45%),
              radial-gradient(circle at 85% 0%,rgba(140,107,255,.10),transparent 40%);
  color-scheme:dark;
}

[data-theme="light"]{
  --bg:#F7F2E7;
  --bg-2:#FFFDF8;
  --surface:#FFFFFF;
  --surface-2:#FBF5E9;
  --surface-3:#F3EBD9;
  --border:rgba(168,124,27,.24);
  --border-soft:rgba(26,18,0,.09);
  --text:#191204;
  --text-2:#463A24;
  --muted:#7A6A4C;
  --gold:#A87C1B;
  --gold-hi:#C9992F;
  --gold-lo:#7A5A10;
  --gold-ink:#FFF9EA;
  --gold-grad:linear-gradient(135deg,#C9992F 0%,#A87C1B 45%,#8A6413 75%,#D4A63A 100%);
  --gold-grad-soft:linear-gradient(135deg,rgba(201,153,47,.16),rgba(168,124,27,.05));
  --up:#0E9E72;
  --down:#D23A40;
  --violet:#5B3FD1;
  --glow:0 0 0 1px rgba(168,124,27,.2), 0 24px 50px -30px rgba(168,124,27,.4);
  --shadow:0 26px 60px -42px rgba(60,40,0,.5);
  --shadow-sm:0 10px 26px -22px rgba(60,40,0,.5);
  color-scheme:light;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:'Vazirmatn','Vazirmatn Static',system-ui,sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:var(--guilloche);
  background-attachment:fixed;
}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4,h5{margin:0;line-height:1.35;font-weight:800;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--gold-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-lo),var(--gold));border-radius:99px;border:2px solid var(--bg-2)}

.num,.mono{font-family:'Vazirmatn',monospace;font-variant-numeric:tabular-nums;letter-spacing:0}
.toman-ic{display:inline-flex;align-items:center;gap:4px}
.toman-ic::before{content:"";flex:0 0 auto;width:13px;height:13px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%23E2B44A%22%3E%3C/circle%3E%3Cpath%20fill%3D%22%23211805%22%20d%3D%22M12.113%207.352h1.297v3.459h-1.297zM6.27%206.484V5.187h3.242v1.297zm-3.891.868h1.297v3.459H2.379z%22%3E%3C/path%3E%3Cpath%20fill%3D%22%23211805%22%20d%3D%22M13.406%209.515v1.297H2.379V9.515z%22%3E%3C/path%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}
.fa-num{font-feature-settings:"ss01";font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(var(--wrap),100% - (var(--gut) * 2));margin-inline:auto}
.wrap--narrow{width:min(880px,100% - (var(--gut) * 2))}
.section{padding-block:var(--sp-sec);position:relative}
.section--tight{padding-block:clamp(36px,5vw,64px)}
.section--tint{background:linear-gradient(180deg,transparent,var(--bg-2) 12%,var(--bg-2) 88%,transparent)}

/* ---------- 4. Typographic atoms ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;
  padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--gold-grad-soft);
  color:var(--gold);
}
.eyebrow--plain{background:transparent}
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.h-sec{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.02em}
.lead{color:var(--text-2);font-size:clamp(.95rem,.9rem + .25vw,1.08rem);max-width:62ch}
.muted{color:var(--muted)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3vw,42px)}
.sec-head__text{max-width:66ch;display:grid;gap:12px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);border:0;margin:0}

/* engraved divider — banknote guilloché */
.engrave{
  height:26px;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0 1px,transparent 1px 7px);
  opacity:.22;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 50% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 100% at 50% 50%,#000,transparent 75%);
}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-pad:13px 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-pad);border-radius:var(--r-pill);
  font-weight:700;font-size:.94rem;line-height:1;
  border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold-grad);color:#1A1200;box-shadow:0 14px 34px -18px rgba(226,180,74,.9)}
.btn--gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.btn--gold:hover::after{transform:translateX(120%)}
.btn--ghost{border-color:var(--border);color:var(--text);background:color-mix(in srgb,var(--surface) 65%,transparent)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--soft{background:var(--surface-2);border-color:var(--border-soft);color:var(--text)}
.btn--soft:hover{border-color:var(--gold)}
.btn--line{border-color:var(--gold);color:var(--gold)}
.btn--line:hover{background:var(--gold);color:var(--gold-ink)}
.btn--lg{--btn-pad:16px 30px;font-size:1rem}
.btn--sm{--btn-pad:9px 16px;font-size:.84rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--gold);font-size:.92rem}
.link-arrow span{transition:transform .3s var(--ease)}
.link-arrow:hover span{transform:translateX(-6px)}

/* ---------- 6. Card ---------- */
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,30px);
  position:relative;
  transition:border-color .3s,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card--hover:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:var(--shadow)}
.card--gold{border-color:var(--border);box-shadow:var(--glow)}
.card__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--gold-grad-soft);border:1px solid var(--border);color:var(--gold);
  font-size:1.15rem;font-weight:800;
}
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ---------- 7. Header ---------- */
.tape{
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-2);
  overflow:hidden;position:relative;
}
.tape__track{display:flex;gap:0;width:max-content;animation:tape 46s linear infinite}
.tape:hover .tape__track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(50%)}}
.tape__item{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 20px;font-size:.8rem;white-space:nowrap;
  border-inline-start:1px solid var(--border-soft);
}
.tape__item b{font-weight:700;color:var(--text-2);font-family:sans-serif}
.tape__item .v{font-family:'Vazirmatn';font-variant-numeric:tabular-nums;color:var(--text)}
.tape__item .c{font-family:'Vazirmatn';font-size:.76rem}
.up{color:var(--up)} .down{color:var(--down)}

.hdr{position:sticky;top:0;z-index:70}
.hdr__bar{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .3s,background .3s;
}
.hdr.is-stuck .hdr__bar{box-shadow:0 18px 40px -34px rgba(0,0,0,.95);background:color-mix(in srgb,var(--bg) 94%,transparent)}
.hdr__row{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand svg{width:38px;height:38px}
.brand__name{display:grid;line-height:1.15}
.brand__name b{font-size:1.16rem;font-weight:900;letter-spacing:-.02em}
.brand__name small{font-size:.6rem;letter-spacing:.24em;color:var(--muted);font-family:'Vazirmatn'}

.nav{margin-inline-end:auto}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__list > li > a,.nav__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;color:var(--text-2);
  transition:color .2s,background .2s;
}
.nav__list > li > a:hover,.nav__btn:hover{color:var(--gold);background:var(--surface-2)}
.nav__list > li > a.is-active{color:var(--gold);background:var(--gold-grad-soft)}
.nav__btn b{font-size:.6rem;transition:transform .25s}
.has-mega{position:relative}
.has-mega.is-open .nav__btn{color:var(--gold);background:var(--surface-2)}
.has-mega.is-open .nav__btn b{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 14px);inset-inline-start:50%;transform:translateX(50%) translateY(-8px);
  width:min(760px,92vw);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:22px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:22px;
  opacity:0;visibility:hidden;transition:.28s var(--ease);
}
.has-mega.is-open .mega{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}
.mega h4{font-size:.72rem;letter-spacing:.12em;color:var(--muted);margin-bottom:12px;font-weight:700}
.mega__list{display:grid;gap:6px}
.mega__list a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;transition:background .2s}
.mega__list a:hover{background:var(--surface-3)}
.mega__list strong{font-size:.9rem;display:block}
.mega__list small{font-size:.74rem;color:var(--muted);display:block;line-height:1.5}
.mega__side{background:var(--gold-grad-soft);border:1px solid var(--border);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start}

.hdr__act{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--border-soft);background:var(--surface-2);
  color:var(--text-2);transition:.24s;
}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.kbd{
  font-family:'Vazirmatn';font-size:.66rem;border:1px solid var(--border-soft);
  border-radius:6px;padding:2px 6px;color:var(--muted);background:var(--bg);
}
.search-btn{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;
  border:1px solid var(--border-soft);border-radius:13px;background:var(--surface-2);
  color:var(--muted);font-size:.84rem;transition:.24s;
}
.search-btn:hover{border-color:var(--gold);color:var(--gold)}
.search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.burger{display:none;width:42px;height:42px;border-radius:13px;border:1px solid var(--border-soft);background:var(--surface-2);padding:11px}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.burger span + span{margin-top:5px}
.burger.is-on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 8. Footer ---------- */
.ftr{
  margin-top:clamp(50px,7vw,96px);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-top:1px solid var(--border);
  position:relative;
}
.ftr::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--gold-grad);opacity:.7}
.ftr__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding-block:clamp(40px,5vw,64px)}
.ftr__brand{display:grid;gap:16px;align-content:start;max-width:38ch}
.ftr__col h4{font-size:.94rem;margin-bottom:14px;color:var(--gold)}
.ftr__col li + li{margin-top:9px}
.ftr__col a{font-size:.88rem;color:var(--text-2);transition:.2s}
.ftr__col a:hover{color:var(--gold);padding-inline-start:5px}
.ftr__contacts{display:grid;gap:8px;font-size:.88rem}
.ftr__contacts a{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}
.ftr__contacts a:hover{color:var(--gold)}
.trustline{display:flex;flex-wrap:wrap;gap:12px;padding-block:26px;border-top:1px solid var(--border-soft)}
.trust-badge{
  display:flex;align-items:center;gap:11px;padding:11px 16px;
  border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface);
  font-size:.8rem;color:var(--text-2);
}
.trust-badge svg{width:26px;height:26px;color:var(--gold)}
.ftr__bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-block:22px;border-top:1px solid var(--border-soft);
  font-size:.8rem;color:var(--muted);
}
.socials{display:flex;gap:9px}
.socials a{width:36px;height:36px;border-radius:11px;border:1px solid var(--border-soft);display:grid;place-items:center;color:var(--text-2);transition:.24s}
.socials a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ---------- 9. Utility bits ---------- */
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(46,211,160,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(46,211,160,0)}100%{box-shadow:0 0 0 0 rgba(46,211,160,0)}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;border:1px solid var(--border-soft);background:var(--surface-2)}
.chip--up{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,transparent);background:color-mix(in srgb,var(--up) 12%,transparent)}
.chip--down{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,transparent);background:color-mix(in srgb,var(--down) 12%,transparent)}
.chip--gold{color:var(--gold);border-color:var(--border);background:var(--gold-grad-soft)}
.coin-ico{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-family:'Vazirmatn';font-weight:700;font-size:.78rem;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.coin-ico--lg{width:56px;height:56px;font-size:1rem}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   10. HERO — the signature: engraved gold ingot + spinning sovereign
   ========================================================================== */
.hero{position:relative;padding-block:clamp(46px,6vw,86px) clamp(40px,5vw,72px);overflow:hidden}
.hero__aura{
  position:absolute;inset:-30% -10% auto;height:120%;pointer-events:none;z-index:0;
  background:
    radial-gradient(48% 40% at 78% 18%,rgba(226,180,74,.20),transparent 70%),
    radial-gradient(40% 36% at 12% 12%,rgba(140,107,255,.14),transparent 70%);
  filter:blur(6px);
}
.hero__lines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(75deg,rgba(226,180,74,.055) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-75deg,rgba(226,180,74,.045) 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,3.4vw,54px);align-items:center}
.hero__copy{display:grid;gap:20px;justify-items:start}
.hero h1{font-size:var(--fs-hero);font-weight:900;letter-spacing:-.035em;line-height:1.18}
.hero h1 em{font-style:normal;position:relative;display:inline-block}
.hero h1 em::after{
  content:"";position:absolute;inset-inline:0;bottom:.08em;height:.16em;border-radius:99px;
  background:var(--gold-grad);opacity:.32;z-index:-1;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__proof{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:6px}
.hero__proof li{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text-2)}
.hero__proof svg{width:18px;height:18px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.7}

/* the sovereign coin */
.sovereign{width:clamp(96px,11vw,132px);aspect-ratio:1;position:relative;perspective:800px;flex-shrink:0}
.sovereign__disc{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#8A6413,#F8E3A8 12%,#C9992F 26%,#F6DFA0 40%,#9C721A 55%,#F8E3A8 70%,#B98C22 84%,#8A6413);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.22),inset 0 0 26px rgba(90,60,0,.6),0 22px 44px -22px rgba(226,180,74,.75);
  display:grid;place-items:center;
  animation:spin 16s linear infinite;
  transform-style:preserve-3d;
}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.sovereign__disc::before{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:1.5px dashed rgba(60,40,0,.35);
}
.sovereign__mark{font-weight:900;font-size:clamp(1.4rem,2.6vw,2rem);color:#3A2703;text-shadow:0 1px 0 rgba(255,255,255,.45)}

/* terminal — engraved certificate */
.terminal{
  position:relative;border-radius:var(--r-xl);padding:2px;
  background:linear-gradient(150deg,rgba(248,227,168,.5),rgba(226,180,74,.14) 40%,rgba(140,107,255,.22));
  box-shadow:var(--shadow);
}
.terminal__in{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:calc(var(--r-xl) - 2px);padding:clamp(16px,1.8vw,22px);
  display:grid;gap:14px;position:relative;overflow:hidden;
}
.terminal__in::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:repeating-linear-gradient(45deg,rgba(226,180,74,.05) 0 1px,transparent 1px 12px);
}
.terminal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;position:relative;z-index:1}
.terminal__head strong{display:inline-flex;align-items:center;gap:8px}
.terminal__rows{display:grid;gap:8px;position:relative;z-index:1}
.trow{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:11px 13px;border-radius:16px;border:1px solid var(--border-soft);
  background:var(--bg-2);transition:.25s var(--ease);
}
.trow:hover{border-color:var(--gold);transform:translateX(-4px)}
.trow__name strong{display:block;font-size:.88rem}
.trow__name small{font-size:.72rem;color:var(--muted);font-family:'Vazirmatn'}
.trow__price{font-family:'Vazirmatn';font-variant-numeric:tabular-nums;font-size:.94rem;font-weight:500;transition:color .4s}
.trow__price sub{font-size:.66rem;color:var(--muted);margin-inline-start:3px}
.flash-up{animation:fu .9s ease}
.flash-down{animation:fd .9s ease}
@keyframes fu{0%{background:color-mix(in srgb,var(--up) 22%,transparent)}100%{background:var(--bg-2)}}
@keyframes fd{0%{background:color-mix(in srgb,var(--down) 22%,transparent)}100%{background:var(--bg-2)}}

/* quick trade widget */
.qt{display:grid;gap:11px;position:relative;z-index:1;border-top:1px dashed var(--border);padding-top:14px}
.seg{display:flex;padding:4px;background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--r-pill)}
.seg button{flex:1;padding:9px;border-radius:var(--r-pill);font-size:.86rem;font-weight:700;color:var(--muted);transition:.25s}
.seg button.is-on{background:var(--gold-grad);color:var(--gold-ink)}
.seg--sell button.is-on{background:linear-gradient(135deg,#F2555A,#B92C31);color:#fff}
.field{display:grid;gap:7px}
.field > label{font-size:.78rem;color:var(--muted);font-weight:600}
.input-row{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--border-soft);border-radius:16px;background:var(--bg-2);
  transition:border-color .25s,box-shadow .25s;
}
.input-row:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.input-row input,.input-row output,.input-row select{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:'Vazirmatn';font-size:1.02rem;font-variant-numeric:tabular-nums;
}
.input-row select{font-family:'Vazirmatn';font-size:.88rem;flex:0 0 auto;font-weight:700;color:var(--text)}
.input-row select option{background:var(--surface);color:var(--text)}
.input-row .unit{font-size:.8rem;color:var(--muted);flex-shrink:0}
.qt__out{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-radius:16px;background:var(--gold-grad-soft);border:1px solid var(--border);
}
.qt__out strong{font-family:'Vazirmatn';font-size:1.12rem;color:var(--gold)}

/* stat bar */
.statbar{
  position:relative;z-index:1;margin-top:clamp(26px,3vw,44px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border-soft);border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
}
.statbar > div{background:var(--bg-2);padding:20px 18px;display:grid;gap:5px;text-align:center}
.statbar strong{font-family:'Vazirmatn';font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statbar span{font-size:.8rem;color:var(--muted)}

/* ==========================================================================
   11. MARKET TABLE
   ========================================================================== */
.mkt-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.tabs{display:flex;gap:6px;padding:5px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-pill);flex-wrap:wrap}
.tabs button{padding:9px 16px;border-radius:var(--r-pill);font-size:.85rem;font-weight:700;color:var(--muted);transition:.25s}
.tabs button.is-on{background:var(--gold-grad);color:var(--gold-ink)}
.searchbox{display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--surface-2);min-width:min(280px,100%)}
.searchbox input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:.88rem}
.searchbox svg{width:16px;height:16px;color:var(--muted);stroke:currentColor;fill:none;stroke-width:1.8}

.tbl-wrap{border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.tbl-scroll{overflow-x:auto}
.tbl{min-width:820px}
.tbl thead th{
  text-align:right;padding:15px 18px;font-size:.78rem;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
.tbl thead th[data-sort]{cursor:pointer;user-select:none;transition:color .2s}
.tbl thead th[data-sort]:hover{color:var(--gold)}
.tbl thead th .caret{opacity:.35;font-size:.6rem;margin-inline-start:4px}
.tbl thead th.is-sorted{color:var(--gold)} .tbl thead th.is-sorted .caret{opacity:1}
.tbl tbody tr{border-bottom:1px solid var(--border-soft);transition:background .25s}
.tbl tbody tr:last-child{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl td{padding:14px 18px;font-size:.9rem;white-space:nowrap}
.tbl .asset{display:flex;align-items:center;gap:12px;min-width:190px}
.tbl .asset strong{display:block;font-size:.92rem}
.tbl .asset small{font-size:.74rem;color:var(--muted);font-family:'Vazirmatn'}
.tbl .price{font-family:'Vazirmatn';font-variant-numeric:tabular-nums;font-weight:500}
.spark{width:104px;height:34px}
.tbl-empty{padding:44px;text-align:center;color:var(--muted)}
.tbl-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--surface-2);border-top:1px solid var(--border-soft);font-size:.8rem;color:var(--muted)}
.pager{display:flex;gap:6px}
.pager button{min-width:34px;height:34px;padding:0 9px;border-radius:10px;border:1px solid var(--border-soft);font-family:'Vazirmatn';font-size:.82rem;color:var(--text-2);transition:.2s}
.pager button:hover{border-color:var(--gold);color:var(--gold)}
.pager button.is-on{background:var(--gold-grad);color:var(--gold-ink);border-color:transparent;font-weight:700}

/* market cards (mobile / popular) */
.mcard{display:grid;gap:12px;padding:18px;border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface);transition:.3s var(--ease)}
.mcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.mcard__top{display:flex;align-items:center;gap:11px}
.mcard__top strong{font-size:.94rem;display:block}
.mcard__top small{font-size:.74rem;color:var(--muted);font-family:'Vazirmatn'}
.mcard__price{font-family:'Vazirmatn';font-size:1.14rem;font-weight:700}
.mcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ==========================================================================
   12. COMMAND PALETTE / MODAL / TOAST / DRAWER
   ========================================================================== */
.ovl{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:12vh 16px 16px;opacity:0;visibility:hidden;transition:.25s}
.ovl.is-open{opacity:1;visibility:visible}
.ovl__bg{position:absolute;inset:0;background:rgba(4,3,6,.72);backdrop-filter:blur(6px)}
.cmd{
  position:relative;width:min(660px,100%);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(-14px) scale(.98);transition:.3s var(--ease);
}
.ovl.is-open .cmd{transform:none}
.cmd__search{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-soft)}
.cmd__search input{flex:1;background:none;border:0;outline:none;font-size:1rem}
.cmd__search svg{width:19px;height:19px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.8}
.cmd__body{max-height:52vh;overflow-y:auto;padding:10px}
.cmd__group h5{font-size:.7rem;letter-spacing:.1em;color:var(--muted);padding:10px 12px 6px;font-weight:700}
.cmd__item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:14px;text-align:right;transition:background .18s}
.cmd__item:hover,.cmd__item.is-cur{background:var(--surface-3)}
.cmd__item strong{font-size:.9rem;display:block}
.cmd__item small{font-size:.75rem;color:var(--muted)}
.cmd__item .go{margin-inline-start:auto;color:var(--gold);font-size:.8rem}
.cmd__foot{display:flex;gap:16px;padding:11px 20px;border-top:1px solid var(--border-soft);font-size:.74rem;color:var(--muted)}

.drawer{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(340px,88vw);z-index:110;
  background:linear-gradient(180deg,var(--surface),var(--bg));
  border-inline-start:1px solid var(--border);
  transform:translateX(-100%);transition:transform .35s var(--ease);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-soft)}
.drawer__body{overflow-y:auto;padding:16px 20px;display:grid;gap:4px;align-content:start}
.drawer__body a{padding:13px 14px;border-radius:14px;font-weight:600;font-size:.95rem;transition:.2s}
.drawer__body a:hover,.drawer__body a.is-active{background:var(--surface-2);color:var(--gold)}
.drawer__body h5{font-size:.7rem;letter-spacing:.1em;color:var(--muted);padding:14px 14px 6px}
.drawer__foot{padding:18px 20px;border-top:1px solid var(--border-soft);display:grid;gap:9px}
.scrim{position:fixed;inset:0;z-index:100;background:rgba(4,3,6,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s}
.scrim.is-open{opacity:1;visibility:visible}

.toasts{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:140;display:grid;gap:10px;width:min(330px,calc(100vw - 32px))}
.toast{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  animation:tin .4s var(--ease);
}
.toast.is-out{animation:tout .3s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(10px) scale(.97)}}
.toast strong{display:block;font-size:.88rem}
.toast small{font-size:.78rem;color:var(--muted);line-height:1.6}
.toast__ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--gold-grad-soft);color:var(--gold);flex-shrink:0;font-weight:800}

/* floating actions */
.fab{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:60;display:grid;gap:10px;justify-items:end}
.fab__btn{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);color:var(--gold);
  box-shadow:var(--shadow-sm);transition:.28s var(--ease);
}
.fab__btn:hover{transform:translateY(-4px);border-color:var(--gold)}
.fab__btn--gold{background:var(--gold-grad);color:var(--gold-ink);border-color:transparent}
.fab__btn.is-hidden{opacity:0;pointer-events:none;transform:scale(.7)}
.fab__btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ==========================================================================
   13. PAGE HEADER (inner pages)
   ========================================================================== */
.phead{position:relative;padding-block:clamp(38px,5vw,68px) clamp(26px,3vw,40px);overflow:hidden;border-bottom:1px solid var(--border-soft)}
.phead::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 100% at 82% 0%,rgba(226,180,74,.16),transparent 70%);
}
.phead__in{position:relative;z-index:1;display:grid;gap:14px;justify-items:start}
.phead h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);font-weight:900;letter-spacing:-.03em}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5}

/* ==========================================================================
   14. FEATURE / STEP / VALUE BLOCKS
   ========================================================================== */
.feat{display:grid;gap:12px;padding:clamp(20px,2.2vw,28px);border-radius:var(--r-lg);border:1px solid var(--border-soft);background:var(--surface);transition:.35s var(--ease);position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;background:var(--gold-grad);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.feat:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:var(--shadow)}
.feat:hover::before{transform:scaleX(1)}
.feat h3{font-size:var(--fs-h3)}
.feat p{color:var(--text-2);font-size:.9rem}

.steps{display:grid;gap:0;counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding-block:24px;border-bottom:1px dashed var(--border-soft);
}
.step:last-child{border-bottom:0}
.step__n{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-family:'Vazirmatn';font-weight:700;font-size:1.05rem;
  background:var(--gold-grad-soft);border:1px solid var(--border);color:var(--gold);
}
.step h3{font-size:var(--fs-h3);margin-bottom:7px}
.step p{color:var(--text-2);font-size:.92rem}

.ilist{display:grid;gap:11px}
.ilist li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--text-2)}
.ilist li::before{
  content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--gold-grad-soft);border:1px solid var(--border);color:var(--gold);font-size:.72rem;margin-top:4px;
}
.xlist li::before{content:"×";color:var(--down);border-color:color-mix(in srgb,var(--down) 35%,transparent);background:color-mix(in srgb,var(--down) 10%,transparent)}

.note{display:flex;gap:12px;padding:15px 17px;border-radius:var(--r);border:1px solid var(--border);background:var(--gold-grad-soft)}
.note__ico{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--gold);color:var(--gold-ink);font-weight:800;flex-shrink:0;font-size:.82rem}
.note p{font-size:.86rem;color:var(--text-2);line-height:1.8}
.note--warn{border-color:color-mix(in srgb,var(--down) 40%,transparent);background:color-mix(in srgb,var(--down) 9%,transparent)}
.note--warn .note__ico{background:var(--down);color:#fff}

/* ==========================================================================
   15. FAQ / ACCORDION
   ========================================================================== */
.acc{display:grid;gap:11px}
.acc__item{border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .3s}
.acc__item.is-open{border-color:var(--border)}
.acc__q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:17px 20px;text-align:right;font-weight:700;font-size:.95rem;transition:color .25s}
.acc__q:hover{color:var(--gold)}
.acc__q i{
  width:26px;height:26px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--gold);font-style:normal;font-size:.9rem;transition:transform .3s var(--ease),background .3s;
}
.acc__item.is-open .acc__q i{transform:rotate(45deg);background:var(--gold);color:var(--gold-ink)}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc__item.is-open .acc__a{grid-template-rows:1fr}
.acc__a > div{overflow:hidden}
.acc__a p{padding:0 20px 19px;color:var(--text-2);font-size:.9rem}

/* ==========================================================================
   16. BLOG / ARTICLE
   ========================================================================== */
.post-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);transition:.35s var(--ease)}
.post-card:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:var(--shadow)}
.post-card__media{aspect-ratio:16/9;position:relative;display:grid;place-items:center;overflow:hidden}
.post-card__media svg{width:100%;height:100%}
.post-card__body{padding:20px;display:grid;gap:10px;align-content:start}
.post-card__meta{display:flex;gap:14px;font-size:.75rem;color:var(--muted)}
.post-card h3{font-size:1.05rem;line-height:1.6}
.post-card p{font-size:.87rem;color:var(--text-2)}

.article{display:grid;gap:20px;font-size:1rem;line-height:2.1}
.article h2{font-size:1.5rem;margin-top:18px}
.article h3{font-size:1.2rem;margin-top:10px}
.article p{color:var(--text-2)}
.article blockquote{
  margin:0;padding:18px 22px;border-inline-start:3px solid var(--gold);
  background:var(--gold-grad-soft);border-radius:var(--r);font-size:.98rem;
}
.article figure{margin:0;display:grid;gap:9px}
.article figcaption{font-size:.78rem;color:var(--muted);text-align:center}
.toc{position:sticky;top:100px;display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface)}
.toc a{font-size:.85rem;color:var(--text-2);padding:7px 10px;border-radius:10px;transition:.2s}
.toc a:hover,.toc a.is-active{background:var(--surface-2);color:var(--gold)}
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(22px,3vw,44px);align-items:start}

/* ==========================================================================
   17. FORMS / AUTH
   ========================================================================== */
.form{display:grid;gap:16px}
.form .input-row{background:var(--surface-2)}
.form small.hint{font-size:.76rem;color:var(--muted)}
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 74px)}
.auth__side{
  position:relative;overflow:hidden;padding:clamp(30px,4vw,60px);
  display:grid;align-content:center;gap:22px;
  background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border-inline-start:1px solid var(--border-soft);
}
.auth__side::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 20%,rgba(226,180,74,.18),transparent 70%)}
.auth__panel{padding:clamp(28px,4vw,60px);display:grid;align-content:center;justify-items:stretch}
.auth__panel > div{width:min(420px,100%);margin-inline:auto;display:grid;gap:20px}
.otp{display:flex;gap:10px;direction:ltr;justify-content:center}
.otp input{
  width:52px;height:60px;text-align:center;font-family:'Vazirmatn';font-size:1.4rem;
  border:1px solid var(--border-soft);border-radius:14px;background:var(--surface-2);outline:none;transition:.25s;
}
.otp input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.pw-meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;background:var(--gold-grad);transition:width .35s var(--ease),background .35s}

/* ==========================================================================
   18. DASHBOARD
   ========================================================================== */
.dash{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start;padding-block:28px}
.dash__nav{display:grid;gap:5px;padding:16px;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface);position:sticky;top:96px}
.dash__nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;font-size:.9rem;color:var(--text-2);transition:.22s}
.dash__nav a:hover{background:var(--surface-2)}
.dash__nav a.is-on{background:var(--gold-grad-soft);color:var(--gold);font-weight:700}
.dash__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.balance{
  border-radius:var(--r-xl);padding:2px;background:linear-gradient(150deg,rgba(248,227,168,.55),rgba(226,180,74,.12) 45%,rgba(140,107,255,.28));
}
.balance__in{background:linear-gradient(160deg,var(--surface),var(--surface-2));border-radius:calc(var(--r-xl) - 2px);padding:clamp(20px,2.4vw,30px);display:grid;gap:18px}
.balance__val{font-family:'Vazirmatn';font-size:clamp(1.7rem,3vw,2.6rem);font-weight:700}
.holdbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.holdbar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:3px}

/* chart */
.chart-card{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.chart-card__head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-soft)}
.chart-box{position:relative;height:clamp(230px,32vw,360px);padding:12px}
.chart-box canvas{width:100%;height:100%}
.chart-tip{
  position:absolute;pointer-events:none;padding:8px 12px;border-radius:12px;font-size:.76rem;
  background:var(--surface-3);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transform:translate(-50%,-130%);opacity:0;transition:opacity .18s;white-space:nowrap;z-index:2;
}
.chart-tip.is-on{opacity:1}
.chart-tip b{font-family:'Vazirmatn';display:block;color:var(--gold)}

/* orderbook */
.book{display:grid;gap:3px;font-family:'Vazirmatn';font-size:.78rem}
.book__row{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:5px 9px;border-radius:7px;z-index:0}
.book__row i{position:absolute;inset-block:0;inset-inline-end:0;z-index:-1;border-radius:7px;opacity:.14}
.book__row.b i{background:var(--up)} .book__row.s i{background:var(--down)}
.book__row.b span:first-child{color:var(--up)} .book__row.s span:first-child{color:var(--down)}
.book__mid{display:flex;align-items:center;justify-content:space-between;padding:9px;border-block:1px dashed var(--border-soft);margin-block:4px;font-weight:700}

/* fees table */
.tier{display:grid;gap:14px;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);border:1px solid var(--border-soft);background:var(--surface);position:relative}
.tier.is-best{border-color:var(--gold);box-shadow:var(--glow)}
.tier__flag{position:absolute;top:-11px;inset-inline-end:20px;padding:4px 12px;border-radius:99px;background:var(--gold-grad);color:var(--gold-ink);font-size:.72rem;font-weight:800}
.tier__price{font-family:'Vazirmatn';font-size:2rem;font-weight:700;color:var(--gold)}

/* timeline */
.tl{display:grid;gap:0;position:relative;padding-inline-start:26px}
.tl::before{content:"";position:absolute;inset-block:8px;inset-inline-start:5px;width:1px;background:linear-gradient(var(--gold),transparent)}
.tl__item{position:relative;padding-bottom:26px}
.tl__item::before{content:"";position:absolute;inset-inline-start:-26px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
.tl__item h4{font-size:1rem;margin-bottom:5px}
.tl__item time{font-family:'Vazirmatn';font-size:.78rem;color:var(--gold)}
.tl__item p{font-size:.88rem;color:var(--text-2)}

/* misc page bits */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,52px);align-items:center}
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(28px,4vw,54px);
  background:linear-gradient(140deg,var(--surface),var(--surface-2));border:1px solid var(--border);
  display:grid;gap:20px;justify-items:center;text-align:center;
}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(226,180,74,.2),transparent 70%)}
.cta-band > *{position:relative;z-index:1}
.metric{display:grid;gap:4px;text-align:center;padding:18px;border-radius:var(--r);border:1px solid var(--border-soft);background:var(--surface)}
.metric strong{font-family:'Vazirmatn';font-size:1.6rem;color:var(--gold)}
.metric span{font-size:.8rem;color:var(--muted)}
.qr{width:120px;height:120px;border-radius:16px;background:#fff;padding:9px;flex-shrink:0}
.contact-row{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r);border:1px solid var(--border-soft);background:var(--surface);transition:.28s}
.contact-row:hover{border-color:var(--gold);transform:translateY(-3px)}
.err404{display:grid;place-items:center;text-align:center;gap:20px;padding-block:clamp(50px,10vw,120px)}
.err404 b{font-family:'Vazirmatn';font-size:clamp(5rem,16vw,10rem);line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .ftr__top{grid-template-columns:1fr 1fr}
  .layout-side{grid-template-columns:1fr}
  .toc{position:static;order:-1}
  .dash{grid-template-columns:1fr}
  .dash__nav{position:static;display:flex;overflow-x:auto;gap:6px}
  .dash__nav a{white-space:nowrap}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .search-btn span,.search-btn .kbd{display:none}
  .search-btn{width:40px;justify-content:center;padding:0}
  .hdr__act .btn--ghost{display:none}
  .statbar{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth__side{display:none}
  .split{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hdr__row{height:64px}
  .hdr__act .btn--gold{display:none}
  .ftr__top{grid-template-columns:1fr;gap:26px}
  .tbl{min-width:640px}
  .step{grid-template-columns:1fr;gap:12px}
  .fab{inset-block-end:14px;inset-inline-end:14px}
  .toasts{inset-inline:14px;width:auto}
  .brand__name small{display:none}
}
@media print{
  .hdr,.ftr,.fab,.tape,.drawer,.scrim,.ovl{display:none!important}
  body{background:#fff;color:#000}
  .card,.feat,.acc__item{border-color:#ccc;box-shadow:none}
}

/* ---------- 20. Stepper (صفحه سفارش) ---------- */
.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.stepper__i{display:flex;align-items:center;gap:10px;opacity:.45;transition:opacity .3s}
.stepper__i.is-on{opacity:1}
.stepper__i b{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--muted);font-family:'Vazirmatn';font-size:.9rem;transition:.3s;
}
.stepper__i.is-on b{background:var(--gold-grad);color:var(--gold-ink);border-color:transparent}
.stepper__i span{font-size:.88rem;font-weight:700}
.stepper__l{flex:1;min-width:22px;height:1px;background:var(--border-soft)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill-row button{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--border-soft);background:var(--surface-2);font-size:.82rem;transition:.22s}
.pill-row button:hover{border-color:var(--gold);color:var(--gold)}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:.25s}
.radio-card:hover{border-color:var(--gold)}
.radio-card input{margin-top:5px;accent-color:var(--gold)}
.radio-card strong{display:block;font-size:.9rem}
.radio-card small{color:var(--muted);font-size:.78rem}