/* Reset */
/* --- Global Custom Scrollbar (Chrome, Edge, Safari, Firefox) --- */

/* Firefox standard */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
  height: 10px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent; /* Makes the track invisible so content shows through */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
  border-radius: 10px; /* Round edges */
  border: 3px solid transparent; /* Creates a padding effect */
  background-clip: content-box; /* Ensures the background doesn't bleed into the border area */
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5); /* Brighter when hovered */
}
* {
  box-sizing: border-box;
}
body, html {
  margin: 0; padding: 0;
  background: black;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: white;
}

/* --- Preloader styles restored to match your original site design --- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  /* ADDED: Animated gradient background from your main site */
  background: black;
  background-size: 400% 400%;
  animation: animateGradient 15s ease infinite;
}
#final-loader-slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 500;
  color: white;
  text-align: center;
  opacity: 0; /* Hidden by default */
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

.counter {
    position: fixed;
    /* This keeps the counter in the bottom-left corner as requested */
    left: 25px;
    bottom: 25px;
    display: flex;
    height: 35px;
    font-size: 35px;
    line-height: 1.02;
    clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
    font-weight: 400;
    /* MODIFIED: Text color is white */
    color: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    overflow: hidden;
}

.counter-1,
.counter-2,
.counter-3,
.counter-4 {
    position: relative;
}


#team-panel p,
#contact-us-panel p {
  text-align: center;
}
.num1offset2 {
    position: relative;
}

#loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 150px; /* Adjust size as needed */
  width: auto;
}

/* --- Rule to hide the main content initially --- */
#main-content {
  visibility: hidden;
  opacity: 0;
}
.recaptcha-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: fit-content; 
}

.g-recaptcha {
  transform: scale(0.75);
  transform-origin: center;
}
#dashboard-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
  display: inline-block; /* Hidden by default */
}
#dashboard-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Make auth controls align nicely */
#auth-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- ALL OF YOUR ORIGINAL WEBSITE STYLES BELOW THIS LINE --- */
/* (These are unchanged) */

/* smooth-wrapper */
#smooth-wrapper {
  overflow: visible;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}


/* In style.css, add these rules */

#team-canvas-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 20px;

  transform: scale(0.85) translateY(-60px);
  margin-bottom: -120px;
}

#team-info-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  color: white;

  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#team-info-overlay.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#team-info-overlay img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  margin-bottom: 15px;
}

#team-info-overlay h3 {
  margin: 0;
  font-size: 1.5rem;
}

#team-info-overlay p {
  margin: 5px 0 0;
  font-size: 1rem;
  opacity: 0.8;
}

/* --- NEW: Auth UI Styles --- */
.nav-left {
  display: flex;
  align-items: center; /* This vertically aligns the logo group and the button group */
  gap: 15px;
}

.logo-welcome-wrapper {
  display: flex;
  flex-direction: column; /* This stacks the logo and welcome message */
}



/* This class will be added by JS to show the welcome message */
#username-display.visible {
  display: block;
}

/* Remove the old auth-controls styles if you have any */
/* The buttons themselves don't need new styles, just their container */

#auth-controls {
  display: flex;
  align-items: center;
  gap: 12px;
    
}
#auth-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 3px; 
}
#auth-icon-btn svg {
  width: 28px;
  height: 28px;
  fill: rgba(255, 255, 255, 0.8);
  transition: fill 0.3s ease;
  
}
#auth-icon-btn:hover svg {
  fill: white;
}

#username-display {
  font-weight: 500;
  color: white;
  /* MODIFIED: Made the font smaller */
  font-size: 0.8rem; 
  margin-top: 4px; 
  display: none; 
}
#logout-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
  position: relative; 
  top: 0px;  
  display: none !important; 
}
#logout-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* --- NEW: Notification Banner --- */
#notification-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%); /* Start hidden above the screen */
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 12px 12px;
  color: white;
  font-weight: 500;
  z-index: 3000;
  transition: transform 0.5s ease-in-out;
  box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

#notification-banner.visible {
  transform: translate(-50%, 0); /* Slide into view */
}

#notification-banner.success {
  background: rgba(20, 160, 90, 0.5); /* Greenish for success */
  border-color: rgba(70, 224, 127, 0.5);
}
#notification-banner.error {
  background: rgba(224, 69, 69, 0.5); /* Reddish for error */
  border-color: rgba(224, 69, 69, 0.5);
}

/* Auth Modal */
body.modal-open {
    overflow: hidden; /* Prevent background scroll */
}
#auth-modal-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#auth-modal-container.visible {
  opacity: 1;
  pointer-events: all;
}
#auth-modal {
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 30px 40px;
  width: 90vw;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
#close-modal-btn {
  position: absolute;
  top: 10px; right: 15px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
#close-modal-btn:hover {
  color: white;
}
#auth-modal h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}
#auth-modal form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#auth-modal input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  color: white;
  font-family: inherit;
}
#auth-modal .cta-btn {
  margin-top: 10px;
}
#auth-modal .form-switcher {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 20px;
  color: rgba(255,255,255,0.7);
}
#auth-modal .form-switcher a {
  color: white;
  font-weight: 500;
  text-decoration: none;
}
#auth-modal .form-status {
  text-align: center;
  margin-top: 15px;
  font-weight: 500;
  min-height: 1.2em;
}

/* --- Navigation --- */
#nav-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 70px;
  z-index: 1100;
  display: flex; justify-content: space-between; 
  /* MODIFIED: This stops the logo from being pushed upwards */
  align-items: center; 
  padding: 15px 20px; /* Adjusted padding slightly for the new alignment */
  transition: top 0.3s ease;
}


#nav-logo {
  color: white; text-decoration: none;
}

#nav-logo img {
  height: 35px;
  width: auto;
  display: block;
  transition: filter 0.3s ease;
  opacity: 1; 
}
#nav-logo img:hover {
  filter: brightness(1.2); /* Adjust the value (e.g., 1.2 for 20% brighter) */
}

#nav-menu {
  display: flex; gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
#nav-menu li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent; 
}
#nav-menu li a:hover {
  color: white;
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: animate-gradient-text 3s linear infinite;
  border-bottom-color: white;
}
#nav-menu li a.active-link {
  color: white;
  border-bottom: 2px solid white;
}
#nav-menu li a.active-link:hover {
    background: none; animation: none; color: white;
}

/* --- Hamburger Menu & Button --- */
#hamburger-btn {
  display: none; /* FIX: Hide hamburger on desktop by default */
  position: fixed; top: 20px; right: 40px;
  width: 30px; height: 30px;
  flex-direction: column; justify-content: space-around;
  background: transparent; border: none; cursor: pointer;
  padding: 0; z-index: 1001;
}
#hamburger-btn span {
  width: 30px; height: 3px;
  background: white; border-radius: 10px;
  transition: all 0.3s ease-in-out;
  position: relative; transform-origin: center;
}
#hamburger-btn.active span:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
#hamburger-btn.active span:nth-child(2) { opacity: 0; }
#hamburger-btn.active span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }

/* --- Mobile Menu & Letter Animation --- */
#mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  z-index: 1000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: opacity 0.4s ease-in-out;
  opacity: 0; pointer-events: none;
}
#mobile-menu.active { opacity: 1; pointer-events: all; }
#mobile-menu ul { list-style: none; padding: 0; margin: 0; text-align: center; }
#mobile-menu ul li { margin-bottom: 25px; }
#mobile-menu ul li:last-child { margin-bottom: 0; }

/* UPDATED: Removed border and added position: relative */
#mobile-menu ul li a {
  position: relative; /* This is needed for the new underline */
  text-decoration: none; font-size: 2.5rem;
  font-weight: 700; padding: 10px;
  color: white;
}

/* NEW: The curved-edge underline effect */
#mobile-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px; /* Position below the text */
  left: 0;
  width: 100%;
  height: 3px; /* Thickness of the underline */
  background-color: white;
  border-radius: 3px; /* This creates the curved edges */
  
  /* Initial state for the animation (hidden) */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* NEW: This makes the underline appear on the active link */
#mobile-menu ul li a.active-link::after {
  opacity: 1;
  transform: scaleX(1); /* Animate to full width */
}


/* Individual letter styling (no changes here) */
#mobile-menu ul li a span {
  display: inline-block;
  opacity: 0;
  color: white;
}

/* Animate letters IN when menu is active */
#mobile-menu.active ul li a span {
  animation: revealLetter 0.8s forwards;
  animation-delay: var(--delay-in);
}

/* Animate letters OUT when menu is closing */
#mobile-menu.closing ul li a span {
  opacity: 1; 
  animation: hideLetter 0.6s forwards;
  animation-delay: var(--delay-out);
}


/* --- Keyframes for letter animations --- */
@keyframes revealLetter {
  0% {
    opacity: 0;
    transform: translateY(10px);
    color: #95e2f7;
  }
  20% {
    opacity: 1;
    transform: translateY(0);
    color: #95e2f7;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    color: white;
  }
}

@keyframes hideLetter {
  0% {
    opacity: 1;
    transform: translateY(0);
    color: white;
  }
  50% {
    opacity: 1;
    transform: translateY(0);
    color: #95e2f7;
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
    color: #95e2f7;
  }
}
/* --- (Rest of your CSS is the same) --- */
/* --- Backgrounds --- */
.background-container {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}
#bg-canvas {
  filter: brightness(0.4);
  transition: filter 0.5s ease, opacity 0.8s ease;
}
/* Style for the dynamically added Three.js canvas */
.background-container > canvas:not(#bg-canvas) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#animated-gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #4a00e0, #8e2de2, #00c6ff, #0072ff);
  background-size: 400% 400%;
  animation: animateGradient 15s ease infinite;
  opacity: 0;
  transition: opacity 0.8s ease, filter 0.5s ease;
}
@keyframes animateGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* --- Slogan & Intro --- */
#slogan-container {
  position: fixed;
  top: 20vh; 
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  max-width: 90vw; 
  z-index: 5;
  transition: opacity 0.6s ease, transform 0.6s ease, pointer-events 0.6s;
}
#slogan-container.fade-up {
  opacity: 0;
  transform: translate(-50%, -100px);
  pointer-events: none;
}
#slogan-main { 
  font-size: 3.2rem; 
  font-weight: 900;
  white-space: nowrap; 
}
#slogan-sub { font-size: 1.3rem; opacity: 0.85; margin-bottom: 24px; line-height: 1.5; }

.subtle-btn {
  cursor: pointer;
  padding: 14px 34px;
  color: white;
  background: rgba(255 255 255 / 0.15);
  border: 2px solid rgba(255 255 255 / 0.4);
  border-radius: 40px;
  font-size: 1rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0);
}
.subtle-btn:hover {
  background: rgba(255 255 255 / 0.35);
  box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
}

#scroll-down-container {
  position: fixed;
  top: 80vh; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; 
  animation: bounce-scroll 2.5s infinite;
}
#scroll-down-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
}
#scroll-down-arrow {
  width: 30px; 
  height: auto;
}
@keyframes bounce-scroll {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* --- Chat UI --- */


#chat-container {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 450px;
  min-height: 220px;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-radius: 24px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);

  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  gap: 14px;

  opacity: 0; /* Hidden by default, controlled by JS */
  pointer-events: none; /* Non-interactive by default */
  transition: opacity 0.5s ease;
  z-index: 10;
}

#chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1; /* Allows the log to fill available space */
  justify-content: flex-end; /* Pushes messages to the bottom */
  padding-bottom: 10px; /* Adds space above the input area */
}

.chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 20px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  visibility: hidden; /* Hide messages by default */
}

/* Replace the existing #chat-input-area rule */
#chat-input-area {
  position: relative; /* No longer needs absolute positioning */
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  min-height: 48px;
  height: auto;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 20px;
}

/* Style the text area and add a blinking cursor */
#chat-input-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  padding: 12px 0;
  color: white;
  opacity: 0.9;
  position: relative;
}
#chat-input-text::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1.2em;
  background: #00c6ff;
  animation: blink 1s step-end infinite;
  display: none; /* Hidden by default */
}
#chat-input-text.typing::after {
  display: block; /* Show cursor only when typing */
}
@keyframes blink {
  from, to { background: transparent }
  50% { background: #00c6ff }
}


/* Style the send button */
#chat-send-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
#chat-send-btn svg {
  width: 22px;
  height: 22px;
  fill: rgba(255, 255, 255, 0.4);
  transition: fill 0.3s ease;
}

/* Glow effect for the send button */
#chat-send-btn.glow {
  background: rgba(255, 255, 255, 0.9); /* White background */
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7); /* White shadow */
}
#chat-send-btn.glow svg {
  fill: #000; /* Black icon for contrast */
}

#chat-container.visible { opacity: 1; }

.chat-msg.user { background: rgba(255 255 255 / 0.3); align-self: flex-end; }
.chat-msg.bot { background: rgba(255 255 255 / 0.6); color: black; align-self: flex-start; }
.chat-msg::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.chat-msg.user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.chat-msg.bot::before {
  background-image: url('GenAI.png');
}

/* --- Panels UI --- */
#panels-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  perspective: 1000px;
  pointer-events: none;
  opacity: 0;
}
.panel {
  position: absolute;
  top: 50%; left: 50%;
  width: 1050px; 
  max-width: 90vw;
  background: rgba(255 255 255 / 0.15);
  backdrop-filter: blur(25px) brightness(0.6);
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255 255 255 / 0.15);
  padding: 24px; 
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 24px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) translateZ(-800px);
}
.panel-content { 
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.panel video {
  width: 50%;
  height: auto; /* Lets the video maintain its natural aspect ratio */
  border-radius: 16px;
  object-fit: contain; /* Prevents the video from being cropped */
  pointer-events: all; 
}
.panel .desc { flex: 1; font-size: 1.1rem; line-height: 1.5; }
.panel .desc h3 { margin-top: 0; }
.panel .desc p { margin-bottom: 1em; }


/* Enforce proper sizing when the video is in fullscreen mode */
.panel video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: black; /* Hides any weird background bleeding */
}

/* Safari / Chrome fallback for fullscreen */
.panel video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: black;
}



.panel-btn {
  cursor: pointer;
  padding: 12px 28px;
  color: white;
  background: rgba(255 255 255 / 0.1);
  border: 1px solid rgba(255 255 255 / 0.3);
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  pointer-events: all; 
}
.panel-btn:hover {
  background: rgba(255 255 255 / 0.2);
  box-shadow: 0 0 18px 5px rgba(255, 255, 255, 0.5); 
}

/* --- Pricing UI --- */
#pricing-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  perspective: 1200px;

  pointer-events: none;
  opacity: 0;
}
.pricing-panel {
  position: absolute;
  top: 50%;
  width: 300px;
  max-width: 85vw;
  background: rgba(255 255 255 / 0.12);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 2px solid rgba(255 255 255 / 0.2);
  padding: 30px 25px;
  text-align: center;
  opacity: 0;
  transform: translateY(-50%) translateZ(-1000px) rotateX(-20deg);
  box-shadow: 0 20px 60px rgba(0 0 0 / 0.3);
  pointer-events: all;
}
#pricing-starter { left: 15%; }
#pricing-pro { 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%) translateZ(-1000px) rotateX(-20deg) scale(1.1);
  border: 2px solid #4a00e0;
  background: rgba(74 0 224 / 0.15);
}
#pricing-enterprise { right: 15%; }
.pricing-panel h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; color: white; }
.pricing-panel .price { font-size: 2.5rem; font-weight: 900; color: white; margin-bottom: 5px; }
.pricing-panel .price-period { font-size: 0.9rem; opacity: 0.7; margin-bottom: 25px; }
.pricing-panel .description { font-size: 1rem; opacity: 0.8; margin-bottom: 25px; line-height: 1.4; }
.pricing-panel ul { list-style: none; padding: 0; margin-bottom: 30px; text-align: left; }
.pricing-panel li { padding: 6px 0; font-size: 0.85rem; opacity: 0.9; position: relative; padding-left: 20px; }
.pricing-panel li::before { content: "✓"; position: absolute; left: 0; color: #4a00e0; font-weight: bold; }

.cta-btn {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.4);
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none; /* Reset the original shadow */
}

.cta-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
  transform: none; /* Reset the original transform */
}

/* --- Slogan Sections --- */
.slogan-wrapper {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 90vw; 
  width: 800px; 
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.slogan-wrapper h2 { 
  font-size: 2.8rem; 
  font-weight: 900; 
  line-height: 1.2;
}
#pre-pricing-slogan-container h2, #slogan-main {
  white-space: nowrap; 
}
#second-slogan-main {
    white-space: normal;
}
.slogan-wrapper p { font-size: 1.2rem; opacity: 0.85; margin: 16px 0 0; line-height: 1.5; max-width: 700px; margin-left: auto; margin-right: auto;}

/* --- Final Sections --- */
#final-sections-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  perspective: 1000px;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-panel {
  position: absolute;
  width: 950px;
  max-width: 90vw;
  max-height: 80vh;
  background: rgba(255 255 255 / 0.05);
  backdrop-filter: blur(12px) brightness(0.85);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.9) translateZ(-500px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: all;
  line-height: 1.6;
  overflow-y: auto;
}
.final-panel h2 {
  margin-top: 0;
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 24px;
}

/* =========================================================
   Who Uses 
   ========================================================= */
#who-uses-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 950px;
  text-align: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#who-uses-panel.visible {
  opacity: 1;
  pointer-events: all;
}

#who-uses-panel h2 {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 4px;
  margin-bottom: 2.5rem;
  color: #fff;
  text-shadow: 0 0 30px rgba(102, 170, 255, 0.3);
}

.who-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.8rem;
  max-width: 850px;
  margin: 0 auto;
  padding: 0 1rem;
}

.who-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem 1.2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: floatCard 6s ease-in-out infinite;
  position: relative;
  will-change: transform;
}

.who-card:nth-child(1) { animation-delay: 0s; }
.who-card:nth-child(2) { animation-delay: 0.6s; }
.who-card:nth-child(3) { animation-delay: 1.2s; }
.who-card:nth-child(4) { animation-delay: 0.3s; }
.who-card:nth-child(5) { animation-delay: 0.9s; }
.who-card:nth-child(6) { animation-delay: 1.5s; }

.who-card:hover {
  transform: scale(1.04) translateY(-6px);
  border-color: rgba(102, 170, 255, 0.6);
  box-shadow: 0 12px 40px rgba(102, 170, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.who-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 12px rgba(102, 170, 255, 0.4));
}

.who-card h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0.4rem 0 0;
  line-height: 1.3;
  color: #fff;
}

.who-counter {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 2px;
  opacity: 0.5;
  text-transform: uppercase;
}


@media (max-width: 768px) {
  #who-uses-panel h2 { font-size: 2.2rem; }
  .who-carousel {
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.2rem;
    max-width: 500px;
  }
  .who-card { padding: 1.5rem 1rem; }
  .who-icon { font-size: 2.2rem; }
  .who-card h4 { font-size: 0.95rem; }
}
@media (max-width: 480px) {
  .who-carousel {
    gap: 0.8rem;
    max-width: 320px;
  }
  .who-card { padding: 1rem 0.6rem; }
  .who-icon { font-size: 1.8rem; }
  .who-card h4 { font-size: 0.8rem; }
}


/* =========================================================
   Shared 3D Neon Connector Line
   Fixed overlay, travels down the page in 3D space and lights
   up the node on whichever vision/why panel is currently active.
   ========================================================= */
#neon-line-3d {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.5s ease;
  perspective: 600px;
}

#neon-line-3d.neon-line-visible {
  opacity: 1;
}

#neon-line-3d svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotateX(6deg);
  transform-style: preserve-3d;
}

#neon-line-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

#neon-line-glow,
#neon-line-fill {
  fill: none;
  stroke: url(#neonGradient);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.12s linear;
}

#neon-line-glow {
  stroke-width: 7;
  filter: blur(5px);
  opacity: 0.75;
}

#neon-line-fill {
  filter: drop-shadow(0 0 4px rgba(140, 210, 255, 0.9));
}

/* Node marker living inside each vision/why panel; lit when the
   traveling line currently reaches that panel's stop. */
.neon-node {
  display: none;
}

/* =========================================================
   Vision — each stop is its own standalone full panel
   ========================================================= */
.vision-panel-3d {
  background: rgba(5, 8, 20, 0.3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(110, 200, 255, 0);
  transition: opacity 0.8s ease, transform 0.8s ease, border-color 0.8s ease;
}

.vision-panel-3d.is-in-focus {
  border-color: rgba(110, 200, 255, 0.65);
}

.vision-panel-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 35px 10px rgba(80, 190, 255, 0.7),
    0 0 80px 22px rgba(70, 160, 255, 0.45),
    inset 0 0 20px rgba(80, 190, 255, 0.1);
}

.vision-panel-3d.is-in-focus::after {
  will-change: opacity;
  animation: visionPanelGlowPulse 2.6s ease-in-out infinite;
}

@keyframes visionPanelGlowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.vision-panel-3d .vision-title {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: 4px;
  margin-bottom: 2rem;
  background: linear-gradient(90deg, #fff, #8ec9ff, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 25px rgba(102, 170, 255, 0.35);
  animation: visionTitleShimmer 5s linear infinite;
}

@keyframes visionTitleShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.vision-cards-container {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 820px;
  justify-content: center;
  align-items: stretch;
}

.vision-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(140, 210, 255, 0.15);
  padding: 1.8rem 1.6rem;
  border-radius: 18px;
  opacity: 0.2;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
}

.vision-card.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(140, 210, 255, 0.5);
  box-shadow:
    0 0 20px rgba(102, 170, 255, 0.35),
    0 0 50px rgba(102, 170, 255, 0.15),
    inset 0 0 18px rgba(102, 170, 255, 0.06);
}

.vision-card h3 {
  font-size: 1.3rem;
  color: #aee0ff;
  margin: 0 0 0.6rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(102, 170, 255, 0.4);
}

.vision-card p {
  font-size: 1rem;
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
}

.vision-card-progress {
  display: flex;
  gap: 10px;
  margin-top: 1.6rem;
}

.vision-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140, 210, 255, 0.25);
  transition: background 0.4s ease, transform 0.4s ease;
}

.vision-progress-dot.active {
  background: rgba(140, 210, 255, 0.9);
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .vision-cards-container {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .vision-panel-3d .vision-title { font-size: 2rem; }
  .vision-stop-card { padding: 1.3rem 1.5rem; }
  #neon-line-3d { height: 100vh; }
  .neon-node { top: 18px; right: 18px; width: 13px; height: 13px; }
}

/* =========================================================
   Why — each reason is its own standalone full panel
   ========================================================= */
#why-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1100px;
  text-align: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#why-panel.visible {
  opacity: 1;
  pointer-events: all;
}

.why-title {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 4px;
  margin-bottom: 2.5rem;
  color: #fff;
  text-shadow: 0 0 30px rgba(102, 170, 255, 0.3);
}

.why-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.8rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.why-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem 1.2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: floatCard 6s ease-in-out infinite;
  position: relative;
  will-change: transform;
}

.why-card:nth-child(1) { animation-delay: 0s; }
.why-card:nth-child(2) { animation-delay: 0.6s; }
.why-card:nth-child(3) { animation-delay: 1.2s; }
.why-card:nth-child(4) { animation-delay: 0.3s; }
.why-card:nth-child(5) { animation-delay: 0.9s; }
.why-card:nth-child(6) { animation-delay: 1.5s; }
.why-card:nth-child(7) { animation-delay: 0.4s; }
.why-card:nth-child(8) { animation-delay: 1.0s; }

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

.why-card:hover {
  transform: scale(1.04) translateY(-6px);
  border-color: rgba(102, 170, 255, 0.6);
  box-shadow: 0 12px 40px rgba(102, 170, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.why-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 12px rgba(102, 170, 255, 0.4));
}

.why-card h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0.4rem 0 0;
  line-height: 1.3;
  color: #fff;
}

.why-card-sub {
  font-size: 0.75rem;
  opacity: 0.7;
  display: block;
  margin-top: 0.2rem;
  font-weight: 300;
}

.why-counter {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 2px;
  opacity: 0.5;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .why-title { font-size: 2.2rem; }
  .why-carousel {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
  }
  .why-card { padding: 1.5rem 1rem; }
  .why-icon { font-size: 2.2rem; }
  .why-card h4 { font-size: 0.95rem; }
}

#team-canvas-container iframe {
  filter: none !important;
  -webkit-filter: none !important;
}
.about-content {
  display: flex;
  gap: 30px;
  align-items: center;
}
.about-text { flex: 1; }
.map-container {
  flex: 1;
  min-height: 250px;
  border-radius: 12px;
  overflow: hidden;
}
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 20px auto 0;
}
#contact-form input, #contact-form textarea {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  color: white;
  font-family: inherit;
}
#contact-form input::placeholder, #contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#contact-form button { align-self: center; }
#form-status {
  text-align: center;
  margin-top: 16px;
  font-weight: 500;
}

/* --- Footer --- */
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  z-index: 10;
}
footer p {
  margin: 0;
}
.funny-text {
  margin-top: 8px;
  font-style: italic;
  opacity: 0.8;
}

/* --- Media Queries --- */
@media (max-width: 1200px) {
  #slogan-main, .slogan-wrapper h2 {
      font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  #nav-menu { display: none; }
  #scroll-down-container { top: 80vh; }
  #mobile-menu ul li a { font-size: 1.7rem; padding: 6px; }
  #mobile-menu ul li { margin-bottom: 16px; }
  #hamburger-btn { display: flex; right: 20px; width: 24px; height: 24px; }
  #hamburger-btn span { width: 24px; height: 2px; }
  #hamburger-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  #hamburger-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  
  #slogan-main, #pre-pricing-slogan-container h2 { 
      font-size: 1.8rem; 
      white-space: normal; 
  }
  #slogan-sub { font-size: 1.1rem; }
  #chat-container { max-width: 95vw; bottom: 20px; font-size: 0.9rem; }
  #team-canvas-container {
    transform: none;
    margin-bottom: 0;
  }
  .panel, .panel-content {
      flex-direction: column;
  }
  .panel {
      height: auto;
      width: 90vw; 
      padding: 16px;
      gap: 16px;
  }
  .panel video {
      width: 100%;
      height: auto;
  }
  .panel .desc { font-size: 0.9rem; }
  .panel .desc p { margin-bottom: 0.8em; }
  .panel-btn {
      padding: 10px 22px;
      font-size: 0.9rem;
      margin-top: 8px;
  }

  .slogan-wrapper h2 { font-size: 2.2rem; white-space: normal; }
  .slogan-wrapper p { font-size: 1rem; }
  
  .pricing-panel {
    width: 90vw; 
    max-width: 340px;
    padding: 25px 20px;
  }
  .pricing-panel h3 { font-size: 1.5rem; }
  .pricing-panel .price { font-size: 2rem; }
  #pricing-starter, #pricing-pro, #pricing-enterprise {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-50%) translateZ(-1000px);
  }
  .final-panel {
    width: 90vw;
    padding: 30px;
  }
  .final-panel h2 { font-size: 2rem; }
  .about-content { flex-direction: column; }
}