/* ==========================================================================
   Webigo Modern Design System & Stylesheet
   Crafted with 3D Perspective, Glassmorphism, Ambient Glow & Micro-Animations
   ========================================================================== */

/* ==========================================================================
   SPLASH SCREEN — Compact Professional First Load
   Thirukkural 619: முயற்சி (Effort & Persistence)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tamil:wght@400;600&display=swap');

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #060d1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s ease;
}

/* Subtle ambient spot */
.splash-screen::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.splash-screen.splash-exit {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.splash-screen.splash-done { display: none; }

/* Hide decorative elements from old design */
.splash-glow-ring,
.splash-particles { display: none; }

/* ── Content wrapper ── */
.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: sp-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes sp-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Logo row ── */
.splash-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.splash-logo-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.splash-logo-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.45));
  animation: sp-icon-breathe 3s ease-in-out infinite alternate;
}

@keyframes sp-icon-breathe {
  from { filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.35)); }
  to   { filter: drop-shadow(0 0 14px rgba(0, 220, 255, 0.65)); }
}

/* Remove pulse ring — too flashy */
.splash-logo-pulse { display: none; }

.splash-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.splash-brand-name {
  font-family: 'Jost', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.5px;
  line-height: 1;
}

.splash-highlight {
  background: linear-gradient(135deg, #00d2ff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.splash-brand-tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.6);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

/* ── Divider ── */
.splash-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 260px;
  opacity: 0;
  animation: sp-fade 0.6s ease 0.6s forwards;
}

@keyframes sp-fade {
  to { opacity: 1; }
}

.splash-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.2), transparent);
}

.splash-divider-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 210, 255, 0.6);
  flex-shrink: 0;
}

/* ── Thirukkural ── */
.splash-kural-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: sp-fade 0.7s ease 0.75s forwards;
}

.splash-kural-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 200, 255, 0.06);
  border: 1px solid rgba(0, 200, 255, 0.14);
  border-radius: 9999px;
  padding: 0.22rem 0.75rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: 0.3px;
}

.splash-kural-badge i {
  color: rgba(0, 210, 255, 0.7);
  font-size: 0.7rem;
}

.splash-kural-text {
  font-family: 'Noto Serif Tamil', 'Latha', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.75;
  letter-spacing: 0.2px;
  text-align: center;
}

.splash-kural-line2 {
  color: rgba(56, 189, 248, 0.9);
  display: inline-block;
}

.splash-kural-translation {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: rgba(100, 116, 139, 0.85);
  font-style: italic;
  line-height: 1.6;
  text-align: center;
}

.splash-kural-translation em {
  color: rgba(56, 189, 248, 0.75);
  font-style: italic;
}

/* ── Loader ── */
.splash-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 180px;
  opacity: 0;
  animation: sp-fade 0.5s ease 1.2s forwards;
}

.splash-loader-bar {
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.splash-loader-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #00c8ff, #3b82f6);
  animation: sp-fill 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes sp-fill {
  0%   { width: 0%; }
  70%  { width: 85%; }
  100% { width: 100%; }
}

.splash-loader-text {
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(100, 116, 139, 0.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 400px) {
  .splash-logo-icon-wrap { width: 36px; height: 36px; }
  .splash-brand-name { font-size: 1.3rem; }
  .splash-kural-text { font-size: 0.85rem; }
  .splash-divider { width: 200px; }
}

:root {
  /* Dark Theme Palette (Default) */
  --bg-main: #0a0e17;
  --bg-card: rgba(18, 24, 38, 0.85);
  --bg-card-solid: #121826;
  --bg-subtle: #0f1523;
  --bg-surface: #1a2234;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: #3b82f6;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Vibrant Accent Colors */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.35);
  
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.35);
  
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.3);
  --warning: #f59e0b;
  --danger: #ef4444;
  
  --whatsapp-color: #25d366;
  --whatsapp-hover: #1ebd56;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Shadow Tokens */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px var(--primary-glow);

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  /* 🌟 Vibrant Light Mode — Premium Engagement Palette */
  --bg-main: #f5f7ff;
  --bg-card: rgba(255, 255, 255, 0.97);
  --bg-card-solid: #ffffff;
  --bg-subtle: #eef1ff;
  --bg-surface: #e8edff;
  --border-color: rgba(99, 102, 241, 0.18);
  --border-focus: #4f46e5;

  --text-main: #0d0f1e;
  --text-muted: #3d4466;
  --text-dim: #5e6490;

  /* 🔵 Electric Indigo — Bold & Confident Primary */
  --primary: #4f46e5;
  --primary-hover: #3730a3;
  --primary-glow: rgba(79, 70, 229, 0.35);

  /* 💎 Vivid Cyan — Energetic Accent */
  --accent: #0ea5e9;
  --accent-glow: rgba(14, 165, 233, 0.35);

  /* ✅ Emerald Success */
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.3);

  /* ⚠️ Amber Warning */
  --warning: #d97706;

  /* 🔴 Vivid Danger */
  --danger: #e11d48;

  /* 💚 WhatsApp */
  --whatsapp-color: #16a34a;
  --whatsapp-hover: #15803d;

  /* 🌈 Rich colored shadows (adds depth unlike flat light mode) */
  --shadow-sm: 0 2px 10px rgba(79, 70, 229, 0.08);
  --shadow-md: 0 8px 28px -4px rgba(79, 70, 229, 0.15), 0 4px 10px -2px rgba(14, 165, 233, 0.06);
  --shadow-lg: 0 20px 48px -8px rgba(79, 70, 229, 0.22), 0 8px 20px -4px rgba(14, 165, 233, 0.10);
  --shadow-glow: 0 0 30px rgba(79, 70, 229, 0.28);
}

/* Base & Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  line-height: 1.25;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition);
}

input, textarea, select {
  font-family: inherit;
  outline: none;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-padding {
  padding: 3.25rem 0;
}

.bg-subtle {
  background-color: var(--bg-subtle);
  position: relative;
}

/* Live demos section — Rich animated background */
#live-demos {
  padding-bottom: 4.5rem;
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 50% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 65%),
    linear-gradient(160deg, #0a0e1a 0%, #0d1526 40%, #091020 70%, #0a0f1c 100%);
  position: relative;
  overflow: hidden;
}

/* Dot grid overlay */
#live-demos::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(59, 130, 246, 0.18) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Floating animated glow orbs */
#live-demos::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, transparent 70%);
  top: -120px;
  right: -100px;
  animation: demoOrbFloat 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes demoOrbFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%  { transform: translate(-30px, 25px) scale(1.08); opacity: 1; }
  100% { transform: translate(20px, -20px) scale(0.95); opacity: 0.6; }
}

/* Second orb via a child pseudo-wrapper */
#live-demos .demo-orb-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, transparent 70%);
  bottom: -80px;
  left: -80px;
  animation: demoOrb2Float 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes demoOrb2Float {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { transform: translate(25px, -20px) scale(1.1); opacity: 0.9; }
  100% { transform: translate(-15px, 15px) scale(0.92); opacity: 0.5; }
}

/* Third accent orb (green tint) */
#live-demos .demo-orb-3 {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  animation: demoOrb3Float 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes demoOrb3Float {
  0%   { transform: translateX(-50%) scale(1); opacity: 0.5; }
  100% { transform: translateX(-40%) scale(1.15); opacity: 0.85; }
}

/* Ensure all section content stays above the background */
#live-demos > .container {
  position: relative;
  z-index: 1;
}

/* Light mode override — Bold, Vivid, Engaging */
[data-theme="light"] #live-demos {
  background:
    radial-gradient(ellipse 75% 60% at 15% 15%, rgba(79, 70, 229, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 80%, rgba(14, 165, 233, 0.24) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(168, 85, 247, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 75% 15%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 20% 80%, rgba(236, 72, 153, 0.10) 0%, transparent 50%),
    linear-gradient(145deg, #e8eaff 0%, #eff5ff 25%, #f0eeff 50%, #e6f4ff 75%, #edf5f0 100%);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #4f46e5, #0ea5e9, #7c3aed, #ec4899, #10b981) 1;
}
[data-theme="light"] #live-demos::before {
  background-image:
    radial-gradient(circle, rgba(79, 70, 229, 0.28) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 1;
}
[data-theme="light"] #live-demos::after {
  background: radial-gradient(circle, rgba(79, 70, 229, 0.20) 0%, transparent 70%);
  width: 600px;
  height: 600px;
}
[data-theme="light"] #live-demos .demo-orb-2 {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, transparent 70%);
  width: 480px;
  height: 480px;
}
[data-theme="light"] #live-demos .demo-orb-3 {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  width: 320px;
  height: 320px;
}


/* ── #businesses section: rich themed background ── */
#businesses {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(79, 70, 229, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(6, 182, 212, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #080d1a 0%, #0c1325 50%, #080c18 100%);
  position: relative;
}

[data-theme="light"] #businesses {
  background:
    radial-gradient(ellipse 80% 50% at 5% 0%, rgba(79, 70, 229, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 95% 100%, rgba(6, 182, 212, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #eef2ff 0%, #f0f9ff 40%, #f0fdf4 80%, #eef2ff 100%);
}

/* Tab buttons over dark section bg */
#businesses .biz-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}
#businesses .biz-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
#businesses .biz-tab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.45);
}

/* Light mode tab buttons stay as default */
[data-theme="light"] #businesses .biz-tab-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(79, 70, 229, 0.15);
  color: #475569;
  backdrop-filter: blur(8px);
}
[data-theme="light"] #businesses .biz-tab-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(79, 70, 229, 0.3);
  color: #1e293b;
}

/* Comparison table wrapper over section bg */
#businesses .comp-table-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] #businesses .comp-table-wrapper {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(79, 70, 229, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#businesses .comp-table-head {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] #businesses .comp-table-head {
  background: rgba(79, 70, 229, 0.04);
  border-bottom-color: rgba(79, 70, 229, 0.1);
}
#businesses .comp-th + .comp-th,
#businesses .comp-cell + .comp-cell {
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] #businesses .comp-th + .comp-th,
[data-theme="light"] #businesses .comp-cell + .comp-cell {
  border-color: rgba(79, 70, 229, 0.1);
}
#businesses .comp-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] #businesses .comp-row {
  border-bottom-color: rgba(79, 70, 229, 0.08);
}
#businesses .comp-table-footer {
  background: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] #businesses .comp-table-footer {
  background: rgba(79, 70, 229, 0.04);
  border-top-color: rgba(79, 70, 229, 0.1);
}

/* Ambient Background Glow Orbs */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
}

.orb-1 { width: 450px; height: 450px; background: #3b82f6; top: -100px; left: -100px; animation: floatOrbBg 16s ease-in-out infinite alternate; }
.orb-2 { width: 500px; height: 500px; background: #10b981; top: 40%; right: -150px; animation: floatOrbBg 20s ease-in-out infinite alternate-reverse; }
.orb-3 { width: 420px; height: 420px; background: #6366f1; bottom: 5%; left: 20%; animation: floatOrbBg 18s ease-in-out infinite alternate; }

@keyframes floatOrbBg {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.08); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}


/* Navbar - Modern Full-Width Glassmorphic Header */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  background: rgba(10, 15, 28, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 2rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  gap: 1.25rem;
}

[data-theme="dark"] .nav-container {
  background: transparent;
  border: none;
  box-shadow: none;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon {
  width: 50px;
  height: 50px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.nav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: drop-shadow(0 2px 10px rgba(0, 150, 255, 0.4));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-logo:hover .nav-logo-img {
  transform: scale(1.08) translateY(-1px);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-main {
  font-family: var(--font-heading);
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: var(--text-main);
  display: inline-flex;
  align-items: baseline;
}

/* Light Theme "go" - Deep vibrant cyan-blue with rich contrast on light background */
.logo-main .highlight,
[data-theme="light"] .logo-main .highlight {
  background: linear-gradient(135deg, #0284c7 0%, #0052cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
  padding-bottom: 4px;
}

/* Dark Theme "go" - Radiant electric cyan that pops with brilliant contrast on dark background */
[data-theme="dark"] .logo-main .highlight {
  background: linear-gradient(135deg, #00e5ff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
  padding-bottom: 4px;
}

.logo-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 auto;
  flex-shrink: 0;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.nav-actions .btn-whatsapp {
  padding: 0.42rem 1.05rem !important;
  font-size: 0.82rem !important;
  border-radius: 9999px !important;
  gap: 0.4rem !important;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.28);
}

.icon-btn {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  transition: var(--transition);
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.hamburger-btn {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: var(--bg-card-solid);
  border-left: 1px solid var(--border-color);
  z-index: 1000;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: right 0.35s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.close-drawer-btn {
  font-size: 1.5rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.drawer-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.drawer-link:hover {
  color: var(--primary);
}

.drawer-footer {
  margin-top: auto;
}

/* Buttons & UI Tokens */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #ffffff;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--primary-glow);
}

.btn-whatsapp {
  background: var(--whatsapp-color);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}

.btn-glass {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}

.btn-glass:hover {
  background: var(--bg-card);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--bg-surface);
  border-color: var(--primary);
}

.btn-success {
  background: var(--success);
  color: #ffffff;
}

.btn-success:hover {
  background: #059669;
}

.btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

.btn-block {
  width: 100%;
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-primary { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-success { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }

.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }

/* Hero Section & Background (Compact & Sleek Tech Agency Layout) */
.hero-section {
  padding: 5.75rem 0 1.25rem;
  position: relative;
  z-index: 1;
  perspective: 1200px;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(99, 102, 241, 0.22) 0%, transparent 70%),
    radial-gradient(circle at 85% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, #090d16 0%, #0c1222 50%, #090d16 100%);
}

/* Interactive Hero Canvas (Electric Butterfly & Spider Network) */
.hero-interactive-canvas,
.hero-spider-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}


/* Futuristic Tech Grid with Fade Mask */
.hero-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Interactive Cursor Follower / Crusher Glow */
.hero-cursor-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(37, 99, 235, 0.12) 45%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.08s ease-out;
}

/* Ambient Glowing Orbs */
.hero-ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.glow-blue {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.45) 0%, rgba(37, 99, 235, 0) 70%);
  top: -100px;
  left: -60px;
  animation: floatOrb 12s ease-in-out infinite alternate;
}

.glow-cyan {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0) 70%);
  top: 5%;
  right: -80px;
  animation: floatOrb 15s ease-in-out infinite alternate-reverse;
}

.glow-emerald {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 70%);
  bottom: -40px;
  left: 30%;
  animation: floatOrb 10s ease-in-out infinite alternate;
}

/* Subtle Top Luminous Light Beam - Removed for clean seamless sky */
.hero-light-beam {
  display: none !important;
}

/* Animated Glowing Wave Background Layers (Vibrant Sky Blue) */
.hero-waves-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 105px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 -4px 14px rgba(56, 189, 248, 0.3));
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

.hero-wave.wave-1 {
  fill: rgba(14, 165, 233, 0.28);
  animation: waveSlide 18s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite alternate;
}

.hero-wave.wave-2 {
  fill: rgba(56, 189, 248, 0.2);
  animation: waveSlide 14s cubic-bezier(0.36, 0.45, 0.63, 0.53) -4s infinite alternate-reverse;
}

.hero-wave.wave-3 {
  fill: rgba(125, 211, 252, 0.14);
  animation: waveSlide 22s cubic-bezier(0.36, 0.45, 0.63, 0.53) -8s infinite alternate;
}

@keyframes waveSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -20px) scale(1.06); }
  100% { transform: translate(-15px, 25px) scale(0.96); }
}

[data-theme="light"] .hero-ambient-glow {
  opacity: 0.42;
  filter: blur(90px);
}

[data-theme="light"] .hero-cursor-glow {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, transparent 65%);
}

[data-theme="light"] .hero-waves-container {
  filter: drop-shadow(0 -4px 12px rgba(14, 165, 233, 0.18));
  height: 65px;
}

[data-theme="light"] .hero-wave.wave-1 {
  fill: rgba(14, 165, 233, 0.22);
}

[data-theme="light"] .hero-wave.wave-2 {
  fill: rgba(56, 189, 248, 0.16);
}

[data-theme="light"] .hero-wave.wave-3 {
  fill: rgba(186, 230, 253, 0.22);
}

[data-theme="light"] .hero-section {
  background: 
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(79, 70, 229, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 30%, rgba(14, 165, 233, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 92% 70%, rgba(168, 85, 247, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 35% 30% at 80% 10%, rgba(16, 185, 129, 0.09) 0%, transparent 50%),
    linear-gradient(175deg, #f0f2ff 0%, #f5f7ff 35%, #ffffff 65%, #eef1ff 100%);
}

[data-theme="light"] .hero-bg-grid {
  background-image: 
    linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 45%, transparent 100%);
}

[data-theme="light"] .hero-title {
  color: #0f172a;
}

[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 45%, #7c3aed 80%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
  display: inline-block;
}

[data-theme="light"] .hero-subtitle {
  color: #475569;
}

[data-theme="light"] .hero-badge {
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.22);
  color: #4f46e5;
}

[data-theme="light"] .h-feat-item {
  color: #1e293b;
}

[data-theme="light"] .h-feat-item i {
  color: #059669;
}

[data-theme="light"] .stat-number {
  color: #090d16;
}

[data-theme="light"] .stat-label {
  color: #64748b;
}

/* Split 2-Column Hero Layout (Side-by-Side Modern SaaS Architecture) */
.hero-split-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-split-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 2.2rem !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 1.15rem !important;
}

.hero-intro {
  max-width: 100%;
  margin: 0;
  padding-left: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.7rem;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 9999px;
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.65rem;
}

.hero-title {
  font-size: 1.82rem !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.24;
  margin-bottom: 0.65rem;
  color: var(--text-main);
  text-align: left;
}

.hero-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 530px;
  margin: 0 0 0.65rem 0 !important;
  text-align: left;
}

.hero-subtitle strong {
  color: var(--text-main);
  font-weight: 700;
}

.hero-quote-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.8rem;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-left: 3px solid #38bdf8;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 1.35rem;
  font-style: italic;
  max-width: 530px;
}

[data-theme="light"] .hero-quote-tagline {
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.24);
  border-left: 3px solid #4f46e5;
  color: #4338ca;
}

/* Inline USPs row */
.hero-usp-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.4rem;
  flex-wrap: wrap;
  max-width: 530px;
  margin: 0 0 0.95rem 0 !important;
}

.usp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.58rem;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: all 0.25s ease;
}

.usp-pill:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.hero-cta-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem;
  margin: 0 !important;
  flex-wrap: wrap;
}

.hero-cta-group .btn {
  padding: 0.52rem 1.15rem !important;
  font-size: 0.84rem !important;
  border-radius: 9px;
}

/* Trust Stats Bar - Elegant Translucent Pill Capsule */
.hero-metrics-wrap {
  position: relative;
  width: 100%;
  max-width: 780px;
  display: flex;
  justify-content: center;
  margin: 0.5rem auto 0.75rem;
  padding: 0.45rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.10), 0 2px 5px rgba(15, 23, 42, 0.03);
}

[data-theme="dark"] .hero-metrics-wrap {
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hero-metrics-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  max-width: 98%;
  height: 110px;
  background: radial-gradient(ellipse at center, 
    rgba(99, 102, 241, 0.22) 0%, 
    rgba(6, 182, 212, 0.18) 40%, 
    rgba(168, 85, 247, 0.12) 65%, 
    transparent 85%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 9999px;
}

.hero-metrics-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
  padding: 0.15rem 0.35rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-wrap: nowrap;
}

[data-theme="light"] .hero-metrics-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.metric-item:hover {
  transform: translateY(-2px);
}

.metric-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Individual Vibrant Modern Tech Gradients */
.metric-val-1 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-val-2 {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-val-3 {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-val-4 {
  background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 0.1rem;
}

[data-theme="light"] .metric-label {
  color: #475569;
}

.metric-divider {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.45), transparent);
}

/* ========================================================
   Grand Showcase Dock: Expansive Studio Device Chassis
======================================================== */
.showcase-dock-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 2;
}

.showcase-dock-ambient {
  position: absolute;
  inset: -35px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(79, 70, 229, 0.22) 0%, rgba(6, 182, 212, 0.14) 45%, transparent 70%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 1;
  border-radius: 36px;
}

.showcase-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.7;
}

.showcase-glow-orb.orb-primary {
  width: 320px;
  height: 320px;
  top: -40px;
  right: -30px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45) 0%, rgba(59, 130, 246, 0.2) 50%, transparent 70%);
  animation: floatOrbA 7s ease-in-out infinite alternate;
}

.showcase-glow-orb.orb-purple {
  width: 280px;
  height: 280px;
  bottom: -30px;
  left: -30px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(99, 102, 241, 0.18) 50%, transparent 70%);
  animation: floatOrbB 8s ease-in-out infinite alternate;
}

@keyframes floatOrbA {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18px, 20px) scale(1.1); }
}

@keyframes floatOrbB {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(18px, -18px) scale(1.08); }
}

.showcase-grid-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  opacity: 0.65;
}

.showcase-corner-badge {
  position: absolute;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.15);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 5;
}

[data-theme="light"] .showcase-corner-badge {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.badge-top-right {
  top: -12px;
  right: 15px;
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
}

[data-theme="light"] .badge-top-right {
  color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.35);
}

.badge-bottom-left {
  bottom: -12px;
  left: 15px;
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.45);
}

[data-theme="light"] .badge-bottom-left {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse 1.6s infinite;
}

.pulse-dot-sm {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  box-shadow: 0 0 6px var(--success);
  animation: pulse 1.4s infinite;
}

/* Service Selector Bar (3 Segmented Buttons above Laptop) */
.showcase-switcher-bar {
  display: flex;
  gap: 0.35rem;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.2rem;
  margin-bottom: 0.65rem;
}

[data-theme="light"] .showcase-switcher-bar {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.showcase-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.38rem 0.5rem;
  border: none;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.showcase-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .showcase-tab {
  color: #475569;
}

[data-theme="light"] .showcase-tab:hover {
  color: #0f172a;
  background: #ffffff;
}

.showcase-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  box-shadow: 0 4px 16px var(--primary-glow) !important;
}

[data-theme="light"] .showcase-tab.active {
  background: linear-gradient(135deg, #4f46e5, #0284c7) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35) !important;
}

/* ========================================================
   PURE MINIMALIST PRODUCT IMAGE SHOWCASE (MARKED SECTION ONLY)
======================================================== */
.pure-showcase-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 535px;
  margin: 0 auto;
}

/* Futuristic Tech HUD Corner Accents */
.tech-hud-corners {
  position: absolute;
  inset: -7px;
  pointer-events: none;
  z-index: 10;
}

.tech-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #38bdf8;
  border-style: solid;
  transition: all 0.35s ease;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6));
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2.5px 0 0 2.5px;
  border-top-left-radius: 6px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2.5px 2.5px 0 0;
  border-top-right-radius: 6px;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2.5px 2.5px;
  border-bottom-left-radius: 6px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2.5px 2.5px 0;
  border-bottom-right-radius: 6px;
}

[data-theme="light"] .tech-corner {
  border-color: #4f46e5;
  filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.4));
}

.pure-image-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
  transform: none; /* Flat rendering prevents GPU bilinear mipmap texture blur */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  
  /* Cyber Tech Glowing Outline */
  border: 1.5px solid rgba(56, 189, 248, 0.8);
  box-shadow: 
    0 0 0 1px rgba(56, 189, 248, 0.3),
    0 0 22px rgba(56, 189, 248, 0.35),
    0 0 50px rgba(79, 70, 229, 0.25),
    0 20px 40px -10px rgba(0, 0, 0, 0.85);
}

/* Subtle Inner Tech Accent Ring */
.pure-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.15);
}

[data-theme="light"] .pure-image-frame {
  border: 1.5px solid rgba(79, 70, 229, 0.7);
  box-shadow: 
    0 0 0 1px rgba(79, 70, 229, 0.25),
    0 0 22px rgba(79, 70, 229, 0.22),
    0 16px 36px -8px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .pure-image-frame::after {
  box-shadow: inset 0 0 14px rgba(79, 70, 229, 0.1);
}

/* 100% Razor Sharp Crystal Clear Image Rendering */
.pure-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  filter: contrast(1.03) saturate(1.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pure-showcase-wrapper:hover .pure-image-frame {
  transform: translateY(-3px) scale(1.012);
  border-color: #38bdf8;
  box-shadow: 
    0 0 0 1px rgba(56, 189, 248, 0.5),
    0 0 30px rgba(56, 189, 248, 0.5),
    0 0 65px rgba(79, 70, 229, 0.35),
    0 24px 50px -10px rgba(0, 0, 0, 0.9);
}

.pure-showcase-wrapper:hover .tech-corner {
  border-color: #00f0ff;
  filter: drop-shadow(0 0 8px #00f0ff);
}

[data-theme="light"] .pure-showcase-wrapper:hover .pure-image-frame {
  border-color: #4f46e5;
  box-shadow: 
    0 0 0 1px rgba(79, 70, 229, 0.4),
    0 0 28px rgba(79, 70, 229, 0.3),
    0 20px 42px -8px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .pure-showcase-wrapper:hover .tech-corner {
  border-color: #4338ca;
  filter: drop-shadow(0 0 7px rgba(67, 56, 202, 0.5));
}

.pure-image-frame:hover .pure-photo {
  transform: scale(1.02);
}

.pure-badge {
  position: absolute;
  z-index: 4;
  padding: 0.28rem 0.72rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pure-badge.top-left {
  top: 12px;
  left: 12px;
  background: rgba(10, 15, 29, 0.92);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.pure-badge.bottom-right {
  bottom: 12px;
  right: 12px;
  background: rgba(10, 15, 29, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .pure-badge {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .pure-badge.top-left {
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.35);
}

.pure-dots-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0.65rem;
}

.pure-dot-btn {
  width: 22px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .pure-dot-btn {
  background: rgba(255, 255, 255, 0.2);
}

.pure-dot-btn:hover {
  background: rgba(79, 70, 229, 0.5);
}

.pure-dot-btn.active {
  width: 38px;
  background: linear-gradient(135deg, #4f46e5, #0284c7);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}

/* Panes Container */
.showcase-panes-container {
  position: relative;
  min-height: auto;
}

.showcase-pane {
  display: none;
  flex-direction: column;
  animation: fadeInPane 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-pane.active {
  display: flex;
}

/* Product Display Frame */
.product-display-frame {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.product-frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.frame-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.frame-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.bg-primary-soft { background: rgba(79, 70, 229, 0.14); }
.bg-success-soft { background: rgba(16, 185, 129, 0.14); }
.bg-accent-soft  { background: rgba(2, 132, 199, 0.14); }
.bg-warning-soft { background: rgba(245, 158, 11, 0.14); }

.frame-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}

.frame-subtitle {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
  line-height: 1.25;
}

.frame-status-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.16rem 0.52rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

[data-theme="light"] .frame-status-badge {
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

/* Big Crisp Image Frame */
.product-image-container {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  max-height: 205px;
  aspect-ratio: 16 / 9;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .product-image-container {
  border: 1px solid rgba(203, 213, 225, 0.85);
}

.product-main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.product-image-container:hover .product-main-photo {
  transform: scale(1.02);
}

.product-photo-badge {
  position: absolute;
  z-index: 3;
  padding: 0.26rem 0.65rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.product-photo-badge.top-left {
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.product-photo-badge.bottom-right {
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-theme="light"] .product-photo-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

/* Feature Tag Pills at Bottom */
.product-features-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .product-features-row {
  border-top: 1px solid #e2e8f0;
}

.product-feat-tag {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

[data-theme="light"] .product-feat-tag {
  color: #475569;
}

/* Pane Header Bar */
.pane-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.45rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .pane-window-header {
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.window-dots .dot-red { background: #ef4444; }
.window-dots .dot-yellow { background: #f59e0b; }
.window-dots .dot-green { background: #10b981; }

.window-title-tag {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.window-title-tag strong {
  color: var(--text-main);
}

.browser-address-bar {
  flex: 1;
  max-width: 320px;
  margin: 0 0.65rem;
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.24rem 0.65rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="light"] .browser-address-bar {
  background: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, 0.7);
  color: #475569;
}

.speed-score-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 1.8s infinite;
}

/* ========================================================
   REAL VISUAL PRODUCT IMAGE SHOWCASE STYLES
======================================================== */
.real-image-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Web Sub-type Switcher */
.web-sub-tabs {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.web-sub-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.web-sub-btn:hover {
  color: var(--text-main);
  background: var(--bg-card);
}

.web-sub-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}

[data-theme="light"] .web-sub-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

[data-theme="light"] .web-sub-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .web-sub-btn.active {
  background: #eef2ff;
  border-color: #4f46e5;
  color: #4338ca;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

/* Real Photo Frame inside MacBook Screen */
.macbook-screen .real-img-wrapper {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: #000000;
}

.macbook-screen .pane-window-header {
  padding: 0.26rem 0.65rem;
  margin-bottom: 0;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .macbook-screen .pane-window-header {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
}

.macbook-screen .web-sub-tabs {
  margin: 0;
  padding: 0.25rem 0.65rem;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .macbook-screen .web-sub-tabs {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .macbook-screen .real-img-wrapper {
  background: #ffffff;
  border: none;
  box-shadow: none;
}

.showcase-real-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 195px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.real-img-wrapper:hover .showcase-real-photo {
  transform: scale(1.03);
}

/* Overlay Badges on Real Photos */
.img-badge-overlay {
  position: absolute;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

[data-theme="light"] .img-badge-overlay {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.img-badge-overlay.top-left {
  top: 12px;
  left: 12px;
}

.img-badge-overlay.bottom-right {
  bottom: 12px;
  right: 12px;
}

/* Real Image Info & Tags */
.real-img-details {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-theme="light"] .real-img-details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.img-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.img-detail-title h4 {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

[data-theme="light"] .img-detail-title h4 {
  color: #090d16;
}

.img-status-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.12rem 0.45rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

[data-theme="light"] .img-status-tag {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.25);
}

.img-detail-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="light"] .img-detail-desc {
  color: #475569;
}

.img-tags-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.itag {
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

[data-theme="light"] .itag {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

/* Section Headings */
.section-head { max-width: 740px; margin: 0 auto 1.85rem; }
.text-center { text-align: center; }
.section-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--accent); margin-bottom: 0.45rem; }
.section-title { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 0.55rem; }
.section-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* Small Businesses Category Tabs */
.business-category-tabs { display: flex; align-items: center; justify-content: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.biz-tab-btn {
  padding: 0.7rem 1.25rem;
  border-radius: 100px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}
.biz-tab-btn:hover { border-color: var(--primary); color: var(--text-main); background: var(--bg-card); }
.biz-tab-btn.active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #ffffff; border-color: transparent; box-shadow: 0 4px 14px var(--primary-glow); }

/* ==========================================================================
   Small Business Detail Card (Compact, Sleek & Modern)
   ========================================================================== */
.biz-dynamic-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 1.35rem 1.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
  transition: var(--transition);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .biz-dynamic-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(79, 70, 229, 0.12);
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.biz-detail-grid { 
  display: grid; 
  grid-template-columns: 1.15fr 0.85fr; 
  gap: 1.5rem; 
  align-items: center; 
}
.biz-detail-info h3 { 
  font-size: 1.35rem; 
  font-weight: 800; 
  margin-bottom: 0.35rem; 
  line-height: 1.3;
}
.biz-detail-lead { 
  font-size: 0.86rem; 
  color: var(--text-muted); 
  margin-bottom: 1rem; 
  line-height: 1.45;
}
.biz-features-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 0.65rem; 
  margin-bottom: 1.2rem; 
}
.b-feat { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.6rem; 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  border-radius: 10px; 
  padding: 0.6rem 0.75rem; 
}

[data-theme="light"] .b-feat {
  background: rgba(79, 70, 229, 0.04);
  border: 1px solid rgba(79, 70, 229, 0.1);
}
.b-feat i { 
  color: var(--success); 
  margin-top: 2px; 
  font-size: 0.95rem; 
  flex-shrink: 0;
}
.b-feat strong { 
  display: block; 
  font-size: 0.82rem; 
  margin-bottom: 0.15rem; 
  line-height: 1.25;
}
.b-feat span { 
  font-size: 0.73rem; 
  color: var(--text-muted); 
  line-height: 1.35;
  display: block;
}
.biz-detail-mockup { 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  border-radius: 14px; 
  padding: 1.15rem; 
  position: relative; 
}

[data-theme="light"] .biz-detail-mockup {
  background: rgba(79, 70, 229, 0.04);
  border: 1px solid rgba(79, 70, 229, 0.1);
}
.mock-badge-tag { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.35rem; 
  font-size: 0.7rem; 
  font-weight: 700; 
  color: var(--accent); 
  background: rgba(56, 189, 248, 0.1); 
  padding: 0.2rem 0.55rem; 
  border-radius: 6px; 
  margin-bottom: 0.65rem; 
}
.biz-cta-line {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.biz-cta-line .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  border-radius: 10px;
}

/* ==========================================================================
   Server Monitoring Dashboard — Live Comparison Panel
   ========================================================================== */

/* ── Keyframes ── */
@keyframes srv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  50%       { opacity: 0.7; transform: scale(0.9); box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
@keyframes srv-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes bar-grow {
  from { width: 0 !important; }
}

.comparison-container { 
  margin-top: 2.75rem; 
  position: relative;
}

/* ═══════════════════════════════════════════
   SERVER PANEL  
   ═══════════════════════════════════════════ */
.srv-panel {
  border-radius: 16px;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  transition: all 0.3s ease;
  
  /* Dark Mode Default */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(79, 70, 229, 0.1);
  background: linear-gradient(180deg, #0d1424 0%, #0a1020 100%);
}

/* Light / Bright Mode Panel Container */
[data-theme="light"] .srv-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.08),
    0 10px 30px -5px rgba(15, 23, 42, 0.08),
    0 20px 40px -10px rgba(79, 70, 229, 0.05);
}

/* ── Title Bar ── */
.srv-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: #070c18;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .srv-titlebar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.srv-window-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.srv-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red    { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
.dot-yellow { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.dot-green  { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }

.srv-titlebar-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.9);
  flex: 1;
  justify-content: center;
}

.srv-title-text {
  color: #94a3b8;
  letter-spacing: 0.3px;
  font-weight: 600;
}

[data-theme="light"] .srv-title-text {
  color: #334155;
}

.srv-cmd-blink {
  color: #10b981;
  animation: srv-blink 1.1s step-end infinite;
  font-weight: 700;
}

.srv-titlebar-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.srv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}

[data-theme="light"] .srv-live-badge {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.srv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: srv-pulse 1.5s ease-in-out infinite;
}

[data-theme="light"] .srv-live-dot {
  background: #16a34a;
}

.srv-uptime {
  font-size: 0.68rem;
  color: #64748b;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ── Column Headers ── */
.srv-col-headers {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.25fr;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .srv-col-headers {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.srv-col-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.15rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.srv-col-h + .srv-col-h {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .srv-col-h + .srv-col-h {
  border-left: 1px solid #e2e8f0;
}

.srv-col-h-module {
  color: #94a3b8;
}

[data-theme="light"] .srv-col-h-module {
  color: #1e293b;
}

.srv-col-h-module i {
  color: #38bdf8;
}

[data-theme="light"] .srv-col-h-module i {
  color: #4f46e5;
}

.srv-col-h-old {
  background: rgba(239, 68, 68, 0.05);
  color: rgba(239, 68, 68, 0.85);
}

[data-theme="light"] .srv-col-h-old {
  background: #fef2f2;
  color: #991b1b;
  border-left: 1px solid #fecaca;
}

.srv-col-h-new {
  background: rgba(34, 197, 94, 0.05);
  color: rgba(34, 197, 94, 0.9);
}

[data-theme="light"] .srv-col-h-new {
  background: #f0fdf4;
  color: #166534;
  border-left: 1px solid #bbf7d0;
}

/* Status LEDs */
.srv-status-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.led-red {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
  animation: srv-pulse 2s ease-in-out infinite;
}

.led-green {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  animation: srv-pulse 2s ease-in-out infinite;
}

.srv-col-status-tag {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.tag-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .tag-critical {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.tag-online {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .tag-online {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

/* ── Data Rows ── */
.srv-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.25fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.18s ease;
}

[data-theme="light"] .srv-row {
  border-bottom: 1px solid #f1f5f9;
}

.srv-row:hover {
  background: rgba(99, 102, 241, 0.04);
}

[data-theme="light"] .srv-row:hover {
  background: #f8fafc;
}

.srv-row-last {
  border-bottom: none !important;
}

/* Cells */
.srv-cell {
  padding: 0.68rem 1.15rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.srv-cell + .srv-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .srv-cell + .srv-cell {
  border-left: 1px solid #f1f5f9;
}

/* Module Cell */
.srv-cell-module {
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 700;
}

.srv-cell-module i {
  color: #38bdf8;
  font-size: 0.95rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.srv-cell-module span {
  white-space: nowrap;
}

[data-theme="light"] .srv-cell-module {
  color: #0f172a;
}

[data-theme="light"] .srv-cell-module i {
  color: #4f46e5;
}

[data-theme="light"] .srv-cell-module span {
  color: #0f172a;
  font-weight: 700;
}

/* Old / Legacy Cell */
.srv-cell-old {
  background: rgba(239, 68, 68, 0.03);
}

[data-theme="light"] .srv-cell-old {
  background: #fffafa;
}

/* New / Webigo Cell */
.srv-cell-new {
  background: rgba(34, 197, 94, 0.03);
}

[data-theme="light"] .srv-cell-new {
  background: #f0fdf4;
}

/* Badges */
.srv-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  flex-shrink: 0;
}

.ind-fail {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

[data-theme="light"] .ind-fail {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.ind-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .ind-warn {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.ind-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

[data-theme="light"] .ind-ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

/* Messages */
.srv-err-msg {
  font-size: 0.74rem;
  color: rgba(248, 113, 113, 0.85);
  line-height: 1.35;
}

[data-theme="light"] .srv-err-msg {
  color: #991b1b;
  font-weight: 500;
}

.srv-ok-msg {
  font-size: 0.74rem;
  color: rgba(203, 213, 225, 0.9);
  line-height: 1.35;
}

[data-theme="light"] .srv-ok-msg {
  color: #1e293b;
  font-weight: 500;
}

.srv-ok-msg strong {
  color: #4ade80;
}

[data-theme="light"] .srv-ok-msg strong {
  color: #15803d;
  font-weight: 700;
}

/* ── Footer ── */
.srv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: #070c18;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

[data-theme="light"] .srv-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.srv-footer-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.srv-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.22rem 0.65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

[data-theme="light"] .srv-stat-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.chip-green  { background: rgba(34, 197, 94, 0.1);  border-color: rgba(34, 197, 94, 0.25);  color: #4ade80; }
.chip-blue   { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.25); color: #38bdf8; }
.chip-yellow { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); color: #fbbf24; }

[data-theme="light"] .chip-green {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

[data-theme="light"] .chip-blue {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

[data-theme="light"] .chip-yellow {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* CTA button in footer */
.comp-footer-btn {
  padding: 0.55rem 1.25rem !important;
  font-size: 0.82rem !important;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .srv-col-headers,
  .srv-row {
    grid-template-columns: 1fr;
  }
  .srv-col-h + .srv-col-h,
  .srv-cell + .srv-cell {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  [data-theme="light"] .srv-col-h + .srv-col-h,
  [data-theme="light"] .srv-cell + .srv-cell {
    border-top: 1px solid #f1f5f9;
  }
  .srv-col-h-module { display: none; }
  .srv-titlebar-right { display: none; }
  .srv-footer { flex-direction: column; align-items: flex-start; }
  .comp-footer-btn { width: 100%; justify-content: center; }
}

.comp-header-badge {
  text-align: center;
  margin-bottom: 0.5rem;
}
.comp-header-badge span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 0.25rem 0.85rem;
  border-radius: 9999px;
}
[data-theme="light"] .comp-header-badge span {
  color: #4338ca;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.2);
}
.comp-title { 
  font-size: 1.35rem; 
  font-weight: 800; 
  margin-bottom: 0.3rem; 
}
[data-theme="light"] .comp-title {
  color: #0f172a;
}
.comp-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
[data-theme="light"] .comp-subtitle {
  color: #64748b;
}
.comparison-grid { 
  display: grid; 
  grid-template-columns: 1fr auto 1fr; 
  gap: 1rem; 
  align-items: stretch;
  position: relative;
}
.comp-vs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.5px;
  z-index: 3;
}

/* Light mode VS badge */
[data-theme="light"] .comp-vs-badge {
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 0 16px rgba(79, 70, 229, 0.15);
  color: #4f46e5;
}

.comp-box { 
  border-radius: 14px; 
  padding: 1.15rem 1.25rem; 
  border: 1px solid var(--border-color); 
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

/* Dark mode comp-bad */
.comp-bad { 
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.07) 0%, rgba(15, 21, 35, 0.5) 100%); 
  border-color: rgba(239, 68, 68, 0.25); 
}
.comp-bad:hover {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.08);
}

/* Dark mode comp-good */
.comp-good { 
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.09) 0%, rgba(6, 182, 212, 0.04) 50%, rgba(15, 21, 35, 0.6) 100%); 
  border: 1px solid rgba(16, 185, 129, 0.4); 
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06); 
  position: relative;
}
.comp-good:hover {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.15);
}

/* ── Light Mode Overrides for Comparison Boxes ── */
[data-theme="light"] .comp-bad {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(255, 245, 245, 0.6) 100%);
  border-color: rgba(239, 68, 68, 0.22);
}
[data-theme="light"] .comp-bad:hover {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.06);
}
[data-theme="light"] .comp-good {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.07) 0%, rgba(240, 253, 250, 0.9) 100%);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08);
}
[data-theme="light"] .comp-good:hover {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.12);
}

.comp-box-header { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  margin-bottom: 1rem; 
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.comp-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.bad-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.good-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.comp-box-header h4 { 
  font-size: 1rem; 
  font-weight: 800; 
  line-height: 1.2;
}
.comp-subtag {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.18rem;
}
.glow-tag {
  color: #34d399;
}
[data-theme="light"] .glow-tag {
  color: #059669;
}
.comp-list { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 0.55rem; 
}

/* Dark mode list items */
.comp-list li { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.55rem; 
  font-size: 0.82rem; 
  color: var(--text-muted); 
  line-height: 1.45; 
  background: rgba(255, 255, 255, 0.03);
  padding: 0.45rem 0.65rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light mode list items */
[data-theme="light"] .comp-list li {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(203, 213, 225, 0.6);
  color: var(--text-muted);
}

.comp-bullet {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.comp-bullet.bad {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.comp-bullet.good {
  background: rgba(16, 185, 129, 0.22);
  color: #10b981;
}

/* Dark mode good list items */
.comp-good .comp-list li { 
  color: var(--text-main); 
  font-weight: 500; 
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.14);
}
.comp-good .comp-list li strong {
  color: #38bdf8;
  font-weight: 700;
}

/* Light mode good list items */
[data-theme="light"] .comp-good .comp-list li {
  color: #1e293b;
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.18);
}
[data-theme="light"] .comp-good .comp-list li strong {
  color: #0284c7;
  font-weight: 700;
}

@media (max-width: 860px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .comp-vs-badge { margin: 0 auto; }
}

/* ── New Premium Table-Style Comparison ── */

.comp-table-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-card);
}

/* Header row */
.comp-table-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

[data-theme="light"] .comp-table-head {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.comp-th {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.comp-th + .comp-th {
  border-left: 1px solid var(--border-color);
}

[data-theme="light"] .comp-th + .comp-th {
  border-left-color: #e2e8f0;
}

.comp-th-feature {
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.comp-th-bad {
  background: rgba(239, 68, 68, 0.04);
}

.comp-th-good {
  background: rgba(16, 185, 129, 0.05);
}

[data-theme="light"] .comp-th-bad {
  background: rgba(239, 68, 68, 0.03);
}

[data-theme="light"] .comp-th-good {
  background: rgba(16, 185, 129, 0.04);
}

.comp-th-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.bad-icon  { background: rgba(239, 68, 68, 0.14); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.good-icon { background: rgba(16, 185, 129, 0.18); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }

.comp-th-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.comp-th-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 0.08rem;
}

/* Feature rows */
.comp-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.comp-row:hover {
  background: rgba(99, 102, 241, 0.03);
}

[data-theme="light"] .comp-row:hover {
  background: rgba(79, 70, 229, 0.025);
}

.comp-row-last {
  border-bottom: none;
}

/* Each cell */
.comp-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.comp-cell + .comp-cell {
  border-left: 1px solid var(--border-color);
}

[data-theme="light"] .comp-cell + .comp-cell {
  border-left-color: #e2e8f0;
}

/* Feature column */
.comp-cell-feature {
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.80rem;
}

.comp-feat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--primary);
  flex-shrink: 0;
  padding: 6px;
}

[data-theme="light"] .comp-feat-icon {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #4f46e5;
}

/* Bad column */
.comp-cell-bad {
  background: rgba(239, 68, 68, 0.03);
}

[data-theme="light"] .comp-cell-bad {
  background: rgba(254, 242, 242, 0.5);
}

/* Good column */
.comp-cell-good {
  background: rgba(16, 185, 129, 0.03);
}

[data-theme="light"] .comp-cell-good {
  background: rgba(240, 253, 250, 0.5);
}

/* Pills inside cells */
.comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  flex-wrap: wrap;
}

.pill-bad {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

[data-theme="light"] .pill-bad {
  background: rgba(239, 68, 68, 0.07);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

.pill-good {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .pill-good {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.22);
}

.pill-good strong {
  color: inherit;
}

/* Footer */
.comp-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

[data-theme="light"] .comp-table-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

.comp-footer-left {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.comp-footer-left i {
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.comp-footer-left strong {
  color: var(--text-main);
}

[data-theme="light"] .comp-footer-left strong {
  color: #0f172a;
}

.comp-footer-btn {
  padding: 0.55rem 1.2rem !important;
  font-size: 0.82rem !important;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 760px) {
  .comp-table-head,
  .comp-row {
    grid-template-columns: 1fr;
  }
  .comp-th + .comp-th,
  .comp-cell + .comp-cell {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
  [data-theme="light"] .comp-th + .comp-th,
  [data-theme="light"] .comp-cell + .comp-cell {
    border-top-color: #e2e8f0;
  }
  .comp-th-feature { display: none; }
  .comp-cell-feature {
    background: var(--bg-surface);
    font-size: 0.78rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border-color);
  }
  .comp-table-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .comp-footer-btn { width: 100%; justify-content: center; }
}


.pillars-grid-6 { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.5rem; 
  align-items: start;
}
.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.pillar-card:hover,
.pillar-card.is-expanded {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 20px 35px -10px rgba(79, 70, 229, 0.18), 0 0 0 1px rgba(79, 70, 229, 0.2);
}
.highlight-web { border-color: rgba(56, 189, 248, 0.35); background: linear-gradient(180deg, rgba(56, 189, 248, 0.06) 0%, var(--bg-card) 100%); }
.highlight-gmb { border-color: rgba(239, 68, 68, 0.35); background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, var(--bg-card) 100%); }
.highlight-card { border-color: rgba(16, 185, 129, 0.35); background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--bg-card) 100%); }

.popular-ribbon {
  position: absolute;
  top: 12px;
  right: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  box-shadow: 0 4px 10px var(--primary-glow);
  z-index: 2;
}
.gmb-ribbon { background: linear-gradient(135deg, #ef4444, #f59e0b); }

.pillar-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
  transition: transform 0.3s ease;
}
.pillar-card:hover .pillar-icon-box,
.pillar-card.is-expanded .pillar-icon-box {
  transform: scale(1.08);
}
.p-web { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.p-gmb { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.p-cloud { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.p-android { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.p-desktop { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.p-growth { background: rgba(236, 72, 153, 0.15); color: #f472b6; }

.pillar-category { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 0.25rem; }
.pillar-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.55rem; line-height: 1.3; }
.pillar-desc { 
  font-size: 0.82rem; 
  color: var(--text-muted); 
  line-height: 1.5; 
  margin-bottom: 0.65rem; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.25s ease;
}

.pillar-card:hover .pillar-desc,
.pillar-card.is-expanded .pillar-desc {
  -webkit-line-clamp: unset;
}

/* ── Mouse Hover Expand Body ("mouse show length") ── */
.pillar-expand-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, visibility 0.32s ease;
  pointer-events: none;
}

.pillar-expand-inner {
  transform: translateY(-10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover .pillar-expand-body,
.pillar-card:focus-visible .pillar-expand-body,
.pillar-card.is-expanded .pillar-expand-body {
  max-height: 520px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pillar-card:hover .pillar-expand-inner,
.pillar-card:focus-visible .pillar-expand-inner,
.pillar-card.is-expanded .pillar-expand-inner {
  transform: translateY(0);
}

.pillar-features { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  margin-top: 0.6rem;
  margin-bottom: 0.85rem; 
  font-size: 0.8rem; 
  color: var(--text-main); 
}
.pillar-features li { display: flex; align-items: flex-start; gap: 0.45rem; }
.pillar-features li i { color: var(--success); margin-top: 2px; font-size: 0.85rem; }
.pillar-badge { 
  font-size: 0.72rem; 
  font-weight: 600; 
  color: var(--text-muted); 
  background: var(--bg-surface); 
  padding: 0.35rem 0.65rem; 
  border-radius: 8px; 
  text-align: center; 
  border: 1px solid var(--border-color); 
}

/* ── Section Interactive Hint ── */
.pillar-interactive-hint {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
.pillar-interactive-hint span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.2);
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  animation: pulse-gentle 2.5s infinite;
}
[data-theme="light"] .pillar-interactive-hint span {
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.25);
  color: #4338ca;
}

@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.pillar-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.pillar-card-action {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-open-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary);
  transition: all 0.2s ease;
}

.pillar-open-link i {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.pillar-card:hover .pillar-open-link,
.pillar-card.is-expanded .pillar-open-link {
  color: var(--accent);
}

.pillar-card:hover .pillar-open-link i,
.pillar-card.is-expanded .pillar-open-link i {
  transform: translateY(2px) scale(1.15);
}

/* ═══════════════════════════════════════════
   PILLAR SOLUTION DETAIL MODAL
   ═══════════════════════════════════════════ */
.pillar-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.pillar-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pillar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] .pillar-modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pillar-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 840px;
  max-height: 90vh;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(99, 102, 241, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.94) translateY(18px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-modal-overlay.active .pillar-modal-dialog {
  transform: scale(1) translateY(0);
}

[data-theme="light"] .pillar-modal-dialog {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow:
    0 25px 60px -15px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(79, 70, 229, 0.08);
}

.pillar-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}

.pillar-modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  transform: rotate(90deg);
}

[data-theme="light"] .pillar-modal-close {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .pillar-modal-close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Modal Body */
.pillar-modal-body {
  padding: 2.25rem 2.25rem 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.pm-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.pm-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.pm-category-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.1);
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
}

.pm-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

[data-theme="light"] .pm-title {
  color: #0f172a;
}

.pm-tagline {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.4;
}

[data-theme="light"] .pm-tagline {
  color: #2563eb;
}

.pm-desc-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.6;
}

[data-theme="light"] .pm-desc-box {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

.pm-section-heading {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #94a3b8;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

[data-theme="light"] .pm-section-heading {
  color: #64748b;
}

.pm-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.pm-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.pm-feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .pm-feature-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .pm-feature-card:hover {
  background: #f1f5f9;
  border-color: rgba(79, 70, 229, 0.3);
}

.pm-feat-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pm-feat-info strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.15rem;
}

[data-theme="light"] .pm-feat-info strong {
  color: #0f172a;
}

.pm-feat-info span {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
}

[data-theme="light"] .pm-feat-info span {
  color: #64748b;
}

/* Deployments & Tech metadata */
.pm-meta-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.18);
  margin-bottom: 1.75rem;
}

[data-theme="light"] .pm-meta-box {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.pm-meta-col strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.pm-meta-col span {
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.4;
  font-weight: 600;
}

[data-theme="light"] .pm-meta-col span {
  color: #1e293b;
}

/* CTAs inside modal */
.pm-cta-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.pm-cta-row .btn {
  padding: 0.75rem 1.4rem;
  font-size: 0.88rem;
  border-radius: 12px;
  font-weight: 700;
}

/* Modal Footer & Navigation */
.pillar-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.25rem;
  background: rgba(2, 6, 23, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .pillar-modal-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.pillar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pillar-nav-btn:hover {
  border-color: var(--primary);
  color: #ffffff;
  background: rgba(79, 70, 229, 0.15);
}

[data-theme="light"] .pillar-nav-btn {
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .pillar-nav-btn:hover {
  border-color: var(--primary);
  color: #1e293b;
  background: #eef2ff;
}

.pillar-modal-indicators {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pillar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pillar-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--primary);
}

[data-theme="light"] .pillar-dot {
  background: #cbd5e1;
}

[data-theme="light"] .pillar-dot.active {
  background: var(--primary);
}

/* Responsive Modal */
@media (max-width: 768px) {
  .pillar-modal-body { padding: 1.5rem 1.25rem; }
  .pm-features-grid { grid-template-columns: 1fr; }
  .pm-meta-box { grid-template-columns: 1fr; }
  .pillar-modal-footer { padding: 0.85rem 1.25rem; }
  .pm-title { font-size: 1.25rem; }
  .pm-header { flex-direction: column; gap: 0.75rem; }
}

/* ==========================================================================
   Live Software Demos & Minimize / Expand Controls
   ========================================================================== */
.demo-tabs-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.demo-tabs { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.65rem; 
  flex-wrap: wrap; 
}
.demo-tab-btn {
  padding: 0.7rem 1.25rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
/* Subtle "▼ open" arrow after each tab */
.demo-tab-btn::after {
  content: '▾';
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 0.3s ease;
  margin-left: 2px;
}
.demo-tab-btn:hover { border-color: var(--primary); color: var(--text-main); }
.demo-tab-btn:hover::after { opacity: 1; }

/* Active tab — demo is open */
.demo-tab-btn.active { 
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent; 
  color: #ffffff;
  box-shadow: 0 6px 20px var(--primary-glow);
}
/* Arrow flips up when demo is open (active) */
.demo-tab-btn.active::after {
  content: '▴';
  opacity: 1;
  color: rgba(255,255,255,0.8);
}


/* Explicit Minimize / Expand Toggle Button */
.demo-toggle-min-btn {
  padding: 0.7rem 1.15rem;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: var(--transition);
}
.demo-toggle-min-btn:hover {
  background: rgba(56, 189, 248, 0.16);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.demo-screen-container { 
  position: relative; 
  overflow: visible;
  /* Smooth slide-down animation */
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease;
  transform: translateY(0);
}

/* Hidden / closed state — before any tab is clicked */
.demo-screen-container.demo-closed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  overflow: hidden;
}


.minimized-banner {
  display: none;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  padding: 1.1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.minimized-banner:hover {
  border-color: var(--accent);
  background: rgba(30, 41, 59, 0.95);
  transform: translateY(-2px);
}
.demo-screen-container.minimized .minimized-banner {
  display: flex;
}
.min-banner-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.min-banner-left i {
  color: var(--accent);
  font-size: 1.1rem;
}
.min-banner-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}

.demo-screen { display: none; }
.demo-screen.active { display: block; animation: fadeIn 0.4s ease; overflow: visible; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen-frame { 
  background: var(--bg-card-solid); 
  border: 1px solid var(--border-color); 
  border-radius: 18px; 
  overflow: hidden; 
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.screen-toolbar { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0.85rem 1.5rem; 
  background: var(--bg-surface); 
  border-bottom: 1px solid var(--border-color); 
  flex-wrap: wrap; 
  gap: 0.75rem; 
}
.screen-title { 
  font-size: 0.95rem; 
  font-weight: 700; 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}
.screen-branch { font-size: 0.8rem; color: var(--text-muted); }
.screen-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Window controls (Min/Max/Close) */
.win-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.win-ctrl-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  cursor: pointer;
  transition: var(--transition);
}
.win-ctrl-btn:hover {
  color: #ffffff;
  background: var(--primary);
}
.win-ctrl-btn.win-min:hover {
  background: #f59e0b;
}

.screen-body { 
  padding: 1.5rem;
}

/* Garage Screen */
.garage-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.25rem; }
.g-metric { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.75rem 1rem; display: flex; flex-direction: column; }
.g-num { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; }
.g-txt { font-size: 0.75rem; color: var(--text-muted); }
.mock-table-wrapper { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; }
.table-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; flex-wrap: wrap; gap: 0.75rem; }
.table-search { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.35rem 0.75rem; }
.table-search input { background: transparent; border: none; color: var(--text-main); font-size: 0.82rem; width: 180px; }
.mock-table { width: 100%; overflow-x: auto; }
.mock-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
.mock-table th { padding: 0.65rem 0.85rem; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color); }
.mock-table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border-color); }
.veh-name { font-weight: 700; color: var(--text-main); }
.veh-reg { font-size: 0.75rem; color: var(--text-muted); }
.btn-action-icon { width: 30px; height: 30px; border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; }
.btn-action-icon:hover { border-color: var(--primary); color: var(--primary); }

/* Clinic Screen */
.clinic-grid-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.25rem; }
.clinic-patient-panel { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; }
.patient-card-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.pat-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(16, 185, 129, 0.2); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.pat-id { font-size: 0.75rem; color: var(--text-muted); }
.pat-history-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.25rem; }
.tag-pill { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border-color); }
.pat-vital-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.82rem; }
.pat-vital-box div { display: flex; justify-content: space-between; }
.clinic-rx-panel { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; }
.rx-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border-color); }
.rx-items-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.rx-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.75rem 0.85rem; gap: 0.85rem; }
.rx-info { display: flex; flex-direction: column; flex: 1; }
.rx-info strong { font-size: 0.86rem; }
.rx-info span { font-size: 0.72rem; color: var(--text-muted); }
.rx-stock { font-size: 0.75rem; font-weight: 600; }
.rx-price { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.rx-footer { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.rx-total { font-size: 0.9rem; }
.rx-total strong { font-size: 1.15rem; color: var(--text-main); }
.rx-buttons { display: flex; gap: 0.5rem; }

/* POS Screen */
.pos-layout-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.25rem; }
.pos-barcode-input-box { display: flex; align-items: center; gap: 0.65rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; }
.pos-barcode-input-box input { background: transparent; border: none; color: var(--text-main); font-size: 0.88rem; flex: 1; }
.pos-quick-categories { display: flex; gap: 0.45rem; margin-bottom: 1rem; }
.q-cat-btn { padding: 0.35rem 0.75rem; border-radius: 8px; background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.q-cat-btn.active { background: var(--primary); color: #ffffff; border-color: var(--primary); }
.pos-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.pos-product-card { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.75rem 0.85rem; cursor: pointer; transition: var(--transition); }
.pos-product-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.p-name { font-size: 0.84rem; font-weight: 700; margin-bottom: 0.15rem; }
.p-stock { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.p-price { font-size: 0.95rem; font-weight: 800; color: var(--accent); }
.pos-cart-panel { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; }
.cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border-color); }
.cart-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-bottom: 0.85rem; }
.cart-table th, .cart-table td { padding: 0.45rem; text-align: left; border-bottom: 1px solid var(--border-color); }
.cart-summary-box { background: var(--bg-surface); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; }
.sum-row { display: flex; justify-content: space-between; color: var(--text-muted); }
.sum-total-row { display: flex; justify-content: space-between; font-size: 0.98rem; font-weight: 800; color: var(--text-main); border-top: 1px dashed var(--border-color); padding-top: 0.45rem; margin-top: 0.25rem; }
.net-amt { color: var(--success); }
.pos-checkout-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.pos-split-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }

/* EMS Screen */
.ems-grid-layout { display: flex; flex-direction: column; gap: 1.25rem; }
.ems-stat-card { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ems-grid-layout > .ems-stat-card:first-child { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.e-title { font-size: 0.78rem; color: var(--text-muted); }
.e-val { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; }
.e-sub { font-size: 0.74rem; font-weight: 600; }
.ems-mock-table-box { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; }
.ems-mock-table-box h4 { margin-bottom: 0.85rem; }

/* ==========================================================================
   Real Client Case Studies — Compact + Infinite Auto-Scroll Slider
   ========================================================================== */
.case-studies-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.case-studies-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: autoScrollCases 48s linear infinite;
  padding: 0.5rem;
}

.case-studies-track:hover {
  animation-play-state: paused;
}

@keyframes autoScrollCases {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.625rem)); }
}

.case-card { 
  background: var(--bg-card); 
  border: 1px solid var(--border-color); 
  border-radius: 16px; 
  padding: 1.35rem; 
  display: flex; 
  flex-direction: column; 
  width: 330px;
  flex-shrink: 0;
  transition: var(--transition); 
}
.case-card:hover { 
  transform: translateY(-4px); 
  border-color: var(--primary); 
  box-shadow: var(--shadow-lg); 
}
.highlight-case { 
  border-color: rgba(16, 185, 129, 0.4); 
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--bg-card) 100%); 
}
.case-card-header { margin-bottom: 0.75rem; }
.case-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.35rem; 
  font-size: 0.7rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  color: var(--accent); 
  margin-bottom: 0.35rem; 
}
.case-client-name { 
  font-size: 1.2rem; 
  font-weight: 800; 
  line-height: 1.2;
}
.case-summary { 
  font-size: 0.82rem; 
  color: var(--text-muted); 
  line-height: 1.5; 
  margin-bottom: 0.9rem; 
}
.case-summary a {
  color: #38bdf8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.case-summary a:hover {
  color: #818cf8;
}
[data-theme="light"] .case-summary a {
  color: #4f46e5;
}
[data-theme="light"] .case-summary a:hover {
  color: #3730a3;
}
.case-solution-tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.35rem; 
  margin-bottom: 1rem; 
}
.case-solution-tags span { 
  font-size: 0.68rem; 
  font-weight: 600; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  padding: 0.2rem 0.5rem; 
  border-radius: 5px; 
}
.case-results-box { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 0.5rem; 
  background: var(--bg-surface); 
  border: 1px solid var(--border-color); 
  border-radius: 10px; 
  padding: 0.65rem 0.5rem; 
  margin-bottom: 1rem; 
  text-align: center; 
}
.result-metric { display: flex; flex-direction: column; }
.r-val { 
  font-family: var(--font-heading); 
  font-size: 1.15rem; 
  font-weight: 800; 
  color: var(--accent); 
}
.r-lbl { 
  font-size: 0.62rem; 
  color: var(--text-muted); 
  font-weight: 600; 
}
.case-testimonial { 
  margin-top: auto; 
  border-top: 1px solid var(--border-color); 
  padding-top: 0.85rem; 
}
.case-testimonial p { 
  font-size: 0.78rem; 
  font-style: italic; 
  color: var(--text-muted); 
  margin-bottom: 0.35rem; 
  line-height: 1.45;
}
.client-author { 
  font-size: 0.72rem; 
  font-weight: 700; 
  color: var(--text-main); 
}


/* ==========================================================================
   Interactive Quote Calculator (2-Column Grid)
   ========================================================================== */
.calculator-wrapper {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
}

.calc-config-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-shadow: var(--shadow-md);
}

.calc-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calc-label {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.calc-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.calc-radio-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  position: relative;
}

.calc-radio-card input {
  position: absolute;
  opacity: 0;
}

.calc-radio-card .r-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.calc-radio-card .r-content i {
  font-size: 1.2rem;
  color: var(--text-muted);
}

.calc-radio-card.active {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--primary);
}

.calc-radio-card.active .r-content i {
  color: var(--primary);
}

.calc-checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calc-check-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.calc-check-card:hover {
  border-color: var(--primary);
  background: var(--bg-card);
}

.calc-check-card input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.calc-check-card .c-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-check-card .c-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.calc-slider {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: var(--bg-surface);
  outline: none;
  accent-color: var(--primary);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Calculator Summary Panel (Sticky Sidebar) */
.calc-summary-panel {
  position: sticky;
  top: 6.5rem;
}

.summary-card-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.sum-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  align-self: flex-start;
  margin-bottom: 1rem;
}

.sum-pkg-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.sum-pkg-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.sum-features-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.sum-features-box h4 {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.sum-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.88rem;
}

.sum-features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sum-roi-callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: var(--text-main);
  margin-bottom: 1.75rem;
}

.sum-roi-callout i {
  color: var(--success);
  font-size: 1.3rem;
}

.sum-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.guarantee-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Contact & Request Demo */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.contact-subtext {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.contact-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.c-info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: var(--transition);
}

.c-info-card:hover {
  border-color: var(--primary);
  transform: translateX(4px);
}

.c-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #ffffff;
}

.whatsapp-bg { background: var(--whatsapp-color); }
.email-bg { background: var(--primary); }
.location-bg { background: #8b5cf6; }

.c-details { display: flex; flex-direction: column; }
.c-lbl { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.c-val { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }

.founder-badge-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

.f-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.f-info { display: flex; flex-direction: column; }
.f-info strong { font-size: 0.95rem; }
.f-info span { font-size: 0.78rem; color: var(--text-muted); }

/* Glass Form */
.glass-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.glass-form h3 { font-size: 1.5rem; font-weight: 800; }
.glass-form p { font-size: 0.88rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 0.5rem; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text-main); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.glass-form input,
.glass-form select,
.glass-form textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: var(--text-main);
  font-size: 0.9rem;
  transition: var(--transition);
}

.glass-form input:focus,
.glass-form select:focus,
.glass-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-success-alert {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--success);
  color: #34d399;
  padding: 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── High-Contrast Vibrant Footer ── */
.footer {
  background: linear-gradient(180deg, #090e1a 0%, #04070f 100%) !important;
  border-top: 1.5px solid rgba(99, 102, 241, 0.35) !important;
  padding: 3.5rem 0 1.75rem;
  color: #f1f5f9 !important;
  position: relative;
}

[data-theme="light"] .footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1.5px solid rgba(99, 102, 241, 0.25) !important;
  color: #0f172a !important;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.25rem;
  margin-bottom: 2.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: #cbd5e1 !important;
  line-height: 1.75;
  margin-top: 1rem;
}

[data-theme="light"] .footer-brand p {
  color: #334155 !important;
}

.footer-col h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 2.5px solid #6366f1;
}

[data-theme="light"] .footer-col h4 {
  color: #0f172a !important;
  border-bottom-color: #4f46e5;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
}

.footer-col ul a {
  font-size: 0.88rem;
  color: #e2e8f0 !important;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
}

[data-theme="light"] .footer-col ul a {
  color: #1e293b !important;
  font-weight: 600;
}

.footer-col ul a:hover {
  color: #38bdf8 !important;
  transform: translateX(4px);
}

[data-theme="light"] .footer-col ul a:hover {
  color: #4f46e5 !important;
}

.footer-col p {
  font-size: 0.88rem;
  color: #e2e8f0 !important;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.5;
}

[data-theme="light"] .footer-col p {
  color: #1e293b !important;
}

.footer-col p a {
  color: #e2e8f0 !important;
  transition: all 0.25s ease;
}

[data-theme="light"] .footer-col p a {
  color: #0f172a !important;
  font-weight: 600;
}

.footer-col p a:hover {
  color: #38bdf8 !important;
}

[data-theme="light"] .footer-col p a:hover {
  color: #4f46e5 !important;
}

.footer-founder-link {
  color: #818cf8 !important;
  font-weight: 700;
  transition: all 0.25s ease;
}

.footer-founder-link:hover {
  color: #a5b4fc !important;
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  padding-top: 1.75rem;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #cbd5e1 !important;
}

[data-theme="light"] .footer-bottom-inner {
  color: #475569 !important;
}

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

.footer-bottom-links a {
  color: #93c5fd !important;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

[data-theme="light"] .footer-bottom-links a {
  color: #4f46e5 !important;
}

.footer-bottom-links a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

[data-theme="light"] .footer-bottom-links a:hover {
  color: #1e1b4b !important;
}

/* Responsive Breakpoints */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .hamburger-btn { display: flex; }
  
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .hero-intro {
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
  .hero-title {
    text-align: center;
    font-size: 2.35rem;
  }
  .hero-subtitle {
    text-align: center;
    margin: 0 auto 1.25rem;
  }
  .hero-usp-row {
    justify-content: center;
    margin: 0 auto 1.25rem;
  }
  .hero-cta-group {
    justify-content: center;
  }
}

@media (max-width: 1100px) {
  .pillars-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .case-studies-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-title { font-size: 2.35rem; }
  .calculator-wrapper { grid-template-columns: 1fr; }
  .calc-summary-panel { position: static; }
  .hero-metrics-bar { gap: 1.25rem; padding: 0.75rem 1.5rem; }
}

@media (max-width: 768px) {
  .navbar { top: 0; padding: 0; }
  .nav-container { height: 3.85rem; padding: 0 1.25rem; }
  .logo-main { font-size: 1.35rem; }
  .logo-icon { width: 38px; height: 38px; }
  .nav-links { display: none; }
  .hamburger-btn { display: flex; }
  
  .hero-section { padding: 4.5rem 0 2.5rem; }
  .hero-title { font-size: 1.95rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .section-padding { padding: 2.85rem 0; }
  .hero-metrics-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; width: 100%; }
  .metric-divider { display: none; }
  
  .showcase-dock-wrapper { margin-top: 2rem; }
  .showcase-switcher-bar { flex-direction: column; gap: 0.35rem; }
  .showcase-tab { font-size: 0.75rem; padding: 0.5rem; }
  .web-sub-tabs { flex-direction: column; }

  .biz-detail-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .pillars-grid-6 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .pos-layout-grid { grid-template-columns: 1fr; }
  .clinic-grid-layout { grid-template-columns: 1fr; }
  .garage-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-radio-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
}


/* ============================================================
   🌟 LIGHT MODE ENGAGEMENT BOOST — Vibrant, Premium, Alive
   ============================================================ */

/* Body background — subtle warm indigo tint */
[data-theme="light"] body {
  background: linear-gradient(175deg, #f0f2ff 0%, #f5f7ff 50%, #eef1ff 100%);
  background-attachment: fixed;
}

/* Section tag pills — vivid indigo gradient */
[data-theme="light"] .section-tag {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(14, 165, 233, 0.10) 100%);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.25);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Section titles — richer, deeper text */
[data-theme="light"] .section-title {
  color: #0d0f1e;
}
[data-theme="light"] .section-desc {
  color: #3d4466;
}

/* Navbar — crisp white with indigo accent underline on hover */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .nav-link {
  color: #3d4466;
  font-weight: 600;
}
[data-theme="light"] .nav-link:hover {
  color: #4f46e5;
}

/* Primary CTA button — electric indigo gradient */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 60%, #0ea5e9 100%);
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.38);
  color: #ffffff;
  border: none;
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #3730a3 0%, #2563eb 60%, #0284c7 100%);
  box-shadow: 0 10px 32px rgba(79, 70, 229, 0.48);
  transform: translateY(-2px);
}

/* Stat numbers — bold indigo */
[data-theme="light"] .stat-number {
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pillar cards — vibrant colored borders */
[data-theme="light"] .pillar-card {
  background: #ffffff;
  border: 1.5px solid rgba(99, 102, 241, 0.15);
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.07);
}
[data-theme="light"] .pillar-card:hover,
[data-theme="light"] .pillar-card.is-expanded {
  border-color: #4f46e5;
  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.20);
  transform: translateY(-5px);
}

/* Pillar highlight cards — vivid tinted */
[data-theme="light"] .highlight-web {
  border-color: rgba(14, 165, 233, 0.5) !important;
  background: linear-gradient(160deg, rgba(14, 165, 233, 0.06) 0%, #ffffff 60%) !important;
}
[data-theme="light"] .highlight-gmb {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.06) 0%, #ffffff 60%) !important;
}
[data-theme="light"] .highlight-card {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.06) 0%, #ffffff 60%) !important;
}

/* Demo tab buttons — vivid gradient when active */
[data-theme="light"] .demo-tab-btn {
  background: #ffffff;
  border: 1.5px solid rgba(99, 102, 241, 0.20);
  color: #3d4466;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.06);
}
[data-theme="light"] .demo-tab-btn:hover {
  border-color: #4f46e5;
  color: #4f46e5;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.14);
}
[data-theme="light"] .demo-tab-btn.active {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.38) !important;
}

/* Screen frame — vivid border with glow */
[data-theme="light"] .screen-frame {
  border: 1.5px solid rgba(79, 70, 229, 0.18);
  box-shadow: 0 16px 48px rgba(79, 70, 229, 0.14), 0 4px 12px rgba(14, 165, 233, 0.08);
  background: #ffffff;
}

/* Metric / stat cards — pop with indigo-tinted bg */
[data-theme="light"] .g-metric {
  background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
  border: 1.5px solid rgba(79, 70, 229, 0.12);
}
[data-theme="light"] .g-num {
  color: #4f46e5;
}

/* Popular ribbon badge — vivid */
[data-theme="light"] .popular-ribbon {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}
[data-theme="light"] .gmb-ribbon {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

/* Footer — deep indigo-tinted base */
[data-theme="light"] footer {
  background: linear-gradient(160deg, #f0f2ff 0%, #eef1ff 100%);
  border-top: 1.5px solid rgba(79, 70, 229, 0.15);
}

/* WhatsApp floating button — vivid green glow */
[data-theme="light"] .whatsapp-float-btn {
  box-shadow: 0 6px 24px rgba(22, 163, 74, 0.42);
}

/* Section head interactive hint */
[data-theme="light"] .pillar-interactive-hint span {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(14, 165, 233, 0.10));
  border: 1px solid rgba(79, 70, 229, 0.22);
  color: #4f46e5;
}

/* Badge colors */
[data-theme="light"] .badge-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
[data-theme="light"] .badge-success {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.25);
}
[data-theme="light"] .badge-info {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* ============================================================
   WEBIGO COMPARE TABLE � New Clean Comparison Section
   ============================================================ */
.webigo-compare-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin: 2rem 0 2.5rem;
  box-shadow: var(--shadow-lg);
}

/* Header Row */
.wct-header {
  display: grid;
  grid-template-columns: 1.4fr 1.8fr 1.8fr;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  padding: 0;
}
.wct-header .wct-col {
  padding: 1rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wct-header .wct-col-old { background: rgba(239,68,68,0.25); }
.wct-header .wct-col-new { background: rgba(16,185,129,0.25); }

/* Column badges */
.wct-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.wct-badge-bad  { background: rgba(239,68,68,0.35);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.wct-badge-good { background: rgba(16,185,129,0.35); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }

/* Data Rows */
.wct-row {
  display: grid;
  grid-template-columns: 1.4fr 1.8fr 1.8fr;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}
.wct-row:last-child, .wct-row-last { border-bottom: none; }
.wct-row:hover { background: rgba(59,130,246,0.04); }

.wct-col {
  padding: 0.9rem 1.2rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.45;
}
.wct-col-feature {
  font-weight: 700;
  color: var(--text-main);
  background: rgba(255,255,255,0.03);
  border-right: 1px solid var(--border-color);
}
.wct-col-old {
  color: var(--text-muted);
  background: rgba(239,68,68,0.03);
  border-right: 1px solid var(--border-color);
}
.wct-col-new {
  color: var(--text-main);
  background: rgba(16,185,129,0.04);
}
.wct-col-new strong { color: var(--success); }

/* Icons */
.wct-icon      { color: var(--primary); font-size: 1rem; flex-shrink: 0; }
.wct-warn-icon { color: var(--warning); font-size: 0.9rem; flex-shrink: 0; }
.wct-ok-icon   { color: var(--success); font-size: 0.95rem; flex-shrink: 0; }

/* Light mode table overrides */
[data-theme="light"] .webigo-compare-table {
  border-color: rgba(99,102,241,0.15);
  background: #fff;
}
[data-theme="light"] .wct-row:hover { background: rgba(79,70,229,0.04); }
[data-theme="light"] .wct-col-feature { background: rgba(79,70,229,0.03); border-right-color: rgba(99,102,241,0.12); }
[data-theme="light"] .wct-col-old { background: rgba(239,68,68,0.03); border-right-color: rgba(99,102,241,0.12); }
[data-theme="light"] .wct-col-new { background: rgba(16,185,129,0.04); }
[data-theme="light"] .wct-row { border-bottom-color: rgba(99,102,241,0.10); }

/* 3-Pillar Value Cards */
.wct-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 1.75rem;
}
.wct-value-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  text-align: center;
  transition: var(--transition);
}
.wct-value-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 8px 28px var(--primary-glow);
}
.wct-value-card--accent {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(56,189,248,0.06));
  border-color: var(--primary);
  box-shadow: 0 4px 18px var(--primary-glow);
}
.wct-value-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.wct-value-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}
.wct-value-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Light mode value cards */
[data-theme="light"] .wct-value-card { background: #fff; border-color: rgba(99,102,241,0.15); }
[data-theme="light"] .wct-value-card--accent {
  background: linear-gradient(135deg, rgba(79,70,229,0.07), rgba(14,165,233,0.06));
  border-color: #4f46e5;
}

/* CTA row */
.wct-cta {
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .wct-header,
  .wct-row { grid-template-columns: 1fr; }
  .wct-header .wct-col-feature { display: none; }
  .wct-col-feature { font-weight: 800; background: rgba(59,130,246,0.08) !important; border-right: none !important; border-bottom: 1px solid var(--border-color); }
  .wct-col-old, .wct-col-new { border-right: none !important; }
  .wct-value-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPARE TABLE � VIVID COLOR FIX (Light + Dark)
   ============================================================ */

/* === DARK MODE � make rows pop more === */
.wct-col-old {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.10) !important;
  border-right: 1px solid rgba(239, 68, 68, 0.25) !important;
}
.wct-col-new {
  color: #d1fae5 !important;
  background: rgba(16, 185, 129, 0.10) !important;
}
.wct-col-new strong { color: #34d399 !important; }
.wct-col-feature { background: rgba(99, 102, 241, 0.08) !important; }
.wct-row:hover { background: rgba(99, 102, 241, 0.06) !important; }

/* Vivid badges on header */
.wct-badge-bad {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
}
.wct-badge-good {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
}

/* Header column backgrounds */
.wct-header .wct-col-old { background: rgba(239, 68, 68, 0.35) !important; }
.wct-header .wct-col-new { background: rgba(16, 185, 129, 0.35) !important; }

/* === LIGHT MODE � bold vivid overrides === */
[data-theme="light"] .webigo-compare-table {
  border: 2px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 16px 48px rgba(79, 70, 229, 0.16), 0 4px 16px rgba(14, 165, 233, 0.08) !important;
}
[data-theme="light"] .wct-header {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%) !important;
}
[data-theme="light"] .wct-header .wct-col-old {
  background: rgba(220, 38, 38, 0.30) !important;
}
[data-theme="light"] .wct-header .wct-col-new {
  background: rgba(5, 150, 105, 0.30) !important;
}
[data-theme="light"] .wct-badge-bad {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(220,38,38,0.4) !important;
}
[data-theme="light"] .wct-badge-good {
  background: #059669 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(5,150,105,0.4) !important;
}

/* Light mode row columns � vivid backgrounds */
[data-theme="light"] .wct-col-feature {
  background: rgba(79, 70, 229, 0.06) !important;
  color: #1e1b4b !important;
  font-weight: 800 !important;
  border-right: 1px solid rgba(99, 102, 241, 0.18) !important;
}
[data-theme="light"] .wct-col-old {
  background: rgba(254, 226, 226, 0.80) !important;
  color: #991b1b !important;
  border-right: 1px solid rgba(252, 165, 165, 0.40) !important;
}
[data-theme="light"] .wct-warn-icon { color: #dc2626 !important; }
[data-theme="light"] .wct-col-new {
  background: rgba(209, 250, 229, 0.80) !important;
  color: #065f46 !important;
}
[data-theme="light"] .wct-col-new strong { color: #047857 !important; }
[data-theme="light"] .wct-ok-icon { color: #059669 !important; }
[data-theme="light"] .wct-icon { color: #4f46e5 !important; }

[data-theme="light"] .wct-row {
  border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important;
}
[data-theme="light"] .wct-row:hover {
  background: rgba(79, 70, 229, 0.04) !important;
}
[data-theme="light"] .wct-row:hover .wct-col-old {
  background: rgba(254, 202, 202, 0.90) !important;
}
[data-theme="light"] .wct-row:hover .wct-col-new {
  background: rgba(167, 243, 208, 0.90) !important;
}

/* Light mode value cards � vivid */
[data-theme="light"] .wct-value-card {
  border: 1.5px solid rgba(79, 70, 229, 0.18) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08) !important;
}
[data-theme="light"] .wct-value-card:hover {
  border-color: #4f46e5 !important;
  box-shadow: 0 10px 32px rgba(79, 70, 229, 0.22) !important;
}
[data-theme="light"] .wct-value-card h4 { color: #1e1b4b !important; }
[data-theme="light"] .wct-value-card p  { color: #3d4466 !important; }

/* ============================================================
   QUOTE CALCULATOR - VIBRANT, COMPACT & INTERACTIVE REDESIGN
   ============================================================ */

/* Section Background: Dark by default, light override */
#quote-calculator.quote-calc-section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%, rgba(99, 102, 241, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 90%, rgba(6, 182, 212, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #080d1a 0%, #0b1122 50%, #070a14 100%) !important;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] #quote-calculator.quote-calc-section {
  background: linear-gradient(180deg, #f8faff 0%, #eef2ff 50%, #f1f5f9 100%) !important;
  background-image: radial-gradient(at 15% 15%, rgba(99, 102, 241, 0.14) 0px, transparent 45%),
                    radial-gradient(at 85% 85%, rgba(6, 182, 212, 0.12) 0px, transparent 45%) !important;
}

/* Section Header Compact */
#quote-calculator .section-head {
  margin-bottom: 1.5rem !important;
}
#quote-calculator .section-title {
  font-size: 2rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.4rem !important;
}
[data-theme="light"] #quote-calculator .section-title {
  color: #0f172a !important;
}
#quote-calculator .section-desc {
  font-size: 0.92rem !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  color: #475569 !important;
}
[data-theme="dark"] #quote-calculator .section-desc {
  color: #94a3b8 !important;
}

/* ============================================================
   LAUNCH TRIGGER BOX (Interactive Click-to-Open)
   ============================================================ */
.calc-launch-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 20px;
  background: #ffffff;
  border: 2px solid rgba(99, 102, 241, 0.35);
  box-shadow: 0 12px 35px -8px rgba(79, 70, 229, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.calc-launch-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #4f46e5, #06b6d4, #10b981);
}

[data-theme="dark"] .calc-launch-box {
  background: #111827;
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
}

.calc-launch-left {
  flex: 1;
}

.calc-launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.8rem;
  border-radius: 100px;
  background: #ede9fe;
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.3);
  margin-bottom: 0.4rem;
}

[data-theme="dark"] .calc-launch-pill {
  background: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

.calc-launch-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .calc-launch-title {
  color: #ffffff;
}

.calc-launch-sub {
  font-size: 0.88rem;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

[data-theme="dark"] .calc-launch-sub {
  color: #94a3b8;
}

.calc-toggle-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.85rem 1.6rem !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calc-toggle-trigger:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.48) !important;
  background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 100%) !important;
}

.calc-toggle-trigger i.toggle-arrow {
  transition: transform 0.3s ease;
}

.calc-toggle-trigger.is-active i.toggle-arrow {
  transform: rotate(180deg);
}

/* ============================================================
   EXPANDABLE CALCULATOR WRAPPER & COMPACT SIZING
   ============================================================ */
.calculator-wrapper {
  display: grid !important;
  grid-template-columns: 1.25fr 0.9fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
  margin-top: 1.25rem !important;
  animation: calcSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.calculator-wrapper.calc-collapsed {
  display: none !important;
}

@keyframes calcSlideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Config Panel - Compact & Vibrant */
.calc-config-panel {
  background: #ffffff !important;
  border: 2px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 18px !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.08) !important;
}

[data-theme="dark"] .calc-config-panel {
  background: #111827 !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Panel Topbar with Close Button */
.calc-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="dark"] .calc-panel-topbar {
  border-bottom-color: #334155;
}

.calc-panel-badge {
  font-size: 0.8rem;
  font-weight: 800;
  color: #4f46e5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

[data-theme="dark"] .calc-panel-badge {
  color: #818cf8;
}

.calc-close-pill {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.calc-close-pill:hover {
  background: #dc2626;
  color: #ffffff;
}

[data-theme="dark"] .calc-close-pill {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.calc-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.calc-label {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

[data-theme="dark"] .calc-label {
  color: #f8fafc !important;
}

.step-num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   STEP 1: BUSINESS TYPE (Compact 4-Column Row)
   ============================================================ */
.calc-radio-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.5rem !important;
}

.calc-radio-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.65rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .calc-radio-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.calc-radio-card:hover {
  border-color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.calc-radio-card input {
  position: absolute !important;
  opacity: 0 !important;
}

.calc-radio-card .r-content {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.r-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.garage-badge {
  background: #fef3c7;
  color: #d97706;
}
.clinic-badge {
  background: #ccfbf1;
  color: #0d9488;
}
.retail-badge {
  background: #dcfce7;
  color: #15803d;
}
.corporate-badge {
  background: #ede9fe;
  color: #7c3aed;
}

[data-theme="dark"] .garage-badge { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }
[data-theme="dark"] .clinic-badge { background: rgba(13, 148, 136, 0.25); color: #2dd4bf; }
[data-theme="dark"] .retail-badge { background: rgba(21, 128, 61, 0.25); color: #4ade80; }
[data-theme="dark"] .corporate-badge { background: rgba(124, 58, 237, 0.25); color: #c084fc; }

.r-text-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.r-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .r-name {
  color: #f1f5f9;
}

.r-sub {
  font-size: 0.66rem;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .r-sub {
  color: #94a3b8;
}

/* Active Radio Card: Bright & Prominent */
.calc-radio-card.active {
  background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%) !important;
  border: 2px solid #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.24) !important;
}

.calc-radio-card.active .r-name {
  color: #312e81 !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .calc-radio-card.active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.3) 0%, rgba(124, 58, 237, 0.22) 100%) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

[data-theme="dark"] .calc-radio-card.active .r-name {
  color: #ffffff !important;
}

/* ============================================================
   STEP 2: MODULES CHECKBOXES (Compact 2-Column Grid)
   ============================================================ */
.calc-checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.45rem !important;
}

.calc-check-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .calc-check-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.calc-check-card:hover {
  border-color: #6366f1 !important;
  background: #faf5ff !important;
}

[data-theme="dark"] .calc-check-card:hover {
  background: #252f48 !important;
}

.calc-check-card.active,
.calc-check-card input:checked ~ .c-content {
  color: inherit;
}

.calc-check-card:has(input:checked) {
  background: linear-gradient(135deg, #f5f3ff 0%, #f0fdf4 100%) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12) !important;
}

[data-theme="dark"] .calc-check-card:has(input:checked) {
  background: rgba(79, 70, 229, 0.18) !important;
  border-color: #818cf8 !important;
}

.calc-check-wide {
  grid-column: 1 / -1 !important;
}

.calc-check-card input {
  margin-top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: #4f46e5 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.calc-check-card .c-content {
  overflow: hidden;
}

.calc-check-card .c-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .calc-check-card .c-title {
  color: #f8fafc !important;
}

.calc-check-card .c-title i {
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

.calc-check-card .c-desc {
  font-size: 0.72rem !important;
  color: #475569 !important;
  margin-top: 0.15rem !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .calc-check-card .c-desc {
  color: #94a3b8 !important;
}

/* Step 3: Slider Header & Labels */
.calc-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#branchCountLabel {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
}

.calc-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 4px !important;
  background: #e2e8f0 !important;
  outline: none !important;
  accent-color: #4f46e5 !important;
  margin-top: 0.2rem !important;
}

[data-theme="dark"] .calc-slider {
  background: #334155 !important;
}

.slider-labels {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .slider-labels {
  color: #94a3b8 !important;
}

/* ============================================================
   CALCULATOR SUMMARY PANEL (Vibrant & High Energy)
   ============================================================ */
.calc-summary-panel {
  position: sticky !important;
  top: 5.5rem !important;
}

.summary-card-inner {
  background: #ffffff !important;
  border: 2px solid rgba(79, 70, 229, 0.3) !important;
  border-radius: 18px !important;
  padding: 1.35rem !important;
  box-shadow: 0 16px 40px -10px rgba(79, 70, 229, 0.16) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.summary-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #06b6d4, #10b981);
}

[data-theme="dark"] .summary-card-inner {
  background: #111827 !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}

.sum-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #4338ca !important;
  background: linear-gradient(135deg, #ede9fe, #dbeafe) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 100px !important;
  align-self: flex-start !important;
  margin-bottom: 0.2rem !important;
}

[data-theme="dark"] .sum-card-badge {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
}

.sum-pkg-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .sum-pkg-title {
  color: #ffffff !important;
}

.sum-pkg-desc {
  font-size: 0.8rem !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

[data-theme="dark"] .sum-pkg-desc {
  color: #94a3b8 !important;
}

.sum-features-box {
  background: #f8faff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0.8rem !important;
}

[data-theme="dark"] .sum-features-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.sum-features-box h4 {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #0f172a !important;
  margin: 0 0 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

[data-theme="dark"] .sum-features-box h4 {
  color: #f1f5f9 !important;
}

.sum-features-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  font-size: 0.76rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sum-features-list li {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

[data-theme="dark"] .sum-features-list li {
  color: #e2e8f0 !important;
}

.sum-features-list li i {
  color: #16a34a !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
}

.sum-roi-callout {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%) !important;
  border: 1.5px solid #fde047 !important;
  color: #78350f !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

[data-theme="dark"] .sum-roi-callout {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fde68a !important;
}

.sum-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

#btnSendQuoteWhatsapp {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1.2rem !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

#btnSendQuoteWhatsapp:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.55) !important;
  background: linear-gradient(135deg, #16a34a 0%, #166534 100%) !important;
}

.guarantee-note {
  font-size: 0.72rem !important;
  color: #64748b !important;
  text-align: center !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
}

[data-theme="dark"] .guarantee-note {
  color: #94a3b8 !important;
}

/* ============================================================
   RESPONSIVE QUOTE CALCULATOR BREAKPOINTS
   ============================================================ */
@media (max-width: 991px) {
  .calculator-wrapper {
    grid-template-columns: 1fr !important;
  }
  .calc-radio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .calc-summary-panel {
    position: static !important;
  }
  .calc-launch-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .calc-toggle-trigger {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .calc-checkbox-grid {
    grid-template-columns: 1fr !important;
  }
  .calc-radio-grid {
    grid-template-columns: 1fr !important;
  }
  .calc-launch-box {
    padding: 1.25rem 1.25rem;
  }
  .calc-config-panel {
    padding: 1rem 1rem !important;
  }
}


/* ============================================================
   SMALL BUSINESS TABS - CLICK TO SHOW / TOGGLE
   ============================================================ */
.biz-dynamic-card.biz-card-closed {
  display: none !important;
}

.biz-dynamic-card:not(.biz-card-closed) {
  animation: bizCardSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bizCardSlideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.biz-card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .biz-card-header-bar {
  border-bottom-color: rgba(79, 70, 229, 0.1);
}

.biz-card-close-btn {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 100px;
  padding: 0.28rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.biz-card-close-btn:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
}

[data-theme="dark"] .biz-card-close-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Prompt Banner before clicking */
.biz-tab-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  margin: 1.25rem auto 1.75rem;
  max-width: 640px;
  background: #ffffff;
  border: 2px dashed rgba(99, 102, 241, 0.38);
  border-radius: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4338ca;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.08);
  transition: all 0.3s ease;
  text-align: center;
}

[data-theme="dark"] .biz-tab-hint {
  background: #111827;
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.biz-tab-hint.hint-hidden {
  display: none !important;
}

.hint-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
  animation: hintPulseAnim 2s infinite ease-in-out;
}

@keyframes hintPulseAnim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); background: rgba(99, 102, 241, 0.3); }
}


/* ============================================================
   HERO MASTER ALL-IN-ONE STATIC IMAGE (No Slider)
   ============================================================ */
.hero-master-wrapper {
  max-width: 640px !important;
  width: 100% !important;
}

.hero-master-frame {
  aspect-ratio: 1024 / 682 !important;
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 2px solid rgba(56, 189, 248, 0.75) !important;
  box-shadow: 
    0 0 0 1px rgba(56, 189, 248, 0.35),
    0 0 30px rgba(56, 189, 248, 0.28),
    0 0 60px rgba(79, 70, 229, 0.22),
    0 24px 48px -12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .hero-master-frame {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 
    0 0 0 1px rgba(99, 102, 241, 0.2),
    0 16px 40px -10px rgba(79, 70, 229, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

.hero-master-frame:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 
    0 0 0 2px rgba(56, 189, 248, 0.6),
    0 0 40px rgba(56, 189, 248, 0.4),
    0 28px 56px -12px rgba(0, 0, 0, 0.6) !important;
}

.hero-master-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ============================================================
   HERO 4-IMAGE INTERACTIVE SLIDER EFFECT
   ============================================================ */
.hero-slider-container {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
}

.hero-slider-track {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 682;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.96) translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.hero-slide.prev-slide {
  opacity: 0;
  transform: scale(0.96) translateX(-40px);
  z-index: 1;
}

/* Slide Navigation Arrows */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s ease;
  opacity: 0.75;
}

.hero-slider-container:hover .hero-slider-arrow {
  opacity: 1;
}

.hero-slider-arrow:hover {
  opacity: 1 !important;
  background: #4f46e5;
  border-color: #818cf8;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.55);
}

.hero-slider-arrow.prev {
  left: 12px;
}

.hero-slider-arrow.next {
  right: 12px;
}

/* Slider Pill Tabs / Dots */
.hero-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.hero-dot-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .hero-dot-pill {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hero-dot-pill:hover {
  border-color: #6366f1;
  color: #4f46e5;
  transform: translateY(-1px);
}

.hero-dot-pill.active {
  background: linear-gradient(135deg, #4f46e5, #3b82f6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.38) !important;
  transform: translateY(-1px) scale(1.03);
}

.hero-dot-pill.active i {
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .hero-slider-arrow {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
  .hero-dot-pill {
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   📱 COMPREHENSIVE MOBILE RESPONSIVE FIXES — Webigo Landing Page
   Breakpoints: 768px (tablet), 640px (large phone), 480px (small phone)
   ========================================================================== */

/* ── GLOBAL FIXES ── */
@media (max-width: 768px) {
  html { font-size: 15px; }
  body { overflow-x: hidden; }

  .container { padding: 0 1rem; }
  .section-padding { padding: 2.25rem 0; }

  .section-head { margin-bottom: 1.5rem; }
  .section-title { font-size: 1.55rem !important; line-height: 1.3; }
  .section-desc { font-size: 0.88rem; }
  .section-tag { font-size: 0.68rem; }

  /* Buttons: full-width stacking on small screens */
  .btn-lg { padding: 0.78rem 1.4rem; font-size: 0.92rem; }
}

/* ── NAVBAR ── */
@media (max-width: 768px) {
  .navbar { top: 0; }
  .nav-container {
    height: 3.6rem;
    padding: 0 1rem;
    gap: 0.5rem;
  }
  .logo-icon { width: 34px; height: 34px; }
  .logo-main { font-size: 1.25rem; }
  .logo-tag { display: none; }
  .nav-links { display: none !important; }
  .hamburger-btn { display: flex !important; }

  /* Hide WhatsApp text label on small screens, keep icon */
  .nav-actions .btn-whatsapp span { display: none; }
  .nav-actions .btn-whatsapp {
    padding: 0.42rem 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nav-actions .btn-whatsapp { display: none; } /* show only in drawer */
}

/* ── MOBILE DRAWER ── */
@media (max-width: 768px) {
  .mobile-drawer { width: min(300px, 85vw); }
}

/* ── HERO SECTION ── */
@media (max-width: 768px) {
  .hero-section {
    padding: 4.25rem 0 1.5rem;
    overflow-x: hidden;
  }

  .hero-split-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-intro {
    align-items: center;
    text-align: center;
    padding-left: 0;
    order: 1;
  }

  .hero-title {
    font-size: 1.65rem !important;
    text-align: center;
    line-height: 1.28;
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    font-size: 0.86rem;
    text-align: center;
    margin: 0 auto 0.75rem !important;
    max-width: 100%;
  }

  .hero-badge { font-size: 0.65rem; }

  .hero-quote-tagline {
    font-size: 0.74rem;
    text-align: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .hero-cta-group {
    justify-content: center !important;
    flex-direction: column;
    width: 100%;
    gap: 0.6rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
    padding: 0.72rem 1.2rem !important;
    font-size: 0.9rem !important;
  }

  /* Hero Visual — right column comes BELOW text */
  #heroVisual,
  .hero-slider-dock {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }

  .hero-master-wrapper { max-width: 100% !important; }

  /* Slider dots — scroll horizontally if overflow */
  .hero-slider-dots {
    gap: 0.3rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-slider-dots::-webkit-scrollbar { display: none; }

  .hero-dot-pill {
    flex-shrink: 0;
    font-size: 0.68rem;
    padding: 0.22rem 0.6rem;
  }
}

/* Trust Stats / Metrics bar */
@media (max-width: 768px) {
  .hero-metrics-wrap {
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    margin: 0.5rem auto;
    max-width: 100%;
  }

  .hero-metrics-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem !important;
    padding: 0.5rem !important;
    flex-wrap: wrap;
  }

  .metric-divider { display: none !important; }

  .metric-item { align-items: center; }
  .metric-val { font-size: 1.15rem; }
  .metric-label { font-size: 0.58rem; }
}

@media (max-width: 480px) {
  .hero-metrics-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem !important;
  }
  .metric-val { font-size: 1.05rem; }
}

/* ── SECTION: BUSINESSES ── */
@media (max-width: 768px) {
  /* Business category filter tabs — scrollable row */
  .business-category-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
  }
  .business-category-tabs::-webkit-scrollbar { display: none; }

  .biz-tab-btn {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    white-space: nowrap;
  }

  /* Business detail card */
  .biz-dynamic-card { padding: 1rem; border-radius: 14px; }
  .biz-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .biz-detail-info h3 { font-size: 1.15rem; }
  .biz-detail-lead { font-size: 0.86rem; }
  .biz-features-grid { grid-template-columns: 1fr !important; gap: 0.65rem; }
  .biz-cta-line {
    flex-direction: column;
    gap: 0.6rem;
  }
  .biz-cta-line .btn { width: 100%; justify-content: center; }

  .biz-card-header-bar { flex-wrap: wrap; gap: 0.5rem; }
}

/* Comparison table - Webigo style */
@media (max-width: 768px) {
  .comparison-container { padding: 0; }
  .comp-title { font-size: 1.3rem !important; }
  .comp-subtitle { font-size: 0.85rem; }

  /* WCT table - stack columns */
  .wct-header,
  .wct-row {
    grid-template-columns: 1fr !important;
  }
  .wct-header .wct-col-feature { display: none !important; }
  .wct-col-feature {
    font-weight: 800 !important;
    background: rgba(59,130,246,0.08) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
    padding: 0.65rem 1rem !important;
  }
  .wct-col-old,
  .wct-col-new {
    border-right: none !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.83rem;
  }
  .wct-value-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }
}

/* ── SECTION: SERVICES / PILLARS ── */
@media (max-width: 768px) {
  .pillars-grid-6 {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .pillar-card {
    padding: 1.2rem 1.1rem;
    border-radius: 14px;
  }

  .pillar-title { font-size: 1rem; }
  .pillar-desc { font-size: 0.82rem; }
  .pillar-icon-box { width: 42px; height: 42px; font-size: 1.15rem; margin-bottom: 0.7rem; }

  /* Expand body — always visible on mobile */
  .pillar-expand-body {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  .pillar-card-action { display: none; }
}

@media (max-width: 480px) {
  .pillars-grid-6 { grid-template-columns: 1fr !important; }
}

/* ── SECTION: LIVE DEMOS ── */
@media (max-width: 768px) {
  /* Demo tab buttons — scroll horizontally */
  .demo-tabs-wrapper { overflow-x: auto; }
  .demo-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: max-content;
  }
  .demo-tabs::-webkit-scrollbar { display: none; }

  .demo-tab-btn {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
    border-radius: 10px;
  }

  /* Demo screen container */
  .demo-screen-container { border-radius: 14px; }
  .screen-frame { border-radius: 12px; }

  .screen-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
  }
  .screen-title { font-size: 0.8rem; }
  .screen-actions { flex-wrap: wrap; gap: 0.4rem; }
  .screen-branch { display: none; }
  .win-controls { margin-left: auto; }

  /* Garage metrics grid */
  .garage-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }
  .g-metric { padding: 0.65rem; border-radius: 10px; }
  .g-num { font-size: 1.1rem; }
  .g-txt { font-size: 0.7rem; }

  /* Mock table — horizontal scroll */
  .mock-table-wrapper { overflow-x: auto; }
  .mock-table { min-width: 540px; }

  .table-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .table-search { width: 100%; }
  .table-search input { width: 100%; }

  /* POS layout */
  .pos-layout-grid { grid-template-columns: 1fr !important; }
  .pos-items-panel { order: 2; }
  .pos-cart-panel { order: 1; }

  /* Clinic grid */
  .clinic-grid-layout { grid-template-columns: 1fr !important; }

  /* EMS grid */
  .ems-grid-layout { grid-template-columns: 1fr !important; }

  /* Minimized banner */
  .minimized-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .min-banner-right { align-self: flex-end; }
}

/* ── SECTION: CASE STUDIES / CLIENT STORIES ── */
@media (max-width: 768px) {
  .case-studies-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .case-study-card { padding: 1.25rem; border-radius: 14px; }
}

/* ── SECTION: QUOTE CALCULATOR ── */
@media (max-width: 768px) {
  .calc-launch-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
  }
  .calc-toggle-trigger {
    width: 100% !important;
    justify-content: center;
  }
  .calc-launch-title { font-size: 1.1rem; }

  .calculator-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .calc-summary-panel { position: static !important; }

  .calc-radio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .calc-check-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
  }

  .calc-config-panel {
    padding: 1rem !important;
  }

  .calc-summary-panel {
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .calc-radio-grid { grid-template-columns: 1fr 1fr !important; }
  .calc-check-grid { grid-template-columns: 1fr !important; }
}

/* ── SECTION: CONTACT ── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  .contact-subtext { font-size: 0.9rem; }
  .glass-form { padding: 1.5rem; border-radius: 16px; }
  .glass-form h3 { font-size: 1.25rem; }
  .form-row { grid-template-columns: 1fr !important; }

  .c-info-card { padding: 0.85rem 1rem; border-radius: 12px; }
  .c-icon-box { width: 40px; height: 40px; font-size: 1.1rem; }
  .c-val { font-size: 0.88rem; }

  .founder-badge-box { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
  .footer { padding: 2.5rem 0 1.5rem; }
  .footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { font-size: 0.84rem; }
  .footer-col h4 { font-size: 0.92rem; margin-bottom: 0.85rem; }
  .footer-col ul a { font-size: 0.82rem; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .footer-bottom-links { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 480px) {
  .footer-content { grid-template-columns: 1fr !important; }
}

/* ── FLOATING WHATSAPP BUTTON ── */
@media (max-width: 768px) {
  .whatsapp-float-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.5rem !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
  }
  .whatsapp-float-btn span { display: none; }
}

/* ── SECTION HEADINGS (general) ── */
@media (max-width: 480px) {
  .section-title { font-size: 1.35rem !important; }
  .section-desc { font-size: 0.84rem; }

  h1 { font-size: 1.55rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.1rem !important; }

  .btn { font-size: 0.88rem; padding: 0.65rem 1.1rem; }
  .btn-lg { padding: 0.72rem 1.25rem; font-size: 0.9rem; }
}

/* ── SPLASH SCREEN MOBILE ── */
@media (max-width: 480px) {
  .splash-logo-icon-wrap { width: 36px; height: 36px; }
  .splash-brand-name { font-size: 1.25rem; }
  .splash-kural-text { font-size: 0.82rem; }
  .splash-divider { width: 90%; }
  .splash-content { gap: 1.1rem; padding: 0 1rem; }
}

/* ── HERO VISUAL: Pure Showcase Wrapper ── */
@media (max-width: 768px) {
  .pure-showcase-wrapper { max-width: 100% !important; }
  .pure-badge { font-size: 0.62rem; padding: 0.22rem 0.55rem; }
  .tech-hud-corners { inset: -4px; }
  .tech-corner { width: 12px; height: 12px; }
}

/* ── SHOWCASE DOCK ── */
@media (max-width: 768px) {
  .showcase-dock-wrapper { margin-top: 1rem; }
  .showcase-switcher-bar {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .showcase-tab { font-size: 0.74rem; padding: 0.45rem 0.65rem; }
}

/* ── DEMO SCREEN: Screen body scroll on mobile ── */
@media (max-width: 768px) {
  .screen-body { overflow-x: auto; }
  .demo-screen { overflow: hidden; }

  /* Ensure table scrolls horizontally inside demo screens */
  .mock-table table { min-width: 480px; }
  .mock-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── SECTION: BUSINESSES COMPARISON TABLE (legacy) ── */
@media (max-width: 768px) {
  .comparison-container { margin-top: 1.5rem; }
}

/* ── PREVENT HORIZONTAL OVERFLOW GLOBALLY ── */
@media (max-width: 768px) {
  * { max-width: 100%; }
  img { max-width: 100%; height: auto; }
  table { max-width: 100%; }

  /* Preserve inline-flex/flex items */
  .btn, .badge, .biz-tab-btn, .demo-tab-btn,
  .hero-dot-pill, .nav-link { max-width: none; }
}

/* ── INTERACTIVE HINT TEXT ── */
@media (max-width: 768px) {
  .pillar-interactive-hint { display: none; }
}

/* ── GLOW ORBS — reduce on mobile for performance ── */
@media (max-width: 768px) {
  .glow-orb { opacity: 0.08 !important; }
  .hero-ambient-glow { opacity: 0.25 !important; }
  .hero-cursor-glow { display: none; }
  .hero-interactive-canvas { display: none; }
}

/* ── QUOTE CALCULATOR: Summary panel on mobile ── */
@media (max-width: 768px) {
  .sum-features-list li { font-size: 0.82rem; }
  #btnSendQuoteWhatsapp { width: 100%; justify-content: center; }
}

/* ── SECTION TAGS ── */
@media (max-width: 480px) {
  .section-tag {
    font-size: 0.65rem;
    padding: 0.22rem 0.65rem;
  }
}

/* ── TEXT TRUNCATION FIX ── */
@media (max-width: 768px) {
  .pillar-desc {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   🌑 DARK THEME ENGAGEMENT BOOST — Eliminate White, Maximize Immersion
   No plain white/light backgrounds in dark mode. All surfaces deep & glowing.
   ========================================================================== */

/* ── Body & base ── */
:root body,
[data-theme="dark"] body {
  background: #070b14;
}

/* ── Services section deep dark bg ── */
#services {
  background:
    radial-gradient(ellipse 75% 50% at 20% 10%, rgba(59, 130, 246, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 90%, rgba(139, 92, 246, 0.13) 0%, transparent 55%),
    linear-gradient(180deg, #07090f 0%, #0a0e1a 50%, #07090f 100%);
}
[data-theme="light"] #services { background: none; }

/* ── Contact section deep dark bg ── */
#contact {
  background:
    radial-gradient(ellipse 70% 45% at 5% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #080c17 0%, #0b1020 50%, #070a15 100%);
}
[data-theme="light"] #contact { background: none; }

/* ── Case Studies section ── */
#case-studies {
  background:
    radial-gradient(ellipse 65% 45% at 80% 10%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 15% 85%, rgba(239, 68, 68, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, #080b16 0%, #0a0f1c 50%, #07090f 100%);
}
[data-theme="light"] #case-studies { background: none; }

/* ── Calc launch box — dark glass ── */
.calc-launch-box {
  background: rgba(15, 20, 35, 0.85) !important;
  border: 2px solid rgba(99, 102, 241, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.2),
    0 12px 40px rgba(79, 70, 229, 0.25),
    0 0 60px rgba(6, 182, 212, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .calc-launch-box {
  background: #ffffff !important;
  box-shadow: 0 12px 35px -8px rgba(79, 70, 229, 0.18), 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ── Calc config panel — dark glass ── */
.calc-config-panel {
  background: rgba(12, 17, 30, 0.9) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(79,70,229,0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
[data-theme="light"] .calc-config-panel {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.25) !important;
  box-shadow: 0 10px 30px rgba(79,70,229,0.08) !important;
}

/* ── Calc radio cards — dark ── */
.calc-radio-card {
  background: rgba(20, 26, 44, 0.88) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.calc-radio-card:hover {
  border-color: #6366f1 !important;
  background: rgba(30, 38, 62, 0.95) !important;
  box-shadow: 0 4px 18px rgba(99,102,241,0.3) !important;
}
.calc-radio-card.active {
  background: rgba(79, 70, 229, 0.18) !important;
  border-color: #6366f1 !important;
}
[data-theme="light"] .calc-radio-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* ── Calc check cards ── */
.calc-check-card {
  background: rgba(18, 24, 40, 0.85) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.2) !important;
}
.calc-check-card:hover,
.calc-check-card.active {
  background: rgba(79, 70, 229, 0.15) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.25) !important;
}
[data-theme="light"] .calc-check-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ── Calc summary panel ── */
.calc-summary-panel {
  background: rgba(10, 14, 26, 0.92) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 40px rgba(56,189,248,0.1) !important;
  backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .calc-summary-panel {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.2) !important;
  box-shadow: 0 12px 36px rgba(79,70,229,0.12) !important;
}

/* ── Glass form (contact) ── */
.glass-form {
  background: rgba(12, 17, 30, 0.88) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.28) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,0.55), 0 0 40px rgba(79,70,229,0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .glass-form {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(99,102,241,0.18) !important;
  box-shadow: 0 20px 48px -8px rgba(79,70,229,0.15) !important;
}

/* ── Glass form inputs ── */
.glass-form input,
.glass-form select,
.glass-form textarea {
  background: rgba(18, 26, 45, 0.85) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  color: #f8fafc !important;
}
.glass-form input::placeholder,
.glass-form textarea::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}
[data-theme="light"] .glass-form input,
[data-theme="light"] .glass-form select,
[data-theme="light"] .glass-form textarea {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* ── Contact info cards ── */
.c-info-card {
  background: rgba(15, 20, 36, 0.88) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important;
}
.c-info-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 32px rgba(79,70,229,0.25) !important;
}
[data-theme="light"] .c-info-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Founder badge box ── */
.founder-badge-box {
  background: rgba(15, 22, 40, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
}
[data-theme="light"] .founder-badge-box {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}

/* ── Pillar cards fully dark ── */
.pillar-card {
  background: rgba(14, 20, 34, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px) !important;
}
.pillar-card:hover,
.pillar-card.is-expanded {
  background: rgba(20, 28, 50, 0.95) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 20px 45px rgba(79,70,229,0.22), 0 0 0 1px rgba(79,70,229,0.3) !important;
}
[data-theme="light"] .pillar-card {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.15) !important;
  box-shadow: 0 4px 18px rgba(79,70,229,0.07) !important;
}

/* ── WCT value cards dark ── */
.wct-value-card {
  background: rgba(14, 20, 34, 0.88) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.wct-value-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 32px rgba(79,70,229,0.3) !important;
}
[data-theme="light"] .wct-value-card {
  background: #fff !important;
  border-color: rgba(99,102,241,0.15) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.08) !important;
}

/* ── Screen frame (live demos) dark glass ── */
.screen-frame {
  background: rgba(10, 14, 24, 0.95) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 40px rgba(56,189,248,0.08) !important;
}
[data-theme="light"] .screen-frame {
  background: #ffffff !important;
  border-color: rgba(79,70,229,0.18) !important;
  box-shadow: 0 16px 48px rgba(79,70,229,0.14), 0 4px 12px rgba(14,165,233,0.08) !important;
}

/* ── Biz dynamic card ── */
.biz-dynamic-card {
  background: rgba(12, 17, 30, 0.88) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(16px) !important;
}
[data-theme="light"] .biz-dynamic-card {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.2) !important;
}

/* ── Case study cards dark ── */
.case-study-card {
  background: rgba(14, 20, 34, 0.88) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .case-study-card {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.15) !important;
}

/* ── Webigo compare table rows ── */
[data-theme="dark"] .webigo-compare-table,
.webigo-compare-table {
  background: rgba(10, 14, 24, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
[data-theme="light"] .webigo-compare-table {
  background: #ffffff !important;
  border: 2px solid rgba(99,102,241,0.25) !important;
}

/* ── Hero metrics wrap — dark glass ── */
.hero-metrics-wrap {
  background: rgba(10, 15, 28, 0.75) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .hero-metrics-wrap {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(226,232,240,0.95) !important;
  box-shadow: 0 6px 20px -6px rgba(79,70,229,0.10) !important;
}

/* ── Ambient glow orbs — more vibrant in dark ── */
.orb-1 { opacity: 0.22 !important; }
.orb-2 { opacity: 0.18 !important; }
.orb-3 { opacity: 0.20 !important; }
[data-theme="light"] .orb-1,
[data-theme="light"] .orb-2,
[data-theme="light"] .orb-3 { opacity: 0.08 !important; }

/* ── Footer dark ── */
.footer {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(79,70,229,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #06090f 0%, #080c17 100%) !important;
  border-top: 1px solid rgba(99,102,241,0.2) !important;
}
[data-theme="light"] .footer {
  background: linear-gradient(160deg, #f0f2ff 0%, #eef1ff 100%) !important;
  border-top: 1.5px solid rgba(79,70,229,0.15) !important;
}

/* ── Bg-subtle override for dark mode ── */
.bg-subtle {
  background-color: transparent !important;
}

/* ── Navbar scrolled state dark ── */
.navbar.scrolled {
  background: rgba(6, 9, 16, 0.96) !important;
  border-bottom: 1px solid rgba(99,102,241,0.2) !important;
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(255,255,255,0.97) !important;
}

/* ==========================================================================
   FOUNDER BADGE — Interactive Clickable Button
   ========================================================================== */
.founder-badge-clickable {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(168,85,247,0.08) 100%);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.founder-badge-clickable::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.6s ease;
}
.founder-badge-clickable:hover::before {
  left: 100%;
}
.founder-badge-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.6);
  background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(168,85,247,0.15) 100%);
  box-shadow: 0 8px 30px rgba(99,102,241,0.25);
}
.founder-badge-clickable:active {
  transform: translateY(0);
}
.f-avatar-glow {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(99,102,241,0.4);
}
.f-avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 22%;
  flex-shrink: 0;
  border: 2px solid rgba(99,102,241,0.6);
  box-shadow: 0 0 16px rgba(99,102,241,0.4);
}
.founder-badge-clickable .f-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.founder-badge-clickable .f-info strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}
.founder-badge-clickable .f-info span {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.35;
}
[data-theme="light"] .founder-badge-clickable {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.05) 100%);
  border-color: rgba(99,102,241,0.25);
  box-shadow: 0 4px 16px rgba(99,102,241,0.1);
}
[data-theme="light"] .founder-badge-clickable .f-info strong {
  color: #0f172a;
}
[data-theme="light"] .founder-badge-clickable .f-info span {
  color: #475569;
}
.f-about-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #a5b4fc;
  background: rgba(99,102,241,0.2);
  padding: 0.35rem 0.7rem;
  border-radius: 20px;
  border: 1px solid rgba(99,102,241,0.35);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.founder-badge-clickable:hover .f-about-hint {
  background: #4f46e5;
  color: #ffffff;
  border-color: #6366f1;
}

/* ==========================================================================
   ABOUT SABARI — Modal Popup Styles
   ========================================================================== */
.founder-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 6, 12, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}
.founder-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.founder-modal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(160deg, #0e1322 0%, #0a0e19 100%);
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 24px;
  padding: 2rem 2.25rem;
  box-shadow: 0 25px 60px -15px rgba(0,0,0,0.7), 0 0 40px rgba(99,102,241,0.18);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: #e2e8f0;
  isolation: isolate;
}
.founder-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('images/sabari-founder.jpg') no-repeat top right / cover;
  opacity: 0.16;
  filter: saturate(1.15) contrast(1.1);
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(circle at 85% 15%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 85% 15%, black 25%, transparent 75%);
}
.founder-modal-overlay.active .founder-modal-card {
  transform: translateY(0) scale(1);
}
[data-theme="light"] .founder-modal-card {
  background: linear-gradient(160deg, #ffffff 0%, #f8faff 100%);
  border-color: rgba(99,102,241,0.25);
  color: #1e293b;
  box-shadow: 0 25px 60px -15px rgba(99,102,241,0.25);
}
[data-theme="light"] .founder-modal-card::before {
  opacity: 0.10;
  mask-image: radial-gradient(circle at 85% 15%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 85% 15%, black 20%, transparent 70%);
}

/* Close button */
.founder-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}
.founder-modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  transform: rotate(90deg);
}
[data-theme="light"] .founder-modal-close {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #475569;
}

/* Modal Header */
.fm-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;
}
[data-theme="light"] .fm-header {
  border-bottom-color: rgba(0,0,0,0.08);
}
.fm-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
}
.fm-avatar-img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border: 2px solid rgba(99,102,241,0.6);
  box-shadow: 0 8px 24px rgba(79,70,229,0.4);
}
.fm-avatar {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(79,70,229,0.4);
}
.fm-avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 24px;
  border: 2px dashed rgba(168,85,247,0.6);
  animation: fmRingRotate 18s linear infinite;
  pointer-events: none;
}
@keyframes fmRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.fm-header-info {
  flex: 1;
}
.fm-name {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
[data-theme="light"] .fm-name {
  color: #0f172a;
}
.fm-title {
  font-size: 0.9rem;
  color: #a5b4fc;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
[data-theme="light"] .fm-title {
  color: #4f46e5;
}
.fm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}
.fm-badge-primary {
  background: rgba(99,102,241,0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.35);
}
.fm-badge-green {
  background: rgba(16,185,129,0.15);
  color: #34d399;
  border: 1px solid rgba(16,185,129,0.3);
}
.fm-badge-indigo {
  background: rgba(168,85,247,0.18);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,0.35);
}

/* Modal Story */
.fm-story {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.fm-story-text {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #cbd5e1;
  margin: 0;
}
[data-theme="light"] .fm-story-text {
  color: #334155;
}
.fm-story-text strong {
  color: #f1f5f9;
  font-weight: 700;
}
[data-theme="light"] .fm-story-text strong {
  color: #0f172a;
}
.fm-story-text em {
  color: #a5b4fc;
  font-style: normal;
  font-weight: 600;
}
[data-theme="light"] .fm-story-text em {
  color: #4338ca;
}

/* Stats Row */
.fm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.fm-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.85rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.fm-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.08);
}
[data-theme="light"] .fm-stat {
  background: rgba(99,102,241,0.04);
  border-color: rgba(99,102,241,0.15);
}
.fm-stat-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: #818cf8;
  letter-spacing: -0.02em;
}
[data-theme="light"] .fm-stat-num {
  color: #4f46e5;
}
.fm-stat-lbl {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.25;
  font-weight: 600;
}
[data-theme="light"] .fm-stat-lbl {
  color: #64748b;
}

/* Skills tags */
.fm-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
}
.fm-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1;
}
[data-theme="light"] .fm-skill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}
.fm-skill i {
  color: #818cf8;
}

/* Modal CTA & Location */
.fm-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.fm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-size: 0.96rem;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(34,197,94,0.3);
  transition: all 0.25s ease;
  margin-bottom: 0;
}
.fm-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(34,197,94,0.4);
}
.fm-portfolio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-size: 0.96rem;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  border: 1px solid rgba(165,180,252,0.35);
  box-shadow: 0 8px 24px rgba(79,70,229,0.3);
  transition: all 0.25s ease;
}
.fm-portfolio-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  border-color: rgba(165,180,252,0.6);
  box-shadow: 0 12px 30px rgba(79,70,229,0.45);
  color: #ffffff !important;
}
[data-theme="light"] .fm-portfolio-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  box-shadow: 0 8px 20px rgba(79,70,229,0.25);
}
.fm-location {
  font-size: 0.8rem;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}
[data-theme="light"] .fm-location {
  color: #64748b;
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .founder-modal-card {
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
    max-height: 92vh;
  }
  .fm-header {
    flex-direction: column;
    text-align: center;
    gap: 0.85rem;
  }
  .fm-badges {
    justify-content: center;
  }
  .fm-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .fm-skills {
    justify-content: center;
  }
}

/* ==========================================================================
   BUTTERY SMOOTH SCROLLING & MOBILE PERFORMANCE ACCELERATION
   ========================================================================== */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mobile GPU optimization — eliminates repaint stutter & lag on touch scroll */
@media (max-width: 768px) {
  .hero-section,
  .hero-slide,
  .pillar-card,
  .glass-form,
  .showcase-card,
  .navbar {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Soften heavy blurs on mobile devices to prevent frame-drops */
  .pillar-card,
  .wct-value-card,
  .glass-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ==========================================================================
   FLOATING BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.65);
  border-color: #ffffff;
}

.back-to-top-btn:active {
  transform: scale(0.92);
}

.back-to-top-btn i {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.back-to-top-btn:hover i {
  transform: translateY(-2px);
}

.btt-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .back-to-top-btn {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
  }
  .btt-label {
    display: none;
  }
}