/* =============================================
   POPNANTS LABS — ORACLE-INSPIRED DESIGN SYSTEM
   Theme: Enterprise White / Turquoise Blue
   Typography: Oracle Sans (via Clear Sans)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Clear+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Source+Sans+3:ital,opsz,wght@0,8..32,300;0,8..32,400;0,8..32,600;0,8..32,700;1,8..32,300;1,8..32,400&display=swap');

/* ---- ROOT VARIABLES ---- */
:root {
  /* Primary brand — Turquoise Blue */
  --brand-primary:   #00788a;
  --brand-light:     #009db2;
  --brand-dark:      #005f6e;
  --brand-xdark:     #003d47;
  --brand-50:        #e6f6f8;
  --brand-100:       #b3e5ec;

  /* Accent — deep teal line */
  --accent-line:     #00b5c8;
  --accent-hover:    #00d4eb;

  /* Oracle-style neutral palette */
  --white:           #ffffff;
  --gray-50:         #f9fafb;
  --gray-100:        #f2f4f6;
  --gray-200:        #e5e8ec;
  --gray-300:        #cdd3da;
  --gray-400:        #9aa3ad;
  --gray-500:        #6b7580;
  --gray-600:        #4a5360;
  --gray-700:        #323c48;
  --gray-800:        #1e2630;
  --gray-900:        #10161e;

  /* Text */
  --text-primary:    #1e2630;
  --text-secondary:  #4a5360;
  --text-muted:      #6b7580;
  --text-inverse:    #ffffff;

  /* Status */
  --success:         #1e7e34;
  --warning:         #c96a00;
  --error:           #b91c1c;

  /* Typography */
  --font-primary:    'Clear Sans', 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-mono:       'Courier New', Courier, monospace;

  /* Spacing */
  --nav-height:      64px;
  --section-pad:     80px;
  --container-max:   1264px;
  --container-wide:  1440px;

  /* Borders & Radius */
  --radius-sm:       4px;
  --radius-md:       6px;
  --radius-lg:       8px;
  --radius-xl:       12px;

  /* Shadows */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.12);
  --shadow-nav:      0 2px 8px rgba(0,0,0,0.10);

  /* Transitions */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      all 0.22s var(--ease);
  --transition-slow: all 0.4s var(--ease);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--brand-100); color: var(--brand-xdark); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-light); }

/* =============================================
   LAYOUT
   ============================================= */
.page-wrap { padding-top: var(--nav-height); }

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

section { padding: var(--section-pad) 0; }

.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* =============================================
   NAVIGATION — Oracle.com style
   ============================================= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}
.navbar.scrolled {
  box-shadow: var(--shadow-nav);
}

.nav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 32px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--brand-primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2; }
.logo-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.logo-text span { display: block; font-size: 0.65rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  position: relative;
}
.nav-link:hover, .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
.nav-link .chevron {
  font-size: 0.6rem;
  transition: transform 0.22s var(--ease);
  opacity: 0.6;
}
.nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--brand-primary);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.22s var(--ease);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item a {
  display: block;
  padding: 9px 20px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: var(--transition);
}
.dropdown-item a:hover {
  color: var(--brand-primary);
  background: var(--gray-50);
}

/* Mega Dropdown */
.mega-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 720px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--brand-primary);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s var(--ease);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mega-item a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.mega-item a:hover { background: var(--gray-50); }
.mega-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 3px;
}
.mega-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Nav right */
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nav-ghost {
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-nav-ghost:hover {
  background: var(--brand-50);
}
.btn-nav-primary {
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-nav-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text-primary);
  transition: var(--transition);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-height); left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  padding: 12px 0 24px;
  z-index: 999;
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 11px 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  transition: var(--transition);
}
.mobile-nav a:hover {
  color: var(--brand-primary);
  background: var(--gray-50);
  border-left-color: var(--brand-primary);
}
.mobile-nav-section {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 14px 24px 4px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 28px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--white);
  background: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,120,138,0.3);
}

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 28px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--brand-primary);
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--brand-50);
  transform: translateY(-1px);
}

.btn-white {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 28px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--brand-primary);
  background: var(--white);
  border: 1.5px solid var(--white);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
}
.btn-white:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
  transform: translateY(-1px);
}

.btn-text {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  transition: var(--transition);
  background: none; border: none; cursor: pointer;
}
.btn-text:hover { color: var(--brand-dark); gap: 8px; }
.btn-text .arrow { font-size: 0.75rem; transition: var(--transition); }

/* =============================================
   TYPOGRAPHY
   ============================================= */
.section-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

h1, .h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h1 strong, .h1 strong { font-weight: 700; }

h2, .h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
h2 strong, .h2 strong { font-weight: 700; }

h3, .h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

h4, .h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.lead {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
}

.body-lg { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); }
.body-sm { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.caption { font-size: 0.78rem; color: var(--text-muted); }

/* =============================================
   HERO SECTIONS
   ============================================= */
.hero-primary {
  background: var(--brand-xdark);
  padding: calc(var(--nav-height) + 80px) 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-primary::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-light), var(--accent-line), var(--brand-primary));
}

.hero-primary-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(0,93,110,0.9) 0%, rgba(0,38,46,0.95) 60%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(0,181,200,0.03) 80px,
      rgba(0,181,200,0.03) 81px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 80px,
      rgba(0,181,200,0.03) 80px,
      rgba(0,181,200,0.03) 81px
    );
}

.hero-primary-content {
  position: relative; z-index: 2;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-line);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: '';
  width: 20px; height: 1.5px;
  background: var(--accent-line);
}

.hero-primary h1 {
  color: var(--white);
  margin-bottom: 20px;
}
.hero-primary h1 strong { color: var(--accent-line); }

.hero-primary .lead { color: rgba(255,255,255,0.75); max-width: 520px; }

.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 36px;
}

/* Page hero (interior) */
.page-hero {
  background: var(--gray-800);
  padding: calc(var(--nav-height) + 64px) 0 56px;
  border-bottom: 3px solid var(--brand-primary);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,60,70,0.8), rgba(10,20,30,0.9));
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.page-hero .lead { color: rgba(255,255,255,0.72); max-width: 560px; }

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-100);
  transform: translateY(-2px);
}
.card-top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0;
  transition: var(--transition);
}
.card:hover .card-top-bar { opacity: 1; }

.card-icon {
  width: 44px; height: 44px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card-icon svg { width: 20px; height: 20px; stroke: var(--brand-primary); fill: none; stroke-width: 1.75; }

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.card-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary);
  transition: var(--transition);
}
.card-link:hover { gap: 8px; color: var(--brand-dark); }

/* =============================================
   FEATURE ROWS
   ============================================= */
.feature-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}
.feature-item:last-child { border-bottom: none; }
.feature-item:hover { background: var(--gray-50); border-radius: var(--radius-md); }

.feature-icon-sm {
  width: 40px; height: 40px; min-width: 40px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.feature-icon-sm svg { width: 18px; height: 18px; stroke: var(--brand-primary); fill: none; stroke-width: 1.75; }

.feature-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.feature-text  { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }

/* =============================================
   STAT BLOCKS
   ============================================= */
.stats-bar {
  background: var(--brand-xdark);
  padding: 48px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-line);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* =============================================
   SECTION LABELS & DIVIDERS
   ============================================= */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}
.section-label::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--brand-primary);
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.section-title strong { font-weight: 700; }

.section-body {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 540px;
}
.section-body.wide { max-width: 680px; }

.divider {
  height: 1px;
  background: var(--gray-200);
  margin: 60px 0;
}
.divider-brand {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--accent-line), transparent);
  margin-bottom: 48px;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.55); transition: var(--transition); }
.breadcrumb a:hover { color: var(--accent-line); }
.breadcrumb-sep { color: rgba(255,255,255,0.25); font-size: 0.65rem; }

/* =============================================
   TAGS / BADGES
   ============================================= */
.tag {
  display: inline-flex;
  padding: 3px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: 0.04em;
}

.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: rgba(30, 126, 52, 0.1);
  border: 1px solid rgba(30, 126, 52, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700;
  color: var(--success);
}
.badge-live .dot {
  width: 5px; height: 5px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* =============================================
   TIMELINE
   ============================================= */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--gray-200);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 24px;
  margin-bottom: 52px;
  align-items: start;
}
.timeline-year {
  text-align: center;
  position: relative;
  z-index: 1;
}
.timeline-dot {
  width: 52px; height: 52px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: var(--white);
  margin: 0 auto;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gray-200);
}
.timeline-content {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: var(--transition);
}
.timeline-content:hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.timeline-content h4 {
  font-size: 0.95rem; font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.timeline-content p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; }
.timeline-left { text-align: right; }
.timeline-right { text-align: left; }

/* =============================================
   TEAM CARDS
   ============================================= */
.team-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-100);
}
.team-avatar {
  height: 200px;
  background: linear-gradient(135deg, var(--brand-xdark), var(--brand-dark));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.team-avatar-initials {
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.team-avatar-role-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-light), var(--accent-line));
}
.team-info { padding: 22px 24px; }
.team-name { font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.team-role {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-primary); margin-bottom: 12px;
}
.team-bio { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; }
.team-email { font-size: 0.8rem; color: var(--brand-primary); transition: var(--transition); }
.team-email:hover { color: var(--brand-dark); }

/* =============================================
   FORMS
   ============================================= */
.form-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-400); }

/* =============================================
   CONTACT INFO BLOCKS
   ============================================= */
.contact-block {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--brand-primary);
  transition: var(--transition);
}
.contact-block:hover { box-shadow: var(--shadow-sm); }
.contact-block-icon {
  width: 38px; height: 38px; min-width: 38px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.contact-block-icon svg { width: 18px; height: 18px; stroke: var(--brand-primary); fill: none; stroke-width: 1.75; }
.contact-block-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 3px; }
.contact-block-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }

/* =============================================
   QUOTE / PULL
   ============================================= */
.pull-quote {
  border-left: 4px solid var(--brand-primary);
  padding: 20px 28px;
  background: var(--brand-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pull-quote p { font-size: 1.05rem; font-style: italic; font-weight: 300; color: var(--text-primary); line-height: 1.75; }
.pull-quote cite { display: block; margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: var(--brand-primary); font-style: normal; }

/* =============================================
   CTA BANDS
   ============================================= */
.cta-band {
  background: var(--brand-xdark);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,181,200,0.06) 0%, transparent 60%);
}
.cta-band-content { position: relative; z-index: 2; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.65); max-width: 500px; margin-top: 12px; }
.cta-band .actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================
   FOOTER
   ============================================= */
footer {
  background: var(--gray-900);
  color: rgba(255,255,255,0.65);
  border-top: 3px solid var(--brand-primary);
}
.footer-main { padding: 60px 0 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 56px;
}
.footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand-logo .logo-mark { background: var(--brand-light); }
.footer-brand-logo .logo-text { color: var(--white); }
.footer-brand-logo .logo-text span { color: rgba(255,255,255,0.45); }
.footer-brand-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer-social { display: flex; gap: 8px; }
.social-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.55);
  transition: var(--transition);
  text-decoration: none;
}
.social-btn:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); }
.footer-col h5 {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  padding: 4px 0;
  transition: var(--transition);
}
.footer-link:hover { color: var(--accent-line); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: rgba(255,255,255,0.3);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.4); transition: var(--transition); }
.footer-bottom a:hover { color: var(--accent-line); }

/* =============================================
   BACKGROUNDS
   ============================================= */
.bg-white   { background: var(--white); }
.bg-light   { background: var(--gray-50); }
.bg-gray    { background: var(--gray-100); }
.bg-dark    { background: var(--gray-800); }
.bg-brand   { background: var(--brand-primary); }
.bg-xdark  { background: var(--brand-xdark); }

/* =============================================
   UTILITIES
   ============================================= */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-brand   { color: var(--brand-primary); }
.text-muted   { color: var(--text-muted); }
.text-white   { color: var(--white); }
.text-sm      { font-size: 0.875rem; }
.text-xs      { font-size: 0.78rem; }
.fw-300       { font-weight: 300; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }

.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mt-32  { margin-top: 32px; }
.mt-48  { margin-top: 48px; }
.mt-64  { margin-top: 64px; }
.mb-8   { margin-bottom: 8px; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.mb-32  { margin-bottom: 32px; }
.mb-48  { margin-bottom: 48px; }
.mb-64  { margin-bottom: 64px; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .nav-actions { display: none; }
  .hamburger { display: flex; }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
}

@media (max-width: 768px) {
  :root { --section-pad: 56px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-panel { padding: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .timeline::before { left: 24px; }
  .timeline-item { display: block; padding-left: 64px; position: relative; margin-bottom: 32px; }
  .timeline-year { position: absolute; left: 0; top: 0; }
  .timeline-dot { width: 44px; height: 44px; font-size: 0.65rem; }
  .timeline-left { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .cta-band .actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .container, .container-wide { padding: 0 20px; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .mega-dropdown { width: calc(100vw - 40px); }
  .mega-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   LOGO IMAGE INTEGRATION
   ============================================= */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  filter: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-logo:hover .nav-logo-img { transform: scale(1.04); opacity: 0.85; }

/* Footer logo */
.footer-logo-img {
  height: 44px; width: auto;
  filter: brightness(0) invert(1) opacity(0.85);
  transition: opacity 0.2s ease;
}
.footer-logo-img:hover { opacity: 0.65; }

/* =============================================
   DISCIPLINES GRID
   ============================================= */
.disciplines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.discipline-cell {
  padding: 28px 22px;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  background: var(--white);
}
.discipline-cell:hover {
  background: var(--brand-50);
  z-index: 1;
}
.discipline-cell:nth-child(5n) { border-right: none; }
.discipline-cell:nth-last-child(-n+5) { border-bottom: none; }
.discipline-icon {
  width: 40px; height: 40px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: var(--transition);
}
.discipline-cell:hover .discipline-icon {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.discipline-cell:hover .discipline-icon svg { stroke: white; }
.discipline-name {
  font-size: 0.82rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.discipline-tagline {
  font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;
}

@media(max-width:900px){ .disciplines-grid { grid-template-columns: repeat(2,1fr); } .discipline-cell:nth-child(2n){ border-right:none; } .discipline-cell:nth-child(5n){ border-right:1px solid var(--gray-200); } }
@media(max-width:480px){ .disciplines-grid { grid-template-columns: 1fr; } .discipline-cell { border-right:none !important; } }

/* =============================================
   KENYA TECH / BLOG / RESEARCH
   ============================================= */
.kenya-stat-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; margin: 32px 0;
}
.kenya-stat {
  background: var(--brand-xdark);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}
.kenya-stat .num { font-size: 1.8rem; font-weight: 700; color: var(--accent-line); line-height: 1; }
.kenya-stat .lbl { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 6px; }

@media(max-width:640px){ .kenya-stat-row { grid-template-columns: repeat(2,1fr); } }

/* Blog card */
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-100); }
.blog-card-img {
  height: 180px;
  background: linear-gradient(135deg, var(--brand-xdark), var(--brand-dark));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.blog-card-img-pattern {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(0,181,200,0.05) 0, rgba(0,181,200,0.05) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
}
.blog-card-cat {
  position: absolute; top: 14px; left: 14px;
  padding: 3px 10px; background: var(--brand-primary);
  border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700;
  color: white; text-transform: uppercase; letter-spacing: 0.08em;
}
.blog-card-body { padding: 20px 22px; }
.blog-card-date { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; }
.blog-card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.blog-card-excerpt { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }

/* Village illustration blocks */
.village-map {
  background: var(--brand-xdark);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative; overflow: hidden;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.village-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,181,200,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,181,200,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.village-node {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--accent-line);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-line);
}
.village-node::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 24px; height: 24px;
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 50%;
  animation: pulse 2.5s infinite;
}
.village-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,181,200,0.4), transparent);
  transform-origin: left center;
}

/* Research incubation styles */
.research-pillar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--brand-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}
.research-pillar:hover { box-shadow: var(--shadow-md); }
.research-pillar-num {
  font-size: 2rem; font-weight: 700;
  color: var(--brand-100); line-height: 1;
  margin-bottom: 10px;
}
.research-pillar-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }

/* Bloomberg embed */
.bloomberg-embed-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.bloomberg-embed-wrap iframe {
  width: 100%; height: 480px; border: none; display: block;
}
.bloomberg-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: #cc0000;
  border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700;
  color: white; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bloomberg-label .live-dot {
  width: 6px; height: 6px; background: white;
  border-radius: 50%; animation: pulse 1.5s infinite;
}

@media(max-width:768px){ .bloomberg-embed-wrap iframe { height: 280px; } }

/* =============================================
   ADDITIONS: BLOG, ADMIN, NEW PAGES, LOGO
   ============================================= */

/* --- LOGO IMAGE --- */
.nav-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  transition: var(--transition);
}
.nav-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 20px;
}
.nav-logo-wrap img {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-logo-wrap:hover img { transform: scale(1.04); opacity: 0.85; }

/* --- DISCIPLINES GRID --- */
.discipline-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.discipline-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-100);
}
.discipline-card-header {
  background: var(--brand-xdark);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 3px solid var(--brand-primary);
}
.discipline-card-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.discipline-card-icon svg { width: 22px; height: 22px; stroke: var(--accent-line); fill: none; stroke-width: 1.75; }
.discipline-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.discipline-card-body { padding: 20px 24px; flex: 1; }
.discipline-card-body p { font-size: 0.855rem; color: var(--text-secondary); line-height: 1.7; }
.discipline-bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.discipline-bullet::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--brand-primary);
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

/* --- BLOG --- */
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--brand-100);
}
.blog-thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--brand-xdark), var(--brand-dark));
  overflow: hidden;
  position: relative;
}
.blog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-thumb-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--brand-xdark), var(--brand-dark));
  display: flex; align-items: center; justify-content: center;
}
.blog-thumb-placeholder svg { width: 40px; height: 40px; stroke: rgba(255,255,255,0.2); fill: none; stroke-width: 1; }
.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 0;
}
.blog-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.blog-date { font-size: 0.75rem; color: var(--text-muted); }
.blog-info { padding: 12px 20px 20px; flex: 1; }
.blog-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  transition: var(--transition);
}
.blog-card:hover .blog-title { color: var(--brand-primary); }
.blog-excerpt { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }
.blog-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-author { font-size: 0.75rem; color: var(--text-muted); }
.blog-readmore { font-size: 0.75rem; font-weight: 700; color: var(--brand-primary); }

/* Blog post page */
.blog-post-hero {
  padding: calc(var(--nav-height) + 48px) 0 48px;
  background: var(--gray-800);
  border-bottom: 3px solid var(--brand-primary);
}
.blog-post-hero h1 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.blog-post-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-primary);
}
.blog-post-body h2 { font-size: 1.4rem; font-weight: 700; margin: 40px 0 16px; color: var(--brand-dark); }
.blog-post-body h3 { font-size: 1.1rem; font-weight: 700; margin: 28px 0 12px; }
.blog-post-body p { margin-bottom: 18px; }
.blog-post-body ul { padding-left: 20px; margin-bottom: 18px; }
.blog-post-body ul li { margin-bottom: 6px; font-size: 0.95rem; }

/* --- ADMIN --- */
.admin-panel {
  min-height: 100vh;
  background: var(--gray-50);
  padding-top: var(--nav-height);
}
.admin-sidebar {
  width: 260px;
  background: var(--gray-800);
  min-height: calc(100vh - var(--nav-height));
  padding: 24px 0;
  flex-shrink: 0;
}
.admin-sidebar-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  padding: 8px 20px;
  margin-top: 16px;
}
.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.admin-sidebar-link:hover, .admin-sidebar-link.active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border-left-color: var(--brand-light);
}
.admin-sidebar-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; flex-shrink: 0; }
.admin-main { flex: 1; padding: 32px 40px; }
.admin-layout { display: flex; min-height: calc(100vh - var(--nav-height)); }
.admin-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.admin-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-section-title svg { width: 18px; height: 18px; stroke: var(--brand-primary); fill: none; stroke-width: 1.75; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text-secondary);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--gray-50); }
.admin-badge-pub { padding: 2px 8px; background: rgba(30,126,52,0.1); border: 1px solid rgba(30,126,52,0.25); border-radius: var(--radius-sm); font-size: 0.68rem; font-weight: 700; color: var(--success); }
.admin-badge-draft { padding: 2px 8px; background: rgba(201,106,0,0.1); border: 1px solid rgba(201,106,0,0.25); border-radius: var(--radius-sm); font-size: 0.68rem; font-weight: 700; color: var(--warning); }
.btn-admin-sm { padding: 5px 12px; font-size: 0.78rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid; cursor: pointer; transition: var(--transition); }
.btn-edit { color: var(--brand-primary); border-color: var(--brand-100); background: var(--brand-50); }
.btn-edit:hover { background: var(--brand-primary); color: var(--white); }
.btn-delete { color: var(--error); border-color: rgba(185,28,28,0.2); background: rgba(185,28,28,0.05); }
.btn-delete:hover { background: var(--error); color: var(--white); }

/* Login screen */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-xdark);
  padding: 24px;
}
.login-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px 44px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo img { height: 44px; margin: 0 auto; }

/* Image upload drop zone */
.upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--gray-50);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--brand-primary);
  background: var(--brand-50);
}
.upload-zone svg { width: 36px; height: 36px; stroke: var(--gray-400); fill: none; stroke-width: 1.5; margin: 0 auto 10px; display: block; }
.upload-zone p { font-size: 0.875rem; color: var(--text-muted); }
.upload-zone strong { color: var(--brand-primary); }
#upload-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-md);
  margin: 12px auto 0;
  display: none;
}

/* --- KENYA TECH PAGE --- */
.kenya-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0;
}
.kenya-stat {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}
.kenya-stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.kenya-stat-label { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }

/* --- POPNANTS VILLAGE --- */
.village-map {
  background: linear-gradient(135deg, var(--brand-xdark), #001820);
  border-radius: var(--radius-xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.village-map::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,181,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,181,200,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.connection-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(0,181,200,0.3);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin: 4px;
}
.connection-node .pulse-dot {
  width: 7px; height: 7px;
  background: var(--accent-line);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

/* --- RESEARCH PAGE --- */
.research-pillar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
}
.research-pillar:hover { box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.research-pillar-header {
  background: linear-gradient(135deg, var(--brand-xdark), var(--brand-dark));
  padding: 24px 28px;
  border-bottom: 3px solid var(--brand-primary);
}
.research-pillar-body { padding: 24px 28px; }
.program-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.program-badge.core { background: rgba(0,120,138,0.1); border: 1px solid rgba(0,120,138,0.25); color: var(--brand-primary); }
.program-badge.advanced { background: rgba(201,106,0,0.1); border: 1px solid rgba(201,106,0,0.25); color: var(--warning); }
.program-badge.fellowship { background: rgba(30,126,52,0.1); border: 1px solid rgba(30,126,52,0.25); color: var(--success); }

/* --- YOUTUBE EMBED --- */
.livestream-section {
  background: var(--gray-900);
  padding: 48px 0;
  border-top: 3px solid var(--brand-primary);
  border-bottom: 3px solid var(--brand-primary);
}
.livestream-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.1);
}
.livestream-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* RESPONSIVE additions */
@media (max-width: 900px) {
  .kenya-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kenya-stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { padding: 20px; }
}

/* =============================================
   LOGO BLENDING — Black background logo on white nav
   Uses mix-blend-mode + brightness filter to integrate
   ============================================= */
.nav-logo-img {
  height: 36px;
  width: auto;
  /* Black bg logo: invert to white, then colorize teal */
  filter: invert(1) sepia(1) saturate(3) hue-rotate(155deg) brightness(0.85);
  transition: var(--transition);
}
.nav-logo-img:hover {
  filter: invert(1) sepia(1) saturate(4) hue-rotate(155deg) brightness(1);
}
/* Footer version — no inversion needed, stays on dark bg */
.footer-logo-img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(155deg) brightness(0.9);
}

/* =============================================
   DISCIPLINE GRID — 10 domains
   ============================================= */
.discipline-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  cursor: default;
}
.discipline-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--dc-color, var(--brand-primary));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.discipline-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  transform: translateY(-4px);
  border-color: transparent;
}
.discipline-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--dc-color, var(--brand-primary)) 10%, white);
}
.discipline-icon svg {
  width: 24px; height: 24px;
  stroke: var(--dc-color, var(--brand-primary));
  fill: none; stroke-width: 1.6;
}
.discipline-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.discipline-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}
.discipline-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--dc-color, var(--brand-primary)) 12%, white);
  color: var(--dc-color, var(--brand-primary));
  border: 1px solid color-mix(in srgb, var(--dc-color, var(--brand-primary)) 25%, white);
  margin: 2px;
}
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media(max-width:1100px){ .discipline-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:700px){ .discipline-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .discipline-grid { grid-template-columns: 1fr; } }

/* =============================================
   BLOG SECTION
   ============================================= */
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-100);
}
.blog-card-header {
  padding: 24px 24px 0;
}
.blog-category {
  display: inline-flex;
  padding: 3px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.blog-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.blog-excerpt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 0 24px;
  flex: 1;
}
.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.blog-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.blog-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.blog-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.blog-label::before {
  content: '';
  width: 12px; height: 2px;
  background: var(--brand-primary);
}

/* =============================================
   KENYA SECTION
   ============================================= */
.kenya-stat {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  border-top: 3px solid var(--dc-color, var(--brand-primary));
  transition: var(--transition);
}
.kenya-stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.kenya-stat-num { font-size: 1.8rem; font-weight: 700; line-height: 1; margin-bottom: 6px; color: var(--dc-color, var(--brand-primary)); }
.kenya-stat-label { font-size: 0.78rem; color: var(--text-muted); }
.kenya-challenge {
  display: flex; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}
.kenya-challenge:hover { background: var(--gray-50); border-radius: var(--radius-md); }
.kenya-challenge:last-child { border-bottom: none; }
.challenge-dot {
  width: 8px; height: 8px; min-width: 8px;
  background: var(--brand-primary);
  border-radius: 50%;
  margin-top: 7px;
}

/* =============================================
   VILLAGE ILLUSTRATIONS
   ============================================= */
.village-node {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 50%;
  width: 90px; height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute;
  transition: var(--transition);
  cursor: default;
}
.village-node:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 6px var(--brand-50);
  z-index: 2;
}
.village-hub {
  background: var(--brand-primary);
  border: 3px solid var(--brand-dark);
  border-radius: 50%;
  width: 120px; height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.network-map {
  position: relative;
  width: 100%; height: 400px;
}

/* =============================================
   YOUTUBE LIVESTREAM
   ============================================= */
.livestream-widget {
  background: var(--gray-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--gray-700);
}
.livestream-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #0f0f0f;
  border-bottom: 1px solid #222;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: #c00;
  border-radius: var(--radius-sm);
  font-size: 0.68rem; font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.live-badge .dot { width: 5px; height: 5px; background: white; border-radius: 50%; animation: pulse 1.5s infinite; }
.livestream-title { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.livestream-widget iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}

/* =============================================
   RESEARCH PAGE
   ============================================= */
.research-pillar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  border-left: 4px solid var(--brand-primary);
  transition: var(--transition);
}
.research-pillar:hover { box-shadow: var(--shadow-md); }
.research-pillar h4 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--brand-dark); }
.research-pillar p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; }
.research-pillar .pill-num { font-size: 2rem; font-weight: 700; color: var(--brand-100); line-height: 1; margin-bottom: 10px; }

.cohort-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: var(--transition);
}
.cohort-card:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.cohort-card .phase { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-primary); margin-bottom: 6px; }
.cohort-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.cohort-card p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65; }

/* Impact number strips */
.impact-strip {
  background: var(--brand-xdark);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  text-align: center;
}
.impact-strip-item { border-right: 1px solid rgba(255,255,255,0.1); padding: 8px 16px; }
.impact-strip-item:last-child { border-right: none; }
.impact-num { font-size: 2rem; font-weight: 700; color: var(--accent-line); line-height: 1; margin-bottom: 6px; }
.impact-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
@media(max-width:600px){.impact-strip{grid-template-columns:repeat(2,1fr);}
  .impact-strip-item:nth-child(2){border-right:none;}
  .impact-strip-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,0.1);}
}

/* =============================================
   VILLAGE AFRICA MAP DIAGRAM
   ============================================= */
.africa-network {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
}
.country-node {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  text-align: center;
  position: relative;
  transition: var(--transition);
}
.country-node:hover { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--brand-50); }
.country-node.hub {
  background: var(--brand-xdark);
  border-color: var(--brand-dark);
  grid-column: 2;
}
.country-node.hub .cn-name { color: white; }
.country-node.hub .cn-role { color: rgba(255,255,255,0.55); }
.cn-flag { font-size: 1.4rem; margin-bottom: 4px; }
.cn-name { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.cn-role { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.cn-dot { width: 8px; height: 8px; background: var(--brand-light); border-radius: 50%; display: block; margin: 6px auto 0; animation: pulse 2s infinite; }
.country-node.hub .cn-dot { background: var(--accent-line); }


/* =============================================
   BLOOMBERG LIVESTREAM EMBED
   ============================================= */
.livestream-section {
  background: var(--gray-900);
  padding: 60px 0;
}
.livestream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.livestream-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(220,38,38,0.35);
  color: #f87171;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}
.livestream-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.livestream-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.livestream-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.livestream-note {
  margin-top: 16px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* =============================================
   ADMIN PANEL
   ============================================= */
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-900);
  padding: 40px 20px;
}
.admin-login-card {
  background: var(--gray-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.admin-logo {
  text-align: center;
  margin-bottom: 32px;
}
.admin-logo img {
  height: 40px;
  filter: brightness(0) invert(1) opacity(0.9);
  margin: 0 auto;
}
.admin-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 6px;
}
.admin-sub {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-bottom: 28px;
}
.admin-field {
  margin-bottom: 18px;
}
.admin-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.admin-field input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: white;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.admin-field input:focus {
  border-color: var(--brand-light);
  background: rgba(0,157,178,0.08);
}
.admin-btn {
  width: 100%;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.admin-btn:hover { background: var(--brand-dark); }
.admin-error {
  background: rgba(185,28,28,0.15);
  border: 1px solid rgba(185,28,28,0.3);
  color: #fca5a5;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.83rem;
  margin-top: 12px;
  display: none;
}
/* Admin Dashboard */
.admin-dashboard {
  min-height: 100vh;
  background: var(--gray-50);
  display: none;
}
.admin-topbar {
  background: var(--gray-900);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.admin-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
}
.admin-topbar-brand img {
  height: 28px;
  filter: brightness(0) invert(1);
}
.admin-topbar-actions { display: flex; gap: 12px; align-items: center; }
.admin-logout {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-logout:hover { background: rgba(185,28,28,0.2); color: #fca5a5; border-color: rgba(185,28,28,0.3); }
.admin-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px;
}
.admin-section-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.admin-section-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.admin-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 24px;
}
.admin-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.92rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
  background: var(--gray-50);
}
.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus {
  border-color: var(--brand-primary);
  background: white;
  box-shadow: 0 0 0 3px var(--brand-50);
}
.admin-form-field textarea { resize: vertical; min-height: 120px; }
.admin-form-field.full { grid-column: 1 / -1; }
.image-upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--gray-50);
}
.image-upload-zone:hover {
  border-color: var(--brand-primary);
  background: var(--brand-50);
}
.image-upload-zone.dragover {
  border-color: var(--brand-light);
  background: var(--brand-50);
  transform: scale(1.01);
}
.upload-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  stroke: var(--gray-400);
}
.upload-hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.upload-preview {
  display: none;
  margin-top: 16px;
}
.upload-preview img {
  max-height: 160px;
  border-radius: var(--radius-md);
  margin: 0 auto;
  border: 1px solid var(--gray-200);
}
.admin-submit {
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-submit:hover { background: var(--brand-dark); }
.admin-submit-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 10px;
}
.admin-submit-secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.admin-posts-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-posts-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.admin-posts-table td {
  padding: 14px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text-primary);
  vertical-align: middle;
}
.admin-posts-table tr:hover td { background: var(--gray-50); }
.post-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
}
.post-status.published { background: rgba(30,126,52,0.1); color: var(--success); }
.post-status.draft { background: rgba(201,106,0,0.1); color: var(--warning); }
.table-action {
  background: none;
  border: 1px solid var(--gray-200);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 4px;
}
.table-action:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.table-action.delete:hover { border-color: var(--error); color: var(--error); }
.admin-success-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  background: var(--success);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 9999;
}
.admin-success-toast.show { transform: translateX(0); }


/* ══════════════════════════════════════════════════════════════════
   POPNANTS v4 ADDITIONS
   Location pill, Settings FAB, Cookie banner, Mobile polish,
   Bold menu sections, Legal page helpers, Contact page helpers
   ══════════════════════════════════════════════════════════════════ */

/* ─── location pill in navbar ─── */
.loc-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10px;
  transition: var(--transition);
  cursor: default;
}
.loc-pill:hover { background: var(--brand-100); }
@media (max-width: 960px) { .loc-pill { display: none; } }

/* ─── mobile-nav section headings (bold + accent) ─── */
.mobile-nav-section,
.mnav-section {
  padding: 12px 20px 5px;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
}
.mobile-nav-section:first-child,
.mnav-section:first-child { border-top: none; margin-top: 0; }
.mnav-link {
  display: block;
  padding: 10px 20px;
  font-size: .9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
  text-decoration: none;
}
.mnav-link:hover { color: var(--brand-primary); background: var(--brand-50); }

/* mega-dropdown header bold */
.mega-header {
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 16px;
}

/* ─── settings FAB ─── */
.settings-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,120,138,.4);
  transition: var(--transition);
}
.settings-fab:hover { background: var(--brand-dark); transform: scale(1.08); }

/* ─── settings panel ─── */
.settings-panel {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 1299;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.settings-panel[hidden] { display: none; }
.sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-weight: 800;
  font-size: .88rem;
  color: var(--text-primary);
  position: sticky;
  top: 0;
}
.sp-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .2s;
}
.sp-close:hover { background: var(--gray-200); }
.sp-body { padding: 12px; }
.sp-section {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}
.sp-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 9px;
}
.sp-select, .sp-input {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: .83rem;
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  font-family: inherit;
  transition: border-color .2s;
}
.sp-select:focus, .sp-input:focus { border-color: var(--brand-primary); }
.sp-btn {
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .2s;
}
.sp-btn:hover { background: var(--brand-dark); }
.sp-btn-full {
  width: 100%;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.sp-btn-full:hover { background: var(--brand-dark); }
.sp-link {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: .74rem;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0 0;
  text-decoration: underline;
}
@media (max-width: 480px) {
  .settings-panel { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
}

/* ─── cookie banner ─── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--gray-900);
  display: none;
  opacity: 0;
  transition: opacity .4s;
  padding: 16px 24px;
}
.cookie-banner.visible { opacity: 1; }
.cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  min-width: 200px;
  font-size: .84rem;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  margin: 0;
}
.cookie-text strong { color: #fff; }
.cookie-text a { color: var(--brand-light); }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.c-btn {
  border-radius: var(--radius-md);
  padding: 9px 20px;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  border: none;
}
.c-solid  { background: var(--brand-primary); color: #fff; }
.c-solid:hover  { background: var(--brand-light); }
.c-outline { background: transparent; color: rgba(255,255,255,.7);
             border: 1px solid rgba(255,255,255,.3); }
.c-outline:hover { color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 600px) {
  .cookie-banner { padding: 14px 16px; }
  .cookie-text { font-size: .78rem; }
}

/* ─── contact page helpers ─── */
.td-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
  gap: 8px;
}
.td-row:last-child { border-bottom: none; }
.td-name { font-size: .875rem; font-weight: 600; }
.td-role { font-size: .72rem; color: var(--text-muted); }
.td-email { font-size: .78rem; color: var(--brand-primary); }
.td-email:hover { text-decoration: underline; }

/* ─── Google Translate UI suppression ─── */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }
.goog-te-combo { display: none !important; }

/* ─── improved mobile responsiveness ─── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  section { padding: 48px 0; }
  h1 { font-size: 1.85rem !important; }
  .section-title { font-size: 1.4rem; }
  .form-panel { padding: 18px; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .hero-actions { flex-direction: column; }
  .hero-actions > * { width: 100%; text-align: center; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .nav-actions .btn-nav-ghost { display: none; }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 1100px) {
  .nav-menu  { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-actions .btn-nav-ghost, .nav-actions .btn-nav-primary { display: none; }
}

/* nav-logo image sizing */
.nav-logo-img  { height: 36px; width: auto; object-fit: contain; }
.footer-logo-img { height: 40px; width: auto; object-fit: contain; }


/* ╔══════════════════════════════════════════════════════════╗
   ║   PAGE LOADER — heartbeat logo animation                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Overlay ─────────────────────────────────────────────── */
#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand-xdark);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              visibility 0.55s cubic-bezier(0.4,0,0.2,1);
}
#pageLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Subtle grid pattern behind loader */
#pageLoader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,181,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,181,200,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Logo wrap ───────────────────────────────────────────── */
.loader-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ── Heartbeat ring ──────────────────────────────────────── */
.loader-ring {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer pulsing ring */
.loader-ring::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,181,200,0.3);
  animation: ringExpand 1.8s ease-out infinite;
}
/* Second ring — offset */
.loader-ring::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(0,181,200,0.15);
  animation: ringExpand 1.8s ease-out 0.4s infinite;
}

/* Inner glow circle */
.loader-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(0,157,178,0.18) 0%,
    rgba(0,61,71,0.65) 60%,
    transparent 100%);
  border: 1px solid rgba(0,157,178,0.25);
  animation: circlePulse 1.8s ease-in-out infinite;
}

/* Logo image inside the ring */
.loader-img {
  position: relative;
  z-index: 3;
  width: 68px;
  height: auto;
  animation: heartbeat 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0,181,200,0.5));
}

/* ── Heartbeat keyframes ─────────────────────────────────── */
@keyframes heartbeat {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 12px rgba(0,181,200,0.4)); }
  14%  { transform: scale(1.18); filter: drop-shadow(0 0 24px rgba(0,181,200,0.75)); }
  28%  { transform: scale(1);    filter: drop-shadow(0 0 12px rgba(0,181,200,0.4)); }
  42%  { transform: scale(1.10); filter: drop-shadow(0 0 18px rgba(0,181,200,0.6)); }
  70%  { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(0,181,200,0.3)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 12px rgba(0,181,200,0.4)); }
}

@keyframes ringExpand {
  0%   { transform: scale(1);   opacity: 0.6; }
  60%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes circlePulse {
  0%, 100% { opacity: 0.7; }
  42%       { opacity: 1;   }
}

/* ── ECG / heartbeat line ────────────────────────────────── */
.loader-ecg {
  width: 180px;
  height: 36px;
  overflow: visible;
}
.loader-ecg path {
  fill: none;
  stroke: var(--brand-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: drawECG 1.8s ease-in-out infinite;
}

@keyframes drawECG {
  0%   { stroke-dashoffset: 560; opacity: 1; }
  70%  { stroke-dashoffset: 0;   opacity: 1; }
  85%  { stroke-dashoffset: 0;   opacity: 0.3; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* ── Brand text below ────────────────────────────────────── */
.loader-brand {
  position: relative;
  z-index: 2;
  text-align: center;
}
.loader-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin-bottom: 5px;
}
.loader-brand-sub {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ── Progress bar ────────────────────────────────────────── */
.loader-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.07);
  z-index: 2;
}
.loader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-light));
  transition: width 0.08s linear;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║   GLOBAL MOBILE & RESPONSIVE OVERHAUL                  ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Nav clock: hide on small screens ───────────────────── */
@media (max-width: 1100px) {
  #navClock { display: none !important; }
}

/* ── Hero sections ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-primary-content h1 { font-size: clamp(1.7rem, 5vw, 2.4rem) !important; }
  .hero-primary-content .lead { font-size: 0.95rem; }
  .hero-primary-content > div { max-width: 100% !important; }
  .hero-primary-content > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .page-hero h1 { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
  .page-hero .lead { font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .hero-primary-content > div > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Grid overrides ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Section padding ─────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --section-pad: 48px; }
  .container, .container-wide { padding: 0 16px; }
  section { padding: 48px 0; }
}

/* ── Cards & panels ──────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 20px 18px; }
  .prod-panel-body { padding: 24px 18px !important; }
  .prod-top-row { flex-direction: column !important; }
  .how-grid { grid-template-columns: 1fr !important; }
  .detail-cols-3, .detail-cols-2 { grid-template-columns: 1fr !important; }
  .stat-chip { padding: 12px 10px; }
}

/* ── Bloomberg / livestream section ─────────────────────── */
@media (max-width: 768px) {
  #livestream-section .grid-2 { grid-template-columns: 1fr !important; }
  #livestream-section .grid-2 > div:first-child { order: 2; }
  #livestream-section .grid-2 > div:last-child  { order: 1; }
  .livestream-widget iframe { height: 240px; }
  #livestream-section { max-height: 900px !important; }
  #livestream-toggle-bar .container { padding: 0 16px; }
}

/* ── Disciplines grid on homepage ───────────────────────── */
@media (max-width: 768px) {
  .discipline-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  .discipline-grid { grid-template-columns: 1fr !important; }
}

/* ── Stats bar ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .stats-bar .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; }
}

/* ── CTA band ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cta-band-content { padding: 0 !important; }
  .cta-band-content h2 { font-size: 1.4rem; }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .actions a { text-align: center; justify-content: center; }
}

/* ── Footer ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

/* ── Partners page ───────────────────────────────────────── */
@media (max-width: 768px) {
  .partner-card-body { padding: 22px 18px 16px !important; }
  .partner-tags { padding: 14px 18px !important; }
  .conf-grid { grid-template-columns: 1fr 1fr !important; }
  .join-banner { flex-direction: column !important; }
  .join-btns { width: 100%; }
  .join-btns a { width: 100%; text-align: center; justify-content: center; }
  .mission-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .conf-grid { grid-template-columns: 1fr !important; }
  .mission-band { padding: 32px 20px !important; }
  .mission-quote { font-size: 1rem !important; }
}

/* ── Products page ───────────────────────────────────────── */
@media (max-width: 768px) {
  .lock-inner { padding: 24px 18px !important; }
  .lock-overlay { padding: 32px 20px !important; }
  .lock-box { max-width: 100% !important; }
  .tech-pills { gap: 5px !important; }
  .tech-pill { font-size: 0.68rem !important; padding: 3px 9px !important; }
}

/* ── Blog page ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* ── Team page ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ── Contact page ────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .form-panel { padding: 22px 18px !important; }
}

/* ── Nav inner on mobile — keep logo + hamburger tidy ───── */
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px !important; }
  .nav-logo-img { height: 42px !important; }
  .nav-logo-wrap img { height: 42px !important; }
}

/* ── Prevent horizontal scroll ──────────────────────────── */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ── Images in content areas ─────────────────────────────── */
@media (max-width: 768px) {
  .prod-panel .grid-2 { grid-template-columns: 1fr !important; }
  .prod-panel .grid-2 > div:last-child { display: none; } /* hide mockup UI on mobile */
  .kenya-stat { padding: 14px 10px; }
  .kenya-stat .kenya-stat-num { font-size: 1.5rem !important; }
}

/* ── Overflow-safe tables ────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Pillar layout on mobile (partners philosophy) ──────── */
@media (max-width: 640px) {
  .pillar { flex-direction: column; }
  .pillar-icon { width: 36px; height: 36px; }
}

/* ── Dark mode adjustments ───────────────────────────────── */
[data-theme="dark"] #pageLoader { background: #060d0f; }
[data-theme="dark"] .loader-circle {
  background: radial-gradient(circle at 40% 40%,
    rgba(0,120,138,0.25) 0%, rgba(6,13,15,0.8) 60%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════
   POPNANTS v8 UPDATES
   Weather widget, Mobile info bar, Container constraints,
   Footer/Header within site content, Full mobile optimization
   ══════════════════════════════════════════════════════════════════ */

/* ─── Nav weather pill ─── */
#navWeather {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,120,138,0.08);
  border: 1px solid rgba(0,120,138,0.18);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 8px;
}
@media (max-width: 1100px) {
  #navWeather { display: none !important; }
}

/* ─── Inner page nav weather pill ─── */
#navWeather {
  transition: var(--transition);
}

/* ─── Mobile info bar (time + location + weather) ─── */
.mobile-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  gap: 8px;
}
.mobile-info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mobile-info-item span { font-size: 0.72rem; }

/* ─── Nav constrained to container width ─── */
.nav-inner {
  max-width: var(--container-max) !important;
  padding: 0 32px !important;
}

/* ─── Footer constrained to container width ─── */
footer .footer-main .container,
footer > .container {
  max-width: var(--container-max);
}
.footer-main { padding: 48px 0 36px; }
.footer-grid {
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
}

/* ─── Footer compact ─── */
.footer-brand-desc { font-size: 0.82rem; margin-bottom: 16px; }
.footer-main { padding: 40px 0 28px; }
.footer-bottom { padding: 14px 0; font-size: 0.75rem; }
.footer-col h5 { margin-bottom: 12px; }
.footer-link { padding: 3px 0; font-size: 0.82rem; }

/* ─── Livestream toggle bar contained ─── */
#livestream-toggle-bar .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ─── Hero actions mobile wrap ─── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ─── Discipline grid full mobile ─── */
@media (max-width: 600px) {
  .discipline-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .discipline-card { padding: 18px 14px !important; }
  .discipline-card h3 { font-size: 0.9rem; }
  .discipline-card p { font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .discipline-grid { grid-template-columns: 1fr !important; }
}

/* ─── Stats bar mobile ─── */
@media (max-width: 480px) {
  .stats-bar .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  .stat-item { padding: 16px 12px !important; }
  .stat-num { font-size: 1.4rem !important; }
  .stat-label { font-size: 0.68rem !important; }
}

/* ─── Hero mobile ─── */
@media (max-width: 640px) {
  .hero-primary-content { padding: 40px 0 !important; }
  .hero-primary-content h1 { font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important; line-height: 1.25 !important; }
  .hero-primary-content .lead { font-size: 0.9rem !important; }
  .hero-eyebrow { font-size: 0.65rem !important; }
  .hero-actions { gap: 8px !important; }
  .hero-actions a { font-size: 0.82rem !important; padding: 9px 16px !important; }
  .hero-primary-content > div > div:last-child {
    gap: 8px !important;
    margin-top: 28px !important;
  }
  .hero-primary-content > div > div:last-child > div {
    padding: 10px 14px !important;
  }
}

/* ─── Section padding mobile ─── */
@media (max-width: 640px) {
  section { padding: 40px 0 !important; }
  .container, .container-wide { padding: 0 16px !important; }
  :root { --section-pad: 40px; }
}

/* ─── Kenya stats mobile ─── */
@media (max-width: 480px) {
  .kenya-stat { padding: 14px !important; }
  .kenya-stat-num { font-size: 1.5rem !important; }
  .kenya-stat-label { font-size: 0.72rem !important; }
}

/* ─── Blog cards mobile ─── */
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .blog-card { padding: 0 !important; }
  .blog-card-header { padding: 16px 16px 0 !important; }
  .blog-excerpt { padding: 0 16px !important; font-size: 0.82rem !important; }
  .blog-meta { padding: 10px 16px 16px !important; }
}

/* ─── CTA band mobile ─── */
@media (max-width: 480px) {
  .cta-band { padding: 40px 0 !important; }
  .cta-band h2 { font-size: 1.3rem !important; }
  .cta-band p { font-size: 0.85rem !important; }
  .cta-band .actions { flex-direction: column !important; }
  .cta-band .actions a { text-align: center !important; justify-content: center !important; }
}

/* ─── Initiatives grid mobile ─── */
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .card { padding: 24px 20px !important; }
}

/* ─── Footer mobile ─── */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-main { padding: 32px 0 20px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .social-btn { width: 32px; height: 32px; }
}

/* ─── Mobile nav improvements ─── */
.mobile-nav {
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav a {
  display: block;
  padding: 11px 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}
.mobile-nav a:hover {
  color: var(--brand-primary);
  background: var(--brand-50);
}

/* ─── Nav inner gap management ─── */
@media (max-width: 1100px) {
  .nav-inner { gap: 0 !important; }
  .loc-pill { display: none !important; }
  #navClock { display: none !important; }
  #navWeather { display: none !important; }
}

/* ─── Hamburger visible on mobile ─── */
@media (max-width: 1100px) {
  .hamburger { display: flex !important; }
  .nav-menu { display: none !important; }
  .nav-actions { display: none !important; }
}

/* ─── Livestream section mobile ─── */
@media (max-width: 768px) {
  #livestream-section .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #livestream-section .grid-2 > div:first-child { order: 2; }
  #livestream-section .grid-2 > div:last-child  { order: 1; }
  #livestream-section { max-height: 1000px !important; }
  #livestream-toggle-bar .container { padding: 0 16px; }
}

/* ─── inner pages — components.js nav weather ─── */
.nav-weather-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,120,138,0.08);
  border: 1px solid rgba(0,120,138,0.18);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .nav-weather-pill { display: none !important; }
}

/* ─── Ensure page-wrap respects nav ─── */
.page-wrap { padding-top: var(--nav-height); overflow-x: hidden; }

/* ─── Fix overflow on small screens ─── */
body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* ─── Pill responsive sizes ─── */
@media (max-width: 1200px) {
  .loc-pill { font-size: 0.68rem; padding: 3px 9px; }
  #navClock { font-size: 0.68rem !important; padding: 3px 10px !important; }
  #navWeather { font-size: 0.68rem !important; padding: 3px 10px !important; margin-right: 6px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   POPNANTS v9 ADDITIONS
   TV frame livestream, Mobile nav header pills, 404 mobile,
   Products in mobile menu
   ══════════════════════════════════════════════════════════════════ */

/* ─── TV Frame & Glow ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   LIVESTREAM — full-bleed video, glow border, overlays
   ══════════════════════════════════════════════════════ */

/* Grid: on mobile video goes first (order), text below */
.livestream-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.livestream-grid > div:first-child  { order: 2; }  /* text */
.livestream-grid > div:last-child   { order: 1; }  /* video */

/* ── Outer frame (glow ring + clean screen) ── */
.tv-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.tv-glow-ring {
  position: absolute;
  inset: -12px;
  border-radius: 20px;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(0,181,200,0.25),
    0 0 24px 4px rgba(0,181,200,0.18),
    0 0 60px 10px rgba(0,120,138,0.12),
    inset 0 0 20px rgba(0,181,200,0.04);
  pointer-events: none;
  z-index: 0;
  animation: tvGlowPulse 3s ease-in-out infinite;
}
@keyframes tvGlowPulse {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(0,181,200,0.25),
      0 0 24px 4px rgba(0,181,200,0.18),
      0 0 60px 10px rgba(0,120,138,0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0,181,200,0.4),
      0 0 36px 8px rgba(0,181,200,0.28),
      0 0 80px 16px rgba(0,120,138,0.2);
  }
}

/* ── Clean screen shell ── */
.tv-screen-clean {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  /* enforce 16:9 */
  aspect-ratio: 16 / 9;
}

/* ── Full-bleed video wrap ── */
.tv-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

/* iframe injected by JS fills the entire shell */
#livestream-iframe-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#livestream-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* scaled slightly to crop YouTube chrome on edges */
  transform: scale(1.01);
  transform-origin: center center;
}

/* ── Transparent interaction blocker ──────────────────────────────
   Sits above the iframe — prevents YouTube hover/click UI
   from showing while still allowing the video to play audio. */
.tv-interaction-block {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
  background: transparent;
}

/* ── LIVE badge — top left, inside video ── */
.tv-live-badge-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  pointer-events: none;
}
.tv-live-badge-overlay .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: #cc0000;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.tv-live-badge-overlay .live-badge .dot {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

/* ── Popnants logo — bottom left, below badge ── */
.tv-logo-overlay-bl {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 20;
  pointer-events: none;
  background: transparent;
  border: 1px solid rgba(0,181,200,0.55);
  border-radius: 8px;
  padding: 5px 8px;
  box-shadow:
    0 0 10px rgba(0,181,200,0.25),
    inset 0 0 6px rgba(0,181,200,0.05);
}
.tv-logo-overlay-bl img {
  height: 26px;
  width: auto;
  display: block;
  filter: brightness(1.3) drop-shadow(0 0 5px rgba(0,181,200,0.6));
}

/* ── Responsive TV frame ── */
@media (max-width: 1024px) {
  .livestream-grid { gap: 32px; }
}
@media (max-width: 768px) {
  /* Stack: video full-width on top, text below */
  .livestream-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .livestream-grid > div:first-child { order: 2; }
  .livestream-grid > div:last-child  { order: 1; }

  /* Glow ring tighter */
  .tv-glow-ring { inset: -8px; border-radius: 16px; }
  .tv-screen-clean { border-radius: 10px; }

  .tv-logo-overlay-bl img { height: 20px; }
  .tv-logo-overlay-bl { bottom: 8px; left: 8px; padding: 4px 6px; }
  .tv-live-badge-overlay { top: 8px; left: 8px; }
  .tv-live-badge-overlay .live-badge { font-size: 0.62rem; padding: 3px 7px; }
}
@media (max-width: 480px) {
  .tv-glow-ring { inset: -5px; border-radius: 13px; }
  .tv-screen-clean { border-radius: 8px; }
  .tv-logo-overlay-bl img { height: 16px; }
  .tv-logo-overlay-bl { bottom: 6px; left: 6px; padding: 3px 5px; border-radius: 6px; }
  .tv-live-badge-overlay { top: 6px; left: 6px; }
  .tv-live-badge-overlay .live-badge { font-size: 0.58rem; padding: 2px 6px; gap: 3px; }
  .tv-live-badge-overlay .live-badge .dot { width: 4px; height: 4px; }
  /* Expand max-height for taller stacked layout */
  #livestream-section[style*="max-height: 900px"],
  #livestream-section[style*="max-height:900px"] { max-height: 1200px !important; }
}


.nav-mobile-pills {
  display: none; /* hidden by default, shown on mobile */
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: flex-end;
  margin-right: 8px;
  overflow: hidden;
}
.nav-mobile-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,120,138,0.08);
  border: 1px solid rgba(0,120,138,0.2);
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-mobile-pill span { font-size: 0.65rem; line-height: 1; }

/* Show pills on mobile, hide desktop pills */
@media (max-width: 1100px) {
  .nav-mobile-pills { display: flex !important; }
  .loc-pill         { display: none !important; }
  #navClock         { display: none !important; }
  #navWeather       { display: none !important; }
  /* Shrink logo a touch to give pills more room */
  .nav-logo-wrap img,
  .nav-logo img { height: 40px !important; }
}

/* On very small screens, hide location pill to save space */
@media (max-width: 420px) {
  .nav-mobile-pill:nth-child(2) { display: none; } /* hide location */
}
@media (max-width: 340px) {
  .nav-mobile-pill:nth-child(3) { display: none; } /* hide weather too */
}




/* ╔══════════════════════════════════════════════════════════════════╗
   ║  COMPREHENSIVE MOBILE OVERHAUL v9                               ║
   ║  Covers all 27 pages · 3 breakpoints · tighter desktop layout   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────
   GLOBAL TIGHTENING (all screen sizes)
   ───────────────────────────────────────────────────────────────── */
:root {
  --section-pad: 72px;
}
section { padding: var(--section-pad) 0; }
.page-hero { padding: 56px 0 52px; }

/* Tighter grid gaps globally */
.grid-2 { gap: 40px; }
.grid-3 { gap: 28px; }

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: ≤1024px (tablets)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-pad: 64px; }

  /* About — values cards */
  .about-values-grid { grid-template-columns: 1fr 1fr !important; }

  /* Products — how-grid 4col → 2col */
  .how-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Products — detail cols 3 → 2 */
  .detail-cols-3 { grid-template-columns: repeat(2,1fr) !important; }

  /* Research & Village — 3-col grids */
  .feature-grid  { grid-template-columns: repeat(2,1fr) !important; }
  .step-row      { grid-template-columns: repeat(2,1fr) !important; }
  .step-row::before { display: none !important; }

  /* Kenya — 5-col stats */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: ≤768px (large mobile / small tablet)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 52px; }
  .container, .container-wide { padding: 0 18px; }

  /* Page hero */
  .page-hero { padding: 44px 0 38px; }
  .page-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important; }
  .page-hero .lead { font-size: 0.92rem; max-width: 100% !important; }
  .breadcrumb { font-size: 0.75rem; }

  /* All 2-col and 3-col grids collapse */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 24px !important; }
  .grid-2[style*="gap:80px"], .grid-2[style*="gap:72px"],
  .grid-2[style*="gap:60px"] { gap: 32px !important; }

  /* Section titles */
  .section-title { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }

  /* ── Products page ────────────────────── */
  .prod-panel-body { padding: 28px 20px !important; }
  .prod-panel-bar  { height: 3px; }
  .prod-top-row    {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .prod-top-row > div[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  .prod-top-row > div[style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    width: 100% !important;
  }
  .how-grid        { grid-template-columns: repeat(2,1fr) !important; }
  .how-step        { padding: 16px 14px; }
  .lock-inner      { padding: 24px 18px !important; }
  .lock-overlay    { padding: 28px 20px !important; }
  .stat-chip       { padding: 14px 12px; }
  .stat-chip-num   { font-size: 1.3rem; }
  .tech-pills      { gap: 5px !important; }
  .tech-pill       { font-size: 0.68rem !important; padding: 3px 9px !important; }
  .detail-cols-3,
  .detail-cols-2   { grid-template-columns: 1fr !important; }

  /* Mockup UI panel — hide on mobile (col-2 of AI Simulator panel) */
  .prod-panel .grid-2 > div:last-child .prod-mock-ui { display: none; }

  /* ── About page ───────────────────────── */
  .about-mission-grid { grid-template-columns: 1fr !important; }

  /* ── Team page ────────────────────────── */
  .founders-grid   { grid-template-columns: 1fr !important; gap: 20px !important; max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; }
  .team-grid-3     { grid-template-columns: repeat(2,1fr) !important; }

  /* ── Journey / Timeline ───────────────── */
  .timeline::before { left: 20px; }
  .timeline-item    {
    display: block !important;
    padding-left: 56px !important;
    position: relative;
    margin-bottom: 28px;
  }
  .timeline-left  { display: none !important; }
  .timeline-year  { position: absolute; left: 0; top: 0; }
  .timeline-dot   { width: 38px !important; height: 38px !important; font-size: 0.6rem !important; }

  /* ── Village page ─────────────────────── */
  .feature-grid    { grid-template-columns: 1fr 1fr !important; }
  .step-row        { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .step-row::before { display: none !important; }
  .node-cluster    { justify-content: flex-start !important; }

  /* Dark section inline grids (3-col repeaters) */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* ── Research page ────────────────────── */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] { grid-template-columns: 1fr !important; }

  /* ── Kenya / Kenya-Tech ───────────────── */
  .kenya-stat-row  { grid-template-columns: repeat(2,1fr) !important; }
  .kenya-stat      { padding: 14px 10px; }
  .kenya-stat-num  { font-size: 1.5rem !important; }

  /* ── Partners page ────────────────────── */
  .conf-grid       { grid-template-columns: 1fr 1fr !important; }
  .join-banner     { flex-direction: column !important; align-items: stretch !important; }
  .join-btns       { width: 100%; }
  .join-btns a     { width: 100%; text-align: center; justify-content: center; }
  .mission-stats   { grid-template-columns: repeat(2,1fr) !important; }
  .partner-card-body { padding: 22px 16px 16px !important; }
  .partner-tags    { padding: 12px 16px !important; }

  /* ── Blog page ────────────────────────── */
  .blog-grid       { grid-template-columns: 1fr !important; }

  /* ── Contact page ─────────────────────── */
  .contact-grid    { grid-template-columns: 1fr !important; }
  .form-panel      { padding: 22px 18px !important; }
  .grid-2.contact-form-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Surveillance page ────────────────── */
  .surv-grid       { grid-template-columns: 1fr 1fr !important; }
  .surv-stat-row   { grid-template-columns: repeat(2,1fr) !important; }

  /* ── Agriculture / Health / Finance ──── */
  .ag-grid, .health-grid, .fin-grid { grid-template-columns: 1fr !important; }
  .impact-strip    { grid-template-columns: repeat(2,1fr) !important; }

  /* Inline flex items that need to stack */
  [style*="display:flex"][style*="gap:24px"]:not(.breadcrumb):not(.nav-inner):not(.form-group):not(.contact-block) {
    flex-wrap: wrap;
  }

  /* ── Stat/quote bars on dark backgrounds ─ */
  .stats-bar .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; }
  .stat-item:last-child { border-bottom: none !important; }

  /* Footer */
  .footer-grid     { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-main     { padding: 44px 0 28px !important; }
  .footer-bottom   { flex-direction: column; text-align: center; gap: 8px; }

  /* CTA band */
  .cta-band-content h2  { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  .cta-band .actions   { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-band .actions a { text-align: center; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: ≤480px (phones)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-pad: 40px; }
  .container, .container-wide { padding: 0 14px; }

  /* Page hero — tighter */
  .page-hero { padding: 36px 0 28px; }
  .page-hero h1 { font-size: clamp(1.25rem, 6.5vw, 1.7rem) !important; line-height: 1.2; }
  .page-hero .lead { font-size: 0.86rem; }
  .hero-eyebrow { font-size: 0.68rem; }
  .breadcrumb { flex-wrap: wrap; row-gap: 2px; }

  /* Section headings */
  .section-title  { font-size: clamp(1.15rem, 5.5vw, 1.5rem) !important; margin-bottom: 16px !important; }
  .section-eyebrow { font-size: 0.65rem; }
  .body-lg        { font-size: 0.9rem !important; }

  /* Force all grids to 1-col */
  .grid-2, .grid-3, .grid-4, .grid-5,
  .founders-grid, .team-grid-3,
  .feature-grid, .step-row,
  .how-grid, .conf-grid,
  .blog-grid, .surv-grid,
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Restore 2-col where it still makes sense at 480px */
  .stat-grid-2x,
  .kenya-stat-row,
  .impact-strip,
  .mission-stats,
  .stats-bar .stats-grid {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 10px !important;
  }

  /* Products */
  .prod-panel-body { padding: 20px 16px !important; }
  .how-step        { padding: 14px 12px; }
  .how-num         { width: 36px !important; height: 36px !important; font-size: 0.85rem !important; margin-bottom: 10px; }
  .lock-inner      { padding: 18px 14px !important; }
  .lock-overlay    { padding: 24px 16px !important; }
  .lock-box        { max-width: 100% !important; }
  .prod-peep       { font-size: 0.9rem !important; }
  .stat-chip       { padding: 10px 10px; }
  .stat-chip-num   { font-size: 1.15rem; }

  /* Team */
  .founders-grid   { max-width: 100% !important; }
  .team-member-card { padding: 20px 16px !important; }

  /* Partners */
  .mission-band    { padding: 28px 16px !important; }
  .mission-quote   { font-size: 0.95rem !important; }
  .conf-grid       { grid-template-columns: 1fr !important; }

  /* Research / Village table — scroll */
  .table-wrap      { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 0.8rem;
  }

  /* Village dark section 3-col cards */
  [style*="background:rgba(255,255,255,0.05)"][style*="border-radius"] { padding: 20px 16px !important; }

  /* Inline flex button groups */
  .hero-actions,
  [style*="display:flex"][style*="margin-top:28px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Kenya stat bar */
  .kenya-stat-row  { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .kenya-stat      { padding: 10px 8px; }
  .kenya-stat-num  { font-size: 1.25rem !important; }

  /* CTA band */
  .cta-band-content { padding: 0 !important; }
  .cta-band-content h2 { font-size: 1.2rem; }

  /* Footer */
  .footer-grid     { grid-template-columns: 1fr !important; gap: 22px !important; }
  .footer-main     { padding: 36px 0 24px !important; }
  .footer-bottom   { padding: 12px 0; }
  .footer-brand-desc { font-size: 0.8rem; }
  .footer-col h5   { font-size: 0.8rem; margin-bottom: 8px; }
  .footer-link     { font-size: 0.78rem; padding: 2px 0; }

  /* Contact page form grid (first/last name) — keep 2-col */
  .grid-2.contact-form-grid,
  .form-panel .grid-2 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Contact block */
  .contact-block   { padding: 12px 14px !important; }

  /* General cards/panels */
  .card            { padding: 18px 14px; }
  .form-panel      { padding: 18px 14px !important; border-radius: 12px !important; }

  /* Breadcrumb — smaller */
  .breadcrumb a, .breadcrumb span { font-size: 0.72rem; }

  /* About mission/vision blocks */
  [style*="padding:40px"] { padding: 24px 18px !important; }

  /* Navigation bottom overflow prevention */
  .mobile-nav { font-size: 0.9rem; }
  .mobile-nav a { padding: 11px 16px; }
  .mobile-nav-section { padding: 8px 16px 4px; font-size: 0.62rem; }
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: ≤360px (very small phones)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .container, .container-wide { padding: 0 10px; }
  :root { --section-pad: 32px; }

  .page-hero h1  { font-size: 1.2rem !important; }
  .section-title { font-size: 1.1rem !important; }

  .prod-panel-body { padding: 16px 12px !important; }
  .form-panel      { padding: 14px 12px !important; }

  /* Keep 2-col for small stats grids */
  .kenya-stat-row,
  .stats-bar .stats-grid,
  .impact-strip   { grid-template-columns: repeat(2,1fr) !important; }

  /* Nav pills — only show clock */
  .nav-mobile-pill:nth-child(2),
  .nav-mobile-pill:nth-child(3) { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   UTILITY: overflow protection (all sizes)
   ───────────────────────────────────────────────────────────────── */
html, body    { max-width: 100vw; overflow-x: hidden; }
.page-wrap    { overflow-x: hidden; }
img           { max-width: 100%; height: auto; }

/* Prevent inline min-width from breaking layout */
@media (max-width: 480px) {
  [style*="min-width"] { min-width: 0 !important; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MOBILE OVERHAUL v10 — Complete cross-page audit patch          ║
   ║  Targets every inline-style grid/layout issue on all 27 pages   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── GLOBAL SAFETY NETS ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* Prevent any inline min-width from breaking layout at 480px */
@media (max-width: 480px) {
  [style*="min-width:260px"],
  [style*="min-width: 260px"] { min-width: 0 !important; width: 100% !important; }
  [style*="min-width:240px"],
  [style*="min-width: 240px"] { min-width: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────
   ≤768px — LARGE MOBILE / SMALL TABLET
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── GLOBAL: all inline grid-template-columns collapse ──────── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* ── ABOUT — mission/vision panels ─────────────────────────── */
  [style*="padding:40px"] { padding: 22px 18px !important; }

  /* ── AI / EDUCATION — 3-col stat grid inside panels ────────── */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="text-align:center"] {
    grid-template-columns: repeat(3,1fr) !important; /* keep 3-col for small stat pills */
    gap: 8px !important;
  }

  /* ── PRODUCTS / PARTNERS — flex items with min-width ────────── */
  [style*="flex:1"][style*="min-width:260px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  [style*="display:grid"][style*="min-width:240px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── TEAM — skills table grid ───────────────────────────────── */
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] > * {
    padding: 4px 0 !important;
    border-bottom: 1px solid var(--gray-100);
  }

  /* ── VILLAGE dark section ────────────────────────────────────── */
  [style*="background:var(--gray-900)"][style*="padding:72px"] {
    padding: 44px 0 !important;
  }

  /* ── BLOG header flex ────────────────────────────────────────── */
  [style*="justify-content:space-between"][style*="align-items:flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ── KENYA / AGRICULTURE inline 1fr 1fr grids ───────────────── */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* ── RESEARCH 5-col grid ─────────────────────────────────────── */
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 12px !important;
  }

  /* ── COOKIE / LEGAL large padded sections ───────────────────── */
  [style*="padding:60px 0"] { padding: 36px 0 !important; }

  /* ── HERO primary padding tighter ───────────────────────────── */
  .hero-primary { padding-top: calc(var(--nav-height) + 48px) !important; padding-bottom: 48px !important; }
  .hero-primary h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }

  /* ── Discipline cards — 2-col on tablet ─────────────────────── */
  .discipline-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* ── Adventure / Health / Finance inline grids ──────────────── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ≤480px — PHONES
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── ALL grids → 1-col ───────────────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Restore 2-col for small stat tiles where content is short */
  .kenya-stat-row,
  .stats-bar .stats-grid,
  .impact-strip,
  .mission-stats,
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }

  /* ── ABOUT — value icon flex rows ──────────────────────────── */
  [style*="min-width:36px"] {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }
  [style*="padding:22px"][style*="display:flex"][style*="gap:16px"] {
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  /* ── AGRICULTURE / AUTOMATION / MEDIA icon cards ────────────── */
  [style*="width:44px"][style*="height:44px"][style*="border-radius"] {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  [style*="width:40px"][style*="height:40px"][style*="flex-shrink:0"] {
    width: 34px !important;
    height: 34px !important;
  }

  /* ── HERO stat pills row ─────────────────────────────────────── */
  .hero-primary [style*="display:flex"][style*="gap:16px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hero-primary [style*="padding:14px 20px"] {
    padding: 10px 12px !important;
    flex: 1 1 calc(50% - 4px) !important;
  }

  /* ── DISCIPLINE grid → 1-col on smallest screens ────────────── */
  .discipline-grid { grid-template-columns: 1fr !important; }

  /* ── RESEARCH 5-col → 2-col on phones ──────────────────────── */
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* ── TEAM skills table → readable on mobile ─────────────────── */
  [style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  /* ── PRODUCTS flex panels ────────────────────────────────────── */
  [style*="flex:1"][style*="min-width:260px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .prod-top-row { flex-direction: column !important; }
  [style*="display:grid"][style*="min-width:240px"] {
    min-width: 0 !important;
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* ── VILLAGE / KENYA dark section paddings ───────────────────── */
  [style*="background:var(--gray-900)"][style*="padding:72px"] {
    padding: 32px 0 !important;
  }
  [style*="padding:60px 0"] { padding: 28px 0 !important; }
  [style*="padding:40px"]   { padding: 18px 14px !important; }

  /* ── COOKIE-PREFS large section ─────────────────────────────── */
  [style*="max-width:760px"],
  [style*="max-width:780px"] { max-width: 100% !important; }

  /* ── AI / EDUCATION 3-col stat panel → 3-col still (numbers small) */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="text-align:center"][style*="gap:12px"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
  }

  /* ── BLOG card body spacing ──────────────────────────────────── */
  .blog-card { padding-bottom: 0; }
  .blog-card-body { padding: 14px 14px 16px !important; }

  /* ── CONTACT form ────────────────────────────────────────────── */
  .form-panel { padding: 16px 14px !important; }
  .grid-2.contact-form-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── JOURNEY timeline ─────────────────────────────────────────── */
  .timeline::before { left: 18px !important; }
  .timeline-item    { padding-left: 50px !important; }

  /* ── FOOTER ───────────────────────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-main { padding: 32px 0 20px !important; }

  /* ── Nav mobile ───────────────────────────────────────────────── */
  .mobile-nav a { padding: 10px 14px; font-size: 0.88rem; }

  /* ── ADVENTURE / HEALTH / FINANCE 1fr 1fr grids ──────────────── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── KENYA inline 1fr 1fr stat grid ─────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }

  /* CTA band */
  .cta-band { padding: 40px 0 !important; }
  .cta-band-content h2 { font-size: 1.2rem !important; }
  .cta-band .actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cta-band .actions a { text-align: center !important; justify-content: center !important; }
}

/* ─────────────────────────────────────────────────────────────────
   ≤360px — VERY SMALL PHONES
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .container, .container-wide { padding: 0 10px !important; }

  /* Hero */
  .hero-primary h1 { font-size: 1.3rem !important; line-height: 1.2 !important; }
  .hero-primary .lead { font-size: 0.85rem !important; }
  .hero-primary [style*="padding:14px 20px"] { padding: 8px 10px !important; font-size: 0.7rem !important; }

  /* Stat pills back to 2x2 */
  .hero-primary [style*="display:flex"][style*="gap:16px"] { gap: 6px !important; }

  /* Section */
  .section-title  { font-size: 1.1rem !important; }
  .page-hero h1   { font-size: 1.15rem !important; }
  .section-eyebrow { font-size: 0.62rem !important; }

  /* Discipline card */
  .discipline-card { padding: 16px !important; }
  .discipline-card h3 { font-size: 0.9rem !important; }
  .discipline-card p  { font-size: 0.78rem !important; }

  /* Kenya / Agriculture stats 2-col only */
  .kenya-stat-num { font-size: 1.15rem !important; }
  .kenya-stat     { padding: 8px 6px !important; }

  /* Blog */
  .blog-card-title  { font-size: 0.88rem !important; }
  .blog-card-excerpt { font-size: 0.78rem !important; }

  /* Footer minimal */
  .footer-link { font-size: 0.75rem !important; }
  .footer-col h5 { font-size: 0.78rem !important; }

  /* Mobile nav pills - only clock visible */
  .nav-mobile-pill:nth-child(2),
  .nav-mobile-pill:nth-child(3) { display: none !important; }
}

/* ─── PAGES WITH OVERFLOW TABLES — horizontal scroll wrapper ──── */
.table-wrap,
[style*="grid-template-columns:1.5fr 1fr 1.5fr"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ─── UNIVERSAL: prevent any element blowing out viewport ─────── */
@media (max-width: 768px) {
  .page-wrap * { max-width: 100%; }
  /* but don't constrain SVG icons */
  svg { max-width: none; }
}


/* ─── Horizontal scroll wrapper for wide tables ───────────────── */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}
.table-scroll-wrap > [style*="grid-template-columns:1.5fr"] {
  min-width: 480px;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  STREAM OFFLINE / ERROR SCREEN                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.stream-offline-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(ellipse at 50% 40%, #0a1a1e 0%, #050c0e 100%);
  padding: 24px 20px;
  overflow: hidden;
}

/* ── Scanline texture overlay ── */
.stream-offline-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,181,200,0.025) 3px,
    rgba(0,181,200,0.025) 4px
  );
  pointer-events: none;
  z-index: 0;
  animation: scanlineScroll 8s linear infinite;
}

@keyframes scanlineScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ── Noise flicker overlay ── */
.stream-offline-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
  z-index: 0;
  animation: noiseFlicker 0.15s steps(1) infinite;
  opacity: 0.6;
}
@keyframes noiseFlicker {
  0%   { background-position: 0 0; }
  20%  { background-position: -30px 10px; }
  40%  { background-position: 20px -15px; }
  60%  { background-position: -10px 25px; }
  80%  { background-position: 15px -5px; }
  100% { background-position: 0 0; }
}

/* ── Animation wrapper ── */
.offline-anim-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── TV SVG ── */
.offline-tv-svg {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(0,181,200,0.2));
  animation: tvShake 6s ease-in-out infinite;
}
@keyframes tvShake {
  0%,90%,100% { transform: translate(0,0) rotate(0deg); }
  91%  { transform: translate(-2px, 1px) rotate(-0.5deg); }
  92%  { transform: translate(2px, -1px) rotate(0.5deg); }
  93%  { transform: translate(-1px, 2px) rotate(-0.3deg); }
  94%  { transform: translate(1px, -2px) rotate(0.3deg); }
  95%  { transform: translate(0, 0) rotate(0deg); }
}

/* SVG element styles */
.tv-body {
  fill: #0e2428;
  stroke: rgba(0,181,200,0.5);
  stroke-width: 1.5;
}
.tv-screen-rect {
  fill: #050d10;
  stroke: rgba(0,181,200,0.2);
  stroke-width: 1;
}
.tv-static line {
  stroke: rgba(0,181,200,0.12);
  stroke-width: 1;
  animation: staticFlicker 0.12s steps(1) infinite;
}
@keyframes staticFlicker {
  0%   { stroke-opacity: 0.12; stroke-dasharray: none; }
  25%  { stroke-opacity: 0.3;  stroke-dasharray: 4 6; }
  50%  { stroke-opacity: 0.06; stroke-dasharray: 8 3; }
  75%  { stroke-opacity: 0.2;  stroke-dasharray: 2 8; }
  100% { stroke-opacity: 0.12; stroke-dasharray: none; }
}
.tv-x-mark line {
  stroke: rgba(0,181,200,0.55);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: xPulse 2s ease-in-out infinite;
}
@keyframes xPulse {
  0%,100% { stroke-opacity: 0.55; }
  50%     { stroke-opacity: 1;    filter: drop-shadow(0 0 4px rgba(0,181,200,0.8)); }
}
.tv-stand-part {
  fill: #0e2428;
  stroke: rgba(0,181,200,0.3);
  stroke-width: 1;
}
.cord-intact {
  fill: none;
  stroke: rgba(0,181,200,0.45);
  stroke-width: 2;
  stroke-linecap: round;
}
.cord-frayed-1,
.cord-frayed-2,
.cord-frayed-3 {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: frayDance 1.8s ease-in-out infinite;
}
.cord-frayed-1 { stroke: rgba(0,181,200,0.7);  animation-delay: 0s;    }
.cord-frayed-2 { stroke: rgba(255,220,50,0.6); animation-delay: 0.2s; }
.cord-frayed-3 { stroke: rgba(0,181,200,0.5);  animation-delay: 0.4s; }
@keyframes frayDance {
  0%,100% { transform: translate(0,0); opacity: 1; }
  33%     { transform: translate(1px,-1px); opacity: 0.6; }
  66%     { transform: translate(-1px,1px); opacity: 0.9; }
}

/* Sparks at break point */
.spark {
  fill: rgba(255,220,50,0.9);
  animation: sparkBurst 1.4s ease-out infinite;
}
.spark-1 { animation-delay: 0s;    }
.spark-2 { animation-delay: 0.35s; }
.spark-3 { animation-delay: 0.7s;  }
@keyframes sparkBurst {
  0%   { r: 0;   opacity: 1; transform: translate(0,0);  }
  40%  { r: 3.5; opacity: 0.9; }
  100% { r: 0.5; opacity: 0;   transform: translate(0,-6px); }
}

/* ── Popnants logo badge below TV ── */
.offline-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,181,200,0.4);
  border-radius: 8px;
  padding: 5px 10px;
  background: transparent;
  box-shadow: 0 0 12px rgba(0,181,200,0.15);
  animation: logoBadgePulse 3s ease-in-out infinite;
}
@keyframes logoBadgePulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,181,200,0.15); border-color: rgba(0,181,200,0.4); }
  50%     { box-shadow: 0 0 22px rgba(0,181,200,0.35); border-color: rgba(0,181,200,0.7); }
}
.offline-logo-img {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,181,200,0.5));
}

/* ── Message area ── */
.offline-msg-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.offline-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(0,181,200,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  animation: titleFlicker 4s ease-in-out infinite;
}
@keyframes titleFlicker {
  0%,95%,100% { opacity: 1; }
  96%  { opacity: 0.4; }
  97%  { opacity: 1;   }
  98%  { opacity: 0.6; }
  99%  { opacity: 1;   }
}
.offline-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
  line-height: 1.5;
  max-width: 220px;
}
.offline-refresh-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(0,181,200,0.55);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0,181,200,0.9);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}
.offline-refresh-btn:hover {
  background: rgba(0,181,200,0.1);
  border-color: rgba(0,181,200,0.9);
  color: #00b5c8;
  box-shadow: 0 0 12px rgba(0,181,200,0.25);
}
.offline-refresh-btn svg {
  flex-shrink: 0;
  animation: spinIcon 3s linear infinite;
  animation-play-state: paused;
}
.offline-refresh-btn:hover svg {
  animation-play-state: running;
}
@keyframes spinIcon {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive offline screen ── */
@media (max-width: 768px) {
  .offline-tv-svg { width: 100px; }
  .offline-title  { font-size: 0.8rem; }
  .offline-sub    { font-size: 0.68rem; max-width: 180px; }
}
@media (max-width: 480px) {
  .stream-offline-screen { gap: 12px; padding: 16px; }
  .offline-tv-svg { width: 80px; }
  .offline-title  { font-size: 0.75rem; }
  .offline-sub    { font-size: 0.64rem; max-width: 160px; }
  .offline-refresh-btn { font-size: 0.68rem; padding: 5px 13px; }
  .offline-logo-img { height: 18px; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  VIDEO OVERLAYS v2 — fullscreen btn, bottom-left stack          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Bottom-left overlay stack (LIVE above logo) ────────────────── */
.tv-bottom-left-stack {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Reset the old individual positioning — stack handles placement now */
.tv-live-badge-overlay {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
.tv-logo-overlay-bl {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
}

/* ── Fullscreen button — top right corner ────────────────────────── */
.tv-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 25;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 181, 200, 0.45);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tv-fullscreen-btn svg {
  width: 14px;
  height: 14px;
  stroke: rgba(0, 181, 200, 0.9);
  flex-shrink: 0;
  transition: stroke 0.18s ease;
}
.tv-fullscreen-btn:hover {
  background: rgba(0, 181, 200, 0.15);
  border-color: rgba(0, 181, 200, 0.85);
  box-shadow: 0 0 12px rgba(0, 181, 200, 0.35);
  transform: scale(1.08);
}
.tv-fullscreen-btn:hover svg {
  stroke: #00b5c8;
}
.tv-fullscreen-btn:active {
  transform: scale(0.96);
}

/* ── CSS-fallback fullscreen (when native API unavailable) ────────── */
body.tv-fs-active {
  overflow: hidden;
}
.tv-css-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  background: #000 !important;
}
/* In CSS fullscreen, aspect-ratio lock must be released */
.tv-css-fullscreen.tv-video-wrap {
  aspect-ratio: unset !important;
}
/* In CSS fullscreen the parent tv-screen-clean also needs override */
body.tv-fs-active .tv-screen-clean {
  aspect-ratio: unset !important;
  border-radius: 0 !important;
}
body.tv-fs-active .tv-glow-ring {
  display: none;
}

/* ── Native :fullscreen states ───────────────────────────────────── */
#tv-video-wrap:fullscreen,
#tv-video-wrap:-webkit-full-screen,
#tv-video-wrap:-moz-full-screen,
#tv-video-wrap:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  background: #000 !important;
}
#tv-video-wrap:fullscreen #livestream-iframe-wrap iframe,
#tv-video-wrap:-webkit-full-screen #livestream-iframe-wrap iframe {
  pointer-events: auto !important; /* allow interaction when fullscreen */
}

/* ── Responsive adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tv-fullscreen-btn { width: 28px; height: 28px; top: 8px; right: 8px; }
  .tv-fullscreen-btn svg { width: 12px; height: 12px; }
  .tv-bottom-left-stack { bottom: 8px; left: 8px; gap: 5px; }
}
@media (max-width: 480px) {
  .tv-fullscreen-btn { width: 26px; height: 26px; top: 6px; right: 6px; border-radius: 5px; }
  .tv-fullscreen-btn svg { width: 11px; height: 11px; }
  .tv-bottom-left-stack { bottom: 6px; left: 6px; gap: 4px; }
  .tv-logo-overlay-bl img { height: 16px; }
  .tv-live-badge-overlay .live-badge { font-size: 0.58rem; padding: 2px 6px; }
}