/* Custom scrollbar for a premium feel */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

html {
  scroll-behavior: smooth;
}
/* --- LEAKY BUCKET COMPONENT CSS --- */
.lb-container {
  background: #1e293b; /* Matches Tailwind slate-800/900 roughly */
  border-radius: 12px;
  padding: 30px;
  color: white;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
  min-height: 450px; /* Taller to fit */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #334155;
}

.lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
  z-index: 10;
}

/* Toggle Switch */
.lb-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #94a3b8;
}
.lb-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.lb-switch input { opacity: 0; width: 0; height: 0; }
.lb-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #475569;
  transition: .4s;
  border-radius: 34px;
}
.lb-slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .lb-slider { background-color: #0ea5e9; } /* Tailwind Sky-500 */
input:checked + .lb-slider:before { transform: translateX(20px); }
.lb-active-label { color: #f8fafc; font-weight: 600; }

/* Visual Area */
.lb-visual-area { position: relative; width: 300px; height: 320px; }
.lb-traffic-source {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  color: #94a3b8; font-size: 12px; font-weight: 500; letter-spacing: 0.05em;
}

/* Funnel Shapes */
.lb-funnel-body {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 180px solid #334155;
  z-index: 1;
}
.lb-funnel-stem {
  position: absolute; top: 180px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 60px; background: #334155; z-index: 1;
}

/* Bucket */
.lb-bucket {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 50px; background: #334155;
  border-radius: 0 0 12px 12px;
  display: flex; justify-content: center; align-items: center;
  font-weight: 700; color: #64748b; font-size: 14px; z-index: 2;
  overflow: hidden;
}
.lb-bucket-fill {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 5px;
  background: #0ea5e9; opacity: 0.6; transition: height 1s ease;
}

/* --- REPLACE YOUR CURRENT 'Leaks & Particles' SECTION WITH THIS --- */

.lb-leak-point {
  position: absolute;
  z-index: 5;
  font-size: 11px;
  display: flex;
  align-items: center;
  font-weight: 500;
  
  /* FIXED: Use gap for spacing and force single line */
  gap: 12px; 
  white-space: nowrap; 
}

.lb-leak-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 10px;
  flex-shrink: 0; /* Ensures circle stays a circle */
}

/* --- REPLACE THE POSITIONING SECTION IN style.css WITH THIS --- */

/* Base positioning */
.lb-leak-point.left { flex-direction: row-reverse; }

/* DYNAMIC POSITIONING TO MATCH FUNNEL SLOPE */
/* Leak 1 (Top - Funnel is wide here) */
.leak-1.left { right: 83%; } 
.leak-1.right { left: 60%; }

/* Leak 2 (Middle - Funnel gets narrower) */
.leak-2.left { right: 56%; }
.leak-2.right { left: 73%; }

/* Leak 3 (Bottom - Funnel is very narrow here) */
.leak-3.left { right: 63%; } 
.leak-3.right { left: 53%; }

/* Note: We removed the generic .lb-leak-point.left { right: 70% } rules 
   and replaced them with these specific ones above so they hug the funnel tight. */

/* Colors for Bad State */
.lb-leak-point .text { color: #f87171; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.lb-leak-point .lb-leak-marker { background: #f87171; color: #450a0a; content: 'X'; }

/* Vertical positions remain the same */
.leak-1 { top: 30px; } 
.leak-2 { top: 80px; } 
.leak-3 { top: 130px; }
/* Colors for Bad State */
.lb-leak-point .text { color: #f87171; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.lb-leak-point .lb-leak-marker { background: #f87171; color: #450a0a; content: 'X'; }
.leak-1 { top: 30px; } .leak-2 { top: 80px; } .leak-3 { top: 130px; }

/* Particles */
.lb-particle {
  position: absolute; width: 8px; height: 8px; background: #38bdf8;
  border-radius: 50%; top: 0; left: 50%; opacity: 0; z-index: 2;
  box-shadow: 0 0 8px #0ea5e9;
}

/* Animations */
@keyframes leakLeft {
  0% { top: 0; opacity: 1; transform: translateX(-50%); }
  40% { top: 50px; transform: translateX(-70px); opacity: 1; }
  100% { top: 80px; transform: translateX(-120px); opacity: 0; }
}
@keyframes leakRight {
  0% { top: 0; opacity: 1; transform: translateX(-50%); }
  50% { top: 100px; transform: translateX(60px); opacity: 1; }
  100% { top: 150px; transform: translateX(100px); opacity: 0; }
}
@keyframes trickleDown {
  0% { top: 0; opacity: 1; } 100% { top: 250px; opacity: 0.4; }
}
@keyframes straightFlow {
  0% { top: 0; opacity: 1; } 80% { opacity: 1; } 100% { top: 250px; opacity: 0; }
}

/* Particle Assignments */
.p1 { animation: leakLeft 2s infinite ease-out; }
.p2 { animation: leakRight 2.5s infinite ease-out 0.5s; }
.p3 { animation: leakLeft 2.2s infinite ease-out 1s; }
.p4 { animation: trickleDown 3s infinite linear 0.2s; }
.p5 { animation: leakRight 2.8s infinite ease-out 1.5s; }

/* --- PATCHED STATE (Good Website) --- */
.lb-container.is-patched .lb-leak-point .text { color: #38bdf8; }
.lb-container.is-patched .lb-leak-point .lb-leak-marker {
  background: #38bdf8; color: #082f49;
}
/* Swap Text */
.lb-container.is-patched .leak-1 .text span { display: none; }
.lb-container.is-patched .leak-1 .text:after { content: 'Instant Load'; }
.lb-container.is-patched .leak-2 .text span { display: none; }
.lb-container.is-patched .leak-2 .text:after { content: 'Clear UX'; }
.lb-container.is-patched .leak-3 .text span { display: none; }
.lb-container.is-patched .leak-3 .text:after { content: 'Mobile Ready'; }

/* Flow Change */
.lb-container.is-patched .lb-particle { animation: straightFlow 1.2s infinite linear !important; }
.lb-container.is-patched .p1 { animation-delay: 0s !important; left: 48%; }
.lb-container.is-patched .p2 { animation-delay: 0.2s !important; left: 52%; }
.lb-container.is-patched .p3 { animation-delay: 0.4s !important; left: 49%; }
.lb-container.is-patched .p4 { animation-delay: 0.6s !important; left: 51%; }
.lb-container.is-patched .p5 { animation-delay: 0.8s !important; left: 50%; }

/* Fill Bucket */
.lb-container.is-patched .lb-bucket { color: white; border: 1px solid #0ea5e9; }
.lb-container.is-patched .lb-bucket-fill { height: 50px; opacity: 1; }
.lb-container.is-patched .lb-bucket-text span { display: none; }
.lb-container.is-patched .lb-bucket-text:after { content: 'HIGH REVENUE'; }