/* ============================================
   SEYNOX-GRID AFRICA — DESIGN SYSTEM
   Design concept: engineering-schematic precision.
   Thin gold rule-lines as the one recurring structural
   device (echoing the architecture diagrams already built
   for this company). Sharp corners, not soft SaaS cards.
   Dark navy as the dominant canvas throughout, not just
   the hero. Left-aligned, document-like rhythm — this
   reads as institutional infrastructure, not a consumer app.
   ============================================ */

:root {
  --navy: #061840;
  --navy-deep: #04102E;
  --navy-panel: #0C2454;
  --gold: #D4AF37;
  --teal: #0D9488;
  --cream: #F4F1EA;
  --ink: #16213D;
  --slate: #6B7A9E;
  --slate-light: #9FB0CC;
  --border-dark: #1C3260;
  --border-light: #E3E6E4;
  --amber-bg: #FEF3E2;
  --amber-border: #D97706;
  --amber-text: #92400E;
  --page-bg: #FBFBF8;

  --font-head: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1180px;
  --gutter: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== Typography ===== */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(34px, 5vw, 54px); }
h2 { font-size: clamp(26px, 3.5vw, 36px); }
h3 { font-size: 20px; font-weight: 600; }

p { max-width: 62ch; }
.text-wide p { max-width: 74ch; }

.lede {
  font-size: 19px;
  color: var(--slate);
  max-width: 56ch;
}

/* ===== Structural rule-line — the one recurring motif ===== */
.rule {
  width: 56px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 20px 0 28px;
}
.rule-vert {
  width: 3px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ===== Header / Nav ===== */
.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--border-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img { width: 34px; height: 34px; }
.brand-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--cream);
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  font-size: 14.5px;
  color: var(--slate-light);
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-cta {
  background: var(--gold);
  color: var(--navy-deep) !important;
  padding: 10px 20px;
  font-weight: 600 !important;
  border-radius: 3px;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 24px;
  cursor: pointer;
}

/* ===== Hero ===== */
.hero {
  background: var(--navy);
  color: var(--cream);
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -220px; right: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.10);
}
.hero-inner { position: relative; max-width: 720px; }
.hero .lede { color: var(--slate-light); margin-top: 18px; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 13px 26px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: #E0BD4E; }
.btn-outline { border-color: var(--slate); color: var(--cream); }
.btn-outline:hover { border-color: var(--cream); }
.btn-outline-dark { border-color: var(--ink); color: var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: var(--cream); }
.btn-row { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* ===== Sections ===== */
section { padding: 88px 0; }
.section-dark { background: var(--navy); color: var(--cream); }
.section-dark .slate { color: var(--slate-light); }
.section-light { background: var(--page-bg); }
.section-panel { background: var(--navy-panel); color: var(--cream); }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 14px;
}
.section-dark .eyebrow, .section-panel .eyebrow { color: #5EEAD4; }

/* ===== Stat blocks ===== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.stat {
  background: var(--navy);
  border: 1px solid var(--border-dark);
  padding: 28px 24px;
}
.stat-num {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
}
.stat-label {
  font-size: 13px;
  color: var(--slate-light);
  margin-top: 8px;
  line-height: 1.4;
}

/* ===== Cards (structural, not soft) ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.panel {
  background: var(--page-bg);
  border: 1px solid var(--border-light);
  padding: 28px;
}
.panel h3 { margin-bottom: 10px; }
.panel p { font-size: 14.5px; color: var(--ink); }

.module-cat {
  border-left: 3px solid var(--teal);
  padding-left: 20px;
}
.module-cat h3 { color: var(--teal); margin-bottom: 12px; }
.module-cat ul { list-style: none; }
.module-cat li {
  font-size: 14.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.module-cat li:last-child { border-bottom: none; }

/* ===== Honesty callout — distinct, recognizable pattern ===== */
.honest {
  border: 1.5px solid var(--amber-border);
  background: var(--amber-bg);
  padding: 22px 26px;
  margin: 32px 0;
}
.honest-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--amber-text);
  margin-bottom: 8px;
}
.honest p { color: var(--amber-text); font-size: 14.5px; margin: 0; max-width: none; }

.section-dark .honest, .section-panel .honest {
  background: rgba(217,119,6,0.10);
  border-color: rgba(217,119,6,0.4);
}
.section-dark .honest p, .section-panel .honest p { color: #F0C896; }
.section-dark .honest-label, .section-panel .honest-label { color: var(--gold); }

/* ===== Timeline / list rows ===== */
.row-list { border-top: 1px solid var(--border-light); }
.row-item {
  display: flex;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-light);
}
.row-item .row-label { width: 200px; flex-shrink: 0; font-weight: 600; font-size: 14.5px; }
.row-item .row-body { font-size: 14.5px; color: var(--ink); }

/* ===== Forms ===== */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 14.5px;
  background: white;
  color: var(--ink);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-deep);
  color: var(--slate-light);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border-dark);
}
.footer-grid h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.footer-grid a, .footer-grid p { font-size: 13.5px; color: var(--slate-light); display: block; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--cream); }
.footer-bottom {
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ===== Utility ===== */
.mt-0 { margin-top: 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 2px;
}

/* ===== Focus visibility (accessibility) ===== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--navy);
    padding: 20px var(--gutter) 28px;
    border-bottom: 1px solid var(--border-dark);
    gap: 20px;
  }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 56px 0; }
  .row-item { flex-direction: column; gap: 6px; }
  .row-item .row-label { width: auto; }
}