/* ===================== Self-hosted fonts =====================
   Previously loaded from fonts.googleapis.com / fonts.gstatic.com, which sent
   every visitor's IP to Google. Now served from our own origin: no third-party
   request, no external dependency, and one fewer subprocessor to disclose.
   Variable fonts, subset to Latin. */
@font-face {
  font-family: 'Sora';
  src: url('/static/fonts/Sora.woff2') format('woff2-variations'),
       url('/static/fonts/Sora.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('/static/fonts/Orbitron.woff2') format('woff2-variations'),
       url('/static/fonts/Orbitron.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/DMSans.woff2') format('woff2-variations'),
       url('/static/fonts/DMSans.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('/static/fonts/ChivoMono.woff2') format('woff2-variations'),
       url('/static/fonts/ChivoMono.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Utility classes formerly supplied by the Tailwind CDN. Every use already has
   an equivalent inline style; these exist so nothing shifts if one is removed. */
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
/* ==========================================================================
   NightShade Technologies — design tokens + component styles
   Recreated natively from the design handoff (scheme-nightshade.css tokens)
   ========================================================================== */

/* ===================== Self-hosted display font =====================
   Quantum (Gregory "Sesohq" Ortiz) — used for the hero headline only.
   Drop quantum.woff2 / quantum.woff into /static/fonts/ and it takes over.
   Until then, font-display:swap + the Sora fallback in the stack mean the
   headline renders in Sora with no layout break. */
@font-face {
  font-family: 'Quantum';
  src: url('/static/fonts/quantum.woff2') format('woff2'),
       url('/static/fonts/quantum.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-near-black: #0a0812;
  --bg-elevated: #120e1c;
  --bg-highest: #1a1428;
  --bg-footer: #050308;

  --violet-primary: #a855f7;
  --violet-deep: #7c3aed;
  --violet-light: #c084fc;
  --violet-darker: #6d28d9;

  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.5);

  --border-subtle: rgba(168, 85, 247, 0.08);
  --border-medium: rgba(168, 85, 247, 0.15);
  --border-strong: rgba(168, 85, 247, 0.35);

  --shadow-card-hover: 0 20px 50px rgba(168, 85, 247, 0.15);
  --shadow-cta: 0 8px 32px rgba(168, 85, 247, 0.35);
  --shadow-cta-hover: 0 15px 40px rgba(168, 85, 247, 0.5);

  --success: #22c55e;

  /* Motion — fast in, decisive out. Mechanical, not ambient. */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hard: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 300ms;
}
* { box-sizing: border-box; }
/* --- Base reset -----------------------------------------------------------
   These rules were previously supplied by Tailwind's Preflight, which arrived
   with the Tailwind CDN. That CDN has been removed (it was a third-party
   request on every page load), so the parts the site actually depended on are
   declared here instead. Without them, lists regain bullets and default
   indentation and buttons regain native chrome. */
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote, dl, dd, h1, h2, h3, h4, h5, h6, p { margin: 0; }
button, input, select, textarea {
  font: inherit; color: inherit; margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
svg { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-near-black);
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-snap); }
a:hover { color: var(--violet-primary); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
  font-family: 'Sora', sans-serif;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
p { margin: 0 0 16px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }
.section { padding: 80px 0; position: relative; }
.section-sm { padding: 60px 0; }
.bg-dark-1 { background: var(--bg-near-black); }
.bg-dark-2 { background: var(--bg-elevated); }
.bg-dark-3 { background: var(--bg-highest); }
.bg-gradient-violet { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); }
.subtitle {
  color: var(--violet-primary);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}
.lead { font-size: 19px; line-height: 1.55; color: var(--text-secondary); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Buttons */
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 40px;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  transition: box-shadow var(--dur-med) var(--ease-snap), transform var(--dur-med) var(--ease-snap), background var(--dur-med) var(--ease-snap);
  white-space: nowrap;
}
.btn-main:hover { box-shadow: var(--shadow-cta-hover); color: #fff; transform: translateY(-1px); }
.btn-main.btn-line {
  background: transparent;
  border: 1px solid rgba(168, 85, 247, .6);
}
.btn-main.btn-line:hover {
  background: rgba(168, 85, 247, .1);
  border-color: var(--violet-primary);
  box-shadow: none;
}
.btn-main.btn-sm { padding: 10px 22px; font-size: 13px; }
/* ===================== Topbar ===================== */
#topbar {
  background: rgba(0, 0, 0, .4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
#topbar .topbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  gap: 16px;
}
#topbar .topbar-left { display: flex; gap: 24px; color: var(--text-muted); flex-wrap: wrap; }
#topbar .topbar-left span { display: inline-flex; align-items: center; gap: 8px; }
#topbar .topbar-left i { color: var(--violet-primary); }
#topbar .topbar-left a { color: inherit; }
#topbar .social-icons { display: flex; gap: 14px; }
#topbar .social-icons a { color: var(--text-muted); font-size: 14px; }
@media (max-width: 850px) { #topbar { display: none; } }
/* ===================== Header ===================== */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--dur-med) var(--ease-snap);
}
header.site-header.is-scrolled,
header.site-header.solid {
  background: rgba(10, 8, 18, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}
#logo a { display: inline-block; line-height: 0; }
#logo img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, .25));
}
#mainmenu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
#mainmenu > li { position: relative; }
#mainmenu > li > a.menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, .85);
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
}
#mainmenu > li > a.menu-item:hover,
#mainmenu > li.active > a.menu-item { color: var(--violet-primary); }
#mainmenu .caret { font-size: 10px; opacity: .6; transition: transform var(--dur-fast) var(--ease-snap); }
#mainmenu > li:hover .caret { transform: rotate(180deg); }
#mainmenu .submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 10px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all var(--dur-fast) var(--ease-snap);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  z-index: 50;
}
#mainmenu > li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#mainmenu .submenu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}
#mainmenu .submenu li a:hover {
  background: rgba(168, 85, 247, .08);
  color: var(--violet-primary);
}
.header-cta { display: flex; align-items: center; gap: 16px; }
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px; height: 24px;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu-btn span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
@media (max-width: 991px) {
  #mainmenu { display: none; }
  .header-cta .btn-main:not(.mobile-menu-btn) { display: none; }
  .mobile-menu-btn { display: flex; }
}
/* Mobile nav drawer */
#mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 3, 8, .97);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
#mobile-nav.open { display: flex; }
#mobile-nav .mobile-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
#mobile-nav .close-btn { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; }
#mobile-nav ul { list-style: none; display: flex; flex-direction: column; }
#mobile-nav > ul > li { border-bottom: 1px solid var(--border-subtle); }
#mobile-nav > ul > li > a,
#mobile-nav > ul > li > .mobile-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 4px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 17px;
}
#mobile-nav .mobile-submenu {
  display: none;
  list-style: none;
  padding-left: 12px;
  padding-bottom: 8px;
}
#mobile-nav .mobile-submenu.open { display: block; }
#mobile-nav .mobile-submenu li a {
  display: block;
  padding: 10px 4px;
  color: var(--text-muted);
  font-size: 15px;
}
#mobile-nav .mobile-cta { margin-top: 24px; }
/* ===================== Hero v2 (video/wordmark) ===================== */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 172px 0 124px;
}
.hero-v2 .hero-video,
.hero-v2 .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.7) saturate(1.15);
  z-index: 0;
}
.hero-v2 .hero-bg { background: url('/static/img/hero-v2.webp') center/cover no-repeat; }
.hero-v2 .hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(10,8,18,.95) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 45%, transparent 25%, rgba(10,8,18,.55) 70%),
    linear-gradient(180deg, rgba(10,8,18,.65) 0%, rgba(10,8,18,.3) 35%, rgba(10,8,18,.95) 100%);
}
.hero-v2 .hero-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .18;
  background-image:
    linear-gradient(rgba(168,85,247,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.14) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}
.hero-v2 .hero-shield-glow {
  position: absolute;
  top: 20%; left: 50%; transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,85,247,.25), transparent 60%);
  z-index: 1; pointer-events: none;
  opacity: .8;
}
.hero-v2 .container { position: relative; z-index: 2; text-align: center; }
.hero-v2 .hero-shield {
  width: clamp(140px, 18vw, 240px);
  height: auto;
  margin: 0 auto 44px;
  filter: drop-shadow(0 0 40px rgba(168,85,247,.5)) drop-shadow(0 0 80px rgba(124,58,237,.35));
}
.hero-v2 .eyebrow {
  color: var(--violet-primary);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 28px;
}
/* Wide tracking makes this line physically long — ease size and spacing
   on narrow screens so it holds one line instead of breaking mid-phrase. */
@media (max-width: 720px) {
  .hero-v2 .eyebrow { font-size: 15px; letter-spacing: .24em; margin-bottom: 20px; }
  /* Desktop breathing room is too much on a phone — the hero is already
     min-height:100vh, so keep the padding from pushing content off-screen. */
  .hero-v2 { padding: 130px 0 90px; }
  .hero-v2 .hero-shield { margin-bottom: 30px; }
  .hero-v2 .lead { margin-top: 26px; }
  .hero-v2 .hero-cta { margin-top: 36px; }
}
@media (max-width: 480px) {
  .hero-v2 .eyebrow { font-size: 12px; letter-spacing: .18em; }
}
.hero-v2 h1 {
  /* Orbitron ExtraBold (800). Very wide face — measured at 800 weight,
     "NIGHTSHADE TECHNOLOGIES" is 1089px at 64px, which just fits the 1152px
     content box on one line. Anything above ~66px wraps. */
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-size: clamp(24px, 4.4vw, 64px);
  margin: 0;
  text-transform: uppercase;
  /* Beveled: white top edge → violet body → deep base, with a hard shadow
     to seat the type against the video. */
  background: linear-gradient(180deg, #fff 0%, #e9d5ff 22%, var(--violet-primary) 62%, #5b21b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 10px 26px rgba(0,0,0,.6));
}
.hero-v2 h1 .amp { color: inherit; -webkit-text-fill-color: transparent; }
.hero-v2 .lead {
  color: rgba(255,255,255,.78);
  font-size: 20px;
  line-height: 1.5;
  max-width: 640px;
  margin: 34px auto 0;
}
.hero-v2 .hero-cta {
  margin-top: 52px;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.hero-focus {
  margin-top: 92px;
  display: flex; justify-content: center; align-items: center;
  gap: 34px; flex-wrap: wrap;
}
.hero-focus .hf-item {
  position: relative;
  padding: 9px 2px;
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  /* inactive stays legible — all four readable at a glance, not hidden */
  color: rgba(255,255,255,.5);
  cursor: default;
  transition: color var(--dur-med) var(--ease-snap);
}
.hero-focus .hf-item .num {
  font-family: 'Chivo Mono', monospace;
  font-size: 10px; letter-spacing: .2em;
  color: var(--violet-primary);
  opacity: 0; margin-right: 8px;
  transition: opacity var(--dur-med) var(--ease-snap);
}
.hero-focus .hf-item::before {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--violet-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-hard);
}
.hero-focus .hf-item.act { color: #fff; }
.hero-focus .hf-item.act .num { opacity: 1; }
.hero-focus .hf-item.act::before { transform: scaleX(1); }
@media (max-width: 768px) {
  .hero-focus { gap: 18px 22px; margin-top: 60px; }
  .hero-focus .hf-item { font-size: 14px; }
}
/* No cycling for reduced-motion users — show all four equally, fully legible. */
@media (prefers-reduced-motion: reduce) {
  .hero-focus .hf-item { color: rgba(255,255,255,.85); }
  .hero-focus .hf-item .num { opacity: 1; }
}
/* ===================== Hero boot sequence =====================
   One orchestrated ~1.2s entrance on load, then stillness.
   Pure CSS throughout (fill-mode: backwards holds the hidden state through
   each delay); no JS involved. */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .hero-grid       { animation: bootGridFlicker .5s linear both; }
  .hero-v2 .hero-shield-glow{ animation: bootGlow .5s var(--ease-snap) .08s backwards; }
  .hero-v2 .hero-shield     { animation: bootSnap .32s var(--ease-snap) .1s backwards; }
  .hero-v2 .eyebrow         { animation: bootWipe .3s var(--ease-hard) .26s backwards; }
  .hero-v2 h1               { position: relative; animation: bootWipe .6s var(--ease-hard) .38s backwards; }
  /* scanline riding the reveal edge: sits just inside the unmasked region,
     so the h1's own clip-path never cuts it off */
  .hero-v2 h1::after {
    content: '';
    position: absolute;
    top: -4%;
    height: 108%;
    width: 3px;
    left: 0;
    transform: translateX(-100%);
    background: var(--violet-light, #a855f7);
    box-shadow: 0 0 12px 2px rgba(168,85,247,.9), 0 0 32px 8px rgba(124,58,237,.5);
    opacity: 0;
    pointer-events: none;
    animation: bootScan .6s var(--ease-hard) .38s backwards;
  }
  .hero-v2 .lead            { animation: bootWipe .34s var(--ease-hard) .7s backwards; }
  .hero-v2 .hero-cta        { animation: bootSnap .28s var(--ease-snap) .82s backwards; }
  .hero-focus .hf-item      { animation: bootTile .2s var(--ease-snap) backwards; }
  .hero-focus .hf-item:nth-child(1) { animation-delay: .90s; }
  .hero-focus .hf-item:nth-child(2) { animation-delay: .96s; }
  .hero-focus .hf-item:nth-child(3) { animation-delay: 1.02s; }
  .hero-focus .hf-item:nth-child(4) { animation-delay: 1.08s; }
  /* stepped cursor: blinks 4 times after the eyebrow resolves, then gone */
  .hero-v2 .eyebrow::after {
    content: '▍';
    margin-left: .35em;
    color: var(--violet-primary);
    opacity: 0;
    animation: bootCaret .44s linear 1.15s 4;
  }
}
/* hard-cut flicker: duplicated stops = no interpolation between states */
@keyframes bootGridFlicker {
  0%, 24%  { opacity: 0; }
  25%, 55% { opacity: .28; }
  56%, 74% { opacity: .08; }
  75%, 100% { opacity: .18; }
}
@keyframes bootGlow {
  from { opacity: 0; transform: translateX(-50%) scale(.8); }
  to   { opacity: .8; transform: translateX(-50%) scale(1); }
}
@keyframes bootSnap {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bootWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes bootScan {
  0%   { left: 0;    opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes bootTile {
  from { opacity: 0; transform: translateY(6px); border-color: rgba(168,85,247,.55); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bootCaret {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* ===================== Hero v3 (split) ===================== */
.hero-v3 {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 160px 0 80px;
}
.hero-v3 .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(124,58,237,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(168,85,247,.2) 0%, transparent 50%),
    linear-gradient(160deg, #0a0812 0%, #14082a 50%, #0a0812 100%);
}
.hero-v3 .hero-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .3;
  background-image:
    linear-gradient(rgba(168,85,247,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.1) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 65%);
}
.hero-v3 .container { position: relative; z-index: 2; }
.hero-v3-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-v3 .eyebrow {
  color: var(--violet-primary);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-v3 h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-size: clamp(44px, 5.5vw, 84px);
  margin: 0 0 24px;
  color: #fff;
}
.hero-v3 h1 .accent {
  background: linear-gradient(135deg, var(--violet-light), var(--violet-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-v3 .lead { font-size: 19px; line-height: 1.6; max-width: 560px; margin: 0; }
.hero-v3 .hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(168,85,247,.15);
}
.hero-trust .item strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.15;
}
.hero-trust .item span { color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .03em; }
.hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(168,85,247,.2), inset 0 0 60px rgba(168,85,247,.05);
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) brightness(.85);
}
.hero-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,8,18,.85) 100%);
}
.hero-visual .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; z-index: 2; color: #fff; }
.hero-visual .caption .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  margin-right: 8px;
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px var(--success);
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } }
.hero-visual .caption .label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #86efac; margin-bottom: 8px; display: flex; align-items: center;
}
.hero-visual .caption .metric { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.15; }
@media (max-width: 991px) {
  .hero-v3-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 40px; aspect-ratio: 16/10; }
  .hero-trust { grid-template-columns: repeat(2, 1fr); }
}
/* ===================== CTA band ===================== */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 50px 0;
}
.cta-band h3 { font-size: 32px; margin-bottom: 8px; }
.cta-band p { margin: 0; opacity: .7; }
/* ===================== Threat landscape ===================== */
.threat-section {
  position: relative;
  background: var(--bg-near-black);
  overflow: hidden;
}
.threat-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-near-black), var(--bg-elevated));
  z-index: 0;
}
.threat-section > .container { position: relative; z-index: 1; }
.threat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px; }
.threat-visual { position: relative; }
.threat-stat {
  position: absolute; bottom: -24px; right: -24px; z-index: 3;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  color: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  width: 200px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.threat-stat h3 { font-size: 34px; margin: 0 0 4px; }
.threat-stat p { font-size: 13px; line-height: 1.4; margin: 0; color: rgba(255,255,255,.9); }
.threat-visual .main-img { border-radius: 10px; overflow: hidden; width: 100%; }
.threat-pillar { display: flex; gap: 20px; margin-bottom: 32px; align-items: flex-start; }
.threat-pillar:last-child { margin-bottom: 0; }
.threat-pillar img { width: 56px; height: 56px; flex-shrink: 0; }
.threat-pillar h4 { font-size: 19px; margin-bottom: 8px; }
.threat-pillar p { margin: 0; font-size: 15px; color: rgba(255,255,255,.72); }
@media (max-width: 900px) {
  .threat-grid { grid-template-columns: 1fr; }
  .threat-visual { margin-bottom: 60px; }
}
/* ===================== Marquee ===================== */
.marquee-band {
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  overflow: hidden;
  padding: 22px 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 28s linear infinite;
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
}
.marquee-track .sep { opacity: .35; padding: 0 8px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* ===================== Services grid ===================== */
/* Sticky-scroll services layout */
.svc-sticky { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.svc-side { position: sticky; top: 110px; }
.svc-index { list-style: none; margin: 30px 0 0; padding: 0; }
.svc-index li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px;
  color: rgba(255,255,255,.34);
  transition: color var(--dur-fast) var(--ease-snap), padding-left var(--dur-fast) var(--ease-snap);
}
.svc-index li .n { font-family: 'Chivo Mono', monospace; font-size: 11px; font-weight: 400; opacity: .55; }
.svc-index li.act { color: #fff; padding-left: 6px; }
.svc-index li.act .n { color: var(--violet-primary); opacity: 1; }
.svc-cards { display: flex; flex-direction: column; gap: 22px; }
.service-card {
  position: relative;
  background: linear-gradient(155deg, var(--bg-highest) 0%, var(--bg-near-black) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 40px;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-med) var(--ease-snap);
  height: 100%;
}
/* top edge accent — wipes across on hover */
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-primary), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-hard);
}
.service-card:hover::before { transform: scaleX(1); }
/* faint violet bloom from the icon corner */
.service-card::after {
  content: '';
  position: absolute; top: -40px; left: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(168,85,247,.16), transparent 70%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-snap);
}
.service-card:hover::after { opacity: 1; }
.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,.45);
  box-shadow: var(--shadow-card-hover);
}
/* scroll-driven active state — mirrors hover, set by IntersectionObserver */
.service-card.act { border-color: rgba(168,85,247,.45); box-shadow: var(--shadow-card-hover); }
.service-card.act::before { transform: scaleX(1); }
.service-card.act::after { opacity: 1; }
.service-card.act .card-brackets i { opacity: 1; transform: translate(0,0); }
.service-card.act .card-index,
.service-card.act .card-tag { color: var(--violet-light); }
.service-card.act .icon-tile { box-shadow: 0 0 0 1px rgba(168,85,247,.5), 0 10px 30px rgba(124,58,237,.35); }
/* target-lock corner brackets — snap in, no easing tail */
.service-card .card-brackets { position: absolute; inset: 12px; pointer-events: none; z-index: 2; }
.service-card .card-brackets i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--violet-primary);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.service-card .card-brackets i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,-4px); }
.service-card .card-brackets i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,-4px); }
.service-card .card-brackets i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,4px); }
.service-card .card-brackets i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,4px); }
.service-card:hover .card-brackets i { opacity: 1; transform: translate(0,0); }
/* mono index watermark */
.service-card .card-index {
  position: absolute; top: 26px; right: 30px; z-index: 2;
  font-family: 'Chivo Mono', monospace;
  font-size: 13px; letter-spacing: .1em;
  color: rgba(168,85,247,.35);
  transition: color var(--dur-fast) var(--ease-snap);
}
.service-card:hover .card-index { color: var(--violet-light); }
/* system-readout tag above the title */
.service-card .card-tag {
  display: block;
  font-family: 'Chivo Mono', monospace;
  font-size: 10px; letter-spacing: .28em;
  color: rgba(255,255,255,.38);
  margin-bottom: 8px;
  transition: color var(--dur-fast) var(--ease-snap);
}
.service-card:hover .card-tag { color: var(--violet-light); }
.service-card .icon-tile {
  position: relative; z-index: 2;
  width: 64px; height: 64px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: box-shadow var(--dur-med) var(--ease-snap);
}
.service-card:hover .icon-tile { box-shadow: 0 0 0 1px rgba(168,85,247,.5), 0 10px 30px rgba(124,58,237,.35); }
.service-card .icon-tile img { width: 34px; height: 34px; }
.service-card h4 { font-size: 22px; position: relative; z-index: 2; }
.service-card p { font-size: 15px; margin-bottom: 24px; position: relative; z-index: 2; }
.service-card .btn-main { position: relative; z-index: 2; }
.service-card .ar {
  font-style: normal; display: inline-block; margin-left: 6px;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.service-card:hover .ar { transform: translateX(4px); }
/* staggered entrance — cards arrive in sequence, not as a block */

@media (max-width: 900px) {
  .svc-sticky { grid-template-columns: 1fr; gap: 36px; }
  .svc-side { position: static; }
}
/* ===================== Why NightShade ===================== */
.why-tabs { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; margin-top: 48px; }
.why-tablist { display: flex; flex-direction: column; gap: 8px; }
.why-tab {
  position: relative; text-align: left; cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid rgba(168,85,247,.18);
  padding: 18px 20px;
  color: rgba(255,255,255,.45);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px;
  display: flex; gap: 14px; align-items: center;
  transition: color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap);
}
.why-tab .n { font-family: 'Chivo Mono', monospace; font-size: 11px; font-weight: 400; opacity: .6; }
.why-tab:hover { color: #fff; background: rgba(168,85,247,.05); }
.why-tab:focus-visible { outline: 1px solid var(--violet-primary); outline-offset: 2px; }
.why-tab.act {
  color: #fff;
  border-left-color: var(--violet-primary);
  background: linear-gradient(90deg, rgba(124,58,237,.18), transparent);
}
.why-tab.act .n { color: var(--violet-primary); opacity: 1; }
.why-panes { position: relative; }
.why-pane { display: none; }
.why-pane.act { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .why-pane.act { animation: paneWipe .34s var(--ease-hard); }
}
@keyframes paneWipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.why-pane .why-media {
  position: relative; overflow: hidden;
  height: 280px; border-radius: 14px;
  border: 1px solid rgba(168,85,247,.35);
  margin-bottom: 24px;
}
.why-pane .why-media img { width: 100%; height: 100%; object-fit: cover; }
.why-pane .why-media .card-brackets { position: absolute; inset: 12px; pointer-events: none; z-index: 2; }
.why-pane .why-media .card-brackets i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--violet-primary); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.why-pane .why-media .card-brackets i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,-4px); }
.why-pane .why-media .card-brackets i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,-4px); }
.why-pane .why-media .card-brackets i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,4px); }
.why-pane .why-media .card-brackets i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,4px); }
.why-pane.act .why-media .card-brackets i { opacity: 1; transform: translate(0,0); }
.why-pane h3 { font-size: 25px; margin-bottom: 12px; }
.why-pane p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
@media (max-width: 900px) {
  .why-tabs { grid-template-columns: 1fr; gap: 28px; }
  .why-pane .why-media { height: 220px; }
}
/* ===================== Stat counters ===================== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; text-align: center; align-items: start; }
.stat-item .circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px; color: #fff;
}
.stat-item h3 { font-size: 44px; margin-bottom: 10px; font-family: 'Chivo Mono', monospace; line-height: 1; }
.stat-item h3 .unit { font-size: 22px; color: var(--violet-light); margin-left: 1px; }
.stat-item span.label {
  display: block; font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.62);
  max-width: 240px; margin: 0 auto;
}
.stats-source {
  margin: 44px auto 0; text-align: center;
  font-family: 'Chivo Mono', monospace;
  font-size: 11px; letter-spacing: .04em; line-height: 1.6;
  color: rgba(255,255,255,.34);
  max-width: 720px;
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } }
/* ===================== Partner grid ===================== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px 0;
}
@media (max-width: 991px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-tile {
  aspect-ratio: 4/3;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(26,20,40,.55), rgba(10,8,18,.55));
  border: 1px solid rgba(168,85,247,.12);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px;
  gap: 14px;
  transition: all var(--dur-med) var(--ease-snap);
  position: relative;
  overflow: hidden;
}
.partner-tile:hover { border-color: rgba(168,85,247,.4); transform: translateY(-4px); background: linear-gradient(155deg, rgba(26,20,40,.75), rgba(10,8,18,.75)); }
.partner-tile img { max-width: 78%; max-height: 56%; width: auto; height: auto; object-fit: contain; filter: brightness(.95); transition: filter var(--dur-med) var(--ease-snap), transform var(--dur-med) var(--ease-snap); }
.partner-tile:hover img { filter: brightness(1.1); transform: scale(1.05); }
.partner-tile .partner-role { font-family: 'Sora', sans-serif; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center; transition: color var(--dur-med) var(--ease-snap); }
.partner-tile:hover .partner-role { color: var(--violet-light); }
.partner-tile.stk-tile:hover { border-color: rgba(250,204,21,.35); }
.partner-tile.stk-tile:hover .partner-role { color: #fde047; }
/* ===================== Case tiles ===================== */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.case-tile {
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(135deg, rgba(124,58,237,.35), rgba(10,8,18,.9)),
    radial-gradient(circle at 30% 20%, rgba(168,85,247,.4), transparent 50%);
  border: 1px solid rgba(168,85,247,.15);
  display: flex; align-items: flex-end;
  padding: 32px;
  transition: all var(--dur-med) var(--ease-snap);
}
.case-tile:hover { border-color: rgba(168,85,247,.5); transform: translateY(-6px); }
.case-tile .tag {
  position: absolute; top: 24px; left: 24px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 20px;
  background: rgba(168,85,247,.2); color: var(--violet-light);
  border: 1px solid rgba(168,85,247,.35);
}
.case-tile .glyph { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%); font-size: 90px; color: rgba(168,85,247,.35); line-height: 1; }
.case-tile h4 { color: #fff; margin: 0; font-size: 18px; }
.case-tile p { color: rgba(255,255,255,.7); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }
/* ===================== Insight / blog cards ===================== */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.insight-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid rgba(168,85,247,.08);
  transition: all var(--dur-med) var(--ease-snap);
  display: flex; flex-direction: column; height: 100%;
}
.insight-card:hover { border-color: rgba(168,85,247,.35); transform: translateY(-4px); }
.insight-card .thumb { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.insight-card .body { padding: 24px; }
.insight-card .tag { display: inline-block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-primary); margin-bottom: 12px; }
.insight-card h4 { color: #fff; margin: 0 0 12px; font-size: 19px; line-height: 1.3; }
.insight-card .meta { color: rgba(255,255,255,.5); font-size: 13px; }
@media (max-width: 900px) { .insight-grid { grid-template-columns: 1fr; } }
/* ===================== Capability statement CTA ===================== */
.capstmt-section {
  position: relative;
  background: linear-gradient(160deg, #0a0812 0%, #14082a 60%, #0a0812 100%);
  overflow: hidden;
}
.capstmt-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(168,85,247,.15), transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(124,58,237,.12), transparent 45%);
  pointer-events: none;
}
.capstmt-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.capstmt-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.capstmt-thumb {
  aspect-ratio: 8.5/11;
  width: 240px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0812 0%, #0f0a1e 100%);
  border: 1px solid rgba(168,85,247,.3);
  box-shadow: 0 30px 80px rgba(168,85,247,.25);
  position: relative;
}
.capstmt-thumb .hero-corner {
  position: absolute; top: 0; right: 0; width: 65%; height: 45%;
  background: url('/static/img/capstmt-hero-violet.webp') center/cover no-repeat;
  opacity: .85;
  -webkit-mask-image: linear-gradient(215deg, black 40%, transparent 100%);
  mask-image: linear-gradient(215deg, black 40%, transparent 100%);
}
.capstmt-thumb .thumb-content { position: absolute; top: 24px; left: 20px; z-index: 1; }
.capstmt-thumb .thumb-content img { height: 14px; width: auto; margin-bottom: 4px; }
.capstmt-thumb .thumb-label { font-size: 7px; letter-spacing: .24em; color: var(--violet-light); margin: 20px 0 4px; }
.capstmt-thumb .thumb-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 30px; line-height: .9; color: #fff; }
.capstmt-preview-link { margin-top: 12px; color: var(--violet-light); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-align: center; }
@media (max-width: 900px) { .capstmt-grid { grid-template-columns: 1fr; text-align: center; } }
/* ===================== FAQ ===================== */
.faq-item { border-top: 1px solid rgba(168,85,247,.08); padding: 24px 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(168,85,247,.08); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: flex-start; gap: 16px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+';
  color: var(--violet-primary);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}
.faq-item[open] summary::before { content: '\2212'; }
.faq-item .faq-answer { color: rgba(255,255,255,.72); padding: 16px 0 0 32px; line-height: 1.7; font-size: 15.5px; }
/* ===================== Contact CTA ===================== */
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 50px 0; }
.contact-cta h3 { font-size: 30px; margin-bottom: 8px; }
.contact-cta p { margin: 0; opacity: .9; }
.contact-cta .email-link { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; border: 1px solid rgba(255,255,255,.5); padding: 14px 28px; border-radius: 40px; display: inline-block; }
.contact-cta .email-link:hover { background: rgba(255,255,255,.1); color: #fff; }
/* ===================== Footer ===================== */
footer.site-footer { background: var(--bg-footer); border-top: 1px solid rgba(168,85,247,.12); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand img { height: 56px; width: auto; filter: drop-shadow(0 0 12px rgba(168,85,247,.25)); margin-bottom: 20px; }
.footer-brand p { font-size: 14.5px; }
.footer-social { display: flex; gap: 14px; margin-top: 16px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); }
.footer-social a:hover { border-color: var(--violet-primary); color: var(--violet-primary); }
.footer-widget h5 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
.footer-widget ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-widget ul li a { color: rgba(255,255,255,.65); font-size: 14.5px; }
.footer-widget-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-contact-item { margin-bottom: 20px; }
.footer-contact-item:last-child { margin-bottom: 0; }
.footer-contact-item .label { font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14.5px; }
.footer-contact-item a { color: rgba(255,255,255,.7); font-size: 14.5px; }
.subfooter { border-top: 1px solid rgba(168,85,247,.08); padding: 24px 0; margin-top: 30px; }
.subfooter-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.5); }
.subfooter-inner .menu-simple { display: flex; gap: 24px; list-style: none; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-widget-columns { grid-template-columns: 1fr 1fr; }
}
/* ===================== Scroll-reveal (whileInView-style) =====================
   Progressive enhancement: content is fully visible by default. Only once JS
   confirms IntersectionObserver is wired up (body.reveal-ready, added by
   nav.js) do elements hide and wait to animate in on scroll. This guarantees
   no content is ever lost if JS fails to load or run. */
.reveal { opacity: 1; transform: none; }
body.reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .38s var(--ease-snap), transform .38s var(--ease-snap); }
body.reveal-ready .reveal.in-view { opacity: 1; transform: translateY(0); }
/* Utility */
.flex { display: flex; }
.grid { display: grid; }
.gap-4 { gap: 16px; }
.op-7 { opacity: .7; }
.op-8 { opacity: .8; }
.op-9 { opacity: .9; }
/* ==========================================================================
   INTERIOR PAGES — shared subheader / page-hero pattern
   ========================================================================== */
#subheader {
  padding: 160px 0 40px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.3), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.15), transparent 60%),
    linear-gradient(180deg, #0a0812, var(--bg-elevated));
}
#subheader::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168,85,247,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.1) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%);
  pointer-events: none;
}
#subheader .container { position: relative; z-index: 1; }
/* Animated particle-network canvas host — see /static/network-bg.js.
   Opt-in via <div class="js-network-bg">; sits above a section's own
   gradient background but below its .container content. */
.js-network-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.js-network-bg canvas { display: block; }
#subheader .crumb { list-style: none; display: flex; gap: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 20px; padding: 0; }
#subheader .crumb li a { color: rgba(255,255,255,.5); }
#subheader .crumb li.active,
#subheader .crumb li:last-child { color: var(--violet-light); }
#subheader h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 4px; }
#subheader h1 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 900px) {
}
.section-label {
  display: inline-block;
  color: var(--violet-primary);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid rgba(168, 85, 247, .3);
  border-radius: 20px;
  background: rgba(168, 85, 247, .08);
  margin-bottom: 22px;
}
.intro-lead { font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.78); font-weight: 300; text-align: left; max-width: 720px; margin: 0; }
/* ==========================================================================
   ABOUT — Meet the Team
   ========================================================================== */
.team-card {
  display: grid; grid-template-columns: 320px 1fr; gap: 48px; padding: 40px;
  border-radius: 20px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7));
  border: 1px solid rgba(168,85,247,.15); margin-bottom: 32px; align-items: start; transition: all var(--dur-med) var(--ease-snap);
}
.team-card:hover { border-color: rgba(168,85,247,.35); box-shadow: 0 30px 80px rgba(168,85,247,.15); }
.team-card.reverse { grid-template-columns: 1fr 320px; }
.team-card.reverse .portrait { order: 2; }
.team-card.reverse .bio { order: 1; }
.portrait {
  position: relative; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(124,58,237,.35), transparent 60%), linear-gradient(160deg, var(--bg-highest), var(--bg-near-black));
  border: 1px solid rgba(168,85,247,.2); transition: all var(--dur-med) var(--ease-snap);
}
.portrait:hover { border-color: rgba(168,85,247,.5); box-shadow: 0 30px 60px rgba(168,85,247,.2); }
.portrait img.headshot { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.95) contrast(1.02); transition: transform var(--dur-med) var(--ease-snap); }
.portrait:hover img.headshot { transform: scale(1.03); }
.portrait .tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,8,18,.75) 90%, rgba(10,8,18,.95) 100%), linear-gradient(200deg, rgba(124,58,237,.08), transparent 60%); pointer-events: none; }
.portrait .role-tag { position: absolute; bottom: 20px; left: 20px; display: inline-block; padding: 6px 14px; border-radius: 14px; background: rgba(168,85,247,.2); border: 1px solid rgba(168,85,247,.4); color: #fff; font-family: 'Sora', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; backdrop-filter: blur(8px); }
.bio .role { display: inline-block; color: var(--violet-primary); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.bio h3 { font-size: 40px; line-height: 1.05; margin: 0 0 8px; letter-spacing: -.01em; }
.bio .tenure { color: rgba(255,255,255,.5); font-size: 14px; margin-bottom: 20px; }
.bio .tenure strong { color: var(--violet-light); }
.bio p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.bio .socials { display: flex; gap: 10px; margin-top: 18px; }
.bio .socials a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: var(--violet-light); transition: all var(--dur-med) var(--ease-snap); }
.bio .socials a:hover { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; border-color: transparent; }
.credentials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.credentials .cred { display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: rgba(255,255,255,.75); font-size: 11.5px; letter-spacing: .05em; font-weight: 500; }
.cert-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cert-mini { padding: 20px; border-radius: 12px; background: rgba(168,85,247,.05); border: 1px solid rgba(168,85,247,.15); text-align: center; }
.cert-mini .code { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; color: var(--violet-light); margin-bottom: 4px; }
.cert-mini .name { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .05em; }
.cert-mini.more { display: flex; align-items: center; justify-content: center; min-height: 76px; }
@media (max-width: 900px) {
  .team-card, .team-card.reverse { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .team-card.reverse .portrait, .team-card.reverse .bio { order: initial; }
  .cert-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
   ABOUT — Certifications
   ========================================================================== */
.issuer-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 0; }
.issuer-chips .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.18); color: rgba(255,255,255,.7); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .05em; transition: all var(--dur-fast) var(--ease-snap); }
.issuer-chips .chip:hover, .issuer-chips .chip.active { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.5); color: var(--violet-light); }
.issuer-chips .chip .count { padding: 2px 8px; border-radius: 10px; background: rgba(168,85,247,.15); color: var(--violet-light); font-size: 10px; }
.stats-strip { padding: 40px 0 0; }
.stats-strip .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats-strip .stat { padding: 24px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); text-align: center; }
.stats-strip .stat strong { display: block; font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff, var(--violet-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats-strip .stat span { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; display: block; }
.issuer-strip { display: flex; align-items: center; gap: 20px; margin: 80px 0 32px; flex-wrap: wrap; }
.issuer-strip .issuer-num { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--violet-primary); font-size: 14px; letter-spacing: .18em; }
.issuer-strip h2 { font-size: 30px; margin: 0; letter-spacing: -.01em; }
.issuer-strip .issuer-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 20px; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.25); color: var(--violet-light); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.issuer-strip .issuer-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168,85,247,.3), transparent); min-width: 40px; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cert-card { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 32px; border-radius: 18px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); transition: all var(--dur-med) var(--ease-snap); position: relative; overflow: hidden; }
.cert-card:hover { border-color: rgba(168,85,247,.45); transform: translateY(-4px); box-shadow: 0 25px 60px rgba(168,85,247,.12); }
.cert-card.elite-card { background: linear-gradient(155deg, rgba(124,58,237,.18), rgba(168,85,247,.04)); border-color: rgba(168,85,247,.35); }
.cert-card.elite-card .cert-code { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cert-badge-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; }
.cert-badge { width: 100%; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(160deg, #14082a, #0a0812); border: 1px solid rgba(168,85,247,.2); display: flex; align-items: center; justify-content: center; padding: 16px; transition: transform var(--dur-med) var(--ease-snap); }
.cert-card:hover .cert-badge { transform: scale(1.03); }
.cert-badge img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
.cert-badge.rcce-badge { background: #000; padding: 12px; }
.cert-tier { display: inline-block; padding: 4px 10px; border-radius: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; }
.cert-tier.elite { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; }
.cert-tier.expert { background: rgba(168,85,247,.15); color: var(--violet-light); border: 1px solid rgba(168,85,247,.35); }
.cert-tier.pro { background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.cert-tier.gov { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.cert-tier.muted { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.1); }
.cert-body { display: flex; flex-direction: column; }
.cert-body .cert-code { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.01em; line-height: 1; margin-bottom: 6px; }
.cert-body .cert-name { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0 0 4px; }
.cert-body .cert-issuer { color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.cert-body p { color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.cert-body p strong { color: var(--violet-light); font-weight: 600; }
.cert-body .cert-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(168,85,247,.1); }
.cert-body .cert-meta .meta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(168,85,247,.06); color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .04em; }
.cert-body .cert-meta .meta i { color: var(--violet-primary); font-size: 10px; }
.cert-body .cert-meta .meta-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; font-size: 12px; letter-spacing: .05em; text-decoration: none; font-family: 'Sora', sans-serif; font-weight: 700; }
.cert-body .cert-meta .meta-link.outline { background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.25); color: var(--violet-light); }
.cert-placeholder-badge { width: 100%; aspect-ratio: 1; border-radius: 14px; background: rgba(10,8,18,.5); border: 1px dashed rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); font-size: 32px; }
.extra-creds { margin-top: 40px; padding: 32px; border-radius: 16px; background: linear-gradient(155deg, rgba(26,20,40,.5), rgba(10,8,18,.5)); border: 1px solid rgba(168,85,247,.12); }
.extra-creds .ec-head { color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.extra-creds .ec-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.extra-creds .ec-pill { padding: 12px 20px; border-radius: 12px; background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.18); display: inline-flex; flex-direction: column; gap: 2px; }
.extra-creds .ec-pill.muted { background: rgba(255,255,255,.02); border-style: dashed; }
.extra-creds .ec-pill strong { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; }
.extra-creds .ec-pill.muted strong { color: rgba(255,255,255,.5); }
.extra-creds .ec-pill span { color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .05em; }
.callout-section { padding: 100px 0; background: var(--bg-elevated); border-top: 1px solid rgba(168,85,247,.08); }
.callout-section h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 24px; }
.callout-section h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.callout-section p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; }
.callout-section p strong { color: var(--violet-light); font-weight: 600; }
.pursuit-pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.pursuit-pipeline .pp-item { padding: 28px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); }
.pursuit-pipeline .pp-item .num { display: inline-block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; background: linear-gradient(180deg, var(--violet-light), rgba(168,85,247,.3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em; margin-bottom: 12px; }
.pursuit-pipeline .pp-item h5 { font-size: 17px; margin: 0 0 8px; }
.pursuit-pipeline .pp-item p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 991px) {
  .cert-grid { grid-template-columns: 1fr; }
  .cert-card { grid-template-columns: 1fr; }
  .cert-badge-wrap { max-width: 180px; margin: 0 auto; }
  .stats-strip .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pursuit-pipeline { grid-template-columns: 1fr; }
}
/* ==========================================================================
   ABOUT — Partnerships
   ========================================================================== */
.category-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 0; }
.category-filter .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.18); color: rgba(255,255,255,.7); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .05em; transition: all var(--dur-fast) var(--ease-snap); }
.category-filter .chip:hover, .category-filter .chip.active { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.5); color: var(--violet-light); }
.category-filter .chip .count { padding: 2px 8px; border-radius: 10px; background: rgba(168,85,247,.15); color: var(--violet-light); font-size: 10px; }
.cat-strip { display: flex; align-items: center; gap: 16px; margin: 60px 0 24px; flex-wrap: wrap; }
.cat-strip .cat-num { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--violet-primary); font-size: 14px; letter-spacing: .18em; }
.cat-strip h2 { font-size: 28px; margin: 0; letter-spacing: -.01em; }
.cat-strip .cat-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168,85,247,.3), transparent); min-width: 30px; }
.cat-strip .cat-summary { color: rgba(255,255,255,.55); font-size: 13px; max-width: 320px; line-height: 1.5; }
.featured-partner { display: grid; grid-template-columns: 340px 1fr; gap: 40px; padding: 40px; border-radius: 20px; background: linear-gradient(155deg, rgba(124,58,237,.15), rgba(168,85,247,.02)); border: 1px solid rgba(168,85,247,.3); position: relative; overflow: hidden; margin-bottom: 24px; transition: all var(--dur-med) var(--ease-snap); }
.featured-partner:hover { border-color: rgba(168,85,247,.5); transform: translateY(-3px); }
.featured-partner .fp-logo-wrap { aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 60%), linear-gradient(160deg, #14082a, #0a0812); border: 1px solid rgba(168,85,247,.25); display: flex; align-items: center; justify-content: center; padding: 40px; }
.featured-partner .fp-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.featured-partner .fp-body { display: flex; flex-direction: column; justify-content: center; }
.featured-partner .fp-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-bottom: 16px; align-self: flex-start; box-shadow: 0 8px 24px rgba(168,85,247,.35); }
.featured-partner h3 { font-size: 32px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; }
.featured-partner .fp-role { color: var(--violet-light); font-family: 'Sora', sans-serif; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.featured-partner p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.featured-partner p strong { color: var(--violet-light); font-weight: 600; }
.featured-partner .fp-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.featured-partner .fp-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; color: var(--violet-light); text-decoration: none; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .05em; border: 1px solid rgba(168,85,247,.35); background: rgba(168,85,247,.06); transition: all var(--dur-med) var(--ease-snap); }
.featured-partner .fp-links a:hover, .featured-partner .fp-links a.primary { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; border-color: transparent; }
.partner-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.partner-card { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 28px; border-radius: 16px; background: linear-gradient(155deg, rgba(26,20,40,.6), rgba(10,8,18,.6)); border: 1px solid rgba(168,85,247,.12); transition: all var(--dur-med) var(--ease-snap); text-decoration: none; }
.partner-card:hover { border-color: rgba(168,85,247,.4); transform: translateY(-3px); box-shadow: 0 20px 50px rgba(168,85,247,.1); }
.partner-card .pc-logo { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, #1a1428, #0a0812); border: 1px solid rgba(168,85,247,.18); display: flex; align-items: center; justify-content: center; padding: 20px; align-self: start; }
.partner-card .pc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card.stk-card:hover { border-color: rgba(250,204,21,.35); }
.partner-card.stk-card:hover .pc-role { color: #fde047; }
.partner-card .pc-content { display: flex; flex-direction: column; justify-content: center; }
.partner-card .pc-role { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; transition: color var(--dur-med) var(--ease-snap); }
.partner-card h4 { font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.partner-card p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.partner-card .pc-arrow { color: rgba(168,85,247,.8); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.partner-card .pc-arrow::after { content: '→'; transition: transform var(--dur-med) var(--ease-snap); }
.partner-card:hover .pc-arrow::after { transform: translateX(4px); }
.partner-card .pc-arrow.no-link { color: rgba(255,255,255,.4); }
.partner-card .pc-arrow.no-link::after { content: ''; }
.approach-block { padding: 100px 0; background: var(--bg-elevated); }
.approach-block h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 24px; }
.approach-block h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.approach-block .lead { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; margin-bottom: 20px; }
.approach-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.approach-pillars .ap { padding: 28px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); }
.approach-pillars .ap .icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(168,85,247,.15)); border: 1px solid rgba(168,85,247,.35); display: flex; align-items: center; justify-content: center; color: var(--violet-light); font-size: 20px; margin-bottom: 16px; }
.approach-pillars .ap h5 { font-size: 17px; margin: 0 0 8px; }
.approach-pillars .ap p { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; margin: 0; }
.partner-cta { padding: 80px 0; background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,.25), transparent 60%), linear-gradient(160deg, var(--bg-near-black), #14082a); }
.partner-cta .cta-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.partner-cta h3 { font-size: 36px; letter-spacing: -.01em; margin: 0 0 16px; }
.partner-cta p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
@media (max-width: 991px) {
  .featured-partner { grid-template-columns: 1fr; }
  .partner-grid-2 { grid-template-columns: 1fr; }
  .partner-card { grid-template-columns: 1fr; text-align: center; }
  .partner-card .pc-logo { max-width: 160px; margin: 0 auto; }
  .approach-pillars { grid-template-columns: 1fr; }
}
/* ==========================================================================
   SERVICE PAGES — sticky sidebar template
   ========================================================================== */
.service-body { background: var(--bg-near-black); padding: 80px 0 120px; }
.service-body .container { position: relative; }
.sp-layout { display: grid; grid-template-columns: 280px 1fr; gap: 60px; }
.sp-sidebar { position: sticky; top: 120px; align-self: start; padding: 24px; background: rgba(168,85,247,.04); border: 1px solid rgba(168,85,247,.15); border-radius: 14px; }
.sp-sidebar .sb-label { color: var(--violet-primary); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.sp-sidebar .sb-item { padding: 12px 14px; border-radius: 10px; color: rgba(255,255,255,.7); display: flex; gap: 12px; align-items: center; margin-bottom: 4px; text-decoration: none; transition: all var(--dur-fast) var(--ease-snap); font-size: 14px; line-height: 1.35; border-left: 2px solid transparent; }
.sp-sidebar .sb-item:hover { background: rgba(168,85,247,.06); color: #fff; }
.sp-sidebar .sb-item.active { background: rgba(168,85,247,.1); color: #fff; border-left-color: var(--violet-primary); }
.sp-sidebar .sb-item .num { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--violet-primary); min-width: 22px; flex-shrink: 0; }
.sp-sidebar .sb-cta { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(168,85,247,.12); }
.sp-sidebar .sb-cta a { display: block; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; text-decoration: none; text-align: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .05em; transition: all var(--dur-med) var(--ease-snap); }
.sp-sidebar .sb-cta a:hover { box-shadow: 0 12px 32px rgba(168,85,247,.35); transform: translateY(-2px); }
.sp-block { margin-bottom: 60px; padding-top: 40px; scroll-margin-top: 120px; border-top: 1px solid rgba(168,85,247,.12); }
.sp-block .num-label { display: inline-block; font-family: 'Sora', sans-serif; color: var(--violet-primary); font-weight: 800; letter-spacing: .1em; margin-bottom: 12px; font-size: 13px; }
.sp-block h2 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -.005em; }
.sp-block > p { color: rgba(255,255,255,.68); line-height: 1.65; font-size: 16px; max-width: 780px; margin-bottom: 28px; }
.related-services { padding: 80px 0; background: var(--bg-elevated); border-top: 1px solid rgba(168,85,247,.1); }
.related-services h3 { font-size: 28px; margin: 0 0 8px; }
.related-services .subtitle-txt { color: rgba(255,255,255,.5); font-size: 15px; margin-bottom: 40px; }
.related-services .rs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related-services .rs-card { display: block; padding: 28px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.12); text-decoration: none; transition: all var(--dur-med) var(--ease-snap); }
.related-services .rs-card:hover { border-color: rgba(168,85,247,.45); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(168,85,247,.12); }
.related-services .rs-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.3); display: flex; align-items: center; justify-content: center; color: var(--violet-light); font-size: 18px; margin-bottom: 18px; }
.related-services .rs-card h5 { font-size: 18px; margin: 0 0 8px; }
.related-services .rs-card p { color: rgba(255,255,255,.55); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.related-services .rs-arrow { color: var(--violet-primary); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.related-services .rs-card:hover .rs-arrow { color: var(--violet-light); }
@media (max-width: 991px) {
  .sp-layout { grid-template-columns: 1fr; gap: 30px; }
  .sp-sidebar { position: static; }
  .related-services .rs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sp-block h2 { font-size: 24px; }
  .related-services .rs-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   ACADEMY — training summary + RCCE I
   ========================================================================== */
.academy-hero {
  min-height: 80vh; display: flex; align-items: center; padding: 160px 0 100px;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.2), transparent 60%), linear-gradient(160deg, #0a0812 0%, #14082a 50%, #0a0812 100%);
}
.academy-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(168,85,247,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.1) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%); pointer-events: none; z-index: 0; }
.academy-hero .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.1); z-index: 0; }
.academy-hero .hero-bg-vignette { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(10,8,18,.85) 0%, rgba(20,8,42,.55) 50%, rgba(10,8,18,.85) 100%); }
.academy-hero .container { position: relative; z-index: 1; }
.academy-hero h1 { font-size: clamp(48px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 24px; }
.academy-hero h1 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.academy-hero .lead { color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.55; max-width: 720px; }
@keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes shield-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.5deg); } }
.academy-badges { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 760px; }
.academy-badges .hb { padding: 16px; border-radius: 12px; background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.18); display: flex; align-items: center; gap: 12px; }
.academy-badges .hb i { color: var(--violet-light); font-size: 20px; flex-shrink: 0; }
.academy-badges .hb span { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500; line-height: 1.3; }
.partnership { padding: 100px 0; background: var(--bg-elevated); }
.partnership h2 { font-size: 44px; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 22px; }
.partnership h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.partnership p.lead { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; }
.partnership p.lead strong { color: var(--violet-light); font-weight: 600; }
.partner-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 24px; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); margin-top: 28px; }
.partner-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.partner-badge span { color: var(--violet-light); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.partner-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.partner-pillars .pp { padding: 24px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.12); display: flex; gap: 16px; }
.partner-pillars .pp .icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: rgba(168,85,247,.15); border: 1px solid rgba(168,85,247,.3); display: flex; align-items: center; justify-content: center; color: var(--violet-light); font-size: 18px; }
.partner-pillars .pp h5 { font-size: 15px; margin: 0 0 4px; }
.partner-pillars .pp p { color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.5; margin: 0; }
.catalog { padding: 100px 0; background: var(--bg-near-black); }
.catalog .catalog-head { text-align: center; max-width: 780px; margin: 0 auto 60px; }
.catalog .catalog-head h2 { font-size: 44px; line-height: 1.1; margin: 0 0 20px; letter-spacing: -.01em; }
.catalog .catalog-head h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.catalog .catalog-head p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; }
.featured-course { padding: 40px; border-radius: 20px; background: linear-gradient(155deg, rgba(124,58,237,.15), rgba(168,85,247,.05)); border: 1px solid rgba(168,85,247,.3); position: relative; overflow: hidden; margin-bottom: 40px; }
.featured-course .fc-row { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; }
.featured-course .fc-tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(168,85,247,.35); }
.featured-course h3 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
.featured-course p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.65; margin-bottom: 24px; }
.fc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.fc-stats .fc-stat { padding: 14px; border-radius: 10px; background: rgba(10,8,18,.6); border: 1px solid rgba(168,85,247,.15); text-align: center; }
.fc-stats .fc-stat strong { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; color: var(--violet-light); line-height: 1; }
.fc-stats .fc-stat span { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .05em; margin-top: 4px; display: block; }
.fc-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 24px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: all var(--dur-med) var(--ease-snap); box-shadow: 0 10px 30px rgba(168,85,247,.3); }
.fc-cta:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(168,85,247,.5); color: #fff; }
.fc-badge-wrap { aspect-ratio: 1; max-width: 240px; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; }
.fc-badge-wrap .glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.4), transparent 60%); }
.fc-badge-wrap .label { position: relative; z-index: 2; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 64px; background: linear-gradient(180deg, #fff, var(--violet-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em; line-height: 1; text-align: center; }
.fc-badge-wrap .label span { font-size: 40px; }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course-card { padding: 28px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.6), rgba(10,8,18,.6)); border: 1px solid rgba(168,85,247,.12); transition: all var(--dur-med) var(--ease-snap); position: relative; overflow: hidden; }
.course-card:hover { border-color: rgba(168,85,247,.35); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(168,85,247,.12); }
.course-card .cc-code { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14px; color: var(--violet-primary); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 4px; }
.course-card .cc-title { font-size: 18px; line-height: 1.25; margin: 0 0 12px; }
.course-card p { color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
.course-card .cc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.course-card .cc-meta .tag { display: inline-block; padding: 3px 8px; border-radius: 8px; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: rgba(255,255,255,.7); font-size: 10.5px; letter-spacing: .05em; }
.course-card .cc-cta { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.course-card .cc-cta.disabled { color: rgba(255,255,255,.4); cursor: default; pointer-events: none; }
.course-card .cc-cta::after { content: '→'; transition: transform var(--dur-med) var(--ease-snap); }
.course-card .cc-cta:not(.disabled):hover { color: var(--violet-light); }
.course-card .cc-cta:not(.disabled):hover::after { transform: translateX(3px); }
/* Course hero (RCCE I) */
.course-hero { padding: 160px 0 80px; background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.15), transparent 60%), linear-gradient(160deg, #0a0812 0%, #14082a 50%, #0a0812 100%); position: relative; overflow: hidden; }
.course-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(168,85,247,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.08) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%); pointer-events: none; z-index: 0; }
.course-hero .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.1); z-index: 0; }
.course-hero .hero-bg-vignette { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(10,8,18,.85) 0%, rgba(20,8,42,.55) 50%, rgba(10,8,18,.85) 100%); }
.course-hero .container { position: relative; z-index: 1; }
.breadcrumb-strip { color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 24px; }
.breadcrumb-strip a { color: rgba(255,255,255,.5); text-decoration: none; }
.breadcrumb-strip a:hover { color: var(--violet-primary); }
.breadcrumb-strip .sep { opacity: .35; margin: 0 12px; }
.course-hero .course-tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-bottom: 22px; box-shadow: 0 8px 24px rgba(168,85,247,.35); }
.course-hero h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; }
.course-hero h1 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.course-hero .tagline { font-family: 'Sora', sans-serif; color: rgba(255,255,255,.75); font-size: 22px; line-height: 1.4; font-weight: 300; max-width: 720px; margin-bottom: 32px; }
.course-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.course-stats .cs { padding: 22px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.18); text-align: center; }
.course-stats .cs strong { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; margin-bottom: 6px; background: linear-gradient(180deg, #fff, var(--violet-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.course-stats .cs span { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .05em; }
.course-modules { padding: 100px 0; background: var(--bg-near-black); }
.course-modules .cm-head { text-align: center; max-width: 780px; margin: 0 auto 60px; }
.course-modules .cm-head h2 { font-size: 44px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.01em; }
.course-modules .cm-head p { color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.6; }
.domain-list { max-width: 960px; margin: 0 auto; }
.domain { margin-bottom: 12px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); overflow: hidden; transition: all var(--dur-med) var(--ease-snap); }
.domain[open] { border-color: rgba(168,85,247,.4); box-shadow: 0 20px 50px rgba(168,85,247,.1); }
.domain summary { list-style: none; cursor: pointer; padding: 24px 28px; display: grid; grid-template-columns: 60px 1fr auto 40px; gap: 20px; align-items: center; transition: background var(--dur-fast) var(--ease-snap); }
.domain summary::-webkit-details-marker { display: none; }
.domain summary:hover { background: rgba(168,85,247,.05); }
.domain .d-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; background: linear-gradient(180deg, var(--violet-light), rgba(168,85,247,.3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em; }
.domain .d-body h4 { font-size: 19px; margin: 0 0 4px; line-height: 1.3; }
.domain .d-body p { color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.5; margin: 0; }
.domain .d-count { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .05em; padding: 6px 12px; border-radius: 20px; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.25); white-space: nowrap; }
.domain .d-toggle { color: var(--violet-primary); font-size: 20px; transition: transform var(--dur-med) var(--ease-snap); }
.domain[open] .d-toggle { transform: rotate(45deg); }
.domain .d-content { padding: 0 28px 28px 108px; border-top: 1px solid rgba(168,85,247,.1); padding-top: 20px; }
.domain .d-content .mod-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.domain .d-content .mod-list li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(168,85,247,.04); border: 1px solid rgba(168,85,247,.1); color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.4; }
.domain .d-content .mod-list .mod-num { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 700; min-width: 44px; flex-shrink: 0; }
.whats-included { padding: 100px 0; background: var(--bg-elevated); }
.whats-included h2 { font-size: 40px; line-height: 1.1; margin: 0 0 40px; letter-spacing: -.01em; }
.whats-included h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.included-list { list-style: none; padding: 0; margin: 0; }
.included-list li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(168,85,247,.12); color: #fff; font-size: 17px; }
.included-list li:last-child { border-bottom: 1px solid rgba(168,85,247,.12); }
.included-list li i { color: #22c55e; font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.included-list li strong { color: var(--violet-light); font-weight: 700; }
.cert-callout { padding: 40px; border-radius: 20px; background: linear-gradient(155deg, rgba(124,58,237,.2), rgba(168,85,247,.05)); border: 1px solid rgba(168,85,247,.3); text-align: center; position: relative; overflow: hidden; }
.cert-callout .seal { width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; box-shadow: 0 20px 40px rgba(168,85,247,.4); }
.cert-callout h4 { font-size: 22px; margin: 0 0 8px; }
.cert-callout p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.55; margin: 0; }
.cert-callout .cc-tag { display: inline-block; padding: 4px 10px; border-radius: 12px; background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.35); color: #86efac; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.cert-callout .cc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.cert-callout .cc-fact { padding: 12px; border-radius: 10px; background: rgba(10,8,18,.6); border: 1px solid rgba(168,85,247,.15); }
.cert-callout .cc-fact .lbl { color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.cert-callout .cc-fact .val { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; }
@media (max-width: 991px) {
  .featured-course .fc-row { grid-template-columns: 1fr; }
  .fc-stats { grid-template-columns: repeat(2, 1fr); }
  .partner-pillars, .course-grid { grid-template-columns: 1fr; }
  .academy-badges { grid-template-columns: repeat(2, 1fr); }
  .course-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .domain summary { grid-template-columns: 44px 1fr 32px; padding: 18px 20px; gap: 14px; }
  .domain .d-count { display: none; }
  .domain .d-content { padding: 16px 20px 20px 74px; }
  .domain .d-content .mod-list { grid-template-columns: 1fr; }
  .cert-callout .cc-facts { grid-template-columns: 1fr; }
}
/* ==========================================================================
   NIGHTSTRIKE
   ========================================================================== */
.ns-hero { min-height: 88vh; display: flex; align-items: center; padding: 160px 0 100px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.2), transparent 60%), linear-gradient(160deg, #0a0812, #14082a 50%, #0a0812); }
.ns-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(168,85,247,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.08) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%); pointer-events: none; }
.ns-hero .container { position: relative; z-index: 1; }
.ns-hero .brand-badge { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 24px; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); margin-bottom: 24px; }
.ns-hero .brand-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse-dot 1.6s ease-in-out infinite; }
.ns-hero .brand-badge span { color: var(--violet-light); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.ns-hero h1 { font-size: clamp(48px, 6vw, 84px); line-height: .98; letter-spacing: -.02em; margin: 0 0 24px; text-transform: uppercase; }
.ns-hero h1 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ns-hero .tagline { color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.55; max-width: 640px; }
.ns-hero .tagline strong { color: var(--violet-light); font-weight: 600; }
.ns-hero .ns-visual-wrap { position: relative; aspect-ratio: 1; display: none; align-items: center; justify-content: center; }
.ns-hero .ns-visual-wrap .glow { position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.35), transparent 60%); animation: pulse-glow 3.5s ease-in-out infinite; }
.ns-hero .ns-visual-wrap img { width: 70%; position: relative; z-index: 1; filter: drop-shadow(0 20px 60px rgba(168,85,247,.5)); animation: shield-float 6s ease-in-out infinite; }
@media (min-width: 992px) { .ns-hero .ns-visual-desktop { display: flex; } }
.product-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.product-tiles .pt-tile { padding: 20px; border-radius: 12px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.18); text-decoration: none; transition: all var(--dur-med) var(--ease-snap); display: flex; align-items: center; gap: 14px; }
.product-tiles .pt-tile:hover { border-color: rgba(168,85,247,.5); transform: translateY(-3px); }
.product-tiles .pt-tile .num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 24px; color: var(--violet-primary); line-height: 1; }
.product-tiles .pt-tile .name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; color: #fff; }
.product-tiles .pt-tile .role { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.innovation-intro { padding: 100px 0; background: var(--bg-near-black); }
.innovation-intro h2 { font-size: 48px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 32px; }
.innovation-intro h2 .accent { background: linear-gradient(135deg, var(--violet-light), var(--violet-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.innovation-intro p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.innovation-intro p strong { color: var(--violet-light); font-weight: 600; }
.product-section { padding: 120px 0; position: relative; overflow: hidden; }
.product-section.odd { background: var(--bg-near-black); }
.product-section.even { background: var(--bg-elevated); }
.product-section h2 { font-size: 64px; line-height: .95; letter-spacing: -.02em; margin: 0 0 24px; }
.product-section .big-name { background: linear-gradient(180deg, #fff 30%, var(--violet-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.product-section p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.product-section p strong { color: var(--violet-light); font-weight: 600; }
.product-section .prod-tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); color: var(--violet-light); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 700; margin-bottom: 18px; }
.product-section .prod-visual { aspect-ratio: 1; border-radius: 20px; overflow: hidden; position: relative; border: 1px solid rgba(168,85,247,.25); box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.obscura-visual { background: radial-gradient(circle at 50% 50%, rgba(124,58,237,.5), transparent 60%), linear-gradient(180deg, #14082a 0%, #0a0812 100%); display: flex; align-items: center; justify-content: center; }
.obscura-visual .neural { position: relative; width: 80%; height: 80%; }
.obscura-visual .neural .node { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--violet-light); box-shadow: 0 0 16px var(--violet-light); }
.obscura-visual .neural .node.large { width: 24px; height: 24px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); box-shadow: 0 0 30px var(--violet-primary); }
.obscura-visual .core-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Sora', sans-serif; font-weight: 800; color: #fff; text-align: center; z-index: 3; pointer-events: none; }
.obscura-visual .core-label .name { font-size: 22px; letter-spacing: .05em; }
.obscura-visual .core-label .subtitle-txt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--violet-light); margin-top: 4px; }
.feature-list { list-style: none; padding: 0; margin: 24px 0 0; }
.feature-list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(168,85,247,.1); }
.feature-list li:last-child { border-bottom: 1px solid rgba(168,85,247,.1); }
.feature-list li i { color: #22c55e; margin-top: 3px; flex-shrink: 0; }
.feature-list li strong { color: var(--violet-light); font-weight: 600; }
.prod-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.prod-stats .ps { padding: 16px; border-radius: 10px; background: rgba(168,85,247,.05); border: 1px solid rgba(168,85,247,.18); }
.prod-stats .ps strong { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px; color: var(--violet-light); line-height: 1; }
.prod-stats .ps span { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-top: 6px; display: block; }
@media (max-width: 991px) {
  .product-section h2 { font-size: 44px; }
  .product-section .prod-visual { margin-top: 40px; }
  .product-tiles { grid-template-columns: 1fr; }
  .prod-stats { grid-template-columns: 1fr; }
}
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.filter-bar .chip { padding: 8px 16px; border-radius: 20px; background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.18); color: rgba(255,255,255,.7); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .05em; transition: all var(--dur-fast) var(--ease-snap); text-decoration: none; }
.filter-bar .chip:hover, .filter-bar .chip.active { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.5); color: var(--violet-light); }
.featured-post { padding: 40px 0 60px; background: var(--bg-elevated); }
.featured-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; border-radius: 20px; background: linear-gradient(155deg, rgba(124,58,237,.15), rgba(168,85,247,.02)); border: 1px solid rgba(168,85,247,.3); position: relative; overflow: hidden; text-decoration: none; transition: all var(--dur-med) var(--ease-snap); }
.featured-card:hover { border-color: rgba(168,85,247,.5); transform: translateY(-4px); box-shadow: 0 30px 80px rgba(168,85,247,.15); }
.featured-card .fp-visual { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; position: relative; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.5), transparent 60%), linear-gradient(160deg, #14082a 0%, #0a0812 100%); border: 1px solid rgba(168,85,247,.3); display: flex; align-items: center; justify-content: center; }
.featured-card .fp-visual .qbit { position: absolute; color: var(--violet-light); font-size: 40px; opacity: .8; filter: drop-shadow(0 0 12px rgba(168,85,247,.5)); }
.featured-card .fp-visual .qbit.q1 { top: 20%; left: 20%; animation: floaty 5s ease-in-out infinite; }
.featured-card .fp-visual .qbit.q2 { top: 60%; right: 25%; animation: floaty 5s ease-in-out 1s infinite; }
.featured-card .fp-visual .qbit.q3 { bottom: 20%; left: 40%; animation: floaty 5s ease-in-out 2s infinite; }
.featured-card .fp-visual .core-icon { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 44px; letter-spacing: .05em; background: linear-gradient(180deg, #fff, var(--violet-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; }
@keyframes floaty { 0%, 100% { transform: translate(0, 0); opacity: .6; } 50% { transform: translate(4px, -8px); opacity: 1; } }
.featured-card .fp-body { display: flex; flex-direction: column; justify-content: center; }
.featured-card .fp-tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-bottom: 16px; align-self: flex-start; }
.featured-card .fp-meta { color: rgba(255,255,255,.55); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.featured-card h2 { font-size: 32px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.01em; }
.featured-card p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.featured-card .fp-read { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.featured-card:hover .fp-read { color: var(--violet-light); }
.featured-card .fp-read::after { content: '→'; transition: transform var(--dur-med) var(--ease-snap); }
.featured-card:hover .fp-read::after { transform: translateX(4px); }
.post-grid-section { padding: 60px 0 100px; background: var(--bg-near-black); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: block; text-decoration: none; border-radius: 16px; background: linear-gradient(155deg, rgba(26,20,40,.6), rgba(10,8,18,.6)); border: 1px solid rgba(168,85,247,.12); overflow: hidden; transition: all var(--dur-med) var(--ease-snap); }
.post-card:hover { border-color: rgba(168,85,247,.35); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(168,85,247,.1); }
.post-card .pc-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1428, #0a0812); }
.post-card .pc-thumb .icon { color: var(--violet-light); font-size: 48px; filter: drop-shadow(0 0 16px rgba(168,85,247,.5)); }
.post-card .pc-thumb .cat-badge { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 12px; background: rgba(10,8,18,.85); border: 1px solid rgba(168,85,247,.35); color: var(--violet-light); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; backdrop-filter: blur(6px); }
.post-card .pc-thumb.placeholder-badge::after { content: 'Draft · Coming soon'; position: absolute; bottom: 14px; right: 14px; padding: 4px 10px; border-radius: 12px; background: rgba(10,8,18,.85); border: 1px dashed rgba(168,85,247,.35); color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.post-card .pc-body { padding: 24px; }
.post-card .pc-date { color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.post-card h4 { font-size: 18px; line-height: 1.3; margin: 0 0 12px; }
.post-card p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.post-card .pc-read { color: var(--violet-primary); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.post-card:hover .pc-read { color: var(--violet-light); }
.post-card .pc-read::after { content: '→'; }
.post-card.disabled { pointer-events: none; }
.post-card.disabled .pc-read { color: rgba(255,255,255,.4); }
.post-hero { padding: 160px 0 60px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,.15), transparent 60%), linear-gradient(180deg, #0a0812, var(--bg-elevated)); }
.post-hero .container { position: relative; z-index: 1; }
.post-hero .cat-tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; letter-spacing: .2em; text-transform: uppercase; font-size: 10px; font-weight: 700; margin-bottom: 22px; box-shadow: 0 8px 24px rgba(168,85,247,.35); }
.post-hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 24px; max-width: 900px; }
.post-meta { display: flex; gap: 24px; flex-wrap: wrap; color: rgba(255,255,255,.6); font-size: 14px; margin-top: 20px; }
.post-meta span { display: inline-flex; align-items: center; gap: 8px; }
.post-meta i { color: var(--violet-primary); }
.post-meta strong { color: var(--violet-light); font-weight: 600; }
.post-visual { aspect-ratio: 2.4/1; border-radius: 20px; overflow: hidden; position: relative; background: radial-gradient(circle at 20% 30%, rgba(124,58,237,.5), transparent 50%), radial-gradient(circle at 80% 70%, rgba(168,85,247,.4), transparent 50%), linear-gradient(180deg, #14082a 0%, #0a0812 100%); border: 1px solid rgba(168,85,247,.3); margin: -30px 0 60px; display: flex; align-items: center; justify-content: center; }
.post-visual .quantum-vis { position: relative; width: 60%; height: 70%; }
.post-visual .qbit { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--violet-light) 30%, transparent 70%); box-shadow: 0 0 20px var(--violet-light); animation: pulse-glow-blog 2s ease-in-out infinite; }
@keyframes pulse-glow-blog { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.4); opacity: 1; } }
.post-visual .center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Sora', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -.02em; color: rgba(168,85,247,.2); text-align: center; }
.article-body { padding: 20px 0 100px; background: var(--bg-near-black); }
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 60px; max-width: 1140px; margin: 0 auto; }
.article-sidebar { position: sticky; top: 120px; align-self: start; }
.article-sidebar .toc-label { color: var(--violet-primary); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(168,85,247,.15); }
.article-sidebar a { display: block; padding: 8px 12px; border-radius: 8px; color: rgba(255,255,255,.55); text-decoration: none; font-size: 13px; border-left: 2px solid transparent; transition: all var(--dur-fast) var(--ease-snap); margin-bottom: 4px; line-height: 1.4; }
.article-sidebar a:hover, .article-sidebar a.active { color: #fff; border-left-color: var(--violet-primary); background: rgba(168,85,247,.06); }
.article-sidebar .share { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(168,85,247,.15); }
.article-sidebar .share-label { color: var(--violet-primary); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.article-sidebar .share-icons { display: flex; gap: 8px; }
.article-sidebar .share-icons a { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: var(--violet-light); margin-bottom: 0; }
.article-sidebar .share-icons a:hover { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; border-color: transparent; }
.article-content { max-width: 720px; }
.article-content .intro-para { color: rgba(255,255,255,.85); font-family: 'Sora', sans-serif; font-size: 20px; line-height: 1.55; margin-bottom: 40px; font-weight: 300; }
.article-content .intro-para::first-letter { font-family: 'Sora', sans-serif; color: var(--violet-primary); font-size: 3em; line-height: 1; float: left; font-weight: 800; margin: 0 12px 0 0; }
.article-content h2 { font-size: 32px; line-height: 1.15; margin: 60px 0 20px; letter-spacing: -.01em; scroll-margin-top: 120px; }
.article-content h3 { color: var(--violet-light); font-size: 22px; line-height: 1.2; margin: 40px 0 14px; scroll-margin-top: 120px; }
.article-content p { color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.article-content p strong { color: var(--violet-light); font-weight: 600; }
.article-content ul { margin: 0 0 24px; padding: 0; list-style: none; }
.article-content ul li { color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.7; padding: 10px 0 10px 32px; position: relative; }
.article-content ul li::before { content: '\25b8'; position: absolute; left: 8px; top: 10px; color: var(--violet-primary); font-weight: 700; font-size: 16px; }
.article-content ul li strong { color: var(--violet-light); }
.article-content .callout { margin: 40px 0; padding: 24px 28px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(168,85,247,.03)); border-left: 4px solid var(--violet-primary); }
.article-content .callout p { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.6; margin: 0; }
.next-up { padding: 60px 0; background: var(--bg-elevated); border-top: 1px solid rgba(168,85,247,.1); }
.next-up-card { padding: 32px 40px; border-radius: 16px; background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(168,85,247,.03)); border: 1px solid rgba(168,85,247,.3); display: flex; align-items: center; gap: 24px; text-decoration: none; transition: all var(--dur-med) var(--ease-snap); }
.next-up-card:hover { border-color: rgba(168,85,247,.5); transform: translateY(-3px); }
.next-up-card .icon { width: 60px; height: 60px; flex-shrink: 0; border-radius: 14px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 8px 24px rgba(168,85,247,.35); }
.next-up-card .content { flex: 1; }
.next-up-card .content .label { color: var(--violet-primary); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.next-up-card .content h4 { font-size: 18px; margin: 0; }
.next-up-card .arrow { color: var(--violet-primary); font-size: 20px; }
@media (max-width: 991px) {
  .post-grid { grid-template-columns: 1fr; }
  .featured-card { grid-template-columns: 1fr; padding: 24px; }
  .article-layout { grid-template-columns: 1fr; gap: 24px; }
  .article-sidebar { position: static; margin-bottom: 20px; }
}
@media (max-width: 640px) {
  .post-hero h1 { font-size: 32px; }
  .article-content h2 { font-size: 26px; }
}
/* ==========================================================================
   FAQ (standalone page — distinct from homepage's .faq-item accordion)
   ========================================================================== */
.faq-body { background: var(--bg-near-black); padding: 80px 0 120px; }
.faq-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; }
.faq-sidebar { position: sticky; top: 120px; align-self: start; padding: 24px; background: rgba(168,85,247,.04); border: 1px solid rgba(168,85,247,.15); border-radius: 14px; }
.faq-sidebar h5 { color: var(--violet-primary); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.faq-sidebar a { display: block; padding: 10px 14px; border-radius: 10px; color: rgba(255,255,255,.7); text-decoration: none; margin-bottom: 4px; font-size: 14px; border-left: 2px solid transparent; transition: all var(--dur-fast) var(--ease-snap); }
.faq-sidebar a:hover { background: rgba(168,85,247,.06); color: #fff; }
.faq-sidebar a.active { background: rgba(168,85,247,.12); color: #fff; border-left-color: var(--violet-primary); }
.faq-sidebar .cta-btn { display: block; margin-top: 20px; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; text-align: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-decoration: none; border-left: none; }
.faq-category { margin-bottom: 48px; scroll-margin-top: 120px; }
.faq-category .cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(168,85,247,.15); }
.faq-category .cat-head .cat-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; color: var(--violet-primary); min-width: 36px; }
.faq-category .cat-head h3 { font-size: 24px; margin: 0; }
.faq-category .cat-head .count { margin-left: auto; color: rgba(255,255,255,.5); font-size: 13px; letter-spacing: .05em; }
details.faq-detail-item { margin-bottom: 10px; border-radius: 12px; background: linear-gradient(155deg, rgba(26,20,40,.6), rgba(10,8,18,.6)); border: 1px solid rgba(168,85,247,.12); overflow: hidden; transition: all var(--dur-med) var(--ease-snap); }
details.faq-detail-item[open] { border-color: rgba(168,85,247,.35); box-shadow: 0 12px 32px rgba(168,85,247,.08); }
details.faq-detail-item summary { cursor: pointer; padding: 20px 24px; display: flex; align-items: center; gap: 16px; list-style: none; }
details.faq-detail-item summary::-webkit-details-marker { display: none; }
details.faq-detail-item summary .q-text { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.35; flex: 1; }
details.faq-detail-item summary .q-toggle { color: var(--violet-primary); font-size: 20px; transition: transform var(--dur-med) var(--ease-snap); flex-shrink: 0; }
details.faq-detail-item[open] summary .q-toggle { transform: rotate(45deg); }
details.faq-detail-item .q-answer { padding: 0 24px 24px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7; }
details.faq-detail-item .q-answer strong { color: var(--violet-light); font-weight: 600; }
@media (max-width: 991px) {
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-sidebar { position: static; }
}
.contact-body { padding: 60px 0 100px; background: var(--bg-near-black); }
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 60px; }
.contact-form { padding: 40px; border-radius: 20px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.18); }
.contact-form h2 { font-size: 28px; margin: 0 0 8px; }
.contact-form .form-sub { color: rgba(255,255,255,.6); font-size: 15px; margin-bottom: 28px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form .form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.contact-form label { color: rgba(255,255,255,.7); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.contact-form label .req { color: #ef4444; }
.contact-form input, .contact-form select, .contact-form textarea { padding: 14px 16px; border-radius: 10px; background: rgba(10,8,18,.6); border: 1px solid rgba(168,85,247,.18); color: #fff; font-family: 'Sora', sans-serif; font-size: 15px; outline: none; transition: border-color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(168,85,247,.5); background: rgba(10,8,18,.9); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.35); }
.contact-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a855f7' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .checkbox-row { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.65); font-size: 13.5px; margin: 8px 0 24px; }
.contact-form .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--violet-primary); }
.contact-form .submit-btn { width: 100%; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; border: none; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .05em; cursor: pointer; transition: all var(--dur-med) var(--ease-snap); box-shadow: 0 8px 24px rgba(168,85,247,.3); }
.contact-form .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(168,85,247,.5); }
.contact-form .submit-btn:disabled { opacity: .7; cursor: not-allowed; transform: none !important; }
.contact-form .privacy-note { color: rgba(255,255,255,.5); font-size: 12px; margin-top: 14px; text-align: center; line-height: 1.5; }
.contact-form .privacy-note a { color: var(--violet-light); }
.form-status { margin-top: 16px; padding: 0; border-radius: 10px; font-size: 14px; line-height: 1.55; max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-snap), padding var(--dur-med) var(--ease-snap); }
.form-status.visible { padding: 14px 16px; max-height: 300px; }
.form-status.success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
.form-status.error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
.form-status.info { background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.3); color: var(--violet-light); }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; }
.info-panel { display: flex; flex-direction: column; gap: 16px; }
.info-card { padding: 24px; border-radius: 14px; background: linear-gradient(155deg, rgba(26,20,40,.7), rgba(10,8,18,.7)); border: 1px solid rgba(168,85,247,.15); }
.info-card .ic-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; margin-bottom: 16px; box-shadow: 0 8px 20px rgba(168,85,247,.3); }
.info-card .ic-label { color: var(--violet-primary); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.info-card .ic-value { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.35; margin: 0; }
.info-card .ic-value a { color: #fff; text-decoration: none; }
.info-card .ic-value a:hover { color: var(--violet-light); }
.info-card .ic-sub { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.55; margin-top: 6px; }
.socials-strip { display: flex; gap: 10px; margin-top: 12px; }
.socials-strip a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.25); color: var(--violet-light); text-decoration: none; transition: all var(--dur-med) var(--ease-snap); }
.socials-strip a:hover { background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary)); color: #fff; border-color: transparent; }
.response-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.response-strip .rs { padding: 20px; border-radius: 12px; background: rgba(168,85,247,.05); border: 1px solid rgba(168,85,247,.15); text-align: center; }
.response-strip .rs i { color: var(--violet-light); font-size: 22px; margin-bottom: 10px; }
.response-strip .rs strong { display: block; font-size: 16px; margin-bottom: 4px; }
.response-strip .rs span { color: rgba(255,255,255,.55); font-size: 12.5px; }
@media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .response-strip { grid-template-columns: 1fr; }
  .contact-form .form-row { grid-template-columns: 1fr; }
}
/* ==========================================================================
   CAPABILITY STATEMENT CTA BANNER (site-wide, used on service/contact pages)
   ========================================================================== */
.capstmt-banner { padding: 50px 0; background: linear-gradient(180deg, #0a0812 0%, #0f0a1e 100%); border-top: 1px solid rgba(168,85,247,.15); border-bottom: 1px solid rgba(168,85,247,.15); }
.capstmt-banner-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.capstmt-banner-thumb { width: 100px; aspect-ratio: 8.5/11; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #0a0812 0%, #0f0a1e 100%); border: 1px solid rgba(168,85,247,.3); box-shadow: 0 12px 30px rgba(168,85,247,.2); position: relative; flex-shrink: 0; }
.capstmt-banner-thumb .corner { position: absolute; top: 0; right: 0; width: 65%; height: 45%; background: url('/static/img/capstmt-hero-violet.webp') center/cover no-repeat; opacity: .85; -webkit-mask-image: linear-gradient(215deg, black 40%, transparent 100%); mask-image: linear-gradient(215deg, black 40%, transparent 100%); }
.capstmt-banner-thumb .label { position: absolute; top: 12px; left: 8px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 10px; line-height: .9; color: #fff; }
.capstmt-banner-info { flex: 1; min-width: 240px; }
.capstmt-banner-info .eyebrow { color: var(--violet-light); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.capstmt-banner-info h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.capstmt-banner-info p { color: rgba(255,255,255,.6); font-size: 14px; margin: 0; max-width: 500px; line-height: 1.5; }
.capstmt-banner-actions { text-align: right; }
.capstmt-banner-actions .view-all { display: block; margin-top: 4px; color: rgba(168,85,247,.8); font-size: 12px; text-decoration: none; letter-spacing: .05em; }
@media (max-width: 700px) {
  .capstmt-banner-row { flex-direction: column; text-align: center; }
  .capstmt-banner-actions { text-align: center; }
}
/* ==========================================================================
   MOBILE FIXES — adapted from design handoff's mobile-fixes.css
   ========================================================================== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .row { margin-left: 0; margin-right: 0; }
  /* Certifications */
  .stats-strip .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .stat strong { font-size: 26px; }
  .cert-card { padding: 24px; }
  .cert-badge-wrap { max-width: 160px; margin: 0 auto; }
  .cert-body .cert-code { font-size: 22px; }
  .cert-body .cert-name { font-size: 15px; }
  .issuer-strip { flex-wrap: wrap; gap: 12px; margin: 60px 0 24px; }
  .issuer-strip h2 { font-size: 22px; }
  .issuer-strip .issuer-tag { font-size: 10px; padding: 4px 10px; }
  .issuer-strip .issuer-line { display: none; }
  /* NightStrike */
  .prod-stats .ps { text-align: left; padding: 14px 16px; }
  .prod-stats .ps strong { font-size: 18px; }
  .product-tiles .pt-tile { padding: 14px 16px; }
  .product-tiles .pt-tile .num { font-size: 20px; }
  .product-tiles .pt-tile .name { font-size: 14px; }
  /* Contact */
  .contact-form { padding: 24px 20px; }
  .contact-form h2 { font-size: 24px; }
  .contact-form label { font-size: 11px; letter-spacing: .08em; }
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 15px; padding: 12px 14px; }
  .info-card { padding: 20px; }
  .info-card .ic-value { font-size: 16px; }
  .info-card .ic-value a { word-break: break-all; }
  /* Team + Partnerships */
  .team-card, .team-card.reverse { padding: 24px; gap: 20px; }
  .team-card .portrait { max-width: 280px; margin: 0 auto; }
  .bio h3 { font-size: 28px; }
  .featured-partner { padding: 24px; }
  .featured-partner .fp-logo-wrap { max-width: 240px; margin: 0 auto; padding: 24px; }
  .featured-partner h3 { font-size: 26px; }
  .partner-card { text-align: left; padding: 24px; }
  .partner-card .pc-logo { max-width: 140px; padding: 16px; }
  /* Service pages */
  .sp-block h2 { font-size: 24px; }
  .service-body { padding: 60px 0 80px; }
  /* RCCE I */
  .domain summary { grid-template-columns: 44px 1fr 32px; padding: 18px 20px; gap: 14px; }
  .domain .d-count { display: none; }
  .domain .d-num { font-size: 24px; }
  .domain .d-body h4 { font-size: 16px; }
  .domain .d-content { padding: 16px 20px 20px 74px; }
  .course-hero { padding: 120px 0 60px; }
  .course-stats { grid-template-columns: repeat(2, 1fr); }
  .course-stats .cs strong { font-size: 26px; }
  /* FAQ */
  details.faq-detail-item summary { padding: 16px 20px; }
  details.faq-detail-item summary .q-text { font-size: 15px; }
  details.faq-detail-item .q-answer { padding: 0 20px 20px; font-size: 14px; }
  /* Blogs */
  .featured-card h2 { font-size: 22px; }
  .filter-bar .chip { font-size: 11px; padding: 6px 12px; }
  .article-content .intro-para { font-size: 17px; }
  .article-content .intro-para::first-letter { font-size: 2.2em; }
  /* Homepage tiles */
  .case-tile { aspect-ratio: 5/4; padding: 22px; }
  .case-tile .glyph { font-size: 68px; }
  .hero-trust { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  a[href^="mailto:"], .ic-value a { word-break: break-word; overflow-wrap: anywhere; }
  .subfooter .menu-simple { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .partner-grid { grid-template-columns: 1fr; }
}
/* ===================== NightShade Academy imagery ===================== */
.academy-hero .academy-logo {
  display: block;
  width: clamp(88px, 11vw, 130px);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 0 34px rgba(168,85,247,.45));
}
.academy-hero { text-align: center; }
.academy-hero .academy-badges, .academy-hero .btn-main { justify-content: center; }
.academy-feature { padding: 96px 0; background: var(--bg-near-black); }
.af-row {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; align-items: center;
}
.af-row + .af-row { margin-top: 72px; }
.af-row.reverse .af-media { order: 2; }
.af-media {
  position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-med) var(--ease-snap);
}
.af-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.af-row:hover .af-media { border-color: rgba(168,85,247,.45); }
.af-body h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
/* shared bracket treatment for academy media */
.af-media .card-brackets {
  position: absolute; inset: 12px; pointer-events: none; z-index: 2;
}
.af-media .card-brackets i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--violet-primary); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.af-media .card-brackets i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,-4px); }
.af-media .card-brackets i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,-4px); }
.af-media .card-brackets i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translate(-4px,4px); }
.af-media .card-brackets i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(4px,4px); }
.af-row:hover .card-brackets i { opacity: 1; transform: translate(0,0); }
@media (max-width: 900px) {
  .af-row { grid-template-columns: 1fr; gap: 28px; }
  .af-row.reverse .af-media { order: 0; }
  .af-row + .af-row { margin-top: 48px; }
  .academy-feature { padding: 64px 0; }
}
/* =====================================================================
   SPARTYN sub-brand
   Gold + metallic silver on deeper near-black. Scoped to .spartyn-scope
   so the violet site theme is untouched. Same motion language as the rest
   of the site (snap curves, corner brackets, mono readouts, stillness) —
   only the palette changes.
   ===================================================================== */
.spartyn-scope {
  --sp-bg:         #050505;
  --sp-bg-1:       #0c0c0e;
  --sp-bg-2:       #141418;
  --sp-gold:       #d4a04a;
  --sp-gold-light: #f5c866;
  --sp-gold-dark:  #8b6a24;
  --sp-silver:     #c0c4cc;
  --sp-silver-dim: #7a7d85;
  --sp-line:       rgba(212,160,74,.16);
  --sp-line-hot:   rgba(212,160,74,.5);
  --sp-gradient:   linear-gradient(135deg, #8b6a24, #d4a04a 50%, #f5c866);
  background: var(--sp-bg);
}
.spartyn-scope ::selection { background: rgba(212,160,74,.3); }
/* --- shared primitives --- */
.sp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sp-sec { padding: 110px 0; position: relative; }
.sp-sec.alt { background: var(--sp-bg-1); }
.sp-kicker {
  font-family: 'Chivo Mono', monospace;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sp-gold); display: block; margin-bottom: 16px;
}
.spartyn-scope h1, .spartyn-scope h2, .spartyn-scope h3,
.spartyn-scope h4, .spartyn-scope h5 { color: #fff; margin: 0; }
.sp-h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em; line-height: 1.1;
}
.sp-lead { color: rgba(255,255,255,.62); font-size: 17px; line-height: 1.6; margin: 16px 0 0; }
.sp-gold-text {
  background: linear-gradient(135deg, var(--sp-gold-light), var(--sp-gold) 60%, var(--sp-gold-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-head { max-width: 720px; }
.sp-head.center { margin: 0 auto; text-align: center; }
.sp-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 6px; text-decoration: none;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
  background: var(--sp-gradient); color: #14100a;
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-med) var(--ease-snap);
}
.sp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,160,74,.28); color: #14100a; }
.sp-btn.ghost {
  background: transparent; color: var(--sp-gold-light);
  border: 1px solid var(--sp-line-hot);
}
.sp-btn.ghost:hover { background: rgba(212,160,74,.1); color: var(--sp-gold-light); }
.sp-btn .ar { transition: transform var(--dur-fast) var(--ease-snap); }
.sp-btn:hover .ar { transform: translateX(3px); }
/* corner brackets — same vocabulary as the violet side */
.sp-brk { position: absolute; inset: 12px; pointer-events: none; z-index: 3; }
.sp-brk i {
  position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--sp-gold); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.sp-brk i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;transform:translate(-4px,-4px)}
.sp-brk i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;transform:translate(4px,-4px)}
.sp-brk i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;transform:translate(-4px,4px)}
.sp-brk i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;transform:translate(4px,4px)}
/* --- hero --- */
.sp-hero2 {
  position: relative; overflow: hidden;
  padding: 190px 0 110px;
  border-bottom: 1px solid var(--sp-line);
}
.sp-hero2 .sp-mesh {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(212,160,74,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,74,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 15%, transparent 72%);
}
.sp-hero2 .sp-bloom {
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, rgba(212,160,74,.16), transparent 65%);
  filter: blur(30px);
}
.sp-hero2 .sp-wrap { position: relative; z-index: 2; }
.sp-hero2 h1 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.03em;
  max-width: 15ch;
}
.sp-hero2 .sp-lead { font-size: 19px; max-width: 620px; }
/* status readout line */
.sp-status {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 52px;
  padding-top: 22px; border-top: 1px solid var(--sp-line);
  font-family: 'Chivo Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sp-silver-dim);
}
.sp-status span { display: flex; align-items: center; gap: 8px; }
.sp-status b { color: var(--sp-silver); font-weight: 400; }
.sp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sp-gold); flex-shrink: 0; }
/* --- numbered principle rows --- */
.sp-principles { display: grid; gap: 0; margin-top: 56px; }
.sp-principle {
  display: grid; grid-template-columns: 64px 1fr 1.3fr; gap: 28px;
  padding: 30px 0; align-items: start;
  border-top: 1px solid var(--sp-line);
  transition: background var(--dur-fast) var(--ease-snap);
}
.sp-principle:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-principle:hover { background: rgba(212,160,74,.035); }
.sp-principle .n {
  font-family: 'Chivo Mono', monospace; font-size: 12px;
  letter-spacing: .2em; color: var(--sp-gold);
}
.sp-principle h4 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; }
.sp-principle p { margin: 0; color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.6; }
/* --- module ledger (replaces tabs: all five visible, expand in place) --- */
.sp-ledger { margin-top: 52px; border-top: 1px solid var(--sp-line); }
.sp-mod { border-bottom: 1px solid var(--sp-line); }
.sp-mod-head {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 58px 150px 1fr auto; gap: 22px;
  align-items: center; text-align: left; padding: 26px 6px;
  transition: background var(--dur-fast) var(--ease-snap);
}
.sp-mod-head:hover { background: rgba(212,160,74,.04); }
.sp-mod-head:focus-visible { outline: 1px solid var(--sp-gold); outline-offset: -2px; }
.sp-mod-head .n {
  font-family: 'Chivo Mono', monospace; font-size: 12px; letter-spacing: .2em;
  color: var(--sp-gold-dark); transition: color var(--dur-fast) var(--ease-snap);
}
.sp-mod-head .cat {
  font-family: 'Chivo Mono', monospace; font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--sp-silver-dim);
}
.sp-mod-head .nm {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px);
  color: #fff; letter-spacing: -.01em;
}
.sp-mod-head .nm small {
  display: block; font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: 14px; color: rgba(255,255,255,.5); margin-top: 5px; letter-spacing: 0;
}
.sp-mod-head .tog {
  width: 30px; height: 30px; position: relative; flex-shrink: 0;
  border: 1px solid var(--sp-line); border-radius: 50%;
}
.sp-mod-head .tog::before, .sp-mod-head .tog::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--sp-gold);
  transform: translate(-50%,-50%); transition: transform var(--dur-med) var(--ease-hard);
}
.sp-mod-head .tog::before { width: 11px; height: 1.5px; }
.sp-mod-head .tog::after  { width: 1.5px; height: 11px; }
.sp-mod.open .sp-mod-head .n { color: var(--sp-gold-light); }
.sp-mod.open .sp-mod-head .nm { }
.sp-mod.open .sp-mod-head .tog { border-color: var(--sp-line-hot); }
.sp-mod.open .sp-mod-head .tog::after { transform: translate(-50%,-50%) rotate(90deg); }
.sp-mod-body { display: none; padding: 4px 6px 38px; }
.sp-mod.open .sp-mod-body { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sp-mod.open .sp-mod-body { animation: spOpen .32s var(--ease-hard); }
}
@keyframes spOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sp-mod-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; }
.sp-mod-grid > p { margin: 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.65; }
.sp-mod-points { list-style: none; margin: 0; padding: 0; }
.sp-mod-points li {
  padding: 13px 0 13px 26px; position: relative;
  border-top: 1px solid rgba(212,160,74,.1);
  color: rgba(255,255,255,.62); font-size: 14.5px; line-height: 1.55;
}
.sp-mod-points li:first-child { border-top: 0; }
.sp-mod-points li::before {
  content: ''; position: absolute; left: 2px; top: 20px;
  width: 9px; height: 1.5px; background: var(--sp-gold);
}
.sp-mod-points strong { color: #fff; font-weight: 600; }
.sp-mod-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(212,160,74,.12);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: 'Chivo Mono', monospace; font-size: 11px; letter-spacing: .1em;
  color: var(--sp-silver-dim);
}
.sp-link {
  color: var(--sp-gold); text-decoration: none;
  font-family: 'Chivo Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.sp-link:hover { color: var(--sp-gold-light); }
.sp-link .ar { display: inline-block; margin-left: 6px; transition: transform var(--dur-fast) var(--ease-snap); }
.sp-link:hover .ar { transform: translateX(3px); }
/* --- console mockup --- */
.sp-console {
  position: relative; border: 1px solid var(--sp-line); border-radius: 10px;
  background: linear-gradient(160deg, var(--sp-bg-2), var(--sp-bg));
  overflow: hidden;
}
.sp-console-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--sp-line);
  background: rgba(255,255,255,.02);
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sp-silver-dim);
}
.sp-console-body { padding: 22px; }
.sp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sp-kpi {
  border: 1px solid var(--sp-line); border-radius: 7px; padding: 15px;
  background: rgba(255,255,255,.018);
}
.sp-kpi .lab {
  font-family: 'Chivo Mono', monospace; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sp-silver-dim); display: block; margin-bottom: 8px;
}
.sp-kpi .val { font-family: 'Chivo Mono', monospace; font-size: 25px; color: #fff; line-height: 1; }
.sp-kpi .val.gold { color: var(--sp-gold-light); }
.sp-log { margin-top: 16px; border: 1px solid var(--sp-line); border-radius: 7px; overflow: hidden; }
.sp-log-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 15px; border-top: 1px solid rgba(212,160,74,.08);
  font-family: 'Chivo Mono', monospace; font-size: 11.5px; color: rgba(255,255,255,.6);
}
.sp-log-row:first-child { border-top: 0; }
.sp-log-row .t { color: var(--sp-silver-dim); }
.sp-log-row .tag {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid var(--sp-line); color: var(--sp-gold);
}
.sp-log-row .tag.warn { color: #e0a33c; border-color: rgba(224,163,60,.4); }
/* --- spec strip (definition rows) --- */
.sp-specs { margin-top: 52px; border-top: 1px solid var(--sp-line); }
.sp-spec {
  display: grid; grid-template-columns: 210px 1fr; gap: 28px;
  padding: 22px 6px; border-bottom: 1px solid var(--sp-line);
  transition: background var(--dur-fast) var(--ease-snap);
}
.sp-spec:hover { background: rgba(212,160,74,.035); }
.sp-spec dt {
  font-family: 'Chivo Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sp-gold);
}
.sp-spec dd { margin: 0; color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.6; }
/* --- tiers --- */
.sp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.sp-tier {
  position: relative; padding: 34px 28px; border-radius: 10px;
  border: 1px solid var(--sp-line); background: var(--sp-bg-2);
  transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.sp-tier:hover { transform: translateY(-3px); border-color: var(--sp-line-hot); }
.sp-tier.featured { border-color: var(--sp-line-hot); background: linear-gradient(160deg, rgba(212,160,74,.09), var(--sp-bg-2) 60%); }
.sp-tier .badge {
  position: absolute; top: 16px; right: 18px;
  font-family: 'Chivo Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sp-gold-light);
}
.sp-tier h4 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 24px; margin-bottom: 10px; }
.sp-tier p { margin: 0; color: rgba(255,255,255,.6); font-size: 14.5px; line-height: 1.6; }
/* --- final CTA --- */
.sp-cta {
  position: relative; overflow: hidden;
  padding: 78px 0; border-top: 1px solid var(--sp-line);
  background: linear-gradient(135deg, rgba(139,106,36,.22), rgba(212,160,74,.09) 55%, transparent);
}
.sp-cta .inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 26px; flex-wrap: wrap;
}
.sp-cta h3 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); }
.sp-cta p { margin: 10px 0 0; color: rgba(255,255,255,.62); font-size: 15px; }
/* --- flow diagram --- */
.sp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 46px; }
.sp-flow-node {
  position: relative; text-align: center; padding: 26px 18px; border-radius: 10px;
  border: 1px solid var(--sp-line); background: var(--sp-bg-2);
}
.sp-flow-node .lab {
  font-family: 'Chivo Mono', monospace; font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sp-gold); display: block; margin-bottom: 9px;
}
.sp-flow-node strong { font-family: 'Sora', sans-serif; font-size: 16px; color: #fff; display: block; }
.sp-flow-node span.sub { font-size: 13px; color: rgba(255,255,255,.55); display: block; margin-top: 6px; }
.sp-flow-arrow { color: var(--sp-gold-dark); font-family: 'Chivo Mono', monospace; font-size: 18px; }
@media (max-width: 980px) {
  .sp-sec { padding: 76px 0; }
  .sp-hero2 { padding: 150px 0 80px; }
  .sp-mod-grid { grid-template-columns: 1fr; gap: 22px; }
  .sp-tiers { grid-template-columns: 1fr; }
  .sp-kpis { grid-template-columns: repeat(2, 1fr); }
  .sp-principle { grid-template-columns: 44px 1fr; }
  .sp-principle p { grid-column: 2; }
  .sp-spec { grid-template-columns: 1fr; gap: 8px; }
  .sp-flow { grid-template-columns: 1fr; }
  .sp-flow-arrow { transform: rotate(90deg); text-align: center; }
  .sp-mod-head { grid-template-columns: 40px 1fr auto; }
  .sp-mod-head .cat { display: none; }
}
/* --- SPARTYN sticky section nav --- */
.sp-jump {
  position: sticky; top: 64px; z-index: 20;
  background: rgba(5,5,5,.86); backdrop-filter: blur(10px);
  border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line);
}
.sp-jump .sp-wrap { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 0; padding-bottom: 0; }
.sp-jump a {
  padding: 15px 16px; text-decoration: none;
  font-family: 'Chivo Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sp-silver-dim);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.sp-jump a:hover { color: var(--sp-gold-light); border-bottom-color: var(--sp-gold); }
.spartyn-scope [id] { scroll-margin-top: 118px; }
@media (max-width: 700px) {
  .sp-jump { position: static; }
  .sp-jump a { padding: 12px 11px; font-size: 9.5px; letter-spacing: .14em; }
}
/* --- SPARTYN intro overlay ---------------------------------------------
   Shown once per session on /spartyn. Always skippable, always self-
   dismissing, never shown to reduced-motion users. Page content sits
   underneath in the DOM the whole time. */
.sp-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #050505;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sp-intro[hidden] { display: none; }
.sp-intro.closing { animation: spIntroOut .5s var(--ease-hard) forwards; }
@keyframes spIntroOut {
  to { opacity: 0; visibility: hidden; }
}
.sp-intro video {
  width: 100%; height: 100%; object-fit: cover;
  /* the source is warm silver/gold already — just deepen the blacks */
  filter: contrast(1.06) saturate(1.05);
  /* held at 0 until nav.js confirms enough is buffered, so the opening frames
     can't stutter into view */
  opacity: 0;
  transition: opacity .45s var(--ease-snap);
}
.sp-intro.ready video { opacity: 1; }
/* quiet gold pulse while buffering, so the wait doesn't read as a dead screen */
.sp-intro::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 1;
  border: 1px solid rgba(212,160,74,.25);
  border-top-color: var(--sp-gold);
  border-radius: 50%;
  animation: spSpin 1s linear infinite;
  transition: opacity .3s var(--ease-snap);
}
.sp-intro.ready::after { opacity: 0; animation: none; }
@keyframes spSpin { to { transform: rotate(360deg); } }
.sp-intro-grain {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, transparent 40%, rgba(5,5,5,.6) 85%, #050505 100%);
}
.sp-intro-skip {
  position: absolute; right: 26px; bottom: 26px; z-index: 2;
  background: rgba(5,5,5,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--sp-line-hot); border-radius: 5px;
  color: var(--sp-gold-light); cursor: pointer;
  padding: 11px 20px;
  font-family: 'Chivo Mono', monospace; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.sp-intro-skip:hover { background: rgba(212,160,74,.18); color: #fff; }
.sp-intro-skip .ar { display: inline-block; margin-left: 6px; transition: transform var(--dur-fast) var(--ease-snap); }
.sp-intro-skip:hover .ar { transform: translateX(3px); }
.sp-intro-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: rgba(212,160,74,.15);
}
.sp-intro-bar i {
  display: block; height: 100%; width: 0;
  background: var(--sp-gradient);
}
@media (max-width: 600px) {
  .sp-intro-skip { right: 16px; bottom: 18px; padding: 10px 16px; font-size: 10px; }
}
/* --- SPARTYN section differentiation -------------------------------------
   Each band gets its own backdrop, head alignment, and index watermark so the
   page reads as distinct chapters instead of one repeated shell. */

/* ghosted section index */
.sp-sec { overflow: hidden; }
.sp-sec > .sp-wrap { position: relative; z-index: 2; }
.sp-sec-idx {
  position: absolute; top: 34px; right: 30px; z-index: 1;
  font-family: 'Chivo Mono', monospace;
  font-size: clamp(72px, 11vw, 150px); line-height: 1;
  font-weight: 400; letter-spacing: -.04em;
  color: rgba(212,160,74,.045);
  pointer-events: none; user-select: none;
}
/* gold segment on the section's top edge */
.sp-sec.ruled { border-top: 1px solid var(--sp-line); }
.sp-sec.ruled::before {
  content: ''; position: absolute; top: -1px; left: 0; z-index: 3;
  width: 96px; height: 1px; background: var(--sp-gradient);
}
/* backdrop variants */
.sp-sec.bg-grid::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,74,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%);
}
.sp-sec.bg-hatch::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg, rgba(212,160,74,.045) 0 1px, transparent 1px 13px);
  mask-image: radial-gradient(ellipse 80% 70% at 85% 25%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 25%, #000, transparent 70%);
}
.sp-sec.bg-scan::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg, rgba(212,160,74,.05) 0 1px, transparent 1px 5px);
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.sp-sec.bg-bloom::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212,160,74,.13), transparent 62%);
}
.sp-sec.bg-rail::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0;
  transform: translateX(-50%); width: min(1200px, 100%);
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--sp-line) 0 1px, transparent 1px) 24px 0/100% 100% no-repeat;
}
/* --- principles get a connecting spine + node --- */
.sp-principles.spined { position: relative; padding-left: 34px; }
.sp-principles.spined::before {
  content: ''; position: absolute; left: 5px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--sp-line-hot) 12%, var(--sp-line-hot) 88%, transparent);
}
.sp-principles.spined .sp-principle { position: relative; }
.sp-principles.spined .sp-principle::before {
  content: ''; position: absolute; left: -34px; top: 38px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--sp-gold); background: var(--sp-bg-1);
  transition: background var(--dur-med) var(--ease-snap), box-shadow var(--dur-med) var(--ease-snap);
}
.sp-principles.spined .sp-principle:hover::before {
  background: var(--sp-gold); box-shadow: 0 0 0 5px rgba(212,160,74,.14);
}
/* --- module rows: left accent bar on hover/open --- */
.sp-mod { position: relative; }
.sp-mod::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sp-gradient); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-hard);
}
.sp-mod:hover::before, .sp-mod.open::before { transform: scaleY(1); }
.sp-mod-head { padding-left: 18px !important; }
/* --- console gets a gold top edge + inner glow --- */
.sp-console { box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.sp-console::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--sp-gold), transparent);
}
/* --- spec rows: mono index prefix --- */
.sp-specs.numbered { counter-reset: spec; }
.sp-specs.numbered .sp-spec dt::before {
  counter-increment: spec;
  content: counter(spec, decimal-leading-zero) ' / ';
  color: var(--sp-gold-dark);
}
/* --- tiers: lift the featured plan --- */
.sp-tiers { align-items: center; }
.sp-tier.featured { transform: scale(1.045); z-index: 2; }
.sp-tier.featured:hover { transform: scale(1.045) translateY(-3px); }
.sp-tier .price-note {
  display: block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(212,160,74,.14);
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sp-silver-dim);
}
body.reveal-ready .sp-tiers .sp-tier.reveal:nth-child(2) { transition-delay: 80ms; }
body.reveal-ready .sp-tiers .sp-tier.reveal:nth-child(3) { transition-delay: 160ms; }
@media (max-width: 700px) {
  .sp-sec-idx { font-size: 64px; top: 20px; right: 16px; }
  .sp-principles.spined { padding-left: 26px; }
  .sp-principles.spined .sp-principle::before { left: -26px; top: 34px; }
  .sp-tier.featured { transform: none; }
  .sp-tier.featured:hover { transform: translateY(-3px); }
}
/* --- SPARTYN capability-statement band --- */
.sp-capstmt {
  position: relative;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 52px; align-items: center;
  padding: 44px; border-radius: 12px;
  border: 1px solid var(--sp-line);
  background: linear-gradient(150deg, var(--sp-bg-2), var(--sp-bg) 65%);
  transition: border-color var(--dur-med) var(--ease-snap);
}
.sp-capstmt:hover { border-color: var(--sp-line-hot); }
.sp-capstmt:hover .sp-brk i { opacity: 1; transform: translate(0,0); }
.sp-capstmt-meta {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px;
  font-family: 'Chivo Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sp-silver-dim);
}
/* miniature of the document itself */
.sp-capstmt-thumb { display: flex; justify-content: center; }
.cs-page {
  position: relative; width: 100%; max-width: 240px; aspect-ratio: 8.5 / 11;
  background: #0a0a0c; border: 1px solid var(--sp-line);
  padding: 18px 16px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
  transition: transform var(--dur-med) var(--ease-snap);
}
.sp-capstmt:hover .cs-page { transform: translateY(-4px) rotate(-.6deg); }
.cs-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,74,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cs-page > * { position: relative; z-index: 2; display: block; }
.cs-top {
  font-family: 'Chivo Mono', monospace; font-size: 5px; letter-spacing: .22em;
  color: var(--sp-silver-dim); margin-bottom: 16px;
}
.cs-kick {
  font-family: 'Chivo Mono', monospace; font-size: 5px; letter-spacing: .26em;
  color: var(--sp-gold); margin-bottom: 8px;
}
.cs-title {
  font-family: 'Sora', sans-serif; font-weight: 300; font-size: 30px;
  letter-spacing: .02em; color: #efe9dc; line-height: 1; margin-bottom: 8px;
}
.cs-sub {
  font-family: 'Chivo Mono', monospace; font-size: 5.5px; letter-spacing: .24em;
  color: var(--sp-silver-dim);
}
.cs-rule { height: 1px; background: var(--sp-line-hot); margin: 12px 0 14px; }
.cs-line { height: 3px; border-radius: 2px; background: rgba(255,255,255,.10); margin-bottom: 6px; }
.cs-line.long { width: 100%; }
.cs-line.med { width: 72%; }
.cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 16px; }
.cs-grid i {
  display: block; height: 34px; border: 1px solid rgba(212,160,74,.18);
  background: rgba(255,255,255,.02);
}
.cs-foot {
  position: absolute; left: 16px; bottom: 12px;
  font-family: 'Chivo Mono', monospace; font-size: 5px;
  letter-spacing: .2em; color: var(--sp-silver-dim);
}
@media (max-width: 860px) {
  .sp-capstmt { grid-template-columns: 1fr; gap: 34px; padding: 30px; }
  .sp-capstmt-thumb { order: -1; }
}
/* --- Photographic band -----------------------------------------------------
   Wraps the hero + the intro section so one image runs behind both and ends
   cleanly at the next section. The child <section id="subheader"> is set
   transparent so the band's image shows through. */
.photo-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-elevated);
  /* Source is a true 21:9 (2.333:1) frame with the subject centred, so the
     band simply tracks that ratio — the whole scene shows, no letterboxing,
     no crop. Capped so ultra-wide screens don't get an enormous hero. */
  min-height: min(calc(100vw * 0.4287), 880px);
  display: flex; flex-direction: column; justify-content: center;
}
.photo-band-bg { position: absolute; inset: 0; z-index: 0; }
.photo-band-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The three city skylines sit in the top 5-38% of the frame, and the
     Capitol window runs to 98% of the width — so any crop must come off the
     bottom, never the top or sides. Anchoring to the top does that. */
  object-position: center top;
}
.photo-band-vignette {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    /* readable column behind the headline, softer than before since the
       dead space is now cropped out of the source */
    linear-gradient(90deg, rgba(10,8,18,.86) 0%, rgba(10,8,18,.55) 34%, rgba(10,8,18,.22) 66%, rgba(10,8,18,.42) 100%),
    /* seat it under the nav and hand off to the next section */
    linear-gradient(180deg, rgba(10,8,18,.88) 0%, transparent 26%, transparent 58%, var(--bg-elevated) 100%),
    /* pull the warm gold toward the site's violet */
    linear-gradient(135deg, rgba(124,58,237,.20), transparent 55%);
}
/* hero and intro sit above the image */
.photo-band > #subheader,
.photo-band > .band-section { position: relative; z-index: 1; background: none; }
.photo-band > #subheader { padding: 170px 0 34px; }
.photo-band > #subheader::after { opacity: .45; }
.photo-band > .band-section { padding-bottom: 70px; padding-top: 0; }
#subheader.is-transparent { background: none; }
@media (max-width: 900px) {
  /* Narrow viewports: cover-cropping a 21:9 frame would cut the outer two
     windows off. Show the whole image as a banner and drop the content
     beneath it instead. */
  .photo-band {
    min-height: 0;
    display: block;
    /* nav clearance + the full-width banner height */
    padding-top: calc(92px + 100vw * 0.4287);
  }
  .photo-band-bg {
    top: 92px; bottom: auto;
    height: calc(100vw * 0.4287);
  }
  .photo-band-bg img { object-fit: contain; object-position: center top; }
  .photo-band-vignette {
    background:
      linear-gradient(180deg, rgba(10,8,18,.72) 0%, transparent 34%, transparent 62%, var(--bg-elevated) 100%);
  }
  .photo-band > #subheader { padding: 34px 0 20px; }
  .photo-band > .band-section { padding-bottom: 52px; padding-top: 0; }
  .photo-band-vignette {
    background:
      linear-gradient(90deg, rgba(10,8,18,.92) 0%, rgba(10,8,18,.78) 55%, rgba(10,8,18,.6) 100%),
      linear-gradient(180deg, rgba(10,8,18,.88) 0%, transparent 30%, var(--bg-elevated) 100%);
  }
}
/* --- SPARTYN hero photographic backdrop ---------------------------------
   The hero carries a lot: animated logo, headline, lead, two CTAs and a
   status line, all left-aligned. The image is composed with its subject at
   ~64% across and a dark left 40%, so the vignette only has to reinforce
   what the photograph already does. */
.sp-hero2.has-photo {
  /* Plain block layout — same as the NightStrike hero, which aligns correctly.
     No flex, no grid, nothing that can shrink-to-fit or auto-centre the wrap.
     Vertical rhythm comes from padding rather than centring. */
  display: block;
  padding: 170px 0 110px;
}
.sp-hero2.has-photo h1 { font-size: clamp(29px, 3.2vw, 44px); }
.sp-hero2.has-photo .sp-lead { font-size: 16.5px; }
.sp-hero2.has-photo .sp-status { gap: 16px; font-size: 10px; }
/* Laptop widths: keep the column rather than collapsing it — collapsing is
   what let the text spill across the artwork. Narrow it instead. */
@media (max-width: 1240px) {
  .sp-hero2.has-photo .sp-hero-col { max-width: 480px; }
}
/* Below this a side-by-side simply doesn't fit — go single column and darken
   the photograph right down so it reads as texture behind the text. */
@media (max-width: 900px) {
  .sp-hero2.has-photo .sp-hero-col { max-width: none; }
}
/* the generated layers were carrying the hero on their own — pull them back
   now that there's a photograph underneath */
.sp-hero2.has-photo .sp-mesh { opacity: .22; }
.sp-hero2.has-photo .sp-bloom { opacity: .35; }
@media (max-width: 900px) {
  .sp-hero2.has-photo {
    min-height: 0;
    display: block;
    padding: 150px 0 70px;
  }
}
/* --- NightStrike hero video backdrop -------------------------------------
   The hero is a 2fr/1fr grid with copy on the left, so the vignette has to
   hold that side dark while letting the foundry read on the right. */
.ns-hero.ns-hero-video {
  background: #0a0812;   /* flat base — the gradients would fight the footage */
}
.ns-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ns-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;   /* push the apparatus right, off the copy */
}
.ns-hero-vig {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    /* readable column under the badge, headline and tagline */
    linear-gradient(90deg,
      rgba(10,8,18,.96) 0%,
      rgba(10,8,18,.92) 34%,
      rgba(10,8,18,.68) 52%,
      rgba(10,8,18,.35) 72%,
      rgba(10,8,18,.62) 100%),
    /* clear the fixed nav, hand off to the section below */
    linear-gradient(180deg, rgba(10,8,18,.9) 0%, transparent 26%, transparent 62%, #0a0812 100%),
    /* the footage is warm gold; pull it toward the page's violet */
    linear-gradient(135deg, rgba(124,58,237,.28), transparent 60%);
}
/* the violet grid overlay stays, softened over moving footage */
.ns-hero.ns-hero-video::after { opacity: .5; }
@media (max-width: 900px) {
  .ns-hero-bg video { object-position: 78% center; }
  .ns-hero-vig {
    background:
      linear-gradient(90deg, rgba(10,8,18,.95) 0%, rgba(10,8,18,.88) 60%, rgba(10,8,18,.8) 100%),
      linear-gradient(180deg, rgba(10,8,18,.9) 0%, rgba(10,8,18,.5) 32%, #0a0812 100%),
      linear-gradient(135deg, rgba(124,58,237,.24), transparent 60%);
  }
}
/* --- terminal spec panel ------------------------------------------------
   Reuses the <dl class="sp-specs term"> markup: the dl becomes the console
   frame, each .sp-spec becomes a log row. */
.sp-specs.term {
  margin-top: 44px;
  border: 1px solid var(--sp-line);
  background: linear-gradient(160deg, var(--sp-bg-2), var(--sp-bg));
  overflow: hidden;
  padding: 0;
}
.sp-specs.term::before {
  content: '● ' attr(data-label);
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sp-line);
  background: rgba(255,255,255,.02);
  font-family: 'Chivo Mono', monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sp-silver-dim);
}
.sp-specs.term .sp-spec {
  display: grid;
  grid-template-columns: 36px 200px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 18px;
  border-bottom: 0;
  border-top: 1px solid rgba(212,160,74,.07);
  transition: background var(--dur-fast) var(--ease-snap);
}
.sp-specs.term .sp-spec:first-of-type { border-top: 0; }
.sp-specs.term .sp-spec:hover { background: rgba(212,160,74,.045); }
.sp-specs.term dt {
  font-family: 'Chivo Mono', monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  grid-column: 2;
}
.sp-specs.term dt::before {
  content: '[✓]';
  position: absolute;
  margin-left: -36px;
  color: var(--sp-gold);
  letter-spacing: 0;
}
.sp-specs.term dd {
  grid-column: 3;
  font-family: 'Chivo Mono', monospace;
  font-size: 12.5px; line-height: 1.6;
  color: rgba(255,255,255,.6);
}
@media (max-width: 760px) {
  .sp-specs.term .sp-spec { grid-template-columns: 36px 1fr; row-gap: 6px; }
  .sp-specs.term dd { grid-column: 2; }
}
/* ===================== Our Story — Vision (statement) ===================== */
.vision-statement .vs-head { max-width: 900px; margin: 0 auto; text-align: center; }
.vision-statement .vs-head .section-label { display: inline-block; }
.vs-big {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(28px, 4vw, 50px); line-height: 1.2; letter-spacing: -.025em;
  margin: 0;
}
.vs-rule {
  display: block; width: 70px; height: 2px; margin: 26px auto;
  background: linear-gradient(90deg, var(--violet-deep), var(--violet-primary));
}
.vs-lead { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; margin: 0; }
/* four pillars compressed into a hairline strip */
.vs-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 52px; border-top: 1px solid var(--border-medium);
}
.vs-pillar {
  padding: 26px 20px; text-align: left;
  border-bottom: 1px solid var(--border-medium);
  border-right: 1px solid var(--border-medium);
  transition: background var(--dur-fast) var(--ease-snap);
}
.vs-pillar:nth-child(4n) { border-right: 0; }
.vs-pillar:hover { background: rgba(168,85,247,.05); }
.vs-pillar .n {
  display: block; margin-bottom: 10px;
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .22em; color: var(--violet-primary);
}
.vs-pillar h5 { font-size: 15px; margin: 0 0 7px; line-height: 1.3; }
.vs-pillar p { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .vs-pillars { grid-template-columns: 1fr 1fr; }
  .vs-pillar:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .vs-pillars { grid-template-columns: 1fr; }
  .vs-pillar { border-right: 0; }
}
/* ===================== Our Story — Mission (chain) ===================== */
.mission-chain-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.mission-chain { position: relative; padding-left: 34px; }
.mission-chain::before {
  content: ''; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
}
.mc-item { position: relative; padding: 20px 0; border-bottom: 1px solid var(--border-subtle); }
.mc-item:last-child { border-bottom: 0; }
.mc-item::before {
  content: ''; position: absolute; left: -34px; top: 26px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--violet-primary); background: var(--bg-near-black);
  transition: background var(--dur-med) var(--ease-snap), box-shadow var(--dur-med) var(--ease-snap);
}
.mc-item:hover::before { background: var(--violet-primary); box-shadow: 0 0 0 5px rgba(168,85,247,.16); }
.mc-item h5 { font-size: 16px; margin: 0 0 6px; }
.mc-item p { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .mission-chain-grid { grid-template-columns: 1fr; gap: 34px; }
  .mission-chain { padding-left: 26px; }
  .mc-item::before { left: -26px; }
}
/* ===================== About hero — stacked content =====================
   One left-aligned column: breadcrumb, eyebrow, headline, lead, actions,
   meta strip. Mirrors the NightStrike and SPARTYN heroes. */
#subheader .subheader-stack { max-width: 720px; }
#subheader .subheader-stack .crumb { margin: 0 0 18px; }
#subheader .subheader-stack .section-label { display: inline-block; margin-bottom: 14px; }
#subheader .subheader-lead {
  color: rgba(255,255,255,.72);
  font-size: 18px; line-height: 1.6;
  margin: 20px 0 0; max-width: 620px;
}
#subheader .subheader-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px;
}
#subheader .subheader-actions .btn-line {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--violet-light);
  box-shadow: none;
}
#subheader .subheader-actions .btn-line:hover {
  background: rgba(168,85,247,.12);
  color: #fff;
}
#subheader .subheader-meta {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--border-medium);
  font-family: 'Chivo Mono', monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
#subheader .subheader-meta span { display: flex; align-items: center; gap: 8px; }
#subheader .subheader-meta b { color: #fff; font-weight: 400; }
#subheader .sh-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet-primary); flex-shrink: 0;
}
@media (max-width: 768px) {
  #subheader .subheader-lead { font-size: 16px; }
  #subheader .subheader-meta { gap: 14px 20px; margin-top: 28px; font-size: 10px; }
}
/* the intro paragraph inside a photo band lines up with the hero stack above */
.photo-band .band-section .intro-lead { text-align: left; max-width: 720px; margin: 0; }
/* ===================== NightStrike — OBSIDIAN ===================== */
.obs-modes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 30px 0 6px;
  border-top: 1px solid var(--border-medium);
}
.obs-mode {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--border-medium);
  border-right: 1px solid var(--border-medium);
  transition: background var(--dur-fast) var(--ease-snap);
}
.obs-mode:last-child { border-right: 0; }
.obs-mode:not(:first-child) { padding-left: 16px; }
.obs-mode:hover { background: rgba(168,85,247,.05); }
.obs-mode .n {
  display: block; margin-bottom: 8px;
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .22em; color: var(--violet-primary);
}
.obs-mode h4 { font-size: 15px; margin: 0 0 6px; }
.obs-mode p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 0; }
.obs-figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border-medium);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  transition: border-color var(--dur-med) var(--ease-snap);
}
.obs-figure img { display: block; width: 100%; height: auto; }
.obs-figure:hover { border-color: var(--border-strong); }
.obs-figure:hover .card-brackets i { opacity: 1; transform: translate(0,0); }
.obs-figure .card-brackets { position: absolute; inset: 12px; pointer-events: none; z-index: 3; }
.obs-figure .card-brackets i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--violet-primary); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
}
.obs-figure .card-brackets i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;transform:translate(-4px,-4px)}
.obs-figure .card-brackets i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;transform:translate(4px,-4px)}
.obs-figure .card-brackets i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;transform:translate(-4px,4px)}
.obs-figure .card-brackets i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;transform:translate(4px,4px)}
.obs-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 26px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(10,8,18,.9));
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.obs-figure .cap-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet-primary); flex-shrink: 0;
}
@media (max-width: 900px) {
  .obs-modes { grid-template-columns: 1fr; }
  .obs-mode { border-right: 0; padding-left: 0 !important; }
}
/* ===================== NightStrike — Custom Solutions stepper ===================== */
.cs-head { max-width: 780px; }
.cs-head p { margin-bottom: 14px; }
.cs-stepper { margin-top: 44px; }
.cs-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin-bottom: 26px;
}
.cs-tab {
  position: relative; text-align: left; cursor: pointer;
  background: transparent; border: 0;
  border-top: 2px solid rgba(168,85,247,.18);
  padding: 16px 12px;
  color: rgba(255,255,255,.45);
  transition: color var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap);
}
.cs-tab:hover { color: #fff; background: rgba(168,85,247,.05); }
.cs-tab:focus-visible { outline: 1px solid var(--violet-primary); outline-offset: 2px; }
.cs-tab.act { color: #fff; border-top-color: var(--violet-primary); }
.cs-tab .n {
  display: block; margin-bottom: 6px;
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .2em; color: var(--violet-primary);
}
.cs-tab .t { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; }
.cs-panes { position: relative; }
.cs-pane {
  display: none;
  grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  border: 1px solid var(--border-medium); border-radius: 14px;
  padding: 32px;
  background: linear-gradient(160deg, var(--bg-highest), var(--bg-near-black));
}
.cs-pane.act { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .cs-pane.act { animation: csWipe .32s var(--ease-hard); }
}
@keyframes csWipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.cs-pane .ic {
  width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
}
.cs-pane h4 { font-size: 20px; margin: 0 0 9px; }
.cs-pane p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.68); margin: 0; }
@media (max-width: 820px) {
  .cs-tabs { grid-template-columns: 1fr 1fr; }
  .cs-pane { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
}
/* --- NightStrike "Crafting Cyber Resilience" — copy above, wide figure below --- */
.innovation-intro .ii-head { max-width: 820px; }
.innovation-intro .ii-head p { margin-bottom: 14px; }
@media (max-width: 900px) {
  .innovation-intro.has-photo { min-height: 0; padding: 76px 0; }
}
/* --- NightStrike photo band: spans Crafting Cyber Resilience + Custom
   Security Solutions so one image carries both sections. --------------- */
.ns-band { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-near-black); }
.ns-band-bg { position: absolute; inset: 0; z-index: 0; }
.ns-band-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% top;   /* workbench stays right of the copy */
}
.ns-band-vig {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    /* readable column down the left, where the frame is already dark */
    linear-gradient(90deg,
      rgba(10,8,18,.96) 0%,
      rgba(10,8,18,.93) 36%,
      rgba(10,8,18,.72) 52%,
      rgba(10,8,18,.48) 72%,
      rgba(10,8,18,.70) 100%),
    /* the band is taller than the frame, so fade hard top and bottom */
    linear-gradient(180deg,
      var(--bg-near-black) 0%, rgba(10,8,18,.55) 14%,
      rgba(10,8,18,.55) 48%, rgba(10,8,18,.90) 74%, var(--bg-near-black) 100%);
}
/* both member sections drop their own backgrounds and sit above the image */
.ns-band > .innovation-intro,
.ns-band > .product-section.band-member {
  position: relative; z-index: 2; background: none;
}
.ns-band > .innovation-intro { padding: 104px 0 72px; }
.ns-band > .product-section.band-member { padding: 72px 0 110px; }
.ns-band .ii-head { max-width: 620px; }
.ns-band .innovation-intro h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 22px; }
.ns-band .innovation-intro p { font-size: 16.5px; }
.ns-band .cs-head { max-width: 640px; }
/* the stepper needs a solid footing over a photograph */
.ns-band .cs-pane {
  background: linear-gradient(160deg, rgba(26,20,40,.92), rgba(10,8,18,.94));
  backdrop-filter: blur(3px);
}
@media (max-width: 900px) {
  .ns-band-bg img { object-position: 78% top; }
  .ns-band-vig {
    background:
      linear-gradient(90deg, rgba(10,8,18,.95) 0%, rgba(10,8,18,.9) 60%, rgba(10,8,18,.85) 100%),
      linear-gradient(180deg, var(--bg-near-black) 0%, rgba(10,8,18,.7) 18%, rgba(10,8,18,.9) 70%, var(--bg-near-black) 100%);
  }
  .ns-band > .innovation-intro { padding: 72px 0 48px; }
  .ns-band > .product-section.band-member { padding: 48px 0 76px; }
  .ns-band .ii-head, .ns-band .cs-head { max-width: none; }
}
/* ===================== NightStrike — Mission First =====================
   Sits between the hero and the photo band: a quiet, image-free beat that
   also keeps the two photographic areas from touching. */
.ns-mission {
  position: relative;
  padding: 104px 0 96px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}
.ns-mission::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(168,85,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 70%);
}
.ns-mission > .container { position: relative; z-index: 2; }
.nm-head { max-width: 760px; margin: 0 auto; text-align: center; }
.nm-head h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.nm-head p {
  color: rgba(255,255,255,.7); font-size: 17.5px; line-height: 1.65; margin: 0;
}
/* three-stage progression */
.nm-flow {
  list-style: none; margin: 62px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  position: relative;
}
/* the connecting line runs behind the numerals */
.nm-flow::before {
  content: ''; position: absolute; top: 27px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
}
.nm-stage { position: relative; text-align: center; padding: 0 20px; }
.nm-stage .n {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-family: 'Chivo Mono', monospace; font-size: 13px;
  letter-spacing: .1em; color: var(--violet-light);
  transition: background var(--dur-med) var(--ease-snap),
              color var(--dur-med) var(--ease-snap),
              box-shadow var(--dur-med) var(--ease-snap);
}
.nm-stage:hover .n {
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-primary));
  color: #fff;
  box-shadow: 0 0 0 6px rgba(168,85,247,.12);
}
.nm-stage h4 { font-size: 18px; margin: 0 0 8px; }
.nm-stage p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 0; }
body.reveal-ready .nm-flow .nm-stage.reveal:nth-child(2) { transition-delay: 80ms; }
body.reveal-ready .nm-flow .nm-stage.reveal:nth-child(3) { transition-delay: 160ms; }
@media (max-width: 820px) {
  .ns-mission { padding: 72px 0 64px; }
  .nm-flow { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; }
  .nm-flow::before { display: none; }
  .nm-stage { padding: 0; }
}
/* the Blog hero's filter chips sit inside the stacked subheader */
#subheader .filter-bar { margin-top: 34px; }
/* ===================== Service pages ===================== */
/* Hero band carries the service video instead of a card inside the column. */
.photo-band.sp-band .photo-band-bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
/* Block content as hairline ledger rows rather than a 2x2 card grid.
   Same copy, far less visual weight, and each block scans in seconds. */
.sp-rows { margin-top: 26px; border-top: 1px solid var(--border-medium); }
.sp-row {
  display: grid; grid-template-columns: 40px 250px 1fr;
  gap: 20px; align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-medium);
  transition: background var(--dur-fast) var(--ease-snap);
}
.sp-row:hover { background: rgba(168,85,247,.045); }
.sp-row > i {
  color: var(--violet-light); font-size: 15px;
  justify-self: start; align-self: start; margin-top: 2px;
}
.sp-row h5 { font-size: 15.5px; margin: 0; line-height: 1.35; }
.sp-row p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 860px) {
  .sp-row { grid-template-columns: 32px 1fr; row-gap: 8px; }
  .sp-row p { grid-column: 2; }
}
/* --- SPARTYN capability / value cards (restored; scoped so the service-page
       .sp-row work can never clash with them again) --- */
.spartyn-scope .sp-cards { display: grid; gap: 18px; margin-top: 52px; }
.spartyn-scope .sp-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.spartyn-scope .sp-cards.c2 { grid-template-columns: repeat(2, 1fr); }
.spartyn-scope .sp-card {
  position: relative; padding: 32px 28px; border-radius: 10px;
  border: 1px solid var(--sp-line);
  background: linear-gradient(155deg, var(--sp-bg-2), var(--sp-bg));
  transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
  /* angled corner clips — the treatment chosen for these sections */
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.spartyn-scope .sp-card:hover {
  transform: translateY(-3px);
  border-color: var(--sp-line-hot);
  background: linear-gradient(155deg, rgba(212,160,74,.10), var(--sp-bg) 60%);
}
.spartyn-scope .sp-card .n {
  font-family: 'Chivo Mono', monospace; font-size: 11px; letter-spacing: .2em;
  color: var(--sp-gold); display: block; margin-bottom: 14px;
}
.spartyn-scope .sp-card h4 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.spartyn-scope .sp-card p { margin: 0; color: rgba(255,255,255,.6); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 980px) {
  .spartyn-scope .sp-cards.c3, .spartyn-scope .sp-cards.c2 { grid-template-columns: 1fr; }
}
/* ===================== Legal documents ===================== */
.legal-doc { max-width: 800px; }
.legal-updated {
  font-family: 'Chivo Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid var(--border-medium);
}
.legal-doc h2 {
  font-size: 20px; margin: 40px 0 12px;
  padding-top: 8px;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: 16px; margin: 24px 0 8px; color: var(--violet-light); }
.legal-doc p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; }
.legal-doc li { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.legal-doc a { color: var(--violet-light); }
.legal-doc code {
  font-family: 'Chivo Mono', monospace; font-size: 13px;
  background: rgba(168,85,247,.12); padding: 2px 6px; border-radius: 4px;
}
/* [REVIEW] callouts — visible on purpose so they can't be published unnoticed */
.legal-note {
  border-left: 2px solid var(--violet-primary);
  background: rgba(168,85,247,.08);
  padding: 14px 18px; margin: 18px 0 22px;
  font-size: 14px !important; color: rgba(255,255,255,.8) !important;
}
.legal-table { margin: 18px 0 24px; border-top: 1px solid var(--border-medium); }
.lt-row {
  display: grid; grid-template-columns: 150px 1fr 1fr; gap: 18px;
  padding: 13px 4px; border-bottom: 1px solid var(--border-medium);
  font-size: 14px; color: rgba(255,255,255,.7);
}
.lt-row.lt-head {
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--violet-primary);
}
@media (max-width: 720px) {
  .lt-row { grid-template-columns: 1fr; gap: 4px; }
  .lt-row.lt-head { display: none; }
}
/* legal pages want genuine list markers */
.legal-doc ul { list-style: disc; padding-left: 20px; }
.legal-doc li { display: list-item; }
/* --- .container: Tailwind-compatible ---------------------------------------
   `container` is a Tailwind class, and while the Tailwind CDN was loaded its
   definition won over the one in this file. The header, the SPARTYN hero and
   every page using `.container` were laid out against Tailwind's breakpoint
   widths, not the 1200px rule above. The CDN has been removed, so Tailwind's
   definition is reproduced here verbatim to keep those layouts identical.

   (Declared last so it overrides the earlier `.container` rule, exactly as the
   CDN's stylesheet did. The `margin: 0 auto` and `padding: 0 24px` from that
   earlier rule still apply — Tailwind's container sets neither.) */
.container { width: 100%; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }
/* --- SPARTYN hero: layout rules restored ----------------------------------
   These were removed in error by an over-broad cleanup of the old service-page
   `.sp-hero` styles — the pattern `.sp-hero\b` also matched `.sp-hero-photo`,
   `.sp-hero-logo`, `.sp-hero-cta` and `.sp-hero-wrap`. Restored verbatim. */

.sp-hero-wrap { position: relative; z-index: 2; }
.sp-hero-logo {
  display: block; width: clamp(200px, 21vw, 285px); height: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 0 38px rgba(212,160,74,.3));
}
.sp-hero-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 36px; }
.sp-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sp-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 92% center;   /* keep the lit hub clear of the copy */
}
.sp-hero-photo-vig {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.985) 0%,
      rgba(5,5,5,.98) 52%,
      rgba(5,5,5,.88) 62%,
      rgba(5,5,5,.42) 76%,
      rgba(5,5,5,.10) 88%,
      rgba(5,5,5,.40) 100%),
    linear-gradient(180deg, rgba(5,5,5,.92) 0%, transparent 24%, transparent 66%, var(--sp-bg) 100%);
}
@media (max-width: 1240px) {
  .sp-hero-photo img { object-position: 97% center; }
  .sp-hero-photo-vig {
    background:
      linear-gradient(90deg, rgba(5,5,5,.99) 0%, rgba(5,5,5,.98) 56%, rgba(5,5,5,.88) 68%, rgba(5,5,5,.35) 84%, rgba(5,5,5,.35) 100%),
      linear-gradient(180deg, rgba(5,5,5,.92) 0%, transparent 24%, transparent 66%, var(--sp-bg) 100%);
  }
}
@media (max-width: 900px) {
  .sp-hero-photo img { object-position: 78% center; }
  .sp-hero-photo-vig {
    background:
      linear-gradient(90deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,.90) 60%, rgba(5,5,5,.82) 100%),
      linear-gradient(180deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 30%, rgba(5,5,5,.7) 70%, var(--sp-bg) 100%);
  }
}
/* ===================== Our Story — Why Choose Us comparison ===================== */
.wc-head { max-width: 780px; }
.wc-head .lead { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.7; margin-top: 16px; }
.wc-compare {
  /* Capped and centred — at full container width every cell trailed a large
     amount of empty space, since the longest line fills roughly a third of
     its column. */
  max-width: 920px;
  margin: 34px auto 0;
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  overflow: hidden;
}
.wc-row {
  display: grid; grid-template-columns: 150px 1fr 1fr;
  border-bottom: 1px solid var(--border-medium);
  transition: background var(--dur-fast) var(--ease-snap);
}
.wc-row:last-child { border-bottom: 0; }
.wc-row:not(.wc-head-row):hover { background: rgba(168,85,247,.04); }
.wc-head-row {
  background: rgba(255,255,255,.02);
}
.wc-head-row div {
  padding: 12px 18px;
  font-family: 'Chivo Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.wc-head-row div:last-child { color: var(--violet-light); }
.wc-row .wc-k,
.wc-row .wc-a,
.wc-row .wc-b { padding: 14px 18px; font-size: 14px; line-height: 1.5; }
.wc-row .wc-k {
  font-family: 'Sora', sans-serif; font-weight: 700;
  color: #fff; font-size: 14px; line-height: 1.35;
}
.wc-row .wc-a { color: rgba(255,255,255,.55); }
.wc-row .wc-b {
  color: rgba(255,255,255,.88);
  border-left: 1px solid var(--border-medium);
  background: rgba(168,85,247,.05);
}
@media (max-width: 860px) {
  .wc-head-row { display: none; }
  .wc-row { grid-template-columns: 1fr; }
  .wc-row .wc-k { padding-bottom: 4px; font-size: 15px; }
  /* label the columns inline once they stack */
  .wc-row .wc-a::before,
  .wc-row .wc-b::before {
    display: block; margin-bottom: 6px;
    font-family: 'Chivo Mono', monospace; font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase;
  }
  .wc-row .wc-a::before { content: 'Traditional testing'; color: rgba(255,255,255,.4); }
  .wc-row .wc-b::before { content: 'NightShade'; color: var(--violet-light); }
  .wc-row .wc-b { border-left: 0; border-top: 1px solid var(--border-medium); }
}

/* ===================== Downloads index =====================
   Ported from the former standalone page and scoped under .dl-body so
   these generic names (.btn, .header, .info) cannot leak site-wide. */
.dl-body $ { viewerBase }
.dl-body .featured-card { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; padding: 40px; border-radius: 20px;
      background: radial-gradient(ellipse at 100% 0%, rgba(168, 85, 247, 0.12), transparent 45%), linear-gradient(155deg, rgba(26,20,40,.8), rgba(10,8,18,.85));
      border: 1px solid rgba(168,85,247,.25); margin: 48px 0 24px; position: relative; overflow: hidden; }
.dl-body .featured-card::before { content: 'PRIMARY'; position: absolute; top: 20px; right: 20px;
      font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.24em; color: rgba(168, 85, 247, 0.6); }
.dl-body .featured-card .info .badge { display: inline-block; padding: 5px 12px; border-radius: 12px; background: rgba(168,85,247,.15);
      border: 1px solid rgba(168,85,247,.4); color: #c084fc; font-family: 'Poppins', sans-serif; font-weight: 700;
      font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; }
.dl-body .featured-card .info h2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 32px; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.01em; }
.dl-body .featured-card .info p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.dl-body .featured-card .info .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.dl-body .featured-card .info .spec { padding: 5px 12px; border-radius: 8px; background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: rgba(255,255,255,.8); font-size: 11px; letter-spacing: .05em; }
.dl-body .featured-card .info .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-body .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 24px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: all 0.3s; }
.dl-body .btn-primary { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; box-shadow: 0 8px 24px rgba(168,85,247,.3); }
.dl-body .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(168,85,247,.45); }
.dl-body .btn-secondary { background: transparent; color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.dl-body .btn-secondary:hover { background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.7); }
.dl-body .featured-card .thumb { position: relative; aspect-ratio: 8.5/11; border-radius: 8px; overflow: hidden;
      background: radial-gradient(ellipse at 100% 0%, rgba(168, 85, 247, 0.35), transparent 45%), linear-gradient(180deg, #0a0812 0%, #0f0a1e 100%);
      border: 1px solid rgba(168,85,247,.2); padding: 20px; display: flex; flex-direction: column; color: #fff; }
.dl-body .featured-card .thumb .t-hero { position: absolute; top: 0; right: 0; width: 65%; height: 45%;
      background: url('/static/img/capstmt-hero-violet.webp') center/cover no-repeat; opacity: 0.9;
      mask-image: linear-gradient(215deg, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(215deg, black 40%, transparent 100%); }
.dl-body .featured-card .thumb .t-brand { margin-bottom: 12px; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-brand img.t-logo { height: 22px; width: auto; display: block; }
.dl-body .featured-card .thumb .t-label { font-size: 6px; letter-spacing: 0.24em; color: #c084fc; font-weight: 600; text-transform: uppercase; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 34px; line-height: 0.9; margin: 4px 0 20px; color: #fff; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-title .p { color: #a855f7; }
.dl-body .featured-card .thumb .t-lede { font-size: 6px; line-height: 1.4; color: rgba(255,255,255,0.6); max-width: 80%; margin-bottom: 14px; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-section { font-size: 6.5px; letter-spacing: 0.2em; color: #c084fc; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid rgba(168,85,247,0.25); padding-bottom: 3px; margin-bottom: 6px; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-list div { font-size: 6px; color: rgba(255,255,255,.85); }
.dl-body .featured-card .thumb .t-adv { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-adv div { display: flex; gap: 4px; font-size: 6px; }
.dl-body .featured-card .thumb .t-adv strong { color: #fff; }
.dl-body .featured-card .thumb .t-adv span { color: rgba(255,255,255,.55); }
.dl-body .featured-card .thumb .t-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(168,85,247,.2); font-size: 6px; color: rgba(255,255,255,.6); position: relative; z-index: 1; }
.dl-body .featured-card .thumb .t-tagline { font-weight: 700; color: #fff; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.dl-body .secondary-card { display: grid; grid-template-columns: 1.5fr 0.6fr; gap: 32px; padding: 28px 32px; border-radius: 16px;
      background: rgba(26,20,40,.5); border: 1px solid rgba(168,85,247,.12); margin-bottom: 40px; align-items: center; }
.dl-body .secondary-card .info .badge { display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); color: #c084fc; font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.dl-body .secondary-card .info h2 { font-size: 22px; margin: 0 0 10px; font-weight: 800; }
.dl-body .secondary-card .info p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.dl-body .secondary-card .thumb { position: relative; aspect-ratio: 8.5/11; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #0a0812 0%, #0f0a1e 100%); border: 1px solid rgba(168,85,247,.18); display: flex; align-items: center; justify-content: center; }
.dl-body .secondary-card .thumb .t-hero { position: absolute; inset: 0; background: url('/static/img/capstmt-hero-violet.webp') center/cover no-repeat; opacity: .3; }
.dl-body .secondary-card .thumb .t-title-mini { position: relative; z-index: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; line-height: .95; text-align: center; color: #fff; }
.dl-body .secondary-card .thumb .t-title-mini span { color: #a855f7; }
.dl-body .help { padding: 24px 28px; border-radius: 14px; background: rgba(168,85,247,.04); border: 1px solid rgba(168,85,247,.15); margin-bottom: 24px; }
.dl-body .help h3 { margin: 0 0 12px; font-size: 15px; color: #c084fc; letter-spacing: .04em; }
.dl-body .help p { margin: 0 0 6px; font-size: 13.5px; color: rgba(255,255,255,.65); line-height: 1.6; }
.dl-body .help p strong { color: rgba(255,255,255,.9); }
.dl-body .coming-soon { padding: 16px 20px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 12.5px; color: rgba(255,255,255,.45); }
.dl-body .coming-soon .lbl { color: #c084fc; font-weight: 600; margin-right: 6px; }