/* ============================================================================
   KAYSON STEEL (فولاد کیسون) — Public Design System
   Trust & Authority: deep navy + steel-blue, forge-seam ember accent.
   Persian (RTL) · Vazirmatn + Space Grotesk · no framework.
   Layers: tokens → reset → type → layout → components → sections → animate → responsive
   ============================================================================ */

/* ---------- Design tokens ---------- */
/* Phase 1: brand color system migrated to the client's navy + gold identity.
   The exact supplied palette lives under --primary / --accent / --red etc.
   Legacy aliases (--brand, --ember, --navy-*, --steel-*, --ink, --line …) are
   kept as mapped references so the existing component CSS keeps working without
   a full rewrite. DO NOT introduce unrelated hues (purple/pink/cyan/neon). */
:root {
  /* ===== Client brand identity (source of truth, supplied) ===== */
  --primary:       #0A1E3F;   /* deep navy — primary */
  --primary-dark:  #050f24;
  --primary-light: #1a3a6f;

  --accent:        #D4AF37;   /* gold — brand accent */
  --accent-dark:   #B8941F;
  --accent-light:  #E5C158;

  --red:     #C8102E;  --red-dark:  #8B0000;  --red-light: #E63946;
  --success: #22c55e;  --success-dark: #16a34a;
  --warning: #f59e0b;

  --bg:         #f4f6fb;
  --surface:    #ffffff;
  --surface-2:  #eef2f9;

  --text:       #16233a;
  --text-soft:  #54627a;
  --text-mut:   #8a96a8;

  --border:       rgba(10,30,63,.10);
  --border-strong:rgba(10,30,63,.16);

  --header-bg:      rgba(255,255,255,.82);
  --header-border:  rgba(10,30,63,.08);
  --glass:          rgba(255,255,255,.70);
  --ring:           rgba(212,175,55,.35);

  --hero-overlay:
    linear-gradient(180deg, rgba(5,13,28,.35), rgba(5,13,28,.55));
  --section-tint:
    linear-gradient(180deg, #f4f6fb, #eef2f9);

  /* ===== Mapped aliases (legacy component CSS references) =====
     Navy hierarchy */
  --navy-950: var(--primary-dark);
  --navy-900: var(--primary);
  --navy-850: #0c1830;
  --navy-800: #13233A;
  --steel-700: #1C3A57;
  --steel-600: var(--primary-light);
  /* Gold replaces the old ember accent */
  --brand:    var(--primary);        /* primary brand surface (navy) */
  --brand-600:var(--primary-light);
  --brand-300:var(--accent-light);   /* light accent for rings/focus */
  --ember:    var(--accent);          /* gold accent (legacy name) */
  --ember-600:var(--accent-dark);

  /* UI foundation */
  --bg-soft:   var(--surface-2);
  --ink:       var(--text);
  --ink-2:     var(--text-soft);
  --ink-3:     var(--text-mut);
  --line:      #DCE4EC;
  --line-2:    #C5D2DE;

  /* Semantic states — keep red/green/amber readable */
  --up:    var(--success-dark);  --up-bg:  #E6F6EC;
  --down:  var(--red);          --down-bg:#FBE7EA;
  --warn:  var(--warning);      --warn-bg:#FDF1DC;

  /* Typography */
  --font-fa: "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --font-en: "Space Grotesk", "Vazirmatn", system-ui, sans-serif;

  /* Motion system (coherent timing) */
  --dur-1: .18s; --dur-2: .3s; --dur-3: .5s; --dur-4: .7s; --dur-5: 1s;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* Glass / depth (updated to navy/gold) */
  --glass-brd: rgba(255,255,255,.7);
  --sh-2-d: 0 8px 30px rgba(10,30,63,.12);
  --glow-brand: 0 0 0 4px rgba(10,30,63,.12);
  --glow-ember: 0 10px 32px rgba(212,175,55,.22);

  /* Spacing scale (4/8 rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Radius */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Elevation (consistent scale) */
  --sh-1: 0 1px 2px rgba(10,30,63,.06), 0 1px 3px rgba(10,30,63,.05);
  --sh-2: 0 4px 16px rgba(10,30,63,.08);
  --sh-3: 0 14px 38px rgba(10,30,63,.14);
  --sh-brand: 0 12px 30px rgba(10,30,63,.22);
  --sh-ember: 0 12px 30px rgba(212,175,55,.22);

  --maxw: 1280px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --t: .3s var(--ease);
  --t-fast: .18s var(--ease);
}

/* ===== Dark theme (uses the supplied dark variables) ===== */
[data-theme="dark"],
body.dark-mode {
  --bg:         #070d1a;
  --surface:    #0e1830;
  --surface-2:  #122042;

  --text:       #e8eef7;
  --text-soft:  #aebcd4;
  --text-mut:   #7d8aa6;

  --border:       rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);

  --header-bg:      rgba(10,18,38,.82);
  --header-border:  rgba(255,255,255,.08);
  --glass:          rgba(14,24,48,.70);
  --ring:           rgba(212,175,55,.40);

  --hero-overlay:
    linear-gradient(180deg, rgba(3,8,18,.55), rgba(3,8,18,.78));
  --section-tint:
    linear-gradient(180deg, #070d1a, #0b1426);

  /* mapped aliases follow the dark foundation */
  --bg-soft:   var(--surface-2);
  --ink:       var(--text);
  --ink-2:     var(--text-soft);
  --ink-3:     var(--text-mut);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  --up-bg:  #11261b; --down-bg:#2a1116; --warn-bg:#2a2113;

  --glass-brd: rgba(255,255,255,.10);
  --sh-2-d: 0 8px 30px rgba(0,0,0,.45);
  --glow-brand: 0 0 0 4px rgba(212,175,55,.18);
  --glow-ember: 0 10px 32px rgba(212,175,55,.26);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 16px rgba(0,0,0,.45);
  --sh-3: 0 14px 38px rgba(0,0,0,.55);
  --sh-brand: 0 12px 30px rgba(0,0,0,.5);
  --sh-ember: 0 12px 30px rgba(212,175,55,.22);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
*{ margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body { min-height:100vh; }
img,picture,svg,video { display:block; max-width:100%; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; }
:focus-visible { outline:3px solid var(--brand-300); outline-offset:2px; border-radius:6px; }

/* ---------- Base ---------- */
body {
  font-family: var(--font-fa); background: var(--bg); color: var(--ink);
  line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,h5 { line-height:1.22; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
p { color: var(--ink-2); }
.en { font-family: var(--font-en); font-feature-settings:"tnum" 1; direction:ltr; unicode-bidi:embed; }
.mono { font-family: var(--font-en); font-variant-numeric:tabular-nums; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-5); }
.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--bg { background: var(--surface); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--navy-900); color:#E7EEF4; }

/* Eyebrow + signature seam */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:var(--sp-3); }
.eyebrow::before { content:""; width:28px; height:2px; background:var(--ember); border-radius:2px; }
.eyebrow--center::before { display:none; }
.section-title { font-size:clamp(26px,3.4vw,42px); max-width:24ch; }
.section-title--center { margin-inline:auto; text-align:center; }
.section-lead { color:var(--ink-2); max-width:60ch; margin-top:var(--sp-3); font-size:17px; }
.section-lead--center { margin-inline:auto; text-align:center; }
.section-head { margin-bottom:var(--sp-7); }

.seam { position:relative; height:2px; width:100%;
  background:linear-gradient(90deg,transparent,var(--ember) 18%,var(--ember) 82%,transparent);
  opacity:.5; }
.seam::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,#fff6,transparent); filter:blur(1px);
  animation:seamGlow 6s var(--ease) infinite; }
@keyframes seamGlow { 0%,100%{opacity:0} 50%{opacity:.65} }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-fa); font-weight:700; font-size:15px; padding:13px 26px;
  border-radius:var(--r-pill); transition:transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space:nowrap; }
.btn svg { width:18px; height:18px; }
.btn__label { display:inline-block; }
.btn__spinner { display:inline-flex; }
.btn__spinner[hidden] { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn--primary { background:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.btn--primary:hover { background:var(--brand-600); transform:translateY(-2px); }
.btn--ember { background:var(--ember); color:#fff; box-shadow:var(--sh-ember); }
.btn--ember:hover { background:var(--ember-600); transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--light { background:#fff; color:var(--primary); box-shadow:var(--sh-2); }
.btn--light:hover { transform:translateY(-2px); box-shadow:var(--sh-3); }
.btn--block { width:100%; }
.btn--lg { padding:16px 34px; font-size:16px; }
.btn { transition:transform var(--dur-1) var(--ease-out), background var(--dur-1), box-shadow var(--dur-1), filter var(--dur-1); }
.btn:hover { filter:brightness(1.04); }
.btn:active { transform:translateY(1px) scale(.97); }
.btn.is-loading { position:relative; pointer-events:none; overflow:hidden; }
.btn.is-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-100%); animation:btnShimmer .9s infinite; }
@keyframes btnShimmer { to { transform:translateX(100%); } }

/* ---------- Cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.card--hover:hover { transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--brand-300); }

/* ---------- Chips / badges ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:var(--r-pill); background:var(--bg-soft); color:var(--ink-2);
  border:1px solid var(--line); }
.chip--up { background:var(--up-bg); color:var(--up); border-color:#bfe6cf; }
.chip--down { background:var(--down-bg); color:var(--down); border-color:#f2c9c4; }
.chip--warn { background:var(--warn-bg); color:var(--warn); border-color:#ecd9b1; }
.chip--dot::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

.badge-live { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:5px 12px; border-radius:var(--r-pill); }
.badge-live .dot { width:8px; height:8px; border-radius:50%; background:var(--up);
  box-shadow:0 0 0 4px rgba(28,138,87,.28); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(28,138,87,.32)} 50%{box-shadow:0 0 0 7px rgba(28,138,87,0)} }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:10px; flex-wrap:wrap; }
.tab { font-family:var(--font-fa); font-weight:700; font-size:14px; padding:10px 20px;
  border-radius:var(--r-pill); border:1.5px solid var(--line-2); color:var(--ink-2);
  background:var(--surface); transition:all var(--t-fast); }
.tab:hover { border-color:var(--brand-300); color:var(--brand); }
.tab.is-active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ---------- Inputs ---------- */
.field { display:flex; flex-direction:column; gap:7px; position:relative; }
.field__label { font-size:13px; font-weight:700; color:var(--ink); }
.field__label .req { color:var(--ember); }
.input,.textarea,.select { font-family:var(--font-fa); font-size:15px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-md);
  padding:12px 14px; width:100%; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.textarea { resize:vertical; min-height:120px; }
.input::placeholder,.textarea::placeholder { color:var(--ink-3); }
.input:focus,.textarea:focus,.select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(10,30,63,.12); }
.input--invalid { border-color:var(--down); box-shadow:0 0 0 4px rgba(197,57,43,.13); }
.field__error { font-size:12px; color:var(--down); font-weight:600; display:none; }
.field__error.is-shown { display:block; }
.field-help { font-size:12px; color:var(--ink-3); }

/* ---------- Section divider / lede ---------- */
.lede-rule { display:flex; align-items:center; gap:14px; color:var(--ink-3); font-size:13px; font-weight:600; }
.lede-rule::before,.lede-rule::after { content:""; height:1px; background:var(--line-2); flex:1; }

/* ============================================================================
   NAVIGATION
   ============================================================================ */
.nav { position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:var(--header-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--header-border);
  transition:background var(--t), border-color var(--t), box-shadow var(--t); }
.nav.is-scrolled { background:var(--header-bg); border-color:var(--border-strong); box-shadow:var(--sh-1); }
.nav__inner { height:100%; display:flex; align-items:center; gap:var(--sp-5); }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand__logo { width:42px; height:42px; border-radius:11px; background:var(--primary); padding:5px; object-fit:contain; }
.brand__name { font-weight:800; font-size:19px; line-height:1.05; color:var(--text); }
.brand__name b { color:var(--accent); font-weight:800; }
.brand__tag { font-family:var(--font-en); font-size:10px; letter-spacing:.18em; color:var(--text-mut); text-transform:uppercase; }
.nav__links { display:flex; align-items:center; gap:4px; margin-inline-start:auto; }
.nav__link { font-family:var(--font-fa); font-weight:600; font-size:15px; color:var(--text-soft);
  padding:9px 14px; border-radius:var(--r-pill); transition:color var(--t-fast), background var(--t-fast); position:relative; white-space:nowrap; }
.nav__link:hover { color:var(--primary); background:var(--surface-2); }
.nav__link.is-active { color:var(--primary); font-weight:700; }

/* Dark-mode header: navy (--primary) is the brand surface, so navy text on the
   dark navy header is invisible. Remap active/hover/underline to the light gold
   accent, which keeps the navy+gold identity yet stays readable on the dark
   header. Light mode (above) is intentionally left untouched. */
[data-theme="dark"] .nav__link:hover,
body.dark-mode .nav__link:hover { color:var(--accent); background:var(--surface-2); }
[data-theme="dark"] .nav__link.is-active,
body.dark-mode .nav__link.is-active { color:var(--accent); font-weight:700; }
[data-theme="dark"] .nav__link::after,
body.dark-mode .nav__link::after { background:var(--accent); }
[data-theme="dark"] .nav__theme:hover,
body.dark-mode .nav__theme:hover { color:var(--accent); border-color:var(--accent); background:var(--surface-2); }
[data-theme="dark"] .drawer__panel .nav__link:hover,
body.dark-mode .drawer__panel .nav__link:hover { color:var(--accent); }
[data-theme="dark"] .drawer__panel .nav__link.is-active,
body.dark-mode .drawer__panel .nav__link.is-active { color:var(--accent); }
.nav__cta { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }

/* theme toggle (sun/moon) */
.nav__theme { width:42px; height:42px; border-radius:12px; border:1.5px solid var(--border-strong);
  display:grid; place-items:center; color:var(--text-soft); background:transparent; flex-shrink:0;
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.nav__theme:hover { color:var(--primary); border-color:var(--primary); background:var(--surface-2); }
.nav__theme:active { transform:scale(.92); }
.nav__theme svg { width:20px; height:20px; }
/* Cross-fade the sun/moon so theme switching reads as a deliberate turn,
   not a hard swap. Icons are stacked and centred; only opacity+rotation change. */
.nav__theme { position:relative; }
.nav__theme svg { position:absolute; inset:0; margin:auto; transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.nav__theme .i-moon { opacity:1; transform:rotate(0deg) scale(1); }
.nav__theme .i-sun { opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="dark"] .nav__theme .i-moon,
body.dark-mode .nav__theme .i-moon { opacity:0; transform:rotate(90deg) scale(.5); }
[data-theme="dark"] .nav__theme .i-sun,
body.dark-mode .nav__theme .i-sun { opacity:1; transform:rotate(0deg) scale(1); }

.nav__toggle { display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--border-strong); place-items:center; }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after { content:""; display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--t), opacity var(--t); }
.nav__toggle span::before { transform:translateY(-6px); }
.nav__toggle span::after { transform:translateY(4px); }
body.nav-open .nav__toggle span { background:transparent; }
body.nav-open .nav__toggle span::before { transform:rotate(45deg); }
body.nav-open .nav__toggle span::after { transform:rotate(-45deg) translateY(-1px); }

.drawer { position:fixed; inset:0; z-index:99; visibility:hidden; pointer-events:none; }
.drawer__scrim { position:absolute; inset:0; background:rgba(11,20,34,.55); opacity:0; transition:opacity var(--t); }
.drawer__panel { position:absolute; top:0; inset-inline-end:0; height:100%; width:min(86vw,340px);
  background:var(--surface); box-shadow:var(--sh-3); padding:calc(var(--nav-h) + 16px) var(--sp-5) var(--sp-6);
  transform:translateX(100%); transition:transform var(--t); display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
[dir="ltr"] .drawer__panel { transform:translateX(-100%); }
.drawer__panel .nav__link { font-size:17px; padding:14px 16px; border-radius:var(--r-md); }
body.nav-open .drawer { visibility:visible; pointer-events:auto; }
body.nav-open .drawer__scrim { opacity:1; }
body.nav-open .drawer__panel { transform:translateX(0); }
body.nav-open { overflow:hidden; }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { position:relative; background:var(--navy-900); color:#EAF1F6; overflow:hidden;
  padding-block:clamp(64px,8vw,120px) clamp(72px,10vw,140px); }
.hero__grid { position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 90% 80% at 72% 28%,#000 30%,transparent 80%); mask-image:radial-gradient(ellipse 90% 80% at 72% 28%,#000 30%,transparent 80%); }
.hero__glow { position:absolute; width:520px; height:520px; border-radius:50%; inset-inline-end:-120px; top:-120px;
  background:radial-gradient(circle, rgba(212,175,55,.28), transparent 65%); filter:blur(20px); }
.hero__seam { position:absolute; inset-inline:0; bottom:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
  box-shadow:0 0 24px 2px rgba(212,175,55,.45); }
.hero__inner { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-8); align-items:center; }
.hero__copy { max-width:640px; }
.hero h1 { color:#fff; font-size:clamp(33px,5.4vw,60px); line-height:1.12; letter-spacing:-.02em; }
.hero h1 .accent { color:var(--ember); }
.hero__lead { color:#B7C7D3; font-size:clamp(16px,1.7vw,19px); max-width:50ch; margin-top:var(--sp-4); }
.hero__actions { display:flex; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
.hero__actions .btn--ghost { color:#DCE7EE; border-color:rgba(255,255,255,.25); }
.hero__actions .btn--ghost:hover { color:#fff; border-color:#fff; }
.grade-rail { display:flex; gap:10px; margin-top:var(--sp-7); flex-wrap:wrap; }
.grade-rail__item { font-family:var(--font-en); font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:6px 13px; border-radius:var(--r-pill); border:1px solid rgba(212,175,55,.28); color:#D9C98A; }

/* hero ticker */
.hero__ticker { display:flex; align-items:center; gap:18px; margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.10); flex-wrap:wrap; }
.hero__ticker .tick { display:flex; flex-direction:column; }
.hero__ticker .tick b { font-family:var(--font-en); font-size:20px; color:#fff; font-weight:700; }
.hero__ticker .tick span { font-size:12px; color:#9FB1BD; }
.hero__ticker .sep { width:1px; height:30px; background:rgba(255,255,255,.14); }

/* hero visual */
.hero__visual { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.12); }
.hero__visual img { width:100%; aspect-ratio:1/.92; object-fit:cover; }
.hero__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(11,20,34,.65)); }
.hero__stat-card { position:absolute; inset-inline-start:var(--sp-4); bottom:var(--sp-4);
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px); color:var(--ink); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); box-shadow:var(--sh-2); display:flex; gap:var(--sp-4); }
.hero__stat-card .v { font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--brand); }
.hero__stat-card .k { font-size:12px; color:var(--ink-3); font-weight:600; }

/* ============================================================================
   TRUST STRIP
   ============================================================================ */
.trust { background:var(--navy-850); border-bottom:1px solid rgba(255,255,255,.08); }
.trust__row { display:flex; align-items:center; gap:var(--sp-6); justify-content:space-between; flex-wrap:wrap; padding-block:var(--sp-5); }
.trust__item { display:flex; align-items:center; gap:12px; color:#B7C7D3; }
.trust__item svg { width:22px; height:22px; color:var(--brand-300); }
.trust__item b { color:#fff; font-weight:700; display:block; }
.trust__item span { font-size:13px; }
.trust__item + .trust__item { border-inline-start:1px solid rgba(255,255,255,.10); padding-inline-start:var(--sp-6); }

/* ============================================================================
   FEATURE / SERVICE CARDS
   ============================================================================ */
.grid { display:grid; gap:var(--sp-5); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.row-between { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }

.service { padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3); }
.service__icon { width:54px; height:54px; border-radius:15px; background:linear-gradient(135deg,var(--brand),var(--steel-600)); color:#fff; display:grid; place-items:center; transition:transform var(--t); }
.service:hover .service__icon { transform:translateY(-4px) rotate(-3deg); }
.service__icon svg { width:27px; height:27px; }
.service__title { font-size:19px; font-weight:800; }
.service__desc { font-size:14px; color:var(--ink-2); }
.service__link { margin-top:auto; color:var(--brand); font-weight:700; font-size:14px; display:inline-flex; gap:6px; align-items:center; transition:gap var(--t-fast); }
.service:hover .service__link { gap:10px; }

/* Category cards */
.cat { position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:230px; display:flex; align-items:flex-end; color:#fff; box-shadow:var(--sh-1); }
.cat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,20,34,.1),rgba(11,20,34,.88)); transition:background var(--t); }
.cat:hover img { transform:scale(1.07); }
.cat:hover::after { background:linear-gradient(180deg,rgba(212,175,55,.28),rgba(11,20,34,.92)); }
.cat__body { position:relative; padding:var(--sp-5); z-index:1; width:100%;
  transform:translateY(6px); transition:transform var(--dur-2) var(--ease-out); }
.cat:hover .cat__body { transform:translateY(0); }
.cat__more { opacity:.85; transition:opacity var(--dur-2) var(--ease-out), gap var(--t-fast); }
.cat:hover .cat__more { opacity:1; gap:10px; }
.cat__name { font-size:21px; font-weight:800; }
.cat__count { font-family:var(--font-en); font-size:13px; color:#C9D7E0; }
.cat__more { font-size:13px; font-weight:700; color:var(--ember); display:inline-flex; gap:6px; align-items:center; margin-top:8px; }

/* ============================================================================
   PRICE / MARKET SECTION
   ============================================================================ */
.market { background:var(--navy-900); color:#EAF1F6; position:relative; }
.market .section-title,.market .eyebrow { color:#fff; }
.market .section-lead { color:#B7C7D3; }
.market__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.market__layout { display:grid; grid-template-columns:1fr 360px; gap:var(--sp-6); align-items:start; }

.price-table { width:100%; border-collapse:separate; border-spacing:0; background:rgba(255,255,255,.04);
  border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.10); }
.price-table thead th { text-align:start; font-size:12px; font-weight:700; letter-spacing:.04em; color:#9FB1BD;
  padding:14px 18px; background:rgba(0,0,0,.22); border-bottom:1px solid rgba(255,255,255,.10); }
.price-table tbody td { padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px; color:#DCE7EE; }
.price-table tbody tr { transition:background var(--t-fast); }
.price-table tbody tr:hover { background:rgba(212,175,55,.08); }
.price__prod { display:flex; align-items:center; gap:12px; }
.price__icon { width:38px; height:38px; border-radius:10px; background:rgba(212,175,55,.14); display:grid; place-items:center; color:var(--accent-light); flex-shrink:0; }
.price__icon svg { width:20px; height:20px; }
.price__name { font-weight:700; color:#fff; }
.price__name small { display:block; font-family:var(--font-en); font-size:11px; color:#9FB1BD; font-weight:500; letter-spacing:.03em; }
.price__val { font-family:var(--font-en); font-weight:700; font-size:16px; color:#fff; direction:ltr; unicode-bidi:embed; }
.price__unit { color:#9FB1BD; font-size:12px; margin-inline-start:4px; }
.price__chg { font-family:var(--font-en); font-weight:700; display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--r-pill); }
.price__chg--up { color:var(--up); background:rgba(28,138,87,.16); }
.price__chg--down { color:#FF7A6E; background:rgba(197,57,43,.22); }
.price__time { color:#9FB1BD; font-family:var(--font-en); font-size:13px; }
.price__note { margin-top:var(--sp-4); font-size:12px; color:#8093a0; display:flex; align-items:center; gap:8px; }

/* market side panel (chart + mini stats) */
.market__aside { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:var(--r-lg); padding:var(--sp-5); }
.market__aside h4 { color:#fff; font-size:15px; display:flex; align-items:center; justify-content:space-between; }
.chart-box { margin-top:var(--sp-4); height:170px; }
.range-tabs { display:flex; gap:6px; }
.range-tabs button { font-family:var(--font-en); font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14); color:#9FB1BD; transition:all var(--t-fast); }
.range-tabs button.is-active { background:var(--brand); color:#fff; border-color:var(--brand); }
.market__mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:var(--sp-5); }
.market__mini .m { background:rgba(255,255,255,.04); border-radius:var(--r-md); padding:12px 14px; }
.market__mini .m b { font-family:var(--font-en); font-size:18px; color:#fff; display:block; }
.market__mini .m span { font-size:11px; color:#9FB1BD; }

/* ============================================================================
   STATS
   ============================================================================ */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.stat { text-align:center; padding:var(--sp-6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; top:0; inset-inline:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--ember)); }
.stat__v { font-family:var(--font-en); font-size:clamp(30px,4vw,46px); font-weight:700; color:var(--brand); line-height:1; }
.stat__v small { font-size:.5em; color:var(--ember); }
.stat__k { margin-top:10px; font-size:14px; color:var(--ink-2); font-weight:600; }
.stat__sub { font-size:12px; color:var(--ink-3); }

/* ============================================================================
   PRODUCTS (reusable card)
   ============================================================================ */
.product { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.product:hover { transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--brand-300); }
.product__media { position:relative; aspect-ratio:4/3; background:var(--navy-900); overflow:hidden; display:grid; place-items:center; }
.product__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product:hover .product__media img { transform:scale(1.06); }
.product__badge { position:absolute; top:12px; inset-inline-start:12px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:var(--r-pill); background:rgba(11,20,34,.82); color:#fff; backdrop-filter:blur(4px); }
.product__body { padding:var(--sp-5); display:flex; flex-direction:column; gap:12px; flex:1; }
.product__name { font-size:19px; font-weight:800; }
.product__desc { font-size:14px; color:var(--ink-2); line-height:1.65; }
.product__specs { display:grid; grid-template-columns:1fr 1fr; gap:10px var(--sp-4); margin-top:auto; }
.spec { display:flex; flex-direction:column; gap:2px; }
.spec__k { font-size:11px; color:var(--ink-3); font-weight:600; }
.spec__v { font-family:var(--font-en); font-size:14px; font-weight:600; color:var(--ink); direction:ltr; unicode-bidi:embed; text-align:start; }
.product__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-top:12px; border-top:1px solid var(--line); }
.product__price { font-family:var(--font-en); font-weight:700; font-size:16px; }
.product__price small { font-family:var(--font-fa); font-size:12px; color:var(--ink-3); font-weight:500; }
.product__link { font-size:13px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:4px; transition:gap var(--t-fast); }
.product__link:hover { gap:8px; }

/* ============================================================================
   SLIDER (featured)
   ============================================================================ */
.slider { position:relative; }
.slider__track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*var(--sp-5))/3);
  gap:var(--sp-5); overflow-x:auto; scroll-snap-type:x mandatory; padding-block:14px; padding-inline:2px; scrollbar-width:none; }
.slider__track::-webkit-scrollbar { display:none; }
.slider__track > .product { scroll-snap-align:start; }
.slider__btn { position:absolute; top:38%; transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:50%;
  background:var(--surface); color:var(--brand); box-shadow:var(--sh-2); display:grid; place-items:center; transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.slider__btn:hover { background:var(--brand); color:#fff; }
.slider__btn--next { inset-inline-end:-10px; }
.slider__btn--prev { inset-inline-start:-10px; }
.slider__btn svg { width:22px; height:22px; }
.slider__dots { display:flex; gap:8px; justify-content:center; margin-top:var(--sp-5); }
.slider__dot { width:9px; height:9px; border-radius:50%; background:var(--line-2); transition:background var(--t-fast), width var(--t-fast); }
.slider__dot.is-active { background:var(--brand); width:26px; border-radius:var(--r-pill); }

/* ============================================================================
   ADVANTAGES
   ============================================================================ */
.adv { display:flex; gap:var(--sp-4); padding:var(--sp-5); align-items:flex-start; }
.adv__num { font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--ember); background:var(--down-bg); width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.adv__title { font-weight:800; font-size:17px; margin-bottom:4px; }
.adv__desc { font-size:14px; color:var(--ink-2); }

/* ============================================================================
   NEWS
   ============================================================================ */
.news { display:flex; flex-direction:column; }
.news__media { aspect-ratio:16/9; background:var(--navy-900); overflow:hidden; }
.news__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news:hover .news__media img { transform:scale(1.05); }
.news__body { padding:var(--sp-5); display:flex; flex-direction:column; gap:10px; flex:1; }
.news__meta { font-size:12px; color:var(--ink-3); font-weight:600; display:flex; gap:var(--sp-3); }
.news__title { font-size:18px; font-weight:800; line-height:1.4; }
.news__excerpt { font-size:14px; color:var(--ink-2); }
.news__link { margin-top:auto; }

/* ============================================================================
   CTA / FORM
   ============================================================================ */
.cta { background:linear-gradient(135deg,var(--navy-900),var(--brand)); color:#fff; border-radius:var(--r-xl); padding:clamp(24px,5vw,64px); position:relative; overflow:hidden; }
.cta__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center; position:relative; }
.cta h2 { color:#fff; font-size:clamp(26px,3.4vw,40px); }
.cta p { color:#C9D7E0; margin-top:var(--sp-3); }
.cta__list { display:flex; flex-direction:column; gap:10px; margin-top:var(--sp-4); }
.cta__list li { display:flex; gap:10px; align-items:center; color:#DCE7EE; font-size:15px; }
.cta__list svg { width:20px; height:20px; color:var(--ember); flex-shrink:0; }
.form-card { background:var(--surface); border-radius:var(--r-md); padding:var(--sp-6); box-shadow:var(--sh-3); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.form-grid .field--full { grid-column:1/-1; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer { background:var(--navy-950); color:#B7C7D3; padding-block:var(--sp-8) var(--sp-5); }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:var(--sp-6); }
.footer .brand__name { color:#fff; }
.footer .brand__name b { color:var(--brand-300); }
.footer__about { font-size:14px; line-height:1.85; max-width:34ch; margin-top:var(--sp-3); }
.footer__col h4 { color:#fff; font-size:15px; margin-bottom:var(--sp-4); }
.footer__col a { display:block; padding:6px 0; font-size:14px; color:#9FB1BD; transition:color var(--t-fast), padding-inline-start var(--t-fast); }
.footer__col a:hover { color:#fff; padding-inline-start:6px; }
.footer__contact li { display:flex; gap:10px; align-items:flex-start; font-size:14px; padding:6px 0; color:#9FB1BD; }
.footer__contact svg { width:18px; height:18px; color:var(--brand-300); margin-top:3px; flex-shrink:0; }
.footer__bottom { margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap; font-size:13px; color:#7E92A0; }
.footer__social { display:flex; gap:10px; }
.footer__social a { width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; color:#C9D7E0; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.footer__social a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.footer__social svg { width:18px; height:18px; }

/* ============================================================================
   PAGE HERO (subpages)
   ============================================================================ */
.page-hero { background:var(--navy-900); color:#fff; padding-block:clamp(48px,7vw,90px) clamp(40px,6vw,70px); position:relative; overflow:hidden; }
.page-hero__grid { position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 75%); }
.page-hero__inner { position:relative; }
.page-hero h1 { color:#fff; font-size:clamp(28px,4vw,46px); }
.page-hero p { color:#B7C7D3; margin-top:var(--sp-3); max-width:56ch; }
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:13px; color:#9FB1BD; margin-bottom:var(--sp-4); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { opacity:.5; }

/* legal / static content pages (terms, privacy) */
.legal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,48px); box-shadow:var(--sh-1); }
.legal h2 { font-size:20px; margin:28px 0 10px; color:var(--ink); }
.legal h2:first-child { margin-top:0; }
.legal p { color:var(--ink-2); line-height:1.95; font-size:15px; }
.legal__note { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); font-weight:600; }

/* toolbar (catalog) */
.toolbar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.search { position:relative; flex:1; min-width:240px; }
.search svg { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3); pointer-events:none; }
.search .input { padding-inline-start:42px; }
.select-wrap { position:relative; }
.select-wrap::after { content:""; position:absolute; inset-inline-end:14px; top:50%; width:8px; height:8px; border-inline-end:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.select { appearance:none; padding-inline-end:40px; min-width:180px; }

.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }

/* ============================================================================
   STATES (empty / error / toast)
   ============================================================================ */
.state { text-align:center; padding:var(--sp-8) var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.state__icon { width:64px; height:64px; border-radius:50%; background:var(--bg-soft); color:var(--ink-3); display:grid; place-items:center; }
.state__icon svg { width:30px; height:30px; }
.state__title { font-weight:800; font-size:18px; }
.state__desc { font-size:14px; color:var(--ink-2); max-width:42ch; }

.toast { position:fixed; inset-inline-end:20px; bottom:20px; z-index:200; background:var(--navy-900); color:#fff; padding:14px 18px; border-radius:var(--r-md); box-shadow:var(--sh-3); display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; transform:translateY(140%); transition:transform var(--t); max-width:90vw; }
.toast.is-shown { transform:translateY(0); }
.toast__icon { width:22px; height:22px; color:var(--up); flex-shrink:0; }

/* ============================================================================
   REVEAL ANIMATIONS
   ============================================================================ */
/* NOTE: Public scroll-reveal now uses the [data-anim] system defined in
   motion.css. The legacy .reveal / .reveal-up classes are no longer used.
   Admin pages use their own [data-stagger] system in admin.css. */

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1100px) {
  /* Collapse the inline nav link row to the drawer before it can overflow
     and get clipped by body{overflow-x:hidden}. The hamburger drawer is the
     established mobile pattern and already contains every link + the CTA. */
  .nav__links { display:none; }
  .nav__toggle { display:grid; }
}

@media (max-width:1080px) {
  .hero__inner { grid-template-columns:1fr; gap:var(--sp-6); }
  .hero__visual { max-width:480px; }
  .market__layout { grid-template-columns:1fr; }
  .cta__grid { grid-template-columns:1fr; gap:var(--sp-5); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__about { grid-column:1/-1; max-width:none; }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  :root { --nav-h:64px; }
  .wrap { padding-inline:var(--sp-4); }
  .section { padding-block:var(--sp-8); }
  .nav__links, .nav__cta .btn:not(.nav__toggle) { display:none; }
  .nav__toggle { display:grid; }
  .footer__grid { grid-template-columns:1fr; gap:var(--sp-5); }
  .grid--3,.grid--4,.grid--2,.products-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; gap:var(--sp-3); }
  .form-grid { grid-template-columns:1fr; }
  .price-table { display:block; overflow-x:auto; white-space:nowrap; }
  .price-table > table { min-width:640px; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .hero__actions .btn { width:100%; }
  .cta { padding:var(--sp-5); }
  .toolbar { flex-direction:column; align-items:stretch; }
  .search,.select-wrap { width:100%; }
  .select { width:100%; }
  .trust__item + .trust__item { border-inline-start:none; padding-inline-start:0; }
  .trust__row { gap:var(--sp-4); }
}
@media (max-width:420px) {
  .stats { grid-template-columns:1fr; }
  .brand__tag { display:none; }
}
/* NOTE: Per project requirement, prefers-reduced-motion is intentionally NOT
   used to disable or weaken the animation system. A minimal softening of only
   the heaviest infinite loops lives in motion.css instead. */

/* ============================================================================
   POLISH LAYER — small non-motion refinements that complement motion.css
   (motion + choreography now live in assets/css/motion.css)
   ============================================================================ */

/* Smoother focus ring (premium, not default) */
:focus-visible { outline:3px solid var(--accent-light); outline-offset:3px; border-radius:8px;
  box-shadow:0 0 0 6px rgba(212,175,55,.18); transition:box-shadow var(--dur-1); }

/* ---- Nav links: animated underline ---- */
.nav__link::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:inline-end; transition:transform var(--dur-2) var(--ease-out); }
.nav__link:hover::after, .nav__link.is-active::after { transform:scaleX(1); }

/* ---- Stat: seam shimmer on hover (count-up handled by JS) ---- */
.stat { transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.stat:hover { transform:translateY(-5px); box-shadow:var(--sh-2-d); border-color:var(--brand-300); }
.stat::after { content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg,transparent,#fff8,transparent); transform:translateX(-120%); }
.stat:hover::after { animation:seamSweep 1.1s var(--ease-out); }
@keyframes seamSweep { to { transform:translateX(120%); } }

/* ---- Glass utility (used sparingly, on dark only) ---- */
.glass { background:var(--glass); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border:1px solid var(--glass-brd); }


/* floating accent marks for section separation */
.float-mark { position:absolute; width:14px; height:14px; border:2px solid var(--brand-300); border-radius:3px; opacity:.0; }
.section { position:relative; }

/* ---- Skeleton shimmer (tables / async) ---- */
.sk { background:linear-gradient(90deg, var(--bg-soft) 25%, #fff 37%, var(--bg-soft) 63%); background-size:400% 100%;
  animation:shimmer 1.4s ease infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ============================================================================
   MOTION LAYER — noticeable but professional motion (added by motion.js)
   The site FEELS alive: hero timeline, scroll progress, floating orbs,
   parallax, staggered reveals, springy buttons & cards, animated counters.
   ============================================================================ */

/* Scroll progress bar (fixed top) */
.scroll-progress { position:fixed; top:0; inset-inline:0; height:3px; z-index:120; pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--ember)); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .12s linear; box-shadow:0 0 12px rgba(212,175,55,.5); }

/* Hero entrance timeline (run once on load) — gated by .js so content is
   always visible if JS is unavailable (no invisible-text risk) */
.js .hero__copy > * { opacity:0; transform:translateY(34px); }
.js .hero.is-loaded .hero__copy > * { animation:heroIn .9s var(--ease-out) forwards; }
.js .hero.is-loaded .hero__copy > *:nth-child(1){ animation-delay:.05s }
.js .hero.is-loaded .hero__copy > *:nth-child(2){ animation-delay:.16s }
.js .hero.is-loaded .hero__copy > *:nth-child(3){ animation-delay:.30s }
.js .hero.is-loaded .hero__copy > *:nth-child(4){ animation-delay:.44s }
.js .hero.is-loaded .hero__copy > *:nth-child(5){ animation-delay:.58s }
.js .hero.is-loaded .hero__copy > *:nth-child(6){ animation-delay:.72s }
@keyframes heroIn { from{ opacity:0; transform:translateY(34px) scale(.96); } to{ opacity:1; transform:none; } }
.js .hero .hero__visual { opacity:0; transform:translateY(40px) scale(.94); }
.js .hero.is-loaded .hero .hero__visual { animation:heroVisual 1.05s var(--ease-out) .30s forwards; }
@keyframes heroVisual { from{ opacity:0; transform:translateY(40px) scale(.94);} to{ opacity:1; transform:none; } }

/* Floating decorative orbs on hero (always on, driven by scroll parallax too) */
.hero__orb { position:absolute; border-radius:50%; filter:blur(46px); opacity:.6; pointer-events:none; will-change:transform; z-index:0;
  background:radial-gradient(circle, rgba(10,30,63,.55), transparent 70%); transform:translate3d(0, var(--py,0px), 0); }
.hero__orb.a { width:360px; height:360px; inset-inline-start:-90px; bottom:-130px; animation:floaty 14s var(--ease-in-out) infinite; }
.hero__orb.b { width:280px; height:280px; inset-inline-end:8%; top:-70px; background:radial-gradient(circle, rgba(212,175,55,.34), transparent 70%); animation:floaty 18s var(--ease-in-out) infinite reverse; }
.hero__orb.c { width:180px; height:180px; inset-inline-start:42%; top:30%; background:radial-gradient(circle, rgba(212,175,55,.28), transparent 70%); animation:floaty 22s var(--ease-in-out) infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0) translateX(0) } 50%{ transform:translateY(-34px) translateX(14px) } }
.hero__glow { animation:glowPulse 7s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* Grade rail chips stagger in */
.js .hero.is-loaded .grade-rail__item { animation:chipIn .55s var(--ease-out) forwards; opacity:0; transform:translateY(14px) scale(.9); }
.hero.is-loaded .grade-rail__item:nth-child(1){ animation-delay:.78s }
.hero.is-loaded .grade-rail__item:nth-child(2){ animation-delay:.86s }
.hero.is-loaded .grade-rail__item:nth-child(3){ animation-delay:.94s }
.hero.is-loaded .grade-rail__item:nth-child(4){ animation-delay:1.02s }
.hero.is-loaded .grade-rail__item:nth-child(5){ animation-delay:1.10s }
@keyframes chipIn { to{ opacity:1; transform:none; } }

/* ============================================================================
   MOTION SYSTEM lives in assets/css/motion.css (loaded after this file).
   All reveal / ambient / choreography rules were moved there to keep a single
   coherent motion language and avoid dead duplicate keyframes.
   ============================================================================ */


/* ---- Auth pages (login / signup) ---- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; position:relative; overflow:hidden; }
.auth__aside { position:relative; background:linear-gradient(155deg,var(--primary-dark),var(--primary) 45%,var(--primary-light)); color:#EAF1F6; display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,5vw,72px); overflow:hidden; }
.auth__aside::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 90% 80% at 30% 20%,#000 30%,transparent 80%); mask-image:radial-gradient(ellipse 90% 80% at 30% 20%,#000 30%,transparent 80%); }
.auth__aside > * { position:relative; }
.auth__aside .brand__logo { background:rgba(255,255,255,.1); }
.auth__aside h1 { color:#fff; font-size:clamp(26px,3vw,40px); margin:22px 0 12px; }
.auth__aside h1 .accent { color:var(--brand-300); }
.auth__aside p { color:#B7C7D3; max-width:42ch; }
.auth__feats { display:flex; flex-direction:column; gap:14px; margin-top:var(--sp-7); }
.auth__feat { display:flex; gap:12px; align-items:center; color:#DCE7EE; font-size:14px; }
.auth__feat svg { width:20px; height:20px; color:var(--ember); flex-shrink:0; }
.auth__panel { display:flex; align-items:center; justify-content:center; padding:clamp(28px,4vw,56px); background:var(--bg); }
.auth__card { width:min(420px,100%); }
.auth__card h2 { font-size:26px; }
.auth__card .sub { color:var(--ink-3); font-size:14px; margin:6px 0 26px; }
.auth__divider { display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12px; font-weight:600; margin:22px 0; }
.auth__divider::before,.auth__divider::after { content:""; height:1px; background:var(--line); flex:1; }
.auth__alt { display:flex; flex-direction:column; gap:10px; }
.auth__row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.auth__row a { color:var(--brand); font-weight:700; }
.auth__row a:hover { text-decoration:underline; }
.auth__foot { text-align:center; margin-top:22px; color:var(--ink-3); font-size:13px; }
.auth__foot a { color:var(--brand); font-weight:700; }

/* account chip in public nav (set by main.js session) */
.account { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; border-radius:var(--r-pill); background:var(--surface); border:1.5px solid var(--line-2); box-shadow:var(--sh-1); }
.account__name { font-size:13px; font-weight:700; color:var(--ink); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account__btn { font-family:var(--font-fa); font-size:12px; font-weight:700; color:#fff; background:var(--down); border:none; border-radius:var(--r-pill); padding:6px 12px; cursor:pointer; transition:background var(--t-fast); }
.account__btn:hover { background:var(--down); filter:brightness(.92); }

.field__control { position:relative; display:flex; }
.field__toggle { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:10px; color:var(--ink-3); display:grid; place-items:center; transition:color var(--dur-1); }
.field__toggle:hover { color:var(--brand); }
.field__toggle svg { width:20px; height:20px; }
.input--has-toggle { padding-inline-end:46px; }
.field__check { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none; }
.field__check input { width:18px; height:18px; accent-color:var(--brand); flex-shrink:0; }
.pw-strength { height:6px; border-radius:6px; background:var(--bg-soft); overflow:hidden; margin-top:-2px; }
.pw-strength i { display:block; height:100%; width:0; border-radius:6px; transition:width var(--dur-2) var(--ease-out), background var(--dur-2); }
.pw-strength span { font-size:11px; font-weight:700; }
.msg { display:none; border-radius:var(--r-md); padding:12px 14px; font-size:13px; font-weight:600; margin-bottom:var(--sp-4); line-height:1.6; }
.msg.is-shown { display:block; animation:msgIn var(--dur-2) var(--ease-out); }
.msg--err { background:var(--down-bg); color:var(--down); border:1px solid #f2c9c4; }
.msg--ok { background:var(--up-bg); color:var(--up); border:1px solid #bfe6cf; }
@keyframes msgIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.shake { animation:shake .4s var(--ease-in-out); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

/* ---- Calculator ---- */
.calc-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-6); }
.calc-tab { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2); color:var(--ink-2); background:var(--surface); transition:all var(--dur-2) var(--ease-out); }
.calc-tab svg { width:18px; height:18px; }
.calc-tab:hover { border-color:var(--brand-300); color:var(--brand); transform:translateY(-2px); }
.calc-tab.is-active { background:linear-gradient(135deg,var(--brand),var(--steel-600)); color:#fff; border-color:transparent; box-shadow:var(--sh-brand); }
.calc-panel { display:none; }
.calc-panel.is-active { display:block; animation:fadeUp var(--dur-3) var(--ease-out); }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.calc-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6); align-items:start; }
.calc-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--sp-6); }
.calc-form h3 { display:flex; align-items:center; gap:10px; font-size:19px; }
.calc-form h3 svg { width:22px; height:22px; color:var(--brand); }
.calc-desc { color:var(--ink-3); font-size:13px; margin:6px 0 var(--sp-5); }
.calc-inputs { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.calc-inputs .field--full { grid-column:1/-1; }
.calc-input .input { font-family:var(--font-en); direction:ltr; unicode-bidi:embed; text-align:start; }
.calc-result { background:linear-gradient(160deg,var(--navy-900),var(--brand)); color:#fff; border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--sh-3); position:sticky; top:calc(var(--nav-h) + 16px); overflow:hidden; }
.calc-result::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(212,175,55,.32), transparent 70%); bottom:-60px; inset-inline-end:-40px; }
.calc-result .result-icon { width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.12); display:grid; place-items:center; margin-bottom:var(--sp-4); }
.calc-result .result-icon svg { width:30px; height:30px; color:var(--ember); }
.calc-result h4 { font-size:15px; color:#C9D7E0; font-weight:600; }
.calc-result .result-value { font-family:var(--font-en); font-size:clamp(34px,5vw,46px); font-weight:700; line-height:1.1; margin:6px 0; direction:ltr; unicode-bidi:embed; }
.calc-result .result-value small { font-size:18px; font-weight:600; color:#C9D7E0; margin-inline-start:8px; }
.calc-result .result-details { font-size:14px; color:#DCE7EE; display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
.calc-result .result-details strong { color:#fff; }
.calc-result.is-empty { background:var(--surface); color:var(--ink); border:1px dashed var(--line-2); box-shadow:none; }
.calc-result.is-empty::after { display:none; }
.calc-result.is-empty .result-icon { background:var(--bg-soft); color:var(--ink-3); }
.calc-result.is-empty h4,.calc-result.is-empty .result-value { color:var(--ink-2); }
.calc-info .info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.calc-info .info-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-1); }
.calc-info .info-icon { width:46px; height:46px; border-radius:13px; background:rgba(10,30,63,.08); color:var(--primary); display:grid; place-items:center; margin-bottom:var(--sp-3); }
.calc-info .info-icon svg { width:23px; height:23px; }
.calc-info .info-box h4 { font-size:16px; margin-bottom:8px; }
.calc-info .info-box p { font-size:13.5px; color:var(--ink-2); line-height:1.7; }
.calc-info .info-link { display:inline-flex; align-items:center; gap:7px; color:var(--brand); font-weight:700; font-size:13px; margin-top:10px; }
/* consultation CTA block + tips list on the calculator info section */
.calc-cta { margin-top:var(--sp-8); }
.calc-cta .eyebrow { color:var(--ember); }
.calc-cta .eyebrow::before { background:var(--ember); }
.calc-info .info-box--warn { border-color:color-mix(in srgb, var(--ember) 35%, var(--line)); }
.calc-info .info-box--warn .info-icon { background:color-mix(in srgb, var(--ember) 14%, transparent); color:var(--ember); }
.calc-info .info-box--accent { border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); }
.calc-info .info-box--accent .info-icon { background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); }
.calc-tips-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.calc-tips-list li { position:relative; padding-inline-start:22px; font-size:13px; line-height:1.75; color:var(--ink-2); }
.calc-tips-list li::before { content:""; position:absolute; inset-inline-start:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--brand); flex-shrink:0; }
.calc-cta .cta__list li { color:#DCE7EE; }
@media (max-width:1080px){ .calc-grid { grid-template-columns:1fr; } .calc-result { position:static; } .calc-info .info-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .calc-inputs { grid-template-columns:1fr; } .calc-info .info-grid { grid-template-columns:1fr; } }

/* homepage calculator INTRO / CTA — links to the dedicated calculator */
.calc-intro__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
.calc-intro__copy .cta__list { margin:var(--sp-5) 0; }
.calc-intro__copy .btn--primary { margin-top:var(--sp-2); }

.calc-intro__card {
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--navy-900), var(--brand));
  color:#fff; padding:clamp(24px,3.4vw,38px); box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.08);
}
.calc-intro__card-glow { position:absolute; inset:auto -60px -70px auto; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.35), transparent 70%); pointer-events:none; }
.calc-intro__card-grid { position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:38px 38px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%, #000 30%, transparent 85%); mask-image:radial-gradient(ellipse 80% 70% at 70% 20%, #000 30%, transparent 85%); }
.calc-intro__card > * { position:relative; z-index:1; }
.calc-intro__card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:var(--sp-5); }
.calc-intro__badge { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:8px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.10); color:#fff; }
.calc-intro__badge svg { width:18px; height:18px; color:var(--accent); }
.calc-intro__chip { font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--navy-900); }
.calc-intro__preview { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:var(--r-lg); padding:var(--sp-5); }
.calc-intro__row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.12); font-size:14px; }
.calc-intro__row span { color:#AEBCD4; }
.calc-intro__row b { color:#fff; font-weight:700; direction:ltr; unicode-bidi:embed; }
.calc-intro__result { padding-top:var(--sp-4); }
.calc-intro__result-label { display:block; font-size:13px; color:#AEBCD4; margin-bottom:4px; }
.calc-intro__result-value { font-family:var(--font-en); font-size:clamp(34px,5vw,46px); font-weight:800; line-height:1.05; direction:ltr; unicode-bidi:embed; }
.calc-intro__num { color:var(--accent); }
.calc-intro__result-value small { font-size:17px; font-weight:600; color:#C9D7E0; margin-inline-start:8px; }
.calc-intro__meter { margin-top:var(--sp-4); height:8px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); overflow:hidden; }
.calc-intro__meter span { display:block; height:100%; width:var(--w,60%); border-radius:var(--r-pill); background:linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.calc-intro__features { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-5); }
.calc-intro__features span { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#DCE7EE;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); padding:6px 12px; border-radius:var(--r-pill); }
.calc-intro__features svg { width:15px; height:15px; color:var(--accent); }

@media (max-width:900px){ .calc-intro__grid { grid-template-columns:1fr; gap:var(--sp-6); } }

/* auth responsive */
@media (max-width:880px){
  .auth { grid-template-columns:1fr; }
  .auth__aside { display:none; }
  .auth__panel { min-height:100vh; }
}

/* ============================================================================
   CMS-DRIVEN PUBLIC ELEMENTS (announcement, contact, faq, testimonials, calc notes)
   Rendered by assets/js/cms-bind.js. Visual language matches the public site.
   ============================================================================ */

/* Announcement bar (injected at top of <body> when admin enables it) */
.ann-bar { background:linear-gradient(90deg,var(--navy-900),var(--brand)); color:#fff; font-size:13.5px; }
.ann-bar__inner { display:flex; align-items:center; gap:var(--sp-3); padding-block:9px; flex-wrap:wrap; justify-content:center; text-align:center; }
.ann-bar__text { color:#EAF0F5; }
.ann-bar__link { color:var(--ember); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.ann-bar__link:hover { text-decoration:underline; }

/* Page-section subtitle under section titles */
.section-sub { text-align:center; color:var(--ink-2); max-width:62ch; margin:var(--sp-3) auto 0; font-size:16px; line-height:1.8; }

/* Contact page layout */
.contact-layout { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-8); align-items:start; }
.contact-info { position:sticky; top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); }
.footer__contact-item { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); transition:border-color var(--t-fast), transform var(--t-fast); }
.footer__contact-item:hover { border-color:var(--brand-300); transform:translateY(-2px); }
.footer__contact-item svg { width:20px; height:20px; color:var(--brand); margin-top:3px; flex-shrink:0; }
.footer__contact-item b { display:block; font-size:14px; color:var(--ink-1); }
.footer__contact-item span { font-size:14px; color:var(--ink-2); }
.footer__contact--stack { display:flex; flex-direction:column; gap:10px; list-style:none; padding:0; margin:0; }
.contact-map { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); min-height:200px; background:var(--bg-soft); }
.contact-map iframe { width:100%; height:220px; border:0; display:block; }
.contact-note { font-size:13.5px; color:var(--ink-3); background:var(--bg-soft); border-inline-start:3px solid var(--brand-300); padding:12px 14px; border-radius:var(--r-sm); }
.contact-form-wrap .cta__list li { font-size:14px; }
.contact-form-wrap .cta__list svg { width:18px; height:18px; }

/* FAQ (details/summary) */
.faq-list { display:flex; flex-direction:column; gap:12px; max-width:880px; margin:var(--sp-6) auto 0; }
.faq { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:0; transition:border-color var(--t-fast); }
.faq[open] { border-color:var(--brand-300); }
.faq summary { list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; width:11px; height:11px; border-inline-end:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); transition:transform var(--t-fast); flex-shrink:0; }
.faq[open] summary::after { transform:rotate(-135deg); }
.faq__a { padding:0 18px 18px; font-size:14.5px; color:var(--ink-2); line-height:1.85;
  /* smooth open/close: native <details> snaps open, so bridge the change with a
     short max-height+opacity transition. Answer text is short, so the cap is safe
     and collapse settles to 0 — no JS, no content stuck hidden. */
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out), padding var(--dur-2) var(--ease-out); }
.faq[open] .faq__a { max-height:520px; opacity:1; }
@media (prefers-reduced-motion:reduce) { .faq__a { transition:none; opacity:1; } .faq:not([open]) .faq__a { max-height:0; opacity:0; } }

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); max-width:980px; margin:var(--sp-6) auto 0; }
.testimonial { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:14px; }
.testimonial blockquote { margin:0; font-size:15px; line-height:1.9; color:var(--ink-1); }
.testimonial figcaption { display:flex; align-items:center; gap:12px; }
.testimonial figcaption img { width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--bg-soft); }
.testimonial figcaption b { display:block; font-size:14px; color:var(--ink-1); }
.testimonial figcaption span { font-size:12.5px; color:var(--ink-3); }

/* Calculator units note */
.calc-units { margin-top:var(--sp-5); text-align:center; font-size:13.5px; color:var(--ink-3); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r-md); padding:12px 16px; }

/* Responsive */
@media (max-width:920px){
  .contact-layout { grid-template-columns:1fr; }
  .contact-info { position:static; }
  .testimonials { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .testimonials { grid-template-columns:1fr; }
  .footer__contact-item { padding:12px; }
  .calc-units { font-size:12.5px; }
}

/* ============================================================================
   BLOG (مجله / دانش فولاد) — list + detail
   Reuses .news card for the grid; adds featured layout + article reader.
   ============================================================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.blog-grid .news { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.blog-cats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-6); }
.blog-cats .tab { min-width:auto; }

/* Featured article */
.featured-article { display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
.featured-article__media { position:relative; min-height:340px; background:var(--navy-900); }
.featured-article__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-article__body { padding:clamp(24px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.featured-article__cat { align-self:flex-start; }
.featured-article h2 { font-size:clamp(22px,2.8vw,34px); line-height:1.35; }
.featured-article p { color:var(--ink-2); font-size:15px; line-height:1.8; }
.featured-article__meta { display:flex; gap:var(--sp-4); font-size:13px; color:var(--ink-3); font-weight:600; margin-top:4px; }

/* Article reader */
.article { background:var(--surface); }
.article__hero { position:relative; background:var(--navy-900); color:#fff; padding-block:clamp(40px,6vw,76px); overflow:hidden; }
.article__hero-grid { position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000,transparent 75%); }
.article__hero-inner { position:relative; max-width:820px; }
.article__hero h1 { color:#fff; font-size:clamp(26px,3.8vw,44px); line-height:1.35; margin-top:var(--sp-3); }
.article__hero .article__sub { color:#C9D7E0; font-size:18px; margin-top:var(--sp-4); max-width:60ch; line-height:1.8; }
.article__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); font-size:13.5px; color:#B7C7D3; font-weight:600; }
.article__meta .chip { color:#fff; border-color:rgba(255,255,255,.22); }
.article__meta .chip--dot::before { background:var(--ember); }
.article__author { display:flex; align-items:center; gap:10px; }
.article__author .avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; font-size:13px; font-weight:700; }

.article__cover { aspect-ratio:21/9; max-height:440px; background:var(--navy-900); overflow:hidden; }
.article__cover img { width:100%; height:100%; object-fit:cover; }

.article__layout { display:grid; grid-template-columns:minmax(0,1fr); gap:0; max-width:820px; margin-inline:auto; }
.article__content { font-size:17px; line-height:2; color:var(--ink); }
.article__content > * + * { margin-top:var(--sp-5); }
.article__content h2 { font-size:clamp(22px,2.6vw,28px); margin-top:var(--sp-8); line-height:1.4; color:var(--navy-900); }
.article__content h3 { font-size:21px; margin-top:var(--sp-7); line-height:1.4; color:var(--navy-900); }
.article__content p { color:var(--ink-1); }
.article__content a { color:var(--brand); font-weight:700; text-decoration:none; border-bottom:1px solid var(--brand-300); }
.article__content ul, .article__content ol { padding-inline-start:var(--sp-6); display:flex; flex-direction:column; gap:10px; }
.article__content ul { list-style:none; padding-inline-start:0; }
.article__content ul li { position:relative; padding-inline-start:28px; }
.article__content ul li::before { content:""; position:absolute; inset-inline-start:6px; top:11px; width:8px; height:8px; border-radius:2px; background:var(--ember); transform:rotate(45deg); }
.article__content ol { counter-reset:ol; }
.article__content ol li { counter-increment:ol; position:relative; padding-inline-start:34px; }
.article__content ol li::before { content:counter(ol); position:absolute; inset-inline-start:0; top:3px; width:22px; height:22px; border-radius:50%; background:var(--bg-soft); color:var(--brand); font-size:12px; font-weight:800; display:grid; place-items:center; }
.article__content strong { font-weight:800; color:var(--navy-900); }
.article__content em { font-style:italic; }
.article__content blockquote { margin:0; padding:var(--sp-5) var(--sp-6); background:var(--bg-soft); border-inline-start:4px solid var(--brand); border-radius:var(--r-md); font-size:18px; line-height:1.9; color:var(--navy-800); }
.article__content blockquote cite { display:block; margin-top:10px; font-size:14px; font-style:normal; font-weight:700; color:var(--ink-3); }
.article__content .callout { display:flex; gap:14px; padding:var(--sp-5); border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); }
.article__content .callout__icon { flex-shrink:0; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; }
.article__content .callout__icon svg { width:20px; height:20px; }
.article__content .callout__text { font-size:15.5px; line-height:1.85; color:var(--ink-1); }
.article__content .callout--tip { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.07); }
.article__content .callout--tip .callout__icon { background:var(--up); }
.article__content .callout--info { border-color:rgba(10,111,166,.35); background:rgba(10,111,166,.07); }
.article__content .callout--info .callout__icon { background:var(--brand); }
.article__content .callout--warn { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.article__content .callout--warn .callout__icon { background:var(--warn); }
.article__content figure { margin:0; }
.article__content figure img { width:100%; border-radius:var(--r-md); border:1px solid var(--line); }
.article__content figcaption { text-align:center; font-size:13.5px; color:var(--ink-3); margin-top:10px; }
.article__content hr { border:none; height:1px; background:var(--line); margin-block:var(--sp-7); }

/* Related blocks */
.related { border-top:1px solid var(--line); padding-block:var(--sp-8); }
.related__products { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.related__products .product { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.related__articles { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.related__articles .news { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }

/* Dark theme for blog */
[data-theme="dark"] .article__content h2,
[data-theme="dark"] .article__content h3 { color:#fff; }
[data-theme="dark"] .article__content blockquote { color:#E7EEF4; background:var(--surface-2); }
[data-theme="dark"] .article__content strong { color:#fff; }
[data-theme="dark"] .article__content .callout { background:var(--surface-2); }
[data-theme="dark"] .article__content ol li::before { background:var(--surface-2); }

/* Blog responsive */
@media (max-width:960px){
  .featured-article { grid-template-columns:1fr; }
  .featured-article__media { min-height:220px; }
  .related__products, .related__articles { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .blog-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .blog-grid { grid-template-columns:1fr; }
  .related__products, .related__articles { grid-template-columns:1fr; }
  .article__content { font-size:16px; }
}

/* ---------- e-Namad / trust badges (footer) ---------- */
.trust-badges { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.trust-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#C9D7E0; text-decoration:none; transition:border-color var(--t-fast), background var(--t-fast);
}
a.trust-badge:hover { border-color:var(--accent); background:rgba(212,175,55,.10); }
.trust-badge img { width:44px; height:44px; object-fit:contain; border-radius:6px; }
.trust-badge__icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(212,175,55,.14); color:var(--accent); }
.trust-badge__icon svg { width:20px; height:20px; }
.trust-badge__txt { display:flex; flex-direction:column; line-height:1.4; }
.trust-badge__txt b { font-size:13px; color:#E8EEF3; }
.trust-badge__txt span { font-size:11.5px; color:#7E92A0; }
.trust-badge--pending { border-style:dashed; opacity:.95; }

@media (max-width:760px){
  .footer__bottom { flex-direction:column; align-items:flex-start; gap:14px; }
  .trust-badges { order:-1; }
}