/* ============================================================
   AGA — cinematic landing page
   Dark editorial. Wireframe-architectural. Botswana-confident.
   ============================================================ */

:root {
  --base:        #080A0E;
  --base-deep:   #04060A;
  --surface:     #0E1F2C;
  --surface-2:   #15303F;
  --ink:         #F4EFE6;
  --ink-2:       #D7CFC0;
  --ink-3:       #A09684;
  --hot:         #C44A1F;
  --hot-2:       #E0623A;
  --rim:         #1F4D3F;
  --rim-2:       #2E6A57;
  --ochre:       #E8A53D;
  --grey:        #7A7368;

  --max:         1320px;
  --gap:         clamp(16px, 2vw, 28px);
  --pad-x:       clamp(24px, 5vw, 80px);
  --pad-y:       clamp(80px, 12vw, 180px);

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-2:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
}

* { box-sizing: border-box; }
*::selection { background: var(--hot); color: var(--ink); }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(196, 74, 31, 0.10), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(31, 77, 63, 0.18), transparent 60%),
    var(--base);
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--hot);
  color: var(--ink);
  padding: 8px 14px;
  z-index: 1000;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   Typography helpers
   ============================================================ */

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 12px var(--hot);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 28px;
}
.section-title em {
  font-style: italic;
  color: var(--ink-2);
  font-weight: 400;
}
.section-lead {
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}
.section-head {
  max-width: var(--max);
  margin: 0 auto 80px;
  padding: 0 var(--pad-x);
  will-change: transform;
}
.section-rule {
  position: relative;
  height: 1px;
  margin: 0 var(--pad-x) 72px;
  background: linear-gradient(90deg, transparent, var(--rim) 30%, var(--rim) 70%, transparent);
  opacity: 0.55;
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--pad-x);
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.78) 0%, rgba(8, 10, 14, 0) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.06em;
  color: var(--ink);
  line-height: 1;
}
.wordmark::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--hot);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: super;
  transform: translateY(-2px);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 20px;
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: border-color 280ms var(--ease-out), background 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.nav-cta:hover {
  background: var(--hot);
  border-color: var(--hot);
  transform: translateY(-1px);
}
.nav-cta-arrow {
  transition: transform 280ms var(--ease-out);
}
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1400px 900px at 30% 50%, transparent 30%, rgba(8, 10, 14, 0.55) 75%, var(--base) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, 0) 60%, var(--base) 100%);
  pointer-events: none;
}
.hero-text-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(8, 10, 14, 0.78) 0%, rgba(8, 10, 14, 0.55) 38%, rgba(8, 10, 14, 0.0) 62%),
    linear-gradient(180deg, rgba(8, 10, 14, 0.45) 0%, rgba(8, 10, 14, 0) 35%, rgba(8, 10, 14, 0) 70%, rgba(8, 10, 14, 0.85) 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' 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.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26vh var(--pad-x) 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 16px var(--hot);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 8.4vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
  max-width: 17ch;
}
.hero-headline .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.hero-headline .line-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.hero-headline .accent .line-inner {
  color: var(--hot);
}
.hero-headline .accent em {
  color: var(--hot-2);
  font-style: italic;
  font-weight: 600;
}

.hero-sub {
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 40px;
  opacity: 0;
  transform: translateY(20px);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(20px);
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  background: var(--hot);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  box-shadow: 0 16px 48px -16px rgba(196, 74, 31, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn-primary:hover {
  background: var(--hot-2);
  transform: translateY(-2px);
  box-shadow: 0 24px 64px -16px rgba(224, 98, 58, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.btn-primary .btn-arrow {
  transition: transform 320ms var(--ease-out);
}
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid rgba(244, 239, 230, 0.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: border-color 280ms var(--ease-out), color 280ms var(--ease-out), background 280ms var(--ease-out);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(244, 239, 230, 0.04);
}
.btn-arrow-down {
  display: inline-block;
  animation: float-down 2s ease-in-out infinite;
}
@keyframes float-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: var(--pad-x);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-3);
  writing-mode: vertical-rl;
}
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--ink-3), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0; right: 0;
  height: 40%;
  background: var(--ochre);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0% { top: -40%; }
  100% { top: 110%; }
}

/* ============================================================
   CAPABILITY GRID
   ============================================================ */

.capability {
  position: relative;
  padding: var(--pad-y) 0;
}
.cap-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.cap-card {
  position: relative;
  padding: 44px 36px 40px;
  background: linear-gradient(180deg, rgba(21, 48, 63, 0.22), rgba(14, 31, 44, 0.34));
  border: 1px solid rgba(244, 239, 230, 0.07);
  border-radius: 2px;
  overflow: hidden;
  transition: background 480ms var(--ease-out), border-color 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.cap-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 1px;
  background: var(--hot);
  transition: width 600ms var(--ease-out);
}
.cap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 320px at var(--mx, 50%) var(--my, 0%), rgba(196, 74, 31, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.cap-card:hover {
  border-color: rgba(196, 74, 31, 0.4);
  transform: translateY(-4px);
}
.cap-card:hover::before { width: 100%; }
.cap-card:hover::after { opacity: 1; }

.cap-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 32px;
  color: var(--hot);
  margin-bottom: 28px;
  letter-spacing: -0.04em;
  transition: font-size 380ms var(--ease-out), color 380ms var(--ease-out);
}
.cap-card:hover .cap-num {
  font-size: 40px;
  color: var(--hot-2);
}
.cap-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--ink);
}
.cap-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 36ch;
}
.cap-promise {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--rim-2);
  margin: 0;
  position: relative;
  padding-left: 16px;
}
.cap-promise::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--rim-2);
}
.cap-rule {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rim) 30%, var(--rim) 70%, transparent);
  opacity: 0.3;
}

/* ============================================================
   LIVE WORK
   ============================================================ */

.live-work {
  padding: var(--pad-y) 0;
  position: relative;
}
.poc-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.poc-card {
  position: relative;
  background: linear-gradient(180deg, rgba(21, 48, 63, 0.45), rgba(14, 31, 44, 0.55));
  border: 1px solid rgba(244, 239, 230, 0.08);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.poc-card:hover {
  border-color: rgba(196, 74, 31, 0.5);
  transform: translateY(-6px);
}
.poc-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--base-deep);
  overflow: hidden;
  border-bottom: 1px solid rgba(244, 239, 230, 0.06);
}
.poc-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.poc-card:hover .poc-screenshot {
  transform: scale(1.03);
}
.poc-frame {
  position: absolute;
  inset: 0;
}
.poc-meta {
  padding: 32px 28px 32px;
}
.poc-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.poc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
}
.poc-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.poc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hot);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(196, 74, 31, 0.4);
  transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.poc-link:hover {
  color: var(--hot-2);
  border-color: var(--hot-2);
}
.poc-link span {
  transition: transform 280ms var(--ease-out);
}
.poc-link:hover span { transform: translateX(4px); }

/* POC 1 — Pricemate catalog visual */
.catalog-grid {
  position: absolute;
  inset: 14% 12%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.catalog-cell {
  position: relative;
  background:
    linear-gradient(135deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02)),
    repeating-linear-gradient(45deg, rgba(244, 239, 230, 0.04) 0 2px, transparent 2px 8px);
  border: 1px solid rgba(244, 239, 230, 0.10);
}
.hotspot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0 0 rgba(196, 74, 31, 0.55);
  animation: hotspot-pulse 2.4s ease-out infinite;
}
.h1 { top: 60%; left: 28%; animation-delay: 0s; }
.h2 { top: 32%; left: 70%; animation-delay: 0.4s; }
.h3 { top: 70%; left: 80%; animation-delay: 0.8s; }
.h4 { top: 20%; left: 18%; animation-delay: 1.2s; }
.h5 { top: 55%; left: 50%; animation-delay: 1.6s; }
.h6 { top: 30%; left: 40%; animation-delay: 2.0s; }
@keyframes hotspot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 74, 31, 0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 16px rgba(196, 74, 31, 0); transform: scale(0.9); }
  100% { box-shadow: 0 0 0 0 rgba(196, 74, 31, 0); transform: scale(1); }
}

/* POC 2 — English Metropolis 3D cube */
.em-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  background:
    radial-gradient(circle at 50% 50%, rgba(31, 77, 63, 0.25), transparent 65%),
    var(--base-deep);
}
.em-cube {
  position: relative;
  width: 90px; height: 90px;
  transform-style: preserve-3d;
  animation: cube-spin 14s linear infinite;
}
.em-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(31, 77, 63, 0.4), rgba(14, 31, 44, 0.6));
  border: 1px solid var(--rim-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  color: var(--ochre);
  letter-spacing: -0.04em;
}
.em-face.front  { transform: translateZ(45px); }
.em-face.back   { transform: rotateY(180deg) translateZ(45px); }
.em-face.right  { transform: rotateY(90deg)  translateZ(45px); }
.em-face.left   { transform: rotateY(-90deg) translateZ(45px); }
.em-face.top    { transform: rotateX(90deg)  translateZ(45px); }
.em-face.bottom { transform: rotateX(-90deg) translateZ(45px); }
@keyframes cube-spin {
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}
.em-stat {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink-2);
}
.em-stat strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
}
.em-stat span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* POC 3 — terminal */
.terminal-frame {
  background: #0A1216;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #060B0F;
  border-bottom: 1px solid rgba(244, 239, 230, 0.06);
}
.term-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(244, 239, 230, 0.18);
}
.term-dot:nth-child(1) { background: rgba(196, 74, 31, 0.7); }
.term-dot:nth-child(2) { background: rgba(232, 165, 61, 0.7); }
.term-dot:nth-child(3) { background: rgba(31, 77, 63, 0.9); }
.term-title {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.terminal-body {
  flex: 1;
  padding: 14px 16px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2);
  overflow: hidden;
}
.term-line {
  opacity: 0;
  transform: translateY(6px);
  animation: term-line-in 0.4s var(--ease-out) forwards;
}
.term-line[data-line="1"] { animation-delay: 0.3s; }
.term-line[data-line="2"] { animation-delay: 0.9s; }
.term-line[data-line="3"] { animation-delay: 1.3s; }
.term-line[data-line="4"] { animation-delay: 1.7s; }
.term-line[data-line="5"] { animation-delay: 2.1s; }
.term-line[data-line="6"] { animation-delay: 2.5s; }
.term-line[data-line="7"] { animation-delay: 2.9s; }
@keyframes term-line-in {
  to { opacity: 1; transform: translateY(0); }
}
.term-prompt { color: var(--hot); margin-right: 6px; }
.term-cmd { color: var(--ink); }
.term-ok { color: var(--rim-2); margin-right: 8px; }
.term-accent { color: var(--ochre); }
.term-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--ink);
  vertical-align: -2px;
  animation: term-blink 1s steps(2) infinite;
}
@keyframes term-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */

.process {
  padding: var(--pad-y) 0;
  position: relative;
}
.timeline {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px var(--pad-x) 0;
}
.timeline-track {
  position: absolute;
  top: 90px;
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: rgba(244, 239, 230, 0.10);
}
.timeline-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--rim-2), var(--hot) 60%, var(--ochre));
  transform-origin: left center;
  transform: scaleX(0);
}
.timeline-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.t-step {
  position: relative;
  padding-top: 64px;
}
.t-marker {
  position: absolute;
  top: 18px;
  left: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--base);
  border: 1px solid var(--rim-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 600ms var(--ease-out), background 600ms var(--ease-out);
}
.t-marker-inner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rim-2);
  transition: background 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.t-step.is-active .t-marker {
  border-color: var(--hot);
  background: var(--surface);
}
.t-step.is-active .t-marker-inner {
  background: var(--hot);
  transform: scale(1.4);
  box-shadow: 0 0 16px var(--hot);
}
.t-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.t-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1;
}
.t-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 28ch;
}

/* ============================================================
   CREDIBILITY BAND
   ============================================================ */

.credibility {
  position: relative;
  padding: var(--pad-y) 0;
  background:
    linear-gradient(180deg, rgba(14, 31, 44, 0.5), rgba(14, 31, 44, 0.9)),
    radial-gradient(800px 500px at 80% 40%, rgba(196, 74, 31, 0.18), transparent 60%);
  border-top: 1px solid rgba(244, 239, 230, 0.06);
  border-bottom: 1px solid rgba(244, 239, 230, 0.06);
}
.cred-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}
.pull-quote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-left: 60px;
}
.quote-mark {
  position: absolute;
  top: -30px;
  left: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 140px;
  line-height: 1;
  color: var(--hot);
  opacity: 0.6;
}
.cred-attribution {
  border-left: 1px solid var(--hot);
  padding-left: 28px;
}
.cred-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hot);
  margin: 0 0 12px;
}
.cred-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 40ch;
}

/* ============================================================
   TALK TO US
   ============================================================ */

.talk {
  position: relative;
  padding: var(--pad-y) 0;
  text-align: center;
  overflow: hidden;
}
.talk::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 1;
  border: 1px solid rgba(196, 74, 31, 0.10);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.talk::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60vw;
  max-width: 800px;
  aspect-ratio: 1;
  border: 1px solid rgba(196, 74, 31, 0.06);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.talk-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.talk .section-tag { justify-content: center; }
.talk-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 24px 0 28px;
  color: var(--ink);
}
.talk-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--hot);
}
.talk-sub {
  max-width: 56ch;
  margin: 0 auto 56px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 24px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.btn-cta-bg {
  position: absolute;
  inset: 0;
  background: var(--hot);
  border-radius: 999px;
  box-shadow: 0 24px 64px -20px rgba(196, 74, 31, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  z-index: -1;
}
.btn-cta:hover { transform: translateY(-3px); }
.btn-cta:hover .btn-cta-bg {
  background: var(--hot-2);
  box-shadow: 0 32px 80px -16px rgba(224, 98, 58, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.btn-cta-arrow {
  transition: transform 320ms var(--ease-out);
}
.btn-cta:hover .btn-cta-arrow { transform: translateX(6px); }
.talk-fine {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: 100px var(--pad-x) 60px;
  text-align: center;
  border-top: 1px solid rgba(244, 239, 230, 0.06);
}
.setswana-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 64px);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.setswana-trans {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 0;
}
.footer-rule {
  width: 120px;
  height: 1px;
  margin: 50px auto;
  background: var(--hot);
}
.legal {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: 1fr; }
  .poc-grid { grid-template-columns: 1fr; }
  .timeline-steps { grid-template-columns: 1fr; gap: 36px; }
  .timeline-track { display: none; }
  .t-step { padding-top: 0; padding-left: 50px; }
  .t-marker { top: 0; left: 0; }
  .cred-inner { grid-template-columns: 1fr; gap: 50px; }
  .pull-quote { padding-left: 40px; font-size: 22px; }
  .quote-mark { font-size: 100px; top: -22px; }
  .hero-content { padding-top: 22vh; }
  .scroll-indicator { display: none; }
  /* Mobile hero needs MUCH heavier shade behind the headline — the
     wireframe city is visually dense at portrait aspect ratios. */
  .hero-text-shade {
    background:
      linear-gradient(180deg, rgba(8, 10, 14, 0.86) 0%, rgba(8, 10, 14, 0.72) 30%, rgba(8, 10, 14, 0.55) 55%, rgba(8, 10, 14, 0.85) 80%, var(--base) 100%);
  }
  .hero-vignette {
    background:
      radial-gradient(140% 70% at 50% 50%, transparent 0%, rgba(8, 10, 14, 0.5) 60%, var(--base) 100%);
  }
}

@media (max-width: 640px) {
  .nav-cta span:first-child { display: none; }
  .hero-headline { font-size: clamp(40px, 12vw, 72px); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { justify-content: center; }
  .cap-card { padding: 32px 24px; }
  .poc-meta { padding: 24px 22px 24px; }
  .talk-headline { font-size: clamp(38px, 11vw, 56px); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

.reduced-motion .hero-canvas { display: none; }
.reduced-motion .hero { background:
    radial-gradient(900px 600px at 30% 50%, rgba(31, 77, 63, 0.22), transparent 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(196, 74, 31, 0.18), transparent 60%),
    var(--base);
}
.reduced-motion .hero-headline .line-inner { transform: translateY(0); }
.reduced-motion .hero-eyebrow,
.reduced-motion .hero-sub,
.reduced-motion .hero-cta { opacity: 1; transform: none; }
.reduced-motion .timeline-fill { transform: scaleX(1); }
.reduced-motion .em-cube { animation: none; }
.reduced-motion .hotspot { animation: none; }

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