/* === HOME PAGE — Premium Solar System === */
.home-page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 50%,
      rgba(124, 58, 237, 0.06) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 120%,
      rgba(124, 58, 237, 0.1) 0%,
      transparent 70%
    );
  overflow: hidden;
}

.home-greeting {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  z-index: 10;
  letter-spacing: 0.02em;
}

.home-greeting__name {
  background: linear-gradient(135deg, #8B5CF6, #A855F7, #D946EF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--weight-semibold);
}

/* Holographic grid overlay */
.home-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
}

.home-content {
  text-align: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

.home-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--purple-400);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  animation: fadeIn 0.6s ease 0.2s backwards;
  font-family: var(--font-mono);
  position: relative;
  z-index: 200;
}

.home-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  margin-bottom: 0;
  animation: fadeIn 0.6s ease 0.3s backwards;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 200;
}

.home-title--cinematic .gradient-text {
  background: linear-gradient(
    135deg,
    var(--purple-200) 0%,
    var(--purple-400) 40%,
    var(--purple-300) 60%,
    var(--purple-100) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 25px rgba(124, 58, 237, 0.5))
          drop-shadow(0 0 50px rgba(124, 58, 237, 0.25));
}


/* ═══════════════════════════════════════════════
   SOLAR SYSTEM — Centered at exact screen middle
   ═══════════════════════════════════════════════ */

.orbital-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(400px, 75vmin, 600px);
  height: clamp(400px, 75vmin, 600px);
}

/* ─── Glowing Energy Orbital Ring ─── */
.orbital-energy-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 88%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.orbital-energy-svg {
  width: 100%;
  height: 100%;
}

.orbital-energy-segments {
  animation: neonRingPulse 4s ease-in-out infinite;
  transform-origin: center;
}

/* orbital-ring-indicator removed */

.orbital-energy-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-trail-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(220, 200, 255, 0.8);
  box-shadow: 0 0 8px var(--energy-primary), 0 0 16px var(--energy-secondary);
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════
   GEOMETRIC CORE — 3D Wireframe Structure
   ═══════════════════════════════════════════════ */
.core-geometric {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--core-size);
  height: var(--core-size);
  z-index: 50;
  pointer-events: none;
}

/* 3D Scene container */
.core-3d-scene {
  position: absolute;
  inset: 0;
  perspective: 800px;
  perspective-origin: 50% 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-3d-floater {
  position: relative;
  animation: coreBreathe 8s ease-in-out infinite;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Glow overlays removed for clean transparent logo */
.core-3d-floater::before,
.core-3d-floater::after {
  display: none;
}

.core-hero-img {
  position: relative;
  z-index: 1;
  width: var(--core-size);
  height: var(--core-size);
  object-fit: contain;
  animation: coreImgBreath 5s ease-in-out infinite;
  pointer-events: none;
}

/* Ambient glow behind core — disabled */
.core-ambient-glow {
  display: none;
}

/* (core-text and core-logo-img removed — replaced by core-hero-img) */

/* Spinning decorative rings around core */
.core-orbit-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.12);
  animation: orbitSpin 30s linear infinite;
  pointer-events: none;
}

.core-orbit-ring--2 {
  inset: -26px;
  border-style: dotted;
  border-color: rgba(167, 139, 250, 0.06);
  animation-duration: 50s;
  animation-direction: reverse;
}

/* Volumetric light rays behind core */
.core-volumetric-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,   var(--vol-light-color) 8deg,  transparent 16deg,
      transparent 30deg,  var(--vol-light-color) 38deg, transparent 46deg,
      transparent 60deg,  var(--vol-light-color) 68deg, transparent 76deg,
      transparent 90deg,  var(--vol-light-color) 98deg, transparent 106deg,
      transparent 120deg, var(--vol-light-color) 128deg, transparent 136deg,
      transparent 150deg, var(--vol-light-color) 158deg, transparent 166deg,
      transparent 180deg, var(--vol-light-color) 188deg, transparent 196deg,
      transparent 210deg, var(--vol-light-color) 218deg, transparent 226deg,
      transparent 240deg, var(--vol-light-color) 248deg, transparent 256deg,
      transparent 270deg, var(--vol-light-color) 278deg, transparent 286deg,
      transparent 300deg, var(--vol-light-color) 308deg, transparent 316deg,
      transparent 330deg, var(--vol-light-color) 338deg, transparent 346deg,
      transparent 360deg
    );
  mask-image: radial-gradient(circle, transparent 10%, black 20%, black 50%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle, transparent 10%, black 20%, black 50%, transparent 75%);
  animation: volRaysSpin 60s linear infinite;
  opacity: var(--vol-light-intensity);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  filter: blur(2px);
}

/* Assembly particles removed — replaced by Apple-style entrance */

/* Energy beam canvas overlay */
.energy-beam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 35;
}

/* "Digital Ecosystem" label — sits between orbital system and footer */
.home-ecosystem-label {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(124, 58, 237, 0.45);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* "Add my business" planet style */
.orbit-world-img--add {
  border-style: dashed;
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.04);
  color: rgba(124, 58, 237, 0.5);
}

.orbit-world--add:hover .orbit-world-img--add {
  border-color: var(--purple-400);
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-400);
}

/* Stand-by planet (e.g. Estephano) */
/* Light background for logos that need it (e.g. Lina Tour) */
.orbit-world--light-bg .orbit-world-img {
  background: #ffffff;
}
.orbit-world--light-bg .orbit-world-img img {
  object-fit: contain;
  padding: 6px;
}

.orbit-world--standby {
  opacity: 0.55 !important;
  filter: grayscale(1) brightness(0.7);
}

.orbit-world--standby .orbit-world-img {
  border-style: dashed;
  border-color: rgba(100, 100, 120, 0.4) !important;
  box-shadow: none !important;
}

.orbit-world-standby-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 220, 235, 0.85);
  background: rgba(40, 35, 60, 0.92);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
  z-index: 10;
}

/* Sun corona — inner ring */
.orbital-center-corona {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.12) 0%,
    rgba(124, 58, 237, 0.06) 45%,
    transparent 70%
  );
  animation: sunPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Sun corona — outer halo */
.orbital-center-corona--outer {
  inset: -110px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.05) 0%,
    rgba(124, 58, 237, 0.015) 50%,
    transparent 70%
  );
  animation: sunPulse 5s ease-in-out infinite reverse;
}

.orbital-center-glow {
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.22) 0%,
    rgba(124, 58, 237, 0.12) 25%,
    rgba(124, 58, 237, 0.04) 50%,
    transparent 70%
  );
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
  animation: sunBreath 3.5s ease-in-out infinite;
}

.orbital-center-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.12);
  animation: orbitSpin 40s linear infinite;
}

.orbital-center-ring--reverse {
  inset: -16px;
  border-style: dotted;
  border-color: rgba(167, 139, 250, 0.06);
  animation: orbitSpin 60s linear infinite reverse;
}

/* --- Point Lights (subtle glow near center) --- */
.orbital-point-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
}

.point-light {
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.3) 0%,
    rgba(124, 58, 237, 0.1) 40%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* --- Orbit Worlds (planets — positioned by JS) --- */
.orbit-world {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity, filter, left, top;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
}

.orbit-world-glow {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.18) 0%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ─── Holographic Node Container ─── */
.orbit-world-holo {
  position: relative;
  width: 96px;
  height: 96px;
}

/* Hexagonal frame border */
.orbit-world-holo-frame {
  position: absolute;
  inset: -4px;
  clip-path: polygon(
    50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
  );
  background: linear-gradient(
    135deg,
    var(--holo-frame-color) 0%,
    rgba(100, 200, 255, 0.15) 50%,
    var(--holo-frame-color) 100%
  );
  z-index: 0;
}

/* Holographic shimmer overlay — disabled for crisp look */
.orbit-world-holo-shimmer {
  display: none;
}

/* World Image — clipped to hexagonal shape */
.orbit-world-img {
  width: 96px;
  height: 96px;
  clip-path: polygon(
    50% 2%, 91% 26%, 91% 74%, 50% 98%, 9% 74%, 9% 26%
  );
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: rgba(8, 6, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Holographic lighting overlay — disabled for crisp look */
.orbit-world-img::before,
.orbit-world-img::after {
  display: none;
}

.orbit-world-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1) brightness(1) contrast(1);
  transition: filter 0.4s ease;
  position: relative;
  z-index: 1;
}

.orbit-world:hover .orbit-world-holo-frame {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.6) 0%,
    rgba(100, 200, 255, 0.3) 50%,
    rgba(167, 139, 250, 0.6) 100%
  );
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
}

.orbit-world:hover .orbit-world-img img {
  filter: saturate(1.1) brightness(0.95) contrast(1.05);
}

/* Scanline on hover */
.orbit-world:hover .orbit-world-holo::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    50% 2%, 91% 26%, 91% 74%, 50% 98%, 9% 74%, 9% 26%
  );
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(167, 139, 250, 0.06) 2px,
    rgba(167, 139, 250, 0.06) 3px
  );
  pointer-events: none;
  z-index: 6;
}

/* --- World Name (visible, clean) --- */
.orbit-world-name {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

.orbit-world:hover .orbit-world-name {
  opacity: 1 !important;
  text-shadow:
    0 0 12px rgba(167, 139, 250, 0.5),
    0 0 30px rgba(124, 58, 237, 0.2);
}

/* Data readout text below node name */
.orbit-world-readout {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, 0.35);
  text-align: center;
  display: block;
  margin-top: -2px;
}

/* --- Ripple wave container (centered on planet) --- */
.orbit-world-ripples {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  pointer-events: none;
  z-index: 0;
}

/* Individual ripple wave ring */
.ripple-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(167, 139, 250, 0.5);
  animation: rippleExpand 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
}

/* --- Active planet state (orbit paused, emitting waves) --- */
.orbit-world--active .orbit-world-holo-frame {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.7) 0%,
    rgba(100, 200, 255, 0.35) 50%,
    rgba(167, 139, 250, 0.7) 100%
  );
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.5));
}

.orbit-world--active .orbit-world-name {
  opacity: 1 !important;
  text-shadow:
    0 0 12px rgba(167, 139, 250, 0.6),
    0 0 30px rgba(124, 58, 237, 0.3);
}

/* "Add my business" — hexagonal dashed style */
.orbit-world--add .orbit-world-holo-frame {
  background: none;
}

.orbit-world--add .orbit-world-img {
  background: rgba(124, 58, 237, 0.04);
  color: rgba(124, 58, 237, 0.5);
}

.orbit-world--add .orbit-world-holo-shimmer {
  display: none;
}

.orbit-world--add:hover .orbit-world-holo-frame {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.3));
}

.orbit-world--add:hover .orbit-world-img {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-400);
}


/* ═══════════════════════════════════════════════
   SIDE PANELS — Desktop Glassmorphism HUD
   ═══════════════════════════════════════════════ */

.home-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: var(--panel-width);
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: var(--space-5) var(--space-4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  box-shadow:
    inset 0 1px 0 0 var(--panel-border-top),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

.home-panel--left {
  left: var(--space-5);
  animation: panelSlideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}

.home-panel--right {
  right: var(--space-5);
  animation: panelSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.8s forwards;
}

/* Top edge glow */
.home-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.home-panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.home-panel-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.home-panel-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.home-panel-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.home-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.home-panel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.home-panel-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5), 0 0 12px rgba(16, 185, 129, 0.2);
  animation: indicatorPulse 2s ease-in-out infinite;
}

/* ─── Rich Panel Components ─── */

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

.panel-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green-glow), 0 0 16px rgba(57, 255, 20, 0.2);
  animation: neonGreenDotPulse 2.5s ease-in-out infinite;
}

.panel-header-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Sparkline charts */
.panel-sparkline {
  width: 100%;
  height: 32px;
  display: block;
}

/* Big metric */
.panel-big-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.panel-big-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFFFFF;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.panel-big-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--neon-green);
  background: var(--neon-green-bg);
  border: 1px solid var(--neon-green-border);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Stat row */
.panel-stat-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.panel-stat-big {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--neon-green);
  font-family: var(--font-mono);
  text-shadow: 0 0 8px var(--neon-green-glow), 0 0 20px rgba(57, 255, 20, 0.15);
  animation: neonGreenGlowPulse 3s ease-in-out infinite;
}

.panel-stat-of {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
}

/* Circular gauge */
.panel-gauge {
  width: 64px;
  height: 64px;
}

.panel-gauge-value {
  position: relative;
  margin-top: -46px;
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--purple-400);
  font-family: var(--font-mono);
  text-shadow: 0 0 6px rgba(139, 92, 246, 0.4), 0 0 14px rgba(139, 92, 246, 0.15);
}

/* Mini stat rows */
.panel-mini-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.panel-mini-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-mini-value {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
}

/* Right panel cards */
.panel-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.panel-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-card-icon {
  font-size: 1rem;
  color: var(--purple-400);
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.4));
}

.panel-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.panel-card-subtitle {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.panel-card-desc {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.panel-card-tags {
  display: flex;
  gap: 6px;
}

.panel-card-tag {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--purple-400);
  font-family: var(--font-mono);
}

.panel-card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-card-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.panel-card-stat-val {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
}

.panel-card-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hide panels on tablet and mobile */
@media (max-width: 1100px) {
  .home-panel {
    display: none;
  }
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  .home-panel {
    background: rgba(38, 38, 42, 0.97);
  }
}


/* ═══════════════════════════════════════════════
   HOME ACTIONS & EMPTY STATE
   ═══════════════════════════════════════════════ */

.home-admin-bar {
  position: fixed;
  top: var(--space-5);
  right: calc(var(--space-5) + 48px); /* leave room for notification bell */
  display: flex;
  gap: 8px;
  z-index: 10;
}

.home-admin {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-normal);
  -webkit-tap-highlight-color: transparent;
}

.home-admin:hover {
  color: var(--purple-400);
  border-color: var(--purple-500);
  box-shadow: var(--shadow-glow);
}

.home-actions {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  gap: var(--space-3);
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}

.home-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
}

.home-action-btn:hover {
  color: var(--purple-400);
  border-color: var(--purple-500);
}

/* === Empty State === */
.home-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.home-empty-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--purple-400);
}

.home-empty-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.home-empty-text {
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════
   FOOTER — Developer credit
   ═══════════════════════════════════════════════ */

.home-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.62rem;
  color: rgba(167, 139, 250, 0.25);
  letter-spacing: 0.08em;
  padding: 10px 0;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════
   COSMOS BUBBLE — Compact floating notification
   ═══════════════════════════════════════════════ */

.cosmos-bubble {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  z-index: 9999;
  background: rgba(12, 8, 28, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 16px;
  padding: 14px 20px 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 24px rgba(124, 58, 237, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 260px;
  max-width: 340px;
  pointer-events: auto;
  cursor: pointer;
}

.cosmos-bubble--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cosmos-bubble--closing {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cosmos-bubble-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cosmos-bubble-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple-400);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
  animation: cosmosPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes cosmosPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.cosmos-bubble-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cosmos-bubble-name {
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.cosmos-bubble-msg {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.cosmos-bubble-bar {
  width: 100%;
  height: 2px;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.cosmos-bubble-bar-fill {
  width: 30%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-400), var(--purple-300));
  animation: cosmosBarSlide 1.8s ease-in-out infinite;
}

@keyframes cosmosBarSlide {
  0%   { transform: translateX(-100%); width: 30%; }
  50%  { width: 50%; }
  100% { transform: translateX(400%); width: 30%; }
}


/* ═══════════════════════════════════════════════
   TIMELINE OVERLAY — Futuristic Progress View
   ═══════════════════════════════════════════════ */

.timeline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 3, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-overlay--active { opacity: 1; }
.timeline-overlay--exit { opacity: 0; }

.timeline-container {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}

.timeline-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: var(--space-2);
  transition: color 0.2s;
}
.timeline-close:hover { color: var(--text-primary); }

.timeline-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
  letter-spacing: 0.03em;
}

.timeline-subtitle {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(124, 58, 237, 0.6);
  margin: 0 0 var(--space-6);
}

.timeline-track {
  position: relative;
  padding-left: 28px;
}

.timeline-line-bg {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 9px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(124, 58, 237, 0.4), rgba(124, 58, 237, 0.1));
}

.timeline-step {
  position: relative;
  padding: 0 0 var(--space-5) 0;
  opacity: 0;
  transform: translateY(10px);
  animation: timelineStepIn 0.4s ease forwards;
}

@keyframes timelineStepIn {
  to { opacity: 1; transform: translateY(0); }
}

.timeline-node {
  position: absolute;
  left: -28px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(100, 100, 120, 0.4);
  background: rgba(20, 18, 35, 0.9);
  transition: all 0.3s;
}

.timeline-step--completed .timeline-node {
  border-color: rgba(0, 220, 180, 0.8);
  background: rgba(0, 220, 180, 0.2);
  box-shadow: 0 0 8px rgba(0, 220, 180, 0.4), 0 0 20px rgba(0, 220, 180, 0.15);
}

.timeline-step--active .timeline-node {
  border-color: rgba(167, 139, 250, 0.9);
  background: rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5), 0 0 20px rgba(124, 58, 237, 0.2);
  animation: timelinePulse 2s ease-in-out infinite;
}

@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(124, 58, 237, 0.5), 0 0 20px rgba(124, 58, 237, 0.2); }
  50% { box-shadow: 0 0 14px rgba(124, 58, 237, 0.7), 0 0 30px rgba(124, 58, 237, 0.3); }
}

.timeline-step--pending .timeline-node {
  border-color: rgba(80, 80, 100, 0.4);
  background: rgba(30, 28, 45, 0.6);
}

.timeline-step-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(15, 12, 30, 0.6);
  border: 1px solid rgba(124, 58, 237, 0.1);
  border-radius: 10px;
}

.timeline-step--completed .timeline-step-content {
  border-color: rgba(0, 220, 180, 0.15);
}

.timeline-step--active .timeline-step-content {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.06);
}

.timeline-step-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-step--pending .timeline-step-label {
  color: var(--text-muted);
}

.timeline-step-status {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.timeline-step--completed .timeline-step-status {
  color: rgba(0, 220, 180, 0.9);
  background: rgba(0, 220, 180, 0.1);
}

.timeline-step--active .timeline-step-status {
  color: rgba(167, 139, 250, 0.9);
  background: rgba(124, 58, 237, 0.15);
}

.timeline-step--pending .timeline-step-status {
  color: rgba(120, 120, 140, 0.7);
  background: rgba(50, 50, 65, 0.4);
}

.timeline-empty, .timeline-loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: 0.85rem;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — Solar System
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .home-page {
    padding-top: 0;
  }

  .orbital-system {
    top: 46%;
    width: clamp(340px, 78vmin, 480px);
    height: clamp(340px, 78vmin, 480px);
  }

  .home-ecosystem-label {
    bottom: 28px;
    font-size: 0.62rem;
  }

  /* Core responsive */
  .core-geometric {
    --core-size: var(--core-size-mobile);
  }
  .core-hero-img { width: var(--core-size-mobile); height: var(--core-size-mobile); }
  .core-volumetric-rays { width: 400px; height: 400px; }
  .core-ambient-glow { width: 250px; height: 250px; }
  .core-orbit-ring { inset: -10px; }
  .core-orbit-ring--2 { inset: -18px; }

  /* Holographic nodes responsive */
  .orbit-world-holo {
    width: 80px;
    height: 80px;
  }

  .orbit-world-img {
    width: 80px;
    height: 80px;
  }

  .orbit-world-ripples {
    width: 80px;
    height: 80px;
  }

  .orbit-world-name {
    font-size: 0.58rem;
  }

  .orbit-world-readout {
    display: none;
  }

  .orbit-world-glow {
    width: 106px;
    height: 106px;
  }

  .orbital-energy-ring {
    width: 85%;
    height: 85%;
  }

  .point-light {
    width: 60px;
    height: 60px;
  }

  /* ── Mobile performance: disable heavy effects ── */
  .orbit-world {
    will-change: transform;
  }
  .orbit-trail-dot,
  .point-light,
  .sun-glow {
    will-change: auto;
  }
  .core-3d-floater {
    will-change: auto;
    transform-style: flat;
  }
  .core-volumetric-rays {
    animation: none !important;
    opacity: 0.3;
  }
  .core-hero-img {
    animation: none !important;
    filter: brightness(1.1) contrast(1.1) saturate(1.05)
      drop-shadow(0 0 25px rgba(167,139,250,0.4));
  }
  .core-orbit-ring,
  .core-orbit-ring--2 {
    animation: none !important;
  }
  .orbital-center-ring,
  .orbital-center-ring--reverse {
    animation: none !important;
  }
  .orbital-energy-ring svg {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .home-page {
    padding-top: 0;
  }

  /* Move entire actions bar (admin icons + logout) to bottom, centered row */
  .home-actions {
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 60;
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0.7) 70%, transparent 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-admin-bar {
    position: static;
    display: flex;
    gap: 5px;
    padding-bottom: 0;
  }

  .home-admin {
    width: 34px;
    height: 34px;
  }

  .home-action-btn {
    padding: 5px 10px;
    font-size: 0.65rem;
    backdrop-filter: none;
  }

  .home-content {
    padding-top: 18vh;
  }

  .home-badge {
    font-size: 0.6rem;
    padding: 2px var(--space-2);
    margin-bottom: 0;
  }

  .home-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    letter-spacing: 0.04em;
    margin-bottom: 0;
  }

  .orbital-system {
    top: 46%;
    width: clamp(300px, 92vw, 375px);
    height: clamp(300px, 92vw, 375px);
  }

  .home-footer {
    display: none;
  }

  /* Core responsive - small */
  .core-geometric {
    --core-size: var(--core-size-sm);
  }
  .core-hero-img { width: var(--core-size-sm); height: var(--core-size-sm); }
  .core-volumetric-rays { width: 250px; height: 250px; opacity: 0.5; }
  .core-ambient-glow { width: 160px; height: 160px; }
  .core-orbit-ring { display: none; }

  .home-ecosystem-label {
    bottom: 24px;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }

  /* Holographic nodes responsive - small */
  .orbit-world-holo {
    width: 56px;
    height: 56px;
  }

  .orbit-world-img {
    width: 56px;
    height: 56px;
  }

  .orbit-world-ripples {
    width: 56px;
    height: 56px;
  }

  .orbit-world-name {
    font-size: 0.48rem;
    letter-spacing: 0.04em;
  }

  .orbit-world-readout {
    display: none;
  }

  .orbit-world-glow {
    width: 72px;
    height: 72px;
    top: -8px;
  }

  .orbital-energy-ring {
    width: 90%;
    height: 90%;
  }

  .point-light {
    width: 40px;
    height: 40px;
  }

  /* Bubble compact for small screens */
  .cosmos-bubble {
    min-width: 220px;
    max-width: 300px;
    bottom: 24px;
    padding: 12px 16px 10px;
    border-radius: 12px;
  }

  .cosmos-bubble-name {
    font-size: 0.76rem;
  }

  .cosmos-bubble-msg {
    font-size: 0.65rem;
  }
}


/* ═══════════════════════════════════════════════
   MOBILE KPI STRIP — Compact metrics for mobile
   Only visible when desktop side panels are hidden
   ═══════════════════════════════════════════════ */

.mobile-kpi-strip {
  display: none;  /* Hidden on desktop (panels are visible) */
}

@media (max-width: 1100px) {
  .mobile-kpi-strip {
    display: block;
    position: fixed;
    bottom: 78px;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 12px;
    pointer-events: none;
  }

  .mobile-kpi-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
    pointer-events: auto;
  }

  .mobile-kpi-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-kpi-card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(18, 18, 26, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    min-width: 0;
  }

  .mobile-kpi-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.15);
    color: rgba(167, 139, 250, 0.9);
  }

  .mobile-kpi-icon--revenue {
    background: rgba(57, 255, 20, 0.1);
    color: rgba(57, 255, 20, 0.85);
  }

  .mobile-kpi-icon--txn {
    background: rgba(56, 189, 248, 0.1);
    color: rgba(56, 189, 248, 0.85);
  }

  .mobile-kpi-icon--biz {
    background: rgba(249, 115, 22, 0.1);
    color: rgba(249, 115, 22, 0.85);
  }

  .mobile-kpi-data {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .mobile-kpi-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .mobile-kpi-label {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Smaller mobile: tighter spacing */
@media (max-width: 480px) {
  .mobile-kpi-strip {
    bottom: 56px;
    padding: 0 8px;
    margin-bottom: env(safe-area-inset-bottom);
  }

  .mobile-kpi-card {
    padding: 6px 10px;
    gap: 6px;
    border-radius: 10px;
  }

  .mobile-kpi-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .mobile-kpi-icon svg {
    width: 12px;
    height: 12px;
  }

  .mobile-kpi-value {
    font-size: 0.75rem;
  }

  .mobile-kpi-label {
    font-size: 0.48rem;
  }
}


/* ═══════════════════════════════════════════════
   SUPERNOVA ANIMATION
   ═══════════════════════════════════════════════ */

.supernova-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.supernova-overlay--active {
  opacity: 1;
}

.supernova-overlay--fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.supernova-flash {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(190, 165, 255, 0.7) 30%,
    rgba(124, 58, 237, 0.4) 60%,
    transparent 80%
  );
  animation: supernovaFlash 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes supernovaFlash {
  0% { width: 0; height: 0; opacity: 1; }
  40% { width: 350px; height: 350px; opacity: 0.9; }
  100% { width: 600px; height: 600px; opacity: 0; }
}

.supernova-ring {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), inset 0 0 20px rgba(124, 58, 237, 0.2);
  animation: supernovaRing 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.supernova-ring--2 {
  border-color: rgba(124, 58, 237, 0.4);
  animation-delay: 0.12s;
}

.supernova-ring--3 {
  border-color: rgba(124, 58, 237, 0.25);
  border-width: 1px;
  animation-delay: 0.25s;
}

@keyframes supernovaRing {
  0% { width: 0; height: 0; opacity: 1; }
  60% { opacity: 0.7; }
  100% { width: 500px; height: 500px; opacity: 0; }
}

.supernova-particles {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
}

.supernova-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple-400);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
  animation: supernovaParticle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes supernovaParticle {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}


/* ═══════════════════════════════════════════════
   APPOINTMENT MODAL
   ═══════════════════════════════════════════════ */

.appt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: var(--space-4);
}

.appt-modal-overlay--visible {
  opacity: 1;
}

.appt-modal-overlay--closing {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.appt-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(12, 8, 28, 0.95);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 20px;
  padding: var(--space-6);
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.96);
  animation: apptModalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

@keyframes apptModalIn {
  to { transform: translateY(0) scale(1); }
}

.appt-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.appt-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.appt-modal-header {
  text-align: center;
  margin-bottom: var(--space-5);
}

.appt-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  color: var(--purple-400);
}

.appt-modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

.appt-modal-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.appt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.appt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.appt-row {
  display: flex;
  gap: var(--space-3);
}

.appt-field--half {
  flex: 1;
}

.appt-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.appt-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.appt-input:focus {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.appt-input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.appt-textarea {
  resize: vertical;
  min-height: 70px;
}

.appt-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  margin-top: var(--space-2);
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}

.appt-submit:hover {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-400));
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
}

.appt-submit:active {
  transform: translateY(0);
}

.appt-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Success state */
.appt-success {
  text-align: center;
  padding: var(--space-6) 0;
}

.appt-success-icon {
  color: #22c55e;
  margin-bottom: var(--space-3);
  animation: apptSuccessPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes apptSuccessPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.appt-success-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.appt-success-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .appt-modal {
    padding: var(--space-5);
    border-radius: 16px;
  }

  .appt-modal-title {
    font-size: 1.2rem;
  }

  .appt-row {
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════════
   CURTAIN — JS Spring-Physics Driven (no keyframes)
   All movement controlled by requestAnimationFrame
   CSS only defines structure, textures & base styles
   ═══════════════════════════════════════════════ */

.curtain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: all;
  overflow: hidden;
}

/* ─── Scene dimmer — opacity driven by JS via --dim ─── */
.curtain-dimmer {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 0;
  will-change: opacity;
}

/* ─── Curtain panels ─── */
.curtain-panel {
  position: absolute;
  top: -6%;
  bottom: -6%;
  width: 56%;
  will-change: transform;
  transform: translate3d(-115%, 0, 0);
}

.curtain-panel--left {
  left: 0;
  transform-origin: left center;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(167, 139, 250, 0.018) 10px,
      transparent 12px,
      transparent 24px,
      rgba(255, 255, 255, 0.01) 26px,
      transparent 28px,
      transparent 42px,
      rgba(0, 0, 0, 0.045) 44px,
      transparent 46px,
      transparent 58px,
      rgba(167, 139, 250, 0.012) 60px,
      transparent 62px,
      transparent 74px
    ),
    linear-gradient(
      95deg,
      #04020a 0%,
      #090513 10%,
      #0e091e 22%,
      #130c28 35%,
      #180f33 48%,
      #1d133e 60%,
      #1a1138 72%,
      #140d2a 84%,
      #0b0716 94%,
      #05020a 100%
    );
}

.curtain-panel--right {
  right: 0;
  transform-origin: right center;
  transform: translate3d(115%, 0, 0);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(167, 139, 250, 0.018) 10px,
      transparent 12px,
      transparent 24px,
      rgba(255, 255, 255, 0.01) 26px,
      transparent 28px,
      transparent 42px,
      rgba(0, 0, 0, 0.045) 44px,
      transparent 46px,
      transparent 58px,
      rgba(167, 139, 250, 0.012) 60px,
      transparent 62px,
      transparent 74px
    ),
    linear-gradient(
      -95deg,
      #04020a 0%,
      #090513 10%,
      #0e091e 22%,
      #130c28 35%,
      #180f33 48%,
      #1d133e 60%,
      #1a1138 72%,
      #140d2a 84%,
      #0b0716 94%,
      #05020a 100%
    );
}

/* Gold trim on inner edges — JS controls opacity */
.curtain-trim {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5px;
  opacity: 0;
  will-change: opacity;
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.03) 0%,
    rgba(212, 175, 55, 0.12) 15%,
    rgba(212, 175, 55, 0.28) 35%,
    rgba(212, 175, 55, 0.38) 50%,
    rgba(212, 175, 55, 0.28) 65%,
    rgba(212, 175, 55, 0.12) 85%,
    rgba(212, 175, 55, 0.03) 100%
  );
}

.curtain-panel--left .curtain-trim { right: 0; }
.curtain-panel--right .curtain-trim { left: 0; }

/* Drape fold texture */
.curtain-panel--left::before,
.curtain-panel--right::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 34px,
      rgba(0, 0, 0, 0.05) 36px,
      rgba(0, 0, 0, 0.08) 38px,
      rgba(0, 0, 0, 0.05) 40px,
      transparent 42px,
      transparent 68px,
      rgba(255, 255, 255, 0.006) 70px,
      transparent 72px,
      transparent 90px
    );
  pointer-events: none;
}

/* Inner edge shadow for depth — JS controls opacity */
.curtain-edge-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.curtain-panel--left .curtain-edge-shadow {
  right: -2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5));
}

.curtain-panel--right .curtain-edge-shadow {
  left: -2px;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.5));
}

/* ─── Center seam glow — JS controls opacity ─── */
.curtain-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 175, 55, 0.06) 12%,
    rgba(167, 139, 250, 0.18) 38%,
    rgba(212, 175, 55, 0.22) 50%,
    rgba(167, 139, 250, 0.18) 62%,
    rgba(212, 175, 55, 0.06) 88%,
    transparent 100%
  );
  opacity: 0;
  z-index: 10;
  filter: blur(0.8px);
  will-change: opacity;
}

/* Seam halo — soft wide glow */
.curtain-seam-halo {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 50%;
  width: 50px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(167, 139, 250, 0.07) 0%,
    rgba(124, 58, 237, 0.035) 40%,
    transparent 70%
  );
  opacity: 0;
  z-index: 9;
  filter: blur(8px);
  will-change: opacity;
}

/* ─── Light leak — JS controls width + opacity ─── */
.curtain-light-leak {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(167, 139, 250, 0.1) 0%,
    rgba(124, 58, 237, 0.05) 30%,
    rgba(255, 255, 255, 0.025) 50%,
    transparent 70%
  );
  opacity: 0;
  z-index: 8;
  filter: blur(18px);
  will-change: width, opacity;
}

/* ─── Top valance (pelmet) — JS controls opacity ─── */
.curtain-valance {
  position: absolute;
  top: 0;
  left: -2%;
  right: -2%;
  height: 42px;
  z-index: 20;
  background:
    linear-gradient(
      180deg,
      #0d0816 0%,
      #130c26 35%,
      #191035 65%,
      rgba(25, 16, 53, 0.8) 88%,
      rgba(25, 16, 53, 0) 100%
    );
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.12);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  will-change: opacity;
}

.curtain-valance::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
}