/**
 * Ultra-premium visual layer — master consulting (/consulting/) only.
 * Prefix: cbx- (consulting-bot experience). Avoid bare .card / .hero globals.
 */

.cbx-hero-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(92vh, 920px);
}

.cbx-hero-aurora {
  position: absolute;
  z-index: 0;
  left: -22%;
  top: -18%;
  width: 138%;
  height: 136%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 50% at 26% 30%, rgba(99, 102, 241, 0.45), transparent 70%),
    radial-gradient(ellipse 52% 46% at 74% 62%, rgba(157, 92, 255, 0.3), transparent 68%),
    radial-gradient(ellipse 38% 36% at 48% 82%, rgba(14, 165, 233, 0.12), transparent 62%);
  filter: blur(56px);
  opacity: 0.85;
  animation: cbx-aurora-drift 24s ease-in-out infinite alternate;
}

.cbx-hero-aurora--2 {
  left: -10%;
  top: -8%;
  animation-delay: -9s;
  animation-duration: 30s;
  opacity: 0.5;
  mix-blend-mode: screen;
}

@keyframes cbx-aurora-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-2%, -1.5%) scale(1.02);
  }
}

/* Deep glass slab over existing .metal-card */
.cbx-hero-panel {
  position: relative;
  z-index: 1;
  border-radius: 1.875rem !important;
  overflow: hidden;
  background:
    linear-gradient(
      168deg,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.028) 45%,
      rgba(6, 8, 20, 0.42) 100%
    ),
    rgba(8, 10, 22, 0.38) !important;
  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.13) inset,
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 36px 100px -32px rgba(0, 0, 0, 0.58),
    0 48px 140px -48px rgba(99, 102, 241, 0.22) !important;
}

.cbx-hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-weight: 600;
}

.cbx-lede {
  letter-spacing: -0.015em;
}

.cbx-eyebrow {
  letter-spacing: 0.16em;
}

/* Primary / ghost CTAs — anchor buttons */
.cbx-pill-primary {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.98),
    rgba(129, 92, 246, 0.94) 52%,
    rgba(157, 92, 255, 0.9)
  ) !important;
  color: #fafafa !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 36px -10px rgba(99, 102, 241, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    filter 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .cbx-pill-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.22) inset,
      0 16px 48px -12px rgba(99, 102, 241, 0.58),
      0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  }

  .cbx-pill-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.07) !important;
  }
}

.cbx-pill-ghost {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    background 0.25s ease !important;
}

/* Scroll reveal */
.cbx-premium-fade {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--cbx-d, 0) * 70ms);
}

.cbx-premium-fade.cbx-premium-fade--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flow rail (pipeline strip) */
.cbx-flow-rail {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: rgba(4, 6, 16, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.45);
}

/* Ecosystem + tier cards: Apple-style lift + ring glow */
.cbx-ecosystem-card {
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .metal-card.cbx-ecosystem-card:hover {
    transform: translateY(-4px);
    border-color: rgba(160, 175, 255, 0.35) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 26px 70px -20px rgba(91, 124, 255, 0.18),
      0 0 48px -20px rgba(99, 102, 241, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 767px) {
  .metal-card.cbx-ecosystem-card:hover {
    transform: none;
  }
}

header.site-head.cbx-site-head {
  background: rgba(4, 6, 16, 0.52) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* --- Live layer: canvas orb + system status --- */

#cbx-orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
}

.cbx-hero-shell .cbx-hero-aurora,
.cbx-hero-shell .cbx-hero-aurora--2 {
  z-index: 1;
}

.cbx-aurora-shift {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
/* Foreground column above aurora + orb */
.cbx-hero-fore {
  position: relative;
  z-index: 3;
}
.cbx-status-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cbx-status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
}

.cbx-status-dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.cbx-status-dot--ok {
  background: linear-gradient(145deg, #34d399, #10b981);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
  animation: cbx-dot-pulse 2.4s ease-in-out infinite;
}

.cbx-status-dot--warn {
  background: linear-gradient(145deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.cbx-status-dot--err {
  background: linear-gradient(145deg, #fb7185, #f43f5e);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.35);
}

@keyframes cbx-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.08);
  }
}

/* Interactive demo — “thinking” + proposal shimmer */
.cbx-demo-state {
  transition: opacity 0.25s ease, color 0.25s ease;
}

.cbx-demo-state--busy::after {
  content: ' …';
  display: inline-block;
  animation: cbx-demo-breathe 0.85s ease-in-out infinite;
  color: rgba(196, 181, 253, 0.95);
}

@keyframes cbx-demo-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.cbx-demo-shimmer {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.09) 45%,
    rgba(255, 255, 255, 0.03) 90%
  );
  background-size: 180% 100%;
  animation: cbx-demo-shimmer 1.35s ease-in-out infinite;
}

@keyframes cbx-demo-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}

/* ----- Enterprise SaaS depth: atmosphere, hero reveal, intent spotlight ----- */

body.cbx-consulting-page {
  isolation: isolate;
}

body.cbx-consulting-page > header,
body.cbx-consulting-page > section {
  position: relative;
  z-index: 1;
}

.cbx-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cbx-atmosphere::before,
.cbx-atmosphere::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0);
}

/* Muted indigo / air — no neon spikes */
.cbx-atmosphere::before {
  width: min(94vw, 640px);
  height: min(94vw, 640px);
  top: -16%;
  left: -22%;
  background: radial-gradient(circle at 40% 44%, rgba(99, 102, 241, 0.17), transparent 70%);
  filter: blur(72px);
  opacity: 0.34;
}

.cbx-atmosphere::after {
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  bottom: -4%;
  right: -18%;
  background: radial-gradient(circle at 48% 52%, rgba(125, 211, 252, 0.07), transparent 68%);
  filter: blur(68px);
  opacity: 0.28;
}

@keyframes cbx-hero-ent {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cbx-ent {
  opacity: 0;
  animation: cbx-hero-ent 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--cbx-ent-d, 0ms);
}

/* Intent grid: soft cursor-follow highlight (CSS vars; no mix-blend for cheaper compositing) */
.metal-card.cbx-intent-card {
  --spot-x: 50%;
  --spot-y: 34%;
  isolation: isolate;
}

.cbx-intent-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    min(400px, 155%) circle at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.04) 38%,
    transparent 64%
  );
  opacity: 0.36;
  transition: opacity 0.45s ease;
}

.metal-card.cbx-intent-card .metal-card-content {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .metal-card.cbx-intent-card:hover .cbx-intent-shine {
    opacity: 0.78;
  }

  .metal-card.cbx-intent-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 24px 72px -28px rgba(0, 0, 0, 0.52),
      0 0 48px -12px rgba(99, 102, 241, 0.09),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

.cbx-not-sure-glass {
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 28px 88px -32px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 72px -36px rgba(99, 102, 241, 0.09) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

/* Touch / narrow viewports: cheaper layers, scroll background (helps mobile INP/FPS). */
@media (max-width: 767px) {
  body.cbx-consulting-page {
    background-attachment: scroll !important;
  }

  .cbx-hero-aurora,
  .cbx-hero-aurora--2 {
    animation: none !important;
    opacity: 0.32;
    filter: blur(42px) !important;
    mix-blend-mode: normal;
  }

  #cbx-orb-canvas {
    opacity: 0.06;
  }

  body.cbx-consulting-page header.site-head {
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  }

  body.cbx-consulting-page .metal-card:not(.cbx-hero-panel) {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.cbx-consulting-page .cbx-flow-rail {
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }

  body.cbx-consulting-page .cbx-atmosphere::before {
    filter: blur(56px);
  }

  body.cbx-consulting-page .cbx-atmosphere::after {
    filter: blur(52px);
    opacity: 0.22;
  }

  .metal-card.cbx-intent-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbx-hero-aurora,
  .cbx-hero-aurora--2 {
    animation: none !important;
    filter: blur(52px);
  }

  .cbx-premium-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cbx-pill-primary:hover,
  .cbx-pill-ghost:hover,
  .metal-card.cbx-ecosystem-card:hover {
    transform: none !important;
  }

  .cbx-status-dot--ok {
    animation: none;
  }

  #cbx-orb-canvas {
    opacity: 0.22;
    display: none;
  }

  .cbx-demo-state--busy::after {
    animation: none !important;
  }

  .cbx-demo-shimmer {
    animation: none !important;
  }

  .cbx-ent {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cbx-atmosphere::before,
  .cbx-atmosphere::after {
    opacity: 0.2 !important;
    filter: blur(64px);
  }

  .metal-card.cbx-intent-card:hover,
  .metal-card.cbx-intent-card:hover::before {
    transform: none !important;
  }
}