/* ═══════════════════════════════════════════════════════════════════════════ */
/* EAOS PLATFORM — Enhanced Design System                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Refined Color Palette */
  --ink: #051620;
  --ink-2: #0a2332;
  --ink-3: #0f2f40;
  --paper: #f5f8f7;
  --paper-2: #eaf2f0;
  --white: #ffffff;
  --muted: #8fa7ac;
  --text: #172d35;
  --text-light: #4a6b73;
  
  /* Accent Colors - Enhanced */
  --teal: #27d4a0;
  --teal-2: #5fead7;
  --teal-light: #a8f3d8;
  --gold: #d4a856;
  --gold-light: #e8c87a;
  --blue: #5a9ef0;
  --blue-light: #7aaff5;
  --blue-dark: #2a5ba8;
  --orange: #ea9451;
  --coral: #ff7d6f;
  --danger: #ff6b63;
  
  /* Semantics */
  --success: var(--teal);
  --warning: var(--gold);
  --info: var(--blue);
  --critical: var(--danger);
  
  /* Depth & Effects */
  --line: rgba(255,255,255,.08);
  --line-light: rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow: 0 12px 40px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 70px rgba(4, 22, 29, .18);
  --glow: 0 0 30px rgba(39,212,160,.15);
  
  /* Shape & Space */
  --radius: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max: 1240px;
  
  /* Typography Scale */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Segoe UI", Tahoma, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", monospace;
  
  /* Letter Spacing */
  --track-tight: -.02em;
  --track-normal: 0;
  --track-wide: .03em;
  --track-wider: .06em;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  font-size: 15px;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

::selection {
  background: var(--teal);
  color: var(--ink);
  text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}

h1 { font-size: clamp(48px, 7vw, 86px); font-weight: 800; }
h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 700; }
h3 { font-size: clamp(20px, 3vw, 32px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
h5 { font-size: 16px; font-weight: 600; }
h6 { font-size: 14px; font-weight: 600; letter-spacing: var(--track-wide); }

p { margin: 0; }
small { font-size: 12px; }
em { font-style: italic; }
strong { font-weight: 700; }
code { font-family: var(--font-mono); font-size: 13px; }

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; position: relative; }

.skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--teal);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}

.skip-link:focus { top: 16px; outline: 2px solid var(--ink); outline-offset: 2px; }

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  height: 3px;
  background: var(--paper-2);
}

.progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 0 12px rgba(39,212,160,.4);
  transition: width .1s linear;
}

.nav {
  position: fixed;
  top: 3px;
  inset-inline: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(5,22,32,.95) 0%, rgba(5,22,32,.85) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  color: var(--white);
}

.nav-inner {
  width: min(var(--max), calc(100% - 40px));
  height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.brand:hover { opacity: .8; }

.brand-mark {
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid rgba(39,212,160,.6);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--teal-2);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  background: linear-gradient(145deg, rgba(39,212,160,.12), rgba(255,255,255,.04));
  box-shadow: 0 0 20px rgba(39,212,160,.08), inset 0 0 20px rgba(39,212,160,.08);
}

.brand strong { display: block; font-size: 14px; line-height: 1.3; font-weight: 700; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; direction: ltr; text-align: right; }

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

.nav-links a {
  padding: 9px 13px;
  border-radius: 10px;
  color: #d0e0e4;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease;
  position: relative;
}

.nav-links a:hover, .nav-links a:focus-visible { background: rgba(39,212,160,.12); color: var(--teal-2); outline: none; }
.nav-links a.is-active { background: linear-gradient(135deg, rgba(39,212,160,.2), rgba(39,212,160,.08)); color: var(--teal-2); box-shadow: 0 0 12px rgba(39,212,160,.12); }

.nav-cta { border: 1.5px solid var(--teal) !important; color: var(--teal-2) !important; background: rgba(39,212,160,.08) !important; }
.nav-cta:hover { background: rgba(39,212,160,.18) !important; box-shadow: 0 0 16px rgba(39,212,160,.2) !important; }

.menu-btn {
  display: none;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-size: 20px;
  transition: all .2s ease;
}

.menu-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }

section { padding: 100px 0; position: relative; }
.section-dark { color: var(--white); background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink-3) 100%); }
.section-soft { background: var(--paper); }

.section-head {
  text-align: center;
  margin-bottom: 72px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.section-head .kicker {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(39,212,160,.12);
  color: var(--teal-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-head h2 { margin: 20px 0; }
.section-head p { font-size: 16px; color: var(--text-light); line-height: 1.8; }
.section-dark .section-head p { color: #a8c5cb; }

.hero {
  min-height: 940px;
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 20% 30%, rgba(39,212,160,.12), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(90,158,240,.1), transparent 32%),
    linear-gradient(135deg, #051620 0%, #0a2332 50%, #051620 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  pointer-events: none;
}

.orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(39,212,160,.12);
  top: 80px;
  left: -250px;
  box-shadow:
    0 0 0 80px rgba(39,212,160,.015),
    0 0 60px rgba(39,212,160,.1);
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--teal-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--teal), transparent); }

.hero h1 {
  max-width: 780px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,.8) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.03em;
}

.hero h1 em { color: var(--teal-2); font-style: normal; -webkit-text-fill-color: var(--teal-2); }

.lead {
  max-width: 740px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.75);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.9;
}

.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
  pointer-events: none;
}

.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(39,212,160,.3);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(39,212,160,.4); }

.btn-secondary {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
}

.btn-secondary:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.hero-proof span { font-size: 13px; color: rgba(255,255,255,.6); padding-left: 20px; position: relative; }
.hero-proof span::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }

.hero-panel { position: relative; display: grid; gap: 20px; min-height: 580px; }

.float-tag {
  position: absolute;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.tag-a { top: 20px; right: 0; background: rgba(39,212,160,.15); border-color: rgba(39,212,160,.3); color: var(--teal-2); }
.tag-b { top: 120px; left: 0; background: rgba(90,158,240,.15); border-color: rgba(90,158,240,.3); color: var(--blue-light); }

.network-card {
  padding: 32px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.panel-head strong { font-size: 16px; color: var(--white); }

.live {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(39,212,160,.2);
  color: var(--teal-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

.domain { padding: 20px; margin-bottom: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.domain-title { margin-bottom: 16px; }
.domain-title strong { display: block; font-size: 14px; color: var(--white); }
.domain-title span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.domain.remote { background: rgba(90,158,240,.06); border-color: rgba(90,158,240,.15); }

.service-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.service {
  min-height: 56px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
}

.service span { font-size: 10px; line-height: 1.4; }
.service b { display: block; font-size: 11px; color: var(--teal-2); margin-bottom: 2px; direction: ltr; }

.federation-line {
  padding: 16px;
  text-align: center;
  background: rgba(39,212,160,.08);
  border-radius: 12px;
  border: 1px dashed rgba(39,212,160,.2);
  color: var(--teal-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 16px 0;
}

.media-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(212,168,86,.08);
  border: 1px solid rgba(212,168,86,.15);
  font-size: 11px;
  color: #d4b89a;
}

.media-note b { color: var(--gold); flex-shrink: 0; font-size: 16px; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: var(--line);
  border-radius: 20px;
  overflow: hidden;
  padding: 1px;
}

.trust-item { padding: 32px 24px; background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border-right: 1px solid var(--line); text-align: center; }
.trust-item:last-child { border-right: none; }
.trust-item strong { display: block; font-size: 14px; color: var(--white); margin-bottom: 8px; }
.trust-item span { font-size: 12px; color: var(--muted); line-height: 1.6; }

.positioning { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }

.quote-card {
  min-height: 320px;
  padding: 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.quote-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(39,212,160,.1), transparent 70%); pointer-events: none; }

.quote-mark { font-size: 84px; color: rgba(39,212,160,.15); line-height: .6; display: block; margin-bottom: -10px; }

blockquote { margin: 0; font-size: clamp(24px, 4vw, 40px); line-height: 1.5; font-weight: 300; position: relative; z-index: 1; }

.quote-card small { display: block; margin-top: 24px; font-size: 12px; color: var(--muted); letter-spacing: .05em; }

.position-copy { position: relative; z-index: 1; }
.position-copy h2 { margin-bottom: 24px; }
.position-copy p { font-size: 16px; color: var(--text-light); line-height: 1.9; margin-bottom: 20px; }

.micro-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
  font-size: 13px;
  color: var(--text);
}

.micro-flow i { color: var(--teal); font-style: normal; font-weight: 800; }

.value-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

.value-card {
  padding: 32px 28px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  overflow: hidden;
}

.value-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(39,212,160,.15), transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.value-card:hover { transform: translateY(-8px); border-color: rgba(39,212,160,.3); box-shadow: 0 12px 40px rgba(39,212,160,.15); }
.value-card:hover::before { opacity: 1; }

.value-card .num { display: inline-block; margin-bottom: 16px; padding: 8px 14px; border-radius: 10px; background: rgba(39,212,160,.15); color: var(--teal-2); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.value-card h3 { position: relative; z-index: 1; margin-bottom: 12px; font-size: 18px; color: var(--white); }
.value-card p { position: relative; z-index: 1; font-size: 13px; color: #9fb5ba; line-height: 1.7; }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.cap-card {
  padding: 28px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line-light);
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}

.cap-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.1); border-color: var(--line-light); }

.cap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }

.cap-icon { display: inline-block; padding: 8px 12px; border-radius: 10px; background: rgba(39,212,160,.1); color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .05em; direction: ltr; }

.status-chip { display: inline-block; padding: 6px 12px; border-radius: 8px; background: rgba(39,212,160,.15); color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.status-chip.target { background: rgba(90,158,240,.15); color: var(--blue); }

.cap-card h3 { margin-bottom: 12px; font-size: 18px; color: var(--text); }
.cap-card > p { font-size: 13px; color: var(--text-light); line-height: 1.8; margin-bottom: 20px; min-height: 60px; }

.cap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cap-list li { font-size: 12px; color: #666; padding-left: 20px; position: relative; line-height: 1.6; }
.cap-list li::before { content: "→"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }

.context-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.flow-step {
  padding: 28px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.flow-step b {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(39,212,160,.2);
  color: var(--teal-2);
  display: grid;
  place-items: center;
  font-size: 14px;
  direction: ltr;
}

.flow-step h3 { margin-bottom: 8px; font-size: 15px; color: var(--white); }
.flow-step p { font-size: 12px; color: #9fb5ba; line-height: 1.6; }

.security-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; }

.mode-selector { padding: 28px; border: 1px solid var(--line-light); border-radius: 22px; background: var(--white); }
.mode-selector h3 { margin: 0 0 12px; font-size: 18px; color: var(--text); }
.mode-selector > p { margin: 0 0 20px; color: var(--text-light); font-size: 13px; }

.mode-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line-light);
  background: #fafbfa;
  color: var(--text);
  text-align: right;
  transition: all .2s ease;
}

.mode-btn:hover { border-color: var(--teal); background: linear-gradient(135deg, rgba(39,212,160,.08), rgba(39,212,160,.02)); }
.mode-btn small { color: var(--text-light); font-size: 11px; }
.mode-btn[aria-selected="true"] { border-color: var(--teal); background: linear-gradient(135deg, rgba(39,212,160,.12), rgba(39,212,160,.04)); box-shadow: 0 0 16px rgba(39,212,160,.15); }

.mode-output {
  position: relative;
  overflow: hidden;
  padding: 36px;
  border-radius: 22px;
  color: var(--white);
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-lg);
}

.mode-output::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(39,212,160,.15), transparent 40%); pointer-events: none; }
.mode-output h3 { position: relative; z-index: 1; margin: 0 0 12px; font-size: 24px; }
.mode-output > p { position: relative; z-index: 1; color: #a8c5cb; font-size: 14px; line-height: 1.7; }

.mode-matrix { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }

.mode-fact { padding: 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.mode-fact span { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.mode-fact strong { display: block; margin-top: 8px; color: var(--white); font-size: 13px; }

.security-layers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 28px; position: relative; z-index: 1; }

.security-layer { padding: 20px 16px; text-align: center; border-radius: 16px; border: 1px solid var(--line-light); background: var(--white); transition: all .2s ease; }
.security-layer:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: var(--teal); }
.security-layer b { display: block; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .04em; direction: ltr; margin-bottom: 8px; }
.security-layer span { color: var(--text-light); font-size: 11px; line-height: 1.5; }

.architecture-shell {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
}

.arch-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; color: #a8bec2; font-size: 11px; font-weight: 600; }
.arch-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 8px; background: var(--dot); }
.arch-legend .proven { --dot: var(--teal); }
.arch-legend .target { --dot: var(--blue); }
.arch-legend .gate { --dot: var(--gold); }

.arch-stack { display: grid; gap: 16px; }
.arch-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: stretch; }
.arch-label { display: grid; place-items: center; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; background: rgba(255,255,255,.03); }
.arch-items { display: grid; grid-template-columns: repeat(var(--cols,4), 1fr); gap: 10px; }

.arch-node {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 14px;
  text-align: center;
  color: #dbe9e9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 11px;
  transition: all .2s ease;
}

.arch-node:hover { background: rgba(255,255,255,.08); border-color: rgba(39,212,160,.3); }
.arch-node b { display: block; color: var(--teal-2); direction: ltr; font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.arch-node.target b { color: #7aaff5; }
.arch-node.gate b { color: #e8c87a; }

.arch-connector { text-align: center; height: 28px; color: var(--teal); font-size: 18px; line-height: 28px; opacity: .6; }

.fed-lanes { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 12px; align-items: center; margin-top: 32px; }
.fed-domain { padding: 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); }
.fed-domain strong { display: block; margin-bottom: 8px; font-size: 14px; color: var(--white); }
.fed-domain span { color: #97afb4; font-size: 11px; }

.lane { display: grid; gap: 10px; text-align: center; color: var(--muted); font-size: 9px; }
.lane i { display: block; height: 2px; background: linear-gradient(90deg, var(--teal), var(--blue)); position: relative; }
.lane i:last-of-type { background: linear-gradient(90deg, var(--gold), var(--orange)); }

.arch-note { margin: 28px 0 0; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(212,168,86,.24); background: rgba(212,168,86,.08); color: #ccbfa4; font-size: 11px; line-height: 1.7; }
.arch-note strong { color: #ead9b8; }

.kernel-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

.kernel-step {
  padding: 20px 14px;
  min-height: 150px;
  border-radius: 16px;
  border: 1px solid var(--line-light);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all .2s ease;
}

.kernel-step:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.kernel-step b { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; background: var(--ink); color: var(--teal-2); direction: ltr; font-size: 11px; font-weight: 700; }
.kernel-step h3 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.kernel-step p { margin: 0; color: #687d82; font-size: 11px; line-height: 1.5; }

.boundary-note { margin-top: 28px; padding: 22px; border-radius: 16px; background: #e5f0ed; border: 1px solid #c8ddd9; color: #35545b; font-size: 12px; line-height: 1.7; }
.boundary-note strong { color: var(--ink); }

.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.industry-card {
  min-height: 220px;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--line-light);
  background: var(--white);
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}

.industry-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.08); border-color: var(--teal); }
.industry-card .mono { color: var(--teal); font-size: 10px; font-weight: 900; direction: ltr; letter-spacing: .05em; }
.industry-card h3 { margin: 16px 0 10px; color: var(--text); font-size: 17px; }
.industry-card p { margin: 0; color: var(--text-light); font-size: 12px; line-height: 1.7; }

.maturity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.maturity-card { padding: 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); transition: all .2s ease; }
.maturity-card:hover { border-color: rgba(39,212,160,.3); background: rgba(255,255,255,.06); }
.maturity-card h3 { margin: 0 0 12px; color: var(--white); font-size: 16px; }

.maturity-state { display: flex; align-items: center; gap: 8px; color: var(--teal-2); font-size: 10px; font-weight: 800; }
.maturity-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.maturity-card p { color: #9fb5ba; font-size: 11px; line-height: 1.6; }
.maturity-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.maturity-card li { color: #c3d1d3; font-size: 10px; padding-right: 12px; position: relative; line-height: 1.5; }
.maturity-card li::before { content: "—"; position: absolute; right: 0; color: var(--gold); font-weight: 800; }

.honesty { margin-top: 28px; padding: 20px; border-radius: 16px; background: rgba(255,139,133,.08); border: 1px solid rgba(255,139,133,.2); color: #d7c1c0; font-size: 11px; line-height: 1.7; }

.cta-section { padding: 0 0 120px; background: var(--paper); }

.cta-box {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 8vw, 80px);
  border-radius: 32px;
  color: var(--white);
  background:
    radial-gradient(circle at 15% 25%, rgba(39,212,160,.15), transparent 40%),
    linear-gradient(130deg, var(--ink-2), var(--ink));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-lg);
}

.cta-box::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  left: -140px;
  bottom: -180px;
  box-shadow: 0 0 0 60px rgba(255,255,255,.01);
  pointer-events: none;
}

.cta-content { position: relative; z-index: 1; max-width: 800px; }
.cta-box h2 { margin: 0 0 20px; font-size: clamp(32px, 5vw, 56px); line-height: 1.45; }
.cta-box p { color: #a8c5cb; font-size: 15px; line-height: 1.8; }
.cta-meta { margin-top: 24px; color: #7a9299; font-size: 11px; }

footer { padding: 50px 0; color: #7a8f94; background: #04151c; border-top: 1px solid rgba(255,255,255,.04); }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; align-items: center; }
.footer-copy { max-width: 700px; font-size: 11px; line-height: 1.7; }
.footer-badge { padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; direction: ltr; color: var(--teal-2); font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: .04em; background: rgba(39,212,160,.08); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (max-width: 1200px) {
  .hero-grid, .positioning, .security-wrap { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .context-flow { grid-template-columns: repeat(3, 1fr); }
  .security-layers { grid-template-columns: repeat(3, 1fr); }
  .kernel-flow { grid-template-columns: repeat(3, 1fr); }
  .industry-grid, .maturity-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  section { padding: 80px 0; }
  .hero { min-height: auto; padding: 140px 0 80px; }
  .orb { width: 400px; height: 400px; top: 60px; left: -200px; }
  .hero-proof { flex-direction: column; align-items: flex-start; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-inline-start: 0; border-top: 1px solid var(--line); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .context-flow { grid-template-columns: repeat(2, 1fr); }
  .security-layers { grid-template-columns: repeat(2, 1fr); }
  .arch-items { grid-template-columns: repeat(2, 1fr); }
  .fed-lanes { grid-template-columns: 1fr; }
  .kernel-flow { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .maturity-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-inner { height: 66px; }
  .menu-btn { display: grid; place-items: center; }
  .nav-links { position: fixed; top: 69px; inset-inline: 0; height: calc(100vh - 69px); padding: 28px; background: rgba(5,21,27,.98); display: none; flex-direction: column; align-items: stretch; }
  .nav-open .nav-links { display: flex; }
  .nav-links a { padding: 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .hero-panel { min-height: 480px; }
  .tag-a { right: 0; }
  .tag-b { left: 0; }
  .cap-grid, .value-grid { grid-template-columns: 1fr; }
  .arch-row { grid-template-columns: 1fr; }
  .mode-matrix { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .container { width: min(var(--max), calc(100% - 24px)); }
  .brand small { display: none; }
  h1 { font-size: clamp(36px, 10vw, 52px); }
  h2 { font-size: clamp(24px, 6vw, 40px); }
  .hero { padding: 120px 0 60px; }
  .hero-panel { min-height: 420px; }
  .actions { flex-direction: column; }
  .btn { width: 100%; }
  .trust-strip { grid-template-columns: 1fr; margin-top: 40px; }
  .trust-item { border-inline-start: 0; border-top: 1px solid var(--line); }
  .trust-item:first-child { border-top: 0; }
  .security-wrap { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: repeat(2, 1fr); }
  .kernel-flow, .arch-items { grid-template-columns: 1fr; }
  .quote-card { min-height: 320px; padding: 28px; }
  .cta-box { padding: clamp(28px, 5vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Original premium retail-inspired refresh for EAOS (not an LG site copy). */
@font-face { font-family:"Vazirmatn EAOS"; font-style:normal; font-weight:100 900; font-display:swap; src:url("https://cdn.jsdelivr.net/npm/vazirmatn@33.003/Vazirmatn-Variable-font-face-FD.woff2") format("woff2"); }
:root { --ink:#111; --ink-2:#202020; --ink-3:#333; --paper:#fff; --paper-2:#f5f5f5; --text:#111; --text-light:#555; --teal:#a50034; --teal-2:#c4154e; --teal-light:#f8e4eb; --gold:#f4a900; --blue:#2c69a8; --line-light:#e7e7e7; --radius:12px; --radius-md:12px; --radius-sm:8px; --shadow:0 10px 35px rgba(0,0,0,.10); }
body,button,input,select { font-family:"Vazirmatn EAOS",Arial,sans-serif; background:#fff; color:#111; } h1,h2,h3,h4,h5,h6 { font-family:"Vazirmatn EAOS",Arial,sans-serif; letter-spacing:-.04em; }
.progress { height:3px; background:transparent; }.progress > span { background:#a50034; box-shadow:none; }
.lg-topbar { height:31px; position:fixed; z-index:110; top:3px; inset-inline:0; background:#f6f6f6; border-bottom:1px solid #e8e8e8; color:#555; font-size:10px; }.lg-topbar > div { width:min(1440px,calc(100% - 48px)); height:100%; margin:auto; display:flex; align-items:center; justify-content:flex-start; gap:20px; }
.nav { top:34px; background:rgba(255,255,255,.98); color:#111; border-bottom:1px solid #ddd; box-shadow:none; backdrop-filter:blur(10px); }.nav-inner { width:min(1440px,calc(100% - 48px)); height:68px; flex-direction:row; }.brand { gap:11px; }.brand-mark { width:46px; height:46px; border-radius:50%; border:0; color:#fff; background:#a50034; box-shadow:none; font-size:11px; }.brand strong { color:#111; font-size:14px; }.brand small { display:none; }
.nav-links { height:100%; gap:0; margin-right:auto; }.nav-links a { display:flex; align-items:center; padding:0 15px; border-radius:0; color:#161616; font-size:12px; font-weight:650; }.nav-links a:hover,.nav-links a:focus-visible { color:#a50034; background:#fff; }.nav-links a.is-active { background:#fff; color:#a50034; box-shadow:inset 0 -3px 0 #a50034; }.nav-cta { align-self:center; height:auto; padding:10px 17px !important; margin-right:10px; color:#fff !important; background:#a50034 !important; border:0 !important; border-radius:22px !important; box-shadow:none !important; }.nav-cta:hover { background:#820029 !important; }
.menu-btn { color:#111; background:#fff; border-color:#ddd; }.menu-btn:hover { background:#f3f3f3; }
.hero { min-height:780px; padding:175px 0 90px; background:linear-gradient(90deg,rgba(0,0,0,.83) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.08) 78%),url("../files/platform.jpg") center/100% auto,#292929; }.hero::before { opacity:.10; background-size:70px 70px; }.orb { display:none; }.hero-grid { grid-template-columns:1fr .82fr; gap:30px; }.eyebrow { padding:7px 12px; border-radius:20px; background:rgba(255,255,255,.04); color:#fff; font-size:11px; }.eyebrow::before { display:none; }.hero h1 { max-width:690px; font-size:clamp(42px,5.3vw,72px); line-height:1.24; background:none; -webkit-text-fill-color:#fff; }.hero h1 em { color:#fff; -webkit-text-fill-color:#fff; text-decoration:underline; text-decoration-color:#a50034; text-decoration-thickness:7px; text-underline-offset:9px; }.lead { max-width:630px; color:#fff; font-size:17px; }.btn { padding:14px 28px; border-radius:24px; font-weight:700; }.btn-primary { background:#a50034; color:#fff; box-shadow:none; }.btn-primary:hover { background:#820029; box-shadow:none; }.btn-secondary { border-color:#fff; background:#fff; color:#111; }.btn-secondary:hover { background:#f1f1f1; }
.hero-panel { align-self:end; min-height:auto; }.float-tag { display:none; }.network-card { padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.10); backdrop-filter:blur(14px); box-shadow:0 12px 50px rgba(0,0,0,.22); }.panel-head strong { color:#111; }.live { border-radius:20px; color:#a50034; background:rgba(255,255,255,.10); }.domain { border-radius:16px; background:rgba(255,255,255,.10); border-color:#e5e5e5; }.domain.remote { background:rgba(255,255,255,.10); border-color:#e5e5e5; }.domain-title strong { color:#111; }.service { border-radius:12px; background:rgba(255,255,255,.10); border-color:#e5e5e5; }.service b { color:#a50034; }.federation-line { border-radius:14px; color:#a50034; border-color:#e5b9c9; background:rgba(255,246,248,.10); }.media-note { border-radius:14px; }.trust-strip { border-radius:20px; margin-top:50px; background:rgba(255,255,255,.10); }.trust-item { background:rgba(0,0,0,.10); padding:22px 18px; border-radius:16px; }.trust-item strong { color:#fff; }.trust-item span { color:#eee; }
section { padding:92px 0; }.section-soft,section:not(.hero):not(.section-dark) { background:#fff; }.section-dark { background:#1c1c1c; }.section-head { margin-bottom:52px; text-align:right; max-width:740px; margin-right:0; }.section-head .kicker { border-radius:0; padding:0 0 8px; background:transparent; color:#a50034; font-size:12px; letter-spacing:0; border-bottom:2px solid #a50034; }.section-head h2 { color:#111; font-size:clamp(32px,4.6vw,58px); line-height:1.3; }.section-head p { color:#555; }.section-dark .section-head h2 { color:#fff; }.section-dark .section-head p { color:#d5d5d5; }.section-dark .section-head .kicker { color:#fff; border-color:#a50034; background:transparent; }
.quote-card { border-radius:24px; background:rgba(165,0,52,.10); border:0; backdrop-filter:blur(4px); }.quote-card::before { background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 70%); }.quote-mark { color:rgba(255,255,255,.22); }.position-copy p { color:#555; }.micro-flow { border-color:#ddd; }.micro-flow i { color:#a50034; }
.value-grid { gap:14px; }.value-card { border-radius:24px; background:rgba(255,255,255,.06); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.1); padding:29px 24px; }.value-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.2); box-shadow:0 15px 25px rgba(0,0,0,.2); }.value-card::before { background:linear-gradient(135deg,rgba(165,0,52,.55),transparent); }.value-card .num { border-radius:50%; background:#a50034; color:#fff; }.cap-grid,.industry-grid { gap:18px; }.cap-card,.industry-card,.kernel-step,.mode-selector,.security-layer { border-radius:24px; border-color:rgba(255,255,255,.35); box-shadow:none; }.cap-card:hover,.industry-card:hover,.kernel-step:hover { transform:translateY(-5px); border-color:#111; box-shadow:var(--shadow); }.cap-icon,.status-chip { border-radius:20px; background:#f8e4eb; color:#a50034; }.status-chip.target { background:#eee; color:#333; }
.context-flow { gap:12px; }.flow-step { border-radius:24px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); backdrop-filter:blur(6px); }.flow-step b { border-radius:50%; background:#a50034; color:#fff; }.architecture-shell,.mode-output { border-radius:24px; background:rgba(32,32,32,.55); backdrop-filter:blur(6px); }.arch-node,.arch-label { border-radius:14px; }.arch-node b { color:#fff; }.arch-node.target b { color:#e99; }.kernel-step b { border-radius:50%; background:#a50034; color:#fff; }.boundary-note { border-radius:20px; background:rgba(248,228,235,.85); border-color:#efc5d2; }.cta-section { background:#f5f5f5; }.cta-box { border-radius:28px; background:linear-gradient(110deg,rgba(165,0,52,.9),rgba(101,0,31,.9)); }.cta-box::after { border-color:rgba(255,255,255,.25); } footer { background:#111; }.footer-badge { border-radius:20px; border-color:#555; color:#fff; background:transparent; }
@media (max-width:768px) { .lg-topbar > div { width:calc(100% - 24px); justify-content:center; }.lg-topbar span:first-child { display:none; }.nav { top:34px; }.nav-inner { width:calc(100% - 24px); height:64px; }.nav-links { top:98px; height:calc(100vh - 98px); background:#fff; }.nav-links a { padding:16px; border-bottom:1px solid #eee; }.nav-links .nav-cta { margin:14px 0; align-self:stretch; justify-content:center; }.hero { padding:140px 0 65px; min-height:auto; background-position:62% center; }.hero-grid { grid-template-columns:1fr; }.hero-panel { display:none; }.hero h1 { font-size:42px; }.section-head { text-align:right; }.brand-mark { width:40px; height:40px; } }

/* Local images and visual refinements */
body,button,input,select,h1,h2,h3,h4,h5,h6,.brand { font-family:"B Nazanin","Nazanin",serif; }
body, p, li { word-break:normal; overflow-wrap:normal; hyphens:none; }
h1 { text-wrap:pretty; }
h1,h3,.section-head p,.arch-note,.boundary-note,.honesty,.cta-meta { text-wrap:stable; }
.nav-links a,.service span,.status-chip { white-space:nowrap; }

#capabilities {
  background:linear-gradient(90deg,rgba(3,20,35,.88),rgba(3,20,35,.58)),url("../files/capability.jpg") center / cover fixed;
}
#capabilities .section-head h2,#capabilities .section-head p { color:#fff; }
#capabilities .section-head .kicker { color:#fff; border-color:#a50034; }
#capabilities .cap-card { background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:24px; }

#security {
  background:linear-gradient(90deg,rgba(2,18,38,.87),rgba(2,18,38,.58)),url("../files/security.jpg") center / cover fixed;
}
#security .section-head h2,#security .section-head p { color:#fff; }
#security .section-head .kicker { color:#fff; border-color:#76c9ff; }
#security .mode-selector { background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:24px; }
#security .mode-output { background:rgba(32,32,32,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:24px; }
#security .security-layer { background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:20px; border-color:rgba(255,255,255,.4); }

#industries {
  background:linear-gradient(90deg,rgba(32,18,12,.83),rgba(32,18,12,.44)),url("../files/cooperation.jpg") center / cover fixed;
}
#industries .section-head h2,#industries .section-head p { color:#fff; }
#industries .section-head .kicker { color:#fff; border-color:#f6c093; }
#industries .industry-card { background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:24px; }

#readiness {
  background:linear-gradient(90deg,rgba(5,21,27,.82),rgba(5,21,27,.55)),url("../files/transparency.jpg") center / cover fixed;
}
#readiness .section-head h2,#readiness .section-head p { color:#fff; }
#readiness .section-head .kicker { color:#fff; border-color:#27d4a0; }
#readiness .maturity-card { background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:24px; border:1px solid rgba(255,255,255,.4); }
#readiness .maturity-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.6); box-shadow:0 15px 35px rgba(0,0,0,.25); background:rgba(255,255,255,.10); }



/* Colorful, readable architecture chart */
#architecture {
  background:linear-gradient(90deg,rgba(6,8,26,.85),rgba(6,8,26,.55)),url("../files/architecture.jpg") center / cover fixed;
}
#architecture .section-head h2,#architecture .section-head p { color:#fff; }
#architecture .section-head .kicker { color:#fff; border-color:#7fd8ff; }
#architecture .architecture-shell { background:linear-gradient(135deg,rgba(16,31,69,.55),rgba(31,92,128,.5) 50%,rgba(36,49,98,.55)); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 54px rgba(9,20,53,.3); }

#architecture .arch-row { position:relative; }
#architecture .arch-label { color:#fff; background:linear-gradient(135deg,#a50034,#6f1636); border:0; font-size:13px; }
#architecture .arch-items { position:relative; }
#architecture .arch-node { border:0; color:#fff; background:linear-gradient(135deg,#2858a8,#257fab); box-shadow:0 7px 16px rgba(0,0,0,.17); font-size:12px; }
#architecture .arch-row:nth-of-type(2n) .arch-node { background:linear-gradient(135deg,#5d2d91,#9b3c91); }
#architecture .arch-row:nth-of-type(3n) .arch-node { background:linear-gradient(135deg,#037a70,#258a65); }
#architecture .arch-row:nth-of-type(4n) .arch-node { background:linear-gradient(135deg,#b1601e,#d78b30); }
#architecture .arch-node b,#architecture .arch-node.target b,#architecture .arch-node.gate b { color:#fff; }
#architecture .arch-connector { color:#ffd66d; font-size:26px; opacity:1; }
#architecture .arch-legend { padding:12px 16px; border-radius:8px; background:rgba(255,255,255,.09); color:#fff; }
#architecture .fed-domain { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); }

/* Kernel remains intentionally text-and-chart based without a photo. */

#kernel { background:linear-gradient(90deg,rgba(2,18,38,.87),rgba(2,18,38,.58)),url("../files/blue.jpg") center / cover fixed;
}
#kernel .page-visual { display:none !important; }
#kernel .kernel-step { background:rgba(17,17,17,.10); backdrop-filter:blur(4px); border-color:rgba(17,17,17,.12); }

/* White text inside all card/box elements, site-wide */
.cap-card h3,.cap-card p,.cap-card li,
.industry-card h3,.industry-card p,
.value-card h3,.value-card p,
.flow-step h3,.flow-step p,
.kernel-step h3,.kernel-step p,
.mode-selector h3,.mode-selector p,.mode-selector strong,.mode-selector small,
.mode-output h3,.mode-output p,.mode-output span,
.security-layer b,.security-layer span,
.maturity-card h3,.maturity-card p,.maturity-card li,
.boundary-note,
.network-card .domain-title strong,.network-card .domain-title span,.network-card .service span,.network-card .panel-head strong,
.cta-box h2,.cta-box p,.cta-box .cta-meta,
.quote-card blockquote,.quote-card small,
.trust-item strong,.trust-item span
{ color:#fff; }



@media (max-width:768px) {
 #capabilities,#security,#industries,#readiness,#architecture,#kernel { background-attachment:scroll; }
  .nav-links a,.service span,.status-chip { white-space:normal; }
}