@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700;900&display=swap');

/* --- DEFAULT LIGHT MODE DESIGN SYSTEM VARIABLES --- */
:root {
  /* Dynamic Neon Spectrum (Adapted slightly darker for high readability in Light Mode) */
  --neon-cyan: #008fa8;
  --neon-cyan-glow: rgba(0, 143, 168, 0.25);
  --neon-cyan-dim: rgba(0, 143, 168, 0.05);

  --neon-purple: #780dcc;
  --neon-purple-glow: rgba(120, 13, 204, 0.25);
  --neon-purple-dim: rgba(120, 13, 204, 0.05);

  --neon-pink: #d10046;
  --neon-pink-glow: rgba(209, 0, 70, 0.25);
  --neon-pink-dim: rgba(209, 0, 70, 0.05);

  --neon-amber: #c25d00;
  --neon-amber-glow: rgba(194, 93, 0, 0.25);
  --neon-amber-dim: rgba(194, 93, 0, 0.05);

  --neon-green: #00990f;
  --neon-green-glow: rgba(0, 153, 15, 0.25);
  --neon-green-dim: rgba(0, 153, 15, 0.05);

  /* Light Theme backgrounds and typography */
  --bg-dark: #faf9fe;
  --bg-deep: #f1eff9;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-hover: rgba(0, 0, 0, 0.15);
  
  --text-pure: #12101a;
  --text-main: #3e3b4f;
  --text-muted: #7d788e;
  
  --font-header: 'Orbitron', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- DARK MODE OVERRIDES (Applied on body.dark-theme) --- */
body.dark-theme {
  /* Glowing Neon Spectrum (Bright, saturated neon values) */
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: rgba(0, 240, 255, 0.4);
  --neon-cyan-dim: rgba(0, 240, 255, 0.08);

  --neon-purple: #b026ff;
  --neon-purple-glow: rgba(176, 38, 255, 0.4);
  --neon-purple-dim: rgba(176, 38, 255, 0.08);

  --neon-pink: #ff0055;
  --neon-pink-glow: rgba(255, 0, 85, 0.4);
  --neon-pink-dim: rgba(255, 0, 85, 0.08);

  --neon-amber: #ffaa00;
  --neon-amber-glow: rgba(255, 170, 0, 0.4);
  --neon-amber-dim: rgba(255, 170, 0, 0.08);

  --neon-green: #39ff14;
  --neon-green-glow: rgba(57, 255, 20, 0.4);
  --neon-green-dim: rgba(57, 255, 20, 0.08);

  /* Dark Theme backgrounds and typography */
  --bg-dark: #040307;
  --bg-deep: #08060f;
  --glass-bg: rgba(12, 10, 22, 0.7);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  
  --text-pure: #ffffff;
  --text-main: #e2e0eb;
  --text-muted: #8e8b9f;
}

/* --- ACCESSIBILITY / READABILITY MODIFIERS --- */
body.large-text {
  font-size: 1.15rem;
}
body.large-text p, 
body.large-text li, 
body.large-text a, 
body.large-text span {
  line-height: 1.8;
  font-weight: 500;
}
body.large-text .section-title {
  font-size: 3.5rem;
}
body.large-text .exec-responsibilities li,
body.large-text .dept-description,
body.large-text .timeline-desc {
  font-size: 1.05rem;
}
body.large-text .exec-card, 
body.large-text .dept-card, 
body.large-text .timeline-content,
body.large-text .revenue-card {
  background: var(--bg-deep) !important;
  border-width: 2px !important;
}

/* Disable motion if requested by OS */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  #three-canvas {
    display: none;
  }
}

/* --- RESET & BASE STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--neon-cyan) var(--bg-dark);
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Dynamic Grid Overlay (Adapts to Light / Dark background) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(176, 38, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}
body.dark-theme::before {
  background: 
    linear-gradient(rgba(176, 38, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.012) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Ambient Colorful Glows */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 0, 85, 0.035) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.035) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 70%, rgba(176, 38, 255, 0.035) 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.25);
  border-radius: 4px;
  border: 2px solid var(--bg-dark);
  transition: var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

/* --- CANVAS LAYERS --- */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#magic-paint-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

/* --- 10-SECOND INTRO LOADER (HIGH FIDELITY INTRO VIDEO) --- */
#intro-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #030206; /* Maintain dark backdrop for cinema video loader */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#intro-loader.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* Dark Vignette Overlay Shielding Overlay Text & Sharpening Video Content */
#intro-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.15) 0%, rgba(3, 2, 6, 0.7) 100%);
  z-index: 1.5;
  pointer-events: none;
}

.intro-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95; /* Set high opacity to prevent washed-out blurry look */
  z-index: 1;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast; /* Webkit sharp image render */
}

.intro-canvas-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.intro-content {
  position: relative;
  z-index: 2; /* Sits above vignette and video */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem;
}

.intro-logo {
  font-family: var(--font-header);
  font-size: 3.75rem;
  font-weight: 900;
  color: #ffffff; /* Keep white for cinematic overlay */
  letter-spacing: 0.6rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.7), 0 0 40px rgba(176, 38, 255, 0.4);
  animation: logo-color-flicker 4s infinite alternate;
}

.intro-logo-image {
  max-width: 480px;
  width: 85%;
  height: auto;
  margin-bottom: 2rem;
  animation: logo-image-flicker 4s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 30px rgba(176, 38, 255, 0.3));
}

.intro-subtitle {
  font-family: var(--font-header);
  font-size: 1.05rem;
  letter-spacing: 0.35rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 3.5rem;
}

.intro-progress-container {
  width: 280px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.intro-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff0055, #b026ff, #00f0ff);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.intro-timer {
  font-family: var(--font-header);
  font-size: 0.9rem;
  color: #00f0ff;
  letter-spacing: 0.15rem;
  margin-bottom: 2.5rem;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.skip-intro-btn {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #ffffff;
  font-family: var(--font-header);
  font-size: 0.8rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-medium);
  backdrop-filter: blur(10px);
}

.skip-intro-btn:hover {
  background: #00f0ff;
  border-color: #00f0ff;
  color: #020104;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
}

/* --- HEADER & NAVIGATION --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(250, 249, 254, 0.72);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: var(--transition-medium);
}

body.dark-theme header {
  background: rgba(4, 3, 7, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

header.scrolled {
  padding: 1rem 3rem;
  background: rgba(250, 249, 254, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.dark-theme header.scrolled {
  background: rgba(4, 3, 7, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  height: 38px;
  width: auto;
  display: block;
  transition: height var(--transition-medium), transform var(--transition-fast) ease, filter var(--transition-fast) ease;
}

.logo-image:hover {
  transform: scale(1.05);
}

header.scrolled .logo-image {
  height: 32px;
}

body.dark-theme .logo-image {
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-header);
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  font-weight: 500;
  transition: var(--transition-fast);
  position: relative;
  padding: 0.5rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--neon-cyan);
  transition: var(--transition-medium);
  box-shadow: 0 0 8px var(--neon-cyan);
}

.nav-links a:hover, .nav-links a.active {
  color: var(--text-pure);
  text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.nav-links a:hover::after, .nav-links a.active::after {
  width: 100%;
}

/* Accessibility Control Toggles */
.accessibility-controls {
  display: flex;
  gap: 1rem;
}

.control-btn {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-medium);
  position: relative;
}

body.dark-theme .control-btn {
  background: rgba(255, 255, 255, 0.02);
}

.control-btn:hover {
  color: var(--text-pure);
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

body.dark-theme .control-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.control-btn.active[data-action="readability"] {
  border-color: var(--neon-amber);
  color: var(--neon-amber);
  box-shadow: 0 0 10px var(--neon-amber-glow);
  background: var(--neon-amber-dim);
}

.control-btn.active[data-action="magicpaint"] {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
  background: var(--neon-cyan-dim);
}

/* Theme Toggle Sun/Moon Icon rules */
.control-btn[data-action="theme-toggle"] .icon-sun {
  display: none;
}
.control-btn[data-action="theme-toggle"] .icon-moon {
  display: block;
}
body.dark-theme .control-btn[data-action="theme-toggle"] .icon-sun {
  display: block;
}
body.dark-theme .control-btn[data-action="theme-toggle"] .icon-moon {
  display: none;
}

.control-btn[data-action="theme-toggle"]:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
  background: var(--neon-cyan-dim);
}

/* Tooltips */
.control-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  color: var(--text-pure);
  font-size: 0.7rem;
  font-family: var(--font-header);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-medium);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

body.dark-theme .control-btn::before {
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.control-btn:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- STRUCTURE LAYOUT --- */
main {
  position: relative;
  z-index: 10;
  width: 100%;
}

section {
  padding: 8rem 10% 6rem 10%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.section-header {
  margin-bottom: 4rem;
  max-width: 700px;
}

.section-subtitle {
  font-family: var(--font-header);
  color: var(--neon-cyan);
  font-size: 0.9rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-shadow: 0 0 5px var(--neon-cyan-glow);
}

.section-subtitle::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 1px;
  background-color: var(--neon-cyan);
  box-shadow: 0 0 5px var(--neon-cyan);
}

.section-title {
  font-family: var(--font-header);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--text-pure);
  line-height: 1.15;
}

/* --- SECTION: HERO --- */
#hero {
  height: 100vh;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 5;
}

.hero-subtitle {
  font-family: var(--font-header);
  color: var(--neon-pink);
  font-size: 1.1rem;
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 10px var(--neon-pink-glow);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-subtitle-dot {
  width: 10px;
  height: 10px;
  background-color: var(--neon-pink);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-pink);
  animation: pulse-glow-pink 2s infinite;
}

.hero-title {
  font-family: var(--font-header);
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--text-pure);
  line-height: 0.95;
  margin-bottom: 2rem;
}

.hero-title span {
  display: block;
}

.hero-title .glow-text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--neon-cyan);
  text-shadow: 0 0 20px rgba(0, 143, 168, 0.05);
  animation: text-glow-pulse 3s infinite alternate;
}

body.dark-theme .hero-title .glow-text {
  -webkit-text-stroke: 1.5px var(--neon-cyan);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

.hero-description {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 3.5rem;
  font-weight: 300;
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-header);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border-radius: 4px;
  border: 1px solid var(--neon-pink);
  box-shadow: 0 0 15px var(--neon-pink-glow);
  transition: var(--transition-medium);
}

.btn-primary:hover {
  background: transparent;
  color: var(--neon-pink);
  box-shadow: 0 0 25px var(--neon-pink-glow), inset 0 0 15px rgba(209, 0, 70, 0.1);
  transform: translateY(-3px);
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-pure);
  text-decoration: none;
  font-family: var(--font-header);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border-radius: 4px;
  border: 1px solid var(--glass-border-hover);
  transition: var(--transition-medium);
  backdrop-filter: blur(8px);
}

body.dark-theme .btn-secondary {
  background: rgba(255, 255, 255, 0.02);
}

.btn-secondary:hover {
  background: var(--neon-cyan-dim);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan-glow);
  transform: translateY(-3px);
}

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  z-index: 5;
}

.scroll-text {
  font-family: var(--font-header);
  font-size: 0.7rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-lr;
  animation: scroll-text-float 2s infinite ease-in-out;
}

.scroll-line {
  width: 2px;
  height: 50px;
  background: linear-gradient(var(--neon-cyan), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background: var(--text-pure);
  box-shadow: 0 0 8px var(--text-pure);
  animation: scroll-slide 2.2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- SECTION: LEADERSHIP --- */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 5;
}

/* Executive Cards */
.exec-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition-medium);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  
  --card-glow-color: var(--neon-cyan);
  --card-glow-shadow: var(--neon-cyan-glow);
  --card-glow-dim: var(--neon-cyan-dim);
}

body.dark-theme .exec-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Color glowing card variations */
.exec-card.glow-purple {
  --card-glow-color: var(--neon-purple);
  --card-glow-shadow: var(--neon-purple-glow);
  --card-glow-dim: var(--neon-purple-dim);
}
.exec-card.glow-amber {
  --card-glow-color: var(--neon-amber);
  --card-glow-shadow: var(--neon-amber-glow);
  --card-glow-dim: var(--neon-amber-dim);
}
.exec-card.glow-pink {
  --card-glow-color: var(--neon-pink);
  --card-glow-shadow: var(--neon-pink-glow);
  --card-glow-dim: var(--neon-pink-dim);
}
.exec-card.glow-cyan {
  --card-glow-color: var(--neon-cyan);
  --card-glow-shadow: var(--neon-cyan-glow);
  --card-glow-dim: var(--neon-cyan-dim);
}
.exec-card.glow-green {
  --card-glow-color: var(--neon-green);
  --card-glow-shadow: var(--neon-green-glow);
  --card-glow-dim: var(--neon-green-dim);
}

/* Sci-fi Corners */
.exec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--card-glow-color);
  border-left: 2px solid var(--card-glow-color);
  opacity: 0.35;
  transition: var(--transition-fast);
}

.exec-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-bottom: 2px solid var(--card-glow-color);
  border-right: 2px solid var(--card-glow-color);
  opacity: 0.35;
  transition: var(--transition-fast);
}

.exec-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-glow-color);
  box-shadow: 0 12px 35px var(--card-glow-dim);
}

.exec-card:hover::before, .exec-card:hover::after {
  width: 25px;
  height: 25px;
  opacity: 1;
  box-shadow: 0 0 8px var(--card-glow-color);
}

/* Avatar Container */
.exec-avatar-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1.75rem;
  position: relative;
  padding: 4px;
  background: linear-gradient(135deg, var(--card-glow-color), rgba(0, 0, 0, 0.05));
  box-shadow: 0 0 12px var(--card-glow-dim);
  transition: var(--transition-medium);
}

body.dark-theme .exec-avatar-container {
  background: linear-gradient(135deg, var(--card-glow-color), rgba(255, 255, 255, 0.05));
}

.exec-card:hover .exec-avatar-container {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 0 20px var(--card-glow-shadow);
}

.exec-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--bg-deep);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.exec-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 50%;
  transition: transform var(--transition-medium);
}

/* Fallback Initials/Icon */
.exec-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-header);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-pure);
  text-shadow: 0 0 8px var(--card-glow-shadow);
  background: radial-gradient(circle, var(--card-glow-dim) 0%, var(--bg-deep) 100%);
  position: relative;
  z-index: 1;
}

.exec-avatar-fallback svg {
  width: 44px;
  height: 44px;
  color: var(--text-pure);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 8px var(--card-glow-shadow));
}

.exec-avatar-fallback::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  animation: rotate-dashed 20s infinite linear;
}

body.dark-theme .exec-avatar-fallback::after {
  border-color: rgba(255, 255, 255, 0.15);
}

.exec-name {
  font-family: var(--font-header);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-pure);
  margin-bottom: 0.25rem;
  letter-spacing: 0.05rem;
  transition: var(--transition-fast);
}

.exec-card:hover .exec-name {
  color: var(--card-glow-color);
  text-shadow: 0 0 8px var(--card-glow-shadow);
}

.exec-role {
  font-family: var(--font-header);
  font-size: 0.75rem;
  color: var(--card-glow-color);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-shadow: 0 0 5px var(--card-glow-shadow);
}

.exec-responsibilities {
  list-style: none;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--glass-border);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.exec-responsibilities li {
  font-size: 0.85rem;
  color: var(--text-main);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.9;
  transition: var(--transition-fast);
}

.exec-responsibilities li::before {
  content: '▪';
  color: var(--card-glow-color);
  text-shadow: 0 0 5px var(--card-glow-color);
  font-size: 0.75rem;
}

.exec-card:hover .exec-responsibilities li {
  opacity: 1;
}

.exec-socials {
  display: flex;
  gap: 1rem;
}

.social-link {
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--glass-border);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition-medium);
}

body.dark-theme .social-link {
  background: rgba(255, 255, 255, 0.02);
}

.social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.social-link:hover {
  color: var(--text-pure);
  background: var(--card-glow-dim);
  border-color: var(--card-glow-color);
  box-shadow: 0 0 10px var(--card-glow-shadow);
  transform: translateY(-2px);
}

/* --- SECTION: MEDIA GALLERY SHOWCASE --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 5;
}

.gallery-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  transition: var(--transition-medium);
}

body.dark-theme .gallery-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.gallery-card[data-category="posters"] {
  --gallery-color: var(--neon-cyan);
  --gallery-glow: var(--neon-cyan-glow);
  --gallery-dim: var(--neon-cyan-dim);
}

.gallery-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
}

.gallery-media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Graphic Fallback Cards */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, var(--gallery-dim) 0%, var(--bg-dark) 100%);
  padding: 1.5rem;
  text-align: center;
  position: relative;
}

.gallery-placeholder-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gallery-dim);
  border: 1px solid var(--gallery-color);
  color: var(--gallery-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  box-shadow: 0 0 12px var(--gallery-dim);
  transition: var(--transition-medium);
}

.gallery-placeholder-title {
  font-family: var(--font-header);
  font-size: 1rem;
  color: var(--text-pure);
  margin-bottom: 0.25rem;
  letter-spacing: 0.05rem;
}

.gallery-placeholder-tag {
  font-family: var(--font-header);
  font-size: 0.65rem;
  color: var(--gallery-color);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.gallery-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(18, 16, 26, 0.95) 0%, rgba(18, 16, 26, 0.25) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity var(--transition-medium);
  z-index: 2;
}

.gallery-hover-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gallery-color);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-bottom: 1rem;
  box-shadow: 0 0 20px var(--gallery-glow);
  transform: translateY(20px);
  transition: var(--transition-medium);
}

.gallery-info {
  transform: translateY(10px);
  transition: var(--transition-medium);
}

.gallery-title {
  font-family: var(--font-header);
  color: #ffffff; /* keep white inside dark overlay */
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.gallery-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Cards hover states */
.gallery-card:hover {
  border-color: var(--gallery-color);
  box-shadow: 0 12px 35px var(--gallery-dim);
  transform: translateY(-5px);
}

.gallery-card:hover img {
  transform: scale(1.06);
}

.gallery-card:hover .gallery-hover-overlay {
  opacity: 1;
}

.gallery-card:hover .gallery-hover-btn {
  transform: translateY(0);
}

.gallery-card:hover .gallery-info {
  transform: translateY(0);
}

.gallery-card:hover .gallery-placeholder-icon {
  background: var(--gallery-color);
  color: #ffffff;
  box-shadow: 0 0 20px var(--gallery-glow);
  transform: scale(1.08);
}

/* --- LIGHTBOX MODAL --- */
#lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 8, 20, 0.95);
  backdrop-filter: blur(16px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

#lightbox-modal.visible {
  opacity: 1;
  pointer-events: all;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 2.5rem;
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 10;
}

.lightbox-close:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink-glow);
}

.lightbox-container {
  max-width: 85%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: rgba(12, 10, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.lightbox-content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.lightbox-media {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.lightbox-caption {
  font-family: var(--font-header);
  color: #ffffff;
  margin-top: 1.25rem;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  text-align: center;
}

/* Lightbox Nav Arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-medium);
}

.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lightbox-arrow.left {
  left: 2rem;
}

.lightbox-arrow.right {
  right: 2rem;
}

/* --- SECTION: REVENUE & GROWTH --- */
.revenue-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  position: relative;
  z-index: 5;
  align-items: center;
}

.revenue-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 3rem;
  backdrop-filter: blur(12px);
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

body.dark-theme .revenue-card {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.revenue-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-top: 2px solid var(--neon-amber);
  border-left: 2px solid var(--neon-amber);
}

.revenue-card-header {
  margin-bottom: 2rem;
}

.revenue-founders {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 2rem;
}

.founder-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.founder-mini-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-header);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-pure);
}

.founder-mini:nth-child(1) .founder-mini-avatar {
  border: 1px solid var(--neon-purple);
  background: var(--neon-purple-dim);
  box-shadow: 0 0 8px var(--neon-purple-glow);
}

.founder-mini:nth-child(2) .founder-mini-avatar {
  border: 1px solid var(--neon-amber);
  background: var(--neon-amber-dim);
  box-shadow: 0 0 8px var(--neon-amber-glow);
}

.founder-mini-name {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-pure);
}

.founder-mini-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.revenue-list {
  list-style: none;
}

.revenue-list li {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.revenue-list-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--neon-amber-dim);
  border: 1px solid rgba(194, 93, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--neon-amber);
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

body.dark-theme .revenue-list-icon {
  border-color: rgba(255, 170, 0, 0.3);
}

.revenue-list-title {
  font-family: var(--font-header);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-pure);
  margin-bottom: 0.2rem;
}

.revenue-list-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* SVG Chart */
.growth-chart-container {
  background: var(--glass-bg);
  border: 1px dashed var(--neon-amber);
  border-radius: 12px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.chart-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chart-title {
  font-family: var(--font-header);
  font-size: 1rem;
  color: var(--text-pure);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.chart-val {
  font-family: var(--font-header);
  color: var(--neon-amber);
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 0 8px var(--neon-amber-glow);
}

.svg-chart-wrap {
  width: 100%;
  height: 200px;
  position: relative;
}

.svg-chart-wrap svg {
  width: 100%;
  height: 100%;
}

.chart-glow-path {
  stroke: var(--neon-amber);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-chart 3s ease-out forwards;
  filter: drop-shadow(0 0 5px var(--neon-amber));
}

.chart-fill-path {
  fill: url(#chart-gradient);
  opacity: 0.08;
}

.chart-dot {
  fill: var(--text-pure);
  stroke: var(--neon-amber);
  stroke-width: 3;
  r: 5;
  filter: drop-shadow(0 0 4px var(--neon-amber));
  cursor: pointer;
  transition: r var(--transition-fast);
}

.chart-dot:hover {
  r: 8;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.chart-label {
  font-family: var(--font-header);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- SECTION: ORGANIZATIONAL HIERARCHY --- */
.org-chart-wrapper {
  position: relative;
  z-index: 5;
  width: 100%;
  overflow-x: auto;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px; /* Side rounded wrapper shape */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
  scrollbar-width: thin;
  scrollbar-color: var(--neon-cyan) rgba(0, 0, 0, 0.2);
}

/* Custom scrollbars for org-chart-wrapper */
.org-chart-wrapper::-webkit-scrollbar {
  height: 8px;
}

.org-chart-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.org-chart-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.25);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.org-chart-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan-glow);
}

.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 900px;
}

.org-row {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 1.5rem 0;
  gap: 3rem;
}

.org-node {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 9999px; /* Pill/capsule shape - side round shape */
  padding: 1.25rem 1.5rem;
  min-width: 250px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-medium);
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  
  --node-glow: var(--neon-cyan);
  --node-glow-shadow: var(--neon-cyan-glow);
}

/* Big cards styling for Founder and Co-founder in top row */
.org-row .org-node {
  min-width: 290px;
  padding: 1.4rem 2.25rem;
  border-radius: 9999px;
}

.org-row .org-node .org-node-role {
  font-size: 0.75rem;
  letter-spacing: 0.12rem;
  margin-bottom: 0.35rem;
}

.org-row .org-node .org-node-name {
  font-size: 1.15rem;
}

.org-node[data-member="ajay"] {
  --node-glow: var(--neon-purple);
  --node-glow-shadow: var(--neon-purple-glow);
}
.org-node[data-member="shashank"] {
  --node-glow: var(--neon-amber);
  --node-glow-shadow: var(--neon-amber-glow);
}
.org-node[data-member="thontadaraya"], .org-node[data-member="pruthvi"] {
  --node-glow: var(--neon-cyan);
  --node-glow-shadow: var(--neon-cyan-glow);
}
.org-node[data-member="munish"] {
  --node-glow: var(--neon-pink);
  --node-glow-shadow: var(--neon-pink-glow);
}
.org-node[data-member="pavan"] {
  --node-glow: var(--neon-green);
  --node-glow-shadow: var(--neon-green-glow);
}
.org-node[data-member="shreyas"] {
  --node-glow: var(--neon-purple);
  --node-glow-shadow: var(--neon-purple-glow);
}
.org-node[data-member="subhash"] {
  --node-glow: var(--neon-amber);
  --node-glow-shadow: var(--neon-amber-glow);
}

.org-node:hover, .org-node.active {
  border-color: var(--node-glow);
  box-shadow: 0 0 15px var(--node-glow-shadow);
  background: var(--bg-dark);
  transform: translateY(-3px);
}

.org-node-role {
  font-family: var(--font-header);
  font-size: 0.65rem;
  color: var(--node-glow);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  text-shadow: 0 0 4px var(--node-glow-shadow);
}

.org-node-name {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-pure);
  white-space: nowrap;
}

/* --- 3D CAROUSEL FOR ORG CHART (360-DEGREE HORIZONTAL SCROLL) --- */
.org-carousel-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 230px;
  margin: 1.5rem auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: pan-y;
}

.org-carousel-viewport {
  position: relative;
  width: 250px;
  height: 105px;
  perspective: 1200px;
  overflow: visible;
  cursor: grab;
  user-select: none;
}

.org-carousel-viewport:active {
  cursor: grabbing;
}

.org-carousel-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.85, 0.3, 1.02);
}

.org-carousel-spinner .org-node {
  position: absolute;
  left: 10px;
  top: 0;
  width: 230px;
  min-width: 230px;
  height: 100%;
  margin: 0;
  backface-visibility: visible;
  transition: transform 0.8s, opacity 0.8s, box-shadow 0.5s, filter 0.8s;
  padding: 0.9rem 1.25rem;
  border-radius: 9999px;
}

.org-carousel-spinner .org-node .org-node-role {
  font-size: 0.58rem;
  letter-spacing: 0.08rem;
  margin-bottom: 0.2rem;
}

.org-carousel-spinner .org-node .org-node-name {
  font-size: 0.85rem;
}

/* Arrange 6 nodes in 3D circular ring (radius 210px) */
.org-carousel-spinner .org-node:nth-child(1) { transform: rotateY(0deg) translateZ(210px); }
.org-carousel-spinner .org-node:nth-child(2) { transform: rotateY(60deg) translateZ(210px); }
.org-carousel-spinner .org-node:nth-child(3) { transform: rotateY(120deg) translateZ(210px); }
.org-carousel-spinner .org-node:nth-child(4) { transform: rotateY(180deg) translateZ(210px); }
.org-carousel-spinner .org-node:nth-child(5) { transform: rotateY(240deg) translateZ(210px); }
.org-carousel-spinner .org-node:nth-child(6) { transform: rotateY(300deg) translateZ(210px); }

/* Inactive cards styling (faded out, slightly blurred, and unclickable) */
.org-carousel-spinner .org-node:not(.active-3d) {
  opacity: 0.45;
  pointer-events: none;
  filter: blur(0.5px) grayscale(20%);
}

.org-carousel-spinner .org-node.active-3d {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  box-shadow: 0 0 25px var(--node-glow-shadow);
}

/* Carousel control arrows */
.org-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(12, 10, 24, 0.75);
  border: 1px solid var(--glass-border);
  color: var(--text-pure);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-medium);
  backdrop-filter: blur(4px);
}

.org-carousel-arrow:hover {
  border-color: var(--neon-cyan);
  background: var(--bg-dark);
  box-shadow: 0 0 15px var(--neon-cyan-glow);
  color: var(--neon-cyan);
  transform: translateY(-50%) scale(1.08);
}

.org-carousel-arrow.prev {
  left: 5%;
}

.org-carousel-arrow.next {
  right: 5%;
}

@media (max-width: 768px) {
  .org-carousel-arrow.prev { left: 1%; }
  .org-carousel-arrow.next { right: 1%; }
  .org-carousel-viewport {
    perspective: 800px;
    width: 190px;
    height: 95px;
  }
  .org-carousel-spinner .org-node {
    width: 170px;
    min-width: 170px;
    padding: 0.75rem 1rem;
  }
  .org-carousel-spinner .org-node:nth-child(1) { transform: rotateY(0deg) translateZ(160px); }
  .org-carousel-spinner .org-node:nth-child(2) { transform: rotateY(60deg) translateZ(160px); }
  .org-carousel-spinner .org-node:nth-child(3) { transform: rotateY(120deg) translateZ(160px); }
  .org-carousel-spinner .org-node:nth-child(4) { transform: rotateY(180deg) translateZ(160px); }
  .org-carousel-spinner .org-node:nth-child(5) { transform: rotateY(240deg) translateZ(160px); }
  .org-carousel-spinner .org-node:nth-child(6) { transform: rotateY(300deg) translateZ(160px); }
  
  .org-carousel-spinner .org-node .org-node-role {
    font-size: 0.5rem;
    letter-spacing: 0.05rem;
  }
  .org-carousel-spinner .org-node .org-node-name {
    font-size: 0.75rem;
  }

  /* Founders mobile size adjustment */
  .org-row .org-node {
    min-width: 230px;
    padding: 1.1rem 1.6rem;
  }
  .org-row .org-node .org-node-role {
    font-size: 0.65rem;
  }
  .org-row .org-node .org-node-name {
    font-size: 0.95rem;
  }
}

/* Node details panel */
.node-details-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  margin-top: 3rem;
  max-width: 600px;
  width: 100%;
  align-self: center;
  backdrop-filter: blur(16px);
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--transition-medium), transform var(--transition-medium);
  z-index: 5;
}

body.dark-theme .node-details-panel {
  background: rgba(12, 10, 24, 0.92);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.node-details-panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  border-color: var(--panel-glow-color, var(--neon-cyan));
  box-shadow: 0 12px 35px var(--panel-glow-shadow, var(--neon-cyan-dim));
}

.node-details-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.5rem;
  transition: var(--transition-fast);
}

.node-details-close:hover {
  color: var(--text-pure);
}

.node-details-header {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.node-details-title {
  font-family: var(--font-header);
  font-size: 1.4rem;
  color: var(--text-pure);
  margin-bottom: 0.25rem;
}

.node-details-subtitle {
  font-family: var(--font-header);
  font-size: 0.8rem;
  color: var(--panel-glow-color, var(--neon-cyan));
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.node-details-body h4 {
  font-family: var(--font-header);
  font-size: 0.85rem;
  color: var(--text-pure);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.node-details-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.skill-badge {
  background: var(--bg-deep);
  border: 1px solid var(--panel-glow-color, var(--neon-cyan));
  color: var(--text-pure);
  font-size: 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-header);
  letter-spacing: 0.05rem;
}

/* --- SECTION: TIMELINE --- */
.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  z-index: 5;
  padding: 2rem 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--neon-cyan) 15%, var(--neon-purple) 50%, var(--neon-pink) 85%, transparent);
  box-shadow: 0 0 5px rgba(0, 143, 168, 0.1);
}

body.dark-theme .timeline-container::before {
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 1.5rem 3rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.timeline-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item:nth-child(1) { --time-color: var(--neon-cyan); --time-glow: var(--neon-cyan-glow); }
.timeline-item:nth-child(2) { --time-color: var(--neon-purple); --time-glow: var(--neon-purple-glow); }
.timeline-item:nth-child(3) { --time-color: var(--neon-pink); --time-glow: var(--neon-pink-glow); }
.timeline-item:nth-child(4) { --time-color: var(--neon-amber); --time-glow: var(--neon-amber-glow); }
.timeline-item:nth-child(5) { --time-color: var(--neon-green); --time-glow: var(--neon-green-glow); }

.timeline-dot {
  position: absolute;
  top: 2rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 3px solid var(--time-color);
  box-shadow: 0 0 8px var(--time-color);
  z-index: 10;
  transition: var(--transition-medium);
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.3);
  background: var(--time-color);
  box-shadow: 0 0 15px var(--time-color);
}

.timeline-item.left .timeline-dot {
  right: -8px;
}

.timeline-item.right .timeline-dot {
  left: -8px;
}

.timeline-content {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  position: relative;
  transition: var(--transition-medium);
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 1.85rem;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline-item.left .timeline-content::before {
  right: -10px;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent var(--glass-border);
}

.timeline-item.right .timeline-content::before {
  left: -10px;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--glass-border) transparent transparent;
}

.timeline-item:hover .timeline-content {
  border-color: var(--time-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02);
}

body.dark-theme .timeline-item:hover .timeline-content {
  box-shadow: 0 5px 25px rgba(255, 255, 255, 0.015);
}

.timeline-date {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--time-color);
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 5px var(--time-glow);
}

.timeline-title {
  font-family: var(--font-header);
  font-size: 1.2rem;
  color: var(--text-pure);
  margin-bottom: 0.75rem;
}

.timeline-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- SECTION: DEPARTMENTS --- */
.dept-explorer-wrap {
  position: relative;
  z-index: 5;
}

.dept-search-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.dept-search-input {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--glass-border);
  color: var(--text-pure);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.9rem 1.5rem;
  border-radius: 4px;
  width: 320px;
  max-width: 100%;
  transition: var(--transition-medium);
}

body.dark-theme .dept-search-input {
  background: rgba(255, 255, 255, 0.02);
}

.dept-search-input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  background: var(--neon-cyan-dim);
  box-shadow: 0 0 15px var(--neon-cyan-dim);
}

.dept-category-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dept-filter-btn {
  background: transparent;
  border: 1px solid var(--glass-border-hover);
  color: var(--text-muted);
  font-family: var(--font-header);
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-medium);
}

.dept-filter-btn:hover, .dept-filter-btn.active {
  border-color: var(--neon-cyan);
  color: var(--text-pure);
  background: var(--neon-cyan-dim);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
}

body.dark-theme .dept-filter-btn:hover,
body.dark-theme .dept-filter-btn.active {
  color: #ffffff;
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

.dept-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2rem;
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  --dept-color: var(--neon-cyan);
  --dept-glow: var(--neon-cyan-glow);
  --dept-dim: var(--neon-cyan-dim);
}

.dept-card.category-core {
  --dept-color: var(--neon-amber);
  --dept-glow: var(--neon-amber-glow);
  --dept-dim: var(--neon-amber-dim);
}
.dept-card.category-creative {
  --dept-color: var(--neon-pink);
  --dept-glow: var(--neon-pink-glow);
  --dept-dim: var(--neon-pink-dim);
}
.dept-card.category-tech {
  --dept-color: var(--neon-cyan);
  --dept-glow: var(--neon-cyan-glow);
  --dept-dim: var(--neon-cyan-dim);
}

.dept-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dept-color), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.dept-card:hover::after {
  transform: translateX(100%);
}

.dept-card:hover {
  border-color: var(--dept-color);
  box-shadow: 0 8px 25px var(--dept-dim);
  transform: translateY(-5px);
}

.dept-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--dept-dim);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--dept-color);
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  box-shadow: 0 0 8px var(--dept-dim);
  transition: var(--transition-medium);
}

body.dark-theme .dept-icon {
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dept-card:hover .dept-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 15px var(--dept-glow);
  background: var(--dept-color);
  color: #ffffff;
}

.dept-title {
  font-family: var(--font-header);
  font-size: 1.15rem;
  color: var(--text-pure);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05rem;
}

.dept-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-grow: 1;
}

.dept-card.hidden {
  display: none;
}

/* --- FOOTER --- */
footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--glass-border);
  padding: 5rem 10% 2.5rem 10%;
  position: relative;
  z-index: 10;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand .footer-logo {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.footer-logo-image {
  height: 48px;
  width: auto;
  display: block;
  transition: transform var(--transition-fast) ease, filter var(--transition-fast) ease;
}

.footer-logo-image:hover {
  transform: scale(1.03);
}

body.dark-theme .footer-logo-image {
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.85rem;
  max-width: 320px;
  margin-bottom: 2rem;
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.footer-column-title {
  font-family: var(--font-header);
  font-size: 0.9rem;
  color: var(--text-pure);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--neon-cyan);
  padding-left: 5px;
}

.footer-info {
  list-style: none;
}

.footer-info li {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-info li svg {
  color: var(--neon-pink);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid var(--glass-border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer-bottom-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer-bottom-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  transition: var(--transition-fast);
}

.footer-bottom-links a:hover {
  color: var(--neon-cyan);
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes logo-color-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 0.99;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(176, 38, 255, 0.5);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.55;
    text-shadow: 0 0 4px rgba(255, 0, 85, 0.3);
  }
}

@keyframes logo-image-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 0.99;
    filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 30px rgba(176, 38, 255, 0.3));
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.55;
    filter: drop-shadow(0 0 4px rgba(255, 0, 85, 0.2));
  }
}

@keyframes pulse-glow-cyan {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 4px var(--neon-cyan);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px var(--neon-cyan);
  }
}

@keyframes pulse-glow-pink {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 4px var(--neon-pink);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px var(--neon-pink);
  }
}

@keyframes text-glow-pulse {
  0% {
    text-shadow: 0 0 10px rgba(0, 143, 168, 0.05);
  }
  100% {
    text-shadow: 0 0 25px rgba(0, 143, 168, 0.25), 0 0 50px rgba(120, 13, 204, 0.1);
  }
}

@keyframes scroll-slide {
  0% {
    top: -15px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 50px;
    opacity: 0;
  }
}

@keyframes scroll-text-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

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

@keyframes draw-chart {
  to {
    stroke-dashoffset: 0;
  }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
  section {
    padding: 6rem 5% 5rem 5%;
  }
  .hero-title {
    font-size: 3.75rem;
  }
  .revenue-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  header {
    padding: 1rem 1.5rem;
  }
  header.scrolled {
    padding: 0.8rem 1.5rem;
  }
  .nav-wrap {
    gap: 1rem;
  }
  .nav-links {
    display: none;
  }
  .hero-title {
    font-size: 3rem;
  }
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  .btn-primary, .btn-secondary {
    text-align: center;
  }
  
  .timeline-container::before {
    left: 20px;
  }
  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 0;
  }
  .timeline-item.left, .timeline-item.right {
    left: 0;
    text-align: left;
  }
  .timeline-item.left .timeline-dot, .timeline-item.right .timeline-dot {
    left: 12px;
  }
  .timeline-item.left .timeline-content::before, .timeline-item.right .timeline-content::before {
    left: -10px;
    border-width: 8px 10px 8px 0;
    border-color: transparent var(--glass-border) transparent transparent;
  }
  
  .org-chart-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* --- PORTAL MODALS & AUTHENTICATION SYSTEMS --- */

#portal-login-btn {
  position: relative;
}

.login-status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
  opacity: 0;
  transform: scale(0);
  transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

#portal-login-btn.logged-in-user .login-status-dot {
  background-color: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  opacity: 1;
  transform: scale(1);
  animation: pulse-glow-green-dot 2s infinite;
}

#portal-login-btn.logged-in-admin .login-status-dot {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  opacity: 1;
  transform: scale(1);
  animation: pulse-glow-cyan-dot 2s infinite;
}

@keyframes pulse-glow-green-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes pulse-glow-cyan-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Modal Overlay */
.portal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 3, 7, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium) ease;
}

.portal-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Container */
.portal-modal-container {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  width: 480px;
  max-width: 90%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  padding: 2.5rem;
  transition: transform var(--transition-medium) cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.9) translateY(20px);
}

.portal-modal-overlay.open .portal-modal-container {
  transform: scale(1) translateY(0);
}

.portal-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.75rem;
  cursor: pointer;
  z-index: 10;
  transition: color var(--transition-fast) ease;
}

.portal-modal-close:hover {
  color: var(--text-pure);
}

/* Tabs */
.portal-tabs {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--glass-border);
}

.portal-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast) ease;
}

.portal-tab-btn.active {
  color: var(--text-pure);
  border-bottom-color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan-glow);
}

/* Form Styles */
.portal-form {
  display: none;
  flex-direction: column;
}

.portal-form.active {
  display: flex;
}

.portal-modal-title {
  font-family: var(--font-header);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-pure);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.portal-modal-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.portal-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.portal-input-group label {
  font-family: var(--font-header);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05rem;
}

.portal-input-group input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--text-pure);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

body.dark-theme .portal-input-group input {
  background: rgba(255, 255, 255, 0.03);
}

.portal-input-group input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan-glow);
}

.portal-error-msg {
  color: #ff3366;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid rgba(255, 51, 102, 0.2);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.portal-submit-btn,
.portal-logout-btn {
  background: var(--neon-cyan);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.85rem;
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: all var(--transition-fast) ease;
  box-shadow: 0 4px 12px var(--neon-cyan-glow);
}

.portal-submit-btn:hover {
  background: #00b0cc;
  box-shadow: 0 6px 16px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.portal-logout-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  margin-top: 1.5rem;
  width: 100%;
}

.portal-logout-btn:hover {
  background: rgba(255, 51, 102, 0.08);
  color: #ff3366;
  border-color: rgba(255, 51, 102, 0.3);
}

/* Google Login button */
.portal-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin: 1.5rem 0;
}

.portal-divider::before,
.portal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--glass-border);
}

.portal-divider span {
  padding: 0 0.75rem;
}

.google-login-btn-container {
  width: 100%;
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.google-btn:hover {
  background-color: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
}

.google-icon {
  display: block;
}

/* Admin Terminal overrides */
.portal-interface#admin-login-interface,
.portal-interface#admin-dashboard-interface {
  font-family: 'Courier New', Courier, monospace;
}

.admin-terminal-header {
  display: flex;
  align-items: center;
  background: #1a1923;
  padding: 0.5rem 1rem;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.25rem;
  gap: 0.5rem;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot.red { background-color: #ff5f56; }
.terminal-dot.yellow { background-color: #ffbd2e; }
.terminal-dot.green { background-color: #27c93f; }

.terminal-title {
  color: #888;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-left: auto;
}

.terminal-status-box {
  background: #0d0c12;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #7d788e;
  font-size: 0.8rem;
  line-height: 1.4;
}

.terminal-style label {
  color: #00f0ff !important;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.terminal-style input {
  background: #0d0c12 !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
  color: #00f0ff !important;
}

.terminal-style input:focus {
  border-color: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

.terminal-error-msg {
  color: #ff3366;
  background: rgba(255, 51, 102, 0.05);
  border: 1px solid rgba(255, 51, 102, 0.2);
}

.terminal-submit-btn,
.terminal-logout-btn {
  background: transparent;
  color: #00f0ff;
  border: 1px solid #00f0ff;
  border-radius: 6px;
  padding: 0.85rem;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1rem;
  transition: all var(--transition-fast) ease;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.terminal-submit-btn:hover {
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

.terminal-logout-btn {
  color: #ff3366;
  border-color: #ff3366;
  text-shadow: 0 0 5px rgba(255, 51, 102, 0.3);
  margin-top: 1.5rem;
  width: 100%;
}

.terminal-logout-btn:hover {
  background: rgba(255, 51, 102, 0.1);
  box-shadow: 0 0 15px rgba(255, 51, 102, 0.2);
}

.blink-text {
  animation: terminal-blink 1.5s step-end infinite;
}

@keyframes terminal-blink {
  50% { opacity: 0; }
}

/* Dashboard Styles */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.dashboard-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1.25rem;
}

.dashboard-card h4 {
  font-family: var(--font-header);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05rem;
}

.dashboard-highlight {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-pure);
}

.text-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.text-green {
  color: var(--neon-green);
}

.dashboard-progress-container {
  background: rgba(255, 255, 255, 0.05);
  height: 6px;
  border-radius: 3px;
  margin-top: 0.75rem;
  overflow: hidden;
}

.dashboard-progress-bar {
  background: var(--neon-cyan);
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 6px var(--neon-cyan);
}

.dashboard-list {
  list-style: none;
  padding: 0;
  font-size: 0.85rem;
}

.dashboard-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dashboard-list li:last-child {
  border-bottom: none;
}

.badge-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: bold;
}

.badge-status.online {
  background: rgba(0, 153, 15, 0.15);
  color: var(--neon-green);
}

.badge-status.idle {
  background: rgba(0, 143, 168, 0.15);
  color: var(--neon-cyan);
}

/* Admin Dashboard grid & console actions */
.dashboard-grid.admin-style {
  grid-template-columns: 1fr;
}

.admin-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.admin-action-btn {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  color: #00f0ff;
  padding: 0.6rem 1rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.admin-action-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.terminal-logs-view {
  background: #0d0c12;
  border-radius: 6px;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  color: #5d5870;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.5;
}

.terminal-logs-view p {
  margin: 0;
}

/* --- VERTICAL USER SIDEBAR & MULTI-WINDOW DASHBOARD SYSTEM --- */

/* Sidebar Backdrop Overlay */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 3, 7, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1045;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium) ease;
}

@media (min-width: 769px) {
  .sidebar-backdrop {
    display: none; /* Do not block screen clicks on desktop so users can interact with floating windows */
  }
}

.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sliding Right-Aligned Sidebar Drawer */
.user-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--glass-bg);
  backdrop-filter: blur(30px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-theme .user-sidebar {
  background: rgba(12, 10, 22, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.55);
}

.user-sidebar.open {
  transform: translateX(0);
}

/* Sidebar Header */
.sidebar-header {
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.15);
}

.sidebar-user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sidebar-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
  color: #ffffff;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(176, 38, 255, 0.3);
  text-transform: uppercase;
}

.sidebar-user-details h3 {
  margin: 0;
  font-family: var(--font-header);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-pure);
  margin-bottom: 0.1rem;
  text-transform: capitalize;
}

.sidebar-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.5rem;
  transition: color var(--transition-fast) ease;
}

.sidebar-close-btn:hover {
  color: #ff3366;
}

/* Sidebar Vertical Rows Navigation */
.sidebar-nav {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav-row-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  color: var(--text-pure);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  gap: 1rem;
  text-align: left;
}

body.dark-theme .sidebar-nav-row-btn {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.04);
}

.sidebar-nav-row-btn i {
  color: var(--neon-purple);
  width: 18px;
  height: 18px;
  transition: color var(--transition-fast) ease;
  flex-shrink: 0;
}

.sidebar-nav-row-btn span {
  flex: 1;
  font-family: var(--font-header);
}

.sidebar-nav-row-btn .arrow-icon {
  color: var(--text-muted);
  font-size: 0.85rem;
  opacity: 0.4;
  transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

/* Hover and Active states for Sidebar Buttons */
.sidebar-nav-row-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(176, 38, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(176, 38, 255, 0.1);
}

.sidebar-nav-row-btn:hover i {
  color: var(--neon-cyan);
}

.sidebar-nav-row-btn:hover .arrow-icon {
  opacity: 1;
  transform: translateX(4px);
  color: var(--neon-cyan);
}

.sidebar-nav-row-btn.active {
  background: rgba(176, 38, 255, 0.12);
  border-color: var(--neon-purple);
  box-shadow: 0 0 15px rgba(176, 38, 255, 0.15);
}

.sidebar-nav-row-btn.active i {
  color: var(--neon-cyan);
}

.sidebar-badge-count {
  background: var(--neon-amber);
  color: #000000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  line-height: 1;
  box-shadow: 0 0 8px var(--neon-amber-glow);
}

/* Sidebar Footer & Logout */
.sidebar-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.1);
}

.sidebar-logout-row-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  background: rgba(255, 51, 102, 0.04);
  border: 1px solid rgba(255, 51, 102, 0.15);
  border-radius: 12px;
  color: #ff3366;
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  gap: 0.75rem;
}

.sidebar-logout-row-btn:hover {
  background: rgba(255, 51, 102, 0.12);
  border-color: #ff3366;
  box-shadow: 0 5px 15px rgba(255, 51, 102, 0.2);
  transform: translateY(-2px);
}

/* Floating Centered Window Container */
.dashboard-window-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 480px;
  max-width: 92%;
  max-height: 80vh;
  background: var(--glass-bg);
  backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: transform var(--transition-medium) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--transition-medium) ease;
}

body.dark-theme .dashboard-window-container {
  background: rgba(12, 10, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.dashboard-window-container.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Window Header */
.window-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.12);
}

body.dark-theme .window-header {
  background: rgba(255, 255, 255, 0.02);
}

.window-title {
  font-family: var(--font-header);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-pure);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.window-title i {
  width: 16px;
  height: 16px;
  color: var(--neon-cyan);
}

.window-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.window-close-btn:hover {
  color: var(--text-pure);
  transform: scale(1.15);
}

/* Window Body */
.window-body {
  flex: 1;
  padding: 1.75rem 1.5rem;
  overflow-y: auto;
}

/* Sub-panels inside Window Bodies */
.payment-methods-section,
.billing-history-section,
.notif-list,
.services-list,
.tracking-list {
  animation: fadeInWindowBody 0.4s ease;
}

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

/* Responsive Sidebar Layouts */
@media (max-width: 768px) {
  .user-sidebar {
    width: 100%; /* Take full width on mobile screens */
    border-left: none;
  }

  .dashboard-window-container {
    width: 92%;
    max-height: 75vh;
  }
}

/* --- RAZORPAY CHECKOUT POPUP & DYNAMIC TRANSACTIONS SYSTEM --- */

/* Razorpay Simulated Overlay & Modal */
.razorpay-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.razorpay-modal {
  width: 380px;
  max-width: 95%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #2c2c2c;
  animation: slideUpModal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@keyframes slideUpModal {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.razorpay-header {
  background: #0f162e; /* Classic Razorpay Dark Merchant theme */
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.razorpay-logo {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05rem;
  color: #2b6bf3;
  text-transform: lowercase;
  display: block;
  font-style: italic;
  margin-bottom: 0.25rem;
}

.razorpay-merchant-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  color: #ffffff;
}

.razorpay-service-label {
  margin: 0;
  font-size: 0.75rem;
  color: #9e9e9e;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}

.razorpay-amount-box {
  text-align: right;
}

.razorpay-amount-label {
  font-size: 0.65rem;
  color: #9e9e9e;
  text-transform: uppercase;
}

.razorpay-amount-val {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
}

.razorpay-body {
  padding: 1.25rem 1.5rem;
  background: #f8f9fc;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.razorpay-contact-info {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.razorpay-field {
  display: flex;
  flex-direction: column;
}

.razorpay-field-label {
  font-size: 0.65rem;
  color: #757575;
  text-transform: uppercase;
}

.razorpay-field-val {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2c2c2c;
}

.razorpay-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.razorpay-methods-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: #757575;
  letter-spacing: 0.05rem;
}

.razorpay-method-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #ffffff;
  border: 1px solid #eef0f6;
  border-radius: 10px;
  padding: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.razorpay-method-row:hover {
  border-color: #2b6bf3;
  background: #fcfdff;
}

.razorpay-method-row.active {
  border-color: #2b6bf3;
  background: #f5f8ff;
}

.razorpay-method-icon {
  width: 34px;
  height: 34px;
  background: #f0f4ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b6bf3;
}

.razorpay-method-icon i {
  width: 18px;
  height: 18px;
}

.razorpay-method-details {
  flex: 1;
}

.razorpay-method-details h6 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2c2c2c;
}

.razorpay-method-details p {
  margin: 0;
  font-size: 0.7rem;
  color: #757575;
}

.razorpay-method-radio {
  width: 16px;
  height: 16px;
  border: 2px solid #bdbdbd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.razorpay-method-row.active .razorpay-method-radio {
  border-color: #2b6bf3;
}

.razorpay-method-row.active .razorpay-method-radio span {
  width: 8px;
  height: 8px;
  background: #2b6bf3;
  border-radius: 50%;
}

.razorpay-form-section {
  background: #ffffff;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.razorpay-footer {
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border-top: 1px solid #eef0f6;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.razorpay-submit-btn {
  width: 100%;
  padding: 1rem;
  background: #2b6bf3;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 107, 243, 0.3);
  transition: all 0.2s ease;
  text-align: center;
}

.razorpay-submit-btn:hover {
  background: #1a56d9;
  box-shadow: 0 4px 15px rgba(43, 107, 243, 0.45);
}

.razorpay-cancel-btn {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: #757575;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
}

.razorpay-cancel-btn:hover {
  color: #ff3366;
}

.razorpay-secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #9e9e9e;
  font-size: 0.65rem;
  margin-top: 0.25rem;
}

.razorpay-secure-badge i {
  width: 12px;
  height: 12px;
  color: #4caf50;
}

/* File uploader hover states */
.file-upload-drag-area:hover,
.file-upload-drag-area.drag-over {
  border-color: #ff3366 !important;
  background: rgba(255, 51, 102, 0.08) !important;
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.15);
}

/* Catalog hover actions */
.catalog-pay-btn:hover {
  background: var(--neon-purple) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px var(--neon-purple-glow);
  transform: translateY(-1px);
}

/* --- BILLING TABLE & INVOICE STATUS STYLES --- */
.billing-table {
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.85rem;
}

.billing-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--neon-cyan);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05rem;
  border-bottom: 1px solid var(--glass-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.billing-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-pure);
  vertical-align: middle;
}

.billing-table tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.status-paid {
  background: rgba(57, 255, 20, 0.15) !important;
  border: 1px solid #39ff14 !important;
  color: #39ff14 !important;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}

.status-pending {
  background: rgba(255, 170, 0, 0.15) !important;
  border: 1px solid var(--neon-amber) !important;
  color: var(--neon-amber) !important;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}

.status-refunded {
  background: rgba(255, 51, 102, 0.15) !important;
  border: 1px solid #ff3366 !important;
  color: #ff3366 !important;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}