/* =========================================================================
   ATCL COMMAND OS — Visual System
   Cinematic command environment. Type/color discipline from Elite DS.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (cinematic, larger anchors) */
  --t-2xs: 11px;  --t-xs: 12px;  --t-sm: 13px;  --t-base: 15px;
  --t-md: 17px;   --t-lg: 20px;  --t-xl: 24px;  --t-2xl: 30px;
  --t-3xl: 38px;  --t-4xl: 50px; --t-5xl: 66px; --t-6xl: 88px; --t-7xl: 116px;

  --tr-tightest: -0.045em; --tr-tight: -0.025em; --tr-normal: 0;
  --tr-wide: 0.06em; --tr-widest: 0.22em;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 480ms;

  /* ---- Division identity accents (stable across themes) ---- */
  --infra: #4F9BFF;  --infra-2: #93C5FD;
  --ai:    #A78BFA;  --ai-2:    #22D3EE;
  --sw:    #2DD4BF;  --sw-2:    #5EEAD4;
  --cyber: #FBBF24;  --cyber-2: #38BDF8;
}

/* =========================================================================
   THEME REACTOR — six atmospheres. Default: ATCL Core.
   ========================================================================= */
:root,
[data-atcl-theme="core"] {
  --bg0: #04080A;      --bg1: #061010;       --bg2: #08150F;
  --surface:  rgba(10, 24, 22, 0.55);
  --surface2: rgba(14, 32, 28, 0.80);
  --hud:      rgba(94, 234, 212, 0.16);
  --hud-strong: rgba(94, 234, 212, 0.34);
  --line:     rgba(94, 234, 212, 0.10);
  --grid:     rgba(60, 150, 140, 0.15);
  --fg:   #E8FBF6;   --fg2: #9EC4BC;   --fg3: #5C7D76;
  --acc:  #5EEAD4;   --acc2: #D4A843;  --acc-rgb: 94, 234, 212;
  --amber: #D4A843;  --amber-rgb: 212, 168, 67;
  --particle: #2DD4BF;
  --glow: 0 0 0 1px rgba(94,234,212,0.20), 0 10px 50px -10px rgba(94,234,212,0.28);
}
[data-atcl-theme="infra"] {
  --bg0: #030A12; --bg1: #061320; --bg2: #08192B;
  --surface: rgba(10,26,44,0.62); --surface2: rgba(14,34,58,0.80);
  --hud: rgba(96,165,250,0.18); --hud-strong: rgba(96,165,250,0.38);
  --line: rgba(96,165,250,0.12); --grid: rgba(70,130,210,0.24);
  --fg: #EAF3FF; --fg2: #A9C2E6; --fg3: #5E7DA6;
  --acc: #4F9BFF; --acc2: #93C5FD; --acc-rgb: 79,155,255;
  --particle: #60A5FA;
  --glow: 0 0 0 1px rgba(79,155,255,0.22), 0 10px 50px -10px rgba(79,155,255,0.34);
}
[data-atcl-theme="ai"] {
  --bg0: #060410; --bg1: #0B0820; --bg2: #100A2B;
  --surface: rgba(24,16,52,0.60); --surface2: rgba(33,22,68,0.80);
  --hud: rgba(167,139,250,0.18); --hud-strong: rgba(167,139,250,0.40);
  --line: rgba(167,139,250,0.13); --grid: rgba(124,99,210,0.22);
  --fg: #F1ECFF; --fg2: #BBA9E6; --fg3: #7C6BA6;
  --acc: #A78BFA; --acc2: #22D3EE; --acc-rgb: 167,139,250;
  --particle: #A78BFA;
  --glow: 0 0 0 1px rgba(167,139,250,0.24), 0 10px 54px -10px rgba(167,139,250,0.40);
}
[data-atcl-theme="sw"] {
  --bg0: #02100D; --bg1: #04211B; --bg2: #052D24;
  --surface: rgba(8,40,33,0.58); --surface2: rgba(11,52,42,0.80);
  --hud: rgba(45,212,191,0.18); --hud-strong: rgba(45,212,191,0.40);
  --line: rgba(45,212,191,0.13); --grid: rgba(30,150,130,0.24);
  --fg: #E6FFF8; --fg2: #9FE0D2; --fg3: #5C988A;
  --acc: #2DD4BF; --acc2: #5EEAD4; --acc-rgb: 45,212,191;
  --particle: #2DD4BF;
  --glow: 0 0 0 1px rgba(45,212,191,0.22), 0 10px 50px -10px rgba(45,212,191,0.36);
}
[data-atcl-theme="cyber"] {
  --bg0: #0A0B0E; --bg1: #101218; --bg2: #161922;
  --surface: rgba(26,28,36,0.62); --surface2: rgba(34,37,48,0.82);
  --hud: rgba(251,191,36,0.16); --hud-strong: rgba(251,191,36,0.38);
  --line: rgba(180,150,90,0.12); --grid: rgba(120,110,90,0.22);
  --fg: #F6F1E8; --fg2: #C8BCA6; --fg3: #8A8068;
  --acc: #FBBF24; --acc2: #38BDF8; --acc-rgb: 251,191,36;
  --particle: #FBBF24;
  --glow: 0 0 0 1px rgba(251,191,36,0.22), 0 10px 50px -10px rgba(251,191,36,0.32);
}
[data-atcl-theme="exec"] {
  --bg0: #0B1120; --bg1: #0F172A; --bg2: #141E36;
  --surface: rgba(20,30,54,0.70); --surface2: rgba(28,40,68,0.88);
  --hud: rgba(148,163,184,0.18); --hud-strong: rgba(34,211,238,0.30);
  --line: rgba(148,163,184,0.12); --grid: rgba(100,120,150,0.16);
  --fg: #F4F8FF; --fg2: #B6C4DC; --fg3: #76869F;
  --acc: #22D3EE; --acc2: #94A3B8; --acc-rgb: 34,211,238;
  --particle: #64748B;
  --glow: 0 0 0 1px rgba(34,211,238,0.16), 0 8px 32px -10px rgba(34,211,238,0.20);
}

/* =========================================================================
   RESET + BASE
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11','ss01','ss03';
  overflow-x: hidden;
  transition: background var(--dur) var(--ease);
}
body.no-scroll { overflow: hidden; height: 100vh; }
::selection { background: rgba(var(--acc-rgb), 0.30); color: #fff; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb),0.22); border-radius: 99px; border: 2px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--acc-rgb),0.4); }

/* =========================================================================
   PERSISTENT BACKGROUND
   ========================================================================= */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; display: block;
  pointer-events: none;
}
.bg-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--acc-rgb),0.10), transparent 55%),
    radial-gradient(100% 80% at 100% 110%, rgba(var(--acc-rgb),0.06), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 50%, var(--bg0) 100%);
  transition: background var(--dur) var(--ease);
}
.bg-scan {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.16) 3px 4px);
  mix-blend-mode: overlay;
}

/* =========================================================================
   SHARED HUD PRIMITIVES
   ========================================================================= */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--acc);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc));
}
.label {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg3);
}
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border: 1px solid var(--hud);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%);
}
.corner { position: absolute; width: 10px; height: 10px; border: 1px solid var(--hud-strong); pointer-events: none; }
.corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: 14px 22px; border-radius: 10px;
  border: 1px solid var(--hud-strong);
  color: var(--fg); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:hover { border-color: var(--acc); box-shadow: var(--glow); }
.btn:active { transform: scale(0.98); }
.btn--primary {
  background: linear-gradient(180deg, rgba(var(--acc-rgb),0.22), rgba(var(--acc-rgb),0.08));
  border-color: rgba(var(--acc-rgb),0.55);
  color: #fff;
}
.btn--primary:hover { background: linear-gradient(180deg, rgba(var(--acc-rgb),0.34), rgba(var(--acc-rgb),0.14)); }
.btn--ghost { background: rgba(255,255,255,0.02); }

/* Section scaffolding */
.section { position: relative; z-index: 5; padding: clamp(64px, 9vw, 130px) clamp(20px, 5vw, 80px); }
.wrap { max-width: 1320px; margin: 0 auto; }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; max-width: 760px; }
.section-title {
  font-size: clamp(30px, 4.4vw, var(--t-4xl));
  font-weight: 600; line-height: 1.06; letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.section-sub { font-size: var(--t-md); color: var(--fg2); line-height: 1.6; max-width: 640px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }
.reveal[data-d="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}