/* ====================================================================
   Diplom defense deck — CINEMATIC v2
   Dark Apple-Keynote aesthetic with mesh gradients & depth transitions
   ==================================================================== */

/* ---------- design tokens ---------- */
:root {
  /* DARK by default — cinematic */
  --bg:         #07090F;
  --bg-deep:   #04060B;
  --bg-elev:   #0E1320;
  --bg-card:   #0F1422;
  --ink:        #F5F1E6;
  --ink-soft:  #B8B1A0;
  --ink-mute:  #6B6557;
  --line:       rgba(245, 241, 230, 0.10);
  --line-soft: rgba(245, 241, 230, 0.05);
  --line-strong: rgba(245, 241, 230, 0.20);

  --rf:        #E54B2A;     /* crimson */
  --rf-glow:   rgba(229, 75, 42, 0.45);
  --ksa:       #F5C76A;     /* warm gold */
  --ksa-glow:  rgba(245, 199, 106, 0.40);
  --good:      #4FD391;
  --bad:       #FF6B5B;
  --info:      #6DA8FF;

  --font-display: "Cormorant Garamond", "Tinos", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pad-x: 120px;
  --pad-y: 80px;
}

[data-theme="light"] {
  --bg:         #F4EFE3;
  --bg-deep:   #EAE3D2;
  --bg-elev:   #FBF7EC;
  --bg-card:   #FFFBF1;
  --ink:        #15130E;
  --ink-soft:  #3D3729;
  --ink-mute:  #8A8273;
  --line:       rgba(21, 19, 14, 0.12);
  --line-soft: rgba(21, 19, 14, 0.06);
  --line-strong: rgba(21, 19, 14, 0.25);
  --rf:        #B83A1F;
  --rf-glow:   rgba(184, 58, 31, 0.20);
  --ksa:       #B58A3E;
  --ksa-glow:  rgba(181, 138, 62, 0.20);
  --good:      #2E7A47;
  --bad:       #B83A1F;
  --info:      #2A5DAB;
}

/* ---------- root / deck-stage ---------- */
html, body { margin: 0; padding: 0; background: #000; color: var(--ink); }
body { font-family: var(--font-sans); }
deck-stage { background: #000; }

/* ===== custom Apple-style slide transitions ====================== */
/* sections live in light DOM, so author rules override shadow ::slotted opacity defaults */
deck-stage > section {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 0;
  transform: scale(1.035);
  filter: blur(14px);
  transition: opacity 700ms var(--ease-out),
              transform 900ms var(--ease-out),
              filter   700ms var(--ease-out);
  pointer-events: none;
}
deck-stage > section[data-deck-active] {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}

[data-motion="low"] deck-stage > section {
  transition-duration: 350ms;
  transform: none;
  filter: none;
}
[data-motion="off"] deck-stage > section {
  transition: opacity 120ms linear !important;
  transform: none !important;
  filter: none !important;
}

/* ===== element entry animations ================================== */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out),
              transform 1000ms var(--ease-out),
              filter 800ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 350ms);
}
[data-anim="fade"] { transform: none; }
[data-anim="up-lg"] { transform: translateY(64px); }
[data-anim="left"] { transform: translateX(-40px); }
[data-anim="right"] { transform: translateX(40px); }
[data-anim="zoom-in"] { transform: scale(0.85); }
[data-anim="zoom-out"] { transform: scale(1.15); }
[data-anim="blur-in"] { filter: blur(20px); transform: none; }
[data-anim="grow-x"]  { transform: scaleX(0); transform-origin: left center; }
[data-anim="grow-y"]  { transform: scaleY(0); transform-origin: bottom center; }
[data-anim="draw"] { transition: stroke-dashoffset 1500ms var(--ease-out); }

section[data-deck-active] [data-anim] {
  opacity: 1;
  transform: none;
  filter: none;
}
section[data-deck-active] [data-anim="grow-x"] { transform: scaleX(1); }
section[data-deck-active] [data-anim="grow-y"] { transform: scaleY(1); }
section[data-deck-active] [data-anim="draw"] { stroke-dashoffset: 0; }

[data-motion="low"] [data-anim] { transition-duration: 380ms; transition-delay: calc(var(--d,0) * 50ms + 120ms); }
[data-motion="off"] [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* ---------- shared typography ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
}
.kicker .dot { display: inline-block; width: 6px; height: 6px; background: var(--ksa); border-radius: 50%; margin: 0 12px 3px; vertical-align: middle; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.92;
}
.h-display em { font-style: italic; color: var(--ksa); }
.h-display .rf { font-style: italic; color: var(--rf); }

.h-section {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
}
.h-section em { font-style: italic; color: var(--ksa); }
.h-section .rf { font-style: italic; color: var(--rf); }

.num {
  font-family: var(--font-display);
  font-feature-settings: "lnum","tnum";
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* ---------- chrome on every slide ---------- */
.pad { padding: var(--pad-y) var(--pad-x); }
.slide-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-shrink: 0;
}
.slide-foot {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---------- ambient grain overlay (subtle film grain) ---------- */
deck-stage > section::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}
.slide-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }


/* ====================================================================
   SLIDE 01 — COVER
   ==================================================================== */
.cover { padding: 0; }
.cover .mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 30%, var(--rf-glow), transparent 65%),
    radial-gradient(50% 45% at 82% 75%, var(--ksa-glow), transparent 60%),
    radial-gradient(40% 35% at 70% 20%, rgba(109, 168, 255, 0.18), transparent 70%),
    radial-gradient(50% 40% at 25% 85%, rgba(79, 211, 145, 0.10), transparent 70%);
  animation: meshDrift 24s ease-in-out infinite alternate;
  filter: blur(20px);
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2%, -1%) scale(1.05); }
  100% { transform: translate(-1%, 2%) scale(1.02); }
}
.cover .gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
  z-index: 2;
}
.cover-inner {
  position: relative;
  z-index: 3;
  flex: 1;
  padding: 80px 120px 70px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
}
.cover-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.cover-univ .ru {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.cover-univ .name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: -0.015em;
}
.cover-univ .dep {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 18px;
}
.cover-mark {
  width: 110px; height: 110px;
  border: 1px solid var(--ink-soft);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 46px; font-style: italic; font-weight: 500;
  color: var(--ink);
  position: relative;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.cover-mark::after {
  content: ""; position: absolute; inset: -8px;
  border: 1px solid var(--line);
}
.cover-title {
  align-self: center;
  display: flex; flex-direction: column; gap: 32px;
  max-width: 1500px;
}
.cover-title h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 130px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.cover-title h1 em {
  font-style: italic;
  color: var(--rf);
  text-shadow: 0 0 60px var(--rf-glow);
}
.cover-title h1 .gold {
  font-style: italic;
  color: var(--ksa);
  text-shadow: 0 0 60px var(--ksa-glow);
}
.cover-title h1 .amp {
  font-style: italic;
  color: var(--ink-mute);
  font-weight: 400;
  padding: 0 8px;
}
.cover-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.cover-meta .label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 10px;
}
.cover-meta .val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.cover-meta .val .sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
}


/* ====================================================================
   SLIDE — CONTEXT
   ==================================================================== */
.s-context .slide-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.s-context h2 {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 24px 0 0;
}
.s-context h2 em { font-style: italic; color: var(--rf); }
.s-context .lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 32px 0 0;
  text-wrap: pretty;
}

.ctx-cards { display: flex; flex-direction: column; gap: 26px; }
.ctx-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 44px;
  align-items: baseline;
  padding: 42px 46px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.ctx-card.rf  { border-left-color: var(--rf);  }
.ctx-card.ksa { border-left-color: var(--ksa); }
.ctx-card .figure {
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.ctx-card .figure .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 18px;
  letter-spacing: 0;
  line-height: 1.45;
}
.ctx-card.rf .figure  { color: var(--rf); }
.ctx-card.ksa .figure { color: var(--ksa); }
.ctx-card .text {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* ====================================================================
   SLIDE — GOAL
   ==================================================================== */
.s-goal .slide-inner { padding-top: 8px; gap: 32px; }
.goal-card {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-elev));
  border: 1px solid var(--line);
  padding: 64px 72px;
  position: relative;
  margin-top: 24px;
  overflow: hidden;
}
.goal-card::before {
  content: "Цель работы";
  position: absolute; top: -12px; left: 56px;
  background: var(--bg);
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ksa);
}
.goal-card::after {
  content: ""; position: absolute;
  width: 400px; height: 400px;
  right: -100px; top: -100px;
  background: radial-gradient(circle, var(--rf-glow), transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}
.goal-text {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  position: relative;
}
.goal-text em { font-style: italic; color: var(--rf); }
.goal-text .gold { font-style: italic; color: var(--ksa); }

.os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 48px;
  flex: 1;
  align-content: stretch;
}
.os-item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 44px 44px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ksa);
  position: relative;
  overflow: hidden;
}
.os-item:first-child { border-top-color: var(--rf); }
.os-item .eyebrow { color: var(--ksa); font-size: 13px; }
.os-item:first-child .eyebrow { color: var(--rf); }
.os-item h4 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  margin: 8px 0 6px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.os-item p { font-size: 22px; line-height: 1.5; color: var(--ink-soft); margin: 0; }


/* ====================================================================
   SLIDE — TASKS
   ==================================================================== */
.s-tasks .slide-inner { gap: 24px; }
.tasks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  flex: 1;
}
.task {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.task:hover { transform: translateY(-4px); border-color: var(--ksa); }
.task .num-tag {
  font-family: var(--font-display);
  font-size: 64px;
  font-style: italic;
  font-weight: 500;
  color: var(--ksa);
  line-height: 1;
  text-shadow: 0 0 30px var(--ksa-glow);
}
.task .t-text { font-size: 26px; color: var(--ink); line-height: 1.4; }
.task .t-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}


/* ====================================================================
   SLIDE — METHODOLOGY
   ==================================================================== */
.s-method .slide-inner { gap: 24px; }
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 40px;
  flex: 1;
}
.method-card {
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.method-card::before {
  content: "";
  position: absolute; top: -1px; left: 0; width: 32px; height: 1px;
  background: var(--ksa);
}
.method-card .m-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ksa);
  letter-spacing: 0.22em;
}
.method-card h4 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
}
.method-card .formula {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--rf);
  margin-top: 8px;
}
.method-card p { font-size: 18px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.sources {
  margin-top: 32px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.source-chip {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.source-chip strong { color: var(--ink); font-weight: 500; }


/* ====================================================================
   SLIDE — GEOGRAPHY  (NEW)
   ==================================================================== */
.s-geo .slide-inner { gap: 32px; }
.s-geo .slide-head { padding-bottom: 4px; flex-shrink: 0; position: relative; z-index: 5; }
.geo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  flex: 1;
  margin-top: 16px;
}
.geo-canvas {
  flex: 1;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.geo-canvas .map-loading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.geo-canvas svg { width: 100%; height: 100%; display: block; }
.geo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.geo-country {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
}
.geo-country.rf  { border-top-color: var(--rf);  }
.geo-country.ksa { border-top-color: var(--ksa); }
.geo-country .name-cell {
  grid-column: span 4;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.geo-country h3 {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
}
.geo-country.rf h3  { color: var(--rf);  }
.geo-country.ksa h3 { color: var(--ksa); }
.geo-country .sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.geo-country .stat .eyebrow { margin-bottom: 8px; display: block; font-size: 13px; }
.geo-country .stat .v {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.geo-country .stat .v .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 6px;
  letter-spacing: 0;
}

/* country SVG shapes */
.country-shape {
  fill: var(--bg-card);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  transition: fill 600ms var(--ease-out), stroke 600ms var(--ease-out);
}
.country-shape.rf  { fill: rgba(229, 75, 42, 0.10); stroke: var(--rf); }
.country-shape.ksa { fill: rgba(245, 199, 106, 0.12); stroke: var(--ksa); }


/* ====================================================================
   SLIDE — DEPOSITS  (NEW interactive map)
   ==================================================================== */
.s-deposits .slide-inner { gap: 28px; }
.s-deposits .slide-head { padding-bottom: 4px; flex-shrink: 0; position: relative; z-index: 5; }
.dep-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.dep-map {
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dep-map .map-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.dep-map .map-tab {
  flex: 1;
  padding: 14px 20px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 240ms, background 240ms;
  border-right: 1px solid var(--line);
  position: relative;
}
.dep-map .map-tab:last-child { border-right: none; }
.dep-map .map-tab.active {
  color: var(--ink);
  background: var(--bg-card);
}
.dep-map .map-tab.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
}
.dep-map .map-tab[data-tab="rf"].active::after  { background: var(--rf); }
.dep-map .map-tab[data-tab="ksa"].active::after { background: var(--ksa); }
.dep-map .map-tab .pin-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin-left: 12px;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.dep-map .map-canvas {
  flex: 1;
  position: relative;
  display: grid;
}
.dep-map svg.atlas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.atlas .country-shape {
  fill: rgba(245, 241, 230, 0.04);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.atlas .country-shape.bg {
  fill: var(--line-soft);
  stroke: var(--line);
  stroke-width: 0.6;
}
.atlas .country-shape.active.rf  { fill: rgba(229, 75, 42, 0.14); stroke: var(--rf); stroke-width: 1.2; }
.atlas .country-shape.active.ksa { fill: rgba(245, 199, 106, 0.16); stroke: var(--ksa); stroke-width: 1.2; }

.map-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.5;
}
.map-loading.map-error { color: var(--bad); }

/* ---------- animated pumpjack pins ---------- */
.atlas .pumpjack {
  cursor: pointer;
  transition: transform 360ms var(--ease-out);
  transform-origin: center;
  transform-box: fill-box;
}
.atlas .pumpjack .pj-shadow {
  fill: var(--ink);
  opacity: 0.16;
}
.atlas .pumpjack .pj-tower {
  stroke: var(--ksa);
  fill: none;
}
.atlas .pumpjack.rf .pj-tower { stroke: var(--rf); }
.atlas .pumpjack .pj-pivot,
.atlas .pumpjack .pj-beam-body,
.atlas .pumpjack .pj-horsehead,
.atlas .pumpjack .pj-counterweight,
.atlas .pumpjack .pj-wellhead {
  fill: var(--ksa);
  filter: drop-shadow(0 0 4px var(--ksa-glow));
}
.atlas .pumpjack.rf .pj-pivot,
.atlas .pumpjack.rf .pj-beam-body,
.atlas .pumpjack.rf .pj-horsehead,
.atlas .pumpjack.rf .pj-counterweight,
.atlas .pumpjack.rf .pj-wellhead {
  fill: var(--rf);
  filter: drop-shadow(0 0 4px var(--rf-glow));
}
.atlas .pumpjack .pj-rod {
  stroke: var(--ksa);
}
.atlas .pumpjack.rf .pj-rod { stroke: var(--rf); }
.atlas .pumpjack .pj-aura {
  fill: var(--ksa);
  opacity: 0;
  transition: opacity 320ms;
  transform-origin: center;
  transform-box: fill-box;
  pointer-events: none;
}
.atlas .pumpjack.rf .pj-aura { fill: var(--rf); }
.atlas .pumpjack .pj-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: var(--ink-soft);
  opacity: 0;
  transition: opacity 220ms;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3;
}

/* the rocking beam */
.atlas .pumpjack .pj-beam {
  transform-origin: 0px -8px; /* the pivot point */
  transform-box: view-box;
  animation: pj-rock 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes pj-rock {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(9deg); }
}
[data-motion="low"] .atlas .pumpjack .pj-beam { animation-duration: 4s; }
[data-motion="off"] .atlas .pumpjack .pj-beam { animation: none; transform: rotate(-6deg); }

/* hover/active states */
.atlas .pumpjack:hover { transform: scale(1.18); }
.atlas .pumpjack:hover .pj-label,
.atlas .pumpjack.active .pj-label { opacity: 1; }
.atlas .pumpjack:hover .pj-aura { opacity: 0.10; }
.atlas .pumpjack.active { transform: scale(1.32); }
.atlas .pumpjack.active .pj-aura { opacity: 0.18; animation: pj-aura 2.6s ease-out infinite; }
@keyframes pj-aura {
  0%   { opacity: 0.30; transform: scale(0.7); }
  100% { opacity: 0;    transform: scale(2.2); }
}
[data-motion="off"] .atlas .pumpjack.active .pj-aura { animation: none; opacity: 0.20; }

.dep-detail {
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.dep-detail .empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-mute);
  padding: 80px 32px;
  text-align: center;
  flex: 1;
}
.dep-detail .empty .hint {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-top: 16px;
}
.dep-detail .dep-photo {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.dep-detail .dep-photo image-slot {
  --image-slot-bg: var(--bg-elev);
  --image-slot-fg: var(--ink-mute);
}
.dep-detail .dep-photo-hint {
  position: absolute;
  left: 16px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
  opacity: 0.85;
}
.dep-detail .dep-body {
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.dep-detail h3 {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dep-detail .country-flag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0;
}
.dep-detail .country-flag.rf  { color: var(--rf); }
.dep-detail .country-flag.ksa { color: var(--ksa); }
.dep-detail .desc { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 8px 0 0; max-width: 38ch; }
.dep-detail .kvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
}
.dep-detail .kv {
  padding: 20px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
}
.dep-detail .kv .eyebrow { display: block; margin-bottom: 8px; font-size: 12px; }
.dep-detail .kv .v {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dep-detail .kv .v .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 6px;
  letter-spacing: 0;
}


/* ====================================================================
   SLIDE — MACRO COMPARISON
   ==================================================================== */
.s-macro .slide-inner { gap: 24px; }
.macro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  flex: 1;
  margin-top: 16px;
}
.country-panel { display: flex; flex-direction: column; gap: 20px; }
.country-panel .flag-strip { height: 3px; width: 100%; }
.country-panel.rf .flag-strip  { background: var(--rf); box-shadow: 0 0 24px var(--rf-glow); }
.country-panel.ksa .flag-strip { background: var(--ksa); box-shadow: 0 0 24px var(--ksa-glow); }
.country-panel h3 {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.country-panel .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.macro-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.macro-row.head {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 0;
  border-top: none;
  border-bottom: 1px solid var(--line);
}
.macro-row .k { font-size: 21px; color: var(--ink-soft); }
.macro-row .v {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  text-align: right;
  letter-spacing: -0.02em;
}
.macro-row .v.small { font-size: 26px; color: var(--ink-soft); }
.macro-row .v .unit { font-family: var(--font-sans); font-size: 14px; color: var(--ink-mute); font-weight: 400; letter-spacing: 0; }
.macro-row .v.pos { color: var(--good); }
.macro-row .v.neg { color: var(--bad); }

.sector-bar { margin-top: 32px; }
.sector-bar .eyebrow { color: var(--ink-mute); margin-bottom: 14px; display: block; font-size: 12px; }
.sector-bar .bar { display: flex; height: 56px; width: 100%; border: 1px solid var(--line); overflow: hidden; }
.sector-bar .bar .seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.sector-bar .bar .seg.s1 { background: rgba(229, 75, 42, 0.30); }
.sector-bar .bar .seg.s2 { background: rgba(245, 199, 106, 0.30); }
.sector-bar .bar .seg.s3 { background: rgba(109, 168, 255, 0.20); }


/* ====================================================================
   SLIDE — TRADE DYNAMICS
   ==================================================================== */
.s-trade .slide-inner { gap: 24px; }
.trade-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  flex: 1;
  min-height: 0;
}
.chart-panel { display: flex; flex-direction: column; min-height: 0; }
.chart-panel svg { width: 100%; flex: 1; min-height: 0; }
.chart-legend {
  display: flex; gap: 28px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.chart-legend .sw {
  width: 14px; height: 14px; display: inline-block;
  margin-right: 8px; vertical-align: -2px;
}
.chart-legend .sw.rf  { background: var(--rf); box-shadow: 0 0 10px var(--rf-glow); }
.chart-legend .sw.ksa { background: var(--ksa); box-shadow: 0 0 10px var(--ksa-glow); }

.callout {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--rf);
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.callout .eyebrow { color: var(--rf); margin-bottom: 8px; display: block; }
.callout.ksa { border-left-color: var(--ksa); }
.callout.ksa .eyebrow { color: var(--ksa); }
.callout .big {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.callout .big .unit {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 400;
}
.callout p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* Slide 9 / s-trade — bigger callouts that fill the right column */
.s-trade .trade-grid > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}
.s-trade .callout {
  margin-bottom: 0;
  padding: 36px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.s-trade .callout .eyebrow { font-size: 14px; margin-bottom: 12px; }
.s-trade .callout .big { font-size: 72px; }
.s-trade .callout .big .unit { font-size: 16px; margin-left: 6px; }
.s-trade .callout p { font-size: 18px; line-height: 1.55; margin-top: 18px; }


/* ====================================================================
   SLIDE — EXPORT HEATMAP
   ==================================================================== */
.s-export .slide-inner { gap: 24px; }
.export-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 36px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.export-grid > div:first-child { min-height: 0; display: flex; flex-direction: column; }
.export-grid .heatmap { flex: 1; grid-auto-rows: 1fr; }
.export-grid .heatmap > div { padding: 14px 12px; }
.heatmap {
  display: grid;
  grid-template-columns: 220px repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  align-content: start;
}
.heatmap > div {
  background: var(--bg-card);
  padding: 16px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.heatmap .h {
  background: var(--bg-elev);
  color: var(--ink-mute);
  text-transform: uppercase;
  text-align: center;
}
.heatmap .row-h {
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
}
.heatmap .cell {
  text-align: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  position: relative;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heatmap .cell .pct { position: relative; z-index: 1; }
.heatmap .cell .fill {
  position: absolute; inset: 0;
  background: var(--ksa);
  opacity: var(--alpha, 0);
}
.heatmap .cell.rf-fill .fill { background: var(--rf); }


/* ====================================================================
   SLIDE — GRAIN DOMINANCE
   ==================================================================== */
.s-grain .slide-inner { gap: 24px; }
.grain-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  flex: 1;
  align-items: center;
  margin-top: 16px;
}
.dominance { display: flex; flex-direction: column; gap: 32px; }
.dom-row {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  gap: 24px;
  align-items: center;
}
.dom-row .crop {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dom-row .pct {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: right;
  line-height: 1;
}
.dom-row .pct .sym {
  font-size: 28px;
  font-style: italic;
  color: var(--ksa);
  margin-left: 2px;
}
.dom-row .bar-wrap {
  height: 10px;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.dom-row .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--rf), var(--ksa));
  box-shadow: 0 0 16px var(--ksa-glow);
}
.dom-row.muted .pct, .dom-row.muted .crop { color: var(--ink-mute); }
.dom-row.muted .bar { background: var(--line-strong); box-shadow: none; }


/* ====================================================================
   SLIDE — PARADOX
   ==================================================================== */
.s-paradox .slide-inner { gap: 24px; }
.paradox-h {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 500;
  line-height: 0.96;
  margin: 16px 0 0;
  letter-spacing: -0.025em;
}
.paradox-h em { font-style: italic; color: var(--rf); }
.paradox-h .gold { color: var(--ksa); font-style: italic; }
.paradox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 48px;
  align-items: stretch;
  flex: 1;
}
.arrow-up, .arrow-down {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.arrow-up   { border-left: 2px solid var(--good); }
.arrow-down { border-left: 2px solid var(--bad); }
.arrow-up::before, .arrow-down::before {
  content: ""; position: absolute;
  width: 300px; height: 300px;
  right: -80px; top: -80px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.25;
}
.arrow-up::before   { background: var(--good); }
.arrow-down::before { background: var(--bad); }
.arrow-up .eyebrow  { color: var(--good); }
.arrow-down .eyebrow { color: var(--bad); }
.arrow-up .big, .arrow-down .big {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  position: relative;
}
.arrow-up .big .arrow   { color: var(--good); font-style: italic; }
.arrow-down .big .arrow { color: var(--bad); font-style: italic; }
.arrow-up p, .arrow-down p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  line-height: 1.55;
  position: relative;
}


/* ====================================================================
   SLIDE — GRAVITY
   ==================================================================== */
.s-gravity .slide-inner { gap: 24px; }
.gravity-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  flex: 1;
  align-items: center;
  margin-top: 16px;
}
.gravity-eq {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 50px;
  text-align: center;
  padding: 56px 40px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  position: relative;
}
.gravity-eq::before, .gravity-eq::after {
  content: ""; position: absolute;
  width: 240px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ksa), transparent);
  left: 50%; transform: translateX(-50%);
}
.gravity-eq::before { top: -1px; }
.gravity-eq::after  { bottom: -1px; }
.gravity-eq .frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 8px; }
.gravity-eq .frac .top {
  display: block; border-bottom: 1px solid var(--ink); padding: 0 12px 2px;
}
.gravity-eq .frac .bot { display: block; padding: 2px 12px 0; }

.pva { display: flex; flex-direction: column; gap: 22px; }
.pva-row {
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  gap: 20px;
  align-items: center;
}
.pva-row .yr { font-family: var(--font-mono); font-size: 17px; color: var(--ink-mute); letter-spacing: 0.12em; }
.pva-row .stacker {
  position: relative;
  height: 44px;
  background: var(--line-soft);
}
.pva-row .potential {
  position: absolute; left: 0; top: 0; bottom: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 6px, rgba(245,199,106,0.30) 6px, rgba(245,199,106,0.30) 7px),
    rgba(245, 199, 106, 0.08);
  border: 1px solid var(--ksa);
}
.pva-row .actual {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--rf);
  box-shadow: 0 0 14px var(--rf-glow);
}
.pva-row .pct {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  text-align: right;
  letter-spacing: -0.02em;
}


/* ====================================================================
   SLIDE — PRIORITIES
   ==================================================================== */
.s-priorities .slide-inner { gap: 24px; }
.prio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  flex: 1;
}
.prio {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  overflow: hidden;
  transition: transform 400ms var(--ease-out);
}
.prio:hover { transform: translateY(-6px); }
.prio.agro   { border-top: 3px solid var(--good); }
.prio.invest { border-top: 3px solid var(--rf); }
.prio.energy { border-top: 3px solid var(--ksa); }
.prio .head-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.prio .ord {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
}
.prio h3 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.prio .horizon {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.prio ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.prio ul li {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.prio ul li::before {
  content: "—"; position: absolute; left: 0;
  color: var(--ink-mute);
}
.prio .effect {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.prio .effect .eyebrow { display: block; margin-bottom: 10px; font-size: 13px; }
.prio.agro .effect .eyebrow   { color: var(--good); }
.prio.invest .effect .eyebrow { color: var(--rf); }
.prio.energy .effect .eyebrow { color: var(--ksa); }
.prio .effect .big {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.prio .effect .big .unit { font-family: var(--font-sans); font-size: 15px; color: var(--ink-mute); font-weight: 400; }


/* ====================================================================
   SLIDE — INVEST (Bagration)
   ==================================================================== */
.s-invest .slide-inner { gap: 24px; }
.invest-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.s-invest .invest-layout > div:last-child { display: flex; flex-direction: column; }
.invest-left { display: flex; flex-direction: column; gap: 28px; }
.invest-left p { font-size: 24px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.invest-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}
.invest-meta .cell {
  padding: 34px 34px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ksa);
}
.invest-meta .cell .eyebrow { color: var(--ksa); margin-bottom: 14px; display: block; font-size: 14px; }
.invest-meta .cell .v {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.invest-meta .cell .v .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 10px;
  letter-spacing: 0;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--line-strong);
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  flex: 1;
  min-height: 0;
}
.kpi-strip .kpi {
  background: var(--bg-card);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.kpi .eyebrow { color: var(--ink-mute); font-size: 16px; }
.kpi .v {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.kpi .v .unit { font-family: var(--font-sans); font-size: 18px; color: var(--ink-mute); font-weight: 400; letter-spacing: 0; }
.kpi .v.neg { color: var(--bad); }
.kpi .note { font-size: 18px; color: var(--ink-mute); line-height: 1.4; }


/* ====================================================================
   SLIDE — AGRO
   ==================================================================== */
.s-agro .agro-layout > div:last-child { display: flex; flex-direction: column; }
.s-agro .agro-layout > div:last-child > p:first-child { font-size: 22px !important; }
.agro-stack { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.agro-row {
  display: grid;
  grid-template-columns: 150px 1fr 150px 130px;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  flex: 1;
}
.agro-row.head { border-bottom: 1px solid var(--line-strong); padding-bottom: 10px; flex: 0 0 auto; }
.agro-row.head .eyebrow { font-size: 13px; }
.agro-row .crop {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.agro-row .barz {
  height: 36px;
  position: relative;
  background: var(--line-soft);
}
.agro-row .barz .cur {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(245, 199, 106, 0.40);
  border-right: 1px solid var(--ksa);
}
.agro-row .barz .tgt {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-right: 2px solid var(--rf);
  box-shadow: 2px 0 12px var(--rf-glow);
}
.agro-row .pct {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  text-align: right;
  letter-spacing: -0.02em;
}
.agro-row .delta {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--good);
  text-align: right;
  letter-spacing: 0.05em;
}
.agro-total {
  margin-top: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--good);
  padding: 44px;
  display: flex;
  align-items: center;
  gap: 36px;
  position: relative;
  overflow: hidden;
}
.agro-total::before {
  content: ""; position: absolute;
  width: 300px; height: 300px;
  right: -80px; top: -80px;
  background: radial-gradient(circle, rgba(79, 211, 145, 0.30), transparent 70%);
  pointer-events: none;
}
.agro-total .big {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--good);
  position: relative;
}
.agro-total .big .unit {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0;
  display: block;
  margin-top: 8px;
}
.agro-total p { font-size: 20px; color: var(--ink-soft); margin: 0; line-height: 1.55; position: relative; }


/* ====================================================================
   SLIDE — ENERGY
   ==================================================================== */
.s-energy .slide-inner { gap: 24px; }
.energy-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.energy-step {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.energy-step .step-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 240px;
  color: var(--ksa);
  line-height: 0.85;
  position: absolute;
  bottom: 6px;
  right: 32px;
  opacity: 0.10;
  pointer-events: none;
}
.energy-step .sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ksa);
}
.energy-step h3 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  margin: 4px 0 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 90%;
}
.energy-step p {
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 96%;
  flex: 1;
}
.energy-step .kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.energy-step .kv .eyebrow { display: block; margin-bottom: 10px; font-size: 13px; }
.energy-step .kv .v {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.energy-spike {
  margin-top: 16px;
  padding: 28px 36px;
  background: linear-gradient(135deg, rgba(229, 75, 42, 0.10), transparent);
  border-top: 1px solid var(--rf);
  border-bottom: 1px solid var(--rf);
  display: flex;
  align-items: center;
  gap: 36px;
  flex-shrink: 0;
}
.energy-spike .big {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--rf);
  flex-shrink: 0;
  text-shadow: 0 0 30px var(--rf-glow);
}
.energy-spike .eyebrow { color: var(--ink-mute); flex-shrink: 0; }
.energy-spike .desc {
  font-size: 20px;
  color: var(--ink-soft);
  line-height: 1.5;
  flex: 1;
}


/* ====================================================================
   SLIDE — CONCLUSIONS
   ==================================================================== */
.s-conclude .slide-inner { gap: 24px; }
.headline-finding {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-elev));
  border-left: 3px solid var(--ksa);
  padding: 32px 40px;
  margin-top: 32px;
  position: relative;
  overflow: hidden;
}
.headline-finding::before {
  content: ""; position: absolute;
  width: 400px; height: 400px;
  right: -120px; top: -120px;
  background: radial-gradient(circle, var(--ksa-glow), transparent 70%);
  pointer-events: none;
}
.headline-finding .eyebrow { color: var(--ksa); display: block; margin-bottom: 10px; position: relative; }
.headline-finding .text {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  position: relative;
}
.headline-finding .text em { font-style: italic; color: var(--rf); }
.conclude-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 56px;
  margin-top: 28px;
  flex: 1;
  align-content: center;
}
.con-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  align-items: start;
}
.con-item .n {
  font-family: var(--font-display);
  font-size: 56px;
  font-style: italic;
  font-weight: 500;
  color: var(--rf);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px var(--rf-glow);
}
.con-item h4 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.con-item p {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}


/* ====================================================================
   SLIDE — THANKS
   ==================================================================== */
.s-thanks { padding: 0; }
.s-thanks .mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 70% 30%, var(--rf-glow), transparent 60%),
    radial-gradient(60% 60% at 25% 70%, var(--ksa-glow), transparent 60%),
    radial-gradient(40% 40% at 50% 50%, rgba(109, 168, 255, 0.10), transparent 65%);
  animation: meshDrift 28s ease-in-out infinite alternate;
  filter: blur(20px);
}
.s-thanks .gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 100%);
}
.thanks-inner {
  position: relative; z-index: 3;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 48px;
}
.thanks-inner .kicker { margin-bottom: 28px; }
.thanks-inner h1 {
  font-family: var(--font-display);
  font-size: 220px;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.04em;
  line-height: 0.96;
  white-space: nowrap;
}
.thanks-inner h1 em {
  color: var(--rf); font-style: italic;
  text-shadow: 0 0 80px var(--rf-glow);
}
.thanks-inner .gold {
  color: var(--ksa); font-style: italic;
  text-shadow: 0 0 80px var(--ksa-glow);
}
.thanks-inner .sub {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 36px;
  letter-spacing: -0.005em;
  max-width: 60ch;
  line-height: 1.3;
}
.thanks-inner .author {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 64px;
}


/* ====================================================================
   TWEAKS PANEL
   ==================================================================== */
#tweaks-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 300px;
  padding: 22px;
  background: rgba(14, 19, 32, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 241, 230, 0.12);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-sans);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
#tweaks-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#tweaks-panel .tp-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
#tweaks-panel .tp-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-mute);
}
#tweaks-panel .tp-close {
  background: none; border: none; color: var(--ink-mute);
  cursor: pointer; font-size: 22px; padding: 0;
  width: 24px; height: 24px;
}
#tweaks-panel .tp-section { margin-bottom: 18px; }
#tweaks-panel .tp-section:last-child { margin-bottom: 0; }
#tweaks-panel .tp-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
#tweaks-panel .tp-row { display: flex; gap: 6px; }
#tweaks-panel .tp-row.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tweaks-panel .tp-btn {
  flex: 1;
  padding: 10px 12px;
  background: rgba(245,241,230,0.04);
  color: var(--ink-soft);
  border: 1px solid rgba(245,241,230,0.10);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background 200ms, color 200ms, border-color 200ms;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#tweaks-panel .tp-btn:hover {
  background: rgba(245,241,230,0.08);
  color: var(--ink);
}
#tweaks-panel .tp-btn.active {
  background: var(--ksa);
  color: #15130E;
  border-color: var(--ksa);
}
#tweaks-panel .tp-swatch {
  width: 10px; height: 10px;
  display: inline-block;
  border-radius: 50%;
}


/* ====================================================================
   SLIDE — TOURISM (visa-free)
   ==================================================================== */
.s-tourism .slide-inner { gap: 24px; }
.tourism-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.tourism-stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ksa);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
}
.tourism-stat.green { border-left-color: var(--good); }
.tourism-stat .eyebrow { color: var(--ksa); margin-bottom: 10px; display: block; }
.tourism-stat.green .eyebrow { color: var(--good); }
.tourism-stat .big {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
.tourism-stat .big .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 14px;
  letter-spacing: 0;
  line-height: 1.45;
}
.hotel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.hotel-cell {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 0;
}
.hotel-cell image-slot { width: 100%; height: 100%; display: block; }
.hotel-cell .hotel-caption {
  position: absolute;
  left: 14px; bottom: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  z-index: 2;
  pointer-events: none;
}

/* ====================================================================
   SLIDE — PILGRIMAGE
   ==================================================================== */
.s-pilgrimage .slide-inner { gap: 24px; }
.pilgrim-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}
.holy-stack { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.holy-photo {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.holy-photo image-slot { width: 100%; height: 100%; display: block; min-height: 180px; }
.holy-photo .holy-caption {
  position: absolute;
  left: 20px; bottom: 16px; right: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 2;
  letter-spacing: -0.01em;
}
.pilgrim-stats { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.pilgrim-row {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  flex: 1;
  min-height: 0;
}
.pilgrim-row.green { border-left-color: var(--good); }
.pilgrim-row.ksa   { border-left-color: var(--ksa); }
.pilgrim-row.rf    { border-left-color: var(--rf); }
.pilgrim-row .eyebrow { display: block; margin-bottom: 14px; font-size: 14px; }
.pilgrim-row.ksa   .eyebrow { color: var(--ksa); }
.pilgrim-row.rf    .eyebrow { color: var(--rf); }
.pilgrim-row.green .eyebrow { color: var(--good); }
.pilgrim-row .desc { font-size: 21px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.pilgrim-row .v {
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.pilgrim-row .v .unit {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 10px;
  letter-spacing: 0;
}


/* ====================================================================
   SLIDE — MARITIME ROUTE
   ==================================================================== */
.s-maritime .slide-inner { gap: 20px; }
.maritime-map {
  flex: 1;
  background:
    radial-gradient(60% 60% at 40% 60%, rgba(109,168,255,0.06), transparent 70%),
    var(--bg-elev);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.maritime-map svg { width: 100%; height: 100%; display: block; }
.route-country {
  fill: rgba(245,241,230,0.04);
  stroke: var(--line);
  stroke-width: 0.6;
}
[data-theme="light"] .route-country {
  fill: rgba(21,19,14,0.04);
  stroke: var(--line);
}
.route-country.rt-rf  { fill: rgba(229, 75, 42, 0.12); stroke: var(--rf);  stroke-width: 0.9; }
.route-country.rt-ksa { fill: rgba(245, 199, 106, 0.16); stroke: var(--ksa); stroke-width: 0.9; }
.tanker { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }

.route-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.route-stats .kpi {
  background: var(--bg-card);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.route-stats .kpi .eyebrow { color: var(--ink-mute); }
.route-stats .kpi .v {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.route-stats .kpi .v .unit {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0;
  display: block;
  margin-top: 6px;
}
.route-stats .kpi .note { font-size: 13px; color: var(--ink-mute); line-height: 1.4; }

/* ---------- landing scroll hint ---------- */
#scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-mute);
  pointer-events: none;
  transition: opacity 600ms var(--ease-out);
}
#scroll-hint.gone { opacity: 0; }
#scroll-hint .sh-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#scroll-hint .sh-chev {
  font-size: 26px;
  line-height: 0.6;
  animation: sh-bounce 1.8s ease-in-out infinite;
}
@keyframes sh-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}
[data-motion="off"] #scroll-hint .sh-chev { animation: none; }