/* ==========================================================================
   AI Capabilities — dark full-page variant (ai-at-apoxeo-v2.html)
   Extends the hero banner language across the entire page.
   Requires: ai-capabilities.css
   ========================================================================== */

.ai-page--dark {
  --ai-navy: #e8f6ff;
  --ai-muted: rgba(220, 240, 255, 0.68);
  --ai-rule: rgba(125, 211, 252, 0.16);
  --ai-surface: rgba(0, 18, 28, 0.72);
  --ai-surface-2: rgba(0, 32, 48, 0.78);
  color: rgba(232, 246, 255, 0.88);
  background:
    radial-gradient(ellipse at 85% 8%, rgba(3, 167, 255, 0.18), transparent 42%),
    radial-gradient(ellipse at 10% 55%, rgba(127, 93, 255, 0.12), transparent 48%),
    radial-gradient(ellipse at 70% 100%, rgba(255, 115, 0, 0.1), transparent 42%),
    linear-gradient(180deg, #001018 0%, #001b29 38%, #001521 100%);
  min-height: 100vh;
}

/* Dark page atmosphere */
.ai-dark-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ai-dark-atmosphere__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  opacity: 0.7;
}
.ai-dark-atmosphere__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.ai-dark-atmosphere__orb--a {
  width: min(50vw, 28rem);
  height: min(50vw, 28rem);
  top: -8%;
  right: -4%;
  background: rgba(3, 167, 255, 0.22);
}
.ai-dark-atmosphere__orb--b {
  width: min(40vw, 22rem);
  height: min(40vw, 22rem);
  top: 42%;
  left: -8%;
  background: rgba(127, 93, 255, 0.16);
}
.ai-dark-atmosphere__orb--c {
  width: min(36vw, 18rem);
  height: min(36vw, 18rem);
  bottom: 8%;
  right: 12%;
  background: rgba(255, 115, 0, 0.12);
}
.ai-dark-atmosphere__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 8, 14, 0.55) 100%);
}

/* Header — glass over dark */
.ai-page--dark .header-section,
.ai-page--dark header.scrolled {
  background: rgba(0, 16, 24, 0.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(125, 211, 252, 0.12) !important;
}
.ai-page--dark .navbar-nav .nav-item .nav-link {
  color: rgba(232, 246, 255, 0.78);
}
.ai-page--dark .navbar-nav .nav-item .nav-link:hover,
.ai-page--dark .navbar-nav .nav-link.active {
  color: #fff;
}
.ai-page--dark .hamburger-line {
  background: #fff;
}
.ai-page--dark .main-logo {
  max-height: 2.1rem;
}

/* Shared eyebrow on dark */
.ai-page--dark .mod-eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.28);
}
.ai-page--dark .mod-eyebrow__text {
  color: rgba(212, 241, 255, 0.82);
}

/* Hero CTA — white on dark, glow hover */
.ai-page--dark .btn-primary {
  background-color: #fff;
  border-color: transparent;
  color: #001b29;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(3, 167, 255, 0.18);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease,
    filter 0.3s ease;
}
.ai-page--dark .btn-primary::before {
  display: none;
}
.ai-page--dark .btn-primary:hover {
  background-color: #fff;
  color: #001b29;
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.55),
    0 0 22px rgba(3, 167, 255, 0.55),
    0 0 48px rgba(3, 167, 255, 0.28);
  filter: drop-shadow(0 0 10px rgba(3, 167, 255, 0.45));
}
.ai-page--dark .btn-primary:active {
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.4),
    0 0 16px rgba(3, 167, 255, 0.4);
}

/* ── Hero: open layout, full-width rules (no box) ─────────────────────────── */
.ai-page--dark .ai-hero {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
  border-top: 1px solid rgba(125, 211, 252, 0.22);
  border-bottom: 1px solid rgba(125, 211, 252, 0.22);
  background:
    radial-gradient(ellipse at 92% 20%, rgba(3, 167, 255, 0.16), transparent 42%),
    radial-gradient(ellipse at 8% 90%, rgba(127, 93, 255, 0.12), transparent 45%);
}
.ai-page--dark .ai-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff7300 0%, #03a7ff 45%, transparent 100%);
  z-index: 2;
}
.ai-page--dark .ai-hero__stage {
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}
.ai-page--dark .ai-hero__stage::before {
  display: none;
}
.ai-page--dark .ai-hero__grid {
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.ai-page--dark .ai-hero__ticker {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  border-top: 1px solid rgba(125, 211, 252, 0.22);
  background: linear-gradient(90deg, rgba(3, 167, 255, 0.06), rgba(255, 115, 0, 0.06));
}

/* ── Spotlight ───────────────────────────────────────────────────────────── */
.ai-page--dark .ai-spot {
  position: relative;
  z-index: 1;
}
.ai-page--dark .ai-spot__title {
  color: #f2faff;
}
.ai-page--dark .ai-spot__lede {
  color: rgba(220, 240, 255, 0.68);
}
.ai-page--dark .ai-spot__stage {
  background:
    linear-gradient(160deg, rgba(0, 22, 34, 0.88), rgba(0, 32, 48, 0.82));
  border: 1px solid rgba(3, 167, 255, 0.28);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}
.ai-page--dark .ai-spot__body {
  border-left-color: rgba(125, 211, 252, 0.14);
}
.ai-page--dark .ai-spot__nav {
  background: rgba(0, 12, 20, 0.35);
}
.ai-page--dark .ai-spot__tab {
  color: rgba(232, 246, 255, 0.72);
}
.ai-page--dark .ai-spot__tab:hover {
  background: rgba(3, 167, 255, 0.12);
  color: #fff;
}
.ai-page--dark .ai-spot__tab.is-active {
  background: linear-gradient(135deg, rgba(3, 167, 255, 0.28), rgba(0, 27, 41, 0.9));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(3, 167, 255, 0.35);
}
.ai-page--dark .ai-spot__tab.is-active .ai-spot__tab-num {
  color: #ff9a4a;
}
.ai-page--dark .ai-spot__media {
  border-bottom-color: rgba(125, 211, 252, 0.12);
}
.ai-page--dark .ai-spot__panel-title {
  color: #f2faff;
}
.ai-page--dark .ai-spot__panel-text,
.ai-page--dark .ai-spot__panel-detail {
  color: rgba(220, 240, 255, 0.7);
}
.ai-page--dark .ai-spot__panel[data-tone="cyan"] .ai-spot__panel-wash {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(3, 167, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(3, 167, 255, 0.08), transparent 50%);
}
.ai-page--dark .ai-spot__panel[data-tone="orange"] .ai-spot__panel-wash {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 115, 0, 0.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(255, 115, 0, 0.08), transparent 50%);
}
.ai-page--dark .ai-spot__panel[data-tone="navy"] .ai-spot__panel-wash {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(127, 93, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(3, 167, 255, 0.1), transparent 50%);
}
.ai-page--dark .ai-spot__chip {
  border-color: rgba(125, 211, 252, 0.28);
  background: rgba(3, 23, 34, 0.72);
  color: rgba(214, 242, 255, 0.95);
}
.ai-page--dark .ai-spot__meta-block {
  border-color: rgba(125, 211, 252, 0.16);
  background: rgba(0, 16, 26, 0.55);
}
.ai-page--dark .ai-spot__meta-block h4 {
  color: rgba(179, 230, 255, 0.7);
}
.ai-page--dark .ai-spot__meta-block li {
  color: rgba(232, 246, 255, 0.82);
}
.ai-page--dark .ai-spot__outcome {
  border-top-color: rgba(125, 211, 252, 0.16);
}
.ai-page--dark .ai-spot__outcome-text {
  color: #f2faff;
}
.ai-page--dark .ai-spot__watermark {
  -webkit-text-stroke: 1px rgba(125, 211, 252, 0.14);
}

/* ── Practice ────────────────────────────────────────────────────────────── */
.ai-page--dark .ai-practice {
  position: relative;
  z-index: 1;
}
.ai-page--dark .ai-practice__rail {
  border-top-color: rgba(125, 211, 252, 0.16);
  border-bottom-color: rgba(125, 211, 252, 0.16);
  background: rgba(0, 16, 26, 0.35);
  border-radius: 1.15rem;
  border: 1px solid rgba(3, 167, 255, 0.2);
  overflow: hidden;
}
.ai-page--dark .ai-practice__item {
  border-right-color: rgba(125, 211, 252, 0.14);
}
.ai-page--dark .ai-practice__tag--cyan {
  color: #5ec8f0;
}
.ai-page--dark .ai-practice__tag--orange {
  color: #ff9a4a;
}
.ai-page--dark .ai-practice__tag--navy {
  color: #b8c4ff;
}
.ai-page--dark .ai-practice__item h3 {
  color: #f2faff;
}
.ai-page--dark .ai-practice__item p {
  color: rgba(220, 240, 255, 0.68);
}

/* ── Close CTA — already dark; tighten into page ─────────────────────────── */
.ai-page--dark .ai-close {
  position: relative;
  z-index: 1;
}
.ai-page--dark .ai-close__panel {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 0 48px rgba(3, 167, 255, 0.16);
}

/* Footer blends with dark page */
.ai-page--dark .footer-section {
  position: relative;
  z-index: 2;
  background: #000d14;
  border-top-color: rgba(125, 211, 252, 0.12) !important;
}

/* Offcanvas on dark page */
.ai-page--dark .offcanvas {
  background: #001018;
  color: #e8f6ff;
}
.ai-page--dark .offcanvas .nav-link {
  color: rgba(232, 246, 255, 0.85);
}


/* Header / offcanvas CTA — outline style on dark AI page */
.ai-page--dark .header-section .btn-outline,
.ai-page--dark .offcanvas .btn-outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.ai-page--dark .header-section .btn-outline:hover,
.ai-page--dark .offcanvas .btn-outline:hover {
  background-color: #fff;
  border-color: #fff;
  color: #001b29;
}

@media (max-width: 991.98px) {
  .ai-page--dark .ai-practice__item {
    border-right: 0;
    border-bottom: 1px solid rgba(125, 211, 252, 0.14);
  }
  .ai-page--dark .ai-practice__item:last-child {
    border-bottom: 0;
  }
}