:root{
  /* Colors */
  --teal-600:#2DB89E; --teal-500:#3EBBBF; --teal-400:#11C0C5;
  --aqua-400:#46DCE5; --aqua-300:#74D9E6;
  --gray-700:#6B6B6B; --gray-400:#BDBDBD; --gray-350:#D8D8D8; --gray-300:#D7D7D7;
  --base-white:#FFFFFF; --base-black:#24262a;
  --brand-dark:#222834; --brand-darker:#181819;

  /* Typography */
  --font-latin:'Jost', 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --font-arabic:'Cairo', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, Tahoma, sans-serif;

  /* Type scale (px) */
  --fs-900:72; --fs-800:56; --fs-700:40; --fs-600:32; --fs-500:24; --fs-400:20;
  --fs-300:16; --fs-200:14; --fs-100:12;

  /* Line-height */
  --lh-tight:1.2; --lh-normal:1.45; --lh-ar:1.55;

  /* Spacing (8pt) */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:56px;

  /* Radii / stroke */
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --stroke-regular:2px;

  /* Shadows */
  --shadow-card:0 6px 18px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-latin);
  color:var(--base-black);
  margin:0; 
  background:#F5F7FA;
  line-height:var(--lh-normal);
}

/* Prevent horizontal overflow only */
html, body{ overflow-x:hidden }

/* Global sizing reset to avoid overflow from padding/margins */
*, *::before, *::after{ box-sizing:border-box }
img, svg, video{ max-width:100%; height:auto }

html[dir='rtl'] body{ font-family:var(--font-arabic); }

/* Layout */

.container{
  max-width:1200px;
  margin:32px auto;
  padding:40px 32px;
  background:#FFFFFF;
  border-radius:0;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
}

/* Top Controls */
.top-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:2px solid var(--teal-600);
}

.logo-section{
  display:flex;
  align-items:center;
  gap:16px;
  padding-left:8px; /* keep logo away from edge */
}

.main-logo{
  height:36px;
  width:auto;
}

/* Icon helpers */
.svg-icon{ width:16px; height:16px; display:inline-block; vertical-align:middle }

/* Header actions */
.header-actions{ display:flex; gap:8px; align-items:center; padding-right:8px }

/* Navigation */
.nav-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:24px; /* space before hero */
  border-bottom:0;
  align-items:stretch;
}

.nav-controls{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.icon-btn{
  background:var(--teal-600);
  color:white;
  border:none;
  border-radius:8px;
  padding:8px 12px;
  font-size:16px;
  cursor:pointer;
  transition:all 0.3s ease;
}

.icon-btn:hover{
  background:var(--teal-500);
  transform:translateY(-1px);
}

/* Metrics Table */
.metrics-table{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.metric-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#F8F9FA;
  border-radius:8px;
  border-left:4px solid var(--teal-600);
}

.metric-row:nth-child(even){
  background:#FFFFFF;
}

.metric-label{
  font-weight:600;
  color:var(--base-black);
}

/* Scenario Titles */
.scenario-title{
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:16px;
  font-weight:700;
  text-align:center;
}

.scenario-title.conservative{
  background:#E8F5E8;
  color:#2D5A2D;
  border-bottom:3px solid #4CAF50;
}

.scenario-title.moderate{
  background:#FFF3E0;
  color:#E65100;
  border-bottom:3px solid #FF9800;
}

.scenario-title.optimistic{
  background:#E3F2FD;
  color:#1565C0;
  border-bottom:3px solid #2196F3;
}

/* Navigation */
.nav-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:24px; /* space before hero */
  border-bottom:0;
}

.nav-tab{
  padding:10px 12px;
  height:64px;
  border:1px solid var(--gray-350);
  background:#FFFFFF;
  color:#1F2937; /* darker for readability */
  font-weight:600; /* semi-bold for readability */
  border-radius:12px;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  line-height:1.2;
  font-size:var(--fs-200); /* slightly smaller */
}

.nav-tab:hover{
  background:#F9FAFB;
}

.nav-tab:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
  border-color:var(--aqua-300);
}

.nav-tab.active{
  background:linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color:var(--base-white);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

.nav-tab.active .svg-icon{ filter:invert(1) brightness(2) }

/* Cards */
.card{
  background:#fff;
  border:1px solid var(--gray-350);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px;
  margin:0 8px 32px 8px;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-500), var(--aqua-400));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.card:hover::before{
  transform:scaleX(1);
}

.card-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.card-title{
  font-size:var(--fs-500);
  font-weight:700;
  margin:0;
  color:var(--base-black);
}

.card-icon{
  width:24px;
  height:24px;
  color:var(--teal-600);
}

/* Grid System */
.grid{
  display:grid;
  gap:32px;
}

.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-5{grid-template-columns:repeat(5,1fr)}

/* Hero Section */
.hero-section{
  background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1554048612-b6a4c4b5a0c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  color:var(--base-white);
  padding:80px 0;
  margin:8px -32px 40px -32px; /* keep spacing from nav */
  position:relative;
  overflow:hidden;
  border-radius:0;
}

.hero-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity:0.3;
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
}

.hero-title{
  font-size:64px;
  font-weight:600;
  line-height:var(--lh-tight);
  margin:0 0 20px;
  color:#FFFFFF;
  text-shadow:0 4px 8px rgba(0,0,0,0.3);
}

.hero-subtitle{
  font-size:36px;
  margin:0 0 32px;
  color:#FFFFFF;
  font-weight:4`00;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:32px;
  margin-top:40px;
  padding:0 16px;
}

.hero-stat{
  text-align:center;
  padding:24px 20px;
  background:rgba(0,0,0,0.4);
  border-radius:12px;
  backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,0.3);
  box-shadow:0 4px 6px rgba(0,0,0,0.2);
  margin:0 8px;
}

.hero-stat-value{
  font-size:36px;
  font-weight:800;
  margin-bottom:8px;
  display:block;
  color:#FFFFFF;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.hero-stat-label{
  font-size:14px;
  color:#FFFFFF;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

/* Floating Elements */
.floating-element{
  position:absolute;
  animation:float 6s ease-in-out infinite;
}

.floating-element:nth-child(2){
  animation-delay:-2s;
}

.floating-element:nth-child(3){
  animation-delay:-4s;
}

@keyframes float{
  0%, 100%{ transform:translateY(0px) rotate(0deg); }
  50%{ transform:translateY(-20px) rotate(5deg); }
}

/* Typography */
h1{
  font-size:48px;
  font-weight:800;
  line-height:var(--lh-tight);
  margin:0 0 20px;
  color:#0B0E11;
}

h2{
  font-size:36px;
  font-weight:700;
  line-height:var(--lh-tight);
  margin:0 0 16px;
  color:#0B0E11;
}

h3{
  font-size:28px;
  font-weight:600;
  line-height:var(--lh-tight);
  margin:0 0 12px;
  color:#0B0E11;
}

h4{
  font-size:20px;
  font-weight:600;
  line-height:var(--lh-tight);
  margin:0 0 10px;
  color:#0B0E11;
}

p{
  font-size:18px;
  line-height:var(--lh-normal);
  margin:0 0 20px;
  color:#0B0E11;
}

.lead{
  font-size:22px;
  color:#4A5568;
  margin:0 0 32px;
  font-weight:500;
}

/* Buttons */
.btn-primary{
  background:var(--teal-600);
  color:var(--base-white);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  padding:12px 20px;
  font-weight:600;
  font-size:var(--fs-300);
  cursor:pointer;
  transition:all 0.2s ease;
  text-decoration:none;
  display:inline-block;
}

.btn-primary:hover{
  background:var(--teal-500);
  transform:translateY(-1px);
  box-shadow:var(--shadow-card);
}

.btn-outline{
  background:transparent;
  color:var(--teal-600);
  border:1.5px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:12px 20px;
  font-weight:600;
  font-size:var(--fs-300);
  cursor:pointer;
  transition:all 0.2s ease;
  text-decoration:none;
  display:inline-block;
}

.btn-outline:hover{
  background:var(--teal-600);
  color:var(--base-white);
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
}

.table th,
.table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--gray-350);
}

.table th{
  background:var(--gray-300);
  font-weight:600;
  color:var(--base-black);
}

.table tr:hover{
  background:var(--aqua-300);
}

/* Stats Cards - Much More Readable */
.stat-card{
  background:#FFFFFF;
  border:2px solid #E2E8F0;
  border-radius:12px;
  padding:32px 24px;
  text-align:center;
  position:relative;
  transition:all 0.3s ease;
  box-shadow:0 4px 6px rgba(0,0,0,0.05);
  margin:0 8px 16px 8px;
}

.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  border-color:#2DB89E;
}

.stat-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #2DB89E, #3EBBBF);
  border-radius:12px 12px 0 0;
}

.stat-value{
  font-size:48px;
  font-weight:800;
  line-height:1;
  margin:0 0 12px;
  color:#1A202C;
  letter-spacing:-0.02em;
}

.stat-label{
  font-size:16px;
  font-weight:600;
  margin:0 0 8px;
  color:#4A5568;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.stat-change{
  font-size:14px;
  font-weight:600;
  margin-top:8px;
  padding:6px 12px;
  border-radius:20px;
  display:inline-block;
}

.stat-change.positive{
  background:#E6FFFA;
  color:#065F46;
  border:1px solid #A7F3D0;
}

.stat-change.negative{
  background:#FEF2F2;
  color:#991B1B;
  border:1px solid #FECACA;
}

/* Charts */
.chart-container{
  background:var(--base-white);
  border-radius:var(--radius-md);
  padding:24px;
  margin:16px 0;
  min-height:300px;
}

.chart-placeholder{
  height:300px;
  background:linear-gradient(45deg, var(--aqua-300), var(--teal-400));
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--base-white);
  font-weight:600;
  font-size:var(--fs-400);
}

/* Progress Bars */
.progress-bar{
  width:100%;
  height:8px;
  background:var(--gray-350);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin:8px 0;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-500));
  border-radius:var(--radius-sm);
  transition:width 0.3s ease;
}

/* Badges */
.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  background:var(--gray-350);
  font-size:var(--fs-200);
  font-weight:500;
  color:var(--base-black);
}

.badge.primary{
  background:var(--teal-600);
  color:var(--base-white);
}

.badge.success{
  background:#2EA043;
  color:var(--base-white);
}

.badge.warning{
  background:#F79009;
  color:var(--base-white);
}

.badge.danger{
  background:#DA362B;
  color:var(--base-white);
}

/* Timeline */
.timeline{
  position:relative;
  padding-left:32px;
}

.timeline::before{
  content:'';
  position:absolute;
  left:16px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--teal-600);
}

.timeline-item{
  position:relative;
  margin-bottom:24px;
}

.timeline-item::before{
  content:'';
  position:absolute;
  left:-24px;
  top:8px;
  width:12px;
  height:12px;
  background:var(--teal-600);
  border-radius:50%;
  border:3px solid var(--base-white);
  box-shadow:0 0 0 2px var(--teal-600);
}

.timeline-content{
  background:var(--base-white);
  border:1px solid var(--gray-350);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow:var(--shadow-card);
}

.timeline-date{
  font-size:var(--fs-200);
  color:var(--gray-700);
  font-weight:500;
}

.timeline-title{
  font-size:var(--fs-400);
  font-weight:600;
  margin:4px 0 8px;
  color:var(--base-black);
}

/* Additional Visual Enhancements */
.pulse-animation{
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}

.glow-effect{
  box-shadow:0 0 20px rgba(45,184,158,0.3);
}

.text-gradient{
  background:linear-gradient(135deg, var(--teal-600), var(--teal-500));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Stat card text styling - clean and readable */
.stat-card .stat-value{
  color:#1A202C;
  font-weight:800;
}

.stat-card .stat-label{
  color:#4A5568;
  font-weight:600;
}

.stat-card .stat-change{
  font-weight:600;
}

/* Go4Rent Branding Elements */
.card-icon{
  width:24px;
  height:24px;
  color:var(--teal-600);
  filter:drop-shadow(0 2px 4px rgba(45,184,158,0.2));
}

.brand-accent{
  color:var(--teal-600);
  font-weight:600;
}

.brand-dark-bg{
  background:var(--brand-dark);
  color:#FFFFFF;
}

.brand-darker-bg{
  background:var(--brand-darker);
  color:#FFFFFF;
}

/* Tech Stack Styling */
.tech-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tech-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#F8FAFC;
  border-radius:8px;
  border:1px solid #E2E8F0;
  transition:all 0.2s ease;
}

.tech-item:hover{
  background:#EDF2F7;
  border-color:#2DB89E;
  transform:translateX(4px);
}

.tech-icon{
  width:32px;
  height:32px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.5px;
  flex-shrink:0;
}

.tech-logo{
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:4px;
}

/* Masked brand icon that inherits text color */
.brand-icon{
  width:32px;
  height:32px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
  border-radius:4px;
  flex-shrink:0;
}

.tech-item span{ font-weight:600; color:#2D3748; font-size:14px; }
.tech-item .brand-icon{ color:#2D3748; }

[data-theme='dark'] .tech-item span{ color:#A0AEC0; }
[data-theme='dark'] .tech-item .brand-icon{ color:#A0AEC0; }

.tech-item span{
  font-weight:600;
  color:#2D3748;
  font-size:14px;
}

/* Responsive Design */
@media (max-width: 768px){
  .container{
    margin:8px;
    padding:16px 12px;
    border-radius:0;
  }
  
  .top-controls{
    justify-content:space-between;
    text-align:inherit;
    align-items:center;
  }
  
  .nav-tabs{
    position:static;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    overflow:visible;
    white-space:normal;
    justify-content:stretch;
  }
  
  .nav-controls{
    margin-left:0;
    margin-top:12px;
    justify-content:center;
  }
  
  .main-logo{
    height:32px;
  }
  
  .control-buttons{
    gap:6px;
  }
  
  .icon-btn{
    padding:6px 10px;
    font-size:14px;
  }
  
  .hero-section{
    margin:8px -20px 32px -20px; /* keep spacing from nav */
    padding:40px 0;
    border-radius:0;
  }
  
  .hero-title{ font-size:var(--fs-600); }
  
  .hero-subtitle{
    font-size:var(--fs-400);
  }
  
  .hero-stats{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    padding:0 8px;
  }
  
  .hero-stat{
    margin:0 4px;
    padding:20px 16px;
  }
  .hero-stat-value{ font-size:28px; }
  .hero-stat-label{ font-size:12px; }
  
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .grid.cols-5{
    grid-template-columns:1fr;
    gap:24px;
  }

  .table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .table th,
  .table td{
    padding:8px 10px;
    font-size:var(--fs-200);
  }
  .metric-row{ padding:10px 12px; }

  .chart-container{
    min-height:240px;
    padding:16px;
  }
  
  .card{
    margin:0 4px 24px 4px;
    padding:16px;
  }
  
  .stat-card{
    margin:0 4px 16px 4px;
    padding:20px 16px;
  }
  
  .nav-tabs{ grid-template-columns:repeat(3, 1fr); }
  
  .nav-tab{
    font-size:var(--fs-200);
    padding:8px 8px;
    height:62px;
  }

/* Ensure no leftover icons inside nav tabs */
.nav-tabs .svg-icon{ display:none }
  .nav-controls{ display:none; }
  
  h1{ font-size:var(--fs-600); }
  
  h2{ font-size:var(--fs-400); }
  p{ font-size:var(--fs-300); }
  .lead{ font-size:18px; }
  
  .stat-value{ font-size:var(--fs-600); }
}

/* Dark Theme */
[data-theme='dark'] body{
  background:#0B0E11;
  color:#E6E9EE;
}

[data-theme='dark'] .container{
  background:#12181D;
}

[data-theme='dark'] .scenario-title.conservative{
  background:#1B5E20;
  color:#A5D6A7;
}

[data-theme='dark'] .scenario-title.moderate{
  background:#E65100;
  color:#FFCC02;
}

[data-theme='dark'] .scenario-title.optimistic{
  background:#0D47A1;
  color:#90CAF9;
}

[data-theme='dark'] .top-controls{
  border-bottom-color:var(--teal-600);
}

[data-theme='dark'] .logo-text{
  color:var(--teal-600);
}

[data-theme='dark'] .metric-row{
  background:#1E232A;
}

[data-theme='dark'] .metric-row:nth-child(even){
  background:#24303A;
}

[data-theme='dark'] .metric-label{
  color:#D0D6DC;
}

[data-theme='dark'] .metric-value{
  color:var(--teal-600);
}

[data-theme='dark'] .icon-btn{
  background:var(--teal-600);
  color:white;
}

[data-theme='dark'] .icon-btn:hover{
  background:var(--teal-500);
}

[data-theme='dark'] .header{
  background:#0F1419;
  border-bottom-color:#1E232A;
}

[data-theme='dark'] .card{
  background:#12181D;
  border-color:#2A3340; /* slightly lighter than before */
  box-shadow:none;
}

[data-theme='dark'] .nav-tab{
  background:#1E232A; /* dark grey */
  color:#A0AEC0;      /* light grey like TOTAL labels */
  border-color:#2A3340;
}

[data-theme='dark'] .nav-tab:hover{
  background:#24303A; /* slightly lighter on hover */
  color:#FFFFFF;
  border-color:#3A4654;
}

[data-theme='dark'] .nav-tab.active{
  /* Match other items; only slightly lighter bg */
  background:#24303A;   /* a bit lighter than #1E232A */
  color:#A0AEC0;        /* same text color as others */
  border-color:#3A4654; /* slightly lighter border */
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

[data-theme='dark'] .table th{
  background:#24303A;
  color:#D3DEE8;
}

[data-theme='dark'] .table th,
[data-theme='dark'] .table td{
  border-bottom-color:#2A3340; /* slightly lighter */
}

[data-theme='dark'] .table tr:hover{
  background:#12383E;
}

[data-theme='dark'] .stat-card{
  background:var(--brand-dark);
  border-color:#334155; /* slightly lighter */
}

[data-theme='dark'] .stat-card:hover{
  border-color:#2DB89E;
}

[data-theme='dark'] .stat-card .stat-value{
  color:#FFFFFF;
  font-weight:800;
}

[data-theme='dark'] .stat-card .stat-label{
  color:#A0AEC0;
  font-weight:600;
}

[data-theme='dark'] .stat-change.positive{
  background:#064E3B;
  color:#6EE7B7;
  border-color:#10B981;
}

[data-theme='dark'] .stat-change.negative{
  background:#7F1D1D;
  color:#FCA5A5;
  border-color:#EF4444;
}

[data-theme='dark'] .kv .k{
  color:#A0AEC0;
  font-weight:600;
}

[data-theme='dark'] .kv .v{
  color:#FFFFFF;
  font-weight:700;
}

[data-theme='dark'] .timeline-content{
  background:#12181D;
  border-color:#2A3340; /* slightly lighter */
}

[data-theme='dark'] .timeline-date{
  color:#A0AEC0;
  font-weight:500;
}

[data-theme='dark'] .timeline-title{
  color:#FFFFFF;
  font-weight:600;
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4{
  color:#FFFFFF;
}

[data-theme='dark'] p{
  color:#E2E8F0;
}

[data-theme='dark'] .lead{
  color:#A0AEC0;
  font-weight:500;
}

[data-theme='dark'] .badge{
  background:#24303A;
  color:#D3DEE8;
}

[data-theme='dark'] .badge.primary{
  background:var(--teal-600);
  color:var(--base-white);
}

[data-theme='dark'] .badge.success{
  background:#2EA043;
  color:var(--base-white);
}

[data-theme='dark'] .badge.warning{
  background:#F79009;
  color:var(--base-white);
}

[data-theme='dark'] .badge.danger{
  background:#DA362B;
  color:var(--base-white);
}

[data-theme='dark'] .chart-container{
  background:#12181D;
  border-color:#1E232A;
}

[data-theme='dark'] .progress-bar{
  background:#24303A;
}

[data-theme='dark'] .progress-fill{
  background:linear-gradient(90deg, var(--teal-600), var(--teal-500));
}

/* Section Management */
.section{
  display:none;
}

.section.active{
  display:block;
}

/* Controls */
.controls{
  display:flex;
  gap:8px;
  align-items:center;
}

.controls button{
  padding:6px 10px;
  border:1px solid var(--gray-350);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:var(--fs-200);
  transition:all 0.2s ease;
}

.controls button:hover{
  background:var(--aqua-300);
}

/* Key-Value Pairs */
.kv{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}

.kv .k{
  color:#4A5568;
  min-width:140px;
  font-weight:600;
  font-size:var(--fs-300);
}

.kv .v{
  font-weight:700;
  color:#0B0E11;
  font-size:var(--fs-300);
}

/* Chart Error */
.chart-error{
  background:var(--gray-350);
  color:var(--base-black);
  padding:16px;
  border-radius:var(--radius-sm);
  text-align:center;
  margin:16px 0;
}

/* Tooltip */
.tooltip{
  position:absolute;
  background:var(--base-black);
  color:var(--base-white);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-200);
  z-index:1000;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s ease;
}

.tooltip.show{
  opacity:1;
}

/* Loading States */
.loading{
  opacity:0.5;
  pointer-events:none;
}

/* Print Styles */
@media print{
  .header,
  .nav-tabs{
    display:none;
  }
  
  .container{
    max-width:none;
    padding:0;
  }
  
  .card{
    box-shadow:none;
    border:1px solid #ccc;
    break-inside:avoid;
  }
  
  .stat-card{
    break-inside:avoid;
  }
  
  h1, h2, h3, h4{
    break-after:avoid;
  }
  
  .page-break{
    page-break-before:always;
  }
  
  .section{
    display:block !important;
  }
}

/* PDF layout when server sets data-pdf="1" */
[data-pdf='1'] .header-actions,
[data-pdf='1'] .nav-tabs{ display:none !important }

[data-pdf='1'] .container{ box-shadow:none }
[data-pdf='1'] .card,
[data-pdf='1'] .stat-card{ break-inside:avoid-page; page-break-inside:avoid }
[data-pdf='1'] .section{ display:block !important; }
[data-pdf='1'] .section + .section{ break-before:auto; page-break-before:auto }
[data-pdf='1'] .hero-section{
  background-attachment:initial;
  break-after:auto; page-break-after:auto;
  margin-bottom:6mm;
}
[data-pdf='1'] .pdf-hero-stats{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:16px !important;
  margin:16px 0 24px 0 !important;
  break-inside:avoid-page;
}

/* Compact grids and cards for PDF fit */
[data-pdf='1'] .grid{ gap:10px }
[data-pdf='1'] .chart-container{ min-height:220px; padding:12px }
[data-pdf='1'] .card{ padding:16px }
[data-pdf='1'] .stat-card{ padding:16px 12px }
[data-pdf='1'] .stat-card .stat-value{ font-size:28px }
[data-pdf='1'] .stat-card .stat-label{ font-size:13px }

/* Financial: three-key metrics on one row */
[data-pdf='1'] #financial .rev-highlights{ grid-template-columns:repeat(3, 1fr) !important }

/* Ensure 2-up and 3-up rows stay together */
[data-pdf='1'] .grid.cols-2{ grid-template-columns:repeat(2, 1fr) }
[data-pdf='1'] .grid.cols-3{ grid-template-columns:repeat(3, 1fr) }
[data-pdf='1'] .grid.cols-4{ grid-template-columns:repeat(4, 1fr) }
[data-pdf='1'] .grid.cols-5{ grid-template-columns:repeat(5, 1fr) }
[data-pdf='1'] #financial .grid.cols-2{ break-inside:avoid-page; page-break-inside:avoid }
[data-pdf='1'] #market .grid.cols-4{ break-inside:avoid-page; page-break-inside:avoid }
[data-pdf='1'] #market .grid.cols-2{ break-inside:avoid-page; page-break-inside:avoid }
[data-pdf='1'] #market .grid.cols-5{ break-inside:avoid-page; page-break-inside:avoid }

/* PDF Cover + TOC */
[data-pdf='1'] .pdf-cover{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding:35mm 10mm 20mm; break-after:page; page-break-after:always;
}
[data-pdf='1'] .pdf-cover-logo{ width:140px; height:auto; margin-bottom:16px }
[data-pdf='1'] .pdf-cover-title{ font-size:42px; font-weight:800; margin:0 0 8px }
[data-pdf='1'] .pdf-cover-subtitle{ font-size:18px; opacity:0.9; margin:0 0 20px }
[data-pdf='1'] .pdf-cover-date{ font-size:14px; opacity:0.8 }

[data-theme='dark'][data-pdf='1'] .pdf-cover{ background:#0F1419; color:#E6E9EE }

[data-pdf='1'] .pdf-toc{ padding:16mm 12mm; break-after:page; page-break-after:always }
[data-pdf='1'] .pdf-toc h2{ margin:0 0 8mm; font-size:24px }
[data-pdf='1'] .pdf-toc ol{ margin:0; padding-left:6mm; }
[data-pdf='1'] .pdf-toc li{ margin:0 0 4mm; font-size:14px }
[data-pdf='1'] .pdf-toc a{ color:inherit; text-decoration:none }
[data-pdf='1'] .pdf-toc a:hover{ text-decoration:underline }

/* Nudge titles away from page edge */
[data-pdf='1'] section > h1{ margin-top:8mm }
[data-theme='dark'] .card-icon,
[data-theme='dark'] .tech-logo{
  filter: invert(80%) sepia(6%) saturate(120%) hue-rotate(180deg) brightness(95%) contrast(90%);
}