/* theme.css - YouSee360 High Tech + Glassmorphism Design System */

:root {
  /* Colors */
  --color-primary: #01e4e4;
  /* Cyber Cyan */
  --color-secondary: #00ff66;
  /* Neon Green */
  --color-accent-pink: #ff00ff;
  /* Neon Pink for accents */
  --color-dark-bg: #050505;
  /* Deep Black */
  --color-glass-bg: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-text-main: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);

  /* Shadows & Glows */
  --glow-primary: 0 0 15px rgba(1, 228, 228, 0.5);
  --glow-secondary: 0 0 15px rgba(0, 255, 102, 0.5);
  --glow-text: 0 0 10px rgba(255, 255, 255, 0.5);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* Glassmorphism */
  --glass-blur: blur(20px);
  --glass-border-radius: 16px;

  /* 3D Space */
  --perspective: 1200px;

  /* Golden Ratio Typography & Spacing */
  --phi: 1.618;
  --space-unit: 1rem;

  /* Spacing Scale */
  --space-xs: calc(var(--space-unit) / var(--phi));
  /* ~0.618rem */
  --space-sm: var(--space-unit);
  /* 1rem */
  --space-md: calc(var(--space-unit) * var(--phi));
  /* ~1.618rem */
  --space-lg: calc(var(--space-md) * var(--phi));
  /* ~2.618rem */
  --space-xl: calc(var(--space-lg) * var(--phi));
  /* ~4.236rem */
  --space-xxl: calc(var(--space-xl) * var(--phi));
  /* ~6.854rem */
  --space-huge: calc(var(--space-xxl) * var(--phi));
  /* ~11.09rem */

  /* Typography Scale */
  --font-base: 1.125rem;
  /* 18px for better readability */
  --text-xs: calc(var(--font-base) / var(--phi));
  --text-sm: var(--font-base);
  --text-md: calc(var(--font-base) * var(--phi));
  /* ~1.82rem */
  --text-lg: calc(var(--text-md) * var(--phi));
  /* ~2.94rem */
  --text-xl: calc(var(--text-lg) * var(--phi));
  /* ~4.76rem */
  --text-xxl: calc(var(--text-xl) * var(--phi));
  /* ~7.7rem */
}

/* Golden Ratio Typography Overrides */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

html {
  font-size: 16px;
  /* Browser default base */
}

body {
  font-size: var(--text-sm);
  line-height: var(--phi);
  /* Golden Ratio Line Height */
}

h1,
.h1 {
  font-size: var(--text-xl) !important;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  margin-top: 0;
}

h2,
.h2 {
  font-size: var(--text-lg) !important;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  margin-top: var(--space-md);
}

h3,
.h3 {
  font-size: var(--text-md) !important;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-sm);
}

h4,
.h4 {
  font-size: calc(var(--text-md) * 0.8) !important;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

h5,
.h5 {
  font-size: var(--text-sm) !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

h6,
.h6 {
  font-size: var(--text-xs) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

p {
  margin-bottom: var(--space-md);
}

/* Mobile Typography Adjustments */
@media (max-width: 991px) {

  h1,
  .h1 {
    font-size: calc(var(--text-xl) * 0.8) !important;
  }

  h2,
  .h2 {
    font-size: calc(var(--text-lg) * 0.9) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --font-base: 1rem;
  }

  h1,
  .h1 {
    font-size: calc(var(--text-xl) * 0.7) !important;
  }

  h2,
  .h2 {
    font-size: calc(var(--text-lg) * 0.8) !important;
  }
}

@media (max-width: 480px) {
  .sexy-heading {
    font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
  }

  .hero-heading {
    font-size: 2rem !important;
  }
}

/* Golden Ratio Layout Overrides */
.section {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
  position: relative;
  z-index: 5;
  /* Ensure content is always above particles (z-1) */
}

.container,
.w-container {
  max-width: 1200px;
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}

/* Golden Ratio Spacing Utilities */
/* Golden Ratio Spacing Utilities */
.section-spacing {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
  z-index: 2;
}

/* Premium Dark Backgrounds */
.bg-tech-mesh {
  background-color: #050508;
  background-image:
    radial-gradient(at 0% 0%, rgba(1, 228, 228, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(0, 255, 102, 0.08) 0px, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

/* Subtle overlay vignetting */
.bg-tech-mesh::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, transparent 0%, #050505 120%);
  pointer-events: none;
}

.gap-phi {
  gap: var(--space-md);
}

/* ============================================
   INFINITE SCROLLING MARQUEE
   ============================================ */
.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  padding: var(--space-md) 0;
}

.marquee-content {
  display: flex;
  gap: var(--space-xl);
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 2.5rem;
  /* Icon size */
  transition: all 0.3s ease;
  opacity: 0.6;
}

.marquee-item:hover {
  color: var(--color-primary);
  opacity: 1;
  transform: scale(1.1);
  text-shadow: var(--glow-primary);
}

.marquee-item i {
  margin-right: 10px;
}

.marquee-item span {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ============================================
   CLIENT LOGO MARQUEE
   ============================================ */
.client-marquee {
  margin-top: var(--space-lg);
}

.client-logo {
  padding: 0 var(--space-lg);
}

.client-logo-img {
  height: 50px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.7);
  opacity: 0.5;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-logo:hover .client-logo-img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .client-logo-img {
    height: 35px;
    max-width: 100px;
  }

  .client-logo {
    padding: 0 var(--space-md);
  }
}



/* ============================================
   SEXY HEADERS (High Impact)
   ============================================ */

/* Skewed Cyber Tag - Dynamic & Modern */
.section-tag {
  /* Layout & Position */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;

  /* Reset */
  border: none;
  background: none;
  clip-path: none;

  /* Cyber Shape */
  transform: skewX(-15deg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #00ff66;
  /* Neon Green Accent */

  /* Glass Effect */
  backdrop-filter: blur(5px);
  padding: 10px 24px;

  /* Transitions */
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

/* Base Text Reset - IMPORTANT: Counter-skew the text so it's upright */
.section-tag span,
.section-tag {
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
}

/* Inner Text Wrapper (if exists) or direct text treatment */
/* We need to ensure the text itself isn't skewed if it's a direct child text node...
   CSS can't unskew text node directly. 
   So we'll use a ::before pseudo-element for the background instead to keep text straight.
*/

/* Re-definition for Non-Skewed Text Strategy */
.section-tag {
  display: inline-flex;
  position: relative;
  z-index: 1;
  padding: 10px 28px;
  margin-bottom: 24px;

  /* Typography */
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #fff;

  /* Reset transforms */
  transform: none;
  border: none;
  background: none;
}

/* Skewed Background & Border */
.section-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

  /* The Shape */
  transform: skewX(-15deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #01e4e4;
  /* Cyan Accent */

  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Status Indicator (Optional, if we want extra tech feel) */
.section-tag::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 4px;
  height: 4px;
  background: #01e4e4;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  box-shadow: 0 0 5px #01e4e4;
}

/* Hover Effects */
.section-tag:hover {
  color: #01e4e4;
  text-shadow: 0 0 8px rgba(1, 228, 228, 0.4);
}

.section-tag:hover::before {
  border-color: #01e4e4;
  background: rgba(1, 228, 228, 0.1);
  box-shadow:
    0 0 20px rgba(1, 228, 228, 0.15),
    inset 0 0 10px rgba(1, 228, 228, 0.05);
  transform: skewX(-15deg) scale(1.05);
  /* Slight pop */
}

.section-tag:hover::after {
  background: #00ff66;
  /* Dot turns green on hover */
  box-shadow: 0 0 8px #00ff66;
  opacity: 1;
}

/* Base Text */
.actual-text {
  position: relative;
}

/* Hover Overlay Text */
.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
  white-space: nowrap;
  /* Prevent wrapping */
}

/* Hover State */
.section-tag:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color));
}

.sexy-heading,
.apple-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  /* Bolder */
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  /* Larger */
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-md);

  /* Deep Metallic Gradient */
  background: linear-gradient(180deg, #ffffff 0%, #b0b0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Stronger Drop Shadow for Depth */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.sexy-heading .highlight,
.apple-heading .highlight {
  /* Neon Gradient */
  display: inline;
  background: linear-gradient(90deg, #00ff66, #01e4e4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Removed italic - was causing clipping */
  /* Use filter for glow since text-shadow doesn't work with transparent fill */
  filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.6));
}

/* ============================================
   PREMIUM NAVIGATION BAR (Floating Glass Pill)
   ============================================ */
.navigation-bar,
.navigation-bar.w-nav {
  position: sticky !important;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  z-index: 999999 !important;

  /* Glassmorphism */
  background: rgba(10, 10, 15, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* Premium Border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;

  /* Glow Effect */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(1, 228, 228, 0.03);

  padding: 12px 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation-bar:hover {
  border-color: rgba(1, 228, 228, 0.15);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(1, 228, 228, 0.08);
}

/* Navigation Links */
.navigation-link.w-nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.navigation-link.w-nav-link:hover,
.navigation-link.w-nav-link.w--current {
  color: #fff;
  background: rgba(1, 228, 228, 0.1);
  text-shadow: 0 0 10px rgba(1, 228, 228, 0.5);
}

/* Logo Enhancement */
.logo.f-logo {
  filter: drop-shadow(0 0 8px rgba(1, 228, 228, 0.3));
}

/* Fix inner rectangle - make container transparent */
.nav-cont,
.nav-cont.w-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mobile Menu Overlay */
@media (max-width: 991px) {
  .w-nav-menu {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    height: 100vh;
    /* Full screen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
  }

  /* Make links large and centered */
  .navigation-link.w-nav-link {
    font-size: 1.5rem;
    padding: 20px !important;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .navigation-link.w-nav-link:hover {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Hamburger Icon */
.hamburger-button {
  padding: 10px;
}

.hamburger-button .w-icon-nav-menu {
  font-size: 32px;
  color: var(--color-primary);
}

/* ============================================
   TESTIMONIALS (Fixed Overflow)
   ============================================ */
.testimonial-section {
  position: relative;
  overflow: hidden;
}

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 5vw;
  overflow: hidden;
}

.testimonial-card {
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--glass-border-radius);
  padding: var(--space-lg);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1023px) {
  .testimonial-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonial-track {
    grid-template-columns: 1fr;
  }
}


/* 3D Space - Applied locally to specific elements, NOT body */
/* NOTE: perspective on body breaks position:fixed elements like the custom cursor */
body {
  /* perspective removed - was breaking fixed positioning for cursor */
  overflow-x: hidden;
  /* Prevent horizontal scroll from 3D rotation */
}


/* Navbar Fixes */
/* Navbar Fixes - Floating Glass Pill */
/* Navigation Bar - Floating Glass Pill - V2 ENHANCED */
.navigation-bar,
.w-nav {
  z-index: 9999 !important;
  position: sticky !important;
  top: 20px;
  margin: 0 auto;
  width: 95%;
  /* Wider pill */
  max-width: 1300px;

  /* Frostier Glass */
  background: rgba(18, 18, 22, 0.6) !important;
  /* Slightly lighter for contrast */
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);

  /* Dynamic Border Gradient (Simulated via box-shadow/border) */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  /* Stronger highlight */
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 100px;

  padding: 10px 30px;
  height: auto !important;
  min-height: 80px;
  /* Taller for presence */

  /* Sexy Glow */
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 30px rgba(1, 228, 228, 0.08);
  /* Stronger Cyan Glow */

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Flex Config - Note: Flex usually goes on container, but ensuring wrapper behaves */
  display: block;
}

/* Inner Container Layout Fix */
.nav-cont,
.w-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
}

.navigation-bar:hover {
  background: rgba(25, 25, 30, 0.7) !important;
  border-top-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 25px 50px -10px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(1, 228, 228, 0.15);
}

/* Scrolled state (optional, can be handled via JS adding a class) */
.navigation-bar.scrolled {
  background: rgba(5, 5, 5, 0.6) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
}

.navigation-items,
.navigation-wrap,
.w-nav-brand,
.w-nav-menu {
  overflow: visible !important;
}

/* Dropdown Menu Styles */
.w-dropdown {
  display: inline-block;
}

.w-dropdown-toggle {
  padding-right: 40px;
}

.w-dropdown-list {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(1, 228, 228, 0.2);
  border-top: 1px solid rgba(1, 228, 228, 0.4);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 16px;
  margin-top: 5px;
  /* Reduced gap for easier hover transition */
  min-width: 240px;
  padding: 10px 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(1, 228, 228, 0.05);
  overflow: visible;
  /* Allow pseudo-element bridge to extend beyond */
}

.w-dropdown-link {
  color: #fff !important;
  padding: 12px 24px;
  display: block;
  transition: all 0.25s ease;
  font-weight: 500;
}

.w-dropdown-link:hover {
  background: var(--color-primary) !important;
  color: #000 !important;
  font-weight: 600;
}

/* ============================================
   NAVIGATION V2 - PREMIUM REDESIGN
   ============================================ */

/* Navbar Container */
.navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.4s ease;
  padding: 15px 0;
  border-bottom: 1px solid transparent;
}

.navigation-bar.scrolled {
  background: rgba(5, 5, 8, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nav-cont {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: auto;
}

/* Logo */
.logo.f-logo {
  flex: 0 0 auto;
  width: 180px !important;
  height: 60px !important;
  background-image: url('../images/350-x-375-You-see-360-logo-white-for-black-bg-1.png') !important;
  background-size: contain !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  transition: transform 0.3s ease;
}

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

/* Desktop Menu */
.w-nav-menu {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Navigation Links */
.w-nav-link {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 18px !important;
  margin: 0 2px;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  background: transparent;
  border: 1px solid transparent;
}

.w-nav-link:hover,
.w-nav-link.w--current {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.w-nav-link.w--current {
  background: rgba(1, 228, 228, 0.15);
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  box-shadow: 0 0 20px rgba(1, 228, 228, 0.2);
}

/* Dropdowns */
.w-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.w-dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-right: 18px !important;
  /* Override webflow default padding properly */
}

.w-icon-dropdown-toggle {
  margin: 0 !important;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

.w-dropdown:hover .w-icon-dropdown-toggle {
  transform: rotate(180deg);
}

/* Dropdown List - Premium Glass Card */
.w-dropdown-list {
  display: block;
  /* We handle visibility via opacity/transform in JS usually, or hover css */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  min-width: 260px;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1100;
  margin-top: 15px;
}

/* Showing dropdown (handled by hover or class) */
.w-dropdown:hover .w-dropdown-list,
.w-dropdown-list.w--open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Dropdown item links */
.w-dropdown-link {
  display: block;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: left;
  /* Reset alignment */
}

.w-dropdown-link:hover {
  background: var(--color-primary);
  color: #000 !important;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(1, 228, 228, 0.3);
}

/* Hamburger */
.w-nav-button {
  display: none;
  /* Desktop default */
  font-size: 24px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

.hamburger-button {
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.hamburger-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   MOBILE NAVIGATION (Max Width 991px)
   ============================================ */
@media (max-width: 991px) {
  .logo.f-logo {
    width: 140px !important;
    height: 50px !important;
  }

  .w-nav-button {
    display: flex !important;
    /* Show hamburger */
  }

  /* Full Screen Overlay Style */
  .w-nav-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    background: rgba(5, 5, 8, 0.96) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    justify-content: center;
    padding: 80px 20px 40px;
    z-index: 999;
    /* Below nav bar but above content */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    box-sizing: border-box;
    overflow-y: auto;
    /* Scrollable if tall */
  }

  .w-nav-menu[data-nav-menu-open] {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .w-nav-link {
    font-size: 1.5rem !important;
    /* Large tappable links */
    padding: 15px !important;
    width: 100%;
    text-align: center;
    border: none;
    background: transparent !important;
    margin-bottom: 5px;
  }

  .w-nav-link:hover {
    background: transparent !important;
    color: var(--color-primary) !important;
    transform: none;
    text-shadow: 0 0 20px var(--color-primary);
  }

  /* Mobile Dropdowns */
  .w-dropdown {
    width: 100%;
    flex-direction: column;
  }

  .w-dropdown-toggle {
    width: 100%;
    justify-content: center;
    font-size: 1.5rem !important;
    padding: 15px !important;
  }

  .w-dropdown-list {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.03);
    margin: 0 auto 20px;
    opacity: 1;
    /* Always visible if parent is open */
    display: none;
    /* JS toggles this */
  }

  .w-dropdown-list.w--open {
    display: block;
    animation: fadeInDown 0.3s ease;
  }

  .w-dropdown-link {
    font-size: 1.1rem;
    padding: 15px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
  }

  .w-dropdown-link:hover {
    background: transparent;
    color: #fff !important;
  }
}

/* ============================================
   NEW MOBILE OVERLAY (JS INJECTED)
   ============================================ */
#mobile-premium-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 5, 8, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 998;
  /* Just behind nav bar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px 40px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#mobile-premium-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-container {
  width: 100%;
  max-width: 400px;
  height: 100%;
  overflow-y: auto;
  /* Allow scrolling if content is tall */
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Hide scrollbar */
  scrollbar-width: none;
}

.mobile-menu-container::-webkit-scrollbar {
  display: none;
}

/* Links */
.mobile-main-link,
.mobile-group-header {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 15px;
  text-align: center;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;

  /* Initial State for Animation */
  opacity: 0;
  transform: translateY(20px);
}

.mobile-main-link.animate-in,
.mobile-link-group.animate-in .mobile-group-header {
  animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Hover/Active States */
.mobile-main-link:hover,
.mobile-group-header:hover,
.mobile-group-header.active {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.03);
}

/* Accordion Header */
.mobile-group-header {
  display: flex;
  justify-content: center;
  /* Center text */
  align-items: center;
  gap: 10px;
  position: relative;
}

.mobile-group-header i {
  font-size: 1rem;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.mobile-group-header.active i {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Submenu List */
.mobile-sub-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  margin: 0 10px;
}

.mobile-sub-link {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-sub-link:last-child {
  border-bottom: none;
}

.mobile-sub-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* CTA Button */
.mobile-cta-btn {
  margin-top: 20px;
  background: var(--color-primary);
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  padding: 18px 30px;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(1, 228, 228, 0.3);

  opacity: 0;
  transform: translateY(20px);
}

.mobile-cta-btn.animate-in {
  animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure Webflow default menu is hidden on mobile now */
@media (max-width: 991px) {
  .w-nav-menu {
    display: none !important;
  }
}

/* Ensure Logo is visible on mobile */
@media (max-width: 479px) {
  .logo.f-logo {
    width: 120px !important;
  }
}


/* Base Overrides */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-dark-bg);
  color: var(--color-text-main);
  font-family: 'Montserrat', sans-serif;
  height: 100%;
  min-height: 100%;
  margin: 0;
  position: relative;
}

/* Cinematic Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Container Heights */
.container,
.container-2,
.container-3,
.container-4,
.container-5,
.w-container {
  height: 100% !important;
  min-height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-main);
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Utility Classes */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-highlight {
  color: var(--color-secondary);
}

/* Alias for compatibility */

.glass-panel {
  background: var(--color-glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--glass-border-radius);
  box-shadow: var(--shadow-card);
}

/* Glass Card Utility */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-primary);
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), var(--glow-primary);
}

/* 3D About Page Specifics */
.about-hero-3d {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0a0a15 0%, #050505 100%);
}

#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

.floating-text {
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.parallax-text-section {
  position: relative;
  z-index: 20;
  margin-top: -10vh;
  padding-bottom: 100px;
}

.neon-border {
  border: 1px solid var(--color-primary);
  box-shadow: var(--glow-primary);
}

.neon-border:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--glow-secondary);
}

.apple-heading {
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Section Tag Refined */


/* Hero Section (Immersive) */
.hero-section {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  /* Local perspective for hero 3D */
}

.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 20px;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  /* Smooth follow */
}

.hero-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 20px rgba(1, 228, 228, 0.5);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards 0.5s;
}

.hero-subheading {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards 0.8s;
}

/* Service Page Hero - Reduced height */
.hero-section[data-service] {
  height: auto;
  min-height: 50vh;
  padding: 120px 0 80px;
}

.hero-section[data-service] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Fix parallax container for service pages */
.parallax-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.3;
}

.parallax-bg {
  max-width: 300px;
  height: auto;
}

/* Center the hero content */
.hero-section .centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-buttons {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards 1.1s;
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.btn-primary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: var(--color-primary);
  color: #000;
  box-shadow: 0 0 20px rgba(1, 228, 228, 0.6);
}

.btn-hollow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-hollow:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.highlight {
  color: var(--color-primary);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typing Effect Cursor */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: var(--color-secondary);
  animation: blink 1s infinite;
  vertical-align: middle;
  margin-left: 5px;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Mouse Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  z-index: 100;
  /* Increased to be above sections */
  opacity: 1;
  /* Visible by default */
  animation: fadeInUp 1s ease-out forwards 1.5s, pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(1, 228, 228, 0.2);
  }

  50% {
    box-shadow: 0 0 20px rgba(1, 228, 228, 0.5);
  }
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% {
    top: 10px;
    opacity: 1;
  }

  100% {
    top: 30px;
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .hero-heading {
    font-size: var(--text-lg);
  }
}

/* Section Styling */
.section {
  width: 100%;
  padding: var(--space-xl) var(--space-md);
  box-sizing: border-box;
  background: transparent;
  position: relative;
  /* Removed overflow: hidden - was causing fixed elements to get stuck */
}

.section.bg-dark {
  background: var(--color-dark-bg);
}

.section.bg-glass {
  background: radial-gradient(circle at top right, rgba(1, 228, 228, 0.1), transparent 40%),
    radial-gradient(circle at bottom left, rgba(0, 255, 102, 0.05), transparent 40%);
}

.section.bg-light {
  background: #0f0f12;
}

/* Modern Slider / Service Cards (Refactored from inline) */
.modern-services-slider-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  position: relative;
  overflow: hidden;
  display: block;
}

.modern-services-slider {
  display: flex;
  transition: transform 0.5s ease;
  gap: var(--space-md);
  margin: 0 auto;
  cursor: grab;
}

.modern-slide {
  flex: 0 0 calc(33.333% - 20px);
  min-width: 300px;
  padding: 0;
  box-sizing: border-box;
}

.modern-service-card {
  background-color: rgba(10, 10, 15, 0.6);
  border-radius: var(--glass-border-radius);
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
  transform-style: preserve-3d;
  /* Key for child elements popping up */
  transform: translateZ(0);
  /* Hardware accel */
}

/* Gradient Border Effect */
.modern-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--glass-border-radius);
  padding: 1px;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;
}

.modern-service-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  background: rgba(15, 20, 25, 0.8);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(1, 228, 228, 0.2);
}

.service-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  transition: all 0.35s ease;
  position: relative;
}

.modern-service-card:hover .service-icon-circle {
  background: rgba(1, 228, 228, 0.1);
  border-color: var(--color-primary);
  box-shadow: 0 0 25px rgba(1, 228, 228, 0.4);
}

/* REPLACING IMG WITH ICON STYLES */
.service-icon-circle i {
  font-size: 2.5rem;
  color: var(--color-text-main);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  transition: all 0.35s ease;
}

.modern-service-card:hover .service-icon-circle i {
  color: var(--color-primary);
  filter: drop-shadow(0 0 10px var(--color-primary));
  transform: translateZ(20px) scale(1.1);
  /* Pop out in 3D */
}

.service-title {
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  letter-spacing: 1px;
  transition: color 0.35s ease;
}

.modern-service-card:hover .service-title {
  color: var(--color-primary);
}

.service-description {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.slider-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-lg);
  gap: var(--space-md);
}

.slider-button {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.slider-button:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #000;
  box-shadow: var(--glow-secondary);
}

.slider-pagination {
  display: flex;
  gap: 10px;
}

.pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination-dot.active {
  background: var(--color-primary);
  box-shadow: var(--glow-primary);
}

/* Bento Grid for Industries */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-md);
  box-sizing: border-box;
  width: 100%;
}

/* Ensure parent sections allow overflow */
#Industries {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
}

#How {
  position: relative;
  z-index: 10;
  background: #0f0f12;
}

.bento-card {
  position: relative;
  background: rgba(20, 20, 25, 0.4);
  /* Darker glass */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Subtle border */
  border-radius: var(--glass-border-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bento-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  pointer-events: none;
}

.bento-card:hover {
  transform: translateY(-5px) scale(1.02);
  background: rgba(30, 30, 40, 0.6);
  border-color: var(--color-primary);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(1, 228, 228, 0.2);
}


.bento-card:hover .bento-icon-wrapper,
.bento-card:hover .bento-icon-wrapper i {
  color: var(--color-primary) !important;
  transform: translateZ(30px) scale(1.1);
  /* 3D Pop */
  text-shadow: 0 0 15px var(--color-primary);
}

.bento-card:hover .bento-title,
.bento-card:hover h3,
.bento-card:hover h4 {
  color: #fff !important;
}

.bento-card:hover .bento-description,
.bento-card:hover p {
  color: #ddd !important;
}

.bento-card.col-8 {
  grid-column: span 8;
}

.bento-card.col-6 {
  grid-column: span 6;
}

.bento-card.col-4 {
  grid-column: span 4;
}

.bento-card.col-12 {
  grid-column: span 12;
}

.bento-card.row-2 {
  grid-row: span 2;
}

.bento-icon-wrapper {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.5);
  /* Muted initial state */
  margin-bottom: var(--space-md);
  transition: all 0.3s ease;
}

.bento-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.bento-description {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Stats Styling (New High Tech) */
.bento-stat {
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  margin-bottom: 5px;
  font-family: 'Oswald', 'Montserrat', sans-serif;
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 0 15px rgba(1, 228, 228, 0.4));
}

/* Make stats look like digital counters */
.stat-item {
  text-align: center;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-secondary);
  text-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* Tech Certification Logos */
.slider-container img {
  filter: grayscale(100%) brightness(200%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.slider-container img:hover {
  filter: grayscale(0%) brightness(100%);
  opacity: 1;
}

/* Testimonials / Quotes (New High Tech) */
.testimonial-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  overflow: hidden;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1023px) {
  .testimonial-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonial-carousel {
    grid-template-columns: 1fr;
  }
}

.testimonial-item {
  background: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(10, 10, 15, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Glowing accent bar */
.testimonial-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent-pink));
  box-shadow: 0 0 15px var(--color-primary);
}

.testimonial-quote {
  font-size: 1.1rem;
  font-style: italic;
}

/* Hide testimonial images - removed as per request */
.testimonial-image {
  display: none !important;
}

/* Section standard */
.section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
  z-index: 2;
}

.testimonial-quote i {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.2);
  margin: 0 10px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-md);
}

.testimonial-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  padding: 2px;
}

.testimonial-author h4 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
}

.testimonial-author p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-primary);
}

/* Responsive */
@media (max-width: 991px) {
  .modern-slide {
    flex: 0 0 calc(50% - 20px);
  }

  /* Tablet: Allow 2 columns */
  .bento-card.col-4,
  .bento-card.col-6 {
    grid-column: span 6;
  }

  .bento-card.col-8,
  .bento-card.col-12 {
    grid-column: span 12;
  }
}

@media (max-width: 767px) {

  /* Mobile: Stack everything */
  .bento-card.col-4,
  .bento-card.col-6,
  .bento-card.col-8 {
    grid-column: span 12;
  }
}

@media (max-width: 767px) {
  .modern-slide {
    flex: 0 0 100%;
  }

  .testimonial-item {
    flex: 0 0 300px;
  }

  .hero-heading {
    font-size: var(--text-lg);
  }
}

/* Real Estate Specific Testimonial Tweaks */
.testimonial-item {
  display: flex;
  /* Change to flex for side-by-side if wide enough */
  flex-direction: column;
  gap: var(--space-md);
}

.testimonial-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.testimonial-item:hover .testimonial-image img {
  transform: scale(1.05);
}

.testimonial-stats {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.testimonial-stats .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

.testimonial-stats .stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Service Options Grid compatibility */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1023px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* FAQ Accordion */
.faq-section {
  padding: var(--space-xxl) 0;
  background: var(--color-dark-bg);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: var(--space-md);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--glass-border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #fff;
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
  color: var(--color-text-muted);
}

.faq-item.active .faq-answer {
  padding: 20px;
  padding-top: 0;
  max-height: 500px;
  /* Arbitrary large height */
}

.faq-icon {
  transition: transform 0.3s ease;
}

/* ============================================
   CUSTOM PROCESS TABS (Replaces Webflow)
   ============================================ */
.process-tabs {
  max-width: 1000px;
  margin: 0 auto;
}

.process-tab-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* High Tech Form Elements */
.glass-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(102, 204, 121, 0.2);
  outline: none;
}

.neon-border {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.neon-border:hover {
  box-shadow: 0 0 20px var(--color-primary), inset 0 0 10px var(--color-primary);
  border-color: var(--color-primary);
  text-shadow: 0 0 8px currentColor;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ============================================
   PREMIUM FOOTER STYLES
   ============================================ */
.footer {
  background: rgba(5, 5, 5, 0.95);
  /* Deep dark glass */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 80px 0 40px;
  position: relative;
  z-index: 10;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-column h4 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 12px;
}

.footer-column ul li a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-column ul li a:hover {
  color: var(--color-primary);
  transform: translateX(5px);
  text-shadow: 0 0 10px rgba(1, 228, 228, 0.4);
}

.footer-column p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: var(--color-primary);
  color: #000;
  box-shadow: 0 0 20px rgba(1, 228, 228, 0.5);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #fff;
}

/* Responsive Footer */
@media (max-width: 991px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer {
    padding: 60px 0 30px;
  }
}

/* ============================================
   TRUSTED BY SECTION
   ============================================ */
.trusted-by {
  padding: var(--space-lg) 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trusted-by h3 {
  font-size: var(--text-xs) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-weight: 500;
}

.brand-logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.brand-logo {
  height: 40px;
  width: auto;
  filter: grayscale(100%) brightness(180%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.brand-logo:hover {
  filter: grayscale(0%) brightness(100%);
  opacity: 1;
  transform: scale(1.1);
}

/* ============================================
   DROPDOWN ICON FIXES
   ============================================ */
.w-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.w-dropdown-toggle>div:first-child {
  padding-right: 4px;
}

.w-icon-dropdown-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 10px;
  height: 10px;
  color: var(--color-text-muted);
  transition: all 0.3s ease;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.w-dropdown:hover .w-icon-dropdown-toggle,
.w-dropdown.w--open .w-icon-dropdown-toggle {
  color: var(--color-primary);
  transform: rotate(180deg);
}

/* Ensure dropdown lists show correctly */
.w-dropdown:hover .w-dropdown-list,
.w-dropdown.w--open .w-dropdown-list {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  /* Show immediately on hover */
}

.w-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transition-delay: 0.3s;
  /* Wait 300ms before hiding - gives user time to move mouse */
  z-index: 9999;
  padding-top: 10px;
  /* Creates invisible bridge between toggle and dropdown */
  margin-top: 0;
  /* Remove gap to make hover area continuous */
}

/* Invisible bridge to maintain hover state between toggle and dropdown list */
.w-dropdown-list::before {
  content: '';
  position: absolute;
  top: -20px;
  /* Extend upward to overlap with toggle */
  left: 0;
  width: 100%;
  height: 30px;
  /* Tall enough to bridge the gap */
  background: transparent;
}

/* ============================================
   PROCESS TABS STYLING
   ============================================ */
.process-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.process-tab-btn:hover {
  background: rgba(1, 228, 228, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.process-tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  box-shadow: 0 0 20px rgba(1, 228, 228, 0.4);
}

.process-tab-panels {
  position: relative;
}

.process-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.process-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.process-tab-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--glass-border-radius);
  padding: var(--space-xl);
  align-items: center;
}

.process-tab-text {
  text-align: left;
}

.step-number {
  display: inline-block;
  background: var(--color-primary);
  color: #000;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.process-tab-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 40px rgba(1, 228, 228, 0.2);
}

@media (max-width: 768px) {
  .process-tab-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .process-tab-btn {
    width: 100%;
    text-align: center;
  }

  .process-tab-content {
    grid-template-columns: 1fr;
  }

  .process-tab-visual {
    order: -1;
    font-size: 4rem;
    margin-bottom: var(--space-md);
  }
}

/* ============================================
   MOBILE NAVIGATION FIXES
   ============================================ */
@media (max-width: 991px) {

  .navigation-bar,
  .w-nav {
    width: 100%;
    margin: 0;
    border-radius: 0;
    top: 0;
  }

  .navigation-menu {
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .w-dropdown {
    display: block;
    width: 100%;
  }

  .w-dropdown-toggle {
    width: 100%;
    padding: 15px;
  }

  .w-dropdown-list {
    position: static;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-top: 5px;
    display: none;
  }

  .w-dropdown.w--open .w-dropdown-list {
    display: block;
  }

  .hamburger-button {
    display: block !important;
  }
}

/* ============================================
   MOBILE STICKY CTA
   ============================================ */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary);
    color: #000;
    text-align: center;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 9998;
    text-decoration: none;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
  }
}

#future-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647;
  /* Max Z-Index */
  box-shadow: 0 0 10px #fff, 0 0 2px #000;
  /* Added black outline for visibility on white */
  transition: transform 0.1s;
  will-change: transform;
}

/* ============================================
   SERVICE OPTIONS SECTION
   ============================================ */
.service-options {
  background: #0a0a0f;
  padding: var(--space-xxl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.section-intro {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1023px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.benefit-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--glass-border-radius);
  padding: var(--space-lg);
  text-align: center;
  transition: all 0.4s ease;
}

.benefit-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary);
  transform: translateY(-5px);
}

.benefit-card .icon-container {
  width: 70px;
  height: 70px;
  margin: 0 auto var(--space-md);
  background: rgba(1, 228, 228, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-card .benefit-icon {
  font-size: 2rem;
  color: var(--color-primary);
}

.benefit-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: #fff;
}

.benefit-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Success Stories / Testimonials */
.success-stories {
  background: #0f0f12;
  padding: var(--space-xxl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.success-stories h2 {
  text-align: center;
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.success-stories .section-intro {
  margin-bottom: var(--space-xl);
}

/* Strategic Benefits */
.strategic-benefits {
  padding: var(--space-xxl) 0;
}

/* Industry Stats in Hero */
.industry-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

.industry-stats .stat-item {
  text-align: center;
}

.industry-stats .stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-secondary);
  text-shadow: 0 0 20px rgba(0, 255, 102, 0.3);
}

.industry-stats .stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .industry-stats {
    flex-direction: column;
    gap: var(--space-md);
  }

  .industry-stats .stat-number {
    font-size: 2.5rem;
  }
}

/* Challenge list styling */
.challenge-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.challenge-list li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

.challenge-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* Solution Benefit */
.solution-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.solution-benefit h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

/* ============================================
   VIRTUAL TOUR SECTION
   ============================================ */
.virtual-tour-section {
  background: linear-gradient(180deg, var(--color-dark-bg) 0%, rgba(10, 10, 20, 1) 100%);
}

.tour-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto var(--space-lg);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(1, 228, 228, 0.1);
  border: 1px solid rgba(1, 228, 228, 0.2);
}

/* Facade: Placeholder + Play Button */
.tour-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.tour-facade.loading {
  pointer-events: none;
}

.tour-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: filter 0.3s ease, transform 0.5s ease;
}

.tour-facade:hover .tour-placeholder {
  filter: brightness(0.5);
  transform: scale(1.02);
}

.tour-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(1, 228, 228, 0.2);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 3;
}

.tour-play-btn i {
  margin-left: 5px;
  /* Visual centering for play icon */
}

.tour-play-btn:hover {
  background: var(--color-primary);
  color: #000;
  box-shadow: 0 0 40px rgba(1, 228, 228, 0.6);
  transform: translate(-50%, -50%) scale(1.1);
}

.btn-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: ripple 2s infinite;
  pointer-events: none;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.tour-overlay-text {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
  z-index: 3;
  transition: opacity 0.3s ease;
}

.tour-facade:hover .tour-overlay-text {
  opacity: 1;
}

/* Iframe Container */
.tour-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tour-frame.active {
  opacity: 1;
  z-index: 3;
}

.tour-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Tour Caption */
.tour-caption {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: var(--space-md);
}

.tour-caption i {
  color: var(--color-primary);
  margin-right: 8px;
}

/* Tour CTA Buttons */
.tour-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.tour-cta .btn-hollow i {
  margin-right: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .tour-container {
    border-radius: 12px;
  }

  .tour-play-btn {
    width: 70px;
    height: 70px;
    font-size: 24px;
  }

  .tour-overlay-text {
    font-size: 0.9rem;
  }

  .tour-cta {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================
   HIGH-CONVERTING CONTACT FORM STYLES
   ============================================ */

/* Trust Signal Bar */
.form-trust-bar {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.trust-item i {
  color: var(--uc-green360, #23bad1);
  font-size: 18px;
}

/* Label Hints */
.label-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 10px;
}

/* Enhanced Checkbox Styles */
.cf-checkbox-field {
  transition: all 0.3s ease;
  border: 1px solid rgba(1, 228, 228, 0.3);
}

.cf-checkbox-field:hover {
  border-color: var(--uc-blue, #23bad1);
  background: rgba(35, 186, 209, 0.05);
  transform: translateY(-2px);
}

.cf-checkbox-field.selected,
.cf-checkbox-field:has(input:checked) {
  border-color: var(--uc-green360, #71d091) !important;
  background: linear-gradient(135deg, rgba(35, 186, 209, 0.15), rgba(113, 208, 145, 0.15)) !important;
  box-shadow: 0 0 15px rgba(35, 186, 209, 0.3);
}

/* Hide inner checkbox/radio indicator div - selection shown by parent container only */
.cf-checkbox-field .cf-checkbox,
.cf-checkbox-field .w-checkbox-input,
.cf-checkbox-field .w-radio-input {
  display: none !important;
}

/* Checkbox selection is indicated by highlight only - no checkmark icons */

/* Selected Services Counter */
.selected-services-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  padding: 12px 20px;
  background: rgba(35, 186, 209, 0.1);
  border: 1px solid rgba(35, 186, 209, 0.3);
  border-radius: 50px;
  color: var(--uc-blue, #23bad1);
  font-size: 14px;
  font-weight: 500;
  width: fit-content;
}

/* Email Field Wrapper */
.email-field-wrapper {
  position: relative;
}

.email-validation-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 18px;
}

/* Input Validation States */
.cf-contact-form-field.valid {
  border-color: var(--uc-green360, #71d091) !important;
}

.cf-contact-form-field.invalid {
  border-color: #ff5e69 !important;
}

/* Character Counter */
.char-counter {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Submit Wrapper */
.form-submit-wrapper {
  text-align: center;
  margin-top: 40px;
}

/* Premium Submit Button */
.premium-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 50px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  max-width: none;
  width: auto;
  min-width: 280px;
  height: auto;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient(90deg, var(--uc-blue, #23bad1), var(--uc-green360, #71d091));
  border: none;
  color: #fff;
}

.premium-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(35, 186, 209, 0.4);
}

.premium-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.premium-submit .btn-arrow {
  transition: transform 0.3s ease;
}

.premium-submit:hover .btn-arrow {
  transform: translateX(5px);
}

.premium-submit.loading {
  background-image: linear-gradient(90deg, #555, #666);
}

/* Submit Guarantee */
.submit-guarantee {
  margin-top: 15px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.submit-guarantee i {
  margin-right: 6px;
  color: var(--uc-green360, #71d091);
}

/* Enhanced Success Message */
.enhanced-success {
  background: linear-gradient(135deg, rgba(35, 186, 209, 0.95), rgba(113, 208, 145, 0.95)) !important;
  border-radius: 24px !important;
  padding: 60px 40px !important;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.success-content {
  color: #000;
}

.success-icon {
  font-size: 60px;
  color: #000;
  margin-bottom: 20px;
  animation: pulse 1.5s ease infinite;
}

.success-content h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
}

.success-content>p {
  font-size: 16px;
  margin-bottom: 30px;
  color: rgba(0, 0, 0, 0.8);
}

.success-details {
  text-align: left;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
  border-radius: 12px;
}

.success-details p {
  margin: 10px 0;
  font-size: 14px;
  color: #000;
  display: flex;
  align-items: center;
  gap: 10px;
}

.success-details i {
  width: 20px;
}

.success-details a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.enhanced-success.animate-in {
  animation: successSlideIn 0.5s ease forwards;
}

@keyframes successSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Error Message */
.enhanced-error {
  background: rgba(255, 94, 105, 0.15) !important;
  border: 1px solid rgba(255, 94, 105, 0.5) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  text-align: center;
  color: #fff !important;
}

.error-content i {
  font-size: 40px;
  color: #ff5e69;
  margin-bottom: 15px;
}

.error-content p {
  margin: 10px 0;
}

.error-help {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.error-help a {
  color: var(--uc-blue, #23bad1);
}

/* Main Contact Form Layout & Visibility Fixes */
.cf-fields-contain {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  margin-bottom: 24px;
  width: 100%;
}

/* ============================================
   ROTATING GLOW INPUT EFFECT
   ============================================ */
.glow-input {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  /* Ensure full height */
  justify-content: center;
  overflow: visible !important;
  /* Prevent clipping of glow/border */
  isolation: isolate;
  /* Create new stacking context */
  border-radius: 12px;
  /* Match radius */
}

/* The rotating gradient border container */
.glow-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  /* Match input radius exactly */
  overflow: hidden;
  /* Clip the rotating gradient to the border shape */
  z-index: 1;
  /* Sit behind input but above mask padding logic */
  opacity: 1;
  /* Always visible for base state */
  /* Base border visible when not hovering */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* The rotating gradient element */
.glow-border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 1500px;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
      #01e4e4 0%,
      #00ff66 25%,
      #01e4e4 50%,
      #00ff66 75%,
      #01e4e4 100%);
  transition: opacity 0.4s ease;
  opacity: 0;
  /* Hidden by default */
  z-index: -1;
}

/* Hover state - show gradient */
.glow-input:hover .glow-border::before {
  opacity: 0.6;
  animation: borderRotate 4s linear infinite;
}

.glow-input:hover .glow-border {
  border-color: transparent;
  /* Hide base border when glowing */
}

/* Focus state - bright gradient */
.glow-input:focus-within .glow-border::before {
  opacity: 1;
  animation: borderRotate 3s linear infinite;
}

.glow-input:focus-within .glow-border {
  border-color: transparent;
}

@keyframes borderRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Inner mask (Background) */
.glow-input::after {
  content: "";
  position: absolute;
  inset: 2px;
  /* Creates the border width */
  background: #010205;
  border-radius: 10px;
  /* Slightly smaller radius for inner mask */
  z-index: 2;
  pointer-events: none;
}

/* Outer glow blur effect (The fuzzy glow outside) */
.glow-input:focus-within::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: inherit;
  /* Fallback */
  background: linear-gradient(45deg, #01e4e4, #00ff66);
  filter: blur(15px);
  border-radius: 16px;
  z-index: -1;
  /* Behind everything */
  opacity: 0.4;
}

/* Textarea variant */
.glow-input-textarea {
  width: 100%;
}

.glow-input-textarea::after {
  inset: 2px;
}

/* Premium Glowing Input Wrapper - The Input Itself */
.cf-contact-form-field {
  height: 56px !important;
  padding: 14px 20px !important;
  background: transparent !important;
  /* MUST be transparent to show glow */
  border: none !important;
  border-radius: 12px;
  color: #fff !important;
  width: 100%;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  font-size: 16px;
  position: relative;
  z-index: 2;
  /* Sits on top of the mask */
  transition: all 0.4s ease;
}

/* Glowing Border Container - applies to wrapper divs */
.cf-fields-contain>input,
.cf-fields-contain>.email-field-wrapper,
.cf-fields-contain>div {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Premium Input Field Base Styles with Animated Glow */
.cf-contact-form-field {
  background: rgba(5, 5, 12, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px;
  color: #fff !important;
  font-size: 16px;
  transition: all 0.3s ease;
}

.cf-contact-form-field:hover {
  background: transparent !important;
  border: none !important;
}

.cf-contact-form-field:focus {
  outline: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fix Autocomplete Background to match */
.cf-contact-form-field:-webkit-autofill,
.cf-contact-form-field:-webkit-autofill:hover,
.cf-contact-form-field:-webkit-autofill:focus,
.cf-contact-form-field:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #010205 inset !important;
  -webkit-text-fill-color: white !important;
  z-index: 3;
  transition: background-color 5000s ease-in-out 0s;
}

.cf-contact-form-field::placeholder {
  color: rgba(160, 160, 175, 0.5) !important;
  font-weight: 400;
}

/* Textarea specific */
.cf-contact-form-field.message {
  height: 120px !important;
  resize: none;
  padding-bottom: 30px !important;
}

/* Ensure email wrapper takes full width available in flex container */
.email-field-wrapper {
  flex: 1;
  width: auto;
  /* Let flex handle width */
  min-width: 0;
}

/* Specific fix for the inputs inside the flex container to ensure strict 50/50 split or equal share */
.cf-fields-contain>input,
.cf-fields-contain>.email-field-wrapper {
  flex: 1 !important;
  width: 50% !important;
  /* Fallback/Constraint */
}

@media (max-width: 768px) {
  .form-trust-bar {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .trust-item {
    font-size: 13px;
  }

  .cf-checkbox-container {
    gap: 10px;
  }

  .cf-checkbox-field {
    padding: 12px 20px;
  }

  .cf-contact-form-field {
    height: 56px;
    font-size: 16px;
    padding: 16px 20px;
  }

  .cf-contact-form-field.message {
    height: 140px;
  }

  .premium-submit {
    width: 100%;
    min-width: unset;
    padding: 16px 30px;
    font-size: 16px;
  }

  .enhanced-success {
    padding: 40px 25px !important;
  }

  .success-icon {
    font-size: 50px;
  }

  .success-content h3 {
    font-size: 24px;
  }

  .success-details {
    padding: 15px 20px;
  }
}

/* ============================================
   CONTACT MODAL STYLES
   ============================================ */

/* Modal Overlay */
.contact-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}

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

/* Modal Container */
.contact-modal {
  background: rgba(15, 15, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 40px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(1, 228, 228, 0.1);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Scrollbar styling for modal */
.contact-modal::-webkit-scrollbar {
  width: 6px;
}

.contact-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.contact-modal::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}

/* Close Button */
.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  transform: rotate(90deg);
}

/* Modal Header */
.modal-header {
  text-align: center;
  margin-bottom: 30px;
}

.modal-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #fff;
}

.modal-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin: 0;
}

/* Trust Bar */
.modal-trust-bar {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 15px;
  background: rgba(102, 204, 121, 0.1);
  border: 1px solid rgba(102, 204, 121, 0.2);
  border-radius: 12px;
  flex-wrap: wrap;
}

.modal-trust-bar .trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.modal-trust-bar .trust-item i {
  color: var(--uc-green360, #66cc79);
}

/* Form Sections */
.modal-form-section {
  margin-bottom: 25px;
}

.modal-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 15px;
}

.modal-section-label i {
  color: var(--uc-green360, #66cc79);
}

.modal-section-label .label-hint {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
}

/* Checkbox Grid */
.modal-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.modal-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.modal-checkbox:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.modal-checkbox.checked,
.modal-checkbox:has(input:checked) {
  background: linear-gradient(135deg, rgba(35, 186, 209, 0.15), rgba(113, 208, 145, 0.15));
  border-color: var(--uc-green360, #66cc79);
  box-shadow: 0 0 15px rgba(35, 186, 209, 0.3);
}

.modal-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox custom indicator removed - using highlight-only selection style */
.checkbox-custom {
  display: none;
  /* Hidden - selection indicated by container highlight only */
}

.checkbox-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* Form Inputs */
.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.modal-input,
.modal-textarea {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.modal-input:focus,
.modal-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 15px rgba(1, 228, 228, 0.15);
}

.modal-input::placeholder,
.modal-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

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

/* Radio Grid (Budget) */
.modal-radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modal-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.modal-radio:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.modal-radio:has(input:checked) {
  background: linear-gradient(135deg, rgba(35, 186, 209, 0.15), rgba(113, 208, 145, 0.15));
  border-color: var(--uc-green360, #66cc79);
  box-shadow: 0 0 15px rgba(35, 186, 209, 0.3);
}

.modal-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Radio custom indicator removed - using highlight-only selection style */
.radio-custom {
  display: none;
  /* Hidden - selection indicated by container highlight only */
}

.radio-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* Submit Button */
.modal-submit-wrapper {
  text-align: center;
  margin-top: 30px;
}

.modal-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 50px;
  background: linear-gradient(135deg, var(--uc-green360, #66cc79), #4db366);
  border: none;
  border-radius: 50px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.modal-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 204, 121, 0.4);
}

.modal-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.modal-submit-btn .btn-arrow {
  transition: transform 0.3s ease;
}

.modal-submit-btn:hover .btn-arrow {
  transform: translateX(5px);
}

.modal-guarantee {
  margin-top: 15px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.modal-guarantee i {
  margin-right: 5px;
  color: var(--uc-green360, #66cc79);
}

/* Success Message */
.modal-success {
  text-align: center;
  padding: 40px 20px;
  animation: modalFadeIn 0.4s ease forwards;
}

.modal-success .success-icon {
  font-size: 60px;
  color: var(--uc-green360, #66cc79);
  margin-bottom: 20px;
}

.modal-success h3 {
  font-size: 28px;
  margin: 0 0 10px 0;
  color: #fff;
}

.modal-success p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 25px;
}

.modal-success .success-details {
  background: rgba(102, 204, 121, 0.1);
  border: 1px solid rgba(102, 204, 121, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
}

.modal-success .success-details p {
  margin: 10px 0;
  font-size: 14px;
}

.modal-success .success-details i {
  color: var(--uc-green360, #66cc79);
  margin-right: 8px;
}

.modal-close-success {
  padding: 14px 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close-success:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Error Message */
.modal-error {
  text-align: center;
  padding: 40px 20px;
  animation: modalFadeIn 0.4s ease forwards;
}

.modal-error .error-icon {
  font-size: 50px;
  color: #ff5e69;
  margin-bottom: 20px;
}

.modal-error p {
  color: rgba(255, 255, 255, 0.8);
  margin: 10px 0;
}

.modal-error .error-help {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.modal-error .error-help a {
  color: var(--color-primary);
}

.modal-retry-btn {
  margin-top: 20px;
  padding: 14px 40px;
  background: var(--color-primary);
  border: none;
  border-radius: 50px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(1, 228, 228, 0.3);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Responsive Styles */
@media (max-width: 768px) {
  .contact-modal {
    padding: 30px 20px;
    max-height: 95vh;
  }

  .modal-title {
    font-size: 22px;
    padding-right: 40px;
  }

  .modal-trust-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .modal-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .modal-form-row {
    grid-template-columns: 1fr;
  }

  .modal-radio-grid {
    flex-direction: column;
  }

  .modal-submit-btn {
    width: 100%;
    padding: 16px 30px;
  }

  .modal-close-btn {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-float i {
  color: #fff;
  font-size: 28px;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  animation: whatsapp-pulse 2s infinite;
  z-index: -1;
}

@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translateX(10px);
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
  }

  .whatsapp-float i {
    font-size: 24px;
  }

  .whatsapp-tooltip {
    display: none;
  }
}

/* ============================================
   CONTACT FORM FIXES
   ============================================ */

/* Service & Budget Selection Highlighting */
.cf-checkbox-field {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  /* Ensure comfortably clickable area */
  background: rgba(255, 255, 255, 0.02);
  /* Subtle pill background */
}

.cf-checkbox-field:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(1, 228, 228, 0.5);
}

.cf-checkbox-field.selected {
  background-color: rgba(1, 228, 228, 0.15) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 15px rgba(1, 228, 228, 0.2);
}

.cf-checkbox-field.selected .cf-checkbox-label {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(1, 228, 228, 0.5);
}

/* Fix Input Field Legibility */
.cf-contact-form-field {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease;
}

.cf-contact-form-field:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--color-primary) !important;
  outline: none;
  box-shadow: 0 0 10px rgba(1, 228, 228, 0.2);
}

.cf-contact-form-field::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix Autocomplete Background (Chrome/Edge) */
.cf-contact-form-field:-webkit-autofill,
.cf-contact-form-field:-webkit-autofill:hover,
.cf-contact-form-field:-webkit-autofill:focus,
.cf-contact-form-field:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0a0a10 inset !important;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   ACCESSIBILITY: Skip to Content Link
   ============================================ */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #000;
  padding: 12px 24px;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  z-index: 9999999;
  transition: top 0.3s ease;
  text-decoration: none;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ============================================
   FAQ SECTION STYLES
   ============================================ */
.faq-section {
  padding: var(--space-xl) 0;
  background: linear-gradient(180deg, #0a0a0f 0%, #050505 100%);
}

.faq-grid {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(1, 228, 228, 0.3);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question i {
  font-size: 0.9rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer-content {
  padding: 0 28px 24px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

/* ============================================
   SOCIAL PROOF COUNTERS
   ============================================ */
.social-proof-bar {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 40px 20px;
  background: rgba(1, 228, 228, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.proof-item {
  text-align: center;
}

.proof-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.proof-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .social-proof-bar {
    gap: 30px;
  }

  .proof-number {
    font-size: 2rem;
  }
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb-nav {
  padding: 16px 0;
  background: rgba(10, 10, 15, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-list li::after {
  content: '/';
  color: rgba(255, 255, 255, 0.3);
  margin-left: 4px;
}

.breadcrumb-list li:last-child::after {
  display: none;
}

.breadcrumb-list li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-list li a:hover {
  color: var(--color-primary);
}

.breadcrumb-list li:last-child span {
  color: var(--color-primary);
}



/* ============================================
   SAFETY VISUALIZATION & MOBILE TEXT FIXES
   ============================================ */
@media (max-width: 480px) {

  /* Fix Safety Visualization Box */
  .solution-benefit {
    padding: 15px !important;
    width: 100%;
    box-sizing: border-box;
  }

  .solution-benefit h3 {
    font-size: 1.1rem !important;
    /* Smaller size for mobile */
    line-height: 1.3;
    margin-bottom: 10px;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Specific fix for "Safety Visualization" if it breaks awkwardly */
  .solution-benefit h3:contains("Safety Visualization") {
    font-size: 1rem !important;
  }

  /* Ensure Bento content doesn't overflow */
  .bento-card {
    padding: var(--space-md) !important;
  }

  .bento-description {
    font-size: 0.9rem !important;
  }
}

/* ============================================
   CROSS-DEVICE UX/UI FIXES (2026)
   ============================================ */

/* === 1. ACCESSIBILITY: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 2. MODERN VIEWPORT HEIGHT (Mobile Safari Fix) === */
.hero-section {
  height: 100vh;
  height: 100dvh;
  /* Dynamic viewport height - respects mobile browser chrome */
}

#mobile-premium-overlay {
  height: 100vh;
  height: 100dvh;
}

.w-nav-menu {
  height: 100vh;
  height: 100dvh;
}

/* === 3. BROWSER-SPECIFIC FIXES === */

/* Safari Flexbox Fix */
@supports (-webkit-touch-callout: none) {
  .hero-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .bento-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: grid;
  }
}

/* Firefox Backdrop Filter Fallback */
@supports not (backdrop-filter: blur(20px)) {

  .navigation-bar,
  .w-dropdown-list,
  #mobile-premium-overlay,
  .w-nav-menu {
    background: rgba(5, 5, 8, 0.98) !important;
  }

  .glass-panel,
  .glass-card {
    background: rgba(20, 20, 25, 0.95) !important;
  }
}

/* === 4. FORM AUTOFILL VISIBILITY (All Browsers) === */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgba(10, 10, 15, 0.95) inset !important;
  -webkit-text-fill-color: white !important;
  caret-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox autofill */
@-moz-document url-prefix() {

  input:-moz-autofill,
  textarea:-moz-autofill,
  select:-moz-autofill {
    background-color: rgba(10, 10, 15, 0.95) !important;
    color: white !important;
  }
}

/* === 5. SLIDER TOUCH IMPROVEMENTS === */
.modern-services-slider {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

@media (pointer: coarse) {
  .modern-services-slider {
    scroll-snap-type: x mandatory;
  }

  .modern-slide {
    scroll-snap-align: start;
  }
}

/* === 6. TOUCH TARGET FIXES (44px minimum) === */
@media (max-width: 767px) {
  .faq-question {
    min-height: 48px;
    padding: 16px 20px;
  }

  .slider-button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 24px;
  }

  .pagination-dot {
    width: 14px;
    height: 14px;
    padding: 8px;
    box-sizing: content-box;
  }

  .btn-primary,
  .btn-hollow {
    min-height: 48px;
    padding: 14px 32px;
  }

  .w-dropdown-link {
    min-height: 44px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
  }

  .mobile-sub-link {
    min-height: 44px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* === 7. HERO CONTENT SMALL SCREEN FIX === */
@media (max-width: 380px) {
  .hero-heading {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  .hero-subheading {
    font-size: 1rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 10px;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-hollow {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  .sexy-heading {
    font-size: 2rem !important;
  }
}

/* === 8. WHATSAPP BUTTON + MOBILE CTA FIX === */
@media (max-width: 767px) {

  /* Move WhatsApp button above the sticky CTA */
  .whatsapp-float {
    bottom: 80px;
  }

  /* Ensure mobile sticky CTA has proper spacing */
  .mobile-sticky-cta {
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 768px) {
  .whatsapp-float {
    bottom: 30px;
  }
}

/* === 9. PROCESS TABS MOBILE SCROLL FIX === */
@media (max-width: 768px) {
  .process-tab-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
    gap: 8px;
    justify-content: flex-start;
  }

  .process-tab-buttons::-webkit-scrollbar {
    display: none;
  }

  .process-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 0.8rem;
  }
}

/* === 10. CONTACT GRID MOBILE FIX === */
@media (max-width: 767px) {
  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .contact-info-column,
  .contact-form-column {
    width: 100%;
  }

  .contact-details.glass-panel,
  .form-wrapper.glass-panel {
    padding: 25px !important;
  }
}

/* === 11. BENTO GRID VERY SMALL SCREENS === */
@media (max-width: 380px) {
  .bento-grid {
    gap: 12px;
    padding: 12px;
  }

  .bento-card {
    padding: 20px !important;
  }

  .bento-stat {
    font-size: 2.5rem;
  }

  .bento-title {
    font-size: 1.1rem;
  }
}

/* === 12. NAVIGATION SAFE AREA (iPhone notch/home indicator) === */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-sticky-cta {
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
  }

  #mobile-premium-overlay {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* === 13. DROPDOWN TOUCH DEVICE IMPROVEMENTS === */
@media (pointer: coarse) {
  .w-dropdown-list {
    /* Remove hover delay on touch devices */
    transition-delay: 0s !important;
  }

  .w-dropdown-toggle {
    /* Larger touch area */
    min-height: 44px;
  }
}