:root {
  --bg: #050816; 
  --bg-alt: #070b1e;
  --accent: #7c3aed;
  --accent-soft: rgba(124, 58, 237, 0.12);
  --accent-strong: rgba(124, 58, 237, 0.5);
  --accent-2: #22d3ee;
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --card-bg: #0b1024;
  --border-subtle: rgba(148, 163, 184, 0.2);
  --success: #22c55e;
  --danger: #ef4444;
  --shadow-soft: 0 20px 40px rgba(15, 23, 42, 0.9);
  
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-full: 999px;
   --primary-purple: #5e6ad2;
            --text-dark: #111827;
            --text-gray: #6b7280;
            --card-radius: 16px;
  
  --transition-fast: 0.2s ease-out;
  --transition: 0.35s ease-out;


/* --- DARK MODE BUTTON (Glowing Gradient) --- */
  --btn-pri-bg: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  --btn-pri-text: #ffffff;
  --btn-pri-shadow: 0 10px 20px -5px rgba(124, 58, 237, 0.5); /* Purple glow */
  --btn-pri-hover-shadow: 0 20px 30px -5px rgba(34, 211, 238, 0.6); /* Cyan glow */
  --btn-border: 1px solid rgba(255, 255, 255, 0.1);

/* --- DARK MODE HERO VARS --- */
  --hero-grid-color: rgba(255, 255, 255, 0.03);
  --phone-frame-bg: linear-gradient(145deg, #0f172a, #020617);
  --phone-border: rgba(148, 163, 184, 0.2);
  --phone-screen-bg: linear-gradient(to bottom, #0f172a, #020617);
  --phone-card-bg: rgba(30, 41, 59, 0.7);
  --kicker-bg: rgba(15, 23, 42, 0.6);
  --chip-bg: rgba(15, 23, 42, 0.8);
  --chip-border: rgba(148, 163, 184, 0.2);
  --text-gradient: linear-gradient(90deg, #22d3ee, #7c3aed, #f97316);











/* 1. Base Background Color (Slightly different from Hero) */
  --philo-bg-color: #080c1f; 
  
  /* 2. The Grid Lines (Very faint) */
  --philo-grid-color: rgba(255, 255, 255, 0.03);
  
  /* 3. The Top Spotlight (Green for "Philosophy/Growth") */
  --philo-spotlight: radial-gradient(circle at top, rgba(34, 197, 94, 0.15), transparent 70%);
  
  /* 4. Card Variables (Keep consistent) */
  --philo-card-bg: rgba(15, 23, 42, 0.6); /* More transparent to see grid behind */
  --philo-card-border: rgba(148, 163, 184, 0.2);
  --philo-hover-shadow: 0 20px 40px rgba(34, 197, 94, 0.1);





}

/* --- 2. LIGHT MODE OVERRIDES --- */
/* These only apply when the 'light-mode' class is added */
body.light-mode {
  --bg: #ffffff;
  --bg-alt: #f3f4f6;
  --text-main: #111827;       /* Dark Slate Text */
  --text-muted: #6b7280;      /* Medium Gray Text */
  --card-bg: #ffffff;
 --dot-bg: #000000;
  --dot-shadow: rgba(0, 0, 0, 0.3);
  --border-subtle: rgba(0, 0, 0, 0.1);
  --accent-soft: rgba(124, 58, 237, 0.08);
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
background: linear-gradient(180deg, #ffffff, #f1f5f9);




/* Indigo to Sky Blue - Richer contrast against white background */
  --btn-pri-bg: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  --btn-pri-text: #ffffff;
  /* Soft Drop Shadow (Not a glow) */
  --btn-pri-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.4); 
  --btn-pri-hover-shadow: 0 15px 30px -10px rgba(14, 165, 233, 0.5);
  --btn-border: 1px solid rgba(255, 255, 255, 0.2);

/* --- LIGHT MODE HERO VARS --- */
  --hero-grid-color: rgba(0, 0, 0, 0.04);
  --phone-frame-bg: linear-gradient(145deg, #ffffff, #f1f5f9);
  --phone-border: rgba(0, 0, 0, 0.1);
  --phone-screen-bg: linear-gradient(to bottom, #f8fafc, #e2e8f0);
  --phone-card-bg: rgba(255, 255, 255, 0.9);
  --kicker-bg: rgba(255, 255, 255, 0.8);
  --chip-bg: rgba(255, 255, 255, 0.9);
  --chip-border: rgba(0, 0, 0, 0.08);
  --text-gradient: linear-gradient(90deg, #0ea5e9, #6366f1, #f59e0b);

  --philo-bg-color: #f0fdf4; 
  
  /* 2. The Grid Lines (Faint green/gray) */
  --philo-grid-color: rgba(22, 163, 74, 0.08);
  
  /* 3. The Top Spotlight */
  --philo-spotlight: radial-gradient(circle at top, rgba(255, 255, 255, 0.8), transparent 80%);
  
  /* 4. Card Variables */
  --philo-card-bg: #ffffff;
  --philo-card-border: rgba(22, 163, 74, 0.15);
  --philo-hover-shadow: 0 20px 40px rgba(22, 163, 74, 0.15);


}

/* --- 3. BASE STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;

  /* CRITICAL FIX: Use the variable, not the hardcoded gradient */
  background: var(--bg); 
  color: var(--text-main);

  scroll-behavior: smooth;
  overflow-x: hidden;

  /* Smooth fade animation when switching themes */
  transition: background 0.3s ease, color 0.3s ease;
}









  a {
   text-decoration: none;
   color: inherit;
  }

  img {
   max-width: 100%;
   display: block;
  }

  section {
   padding: 80px min(8vw, 80px);
   position: relative;
   overflow: hidden;
  }

  .container {
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
  }

  /* Blobs */
  .blob {
   position: absolute;
   filter: blur(50px);
   opacity: 0.7;
   pointer-events: none;
   z-index: 0;
   animation: blob 20s ease-in-out infinite;
  }

  .blob-1 {
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, var(--accent) 0, transparent 60%);
   top: -60px;
   right: 5%;
  }

  .blob-2 {
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, var(--accent-2) 0, transparent 60%);
   bottom: 60px;
   left: 5%;
  }

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

  @keyframes blob {
   0% { transform: translate(-10px, 0px) scale(1); }
   50% { transform: translate(10px, -10px) scale(1.05); }
   100% { transform: translate(-10px, 0px) scale(1); }
  }

  @keyframes pulse-soft {
   0% { opacity: 0.5; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.05); }
   100% { opacity: 0.5; transform: scale(1); }
  }
  @keyframes sway-soft {
  0% { transform: translateX(0px); }
  50% { transform: translateX(15px); } /* Move 15px to the right */
  100% { transform: translateX(0px); } /* Return to center */
}

  /* Header / Nav */
  header {
   position: sticky;
   top: 0;
   z-index: 50;
   backdrop-filter: blur(18px);
   /*background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.95),
    rgba(15, 23, 42, 0.7),
    transparent
   );*/
   border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-subtle);
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; transition: all 0.3s ease;
    color: var(--toggle-icon-color);
}
.theme-toggle:hover { background-color: var(--toggle-bg-hover); }

.theme-icon { width: 18px; height: 18px; position: absolute; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }

/* Icon Animation Logic */
.sun-icon { opacity: 1; transform: rotate(0deg) scale(1); }
.moon-icon { opacity: 0; transform: rotate(90deg) scale(0); }

/* When in Light Mode */
body.light-mode .sun-icon { opacity: 0; transform: rotate(-90deg) scale(0); }
body.light-mode .moon-icon { opacity: 1; transform: rotate(0deg) scale(1); }





  .nav {
   max-width: 1200px;
   margin: 0 auto;
   padding: 14px min(8vw, 80px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
  }

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

  .logo-text-main {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.05em;
  }

  .logo-sub {
   font-size: 11px;
   color: var(--accent-2);
   text-transform: uppercase;
   letter-spacing: 0.16em;
  }



  .logo-svg img {
 height: 25px;     /* Adjust as needed */
 width: auto;
 display: block;

 transition: transform 0.3s ease;
}

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





  .nav-links {
   display: flex;
   align-items: center;
   gap: 18px;
   font-size: 13px;
   color: var(--text-muted);
  }

  .nav-links a {
   position: relative;
   padding-bottom: 4px;
  }

  .nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 2px;
   background: linear-gradient(to right, var(--accent), var(--accent-2));
   transition: width var(--transition-fast);
  }

  .nav-links a:hover {
   color: var(--text-main);
  }

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

  .nav-cta {
   display: flex;
   align-items: center;
   gap: 10px;
  }

  .btn {
   padding: 10px 18px;
   border-radius: var(--radius-full);
   border: 1px solid transparent;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   background: transparent;
   color: var(--text-main);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
  }

 /* .btn-primary {
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   box-shadow: 0 12px 28px rgba(56, 189, 248, 0.3);
  }

  .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 18px 40px rgba(56, 189, 248, 0.5);
  }
*/

.btn-primary {
  /* 1. Color & Background */
  background: var(--btn-pri-bg);
  color: var(--btn-pri-text);
  border: var(--btn-border);
  
  /* 2. The "Important" Shadow */
  box-shadow: var(--btn-pri-shadow), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Subtle top shine */

  /* 3. Typography & Layout */
  padding: 12px 24px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  overflow: hidden;
  
  /* 4. Animation */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-primary:hover {
  /* Lift effect */
  transform: translateY(-3px) scale(1.02);
  
  /* Enhanced Shadow on Hover */
  box-shadow: var(--btn-pri-hover-shadow), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:active {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* OPTIONAL: Add a subtle sheen animation on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
  z-index: -1;
}

.btn-primary:hover::after {
  left: 100%; /* Shines across the button */
}




  .nav-toggle {
   display: none;
   width: 32px;
   height: 32px;
   border-radius: var(--radius-full);
   border: 1px solid rgba(148, 163, 184, 0.5);
   align-items: center;
   justify-content: center;
   cursor: pointer;
  }

  .nav-toggle span {
   display: block;
   width: 16px;
   height: 2px;
   background: var(--text-main);
   position: relative;
  }

  .nav-toggle span::before,
  .nav-toggle span::after {
   content: "";
   position: absolute;
   left: 0;
   width: 16px;
   height: 2px;
   background: var(--text-main);
  }

  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after { top: 5px; }

  /* Hero */






 #hero {
   padding-top: 100px;
   padding-bottom: 100px;
  }

  .hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
   gap: 50px;
   align-items: center;
  }

/* --- COMBINED HERO KICKER (Animated + Interactive + Subtle Default Glow) --- */
.hero-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  
  /* 1. Size & Shape */
  padding: 8px 16px;
  border-radius: 999px; 
  border: 2px solid transparent; 

  /* 2. Dual Backgrounds & Masking */
  background-image: 
    linear-gradient(var(--card-bg), var(--card-bg)), 
    linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045, #833ab4);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  
  /* 3. Continuous Border Animation */
  background-size: 100% 100%, 300% 100%; 
  animation: insta-move 4s linear infinite;

  /* 4. Text Styling */
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  /* 5. Smooth Transition for Hover Effects */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.3s ease;
              
  /* 6. SUBTLE GLOW (NON-HOVER STATE) */
  box-shadow: 0 0 12px rgba(220, 39, 67, 0.25), /* Soft outer glow */
              inset 0 0 6px rgba(220, 39, 67, 0.1); /* Gentle inner glow */
}

/* --- HOVER STATE (Interaction - More Pronounced Glow) --- */
.hero-kicker:hover {
  transform: scale(1.05);
  
  /* STRONGER GLOW ON HOVER */
  box-shadow: 0 0 30px rgba(220, 39, 67, 0.6), /* Wider, brighter outer glow */
              inset 0 0 15px rgba(220, 39, 67, 0.3); /* Stronger inner glow */
}

/* --- KEYFRAMES (Remains the same) --- */
@keyframes insta-move {
  0% {
    background-position: 0% 0%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 100% 0%;
  }
}

/* --- DOT STYLING (Remains the same) --- */
/* --- BLINKING RED DOT --- */
.hero-kicker-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  
  /* 1. Vibrant Red */
  background-color: #ff0000;
  
  /* 2. Initial Shadow */
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
  
  /* 3. The Blinking Animation */
  animation: blink-red 1.5s infinite ease-in-out;
}

/* Define the Blink Logic */
@keyframes blink-red {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
  }
  50% {
    opacity: 0.4; /* Fades out */
    transform: scale(0.8); /* Shrinks slightly */
    box-shadow: 0 0 0 rgba(255, 0, 0, 0); /* Shadow disappears */
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
  }
}





















  .hero-title {
   font-size: clamp(30px, 4vw, 42px);
   line-height: 1.1;
   margin-bottom: 14px;

  }

  .hero-title span.gradient {
   background: linear-gradient(120deg, var(--accent-2), var(--accent), #f97316);
   -webkit-background-clip: text;
   color: transparent;
  }

  .hero-subtitle {
   font-size: 15px;
   color: var(--text-muted);
   max-width: 520px;
   line-height: 1.6;
   margin-bottom: 18px;
  }

  .hero-dynamic {
   font-size: 14px;
   color: var(--accent-2);
   margin-bottom: 20px;
   min-height: 20px;
   font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;

  }

  .hero-cta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 24px;

  }

  .hero-meta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   font-size: 12px;
   color: var(--text-muted);
  }


.meta-chip {
  padding: 8px 14px; border-radius: var(--radius-full);

  border: 1px solid var(--border-subtle);
  background: var(--meta-chip-bg);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  box-shadow: var(--shadow-soft);

}


  .meta-dot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: var(--success);
   box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);

  }

  .hero-right {
   position: relative;
   perspective: 1200px;
  }

.phone-frame {
  width: 100%; max-width: 320px; margin-left: auto; margin-right: auto;
  border-radius: 36px; padding: 15px 12px;
  
  background: var(--phone-frame-bg);
  border: 1px solid var(--phone-border);
  box-shadow: var(--shadow-soft);
  position: relative; overflow: hidden; transform-style: preserve-3d;
  animation: float-soft 6s ease-in-out infinite;
}

.phone-screen {
  border-radius: 28px; padding: 16px;
 
  background: var(--phone-screen-bg);
  border: 1px solid var(--phone-border);
  position: relative; overflow: hidden;
  /* Ensure text inside phone adapts */
  color: var(--text-main);
}

.phone-tag {
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
 
  background: var(--phone-card-bg);
  border: 1px solid var(--border-subtle);
  color: var(--accent-2); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
  .pill-pulse {
   width: 8px;
   height: 8px;
   border-radius: 999px;
   background: var(--accent-2);
   animation: pulse-soft 2s ease-out infinite;
  }

  .phone-title {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 6px;
  }

  .phone-sub {
   font-size: 12px;
   color: var(--text-muted);
   margin-bottom: 14px;
  }

  .phone-card-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin-bottom: 14px;
  }


.phone-card {
  padding: 10px; border-radius: 16px;

  background: var(--phone-card-bg);
  border: 1px solid var(--border-subtle);
  font-size: 10px; display: flex; flex-direction: column; gap: 3px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}



  .phone-card-label {
   font-size: 10px;
   color: var(--text-main);
  }

  .phone-card-value {
   font-size: 14px;
   font-weight: 600;
  }

  .phone-card-chip {
   padding: 4px 8px;
   border-radius: 999px;
   background: rgba(124, 58, 237, 0.1);
   border: 1px solid rgba(124, 58, 237, 0.6);
   font-size: 9px;
   margin-top: 4px;
  }

  .phone-footer-row {
   margin-top: 6px;
   font-size: 9px;
   color: var(--text-muted);
  }


.phone-footer-pill {
  padding: 5px 9px; border-radius: 999px;
 
  background: var(--phone-card-bg);
  border: 1px dashed var(--border-subtle);
  font-size: 9px; color: var(--text-muted);
}



  .phone-glow-ring {
   position: absolute;
   inset: 20%;
   border-radius: 999px;
   border: 1px solid rgba(56, 189, 248, 0.2);
   filter: blur(2px);
  }

  .hero-floating-chips {
   position: absolute;
   inset: 0;
   pointer-events: none;
  }


  .floating-chip {
  position: absolute; padding: 8px 14px; border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 11px; backdrop-filter: blur(12px);
  animation: float-soft 7s ease-in-out infinite;
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
}

  .floating-chip:nth-child(1) { top: 10%; right: 5%; animation-delay: 0s; }
  .floating-chip:nth-child(2) { bottom: 8%; left: 0%; animation-delay: 1.2s; }
  .floating-chip:nth-child(3) { bottom: 30%; right: -8%; animation-delay: 2.1s; }























  /* Section titles */
  .section-eyebrow {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: var(--accent-2);
   margin-bottom: 8px;
  }

  .section-heading {
   font-size: 24px;
   margin-bottom: 10px;
  }

  .section-subtitle {
   font-size: 14px;
   color: var(--text-muted);
   max-width: 520px;
  }



/* =========================================
   RESPONSIVE MEDIA QUERIES (Max-Width: 768px)
   ========================================= */
@media (max-width: 768px) {

  /* --- NAVIGATION ADJUSTMENTS --- */
  .nav {
    padding: 14px 20px; /* Reduce side padding for small screens */
  }

  /* Hide Desktop Menu Items */
  .nav-links, 
  .nav-cta {
    display: none; 
    /* Note: You will need a small JavaScript script to toggle 
       a mobile menu when the hamburger icon is clicked. */
  }

  /* Show the Hamburger Toggle */
  .nav-toggle {
    display: flex;
  }

  /* --- HERO SECTION ADJUSTMENTS --- */
  #hero {
    padding-top: 40px;
    padding-bottom: 60px;
    overflow-x: hidden; /* Prevents floating chips from causing scrollbars */
  }

  .hero-grid {
    grid-template-columns: 1fr; /* Stack items vertically instead of side-by-side */
    gap: 40px;
    text-align: center; /* Center text for better mobile readability */
  }

  /* Center the text content explicitly */
  .hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-title {
    font-size: 32px; /* Slightly smaller font for mobile */
    line-height: 1.2;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the buttons */
  .hero-cta-row, 
  .hero-meta-row {
    justify-content: center;
  }

  /* --- PHONE / RIGHT SIDE ADJUSTMENTS --- */
  .hero-right {
    margin-top: 20px;
    transform: scale(0.95); /* Shrink the 3D phone slightly to fit nicely */
  }

  /* Adjust Floating Chips to stay close to the phone */
  .floating-chip:nth-child(1) { top: 0; right: 0; }
  .floating-chip:nth-child(2) { bottom: 0; left: -10px; }
  .floating-chip:nth-child(3) { display: none; } /* Hide the third chip to reduce clutter */
}

/* =========================================
   EXTRA SMALL DEVICES (Max-Width: 480px)
   ========================================= */
@media (max-width: 480px) {
  .hero-title {
    font-size: 28px; 
  }
  
  .hero-kicker {
    font-size: 10px;
    padding: 6px 12px;
  }
  
  .btn {
    width: 100%; /* Make buttons full width on very small phones */
    justify-content: center;
  }
}
































/* --- WRAPPER --- */
#testimonials {
  background: var(--bg-alt); /* Uses your theme variable */
  overflow: hidden;
  padding: 60px 0;
  transition: background-color 0.3s ease;
}

.testimonials-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* --- SCROLLER --- */
.testimonials-scroller {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 60px 50vw 60px 50vw; /* Large padding ensures first/last card can be centered */
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
}
/* Hide Scrollbar */
.testimonials-scroller::-webkit-scrollbar {
  display: none;
}

/* --- CARD (THEMED) --- */
.testimonial-card {
  min-width: 350px;
  max-width: 350px;
  position: relative;
  margin: 0; /* Gap handles spacing now */
  padding: 26px;
  border-radius: 24px;

  /* THEMING MAGIC HERE: No !important, using variables */
  background: var(--card-bg); 
  border: 1px solid var(--border-subtle);

  /* ANIMATION PREP */
  transform: scale(0.95); /* Default slightly smaller */
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.4s ease,
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  
  flex-shrink: 0;
  scroll-snap-align: center; /* Snaps card to center */
}

/* --- ACTIVE ANIMATION STATE --- */
.testimonial-card.active {
  transform: scale(1.1); 
  opacity: 1;
  z-index: 10;
  
  /* FIXED: White border in Dark Mode */
  border-color: #ffffff; 
  
  box-shadow: var(--shadow-soft); 
}

/* --- LIGHT MODE OVERRIDE --- */
/* When light mode is active, switch border to dark blue */
body.light-mode .testimonial-card.active {
  border-color: darkblue;
}

/* --- TEXT ELEMENTS (THEMED) --- */
.testimonial-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted); /* Auto switches in light mode */
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.testimonial-author {
  display: flex; 
  align-items: center; 
  gap: 12px;
  color: var(--text-main); /* Auto switches in light mode */
  transition: color 0.3s ease;
}

.testimonial-role {
  color: var(--text-muted);
  opacity: 0.8;
  font-size: 11px; 
  text-transform: uppercase; 
  letter-spacing: 0.05em;
}
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
/* --- FADE GRADIENTS (Match Background) --- */
.scroll-fade {
  position: absolute; top: 0; bottom: 0; width: 10%; z-index: 20; pointer-events: none;
  transition: background 0.3s ease;
}
.scroll-fade.left { left: 0; background: linear-gradient(to right, var(--bg-alt), transparent); }
.scroll-fade.right { right: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  
  width: 56px;
  height: 56px;
  border-radius: 50%;
  
 
  background: #ffffff;
  color: #020617; 
  border: 1px solid rgba(0, 0, 0, 0.05);
  
  
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.nav-btn svg {
  transition: transform 0.3s ease;
}


.nav-btn:hover {
 
  background-color: #3b82f6 !important; 
  border-color: #3b82f6 !important;
  
 
  color: #ffffff !important; 
  
  
  transform: translateY(-50%) scale(1.15); 
  
  
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); 
}

.prev-btn:hover svg { transform: translateX(-3px); }
.next-btn:hover svg { transform: translateX(3px); }


.nav-btn:active {
  transform: translateY(-50%) scale(0.95);
  background-color: #2563eb !important; 
}

@media (max-width: 768px) {
  .nav-btn {
    width: 44px; height: 44px;
   
    background: rgba(255, 255, 255, 0.9);
  }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .testimonials-scroller {
    padding: 40px 20px; /* Less padding on mobile */
    gap: 15px;
  }
  .testimonial-card { 
    min-width: 280px; 
    max-width: 280px; 
  }
}




















  /* Metrics */

#metrics {
  background: var(--metrics-bg);
  padding: 40px 0;
}

.metrics-grid {
  margin-top: 26px;
  display: grid;
 
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  gap: 18px;
}


.metric-card {
  padding: 16px 16px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
  
  
  box-shadow: var(--shadow-soft);
  transform: translateY(0);
  
  
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}


.metric-card:hover {
   /* Moves UP (-6px) instead of down to simulate lifting */
  transform: translateY(-6px);
  /* Uses your hover shadow variable */
  box-shadow: var(--philo-hover-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
  border-color: var(--success, #22c55e);
  z-index: 2;
}
.metric-card:hover .metric-value {
  transform: scale(1.05); /* Slight zoom on the number */
  color: var(--text-main); /* Optional: Change color if desired */
}


.metric-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 26px; 
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.metric-tag {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3); 
  color: #16a34a; 
  display: inline-block;
  margin-bottom: 8px;
}


@media (prefers-color-scheme: dark) {
  .metric-tag { color: #4ade80; }
}

.metric-footer {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.metric-badge {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 10px;
  background: rgba(148, 163, 184, 0.1);
}


.metric-highlight {
  position: absolute;
  inset: 0;
 
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 0), 
    rgba(56, 189, 248, 0.1), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.metric-card:hover .metric-highlight {
  opacity: 1;

}



































#philosophy {
  /* 1. Apply the Base Color */
  background-color: var(--philo-bg-color);
  
  /* 2. Create the Technical Grid + Spotlight */
  background-image: 
    var(--philo-spotlight), /* The glow at the top */
    linear-gradient(var(--philo-grid-color) 1px, transparent 1px), /* Horizontal lines */
    linear-gradient(90deg, var(--philo-grid-color) 1px, transparent 1px); /* Vertical lines */
  
  /* 3. Size the Grid (40px squares) */
  background-size: 100% 100%, 40px 40px, 40px 40px;
  
  /* 4. Hard Borders for Clear Separation from Hero */
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  
  /* 5. Text Color */
  color: var(--text-main);
}

/* Grid Layout */
.philosophy-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Cards - Made slightly blurred to float over the grid */
.philosophy-card {
  padding: 20px 18px;
  border-radius: var(--radius-lg);

  background: var(--philo-card-bg);
  border: 1px solid var(--philo-card-border);
  backdrop-filter: blur(5px); /* Blurs the grid behind the card */
  
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.philosophy-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--philo-hover-shadow);
  border-color: var(--success); /* Highlights in Green on hover */
}

.philosophy-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optional: Add a tiny green dot before titles to tie it together */
.philosophy-title::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
}

.philosophy-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
}






  /* NEW SECTION: Research Process Flow (timeline) */
  #process {
   border-top: 1px solid rgba(148, 163, 184, 0.25);
   border-bottom: 1px solid rgba(148, 163, 184, 0.25);
   background: radial-gradient(circle at center, rgba(124, 58, 237, 0.14), transparent 70%);
  }

  .timeline {
   margin-top: 30px;
   position: relative;
   padding-left: 20px;
   border-left: 2px solid rgba(148, 163, 184, 0.35);
  }

  .timeline-step {
   position: relative;
   margin-bottom: 26px;
   padding-left: 18px;
  }

  .timeline-dot {
   position: absolute;
   left: -10px;
   top: 4px;
   width: 12px;
   height: 12px;
   border-radius: 999px;
   background: var(--accent-2);
   box-shadow: 0 0 18px rgba(56, 189, 248, 0.9);
  }

  .timeline-step-title {
   font-size: 14px;
   margin-bottom: 4px;
  }

  .timeline-step-text {
   font-size: 13px;
   color: var(--text-muted);
  }

  /* NEW SECTION: Heatmap */
  #heatmap {
   background: linear-gradient(180deg, #020617, #020617);
  }

  .heatmap-grid {
   margin-top: 28px;
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 8px;
  }

  .heatmap-cell {
   padding: 8px 6px;
   border-radius: 10px;
   text-align: center;
   font-size: 11px;
   font-weight: 500;
   background: #0f172a;
   border: 1px solid rgba(148, 163, 184, 0.35);
   transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.2s ease-out;
  }

  .heatmap-cell span {
   display: block;
   font-size: 10px;
   color: var(--text-muted);
   margin-top: 2px;
  }

  .heatmap-cell.up {
   background: rgba(22, 163, 74, 0.2);
   border-color: rgba(34, 197, 94, 0.8);
   box-shadow: 0 0 18px rgba(34, 197, 94, 0.4);
  }

  .heatmap-cell.down {
   background: rgba(220, 38, 38, 0.2);
   border-color: rgba(248, 113, 113, 0.8);
   box-shadow: 0 0 18px rgba(239, 68, 68, 0.4);
  }

  .heatmap-cell:hover {
   transform: translateY(-3px) scale(1.02);
  }






















  /* NEW SECTION: Pricing (flip cards) */
  









/* =========================================
   PRICING COMPONENT (Self-Contained)
   ========================================= */




/* =========================================
   PRICING COMPONENT CSS
   ========================================= */

/* =========================================
   PRICING COMPONENT (FIXED FOR YOUR THEME)
   ========================================= */

.pricing {
    /* --- 1. DEFAULT VARIABLES (DARK MODE - Matches your Website Default) --- */

    --bg-page: #050816;
    --bg-card: #0b1024;
    --card-radius: 16px;
    
    /* Text */
    --text-main: #f9fafb;    
    --text-secondary: #e2e8f0;
    --text-muted: #9ca3af;   
    
    /* Borders & Shadows */
    --border-color: rgba(148, 163, 184, 0.2);
    --shadow-sm: 0 20px 40px rgba(15, 23, 42, 0.9);
    --shadow-hover: 0 20px 30px -5px rgba(34, 211, 238, 0.2);
    --divider-color: rgba(148, 163, 184, 0.15);
    
    /* Components */
    --badge-bg: linear-gradient(135deg, #7c3aed, #22d3ee);     
    --badge-text: #ffffff;   

    /* Card Patterns */
    --grad-ind-start: #431407; 
    --grad-ind-end: #0b1024;   
    --pat-ind-lines: #7c2d12;  

    --grad-team-start: #312e81;
    --grad-team-end: #0b1024;
    --pat-team-dots: #6366f1;

    --grad-ent-start: #0c4a6e;
    --grad-ent-end: #0b1024;
    
    /* Icon Filter */
    --icon-filter: invert(73%) sepia(68%) saturate(445%) hue-rotate(165deg) brightness(94%) contrast(89%);

    /* --- Main Container Styling --- */
    background-color: var(--bg-page);
    color: var(--text-main);
    
    display: flex;
    flex-direction: column; /* <--- THIS IS THE FIX: Stacks Header on top, Cards below */
    
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 60px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    
    }

/* --- 2. LIGHT MODE OVERRIDES (Triggers via your Toggle Button) --- */
body.light-mode .pricing {
    /* Backgrounds */
    --bg-page: #f9fafb;
    --bg-card: #ffffff;
    
    /* Text */
    --text-main: #0f172a;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    
    /* Borders & Shadows */
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --divider-color: #f3f4f6;
    
    /* Components */
    --badge-bg: #0f172a;
    --badge-text: #ffffff;
    
    /* Card Patterns (Light Mode "Fades") */
    --grad-ind-start: #fff7ed;
    --grad-ind-end: #ffffff;
    --pat-ind-lines: #fed7aa;
    
    --grad-team-start: #eef2ff;
    --grad-team-end: #ffffff;
    --pat-team-dots: #a5b4fc;

    --grad-ent-start: #ecfeff;
    --grad-ent-end: #ffffff;
    --icon-filter: invert(22%) sepia(10%) saturate(689%) hue-rotate(178deg) brightness(96%) contrast(89%);
}

/* --- INNER ELEMENTS (No Changes Needed below, just copy-paste) --- */




.pricing-container {
    display: flex;
    gap: 24px;
    max-width: 1150px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.card {
    background-color: var(--bg-card);
    border-radius: var(--card-radius);
    padding: 40px 30px; 
    width: 340px;
    position: relative;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    overflow: visible; 
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    z-index: 10;
    /* Optional: Add a border glow in dark mode */
    border-color: var(--accent-2, #22d3ee); 
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 240px;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.card.individual { background: linear-gradient(to bottom, var(--grad-ind-start) 0%, var(--bg-card) 60%); }
.card.individual::before {
    background-image: linear-gradient(var(--pat-ind-lines) 1px, transparent 1px), linear-gradient(90deg, var(--pat-ind-lines) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.5;
}

.card.teams { background: linear-gradient(to bottom, var(--grad-team-start) 0%, var(--bg-card) 60%); }
.card.teams::before {
    background-image: radial-gradient(var(--pat-team-dots) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.6;
}

.card.enterprise { background: linear-gradient(to bottom, var(--grad-ent-start) 0%, var(--bg-card) 60%); }
.card.enterprise::before {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0V30H0V90H30V120H90V90H120V30H90V0H30ZM90 30H60V60H90V30Z' fill='none' stroke='%23bae6fd' stroke-width='1'/%3E%3Ccircle cx='45' cy='15' r='1.5' fill='%2391c5e6' opacity='0.7'/%3E%3Ccircle cx='105' cy='75' r='1.5' fill='%2391c5e6' opacity='0.7'/%3E%3Ccircle cx='75' cy='105' r='1.5' fill='%2391c5e6' opacity='0.7'/%3E%3Ccircle cx='15' cy='45' r='1.5' fill='%2391c5e6' opacity='0.7'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    opacity: 0.7;
}

.card-content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }

.badge {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    background: var(--badge-bg); color: var(--badge-text);
    font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 99px;
    white-space: nowrap; z-index: 20; box-shadow: var(--shadow-sm);
}

h3 { font-size: 20px; font-weight: 500; color: var(--text-main); margin-bottom: 28px; margin-top: 0; }
.starts-at { font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }

.price { font-size: 52px; font-weight: 700; color: var(--text-main); line-height: 1; margin-bottom: 10px; display: flex; align-items: baseline; }
.currency { font-size: 26px; margin-right: 4px; font-weight: 600; position: relative; top: -18px; color: var(--text-secondary); }
.period { font-size: 15px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }

.description { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 32px; min-height: 75px; }

.divider { height: 1px; background-color: var(--divider-color); margin: 30px 0; width: 100%; }

.features-title { font-size: 14px; font-weight: 600; margin-bottom: 18px; color: var(--text-main); }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; align-items: flex-start; font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.4; }

.check-icon {
    min-width: 18px; 
    height: 18px; 
    margin-right: 12px; 
    margin-top: 2px;
    
    
    filter: var(--icon-filter);
    
    /* Optional: Add a transition for smooth color switching */
    transition: filter 0.3s ease;
}

@media (max-width: 1000px) {
    .pricing-container { flex-direction: column; align-items: center; }
    .card { width: 100%; max-width: 400px; }
}
.pricing-header {
    display: flex;             /* Turn on Flexbox */
    flex-direction: row;       /* Force side-by-side layout */
    justify-content: space-between; /* Space them apart (Title Left, Text Right) */
    align-items: center;       /* Align them vertically in the middle */
    gap: 40px;                 /* Gap between title and text */
    
    max-width: 1150px;         /* Match container width */
    width: 100%;
    margin-bottom: 60px;
    text-align: left;          /* Ensure text aligns left */
}

.pricing-header h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0;                 /* Remove default margins so they align */
    flex: 1;                   /* Allows title to take space */
    min-width: 300px;          /* Prevents squishing */
}

.pricing-header p {
  align-items: flex-end;
    font-size: 13px;
    padding-Top: 50px;
    line-height: 1.6;

    color: var(--text-muted);
    margin: 0;
    flex: 1;                   /* Allows text to take space */
    max-width: 500px;          /* Limits width for readability */
}

/* --- RESPONSIVE: Stack them back to vertical on Mobile --- */
@media (max-width: 768px) {
    .pricing-header {
        flex-direction: column; /* Switch to vertical on phones */
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    
    .pricing-header h1 {
        font-size: 32px;
        text-align: center;
    }
    
    .pricing-header p {
        text-align: center;
    }
}

































  /* NEW SECTION: FAQ */
  
#faq, #contact {
    --sect-bg: #020617;
    --sect-accent-glow: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15), transparent 70%);
    
    /* Cards */
    --card-bg: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    --card-border: 1px solid rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Text & Icons */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --icon-default: #94a3b8; /* Gray when closed */
    --icon-active: #ffffff;  /* White when open */
    
    /* ACTIVE STATE (When FAQ is Open) - PURPLE */
    --active-bg: rgba(124, 58, 237, 0.05);       /* Purple Tint */
    --active-border: rgba(124, 58, 237, 0.5);    /* Purple Border */
    --active-icon-bg: rgba(124, 58, 237, 0.8);   /* Purple Icon Background */
    --active-glow: 0 0 15px rgba(124, 58, 237, 0.3);
    
    /* Form Inputs */
    --input-bg: rgba(2, 6, 23, 0.6);
    --input-border: 1px solid rgba(148, 163, 184, 0.2);
    --input-focus: rgba(34, 211, 238, 0.5);      /* Cyan Focus */
}

/* 2. LIGHT MODE (Blue Theme) */
body.light-mode #faq, 
body.light-mode #contact {
    --sect-bg: #f1f5f9; 
    --sect-accent-glow: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05), transparent 70%);
    
    /* Cards */
    --card-bg: #ffffff;
    --card-border: 1px solid #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* Text & Icons */
    --text-main: #0f172a;
    --text-muted: #475569;
    --icon-default: #64748b; 
    --icon-active: #ffffff;
    
    /* ACTIVE STATE (When FAQ is Open) - BLUE */
    --active-bg: rgba(37, 99, 235, 0.08);        /* Blue Tint */
    --active-border: rgba(37, 99, 235, 0.5);     /* Blue Border */
    --active-icon-bg: #2563eb;                   /* Solid Blue Icon Background */
    --active-glow: 0 0 10px rgba(37, 99, 235, 0.3);
    
    /* Form Inputs */
    --input-bg: #ffffff;
    --input-border: 1px solid #cbd5e1;
    --input-focus: #2563eb;                      /* Blue Focus */
}




 /*  FAQ SECTION (Animated Accordion)
   ========================================= */

#faq {
    background-color: var(--sect-bg);
    background-image: var(--sect-accent-glow);
    padding: 60px 20px; /* Reduced top/bottom padding */
    transition: background 0.3s ease;
}

.faq-grid {
    margin-top: 30px;
    display: grid;
    gap: 12px;
    
    /* Controls the width of the items */
    max-width: 700px; /* You can increase this if you want them wider */
    
    /* THIS ALIGNS IT TO THE LEFT */
    margin-left: 0; 
    margin-right: auto;
}
.faq-item {
    border-radius: 12px; /* Slightly smaller radius */
    background: var(--card-bg);
    border: var(--card-border);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
    border-color: var(--active-border); 
}

/* Header - Smaller Padding & Font */

/* --- FAQ HEADER (Compact) --- */
.faq-question {
    padding: 12px 16px;  /* Reduced from 15px 18px */
    display: flex;
    align-items: center;
    justify-content: space-between; 
    cursor: pointer;
    width: 100%;
}

/* 1. THE TEXT (Smaller Font) */
.faq-text {
    font-size: 14px;     /* Reduced from 16px */
    font-weight: 500;
    color: var(--text-main);
    text-align: left;
    padding-right: 16px; /* Reduced spacing */
    flex: 1; 
}

/* 2. THE PLUS BUTTON (Smaller Circle) */
.faq-toggle {
    /* Smaller Circle */
    width: 30px;         /* Reduced from 36px */
    height: 30px;        /* Reduced from 36px */
    border-radius: 50%;
    
    background-color: var(--btn-icon-bg); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Smaller Symbol */
    font-size: 18px;     /* Reduced from 20px */
    color: var(--icon-default);
    
    transition: all 0.3s ease;
    flex-shrink: 0; 
}

/* --- HOVER EFFECTS --- */
.faq-item:hover .faq-toggle {
    background-color: var(--btn-icon-hover);
    transform: scale(1.05);
}

/* --- ACTIVE / OPEN STATE --- */
.faq-item.open .faq-toggle {
    background-color: var(--active-icon-bg); 
    color: #ffffff; 
    transform: rotate(45deg); 
    box-shadow: var(--active-glow);
}

/* Optional: Highlight text when open */
.faq-item.open .faq-text {
    color: var(--input-focus); 
    transition: color 0.3s ease;
}

/* Answer Text (Smaller) */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 16px;    /* Reduced to match header padding */
    font-size: 13px;    /* Reduced from 14px */
    line-height: 1.6;
    color: var(--text-muted);
    transition: all 0.4s ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 16px; /* Reduced bottom padding */
}

/* =========================================
   CONTACT STYLING
   ========================================= */

#contact {
    background-color: var(--sect-bg);
    padding: 80px 20px;
    transition: background 0.3s ease;
}

.contact-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    max-width: 1150px;
    margin: 40px auto 0;
}

.contact-card {
    border-radius: 24px;
    background: var(--card-bg);
    border: var(--card-border);
    padding: 32px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(12px);
    transition: border-color 0.3s ease;
}

.contact-card:hover {
    border-color: var(--active-border); /* Glows Blue/Purple on hover */
}

.contact-card form { display: grid; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); margin-left: 4px;
}

.field input, .field textarea {
    background: var(--input-bg);
    border-radius: 12px;
    border: var(--input-border);
    padding: 14px 16px;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
}

.field input:focus, .field textarea:focus {
    border-color: var(--input-focus); /* Blue/Cyan Focus Color */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); /* Subtle glow ring */
}

.field textarea { min-height: 120px; resize: vertical; }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
}







































  /* About App, Location, Success sections (same as before; trimmed a bit for brevity visually) */
  /* --- SECTION CONTAINER --- */
#about-app {
  position: relative;
  padding: 80px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* Subtle Background Glow */
#about-app::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.about-grid {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Image gets slightly more space */
  gap: 50px;
  align-items: center;
}

/* --- PHONE/APP MOCKUP CONTAINER --- */
.about-app-image {
  border-radius: 26px;
  padding: 8px; /* Simulates outer bezel */
  /* Premium gradient border */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.5s ease;
}

.about-app-image:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

/* --- INNER SCREEN (Glassmorphism) --- */
.about-app-inner {
  border-radius: 20px;
  /* Gradient that respects theme */
  background: linear-gradient(160deg, var(--card-bg), var(--bg)); 
  padding: 24px;
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

/* Header Dots */
.about-app-inner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.about-dot-row { display: flex; gap: 6px; }
.about-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.about-dot:nth-child(1) { background: #ff5f57; border: 1px solid rgba(0,0,0,0.1); }
.about-dot:nth-child(2) { background: #febc2e; border: 1px solid rgba(0,0,0,0.1); }
.about-dot:nth-child(3) { background: #28c840; border: 1px solid rgba(0,0,0,0.1); }





/* --- PROFESSIONAL CHART --- */
.about-app-chart {
  margin-top: 15px;
  border-radius: 16px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2); /* Darkens slightly inside card */
  border: 1px solid var(--border-subtle);
}
/* In Light Mode, make inner chart background lighter */
body.light-mode .about-app-chart {
  background: rgba(255, 255, 255, 0.5);
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 120px; /* Taller for better visuals */
  margin: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 5px;
}

/* BAR ANIMATION & STYLE */
/* ================================
   MODERN & PROFESSIONAL BAR STYLE
================================= */
/* ================================
   SOLID COLOR CHART – MODERN VERSION
================================= */
.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  height: 140px;
  margin: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.chart-bar {
  flex: 1;
  border-radius: 12px 12px 0 0;
  transform-origin: bottom;
  opacity: 0.95;
  animation: growBars 1s ease forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.chart-bar:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 32px rgba(0,0,0,0.25);
}

/* SOLID Colors per Segment */
.chart-bar:nth-child(1) { --bar: 0.45; background: #3b82f6; } /* Intraday */
.chart-bar:nth-child(2) { --bar: 0.65; background: #9333ea; } /* Swing */
.chart-bar:nth-child(3) { --bar: 0.90; background: #16a34a; } /* F&O */
.chart-bar:nth-child(4) { --bar: 0.55; background: #eab308; } /* Macro */
.chart-bar:nth-child(5) { --bar: 0.72; background: #dc2626; } /* PSU */

/* Auto height from value */
.chart-bar { height: calc(var(--bar) * 100%); }

/* Animation */
@keyframes growBars {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 0.95; }
}

/* Label Styling */
.chart-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03rem;
}


/* --- FEATURES LIST --- */
.feature-list {
  list-style: none;
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature-icon {
  min-width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 2px;
}

.feature-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.feature-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- TAGS (CHIPS) --- */
.about-tags-row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-tag {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  
  /* Theme-aware background */
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  
  transition: all 0.3s ease;
  cursor: default;
}

.about-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .chart-bars { height: 100px; }
  #about-app { padding: 50px 20px; }
}














  /* Location */
 


#location {
    /* --- 1. DARK MODE (Default) --- */
    --loc-bg: #020617;
    
    /* Map Placeholder */
    --map-base: #020617;
    --map-radar-color: rgba(56, 189, 248, 0.22); /* Cyan Glow */
    --map-border: rgba(148, 163, 184, 0.6);
    --ping-color: var(--accent-2, #22d3ee);
    --ping-shadow: rgba(56, 189, 248, 0.8);
    
    /* Pills (Tags) */
    --pill-bg: rgba(15, 23, 42, 0.9);
    --pill-border: rgba(148, 163, 184, 0.5);
    --pill-text: var(--text-main);
}

/* --- 2. LIGHT MODE OVERRIDES --- */
body.light-mode #location {
    --loc-bg: #f8fafc; /* Light Gray/White Background */
    
    /* Map Placeholder */
    --map-base: #f1f5f9;
    --map-radar-color: rgba(37, 99, 235, 0.15); /* Blue Tint */
    --map-border: #cbd5e1;
    --ping-color: #2563eb; /* Royal Blue */
    --ping-shadow: rgba(37, 99, 235, 0.4);
    
    /* Pills (Tags) */
    --pill-bg: #ffffff;
    --pill-border: #cbd5e1;
    --pill-text: #475569;
}

/* =========================================
   LOCATION STYLING
   ========================================= */

#location {
    background: var(--loc-bg);
    padding: 60px 20px; /* Added padding for spacing */
    transition: background 0.3s ease;
}

.loc-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
    max-width: 1150px;
    margin-left: auto; margin-right: auto;
}

.loc-card {
    border-radius: var(--radius-lg, 16px);
    background: var(--card-bg); /* Uses your global card variable */
    border: 1px solid var(--border-subtle);
    padding: 24px; /* Increased padding slightly */
    box-shadow: var(--shadow-soft);
    font-size: 13px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.loc-heading {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
}

.loc-text {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.loc-list {
    list-style: none;
    font-size: 14px;
    color: var(--text-muted);
    padding: 0;
}

.loc-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Optional: Add a bullet point style */
.loc-list li::before {
    content: "•";
    color: var(--ping-color);
    font-size: 18px;
    line-height: 0;
}

/* --- TAGS / PILLS --- */
.loc-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.loc-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    color: var(--pill-text);
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* --- MAP PLACEHOLDER (Radar Effect) --- */
.map-placeholder {
    height: 220px; /* Increased height slightly */
    border-radius: 18px;
    
    /* Uses variables for the Radar Gradient */
    background: radial-gradient(circle at center, var(--map-radar-color), var(--map-base));
    
    border: 1px solid var(--map-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.map-ping {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--ping-color);
    box-shadow: 0 0 24px var(--ping-shadow);
    position: absolute;
    z-index: 2;
    animation: pulse-soft 2s infinite;
}

/* Add faint grid lines to map for tech feel */
.map-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .loc-grid {
        grid-template-columns: 1fr;
    }
}
































  /* Success */
 #success {
    /* --- 1. DARK MODE (Default) --- */
    --success-bg: #020617;
    /* A subtle green glow at the top */
    --success-glow: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.15), transparent 60%);
    
    /* Cards */
    --card-glass-bg: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    --card-border: 1px solid rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Progress Bars */
    --track-bg: rgba(255, 255, 255, 0.1);
    --fill-gradient: linear-gradient(90deg, #22c55e, #10b981); /* Green Gradient */
    
    /* Text */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --bullet-color: #22c55e; /* Green bullets */
}

/* --- 2. LIGHT MODE OVERRIDES --- */
body.light-mode #success {
    --success-bg: #f1f5f9;
    --success-glow: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.08), transparent 60%);
    
    /* Cards */
    --card-glass-bg: #ffffff;
    --card-border: 1px solid #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* Progress Bars */
    --track-bg: #e2e8f0;
    --fill-gradient: linear-gradient(90deg, #22c55e, #16a34a); /* Richer Green */
    
    /* Text */
    --text-main: #0f172a;
    --text-muted: #475569;
    --bullet-color: #16a34a;
}

/* =========================================
   SUCCESS SECTION STYLING
   ========================================= */

#success {
    background-color: var(--success-bg);
    background-image: var(--success-glow);
    padding: 80px 20px;
    transition: background 0.3s ease;
    overflow: hidden;
}

.success-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    max-width: 1150px;
    margin-left: auto; margin-right: auto;
    align-items: stretch; /* Makes cards equal height */
}

/* --- THE CARD DESIGN --- */
.success-card {
    border-radius: 24px;
    background: var(--card-glass-bg);
    border: var(--card-border);
    padding: 32px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.success-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.2);
    border-color: var(--bullet-color); /* Green border on hover */
}

/* Card Headers */
.success-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Add a small green dot to headers */
.success-card h3::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--bullet-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--bullet-color);
}

.success-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* --- PROGRESS BARS (The "Real Feeling" Part) --- */
.success-row {
    margin-top: auto; /* Pushes content to fill space */
    display: grid;
    gap: 20px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

/* Trustworthy bold numbers */
.progress-label-row span:last-child {
    font-family: monospace; /* Tech feel */
    font-weight: 700;
    color: var(--bullet-color);
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--track-bg);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--fill-gradient);
    width: 0%; /* Starts at 0 for animation */
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

/* Optional: Add a "shimmer" animation to the bar */
.progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}


/* --- FUTURE LIST (Roadmap) --- */
.future-list {
    list-style: none;
    display: grid;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.future-list li {
    font-size: 14px;
    color: var(--text-muted);
    padding-left: 24px;
    position: relative;
    line-height: 1.6;
}

/* Custom Checkmark Icon */
.future-list li::before {
    content: "✓"; /* Use checkmark instead of arrow for "roadmap" feel */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--bullet-color);
    font-weight: bold;
    font-size: 14px;
}

/* The "Tag" at the bottom */
.about-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--bullet-color);
    font-size: 11px;
    font-weight: 600;
    margin-top: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .success-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .success-card {
        padding: 24px;
    }
}













  /* Main footer */
/* =========================================
   MODERN FOOTER STYLING
   ========================================= */

/* =========================================
   ULTRA-COMPACT FOOTER
   ========================================= */

footer {
    position: relative;
    padding: 10px min(4vw, 20px) 5px;
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    transition: background 0.3s ease;
}

/* --- BACKGROUND WAVE --- */
.footer-wave {
    position: absolute;
    top: -50%; left: 0; right: 0; height: 100%;
    background: var(--footer-glow);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 10s ease-in-out infinite alternate;
}

/* --- MAIN LAYOUT --- */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* --- LEFT SIDE --- */
.footer-left {
    max-width: 600px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.logo-mark {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #7c3aed, #22d3ee);
    color: white;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}

.logo-text-main {
    font-size: 15px;
    font-weight: 700;
    color: var(--footer-heading);
    letter-spacing: -0.2px;
}

.logo-sub {
    font-size: 11px;
    color: var(--footer-text);
    opacity: 0.7;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--footer-border);
    display: inline-block;
}

/* LINKS */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--footer-text);
    margin: 0;
}

.footer-links a {
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none; /* Added this to remove underlines */
    color: inherit;
}
.footer-links a:hover { color: var(--link-hover); }

/* --- RIGHT SIDE (Logos) --- */
/*.footer-right {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end; 
}*/

.footer-tagline {
    font-size: 12px;
    font-weight: 600;
    color: var(--footer-heading);
    opacity: 0.9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================
   FORCE FIX: Footer Badges & Dark Mode
   ========================================= */

/* 1. Force the Row Layout (Fixes vertical stacking) */
.footer-right .footer-badge-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

/* 2. Force Image Sizing */
.footer-right .footer-androidlogo img {
    height: 60px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    background: #000000;
    transition: transform 0.3s ease;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5) !important; 
    border-radius: 8px !important;
}

.footer-right .footer-androidlogo img:hover {
    transform: scale(1.05);
}

/* 3. The Vertical Line */
.footer-right .separator-line {
    display: block !important;
    width: 2px !important;
    height: 25px !important;    /* Increased height slightly */
    background-color: #333 !important; /* Dark Grey (Light Mode) */
    border-radius: 2px;
    margin: 0 !important;
}

/* Scenario B: Manual Class Toggle (e.g., body class="dark-mode") */
body.dark-mode .separator-line, 
html.dark-mode .separator-line,
.dark-mode .separator-line {
    background-color: #ffffff !important;
}

body.dark-mode .footer-androidlogo img,
html.dark-mode .footer-androidlogo img,
.dark-mode .footer-androidlogo img {
    filter: invert(1) brightness(100) !important;
}


.footer-bottom{
  height: 30px !important;
    width: auto !important;
    font-size: 12px;
}


/* =========================================
   MOBILE NAVIGATION (Max-Width: 968px)
   ========================================= */
/* =========================================
   RESPONSIVE MOBILE MENU (FIXED FOR DARK DEFAULT)
   ========================================= */
@media (max-width: 968px) {

  /* --- 1. Layout & Hiding Elements --- */
  .nav {
    padding: 12px 16px;
    gap: 8px;
    position: relative; 
    z-index: 1000;
  }

  /* Hide Desktop-only items */
  .logo-text-main, .logo-sub, .mobile-cta-container { display: none; }
  .logo-svg img { height: 26px; width: auto; }

  /* Right Side Group */
  .nav-cta {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
  }

  /* Button Styling */
  .nav-cta .btn-primary {
    padding: 6px 14px; font-size: 11px; height: 36px; white-space: nowrap;
  }

  /* Theme Toggle */
  .theme-toggle { 
    display: flex; width: 36px; height: 36px; margin: 0;
    justify-content: center; align-items: center;
  }

  /* --- 2. HAMBURGER MENU (DEFAULT = DARK MODE/WHITE LINES) --- */
  .nav-toggle {
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    margin-left: 2px;
    border-radius: 50%;
    z-index: 1001;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* DEFAULT STATE (Dark Mode) */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2); /* White-ish border */
  }

  /* The Lines - DEFAULT IS WHITE */
  .nav-toggle span {
    display: block; position: relative;
    width: 16px; height: 2px;
    background-color: #ffffff; /* WHITE LINES BY DEFAULT */
    transition: all 0.3s ease;
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: ""; position: absolute; left: 0;
    width: 16px; height: 2px;
    background-color: #ffffff; /* WHITE LINES BY DEFAULT */
    transition: all 0.3s ease;
  }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after { top: 5px; }

  /* --- 3. LIGHT MODE OVERRIDE (Turn Hamburger Dark) --- */
  body.light-mode .nav-toggle {
    border-color: rgba(0, 0, 0, 0.1); /* Dark border for light mode */
  }
  body.light-mode .nav-toggle span,
  body.light-mode .nav-toggle span::before,
  body.light-mode .nav-toggle span::after {
    background-color: #1e293b; /* DARK LINES FOR LIGHT MODE */
  }

  /* Active Animation (Turning into X) */
  .nav-toggle.active span { background: transparent !important; }
  .nav-toggle.active span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle.active span::after { top: 0; transform: rotate(-45deg); }


  /* --- 4. THE DROPDOWN MENU --- */
  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    right: 16px;
    width: 220px;
    
    /* DEFAULT (Dark Mode) Background */
    background: rgba(15, 23, 42, 0.9); 
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    display: flex; flex-direction: column;
    padding: 10px; gap: 2px;
    
    opacity: 0; transform: translateY(-10px) scale(0.95);
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 999;
  }

  /* LIGHT MODE OVERRIDE for Menu */
  body.light-mode .nav-links {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }

  /* Active State */
  .nav-links.active {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
  }

  /* Links */
  .nav-links a {
    width: 100%; padding: 12px 16px;
    font-size: 14px; font-weight: 500;
    border-radius: 10px; color: inherit;
    transition: all 0.2s ease;
  }

  /* Hover Effects */
  .nav-links a:hover { 
    background: rgba(255,255,255,0.1); 
    transform: translateX(4px);
  }
  body.light-mode .nav-links a:hover {
    background: rgba(0,0,0,0.05);
  }
}