/* ==========================================================================
   MADAREK ADVANCED CONTRACTING - FUTURISTIC APPLE-CALIBER DESIGN SYSTEM
   Bilingual (LTR/RTL), Dark Titanium, Deep Obsidian, Glassmorphism
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Readex+Pro:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Apple Space Black & Titanium with Madarek Energy Accents */
  --bg-primary: #060709;
  --bg-secondary: #0c0e14;
  --bg-tertiary: #131722;
  --bg-card: rgba(18, 22, 34, 0.65);
  --bg-card-hover: rgba(26, 32, 48, 0.85);
  --bg-glass: rgba(10, 12, 18, 0.72);
  --bg-glass-card: rgba(255, 255, 255, 0.03);

  /* Accents */
  --accent-cyan: #00e5ff;
  --accent-cyan-dim: rgba(0, 229, 255, 0.12);
  --accent-blue: #0071e3;
  --accent-blue-glow: rgba(0, 229, 255, 0.28);
  --accent-red: #ff3b30;
  --accent-red-glow: rgba(255, 59, 48, 0.25);
  --accent-emerald: #30d158;

  /* Neutrals & Text */
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --text-muted: #535661;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.16);
  --border-glow: rgba(0, 229, 255, 0.4);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', sans-serif;
  --font-arabic: 'Readex Pro', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Geometry & Physics */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 9999px;
  --container-width: 1240px;
  --transition-apple: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Ambient dynamic background lighting */
.ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 15% 15%, rgba(0, 229, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(255, 59, 48, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 75%, rgba(0, 113, 227, 0.07) 0%, transparent 50%);
  filter: blur(80px);
}

.subtle-grid-bg {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  z-index: 1;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.display-title {
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 40%, #9ba1ad 80%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.gradient-accent {
  background: linear-gradient(135deg, #00e5ff 0%, #0071e3 50%, #ff3b30 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.6;
}

.center-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px;
}

/* Badges & Pills */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  backdrop-filter: blur(12px);
  text-transform: uppercase;
}

.pill-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulse-dot 2s infinite ease-in-out;
}

.pill-badge.red .dot {
  background-color: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* Navigation Dock */
.header-dock-wrap {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}

.nav-dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-pill);
  padding: 8px 14px 8px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: var(--transition-apple);
  max-width: 1080px;
  width: 100%;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.brand-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}

.brand-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: var(--transition-smooth);
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.lang-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-cyan);
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
}

.mobile-drawer {
  display: none;
}

@media (max-width: 992px) {
  .nav-links { display: none; }
  .mobile-toggle { display: block; }
  
  .mobile-drawer {
    position: fixed;
    top: 80px;
    left: 20px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-apple);
  }

  .mobile-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer a {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-apple);
  white-space: nowrap;
  border: none;
}

.btn-primary {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  background: #f0f0f2;
  transform: scale(1.02);
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.25);
}

.btn-glow {
  background: linear-gradient(135deg, #0071e3 0%, #00e5ff 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px var(--accent-blue-glow);
}

.btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 229, 255, 0.45);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border-highlight);
  color: #ffffff;
}

/* Hero Section */
.hero-section {
  min-height: 100vh;
  padding-top: 140px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-meta, .hero-cta-group {
    justify-content: center;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-number span.unit {
  color: var(--accent-cyan);
  font-size: 0.65em;
  font-weight: 600;
  margin-left: 2px;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 4px;
}

/* Hero Visual Card */
.hero-visual-card {
  position: relative;
  background: linear-gradient(180deg, rgba(25, 30, 45, 0.5) 0%, rgba(10, 13, 20, 0.85) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

.hero-visual-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
}

.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.telemetry-title {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.telemetry-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.telemetry-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 14px;
}

.telemetry-box .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.telemetry-box .val {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  margin-top: 4px;
}

.telemetry-box .val.cyan { color: var(--accent-cyan); }
.telemetry-box .val.green { color: var(--accent-emerald); }
.telemetry-box .val.red { color: var(--accent-red); }

/* Interactive Simulator */
.cp-simulator-section {
  padding: 100px 0;
  position: relative;
}

.simulator-frame {
  background: linear-gradient(180deg, #0e121a 0%, #07090d 100%);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.75);
}

.simulator-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 26px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 16px;
}

.sim-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sim-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 12px var(--accent-emerald);
  animation: pulse-dot 2s infinite ease-in-out;
}

.sim-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sim-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sim-btn:hover, .sim-btn.active {
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.simulator-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 520px;
}

@media (max-width: 900px) {
  .simulator-body {
    grid-template-columns: 1fr;
  }
}

.canvas-container {
  position: relative;
  background: #040507;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 480px;
}

#cpCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.simulator-sidebar {
  background: rgba(14, 18, 26, 0.7);
  border-left: 1px solid var(--border-subtle);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(16px);
}

html[dir='rtl'] .simulator-sidebar {
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}

.sim-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-control-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
}

.sim-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
}

.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  cursor: pointer;
  transition: transform 0.1s;
}

.sim-telemetry-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.sim-metric-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}

/* Bento Grid */
.services-section {
  padding: 100px 0;
  position: relative;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  backdrop-filter: blur(20px);
  transition: var(--transition-apple);
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 229, 255, 0.08),
    transparent 40%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.bento-card:hover::before {
  opacity: 1;
}

.bento-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.col-span-8 { grid-column: span 8; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 992px) {
  .col-span-8, .col-span-4, .col-span-6 {
    grid-column: span 12;
  }
}

.bento-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.bento-card-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.bento-card-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}

.bento-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-features-list li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bento-features-list li svg {
  color: var(--accent-cyan);
  flex-shrink: 0;
}

.bento-card-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.link-arrow:hover {
  color: var(--accent-cyan);
  gap: 10px;
}

/* Equipment Fleet */
.equipment-section {
  padding: 100px 0;
  position: relative;
}

.equipment-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.eq-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.eq-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.eq-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.equipment-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-apple);
}

.equipment-item-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-4px);
}

.equipment-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.equipment-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.equipment-spec-meta {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.5;
}

.equipment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.equipment-pill {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Clients */
.clients-section {
  padding: 90px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.5) 0%, rgba(12, 16, 24, 0.7) 100%);
}

.client-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.client-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: var(--transition-apple);
  text-align: center;
}

.client-badge-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-highlight);
  transform: translateY(-3px) scale(1.02);
}

.client-logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.client-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.client-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Vision 2030 */
.vision-section {
  padding: 100px 0;
  position: relative;
}

.vision-card {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.8) 0%, rgba(10, 12, 18, 0.95) 100%);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.vision-card::after {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.vision-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .vision-layout {
    grid-template-columns: 1fr;
  }
}

.vision-content h3 {
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  margin-bottom: 20px;
}

.vision-text {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}

.vision-badges-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.vision-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.kpi-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
}

.kpi-card .val {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kpi-card .lbl {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-apple);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  background: var(--bg-secondary);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-xl);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85);
  transform: translateY(30px) scale(0.98);
  transition: var(--transition-apple);
}

.modal-overlay.open .modal-sheet {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.modal-body {
  padding: 32px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: var(--transition-smooth);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Footer */
.site-footer {
  background: #030406;
  border-top: 1px solid var(--border-subtle);
  padding: 80px 0 40px;
  position: relative;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (max-width: 992px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand h4 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-col h5 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact-item svg {
  color: var(--accent-cyan);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.reveal-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   Real client logos (official artwork) — light tiles so brand colours read on dark
   ========================================================================== */
.client-logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.client-logo-tile { background: #ffffff; border-radius: var(--radius-md); height: 96px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; border: 1px solid rgba(255,255,255,0.08); transition: var(--transition-apple); }
.client-logo-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0, 229, 255, 0.35); }
.client-logo-tile img { max-height: 52px; max-width: 84%; object-fit: contain; display: block; }
/* real emblem in the dock: bigger, no rounding */
.brand-logo-img { height: 40px !important; width: auto !important; border-radius: 0 !important; }

/* Simulator canvas: intrinsic height (set by JS from width) — prevents the grow-only resize loop */
.canvas-container { height: auto; display: flex; align-items: center; justify-content: center; }
#cpCanvas { height: auto; max-width: 100%; }

/* ==========================================================================
   Nav dock: room for every link, never wrap, full logo
   ========================================================================== */
.nav-dock { max-width: 1360px; width: 100%; flex-wrap: nowrap; gap: 18px; padding: 6px 12px 6px 14px; }
.nav-links { flex-shrink: 1; min-width: 0; gap: 2px; }
.nav-links a { white-space: nowrap; padding: 8px 12px; font-size: 0.85rem; }
.brand-wrap, .nav-actions { flex-shrink: 0; }
.nav-actions .btn { white-space: nowrap; }
.brand-logo-img.brand-logo-full { height: 66px !important; width: auto !important; border-radius: 0 !important; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }

/* ==========================================================================
   Projects / job list
   ========================================================================== */
.projects-section { padding: 110px 0; }
.projects-frame { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; backdrop-filter: blur(16px); }
.projects-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.projects-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.projects-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.projects-table-wrap { overflow-x: auto; }
.projects-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.projects-table th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 14px 22px; border-bottom: 1px solid var(--border-subtle); }
.projects-table td { padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; font-size: 0.875rem; }
.projects-table tr:hover td { background: rgba(255,255,255,0.025); }
.projects-table .p-n { font-family: var(--font-mono); color: var(--text-muted); width: 52px; }
.projects-table .p-name { color: var(--text-primary); font-weight: 500; line-height: 1.45; }
.projects-table .p-client { color: var(--accent-cyan); white-space: nowrap; }
.projects-table .p-loc { color: var(--text-secondary); }
.projects-table .p-year { font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.projects-footer { padding: 18px 22px; text-align: center; border-top: 1px solid var(--border-subtle); }
html[dir='rtl'] .projects-table th { text-align: right; }

/* ==========================================================================
   Company: organization chart + certifications
   ========================================================================== */
.company-section { padding: 110px 0; }
.org-chart { display: flex; flex-direction: column; align-items: center; }
.org-tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.org-connector { width: 2px; height: 34px; background: linear-gradient(180deg, rgba(0,229,255,0.55), rgba(0,229,255,0.12)); border-radius: 2px; }
.org-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 22px; text-align: center; min-width: 190px; backdrop-filter: blur(12px); transition: var(--transition-apple); }
.org-card:hover { border-color: var(--border-glow); transform: translateY(-2px); }
.org-card-lead { min-width: 270px; border-color: rgba(0,229,255,0.35); box-shadow: 0 0 0 1px rgba(0,229,255,0.12), 0 20px 50px -20px rgba(0,229,255,0.35); }
.org-card-lead .org-name { font-size: 1.15rem; }
.org-card-sm { min-width: 150px; padding: 12px 16px; }
.org-card-group { background: rgba(255,255,255,0.03); border-style: dashed; }
.org-name { font-weight: 700; color: var(--text-primary); font-size: 0.98rem; }
.org-role { margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-cyan); }
.org-card-group .org-role { color: var(--text-muted); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cert-card { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; color: inherit; transition: var(--transition-apple); }
a.cert-card:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.cert-std { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--accent-cyan); text-transform: uppercase; }
.cert-name { font-weight: 700; color: var(--text-primary); font-size: 1.02rem; line-height: 1.3; }
.cert-meta { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; }
.cert-link { margin-top: auto; padding-top: 10px; font-size: 0.8rem; color: var(--text-primary); }

/* RFP modal: native <select> must render dark (options list was white-on-white on Windows) */
.form-select { color-scheme: dark; background-color: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; }
.form-select option { background-color: #0c0e14; color: #f5f5f7; padding: 10px 12px; }
.form-select option:checked, .form-select option:hover { background-color: rgba(0, 229, 255, 0.18); color: #ffffff; }
.form-select:focus { outline: none; border-color: var(--border-glow); }

/* Header: logo standalone on the left (outside the pill dock), dock on the right */
.header-dock-wrap { justify-content: center; padding: 0 32px; }
.header-inner { width: 100%; max-width: 1400px; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; }
.brand-wrap { pointer-events: auto; flex-shrink: 0; }
.brand-logo-img.brand-logo-full { height: 100px !important; }
.nav-dock { width: auto; max-width: none; flex: 0 1 auto; }
@media (max-width: 992px) { .brand-logo-img.brand-logo-full { height: 68px !important; } .header-dock-wrap { padding: 0 16px; } }
@media (max-width: 600px) { .brand-logo-img.brand-logo-full { height: 56px !important; } }

/* Header sits on the SAME column as the content: logo flush with the headline, dock flush with the card */
.header-dock-wrap { padding: 0; }
.header-inner { max-width: var(--container-width); padding: 0 24px; }
.nav-dock { gap: 14px; padding: 6px 8px 6px 10px; }
.nav-links a { padding: 8px 9px; font-size: 0.8rem; }
.nav-actions { gap: 8px; }
.lang-toggle-btn { padding: 6px 10px; font-size: 0.78rem; }

/* ---- Hero logo: large lockup top-left, shrinks once the page scrolls ---- */
.header-inner { align-items: flex-start; }
.brand-wrap { margin-top: -8px; }
.brand-logo-img.brand-logo-full {
  height: 180px !important;
  width: auto !important;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.header-dock-wrap.scrolled .brand-wrap { margin-top: 0; }
.header-dock-wrap.scrolled .brand-logo-img.brand-logo-full { height: 62px !important; }
@media (max-width: 992px) {
  .brand-logo-img.brand-logo-full { height: 110px !important; }
  .header-dock-wrap.scrolled .brand-logo-img.brand-logo-full { height: 56px !important; }
}
@media (max-width: 600px) {
  .brand-logo-img.brand-logo-full { height: 72px !important; }
  .header-dock-wrap.scrolled .brand-logo-img.brand-logo-full { height: 48px !important; }
}

/* Dock vertically centred on the large logo */
.header-inner { align-items: center; }
.brand-wrap { margin-top: 0; }

/* ---- Arrival from the split entry page: the veil lifts, the dock settles in ---- */
html.arriving::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 999;
  background: var(--bg-primary);
  pointer-events: none;
  animation: arriveVeil 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
html.arriving .nav-dock { animation: arriveDock 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
@keyframes arriveVeil { from { opacity: 1; } to { opacity: 0; } }
@keyframes arriveDock { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.arriving::after, html.arriving .nav-dock { animation: none; }
  html.arriving::after { display: none; }
}

/* ---- Scroll reveal replays in both directions ---- */
.reveal-fade.from-above { transform: translateY(-24px); }
.reveal-fade.from-above.visible { transform: translateY(0); }
.reveal-fade.reveal-reset { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-fade, .reveal-fade.from-above { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Glance card: Aileron for the values and the badge (this card only) ---- */
.hero-visual-card .telemetry-box .val,
.hero-visual-card .telemetry-live-badge {
  font-family: 'Aileron', var(--font-sans);
}
.hero-visual-card .telemetry-box .val { font-weight: 700; letter-spacing: -0.015em; }
.hero-visual-card .telemetry-live-badge { font-weight: 700; letter-spacing: 0.06em; }
html[dir='rtl'] .hero-visual-card .telemetry-box .val,
html[dir='rtl'] .hero-visual-card .telemetry-live-badge { font-family: var(--font-arabic); letter-spacing: 0; }

/* ---- Back to the Madarek Group split page ---- */
.nav-back {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-back:hover, .nav-back:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.09); border-color: var(--border-highlight); transform: translateX(-2px); }
.nav-back:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.nav-back-divider { flex-shrink: 0; width: 1px; height: 18px; background: var(--border-subtle); }
html[dir='rtl'] .nav-back svg { transform: scaleX(-1); }
html[dir='rtl'] .nav-back:hover { transform: translateX(2px); }
.drawer-back { color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-subtle); padding-bottom: 14px !important; margin-bottom: 6px; }

/* Bar spacing retuned so it ends exactly on the content edge beside the large logo */
.nav-dock { gap: 8px; padding: 6px 8px 6px 8px; }
.nav-links a { padding: 8px 6px; font-size: 0.78rem; }
.nav-actions { gap: 6px; }

/* ---- Nav declutter on WIDE screens only (2026-10-02, at Waqas's word): more breathing room and
   slightly larger links, using the empty space beside the dock. Minor + wide-only so the tighter
   narrow tiers above are untouched. ---- */
@media (min-width: 1600px) {
  .nav-dock { gap: 14px; padding: 7px 10px 7px 13px; }
  .nav-links { gap: 4px; }
  .nav-links a { padding: 8px 11px; font-size: 0.85rem; }
  .nav-actions { gap: 10px; }
  .nav-back-divider { height: 20px; }
}

/* ---- Back-to-Group button: a blue crescent arc riding the ring, rotating on hover
   (mirrors Madarek Gulf's green one, in Almutgadmah's own blue). ---- */
.nav-back { position: relative; }
.nav-back::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 150deg, transparent 0 55%, color-mix(in srgb, var(--accent-cyan) 35%, transparent) 63%, var(--accent-cyan) 78%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent-cyan) 55%, transparent));
  opacity: .85; transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
}
.nav-back:hover::before, .nav-back:focus-visible::before { transform: rotate(130deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-back:hover::before { transform: none; } }

/* Mid-width screens: a smaller logo, then the menu button before things get cramped */
@media (min-width: 993px) and (max-width: 1287px) { .brand-logo-img.brand-logo-full { height: 120px !important; } }
@media (max-width: 1180px) {
  .nav-links, .nav-back-divider { display: none; }
  .mobile-toggle { display: block; }
}

/* Leaving for the split page: a quick veil so the jump is not abrupt */
html.leaving::before {
  content: ''; position: fixed; inset: 0; z-index: 3000;
  background: var(--bg-primary);
  animation: leaveVeil 0.38s ease both;
}
@keyframes leaveVeil { from { opacity: 0; } to { opacity: 1; } }

/* Hero content always starts below the large logo, whatever the screen height */
.hero-section { padding-top: 232px; }
@media (min-width: 993px) and (max-width: 1287px) { .hero-section { padding-top: 172px; } }
@media (max-width: 992px)  { .hero-section { padding-top: 160px; } }
@media (max-width: 600px)  { .hero-section { padding-top: 120px; } }

/* Pop-out menu now also serves 993-1180px screens, where the menu button appears */
@media (min-width: 993px) and (max-width: 1180px) {
  .mobile-drawer {
    position: fixed; top: 80px; left: auto; right: 24px; width: 340px;
    background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    padding: 24px; z-index: 999; display: flex; flex-direction: column; gap: 16px;
    backdrop-filter: blur(24px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-20px); opacity: 0; pointer-events: none; transition: var(--transition-apple);
  }
  .mobile-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-drawer a { text-decoration: none; color: var(--text-primary); font-size: 1.05rem; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
}
/* At the top of the page the logo is large, so the menu opens below it */
@media (max-width: 1180px) { .header-dock-wrap:not(.scrolled) ~ .mobile-drawer { top: 150px; } }
@media (max-width: 992px)  { .header-dock-wrap:not(.scrolled) ~ .mobile-drawer { top: 140px; } }
@media (max-width: 600px)  { .header-dock-wrap:not(.scrolled) ~ .mobile-drawer { top: 104px; } }

/* Phones: the bar keeps only language + menu. RFP and Back live in the menu itself. */
@media (max-width: 600px) {
  .nav-dock .open-rfp-btn, .nav-dock .nav-back { display: none; }
}

/* ---- Frosted strip behind the header once the page scrolls ----
   Blurs and dims content passing under the logo and the nav tube, then melts
   away at the bottom so there is no hard edge. Hidden at the top of the page. */
.header-dock-wrap::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 150px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 9, 0.92) 0%, rgba(6, 7, 9, 0.82) 55%, rgba(6, 7, 9, 0.45) 80%, rgba(6, 7, 9, 0) 100%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.header-dock-wrap.scrolled::before { opacity: 1; }
@media (max-width: 600px) { .header-dock-wrap::before { height: 124px; } }

/* ==========================================================================
   Phone refinements
   ========================================================================== */

/* Buttons do not inherit the page font by default, so tabs and filter chips were showing in Arial */
button, input, select, textarea { font-family: inherit; }

@media (max-width: 720px) {
  /* Projects: each row becomes a card, so nothing is cut off or hidden off to the side */
  .projects-table-wrap { overflow-x: visible; }
  .projects-table { min-width: 0; display: block; }
  .projects-table thead { display: none; }
  .projects-table tbody { display: block; }
  .projects-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "n name name" ". client year" ". loc loc";
    column-gap: 12px; row-gap: 4px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .projects-table td { display: block; padding: 0; border: 0; }
  .projects-table .p-n { grid-area: n; width: auto; padding-top: 2px; font-size: 0.75rem; }
  .projects-table .p-name { grid-area: name; font-size: 0.92rem; overflow-wrap: anywhere; }
  .projects-table .p-client { grid-area: client; white-space: normal; font-size: 0.8rem; margin-top: 4px; }
  .projects-table .p-year { grid-area: year; font-size: 0.78rem; margin-top: 4px; }
  .projects-table .p-loc { grid-area: loc; font-size: 0.8rem; }
  .projects-table tr:hover td { background: none; }

  /* Filter chips: one swipeable row instead of six stacked rows */
  #projectFilters {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -18px; padding: 2px 18px 6px;
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
  #projectFilters::-webkit-scrollbar { display: none; }
  #projectFilters > * { flex: 0 0 auto; white-space: nowrap; }
}

/* Comfortable tap targets on touch screens */
@media (max-width: 992px) {
  .lang-toggle-btn { min-height: 40px; padding: 8px 14px; }
  .link-arrow { display: inline-flex; align-items: center; min-height: 40px; }
  footer a { display: inline-block; padding: 8px 0; }
  .sim-slider { padding: 14px 0; background-clip: content-box; box-sizing: content-box; }
}

/* iPhones zoom the page when a focused field is under 16px. Keep fields at 16px on touch screens. */
@media (max-width: 992px) {
  input, select, textarea, .form-input, .form-select, .form-textarea { font-size: 16px !important; }
}

/* ---- Arabic mode ---- */
/* The technical font has no Arabic letters, so values fall back to a poor system font. Use the Arabic face instead. */
html[dir='rtl'] { --font-mono: var(--font-arabic); }
html[dir='rtl'] .sim-metric-val, html[dir='rtl'] .projects-count, html[dir='rtl'] .projects-table th { letter-spacing: 0; }
/* Label and value never touch */
.sim-metric-row { gap: 14px; }
/* Official project titles and client names stay in English, aligned to the reading side */
html[dir='rtl'] .projects-table .p-name, html[dir='rtl'] .projects-table .p-client { text-align: right; }

/* Language switch: icon + label */
.lang-toggle-btn { display: inline-flex; align-items: center; gap: 7px; }
.lang-toggle-btn .lang-icon { flex-shrink: 0; opacity: 0.85; }
@media (min-width: 993px) {
  .lang-toggle-btn { padding: 6px 8px; gap: 5px; }
  .lang-toggle-btn .lang-icon { width: 14px; height: 14px; }
}
/* Arabic labels run longer, so the bar gets slightly tighter spacing to end on the content edge */
@media (min-width: 993px) {
  html[dir='rtl'] .nav-links a { padding: 8px 5px; }
  html[dir='rtl'] .nav-dock { gap: 6px; }
}

/* ==========================================================================
   NAV — gliding top-edge hairline on hover  (the "navbar study" effect)
   A thin light line forms at the top edge of the dock, just above the hovered
   link, and glides from word to word. Hover affordance only; the active
   (scroll-spy) link keeps its own subtle pill. Positioned by js in index.html.
   ========================================================================== */
.nav-dock { position: relative; }
.nav-ind {
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--text-primary) 92%, transparent), transparent);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--text-primary) 22%, transparent);
  transition: left .36s cubic-bezier(0.16, 1, 0.3, 1),
              width .36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity .26s ease;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .nav-ind { transition: opacity .2s ease; }
}

/* ==========================================================================
   DAY / NIGHT — theme toggle button + light palette
   The site is petroleum-dark by default. The toggle flips a light palette by
   setting data-theme="light" on <html> (persisted, applied early in <head>).
   The floating dock stays a dark-glass island in day mode, so the white logo
   and the light hairline keep working against it.
   ========================================================================== */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}
.theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent-cyan); }
.theme-toggle-btn svg { width: 16px; height: 16px; }
.theme-toggle-btn .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-btn .theme-icon-sun { display: block; }
html[data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: none; }
@media (max-width: 992px) { .theme-toggle-btn { width: 40px; height: 40px; } }

/* ---- Light palette: tokens flip ---- */
html[data-theme="light"] {
  --bg-primary: #eceff4;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e4e8ef;
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-hover: rgba(255, 255, 255, 0.96);
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-card: rgba(12, 18, 30, 0.035);
  --accent-cyan: #0094c2;
  --accent-cyan-dim: rgba(0, 148, 194, 0.12);
  --accent-blue-glow: rgba(0, 148, 194, 0.22);
  --text-primary: #0b0e15;
  --text-secondary: #596070;
  --text-muted: #8b92a2;
  --border-subtle: rgba(12, 18, 30, 0.10);
  --border-highlight: rgba(12, 18, 30, 0.14);
  --border-glow: rgba(0, 148, 194, 0.40);
}
html[data-theme="light"] body { background-color: var(--bg-primary); }
html[data-theme="light"] .subtle-grid-bg {
  background-image:
    linear-gradient(rgba(12, 18, 30, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 18, 30, 0.04) 1px, transparent 1px);
}
html[data-theme="light"] .ambient-glow { opacity: .55; }

/* ---- Keep the floating dock a dark-glass island in day mode, and keep every
        control inside it light-on-dark (logo is white; tokens went dark). ---- */
html[data-theme="light"] .nav-dock {
  background: rgba(13, 17, 25, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(20, 35, 60, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
html[data-theme="light"] .nav-links a { color: rgba(245, 246, 248, 0.70); }
html[data-theme="light"] .nav-links a:hover { color: #fff; }
html[data-theme="light"] .nav-links a.active { color: #fff; background: rgba(255, 255, 255, 0.10); }
html[data-theme="light"] .lang-toggle-btn,
html[data-theme="light"] .theme-toggle-btn,
html[data-theme="light"] .nav-dock .mobile-toggle,
html[data-theme="light"] .nav-back { color: #f4f6f8; }
html[data-theme="light"] .nav-back-divider { background: rgba(255, 255, 255, 0.14); }
html[data-theme="light"] .nav-ind {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  box-shadow: 0 1px 10px rgba(255, 255, 255, 0.22);
}

/* ---- Light-mode fixes for pieces authored dark (headlines, hero card, insets).
        The CP simulator frame and the footer stay dark on purpose — an
        instrument screen and a grounding footer both read well over a light page. ---- */
html[data-theme="light"] .gradient-text {
  /* override background-image only — using the `background` shorthand here would
     reset background-clip:text and fill the whole box instead of the glyphs */
  background-image: linear-gradient(135deg, #0b0e15 38%, #3f4756 78%, #0094c2 100%);
}
html[data-theme="light"] .hero-visual-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 251, 0.96) 100%);
  box-shadow: 0 30px 70px rgba(20, 35, 60, 0.14);
}
html[data-theme="light"] .telemetry-box { background: rgba(12, 18, 30, 0.04); }
html[data-theme="light"] .org-card-group { background: rgba(12, 18, 30, 0.035); }
html[data-theme="light"] .simulator-frame { box-shadow: 0 40px 90px rgba(20, 35, 60, 0.18); }

/* Logo sits on the page (outside the dark dock), so day mode needs the original
   colour lockup instead of the white one, or it vanishes on the light bg. */
.brand-logo-day { display: none; }
html[data-theme="light"] .brand-logo-night { display: none; }
html[data-theme="light"] .brand-logo-day { display: block; }
html[data-theme="light"] .brand-logo-day { filter: drop-shadow(0 2px 8px rgba(20, 35, 60, 0.14)); }

/* Day mode, round 2 — pieces authored as light-on-dark that needed attention:
   the hero blueprint rig, the glance-card safety strip, and the Vision panel. */

/* Hero blueprint rig: cyan line-art is near-invisible on a light page. Darken it
   to a navy draft and lift opacity so it reads like a faint blueprint again. */
html[data-theme="light"] .bp-base { opacity: 0.6; filter: brightness(0.3) contrast(1.18) saturate(1.1); }
html[data-theme="light"] .bp-rig.has-active .bp-base { opacity: 0.4; }
html[data-theme="light"] .bp-glow { filter: brightness(0.4) contrast(1.15) drop-shadow(0 0 5px rgba(0, 90, 130, 0.45)); }

/* Glance-card safety strip: readable text (now via token) + a bit more presence.
   The box carries inline styles, so the day-mode tint/border need !important to win. */
html[data-theme="light"] .glance-note { background: rgba(0, 148, 194, 0.07) !important; border-color: rgba(0, 148, 194, 0.30) !important; }
html[data-theme="light"] .glance-note svg { stroke: #0094c2; }

/* Vision 2030 / National Commitment panel: flip the dark card and its KPI tiles */
html[data-theme="light"] .vision-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 251, 0.96) 100%);
}
html[data-theme="light"] .kpi-card { background: rgba(12, 18, 30, 0.04); }