/* --------------------------------------------------------------------------
   1. Floating Island Capsule Header (Matching Reference Design)
   -------------------------------------------------------------------------- */
.navbar-wrap,
.site-header {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-container,
.navbar-floating {
  pointer-events: auto;
  width: 100%;
  max-width: 1040px;
  height: 62px;
  border-radius: 9999px !important;
  /* Official Brand Navy #0E1328 */
  background: #0E1328 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 26px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-smooth);
}

.brand-logo-link:hover .brand-logo-img {
  transform: scale(1.04);
}

.header-right-group,
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 0.90rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.header-actions,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Primary Outline Pill Button (Exact Match: "Download App") */
.btn-pill-download,
.btn-pill-navy,
.btn-pill-slate,
.btn-nav-navy,
.btn-nav-white {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.2px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 9999px !important;
  padding: 9px 24px !important;
  min-height: 40px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

.btn-pill-download:hover,
.btn-pill-navy:hover,
.btn-pill-slate:hover,
.btn-nav-navy:hover,
.btn-nav-white:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.btn-pill-download:active,
.btn-pill-navy:active,
.btn-pill-slate:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 50%;
  transition: background 0.2s ease;
  z-index: 1002;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hamburger-bar {
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  display: block;
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation Drawer: Floating glass card below capsule */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  background: #0E1328 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(14, 19, 40, 0.50);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: auto;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  z-index: 999;
}

.mobile-nav-drawer.open {
  max-height: 480px;
  opacity: 1;
}

.mobile-drawer-inner {
  padding: 18px 18px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-nav-link {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-drawer-actions {
  display: flex;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-action-btn {
  flex: 1;
  text-align: center;
}

/* Modal Form Row Responsive */
.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   2. Exact Hero Section (Pixel-Perfect from Reference Image)
   -------------------------------------------------------------------------- */
.hero-exact-section {
  position: relative;
  background: 
    linear-gradient(135deg, rgba(162, 192, 254, 0.45) 0%, rgba(186, 210, 254, 0.2) 28%, transparent 55%),
    linear-gradient(225deg, rgba(162, 192, 254, 0.45) 0%, rgba(186, 210, 254, 0.2) 28%, transparent 55%),
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(155, 186, 251, 0.55) 0%, rgba(197, 218, 254, 0.3) 35%, rgba(228, 239, 254, 0.12) 60%, transparent 85%),
    linear-gradient(180deg, #b8d2fc 0%, #cde0fd 18%, #e2eeff 40%, #f3f8fe 65%, #ffffff 90%);
  padding: 130px 0 60px 0;
  overflow-x: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-exact-canvas {
  position: relative;
  width: 1024px;
  height: 534px;
  margin: 0 auto 150px auto;
  transform: scale(1.28);
  transform-origin: top center;
  flex-shrink: 0;
}

@media (max-width: 1360px) {
  .hero-exact-canvas {
    transform: scale(1.15);
    margin-bottom: 80px;
  }
}

@media (max-width: 1200px) {
  .hero-exact-canvas {
    transform: scale(1.0);
    margin-bottom: 0;
  }
}

@media (max-width: 1050px) {
  .hero-exact-canvas {
    transform: scale(0.9);
    margin-bottom: -50px;
  }
}

@media (max-width: 950px) {
  .hero-exact-canvas {
    transform: scale(0.8);
    margin-bottom: -100px;
  }
}

@media (max-width: 850px) {
  .hero-exact-canvas {
    transform: scale(0.7);
    margin-bottom: -150px;
  }
}

@media (max-width: 750px) {
  .hero-exact-canvas {
    transform: scale(0.58);
    margin-bottom: -220px;
  }
}

@media (max-width: 600px) {
  .hero-exact-section {
    padding: 75px 0 35px 0;
    overflow-x: clip;
    width: 100%;
  }
  .hero-exact-canvas {
    transform: scale(calc((100vw - 24px) / 1024));
    margin-bottom: calc(534px * (calc((100vw - 24px) / 1024) - 1));
  }
}

/* Center Dot Grid Background with Top, Bottom, Left & Right White Gradient Fade */
.hero-exact-dotgrid {
  display: none !important;
}

.hero-exact-dotgrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, #ffffff 100%),
    linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%);
  pointer-events: none;
}

/* Center Content */
.hero-exact-center {
  position: absolute;
  top: 135px;
  left: 200px;
  width: 624px;
  text-align: center;
  z-index: 10;
}

.exact-title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  color: #25334d;
  line-height: 1.14;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.exact-subtitle {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #384d6e;
  line-height: 1.45;
  max-width: 530px;
  margin: 0 auto 24px auto;
}

.exact-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.exact-btn-signup {
  background: #ffffff;
  border: 1.2px solid #8494ad;
  border-radius: 7px;
  padding: 8px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #1e2640;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.exact-btn-signup:hover {
  background: #f8fafc;
  border-color: #1e2640;
}

.exact-btn-connect {
  background: linear-gradient(180deg, #182035 0%, #0d1323 100%);
  border: 1px solid #141b2d;
  border-radius: 7px;
  padding: 8px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(13, 19, 35, 0.25);
  transition: all var(--transition-fast);
}

.exact-btn-connect:hover {
  background: #243254;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   The Orbital Wire Path & Nodes
   -------------------------------------------------------------------------- */
.exact-wire-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 534px;
  z-index: 5;
  pointer-events: none;
}

/* Dynamic Orbit Line Fill & Planet Motion */
.orbit-filling-line {
  will-change: stroke-dashoffset, stroke, opacity;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.orbit-completed-pulse {
  animation: orbitFullPulse 2s ease-in-out infinite alternate;
}

@keyframes orbitFullPulse {
  0% {
    stroke: #0e1328;
  }
  100% {
    stroke: #2a376c;
  }
}

.orbiting-planet-group {
  will-change: transform;
  pointer-events: none;
}

/* ==========================================================================
   Linear-Style Vector Beam Animations (Hardware Accelerated SVG Keyframes)
   ========================================================================== */

/* Ambient Vector Base Line with Subtle Tech Glow */
.linear-guide-line {
  stroke: rgba(148, 163, 184, 0.35);
  stroke-width: 1.5;
  fill: none;
}

/* Primary Traveling Laser Beam */
.linear-laser-beam {
  fill: none;
  stroke: url(#linear-pulse-neon);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 240 2410;
  animation: linearBeamFlow 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: url(#linear-laser-glow);
  opacity: 0.95;
  will-change: stroke-dashoffset;
}

/* Core Hot-White Energy Filament */
.linear-laser-core {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 90 2560;
  animation: linearBeamFlow 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 1;
  will-change: stroke-dashoffset;
}

/* Secondary High-Speed Particle Packet */
.linear-laser-packet {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 45 1280;
  animation: linearBeamFlow 3.8s linear infinite;
  filter: url(#linear-laser-glow);
  opacity: 0.85;
  will-change: stroke-dashoffset;
}

@keyframes linearBeamFlow {
  0% {
    stroke-dashoffset: 2650;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Precision Intersection Crosshairs */
.linear-crosshair {
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.linear-crosshair line {
  stroke: #64748b;
  stroke-width: 1.1;
}

.linear-crosshair circle {
  fill: #6366f1;
}

.linear-crosshair:hover {
  opacity: 1;
  transform: scale(1.4);
}

/* Concentric Radar Wave / Pulsing Halos on Pin Dots */
.linear-node-halo {
  fill: none;
  stroke: rgba(56, 189, 248, 0.4);
  stroke-width: 1;
  transform-origin: center;
  animation: linearRadarWave 3s ease-out infinite;
}

@keyframes linearRadarWave {
  0% {
    r: 2.5;
    opacity: 0.9;
    stroke: #38bdf8;
  }
  50% {
    r: 7;
    opacity: 0.5;
    stroke: #6366f1;
  }
  100% {
    r: 12;
    opacity: 0;
    stroke: #a855f7;
  }
}

/* Glowing Linear Node Orb */
.linear-orb-glow {
  animation: linearOrbPulse 2.2s ease-in-out infinite alternate;
}

@keyframes linearOrbPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Dynamic Reactive Card Glow on Circuit Activation */
.exact-card.station-dark {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.28), 0 4px 14px rgba(14, 19, 40, 0.08) !important;
}

.exact-card:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.38), 0 8px 24px rgba(14, 19, 40, 0.12) !important;
  transform: translateY(-2px);
}

.exact-trapezoid-hover {
  pointer-events: auto;
  cursor: pointer;
  transition: fill var(--transition-fast), filter var(--transition-fast);
}

.exact-trapezoid-hover:hover {
  fill: #fcfdff;
  filter: drop-shadow(0 4px 12px rgba(30, 38, 64, 0.08));
}

/* Base Light Stroke Styles for All Circuit Elements & Nodes */
.wire-pin-dot {
  fill: #cbd5e1;
  transition: fill 0.35s ease;
}

.node-circle {
  stroke: #cbd5e1;
  transition: stroke 0.45s ease;
}

.node-icon-fill {
  fill: #94a3b8;
  transition: fill 0.45s ease;
}

.node-icon-stroke {
  stroke: #94a3b8;
  transition: stroke 0.45s ease;
}

#trapezoid-shape {
  stroke: #cbd5e1;
  transition: stroke 0.45s ease;
}

#trapezoid-text {
  fill: #64748b;
  transition: fill 0.45s ease;
}

#leftcenter-cap-icon path {
  fill: #94a3b8;
  transition: fill 0.45s ease;
}

/* Cards on Wire: Default Light Border State */
.exact-card {
  position: absolute;
  background: #ffffff;
  border: 1.4px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(30, 38, 64, 0.04);
  z-index: 10;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, transform var(--transition-fast);
}

.exact-card:hover {
  box-shadow: 0 6px 18px rgba(30, 38, 64, 0.12);
}

/* 1. Top-Left Card: Get Admission (Enhanced Design Elements) */
.exact-card-topleft {
  top: 36px;
  left: 30px;
  width: 156px;
  height: 76px;
  transform: rotate(-10deg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.admission-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.admission-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 0.8px solid #bbf7d0;
  padding: 1.5px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.45s ease;
}

.admission-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.6);
  flex-shrink: 0;
}

.admission-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admission-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1.2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.45s ease;
}

.admission-text-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admission-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  line-height: 1.2;
  transition: color 0.45s ease;
}

.admission-sub-text {
  font-size: 9px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 1.5px;
  transition: color 0.45s ease;
}

.exact-badge-dark {
  background: #94a3b8;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 3px;
  display: inline-block;
  transition: background 0.45s ease;
}

.exact-card-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  transition: color 0.45s ease;
}

/* Active Dark State for Get Admission Card */
.exact-card-topleft.station-dark .admission-status-pill {
  background: #0e1328 !important;
  border-color: #0e1328 !important;
  color: #ffffff !important;
}

.exact-card-topleft.station-dark .admission-icon-box {
  border-color: #0e1328 !important;
  background: #f1f5f9;
  color: #0e1328 !important;
}

.exact-card-topleft.station-dark .admission-title {
  color: #0e1328 !important;
}

.exact-card-topleft.station-dark .admission-sub-text {
  color: #64748b !important;
}

/* 2. Top-Center Card: Attendance (Same Style as Other Cards) */
.exact-card-attendance {
  position: absolute;
  top: 7px;
  left: 310px;
  width: 134px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  z-index: 10;
}

.attendance-avatar-box {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.attendance-avatar-box .exact-card-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.4px solid #cbd5e1;
  object-fit: cover;
  transition: border-color 0.45s ease;
}

.attendance-check-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Top-Center Element: Live Tools Cluster */
.triple-nodes-cluster {
  position: absolute;
  top: 11.5px;
  left: 517.5px;
  width: 79px;
  height: 31px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.triple-nodes-cluster:hover {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(14, 19, 40, 0.18));
}

.triple-cluster-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.triple-nodes-cluster.station-dark {
  filter: drop-shadow(0 2px 10px rgba(14, 19, 40, 0.28));
}

/* =========================================================================
   Active Dark State: Elements Turn Dark when Planet Icon Arrives
   ========================================================================= */
.exact-card.station-dark {
  border-color: #0e1328 !important;
  box-shadow: 0 4px 16px rgba(14, 19, 40, 0.12) !important;
}

.exact-card.station-dark .exact-card-text {
  color: #0e1328 !important;
}

.exact-card.station-dark .exact-badge-dark {
  background: #0e1328 !important;
}

.exact-card.station-dark #leftcenter-cap-icon path {
  fill: #0e1328 !important;
}

.exact-card.station-dark .exact-card-avatar {
  border-color: #0e1328 !important;
}

.circuit-node.station-dark .node-circle {
  stroke: #0e1328 !important;
}

.circuit-node.station-dark .node-icon-fill {
  fill: #0e1328 !important;
}

/* Assignments Trapezoid Card Styling & Interactive States */
#node-trapezoid {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#node-trapezoid:hover #trapezoid-shape {
  stroke: #94a3b8;
  filter: drop-shadow(0 6px 18px rgba(30, 38, 64, 0.12));
}

#trapezoid-shape {
  transition: stroke 0.45s ease, filter 0.45s ease;
}

#trapezoid-text {
  transition: fill 0.45s ease;
}

.trapezoid-clip-body,
.trapezoid-clip-metal,
.trapezoid-clip-line,
.trapezoid-pill-bg,
.trapezoid-pill-text,
.trapezoid-pill-dot,
.trapezoid-grade-circle {
  transition: all 0.45s ease;
}

.circuit-node.station-dark #trapezoid-shape {
  stroke: #0e1328 !important;
}

.circuit-node.station-dark #trapezoid-text {
  fill: #0e1328 !important;
}

.circuit-node.station-dark .trapezoid-clip-body {
  stroke: #0e1328 !important;
}

.circuit-node.station-dark .trapezoid-clip-metal {
  fill: #0e1328 !important;
}

.circuit-node.station-dark .trapezoid-clip-line {
  stroke: #0e1328 !important;
}

.circuit-node.station-dark .trapezoid-pill-bg {
  fill: #0e1328 !important;
  stroke: #0e1328 !important;
}

.circuit-node.station-dark .trapezoid-pill-text {
  fill: #ffffff !important;
}

.circuit-node.station-dark .trapezoid-pill-dot {
  fill: #34d399 !important;
}

.circuit-node.station-dark .trapezoid-grade-circle {
  stroke: #0e1328 !important;
}

.wire-pin-dot.station-dark {
  fill: #0e1328 !important;
}

/* 3. Top-Right Card: Sessions */
.exact-card-topright {
  top: 93px;
  left: 818px;
  width: 132px;
  height: 44px;
  transform: rotate(5deg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.session-avatar-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.session-avatar-wrap .exact-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.4px solid #cbd5e1;
  object-fit: cover;
  transition: border-color 0.45s ease;
}

.session-live-pulse {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  border: 1.5px solid #ffffff;
}

.exact-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* 6. Left-Center Card: Placement (Enhanced Blue Design Elements) */
.exact-card-leftcenter {
  top: 275px;
  left: 40px;
  width: 172px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
}

.placement-icon-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.placement-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e3a8a 0%, #38bdf8 100%);
  border: 1px solid rgba(30, 58, 138, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.22);
  transition: all 0.45s ease;
}

#leftcenter-cap-icon path {
  fill: #ffffff;
  transition: fill 0.45s ease;
}

.placement-badge-check {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #38bdf8 100%);
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(30, 58, 138, 0.35);
}

.placement-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.placement-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.placement-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
  transition: color 0.45s ease;
}

.placement-hired-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: #1d4ed8;
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
  border: 0.8px solid #93c5fd;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all 0.45s ease;
}

.placement-sub {
  display: flex;
  align-items: center;
  gap: 4.5px;
}

.placement-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #38bdf8 100%);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.placement-sub-text {
  font-size: 9.5px;
  font-weight: 500;
  color: #0284c7;
  white-space: nowrap;
  transition: color 0.45s ease;
}

/* Active Dark State for Placement Card */
.exact-card-leftcenter.station-dark .placement-icon-box {
  border-color: #0e1328 !important;
  background: #0e1328 !important;
}

.exact-card-leftcenter.station-dark #leftcenter-cap-icon path {
  fill: #ffffff !important;
}

.exact-card-leftcenter.station-dark .placement-badge-check {
  background: #0e1328 !important;
}

.exact-card-leftcenter.station-dark .placement-title {
  color: #0e1328 !important;
}

.exact-card-leftcenter.station-dark .placement-hired-tag {
  background: #0e1328 !important;
  border-color: #0e1328 !important;
  color: #ffffff !important;
}

.exact-card-leftcenter.station-dark .placement-live-dot {
  background: #0e1328 !important;
  box-shadow: none !important;
}

.exact-card-leftcenter.station-dark .placement-sub-text {
  color: #0e1328 !important;
}

/* 5. Bottom-Center Document Card: Study Materials */
.exact-card-bottomcenter {
  top: 438px;
  left: 590px;
  width: 148px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.exact-doc-icon {
  width: 20px;
  height: 22px;
  background: #0288d1;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5px;
  padding-left: 3px;
  flex-shrink: 0;
}

.doc-line {
  width: 12px;
  height: 1.8px;
  background: #ffffff;
  border-radius: 1px;
}

.doc-line-short {
  width: 10px;
}


/* Pin Connection Dots on the Wire */
.pin-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--logo-base);
  z-index: 5;
}


.hero-pill .pill-tag {
  background: var(--gradient-logo);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--logo-base);
}

.hero-subtitle {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  max-width: 780px;
  margin: 0 auto 36px auto;
  color: #475569;
  line-height: 1.6;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

/* Metric Strip */
.hero-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 0 auto 60px auto;
  padding: 22px 32px;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.metric-item {
  text-align: center;
}

.metric-value {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  background: var(--gradient-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.metric-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   3. The Ekuator Command Console (Plain Background & Parallax Scroll)
   -------------------------------------------------------------------------- */
.console-section {
  position: relative;
  z-index: 5;
  background: #ffffff;
  padding: 50px 0 clamp(70px, 8vw, 110px) 0;
  overflow: hidden;
  width: 100%;
  /* Pure plain solid background — completely covers starfield mesh, ambient glow & background elements */
}

.console-stage {
  perspective: 1400px;
  perspective-origin: center top;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.console-wrapper {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.console-container {
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 75px -15px rgba(14, 19, 40, 0.14), 0 0 0 1px rgba(14, 19, 40, 0.04);
  overflow: hidden;
  text-align: left;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: box-shadow 0.35s ease;
}

/* --------------------------------------------------------------------------
   Console Entrance Animation & Staggered Reveal Choreography
   -------------------------------------------------------------------------- */
/* Initial Staged State (Hidden, lifted, ready for entrance) */
#console.console-entrance-ready:not(.console-in-view) .console-wrapper {
  opacity: 0;
  transform: perspective(1400px) rotateX(7deg) translateY(60px) scale(0.95);
  will-change: opacity, transform;
}

#console.console-entrance-ready:not(.console-in-view) .console-container {
  box-shadow: 0 10px 30px -10px rgba(14, 19, 40, 0.04);
}

/* Internal elements staged before entrance */
#console.console-entrance-ready:not(.console-in-view) .console-topbar {
  opacity: 0;
  transform: translateY(-14px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-topbar {
  opacity: 0;
  transform: translateY(-10px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-sidebar {
  opacity: 0;
  transform: translateX(-24px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-welcome-banner {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
}

#console.console-entrance-ready:not(.console-in-view) .cda-kpis-grid .cda-kpi-card {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
}

#console.console-entrance-ready:not(.console-in-view) .cda-notif-card {
  opacity: 0;
  transform: translateY(24px) translateX(12px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-calendar-card {
  opacity: 0;
  transform: translateY(24px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-bottom-grid > div:nth-child(2) {
  opacity: 0;
  transform: translateY(24px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-progress-card {
  opacity: 0;
  transform: translateY(24px);
}

#console.console-entrance-ready:not(.console-in-view) .cda-circle-fg {
  stroke-dashoffset: 238.76 !important;
}

/* --- Entrance Active (Triggered when section scrolls into view) --- */
#console.console-in-view .console-wrapper {
  opacity: 1;
  transform: perspective(1400px) rotateX(0deg) translateY(0) scale(1);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

#console.console-in-view .console-container {
  box-shadow:
    0 35px 95px -15px rgba(14, 19, 40, 0.18),
    0 0 0 1px rgba(14, 19, 40, 0.05),
    0 0 60px -10px rgba(67, 56, 202, 0.12);
  transition: box-shadow 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chrome Window Topbar drops in smoothly */
#console.console-in-view .console-topbar {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* Traffic dots micro-bounce cascade */
#console.console-in-view .traffic-dot {
  animation: consoleDotPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#console.console-in-view .traffic-dot.red { animation-delay: 0.20s; }
#console.console-in-view .traffic-dot.yellow { animation-delay: 0.26s; }
#console.console-in-view .traffic-dot.green { animation-delay: 0.32s; }

@keyframes consoleDotPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* Address bar ambient shimmer sweep */
#console.console-in-view .console-address-bar {
  position: relative;
  overflow: hidden;
}
#console.console-in-view .console-address-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(67, 56, 202, 0.12), transparent);
  animation: consoleBarShimmer 1.1s ease-out 0.35s forwards;
  pointer-events: none;
}
@keyframes consoleBarShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* CDA Header */
#console.console-in-view .cda-topbar {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

/* CDA Sidebar */
#console.console-in-view .cda-sidebar {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.24s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;
}

/* Hero Welcome Banner */
#console.console-in-view .cda-welcome-banner {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.30s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.30s;
}

/* Staggered KPI Badges */
#console.console-in-view .cda-kpis-grid .cda-kpi-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.38s,
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.38s;
}
#console.console-in-view .cda-kpis-grid .cda-kpi-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.46s,
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.46s;
}
#console.console-in-view .cda-kpis-grid .cda-kpi-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.54s,
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.54s;
}

/* Notifications Card */
#console.console-in-view .cda-notif-card {
  opacity: 1;
  transform: translateY(0) translateX(0);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.44s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.44s;
}

/* Bottom Grid Cards (Calendar, Upcoming, Progress) */
#console.console-in-view .cda-calendar-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.56s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.56s;
}
#console.console-in-view .cda-bottom-grid > div:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.64s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.64s;
}
#console.console-in-view .cda-progress-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.72s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.72s;
}

/* SVG Radial Rings Fill Animation */
#console.console-in-view .cda-circle-fg.green-ring {
  stroke-dashoffset: 145.64 !important;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}
#console.console-in-view .cda-circle-fg.dark-ring {
  stroke-dashoffset: 173.6 !important;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.85s;
}

/* Mobile & Tablet Overrides (keep transform scale intact) */
@media (max-width: 1180px) {
  #console.console-entrance-ready:not(.console-in-view) .console-wrapper {
    opacity: 0 !important;
    transform: translateY(35px) scale(0.97) !important;
  }
  #console.console-in-view .console-wrapper {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #console.console-entrance-ready:not(.console-in-view) .console-wrapper,
  #console.console-entrance-ready:not(.console-in-view) .console-topbar,
  #console.console-entrance-ready:not(.console-in-view) .cda-topbar,
  #console.console-entrance-ready:not(.console-in-view) .cda-sidebar,
  #console.console-entrance-ready:not(.console-in-view) .cda-welcome-banner,
  #console.console-entrance-ready:not(.console-in-view) .cda-kpis-grid .cda-kpi-card,
  #console.console-entrance-ready:not(.console-in-view) .cda-notif-card,
  #console.console-entrance-ready:not(.console-in-view) .cda-calendar-card,
  #console.console-entrance-ready:not(.console-in-view) .cda-bottom-grid > div:nth-child(2),
  #console.console-entrance-ready:not(.console-in-view) .cda-progress-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.console-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(14, 19, 40, 0.08);
}

.traffic-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.traffic-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.traffic-dot.red { background: #ef4444; }
.traffic-dot.yellow { background: #f59e0b; }
.traffic-dot.green { background: #10b981; }

.console-address-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(14, 19, 40, 0.1);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--logo-base);
  width: 48%;
  justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.console-address-bar .lock-icon {
  color: #10b981;
}

.console-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #059669;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. The CDA Student Portal Application UI
   -------------------------------------------------------------------------- */
.cda-app-container {
  display: flex;
  flex-direction: column;
  background: #0c0d2e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1e293b;
  width: 100%;
  overflow: hidden;
}

/* CDA Topbar */
.cda-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #0c0d2e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 10;
}

.cda-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cda-brand {
  display: none !important;
}

.cda-topbar-center {
  flex: 1;
  max-width: 440px;
  margin: 0 24px;
}

.cda-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 14px;
  transition: all 0.2s ease;
}

.cda-search-box:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.cda-search-icon {
  color: #8f94ba;
  flex-shrink: 0;
}

.cda-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.82rem;
  font-family: inherit;
}

.cda-search-input::placeholder {
  color: #7980a6;
}

.cda-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cda-icon-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.cda-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cda-notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f97316;
  border: 1.5px solid #0c0d2e;
}

.cda-profile-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.cda-profile-dropdown:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cda-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d8dde6;
  color: #0c0d2e;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cda-profile-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cda-profile-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.cda-profile-email {
  font-size: 0.7rem;
  color: #8f94ba;
  line-height: 1.2;
}

.cda-chevron-icon {
  color: #8f94ba;
}

/* App Body Layout */
.cda-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 580px;
  background: #0c0d2e;
  transition: grid-template-columns 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cda-body.collapsed-sidebar {
  grid-template-columns: 58px 1fr;
}

.cda-body.collapsed-sidebar .cda-nav-label,
.cda-body.collapsed-sidebar .cda-streak-details {
  display: none;
}

.cda-body.collapsed-sidebar .cda-nav-item {
  justify-content: center;
  padding: 9px 0;
}

.cda-body.collapsed-sidebar .cda-streak-card {
  justify-content: center;
}

/* CDA Sidebar */
.cda-sidebar {
  background: #0c0d2e;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 10px 20px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cda-collapse-btn {
  position: absolute;
  right: -9px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  color: #0c0d2e;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cda-collapse-btn:hover {
  transform: scale(1.1);
  background: #f8fafc;
}

.cda-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cda-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #8f94ba;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.cda-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.cda-nav-item.active {
  background: #ffffff;
  color: #0c0d2e;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cda-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cda-nav-label {
  white-space: nowrap;
}

/* Streak Widget */
.cda-streak-card {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cda-streak-flame-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff6a00;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.4);
}

.cda-streak-details {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cda-streak-title {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #70769d;
  letter-spacing: 0.5px;
}

.cda-streak-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cda-streak-emoji {
  font-size: 0.8rem;
}

.cda-streak-best {
  font-size: 0.65rem;
  color: #8f94ba;
}

/* CDA Content Area */
.cda-content {
  background: #f0f2eb;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* Cards Base */
.cda-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.cda-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cda-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cda-view-all {
  font-size: 0.72rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.cda-view-all:hover {
  color: #0c0d2e;
}

/* Upper Grid: Hero/KPIs + Notifications */
.cda-top-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.cda-hero-kpi-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Welcome Banner */
.cda-welcome-banner {
  background: linear-gradient(135deg, #171954 0%, #1d1e67 100%);
  border-radius: 14px;
  padding: 20px 24px;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(23, 25, 84, 0.15);
}

.cda-banner-sub {
  font-size: 0.72rem;
  color: #9ea8d8;
  font-weight: 500;
  margin-bottom: 4px;
}

.cda-banner-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cda-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: cdaWave 2s infinite ease-in-out;
}

@keyframes cdaWave {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(14deg); }
  40%, 80% { transform: rotate(-10deg); }
}

.cda-banner-quote {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: #cbd5e1;
}

.cda-sparkle-icon {
  font-size: 0.85rem;
}

/* 3 KPIs Grid */
.cda-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cda-kpi-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.cda-kpi-info {
  display: flex;
  flex-direction: column;
}

.cda-kpi-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 2px;
}

.cda-kpi-val-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cda-kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}

.cda-kpi-trend {
  background: #ecfdf5;
  color: #10b981;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.cda-kpi-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cda-kpi-icon-box.green {
  background: #e6f7f0;
}

.cda-kpi-icon-box.blue {
  background: #eff2fe;
}

.cda-kpi-icon-box.purple {
  background: #f5f0fb;
}

/* Notifications Card */
.cda-notif-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cda-notif-item {
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 14px;
  background: #ffffff;
}

.cda-notif-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cda-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cda-notif-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
}

.cda-notif-author {
  font-weight: 600;
  color: #0f172a;
}

.cda-bullet {
  color: #94a3b8;
}

.cda-notif-date {
  color: #94a3b8;
}

.cda-tag-pill {
  margin-left: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.3px;
}

.cda-notif-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.cda-notif-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 12px;
}

.cda-reactions-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #64748b;
}

.cda-reaction-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cda-reaction-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cda-reaction-btn:hover {
  transform: scale(1.18);
  background: #eff6ff;
  border-color: #bfdbfe;
}

.cda-reaction-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

/* Lower Grid: 3 Equal Columns */
.cda-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* Calendar Card */
.cda-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cda-cal-arrow {
  background: transparent;
  border: none;
  font-size: 1rem;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.cda-cal-arrow:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.cda-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.cda-cal-day-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 4px 0;
}

.cda-cal-date {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border-radius: 50%;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cda-cal-date.empty {
  cursor: default;
}

.cda-cal-date.ring-outline {
  border: 1px solid #f97316;
  color: #0f172a;
}

.cda-cal-date.ring-plain {
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

.cda-cal-date.weekend {
  background: #e2e8f0;
  color: #64748b;
}

.cda-cal-date.ring-today {
  border: 2px solid #10b981;
  font-weight: 700;
  color: #059669;
}

.cda-cal-date:not(.empty):hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.cda-cal-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.65rem;
  color: #64748b;
}

.cda-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cda-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cda-legend-dot.present { background: #10b981; }
.cda-legend-dot.absent { background: #ef4444; }
.cda-legend-dot.late { background: #f59e0b; }
.cda-legend-dot.holiday { background: #06b6d4; }

/* Upcoming Sessions Card */
.cda-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cda-session-card {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

.cda-session-card.accent-blue {
  border-left: 3.5px solid #0c0d2e;
}

.cda-session-card.accent-dark {
  border-left: 3.5px solid #0c0d2e;
}

.cda-session-card:hover {
  background: #f1f5f9;
  transform: translateX(2px);
}

.cda-session-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.cda-session-time {
  font-size: 0.68rem;
  color: #64748b;
}

.cda-session-host {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.cda-avatar-xs {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #334155;
  font-size: 0.58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cda-host-name {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 500;
}

/* Progress Card */
.cda-gauges-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 10px 0 14px 0;
}

.cda-gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cda-gauge-container {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cda-circular-chart {
  width: 100%;
  height: 100%;
}

.cda-gauge-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cda-gauge-percent {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}

.cda-gauge-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cda-gauge-badge.green-badge {
  background: #10b981;
}

.cda-gauge-badge.dark-badge {
  background: #0c0d2e;
}

.cda-gauge-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 8px;
}

.cda-gauge-sub {
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 2px;
}

.cda-progress-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  font-size: 0.68rem;
  color: #64748b;
}

.cda-prog-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cda-prog-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Tab Views Switching Animation */
.cda-tab-view {
  display: none;
  width: 100%;
}

.cda-tab-view.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: cdaTabFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cdaTabFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Common Tab View Header */
.cda-view-header {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  gap: 16px;
  flex-wrap: wrap;
}

.cda-view-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #3b82f6;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.cda-view-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: #0f172a;
  margin-bottom: 4px;
}

.cda-view-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
}

/* CDA Buttons */
.cda-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cda-btn-primary {
  background: #0c0d2e;
  color: #ffffff;
  border-color: #0c0d2e;
}

.cda-btn-primary:hover {
  background: #1a1b4b;
  box-shadow: 0 2px 8px rgba(12, 13, 46, 0.25);
  transform: translateY(-1px);
}

.cda-btn-secondary {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #e2e8f0;
}

.cda-btn-secondary:hover {
  background: #e2e8f0;
}

/* 4 Metrics Pill Row */
.cda-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cda-metric-pill-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.cda-metric-pill-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.cda-metric-pill-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.cda-metric-pill-sub {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 3px;
}

/* 2-Column Responsive Grid */
.cda-two-col-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
}

/* Data Tables */
.cda-table-wrapper {
  overflow-x: auto;
  margin-top: 6px;
}

.cda-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}

.cda-data-table th {
  padding: 10px 12px;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.7rem;
}

.cda-data-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

.cda-data-table tr:hover td {
  background: #f8fafc;
}

/* Status Badges */
.cda-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
}

.cda-status-badge.success {
  background: #ecfdf5;
  color: #059669;
}

.cda-status-badge.warning {
  background: #fffbeb;
  color: #d97706;
}

.cda-status-badge.info {
  background: #eff6ff;
  color: #2563eb;
}

/* Punch Log List */
.cda-punch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cda-punch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 0.75rem;
}

.cda-punch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cda-punch-dot.present { background: #10b981; }
.cda-punch-dot.late { background: #f59e0b; }
.cda-punch-dot.holiday { background: #3b82f6; }

.cda-punch-info {
  flex: 1;
}

.cda-punch-title {
  font-weight: 700;
  color: #0f172a;
}

.cda-punch-meta {
  font-size: 0.68rem;
  color: #64748b;
}

/* Featured Live Session Banner */
.cda-featured-session {
  background: linear-gradient(135deg, #0c0d2e 0%, #171850 100%);
  border-radius: 14px;
  padding: 22px 26px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 4px 18px rgba(12, 13, 46, 0.2);
}

.cda-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cda-live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: cdaPulse 1.5s infinite;
}

@keyframes cdaPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.cda-session-hero-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 6px;
}

.cda-session-hero-meta {
  font-size: 0.72rem;
  color: #a5b4fc;
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.cda-session-hero-actions {
  display: flex;
  gap: 10px;
}

.cda-session-hero-actions .cda-btn-primary {
  background: #ffffff;
  color: #0c0d2e;
  border-color: #ffffff;
}

.cda-session-hero-actions .cda-btn-primary:hover {
  background: #f1f5f9;
}

.cda-session-hero-actions .cda-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.cda-live-badge-count {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  min-width: 120px;
}

.cda-live-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  display: block;
}

.cda-live-caption {
  font-size: 0.65rem;
  color: #cbd5e1;
}

/* Schedule Items */
.cda-sessions-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cda-schedule-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.cda-schedule-item:hover {
  background: #f1f5f9;
}

.cda-schedule-date-box {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cda-schedule-day {
  font-size: 0.55rem;
  font-weight: 700;
  color: #64748b;
}

.cda-schedule-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0c0d2e;
  line-height: 1;
}

.cda-schedule-details {
  flex: 1;
}

.cda-schedule-details h5 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.cda-schedule-details p {
  font-size: 0.68rem;
  color: #64748b;
  margin: 0;
}

.cda-btn-icon-reminder {
  background: transparent;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.15s ease;
}

.cda-btn-icon-reminder:hover {
  transform: scale(1.2);
}

/* Recorded Lecture Archive */
.cda-recordings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cda-recording-item {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
}

.cda-rec-thumb {
  width: 72px;
  height: 48px;
  background: #0c0d2e;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  color: #ffffff;
}

.cda-rec-play-btn {
  font-size: 0.85rem;
  opacity: 0.9;
}

.cda-rec-dur {
  position: absolute;
  bottom: 2px;
  right: 3px;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 3px;
}

.cda-rec-info h6 {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.cda-rec-info p {
  font-size: 0.65rem;
  color: #64748b;
  margin-bottom: 4px;
}

.cda-watch-link {
  font-size: 0.68rem;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.cda-watch-link:hover {
  text-decoration: underline;
}

/* Curriculum Progress Bar */
.cda-curriculum-bar-wrap {
  width: 100%;
  height: 8px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 6px 0;
}

.cda-curriculum-progress {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #2563eb 100%);
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* Modules Grid */
.cda-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.cda-module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}

.cda-module-status-chip {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.cda-module-card.completed .cda-module-status-chip {
  background: #ecfdf5;
  color: #059669;
}

.cda-module-card h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.cda-module-card p {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 12px;
}

.cda-module-meta {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 500;
}

/* Assignment Dropzone */
.cda-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cda-dropzone:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.cda-dropzone-icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.cda-dropzone-text {
  font-size: 0.8rem;
  color: #1e293b;
}

.cda-dropzone-sub {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 4px;
}

.cda-link-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.75rem;
  color: #0f172a;
  outline: none;
}

.cda-link-input:focus {
  border-color: #2563eb;
}

/* SpeakUp Forum */
.cda-forum-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cda-thread-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cda-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cda-thread-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
}

.cda-thread-tags {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.cda-thread-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.cda-thread-answer {
  background: #f8fafc;
  border-left: 3px solid #10b981;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.75rem;
  color: #334155;
}

.cda-mentor-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #059669;
  display: inline-block;
  margin-bottom: 4px;
}

.cda-thread-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.72rem;
  color: #64748b;
}

.cda-upvote-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cda-upvote-btn:hover,
.cda-upvote-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

/* Materials Cards Grid */
.cda-materials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.cda-material-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cda-mat-icon {
  width: 44px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.72rem;
  color: #ffffff;
  flex-shrink: 0;
}

.cda-mat-icon.pdf { background: #ef4444; }
.cda-mat-icon.doc { background: #2563eb; }
.cda-mat-icon.xls { background: #10b981; }

.cda-mat-content {
  flex: 1;
}

.cda-mat-content h5 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.cda-mat-content p {
  font-size: 0.68rem;
  color: #64748b;
  margin-bottom: 4px;
  line-height: 1.35;
}

.cda-mat-meta {
  font-size: 0.65rem;
  color: #94a3b8;
}

.cda-btn-download {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cda-btn-download:hover {
  background: #0c0d2e;
  color: #ffffff;
  border-color: #0c0d2e;
}

/* Placement Drives */
.cda-placement-drives-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cda-placement-drive-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.cda-placement-drive-row:hover {
  background: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cda-company-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  color: #ffffff;
  flex-shrink: 0;
}

.cda-drive-info {
  flex: 1;
}

.cda-drive-info h5 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.cda-drive-info p {
  font-size: 0.68rem;
  color: #64748b;
  margin: 0;
}

.cda-drive-ctc {
  font-weight: 800;
  font-size: 0.85rem;
  color: #059669;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.cda-btn-apply {
  background: #0c0d2e;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cda-btn-apply:hover {
  background: #1a1b4b;
  transform: translateY(-1px);
}

.cda-btn-apply.applied {
  background: #ecfdf5;
  color: #059669;
  cursor: default;
}

.cda-readiness-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Skill Bars */
.cda-skill-bars-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.cda-skill-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cda-skill-label-wrap {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #1e293b;
}

.cda-skill-track {
  height: 7px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.cda-skill-fill {
  height: 100%;
  border-radius: 4px;
}

/* Full Notifications Feed */
.cda-full-notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cda-notif-item.unread {
  border-left: 3.5px solid #2563eb;
}

/* --------------------------------------------------------------------------
   Centerpiece Console (#console): Clean Window Chrome Dashboard
   Clean browser window card with traffic dots, address bar, and status badge.
   Responsive touch-enabled view across Desktop, Tablet, and Mobile screens.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Tablet Landscape (Horizontal View: 960px - 1180px)
   Interactive, Spacious & Beautifully Proportioned Dashboard Window
   -------------------------------------------------------------------------- */
@media (min-width: 960px) and (max-width: 1180px) {
  .console-section {
    overflow-x: clip;
    padding: 35px 0 55px 0;
  }

  #console .console-stage {
    perspective: none !important;
    padding: 0 20px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #console .console-wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  #console .console-container {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    animation: none !important;
    border-radius: 20px !important;
  }

  #console .console-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
  }

  #console .console-address-bar {
    width: 48% !important;
    font-size: 0.78rem !important;
  }

  #console .cda-body {
    display: grid !important;
    grid-template-columns: 185px 1fr !important;
    min-height: 560px !important;
  }

  #console .cda-content {
    max-height: 600px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px !important;
  }

  #console .cda-content::-webkit-scrollbar {
    width: 5px;
  }
  #console .cda-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }

  #console .cda-top-grid {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 14px !important;
  }

  #console .cda-bottom-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr 260px !important;
    gap: 14px !important;
  }

  #console .cda-matrix-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet Portrait (Vertical View: 768px - 959px)
   Specialized Compact Icon-Rail Sidebar & High-Legibility Dashboard Window
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 959px) {
  .console-section {
    overflow-x: clip;
    padding: 30px 0 50px 0;
  }

  #console .console-stage {
    perspective: none !important;
    padding: 0 16px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #console .console-wrapper {
    width: 100% !important;
    max-width: 820px !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  #console .console-container {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    animation: none !important;
    border-radius: 18px !important;
  }

  #console .console-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
  }

  #console .console-address-bar {
    width: 54% !important;
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
  }

  #console .console-status-badge {
    font-size: 0.68rem !important;
  }

  #console .cda-topbar {
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  #console .cda-topbar-center {
    max-width: 260px !important;
    margin: 0 10px !important;
  }

  #console .cda-profile-email {
    display: none !important;
  }

  #console .cda-body {
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    min-height: 540px !important;
  }

  #console .cda-sidebar {
    padding: 12px 6px !important;
    align-items: center;
    width: 58px !important;
  }

  #console .cda-sidebar .cda-collapse-btn {
    display: none !important;
  }

  #console .cda-sidebar .cda-nav-label {
    display: none !important;
  }

  #console .cda-sidebar .cda-nav-item {
    padding: 10px !important;
    justify-content: center !important;
    width: 100% !important;
    border-radius: 10px !important;
    position: relative;
    touch-action: manipulation;
  }

  #console .cda-sidebar .cda-streak-card {
    padding: 8px 4px !important;
    justify-content: center !important;
  }

  #console .cda-sidebar .cda-streak-details {
    display: none !important;
  }

  #console .cda-content {
    max-height: 580px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px !important;
  }

  #console .cda-content::-webkit-scrollbar {
    width: 4px;
  }
  #console .cda-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }

  #console .cda-top-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #console .cda-kpis-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  #console .cda-kpi-card {
    padding: 12px 10px !important;
  }

  #console .cda-kpi-value {
    font-size: 1.28rem !important;
    font-weight: 800 !important;
  }

  #console .cda-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  #console .cda-bottom-grid > div:nth-child(3) {
    grid-column: span 2 !important;
  }

  #console .cda-matrix-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Internal Tab Responsive Rules for Tablet Portrait */
  #console .cda-two-col-grid {
    grid-template-columns: 1fr !important;
  }

  #console .cda-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile View (< 768px): Clean Responsive Window
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .console-section {
    overflow-x: clip;
    padding: 24px 0 44px 0;
  }

  #console .console-stage {
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  #console .console-wrapper {
    width: 100% !important;
    aspect-ratio: auto !important;
    pointer-events: auto !important;
  }

  #console .console-container {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    border-radius: 16px !important;
  }

  #console .console-address-bar {
    display: none !important;
  }

  #console .cda-body {
    grid-template-columns: 1fr !important;
  }

  #console .cda-sidebar {
    display: none !important;
  }

  #console .cda-top-grid,
  #console .cda-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  #console .cda-kpis-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }

  #console .cda-bottom-grid > div:nth-child(3) {
    grid-column: span 1 !important;
  }

  #console .cda-two-col-grid {
    grid-template-columns: 1fr !important;
  }

  #console .cda-metrics-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   4. Partner Campus & Enterprise Marquee Ticker (7 Logos in One View)
   -------------------------------------------------------------------------- */
.partners-section {
  padding: clamp(48px, 4.5vw, 64px) 0;
  border-top: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.partners-section .container {
  max-width: 100%;
  padding: 0 40px;
}

.partners-section::before,
.partners-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.partners-section::before {
  left: 0;
  background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.partners-section::after {
  right: 0;
  background: linear-gradient(270deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.partners-title {
  text-align: center;
  font-size: 0.74rem;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}

.marquee-track {
  display: flex;
  gap: clamp(44px, 5.2vw, 76px);
  align-items: center;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  opacity: 0.85;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;
}

.marquee-item:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.05);
}

.marquee-logo-img {
  height: clamp(32px, 3.6vw, 42px);
  width: auto;
  object-fit: contain;
  display: block;
  filter: contrast(102%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.marquee-logo-cda {
  height: clamp(30px, 3.3vw, 38px);
}

.marquee-logo-cms {
  height: clamp(34px, 3.8vw, 44px);
}

.marquee-logo-rays {
  height: clamp(28px, 3.1vw, 36px);
}

.marquee-item:hover .marquee-logo-img {
  filter: contrast(108%);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   4.5 Brain² AI Section (White Theme matching User Reference Image)
   ========================================================================== */
.brain-hero-section {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(48px, 5.5vh, 68px) 0 clamp(36px, 4.5vh, 54px) 0;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #edf0f5;
  position: relative;
  overflow: hidden;
}

.brain-hero-section > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.brain-hero-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.brain-hero-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brain-hero-brand {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0E1328;
  letter-spacing: -0.03em;
}

.brain-hero-brand sup {
  font-size: 0.55em;
  top: -0.55em;
  color: #2C3570;
  font-weight: 800;
}

.brain-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0E1328;
  line-height: 1.18;
  margin-bottom: 12px;
}

.brain-hero-subtitle {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: #64748b;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 auto 26px auto;
  max-width: 650px;
}

/* Platform Availability Strip */
.brain-platform-strip {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.brain-avail-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #64748b;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.brain-platform-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #475569;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.brain-platform-item:hover {
  color: #0E1328;
  transform: translateY(-1px);
}

/* ==========================================================================
   Section Fluted Glass Gradient Backdrop
   Brand Palette: Official Royal Navy (#0E1328), Midnight (#1D244D), Deep Indigo (#2C3570), 
   Electric Royal Accent (#37428C), Soft Iris (#7A88CE), Brand Mist (#E6EAF8), and Crisp White (#FFFFFF)
   Style: Vertical pleated fluted louvers (47px) with flowing brand gradient animation
   ========================================================================== */
.brain-trio-wrapper {
  position: relative;
  width: 100%;
  margin-top: clamp(24px, 3.5vh, 40px);
}

.brain-glass-backdrop {
  position: absolute;
  top: 60px;
  bottom: 55px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* Feathered top and bottom edge dissolve so it never touches the screen or section edges */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.20) 6%,
    rgba(0, 0, 0, 0.70) 14%,
    rgba(0, 0, 0, 1.0) 24%,
    rgba(0, 0, 0, 1.0) 76%,
    rgba(0, 0, 0, 0.70) 86%,
    rgba(0, 0, 0, 0.20) 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.20) 6%,
    rgba(0, 0, 0, 0.70) 14%,
    rgba(0, 0, 0, 1.0) 24%,
    rgba(0, 0, 0, 1.0) 76%,
    rgba(0, 0, 0, 0.70) 86%,
    rgba(0, 0, 0, 0.20) 94%,
    transparent 100%
  );
}

/* Atmospheric Ambient Flank Glow in Official Brand #0E1328 */
.brain-glass-glow-underlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(
      ellipse 55% 65% at 5% 65%,
      rgba(14, 19, 40, 0.65) 0%,
      rgba(14, 19, 40, 0.45) 26%,
      rgba(14, 19, 40, 0.25) 50%,
      rgba(14, 19, 40, 0.08) 72%,
      transparent 90%
    ),
    radial-gradient(
      ellipse 55% 65% at 95% 65%,
      rgba(14, 19, 40, 0.65) 0%,
      rgba(14, 19, 40, 0.45) 26%,
      rgba(14, 19, 40, 0.25) 50%,
      rgba(14, 19, 40, 0.08) 72%,
      transparent 90%
    ),
    radial-gradient(
      ellipse 70% 45% at 50% 65%,
      rgba(14, 19, 40, 0.22) 0%,
      rgba(14, 19, 40, 0.12) 35%,
      rgba(14, 19, 40, 0.04) 65%,
      transparent 85%
    );
  filter: blur(42px);
  opacity: 0.95;
  animation: brainGlowPulse 10s ease-in-out infinite alternate;
}

@keyframes brainGlowPulse {
  0% {
    transform: scale(0.98);
    opacity: 0.88;
  }
  100% {
    transform: scale(1.02);
    opacity: 1;
  }
}

/* Luminous Flowing Gradient Core in Official Brand #0E1328 and its Versions */
.brain-glass-gradient-core {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(14, 19, 40, 0.15) 12%,
      rgba(14, 19, 40, 0.35) 25%,
      rgba(14, 19, 40, 0.45) 50%,
      rgba(14, 19, 40, 0.35) 75%,
      rgba(14, 19, 40, 0.15) 88%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      #ffffff 0%,
      rgba(14, 19, 40, 0.03) 4%,
      rgba(14, 19, 40, 0.12) 10%,
      rgba(14, 19, 40, 0.28) 18%,
      #0E1328 26%,
      rgba(14, 19, 40, 0.35) 34%,
      rgba(14, 19, 40, 0.10) 42%,
      #ffffff 48%,
      #ffffff 52%,
      rgba(14, 19, 40, 0.10) 58%,
      rgba(14, 19, 40, 0.35) 66%,
      #0E1328 74%,
      rgba(14, 19, 40, 0.28) 82%,
      rgba(14, 19, 40, 0.12) 90%,
      rgba(14, 19, 40, 0.03) 96%,
      #ffffff 100%
    );
  background-size: 100% 100%, 200% 100%;
  animation: brainGlassGradientFlow 14s ease-in-out infinite alternate;
  filter: blur(8px) saturate(130%);
  opacity: 0.94;
}

@keyframes brainGlassGradientFlow {
  0% {
    background-position: 0% 0%, 0% 50%;
  }
  50% {
    background-position: 0% 0%, 50% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 50%;
  }
}

/* High-Fidelity Reeded / Fluted Vertical Pleated Glass Columns (47px wide) */
.brain-glass-flutes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88) 0px,
    rgba(255, 255, 255, 0.45) 2px,
    rgba(255, 255, 255, 0.08) 5px,
    rgba(255, 255, 255, 0.00) 18px,
    rgba(14, 19, 40, 0.06) 28px,
    rgba(14, 19, 40, 0.16) 38px,
    rgba(14, 19, 40, 0.26) 43px,
    rgba(14, 19, 40, 0.36) 45px,
    rgba(14, 19, 40, 0.20) 46px,
    rgba(255, 255, 255, 0.78) 47px
  );
  background-size: 47px 100%;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* Specular Reflection and Micro-Frosted Sheen across full section */
.brain-glass-specular {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.45) 20%,
      transparent 45%,
      transparent 75%,
      rgba(255, 255, 255, 0.35) 90%,
      transparent 100%
    );
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Soft Center Clearing Veil & Dissolves for Ultimate Text Contrast */
.brain-glass-fade-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(
      ellipse 70% 50% at 50% 30%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.75) 45%,
      rgba(255, 255, 255, 0.20) 75%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #ffffff 0%,
      rgba(255, 255, 255, 0.80) 14%,
      rgba(255, 255, 255, 0.20) 32%,
      transparent 50%,
      transparent 76%,
      rgba(255, 255, 255, 0.60) 90%,
      #ffffff 100%
    );
}

/* 3-Column Floating Cards Frame */
.brain-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

.brain-trio-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 22px;
  box-shadow: none !important;
  padding: clamp(18px, 2vh, 22px) clamp(16px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  min-height: clamp(340px, 36vh, 395px);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.brain-trio-card:hover {
  transform: translateY(-8px);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: none !important;
}

.brain-trio-head {
  margin-top: auto;
  margin-bottom: 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
}

.brain-trio-tag {
  font-family: var(--font-heading, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0E1328;
  margin-bottom: 8px;
  text-align: center;
  width: 100%;
}

.brain-trio-desc {
  font-size: clamp(0.82rem, 0.9vw, 0.88rem);
  line-height: 1.52;
  color: #64748b;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  max-width: 330px;
  width: 100%;
  min-height: 5.6em;
}

.brain-trio-desc sup {
  font-size: 0.6em;
  top: -0.45em;
  color: #2C3570;
}

/* Stages: Exact High-Fidelity Linear CAD Stages (Expanded Size & Clean Transparent Canvas) */
.brain-trio-stage {
  flex: 1;
  width: 100%;
  min-height: clamp(165px, 18vh, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border-radius: 16px;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.linear-cad-stage {
  position: relative;
  width: 100%;
  height: clamp(165px, 18vh, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
}

.linear-cad-glow {
  display: none !important;
}

.brain-trio-card:hover .linear-cad-glow {
  display: none !important;
}

/* Linear CAD Graphics (Clean, High-Res & Static) */
.linear-cad-img {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
  max-width: 92%;
  max-height: clamp(190px, 23vh, 235px);
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: none !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.brain-trio-card:hover .linear-cad-img {
  transform: translateY(-4px) scale(1.02);
  filter: none !important;
}

.isometric-canvas-wrap {
  width: 100%;
  height: clamp(150px, 18vh, 195px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
}

.isometric-vector-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(14, 19, 40, 0.05));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.brain-trio-card:hover .isometric-vector-svg {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 10px 24px rgba(44, 53, 112, 0.12));
}

/* ISOMETRIC CAD WIREFRAME KEYFRAMES */
@keyframes isoCableLaserTravel {
  0% { stroke-dashoffset: 134; }
  100% { stroke-dashoffset: 0; }
}

.iso-cable-laser {
  animation: isoCableLaserTravel 2s linear infinite;
  will-change: stroke-dashoffset;
}

.brain-trio-card:hover .iso-cable-laser {
  animation-duration: 1.1s;
}

@keyframes isoFanSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.iso-fan-rotor-blades {
  transform-origin: 173px 88px;
  animation: isoFanSpin 3.5s linear infinite;
  will-change: transform;
}

.brain-trio-card:hover .iso-fan-rotor-blades {
  animation-duration: 1.2s;
}

@keyframes isoGearSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.iso-gear-spokes {
  transform-origin: 192px 84px;
  animation: isoGearSpin 12s linear infinite;
  will-change: transform;
}

.brain-trio-card:hover .iso-gear-spokes {
  animation-duration: 4s;
}

@keyframes isoLedPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.iso-status-led {
  animation: isoLedPulse 2s ease-in-out infinite;
  transform-origin: 196px 54px;
}

/* Card 3: Security Shield Stage - Clean, Borderless, Floating */
.security-shield-stage {
  width: 100%;
  height: clamp(150px, 18vh, 195px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  perspective: 800px;
}

.security-shield-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Idle Breathing Animations */
@keyframes shieldIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes badgeTrFloat {
  0%, 100% { transform: translate(222px, 50px) rotate(-8deg); }
  50% { transform: translate(222px, 45px) rotate(-7deg); }
}

@keyframes badgeBlFloat {
  0%, 100% { transform: translate(44px, 160px) rotate(8deg); }
  50% { transform: translate(44px, 165px) rotate(9deg); }
}

.sec-shield-group {
  transition: filter 0.45s ease;
}

.sec-lock-group {
  transform: none !important;
}

.sec-aura-glow {
  transition: opacity 0.45s ease;
}

/* Background Concentric Round Elements & Radar Pulse */
@keyframes radarBreathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.16;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.32;
  }
}

.sec-bg-rounds {
  transform-origin: 190px 130px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

.sec-radar-ring-2 {
  transform-origin: 190px 130px;
  animation: radarBreathe 3.6s ease-in-out infinite;
}

.brain-trio-card:hover .sec-bg-rounds,
.security-shield-stage:hover .sec-bg-rounds {
  transform: scale(1.04);
}

.brain-trio-card:hover .sec-radar-ring-2,
.security-shield-stage:hover .sec-radar-ring-2 {
  stroke: #2563eb;
  animation-duration: 1.8s;
}

/* HOVER: NO MOVEMENT OF LOCKER OR SHIELD */
.brain-trio-card:hover .sec-shield-group,
.security-shield-stage:hover .sec-shield-group,
.brain-trio-card:hover .sec-lock-group,
.security-shield-stage:hover .sec-lock-group {
  transform: none !important;
  animation: none !important;
  filter: drop-shadow(0 14px 28px rgba(44, 53, 112, 0.24));
}

/* GRADIENT COLOR FILL ANIMATION ON HOVER */
.sec-lock-fill-bar {
  y: 157px;
  height: 0px;
  transition: y 0.55s cubic-bezier(0.16, 1, 0.3, 1), height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec-lock-gradient-fill {
  clip-path: url(#lockFillClip);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sec-core-glow-layer {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active on Hover: Gradient Fluidly Fills the Locker Icon */
.brain-trio-card:hover .sec-lock-fill-bar,
.security-shield-stage:hover .sec-lock-fill-bar {
  y: 104px;
  height: 56px;
}

.brain-trio-card:hover .sec-lock-gradient-fill,
.security-shield-stage:hover .sec-lock-gradient-fill {
  opacity: 1;
}

.brain-trio-card:hover .sec-core-glow-layer,
.security-shield-stage:hover .sec-core-glow-layer {
  opacity: 0.65;
}

/* Card 3: Linear-Style Security Scanner & Laser Vector Animations */
@keyframes secLaserTravel {
  0% { stroke-dashoffset: 325; }
  100% { stroke-dashoffset: 0; }
}

@keyframes secScannerVerticalSweep {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(68px);
    opacity: 1;
  }
}

@keyframes secRadarPing {
  0% {
    r: 14px;
    opacity: 0.85;
    stroke: #38bdf8;
  }
  60% {
    opacity: 0.35;
    stroke: #60a5fa;
  }
  100% {
    r: 48px;
    opacity: 0;
    stroke: #2563eb;
  }
}

.sec-laser-core-loop {
  animation: secLaserTravel 3.2s linear infinite;
  will-change: stroke-dashoffset;
}

.sec-scanner-beam-group {
  animation: secScannerVerticalSweep 3s ease-in-out infinite;
  will-change: transform;
}

.sec-lock-radar-pulse.pulse-1 {
  animation: secRadarPing 2.8s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
}

.sec-lock-radar-pulse.pulse-2 {
  animation: secRadarPing 2.8s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
  animation-delay: 1.4s;
}

.brain-trio-card:hover .sec-laser-core-loop {
  animation-duration: 1.6s;
  stroke: #67e8f9;
}

.brain-trio-card:hover .sec-scanner-beam-group {
  animation-duration: 1.5s;
}

.brain-feature-img-wrap {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brain-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.brain-trio-card:hover .brain-feature-img {
  transform: translateY(-5px) scale(1.05);
  filter: drop-shadow(0 12px 24px rgba(44, 53, 112, 0.14));
}

/* Card 2: Linear-Style AI Intelligence Workflow Stage */
.ai-workflow-stage {
  width: 100%;
  height: clamp(150px, 18vh, 195px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

.ai-workflow-svg {
  width: 100%;
  height: 100%;
  max-width: 360px;
  overflow: visible;
  filter: drop-shadow(0 6px 16px rgba(14, 19, 40, 0.05));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.brain-trio-card:hover .ai-workflow-svg {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 14px 28px rgba(44, 53, 112, 0.16));
}

/* Linear-Style Circuit Laser Streamers */
@keyframes aiCircuitTravel {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

@keyframes aiOrbitTravelPrimary {
  0% { stroke-dashoffset: 236; }
  100% { stroke-dashoffset: 0; }
}

@keyframes aiOrbitTravelCounter {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 212; }
}

@keyframes aiSonarExpand {
  0% {
    r: 28px;
    opacity: 0.85;
    stroke: #38bdf8;
  }
  60% {
    opacity: 0.35;
    stroke: #818cf8;
  }
  100% {
    r: 88px;
    opacity: 0;
    stroke: #a855f7;
  }
}

@keyframes aiBeaconPulse {
  0% { r: 4.2px; opacity: 0.9; stroke: #f59e0b; }
  100% { r: 12px; opacity: 0; stroke: #f59e0b; }
}

@keyframes aiPacketFlow {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

@keyframes aiStarGlowBreathe {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.95));
    transform: scale(1.08);
  }
}

.ai-circuit-laser {
  animation: aiCircuitTravel 2.8s linear infinite;
  will-change: stroke-dashoffset;
}

.ai-circuit-laser.cl-1 { animation-delay: 0s; }
.ai-circuit-laser.cl-2 { animation-delay: 0.7s; }
.ai-circuit-laser.cl-3 { animation-delay: 1.4s; }
.ai-circuit-laser.cl-4 { animation-delay: 2.1s; }

.ai-orbit-laser-primary {
  animation: aiOrbitTravelPrimary 3s linear infinite;
  will-change: stroke-dashoffset;
}

.ai-orbit-laser-counter {
  animation: aiOrbitTravelCounter 3.6s linear infinite;
  will-change: stroke-dashoffset;
}

.ai-sonar-pulse.pulse-1 {
  animation: aiSonarExpand 3s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
}

.ai-sonar-pulse.pulse-2 {
  animation: aiSonarExpand 3s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
  animation-delay: 1.5s;
}

.ai-beacon-ring {
  animation: aiBeaconPulse 2s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
  transform-origin: 34px 54px;
}

.ai-packet {
  animation: aiPacketFlow 2.4s ease-in-out infinite;
}
.ai-packet.pk-in1 { animation-delay: 0.2s; }
.ai-packet.pk-in2 { animation-delay: 0.8s; }
.ai-packet.pk-in3 { animation-delay: 1.4s; }
.ai-packet.pk-in4 { animation-delay: 2.0s; }

.ai-center-star-group {
  transform-origin: 180px 110px;
  animation: aiStarGlowBreathe 3s ease-in-out infinite;
}

/* Card Hover Acceleration */
.brain-trio-card:hover .ai-circuit-laser {
  animation-duration: 1.5s;
}

.brain-trio-card:hover .ai-orbit-laser-primary {
  animation-duration: 1.6s;
}

.brain-trio-card:hover .ai-orbit-laser-counter {
  animation-duration: 1.9s;
}

.brain-trio-card:hover .ai-center-star-group {
  animation-duration: 1.8s;
}

/* Card 1: Context Windows Deck */
.context-window-deck {
  position: relative;
  width: 100%;
  max-width: 270px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.context-window {
  position: absolute;
  width: 210px;
  height: 125px;
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.35s ease;
}

.win-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}

.win-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.win-dots span:nth-child(1) { background: #ff5f56; }
.win-dots span:nth-child(2) { background: #ffbd2e; }
.win-dots span:nth-child(3) { background: #27c93f; }

.context-window.win-back {
  top: 6px;
  right: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  opacity: 0.55;
  transform: scale(0.92);
  z-index: 1;
}

.context-window.win-mid {
  top: 18px;
  right: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  opacity: 0.8;
  transform: scale(0.96);
  z-index: 2;
}

.context-window.win-front {
  top: 30px;
  right: 36px;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  box-shadow: 0 12px 28px rgba(14, 19, 40, 0.08), 0 2px 6px rgba(14, 19, 40, 0.04);
  z-index: 3;
}

.win-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.win-line {
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
}

.win-line.line-1 { width: 75%; }
.win-line.line-2 { width: 90%; }
.win-line.line-3 { width: 55%; }

.context-flower-pill {
  position: absolute;
  left: 0;
  top: 50px;
  width: 58px;
  height: 38px;
  border-radius: 999px;
  background: #0E1328;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 20px rgba(14, 19, 40, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: transform 0.35s ease;
}

.brain-trio-card:hover .context-flower-pill {
  transform: scale(1.1) translateX(4px);
}

/* Card 2: Intelligence Models Picker */
.models-picker-card {
  width: 100%;
  max-width: 250px;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(14, 19, 40, 0.08), 0 2px 6px rgba(14, 19, 40, 0.03);
  padding: 12px 14px;
}

.models-picker-header {
  font-size: 0.76rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 8px;
  padding: 0 6px;
}

.models-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.model-row:hover:not(.active) {
  background: #f8fafc;
}

.model-row.active {
  background: #f1f5f9;
}

.model-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.model-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.model-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0E1328;
}

.model-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card 3: Personality Config Inspector */
.personality-config-card {
  width: 100%;
  max-width: 275px;
  background: #f8fafc;
  border: 1.5px solid #edf2f7;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(14, 19, 40, 0.06);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.config-table-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #edf2f7;
}

.config-table-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.config-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.77rem;
  font-weight: 700;
  color: #0E1328;
  flex-shrink: 0;
}

.config-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  font-weight: 500;
  color: #059669;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 150px;
}

/* iPad Tablet Range: Keep all 3 cards in ONE line */
@media (min-width: 768px) and (max-width: 1024px) {
  .brain-hero-section {
    min-height: auto;
    padding: 64px 0;
  }
  .brain-trio-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .brain-trio-card {
    padding: 18px 14px !important;
    min-height: 330px !important;
    border-radius: 18px !important;
  }
  .brain-trio-tag {
    font-family: var(--font-heading, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
    font-size: 0.80rem !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .brain-trio-desc {
    font-size: 0.8rem !important;
    line-height: 1.44 !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .ai-siri-stage,
  .custom-pipeline-stage,
  .security-shield-stage {
    height: 145px !important;
    min-height: 145px !important;
  }
  .ai-siri-orb {
    width: 110px !important;
    height: 110px !important;
  }
}

/* Mobile Phones Only (< 768px) */
@media (max-width: 767px) {
  .brain-hero-section {
    min-height: auto;
    padding: 50px 0;
  }
  .brain-trio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .brain-hero-title {
    font-size: clamp(1.5rem, 5.2vw, 1.95rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    font-weight: 400 !important;
    color: #0E1328 !important;
    margin-bottom: 12px !important;
  }
  .brain-hero-subtitle {
    font-size: 0.94rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    max-width: 460px !important;
    margin: 0 auto 24px auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. Interactive Lifecycle Pipeline
   -------------------------------------------------------------------------- */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pipeline-step-card {
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.08);
  border-radius: var(--radius-lg);
  padding: 26px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  cursor: pointer;
}

.pipeline-step-card:hover, .pipeline-step-card.active {
  border-color: var(--logo-base);
  background: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -10px rgba(14, 19, 40, 0.18);
}

.step-num-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--logo-base);
  margin: 0 auto 16px auto;
  border: 1px solid rgba(14, 19, 40, 0.12);
}

.pipeline-step-card.active .step-num-badge {
  background: var(--gradient-logo);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(14, 19, 40, 0.3);
}

.step-icon-large {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.step-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--logo-base);
}

.step-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-tag-pill {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Bento Grid Features
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-span-8 { grid-column: span 8; }
.bento-span-4 { grid-column: span 4; }

.bento-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  font-weight: 700;
}

.bento-badge.cyan {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.bento-badge.violet {
  background: rgba(14, 19, 40, 0.06);
  color: var(--logo-base);
  border: 1px solid rgba(14, 19, 40, 0.18);
}

.bento-badge.emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.bento-badge.amber {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.bento-card h3 {
  font-size: 1.65rem;
  margin-bottom: 12px;
  color: var(--logo-base);
}

.bento-card p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.interactive-widget-box {
  background: #f8fafc;
  border: 1px solid rgba(14, 19, 40, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
}

.code-mock-box {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.6;
}

.code-keyword { color: #dc2626; font-weight: 700; }
.code-fn { color: var(--logo-base); font-weight: 700; }
.code-string { color: #059669; }
.code-var { color: #d97706; }

/* --------------------------------------------------------------------------
   7. Interactive Placement ROI Calculator
   -------------------------------------------------------------------------- */
.calculator-card {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.slider-group {
  margin-bottom: 30px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.slider-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1e293b;
}

.slider-val {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--logo-base);
}

.range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-logo);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.4);
  border: 2px solid #ffffff;
  transition: transform var(--transition-fast);
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Calculator Output Panel */
.calc-results-box {
  background: #f8fafc;
  border: 1px solid rgba(14, 19, 40, 0.08);
  border-radius: var(--radius-lg);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-metric {
  border-bottom: 1px solid rgba(14, 19, 40, 0.08);
  padding-bottom: 20px;
}
.result-metric:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.result-metric-label {
  font-size: 0.84rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.result-metric-number {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--logo-base);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   8. Comparison Table
   -------------------------------------------------------------------------- */
.comparison-table-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th {
  padding: 22px 28px;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 800;
  border-bottom: 1px solid rgba(14, 19, 40, 0.08);
  background: #f8fafc;
}

.comparison-table th.highlight-col {
  background: rgba(14, 19, 40, 0.06);
  color: var(--logo-base);
  border-bottom: 1px solid rgba(14, 19, 40, 0.16);
}

.comparison-table td {
  padding: 20px 28px;
  font-size: 0.96rem;
  border-bottom: 1px solid #f1f5f9;
}

.comparison-table td.highlight-col {
  background: rgba(14, 19, 40, 0.03);
  font-weight: 600;
  color: var(--logo-base);
}

.comparison-table tr:hover td {
  background: #fafafa;
}
.comparison-table tr:hover td.highlight-col {
  background: rgba(14, 19, 40, 0.06);
}

/* --------------------------------------------------------------------------
   9. Pricing
   -------------------------------------------------------------------------- */
.pricing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 50px;
}

.pricing-toggle-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-full);
  padding: 4px;
  display: flex;
  cursor: pointer;
}

.pricing-opt {
  padding: 8px 22px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.pricing-opt.active {
  background: #ffffff;
  color: var(--logo-base);
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.08);
}

.save-badge {
  font-size: 0.78rem;
  padding: 4px 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
  border-radius: var(--radius-full);
  font-weight: 800;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.pricing-card {
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-xl);
}

.pricing-card.featured {
  background: #ffffff;
  border: 2px solid var(--logo-base);
  box-shadow: 0 20px 50px -10px rgba(14, 19, 40, 0.22);
  transform: scale(1.03);
}

.pricing-header h4 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--logo-base);
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.pricing-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--logo-base);
}

.pricing-period {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.pricing-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
  font-size: 0.94rem;
}

.pricing-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #334155;
}

.pricing-features-list .check-icon {
  color: var(--logo-base);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   10. FAQ Section (Pure Solid Background — No Starfield or Background Elements)
   -------------------------------------------------------------------------- */
#faq,
.faq-section {
  position: relative;
  z-index: 5;
  background: #ffffff !important;
  background-color: #ffffff !important;
  overflow: hidden;
}

#faq::before,
#faq::after,
.faq-section::before,
.faq-section::after {
  display: none !important;
  content: none !important;
}

.faq-wrap {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Laptop and up: FAQ items in two columns */
@media (min-width: 1024px) {
  .faq-wrap {
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 24px;
  }
}

.faq-item {
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item:hover {
  border-color: rgba(14, 19, 40, 0.2);
}

.faq-trigger {
  width: 100%;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--logo-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-icon {
  font-size: 1.3rem;
  transition: transform var(--transition-fast);
  color: var(--logo-base);
  font-weight: bold;
}

.faq-answer {
  padding: 0 26px 22px 26px;
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.65;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   11. Modal (Demo Booking)
   -------------------------------------------------------------------------- */
dialog.demo-modal {
  margin: auto;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.12);
  border-radius: var(--radius-xl);
  padding: 32px;
  max-width: 420px;
  width: 90vw;
  color: var(--logo-base);
  box-shadow: 0 25px 70px rgba(14, 19, 40, 0.25);
  outline: none;
}

dialog::backdrop {
  background: rgba(14, 19, 40, 0.5);
  backdrop-filter: blur(8px);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-close-btn {
  background: #f1f5f9;
  border: none;
  color: #475569;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: #e2e8f0;
  color: var(--logo-base);
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--logo-base);
  margin-bottom: 6px;
}

.form-input, .form-select {
  width: 100%;
  padding: 13px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  color: var(--logo-base);
  font-family: var(--font-sans);
  font-size: 0.96rem;
  transition: all var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--logo-base);
  box-shadow: 0 0 0 3px rgba(14, 19, 40, 0.15);
}

/* Toast */
.toast-notice {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 40, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--logo-base);
  font-size: 0.94rem;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(14, 19, 40, 0.15);
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   12. Minimalist Studio-Style Footer with Massive White Logo
   -------------------------------------------------------------------------- */
.footer,
.studio-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0E1328 !important;
  background-color: #0E1328 !important;
  color: #f8fafc;
  padding: 100px 0 60px 0;
  margin-top: 0 !important;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.studio-footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Top 3-Column Grid: Nav | Center Contacts/Socials | Address */
.studio-footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 70px;
}

/* Col 1: Nav Links */
.studio-col-nav {
  text-align: left;
}

.studio-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.studio-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.studio-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* Col 2: Center Follow Us & Contact */
.studio-col-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.studio-col-heading {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.studio-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.studio-contact-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.studio-contact-link:hover {
  color: #ffffff;
}

/* Squircle Social Icons */
.studio-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.studio-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-social-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Col 3: Address */
.studio-col-address {
  text-align: right;
}

.studio-address-text {
  font-style: normal;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* Middle Row: Copyright & Legal */
.studio-footer-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 30px 0 45px 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

.studio-copyright {
  font-family: var(--font-sans);
}

.studio-legal-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.studio-legal-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.studio-legal-link:hover {
  color: #ffffff;
}

/* Bottom Giant Brand Display (Replaces STUDIO with White Logo) */
.studio-massive-brand {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

.studio-massive-brand-link {
  display: block;
  width: 100%;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.studio-massive-brand-link:hover {
  transform: scale(1.012);
  opacity: 0.95;
}

.studio-massive-logo-img {
  width: 100%;
  max-width: 1240px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

/* Responsive Breakpoints */
@media (max-width: 860px) {
  .footer,
  .studio-footer {
    padding: 70px 0 40px 0;
    margin-top: 0 !important;
  }

  .studio-footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    margin-bottom: 50px;
  }

  .studio-col-nav,
  .studio-col-center,
  .studio-col-address {
    text-align: center;
    align-items: center;
  }

  .studio-link:hover {
    transform: none;
  }

  .studio-footer-middle {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px 0 32px 0;
  }

  .studio-legal-links {
    gap: 24px;
    justify-content: center;
  }

  .studio-massive-logo-img {
    max-height: 120px;
  }
}

/* --------------------------------------------------------------------------
   8. ClickUp-Style AI Brain² Section (White Theme + Hover Animations)
   -------------------------------------------------------------------------- */
.brain-section {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: var(--section-spacing, 90px) 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
}

.brain-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 54px auto;
}

.features-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #475569;
  margin-bottom: 16px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.features-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2C3570;
  box-shadow: 0 0 8px #2C3570;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(44, 53, 112, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(44, 53, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(44, 53, 112, 0); }
}

.brain-title {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0E1328;
  line-height: 1.18;
  margin-bottom: 12px;
}

.brain-title-line {
  display: block;
}

@media (max-width: 768px) {
  .brain-title-line {
    display: inline;
  }
}

.brain-title sup {
  font-size: 0.52em;
  top: -0.6em;
  font-weight: 800;
  color: #2C3570;
}

.brain-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  font-weight: 450;
  line-height: 1.5;
}

/* 3x2 Grid of Floating Cards Matching Reference Image */
.brain-grid-frame {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.brain-card {
  padding: 28px 24px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  background: #ffffff;
  border: 1px solid #edf0f5;
  border-radius: 22px;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  transition: none;
}

.brain-card:hover {
  transform: none;
  border-color: #edf0f5;
  box-shadow: none !important;
  background: #ffffff;
}

/* Card Visual Stage (Upper Section - Matching Reference Layout) */
.brain-visual-stage {
  order: 1;
  flex: none;
  width: 100%;
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Card Content (Lower Section - Matching Reference Layout) */
.brain-card-content {
  order: 2;
  margin-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.brain-card-tag {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #0E1328;
  margin-bottom: 6px;
  line-height: 1.35;
}

.brain-card-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #64748b;
  font-weight: 400;
  margin: 0;
}

.brain-card-desc sup {
  font-size: 0.6em;
  top: -0.45em;
  color: #2C3570;
}

/* Stage Background Textures Matching Reference Image Cards */
/* Card 1: Assignment Tracker (Subtle floating specks / ambient points) */
.assign-visual-stage::before {
  content: "";
  position: absolute;
  inset: -10px;
  background-image: 
    radial-gradient(circle at 16% 20%, rgba(14, 19, 40, 0.14) 1.5px, transparent 1.5px),
    radial-gradient(circle at 84% 24%, rgba(14, 19, 40, 0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle at 12% 76%, rgba(14, 19, 40, 0.1) 1.5px, transparent 1.5px),
    radial-gradient(circle at 88% 82%, rgba(14, 19, 40, 0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle at 50% 10%, rgba(44, 53, 112, 0.18) 1.8px, transparent 1.8px),
    radial-gradient(circle at 25% 45%, rgba(14, 19, 40, 0.08) 1.2px, transparent 1.2px),
    radial-gradient(circle at 75% 55%, rgba(14, 19, 40, 0.08) 1.2px, transparent 1.2px);
  pointer-events: none;
  z-index: 0;
}

/* Card 2: Online Class (Neat Dot Matrix Pattern Matching Reference Card 2) */
.drum-visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(14, 19, 40, 0.09) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Card 3: Student Admin (Subtle Micro Grid / Tech Traces Matching Reference Card 3) */
.brain-card#card-multiplayer .brain-visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(14, 19, 40, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 19, 40, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 45%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at center, black 45%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* Card 4: Attendance (Soft Radial Depth Glow behind Layered Schedule Cards) */
.attend-visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 25%, rgba(44, 53, 112, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Card 5: Study Materials (Dot Matrix Pattern around Radial Network Mesh) */
.study-visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(14, 19, 40, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 45%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 45%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Card 6: Placement (Background elements removed per user request) */
.placement-visual-stage::before {
  display: none !important;
}

/* ==========================================================================
   Ekuator Logo Badge (Dark Icon with Horizontal 360° Rotate on Hover)
   ========================================================================== */
.dark-logo-badge {
  width: 28px;
  height: 28px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  flex-shrink: 0;
  transition: transform 0.4s ease, filter 0.4s ease;
  cursor: pointer;
  perspective: 500px;
  transform-style: preserve-3d;
}

.dark-logo-badge.small {
  width: 20px;
  height: 20px;
  padding: 0;
  box-shadow: none;
}

.dark-logo-badge img,
.circuit-center-logo img,
.radar-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* Horizontal 3D rotation animation: spins horizontally around Y-axis when hovered */
.dark-logo-badge:hover img,
.circuit-center-logo:hover img,
.radar-logo-badge:hover img,
.brain-card:hover .dark-logo-badge img,
.brain-card:hover .circuit-center-logo img,
.brain-card:hover .radar-logo-badge img {
  transform: perspective(400px) rotateY(360deg);
}

.brain-card:hover .dark-logo-badge,
.dark-logo-badge:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.15));
}

/* ==========================================================================
   CARD 1: ASSIGNMENT TRACKER (Dashboard Submission Card + Floating 'View Dashboard' Pill & Cursor)
   ========================================================================== */
.assign-visual-stage {
  position: relative;
  width: 100%;
  min-height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assign-backdrop-glow {
  position: absolute;
  width: 230px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 53, 112, 0.22) 0%, rgba(29, 36, 77, 0.1) 50%, transparent 75%);
  filter: blur(24px);
  opacity: 0.65;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.brain-card#card-memory:hover .assign-backdrop-glow {
  opacity: 0.95;
  transform: scale(1.15);
}

.assign-widget-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Floating "View Dashboard" Pill & Cursor Pointer */
.assign-floating-wrap {
  position: relative;
  margin-bottom: -15px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assign-pill-btn {
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 24px -2px rgba(44, 53, 112, 0.45), 0 4px 10px rgba(14, 19, 40, 0.25);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assign-pill-btn:hover {
  background: linear-gradient(135deg, #37428c 0%, #2C3570 100%);
  box-shadow: 0 14px 30px -2px rgba(44, 53, 112, 0.6), 0 6px 14px rgba(14, 19, 40, 0.35);
  transform: translateY(-2px) scale(1.03);
}

.assign-cursor-pointer {
  position: absolute;
  right: -10px;
  bottom: -12px;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 3px 6px rgba(14, 19, 40, 0.25));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brain-card#card-memory:hover .assign-cursor-pointer {
  transform: translate(-3px, -3px) scale(1.08);
}

.brain-card#card-memory:hover .assign-pill-btn {
  box-shadow: 0 14px 30px -2px rgba(44, 53, 112, 0.55), 0 6px 14px rgba(14, 19, 40, 0.35);
  transform: translateY(-1px);
}

/* Dashboard Preview Card */
.assign-dash-card {
  position: relative;
  z-index: 3;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 20px;
  padding: 24px 18px 16px 18px;
  box-shadow: 0 14px 34px -8px rgba(14, 19, 40, 0.08), 0 4px 12px rgba(14, 19, 40, 0.03);
  overflow: hidden;
  transition: all 0.35s ease;
}

.brain-card#card-memory:hover .assign-dash-card {
  border-color: #e2e8f0;
  box-shadow: 0 18px 40px -8px rgba(14, 19, 40, 0.12), 0 4px 14px rgba(44, 53, 112, 0.18);
}

/* Dashboard Header */
.assign-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.assign-dash-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0E1328;
  letter-spacing: -0.01em;
}

/* 3 Checklist Rows */
.assign-dash-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assign-dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  transition: transform 0.25s ease;
  cursor: pointer;
}

.assign-dash-row:hover {
  transform: translateX(3px);
}

.assign-row-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.assign-dash-row:hover .assign-row-dot {
  background: #f0f4fa;
  border-color: #2C3570;
}

.assign-row-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2f7 0%, #f8fafc 100%);
  border: 1px solid #f1f5f9;
  flex: 1;
}

.assign-row-bar.bar-long {
  max-width: 155px;
}

.assign-row-bar.bar-medium {
  max-width: 135px;
}

.assign-row-bar.bar-short {
  max-width: 115px;
}

.assign-row-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(44, 53, 112, 0.4);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.assign-dash-row:hover .assign-row-check {
  transform: scale(1.15);
  filter: brightness(1.1);
}

/* Subtle Bottom Card Fade */
.assign-card-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%);
  pointer-events: none;
}

/* ==========================================================================
   CARD 2: ONLINE CLASS (3D Vertical Rolling Drum Carousel - White Theme)
   ========================================================================== */
.drum-visual-stage {
  position: relative;
  min-height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

.drum-carousel-container {
  position: relative;
  width: 100%;
  max-width: 250px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  transform-style: preserve-3d;
}

/* Inward Indicator Arrows (Fixed in Center Row flanking the Active Tool) */
.drum-pointer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.18));
}

.drum-pointer-arrow.left-pointer {
  left: 12px;
  animation: nudgeLeft 1.8s ease-in-out infinite alternate;
}

.drum-pointer-arrow.right-pointer {
  right: 12px;
  animation: nudgeRight 1.8s ease-in-out infinite alternate;
}

@keyframes nudgeLeft {
  0% { transform: translateY(-50%) translateX(0px); opacity: 0.85; }
  100% { transform: translateY(-50%) translateX(3px); opacity: 1; }
}

@keyframes nudgeRight {
  0% { transform: translateY(-50%) translateX(0px); opacity: 0.85; }
  100% { transform: translateY(-50%) translateX(-3px); opacity: 1; }
}

.drum-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Drum Pill Items */
.drum-pill-item {
  position: absolute;
  width: 154px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
              opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
              background 0.5s ease, 
              border-color 0.5s ease, 
              box-shadow 0.5s ease, 
              color 0.5s ease;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
}

.drum-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drum-pill-label {
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* 5 Slot Positions in the 3D Vertical Cylinder */
/* Slot -2: Far Top (Exiting upwards) */
.drum-pill-item.slot-top-far {
  transform: translateY(-82px) scale(0.64) rotateX(30deg);
  opacity: 0.15;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  z-index: 1;
  pointer-events: none;
}

/* Slot -1: Upper Slot (Just moved on top) */
.drum-pill-item.slot-top {
  transform: translateY(-44px) scale(0.82) rotateX(16deg);
  opacity: 0.55;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  z-index: 3;
}

/* Slot 0: CENTER ACTIVE SLOT (Glowing Gradient Border, Full Opacity, Focused) */
.drum-pill-item.slot-center {
  transform: translateY(0px) scale(1.0) rotateX(0deg);
  opacity: 1;
  color: #0E1328;
  font-weight: 700;
  z-index: 6;
  background: #ffffff;
  border: 1.5px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
    linear-gradient(#ffffff, #ffffff), 
    linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  box-shadow: 0 8px 24px rgba(44, 53, 112, 0.28), 0 2px 6px rgba(14, 19, 40, 0.05);
}

/* Slot 1: Lower Slot (Next in line to move up to center) */
.drum-pill-item.slot-bottom {
  transform: translateY(44px) scale(0.82) rotateX(-16deg);
  opacity: 0.55;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  z-index: 3;
}

/* Slot 2: Far Bottom (Entering from below) */
.drum-pill-item.slot-bottom-far {
  transform: translateY(82px) scale(0.64) rotateX(-30deg);
  opacity: 0.15;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  z-index: 1;
  pointer-events: none;
}

.drum-pill-item:hover:not(.slot-center) {
  opacity: 0.9;
  background: #f8fafc;
  color: #0f172a;
}

/* ==========================================================================
   CARD 3: STUDENT ADMIN (3-Tier White Fanning Role Cards)
   ========================================================================== */
.brain-deck-container {
  position: relative;
  width: 100%;
  max-width: 250px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brain-user-card {
  position: absolute;
  width: 100%;
  max-width: 240px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.brain-user-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brain-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}

.brain-user-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0e1328;
  line-height: 1.2;
}

.brain-user-live {
  font-size: 0.62rem;
  color: #2C3570;
  font-weight: 700;
  line-height: 1.2;
}

.brain-user-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
}

.brain-user-ring.active {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #2C3570;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(44, 53, 112, 0.4);
}

.brain-ring-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  box-shadow: 0 0 6px #2C3570;
}

.card-dev {
  transform: translateY(-22px) scale(0.9);
  z-index: 1;
  opacity: 0.65;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.card-strat {
  transform: translateY(-10px) scale(0.95);
  z-index: 2;
  opacity: 0.85;
  background: #ffffff;
  border-color: #e2e8f0;
}

.card-designer {
  transform: translateY(12px) scale(1);
  z-index: 3;
  opacity: 1;
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -4px rgba(14, 19, 40, 0.09);
}

.brain-card#card-multiplayer:hover .card-dev {
  transform: translateY(-38px) scale(0.94);
  opacity: 0.95;
  background: #ffffff;
  box-shadow: 0 8px 20px -4px rgba(14, 19, 40, 0.08);
}

.brain-card#card-multiplayer:hover .card-strat {
  transform: translateY(-4px) scale(0.98);
  opacity: 0.98;
  background: #ffffff;
  box-shadow: 0 10px 24px -4px rgba(14, 19, 40, 0.09);
}

.brain-card#card-multiplayer:hover .card-designer {
  transform: translateY(32px) scale(1.03);
  box-shadow: 0 16px 32px -6px rgba(44, 53, 112, 0.25);
  border-color: #2C3570;
}

/* ==========================================================================
   CARD 4: ATTENDANCE (Stacked Recurring Schedule Card in Image & Ekuator Style)
   ========================================================================== */
.attend-visual-stage {
  padding-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attend-stack-container {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

/* Layered Ghost Card Deck (Stacked behind top - matching image depth) */
.attend-ghost-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.attend-ghost-2 {
  top: -15px;
  width: 82%;
  height: 28px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.65);
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.04);
  z-index: 1;
}

.attend-ghost-1 {
  top: -8px;
  width: 91%;
  height: 28px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
  z-index: 2;
}

/* Hover Fanning / Lift Animation on Stack */
.brain-card#card-apps:hover .attend-ghost-2 {
  top: -21px;
  width: 85%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 -6px 20px rgba(44, 53, 112, 0.15), 0 -2px 8px rgba(14, 19, 40, 0.04);
}

.brain-card#card-apps:hover .attend-ghost-1 {
  top: -11px;
  width: 94%;
  background: #ffffff;
  box-shadow: 0 -5px 18px rgba(14, 19, 40, 0.06);
}

/* Foreground Attendance Schedule Card */
.attend-schedule-card {
  position: relative;
  z-index: 3;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 20px;
  padding: 15px 16px;
  box-shadow: 0 14px 32px -8px rgba(14, 19, 40, 0.08), 0 4px 12px rgba(14, 19, 40, 0.03);
  transition: all 0.35s ease;
}

.brain-card#card-apps:hover .attend-schedule-card {
  border-color: #e2e8f0;
  box-shadow: 0 18px 38px -8px rgba(14, 19, 40, 0.11), 0 4px 14px rgba(44, 53, 112, 0.15);
  transform: translateY(-2px);
}

/* Header Row: Title & Dropdown Pill */
.attend-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.attend-title-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0E1328;
  letter-spacing: -0.01em;
}

.attend-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.attend-dropdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.attend-dropdown-pill:hover {
  background: #f8fafc;
  color: #0E1328;
  border-color: #cbd5e1;
}

.attend-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: #64748b;
}

.attend-dropdown-pill:hover .attend-chevron {
  transform: translateY(1px);
}

/* Days of the Week Pill Capsule */
.attend-days-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 999px;
  padding: 4px 5px;
  margin-bottom: 12px;
}

.attend-day-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 0.73rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  padding: 0;
}

.attend-day-circle:hover:not(.active) {
  background: #e2e8f0;
  color: #0E1328;
}

/* Active Day Circle - Official Brand Navy Gradient */
.attend-day-circle.active {
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(44, 53, 112, 0.42);
  transform: scale(1.05);
}

.attend-day-circle.active:hover {
  background: linear-gradient(135deg, #37428c 0%, #2C3570 100%);
  box-shadow: 0 4px 10px rgba(44, 53, 112, 0.55);
}

/* Form Rows: Start and Create At */
.attend-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.attend-row-label {
  font-size: 0.77rem;
  font-weight: 500;
  color: #64748b;
}

.attend-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 0.77rem;
  font-weight: 600;
  color: #0E1328;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.attend-row-btn:hover {
  background: #f1f5f9;
  color: #2C3570;
}

.attend-time-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.attend-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #0E1328;
  cursor: pointer;
  transition: all 0.2s ease;
}

.attend-time-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Action Buttons Row: Cancel and Save */
.attend-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 13px;
}

.attend-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.attend-btn-cancel {
  background: #f1f5f9;
  color: #475569;
}

.attend-btn-cancel:hover {
  background: #e2e8f0;
  color: #0E1328;
}

.attend-btn-save {
  background: #0E1328;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 19, 40, 0.16);
}

.attend-btn-save:hover {
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 100%);
  box-shadow: 0 6px 16px rgba(44, 53, 112, 0.35);
  transform: translateY(-1px);
}

.attend-btn-save:active {
  transform: translateY(0);
}

/* ==========================================================================
   CARD 5: STUDY MATERIALS (Radial Collaborative Network Mesh Matching Reference)
   ========================================================================== */
.study-visual-stage {
  position: relative;
  width: 100%;
  min-height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.study-mesh-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 53, 112, 0.22) 0%, rgba(29, 36, 77, 0.09) 50%, transparent 75%);
  filter: blur(28px);
  opacity: 0.65;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.brain-card#card-ambient:hover .study-mesh-glow {
  opacity: 0.95;
  transform: scale(1.18);
}

.study-mesh-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 290px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background SVG (Concentric Circles & Connecting Branching Lines) */
.study-mesh-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.study-mesh-ring {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.35s ease, opacity 0.35s ease;
}

.study-mesh-ring.ring-1 {
  stroke: rgba(44, 53, 112, 0.25);
}

.study-mesh-ring.ring-2 {
  stroke: rgba(44, 53, 112, 0.16);
}

.study-mesh-ring.ring-3 {
  stroke: rgba(44, 53, 112, 0.1);
}

.brain-card#card-ambient:hover .study-mesh-ring {
  stroke: rgba(44, 53, 112, 0.35);
}

/* Radial Connector Traces */
.study-mesh-line {
  stroke: #cbd5e1;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  transition: stroke 0.35s ease, stroke-width 0.35s ease;
}

.brain-card#card-ambient:hover .study-mesh-line {
  stroke: #2C3570;
  stroke-width: 1.75;
}

/* Central Glowing Hub with Ekuator Icon */
.study-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3570 0%, #1D244D 50%, #0E1328 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 24px rgba(44, 53, 112, 0.55), 0 4px 14px rgba(29, 36, 77, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.study-hub-ripple {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(44, 53, 112, 0.45);
  opacity: 0.8;
  animation: hubPulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@keyframes hubPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.study-hub-badge {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.study-hub-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  transition: transform 0.4s ease;
}

.study-center-hub:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 32px rgba(44, 53, 112, 0.75), 0 6px 18px rgba(29, 36, 77, 0.45);
}

.study-center-hub:hover .study-hub-logo {
  transform: rotate(360deg);
}

/* 6 Circular Avatar Nodes */
.study-avatar-node {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
  overflow: hidden;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.study-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Positions matching the reference image layout */
.study-avatar-node.node-tl {
  top: 20px;
  left: 20px;
}

.study-avatar-node.node-ml {
  top: 77px;
  left: 8px;
}

.study-avatar-node.node-bl {
  top: 134px;
  left: 20px;
}

.study-avatar-node.node-tr {
  top: 20px;
  right: 20px;
}

.study-avatar-node.node-mr {
  top: 77px;
  right: 8px;
}

.study-avatar-node.node-br {
  top: 134px;
  right: 20px;
}

/* Avatar Node Hover Animations */
.study-avatar-node:hover {
  transform: scale(1.22);
  border-color: #2C3570;
  box-shadow: 0 6px 20px rgba(44, 53, 112, 0.4), 0 0 0 2px rgba(44, 53, 112, 0.2);
  z-index: 5;
}

/* ==========================================================================
   CARD 6: PLACEMENT (Branching Interview/Mentorship Tree Matching Reference)
   ========================================================================== */
.placement-visual-stage {
  position: relative;
  width: 100%;
  min-height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placement-backdrop-glow {
  display: none !important;
}

/* Subtle Dot Grid on Left Side (Removed) */
.placement-dot-grid {
  display: none !important;
}

.placement-tree-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 290px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* SVG Connecting Branch Lines */
.placement-tree-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.placement-branch-line {
  stroke: #cbd5e1;
  stroke-width: 1.75;
  stroke-linecap: round;
  fill: none;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, filter 0.35s ease;
}

.brain-card#card-search:hover .placement-branch-line {
  stroke: #2C3570;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(44, 53, 112, 0.45));
}

/* Top Row: 3 Squircle Avatar Cards */
.placement-nodes-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  z-index: 4;
}

.placement-squircle {
  border-radius: 17px;
  background: #ffffff;
  border: 2.5px solid #ffffff;
  box-shadow: 0 8px 20px -3px rgba(14, 19, 40, 0.12), 0 2px 6px rgba(14, 19, 40, 0.05);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.placement-squircle.node-left,
.placement-squircle.node-right {
  width: 50px;
  height: 50px;
  margin-bottom: 2px;
}

.placement-squircle.node-center {
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  box-shadow: 0 10px 24px -3px rgba(14, 19, 40, 0.15), 0 3px 8px rgba(14, 19, 40, 0.06);
}

.placement-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placement-squircle:hover {
  transform: translateY(-4px) scale(1.12);
  border-color: #2C3570;
  box-shadow: 0 12px 28px -2px rgba(44, 53, 112, 0.38), 0 4px 10px rgba(14, 19, 40, 0.08);
}

/* Bottom Pill Container: "Monthly Sessions" */
.placement-pill-wrap {
  position: relative;
  z-index: 5;
  margin-bottom: 6px;
}

.placement-session-pill {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 999px;
  padding: 8px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0E1328;
  box-shadow: 0 8px 24px -2px rgba(14, 19, 40, 0.08), 0 2px 6px rgba(14, 19, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.placement-session-pill:hover {
  border-color: #2C3570;
  box-shadow: 0 12px 28px -2px rgba(14, 19, 40, 0.12), 0 4px 12px rgba(44, 53, 112, 0.28);
  transform: translateY(-2px);
}

/* Responsive Grid for Features Cards */
@media (max-width: 1024px) {
  .brain-grid-frame {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .brain-grid-frame {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-metrics-strip { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: 1fr; }
  .bento-span-8, .bento-span-4 { grid-column: span 12; }
  .pipeline-grid { grid-template-columns: 1fr 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet Navigation Optimization (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .header-container,
  .navbar-floating {
    height: 56px !important;
    padding: 0 12px 0 20px !important;
    max-width: 940px !important;
  }
  .brand-logo-img {
    height: 32px !important;
  }
  .nav-links {
    gap: 12px !important;
  }
  .nav-link {
    font-size: 0.78rem !important;
  }
  .btn-pill-download {
    padding: 7px 18px !important;
    min-height: 36px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 768px) {
  .nav-links, .nav-menu { display: none; }
  .header-actions { display: flex; gap: 8px; }
  .mobile-menu-toggle { display: flex; }
  .mobile-nav-drawer { display: block; }
  .header-container,
  .navbar-floating {
    height: 52px !important;
    padding: 0 6px 0 16px !important;
    border-radius: 9999px !important;
  }
  .brand-logo-img {
    height: 30px !important;
  }
  .btn-pill-download {
    padding: 6px 14px !important;
    min-height: 32px !important;
    font-size: 0.78rem !important;
  }
  .pipeline-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  dialog.demo-modal {
    padding: 24px 18px;
    border-radius: 18px;
    width: 94vw;
  }
}

/* ==========================================================================
   One-Click Automations Integration Hub Section (Full Width & Hero Curve Style)
   ========================================================================== */
.automation-exact-section {
  position: relative;
  width: 100%;
  padding: var(--section-spacing, 90px) 0;
  min-height: auto;
  background-color: #FFFFFF;
  overflow-x: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-margin-top: 90px;
}

.automation-canvas {
  position: relative;
  width: 1024px;
  height: 440px;
  margin: 0 auto 185px auto;
  transform: scale(1.42);
  transform-origin: top center;
  flex-shrink: 0;
}

@media (min-width: 1600px) {
  .automation-canvas {
    transform: scale(1.54);
    margin-bottom: 238px;
  }
}

@media (max-width: 1450px) {
  .automation-canvas {
    transform: scale(1.36);
    margin-bottom: 158px;
  }
}

@media (max-width: 1300px) {
  .automation-canvas {
    transform: scale(1.22);
    margin-bottom: 97px;
  }
}

@media (max-width: 1150px) {
  .automation-canvas {
    transform: scale(1.08);
    margin-bottom: 35px;
  }
}

@media (max-width: 1000px) {
  .automation-canvas {
    transform: scale(0.94);
    margin-bottom: -26px;
  }
}

@media (max-width: 880px) {
  .automation-canvas {
    transform: scale(0.82);
    margin-bottom: -79px;
  }
}

.automation-connector-svg-mobile {
  display: none;
}

@media (max-width: 768px) {
  .automation-exact-section {
    min-height: auto;
    padding: 12px 0 24px 0;
    margin: 0;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    scroll-margin-top: 60px;
  }

  .automation-canvas {
    width: 390px;
    max-width: 100vw;
    height: 520px;
    margin: 0 auto;
    transform: scale(min(calc((100vw - 20px) / 390), calc((100svh - 48px) / 520), 1.18));
    transform-origin: center center;
    position: relative;
    flex-shrink: 0;
  }

  .automation-connector-svg-desktop {
    display: none !important;
  }

  .automation-connector-svg-mobile {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 520px;
    pointer-events: none;
    z-index: 1;
  }

  /* Node positions in mobile vertical layout (390x520) */
  .node-left-1 { left: 65px !important; top: 34px !important; }
  .node-left-2 { left: 195px !important; top: 34px !important; }
  .node-left-3 { left: 325px !important; top: 34px !important; }

  .node-right-1 { left: 65px !important; top: 486px !important; }
  .node-right-2 { left: 195px !important; top: 486px !important; }
  .node-right-3 { left: 325px !important; top: 486px !important; }

  .automation-node {
    width: 48px !important;
    height: 48px !important;
    box-shadow: none !important;
  }

  /* Center card positioning */
  .automation-center-card {
    left: 195px !important;
    top: 260px !important;
    width: 320px !important;
    max-width: 320px !important;
    box-shadow: none !important;
  }

  .automation-brand-logo-wrap {
    margin-bottom: 12px !important;
  }

  .automation-brand-logo {
    height: 44px !important;
  }

  .automation-heading {
    font-size: 1.45rem !important;
    font-weight: 400 !important;
    line-height: 1.26 !important;
    letter-spacing: -0.025em !important;
    color: #0E1328 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
  }

  .automation-description {
    font-size: 1.02rem !important;
    line-height: 1.52 !important;
    margin: 0 auto 18px auto !important;
    color: #64748b !important;
    font-weight: 400 !important;
    max-width: 340px !important;
    text-align: center !important;
  }

  .automation-demo-btn {
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    box-shadow: 0 3px 14px rgba(9, 12, 25, 0.22) !important;
  }
}

.automation-connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 440px;
  pointer-events: none;
  z-index: 1;
}

/* Base Track Lines & Brackets */
.auto-wire-base {
  stroke: #CBD5E1;
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}

.auto-bracket {
  stroke: #CBD5E1;
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
  transition: stroke 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auto-bracket.active,
.automation-exact-section:hover .auto-bracket,
.automation-exact-section.is-active .auto-bracket {
  stroke: #0E1328 !important;
  filter: none !important;
}

/* Active Dark Filling Lines (Slow, Smooth Cinematic Fill) */
.auto-wire-fill {
  stroke: #0E1328;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
  opacity: 0;
  will-change: stroke-dashoffset, opacity;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
}

.auto-wire-fill.active,
.automation-exact-section:hover .auto-wire-fill,
.automation-exact-section.is-active .auto-wire-fill {
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
  filter: none !important;
}

/* Staggered sequential wave fill on section hover */
.automation-exact-section:hover .auto-wire-fill[data-wire="1"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="1"] { transition-delay: 0s; }
.automation-exact-section:hover .auto-wire-fill[data-wire="4"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="4"] { transition-delay: 0.06s; }
.automation-exact-section:hover .auto-wire-fill[data-wire="2"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="2"] { transition-delay: 0.12s; }
.automation-exact-section:hover .auto-wire-fill[data-wire="5"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="5"] { transition-delay: 0.18s; }
.automation-exact-section:hover .auto-wire-fill[data-wire="3"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="3"] { transition-delay: 0.24s; }
.automation-exact-section:hover .auto-wire-fill[data-wire="6"],
.automation-exact-section.is-active .auto-wire-fill[data-wire="6"] { transition-delay: 0.30s; }

/* Pin Dots on Wires */
.auto-wire-pin {
  fill: #CBD5E1;
  pointer-events: none;
  transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s ease;
}

.auto-wire-pin.active,
.automation-exact-section:hover .auto-wire-pin,
.automation-exact-section.is-active .auto-wire-pin {
  r: 3.8;
  fill: #0E1328;
  filter: none !important;
}

/* 8 Integration Node Badges (Clean Flat Minimal Design - No Shadows) */
.automation-node {
  position: absolute;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.automation-exact-section:hover .automation-node,
.automation-exact-section.is-active .automation-node {
  border-color: rgba(14, 19, 40, 0.35);
  box-shadow: none !important;
}

.automation-node svg,
.automation-node img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.automation-node:hover,
.automation-node.active {
  transform: translate(-50%, -50%) scale(1.18) translateY(-2px);
  box-shadow: none !important;
  border-color: #0E1328 !important;
  background: #FFFFFF !important;
}

.automation-node:hover svg,
.automation-node.active svg,
.automation-node:hover img,
.automation-node.active img {
  transform: scale(1.14);
}

/* Exact Node Positions matching 1024x440 viewBox (Vertically Aligned in Same Line) */
.node-left-1 { left: 130px; top: 95px; }
.node-left-2 { left: 130px; top: 205px; }
.node-left-3 { left: 130px; top: 315px; }

.node-right-1 { left: 894px; top: 95px; }
.node-right-2 { left: 894px; top: 205px; }
.node-right-3 { left: 894px; top: 315px; }

/* Center Hub Card */
.automation-center-card {
  position: absolute;
  left: 512px;
  top: 195px;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 350px;
  max-width: 350px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.automation-center-card:hover {
  transform: translate(-50%, -50%) scale(1.02);
}

.automation-brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.automation-brand-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.automation-center-card:hover .automation-brand-logo,
.automation-brand-logo-wrap:hover .automation-brand-logo {
  transform: scale(1.08) translateY(-2px);
  filter: none !important;
}

.automation-badge {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2563EB;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  padding: 3px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.automation-heading {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  font-weight: 400;
  color: #0E1328;
  letter-spacing: -0.025em;
  line-height: 1.26;
  white-space: normal;
  margin: 0 0 8px 0;
  text-align: center;
}

.automation-description {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748B;
  max-width: 295px;
  margin: 0 auto 16px auto;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.automation-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #090C19 0%, #151c38 50%, #1d2552 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  padding: 10px 24px !important;
  font-family: var(--font-sans);
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
  box-shadow: 0 4px 16px rgba(9, 12, 25, 0.24) !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

.automation-demo-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.26),
    transparent
  );
  transform: rotate(25deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.automation-demo-btn:hover::after {
  transform: rotate(25deg) translateX(440%);
}

.automation-demo-btn:hover {
  background: linear-gradient(135deg, #090C19 0%, #151c38 50%, #1d2552 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(9, 12, 25, 0.42) !important;
  filter: brightness(1.12) !important;
  color: #FFFFFF !important;
}

.automation-demo-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ==========================================================================
   Testimonials Section (Trusted by customers)
   ========================================================================== */
.testimonials-exact-section {
  position: relative;
  padding: var(--section-spacing, 90px) 0;
  background-color: #060811;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(35, 48, 80, 0.3) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(16, 22, 38, 0.45) 0%, transparent 80%);
  overflow: hidden;
  color: #ffffff;
  scroll-margin-top: 80px;
}

.testimonials-exact-section .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 52px auto;
  max-width: 940px;
  width: 100%;
  gap: 32px;
}

.testimonials-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.18;
  margin: 0;
}

.testimonials-subheading {
  font-size: 0.98rem;
  line-height: 1.5;
  color: #7A869C;
  max-width: 320px;
  margin: 0;
  text-align: right;
  font-weight: 400;
}

.testimonials-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 16px 0 32px 0;
}

.testimonials-track {
  display: flex;
  gap: 32px;
  align-items: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  width: max-content;
  user-select: none;
}

.testimonial-card {
  flex: 0 0 940px;
  max-width: 940px;
  background: 
    radial-gradient(circle at 75% 40%, rgba(38, 48, 76, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, #131724 0%, #0d101a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 36px 44px;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0.28;
  transform: scale(0.96);
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.testimonial-card.active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  cursor: default;
}

.testimonial-photo-wrap {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  background: #141724;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.testimonial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}

.testimonial-card:hover .testimonial-img {
  transform: scale(1.02);
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 320px;
  padding: 8px 0;
}

.testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.62;
  color: #E2E8F0;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  font-style: normal;
}

.testimonial-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 32px 0 20px 0;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-name {
  font-size: 1.08rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.testimonial-role {
  font-size: 0.88rem;
  color: #79859A;
  font-weight: 400;
}

.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.testimonial-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.testimonial-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  transform: scale(1.04);
}

.testimonial-nav-btn:active {
  transform: scale(0.96);
}

@media (max-width: 1024px) {
  .testimonial-card {
    flex: 0 0 760px;
    max-width: 760px;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 28px 32px;
  }
  .testimonials-header {
    max-width: 760px;
  }
  .testimonial-photo-wrap {
    height: 330px;
  }
  .testimonial-quote {
    font-size: 1.12rem;
  }
}

@media (max-width: 820px) {
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
  }
  .testimonials-heading {
    font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }
  .testimonials-subheading {
    text-align: left;
    max-width: 100%;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }
  .testimonial-card {
    flex: 0 0 calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }
  .testimonial-photo-wrap {
    height: 240px;
  }
  .testimonial-content {
    min-height: auto;
  }
  .testimonial-quote {
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   Showcase CTA Banner with Software Dashboard (Matching Reference Image)
   Brand Color Variation: Royal Navy (#0E1328), Deep Indigo (#2C3570), 
   Electric Royal (#3b4ea8), Vivid Azure (#2563eb), & Sky Glow (#0284c7)
   ========================================================================== */
.showcase-cta-section {
  position: relative;
  padding: 70px 0 28px 0;
  background: #ffffff !important;
  background-color: #ffffff !important;
  z-index: 5;
  overflow: hidden;
}

.showcase-cta-section::before,
.showcase-cta-section::after {
  display: none !important;
  content: none !important;
}

.showcase-cta-banner {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  padding: 64px 56px 0 56px;
  background: #0E1328;
  box-shadow: 0 35px 80px -15px rgba(14, 19, 40, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* Atmospheric Radiant Glows inside Banner */
.showcase-cta-banner::before {
  content: none;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 60%;
  background: radial-gradient(circle at 75% 20%, rgba(56, 189, 248, 0.32) 0%, rgba(37, 99, 235, 0.15) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.showcase-cta-banner::after {
  content: none;
  display: none;
  position: absolute;
  top: 15%;
  left: 20%;
  width: 50%;
  height: 65%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.24) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Top Header Bar */
.showcase-cta-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  margin: 0 auto 44px auto;
  max-width: 820px;
}

.showcase-cta-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-cta-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

.showcase-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 0 auto;
  text-align: center;
  max-width: 720px;
}

.showcase-cta-desc {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: -4px auto 6px auto;
  font-weight: 400;
  text-wrap: balance;
}

.showcase-cta-action-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.showcase-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #FFFFFF;
  color: #0E1328;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
  border: none;
  cursor: pointer;
}

.showcase-cta-btn:hover {
  transform: translateY(-2px);
  background: #F8FAFC;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  color: #0E1328;
}

.showcase-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.showcase-cta-btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

.showcase-cta-features-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 6px;
  flex-wrap: wrap;
}

.showcase-cta-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.showcase-cta-feature-item svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.showcase-cta-feature-dot {
  opacity: 0.45;
}

.showcase-cta-microtext {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

/* Partner Logos Slider / Infinite Marquee Track */
.showcase-logos-slider {
  position: relative;
  z-index: 3;
  overflow: hidden;
  width: 100%;
  margin-top: 36px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.showcase-logos-track {
  display: flex;
  width: max-content;
  animation: showcaseLogosSlide 28s linear infinite;
}

.showcase-logos-track:hover {
  animation-play-state: paused;
}

.showcase-logos-group {
  display: flex;
  align-items: center;
  gap: clamp(34px, 4vw, 58px);
  padding-right: clamp(34px, 4vw, 58px);
  flex-shrink: 0;
}

.showcase-logo-item {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.showcase-logo-item:hover {
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(-1px);
}

@keyframes showcaseLogosSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Software Dashboard Window (Authentic Laptop View Preview) */
.showcase-dashboard-window {
  position: relative;
  z-index: 3;
  background: #0c0d2e;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -15px 45px rgba(0, 0, 0, 0.25), 0 25px 60px rgba(14, 19, 40, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1140px;
  width: 100%;
}

.showcase-window-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  background: #090a21;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.showcase-traffic-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.showcase-traffic-dots .traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.showcase-traffic-dots .traffic-dot.red { background: #ef4444; }
.showcase-traffic-dots .traffic-dot.yellow { background: #f59e0b; }
.showcase-traffic-dots .traffic-dot.green { background: #10b981; }

.showcase-address-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 4px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 320px;
  width: 100%;
  justify-content: center;
}

.showcase-address-bar .lock-icon {
  color: #10b981;
  flex-shrink: 0;
}

.showcase-window-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #34d399;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.showcase-window-status .pulse-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
}

.showcase-dashboard-viewport {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #0c0d2e;
  user-select: none;
  pointer-events: none;
}

.showcase-dashboard-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  pointer-events: none;
}

.showcase-bottom-dissolve {
  display: none !important;
}

/* Top App Bar */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #EDF0F5;
  font-size: 0.82rem;
  gap: 16px;
}

.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-workspace-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-weight: 600;
  color: #1E293B;
  cursor: pointer;
}

.dash-sparkle-icon {
  color: #F59E0B;
}

.dash-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #64748B;
  background: #F1F5F9;
  padding: 3px 9px;
  border-radius: 999px;
}

.dash-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
}

.dash-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 5px 14px;
  color: #64748B;
  font-size: 0.78rem;
  min-width: 260px;
}

.dash-search-ai {
  margin-left: auto;
  color: #6366F1;
  font-size: 0.85rem;
}

.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748B;
}

.dash-action-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dash-action-icon:hover {
  background: #E2E8F0;
  color: #0E1328;
}

.dash-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2C3570;
  background: #EEF2FF;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.dash-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #2C3570;
  object-fit: cover;
}

/* Dashboard Body Split */
.dash-body {
  display: flex;
  min-height: 480px;
  background: #FFFFFF;
  position: relative;
}

/* Left Mini Sidebar */
.dash-sidebar {
  width: 210px;
  background: #F8FAFC;
  border-right: 1px solid #EDF0F5;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
}

.dash-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0E1328;
}

.dash-side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.dash-side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dash-side-item:hover {
  background: #F1F5F9;
  color: #0E1328;
}

.dash-side-item.active {
  background: #EEF2FF;
  color: #2C3570;
  font-weight: 600;
}

.dash-side-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash-badge-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #EF4444;
  color: #FFFFFF;
}

.dash-spaces-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  padding: 6px 8px 2px 8px;
}

.dash-space-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  display: inline-block;
}

/* Main Dashboard Workspace */
.dash-main {
  flex: 1;
  padding: 16px 22px;
  overflow: hidden;
  position: relative;
}

.dash-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0E1328;
}

.dash-crumb-tag {
  color: #EF4444;
}

.dash-view-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #EDF0F5;
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: #64748B;
}

.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.dash-tab:hover {
  color: #0E1328;
}

.dash-tab.active {
  color: #2C3570;
  font-weight: 700;
}

.dash-tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2C3570;
  border-radius: 2px;
}

/* Toolbar */
.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 0.78rem;
  color: #64748B;
}

.dash-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.dash-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0E1328;
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

/* Data Table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.dash-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #EDF0F5;
}

.dash-group-header {
  padding: 10px 12px;
  background: #FAFBFC;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  border-radius: 6px;
  margin-top: 6px;
}

.dash-group-badge-done {
  background: #10B981;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.dash-group-badge-prog {
  background: #3B82F6;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.dash-task-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  color: #1E293B;
}

.dash-check-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.dash-check-done {
  background: #10B981;
}

.dash-check-prog {
  background: #3B82F6;
}

.dash-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.dash-row-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  margin-left: -5px;
  object-fit: cover;
}

.dash-row-avatar:first-child {
  margin-left: 0;
}

.dash-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.dash-tag-teal {
  background: #ECFDF5;
  color: #059669;
}

.dash-tag-sky {
  background: #F0F9FF;
  color: #0284C7;
}

.dash-tag-indigo {
  background: #EEF2FF;
  color: #4F46E5;
}

.dash-tag-purple {
  background: #FAF5FF;
  color: #9333EA;
}

.dash-priority-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dash-priority-urgent {
  color: #EF4444;
}

.dash-priority-high {
  color: #F59E0B;
}

.dash-priority-normal {
  color: #3B82F6;
}

/* Atmospheric Bottom Dissolve Overlay */
.dash-bottom-dissolve {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(224, 242, 254, 0.7) 40%,
    rgba(191, 219, 254, 0.3) 70%,
    transparent 100%
  );
  z-index: 5;
}

/* Responsive adjustments for Showcase CTA Banner & Dashboard Window */
@media (max-width: 1024px) {
  .showcase-cta-banner {
    padding: 44px 24px 0 24px;
    border-radius: 28px;
  }
  .showcase-dashboard-window {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .showcase-cta-section {
    padding: 36px 0 16px 0 !important;
  }

  .showcase-cta-banner {
    padding: 32px 14px 0 14px;
    border-radius: 20px;
  }

  .showcase-cta-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 22px;
  }

  .showcase-cta-logo {
    height: 28px;
  }

  /* Optimized & Reduced H2 Headline */
  .showcase-cta-headline {
    font-size: clamp(1.6rem, 5vw, 2.05rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    padding: 0 4px;
  }

  .showcase-cta-desc {
    font-size: 0.92rem !important;
    line-height: 1.52 !important;
  }

  .showcase-cta-action-wrap {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    gap: 10px;
    margin-top: 4px;
  }

  .showcase-cta-btn,
  .showcase-cta-btn-secondary {
    width: 100%;
    padding: 12px 18px;
    font-size: 0.92rem;
    justify-content: center;
  }

  .showcase-dashboard-window {
    border-radius: 14px 14px 0 0;
    width: 100%;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25), 0 15px 40px rgba(14, 19, 40, 0.35);
  }

  .showcase-window-topbar {
    padding: 8px 12px;
  }

  .showcase-traffic-dots .traffic-dot {
    width: 8px;
    height: 8px;
  }

  .showcase-address-bar {
    font-size: 0.62rem;
    padding: 3px 10px;
    max-width: 200px;
  }

  .showcase-window-status {
    display: none;
  }

  .showcase-bottom-dissolve {
    height: 40px;
  }

  /* Section 9: Features Customize H2 & Paragraphs */
  .brain-title {
    font-size: clamp(1.6rem, 5vw, 2.05rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 8px !important;
  }

  .brain-subtitle {
    font-size: 0.94rem !important;
    line-height: 1.52 !important;
  }

  /* FAQ Accordion mobile optimization */
  .faq-trigger {
    padding: 18px 20px;
    font-size: 1.02rem;
  }

  .faq-answer {
    padding: 0 20px 18px 20px;
    font-size: 0.92rem;
    line-height: 1.56;
  }
}

@media (max-width: 480px) {
  .showcase-cta-banner {
    padding: 26px 12px 0 12px;
    border-radius: 18px;
  }

  .showcase-cta-logo {
    height: 26px;
  }

  .showcase-cta-headline {
    font-size: 1.24rem !important;
    line-height: 1.26 !important;
  }

  .showcase-cta-desc {
    font-size: 0.86rem !important;
  }

  .showcase-address-bar {
    display: none;
  }

  .showcase-window-topbar {
    padding: 7px 10px;
    justify-content: flex-start;
  }

  .brain-title {
    font-size: clamp(1.45rem, 5.2vw, 1.75rem) !important;
    line-height: 1.22 !important;
  }

  .brain-subtitle {
    font-size: 0.88rem !important;
  }
}

/* ==========================================================================
   CONNECTED CAMPUS PLATFORM ENHANCEMENTS
   ========================================================================== */

/* Hero Eyebrow */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2C3570;
  background: rgba(44, 53, 112, 0.08);
  border: 1px solid rgba(44, 53, 112, 0.18);
  padding: 5px 16px;
  border-radius: 9999px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(44, 53, 112, 0.06);
}

.brain-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2C3570;
  background: rgba(44, 53, 112, 0.08);
  border: 1px solid rgba(44, 53, 112, 0.16);
  padding: 5px 16px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

/* Section 4 Trio Card Tag & Desc */
.brain-trio-tag {
  font-family: var(--font-heading, 'Helvetica Neue', Helvetica, Arial, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #0E1328 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

.brain-trio-desc {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 330px !important;
  width: 100% !important;
}

/* Integrations Hub: Center Card */
.automation-heading {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem) !important;
  font-weight: 400 !important;
  color: #0E1328 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.26 !important;
  white-space: normal !important;
  margin: 0 0 8px 0 !important;
  text-align: center !important;
}

.automation-description {
  font-size: 0.88rem !important;
  line-height: 1.52 !important;
  color: #64748b !important;
  font-weight: 400 !important;
  max-width: 330px !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
}

.automation-demo-btn {
  font-size: 0.88rem !important;
  padding: 10px 24px !important;
  white-space: nowrap !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   MODULE CARDS: VISUAL STAGES FOR 9 PLATFORM PILLARS
   ========================================================================== */

/* Admissions Pipeline Visual Stage */
.admissions-visual-stage {
  padding: 14px 10px;
  width: 100%;
}

.admissions-pipeline-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 8px 24px -4px rgba(14, 19, 40, 0.06);
  position: relative;
}

.admissions-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admissions-pill-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  color: #2C3570;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.admissions-steps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}

.admissions-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.admissions-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
  border: 1.5px solid #cbd5e1;
}

.admissions-step-dot.done {
  background: #2C3570;
  color: #ffffff;
  border-color: #2C3570;
  box-shadow: 0 2px 6px rgba(44, 53, 112, 0.35);
}

.admissions-step-dot.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #2563eb;
}

.admissions-step-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.01em;
}

.admissions-steps-track {
  position: absolute;
  top: 11px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.admissions-applicant-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admissions-applicant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admissions-applicant-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0E1328;
}

.admissions-applicant-sub {
  font-size: 0.66rem;
  color: #64748b;
}

.admissions-applicant-status {
  font-size: 0.65rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
}

/* Fees & Finance Visual Stage */
.fees-visual-stage {
  padding: 14px 10px;
  width: 100%;
}

.fees-widget-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 8px 24px -4px rgba(14, 19, 40, 0.06);
}

.fees-widget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fees-balance-amount {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0E1328;
  letter-spacing: -0.02em;
}

.fees-status-pill {
  font-size: 0.64rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
}

.fees-progress-track {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.fees-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2C3570 0%, #3b82f6 100%);
  border-radius: 999px;
  width: 82%;
}

.fees-instalment-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fees-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  padding: 6px 8px;
  background: #f8fafc;
  border-radius: 8px;
}

.fees-row-label {
  color: #334155;
  font-weight: 500;
}

.fees-row-val {
  font-weight: 700;
  color: #0E1328;
}

/* Certification Visual Stage */
.cert-visual-stage {
  padding: 14px 10px;
  width: 100%;
}

.cert-preview-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 8px 24px -4px rgba(14, 19, 40, 0.06);
  position: relative;
  overflow: hidden;
}

.cert-preview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2C3570 0%, #d97706 100%);
}

.cert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cert-seal-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2C3570;
}

.cert-verified-pill {
  font-size: 0.62rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
}

.cert-student-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0E1328;
  margin-bottom: 2px;
}

.cert-course-sub {
  font-size: 0.68rem;
  color: #64748b;
  margin-bottom: 12px;
}

.cert-qr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.cert-id-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.64rem;
  color: #475569;
  font-weight: 600;
}

/* Records and Reporting Visual Stage */
.reports-visual-stage {
  padding: 14px 10px;
  width: 100%;
}

.reports-widget-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 8px 24px -4px rgba(14, 19, 40, 0.06);
}

.reports-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reports-title-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0E1328;
}

.reports-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.64rem;
  font-weight: 700;
  color: #2C3570;
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.reports-kpi-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
}

.reports-kpi-metric {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0E1328;
  letter-spacing: -0.02em;
}

.reports-kpi-label {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 500;
}

.reports-export-pill {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 7: INSTITUTIONAL VISIBILITY EXECUTIVE DASHBOARD
   ========================================================================== */

.visibility-section {
  padding: 95px 0 105px 0;
  background: #ffffff;
  position: relative;
  border-bottom: 1px solid #edf0f5;
  overflow: hidden;
}

.visibility-header {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 52px auto;
  position: relative;
  z-index: 2;
}

.visibility-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2C3570;
  background: rgba(44, 53, 112, 0.08);
  border: 1px solid rgba(44, 53, 112, 0.16);
  padding: 5px 16px;
  border-radius: 9999px;
  margin-bottom: 18px;
}

.visibility-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2C3570;
  box-shadow: 0 0 8px #2C3570;
}

.visibility-title {
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0E1328;
  line-height: 1.18;
  margin-bottom: 16px;
}

.visibility-subtitle {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: #475569;
  max-width: 720px;
  margin: 0 auto;
}

.visibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .visibility-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .visibility-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.visibility-card {
  background: #ffffff;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px -2px rgba(14, 19, 40, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.visibility-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px -4px rgba(44, 53, 112, 0.12);
}

.visibility-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.visibility-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #2C3570;
}

.visibility-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.visibility-badge.good {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.visibility-badge.warn {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

.visibility-badge.info {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.visibility-card-label {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.visibility-card-metric {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0E1328;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 10px;
}

.visibility-meter-track {
  width: 100%;
  height: 5px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.visibility-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2C3570 0%, #3b82f6 100%);
}

.visibility-card-body {
  font-size: 0.78rem;
  line-height: 1.48;
  color: #64748b;
  margin: 0;
}

/* Section 9 Final Conversion Reassurance Styling */
.showcase-cta-body {
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 620px;
  margin: 12px auto 26px auto;
  line-height: 1.55;
  text-align: center;
}

/* ==========================================================================
   Interactive Polish: Micro-interactions, Glassy Glow & Premium Feedback
   ========================================================================== */

/* 1. Dynamic Cursor Spotlight Glass Glow */
.spotlight-card {
  position: relative;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    520px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(56, 189, 248, 0.16),
    transparent 55%
  );
  transition: opacity 0.35s ease;
  z-index: 2;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* 2. Glassy Button Gleam Sweep & Micro-Press Feedback */
.btn-pill-download,
.orbital-btn-signup,
.orbital-btn-connect,
.showcase-cta-btn,
.automation-demo-btn,
.open-demo-modal {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background 0.25s ease,
              color 0.25s ease !important;
}

.btn-pill-download::after,
.orbital-btn-connect::after,
.automation-demo-btn::after,
.showcase-cta-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.26),
    transparent
  );
  transform: rotate(25deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.btn-pill-download:hover::after,
.orbital-btn-connect:hover::after,
.automation-demo-btn:hover::after,
.showcase-cta-btn:hover::after {
  transform: rotate(25deg) translateX(440%);
}

.btn-pill-download:active,
.orbital-btn-signup:active,
.orbital-btn-connect:active,
.showcase-cta-btn:active,
.showcase-cta-btn-secondary:active,
.open-demo-modal:active {
  transform: translateY(0) scale(0.97) !important;
}

/* 3. Hero Orbital Badges (Labels) - Zero Hover Effect */
.orbit-module-badge {
  position: relative;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.06) !important;
  transition: none !important;
}

.orbit-module-badge::before,
.orbit-module-badge::after {
  display: none !important;
}

.orbit-module-badge:hover,
.orbit-module-badge:active,
.orbit-module-badge:focus {
  transform: none !important;
  border-color: rgba(14, 19, 40, 0.14) !important;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.06) !important;
  background: #ffffff !important;
  cursor: default !important;
  outline: none !important;
  z-index: inherit !important;
}

.orbit-module-badge .orbit-badge-icon-box,
.orbit-module-badge:hover .orbit-badge-icon-box {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.orbit-module-badge .orbit-badge-title,
.orbit-module-badge:hover .orbit-badge-title {
  color: #0E1328 !important;
  transition: none !important;
}

/* 4. Console Mockup Sidebar Navigation Fluid Hover */
.cda-nav-item {
  transition: background 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease !important;
}

.cda-nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(3px);
}

/* ==========================================================================
   12. Interactive Console Mode Switcher (Learner vs Admin) & Admin Dashboard
   ========================================================================== */

/* Top Mode Switcher Bar */
.console-mode-switch-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
  gap: 10px;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  order: 1 !important;
}

#console .console-wrapper {
  order: 2 !important;
}

.console-mode-switch-pill {
  display: inline-flex;
  align-items: center;
  background: #0E1328;
  padding: 5px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(14, 19, 40, 0.10);
  gap: 4px;
}

.console-mode-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.console-mode-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.console-mode-tab-btn.active {
  background: #ffffff;
  color: #0E1328;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.tab-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.tab-icon-svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.1;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.25s ease;
}

.console-mode-tab-btn:hover .tab-icon-svg {
  transform: translateY(-1px) scale(1.08);
}

.console-mode-tab-btn.active .tab-icon-svg {
  stroke: #0E1328;
}

.console-address-bar .lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #10b981;
}

.console-address-bar .lock-icon svg {
  display: block;
  stroke: currentColor;
}

.console-mode-badge-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
}

.pulse-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Admin Dashboard Portal Container */
.cda-admin-portal {
  background: #F4F6F9;
  min-height: 740px;
  width: 100%;
}

/* Admin Topbar */
.cda-admin-topbar {
  background: #101432 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 24px !important;
}

.admin-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-grid-launcher-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s;
}

.admin-grid-launcher-btn:hover {
  color: #ffffff;
}

.admin-brand-logo-text {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
}

.admin-search-box {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 7px 16px !important;
}

.admin-panel-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F59E0B;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-red-dot {
  background: #EF4444 !important;
}

/* Admin Sidebar */
.admin-sidebar {
  background: #101432 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  width: 220px !important;
  padding: 16px 12px !important;
  display: flex;
  flex-direction: column;
}

.admin-sidebar-header-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.admin-shield-icon {
  color: #94a3b8;
  display: flex;
  align-items: center;
}

.admin-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 9999px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: 3px;
  cursor: pointer;
}

.admin-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.admin-nav-item.active {
  background: #ffffff !important;
  color: #101432 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-footer-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-footer-name {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-footer-role {
  color: #94a3b8;
  font-size: 0.72rem;
}

/* Admin Main Stage */
.admin-main-stage {
  flex: 1;
  background: #F4F6F9;
  padding: 24px 28px;
  overflow-y: auto;
  max-height: 700px;
}

/* Greeting Banner Card */
.admin-greeting-card {
  background: #101432;
  border-radius: 20px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(16, 20, 50, 0.15);
}

.admin-greeting-headline {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  font-family: var(--font-heading);
}

.admin-greeting-subtitle {
  font-size: 0.90rem;
  color: #94a3b8;
  margin: 0;
}

.admin-calendar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 0.82rem;
  color: #cbd5e1;
}

/* 4 KPI Cards Grid */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.admin-kpi-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.03);
}

.card-kpi-active-students {
  background: #F0FDF4;
  border-color: #86EFAC;
}

.card-kpi-courses {
  background: #FEFCE8;
  border-color: #FEF08A;
}

.admin-kpi-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.icon-blue { background: #EFF6FF; color: #2563EB; }
.icon-green { background: #DCFCE7; color: #16A34A; }
.icon-grey { background: #F1F5F9; color: #475569; }
.icon-yellow { background: #FEF9C3; color: #CA8A04; }
.icon-purple { background: #F3E8FF; color: #9333EA; }

.admin-kpi-label {
  font-size: 0.82rem;
  color: #64748B;
  font-weight: 500;
  margin-bottom: 6px;
}

.admin-kpi-number {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0E1328;
  font-family: var(--font-heading);
  line-height: 1.1;
  margin-bottom: 6px;
}

.admin-kpi-sub {
  font-size: 0.78rem;
  color: #94A3B8;
}

/* Bottom Split Row */
.admin-overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.admin-card-surface {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.03);
}

.admin-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-surface-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-surface-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #0E1328;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-surface-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0E1328;
  margin: 0;
  font-family: var(--font-heading);
}

.admin-surface-sub {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 2px 0 0 0;
}

.admin-btn-secondary {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #0E1328;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-btn-secondary:hover {
  background: #E2E8F0;
}

/* Branch Cards Row */
.admin-branch-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.admin-branch-item-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
}

.admin-branch-item-card:hover {
  border-color: #CBD5E1;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(14, 19, 40, 0.05);
}

.admin-branch-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-branch-item-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-branch-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E1328;
}

.admin-branch-item-title {
  font-size: 0.90rem;
  font-weight: 700;
  color: #0E1328;
}

.admin-branch-item-loc {
  font-size: 0.72rem;
  color: #64748B;
}

.admin-dots-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.admin-branch-stats-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #F1F5F9;
}

.admin-branch-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.80rem;
}

.admin-stat-label {
  color: #64748B;
}

.admin-stat-val {
  font-weight: 700;
  color: #0E1328;
}

.admin-branch-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: auto;
}

.admin-green-status-dot {
  color: #10B981;
  font-size: 0.85rem;
}

/* Quick Actions List */
.admin-quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-action-row-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
}

.admin-action-row-btn:hover {
  background: #ffffff;
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(14, 19, 40, 0.05);
}

.admin-action-icon-pill {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-action-text-col {
  flex: 1;
}

.admin-action-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0E1328;
}

.admin-action-desc {
  font-size: 0.74rem;
  color: #64748B;
}

/* Sub-views for Students, Branches, Courses, etc. */
.admin-subview {
  display: none;
}
.admin-subview.active {
  display: block;
}

.admin-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  background: #ffffff;
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: left;
}

.admin-data-table th {
  background: #F8FAFC;
  padding: 12px 16px;
  color: #64748B;
  font-weight: 600;
  border-bottom: 1px solid #E2E8F0;
}

.admin-data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
  color: #0E1328;
}

/* Admin Subviews Universal Styling System */
.admin-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.admin-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 7px 12px;
  min-width: 260px;
  max-width: 380px;
  flex: 1;
}

.admin-search-box input {
  border: none;
  outline: none;
  font-size: 0.82rem;
  color: #0E1328;
  width: 100%;
  background: transparent;
}

.admin-select-filter {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.80rem;
  color: #334155;
  outline: none;
  cursor: pointer;
}

.admin-summary-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.admin-summary-chip {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-summary-chip strong {
  color: #0E1328;
}

.admin-status-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-status-pill.pill-green {
  background: #DCFCE7;
  color: #15803D;
}

.admin-status-pill.pill-blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.admin-status-pill.pill-purple {
  background: #F3E8FF;
  color: #7E22CE;
}

.admin-status-pill.pill-amber {
  background: #FEF3C7;
  color: #B45309;
}

.admin-status-pill.pill-red {
  background: #FEE2E2;
  color: #B91C1C;
}

/* Grids */
.admin-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.admin-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.admin-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.admin-subcard {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(14, 19, 40, 0.03);
  transition: all 0.2s ease;
  position: relative;
}

.admin-subcard:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(14, 19, 40, 0.06);
}

.admin-subcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-subcard-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0E1328;
  margin: 0 0 3px 0;
  font-family: var(--font-heading);
}

.admin-subcard-subtitle {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
}

.admin-progress-meter {
  background: #F1F5F9;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
  width: 100%;
  margin: 8px 0;
}

.admin-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: #10B981;
  transition: width 0.3s ease;
}

.admin-progress-bar.bar-blue { background: #3B82F6; }
.admin-progress-bar.bar-amber { background: #F59E0B; }
.admin-progress-bar.bar-purple { background: #8B5CF6; }

/* Pagination */
.admin-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
  font-size: 0.78rem;
  color: #64748B;
}

.admin-page-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-page-btn {
  border: 1px solid #E2E8F0;
  background: #ffffff;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.15s ease;
}

.admin-page-btn:hover {
  background: #F1F5F9;
}

.admin-page-btn.active {
  background: #101432;
  color: #ffffff;
  border-color: #101432;
}

/* Live Session Card Specific */
.admin-session-live-badge {
  background: #FEE2E2;
  color: #DC2626;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DC2626;
  animation: adminPulse 1.4s infinite ease-in-out;
}

@keyframes adminPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.admin-btn-stream {
  background: #101432;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-btn-stream:hover {
  background: #2563EB;
}

/* Feedback & Biometric Feed */
.admin-feed-item {
  display: flex;
  gap: 14px;
  padding: 15px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.admin-feed-item:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(14, 19, 40, 0.04);
}

.admin-avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-queue-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-queue-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}

.admin-action-btn-green {
  background: #10B981;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-action-btn-green:hover {
  background: #059669;
}

.admin-action-btn-red {
  background: #F1F5F9;
  color: #DC2626;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-action-btn-red:hover {
  background: #FEE2E2;
}

/* Responsive Rules for Admin Dashboard */
@media (max-width: 1024px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }
  .admin-branch-cards-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  #console .console-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .console-mode-switch-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 22px !important;
    width: 100% !important;
    order: 1 !important;
  }

  #console .console-wrapper {
    width: 100% !important;
    order: 2 !important;
  }
}

@media (max-width: 768px) {
  .admin-sidebar {
    display: none;
  }
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }
  .console-mode-tab-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  .console-mode-switch-wrapper {
    margin-bottom: 18px !important;
  }

  /* Second Section: Non-interactive static image on mobile view */
  .console-desktop-interactive,
  #console .console-desktop-interactive {
    display: none !important;
  }

  .console-mobile-image-frame,
  #console .console-mobile-image-frame {
    display: block !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    order: 2 !important;
  }

  .console-mobile-card {
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(14, 19, 40, 0.08) !important;
    border: 1px solid rgba(14, 19, 40, 0.12) !important;
    background: #ffffff !important;
  }

  .console-mobile-card .console-topbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .console-mobile-card .console-address-bar {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .console-mobile-card .console-status-badge {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }

  .console-mobile-viewport {
    width: 100% !important;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .console-mobile-img {
    display: none;
    width: 100% !important;
    height: auto !important;
    display: none;
    pointer-events: none !important;
    user-select: none !important;
    border: none !important;
  }

  .console-mobile-img.active {
    display: block !important;
  }

  .console-mode-badge-hint {
    display: none !important;
  }
}

/* Base style for console-mobile-image-frame (hidden on desktop/tablet > 768px) */
.console-mobile-image-frame {
  display: none;
  width: 100%;
}

@media (max-width: 768px) {
  .brain-visual-stage {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    margin-bottom: 16px !important;
  }
}