/* ═══════════════════════════════════════════════════════════════
   MERDOT Technologies — MIOS Intelligence Operating System
   Design System v6.0  —  Premium Production Grade
   © 2025 MERDOT Technologies, Ahmedabad, Gujarat, India

   MOBILE-FIRST · ZERO OVERFLOW · ENTERPRISE-GRADE
   Tested: 360 · 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920px
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* ── Backgrounds */
  --bg-0:       #050B14;
  --bg-1:       #071028;
  --bg-2:       #0B1622;
  --bg-3:       #101A28;
  --bg-panel:   rgba(7, 16, 34, 0.92);
  --bg-glass:   rgba(11, 22, 40, 0.60);
  --bg-card:    rgba(8, 18, 36, 0.92);

  /* ── Amber accent */
  --amber:        #F59E0B;
  --amber-2:      #D97706;
  --amber-3:      #FCD34D;
  --amber-dim:    rgba(245, 158, 11, 0.10);
  --amber-border: rgba(245, 158, 11, 0.22);
  --amber-glow:   0 0 32px rgba(245, 158, 11, 0.20);

  /* ── Cyan */
  --cyan:         #22D3EE;
  --cyan-2:       #06B6D4;
  --cyan-3:       #67E8F9;
  --cyan-dim:     rgba(34, 211, 238, 0.07);
  --cyan-border:  rgba(34, 211, 238, 0.15);

  /* ── Accent colors */
  --blue:       #3B82F6;
  --violet:     #7C3AED;
  --violet-2:   #8B5CF6;
  --green:      #10B981;
  --red:        #EF4444;

  /* ── Text hierarchy */
  --text:         #DCE8F4;
  --text-primary: #F0F8FF;   /* alias: bright text */
  --text-secondary:#DCE8F4;  /* alias: normal text */
  --text-muted:   #7A96B4;
  --text-dim:     #4A6280;
  --text-bright:  #F0F8FF;

  /* ── Lines / dividers */
  --line:        rgba(148, 163, 184, 0.09);
  --line-2:      rgba(148, 163, 184, 0.05);
  --line-amber:  rgba(245, 158, 11, 0.20);
  --line-cyan:   rgba(34, 211, 238, 0.14);

  /* ── Shadows */
  --sh-sm:  0 2px 8px rgba(0,0,0,0.32);
  --sh:     0 8px 32px rgba(0,0,0,0.48), 0 1px 0 rgba(255,255,255,0.025) inset;
  --sh-lg:  0 24px 80px rgba(0,0,0,0.64);
  --sh-card:0 4px 24px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.025) inset;

  /* ── Border radius */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r:     16px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* ── Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Layout */
  --max:        1360px;
  --gutter:     clamp(18px, 4vw, 32px);
  --section-py: clamp(60px, 8vw, 112px);
  --header-h:   68px;

  /* ── Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   0.16s;
  --t-base:   0.22s;
  --t-slow:   0.34s;

  /* ── Z-index layers */
  --z-base:    1;
  --z-overlay: 100;
  --z-header:  200;
  --z-menu:    190;
}

/* ─── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a   { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ─── BACKGROUND SYSTEM ────────────────────────────────────────── */
.page-bg {
  background:
    radial-gradient(ellipse at 70%  0%,  rgba(245,158,11,.042)  0%, transparent 42%),
    radial-gradient(ellipse at 10%  0%,  rgba(34,211,238,.052)  0%, transparent 36%),
    radial-gradient(ellipse at 50% 100%, rgba(59,130,246,.036)  0%, transparent 42%),
    linear-gradient(180deg, #050B14 0%, #071028 50%, #050B14 100%);
}
.page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,211,238,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 60%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-bright);
  letter-spacing: -.03em;
}
h1 {
  font-size: clamp(1.9rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.04;
}
h2 {
  font-size: clamp(1.6rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: -.032em;
}
h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
}
h4 {
  font-size: clamp(0.9375rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}
p { line-height: 1.72; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); }
small { font-size: 0.8125rem; }

/* Gradient text */
.gradient {
  background: linear-gradient(110deg, #ffffff 0%, #e2f0ff 35%, var(--cyan-3) 58%, var(--blue) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-amber {
  background: linear-gradient(110deg, #ffffff 0%, #fef3c7 30%, var(--amber-3) 60%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Eyebrow label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan-2);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--dot::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

/* ─── LAYOUT ───────────────────────────────────────────────────── */
.container {
  width: min(var(--max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.section {
  padding: var(--section-py) 0;
  position: relative;
}
.section--tight   { padding: clamp(40px, 5.5vw, 80px) 0; }
.section--flush   { padding-top: 0; }
.section-header {
  max-width: 840px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.section-header p {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 620px;
  line-height: 1.76;
}
.section-header--center { text-align: center; max-width: 100%; }
.section-header--center p { margin-inline: auto; }

/* Generic grids — mobile-first single column */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Split — single col on mobile → 2-col at 768px */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
}

/* ─── SITE HEADER ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 11, 20, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  transition: background var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.site-header.scrolled {
  background: rgba(5, 11, 20, 0.97);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 4px 32px rgba(0,0,0,.32);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* ── Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(34,211,238,.07));
  border: 1px solid var(--amber-border);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(245,158,11,.07) inset, var(--sh-sm);
  flex-shrink: 0;
  transition: box-shadow var(--t-base);
}
.brand-mark:hover { box-shadow: 0 0 0 1px rgba(245,158,11,.18) inset, var(--amber-glow); }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.brand-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--text-bright);
  white-space: nowrap;
}
.brand-text small {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: var(--r-xs);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  position: relative;
  letter-spacing: .01em;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text-bright);
  background: rgba(255,255,255,.04);
}
.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  border-radius: 99px;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}

/* ── Nav action buttons */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Hide "Docs" ghost btn on mobile — shown at 640px+ */
.nav-actions .btn--ghost {
  display: none;
}

/* ─── BUTTONS ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .015em;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
  color: #0a0400;
  border: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 6px 20px rgba(245,158,11,.24),
    0 12px 36px rgba(0,0,0,.28);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 10px 28px rgba(245,158,11,.34),
    0 18px 44px rgba(0,0,0,.36);
}
.btn:active  { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.btn--ghost {
  background: var(--bg-glass);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-2px);
  box-shadow: var(--sh);
  color: var(--text-bright);
}
.btn--outline {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan-border);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--cyan-dim);
  box-shadow: 0 0 24px rgba(34,211,238,.12);
  transform: translateY(-2px);
}
.btn--lg {
  padding: 13px 30px;
  font-size: 14.5px;
  border-radius: var(--r);
}
.btn--sm { padding: 7px 14px; font-size: 12.5px; }

/* Legacy compat */
.ghost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500;
  background: var(--bg-glass); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--sh-sm); transition: all var(--t-base); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.ghost-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-2px);
  color: var(--text-bright);
}

/* ─── HAMBURGER BUTTON ────────────────────────────────────────── */
.menu-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--bg-glass);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base);
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover { background: rgba(255,255,255,.06); border-color: var(--line-cyan); }
.menu-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  border-radius: 99px;
  transition: transform var(--t-slow) var(--ease), opacity .2s, width .2s;
}
.menu-btn::before, .menu-btn::after { content: ""; }
.menu-btn.is-open span { opacity: 0; transform: scaleX(0); }
.menu-btn.is-open::before { transform: translateY(6.5px) rotate(45deg); }
.menu-btn.is-open::after  { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── FULLSCREEN MOBILE OVERLAY ─────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 80% 0%,  rgba(245,158,11,.07), transparent 55%),
    radial-gradient(ellipse at 5% 100%, rgba(34,211,238,.07), transparent 50%),
    rgba(3, 7, 14, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  overflow: hidden;
}
.mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.mobile-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,211,238,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.020) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.mobile-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.mobile-overlay__close {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--bg-glass);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base);
  -webkit-tap-highlight-color: transparent;
}
.mobile-overlay__close:hover { background: rgba(255,255,255,.08); border-color: var(--line-cyan); }
.mobile-overlay__close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.mobile-overlay__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 22px;
  position: relative;
  z-index: 1;
}
.mobile-overlay__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.5vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--text-muted);
  transition: color var(--t-base);
}
.mobile-overlay__link:last-child { border-bottom: 0; }
.mobile-overlay__link:hover,
.mobile-overlay__link:active { color: var(--text-bright); }
.mobile-overlay__link:hover .mobile-link-num { color: var(--amber); }
.mobile-link-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-dim);
  transition: color var(--t-base);
}
.mobile-overlay__footer {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.mobile-overlay__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Status dot */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(16,185,129,.8);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; box-shadow: 0 0 16px rgba(16,185,129,.6); }
}

/* Legacy compat */
.mobile-menu { display: none !important; }

/* ─── PANEL COMPONENT ──────────────────────────────────────────── */
.panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 12%, rgba(34,211,238,.032), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(245,158,11,.028), transparent 28%);
  pointer-events: none;
  border-radius: inherit;
}
.panel--amber { border-color: var(--amber-border); }
.panel--cyan  { border-color: var(--line-cyan); }

/* ─── HERO ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 40%, rgba(34,211,238,.11), transparent 38%),
    radial-gradient(ellipse at 28% 60%, rgba(124,58,237,.07), transparent 40%),
    radial-gradient(ellipse at 50%  0%, rgba(245,158,11,.04), transparent 50%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.007) 0 1px,
    transparent 1px 9px
  );
  pointer-events: none;
}

/* Hero layout: stacked on mobile, 2-col at 860px+ */
.hero-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 48px);
  align-items: flex-start;
  width: 100%;
}

.hero-copy {
  position: relative;
  z-index: 4;
  max-width: 100%;
}

/* Hero live badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .26);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #34D399;
  margin-bottom: 28px;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 12px rgba(52, 211, 153, .9);
  animation: pulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Hero headline */
.hero h1 {
  font-size: clamp(1.9rem, 7vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .96;
  color: #fff;
  text-shadow: 0 8px 40px rgba(0,0,0,.55);
  margin-bottom: 22px;
  max-width: 760px;
}

.hero p {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.78;
  color: #9BB4CE;
  max-width: 520px;
}

.hero-cta {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero-cta .btn--lg,
.hero-cta .ghost-btn {
  flex: 1 1 160px;
}

/* Metrics strip */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 36px;
  padding: 12px;
  background: rgba(3, 8, 18, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px);
  max-width: 480px;
}
.hero-metric {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.022);
  border: 1px solid var(--line-2);
}
.hero-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 3px;
}
.hero-metric span {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* Made in India badge */
.made-india {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FDE68A;
  margin-top: 18px;
}

/* Hero visual — hidden on mobile, shown at 860px */
.hero-visual {
  position: relative;
  width: 100%;
  display: none;
  z-index: 3;
}
.hero-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: rgba(8, 18, 36, .70);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(34,211,238,.04) inset, var(--sh-lg);
}
#orbitCanvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Floating intelligence badges */
.hero-badge {
  position: absolute !important;
  z-index: 10 !important;
  padding: 12px 14px !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(160deg, rgba(3,10,22,.93), rgba(2,7,18,.86)) !important;
  border: 1px solid var(--line-cyan) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 16px 48px rgba(0,0,0,.50) !important;
  min-width: 130px;
  max-width: 176px;
}
.hero-badge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-2);
  margin-bottom: 4px;
}
.hero-badge-value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.hero-badge-sub {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}
.hero-badge--amber { border-color: var(--amber-border) !important; }
.hero-badge--amber .hero-badge-label { color: var(--amber); }
.hero-badge--violet { border-color: rgba(139,92,246,.26) !important; }
.hero-badge--violet .hero-badge-label { color: var(--violet-2); }
.badge-a { top: 12% !important; right: -3% !important; }
.badge-b { top: 42% !important; left: -3% !important; }
.badge-c { bottom: 14% !important; right: 3% !important; }

/* ─── SECTION DIVIDER ──────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* ─── MANIFESTO ─────────────────────────────────────────────────── */
.manifesto { position: relative; overflow: hidden; }
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50%  0%, rgba(245,158,11,.05), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(34,211,238,.04), transparent 40%);
  pointer-events: none;
}
.manifesto-text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.04em;
  color: var(--text-bright);
  max-width: 1080px;
}
.manifesto-text em {
  font-style: normal;
  background: linear-gradient(90deg, var(--amber), var(--amber-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.manifesto-sub {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.82;
  color: var(--text-muted);
  max-width: 680px;
  margin-top: 28px;
}
.manifesto-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
.manifesto-stat {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.manifesto-stat:hover { border-color: var(--line-amber); transform: translateY(-2px); }
.manifesto-stat::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text-bright);
  margin-bottom: 6px;
}
.stat-num em {
  font-style: normal;
  background: linear-gradient(90deg, var(--amber), var(--amber-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ─── INTELLIGENCE PIPELINE ─────────────────────────────────────── */
.pipeline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}
.pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.pipeline-step:not(:last-child)::after {
  content: "";
  display: block;
  width: 2px; height: 16px;
  background: linear-gradient(180deg, var(--amber), transparent);
  margin: 0 auto;
  flex-shrink: 0;
}
.pipeline-step:hover {
  border-color: var(--amber-border);
  box-shadow: 0 0 24px rgba(245,158,11,.06);
}
.pipeline-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.pipeline-step h4 { font-size: 15px; margin-bottom: 4px; }
.pipeline-step p  { font-size: 13.5px; color: var(--text-muted); line-height: 1.64; margin: 0; }

/* ─── CAPABILITY GRID ────────────────────────────────────────────
   FIXED: was defaulting to 2-col — now mobile-first 1-col
───────────────────────────────────────────────────────────────── */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cap-card {
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.cap-card:hover {
  border-color: var(--line-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.24), 0 0 20px rgba(245,158,11,.06);
}
.cap-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.cap-card h4 {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  margin-bottom: 7px;
}
.cap-card p  { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ─── DEPLOY CARDS ──────────────────────────────────────────────── */
.deploy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.deploy-card {
  padding: clamp(22px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.deploy-card:hover {
  border-color: var(--amber-border);
  box-shadow: 0 12px 48px rgba(0,0,0,.28), 0 0 32px rgba(245,158,11,.05);
  transform: translateY(-2px);
}
.deploy-card::before {
  content: attr(data-num);
  position: absolute;
  top: -12px; right: 16px;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.06em;
  color: rgba(245,158,11,.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.deploy-card h3 {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  margin-bottom: 10px;
}
.deploy-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.74;
  margin-bottom: 18px;
}
.deploy-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
}
.deploy-card ul li {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.5;
}
.deploy-card ul li::before {
  content: "›";
  color: var(--amber);
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── TRUST GRID ────────────────────────────────────────────────
   FIXED: was defaulting to 2-col — now mobile-first 1-col
───────────────────────────────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.trust-card {
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.trust-card:hover {
  border-color: var(--line-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.24), 0 0 20px rgba(34,211,238,.06);
}
.trust-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-border), transparent);
}
.trust-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.22);
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.trust-card h4 {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  margin-bottom: 8px;
}
.trust-card p  { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ─── CTA SECTION ────────────────────────────────────────────────── */
.cta-section { position: relative; overflow: hidden; }
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50%  0%, rgba(245,158,11,.09), transparent 55%),
    radial-gradient(ellipse at  0% 100%, rgba(34,211,238,.06), transparent 50%);
  pointer-events: none;
}
.cta-inner {
  text-align: center;
  padding: clamp(56px, 7vw, 110px) 0;
  position: relative;
  z-index: 1;
}
.cta-inner h2 {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 16px;
}
.cta-inner p {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.76;
}
.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ─── ORBIT CANVAS ───────────────────────────────────────────────── */
.orbit-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.orbit-panel {
  min-height: 320px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.orbit-side { display: grid; gap: 14px; align-content: start; }
#orbitCanvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 1;
}

/* ─── SIDE ITEMS ─────────────────────────────────────────────────── */
.side-item {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color var(--t-base);
}
.side-item:hover { border-color: var(--line-cyan); }
.side-item h4 { font-size: 16px; margin-bottom: 9px; }
.side-item p  { font-size: 14px; color: var(--text-muted); line-height: 1.72; }

/* ─── DOC LIST ───────────────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(5, 13, 28, .60);
  font-size: 14px;
  transition: background var(--t-base), border-color var(--t-base);
}
.doc-list a:hover { background: rgba(34,211,238,.03); border-color: var(--line-cyan); }
.doc-list a span:last-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-dim);
  background: var(--bg-glass);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ─── PAGE HERO (Inner pages) ───────────────────────────────────── */
.page-hero {
  padding: clamp(28px, 4.5vw, 56px) 0 clamp(20px, 3vw, 36px);
}
.ph-inner {
  padding: clamp(28px, 3.5vw, 48px) clamp(22px, 3vw, 48px);
  border-radius: var(--r-xl);
  /* Premium top accent line */
  border-top: 2px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(90deg, var(--amber), var(--cyan-2)) border-box;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero h1 {
  font-size: clamp(1.5rem, 4.5vw, 4rem);
  line-height: 1.04;
  margin-bottom: 16px;
  letter-spacing: -.04em;
}
.page-hero p {
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  color: var(--text-muted);
  max-width: 680px;
  line-height: 1.76;
}

/* ─── CONTACT PAGE ───────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-card { padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px); border-radius: var(--r-xl); }

/* Legacy form styles */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: -2px;
}
.form input, .form textarea, .form select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(3, 9, 20, .72);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color var(--t-base), box-shadow var(--t-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--cyan-border);
  box-shadow: 0 0 0 3px rgba(34,211,238,.08);
}
.form input::placeholder, .form textarea::placeholder { color: var(--text-dim); }
.form textarea { min-height: 112px; resize: vertical; }

/* ─── CONTACT FORM (new contact page) ───────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.form-group label span { color: var(--amber); }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(4, 11, 24, 0.80);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color var(--t-base), box-shadow var(--t-base);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,158,11,.10);
}
.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7FAA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-group select option { background: var(--bg-1); color: var(--text-primary); }
.form-group textarea { resize: vertical; min-height: 124px; }
.form-group--check { flex-direction: row; align-items: flex-start; }
.check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.check-label input[type="checkbox"] {
  width: 16px; height: 16px;
  min-width: 16px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  accent-color: var(--amber);
  flex-shrink: 0;
}
.form-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.form-note a { color: var(--text-dim); text-decoration: underline; }
.form-note a:hover { color: var(--amber); }

/* ─── SECURITY PAGE ──────────────────────────────────────────────── */
.security-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.security-card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.security-card:hover {
  border-color: rgba(16,185,129,.28);
  box-shadow: 0 0 24px rgba(16,185,129,.05);
}

/* ─── TABLE ──────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: rgba(4, 11, 22, .65);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
table { width: 100%; border-collapse: collapse; min-width: 580px; }
th, td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; }
th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-2);
  background: rgba(4,11,22,.4);
}
td { font-size: 13.5px; color: var(--text-muted); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(34,211,238,.018); }

/* ─── LIST GRID ──────────────────────────────────────────────────── */
.list-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* ─── FEATURE STRIP ──────────────────────────────────────────────── */
.feature-strip { display: flex; flex-direction: column; gap: 4px; }
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: border-color var(--t-base);
}
.feature-item:hover { border-color: var(--line-cyan); }
.feature-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-2);
  letter-spacing: .10em;
  flex-shrink: 0;
  margin-top: 1px;
}
.feature-item h4 { font-size: 14px; margin-bottom: 3px; }
.feature-item p  { font-size: 13px; color: var(--text-muted); line-height: 1.66; }

/* ─── PRINCIPLE CARDS ────────────────────────────────────────────── */
.principle-card {
  padding: clamp(22px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.principle-card:hover {
  border-color: var(--line-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.24);
}
.principle-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.principle-card h3 {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  margin-bottom: 12px;
}
.principle-card p  { font-size: 14px; line-height: 1.78; color: var(--text-muted); }

/* ─── RESOURCES ──────────────────────────────────────────────────── */
.resource-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  margin-bottom: 8px;
  transition: border-color var(--t-base), background var(--t-base);
}
.resource-item:last-child { margin-bottom: 0; }
.resource-item:hover { border-color: var(--line-cyan); background: rgba(34,211,238,.02); }
.resource-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.resource-title { font-size: 15px; font-weight: 500; color: var(--text-bright); flex: 1; min-width: 0; }
.resource-arrow { color: var(--text-dim); font-size: 16px; flex-shrink: 0; }

/* ─── METRIC ROW ─────────────────────────────────────────────────── */
.metric-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric {
  padding: 14px;
  border-radius: var(--r);
  background: rgba(3, 10, 22, .55);
  border: 1px solid var(--line);
}
.metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.metric span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ─── SCROLL REVEAL ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
}

/* ─── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── UTILITIES ──────────────────────────────────────────────────── */
.text-amber  { color: var(--amber); }
.text-cyan   { color: var(--cyan-2); }
.text-dim    { color: var(--text-dim); }
.text-muted  { color: var(--text-muted); }
.text-bright { color: var(--text-bright); }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ─── ELITE FOOTER ───────────────────────────────────────────────── */
.footer {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(34,211,238,.03), transparent 50%),
    rgba(2, 5, 12, .85);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.30), var(--amber), rgba(245,158,11,.30), transparent);
}
.footer-main { padding: clamp(44px, 5.5vw, 72px) 0 clamp(32px, 4vw, 52px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 44px);
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.82;
  margin-top: 0;
  max-width: 300px;
}
.footer-brand address {
  font-style: normal;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.84;
  margin-top: 14px;
}
.footer-brand address a { color: var(--cyan-2); transition: color var(--t-base); }
.footer-brand address a:hover { color: var(--cyan); }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.footer-col a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--text-muted);
  transition: color var(--t-base);
  line-height: 1.75;
}
.footer-col a:hover { color: var(--text-bright); }
.footer-bottom-bar { border-top: 1px solid var(--line); }
.footer-bottom {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: var(--text-dim); }
.footer-legal {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-legal a { font-size: 12px; color: var(--text-dim); transition: color var(--t-base); }
.footer-legal a:hover { color: var(--text-muted); }
.footer-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* ─── 404 PAGE ───────────────────────────────────────────────────── */
.error-hero {
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
}
.error-code-display {
  font-family: var(--font-mono);
  font-size: clamp(4.5rem, 18vw, 11.25rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 50%, rgba(245,158,11,.3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px;
}
.error-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }

/* ─── TRI-GRID (3-col feature grid) ─────────────────────────────── */
.tri-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.feature-card {
  padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.feature-card:hover {
  border-color: var(--line-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.24), 0 0 20px rgba(245,158,11,.06);
}
.feature-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}
.feature-card h4 {
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  margin-bottom: 10px;
  color: var(--text-primary);
}
.feature-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.74;
  margin: 0;
}

/* ─── CAP GRID (capability grid for inner pages) ─────────────────── */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.cap-grid .cap-card { padding: 24px 22px; }
.cap-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .08em;
  margin-bottom: 12px;
  display: block;
}

/* ─── LEGAL BODY ─────────────────────────────────────────────────── */
.legal-body {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.legal-section {
  padding: clamp(28px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 {
  font-size: clamp(1.0625rem, 1.8vw, 1.5rem);
  margin-bottom: 16px;
  color: var(--text-primary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal-section h3 {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  margin-top: 24px;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.legal-section p {
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  color: var(--text-secondary);
  line-height: 1.82;
  margin-bottom: 14px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  padding-left: 20px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}
.legal-section ul li {
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  color: var(--text-secondary);
  line-height: 1.74;
  padding-left: 4px;
}
.legal-section a { color: var(--amber); transition: color var(--t-fast); }
.legal-section a:hover { color: var(--amber-3); text-decoration: underline; }
.legal-section address { margin-top: 12px; }
.legal-section strong { color: var(--text-primary); }

/* ─── MADE-IN-INDIA FOOTER BADGE ─────────────────────────────────── */
.made-india {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--amber-dim);
  border: 1px solid var(--amber-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FDE68A;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — MOBILE FIRST
═══════════════════════════════════════════════════════════════ */

/* ─── 480px — Larger phones ──────────────────────────────────── */
@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }

  /* CTA buttons no longer need to be full-flex */
  .hero-cta .btn--lg,
  .hero-cta .ghost-btn { flex: 0 0 auto; }
}

/* ─── 640px — Mobile landscape / large phones ───────────────── */
@media (min-width: 640px) {
  .grid-2          { grid-template-columns: repeat(2, 1fr); }
  .security-grid   { grid-template-columns: repeat(2, 1fr); }
  .metric-row      { grid-template-columns: repeat(4, 1fr); }
  .manifesto-stats { grid-template-columns: repeat(3, 1fr); }
  .contact-grid    { grid-template-columns: 1fr 1fr; }
  .footer-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Capability grid: 2-col */
  .capability-grid { grid-template-columns: repeat(2, 1fr); }

  /* Trust grid: 2-col */
  .trust-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Tri-grid: 2-col */
  .tri-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Cap grid: 2-col */
  .cap-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Show Docs ghost btn */
  .nav-actions .btn--ghost { display: inline-flex; }
}

/* ─── 768px — Tablet portrait ───────────────────────────────── */
@media (min-width: 768px) {
  .grid-3     { grid-template-columns: repeat(3, 1fr); }
  .split      { grid-template-columns: 1fr 1fr; }
  .deploy-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid  { grid-template-columns: repeat(3, 1fr); }
  .capability-grid { grid-template-columns: repeat(3, 1fr); }
  .list-grid  { grid-template-columns: repeat(2, 1fr); }
  .orbit-wrap { grid-template-columns: 1fr 360px; }
  .orbit-panel { min-height: 460px; }

  .hero-cta .btn--lg,
  .hero-cta .ghost-btn { flex: 0 0 auto; min-width: 0; }

  .hero-metrics { grid-template-columns: repeat(4, 1fr); max-width: 100%; }

  /* Pipeline goes horizontal */
  .pipeline {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
  .pipeline::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), var(--line), transparent);
    pointer-events: none;
    z-index: 0;
  }
  .pipeline-step {
    flex: 1;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 4px;
  }
  .pipeline-step:not(:last-child)::after { display: none; }
  .pipeline-icon { margin: 0 auto 12px; }

  /* Deploy grid for 3-card inner pages: full-width single card */
  .deploy-grid { gap: 18px; }
}

/* ─── 860px — Show desktop nav, hide hamburger ───────────────── */
@media (min-width: 860px) {
  .menu-btn  { display: none; }
  .nav-links { display: flex; }

  /* Hero: 2-column layout — FIXED: removed invalid minmax() from flex */
  .hero-grid {
    flex-direction: row;
    align-items: center;
    min-height: calc(100dvh - var(--header-h));
    gap: clamp(40px, 5vw, 80px);
  }
  .hero-copy {
    flex: 0 0 52%;
    width: 52%;
    max-width: 620px;
    min-width: 300px;
  }
  .hero-visual {
    display: block;
    flex: 1;
    min-width: 0;
  }
  .hero-canvas-wrap { max-width: 100%; }
}

/* ─── 900px — Better split on medium desktops ────────────────── */
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
}

/* ─── 1024px — Desktop ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .grid-2  { gap: 22px; }
  .grid-3  { gap: 22px; }

  /* Capability: 4-col */
  .capability-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* Deploy: 2-col stays; 3-card pages use modifier */
  .deploy-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  /* 3-col deploy for pages with 3 cards (security, engineering, etc.) */
  .deploy-grid--3 { grid-template-columns: repeat(3, 1fr); }

  /* Trust: 3-col */
  .trust-grid  { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  /* Security: 3-col */
  .security-grid { grid-template-columns: repeat(3, 1fr); }

  /* List grid: 3-col */
  .list-grid { grid-template-columns: repeat(3, 1fr); }

  /* Orbit */
  .orbit-wrap  { gap: 22px; }
  .orbit-panel { min-height: 540px; }

  /* Footer: 5-col */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }

  /* Tri-grid: 3-col */
  .tri-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  /* Cap-grid: 3-col */
  .cap-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ─── 1280px — Wide desktop ──────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --max: 1320px; }

  .hero h1 { max-width: 700px; }

  .footer-bottom { flex-direction: row; align-items: center; }

  /* Deploy: optionally 3-col+ on very wide pages */
  .deploy-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── 1440px — Large display ─────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --max: 1380px;
    --section-py: clamp(80px, 7vw, 128px);
  }
}

/* ─── 1536px — XL display ────────────────────────────────────── */
@media (min-width: 1536px) {
  :root { --max: 1440px; }
}

/* ─── Small breakpoint refinements ──────────────────────────── */

/* At exactly 360–430px, keep headings tight */
@media (max-width: 430px) {
  .hero h1 { letter-spacing: -.04em; line-height: 1.02; }

  /* Full-width CTA buttons on smallest phones */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn--lg,
  .hero-cta .ghost-btn { flex: 1 1 100%; width: 100%; text-align: center; }

  /* Stack CTA row on legal/section CTAs */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: center; }

  /* Tighter page-hero padding */
  .ph-inner { padding: 22px 18px; }

  /* Tighter section headers */
  .section-header { margin-bottom: clamp(24px, 5vw, 40px); }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
  .status-dot { animation: none; }
  .live-dot   { animation: none; }
}

/* ─── SAFE AREA / NOTCH ──────────────────────────────────────────── */
@supports (padding: max(0px)) {
  .site-header {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .mobile-overlay__header,
  .mobile-overlay__nav,
  .mobile-overlay__footer {
    padding-left:  max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
  .footer-bottom {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ─── FOCUS STYLES (accessibility) ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible { outline-radius: var(--r-xs); }

/* ─── PRINT ──────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .mobile-overlay,
  .hero-visual,
  .hero-signal-canvas,
  .footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════
   MIOS FINAL POLISH PASS — mobile/desktop hardening
   Applied after Claude-generated base styles. Content preserved.
════════════════════════════════════════════════════════════════ */
:root{
  --z-menu: 500;
  --z-header: 400;
  --premium-line: rgba(245,158,11,.18);
  --premium-line-2: rgba(148,163,184,.12);
  --premium-panel: rgba(7,16,31,.86);
  --premium-panel-strong: rgba(8,18,34,.96);
  --premium-shadow: 0 20px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
body{isolation:isolate;background:#050B14;}
main{position:relative;z-index:1;overflow:hidden;}
.container{max-width:var(--max);}
*{min-width:0;}
a,button,input,select,textarea{touch-action:manipulation;}

/* Header: stronger, cleaner and impossible to overflow */
.site-header{height:auto;min-height:var(--header-h);}
.site-header .wrap{min-height:var(--header-h);padding-block:10px;}
.brand{max-width:100%;}
.brand-mark{width:40px;height:40px;border-radius:12px;}
.brand-text small{max-width:170px;overflow:hidden;text-overflow:ellipsis;}
.nav-actions{margin-left:auto;}
.nav-links a{font-size:13px;letter-spacing:.015em;padding:9px 13px;}
.nav-links a,.footer a,.doc-list a,.resource-item{outline-offset:4px;}
.nav-links a:focus-visible,.footer a:focus-visible,.doc-list a:focus-visible,.resource-item:focus-visible{outline:2px solid var(--amber);}

/* Hero: more composed and premium */
.hero{min-height:auto;padding:clamp(70px,8vw,128px) 0 clamp(64px,7vw,104px);}
.hero::before{opacity:.9;}
.hero-grid{align-items:center;}
.hero-copy{width:100%;}
.hero h1{font-size:clamp(3.1rem,7.15vw,6.75rem);line-height:.92;letter-spacing:-.07em;max-width:780px;margin-bottom:26px;}
.hero p{font-size:clamp(1rem,1.14vw,1.18rem);line-height:1.78;color:#a7bdd4;max-width:620px;}
.hero-eyebrow{max-width:100%;white-space:normal;line-height:1.35;padding:9px 15px;}
.hero-cta{gap:14px;margin-top:34px;}
.hero-cta .btn--lg,.hero-cta .ghost-btn{min-height:52px;}
.hero-metrics{max-width:620px;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:10px;background:linear-gradient(180deg,rgba(7,16,31,.78),rgba(5,11,20,.68));box-shadow:var(--premium-shadow);}
.hero-metric{border-radius:14px;background:rgba(255,255,255,.025);}
.hero-canvas-wrap{filter:drop-shadow(0 40px 90px rgba(0,0,0,.54));}
.hero-badge{box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);}

/* Premium surface system */
.panel,.cap-card,.deploy-card,.trust-card,.feature-card,.principle-card,.security-card,.side-item,.metric,.resource-item,.feature-item,.pipeline-step,.ph-inner,.cta-inner,.orbit-panel,.doc-list a,.form-group input,.form-group select,.form-group textarea{
  background:linear-gradient(180deg,rgba(13,27,48,.88),rgba(5,13,27,.90));
  border-color:var(--premium-line-2);
  box-shadow:0 14px 55px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel,.cap-card,.deploy-card,.trust-card,.feature-card,.principle-card,.security-card,.side-item,.resource-item,.feature-item,.pipeline-step,.ph-inner,.cta-inner,.orbit-panel{overflow:hidden;}
.cap-card::after,.deploy-card::after,.trust-card::before,.feature-card::after,.principle-card::after,.security-card::after,.side-item::after,.resource-item::after,.feature-item::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.22),transparent);opacity:.55;pointer-events:none;
}
.cap-card,.deploy-card,.trust-card,.feature-card,.principle-card,.security-card,.side-item,.resource-item,.feature-item{position:relative;}
.cap-card:hover,.deploy-card:hover,.trust-card:hover,.feature-card:hover,.principle-card:hover,.security-card:hover,.side-item:hover,.resource-item:hover,.feature-item:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.28);box-shadow:0 22px 70px rgba(0,0,0,.38),0 0 30px rgba(245,158,11,.055),inset 0 1px 0 rgba(255,255,255,.05);}
.cap-card p,.deploy-card p,.trust-card p,.feature-card p,.principle-card p,.side-item p,.feature-item p,.legal-section p,.legal-section li{color:#9fb2c7;}
.cap-card h4,.deploy-card h3,.trust-card h4,.feature-card h4,.principle-card h3,.side-item h4,.feature-item h4{color:#f3f8ff;}

/* Page heroes / legal pages */
.page-hero{padding-top:clamp(34px,5vw,70px);}
.ph-inner{position:relative;box-shadow:0 26px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);}
.ph-inner::after{content:"";position:absolute;inset:auto 24px 0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.55;}
.page-hero h1{font-size:clamp(2.35rem,5.2vw,5.1rem);line-height:.98;max-width:970px;}
.page-hero p{max-width:860px;color:#a8bad0;font-size:clamp(1rem,1.18vw,1.16rem);}
.legal-body{max-width:920px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:28px;background:rgba(5,13,27,.42);box-shadow:var(--premium-shadow);}
.legal-section{padding:clamp(28px,4vw,56px) 0;}
.legal-section h2{font-size:clamp(1.35rem,2.2vw,2rem);}
.legal-section h3{font-size:clamp(1.05rem,1.45vw,1.25rem);}

/* Footer */
.footer{background:linear-gradient(180deg,rgba(5,11,20,.96),#02050b);}
.footer-grid{align-items:start;}
.footer-brand p,.footer-brand address{max-width:360px;}
.footer-col a{padding:7px 0;}
.footer-bottom{gap:16px;}

/* Contact form: premium and usable */
.contact-form{padding:clamp(20px,2.2vw,28px);border:1px solid var(--line);border-radius:28px;background:rgba(5,13,27,.45);box-shadow:var(--premium-shadow);}
.form-group input,.form-group select,.form-group textarea{min-height:52px;}
.form-group textarea{min-height:138px;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.12),0 0 30px rgba(245,158,11,.08);}
.form-message{padding:14px 16px;border-radius:14px;border:1px solid rgba(16,185,129,.28);background:rgba(16,185,129,.08);color:#b7f7d5;font-size:14px;line-height:1.55;}
.form-message--error{border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.08);color:#fecaca;}

/* Better diagram/list behavior */
.pipeline{position:relative;}
.pipeline-step{border-radius:18px;}
.doc-list a,.resource-item{min-height:56px;}
.resource-title,.doc-list a span:first-child{overflow-wrap:anywhere;}
.table-wrap{max-width:100%;}

/* Mobile overlay: fixed above header; usable on every phone */
.mobile-overlay{z-index:var(--z-menu);overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);}
body.menu-open{overflow:hidden;touch-action:none;}
.mobile-overlay__nav{overflow:visible;}
.mobile-overlay__link{min-height:58px;}
.mobile-overlay__footer{position:relative;margin-top:auto;}

/* Desktop polish */
@media (min-width:860px){
  .site-header .wrap{gap:18px;}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(44px,5vw,92px);min-height:calc(100dvh - var(--header-h));}
  .hero-copy{width:auto;max-width:none;}
  .hero-visual{display:block;min-width:0;}
  .hero-canvas-wrap{height:min(660px,66vh);min-height:520px;}
  .split{align-items:start;}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;}
}
@media (min-width:1024px){
  .section-header{margin-bottom:clamp(42px,5vw,72px);}
  .capability-grid{gap:18px;}
  .deploy-grid,.tri-grid,.cap-grid,.security-grid,.trust-grid{gap:20px;}
  .page-hero{padding-bottom:44px;}
}
@media (min-width:1280px){
  .nav-links{gap:6px;}
  .nav-links a{padding-inline:15px;}
}

/* Tablet */
@media (max-width:1023px){
  :root{--header-h:66px;}
  .nav-actions .btn:not(.btn--ghost){padding-inline:16px;}
  .section{padding:clamp(56px,8vw,86px) 0;}
  .ph-inner{border-radius:24px;}
  .hero h1{font-size:clamp(3rem,10vw,5.5rem);}
}

/* Mobile: no broken layouts, no overflow */
@media (max-width:859px){
  :root{--gutter:clamp(18px,5vw,24px);--section-py:64px;}
  .site-header{position:sticky;}
  .site-header .wrap{gap:10px;}
  .brand-mark{width:36px;height:36px;border-radius:10px;}
  .brand-text strong{font-size:14px;letter-spacing:.055em;}
  .brand-text small{font-size:7px;max-width:138px;letter-spacing:.11em;}
  .nav-actions{gap:8px;}
  .nav-actions>.btn{display:none!important;}
  .menu-btn{width:42px;height:42px;}
  .hero{padding:54px 0 58px;min-height:auto;}
  .hero-grid{gap:28px;}
  .hero h1{font-size:clamp(3rem,13vw,4.65rem);line-height:.94;letter-spacing:-.065em;margin-bottom:22px;}
  .hero p{font-size:1rem;line-height:1.76;max-width:100%;}
  .hero-eyebrow{font-size:9.5px;letter-spacing:.13em;margin-bottom:22px;}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px;}
  .hero-cta .btn--lg,.hero-cta .ghost-btn{width:100%;min-height:52px;justify-content:center;text-align:center;}
  .hero-metrics{grid-template-columns:1fr 1fr;max-width:100%;margin-top:28px;padding:8px;border-radius:18px;}
  .hero-metric{padding:14px 12px;}
  .hero-metric strong{font-size:15px;}
  .made-india{font-size:11px;max-width:100%;white-space:normal;}
  .hero-visual{display:none!important;}
  .hero-signal-canvas{opacity:.42;}
  .section-header,.section-header--center{text-align:left;}
  .section-header p{max-width:100%;}
  .page-hero h1{font-size:clamp(2.25rem,11vw,3.85rem);line-height:.98;letter-spacing:-.055em;}
  .page-hero p{font-size:1rem;line-height:1.72;}
  .ph-inner{padding:28px 20px;border-radius:22px;}
  .split,.grid-2,.grid-3,.deploy-grid,.tri-grid,.cap-grid,.security-grid,.trust-grid,.capability-grid,.list-grid,.contact-grid{grid-template-columns:1fr!important;}
  .panel,.cap-card,.deploy-card,.trust-card,.feature-card,.principle-card,.security-card,.side-item,.resource-item,.feature-item{border-radius:20px;}
  .cap-card,.deploy-card,.trust-card,.feature-card,.principle-card,.security-card{padding:22px 20px;}
  .pipeline{display:grid;grid-template-columns:1fr;gap:12px;}
  .pipeline::before{display:none!important;}
  .pipeline-step{flex-direction:row;text-align:left;margin:0!important;padding:18px;}
  .pipeline-step::after{display:none!important;}
  .pipeline-icon{margin:0 12px 0 0;}
  .orbit-panel{min-height:300px;}
  .doc-list a{align-items:flex-start;gap:14px;flex-direction:column;}
  .resource-item{align-items:flex-start;flex-direction:column;gap:10px;}
  .resource-arrow{display:none;}
  .metric-row{grid-template-columns:1fr 1fr;}
  .contact-form{padding:18px;border-radius:22px;}
  .form-row{grid-template-columns:1fr!important;gap:14px;}
  .footer-main{padding:46px 0 30px;}
  .footer-grid{grid-template-columns:1fr!important;gap:26px;}
  .footer-col h5{margin-bottom:10px;}
  .footer-col a{padding:8px 0;font-size:14px;}
  .footer-bottom{align-items:flex-start;}
  .footer-legal{gap:10px 16px;}
  .mobile-overlay__header{padding:14px 18px;}
  .mobile-overlay__nav{padding:18px;gap:8px;}
  .mobile-overlay__link{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);padding:16px 18px;font-size:clamp(1.25rem,6vw,1.8rem);}
  .mobile-overlay__footer{padding:18px;align-items:stretch;gap:16px;}
  .mobile-overlay__footer .btn{width:100%;min-height:48px;}
}

/* Small phones */
@media (max-width:430px){
  :root{--gutter:18px;--header-h:64px;}
  .brand-text small{display:none;}
  .brand-mark{width:34px;height:34px;}
  .menu-btn{width:40px;height:40px;}
  .hero{padding-top:44px;}
  .hero h1{font-size:clamp(2.8rem,14.8vw,4rem);}
  .hero-eyebrow{display:flex;width:100%;justify-content:flex-start;padding:8px 11px;}
  .hero-metrics{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .section--tight{padding:44px 0;}
  .page-hero{padding-top:24px;}
  .ph-inner{padding:24px 18px;border-radius:20px;}
  .page-hero h1{font-size:clamp(2.05rem,11.7vw,3.1rem);}
  h2{font-size:clamp(1.65rem,8vw,2.35rem);}
  .eyebrow{font-size:9.5px;letter-spacing:.15em;}
  .legal-body{padding:20px 18px;border-radius:20px;}
  .cta-inner{padding:48px 0;}
  .mobile-overlay__link{font-size:1.32rem;min-height:56px;}
}
@media (max-width:370px){
  .container{width:calc(100% - 32px);}
  .hero h1{font-size:2.65rem;}
  .brand-text strong{font-size:13px;}
  .mobile-overlay__link{font-size:1.18rem;padding:14px 15px;}
  .btn,.ghost-btn{font-size:13px;}
}

/* Motion safety */
@media (prefers-reduced-motion:reduce),(max-width:480px){
  .hero-badge,.reveal{animation:none!important;transition:none!important;}
}

/* ================================================================
   DESKTOP HERO VISUAL CORRECTION — 2026-05-07
   Goal: remove right-side cropping, keep hero content unchanged,
   and make the MIOS system graphic feel intentional on desktop.
   ================================================================ */
@media (min-width: 1024px) {
  .hero {
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(54px, 6vh, 76px);
  }

  .hero .wrap {
    max-width: min(1440px, calc(100vw - 96px));
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(520px, 0.96fr) minmax(500px, 0.86fr) !important;
    gap: clamp(44px, 4vw, 72px) !important;
    align-items: center !important;
    min-height: calc(100svh - var(--header-h) - 72px) !important;
  }

  .hero-copy {
    width: auto !important;
    max-width: 670px !important;
  }

  .hero h1 {
    font-size: clamp(4.9rem, 6.15vw, 7rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.065em !important;
  }

  .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
    position: relative !important;
  }

  .hero-canvas-wrap {
    width: min(100%, 620px) !important;
    height: clamp(500px, 58vh, 630px) !important;
    min-height: 500px !important;
    aspect-ratio: 1 / 0.98 !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow:
      0 32px 90px rgba(0, 0, 0, .42),
      inset 0 0 0 1px rgba(56, 189, 248, .10),
      0 0 0 1px rgba(148, 163, 184, .08) !important;
  }

  .hero-canvas-wrap::before {
    inset: 22px !important;
    opacity: .82 !important;
  }

  .orbit-system {
    position: absolute !important;
    inset: 10% 9% !important;
    transform: none !important;
  }

  .orbit-center {
    width: 104px !important;
    height: 104px !important;
  }

  .orbit-node {
    font-size: clamp(13px, 0.9vw, 16px) !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .8) !important;
  }

  .hero-stat-badge {
    max-width: 176px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
  }

  .badge-a {
    top: 13% !important;
    right: 18px !important;
  }

  .badge-b {
    left: 18px !important;
    top: 43% !important;
  }

  .badge-c {
    right: 20px !important;
    bottom: 13% !important;
  }

  .hero-stats {
    max-width: 620px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .hero .wrap {
    max-width: min(1180px, calc(100vw - 64px));
  }

  .hero-grid {
    grid-template-columns: minmax(470px, 1fr) minmax(440px, 0.88fr) !important;
    gap: 40px !important;
  }

  .hero h1 {
    font-size: clamp(4.2rem, 5.6vw, 5.6rem) !important;
  }

  .hero-copy {
    max-width: 590px !important;
  }

  .hero-canvas-wrap {
    width: min(100%, 540px) !important;
    height: clamp(470px, 55vh, 560px) !important;
    min-height: 470px !important;
  }

  .hero-stat-badge {
    transform: scale(.92) !important;
    transform-origin: center !important;
  }
}

@media (min-width: 860px) and (max-width: 1023px) {
  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 760px !important;
  }

  .hero-visual {
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-canvas-wrap {
    width: min(100%, 680px) !important;
    margin-inline: auto !important;
  }
}