/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  padding-top: 0;
  background: #000;
}

img {
  display: block;
  max-width: 100%;
}

/* ================= GLOBAL SPACING ================= */
section {
  padding: clamp(60px, 8vw, 100px) 0;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 50px);
}

/* ================= CONTAINER ================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}

/* ================= NAVBAR ================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #000;
  z-index: 1000;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo img {
  height: 55px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: clamp(18px, 2vw, 30px);
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  transition: 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #00FFE7;
  transition: 0.3s ease;
}

.nav-links a:hover {
  color: #00FFE7;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-buttons {
  display: flex;
  gap: 12px;
}

.btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: #d9d9d9;
  color: #000;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #00FFE7;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #00ffe7;
}

.hamburger:focus-visible {
  outline: 2px solid #00FFE7;
  outline-offset: 4px;
}

/* ---------- LOGO SIZE FIX ---------- */
        .logo svg {
            display: block;
            height: 45px;      /* adjust to your preferred navbar height */
            width: auto;
        }

        /* Active navigation link */
.nav-links a.active {
  color: #00FFE7;
}
.nav-links a.active::after {
  width: 100%;
}
/* ================= HERO ================= */
.hero {
  position: relative;   /* Contain the absolute slider */
  padding-top: clamp(120px, 15vw, 180px);
  padding-bottom: clamp(30px, 5vw, 60px);
  height: calc(clamp(520px, 85vh, 900px) + 80px);
  display: flex;
  align-items: flex-end;       /* text moves to bottom, near dots */
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.slide {
  object-position: top right;   /* Keep the top and show the right portion */
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
}

.hero-content h1 {
  font-size: clamp(28px, 4vw, 56px);
  color: #fff;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.hero-content p {
  font-size: clamp(14px, 1.5vw, 20px);
  color: #fff;
  margin-bottom: clamp(20px, 3vw, 28px);
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
}

.hero-btn {
  margin-right: clamp(8px, 1.5vw, 12px);
}

.hero-btn:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .slide {
    object-position: 70% top;   /* Adjust this value to taste */
  }

  /* … your other mobile styles … */
}

/* ================= HERO BUTTON ================= */
.hero-btn {
  width: 100%;
  max-width: 240px;
  height: clamp(45px, 6vw, 60px);
  background: transparent;
  border: 2px solid #00FFE7;
  color: #00FFE7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.35s ease;
}

.hero-btn:first-child {
  background: #00FFE7;
  color: #000;
}

.hero-btn:hover {
  background: #00FFE7;
  color: #000;
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 255, 231, 0.45);
}

.hero-btn:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 6px 15px rgba(0, 255, 231, 0.3);
}

/* ================= DOTS ================= */
.dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 5;
}

.dot {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 0.5;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dot.active {
  width: 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.dot.active::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: #00FFE7;
  animation: progress 3s linear;
}

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .nav-menu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: #000;
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 25px 0;
    gap: 20px;
    transition: all 0.3s ease;
  }

  .nav-menu.active {
    display: flex;
  }

  .navbar.scrolled .nav-menu {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .nav-links {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .nav-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .hamburger {
    display: flex;
    background: transparent;
  }
}

/* ================= DESIGN SYSTEM SPACING VARIABLES ================= */
:root {
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --space-2xl: 3.75rem;
}
@media (min-width: 768px) {
  :root {
    --space-sm: 0.875rem;
    --space-md: 1.125rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: 5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --space-xs: 0.625rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 3.125rem;
    --space-2xl: 6.25rem;
  }
}

/* ================= SERVICES SECTION ================= */
.services {
  padding: var(--space-2xl) 0;
}

.section-header-left {
  text-align: left;
  margin-bottom: var(--space-xl);
}
.section-header-left h2 {
  font-size: clamp(1.75rem, 5vw, 2.625rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: #00FFE7;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.service-card {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
  border-color: #00FFE7;
  box-shadow: 0 0 20px rgba(0, 255, 231, 0.5), 0 0 8px rgba(0, 255, 231, 0.3);
}

/* ----- Card image ----- */
.service-card img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* ← adapt this ratio to match your actual images */
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;   /* enables the zoom‑in */
}

/* ✨ Zoom‑in on card hover */
.service-card:hover img {
  transform: scale(1.05);
}

/* ❌ Removed all previous fixed-height rules and their media queries */

.card-content {
  padding: var(--space-sm) var(--space-sm) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #fff;
}

.service-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 600;
  margin-bottom: 4px;
  color: #111;
  line-height: 1.3;
  transition: transform 0.3s ease, letter-spacing 0.3s ease;
  display: inline-block;
  transform-origin: left center;
}
.service-card:hover h3 {
  transform: scale(1.02);
  letter-spacing: 0.5px;
}

.service-card p {
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  line-height: 1.4;
  color: #444;
  margin-bottom: var(--space-sm);
  flex: 1;
}

.card-cta {
  display: inline-block;
  background: #00FFE7;
  color: #000;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(5px);
  visibility: hidden;
  pointer-events: none;
  align-self: flex-start;
}

.service-card:hover .card-cta {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.card-cta:hover {
  background: #00FFE7;
  color: #000;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

/* ================= VIEW MORE BUTTON ================= */
.view-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.view-more-btn {
  height: auto;
  padding: 0.8em 2em;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-family: 'Montserrat', sans-serif;
  background: #d9d9d9;
  color: #000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.view-more-btn:hover {
  background: #00FFE7;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

@media (max-width: 768px) {
  .view-more-btn {
    padding: 0.9em 2.2em;
    font-size: 0.95rem;
    min-width: 160px;
  }
}

/* ================= WHY CHOOSE US SECTION ================= */
.why-choose-us {
  padding: 0 0 var(--space-2xl) 0;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 25px rgba(0, 255, 231, 0.1);
  border-color: #00FFE7;
}

.feature-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  color: #000;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.feature-item:hover .feature-icon {
  background-color: #00FFE7;
  transform: scale(1.05);
  color: #000;
}

.feature-item:active .feature-icon {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

.feature-text h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
  transition: color 0.3s ease, transform 0.3s ease;
  transform-origin: left center;
}

.feature-text p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  color: #ccc;
  line-height: 1.5;
  margin: 0;
}

.feature-item:hover .feature-text h3 {
  color: #00FFE7;
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .feature-item {
    flex-direction: row;
  }
  .feature-icon {
    width: 48px;
    height: 48px;
  }
  .feature-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ================= HOW WE WORK SECTION ================= */
.process {
  padding: 0 0 var(--space-2xl) 0;
}

.gradient-box {
  background: linear-gradient(
    to bottom,
    #00FFE7 0%,
    #00FFE7 5%,
    #004040 35%,
    #00FFE7 100%
  );
  border-radius: 24px;
  padding: var(--space-xl);
  box-shadow: 0 12px 40px rgba(0, 255, 231, 0.15);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}

.medal-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 var(--space-sm);
}

.hexagon-container {
  position: relative;
  width: clamp(120px, 14vw, 160px);
  height: auto;
  margin-bottom: var(--space-sm);
}

.hexagon-svg {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}

.hexagon-svg polygon {
  transition: fill 0.3s ease;
}

.medal-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  color: #000;
  transition: color 0.3s ease;
  pointer-events: none;
}

.medal-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.medal-wrapper:hover .hexagon-svg polygon {
  fill: #000;
}

.medal-wrapper:hover .hexagon-svg {
  filter: drop-shadow(0 0 12px rgba(0, 255, 231, 0.6));
}

.medal-wrapper:hover .medal-icon {
  color: #00FFE7;
}

.medal-wrapper:hover .medal-heading {
  color: #000;
}

.medal-wrapper:hover .medal-subtext {
  color: #000;
}

.medal-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: #fff;
  margin-bottom: var(--space-xs);
  transition: color 0.3s ease;
}

.medal-subtext {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 180px;
  transition: color 0.3s ease;
}

.medal-wrapper:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 35%;
  transform: translateY(-50%);
  width: clamp(40px, 4.5vw, 56px);
  height: clamp(40px, 4.5vw, 56px);
  background: url("data:image/svg+xml,%3Csvg width='101' height='101' viewBox='0 0 101 101' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.1648 28.7353L79.9537 46.6352C80.2019 46.8303 80.4025 47.0793 80.5404 47.3633C80.6783 47.6473 80.75 47.9589 80.75 48.2746C80.75 48.5903 80.6783 48.9019 80.5404 49.1858C80.4025 49.4698 80.2019 49.7188 79.9537 49.914L57.1648 67.818C56.8322 68.0795 56.4279 68.2335 56.0056 68.2598C55.5834 68.2861 55.1631 68.1834 54.8006 67.9653C54.4381 67.7471 54.1505 67.4239 53.976 67.0385C53.8014 66.6531 53.7483 66.2237 53.8235 65.8074L55.3043 57.6521C34.3801 52.6296 25.6533 63.8843 22.2911 71.1469C21.7989 72.2064 19.7298 72.002 19.6214 70.8424C16.9307 40.8034 36.6494 36.4526 55.3711 39.2767L53.8235 30.7418C53.7492 30.3261 53.8028 29.8977 53.9772 29.5132C54.1516 29.1287 54.4386 28.8062 54.8003 28.5883C55.1619 28.3704 55.5812 28.2674 56.0027 28.2929C56.4241 28.3184 56.8279 28.4712 57.1607 28.7311' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

@media (max-width: 1024px) {
  .medal-wrapper:not(:last-child)::after {
    display: none;
  }
  .process-grid {
    gap: var(--space-md);
  }
  .medal-wrapper {
    padding: 0;
  }
}

.gradient-box .view-more-btn:hover {
  background: #000;
  color: #00FFE7;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
  .gradient-box {
    padding: var(--space-lg);
  }
}

/* ================= CLIENTS SECTION ================= */
.clients-section {
  padding-top: 0;
  padding-bottom: var(--space-2xl);
}

.clients-section .section-header-left {
  margin-bottom: var(--space-xl);
}

.clients-white-bg {
  background: #ffffff;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  width: 100%;
  overflow: hidden;
}

.clients-row {
  overflow: hidden;
  width: 100%;
  margin-bottom: var(--space-xl);
}

.clients-row + .clients-row {
  margin-top: var(--space-xl);
}

.clients-row:last-child {
  margin-bottom: 0;
}

.clients-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.logo-group {
  display: flex;
}

.logo-item {
  width: calc((100vw - 48px) / 7);
  min-width: 80px;
  height: clamp(60px, 10vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  flex-shrink: 0;
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.clients-row[data-direction="left-to-right"] .clients-track {
  animation: scrollRight 30s linear infinite;
}
.clients-row[data-direction="right-to-left"] .clients-track {
  animation: scrollLeft 30s linear infinite;
}

.clients-row:hover .clients-track {
  animation-play-state: paused;
}

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

/* ================= TESTIMONIALS SECTION ================= */
.testimonials-section {
  padding: 0 0 var(--space-2xl) 0;
}

.testimonials-section .section-header-left {
  margin-bottom: var(--space-xl);
}

.testimonials-section .section-header-left h2 {
  color: #00FFE7;
}

.testimonials-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.slider-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #000000;
  border: none;
  outline: none;
  transition: transform 0.15s ease;
}
.slider-overlay:active {
  transform: scale(0.96);
}
.slider-overlay--left {
  left: 0;
  border-radius: 0 12px 12px 0;
}
.slider-overlay--right {
  right: 0;
  border-radius: 12px 0 0 12px;
}
.slider-overlay svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.testimonials-track-container {
  width: 100%;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  padding: 65px 0 10px;
  will-change: transform;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #000000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  width: calc((100% - 3 * var(--space-md)) / 4);
  min-width: 250px;
  max-width: 300px;
  flex-shrink: 0;
  position: relative;
  padding-top: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  border-color: #00FFE7;
  box-shadow: 0 8px 30px rgba(0, 255, 231, 0.25);
}

.card-crest {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
}

.crest-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.crest-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.crest-outer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.crest-outer polygon {
  transition: stroke 0.3s ease;
  stroke: #000000;
  stroke-width: 3;
  fill: transparent;
}

.testimonial-card:hover .crest-outer polygon {
  stroke: #00FFE7;
}

.card-body {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 160px;
}
.card-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #111;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.card-body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  color: #444;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1023px) and (min-width: 640px) {
  .testimonial-card {
    width: calc((100% - var(--space-md)) / 2);
    min-width: 240px;
    max-width: 360px;
  }
  .slider-overlay {
    width: 50px;
  }
}
@media (max-width: 639px) {
  .testimonial-card {
    width: 85%;
    max-width: 400px;
    flex: none;
  }
  .slider-overlay {
    width: 45px;
  }
  .slider-overlay svg {
    width: 20px;
    height: 20px;
  }
}

/* ================= BOOKING SECTION (tightened) ================= */
.booking-section {
  padding: 0 0 var(--space-2xl) 0;
}

/* 🎯 Visually equalises gap with other sections – only affects booking heading */
.booking-section .section-header-left {
  margin-top: calc(-1 * var(--space-sm));   /* pulls heading up by ~12-16px */
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* --- Left info column --- */
/* --- Left info column --- */
.booking-info {
  display: flex;
  flex-direction: column;
}

/* Subtitle */
.booking-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: #fff;
  line-height: 1.5;
  margin-bottom: var(--space-lg);          /* consistent gap */
}

/* Benefits list */
.booking-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg) 0;          /* bottom gap matches others */
}
.booking-benefits li {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: #ddd;
  line-height: 1.8;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);          /* same small gap between items */
  transition: color 0.25s ease;
  cursor: default;
}
.booking-benefits li:last-child {
  margin-bottom: 0;                        /* no extra gap after last item */
}
.booking-benefits li:hover {
  color: #00FFE7;
}

/* Check icon */
.check-icon {
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  border-radius: 50%;
  background: #00FFE7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.check-icon svg {
  width: 70%;
  height: 70%;
  display: block;
}
.booking-benefits li:hover .check-icon {
  background: #00FFE7;                     /* stays brand cyan on hover */
}

/* Trusted line */
.booking-trusted {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);          /* breathing before urgent */
}

/* Star icon */
.star-icon {
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.star-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Big number inside trusted */
.big-number {
  font-size: clamp(1.5rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

/* Urgent line */
.booking-urgent {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: #FF0000;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  transform-origin: left center;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
}

.booking-urgent:hover {
  transform: scale(1.05);
  border: none;
  background: transparent;
  text-decoration: none;
  color: #FF0000;
}

/* Urgent icon */
.urgent-icon {
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.urgent-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* --- Right form wrapper --- */
.booking-form-wrapper {
  background: #ffffff;
  border-radius: 12px;
  padding: var(--space-lg);          /* ← tightened from XL to LG */
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);              /* ← tightened from MD to SM */
}

/* --- Location input with detect button --- */
.location-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.location-input-wrapper input {
  flex: 1;
  padding-right: 50px;
}

.location-detect-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #d9d9d9;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.location-detect-btn:hover {
  background: #00FFE7;
  transform: translateY(-50%) scale(1.05);
}

.location-detect-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.location-detect-btn.detecting {
  background: #00FFE7;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- Full‑width fields --- */
.booking-form .full-width {
  grid-column: 1 / -1;
}

/* --- Form fields --- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-field label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.2vw, 0.85rem);
  color: #111;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  color: #333;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #00FFE7;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #999;
}

.form-field textarea {
  resize: vertical;
}

/* --- Submit button --- */
.booking-submit {
  grid-column: 1 / -1;
  height: auto;
  padding: var(--space-sm) var(--space-xl);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  font-family: 'Montserrat', sans-serif;
  background: #d9d9d9;
  color: #000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  margin-top: var(--space-sm);
}

.booking-submit:hover {
  background: #00FFE7;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 231, 0.3);
}

/* --- Responsive stacking --- */
@media (max-width: 767px) {
  .booking-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .booking-form {
    grid-template-columns: 1fr;
  }
}

/* ================= URGENT POPUP MODAL ================= */
.urgent-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.urgent-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.urgent-modal {
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px 30px;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  text-align: center;
}

.urgent-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #333;
  transition: color 0.2s;
}
.urgent-modal-close:hover {
  color: #FF0000;
}

.urgent-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #111;
  margin-bottom: 20px;
}

/* Form */
.urgent-popup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.urgent-popup-form .form-field {
  text-align: left;
}
.urgent-popup-form input {
  width: 100%;
}

/* Error messages */
.error-message {
  display: block;
  color: #FF0000;
  font-size: 0.8rem;
  margin-top: 4px;
  min-height: 1.2em;
}

/* Phone input group */
.phone-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #f9f9f9;
  transition: border-color 0.3s ease;
}
.phone-input-group:focus-within {
  border-color: #00FFE7;
}

/* Country picker wrapper */
.country-picker {
  position: relative;
  min-width: 110px;
  flex-shrink: 0;
}

/* Make native select invisible and absolutely positioned to cover the area */
.country-code-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* Visual display (flag + code) */
.country-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-sm) var(--space-sm);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  color: #333;
  background: #f0f0f0;
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none; /* allows click to pass through to the hidden select */
}


/* Success state */
.urgent-success-icon {
  font-size: 3rem;
  margin-bottom: 10px;
}
.urgent-success-text {
  font-family: 'Inter', sans-serif;
  color: #333;
  margin-bottom: 20px;
}
.urgent-contact-details {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}
.urgent-contact-details p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  margin: 8px 0;
  color: #111;
}

/* Hidden utility */
.hidden {
  display: none;
}

/* ================= BROCHURE & SUBSCRIBE SECTION ================= */
.brochure-section {
  padding: 0 0 var(--space-2xl) 0;
}

.brochure-section .section-header-left {
  margin-bottom: var(--space-xl);
}

/* ----- Two‑column grid ----- */
.brochure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ===== LEFT: Brochure visual ===== */
.brochure-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brochure-image-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: var(--space-lg);
  box-shadow: 0 8px 25px rgba(0, 255, 231, 0.1);
  margin-bottom: var(--space-lg);
  max-width: 350px;
  width: 100%;
}

.brochure-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #eee;
}

.brochure-download-btn {
  min-width: 180px;
}

/* ===== RIGHT: Subscribe panel ===== */
.subscribe-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 0.3s ease;
}
.subscribe-panel:hover {
  border-color: #00FFE7;
}

.subscribe-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: #fff;
  margin-bottom: var(--space-lg);
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.subscribe-form .form-field {
  gap: var(--space-xs);
}

.subscribe-form .form-field label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.2vw, 0.85rem);
  color: #fff;
}

.subscribe-form .form-field input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  color: #333;
  outline: none;
  transition: border-color 0.3s ease;
}

.subscribe-form .form-field input:focus {
  border-color: #00FFE7;
}

.subscribe-btn {
  width: 100%;
}

.subscribe-privacy {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 1.1vw, 0.8rem);
  color: #aaa;
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
  .brochure-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .brochure-visual {
    order: -1;   /* brochure on top */
  }
}

/* ================= NEW PREMIUM FOOTER (scoped under #premiumFooter) ================= */
#premiumFooter * { margin: 0; padding: 0; box-sizing: border-box; }

#premiumFooter .footer {
    background: #000;
    color: #fff;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(0, 255, 231, 0.15);
}

#premiumFooter .footer-live-line {
    width: 100%;
    height: 2px;
    background: transparent;
    margin-bottom: 28px;
    position: relative;
}

#premiumFooter .footer-live-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 231, 0.6) 30%,
        #00FFE7 50%,
        rgba(0, 255, 231, 0.6) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: breatheLine 6s ease-in-out infinite alternate;
}

@keyframes breatheLine {
    0% { opacity: 0.3; background-position: 0% 0; }
    100% { opacity: 1; background-position: 100% 0; }
}

#premiumFooter .container {
    max-width: 1200px;          /* ← match the site’s global container */
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

#premiumFooter .footer::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 10%, rgba(0,255,231,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

#premiumFooter .footer-top-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 40px;
}

#premiumFooter .footer-top-strip .cta-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: #00FFE7;
    letter-spacing: -0.3px;
}

#premiumFooter .footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00FFE7;
    color: #000;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #00FFE7;
}

#premiumFooter .footer-btn:hover {
    background: #000;
    color: #00FFE7;
    box-shadow: 0 0 18px rgba(0,255,231,0.4);
}

#premiumFooter .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: clamp(30px, 4vw, 50px);
    margin-bottom: 50px;
}

#premiumFooter .footer-brand .footer-logo {
    display: inline-block;      /* prevents full‑width stretch */
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#premiumFooter .footer-brand p {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

#premiumFooter .footer-address {
    font-style: normal;
    color: #bbb;
    font-size: 0.88rem;
    line-height: 1.7;
    padding-left: 16px;
    border-left: 2px solid rgba(0, 255, 231, 0.4);
    margin-bottom: 20px;
    position: relative;
}

#premiumFooter .footer-address::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #00FFE7;
    box-shadow: 0 0 8px rgba(0,255,231,0.5);
}

#premiumFooter .footer-instant-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00FFE7;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0,255,231,0.6);
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

#premiumFooter .footer-instant-cta:hover {
    color: #fff;
    border-bottom-color: #00FFE7;
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(0, 255, 231, 0.5);
    
}

#premiumFooter .footer-instant-cta svg {
    stroke: #00FFE7;
    transition: stroke 0.3s;
}

#premiumFooter .footer-instant-cta:hover svg { stroke: #fff; }

/* === HEADINGS – NO HOVER UNDERLINE OR EFFECT === */
#premiumFooter .footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.2px;
    color: #00FFE7;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
}
#premiumFooter .footer-heading::after,
#premiumFooter .footer-heading:hover::after {
    display: none !important;
    width: 0 !important;
}

#premiumFooter .footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#premiumFooter .footer-links li a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

#premiumFooter .footer-links li a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #00FFE7;
    transition: width 0.3s ease;
}

#premiumFooter .footer-links li a:hover { color: #00FFE7; }
#premiumFooter .footer-links li a:hover::after { width: 100%; }

#premiumFooter .footer-locations { display: flex; flex-direction: column; gap: 12px; }

#premiumFooter .location-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #ddd;
    transition: all 0.3s ease;
    cursor: default;
}

#premiumFooter .location-badge:hover {
    border-color: #00FFE7;
    background: rgba(0,255,231,0.04);
    box-shadow: 0 4px 15px rgba(0,255,231,0.1);
    transform: translateY(-2px);
}

#premiumFooter .location-badge svg { stroke: #00FFE7; flex-shrink: 0; }

#premiumFooter .location-future {
    background: rgba(0,255,231,0.02);
    border: 1px dashed rgba(0,255,231,0.25);
    color: #aaa;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#premiumFooter .location-future:hover {
    border-style: solid;
    border-color: #00FFE7;
    background: rgba(0,255,231,0.06);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,255,231,0.12);
    transform: translateY(-2px);
}

#premiumFooter .location-future svg { stroke: #00FFE7; opacity: 0.7; transition: opacity 0.3s; }
#premiumFooter .location-future:hover svg { opacity: 1; }

#premiumFooter .location-future-text { font-style: italic; letter-spacing: 0.3px; }
#premiumFooter .location-future-text strong { color: #00FFE7; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

#premiumFooter .footer-social-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 30px 0;
    text-align: center;
}

#premiumFooter .footer-social-section .footer-heading { text-align: center; margin-bottom: 20px; }

#premiumFooter .footer-social {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

#premiumFooter .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    transition: all 0.3s ease;
    color: #aaa;
}

#premiumFooter .social-icon:hover {
    background: #00FFE7;
    color: #000;
    box-shadow: 0 0 16px rgba(0,255,231,0.4);
    transform: translateY(-3px);
}

#premiumFooter .footer-bottom {
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 18px 0;
}

#premiumFooter .footer-bottom-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    color: #777;
}

#premiumFooter .footer-copy { color: #777; }

#premiumFooter .footer-bottom-email {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

#premiumFooter .footer-bottom-email:hover { color: #00FFE7; }
#premiumFooter .footer-bottom-email svg { stroke: #00FFE7; flex-shrink: 0; }

#premiumFooter .footer-cert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 6px 16px;
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.1);
}

#premiumFooter .footer-cert svg { stroke: #00FFE7; }

@media (max-width: 900px) {
    #premiumFooter .footer-grid { grid-template-columns: 1fr 1fr; }
    #premiumFooter .footer-top-strip { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    #premiumFooter .footer-grid { grid-template-columns: 1fr; }
    #premiumFooter .footer-bottom-content { flex-direction: column; text-align: center; }
}

/* ===== LOADING OVERLAY TEXT & PROGRESS BAR (scoped to #loadingOverlay) ===== */
#loadingOverlay .transition-text-container {
    position: relative;
    z-index: 10;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}
#loadingOverlay .transition-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #00FFE7;
    font-size: 1rem;
    letter-spacing: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
    white-space: nowrap;
    pointer-events: none;
}
#loadingOverlay .transition-text.active {
    opacity: 1 !important;
    transform: translate(-50%, -50%);
}
#loadingOverlay .transition-text.completion-text {
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 2px;
}
#loadingOverlay .transition-progress {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin: 30px auto 0;
    overflow: hidden;
}
#loadingOverlay .transition-progress-bar {
    height: 100%;
    width: 0%;
    background: #00FFE7;
    transition: width 1.2s ease-in-out;
}

/* ===== BRAND SPINNER (from Contact Us page) ===== */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.page-transition-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.page-transition-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,255,231,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,255,231,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridShift 20s linear infinite;
    pointer-events: none;
}
@keyframes gridShift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 40px 40px, 40px 40px; }
}

.transition-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,231,0.12) 0%, rgba(0,255,231,0.03) 45%, transparent 70%);
    pointer-events: none;
    animation: glowBreathe 2.2s ease-in-out infinite;
}
@keyframes glowBreathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
}

.transition-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.transition-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #00FFE7;
    border-radius: 50%;
    opacity: 0;
    animation: floatUp 3s ease-in infinite;
}
.transition-particles .particle:nth-child(1) { left: 15%; bottom: -10px; animation-delay: 0s; }
.transition-particles .particle:nth-child(2) { left: 30%; bottom: -10px; animation-delay: 0.5s; width: 2px; height: 2px; }
.transition-particles .particle:nth-child(3) { left: 50%; bottom: -10px; animation-delay: 1.0s; width: 4px; height: 4px; }
.transition-particles .particle:nth-child(4) { left: 65%; bottom: -10px; animation-delay: 0.3s; }
.transition-particles .particle:nth-child(5) { left: 78%; bottom: -10px; animation-delay: 0.8s; width: 2px; height: 2px; }
.transition-particles .particle:nth-child(6) { left: 22%; bottom: -10px; animation-delay: 1.4s; width: 5px; height: 5px; }
.transition-particles .particle:nth-child(7) { left: 42%; bottom: -10px; animation-delay: 0.15s; width: 2px; height: 2px; }
.transition-particles .particle:nth-child(8) { left: 58%; bottom: -10px; animation-delay: 1.1s; width: 3px; height: 3px; }
@keyframes floatUp {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    15% { opacity: 0.9; }
    60% { opacity: 0.5; }
    100% { transform: translateY(-105vh) translateX(40px) scale(0.3); opacity: 0; }
}

.transition-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.loader-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.ring-1 { width: 110px; height: 110px; border: 2px solid rgba(0,255,231,0.5); border-top-color: rgba(0,255,231,0.9); border-right-color: transparent; border-bottom-color: rgba(0,255,231,0.25); animation: spinClockwise 6s linear infinite; }
.ring-2 { width: 80px; height: 80px; border: 2px dashed rgba(0,255,231,0.6); border-top-color: rgba(0,255,231,0.95); border-left-color: transparent; animation: spinCounterClockwise 4.5s linear infinite; }
.ring-3 { width: 52px; height: 52px; border: 2px solid rgba(0,255,231,0.7); border-bottom-color: rgba(0,255,231,1); border-left-color: transparent; border-right-color: transparent; animation: spinClockwise 3s linear infinite; }
@keyframes spinClockwise { to { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { to { transform: rotate(-360deg); } }

.loader-icon {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPulse 1.6s ease-in-out infinite;
}
.loader-icon svg {
    display: block;
    filter: drop-shadow(0 0 12px rgba(0,255,231,0.7));
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(0,255,231,0.7)); }
    50% { transform: scale(1.25); filter: drop-shadow(0 0 24px rgba(0,255,231,1)); }
}
/* ===== LOADING OVERLAY (form submissions) – full‑width bottom bar ===== */
#loadingOverlay .transition-text-container {
    position: relative;
    z-index: 10;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}
#loadingOverlay .transition-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #00FFE7;
    font-size: 1rem;
    letter-spacing: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
    white-space: nowrap;
    pointer-events: none;
}
#loadingOverlay .transition-text.active {
    opacity: 1 !important;
    transform: translate(-50%, -50%);
}
#loadingOverlay .transition-text.completion-text {
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 2px;
}
#loadingOverlay .transition-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 5;
    margin: 0;
    border-radius: 0;
}
#loadingOverlay .transition-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 255, 231, 0.4) 0%, #00FFE7 40%, #00FFE7 80%, rgba(0, 255, 231, 0.6) 100%);
    box-shadow: 0 0 10px rgba(0, 255, 231, 0.5);
    transition: width 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-radius: 0 2px 2px 0;
}

/* ===== PAGE‑TRANSITION OVERLAY (footer) – text styles ===== */
#pageTransitionOverlay .transition-text-container {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    z-index: 2;
}
#pageTransitionOverlay .transition-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #00FFE7;
    font-size: 1rem;
    letter-spacing: 1px;
    position: absolute;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}
#pageTransitionOverlay .transition-text.active {
    opacity: 1;
    transform: translateY(0);
}
#pageTransitionOverlay .transition-text.completion-text {
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 2px;
}
#pageTransitionOverlay.complete .transition-text.completion-text {
    opacity: 1;
    transform: translateY(0);
}
#pageTransitionOverlay.complete .transition-text:not(.completion-text) {
    opacity: 0;
}

/* ===== BRAND SPINNER (common to both overlays) ===== */
/* (your existing brand spinner rules remain unchanged) */
/* ===== INTERACTIVE CLEAN-TO-REVEAL LOGO (FOOTER) ===== */

/* Canvases – sit exactly on top of the SVG */
#dirtCanvas,
#waterCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
#dirtCanvas {
  pointer-events: auto;
  transition: opacity 0.6s ease;
  opacity: 1;
}
#dirtCanvas.clean {
  opacity: 0;
  pointer-events: none;
}
#waterCanvas {
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
}
.footer-logo:hover #waterCanvas {
  opacity: 1;
}
/* Scale the footer logo SVG to the same size as the trial */
#premiumFooter .footer-logo svg {
    display: block;
    width: 220px;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(0, 255, 231, 0.25));
}
/* Custom brush cursor */
#dirtCanvas.dirty {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 337.053" width="40" height="40"><path fill="%2300FFE7" fill-rule="nonzero" d="M37.022 160.47c-4.398-9.32-6.599-18.27-6.499-26.822.104-8.884 2.667-17.165 7.802-24.799l.315-.436c5.338-6.889 12.741-12.638 22.252-17.206 9.052-4.35 20.033-7.641 32.982-9.837a7.955 7.955 0 011.7-.1c18.865-.293 29.463-9.359 40.49-18.797 11.912-10.194 24.266-20.767 46.456-24.276 26.195-4.141 38.583 5.222 51.144 14.719 10.344 7.823 20.853 15.764 43.163 11.949l1.021-.109c11.419-1.006 25.056 4.65 36.453 15.184 9.937 9.184 18.431 22.205 22.353 37.746 5.633 22.315 1.187 33.089-4.35 46.506-2.188 5.301-4.58 11.097-6.382 18.436-2.12 8.639-3.105 17.277-3.252 25.884-.15 8.712.561 17.536 1.809 26.393l.05.467c.821 9.861-1.051 18.407-5.819 25.517-4.647 6.937-11.884 12.175-21.892 15.568a439.089 439.089 0 01-38.023 14.389c.706-5.866 1.059-11.673 1.191-17.229a419.162 419.162 0 0030.815-11.929l.657-.25c6.658-2.213 11.28-5.385 13.99-9.431 2.639-3.938 3.649-9.08 3.147-15.314-1.302-9.372-2.037-18.847-1.874-28.43.168-9.829 1.284-19.662 3.688-29.452 2.058-8.39 4.709-14.81 7.134-20.687 4.415-10.693 7.957-19.285 3.597-36.562-3.106-12.313-9.816-22.614-17.659-29.862-8.116-7.501-17.134-11.61-24.13-11.045-29.001 4.911-42.263-5.106-55.318-14.98-9.856-7.45-19.576-14.796-39.076-11.715-17.64 2.79-28.262 11.88-38.509 20.649-13.221 11.317-25.925 22.185-50.422 22.605-11.297 1.952-20.704 4.75-28.254 8.381-7.108 3.415-12.549 7.552-16.353 12.389-3.257 4.937-4.881 10.227-4.947 15.851-.07 6.047 1.622 12.67 4.99 19.82 2.726 5.424 6.237 10.712 9.849 16.153 5.068 7.63 10.323 15.55 14.676 25.356-5.807-1.021-11.462-.513-16.938 1.802-3.431-6.849-7.303-12.681-11.059-18.339-3.839-5.784-7.573-11.403-10.882-17.998l-.086-.159zm-1.863-91.25h-1.112C34.047 50.872 18.35 35.17 0 35.17v-1.11c18.348 0 34.047-15.715 34.047-34.06h1.112c0 18.348 15.7 34.047 34.047 34.047v1.112c-18.354 0-34.047 15.711-34.047 34.061zm88.201-24.95h-.658c0-10.809-9.266-20.067-20.073-20.067v-.663c10.798 0 20.073-9.252 20.073-20.055h.658c0 5.356 2.008 10.051 6.016 14.057 4.005 4.003 8.685 6.016 14.056 6.016v.658c-10.804 0-20.072 9.245-20.072 20.054zm128.683-5.206h-.515c0-4.166-1.564-7.82-4.679-10.938-3.118-3.118-6.76-4.682-10.941-4.682v-.512c4.169 0 7.823-1.566 10.941-4.682 3.115-3.13 4.679-6.772 4.679-10.929l.515.002c0 4.166 1.566 7.822 4.682 10.938 3.118 3.118 6.76 4.682 10.941 4.682v.515c-4.169 0-7.823 1.564-10.941 4.682-3.13 3.104-4.682 6.747-4.682 10.924zM118.335 243.342a5.891 5.891 0 01-.812-.499 808.368 808.368 0 01-10.048-8.115c-4.557-3.745-9.802-8.054-13.487-11.113-2.497-2.059-5.367-3.497-8.052-4.058-1.747-.313-3.309-.313-4.557.186-.998.441-1.872 1.251-2.435 2.499-.751 1.686-1.125 4.057-.937 7.305.186 2.871 1.187 5.991 2.498 9.052 1.936 4.43 4.619 8.554 6.618 11.175.125.186.249.311.313.499l39.516 56.434c.5.749.813 1.562.874 2.374.812 6.49 2.185 11.424 4.182 14.483 1.498 2.249 3.373 3.372 5.805 3.308h62.181c3.869-.061 7.366-1.184 10.611-3.433 3.558-2.435 6.744-6.243 9.677-11.363.063-.061.124-.186.188-.249a478.555 478.555 0 014.058-6.804c6.306-10.364 11.798-19.414 12.422-32.277l-.374-17.728c-.062-.249-.062-.499-.062-.749 0-.249 0-1.938.062-4.184.124-11.735.313-35.972-10.426-37.783h-6.928c-.064 3.309-.25 16.435-.438 19.68-.186 2.932-.375 5.68-.375 8.365a5.17 5.17 0 01-5.183 5.183 5.17 5.17 0 01-5.179-5.183c0-2.685.187-5.808.375-9.053.685-11.051 1.498-33.475-7.305-35.036h-6.867c-.375 0-.749-.061-1.124-.125.062 3.994-.188 15.947-.438 19.941-.186 2.936-.374 7.604-.374 10.289a5.167 5.167 0 01-5.181 5.181 5.17 5.17 0 01-5.183-5.181c0-2.685.188-7.727.374-10.975.69-11.049 1.5-31.555-7.303-33.114h-6.867c-.499 0-.934-.064-1.372-.188v27.994a5.17 5.17 0 01-5.181 5.184 5.173 5.173 0 01-5.184-5.184v-29.851c0-9.05-3.683-14.796-8.428-17.169-1.747-.874-3.62-1.31-5.43-1.31-1.811 0-3.683.436-5.431 1.31-4.684 2.373-8.304 8.119-8.304 17.419v72.478a5.169 5.169 0 01-5.181 5.181 5.171 5.171 0 01-5.183-5.181v-9.615h-.125zm48.447-71.307a4.86 4.86 0 011.372-.186h7.181c.374 0 .812.061 1.184.125 9.552 1.497 13.859 7.055 15.609 14.294a5.293 5.293 0 012.183-.499h7.18c.375 0 .813.061 1.187.125 10.299 1.624 14.422 7.929 15.92 15.919.249-.064.499-.064.81-.064h7.18c.375 0 .81.064 1.185.126 19.729 3.061 19.48 32.415 19.291 48.21v4.12l.438 18.23v.561c-.749 15.545-6.867 25.596-13.922 37.208a489.918 489.918 0 00-3.996 6.681c-.064.061-.064.125-.125.186-3.683 6.429-7.929 11.363-12.797 14.733-4.933 3.433-10.428 5.181-16.419 5.244h-62.117c-6.181.125-10.985-2.559-14.546-7.865-2.871-4.244-4.743-10.237-5.744-17.731l-38.704-55.311-.188-.188c-2.31-3.057-5.43-7.865-7.802-13.173-1.75-3.995-3.061-8.302-3.372-12.545-.313-5.059.374-9.053 1.808-12.239 1.75-3.931 4.621-6.493 8.055-7.866 3.183-1.309 6.805-1.497 10.427-.749 4.369.874 8.864 3.062 12.67 6.243 3.125 2.622 8.367 6.867 13.486 11.05l4.244 3.497v-49.628c0-13.798 6.118-22.662 14.047-26.659a22.173 22.173 0 0110.115-2.435c3.495 0 6.928.813 10.112 2.435 8.914 4.494 14.172 18.337 14.172 18.214l-.124-.063zm208.8 101.88c-4.933.057-8.982-3.896-9.038-8.83-.057-4.934 3.896-8.982 8.83-9.039 9.138-.127 20.458.24 32.488 2.628 12.349 2.453 25.53 7.024 38.118 15.302 4.121 2.71 5.267 8.249 2.557 12.371-2.709 4.121-8.249 5.267-12.37 2.557-10.319-6.785-21.332-10.575-31.741-12.642-10.732-2.132-20.762-2.458-28.844-2.347zm-3.247-70.947c-4.875-.851-8.14-5.496-7.289-10.371.851-4.874 5.496-8.14 10.371-7.289 24.18 4.291 42.076 9.804 57.87 18.064 15.818 8.276 29.114 19.101 44.148 34.049 3.502 3.482 3.518 9.148.037 12.65-3.482 3.501-9.148 3.517-12.65.036-13.829-13.75-25.866-23.605-39.804-30.899-13.961-7.303-30.262-12.259-52.683-16.24zm12.304-69.605c-4.874-.792-8.185-5.392-7.393-10.267.792-4.874 5.392-8.185 10.266-7.393 24.285 3.955 46.629 12.61 66.819 25.119 21.076 13.058 39.739 30.262 55.754 50.652 3.056 3.887 2.38 9.52-1.507 12.577-3.888 3.057-9.52 2.38-12.577-1.507-14.794-18.836-31.894-34.639-51.06-46.517-18.214-11.286-38.378-19.092-60.302-22.664z"/></svg>') 20 20, auto;
}

/* Glowing hint */
#premiumFooter .clean-hint {
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #00FFE7;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 28px;
  border-radius: 30px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(0, 255, 231, 0.4);
  box-shadow: 0 0 14px rgba(0, 255, 231, 0.35), 0 0 30px rgba(0, 255, 231, 0.2);
  animation: hintGlowPulse 2s ease-in-out infinite;
}

@keyframes hintGlowPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 14px rgba(0, 255, 231, 0.35), 0 0 30px rgba(0, 255, 231, 0.2);
    text-shadow: 0 0 6px rgba(0,255,231,0.5);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.07);
    box-shadow: 0 0 22px rgba(0, 255, 231, 0.6), 0 0 45px rgba(0, 255, 231, 0.35);
    text-shadow: 0 0 12px rgba(0,255,231,0.9);
  }
}
/* Premium reveal animation after cleaning */
.footer-logo.premium-reveal svg {
  animation: logoPremiumReveal 1s ease-out forwards,
             logoPremiumGlow 3s ease-in-out 1s infinite;
}
@keyframes logoPremiumReveal {
  0% {
    transform: scale(0.9);
    filter: drop-shadow(0 0 5px rgba(0, 255, 231, 0.3));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 25px rgba(0, 255, 231, 0.65)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(0, 255, 231, 0.4)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
  }
}
@keyframes logoPremiumGlow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(0, 255, 231, 0.35)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 255, 231, 0.6)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.25));
  }
}
/* ===== PAGE‑TRANSITION OVERLAY (footer) – progress bar ===== */
#pageTransitionOverlay .transition-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 5;
    margin: 0;
    border-radius: 0;
}

#pageTransitionOverlay .transition-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 255, 231, 0.4) 0%, #00FFE7 40%, #00FFE7 80%, rgba(0, 255, 231, 0.6) 100%);
    box-shadow: 0 0 10px rgba(0, 255, 231, 0.5);
    transition: width 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-radius: 0 2px 2px 0;
}