body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; background-color: #f8fafc; color: #0f172a; }

/* Light mode: ensure bright backgrounds */
html {
  background-color: #f8fafc;
  color: #0f172a;
}

html body {
  background-color: #f8fafc;
  color: #0f172a;
}

/* Explicitly light backgrounds */
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-white { background-color: #ffffff !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }

/* Light mode text colors */
.text-slate-800 { color: #0f172a !important; }
.text-slate-700 { color: #1e293b !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }

/* Light mode borders */
.border-slate-200 { border-color: #e2e8f0 !important; }

.glass { backdrop-filter: blur(12px); background-color: rgba(255, 255, 255, 0.8); }
.shadow-soft { box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.shadow-glow { box-shadow: 0 0 30px rgba(99, 102, 241, 0.15); }
.container-narrow { max-width: 1100px; }
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    
/* Dark mode styles - override light mode */
html.dark {
  background-color: #0f172a;
  color: #e2e8f0;
}

html.dark body { 
  background-color: #0f172a; 
  color: #e2e8f0; 
}

html.dark .bg-slate-50 { background-color: #1e293b !important; }
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #64748b !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .glass { background: rgba(30, 41, 59, 0.8) !important; }
html.dark .shadow-soft { box-shadow: 0 10px 25px rgba(0,0,0,0.3); }      

/* Dark mode toggle button icon colors */
#darkModeToggle svg {
  stroke: #0f172a;
  color: #0f172a;
  stroke-width: 2;
}

html.dark #darkModeToggle svg {
  stroke: #e2e8f0;
  color: #e2e8f0;
  stroke-width: 2;
}

/* Ensure icons show/hide properly */
#darkModeToggle .dark\:hidden {
  display: block;
}

html.dark #darkModeToggle .dark\:hidden {
  display: none !important;
}

html.dark #darkModeToggle .hidden.dark\:block {
  display: block !important;
}

#darkModeToggle .hidden.dark\:block {
  display: none;
}

/* Smooth transitions */
* { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* Responsive menu styles */
.topnav {
  position: relative;
  display: flex;
  align-items: center;
}

.topnav button.icon {
  display: none;
  background: none;
  border: none;
  padding: 14px 16px;
  color: inherit;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  /* Overlay behind the menu */
  .menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.22); /* lighter overlay on mobile */
    z-index: 40;
    transition: opacity 0.25s ease;
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-overlay.active {
    display: block;
    opacity: 1;
  }

  /* Full-screen sliding menu for easier tapping */
  .topnav nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70vh; /* smaller on mobile */
    background-color: rgba(248, 250, 252, 0.98);
    color: #0f172a;
    padding: 1.25rem 1rem; /* reduced padding */
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(.2,.9,.2,1);
    z-index: 50;
    backdrop-filter: blur(6px);
  }

  html.dark .topnav nav {
    background-color: #0b1220;
    color: #e2e8f0;
  }

  /* When open, slide into view */
  .topnav.responsive nav {
    transform: translateY(0);
  }

  /* Show the hamburger / close button on mobile */
  .topnav button.icon {
    display: block;
    background: rgba(255,255,255,0.06);
    border: none;
    font-size: 1rem; /* smaller hamburger */
    padding: 0.25rem; /* tighter */
    color: inherit;
    z-index: 60; /* keep above overlay */
    border-radius: 6px;
  }

  /* Larger, tappable links */
  .topnav nav a {
    padding: 0.5rem 0.75rem;
    font-size: 1rem; /* slightly smaller text for mobile */
    font-weight: 600;
    color: #0f172a;
    width: 100%;
    text-align: center;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  html.dark .topnav nav a {
    color: #e6eef8;
  }

  .topnav nav a:hover {
    background: rgba(15,23,42,0.04);
  }

  html.dark .topnav nav a:hover {
    background: rgba(230, 238, 248, 0.08);
  }

  .topnav nav a:active {
    background: rgba(15,23,42,0.06);
  }

  html.dark .topnav nav a:active {
    background: rgba(230, 238, 248, 0.12);
  }

  /* Ensure desktop layout still uses the md:flex rules */
  .topnav .md\\:flex { display: none; }
}
    
    /* Icon animations */
.icon-float { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Keep header nav items on a single line to prevent wrapping */
.topnav nav { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.topnav nav a { white-space: nowrap; }
    
    /* Card hover effects */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

/* Gradient box text colors - ensure readability */
.bg-gradient-to-br { color: inherit; }
.from-indigo-50.to-purple-50 p,
.from-blue-50.to-cyan-50 p,
.from-purple-50.to-pink-50 p,
.from-emerald-50.to-teal-50 p {
  color: #0f172a;
}

html.dark .from-indigo-950.to-purple-950 p,
html.dark .from-blue-950.to-cyan-950 p,
html.dark .from-purple-950.to-pink-950 p,
html.dark .from-emerald-950.to-teal-950 p {
  color: #e2e8f0;
}

/* Stats boxes text - bright colors */
.from-indigo-50.to-purple-50 p { color: #0f172a !important; }
.from-blue-50.to-cyan-50 p { color: #0f172a !important; }
.from-purple-50.to-pink-50 p { color: #0f172a !important; }
.from-emerald-50.to-teal-50 p { color: #0f172a !important; }

html.dark .from-indigo-950.to-purple-950 p { color: #e2e8f0 !important; }
html.dark .from-blue-950.to-cyan-950 p { color: #e2e8f0 !important; }
html.dark .from-purple-950.to-pink-950 p { color: #e2e8f0 !important; }
html.dark .from-emerald-950.to-teal-950 p { color: #e2e8f0 !important; }

/* Make specific stat box text brighter - numbers */
.text-indigo-700 { color: #6f65d6 !important; }
.text-blue-700 { color: #3e5cbc !important; }
.text-purple-700 { color: #8047dc !important; }
.text-emerald-700 { color: #36c89f !important; }

html.dark .text-indigo-300 { color: #a5b4fc !important; }
html.dark .text-blue-300 { color: #93c5fd !important; }
html.dark .text-purple-300 { color: #d8b4fe !important; }
html.dark .text-emerald-300 { color: #6ee7b7 !important; }

html.dark .text-indigo-400 { color: #818cf8 !important; }
html.dark .text-blue-400 { color: #60a5fa !important; }
html.dark .text-purple-400 { color: #c084fc !important; }
html.dark .text-emerald-400 { color: #34d399 !important; }

/* Stats box label text - make more vibrant */
.text-indigo-900 { color: #817ecb !important; }
.text-blue-900 { color: #85b0cf !important; }
.text-purple-900 { color: #8e53b2 !important; }
.text-emerald-900 { color: #55b299 !important; }

html.dark .text-indigo-100 { color: #e0e7ff !important; }
html.dark .text-blue-100 { color: #dbeafe !important; }
html.dark .text-purple-100 { color: #f3e8ff !important; }
html.dark .text-emerald-100 { color: #d1fae5 !important; }

 /* Button styles with hover effects */
a.rounded-2xl, button.rounded-2xl {
  transition: all 0.3s ease;
}

a[href*="#"].rounded-2xl.bg-white {
  background-color: white;
  color: #0f172a;
}

a[href*="#"].rounded-2xl.bg-white:hover {
  background-color: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}

a[href*="#"].rounded-2xl.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
}

a[href*="#"].rounded-2xl.bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

/* All rounded buttons with hover effects */
a.rounded-2xl {
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.rounded-2xl:hover, button.rounded-2xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Specific button colors */
a.bg-indigo-600:hover {
  background-color: #4f46e5;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

a.bg-slate-900:hover {
  background-color: #0f172a;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
}

a.bg-white:hover {
  background-color: #f8fafc;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Hero section buttons with enhanced effects */
.hero-btn {
  position: relative;
  overflow: hidden;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.hero-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Smooth transitions for all interactive elements */
button, a[href], select {
  transition: all 0.3s ease;
}

 /* circular frame around image */
.circle-frame {
  width: 176px; /* Tailwind h-44 = 11rem = 176px */
  height: 176px;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
  border: 2px solid #e2e8f0; /* Light slate border */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.circle-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Scoped brightening for the Quick Stats section only. Keeps changes minimal and isolated. */
.quick-stats svg {
  /* icons inside quick stats */
  color: #2563eb !important; /* indigo-600 */
  stroke: #2563eb !important;
}
.quick-stats p.text-3xl.font-extrabold {
  color: #0f1724 !important; /* dark slate for numbers in light mode */
  font-weight: 800 !important;
}
.quick-stats p.text-sm.font-semibold {
  color: #334155 !important; /* slate-700 for labels in light mode */
  font-weight: 600 !important;
}

html.dark .quick-stats svg {
  color: #93c5fd !important; /* indigo-300 for icons in dark mode */
  stroke: #93c5fd !important;
}
html.dark .quick-stats p.text-3xl.font-extrabold {
  color: #e6eef8 !important; /* light text for numbers in dark mode */
}
html.dark .quick-stats p.text-sm.font-semibold {
  color: #cbd5e1 !important; /* slate-300 for labels in dark mode */
}

/* Scoped dark-mode fixes for the Swiss / Indian sample container only. */
html.dark .samples h3 {
  color: #e6eef8 !important; /* brighter heading in dark mode */
}
html.dark .samples p {
  color: #cbd5e1 !important; /* readable paragraph text in dark mode */
}
html.dark .samples {
  /* ensure any small text inside the samples container is readable */
  color: #cbd5e1 !important;
}

/* Light mode: brighter gradient backgrounds for rounded-3xl boxes */
.rounded-3xl.bg-gradient-to-br.from-indigo-50.to-purple-50 {
  background: linear-gradient(to bottom right, #e0e7ff, #f3e8ff) !important;
}
.rounded-3xl.bg-gradient-to-br.from-blue-50.to-cyan-50 {
  background: linear-gradient(to bottom right, #dbeafe, #cffafe) !important;
}
.rounded-3xl.bg-gradient-to-br.from-purple-50.to-pink-50 {
  background: linear-gradient(to bottom right, #f3e8ff, #fce7f3) !important;
}
.rounded-3xl.bg-gradient-to-br.from-emerald-50.to-teal-50 {
  background: linear-gradient(to bottom right, #d1fae5, #ccfbf1) !important;
}

/* Light mode: brighter gradient backgrounds for mt-6 rounded-2xl boxes */
.mt-6.rounded-2xl.bg-gradient-to-br.from-indigo-50.to-purple-50 {
  background: linear-gradient(to bottom right, #e0e7ff, #f3e8ff) !important;
}

/* Explicit dark backgrounds for gradient boxes */
html.dark .rounded-3xl.bg-gradient-to-br.from-indigo-50 {
  background: linear-gradient(to bottom right, #312e81, #5a2d82) !important;
}
html.dark .rounded-3xl.bg-gradient-to-br.from-blue-50 {
  background: linear-gradient(to bottom right, #0c4a6e, #164e63) !important;
}
html.dark .rounded-3xl.bg-gradient-to-br.from-purple-50 {
  background: linear-gradient(to bottom right, #4c1d95, #831843) !important;
}
html.dark .rounded-3xl.bg-gradient-to-br.from-emerald-50 {
  background: linear-gradient(to bottom right, #064e3b, #134e4a) !important;
}

html.dark .rounded-2xl.bg-gradient-to-br.from-indigo-50 {
  background: linear-gradient(to bottom right, #312e81, #5a2d82) !important;
}

/* Fix dark backgrounds for non-gradient rounded boxes */
html.dark .mt-6.rounded-2xl {
  background-color: #1e293b !important;
}

/* Hero paragraph text - force proper colors in both modes */
p.text-slate-100.dark\:text-slate-300 {
  color: #475569 !important; /* dark gray in light mode */
}
html.dark p.text-slate-100.dark\:text-slate-300 {
  color: #64748b !important; /* medium gray in dark mode */
}