/**
 * Atlas Corporation — Design Tokens
 * Source: atlasos-prototype/app/globals.css + AtlasOS_External/assets/css/style.css
 * ─────────────────────────────────────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Base Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Fonts */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* ── Colors: Dark Backgrounds */
  --bg-0:        #050810;   /* deepest — desktop bg */
  --bg-1:        #080c18;   /* deep — page bg */
  --panel:       #080e1c;   /* panel surfaces */
  --panel-2:     #0a1224;   /* elevated panels */
  --panel-3:     #0b1222;   /* website card bg */
  --panel-4:     #0f1a33;   /* hover/active */

  /* ── Tonal-rhythm steps: 3 dark navy steps — NEVER light/white backgrounds */
  --bg-darkest:  var(--bg-0);   /* focal: Founder, Dashboard, CTA, Footer */
  --bg-mid:      var(--bg-2);   /* lifted mid-sections */

  /* ── Colors: Borders */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-brand:  rgba(47,140,255,0.35);

  /* ── Colors: Text */
  --text-1: rgba(255,255,255,0.92);   /* primary — headings, labels */
  --text-2: rgba(255,255,255,0.72);   /* body */
  --text-3: rgba(255,255,255,0.52);   /* muted / secondary */
  --text-4: rgba(255,255,255,0.62);   /* muted meta/kicker — lifted for WCAG AA (was 0.32) */

  /* ── Colors: Brand Blue (primary) */
  --brand-400: #4EA0FF;
  --brand-500: #2E80FF;   /* main CTA blue */
  --brand-600: #145ED2;
  --brand-dark: #0b3d78;  /* deep blue */

  /* ── Colors: Status */
  --success: #2EE59D;
  --warning: #F1D38C;
  --danger:  #FF5C7A;
  --info:    #77A7FF;

  /* ── Colors: Orange accent (from brand guidelines) */
  --accent-orange: #FF7A00;

  /* ── Gold (European elite signal — used sparingly) */
  --accent-gold:    #D4B36A;
  --accent-gold-dim: rgba(212,179,106,0.35);
  --accent-gold-bg:  rgba(212,179,106,0.08);

  /* ── Extended Backgrounds */
  --bg-2:        #0c1428;    /* section variant — slightly lighter than panel-2 */
  --hairline:    rgba(255,255,255,0.06);  /* ultra-thin dividers */
  --panel-hover: rgba(46,128,255,0.06);  /* card hover state tint */

  /* ── Semantic Color Aliases */
  --fg1:        var(--text-1);
  --fg2:        var(--text-2);
  --fg3:        var(--text-3);
  --bg-surface: var(--panel);
  --bg-elevated: var(--panel-2);
  --bg-page:    var(--bg-1);
  --interactive: var(--brand-500);
  --interactive-hover: var(--brand-400);

  /* ── Spacing (8px scale) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 120px;

  /* ── Border Radius */
  --r-sm:    4px;
  --r-input: 4px;
  --r-card:  5px;
  --r-modal: 6px;
  --r-pill:  9999px;

  /* ── Shadows */
  --shadow-sm:   0 8px 22px rgba(0,0,0,0.36);
  --shadow-md:   0 16px 44px rgba(0,0,0,0.48);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.55);
  --glow-brand:  0 0 0 3px rgba(46,128,255,0.22);
  --glow-brand-lg: 0 0 20px rgba(46,128,255,0.3);

  /* ── Background effects */
  --aurora: radial-gradient(900px 500px at 15% 8%, rgba(46,128,255,0.22), transparent 60%),
            radial-gradient(700px 500px at 85% 18%, rgba(20,94,210,0.18), transparent 62%),
            radial-gradient(600px 400px at 45% 85%, rgba(58,160,255,0.15), transparent 65%);
  --grid-overlay: repeating-linear-gradient(
      rgba(46,128,255,0.10) 0px, rgba(46,128,255,0.10) 1px, transparent 1px, transparent 42px
    ),
    repeating-linear-gradient(
      90deg, rgba(46,128,255,0.10) 0px, rgba(46,128,255,0.10) 1px, transparent 1px, transparent 42px
    );
}

/* ─── Semantic Typography ─────────────────────────────────────────────────── */
:root {
  /* Display — Space Grotesk, for product name & hero moments */
  --type-display-xl: 700 64px/1.02 var(--font-display);
  --type-display-lg: 700 48px/1.05 var(--font-display);
  --type-display-md: 700 34px/1.1  var(--font-display);

  /* Heading — Inter, for section titles, card headers */
  --type-h1: 800 32px/1.15 var(--font-sans);
  --type-h2: 700 24px/1.25 var(--font-sans);
  --type-h3: 600 18px/1.3  var(--font-sans);
  --type-h4: 600 15px/1.4  var(--font-sans);

  /* Body */
  --type-body-lg: 400 18px/1.65 var(--font-sans);
  --type-body:    400 16px/1.65 var(--font-sans);
  --type-body-sm: 400 14px/1.6  var(--font-sans);

  /* Label / UI */
  --type-label:    500 13px/1.4  var(--font-sans);
  --type-kicker:   600 11px/1.3  var(--font-sans);   /* uppercase + tracking */
  --type-code:     400 13px/1.55 var(--font-mono);

  /* Letter spacing for kickers */
  --tracking-wide: 0.12em;
  --tracking-wider: 0.18em;
}

/* ─── Utility Classes ─────────────────────────────────────────────────────── */

/* Typography */
.atlas-display-xl { font: var(--type-display-xl); }
.atlas-display-lg { font: var(--type-display-lg); }
.atlas-display-md { font: var(--type-display-md); }
.atlas-h1 { font: var(--type-h1); }
.atlas-h2 { font: var(--type-h2); }
.atlas-h3 { font: var(--type-h3); }
.atlas-body-lg { font: var(--type-body-lg); }
.atlas-body    { font: var(--type-body); }
.atlas-body-sm { font: var(--type-body-sm); }
.atlas-label   { font: var(--type-label); }
.atlas-kicker  { font: var(--type-kicker); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-3); }
.atlas-code    { font: var(--type-code); }

/* Text colors */
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-brand { color: var(--brand-500); }

/* Glass surface */
.atlas-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

/* Card */
.atlas-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.atlas-card-elevated {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}

/* Button */
.atlas-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: var(--r-input);
  font: var(--type-label);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.atlas-btn-primary:hover { background: var(--brand-400); }
.atlas-btn-primary:active { transform: translateY(1px); }

.atlas-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--panel);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font: var(--type-label);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.atlas-btn-secondary:hover { background: var(--panel-2); }
.atlas-btn-secondary:active { transform: translateY(1px); }

.atlas-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  font: var(--type-label);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.atlas-btn-ghost:hover { background: var(--panel); color: var(--text-1); }

/* Badge */
.atlas-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  font: var(--type-kicker);
  font-size: 11px;
  color: var(--text-3);
  background: rgba(255,255,255,0.04);
}
.atlas-badge-brand   { background: rgba(46,128,255,0.12); border-color: rgba(46,128,255,0.25); color: var(--brand-400); }
.atlas-badge-success { background: rgba(46,229,157,0.12); border-color: rgba(46,229,157,0.25); color: var(--success); }
.atlas-badge-warning { background: rgba(241,211,140,0.12); border-color: rgba(241,211,140,0.25); color: var(--warning); }
.atlas-badge-danger  { background: rgba(255,92,122,0.12);  border-color: rgba(255,92,122,0.25);  color: var(--danger); }
.atlas-badge-info    { background: rgba(119,167,255,0.12); border-color: rgba(119,167,255,0.25); color: var(--info); }

/* Input */
.atlas-input {
  display: block; width: 100%;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  font: var(--type-body-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.atlas-input:focus { border-color: var(--brand-500); box-shadow: var(--glow-brand); }
.atlas-input::placeholder { color: var(--text-4); }

/* Divider */
.atlas-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

/* ─── Site Layout (was inline before multi-page refactor) ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  font-family: var(--font-sans);
  background: var(--bg-1);
  background-image:
    linear-gradient(rgba(46,128,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,128,255,0.22) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
img, svg, video { max-width: 100%; }

/* TASK A — Container responsive padding */
.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1280px) { .container { padding: 0 48px; } }
section { padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }

.kicker {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--brand-400);
  text-shadow: 0 0 18px rgba(46,128,255,0.95), 0 0 40px rgba(46,128,255,0.55), 0 0 80px rgba(46,128,255,0.25);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700; line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin-bottom: 20px;
}
.section-lead {
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;
  color: var(--text-3);
  max-width: 60ch;
}

.section-head {
  max-width: 760px;
  margin-bottom: 38px;
}
.section-head .section-title { margin-bottom: 16px; }

.atlas-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.atlas-chip-card {
  appearance: none;
  width: 100%;
  color: inherit;
  text-align: left;
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(46,128,255,0.22);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(46,128,255,0.04), rgba(255,255,255,0.010)),
    var(--panel);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(46,128,255,0.06), inset 0 0 24px rgba(46,128,255,0.03);
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.atlas-chip-card::before,
.atlas-chip-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(78,160,255,0.55);
  pointer-events: none;
  z-index: 2;
}
.atlas-chip-card::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.atlas-chip-card::after {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}
.atlas-chip-card .chip-pad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(78,160,255,0.26);
  border-radius: 3px;
  background: rgba(46,128,255,0.09);
  color: var(--brand-400);
}
.atlas-chip-card .chip-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.atlas-chip-card .chip-status span {
  display: inline-flex;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 16px rgba(46,229,157,0.55);
}
.atlas-chip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(78,160,255,0.55);
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(46,128,255,0.22), transparent 42%),
    linear-gradient(180deg, rgba(46,128,255,0.06), rgba(255,255,255,0.02)),
    var(--panel-2);
  box-shadow: 0 18px 46px rgba(0,0,0,0.48), 0 0 28px rgba(46,128,255,0.18), 0 0 0 1px rgba(46,128,255,0.22);
}

.atlas-gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 13px 0 8px;
  border: 1px solid var(--accent-gold-dim);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(212,179,106,0.16), rgba(46,128,255,0.08));
  color: var(--accent-gold);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(212,179,106,0.10);
  white-space: nowrap;
}
.eu-flag {
  width: 31px;
  height: 20px;
  border-radius: 2px;
  background: #003399;
  display: grid;
  place-items: center;
  transform-origin: left center;
  animation: atlasFlagWave 3.4s ease-in-out infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(0,51,153,0.45);
}
.eu-flag svg { display: block; }

@keyframes atlasFlagWave {
  0%, 100% { transform: perspective(70px) rotateY(0deg) skewY(0deg); }
  45% { transform: perspective(70px) rotateY(-12deg) skewY(-1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .atlas-chip-card:hover { transform: none; }
}

.nav-mobile, .nav-mobile-panel { display: none; }

@media (max-width: 920px) {
  section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .nav-desktop { display: none !important; }
  .nav-mobile { display: inline-flex !important; }
}
@media (max-width: 700px) {
  section { padding: 44px 0; }
  .container { padding: 0 16px; }
  .section-title { margin-bottom: 14px; }
  .kicker { margin-bottom: 10px; font-size: 10px; }
  .section-lead { font-size: 15px; }
  .section-head { margin-bottom: 28px; }
  .hide-mobile { display: none !important; }
  .reduce-on-mobile { opacity: 0.45 !important; }
}

/* TASK C — Chip grid: force 1-column on narrow mobile */
@media (max-width: 480px) {
  .atlas-chip-grid { grid-template-columns: 1fr !important; }
}

/* TASK F — Footer columns responsive */
.atlas-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 960px) {
  .atlas-footer-cols { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 600px) {
  .atlas-footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* TASK G — Touch targets: ensure 44px min-height for interactive elements on mobile */
@media (max-width: 768px) {
  .atlas-mobile-sticky-item { min-height: 44px; }
  .nav-mobile-panel button { min-height: 44px; }
  .atlas-btn-primary,
  .atlas-btn-secondary,
  .atlas-btn-ghost { min-height: 44px; }
}

/* TASK H — prefers-reduced-motion: disable all remaining animations */
@media (prefers-reduced-motion: reduce) {
  .eu-flag { animation: none !important; transform: none !important; }
  .atlas-status-pill-led { animation: none !important; }
  .atlas-cross-link-led { animation: none !important; }
  svg animateTransform,
  svg animate { display: none !important; }
}
@media (min-width: 701px) {
  .show-mobile { display: none !important; }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(90deg); }
.chev { transition: transform .15s; display: inline-block; }

/* ─── Mobile Sticky Bar ──────────────────────────────────────────────────── */
.atlas-mobile-sticky { display: none; }
@media (max-width: 768px) {
  .atlas-mobile-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
    background: rgba(8, 12, 24, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }
  .atlas-mobile-sticky-item {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 4px;
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.15s;
  }
  .atlas-mobile-sticky-item:hover,
  .atlas-mobile-sticky-item:active,
  .atlas-mobile-sticky-item:focus-visible {
    color: var(--brand-400);
  }
  .atlas-mobile-sticky-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-400);
  }
  .atlas-mobile-sticky-label {
    letter-spacing: 0.02em;
    line-height: 1;
  }
  body { padding-bottom: 64px; }
}

/* ─── BATCH 1 — Cross-Surface Bar · Spec-Card · Section Alignment ─────────── */

/* Cross-surface bar — slim band ABOVE Header, links to Workspace · POS · Academy · Hub.
   Palantir/command-game vibe: mono uppercase, small LEDs, gold accents.
   Operator's directive: interconnect all 4 surfaces without cluttering the main nav. */
.atlas-cross-surface-bar {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 30px;
  background: linear-gradient(180deg, rgba(5,8,16,0.96), rgba(8,12,24,0.78));
  border-bottom: 1px solid rgba(212,179,106,0.16);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.atlas-cross-surface-bar::-webkit-scrollbar { display: none; }
.atlas-cross-surface-bar::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(212,179,106,0.08) 60px 61px);
  pointer-events: none;
  opacity: 0.55;
}
.atlas-cross-surface-inner {
  display: flex;
  align-items: stretch;
  padding: 0 18px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.atlas-cross-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 30px;
  color: var(--text-3);
  position: relative;
  transition: color 0.15s ease;
  text-decoration: none;
}
.atlas-cross-link + .atlas-cross-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: rgba(255,255,255,0.10);
}
.atlas-cross-link:hover { color: var(--accent-gold); }
.atlas-cross-link.is-current {
  color: var(--accent-gold);
  font-weight: 700;
}
.atlas-cross-link-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 4px var(--success), 0 0 1px rgba(255,255,255,0.45);
  flex-shrink: 0;
  animation: atlas-led-blink 2.6s ease-in-out infinite;
}
.atlas-cross-link.is-current .atlas-cross-link-led {
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold);
}
@keyframes atlas-led-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-cross-link-led { animation: none; opacity: 0.9; }
}

/* Mobile: bar stays visible but compact, scrolls horizontally if needed */
@media (max-width: 700px) {
  .atlas-cross-surface-bar {
    height: 26px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    justify-content: flex-start;
  }
  .atlas-cross-link {
    padding: 0 12px;
    height: 26px;
    gap: 6px;
  }
}

/* ─── Spec Card — Palantir-grade card with corner registration pips ───────── */
.atlas-spec-card {
  position: relative;
  background: linear-gradient(180deg, rgba(11,18,34,0.92), rgba(8,12,24,0.95));
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(46,128,255,0.20);
  border-radius: var(--r-card);
  padding: 22px 22px 20px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.atlas-spec-card::before,
.atlas-spec-card::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--accent-gold-dim);
  border-style: solid;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.18s, border-color 0.18s;
}
.atlas-spec-card::before {
  top: 5px;
  left: 5px;
  border-width: 1px 0 0 1px;
}
.atlas-spec-card::after {
  bottom: 5px;
  right: 5px;
  border-width: 0 1px 1px 0;
}
.atlas-spec-card:hover::before,
.atlas-spec-card:hover::after {
  opacity: 1;
  border-color: var(--accent-gold);
}
.atlas-spec-card:hover {
  border-top-color: rgba(78,160,255,0.35);
}

/* Spec-card kicker — mono uppercase with leading dash */
.atlas-spec-kicker {
  font: var(--type-code);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.atlas-spec-kicker::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--accent-gold-dim);
  display: inline-block;
}

/* ─── Section head — LEFT-anchored variant ────────────────────────────────── */
/* Default behaviour across the site is centered headings + left-anchored bodies, which
   creates a "drift" feeling. This variant commits to left-anchor for command/whitepaper
   sections (Investors, Security, Strategy, Architecture). Apply per-section. */
.atlas-section-head-left {
  max-width: 860px;
  margin: 0 0 36px 0;
  text-align: left;
}
.atlas-section-head-left .kicker {
  margin-bottom: 14px;
}
.atlas-section-head-left .section-title {
  white-space: pre-line;
  margin-bottom: 14px;
}

/* ─── Status pill — Palantir "operational" badge ──────────────────────────── */
.atlas-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 9px;
  background: rgba(46,229,157,0.08);
  border: 1px solid rgba(46,229,157,0.22);
  border-radius: 999px;
  font: var(--type-code);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--success);
  white-space: nowrap;
}
.atlas-status-pill-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: atlas-led-blink 2.4s ease-in-out infinite;
}

/* ─── Page-stage — consistent left/right padding rhythm for the page ──────── */
.atlas-page-stage {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

/* ─── Mono telemetry readout (numeric digits, Palantir-style) ─────────────── */
.atlas-readout {
  font: var(--type-code);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--accent-gold);
}
.atlas-readout-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--accent-gold);
  line-height: 1;
}

/* ─── Tight section rhythm helpers (commit to a consistent vertical scale) ─ */
.atlas-section-tight  > * + * { margin-top: var(--space-5); }
.atlas-section-normal > * + * { margin-top: var(--space-6); }
.atlas-section-loose  > * + * { margin-top: var(--space-7); }

/* ─── EU Digital Sovereignty ──────────────────────────────────────────────── */
@keyframes eu-star-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; filter: drop-shadow(0 0 6px rgba(212,179,106,0.70)); }
}
@keyframes eu-badge-glow {
  0%, 100% { border-color: rgba(212,179,106,0.35); box-shadow: none; }
  50%       { border-color: rgba(212,179,106,0.80); box-shadow: 0 0 28px rgba(212,179,106,0.22), 0 0 8px rgba(212,179,106,0.16) inset; }
}
@keyframes atlas-node-flicker {
  0%, 90%, 100% { opacity: 1; }
  92%            { opacity: 0.4; }
  95%            { opacity: 1; }
  97%            { opacity: 0.6; }
}
.eu-badge-glow { animation: eu-badge-glow 4s ease-in-out infinite; }
.eu-star-pulse { animation: eu-star-pulse 2.8s ease-in-out infinite; }

/* ─── v56: Focus-visible (Cycle I-A1) ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }

/* ─── v56: CTA shimmer sweep (Cycle A-A3) ───────────────────────────────── */
@keyframes atlas-shimmer-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}
.atlas-cta-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  animation: atlas-shimmer-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

/* ─── v56: FAQ smooth accordion (Cycle F-F1) ───────────────────────────── */
.atlas-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}
.atlas-faq-body.is-open {
  max-height: 600px;
  opacity: 1;
}

/* ─── v56: Custom range input styling (Cycle F-F4) ─────────────────────── */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-400);
  border: 3px solid var(--bg-1);
  box-shadow: 0 0 10px rgba(46,128,255,0.5);
  cursor: pointer;
  transition: box-shadow .15s;
}
input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 18px rgba(46,128,255,0.75);
}
input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-400);
  border: 3px solid var(--bg-1);
  box-shadow: 0 0 10px rgba(46,128,255,0.5);
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  height: 4px;
  background: rgba(46,128,255,0.25);
  border-radius: 99px;
}

/* ─── v56: Footer gradient top border (Cycle G-G1) ─────────────────────── */
footer {
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-500) 30%, var(--brand-400) 50%, var(--brand-500) 70%, transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* ─── v56: CookieBanner slide-up animation (Cycle G-G7) ────────────────── */
@keyframes atlas-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.atlas-cookie-banner {
  animation: atlas-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ─── v56: Nav header box-shadow on scroll (Cycle B-B2) ────────────────── */
.atlas-header-scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(46,128,255,0.14);
}

/* ─── v56: Eco-strip cell hover (Cycle G-G2) ───────────────────────────── */
.eco-strip-cell {
  transition: background .15s;
}
.eco-strip-cell:hover {
  background: var(--panel-hover);
}

/* ─── v56: Unit card accent glow on hover (Cycle D-D1) ─────────────────── */
.atlas-unit-card:hover {
  box-shadow: 0 18px 46px rgba(0,0,0,0.48), 0 0 32px var(--unit-accent-glow, rgba(46,128,255,0.18)), 0 0 0 1px rgba(46,128,255,0.22);
}

/* ─── v56: Method step progress line (Cycle C-C6) ──────────────────────── */
.atlas-method-grid {
  position: relative;
}
.atlas-method-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,128,255,0.35) 20%, rgba(46,128,255,0.35) 80%, transparent);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .atlas-method-grid::before { display: none; }
}

/* ─── v56: About founder card scan line (Cycle H-H1) ───────────────────── */
@keyframes atlas-founder-scan {
  0%, 100% { opacity: 0; transform: translateY(-100%); }
  40%, 60% { opacity: 0.06; transform: translateY(100%); }
}
.atlas-founder-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(78,160,255,0.08) 50%, transparent 70%);
  animation: atlas-founder-scan 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ─── v56: Contact form field focus glow (Cycle H-H4) ──────────────────── */
.atlas-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(46,128,255,0.18), 0 0 12px rgba(46,128,255,0.12);
  background: rgba(46,128,255,0.04);
}

/* ─── v56: Footer column link hover (Cycle G-G9) ───────────────────────── */
.footer-col-link {
  transition: color .15s;
  color: var(--text-3);
}
.footer-col-link:hover {
  color: var(--brand-400) !important;
}

/* ─── v56: Mobile nav panel animation (Cycle B-B4) ─────────────────────── */
@keyframes atlas-panel-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile-panel {
  animation: atlas-panel-drop 0.22s ease forwards;
}

/* ─── v56: Back-to-top + hero live panel entrance ───────────────────────── */
@keyframes atlas-fade-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.atlas-hero-panel {
  animation: atlas-fade-right 0.7s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ─── v56: Testimonial star row (Cycle H-H10) ──────────────────────────── */
.atlas-star-row {
  display: inline-flex;
  gap: 2px;
  color: var(--accent-gold);
  font-size: 12px;
  line-height: 1;
  margin-bottom: 8px;
}

/* ─── v56: Sector pill hover (Cycle H-H9) ──────────────────────────────── */
.atlas-sector-pill {
  transition: border-color .15s, color .15s, background .15s;
  cursor: default;
}
.atlas-sector-pill:hover {
  border-color: var(--border-brand) !important;
  color: var(--brand-400) !important;
  background: rgba(46,128,255,0.06) !important;
}

/* ─── v58: Premium Atlas loader ────────────────────────────────────────── */
@keyframes al-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes al-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes al-pulse-icon {
  0%, 100% { transform: scale(1);     filter: brightness(1);    }
  50%       { transform: scale(1.07); filter: brightness(1.14); }
}
@keyframes al-bar-fill {
  0%   { width: 0%;  }
  35%  { width: 45%; }
  80%  { width: 76%; }
  100% { width: 82%; }
}
@keyframes al-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
/* base transition must exist BEFORE .al-out fires — spec: before-change style */
#atlas-loader { transition: opacity 0.38s ease; }
#atlas-loader.al-out { opacity: 0; }
.al-rings {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.al-svg-outer {
  position: absolute;
  top: 0; left: 0;
  animation: al-spin-ccw 10s linear infinite;
  transform-origin: 80px 80px;
}
.al-svg-inner {
  position: absolute;
  top: 22px; left: 22px;
  animation: al-spin-cw 6s linear infinite;
  transform-origin: 58px 58px;
}
.al-icon {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  animation: al-pulse-icon 2.4s ease-in-out infinite;
}
.al-title {
  font-family: Inter, 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  margin-bottom: 14px;
  animation: al-fade-up 0.6s 0.15s both;
}
.al-bar-wrap {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
  animation: al-fade-up 0.6s 0.25s both;
}
.al-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2E80FF 0%, #D4A24C 100%);
  border-radius: 2px;
  animation: al-bar-fill 4.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.al-status {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  animation: al-fade-up 0.6s 0.35s both;
}

/* ─── v70: Cinematic EU identity + Globe + Enhanced Visual System ──────── */

/* EU gold token — more vivid than old D4B36A */
:root {
  --accent-gold-vivid: #D4A24C;
  --eu-blue:           #003399;
  --circuit-glow:      rgba(46,128,255,0.22);
}

/* Atlas globe hero — breathing glow */
@keyframes atlas-globe-breath {
  0%, 100% { opacity: 0.82; }
  50%       { opacity: 1.0; }
}

/* EU sovereign strip */
.atlas-eu-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: linear-gradient(90deg, rgba(0,51,153,0.16), rgba(212,162,76,0.10));
  border: 1px solid rgba(212,162,76,0.24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent-gold);
  width: fit-content;
  margin-bottom: 18px;
}

/* Gold divider line */
.atlas-gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,162,76,0.35) 25%, rgba(212,162,76,0.55) 50%, rgba(212,162,76,0.35) 75%, transparent 100%);
  border: none;
  margin: 0;
}

/* Enhanced glass card — for cases, testimonials, spec cards */
.atlas-glass-strong {
  background: linear-gradient(160deg, rgba(14,22,46,0.92), rgba(8,14,28,0.96));
  border: 1px solid rgba(78,160,255,0.18);
  border-top: 1px solid rgba(78,160,255,0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-card);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.atlas-glass-strong:hover {
  border-color: rgba(78,160,255,0.38);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 32px rgba(46,128,255,0.14);
  transform: translateY(-2px);
}

/* Gold accent CTA */
.atlas-cta-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: linear-gradient(135deg, rgba(212,162,76,0.16), rgba(212,162,76,0.06));
  border: 1px solid rgba(212,162,76,0.36);
  border-radius: var(--r-input);
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s;
  text-decoration: none;
}
.atlas-cta-gold:hover {
  background: linear-gradient(135deg, rgba(212,162,76,0.28), rgba(212,162,76,0.12));
  box-shadow: 0 0 28px rgba(212,162,76,0.22);
  transform: translateY(-1px);
}

/* EU kicker chip */
.atlas-eu-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 8px;
  background: rgba(212,162,76,0.08);
  border: 1px solid rgba(212,162,76,0.24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 16px;
}

/* Case card — premium style */
.atlas-case-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid rgba(78,160,255,0.35);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.atlas-case-card:hover {
  border-color: var(--border-brand);
  border-top-color: var(--brand-400);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(46,128,255,0.16);
}

/* Cinematic section header */
.atlas-section-cinematic {
  position: relative;
  overflow: hidden;
}
.atlas-section-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/circuit-tile.jpg');
  background-size: 480px 480px;
  background-repeat: repeat;
  opacity: 0.025;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Hero globe breathing */
.atlas-globe-hero {
  animation: atlas-globe-breath 5s ease-in-out infinite;
}

/* Footer EU seal */
.atlas-footer-eu-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,51,153,0.10);
  border: 1px solid rgba(212,162,76,0.22);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,162,76,0.75);
}

/* Section hero photo bg */
.atlas-photo-hero {
  position: relative;
  overflow: hidden;
}
.atlas-photo-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/circuit-bg.jpg');
  background-size: cover;
  background-position: center right;
  opacity: 0.08;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Pulsing scan line on section borders */
@keyframes atlas-border-scan {
  0%, 100% { background-position: -200% 0; }
  50%       { background-position: 300% 0; }
}
.atlas-scan-border-top {
  position: relative;
}
.atlas-scan-border-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,128,255,0.6), rgba(212,162,76,0.4), rgba(46,128,255,0.6), transparent);
  background-size: 200% 100%;
  animation: atlas-border-scan 8s ease-in-out infinite;
}

/* ─── v70 animations ─────────────────────────────────────────────────────── */
@keyframes atlas-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* ─── v71 — section depth, card glow, sub-page heroes ───────────────────── */

/* Phase 12 — Header: scan-line pulse on bottom border */
.atlas-header-scrolled::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,128,255,0.55), rgba(212,162,76,0.3), rgba(46,128,255,0.55), transparent);
  background-size: 300% 100%;
  animation: atlas-border-scan 6s ease-in-out infinite;
  pointer-events: none;
}

/* Phase 13 — Section navy: deep space background for alternating sections */
.atlas-section-navy {
  background: linear-gradient(180deg,
    rgba(6,10,20,0.85) 0%,
    rgba(8,14,28,0.92) 50%,
    rgba(6,10,20,0.85) 100%
  );
  position: relative;
  overflow: hidden;
}
.atlas-section-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/circuit-tile.jpg');
  background-size: 520px 520px;
  background-repeat: repeat;
  opacity: 0.018;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Phase 14 — Glass card: deep glassmorphism panel */
.atlas-glass-card {
  background: rgba(16,26,52,0.65);
  border: 1px solid rgba(78,160,255,0.14);
  border-top: 1.5px solid rgba(78,160,255,0.28);
  border-radius: var(--r-card);
  padding: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: relative;
  overflow: hidden;
}
.atlas-glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78,160,255,0.5), transparent);
  opacity: 0;
  transition: opacity .22s;
}
.atlas-glass-card:hover {
  border-color: rgba(78,160,255,0.32);
  border-top-color: rgba(78,160,255,0.55);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 20px rgba(46,128,255,0.14);
  transform: translateY(-3px);
}
.atlas-glass-card:hover::before {
  opacity: 1;
}

/* Phase 15 — Sub-page hero: circuit photo backdrop for inner pages */
.atlas-subpage-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  background: radial-gradient(1200px 700px at 18% 0%, rgba(46,128,255,0.20), transparent 55%),
              var(--bg-1);
}
.atlas-subpage-hero::after {
  content: "";
  position: absolute;
  top: 0; right: -5%; bottom: 0;
  width: 58%;
  background-image: url('/assets/circuit-bg.jpg');
  background-size: cover;
  background-position: left center;
  opacity: 0.055;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to left, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

/* Phase 16 — EU kicker: gold-accented section kicker chip */
.atlas-eu-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(212,162,76,0.07);
  border: 1px solid rgba(212,162,76,0.22);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,162,76,0.85);
  margin-bottom: 16px;
}

/* Phase 17 — FAQ accordion: glass dark expand/collapse */
.atlas-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: rgba(14,22,42,0.55);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 10px;
}
.atlas-faq-item:hover,
.atlas-faq-item[data-open="true"] {
  border-color: rgba(78,160,255,0.30);
  box-shadow: 0 4px 20px rgba(46,128,255,0.10);
}
.atlas-faq-trigger {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.atlas-faq-trigger:hover { color: var(--brand-400); }
.atlas-faq-body {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.72;
  border-top: 1px solid rgba(46,128,255,0.10);
}
.atlas-faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--brand-400);
  transition: transform .2s;
}

/* Phase 18 — Pricing card: glass pricing panel */
.atlas-pricing-card {
  background: rgba(14,22,44,0.70);
  border: 1px solid var(--border-strong);
  border-top: 2px solid rgba(78,160,255,0.40);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.atlas-pricing-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: radial-gradient(600px 300px at 50% 0%, rgba(46,128,255,0.09), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.atlas-pricing-card:hover {
  border-top-color: var(--brand-400);
  box-shadow: 0 12px 40px rgba(0,0,0,0.50), 0 0 28px rgba(46,128,255,0.16);
  transform: translateY(-4px);
}
.atlas-pricing-card.is-featured {
  border-color: rgba(78,160,255,0.42);
  border-top-color: var(--brand-400);
  background: rgba(20,32,64,0.80);
}
.atlas-pricing-card.is-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(78,160,255,0.18);
  pointer-events: none;
}

/* Phase 19 — Contact form: glass dark inputs */
.atlas-form-group { margin-bottom: 18px; }
.atlas-form-label {
  display: block;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.atlas-form-input,
.atlas-form-textarea {
  width: 100%;
  background: rgba(12,20,40,0.70);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-1);
  font-family: var(--font-sans);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  box-sizing: border-box;
}
.atlas-form-input:focus,
.atlas-form-textarea:focus {
  border-color: rgba(78,160,255,0.60);
  box-shadow: 0 0 0 3px rgba(46,128,255,0.10);
}
.atlas-form-textarea { min-height: 130px; resize: vertical; }

/* Phase 20 — Case card: premium hover with circuit glow */
.atlas-case-card-v2 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid rgba(78,160,255,0.22);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  position: relative;
}
.atlas-case-card-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 50% 0%, rgba(46,128,255,0.06), transparent 70%);
  opacity: 0;
  transition: opacity .22s;
  pointer-events: none;
  z-index: 0;
}
.atlas-case-card-v2:hover {
  border-color: rgba(78,160,255,0.40);
  border-top-color: var(--brand-400);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.50), 0 0 30px rgba(46,128,255,0.18);
}
.atlas-case-card-v2:hover::before { opacity: 1; }

/* Phase 21 — Blog post card: glass with hover lift */
.atlas-blog-card {
  background: rgba(14,22,42,0.60);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.atlas-blog-card:hover {
  border-color: rgba(78,160,255,0.32);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42), 0 0 18px rgba(46,128,255,0.12);
}

/* Phase 22 — Partner logos: glass chip row */
.atlas-partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16,26,52,0.55);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: border-color .18s, color .18s, box-shadow .18s;
}
.atlas-partner-chip:hover {
  border-color: rgba(78,160,255,0.35);
  color: var(--brand-400);
  box-shadow: 0 4px 16px rgba(46,128,255,0.14);
}

/* Phase 23 — TrustSignals: live status dot row */
.atlas-trust-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.atlas-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(16,26,52,0.55);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.atlas-trust-pill.is-gold {
  background: rgba(212,162,76,0.07);
  border-color: rgba(212,162,76,0.24);
  color: rgba(212,162,76,0.9);
}
.atlas-trust-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: atlas-status-ping 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Phase 24 — Sector hero: cinematic overlay for sector pages */
.atlas-sector-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
  background: var(--bg-1);
}
.atlas-sector-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/circuit-bg.jpg');
  background-size: cover;
  background-position: center right;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.atlas-sector-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 600px at 10% 20%, rgba(46,128,255,0.22), transparent 60%),
              radial-gradient(600px 400px at 90% 80%, rgba(11,61,120,0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Phase 25 — Security / dark tech hero */
.atlas-hero-cyber {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(4,8,18,0.98), rgba(8,14,28,0.90));
  padding: clamp(72px, 10vw, 130px) 0 clamp(56px, 7vw, 90px);
}
.atlas-hero-cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/circuit-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  mix-blend-mode: screen;
  filter: hue-rotate(0deg) saturate(0.8);
  pointer-events: none;
  z-index: 0;
}
.atlas-hero-cyber::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,8,18,0.55) 0%, transparent 40%, rgba(4,8,18,0.70) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Phase 26 — Compact service row: icon + text in a horizontal row */
.atlas-service-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.atlas-service-row-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(14,22,44,0.55);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(78,160,255,0.35);
  border-radius: var(--r-card);
  transition: border-left-color .2s, box-shadow .2s;
}
.atlas-service-row-item:hover {
  border-left-color: var(--brand-400);
  box-shadow: 0 4px 20px rgba(46,128,255,0.14);
}
.atlas-service-row-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(46,128,255,0.12);
  border: 1px solid rgba(78,160,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
  font-size: 18px;
}

/* Phase 27 — Status page: live metric card */
.atlas-metric-card {
  background: rgba(14,22,44,0.65);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.atlas-metric-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  opacity: 0.7;
}
.atlas-metric-card.is-warning::before { background: var(--warning, #F59E0B); box-shadow: 0 0 10px rgba(245,158,11,0.6); }
.atlas-metric-card.is-error::before   { background: var(--danger, #EF4444);  box-shadow: 0 0 10px rgba(239,68,68,0.6);  }

/* Phase 28 — Timeline item: numbered glass node */
.atlas-timeline-item {
  position: relative;
  padding-left: 52px;
  padding-bottom: 32px;
}
.atlas-timeline-item:last-child { padding-bottom: 0; }
.atlas-timeline-item::before {
  content: "";
  position: absolute;
  left: 18px; top: 32px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(78,160,255,0.35), transparent);
}
.atlas-timeline-item:last-child::before { display: none; }
.atlas-timeline-num {
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(46,128,255,0.14);
  border: 1.5px solid rgba(78,160,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-400);
}

/* Phase 29 — Gold rule: horizontal EU-gold gradient divider */
.atlas-eu-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,162,76,0.45), transparent);
  margin: 0;
}

/* Phase 30 — Reduced motion: disable all animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile tweaks for new components */
@media (max-width: 640px) {
  .atlas-subpage-hero::after { display: none; }
  .atlas-sector-hero::before { opacity: 0.04; }
  .atlas-eu-kicker { font-size: 8.5px; padding: 3px 9px; }
  .atlas-trust-row { gap: 8px; }
  .atlas-trust-pill { font-size: 9.5px; padding: 5px 10px; }
  .atlas-pricing-card { padding: 20px; }
}

/* ─── v72 — CSS wave 3: deeper polish, transitions, micro-interactions ─── */

/* Phase 58 — Unit card: deeper glow on hover with colour-shift */
.atlas-unit-card {
  transition: transform .22s cubic-bezier(0.2,0.8,0.2,1), box-shadow .22s ease, border-color .22s ease !important;
}
.atlas-unit-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,0.55), 0 0 36px var(--unit-accent-glow, rgba(46,128,255,0.20)), 0 0 0 1.5px rgba(46,128,255,0.26) !important;
}

/* Phase 59 — Kicker chip: brand-accented overline */
.kicker {
  position: relative;
}
.kicker::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 1.5px;
  background: linear-gradient(90deg, var(--brand-400), transparent);
  margin-right: 8px;
  display: inline-block;
}

/* Phase 60 — Section scan border: cinematic top edge for key sections */
.atlas-section-navy,
.atlas-section-cinematic {
  position: relative;
}
.atlas-section-navy::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,128,255,0.55), rgba(212,162,76,0.30), rgba(46,128,255,0.55), transparent);
  background-size: 300% 100%;
  animation: atlas-border-scan 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* Phase 61 — Mobile sticky bar: glass upgrade */
.atlas-mobile-sticky {
  background: rgba(8,12,24,0.94) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-top: 1px solid rgba(78,160,255,0.18) !important;
}

/* Phase 62 — Back-to-top: glow button */
.atlas-back-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(46,128,255,0.16);
  border: 1.5px solid rgba(78,160,255,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
  backdrop-filter: blur(8px);
  z-index: 80;
}
.atlas-back-top:hover {
  background: rgba(46,128,255,0.30);
  box-shadow: 0 0 20px rgba(46,128,255,0.40);
  transform: translateY(-2px);
}

/* Phase 63 — Pricing card: featured glow ring */
.atlas-pricing-card.is-featured {
  position: relative;
  z-index: 1;
}
.atlas-pricing-card.is-featured::before {
  background: radial-gradient(700px 400px at 50% 0%, rgba(46,128,255,0.16), transparent 65%);
}

/* Phase 64 — About facts: glass cards */
.atlas-fact-card {
  background: rgba(16,26,52,0.65);
  border: 1px solid rgba(78,160,255,0.16);
  border-top: 2px solid rgba(78,160,255,0.40);
  border-radius: var(--r-card);
  padding: 20px 22px;
  transition: border-color .2s, box-shadow .2s;
}
.atlas-fact-card:hover {
  border-color: rgba(78,160,255,0.30);
  box-shadow: 0 6px 24px rgba(46,128,255,0.14);
}

/* Phase 65 — Input fields: global glass dark */
input.atlas-input,
textarea.atlas-input {
  background: rgba(12,20,40,0.70) !important;
  border-color: var(--border-strong) !important;
}
input.atlas-input:focus,
textarea.atlas-input:focus {
  border-color: rgba(78,160,255,0.60) !important;
  box-shadow: 0 0 0 3px rgba(46,128,255,0.10) !important;
}

/* Phase 66 — ArchitectureSection: dark bg + circuit photo hint */
.atlas-arch-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6,10,20,0.65) 0%, rgba(8,14,28,0.45) 50%, rgba(6,10,20,0.65) 100%);
}
.atlas-arch-section::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background-image: url('/assets/circuit-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.04;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to left, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

/* Phase 67 — Scan-line micro-animation: slow horizontal drift on data panels */
@keyframes atlas-data-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}
.atlas-data-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: atlas-data-pulse 2.4s ease-in-out infinite;
}

/* Phase 68 — Glossarium/Academy cards: glass row items */
.atlas-know-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atlas-know-item {
  padding: 16px 20px;
  background: rgba(14,22,44,0.55);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(78,160,255,0.28);
  border-radius: var(--r-card);
  transition: border-left-color .18s, box-shadow .18s;
}
.atlas-know-item:hover {
  border-left-color: var(--brand-400);
  box-shadow: 0 4px 18px rgba(46,128,255,0.12);
}

/* Phase 69 — Section headers: stronger visual hierarchy */
.section-title {
  background: linear-gradient(160deg, var(--text-1) 60%, rgba(140,180,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Phase 70 — Mega nav dropdown: deeper glass */
.atlas-nav-dropdown {
  background: rgba(10,16,32,0.98) !important;
  border: 1px solid rgba(78,160,255,0.18) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(78,160,255,0.08) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
}

/* Global smooth scrolling */
html { scroll-behavior: smooth; }

/* Selection highlight */
::selection {
  background: rgba(46,128,255,0.35);
  color: #fff;
}

/* Scrollbar: dark navy with blue accent */
::-webkit-scrollbar { width: 8px; background: rgba(6,10,20,0.95); }
::-webkit-scrollbar-track { background: rgba(8,14,28,0.98); }
::-webkit-scrollbar-thumb { background: rgba(46,128,255,0.40); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46,128,255,0.65); }

/* Focus visible: brand ring instead of browser default */
:focus-visible {
  outline: 2px solid rgba(78,160,255,0.65);
  outline-offset: 2px;
}

/* Placeholder text */
::placeholder { color: var(--text-4); opacity: 0.7; }


/* ─── v80 — CSS wave 4: performance, micro-animations, final polish ─── */

/* Phase 93 — Image rendering performance */
img { image-rendering: -webkit-optimize-contrast; }

/* Phase 94 — Nav link active state: clear brand underline */
.atlas-nav-link[aria-current="page"],
.atlas-nav-link.is-active {
  color: var(--brand-400) !important;
  border-bottom: 1.5px solid var(--brand-400);
}

/* Phase 95 — Hero background: ensure circuit overlay loads without flash */
.atlas-subpage-hero,
.atlas-sector-hero,
.atlas-hero-cyber {
  will-change: transform;
}
.atlas-subpage-hero::before,
.atlas-sector-hero::before,
.atlas-hero-cyber::before {
  will-change: opacity;
}

/* Phase 96 — Atlas loader: smoother exit */
#atlas-loader.al-out {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.42s ease, transform 0.42s ease;
  pointer-events: none;
}

/* Phase 97 — Glassmorphism card shimmer line: stronger on focused heading */
.atlas-glass-card h2,
.atlas-glass-card h3 {
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Phase 98 — atlas-badge variants */
.atlas-badge-brand {
  background: rgba(46,128,255,0.12);
  border-color: rgba(46,128,255,0.35);
  color: var(--brand-400);
}
.atlas-badge-gold {
  background: rgba(212,179,106,0.10);
  border-color: rgba(212,179,106,0.35);
  color: var(--accent-gold);
}

/* Phase 99 — CTA section link underline fix */
.atlas-cta-link {
  text-underline-offset: 3px;
  text-decoration-color: rgba(78,160,255,0.45);
}
.atlas-cta-link:hover {
  text-decoration-color: rgba(78,160,255,0.85);
}

/* Phase 100 — Final: body background hardened + font smoothing */
body {
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Founder promise section — stack photo over text on mobile */
.atlas-founder-split { padding: clamp(56px, 7vw, 104px) 0; }
@media (max-width: 760px) {
  .atlas-founder-split { grid-template-columns: 1fr !important; text-align: left; }
  .atlas-founder-split img { max-width: 320px !important; }
}

/* Client proof strip — responsive cells + hover */
.atlas-proof-cell:hover { background: rgba(46,128,255,0.06) !important; }
@media (max-width: 860px) { .atlas-proof-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 460px) { .atlas-proof-grid { grid-template-columns: 1fr !important; } }

/* ═══ DESIGN-AUDIT v2 — tonal rhythm, section tick, light band ═══ */
/* Tonal step utilities — adjacent home sections must differ by >=1 step */
.sec-bg-1       { background: var(--bg-1); }
.sec-bg-mid     { background: var(--bg-mid); }
.sec-bg-darkest { background: var(--bg-darkest); }

/* Signature: a single 2px brand tick at each major section's top-left */
.sec-tick { position: relative; }
.sec-tick::before {
  content: ""; position: absolute; left: 0; top: var(--space-8);
  width: 2px; height: 28px; background: var(--brand-500);
  box-shadow: 0 0 8px rgba(46,128,255,0.5); border-radius: 2px;
}
@media (max-width: 768px) { .sec-tick::before { top: var(--space-6); height: 22px; } }

/* Note: light/white backgrounds are permanently banned — all sections stay dark */

/* Hero layout — stat bar drops under message on tablet/mobile */
@media (max-width: 900px) {
  .atlas-hero-layout { grid-template-columns: 1fr !important; }
  .atlas-hero-stats { flex-direction: row !important; flex-wrap: wrap; border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border-strong); padding-top: var(--space-5); gap: var(--space-6) !important; }
  .atlas-hero-stats > div { border-bottom: none !important; padding: 0 !important; }
}

/* Bewijs band — flagship stacks above supporting on tablet/mobile */
@media (max-width: 820px) { .bewijs-grid { grid-template-columns: 1fr !important; } }

/* Problem editorial split — stack on mobile */
@media (max-width: 860px) { .atlas-problem-split { grid-template-columns: 1fr !important; } }

/* Method timeline-stepper */
.atlas-method-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.atlas-method-line { position: absolute; top: 26px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--brand-500), var(--success)); opacity: 0.4; z-index: 0; }
.atlas-method-step { position: relative; z-index: 1; }
.atlas-method-dot { width: 52px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .atlas-method-timeline { grid-template-columns: 1fr; gap: 0; }
  .atlas-method-line { display: none; }
  .atlas-method-step { padding-left: 24px; border-left: 3px solid var(--brand-500); padding-bottom: 28px; }
  .atlas-method-step .atlas-method-dot { width: 40px; height: 40px; margin-left: -44px; }
}

/* ─── v158 FIX: missing hero CTA classes + font coherence ─────────────────── */

/* H1 heading: use display font (Space Grotesk) to match all section H2s */
h1 {
  font-family: var(--font-display, "Space Grotesk", Inter, sans-serif) !important;
}

/* .atlas-cta-primary — referenced in JSX but never defined in CSS */
.atlas-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--brand-500);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.atlas-cta-primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(46,128,255,0.35);
}
.atlas-cta-primary:active { transform: translateY(0); }

/* .atlas-link-arrow — referenced in JSX but missing from CSS */
.atlas-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.72);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 0;
  transition: color 0.15s, gap 0.15s;
  text-decoration: none;
}
.atlas-link-arrow:hover { color: #fff; gap: 10px; }
/* ─────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   v162 — "TECH MEETS REALITY" — real planet, not drawn circuits.
   Operator motto: the real world — real Earth, real city lights, gold stars.
   (1) Suppress ALL 2D circuit graphics site-wide — the "cheap 2D circuits":
       CircuitTraces (#ct-trace), DigitalMeshBg (#pcb-focal), LightNetBg
       (#lnet-blur). One rule each kills all 30+ instances.
   (2) Hero gets the REAL EU-Earth photo (Europe city-lights + gold EU stars)
       on the right, deep space on the left for the headline. Anchored via the
       hero-only .atlas-hero-panel. Fully reversible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) — kill the drawn circuits everywhere (3 components, all instances) */
svg:has([id="ct-trace"]),
svg:has([id="pcb-focal"]),
svg:has([id="lnet-blur"]) { display: none !important; }

/* (1b) — REAL SPACE, ALL OVER THE SITE.
   The app wrapper (#root>div) carries a fixed, darkened orbital backdrop; nearly
   every section is transparent and sits directly on real space. The deep dark
   veil keeps all body copy readable. The hero has its own opaque Earth band and
   covers this within the hero. */
/* Real space backdrop, SITE-WIDE: the Earth is the fixed background of <body>,
   so EVERY page (home + subpages) sits on it. #root>div is transparent. The
   drifting star canvas (#atlas-stars, injected on the homepage) layers just above. */
body {
  background-color: #05080f !important;
  background-image:
    linear-gradient(180deg, rgba(5,8,15,0.82) 0%, rgba(5,8,15,0.88) 50%, rgba(5,8,15,0.84) 100%),
    url('/assets/earth-space.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-attachment: fixed !important;
}
#root > div { background: transparent !important; }
#atlas-space { display: none !important; }
#atlas-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
@media (max-width: 820px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(5,8,15,0.90), rgba(5,8,15,0.94)),
      url('/assets/earth-space.jpg') !important;
    background-attachment: scroll !important;
    background-position: center, center bottom !important;
  }
}

@supports selector(:has(*)) {

  /* (2) — Hero stage: real planet right, deep space left */
  section:has(.atlas-hero-panel) {
    isolation: isolate;
    min-height: clamp(560px, 84vh, 840px);
    box-shadow: inset 0 -130px 190px -110px rgba(2,5,12,0.86);
  }

  /* Operator: the "ATL-SYS · LIVE" panel is too distracting over the planet —
     hide it. display:none keeps it in the DOM so :has(.atlas-hero-panel) still
     matches and the whole Earth treatment stays anchored. */
  .atlas-hero-panel { display: none !important; }

  /* Real high-res orbital Earth (euatlas) — Europe city-lights + gold EU stars */
  section:has(.atlas-hero-panel)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url('/assets/earth-hero.jpg') no-repeat;
    background-size: cover;
    background-position: right center;
    opacity: 0.97;
    animation: atlas-earth-breathe 22s ease-in-out infinite;
  }

  /* Legibility scrim — deep navy over the text zone (left) fading to reveal the
     planet on the right, plus a soft bottom ground. Paints above the photo (z1),
     below text + live panel (z2). */
  section:has(.atlas-hero-panel)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(4,7,15,0.98) 0%, rgba(4,7,15,0.92) 26%, rgba(4,7,15,0.58) 46%, rgba(4,7,15,0.24) 66%, rgba(4,7,15,0.14) 100%),
      linear-gradient(0deg, rgba(4,7,15,0.55) 0%, rgba(4,7,15,0) 26%);
  }

  /* Headline stays crisp over the planet */
  section:has(.atlas-hero-panel) h1 {
    text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 34px rgba(0,0,0,0.55);
  }

  @keyframes atlas-earth-breathe {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 0.9; }
  }

  /* Tablet / mobile — pull the planet toward the corner, keep text readable */
  @media (max-width: 820px) {
    section:has(.atlas-hero-panel) {
      min-height: auto;
      box-shadow: inset 0 -90px 140px -90px rgba(2,5,12,0.88);
    }
    section:has(.atlas-hero-panel)::before {
      background-position: right -60px center;
      opacity: 0.85;
    }
    section:has(.atlas-hero-panel)::after {
      background:
        linear-gradient(90deg, rgba(4,7,15,0.97) 0%, rgba(4,7,15,0.8) 42%, rgba(4,7,15,0.3) 80%, rgba(4,7,15,0) 100%),
        linear-gradient(0deg, rgba(4,7,15,0.6) 0%, rgba(4,7,15,0) 30%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    section:has(.atlas-hero-panel)::before { animation: none; }
  }
}

/* ── v162 — kill the remaining CSS circuit textures; inner-page heroes get the
   REAL Earth instead (subtle, right side). Fixes /diensten/security/ etc. ── */
.atlas-section-cinematic::before,
.atlas-section-navy::before,
.atlas-photo-hero-bg,
.atlas-subpage-hero::after,
.atlas-sector-hero::before,
.atlas-hero-cyber::before,
.atlas-arch-section::before { background-image: none !important; }

/* ── Premium icons — real blue→gold gradient on the 24×24 line-icon set
   (references #atlas-icon-grad injected in index.html) + a luminous halo. ── */
svg[viewBox="0 0 24 24"][stroke="currentColor"] { stroke: url(#atlas-icon-grad) #6FB4FF !important; }
svg[viewBox="0 0 24 24"][fill="currentColor"]:not([stroke="currentColor"]) { fill: url(#atlas-icon-grad) #6FB4FF !important; }
svg[viewBox="0 0 24 24"][stroke="currentColor"],
svg[viewBox="0 0 24 24"][fill="currentColor"] {
  filter: drop-shadow(0 0 4px rgba(78,160,255,0.38)) drop-shadow(0 0 11px rgba(212,162,76,0.16));
}

/* ── Site-wide premium polish: custom scrollbar + EU-gold text selection ── */
::selection      { background: rgba(212,162,76,0.30); color: #fff; }
::-moz-selection { background: rgba(212,162,76,0.30); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(46,128,255,0.42) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #050810; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(46,128,255,0.55), rgba(11,61,120,0.65));
  border: 2px solid #050810;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(78,160,255,0.75), rgba(46,128,255,0.7));
}

/* ═══════════════════════════════════════════════════════════════════════════
   v173 — Hero & component-grid polish site-wide.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subpage hero — radial blue accent (::before free; circuit kill was ::after) */
.atlas-subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 600px at 14% 50%, rgba(46,128,255,0.18), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

/* Gold scanline on top of every subpage hero — placed AFTER v162 kill rule so
   both !important rules resolve by cascade order: later wins */
.atlas-subpage-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  width: 100% !important; height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(78,160,255,0.70) 30%, rgba(212,162,76,0.50) 50%, rgba(78,160,255,0.70) 70%, transparent 100%) !important;
  background-image: linear-gradient(90deg, transparent 0%, rgba(78,160,255,0.70) 30%, rgba(212,162,76,0.50) 50%, rgba(78,160,255,0.70) 70%, transparent 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
}

/* Sector hero — same gold scanline on top */
.atlas-sector-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(78,160,255,0.65), rgba(212,162,76,0.45), rgba(78,160,255,0.65), transparent) !important;
  background-image: linear-gradient(90deg, transparent, rgba(78,160,255,0.65), rgba(212,162,76,0.45), rgba(78,160,255,0.65), transparent) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
}

/* Subpage/sector/cyber hero h1: display font + legibility shadow */
.atlas-subpage-hero h1,
.atlas-sector-hero h1,
.atlas-hero-cyber h1 {
  font-family: var(--font-display) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75), 0 1px 36px rgba(0,0,0,0.45);
}

/* Breadcrumb chip row: leaner presence, doesn't compete with hero headline */
[class*="breadcrumb"],
[aria-label*="breadcrumb"],
[aria-label*="Breadcrumb"] {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  opacity: 0.72 !important;
  margin-bottom: 10px !important;
}

/* Component / module tile cards — consistent flex column layout */
[class*="atlas-module-card"],
[class*="atlas-component-card"],
[class*="atlas-os-card"] {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

/* Horizontal overflow on inline-grid sections: prevent blowout */
.container > div[style*="grid"],
section > div > div[style*="grid-template"] {
  overflow-x: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v172 — Blue→gold gradient on ALL CTAs, buttons, and diagrams.
   "Tech meets reality" — buttons pulse with orbital blue, hover reveals gold
   like Earth's atmospheric limb. Diagrams glow with the same orbital light.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PRIMARY CTA BUTTONS — blue core, gold atmosphere on hover ──────────── */
.atlas-cta-primary {
  background: linear-gradient(108deg, #1a6aee 0%, #2E80FF 50%, #2565cc 100%) !important;
  border: 1px solid rgba(78,160,255,0.40) !important;
  box-shadow: 0 2px 12px rgba(46,128,255,0.28), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: background 0.24s, box-shadow 0.24s, border-color 0.24s, transform 0.12s !important;
}
.atlas-cta-primary:hover {
  background: linear-gradient(108deg, #4EA0FF 0%, #2E80FF 42%, #c49038 100%) !important;
  border-color: rgba(196,144,56,0.55) !important;
  box-shadow: 0 0 26px rgba(46,128,255,0.50), 0 0 56px rgba(212,162,76,0.18), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  transform: translateY(-2px) !important;
}

/* ── GOLD CTA — stronger atmospheric glow ───────────────────────────────── */
.atlas-cta-gold:hover {
  box-shadow: 0 0 40px rgba(212,162,76,0.42), 0 8px 24px rgba(0,0,0,0.40) !important;
}

/* ── GHOST / OUTLINE BUTTONS ─────────────────────────────────────────────── */
.atlas-cta-ghost:hover,
[class*="btn-ghost"]:hover,
[class*="btn-outline"]:hover {
  border-color: rgba(196,144,56,0.55) !important;
  box-shadow: 0 0 18px rgba(212,162,76,0.22) !important;
  color: #e8c46a !important;
}

/* ── LINK ARROWS — blue→gold on hover, longer gap ───────────────────────── */
.atlas-link-arrow:hover {
  color: var(--brand-400) !important;
  gap: 12px !important;
}

/* ── UNIT ICON WRAPPERS — gradient background + glow ────────────────────── */
.atlas-service-row-icon,
[class*="atlas-icon-wrap"],
[class*="atlas-unit-icon"] {
  background: linear-gradient(135deg, rgba(46,128,255,0.18) 0%, rgba(212,162,76,0.09) 100%) !important;
  border-color: rgba(78,160,255,0.32) !important;
  box-shadow: 0 0 12px rgba(46,128,255,0.20) !important;
}

/* ── METHOD TIMELINE DOTS — orbital gradient nodes ──────────────────────── */
.atlas-method-dot {
  background: linear-gradient(135deg, rgba(46,128,255,0.22) 0%, rgba(212,162,76,0.14) 100%) !important;
  border: 1.5px solid rgba(78,160,255,0.48) !important;
  box-shadow: 0 0 16px rgba(46,128,255,0.30), 0 0 32px rgba(212,162,76,0.10) !important;
}

/* ── NUMBERED STEP NODES (timeline circles) ──────────────────────────────── */
.atlas-timeline-num {
  background: linear-gradient(135deg, rgba(46,128,255,0.20) 0%, rgba(212,162,76,0.12) 100%) !important;
  border-color: rgba(78,160,255,0.52) !important;
  box-shadow: 0 0 12px rgba(46,128,255,0.26), 0 0 22px rgba(212,162,76,0.08) !important;
}

/* ── ARCHITECTURE DIAGRAM SECTION — orbital radial glow behind diagram ───── */
.atlas-arch-section {
  background: linear-gradient(180deg,
    rgba(4,7,15,0.72) 0%,
    rgba(7,12,24,0.52) 35%,
    rgba(4,7,15,0.72) 100%
  ) !important;
}
.atlas-arch-section::after {
  content: "";
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  width: 720px; height: 520px;
  background: radial-gradient(ellipse at center,
    rgba(46,128,255,0.13) 0%,
    rgba(212,162,76,0.05) 40%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Architecture SVG nodes — blue→gold gradient stroke + luminous halo */
.atlas-arch-section svg circle,
.atlas-arch-section svg ellipse {
  stroke: url(#atlas-icon-grad) rgba(78,160,255,0.52) !important;
  filter: drop-shadow(0 0 5px rgba(46,128,255,0.36)) !important;
}
.atlas-arch-section svg line,
.atlas-arch-section svg path[stroke],
.atlas-arch-section svg polyline,
.atlas-arch-section svg rect[stroke] {
  stroke: rgba(78,160,255,0.40) !important;
  filter: drop-shadow(0 0 3px rgba(46,128,255,0.24)) !important;
}

/* ── GLASS CARD — gold atmospheric border kiss on hover ──────────────────── */
.atlas-glass-card:hover {
  border-top-color: rgba(196,144,56,0.45) !important;
}

/* ── CASE CARDS — gold top accent on hover ───────────────────────────────── */
.atlas-case-card:hover,
.atlas-case-card-v2:hover {
  border-top-color: rgba(196,144,56,0.52) !important;
}

/* ── PARTNER CHIPS — gold tint on hover ──────────────────────────────────── */
.atlas-partner-chip:hover {
  border-color: rgba(196,144,56,0.42) !important;
  color: #e8c46a !important;
}

/* ── SCAN BORDERS — gold component strengthened ──────────────────────────── */
.atlas-scan-border-top::before {
  background: linear-gradient(90deg, transparent, rgba(78,160,255,0.65), rgba(212,162,76,0.45), rgba(78,160,255,0.65), transparent) !important;
  background-size: 300% 100% !important;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   v174 — Mobile-first: slim nav, persistent lang pill, city chips, fluid hero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Injected lang pill (#atlas-hdr-lang) — hidden on desktop, shown beside hamburger */
#atlas-hdr-lang { display: none !important; }

@media (max-width: 767px) {
  /* Show injected lang pill */
  #atlas-hdr-lang { display: inline-flex !important; }

  /* Hero h1: scale down gracefully */
  .atlas-hero-cyber h1,
  .atlas-subpage-hero h1,
  .atlas-sector-hero h1 {
    font-size: clamp(26px, 7.5vw, 48px) !important;
    line-height: 1.18 !important;
  }

  /* Hero padding: breathing room on small screens */
  .atlas-hero-cyber,
  .atlas-subpage-hero,
  .atlas-sector-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 72px !important;
    padding-bottom: 52px !important;
  }

  /* Mobile menu panel: scrollable if items overflow viewport */
  .nav-mobile-panel,
  [class*="nav-mobile-panel"] {
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* City chips injected by JS */
  #atlas-city-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 0 4px !important;
    border-top: 1px solid rgba(78,160,255,0.10) !important;
    margin-top: 8px !important;
  }

  /* Cards: don't overflow viewport */
  .atlas-glass-card,
  [class*="atlas-case-card"],
  [class*="atlas-service-row"],
  [class*="atlas-unit-card"] {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Inline grids: horizontal scroll instead of overflow blowout */
  div[style*="display: grid"],
  div[style*="display:grid"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v175 — Subpage hero visibility, mobile CTA alignment, pricing corrections.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subpage + sector heroes: ensure they're positioning parents so ::before sits inside */
.atlas-subpage-hero,
.atlas-sector-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* All direct children of subpage heroes sit above the ::before radial overlay */
.atlas-subpage-hero > *,
.atlas-sector-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Subpage hero: always at least this tall so it never looks empty */
.atlas-subpage-hero,
.atlas-sector-hero {
  min-height: 260px !important;
}

/* On mobile: give subpage heroes a visible richer background tint + more height */
@media (max-width: 767px) {
  .atlas-subpage-hero,
  .atlas-sector-hero {
    min-height: 220px !important;
    background: linear-gradient(160deg, rgba(6,10,22,1) 0%, rgba(10,18,44,1) 55%, rgba(6,10,20,1) 100%) !important;
    border-bottom: 1px solid rgba(46,128,255,0.14) !important;
  }
  .atlas-subpage-hero::before {
    background: radial-gradient(520px 280px at 8% 38%, rgba(46,128,255,0.24), transparent 68%) !important;
  }

  /* Mobile CTA button groups: stack full-width, centered */
  .atlas-cta-primary { width: 100% !important; justify-content: center !important; }
  .atlas-link-arrow  { justify-content: center !important; }

  /* Quick-contact rows (call/mail/intake): stack vertically */
  [class*="atlas-contact-quick"],
  [class*="hero-cta-row"],
  [class*="atlas-cta-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  [class*="atlas-contact-quick"] > *,
  [class*="hero-cta-row"] > *,
  [class*="atlas-cta-row"] > * {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* ─────────────────────────────────────────────────────────────────────────── */