/* Dark Theme Custom Language Switcher */
.lang-switcher {
  display: inline-flex !important;
  align-items: center  !important;
  gap: 6px  !important;
  background: rgba(255, 255, 255, 0.05) !important; 
  border: 1px solid rgba(255, 255, 255, 0.1)  !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px) !important;
}

.lang-switcher .lang-btn {
  color: #a0aec0 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  transition: all 0.25s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.lang-switcher .lang-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Active Language State */
.lang-switcher .lang-btn.active {
  color: #ffffff;
  background: #2563eb; /* Primary accent color */
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.lang-switcher .lang-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  user-select: none;
}

:root {
      --wan-blue: #0070F3;
      --wan-dark-bg: #0B0F17;
      --wan-card-bg: #131B2A;
      --wan-border: #1E293B;
    }

    body.index-page {
      background-color: var(--wan-dark-bg);
      color: #F8FAFC;
      font-family: 'Inter', sans-serif;
    }

    /* Floating Header Styling */
    .header {
      background: rgba(11, 15, 23, 0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--wan-border);
      padding: 15px 0;
    }

    .navmenu a {
      color: #94A3B8 !important;
      font-weight: 500;
    }

    .navmenu a:hover, .navmenu a.active {
      color: #FFFFFF !important;
    }

    /* Pulsing Blue Focus Dot */
    .pixel-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: var(--wan-blue);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--wan-blue);
    }

    /* Hero Glass Card */
    .hero {
      background: radial-gradient(circle at 50% 20%, rgba(0, 112, 243, 0.15) 0%, transparent 60%);
      padding-top: 160px;
      padding-bottom: 90px;
    }

    .hero h1 {
      color: #FFFFFF;
      font-size: 3.2rem;
      font-weight: 800;
    }

    .hero h1 span {
      color: var(--wan-blue);
    }

    .hero-glass-card {
      background: rgba(19, 27, 42, 0.6);
      border: 1px solid var(--wan-border);
      border-radius: 16px;
      padding: 24px;
      backdrop-filter: blur(10px);
    }

    /* Card Box Override */
    .card-dark {
      background: var(--wan-card-bg);
      border: 1px solid var(--wan-border);
      border-radius: 16px;
      padding: 30px;
      transition: all 0.3s ease;
    }

    .card-dark:hover {
      border-color: var(--wan-blue);
      transform: translateY(-4px);
    }

    /* Interactive Estimator Elements */
    .estimator-card {
      background: #0F172A;
      border: 1px solid var(--wan-border);
      border-radius: 20px;
      padding: 35px;
    }

    .addon-checkbox {
      display: none;
    }

    .addon-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: #182234;
      border: 1px solid var(--wan-border);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .addon-checkbox:checked + .addon-label {
      border-color: var(--wan-blue);
      background: rgba(0, 112, 243, 0.1);
    }

    .summary-box {
      background: #182234;
      border: 1px solid var(--wan-border);
      border-radius: 16px;
      padding: 25px;
    }

    .btn-wan-primary {
      background-color: var(--wan-blue);
      color: #FFFFFF;
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 112, 243, 0.3);
    }

    .btn-wan-primary:hover {
      background-color: #005bb5;
      color: #FFFFFF;
      transform: translateY(-2px);
    }


    /* Premium Floating Pill Navbar */
.header-floating {
  background: transparent;
  padding: 20px 0;
  transition: all 0.3s ease;
}

.nav-pill-container {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.navmenu a {
  color: #94A3B8 !important;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.navmenu a:hover, .navmenu a.active {
  color: #FFFFFF !important;
}

/* Pulsing Slot Status Badge */
.status-badge {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: #CBD5E1;
}

/* Hero Section Polish */
.hero-glow {
  background: radial-gradient(circle at 50% 30%, rgba(0, 112, 243, 0.18) 0%, transparent 65%);
}

.artifact-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}


/* Fix spacing and flex alignment */
.nav-pill-container {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 10px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Prevent text wrapping in the slots badge */
.status-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  color: #CBD5E1;
  white-space: nowrap; /* Prevents text from breaking onto two lines */
}

/* Give proper breathing room to nav links */
.navmenu ul {
  display: flex;
  align-items: center;
  gap: 2rem !important; /* Proper spacing between menu items */
  margin: 0;
  padding: 0;
  list-style: none;
}

.gradient-text {
  background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 40%, #0070F3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Custom Secondary Outline Button Hover Fix */
.btn-outline-light {
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease !important;
}

.btn-outline-light:hover, 
.btn-outline-light:focus, 
.btn-outline-light:active {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}


/* Increase perspective depth so the angle distortion is very gentle */
.perspective-container {
  perspective: 2000px; /* Changed from 1000px to 2000px for a flatter, subtle depth */
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-card:hover {
  /* Subtle glow accent instead of harsh shadow */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 112, 243, 0.12);
}

/* Toned-down layer lift */
.tilt-card:hover .layer-3d-card {
  transform: translateZ(12px); /* Reduced from 35px to 12px for micro-depth */
  border-color: rgba(0, 112, 243, 0.3) !important;
}

.layer-3d-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform;
}

/* Softer cursor sheen overlay */
.card-sheen {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.035), transparent 40%);
  z-index: 2;
}

/* Force Section Backgrounds & Global Text Color */
section, 
.section,
#async-model {
  background-color: #0B0F17 !important;
  color: #F8FAFC !important;
}

/* Ensure Heading Colors Don't Inherit Light Background Rules */
#async-model h2,
#async-model h2.async-section-title {
  color: #FFFFFF !important;
}

#async-model p {
  color: #94A3B8 !important;
}

/* --- Interactive Card Hover Effects --- */
.step-card {
  background: #131B2A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Hover State: Lift up, glow border, and soft radial shadow */
.step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 112, 243, 0.4) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 112, 243, 0.15);
}

/* Icon Container Glow on Hover */
.step-card .card-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 112, 243, 0.1);
  border: 1px solid rgba(0, 112, 243, 0.2);
  color: #38BDF8;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.step-card:hover .card-icon-box {
  background: rgba(0, 112, 243, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
  color: #FFFFFF;
  transform: scale(1.08);
}

/* --- Base Structure Card Styling --- */
.structure-card {
  background: rgba(19, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.structure-card .card-title-text {
  color: #F8FAFC;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.structure-card .card-price-text {
  color: #64748B; /* Default subtle price color */
  font-size: 0.9rem;
  font-family: 'Fira Code', monospace;
  transition: color 0.2s ease;
}

/* Hover State */
.structure-card:hover {
  border-color: rgba(0, 112, 243, 0.4);
  background: rgba(19, 27, 42, 0.9);
}

/* ACTIVE / SELECTED STATE FIX */
.structure-card.active {
  background: rgba(0, 112, 243, 0.12) !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 0 20px rgba(0, 112, 243, 0.25);
}

.structure-card.active .card-title-text {
  color: #FFFFFF !important;
}

.structure-card.active .card-price-text {
  color: #38BDF8 !important; /* Vivid Cyan Blue for selected price */
  font-weight: 600;
}


/* Placeholder Text Contrast Fix */
::placeholder {
  color: #94A3B8 !important; /* High-contrast light slate grey */
  opacity: 1 !important;
}

/* Specific styling for inputs & textarea inside the form */
.form-control, 
input[type="text"], 
input[type="email"], 
textarea {
  background-color: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-radius: 10px;
}

.form-control:focus, 
input:focus, 
textarea:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
  outline: none;
}



/* Custom Structure & Add-on Cards */
.structure-card, .addon-card {
  background: rgba(19, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.structure-card:hover, .addon-card:hover {
  background: rgba(19, 27, 42, 0.95);
  border-color: rgba(0, 112, 243, 0.4);
}

.structure-card.active {
  background: rgba(0, 112, 243, 0.12) !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 0 15px rgba(0, 112, 243, 0.2);
}

.structure-card.active .card-price-text {
  color: #38BDF8 !important;
}

/* Form Inputs with Clear Placeholder Contrast */
.form-control-tech {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-radius: 10px;
  padding: 12px 16px;
}

.form-control-tech::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

.form-control-tech:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2) !important;
}


/* --- Addon Card Base State --- */
.addon-card {
  background: rgba(19, 27, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.addon-card:hover {
  background: rgba(19, 27, 42, 0.95);
  border-color: rgba(0, 112, 243, 0.4);
}

/* --- ACTIVE / SELECTED STATE FOR STANDARD ADDONS --- */
.addon-card.active {
  background: rgba(0, 112, 243, 0.12) !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 0 15px rgba(0, 112, 243, 0.2);
}

/* Custom Checkbox accent when card is active */
.addon-card.active .form-check-input {
  background-color: #38BDF8;
  border-color: #38BDF8;
}

/* --- DISTINCT RUSH DELIVERY CARD STYLING --- */
.addon-rush-card {
  background: rgba(245, 158, 11, 0.04) !important;
  border: 1px dashed rgba(245, 158, 11, 0.35) !important;
}

.addon-rush-card:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

/* --- ACTIVE STATE FOR RUSH DELIVERY --- */
.addon-rush-card.active {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid #F59E0B !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
}

.addon-rush-card.active .form-check-input {
  background-color: #F59E0B;
  border-color: #F59E0B;
}


/* --- Base Addon Card Styling --- */
.addon-card {
  background: rgba(19, 27, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* Hover state when NOT checked */
.addon-card:hover {
  background: rgba(19, 27, 42, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-2px);
}

/* --- ACTIVE / CHECKED STATE --- */
.addon-card.active {
  background: rgba(0, 112, 243, 0.14) !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 0 18px rgba(0, 112, 243, 0.25);
}

.addon-card.active .form-check-input {
  background-color: #38BDF8 !important;
  border-color: #38BDF8 !important;
}

/* --- ACTIVE HOVER STATE (Distinct hover effect when card is selected) --- */
.addon-card.active:hover {
  background: rgba(0, 112, 243, 0.22) !important;
  border-color: #60A5FA !important;
  box-shadow: 0 0 25px rgba(0, 112, 243, 0.45);
  transform: translateY(-2px);
}

/* --- RUSH DELIVERY SPECIAL CARD --- */
.addon-rush-card {
  background: rgba(245, 158, 11, 0.04) !important;
  border: 1px dashed rgba(245, 158, 11, 0.35) !important;
}

.addon-rush-card:hover {
  background: rgba(245, 158, 11, 0.09) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.addon-rush-card.active {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid #F59E0B !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.addon-rush-card.active:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: #FBBF24 !important;
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.5);
}

.addon-rush-card.active .form-check-input {
  background-color: #F59E0B !important;
  border-color: #F59E0B !important;
}


/* Portfolio Styling & Hover Interactions */
.portfolio-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.portfolio-thumb img {
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-thumb img {
  transform: scale(1.06);
}

.portfolio-overlay {
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1 !important;
}

/* Category Filter Active Buttons */
#portfolio .btn-outline-light.active {
  background-color: var(--wan-blue);
  border-color: var(--wan-blue);
  color: #FFFFFF;
}


/* Base Add-on Card Transition */
.addon-card {
  background: rgba(19, 27, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}

/* Hover State - Matches Efficiency First (.feature-card:hover) */
.addon-card:hover {
  background: rgba(19, 27, 42, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

/* Selected Active State */
.addon-card.active {
  background: rgba(0, 112, 243, 0.14) !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 0 18px rgba(0, 112, 243, 0.25) !important;
}

/* Active + Hover State (Extra Glow when hovering an already selected item) */
.addon-card.active:hover {
  background: rgba(0, 112, 243, 0.22) !important;
  border-color: #38BDF8 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.4), 0 0 25px rgba(56, 189, 248, 0.35) !important;
}

/* Rush Delivery Card - Custom Hover Variant */
.addon-rush-card:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 15px rgba(245, 158, 11, 0.2) !important;
}

.addon-rush-card.active:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #F59E0B !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.4), 0 0 25px rgba(245, 158, 11, 0.4) !important;
}


/* Smooth Hover Zoom on Screenshot */
.portfolio-card:hover .screenshot-wrapper img {
  transform: scale(1.05);
  transition: transform 0.4s ease-in-out;
}

/* Browser Mockup Frame Styling */
.browser-frame {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle zoom effect on the actual website screenshot inside the browser frame */
.mockup-screenshot {
  transition: transform 0.5s ease;
}

.portfolio-card:hover .mockup-screenshot {
  transform: scale(1.04);
}

.portfolio-card:hover .browser-frame {
  border-color: rgba(56, 189, 248, 0.3);
}


/* Floating Navigation Styling */
.navbar-floating-wrapper {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease-in-out;
}

.nav-link {
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.hover-white:hover {
  color: #ffffff !important;
}

/* Custom Hamburger Animation */
.hamburger-icon {
  width: 22px;
  height: 16px;
  cursor: pointer;
}

.hamburger-icon .bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Toggle Animation State */
button[aria-expanded="true"] .bar-1 {
  transform: translateY(7px) rotate(45deg);
}

button[aria-expanded="true"] .bar-2 {
  opacity: 0;
}

button[aria-expanded="true"] .bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Specific Tweaks (Under 991px) */
@media (max-width: 991.98px) {
  .navbar-floating-wrapper {
    border-radius: 24px !important; /* Converts smooth rounded pill on mobile */
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.75rem;
  }

  .nav-link {
    font-size: 0.95rem;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
}


/* Fix Mock Display URL Bar Contrast */
.browser-header .address-bar {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important; /* Crisp light slate color */
  font-size: 0.72rem !important;
  letter-spacing: 0.3px;
}

.browser-header .address-bar i {
  color: #22c55e !important; /* Vibrant lock icon */
}