/* ============================================================
   COUNTRY EXPLORER — section styles
   ============================================================ */

/* ---------- generic card ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-1);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card--hover:hover{ border-color:color-mix(in oklab,var(--brand) 42%,var(--line)); box-shadow:var(--shadow-2); transform:translateY(-3px); }

/* ---------- WHY SUDAN ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{ position:relative; overflow:hidden; }
.why-card h3{ font-size:19.5px; margin-bottom:10px; }
.why-card p{ font-size:14.5px; color:var(--muted); line-height:1.68; }
.why-card__bar{ height:3px; border-radius:2px; background:var(--brand); margin-top:18px; width:38px; transition:width .5s var(--ease-out); }
.why-card:hover .why-card__bar{ width:78px; }

/* ============================================================
   INVESTMENT MAP
   ============================================================ */
.map-shell{
  display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start;
}
@media (max-width:1024px){ .map-shell{ grid-template-columns:1fr; } }

.map-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:20px; box-shadow:var(--shadow-2); position:relative; overflow:hidden;
}
.map-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.seg{
  display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px; gap:2px;
}
.seg button{
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:620; color:var(--muted);
  transition:.22s var(--ease); white-space:nowrap;
}
.seg button[aria-pressed="true"]{ background:var(--brand); color:#fff; box-shadow:var(--shadow-1); }
html[data-theme="dark"] .seg button[aria-pressed="true"]{ color:#050B22; }

.sector-select{
  padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  font-size:13.5px; font-weight:600; color:var(--ink); max-width:280px; font-family:inherit;
}

.map-stage{ position:relative; }
.map-svg{ width:100%; height:auto; overflow:visible; touch-action:manipulation; }
.st-path{
  fill:var(--map-base); stroke:var(--map-line); stroke-width:1.4; stroke-linejoin:round;
  cursor:pointer; transition:fill .35s var(--ease), stroke-width .2s;
}
.st-path:hover{ stroke-width:2.6; stroke:var(--surface); }
.st-path.is-active{ stroke:var(--accent); stroke-width:3; }
.st-path.is-special{ cursor:default; fill:url(#hatch); }
.st-path.is-dim{ opacity:.38; }
/* Label sizes are SVG user units on a 1000-wide viewBox: at a ~740px rendered
   width one unit ≈ 0.74 real px, so these must be far larger than CSS px. */
.st-label{
  font-size:21px; font-weight:640; fill:var(--ink); paint-order:stroke;
  stroke:var(--surface); stroke-width:5px; stroke-linejoin:round;
  pointer-events:none; text-anchor:middle; opacity:.94;
}
html[lang="ar"] .st-label{ font-size:23px; }
.st-label.is-hidden{ display:none; }
/* sector mode: name lifts clear of the score sitting below the centroid */
.st-label.is-lifted{ transform:translateY(-20px); }
.st-score{
  font-size:27px; font-weight:800; fill:#fff; text-anchor:middle; pointer-events:none;
  font-family:var(--font-num); paint-order:stroke; stroke:rgba(6,14,38,.55); stroke-width:5px;
}
/* Below this width the map is too small for 18 labels — names come from tap + panel */
@media (max-width:760px){
  .st-label{ display:none; }
  .st-score{ font-size:34px; stroke-width:5px; }
}

.map-tip{
  position:absolute; pointer-events:none; z-index:5; opacity:0; transform:translateY(6px);
  background:var(--pri-900); color:#E9EDFB; border-radius:10px; padding:9px 13px;
  font-size:12.5px; line-height:1.4; box-shadow:var(--shadow-3); white-space:nowrap;
  transition:opacity .18s, transform .18s;
}
.map-tip.on{ opacity:1; transform:none; }
.map-tip b{ display:block; font-size:14px; font-weight:700; }
.map-tip span{ color:var(--acc-400); font-size:12px; }

.map-legend{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--muted); }
.legend-scale{ display:flex; align-items:center; gap:0; border-radius:4px; overflow:hidden; }
.legend-scale i{ width:26px; height:9px; display:block; }
.legend-dot{ display:inline-flex; align-items:center; gap:6px; }
.legend-dot b{ width:11px; height:11px; border-radius:3px; display:block; }

/* state detail panel */
.detail{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-2); overflow:hidden; position:sticky; top:88px;
  max-height:calc(100vh - 110px); display:flex; flex-direction:column;
}
@media (max-width:1024px){ .detail{ position:static; max-height:none; } }
.detail__head{ padding:24px 24px 18px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.detail__head .eyebrow{ margin-bottom:10px; }
.detail__head h3{ font-size:27px; }
.detail__cap{ font-size:13.5px; color:var(--muted); margin-top:6px; }
.detail__body{ padding:22px 24px 26px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; }
.detail__body p{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.detail h4{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:12px; font-weight:700;
}
html[lang="ar"] .detail h4{ letter-spacing:.02em; text-transform:none; font-size:13px; }
.adv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.adv-list li{ display:flex; gap:10px; font-size:14px; color:var(--ink-2); align-items:flex-start; }
.adv-list svg{ flex:none; margin-top:3px; color:var(--brand); }

.sec-bars{ display:flex; flex-direction:column; gap:11px; }
.sec-bar{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; cursor:pointer; }
.sec-bar__n{ font-size:13.5px; font-weight:580; }
.sec-bar__v{ font-size:12.5px; font-weight:700; font-family:var(--font-num); color:var(--muted); }
.sec-bar__t{ grid-column:1/-1; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.sec-bar__f{ height:100%; border-radius:3px; transform-origin:left; transition:width .7s var(--ease-out); }
html[dir="rtl"] .sec-bar__f{ transform-origin:right; }
.sec-bar:hover .sec-bar__n{ color:var(--brand); }

.empty-state{ padding:56px 26px; text-align:center; color:var(--muted); }
.empty-state svg{ margin:0 auto 16px; color:var(--faint); }
.empty-state b{ display:block; font-size:17px; color:var(--ink); margin-bottom:8px; font-weight:660; }
.empty-state p{ font-size:14px; max-width:34ch; margin-inline:auto; }

.rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.rank-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-md);
  cursor:pointer; transition:background .2s;
}
.rank-row:hover{ background:var(--surface-2); }
.rank-row__i{ font-size:12px; font-weight:760; color:var(--faint); font-family:var(--font-num); width:20px; }
.rank-row__n{ flex:1; font-size:14.5px; font-weight:580; }
.rank-row__b{ width:74px; height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden; flex:none; }
.rank-row__f{ height:100%; border-radius:4px; }
.rank-row__v{ font-size:13px; font-weight:720; font-family:var(--font-num); width:30px; text-align:end; }

/* ============================================================
   SECTORS
   ============================================================ */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.chip{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--muted); transition:.22s var(--ease);
}
.chip:hover{ border-color:var(--brand); color:var(--brand); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.sector-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .sector-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sector-grid{ grid-template-columns:1fr; } }
.sec-card{
  padding:20px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  cursor:pointer; text-align:start; display:flex; flex-direction:column; gap:9px; min-height:172px;
  transition:.28s var(--ease); position:relative; overflow:hidden;
}
/* Group identity is carried by the eyebrow colour and a whole-card tint on
   hover, not by a coloured left rail — that rail is the most over-used
   dashboard-card device there is, and it reads as decoration rather than
   information. */
.sec-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-2);
  border-color:color-mix(in oklab,var(--sc) 52%,var(--line));
  background:color-mix(in oklab,var(--sc) 5%,var(--surface));
}
/* Group hues are picked for fills, not text: several sit near 2:1 on the card.
   Mixing toward --ink keeps each hue recognisable and clears 4.5:1 in both
   themes, since --ink is dark on light and light on dark. */
.sec-card__g{ font-size:12px; font-weight:720; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in oklab, var(--sc) 52%, var(--ink)); }
html[lang="ar"] .sec-card__g{ letter-spacing:.02em; text-transform:none; font-size:12px; }
.sec-card h3{ font-size:17px; line-height:1.25; }
.sec-card p{ font-size:13px; color:var(--muted); line-height:1.55; flex:1; }
.sec-card__f{ display:flex; gap:14px; font-size:12px; color:var(--faint); padding-top:10px; border-top:1px solid var(--line); }
.sec-card__f b{ color:var(--ink-2); font-family:var(--font-num); font-weight:700; }

/* ---------- drawer / modal ---------- */
.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(6,25,16,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease);
}
.scrim.on{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; z-index:95; inset-block:0; inset-inline-end:0; width:min(560px,100%);
  background:var(--bg); box-shadow:var(--shadow-3); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .45s var(--ease-out);
}
html[dir="rtl"] .sheet{ transform:translateX(-102%); }
.sheet.on{ transform:none !important; }
.sheet__head{
  padding:22px 26px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start;
  gap:16px; background:var(--surface);
}
.sheet__head h3{ font-size:25px; }
.sheet__body{ padding:26px; overflow-y:auto; display:flex; flex-direction:column; gap:26px; }
@media (max-width:640px){
  .sheet{ inset-block:auto 0; inset-inline:0; width:100%; height:88vh; border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(102%); }
  html[dir="rtl"] .sheet{ transform:translateY(102%); }
  .sheet__head{ border-radius:var(--r-xl) var(--r-xl) 0 0; }
}
.kv{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.kv > div{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; }
.kv dt{ font-size:12px; color:var(--muted); font-weight:600; }
.kv dd{ margin:5px 0 0; font-size:19px; font-weight:720; font-family:var(--font-num); letter-spacing:-.02em; }
.risk-dots{ display:inline-flex; gap:3px; vertical-align:middle; }
.risk-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block; }
.risk-dots i.on{ background:var(--clay); }
.tag-row{ display:flex; gap:7px; flex-wrap:wrap; }
.tag{
  font-size:12px; padding:5px 11px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink-2); font-weight:580;
}
.tag--sdg{ background:color-mix(in oklab,var(--sky) 12%,var(--surface)); border-color:color-mix(in oklab,var(--sky) 30%,transparent); color:var(--sky); }

/* ============================================================
   PORTFOLIOS — value chains
   ============================================================ */
.pf-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.pf-tab{
  padding:11px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  font-size:14px; font-weight:620; color:var(--muted); transition:.22s var(--ease); text-align:start;
}
.pf-tab:hover{ border-color:var(--brand); color:var(--ink); }
.pf-tab[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow-2); }
html[data-theme="dark"] .pf-tab[aria-pressed="true"]{ color:#050B22; }

.pf-body{ display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start; }
@media (max-width:940px){ .pf-body{ grid-template-columns:1fr; gap:24px; } }
.pf-intro h3{ font-size:clamp(24px,2.6vw,34px); margin-bottom:14px; }
.pf-intro p{ font-size:15.5px; color:var(--muted); line-height:1.72; }
.pf-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.pf-metrics > div{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px; background:var(--surface); }
.pf-metrics dt{ font-size:12px; color:var(--muted); font-weight:600; }
.pf-metrics dd{ margin:4px 0 0; font-size:21px; font-weight:740; font-family:var(--font-num); letter-spacing:-.03em; color:var(--brand); }

.chain{ display:flex; flex-direction:column; gap:0; }
.chain-link{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:15px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); position:relative; transition:.3s var(--ease); cursor:default;
}
.chain-link:hover{ border-color:var(--brand); transform:translateX(4px); box-shadow:var(--shadow-2); }
html[dir="rtl"] .chain-link:hover{ transform:translateX(-4px); }
.chain-link__i{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:color-mix(in oklab,var(--brand) 13%,transparent); color:var(--brand);
  font-size:12.5px; font-weight:760; font-family:var(--font-num);
}
.chain-link__n{ display:block; font-size:14.5px; font-weight:600; }
.chain-link__s{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.chain-link__c{ font-size:13px; font-weight:720; font-family:var(--font-num); color:var(--ink-2); white-space:nowrap; }
.chain-arrow{ height:18px; display:grid; place-items:center; color:var(--brand); opacity:.5; }
.chain-arrow svg{ width:14px; height:14px; }
html[dir="rtl"] .chain-arrow svg{ transform:scaleX(-1); }
.chain-note{
  margin-top:18px; padding:16px 18px; border-radius:var(--r-md);
  background:color-mix(in oklab,var(--brand) 8%,var(--surface));
  border:1px solid color-mix(in oklab,var(--brand) 24%,transparent);
  font-size:13.5px; color:var(--ink-2); line-height:1.62;
}

/* ============================================================
   MATCH ENGINE
   ============================================================ */
.match{ display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:start; }
@media (max-width:900px){ .match{ grid-template-columns:1fr; } }
.filters{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:24px; box-shadow:var(--shadow-1); position:sticky; top:88px; }
@media (max-width:900px){ .filters{ position:static; } }
.f-group{ margin-bottom:22px; }
.f-group:last-child{ margin-bottom:0; }
.f-group label{ display:block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:11px; }
html[lang="ar"] .f-group label{ letter-spacing:.02em; text-transform:none; font-size:13.5px; }
.f-group select{
  width:100%; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface-2); font-size:14px; color:var(--ink); font-family:inherit; font-weight:560;
}
.f-group .f-input{
  width:100%; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface-2); font-size:14px; color:var(--ink); font-family:inherit; font-weight:560;
}
.f-group .f-input:focus-visible{ outline:2.5px solid var(--accent); outline-offset:1px; }
.f-note{ margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--muted); }
.match-sum{ font-size:13px; color:var(--muted); }
.f-val{ font-family:var(--font-num); font-weight:720; color:var(--brand); font-size:14px; }
/* The input is 32px tall so the whole row is grabbable; the visible 5px track
   is painted by a centred gradient and the negative margins cancel the extra
   height, so the row spacing is unchanged. */
input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:32px; margin:-8px 0 -13px;
  background:linear-gradient(var(--line-strong),var(--line-strong)) center/100% 5px no-repeat; background-clip:padding-box;
  border:0; border-radius:3px; outline:none; cursor:pointer;
}
input[type=range]:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--brand);
  border:3px solid var(--surface); box-shadow:var(--shadow-2); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--brand);
  border:3px solid var(--surface); box-shadow:var(--shadow-2); cursor:pointer;
}
.match-results{ display:flex; flex-direction:column; gap:12px; }
.match-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:4px; flex-wrap:wrap; }
.match-head b{ font-size:15px; font-weight:660; }
.proj{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:18px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); transition:.26s var(--ease);
}
@media (max-width:620px){ .proj{ grid-template-columns:1fr; gap:12px; } }
.proj:hover{ border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-2px); }
.proj__score{
  width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center;
  font-family:var(--font-num); font-weight:780; font-size:17px; letter-spacing:-.03em;
  background:color-mix(in oklab,var(--brand) 14%,transparent); color:var(--brand);
}
.proj__n{ font-size:16px; font-weight:640; line-height:1.32; }
.proj__m{ display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:6px; }
.proj__m b{ color:var(--ink-2); font-family:var(--font-num); font-weight:700; }
.proj__cta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.proj__roi{ font-size:22px; font-weight:760; font-family:var(--font-num); color:var(--brand); letter-spacing:-.03em; }
.proj__roil{ font-size:12px; color:var(--faint); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1080px){ .dash-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dash-grid{ grid-template-columns:1fr; } }
.dcard{ padding:20px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.dcard__l{ font-size:13px; color:var(--muted); font-weight:580; min-height:38px; }
.dcard__v{ font-size:29px; font-weight:750; font-family:var(--font-num); letter-spacing:-.035em; margin-top:6px; }
.dcard__d{ font-size:12.5px; font-weight:700; font-family:var(--font-num); display:inline-flex; align-items:center; gap:4px; }
.dcard__d.up{ color:var(--pri-600); } .dcard__d.down{ color:var(--clay); }
.dcard__spark{ margin-top:12px; }
.dcard__src{ font-size:12px; color:var(--faint); margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }

/* ============================================================
   ECOSYSTEM (directory / marketplace / open data)
   ============================================================ */
.eco-tabs{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; margin-bottom:28px; width:fit-content; max-width:100%; overflow-x:auto; }
.eco-tabs button{ padding:10px 20px; border-radius:999px; font-size:14px; font-weight:620; color:var(--muted); white-space:nowrap; transition:.22s var(--ease); }
.eco-tabs button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }

.co-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .co-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .co-grid{ grid-template-columns:1fr; } }
.co{ padding:20px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:10px; transition:.26s var(--ease); }
.co:hover{ border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-3px); }
.co__top{ display:flex; align-items:center; gap:12px; }
.co__logo{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-weight:780; font-size:15px; letter-spacing:-.03em; color:#fff;
}
.co__n{ font-size:15.5px; font-weight:660; line-height:1.28; }
.co__meta{ font-size:12px; color:var(--faint); margin-top:2px; display:flex; gap:7px; align-items:center; }
.co__s{ font-size:13px; color:var(--muted); line-height:1.6; flex:1; }
.verified{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--pri-600); }
.co__f{ display:flex; justify-content:space-between; font-size:12px; color:var(--faint); padding-top:11px; border-top:1px solid var(--line); }

.ds-row{
  display:grid; grid-template-columns:1fr auto auto auto; gap:18px; align-items:center;
  padding:17px 20px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  transition:.24s var(--ease);
}
@media (max-width:760px){ .ds-row{ grid-template-columns:1fr; gap:9px; } }
.ds-row:hover{ border-color:var(--brand); }
.ds-row__n{ font-size:15px; font-weight:620; }
.ds-row__o{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.ds-row__f{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line); font-family:var(--font-num); }
.ds-row__m{ font-size:12.5px; color:var(--muted); font-family:var(--font-num); }
.pill{ font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.pill--ok{ background:color-mix(in oklab,var(--pri-600) 14%,transparent); color:var(--pri-600); }
.pill--rev{ background:color-mix(in oklab,var(--acc-600) 18%,transparent); color:var(--acc-700); }
html[data-theme="dark"] .pill--rev{ color:var(--acc-400); }

.submit-cta{
  margin-top:24px; padding:28px; border-radius:var(--r-xl);
  border:1.5px dashed color-mix(in oklab,var(--brand) 40%,var(--line));
  background:color-mix(in oklab,var(--brand) 5%,var(--surface));
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.submit-cta__b{ flex:1; min-width:260px; }
.submit-cta h4{ font-size:18px; margin-bottom:7px; font-weight:680; }
.submit-cta p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ---------- gov portal + journey ---------- */
.gov-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .gov-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gov-grid{ grid-template-columns:1fr; } }
.gov-item{
  padding:18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:8px; transition:.24s var(--ease); cursor:pointer; text-align:start;
}
.gov-item:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-1); }
.gov-item__t{ font-size:12px; font-weight:720; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
html[lang="ar"] .gov-item__t{ letter-spacing:.02em; text-transform:none; font-size:12px; }
.gov-item__n{ font-size:14.5px; font-weight:600; line-height:1.4; }

.journey{ display:flex; gap:0; flex-wrap:wrap; margin-top:34px; }
.j-step{ display:flex; align-items:center; gap:12px; }
.j-step__b{
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:600;
  transition:.26s var(--ease); white-space:nowrap;
}
.j-step__b:hover{ border-color:var(--brand); color:var(--brand); }
.j-step__n{ font-size:12px; font-weight:780; color:var(--accent); font-family:var(--font-num); }
.j-sep{ width:22px; height:1.5px; background:var(--line-strong); flex:none; }
@media (max-width:700px){ .j-sep{ display:none; } .journey{ gap:9px; } }

/* ---------- initiative / about ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; gap:30px; } }
.mission-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.mission-list li{ display:flex; gap:13px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.62; }
.mission-list .n{
  width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-size:12px; font-weight:760; font-family:var(--font-num);
}
html[data-theme="dark"] .mission-list .n{ color:#050B22; }
.quote-card{
  padding:34px; border-radius:var(--r-xl); background:var(--pri-900); color:#E9EDFB;
  box-shadow:var(--shadow-3); position:relative; overflow:hidden;
}
.quote-card::before{
  content:""; position:absolute; inset-inline-end:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(closest-side,rgba(212,165,60,.34),transparent 70%);
}
.quote-card p{ font-size:19px; line-height:1.6; font-weight:520; position:relative; }
.quote-card footer{ margin-top:20px; font-size:13px; color:var(--acc-400); font-weight:640; position:relative; }

/* ---------- community ---------- */
.comm{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .comm{ grid-template-columns:1fr; } }
.comm-card{ padding:24px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.comm-card h4{ font-size:16.5px; margin-bottom:9px; font-weight:660; }
.comm-card p{ font-size:14px; color:var(--muted); line-height:1.62; }
.comm-card .btn{ margin-top:16px; }

/* ============================================================
   RECORDS — where Sudan ranks
   ============================================================ */
.records{ position:relative; overflow:hidden; }
.rec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:1000px){ .rec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rec-grid{ grid-template-columns:1fr; } }
.rec{
  position:relative; overflow:hidden; padding:28px 26px 24px; border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:11px;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.rec:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); border-color:color-mix(in oklab,var(--acc-500) 50%,var(--line)); }
.rec__glow{
  position:absolute; inset-inline-end:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab,var(--acc-500) 34%,transparent), transparent 72%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none;
}
.rec:hover .rec__glow{ opacity:1; }
.rec__rank{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; color:var(--acc-700);
  background:color-mix(in oklab,var(--acc-500) 22%,var(--surface));
  border:1px solid color-mix(in oklab,var(--acc-600) 42%,transparent);
}
html[lang="ar"] .rec__rank{ letter-spacing:.02em; text-transform:none; font-size:13px; }
html[data-theme="dark"] .rec__rank{ color:var(--acc-400); }
.rec__v{
  font-family:var(--font-display); font-size:clamp(40px,4.6vw,60px); font-weight:700;
  letter-spacing:-.045em; line-height:1; color:var(--brand); position:relative;
}
.rec__v small{ font-size:.42em; font-weight:600; letter-spacing:-.02em; margin-inline-start:3px; color:var(--muted); }
.rec__h{ font-size:16.5px; font-weight:620; line-height:1.35; }
.rec__d{ font-size:13.8px; color:var(--muted); line-height:1.66; flex:1; }
.rec__src{
  font-size:12px; color:var(--faint); padding-top:12px; border-top:1px solid var(--line);
  letter-spacing:.02em;
}

/* ============================================================
   START YOUR INVESTMENT
   ============================================================ */
.start-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:26px; align-items:start; }
@media (max-width:940px){ .start-grid{ grid-template-columns:1fr; } }

.reg-form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--shadow-2); position:sticky; top:88px;
}
@media (max-width:940px){ .reg-form{ position:static; } }
.reg-form input[type=text]{
  width:100%; padding:12px 15px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface-2); font-size:15px; color:var(--ink); font-family:inherit;
}
.reg-form input[type=text]:focus{ border-color:var(--brand); background:var(--surface); }
.btn--wide{ width:100%; margin-top:6px; }
.reg-note{ font-size:12px; color:var(--faint); margin-top:12px; line-height:1.55; text-align:center; }
.reg-err{
  font-size:13px; color:var(--clay); font-weight:600; margin-bottom:12px;
  padding:10px 13px; border-radius:var(--r-sm);
  background:color-mix(in oklab,var(--clay) 12%,transparent);
}

.hotline{
  display:inline-flex; align-items:center; gap:14px; padding:14px 20px; border-radius:var(--r-lg);
  background:var(--pri-900); color:#E9EDFB; box-shadow:var(--shadow-2); flex:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hotline:hover{ transform:translateY(-3px); box-shadow:var(--shadow-3); }
.hotline__ic{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--acc-500); color:var(--pri-900); animation:ring 3.4s var(--ease) infinite;
}
@keyframes ring{ 0%,84%,100%{transform:rotate(0)} 88%{transform:rotate(-13deg)} 92%{transform:rotate(11deg)} 96%{transform:rotate(-7deg)} }
.hotline__b{ display:flex; flex-direction:column; line-height:1.25; }
.hotline__l{ font-size:12px; color:var(--acc-400); font-weight:640; letter-spacing:.04em; }
.hotline__n{ font-size:22px; font-weight:740; letter-spacing:-.02em; font-family:var(--font-display); }

.reg-empty{
  border:1.5px dashed var(--line-strong); border-radius:var(--r-xl); padding:52px 32px;
  text-align:center; color:var(--muted); background:color-mix(in oklab,var(--surface) 55%,transparent);
}
.reg-empty__ic{ display:flex; justify-content:center; margin-bottom:18px; opacity:.5; }
.reg-empty b{ display:block; font-size:18px; color:var(--ink); margin-bottom:9px; font-weight:640; }
.reg-empty p{ font-size:14px; max-width:44ch; margin-inline:auto; line-height:1.65; }

/* licence preview */
.licence{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:30px;
  background:linear-gradient(150deg,var(--pri-800),var(--pri-900) 62%);
  color:#E9EDFB; box-shadow:var(--shadow-3);
  border:1px solid color-mix(in oklab,var(--acc-500) 34%,transparent);
  animation:stampIn .75s var(--ease-out) both;
}
@keyframes stampIn{
  0%{ opacity:0; transform:scale(.94) translateY(16px); }
  100%{ opacity:1; transform:none; }
}
.licence__wm{
  position:absolute; inset-inline-end:-8px; top:44%; font-size:clamp(38px,6vw,68px); font-weight:800;
  font-family:var(--font-display); color:rgba(255,255,255,.075); letter-spacing:.06em;
  transform:rotate(-16deg); pointer-events:none; user-select:none; white-space:nowrap;
}
.licence__head{ display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.16); }
.licence__t{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--acc-400); font-weight:700; }
html[lang="ar"] .licence__t{ letter-spacing:.02em; text-transform:none; font-size:13.5px; }
.licence__s{ font-size:13px; color:#A3AFD6; margin-top:3px; }
.licence__name{
  font-family:var(--font-display); font-size:clamp(24px,3vw,34px); font-weight:700;
  letter-spacing:-.03em; margin:22px 0 24px; color:#fff; line-height:1.2;
}
.licence__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 14px; margin:0; }
@media (max-width:600px){ .licence__grid{ grid-template-columns:repeat(2,1fr); } }
.licence__grid dt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8892BC; font-weight:700; }
html[lang="ar"] .licence__grid dt{ letter-spacing:.02em; text-transform:none; font-size:12px; }
.licence__grid dd{ margin:5px 0 0; font-size:15px; font-weight:620; color:#E9EDFB; }
.licence__foot{
  margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.16);
  font-size:12px; color:var(--acc-400); line-height:1.6; font-weight:560;
}

.reg-next{ margin-top:22px; display:flex; flex-direction:column; gap:20px; }
.reg-next__h{ font-size:20px; }
.reg-block h4{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:13px; font-weight:700; display:flex; align-items:center; gap:9px;
}
html[lang="ar"] .reg-block h4{ letter-spacing:.02em; text-transform:none; font-size:13.5px; }
.reg-count{
  font-size:12px; padding:3px 9px; border-radius:999px; background:var(--brand); color:#fff;
  font-family:var(--font-num); font-weight:720; letter-spacing:0;
}
html[data-theme="dark"] .reg-count{ color:#050B22; }
.reg-list{ display:flex; flex-direction:column; gap:8px; }
.reg-item{
  display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap;
  padding:13px 16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line);
  transition:border-color .24s, transform .24s var(--ease);
}
.reg-item:hover{ border-color:var(--brand); transform:translateX(3px); }
html[dir="rtl"] .reg-item:hover{ transform:translateX(-3px); }
.reg-item__n{ font-size:14.5px; font-weight:600; }
.reg-item__m{ font-size:12.5px; color:var(--muted); font-family:var(--font-num); }
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  padding:15px 17px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px; transition:.26s var(--ease);
}
.svc:hover{ border-color:var(--acc-600); background:color-mix(in oklab,var(--acc-500) 6%,var(--surface)); }
.svc__n{ font-size:14.5px; font-weight:620; }
.svc__d{ font-size:12.5px; color:var(--muted); line-height:1.55; }
.svc__p{ font-size:12.5px; font-weight:700; color:var(--brand); font-family:var(--font-num); margin-top:3px; }
.reg-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:4px; }

/* ============================================================
   MOTION LAYER
   ============================================================ */
/* hero entrance choreography */
@keyframes riseIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
.hero .eyebrow{ animation:riseIn .7s var(--ease-out) .05s both; }
.hero h1{ animation:riseIn .85s var(--ease-out) .16s both; }
.hero__lede{ animation:riseIn .85s var(--ease-out) .3s both; }
.hero__cta{ animation:riseIn .85s var(--ease-out) .42s both; }
.hero__trust{ animation:riseIn .85s var(--ease-out) .54s both; }
.hero__art{ animation:riseIn 1.1s var(--ease-out) .3s both; }

/* the map draws itself in */
.silhouette .sh-state{
  stroke:var(--map-line); stroke-width:1.6;
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
  animation:drawIn 2.4s var(--ease-out) forwards;
  animation-delay:calc(.5s + var(--d,0) * .045s);
}
@keyframes drawIn{ to{ stroke-dashoffset:0; } }
.silhouette .sh-state.lit,.silhouette .sh-state.lit2{ animation:drawIn 2.4s var(--ease-out) forwards, pulseFill 4.5s var(--ease) infinite; }
@keyframes pulseFill{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.16); } }

/* staggered card entrances */
.rec.reveal{ transition-delay:calc(var(--i,0) * 70ms); }

/* map states settle in on first paint */
.map-svg .st-path{ animation:fadeUp .6s var(--ease-out) both; }
@keyframes fadeUp{ from{ opacity:0; } to{ opacity:1; } }

/* gold shimmer across section headings */
.s-head h2{ position:relative; }

/* primary action lives in the nav itself */
.nav__cta{
  background:var(--brand); color:#fff !important; margin-inline-start:8px;
  box-shadow:var(--shadow-1);
}
.nav__cta:hover{ background:var(--pri-800) !important; }
.nav__cta::after{ display:none; }
html[data-theme="dark"] .nav__cta{ color:#050B22 !important; }
html[data-theme="dark"] .nav__cta:hover{ background:var(--pri-300) !important; }

/* nav underline */
.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; inset-inline:13px; bottom:4px; height:1.5px; background:var(--brand);
  transform:scaleX(0); transform-origin:center; transition:transform .32s var(--ease-out);
}
.nav a:hover::after{ transform:scaleX(1); }

/* respect the user's motion setting — everything above is decorative */
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero__lede,.hero__cta,.hero__trust,.hero__art,
  .licence,.map-svg .st-path{ animation:none !important; }
  .silhouette .sh-state{ animation:none !important; stroke-dashoffset:0 !important; }
  .hotline__ic{ animation:none !important; }
  .hero__pin{ animation:none !important; }
}

/* ============================================================
   INVESTMENT ADVISOR
   ============================================================ */
.ad-launch{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:88;
  width:60px; height:60px; border-radius:17px; display:grid; place-items:center;
  padding:0; overflow:visible;
  box-shadow:0 14px 34px -10px rgba(180,140,0,.55), var(--shadow-2);
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease);
}
.ad-launch .bot-mark{ width:60px; height:60px; border-radius:17px; display:block; }
.ad-launch:hover{ transform:translateY(-4px) scale(1.05); }
.ad-launch.is-open{ transform:scale(.9); opacity:.75; }
.ad-launch__ping{
  position:absolute; inset:0; border-radius:17px; border:2px solid #FFD100;
  animation:adPing 2.8s var(--ease-out) infinite; pointer-events:none;
}
@keyframes adPing{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.65);opacity:0} }
.ad-launch.is-open .ad-launch__ping{ display:none; }

.advisor{
  position:fixed; inset-block-end:96px; inset-inline-end:24px; z-index:89;
  width:min(400px, calc(100vw - 32px)); max-height:min(620px, calc(100vh - 130px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); display:flex; flex-direction:column; overflow:hidden;
  animation:adIn .38s var(--ease-out) both;
}
/* `display:flex` above outranks the UA rule for [hidden], so without this the
   panel rendered open on load while its state said closed. */
.advisor[hidden]{ display:none !important; }
@keyframes adIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
/* Mobile overrides for the advisor live at the END of this file, after every
   base .ad-* rule — placed here they would lose the cascade to rules defined
   later at the same specificity. See "mobile: a real full-screen sheet". */
.ad-head{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(135deg,var(--pri-800),var(--pri-900)); color:#EAEEFC; flex:none;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.ad-head:active{ cursor:grabbing; }
@media (max-width:640px){ .ad-head{ cursor:default; } }
.ad-grip{ display:flex; flex-direction:column; gap:2.5px; flex:none; opacity:.45; }
.ad-grip i{ width:12px; height:1.6px; border-radius:1px; background:currentColor; display:block; }
@media (max-width:640px){ .ad-grip{ display:none; } }
.advisor.is-dragging{
  transition:none !important; animation:none !important;
  box-shadow:0 38px 80px -20px rgba(6,12,40,.6), var(--shadow-3);
}
/* collapsed: only the header bar remains, still draggable */
.advisor.is-collapsed{ max-height:none; width:min(320px, calc(100vw - 32px)); }
.advisor.is-collapsed .ad-log,
.advisor.is-collapsed .ad-quick,
.advisor.is-collapsed .ad-form{ display:none; }
.advisor.is-collapsed .ad-head{ border-radius:var(--r-xl); }
@media (max-width:640px){ .advisor.is-collapsed{ width:auto; } }
.ad-avatar{
  width:38px; height:38px; flex:none; display:block; border-radius:11px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.32); animation:adBreathe 4.6s var(--ease) infinite;
}
.ad-avatar .bot-mark{ width:100%; height:100%; display:block; }
.ad-hero{ display:flex; justify-content:center; margin-bottom:14px; }
.ad-hero .bot-mark{ border-radius:20px; box-shadow:var(--shadow-2); }
.ad-title{ display:flex; flex-direction:column; line-height:1.28; flex:1; }
.ad-title b{ font-size:15px; font-weight:680; }
.ad-title span{ font-size:12px; color:#A9B5E2; }
.ad-live{ display:inline-flex; align-items:center; gap:6px; }
.ad-live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#3FD69A;
  box-shadow:0 0 0 0 rgba(63,214,154,.6); animation:adLive 2.4s infinite;
}
@keyframes adLive{
  0%{ box-shadow:0 0 0 0 rgba(63,214,154,.6); }
  70%{ box-shadow:0 0 0 7px rgba(63,214,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,214,154,0); }
}
.ad-lead{ color:var(--muted); font-size:13px; font-style:italic; margin-bottom:8px !important; }
html[lang="ar"] .ad-lead{ font-style:normal; opacity:.9; }
.ad-nudge{
  margin-top:12px !important; padding-top:11px; border-top:1px solid var(--line);
  font-size:13.2px; color:var(--brand); font-weight:600;
}
/* window controls: grouped, 34px hit area, obvious hover/active states.
   The pair is forced LTR in markup so it always reads [collapse][close]. */
.ad-ctrls{ display:flex; align-items:center; gap:4px; flex:none; margin-inline-start:6px; }
.ad-btn{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:9px; color:#C3CCEC; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .12s var(--ease);
}
.ad-btn:hover{ background:rgba(255,255,255,.19); color:#fff; border-color:rgba(255,255,255,.26); }
.ad-btn:active{ transform:scale(.9); }
.ad-btn:focus-visible{ outline:2px solid var(--acc-400); outline-offset:2px; }
.ad-btn--close:hover{ background:#C8442E; border-color:#E0644B; color:#fff; }
/* the collapse button carries both glyphs; only one shows at a time */
.ad-ico-max{ display:none; }
.advisor.is-collapsed .ad-ico-min{ display:none; }
.advisor.is-collapsed .ad-ico-max{ display:block; }
@media (pointer:coarse){ .ad-btn{ width:40px; height:40px; } }

.ad-log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.ad-msg{ font-size:14px; line-height:1.62; animation:adMsg .38s var(--ease-out) both; }
@keyframes adMsg{ from{opacity:0; transform:translateY(9px);} to{opacity:1; transform:none;} }
.ad-msg--bot{
  background:var(--surface-2); border:1px solid var(--line); border-radius:4px 16px 16px 16px;
  padding:14px 16px; color:var(--ink-2); align-self:flex-start; max-width:96%;
}
html[dir="rtl"] .ad-msg--bot{ border-radius:16px 4px 16px 16px; }
.ad-msg--me{
  background:var(--pri-700); color:#fff; border-radius:16px 16px 4px 16px;
  padding:11px 15px; align-self:flex-end; max-width:84%; font-weight:520;
}
html[dir="rtl"] .ad-msg--me{ border-radius:16px 16px 16px 4px; }
.ad-msg p{ margin:0 0 4px; }
.ad-sub{
  font-size:12px; font-weight:740; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:13px 0 7px;
}
html[lang="ar"] .ad-sub{ letter-spacing:.02em; text-transform:none; font-size:12px; }
.ad-row{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:13.2px;
}
.ad-row:last-child{ border-bottom:0; }
.ad-row span{ color:var(--ink-2); }
.ad-row span em{ display:block; font-style:normal; font-size:12px; color:var(--faint); }
.ad-row b{ font-family:var(--font-num); font-weight:720; color:var(--brand); white-space:nowrap; }
.ad-fact{
  margin:10px 0; padding:11px 13px; border-radius:var(--r-md); font-size:13px; line-height:1.55;
  background:color-mix(in oklab,var(--acc-500) 13%,var(--surface));
  border:1px solid color-mix(in oklab,var(--acc-600) 34%,transparent); color:var(--ink-2);
}
.ad-fact b{ color:var(--acc-700); }
html[data-theme="dark"] .ad-fact b{ color:var(--acc-400); }
.ad-src{ display:block; font-size:12px; color:var(--faint); margin-top:5px; }
.ad-gap{
  margin-top:10px; padding:12px 14px; border-radius:var(--r-md); font-size:12.6px; line-height:1.6;
  background:color-mix(in oklab,var(--clay) 10%,var(--surface));
  border:1px solid color-mix(in oklab,var(--clay) 32%,transparent); color:var(--ink-2);
}
.ad-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ad-pill{
  font-size:12px; padding:4px 10px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); color:var(--ink-2); font-family:var(--font-num);
}
.ad-note{ font-size:12.2px; color:var(--muted); line-height:1.6; margin-top:9px; }
.ad-disc{
  font-size:12px; color:var(--faint); line-height:1.55; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--line);
}

/* feasibility block */
.ad-study__h{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:12px; font-family:var(--font-display); }
.ad-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.ad-kpis > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.ad-kpis span{ font-size:12px; color:var(--muted); font-weight:600; }
.ad-kpis b{ font-size:17px; font-family:var(--font-num); font-weight:760; color:var(--brand); letter-spacing:-.02em; }
.ad-split{ display:flex; height:9px; border-radius:5px; overflow:hidden; gap:2px; }
.ad-split i:nth-child(1){ background:var(--pri-700); }
.ad-split i:nth-child(2){ background:var(--pri-500); }
.ad-split i:nth-child(3){ background:var(--lav-500); }
.ad-split i:nth-child(4){ background:var(--acc-500); }
.ad-legend{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:7px; font-size:12px; color:var(--muted); }
.ad-legend span{ display:inline-flex; align-items:center; gap:5px; }
.ad-legend span::before{ content:""; width:8px; height:8px; border-radius:2px; }
.ad-legend span:nth-child(1)::before{ background:var(--pri-700); }
.ad-legend span:nth-child(2)::before{ background:var(--pri-500); }
.ad-legend span:nth-child(3)::before{ background:var(--lav-500); }
.ad-legend span:nth-child(4)::before{ background:var(--acc-500); }
.ad-table{ width:100%; border-collapse:collapse; font-size:12.2px; margin-top:4px; }
.ad-table th{ text-align:start; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:5px 6px; font-weight:700; }
html[lang="ar"] .ad-table th{ letter-spacing:0; text-transform:none; font-size:12px; }
.ad-table td{ padding:6px; border-top:1px solid var(--line); font-family:var(--font-num); }
.ad-table td:first-child{ color:var(--muted); }
.ad-table .pos{ color:var(--pri-600); font-weight:700; }
.ad-table .neg{ color:var(--clay); font-weight:700; }
.ad-dl{
  margin-top:14px; width:100%; padding:11px; border-radius:var(--r-md);
  background:var(--acc-500); color:#2A1B04; font-size:13px; font-weight:700;
  transition:.24s var(--ease);
}
.ad-dl:hover{ background:var(--acc-400); transform:translateY(-1px); }

.ad-quick{ display:flex; gap:6px; padding:0 14px 10px; flex-wrap:wrap; flex:none; }
.ad-chip{
  font-size:12px; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); transition:.2s var(--ease); font-weight:560;
}
.ad-chip:hover{ border-color:var(--brand); color:var(--brand); background:color-mix(in oklab,var(--brand) 7%,transparent); }
.ad-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:var(--surface-2); flex:none; }
.ad-form input{
  flex:1; padding:11px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-family:inherit; font-size:13.5px; color:var(--ink); min-width:0;
}
.ad-form input:focus{ border-color:var(--brand); outline:none; }
.ad-form button{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--brand); color:#fff; transition:.22s var(--ease);
}
.ad-form button:hover{ background:var(--pri-800); transform:scale(1.06); }
html[dir="rtl"] .ad-form button svg{ transform:scaleX(-1); }
.ad-typing{ display:flex; gap:5px; padding:15px 17px !important; }
.ad-typing i{ width:7px; height:7px; border-radius:50%; background:var(--faint); animation:adDot 1.3s infinite; }
.ad-typing i:nth-child(2){ animation-delay:.18s; } .ad-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes adDot{ 0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-5px);opacity:1} }

/* ---------- mobile: a real full-screen sheet ----------
   The floating-window model does not work on a phone: a 400px panel hovering
   over the page, a drag grip it can't use, a collapse button that means
   nothing at full width, and a launcher sitting on top of its own panel.
   Below 640px it becomes a plain full-screen conversation with one way out.
   NOTE: this block must stay after every base .ad-* rule above. */
@keyframes adSheet{ from{ opacity:0; transform:translateY(3%); } to{ opacity:1; transform:none; } }
@media (max-width:640px){
  .advisor{
    inset:0 !important; width:auto !important; max-height:none;
    height:100dvh; border-radius:0; border:0;
    animation:adSheet .3s var(--ease-out) both;
  }
  .advisor .ad-head{
    padding:calc(env(safe-area-inset-top, 0px) + 14px) 14px 14px;
    cursor:default; touch-action:auto;
  }
  .ad-grip{ display:none; }
  #adMin{ display:none; }              /* collapsing a full-screen sheet is meaningless */
  .advisor.is-collapsed{ width:auto; }
  .advisor.is-collapsed .ad-log{ display:flex; }
  .advisor.is-collapsed .ad-quick,
  .advisor.is-collapsed .ad-form{ display:flex; }
  .ad-btn{ width:42px; height:42px; border-radius:12px; }
  .ad-log{ padding:16px 14px; gap:12px; }
  .ad-msg--bot,.ad-msg--me{ max-width:92%; }
  .ad-quick{ padding:0 12px 8px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .ad-quick::-webkit-scrollbar{ display:none; }
  .ad-chip{ white-space:nowrap; flex:none; }
  .ad-form{ padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .ad-form input{ font-size:16px; }    /* 16px stops iOS zooming the page on focus */
  body.ad-open .ad-launch{ opacity:0; pointer-events:none; }
  .ad-launch{
    inset-block-end:calc(env(safe-area-inset-bottom, 0px) + 16px); inset-inline-end:16px;
    transition:opacity .2s var(--ease), transform .34s var(--ease-out);
  }
}

/* ============================================================
   AMBIENT MOTION — the page breathes
   ============================================================ */
@keyframes adBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.hero__glow{ animation:heroBreathe 11s var(--ease) infinite; }
@keyframes heroBreathe{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.5; }
  50%{ transform:translateX(-50%) scale(1.1); opacity:.66; }
}
.brand__mark{ animation:markBreathe 6.5s var(--ease) infinite; transform-origin:center; }
@keyframes markBreathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-1.5px) scale(1.03); } }
.stat__v{ transition:transform .4s var(--ease-out); }
.stat:hover .stat__v{ transform:translateY(-3px); }
.rec__v{ transition:transform .45s var(--ease-out); }
.rec:hover .rec__v{ transform:scale(1.05); }
.hotline:hover .hotline__ic{ animation-duration:1.1s; }
/* map states lift very slightly under the cursor */
.st-path{ transform-box:fill-box; transform-origin:center; }
.st-path:hover{ filter:brightness(1.09); }
.sec-card,.rec,.co,.proj,.dcard{ will-change:transform; }
/* section headings underline as they enter */
.s-head h2::after{
  content:""; display:block; height:3px; width:0; margin-top:14px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--acc-500));
  transition:width 1.1s var(--ease-out) .15s;
}
.section.is-seen .s-head h2::after{ width:74px; }

@media (prefers-reduced-motion:reduce){
  .ad-launch__ping,.ad-avatar,.hero__glow,.brand__mark,.ad-live::before{ animation:none !important; }
  .s-head h2::after{ transition:none; width:74px; }
}

/* Touch targets live in the base <style> block in index.html, not here:
   the bundler inlines this file BEFORE that block, so equal-specificity rules
   here lose the cascade to it. */

/* ---------- data provenance banner ---------- */
.prov{
  display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--acc-500) 11%,var(--surface));
  border:1px solid color-mix(in oklab,var(--acc-600) 36%,transparent);
  margin-bottom:34px;
}
.prov svg{ flex:none; color:var(--acc-700); margin-top:2px; }
html[data-theme="dark"] .prov svg{ color:var(--acc-400); }
.prov b{ display:block; font-size:14.5px; font-weight:680; margin-bottom:5px; }
.prov p{ font-size:13.5px; color:var(--ink-2); line-height:1.62; }