/* ============================================================================
   اوبا — سیستم طراحی کاتالوگ
   Design system for the assessment-platform catalogue
   Print target: A4 portrait. Vector-only artwork (crisp at any print DPI).
   ============================================================================ */

/* ---------- fonts: Vazirmatn (body) + Vazirmatn Black (display) ---------- */
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Black.woff2')   format('woff2'); font-weight:900; font-display:swap; }

@page{ size:A4 portrait; margin:0; }

:root{
  /* NEO brand board: navy + teal, plus one colour per factor */
  --primary:#12233A;        /* wordmark navy */
  --primary-mid:#0B2442;    /* apex navy */
  --deep:#0F1E33;
  --deep-2:#0A1526;
  --gold:#208693;           /* teal — the accent rule of the mark's base */
  --gold-soft:#7FD0D6;
  --tint:#E8EEF4;
  --tint-2:#F5F8FA;
  --line:#DCE4EC;
  --ink:#12233A;
  --muted:#5B6B7C;
  --muted-2:#8A9AAA;
  --ok:#2BA492;
  --ok-tint:#EAF7F4;
  --warn:#B87A0B;
  --warn-tint:#FFF8EC;
  --danger:#9B3D5B;
  --danger-tint:#FBF0F3;
  /* the five factors — used to colour their own sections */
  --f-n:#5B3A8B;  --f-n-tint:#F1ECF8;
  --f-e:#2876B0;  --f-e-tint:#EAF2F9;
  --f-o:#2BA492;  --f-o-tint:#E9F7F4;
  --f-a:#54A350;  --f-a-tint:#EDF6EC;
  --f-c:#EEA11B;  --f-c-tint:#FDF4E4;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:#8f91a6;
  line-height:1.78;
  font-size:10.2pt;
  -webkit-font-smoothing:antialiased;
}

/* ---------- page ---------- */
.page{
  width:210mm; min-height:297mm; background:#fff;
  margin:0 auto 9mm; position:relative; overflow:hidden;
  page-break-after:always;
  display:flex; flex-direction:column;
  box-shadow:0 14px 46px rgba(0,0,0,.34);
}
.page:last-child{ page-break-after:auto; margin-bottom:0; }
@media print{
  html,body{ width:210mm; background:#fff; margin:0; padding:0; }
  .page{
    /* EXACT A4 — min-height lets content spill onto a second sheet that paints
       only the background. A fixed height + clip guarantees one sheet per page. */
    width:210mm; height:297mm; min-height:0; max-height:297mm;
    margin:0; box-shadow:none; overflow:hidden;
    page-break-after:always; break-after:page;
    page-break-inside:avoid; break-inside:avoid;
  }
  .page:last-child{ page-break-after:avoid; break-after:avoid; }
  /* never let an inner block be split across sheets */
  .cover,.backcover,.pad{ overflow:hidden; page-break-inside:avoid; break-inside:avoid; }
  table,.tier,.icard,.ncard,.uc,.cap,.note,.qa,.ladder,.talk,.panel-dark,.timeline{
    page-break-inside:avoid; break-inside:avoid;
  }
}

.pad{ padding:11.5mm 13mm; flex:1; display:flex; flex-direction:column; }
.pad--tight{ padding:10mm 14mm; }

/* ---------- vector background artwork (no raster, print-crisp) ---------- */
.art-lattice{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 64L64 0M-16 16L16 -16M48 80L80 48' stroke='%23ffffff' stroke-width='.7' opacity='.13'/%3E%3Ccircle cx='0' cy='64' r='1.6' fill='%23208693' opacity='.5'/%3E%3Ccircle cx='64' cy='0' r='1.6' fill='%23208693' opacity='.5'/%3E%3C/svg%3E");
}
.art-dots{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.6' cy='1.6' r='1.1' fill='%2312233A' opacity='.16'/%3E%3C/svg%3E");
}
.art-dots-light{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23ffffff' opacity='.16'/%3E%3C/svg%3E");
}
.art-hatch{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0' stroke='%23208693' stroke-width='1.1' opacity='.22'/%3E%3C/svg%3E");
}
.art-grid{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M34 0H0V34' fill='none' stroke='%2312233A' stroke-width='.55' opacity='.14'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1,h2,h3,h4,.display{ font-weight:900; line-height:1.45; letter-spacing:-.3px; }
h2{ font-size:19pt; color:var(--deep); }
h3{ font-size:12.5pt; color:var(--primary-mid); font-weight:700; }
h4{ font-size:10.4pt; color:var(--primary-mid); font-weight:700; }
p{ margin-bottom:6px; }
strong,b{ font-weight:700; color:var(--deep); }
.lead{ font-size:11.1pt; color:var(--muted); line-height:1.85; font-weight:400; }

/* section opener: gold rule + eyebrow + big watermark numeral */
.sec-head{ position:relative; margin-bottom:11px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:8.3pt; font-weight:700; letter-spacing:.4px;
  color:var(--primary); text-transform:none;
}
.eyebrow::before{ content:''; width:20px; height:2.5px; background:var(--gold); border-radius:2px; }
.sec-head h2{ margin-top:5px; }
.sec-head .lead{ margin-top:7px; }

.wm{
  position:absolute; left:-2mm; top:-9mm;
  font-size:62pt; font-weight:900; color:var(--primary);
  opacity:.07; line-height:1; pointer-events:none; user-select:none;
}

/* ---------- icon system (inline SVG symbols, no emoji) ---------- */
.ico{ width:22px; height:22px; stroke:currentColor; fill:none;
      stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico--lg{ width:30px; height:30px; stroke-width:1.5; }
.ico--sm{ width:16px; height:16px; stroke-width:1.8; }

.ico-badge{
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tint); color:var(--primary);
}
.ico-badge--gold{ background:#fef6e3; color:var(--warn); }
.ico-badge--ok{   background:var(--ok-tint); color:var(--ok); }
.ico-badge--dark{ background:rgba(255,255,255,.12); color:var(--gold-soft); }
.ico-badge--danger{ background:var(--danger-tint); color:var(--danger); }

/* ---------- layout helpers ---------- */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.row{ display:flex; gap:11px; align-items:flex-start; }
.spacer{ flex:1; }

/* ---------- cards ---------- */
.card{ border:1px solid var(--line); border-radius:13px; padding:12px 14px; background:#fff; }
.card--tint{ background:var(--tint-2); border-color:var(--tint); }
.card--flat{ border:none; background:var(--tint-2); }
.card h4{ margin-bottom:4px; }
.card p{ font-size:9.3pt; color:var(--muted); line-height:1.78; margin:0; }

/* icon card: badge above title */
.icard{ border:1px solid var(--line); border-radius:13px; padding:13px; background:#fff; }
.icard .ico-badge{ margin-bottom:9px; }
.icard h4{ margin-bottom:4px; }
.icard p{ font-size:9.2pt; color:var(--muted); line-height:1.75; margin:0; }

/* stepped/numbered card with large ghost numeral */
.ncard{ position:relative; border:1px solid var(--line); border-radius:13px; padding:13px 14px 12px; background:#fff; overflow:hidden; }
.ncard .num{
  position:absolute; left:9px; top:2px; font-size:30pt; font-weight:900;
  color:var(--primary); opacity:.10; line-height:1;
}
.ncard h4{ margin-bottom:4px; }
.ncard p{ font-size:9.2pt; color:var(--muted); line-height:1.75; margin:0; }

/* ---------- callouts ---------- */
.note{ border-radius:12px; padding:11px 14px; font-size:9.6pt; line-height:1.82;
       background:var(--tint); border-right:4px solid var(--primary); color:var(--ink); }
.note--warn{  background:var(--warn-tint);   border-right-color:var(--gold); }
.note--ok{    background:var(--ok-tint);     border-right-color:var(--ok); }
.note--danger{background:var(--danger-tint); border-right-color:var(--danger); }
.note b{ color:var(--deep); }

/* editorial pull-quote */
.pull{
  position:relative; padding:14px 42px 14px 16px; border-radius:14px;
  background:var(--deep); color:#fff; font-size:11pt; line-height:1.85; font-weight:500;
}
.pull::before{
  content:'”'; position:absolute; right:14px; top:2px;
  font-size:40pt; font-weight:900; color:var(--gold); opacity:.55; line-height:1;
}
.pull b{ color:var(--gold-soft); }

/* question chip (a user's natural-language question) */
.q{
  position:relative; background:#fff; border:1px solid var(--line);
  border-right:3px solid var(--gold); border-radius:9px;
  padding:7px 12px 7px 11px; font-size:9.3pt; font-weight:500;
  color:var(--deep); margin-top:6px;
}

/* ---------- lists ---------- */
ul.tick{ list-style:none; }
ul.tick li{ position:relative; padding-right:21px; margin-bottom:6px;
            font-size:9.4pt; color:var(--muted); line-height:1.78; }
ul.tick li::before{
  content:''; position:absolute; right:0; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--ok-tint);
  box-shadow:inset 0 0 0 1.5px var(--ok);
}
ul.tick li b{ color:var(--ink); font-weight:700; }

/* ---------- tables ---------- */
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:8.9pt; }
th{ background:var(--deep); color:#fff; font-weight:700; padding:8px 10px;
    text-align:right; font-size:8.4pt; }
th:first-child{ border-radius:0 10px 0 0; }
th:last-child{ border-radius:10px 0 0 0; }
td{ padding:7px 10px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
td b{ color:var(--ink); font-weight:700; }
tbody tr:nth-child(even){ background:var(--tint-2); }
tbody tr:last-child td{ border-bottom:none; }

/* ---------- pills (engine chips) ---------- */
.pill{
  display:inline-block; background:#fff; color:var(--primary-mid);
  border:1px solid var(--line); border-radius:8px;
  padding:4px 11px; font-size:8.4pt; font-weight:700; margin:0 0 5px 4px;
}
.pill--key{ background:var(--deep); color:#fff; border-color:var(--deep); }
.pill--ghost{ background:transparent; color:var(--muted-2); border-style:dashed; font-weight:500; }

/* ---------- dark panels ---------- */
.panel-dark{
  background:linear-gradient(150deg,var(--deep-2) 0%,var(--primary-mid) 58%,var(--primary) 100%);
  color:#fff; border-radius:16px; padding:16px 18px; position:relative; overflow:hidden;
}
.panel-dark h3,.panel-dark h4{ color:#fff; }
.panel-dark p{ color:#BCCEDA; font-size:9.4pt; }
.panel-dark .gold{ color:var(--gold-soft); }

/* ---------- KPI strip ---------- */
.kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.kpi div{ background:var(--deep); border-radius:12px; padding:11px 8px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.kpi b{ display:block; font-size:17pt; font-weight:900; color:var(--gold-soft); line-height:1.4; }
.kpi span{ font-size:7.9pt; color:#A9C0CD; line-height:1.6; }

/* ---------- diagram primitives ---------- */
.zone{
  border:2px dashed var(--primary); border-radius:17px;
  padding:15px; background:var(--tint-2); position:relative;
}
.zone-label{
  position:absolute; top:-10px; right:18px; background:var(--primary); color:#fff;
  font-size:8.3pt; font-weight:700; padding:2px 13px; border-radius:999px;
}
.flow{ display:flex; align-items:stretch; gap:8px; }
.node{
  flex:1; border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:11px 8px; text-align:center;
}
.node .ico-badge{ margin:0 auto 7px; }
.node b{ display:block; font-size:9.2pt; color:var(--deep); font-weight:700; }
.node span{ font-size:7.9pt; color:var(--muted); display:block; line-height:1.65; }
.node--core{ background:var(--deep); border-color:var(--deep); }
.node--core b{ color:#fff; }
.node--core span{ color:#A9C0CD; }
.arrow{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--primary); min-width:46px; gap:2px;
}
.arrow small{ font-size:7pt; font-weight:700; color:var(--muted); line-height:1.35; text-align:center; }

/* barrier bar (the air-gap statement) */
.barrier{
  margin-top:13px; border-radius:13px; background:var(--danger-tint);
  border:1.5px solid #fbcaca; padding:11px 15px;
  display:flex; align-items:center; gap:12px;
}
.barrier b{ color:var(--danger); font-size:10.4pt; display:block; font-weight:900; }
.barrier span{ font-size:8.9pt; color:#8a2020; line-height:1.7; }

/* ---------- timeline (vertical spine) ---------- */
.timeline{ position:relative; padding-right:24px; }
.timeline::before{
  content:''; position:absolute; right:7px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--primary),var(--tint));
}
.tl{ position:relative; margin-bottom:11px; }
.tl::before{
  content:''; position:absolute; right:-22px; top:7px; width:12px; height:12px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 2.5px var(--primary);
}
.tl .when{ font-size:8pt; color:var(--warn); font-weight:700; }
.tl h4{ margin:1px 0 2px; }
.tl p{ font-size:9.3pt; color:var(--muted); margin:0; }

/* ---------- running header / footer ---------- */
.runhead{
  display:flex; justify-content:space-between; align-items:center;
  font-size:7.9pt; color:var(--muted-2);
  border-bottom:1px solid var(--line); padding:0 0 6px; margin-bottom:11px;
}
.runhead .bm{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--primary-mid); }
.runhead .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); }
.runfoot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:7.9pt; color:var(--muted-2);
  border-top:1px solid var(--line); padding-top:6px; margin-top:auto;
}

/* ---------- contact block ---------- */
.contact{
  background:linear-gradient(150deg,var(--deep-2),var(--primary));
  color:#fff; border-radius:16px; padding:18px 20px; position:relative; overflow:hidden;
}
.contact .rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:13px; }
.contact .r{ display:flex; gap:9px; align-items:flex-start; text-align:right; }
.contact .r span{ font-size:8.8pt; color:#BCCEDA; line-height:1.7; display:block; }
.contact .r b{ font-size:8.6pt; color:var(--gold-soft); display:block; font-weight:700; margin-bottom:1px; }

/* ---------- misc ---------- */
.hr-gold{ height:2.5px; width:48px; background:var(--gold); border-radius:2px; margin:9px 0 13px; }
.legal{ text-align:center; font-size:7.6pt; color:var(--muted-2); line-height:1.8; }
.nowrap{ white-space:nowrap; }
[dir="ltr"],.ltr{ direction:ltr; unicode-bidi:isolate; }

/* ============================================================================
   SECTION COMPONENTS — each section gets its own visual language
   ============================================================================ */

/* ---- "delay ladder": the growing-wait infographic (problem section) ---- */
.ladder{ position:relative; border-radius:15px; padding:15px 16px 13px;
         background:#fffdf7; border:1px solid #f6e6bd; overflow:hidden; }
.ladder .art-hatch-bg{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0' stroke='%23208693' stroke-width='1' opacity='.13'/%3E%3C/svg%3E");
}
.ladder-row{ position:relative; display:grid; grid-template-columns:26px 92px 1fr 62px;
             align-items:center; gap:9px; margin-bottom:7px; }
.ladder-row .st{ width:23px; height:23px; border-radius:7px; background:#fff;
                 border:1.5px solid #edd9a8; color:var(--warn);
                 display:flex; align-items:center; justify-content:center;
                 font-size:8.6pt; font-weight:900; }
.ladder-row .lbl{ font-size:9.1pt; font-weight:700; color:var(--deep); }
.ladder-row .bar{ height:11px; border-radius:6px;
                  background:linear-gradient(90deg,#f7d98a,#e8a317); }
.ladder-row .amt{ font-size:8.6pt; font-weight:700; color:var(--warn); text-align:left; }
.ladder-row--win .st{ border-color:#9AE0D6; color:var(--ok); background:var(--ok-tint); }
.ladder-row--win .bar{ background:linear-gradient(90deg,#5eead4,#0f766e); }
.ladder-row--win .amt{ color:var(--ok); }
.ladder-row--win .lbl{ color:var(--ok); }
.ladder-split{ position:relative; border-top:1.5px dashed #E9C88A; margin:10px 0 9px; }

/* ---- security Q/A matrix (dark, shield watermark) ---- */
.qa{ position:relative; border-radius:15px; overflow:hidden;
     background:linear-gradient(155deg,var(--deep-2),var(--primary-mid)); color:#fff; padding:15px 17px; }
.qa .wm-shield{ position:absolute; left:-14px; bottom:-26px; width:150px; height:150px;
                color:#fff; opacity:.06; pointer-events:none; }
.qa-row{ position:relative; display:grid; grid-template-columns:auto 1fr;
         gap:10px; padding:5.5px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.qa-row:last-child{ border-bottom:none; }
.qa-row .k{ font-size:9.1pt; font-weight:700; color:var(--gold-soft); }
.qa-row .v{ font-size:9pt; color:#BCCEDA; line-height:1.72; }
.qa-row .v b{ color:#fff; font-weight:700; }

/* ---- use-case quadrant ---- */
.uc{ border:1px solid var(--line); border-radius:14px; padding:12px 13px; background:#fff;
     position:relative; overflow:hidden; }
.uc::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
            background:linear-gradient(180deg,var(--primary),var(--gold)); }
.uc .hd{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.uc .hd h4{ margin:0; }

/* ---- capability card (3-up, gold rule under icon) ---- */
.cap{ border:1px solid var(--line); border-radius:14px; padding:14px 13px; background:#fff;
      position:relative; overflow:hidden; }
.cap .ico-badge{ margin-bottom:10px; }
.cap h4{ margin-bottom:5px; font-size:10.6pt; }
.cap p{ font-size:9.1pt; color:var(--muted); line-height:1.75; margin:0; }
.cap .tagline{ margin-top:8px; padding-top:7px; border-top:1px solid var(--line);
               font-size:8.5pt; color:var(--primary); font-weight:700; }

/* ---- brand mark ---- */
.bmark{ display:flex; align-items:center; gap:10px; }
.bmark .nm{ font-size:14pt; font-weight:900; letter-spacing:-.3px; }

/* ---- hero ---- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(145deg,#12102b 0%,#241f5e 45%,#208693 100%);
  padding:14mm 14mm 12mm;
}
.hero .art{ position:absolute; inset:0; pointer-events:none; }
.hero h1{ font-size:25pt; font-weight:900; line-height:1.45; position:relative; }
.hero h1 .gold{ color:var(--gold-soft); }
.hero .sub{ font-size:11pt; color:#B7CBD6; margin-top:11px; line-height:1.9; max-width:152mm; position:relative; }
.hero .sub b{ color:#fff; font-weight:700; }
.badges{ display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; position:relative; }
.badge{ border:1.5px solid rgba(191,228,232,.42); border-radius:999px;
        padding:5px 13px; font-size:8.5pt; font-weight:700; color:#e6e8ff;
        background:rgba(255,255,255,.07); display:inline-flex; align-items:center; gap:6px; }
.badge--gold{ background:var(--gold); border-color:var(--gold); color:#3a2606; }

/* ---- cover ---- */
.cover{ position:relative; overflow:hidden; color:#fff; flex:1;
        background:linear-gradient(150deg,#08131F 0%,#12233A 42%,#208693 100%);
        display:flex; flex-direction:column; padding:20mm 16mm 15mm; }
.cover .art{ position:absolute; inset:0; pointer-events:none; }
.cover h1{ font-size:31pt; font-weight:900; line-height:1.44; position:relative; }
.cover h1 .gold{ color:var(--gold-soft); }
.cover .sub{ font-size:12.5pt; color:#B7CBD6; margin-top:15px; line-height:1.95;
             max-width:150mm; position:relative; }
.cover .sub b{ color:#fff; font-weight:700; }
.cover .foot{ position:relative; margin-top:auto; padding-top:20px;
              border-top:1px solid rgba(191,228,232,.25);
              display:flex; justify-content:space-between; align-items:flex-end;
              font-size:9.3pt; color:#B7CBD6; }
.cover .foot b{ color:#fff; font-size:10.6pt; }

/* ============================================================================
   COVERS — front cover hero composition + closing back cover
   ============================================================================ */

.cover-art{ position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
            width:168mm; height:168mm; opacity:.9; pointer-events:none; }
.cover-art .ring-out{ fill:none; stroke:#5FB6C0; stroke-width:1.1; opacity:.34; stroke-dasharray:7 9; }
.cover-art .ring-mid{ fill:none; stroke:#7FD0D6; stroke-width:.85; opacity:.24; }
.cover-art .ring-in { fill:none; stroke:#BFE4E8; stroke-width:.7;  opacity:.18; }
.cover-art .spoke   { stroke:#5FB6C0; stroke-width:.8; opacity:.3; }
.cover-art .node    { fill:#0A1526; stroke:#BFE4E8; stroke-width:1.5; }
.cover-art .node-g  { fill:#208693; opacity:.95; }
.cover-art .core    { fill:url(#coreGrad); stroke:#208693; stroke-width:1.6; }
.cover-art .coretxt { fill:#fff; font-weight:900; font-family:'Vazirmatn',Tahoma,sans-serif; }

/* front cover: stacked, type over art */
.cover--hero{ justify-content:flex-start; }

/* Type sits directly over the artwork, and the bright core + gold nodes used to
   collide with the headline. Rather than flattening the art everywhere, lift it
   clear of the type and lay a bottom-up scrim over the lower half: the rings stay
   fully vivid at the top, and every line of type gets an even dark backing. */
.cover--hero .cover-art{ top:38%; opacity:.8; }
/* the filled core and the gold nodes are the only hard-edged, high-contrast
   shapes; softened here they read as a glow behind the type instead of an
   outline cutting through it. Untouched on the back cover. */
.cover--hero .cover-art .core  { opacity:.5; }
.cover--hero .cover-art .node-g{ opacity:.6; }
.cover--hero .cover-art .node  { opacity:.75; }
.cover--hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:68%;
  background:linear-gradient(to top,
              rgba(8,19,31,.95)  0%,
              rgba(8,19,31,.90) 24%,
              rgba(8,19,31,.72) 46%,
              rgba(8,19,31,.40) 68%,
              rgba(8,19,31,.14) 86%,
              rgba(8,19,31,0)  100%);
  pointer-events:none; z-index:0;
}
/* keep every content layer above the scrim (they precede ::after in the DOM) */
.cover--hero .bmark,
.cover--hero .plate,
.cover--hero .foot{ z-index:1; }

.cover--hero .plate{ position:relative; margin-top:auto; }
.cover--hero .kicker{
  display:inline-flex; align-items:center; gap:8px; position:relative;
  font-size:9pt; font-weight:700; color:#08131F; background:var(--gold);
  border-radius:999px; padding:5px 15px; margin-bottom:15px;
}
.cover--hero h1{ font-size:34pt; line-height:1.38; }
.cover--hero .strap{
  position:relative; margin-top:18px; padding-right:15px;
  border-right:3px solid var(--gold); font-size:12pt; color:#cdd0f5; line-height:1.9; max-width:145mm;
}
.cover--hero .strap b{ color:#fff; font-weight:700; }

/* back cover */
.backcover{
  position:relative; overflow:hidden; color:#fff; flex:1;
  background:linear-gradient(155deg,#08131F 0%,#12233A 45%,#1B6C77 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22mm 18mm; text-align:center;
}
.backcover .art{ position:absolute; inset:0; pointer-events:none; }
.backcover .bc-mark{ position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; }
.backcover .bc-name{ font-size:21pt; font-weight:900; letter-spacing:-.4px; }
.backcover .bc-tag{ font-size:11.5pt; color:#B7CBD6; line-height:1.9; max-width:130mm; margin-top:4px; }
.backcover .bc-rule{ width:54px; height:3px; background:var(--gold); border-radius:2px; margin:20px 0; position:relative; }
.backcover .bc-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr);
                     gap:13px; width:100%; max-width:165mm; margin-top:4px; }
.backcover .bc-cell{
  border:1px solid rgba(191,228,232,.26); border-radius:13px; padding:13px 11px;
  background:rgba(255,255,255,.05); display:flex; flex-direction:column; align-items:center; gap:7px;
}
.backcover .bc-cell b{ font-size:8.6pt; color:var(--gold-soft); font-weight:700; }
.backcover .bc-cell span{ font-size:8.9pt; color:#BCCEDA; line-height:1.75; }
.backcover .bc-site{ position:relative; margin-top:24px; font-size:15pt; font-weight:900; letter-spacing:.6px; }
.backcover .bc-legal{ position:relative; margin-top:20px; padding-top:0;
                      font-size:8pt; color:#9fa3d8; line-height:1.8; }

/* ---- conversation transcript (the guided-analysis illustration) ---- */
.talk{ border:1px solid var(--line); border-radius:15px; background:var(--tint-2); padding:11px 13px; }
.talk-row{ display:flex; gap:9px; margin-bottom:7px; align-items:flex-start; }
.talk-row:last-child{ margin-bottom:0; }
.talk-who{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:8pt; font-weight:900;
}
.talk-row--user .talk-who{ background:var(--tint); color:var(--primary); }
.talk-row--sys  .talk-who{ background:var(--deep); color:var(--gold-soft); }
.bubble{ flex:1; border-radius:11px; padding:7px 11px; font-size:9pt; line-height:1.72; }
.talk-row--user .bubble{ background:#fff; border:1px solid var(--line); color:var(--deep); font-weight:500; }
.talk-row--sys  .bubble{ background:var(--deep); color:#BCCEDA; }
.talk-row--sys  .bubble b{ color:var(--gold-soft); font-weight:700; }
.bubble .tag{ display:block; font-size:7.6pt; font-weight:700; margin-bottom:2px; opacity:.75; }

/* ---- cost tiers ---- */
.tier{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.tier .tier-hd{ background:var(--tint-2); border-bottom:1px solid var(--line); padding:10px 13px; }
.tier .tier-hd h4{ margin:0 0 2px; }
.tier .tier-hd span{ font-size:8.2pt; color:var(--muted); }
.tier .tier-bd{ padding:11px 13px; flex:1; }
.tier .tier-bd ul{ list-style:none; }
.tier .tier-bd li{ font-size:8.8pt; color:var(--muted); line-height:1.75; padding-right:13px; position:relative; margin-bottom:3px; }
.tier .tier-bd li::before{ content:''; position:absolute; right:0; top:8px; width:4px; height:4px; border-radius:50%; background:var(--primary); opacity:.55; }
.tier .tier-ft{ background:var(--deep); color:#fff; padding:10px 13px; text-align:center; }
.tier .tier-ft b{ display:block; font-size:13pt; font-weight:900; color:var(--gold-soft); line-height:1.4; }
.tier .tier-ft span{ font-size:7.8pt; color:#A9C0CD; }
.tier--mid .tier-hd{ background:var(--tint); }


/* ---- identity lockup: orbit mark + wordmark + latin subline ---- */
.bmark{ display:flex; align-items:center; gap:10px; }
.bmark-orbit{ width:38px; height:38px; flex:0 0 38px; display:block; }
.bmark-orbit--lg{ width:66px; height:66px; flex:0 0 66px; }
.bmark-rule{
  width:1.6px; height:27px; border-radius:2px; flex:0 0 1.6px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
}
.bmark-type .nm{ font-size:15pt; font-weight:900; letter-spacing:-.5px; line-height:1.2; }
.bmark-type .sub{
  font-size:6.9pt; font-weight:700; letter-spacing:3.4px;
  opacity:.62; margin-top:1px; text-align:right;
}
.backcover .bc-mark{ gap:9px; }
.backcover .bc-sub{
  font-size:8pt; font-weight:700; letter-spacing:4.2px;
  color:var(--gold-soft); opacity:.9; margin-top:-4px;
}

/* ============================================================================
   SIDE-BY-SIDE COMPARISON — «امروز» (left) vs «با همکار داده» (right)
   In RTL the FIRST grid child renders on the RIGHT, so the solution column
   is written first and the current-state column second.
   ============================================================================ */
.vs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line);
     border-radius:14px; overflow:hidden; }
.vs-col{ padding:12px 14px 13px; }
.vs-col--new{ background:var(--ok-tint); }
.vs-col--now{ background:#fbf7f7; border-right:1px solid var(--line); }
.vs-hd{ display:flex; align-items:center; gap:7px; padding-bottom:7px; margin-bottom:7px;
        border-bottom:1px solid rgba(0,0,0,.08); }
.vs-hd b{ font-size:9.7pt; font-weight:800; }
.vs-col--new .vs-hd b{ color:var(--ok); }
.vs-col--now .vs-hd b{ color:#9b3d3d; }
.vs-tag{ margin-right:auto; font-size:7.4pt; font-weight:700; border-radius:999px;
         padding:1px 8px; }
.vs-col--new .vs-tag{ background:rgba(15,118,110,.13); color:var(--ok); }
.vs-col--now .vs-tag{ background:rgba(155,61,61,.11); color:#9b3d3d; }
.vs-row{ position:relative; padding:4px 15px 4px 0; font-size:8.9pt;
         line-height:1.72; color:var(--muted); }
.vs-row::before{ content:''; position:absolute; right:2px; top:11px;
                 width:5px; height:5px; border-radius:50%; }
.vs-col--new .vs-row::before{ background:var(--ok); }
.vs-col--now .vs-row::before{ background:#c98b8b; }
.vs-row b{ color:var(--ink); font-weight:700; }

/* value strip — the "so what" line under a comparison */
.gain{ margin-top:9px; display:flex; align-items:center; gap:10px;
       border-radius:12px; background:var(--deep); color:#fff; padding:9px 14px; }
.gain .k{ font-size:8pt; font-weight:700; color:var(--gold-soft); flex:0 0 auto; }
.gain .v{ font-size:9.3pt; line-height:1.7; color:#BCCEDA; }


/* ============================================================================
   NEO additions — factor colouring + a roadmap badge
   ============================================================================ */
.fx{ --fx:var(--primary); --fx-tint:var(--tint); }
.fx-n{ --fx:var(--f-n); --fx-tint:var(--f-n-tint); }
.fx-e{ --fx:var(--f-e); --fx-tint:var(--f-e-tint); }
.fx-o{ --fx:var(--f-o); --fx-tint:var(--f-o-tint); }
.fx-a{ --fx:var(--f-a); --fx-tint:var(--f-a-tint); }
.fx-c{ --fx:var(--f-c); --fx-tint:var(--f-c-tint); }

.fx-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fx-chip{ width:34px; height:34px; border-radius:10px; flex:0 0 34px;
          display:flex; align-items:center; justify-content:center;
          background:var(--fx); color:#fff; font-weight:900; font-size:12pt; }
.fx-head h3{ color:var(--fx); margin:0; }
.fx-rule{ height:3px; border-radius:2px; background:var(--fx); opacity:.85; margin:2px 0 8px; }

table.fx-table th{ background:var(--fx); }
table.fx-table tbody tr:nth-child(even){ background:var(--fx-tint); }

/* «در دست توسعه» — the honesty badge (option B) */
.soon{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
       font-size:7.4pt; font-weight:800; border-radius:999px;
       padding:1.5px 8px; background:var(--warn-tint); color:var(--warn);
       border:1px solid rgba(184,122,11,.28); }
.soon::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--warn); }
.note--soon{ background:var(--warn-tint); border-right-color:var(--warn); }

/* the scoring pipeline column */
.pipe{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.pipe-row{ display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:center;
           padding:9px 13px; border-bottom:1px solid var(--line); font-size:9.4pt; }
.pipe-row:last-child{ border-bottom:none; }
.pipe-row .n{ width:24px; height:24px; border-radius:7px; background:var(--tint);
              color:var(--primary); font-weight:900; font-size:8.6pt;
              display:flex; align-items:center; justify-content:center; }
.pipe-row--out{ background:var(--tint-2); }
.pipe-row--out .n{ background:var(--gold); color:#fff; }