/* 
   ROCK SYNDICATE STUDIO - PREMIUM CINEMATIC INVESTOR STYLESHEET
   Aesthetics: Hollywood Movie Studio Style with Ultra-Modern Cinematic UI
   Theme: Dark, Neon Accents, Futuristic overlays, Glassmorphism, 3D Canvas compatible
*/

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

/* DESIGN VARIABLES & SYSTEM TOKENS */
:root {
  --bg-darkest: #040508;
  --bg-darker: #080b11;
  --bg-card: rgba(13, 17, 28, 0.65);
  --bg-card-hover: rgba(22, 28, 45, 0.8);
  
  --primary: #8a2be2;      /* Purple neon */
  --secondary: #00e5ff;    /* Cyan/Blue neon */
  --accent: #ff6a00;       /* Cinematic Orange */
  --silver: #e2e8f0;       /* High-tech Silver */
  --text-muted: #8a99ad;   /* Futuristic Slate */
  
  --font-display: 'Unbounded', sans-serif; /* Bold geometric display font matching 'ROCK' */
  --font-tech: 'Syncopate', sans-serif;    /* Extended cinematic technical font matching 'SYNDICATE' */
  --font-digits: 'Orbitron', sans-serif;   /* Precise mechanical digits telemetry font */
  --font-body: 'Inter', sans-serif;        /* High-readability clean body text */
  
  --border-glass: rgba(138, 43, 226, 0.15);
  --border-glass-hover: rgba(255, 106, 0, 0.3);
  --glow-primary: 0 0 15px rgba(138, 43, 226, 0.4);
  --glow-secondary: 0 0 15px rgba(0, 229, 255, 0.4);
  --glow-accent: 0 0 20px rgba(255, 106, 0, 0.55);
}

/* RESET & CORE DEFAULTS */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none; /* Custom custom cursor will replace native cursor */
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-darkest);
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 50%, var(--bg-darker) 0%, var(--bg-darkest) 100%);
  min-height: 100vh;
  position: relative;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

/* BACKGROUND GRID AND SCANNING OVERLAYS */
.hologram-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(rgba(138, 43, 226, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 43, 226, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
}

.hologram-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, transparent 20%, rgba(4, 5, 8, 0.8) 95%);
  pointer-events: none;
  z-index: 2;
}

.scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 999;
  pointer-events: none;
  opacity: 0.15;
}

.laser-scanner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: var(--glow-accent);
  z-index: 10;
  pointer-events: none;
  opacity: 0.2;
  animation: laserSweep 8s linear infinite;
}

@keyframes laserSweep {
  0% { top: -2%; }
  100% { top: 102%; }
}

/* CUSTOM HIGH-TECH CURSOR */
.custom-cursor {
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  box-shadow: var(--glow-accent);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000;
  transition: width 0.1s ease, height 0.1s ease, background-color 0.1s ease;
}

.custom-cursor-glow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 106, 0, 0.3);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.custom-cursor.hovering {
  width: 12px;
  height: 12px;
  background-color: var(--secondary);
  box-shadow: var(--glow-secondary);
}

.custom-cursor-glow.hovering {
  width: 48px;
  height: 48px;
  border-color: var(--secondary);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

/* DYNAMIC PARTICLES ON THREE.JS ELEMENT */
#three-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

/* GLASSMORPHISM CARD DEFINITIONS */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  transition: border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.75s;
  pointer-events: none;
}

.glass-panel:hover::before {
  left: 125%;
}

.glass-panel:hover {
  border-color: var(--border-glass-hover);
  box-shadow: 0 12px 35px rgba(255, 106, 0, 0.1), var(--glow-primary);
  transform: translateY(-5px);
}

/* FLOATING HEADER / DYNAMIC NAVBAR */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: padding 0.3s ease, background 0.3s ease, border-bottom 0.3s ease;
}

.nav-header.scrolled {
  padding: 0.6rem 2.5rem;
  background: rgba(4, 5, 8, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
}

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

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: var(--glow-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover; /* Ensures logo image fills the container beautifully */
  background: #000; /* Deep backdrop for brand contrast */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-tech);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--silver);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              border-color 0.3s ease, 
              box-shadow 0.3s ease;
}

.logo-container:hover .logo-icon {
  transform: scale(1.08) rotate(4deg);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.logo-text {
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 2px;
  background: linear-gradient(to right, var(--silver), #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-text span {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.nav-menu {
  display: flex;
  gap: clamp(0.75rem, 1.2vw, 1.5rem); /* Dynamically scales the gap to prevent wrapping on standard laptop screens */
  list-style: none;
}

.nav-link {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  padding: 5px 0;
  white-space: nowrap; /* Forces text like 'VFX Art' and 'The Vision' to remain on a single horizontal line */
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-link:hover {
  color: var(--silver);
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* MUSIC TOGGLE WITH EQUALIZER */
.music-toggle-btn {
  background: rgba(13, 17, 28, 0.7);
  border: 1px solid var(--border-glass);
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--silver);
  transition: all 0.3s ease;
}

.music-toggle-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.audio-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
}

.audio-bar {
  width: 2.5px;
  background-color: var(--accent);
  border-radius: 1px;
  height: 100%;
  transform-origin: bottom;
  transition: height 0.15s ease;
}

.audio-bar.animating {
  animation: audioOscillate 1.2s ease-in-out infinite alternate;
}

.audio-bar:nth-child(2) { animation-delay: 0.2s; }
.audio-bar:nth-child(3) { animation-delay: 0.4s; }
.audio-bar:nth-child(4) { animation-delay: 0.1s; }
.audio-bar:nth-child(5) { animation-delay: 0.3s; }

@keyframes audioOscillate {
  0% { transform: scaleY(0.15); }
  100% { transform: scaleY(1); }
}

/* CTAs AND PREMIUM NEON BUTTONS */
.btn-glow {
  background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--silver);
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: var(--glow-accent);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -60%;
  width: 40px;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(35deg);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(255, 106, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-glow:hover::after {
  left: 140%;
}

.btn-outline-glow {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--silver);
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: var(--glow-primary);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-outline-glow:hover {
  background: rgba(138, 43, 226, 0.1);
  border-color: var(--secondary);
  box-shadow: var(--glow-secondary);
  transform: translateY(-2px);
}

/* HERO SECTION LAYOUT */
.hero-viewport {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 10% 80px 10%; /* Increased top padding to prevent fixed header overlaps, and bottom padding */
  overflow: hidden;
  z-index: 10;
}

.hero-content {
  position: relative;
  z-index: 20;
  text-align: center;
  max-width: 950px;
  margin-top: 10px;
}

.hero-subtitle-tag {
  display: inline-block;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 4px;
  border: 1px solid rgba(0, 229, 255, 0.25);
  background: rgba(0, 229, 255, 0.05);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 1.25rem; /* Reduced to optimize vertical grid flow */
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 1rem; /* Reduced from 1.2rem */
  background: linear-gradient(135deg, #ffffff 0%, var(--silver) 50%, #718096 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.hero-title::after {
  content: '3D Animation Universe';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.1;
  filter: blur(8px);
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: 1.5rem; /* Reduced from 2rem */
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hero-tagline span {
  color: var(--silver);
  font-weight: 500;
}

.hero-btn-group {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

#hero-teaser-trigger {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

#hero-teaser-trigger i {
  fill: var(--accent);
  color: var(--accent);
}

#hero-teaser-trigger:hover {
  background: rgba(255, 106, 0, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 25px rgba(255, 106, 0, 0.7);
}

/* HERO VIDEO LOOP BOX */
.hero-video-loop-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 21 / 9;
  margin: 1.5rem auto 1rem auto; /* Optimized to reduce excessive vertical space */
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15), inset 0 0 15px rgba(0, 229, 255, 0.1);
  overflow: hidden;
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.hero-video-loop-container:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: var(--secondary);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.35), 0 0 15px rgba(138, 43, 226, 0.25);
}

.hero-loop-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: contrast(1.1) brightness(0.9) saturate(1.2);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.hero-video-loop-container:hover .hero-loop-video {
  opacity: 0.95;
  filter: contrast(1.15) brightness(1.0) saturate(1.3);
}

/* HOLOGRAM HUD OVERLAY */
.video-overlay-hologram {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 12px 18px;
  font-family: var(--font-tech);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  color: var(--secondary);
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.hero-video-loop-container:hover .video-overlay-hologram {
  opacity: 1;
}

.cam-indicator {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-transform: uppercase;
}

.rec-dot {
  width: 6px;
  height: 6px;
  background-color: #ff3333;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff3333;
  display: inline-block;
  animation: blinkRed 1s infinite alternate;
}

@keyframes blinkRed {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.cam-coords {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  color: var(--text-muted);
}

.cam-fps {
  grid-column: 1;
  grid-row: 3;
  color: var(--text-muted);
  display: flex;
  align-items: flex-end;
}

/* HUD Camera Corner Brackets */
.cam-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.corner-top-left,
.corner-top-right,
.corner-bottom-left,
.corner-bottom-right {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid transparent;
}

.corner-top-left {
  top: 8px;
  left: 8px;
  border-top-color: var(--secondary);
  border-left-color: var(--secondary);
}

.corner-top-right {
  top: 8px;
  right: 8px;
  border-top-color: var(--secondary);
  border-right-color: var(--secondary);
}

.corner-bottom-left {
  bottom: 8px;
  left: 8px;
  border-bottom-color: var(--secondary);
  border-left-color: var(--secondary);
}

.corner-bottom-right {
  bottom: 8px;
  right: 8px;
  border-bottom-color: var(--secondary);
  border-right-color: var(--secondary);
}

@media (max-width: 768px) {
  .hero-video-loop-container {
    aspect-ratio: 16 / 9;
    margin-top: 1.5rem;
  }
}

/* HERO SCROLL INDICATOR */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tech);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mouse-icon {
  width: 20px;
  height: 35px;
  border: 2px solid var(--text-muted);
  border-radius: 12px;
  position: relative;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background-color: var(--accent);
  box-shadow: var(--glow-accent);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: wheelScroll 1.8s ease-in-out infinite;
}

@keyframes wheelScroll {
  0% { top: 6px; opacity: 1; }
  100% { top: 22px; opacity: 0; }
}

/* SECTION GLOBAL LAYOUT */
.section-wrapper {
  padding: 8rem 10% 4rem 10%;
  position: relative;
  z-index: 10;
}

.section-header {
  margin-bottom: 4rem;
  position: relative;
}

.section-label {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 4px;
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--silver);
  position: relative;
}

.section-title span {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-decor-line {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-top: 1rem;
}

/* ABOUT THE VISION SECTION */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.about-narrative {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.narrative-p {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.narrative-p span {
  color: var(--silver);
  font-weight: 600;
}

.highlight-box {
  background: rgba(138, 43, 226, 0.05);
  border-left: 3px solid var(--primary);
  padding: 1.5rem;
  margin-top: 1rem;
}

.highlight-box h4 {
  font-family: var(--font-tech);
  font-size: 1rem;
  color: var(--silver);
  margin-bottom: 0.5rem;
}

.about-showcase {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hologram-sphere-wrap {
  width: 320px;
  height: 320px;
  position: relative;
  border-radius: 50%;
  border: 1px dashed rgba(138, 43, 226, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatOrb 6s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.holo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.15);
}

.holo-ring-1 {
  width: 280px;
  height: 280px;
  border-top-color: var(--secondary);
  animation: rotateClockwise 12s linear infinite;
}

.holo-ring-2 {
  width: 230px;
  height: 230px;
  border-bottom-color: var(--primary);
  animation: rotateCounterClockwise 8s linear infinite;
}

.holo-ring-3 {
  width: 170px;
  height: 170px;
  border-left-color: var(--accent);
  animation: rotateClockwise 5s linear infinite;
}

.holo-core {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--accent) 0%, rgba(138, 43, 226, 0.2) 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: var(--glow-accent);
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

/* FOUNDER SECTION */
.founder-layout {
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.founder-card {
  width: 100%;
  max-width: 850px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}

.founder-card:hover {
  border-color: var(--accent);
  box-shadow: 0 25px 60px rgba(255, 106, 0, 0.15), var(--glow-primary);
}

.founder-visual-panel {
  position: relative;
  background: radial-gradient(circle at center, #131722 0%, #080b11 100%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid rgba(138, 43, 226, 0.15);
  min-height: 380px;
}

/* Hologram Scanning Mesh */
.founder-avatar-mesh {
  position: absolute;
  width: 150px;
  height: 206px; /* Matches 746x1024 portrait aspect ratio perfectly to prevent cropping */
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: radial-gradient(circle, rgba(255, 106, 0, 0.25) 0%, transparent 70%);
  box-shadow: var(--glow-accent);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  overflow: hidden; /* Clips the portrait image to a perfect rounded rectangle */
}

.founder-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.8; /* Subtle blend with the laser-scanning hologram overlay */
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: saturate(1.1) contrast(1.15);
}

.founder-card:hover .founder-portrait-img {
  opacity: 0.95;
  filter: saturate(1.2) contrast(1.2);
}

.founder-avatar-mesh i {
  font-size: 4rem;
  color: var(--silver);
  text-shadow: var(--glow-accent);
}

.founder-hologram-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(138, 43, 226, 0.05) 0.5px, transparent 0.5px) 0 0/100% 20px,
    linear-gradient(90deg, rgba(138, 43, 226, 0.05) 0.5px, transparent 0.5px) 0 0/20px 100%;
  pointer-events: none;
}

.founder-laser-beam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  box-shadow: var(--glow-secondary);
  animation: laserSweepVertical 4s ease-in-out infinite;
  z-index: 6;
}

@keyframes laserSweepVertical {
  0%, 100% { top: 10%; }
  50% { top: 90%; }
}

.founder-details-panel {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founder-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); /* Dynamic fluid sizing to prevent wrapping */
  font-weight: 800;
  color: var(--silver);
  letter-spacing: -0.5px;
  margin-bottom: 0.25rem;
  white-space: nowrap; /* Forces name to stay on a single line */
}

.founder-title {
  font-family: var(--font-tech);
  font-size: clamp(0.7rem, 1.1vw, 0.8rem); /* Slightly scaled down to prevent text wraps */
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1.8px; /* Reduced slightly from 3px for perfect single-line layout */
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  white-space: nowrap; /* Guarantees the entire designation fits comfortably */
}

.tier-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--silver);
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
  white-space: normal; /* Allows wrapping on narrower screens/cards */
}

.founder-bio {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.founder-skills-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.skill-label-group {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.skill-name {
  color: var(--silver);
}

.skill-percentage {
  color: var(--secondary);
}

.skill-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow: var(--glow-secondary);
  border-radius: 3px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* PIPELINE TIMELINE SECTION */
.pipeline-viewport {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.pipeline-line-tracker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(138, 43, 226, 0.15);
  transform: translateX(-50%);
}

.pipeline-line-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: var(--glow-primary);
  transform: translateX(-50%);
  height: 0%; /* Dynamic fill based on GSAP ScrollTrigger */
  transition: height 0.1s ease;
}

.pipeline-node {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  margin-bottom: 6rem;
  position: relative;
}

.pipeline-node:last-child {
  margin-bottom: 0;
}

.pipeline-point-connector {
  position: absolute;
  left: 50%;
  top: 25px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-darkest);
  border: 4px solid rgba(138, 43, 226, 0.3);
  transform: translateX(-50%);
  z-index: 15;
  transition: all 0.4s ease;
}

.pipeline-node.active .pipeline-point-connector {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateX(-50%) scale(1.2);
}

.pipeline-side-content {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  padding-top: 15px;
}

.pipeline-node:nth-child(even) .pipeline-side-content {
  grid-column: 2;
  text-align: left;
}

.pipeline-node:nth-child(even) .pipeline-card-panel {
  grid-column: 1;
}

.pipeline-phase-tag {
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.pipeline-phase-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--silver);
}

.pipeline-card-panel {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pipeline-card-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.pipeline-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipeline-task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--silver);
}

.pipeline-node:nth-child(odd) .pipeline-task-item {
  flex-direction: row;
}

.pipeline-task-item i {
  color: var(--accent);
  font-size: 0.95rem;
  text-shadow: var(--glow-accent);
}

/* INVESTOR OPPORTUNITY SECTION */
.investor-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.investor-card {
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  background: var(--bg-card);
}

/* Liquid rotating animated border */
.investor-card.tier-gold::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 12px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--accent), var(--primary), var(--secondary));
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

.investor-card:hover.tier-gold::after {
  opacity: 1;
}

.investor-tier-badge {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tier-bronze .investor-tier-badge {
  background: rgba(205, 127, 50, 0.1);
  color: #cd7f32;
  border-color: rgba(205, 127, 50, 0.2);
}

.tier-silver .investor-tier-badge {
  background: rgba(192, 192, 192, 0.1);
  color: #c0c0c0;
  border-color: rgba(192, 192, 192, 0.2);
}

.tier-gold .investor-tier-badge {
  background: rgba(255, 106, 0, 0.1);
  color: var(--accent);
  border-color: rgba(255, 106, 0, 0.3);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.15);
}

.investor-price {
  font-family: var(--font-tech);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--silver);
}

.investor-price span {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 400;
}

.investor-slot-tag {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 600;
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.investor-perks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5rem 0;
  text-align: left;
}

.investor-perks-list li {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.investor-perks-list li span {
  color: var(--silver);
}

.investor-perks-list li i {
  color: var(--secondary);
  font-size: 0.9rem;
}

.btn-card-cta {
  width: 100%;
  justify-content: center;
}

/* BUDGET & INFRASTRUCTURE - FUTURISTIC DASHBOARD UI */
.dashboard-viewport {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
}

.dashboard-panel-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.5rem;
}

.dashboard-header-hologram {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
  padding-bottom: 1rem;
}

.dashboard-title-tag {
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--silver);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-title-tag span {
  color: var(--accent);
}

.dashboard-system-clock {
  font-family: var(--font-digits);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 4px;
}

.dashboard-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.dashboard-item-card {
  padding: 1.5rem;
  border: 1px solid var(--border-glass);
  background: rgba(4, 5, 8, 0.4);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.dashboard-item-card:hover {
  border-color: var(--accent);
  background: rgba(138, 43, 226, 0.03);
}

.dash-icon-box {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  background: rgba(138, 43, 226, 0.05);
  border: 1px solid rgba(138, 43, 226, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary);
  font-size: 1.5rem;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.1);
  transition: all 0.3s ease;
}

.dashboard-item-card:hover .dash-icon-box {
  color: var(--accent);
  background: rgba(255, 106, 0, 0.08);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.dash-content-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-item-title {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--silver);
  letter-spacing: 1px;
}

.dash-item-metric {
  font-family: var(--font-digits);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
}

.dashboard-panel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.5rem;
}

.sidebar-title {
  font-family: var(--font-tech);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
  padding-bottom: 0.75rem;
}

/* System Diagnostic Metrics */
.diagnostic-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.metric-circle-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.gauge-svg-container {
  position: relative;
  width: 70px;
  height: 70px;
}

.gauge-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 6px;
}

.gauge-circle-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 188.4;
  stroke-dashoffset: 188.4; /* Dynamic based on JS scripts */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0px 0px 5px rgba(255, 106, 0, 0.5));
}

.gauge-circle-fill.gauge-purple {
  stroke: var(--primary);
  filter: drop-shadow(0px 0px 5px rgba(138, 43, 226, 0.5));
}

.gauge-percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-digits);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--silver);
}

.metric-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-desc-title {
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--silver);
}

.metric-desc-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* TEAM & STUDIO SECTION */
.team-grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.team-card {
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.team-avatar-container {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #161c2d 0%, var(--bg-darkest) 100%);
  border: 2px solid rgba(138, 43, 226, 0.2);
  box-shadow: var(--glow-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.team-card:hover .team-avatar-container {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: scale(1.05);
}

.team-avatar-container i {
  font-size: 2.2rem;
  color: var(--text-muted);
  transition: color 0.4s ease;
}

.team-card:hover .team-avatar-container i {
  color: var(--silver);
}

.team-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-card-name {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: 0.5px;
}

.team-card-role {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 1px;
}

/* REVENUE POTENTIAL - ANIMATED GRAPH/STATISTICS UI */
.revenue-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

.revenue-stats-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.revenue-list-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.revenue-stream-card {
  padding: 1.25rem;
  border: 1px solid var(--border-glass);
  background: rgba(13, 17, 28, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.revenue-stream-card:hover {
  border-color: var(--accent);
  background: rgba(255, 106, 0, 0.03);
  transform: translateX(5px);
}

.revenue-stream-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.revenue-stream-icon {
  color: var(--accent);
  font-size: 1.2rem;
  text-shadow: var(--glow-accent);
}

.revenue-stream-title {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--silver);
  letter-spacing: 0.5px;
}

.revenue-stream-multiplier {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
}

/* SVG Chart details */
.revenue-chart-panel {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.chart-svg-viewport {
  width: 100%;
  height: 250px;
  position: relative;
}

.chart-svg-node {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 1px;
}

.chart-label-axis {
  fill: var(--text-muted);
  font-family: var(--font-tech);
  font-size: 9px;
  font-weight: 600;
}

.chart-path-line {
  fill: none;
  stroke: url(#chart-gradient);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.chart-path-area {
  fill: url(#area-gradient);
  opacity: 0;
  transition: opacity 1.5s ease;
}

.chart-data-node {
  fill: var(--bg-darkest);
  stroke: var(--accent);
  stroke-width: 3px;
  r: 5px;
  transition: r 0.25s ease, fill 0.25s ease, stroke-width 0.25s ease;
}

.chart-data-node:hover {
  r: 8px;
  fill: var(--accent);
  stroke: var(--silver);
  stroke-width: 2px;
}

/* ROCK SYNDICATE EXPANSION SECTION */
.expansion-roadmap-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  position: relative;
}

.expansion-roadmap-container::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: rgba(138, 43, 226, 0.15);
  z-index: 1;
}

.roadmap-card-node {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-card);
  padding: 2rem 1.25rem;
}

.roadmap-num-glow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-darkest);
  border: 2px solid rgba(138, 43, 226, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-tech);
  font-size: 1rem;
  font-weight: 800;
  color: var(--secondary);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.1);
  transition: all 0.3s ease;
}

.roadmap-card-node:hover .roadmap-num-glow {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: scale(1.1);
}

.roadmap-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-card-title {
  font-family: var(--font-tech);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--silver);
  letter-spacing: 0.5px;
}

.roadmap-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* CONTACT & FUTURISTIC TERMINAL FORM */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.contact-info-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.contact-info-desc span {
  color: var(--accent);
  font-weight: 600;
}

.contact-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-card {
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid var(--border-glass);
}

.contact-info-icon {
  width: 45px;
  height: 45px;
  border-radius: 6px;
  background: rgba(138, 43, 226, 0.05);
  border: 1px solid rgba(138, 43, 226, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accent);
  font-size: 1.1rem;
}

.contact-info-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-card-label {
  font-family: var(--font-tech);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-card-value {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--silver);
  word-break: break-all; /* Ensures long email addresses wrap neatly on small screens */
}

/* Form Container Style */
.contact-form-panel {
  padding: 3rem;
  position: relative;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.terminal-controls {
  display: flex;
  gap: 8px;
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e53e3e;
}

.terminal-dot:nth-child(2) { background-color: #ecc94b; }
.terminal-dot:nth-child(3) { background-color: #38a169; }

.terminal-title {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-terminal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-field-label {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--silver);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-field-label span {
  color: var(--accent);
}

.form-terminal-input {
  background: rgba(4, 5, 8, 0.6);
  border: 1px solid rgba(138, 43, 226, 0.25);
  border-radius: 4px;
  padding: 12px 16px;
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  width: 100%;
}

.form-terminal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.15);
  background: rgba(13, 17, 28, 0.8);
}

textarea.form-terminal-input {
  resize: vertical;
  min-height: 120px;
}

/* Select Form Dropdown styles */
select.form-terminal-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23ff6a00' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Hologram Scanning Overlay on Submission Success */
.terminal-scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 11, 17, 0.95);
  z-index: 100;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.terminal-scan-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.scanner-beam-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: var(--glow-accent);
  top: 0;
  animation: modalLaserSweep 2.5s ease-in-out infinite;
}

@keyframes modalLaserSweep {
  0%, 100% { top: 5%; }
  50% { top: 95%; }
}

.scan-progress-icon {
  font-size: 3.5rem;
  color: var(--accent);
  animation: pulseScan 1.5s infinite alternate;
}

@keyframes pulseScan {
  0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 106, 0, 0.3)); }
  100% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 106, 0, 0.8)); }
}

.scan-status-text {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--silver);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scan-log-sub {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--secondary);
}

/* FOOTER SECTION */
.footer-wrapper {
  background: #020305;
  border-top: 1px solid rgba(138, 43, 226, 0.15);
  padding: 4rem 10% 2rem 10%;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.footer-tagline-text {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-top: 5px;
}

.footer-social-links {
  display: flex;
  gap: 1.5rem;
}

.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-3px);
}

.footer-legal-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-tech);
  letter-spacing: 0.5px;
}

.footer-rights span {
  color: var(--accent);
}

/* MOVIE TRAILER POPUP MODAL */
.trailer-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 5, 8, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.trailer-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.trailer-modal-content {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  background: #000;
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(138, 43, 226, 0.4);
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.trailer-modal-backdrop.active .trailer-modal-content {
  transform: scale(1);
}

.modal-close-trigger {
  position: absolute;
  top: -45px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.modal-close-trigger:hover {
  color: var(--accent);
  text-shadow: var(--glow-accent);
}

.modal-close-trigger i {
  font-size: 1.1rem;
}

.video-frame-loader {
  width: 100%;
  height: 100%;
  border: none;
}

/* VFX CONCEPT ART GALLERY STYLES */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns for optimal portrait display */
  gap: 2.5rem;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  background: rgba(22, 28, 45, 0.65); /* lighter background for better contrast against the page black */
  border: 1px solid rgba(138, 43, 226, 0.25); /* highly defined purple border by default */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(138, 43, 226, 0.05); /* subtle inner purple glow */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-card:hover {
  border-color: var(--border-glass-hover);
  box-shadow: 0 15px 40px rgba(255, 106, 0, 0.15), var(--glow-primary);
  transform: translateY(-8px);
}

.gallery-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* Fits full portrait concept art without cropping! */
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1; /* Keep full opacity for maximum brightness and color vibrancy */
  filter: brightness(1.25) contrast(1.15) saturate(1.25); /* Powerful color booster to make all assets look as warm, glowing, and vibrant as Card 1 */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.gallery-card:hover .gallery-img {
  transform: scale(1.05);
  filter: brightness(1.4) contrast(1.2) saturate(1.4); /* lights up intensely on hover! */
}

/* High-tech HUD telemetry overlay on hover */
.gallery-hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

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

.hud-corner-top-left,
.hud-corner-top-right,
.hud-corner-bottom-left,
.hud-corner-bottom-right {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid transparent;
}

.hud-corner-top-left {
  top: 10px;
  left: 10px;
  border-top-color: var(--secondary);
  border-left-color: var(--secondary);
}

.hud-corner-top-right {
  top: 10px;
  right: 10px;
  border-top-color: var(--secondary);
  border-right-color: var(--secondary);
}

.hud-corner-bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom-color: var(--secondary);
  border-left-color: var(--secondary);
}

.hud-corner-bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom-color: var(--secondary);
  border-right-color: var(--secondary);
}

.hud-tag {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 1px;
}

.hud-metrics {
  font-family: var(--font-tech);
  font-size: 0.55rem;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-align: right;
}

.gallery-details {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.gallery-card-title {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--silver);
}

.gallery-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex-grow: 1;
}

/* Lightbox Modal styles */
.gallery-modal-body {
  width: 100%;
}

.mobile-menu-toggle {
  display: none;
}

/* RESPONSIVE DESIGN MEDIA QUERIES */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3rem;
  }
  
  .about-grid, .dashboard-viewport, .revenue-layout, .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .about-showcase {
    order: -1;
  }
  
  .investor-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets/smaller landscape viewports */
    gap: 2rem;
  }
  
  .team-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .expansion-roadmap-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .expansion-roadmap-container::before {
    display: none;
  }
  
  /* Mobile Menu Toggle Button */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.35);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-toggle:hover {
    background: rgba(138, 43, 226, 0.25);
    border-color: var(--secondary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
  }
  
  .mobile-menu-toggle i {
    width: 20px;
    height: 20px;
    display: block;
  }
  
  /* Mobile Nav Menu Fullscreen Overlay */
  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 5, 8, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    z-index: 10000;
    padding: 2rem;
    margin: 0;
    list-style: none;
  }
  
  .nav-menu.active {
    display: flex !important;
  }
  
  .nav-menu li {
    margin: 0;
  }
  
  .nav-menu .nav-link {
    font-size: 1.5rem !important;
    font-family: var(--font-tech);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text) !important;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .nav-header {
    padding: 1rem 2rem;
  }
  
  .nav-header.scrolled {
    padding: 0.6rem 2rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-tagline {
    font-size: 1.1rem;
  }
  
  .hero-btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .founder-card {
    grid-template-columns: 1fr;
  }
  
  .founder-visual-panel {
    min-height: 250px;
    border-right: none;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
  }
  
  .pipeline-line-tracker, .pipeline-line-fill {
    left: 20px;
  }
  
  .pipeline-point-connector {
    left: 20px;
  }
  
  .pipeline-node {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-left: 45px;
  }
  
  .pipeline-side-content {
    text-align: left !important;
  }
  
  .pipeline-node:nth-child(even) .pipeline-side-content {
    grid-column: 1;
  }
  
  .pipeline-node:nth-child(even) .pipeline-card-panel {
    grid-column: 1;
  }
  
  .investor-cards-container {
    grid-template-columns: 1fr;
  }
  
  .team-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .expansion-roadmap-container {
    grid-template-columns: 1fr;
  }
  
  .trailer-modal-backdrop {
    padding: 1.5rem;
  }
  
  .modal-close-trigger {
    top: -35px;
  }

  /* NEW MOBILE OVERRIDES FOR PERFECT ALIGNMENT & FIT */
  .section-title {
    font-size: clamp(1.6rem, 5.5vw, 2.0rem); /* Fits large blocky words on small screens */
  }
  
  .founder-details-panel {
    padding: 1.5rem; /* Reduces horizontal padding to maximize text area */
  }
  
  .founder-name {
    white-space: normal; /* Permits name wrapping on small devices */
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }
  
  .founder-title {
    white-space: normal;
    font-size: 0.75rem;
    letter-spacing: 1.8px;
  }

  .dashboard-items-grid {
    grid-template-columns: 1fr; /* Stacks metrics cards vertically so content is legible */
    gap: 1.25rem;
  }
  
  .dash-item-title {
    font-family: var(--font-body); /* Standard Inter is narrower and safer than wide Syncopate */
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  .investor-card {
    padding: 2rem 1.25rem; /* Maximize perk list width on small screens */
  }
  
  .investor-card.tier-gold {
    transform: none !important;
    margin: 0.5rem 0; /* Stacks cleanly without horizontal scale overflow */
  }
  
  .contact-form-panel {
    padding: 1.5rem; /* Reduces padding to give input fields maximum horizontal space */
  }
  
  .contact-info-card {
    padding: 1rem;
    gap: 1rem;
  }
  
  .section-wrapper {
    padding: 5rem 1.25rem 3rem 1.25rem; /* Clean, consistent mobile padding (20px horizontal) */
  }
  
  .hero-viewport {
    padding: 100px 1.25rem 40px 1.25rem; /* Center hero content without squishing on mobile */
  }
  
  .footer-wrapper {
    padding: 3rem 1.25rem 2rem 1.25rem; /* Consistent 20px horizontal margins in footer */
  }

  .revenue-chart-panel {
    padding: 1.5rem 1rem; /* More room for the graph representation on mobile */
  }

  .about-grid {
    gap: 2rem;
  }
  
  .hologram-sphere-wrap {
    width: 250px;
    height: 250px;
  }
  
  .holo-ring-1 {
    width: 220px;
    height: 220px;
  }
  
  .holo-ring-2 {
    width: 180px;
    height: 180px;
  }
  
  .holo-ring-3 {
    width: 130px;
    height: 130px;
  }
  
  .holo-core {
    width: 80px;
    height: 80px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .gallery-card:hover {
    transform: none !important;
  }
  
  .gallery-details {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .team-grid-container {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-legal-bar {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .contact-form-panel {
    padding: 1.25rem 1rem; /* even tighter on extremely narrow devices */
  }
}

/* BRAND LOGO SPACER SHOWCASE */
.brand-logo-showcase-wrapper:hover .glass-panel {
  border-color: var(--secondary);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.25), 0 0 20px rgba(138, 43, 226, 0.15);
}

.brand-logo-showcase-wrapper img {
  transform: scale(1.0);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.brand-logo-showcase-wrapper:hover img {
  transform: scale(1.03);
  opacity: 1;
}

/* FLOATING WHATSAPP CHAT UPLINK */
.floating-whatsapp-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #25d366;
  z-index: 9999;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.2), inset 0 0 10px rgba(37, 211, 102, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

/* Pulsing outer ring */
.floating-whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.35);
  animation: pulseWhatsapp 2s infinite ease-out;
  pointer-events: none;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.1) translateY(-4px);
  background: rgba(37, 211, 102, 0.25);
  border-color: #25d366;
  color: #fff;
  box-shadow: 0 0 25px rgba(37, 211, 102, 0.6), 0 0 10px rgba(255, 255, 255, 0.15), inset 0 0 15px rgba(37, 211, 102, 0.3);
}

.floating-whatsapp-btn .whatsapp-svg-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.4s ease;
}

.floating-whatsapp-btn:hover .whatsapp-svg-icon {
  transform: rotate(12deg) scale(1.05);
}

/* Glassmorphic tooltip */
.whatsapp-btn-tooltip {
  position: absolute;
  right: 75px;
  white-space: nowrap;
  background: rgba(8, 11, 17, 0.95);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #25d366;
  font-family: var(--font-tech);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(37, 211, 102, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(15px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.floating-whatsapp-btn:hover .whatsapp-btn-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@keyframes pulseWhatsapp {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Adjust button spacing on mobile so it doesn't overlap essential UI */
@media (max-width: 768px) {
  .floating-whatsapp-btn {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .floating-whatsapp-btn .whatsapp-svg-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: block !important;
    margin: auto !important;
  }
  
  .whatsapp-btn-tooltip {
    display: none !important; /* Hide tooltips on mobile to avoid layout crowding */
  }
}