/* ══════════════════════════════════════════
   HydroPulse India — styles.css
   Color Palette: Sandy-grey bg, light-blue, light-orange, grey blends
   ══════════════════════════════════════════ */

/* ── Google Font already imported in HTML ── */

/* ─────────── CSS Variables ─────────── */
:root {
  /* Background — warm sandy grey (not white, not dark) */
  --bg-base:        #f0eeeb;
  --bg-subtle:      #e8e5e0;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f7f5f2;

  /* Light Blue palette */
  --blue-100:       #ddeeff;
  --blue-300:       #90c4e8;
  --blue-500:       #3a90d4;
  --blue-700:       #1a5fa0;
  --blue-900:       #0d3b68;

  /* Light Orange palette */
  --orange-100:     #fff1e3;
  --orange-300:     #ffb97a;
  --orange-500:     #f07020;
  --orange-700:     #c44e00;

  /* Grey palette */
  --grey-100:       #f5f4f2;
  --grey-200:       #e2dfd9;
  --grey-400:       #b5b0a8;
  --grey-600:       #7a7570;
  --grey-800:       #3d3a36;
  --grey-900:       #1e1c1a;

  /* Gradients */
  --grad-blue-orange: linear-gradient(135deg, #3a90d4 0%, #f07020 100%);
  --grad-blue-light:  linear-gradient(135deg, #ddeeff 0%, #e8f4ff 100%);
  --grad-orange-warm: linear-gradient(135deg, #fff1e3 0%, #ffe0c0 100%);
  --grad-hero-overlay: linear-gradient(120deg, rgba(10,35,70,0.72) 0%, rgba(15,50,90,0.40) 55%, rgba(240,112,32,0.20) 100%);

  /* Typography */
  --font-main: 'Outfit', 'Inter', sans-serif;

  /* Spacing */
  --nav-h: 92px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Transitions */
  --trans-fast: 0.2s ease;
  --trans-med:  0.4s ease;
  --trans-slow: 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* ─────────── Reset ─────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  font-family: var(--font-main);
  background-color: var(--bg-base);
  color: var(--grey-800);
  overflow-x: hidden;
  width: 100%;
  line-height: 1.6;
}
p, li {
  text-align: justify;
}
.footer-brand p {
  text-align: justify;
}
.section-subtitle,
.subpage-subtitle,
.slider-intro-header p,
.slider-attraction-footer p {
  text-align: center;
}
.form-success-message p,
.submitFormCard p,
.cart-empty-text,
.login-drawer p {
  text-align: justify;
}
.footer-bottom p {
  text-align: center;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─────────── Utility ─────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(240,238,235,0.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 2px 24px rgba(58,144,212,0.08);
  transition: background var(--trans-fast), box-shadow var(--trans-fast);
}
.navbar.scrolled {
  background: rgba(240,238,235,0.97);
  box-shadow: 0 4px 32px rgba(58,144,212,0.14);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--nav-h);
  padding: 0 32px;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img {
  width: 160px; /* Exact same medium size as reference site */
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: transform var(--trans-fast);
}
@media (min-width: 1200px) {
  .logo-img {
    width: 192px; /* Exact same large size as reference site */
  }
}
.logo-img:hover { transform: scale(1.04); }

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 20px;
  flex: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--grey-850, #2b2825);
  border-radius: var(--radius-sm);
  transition: color var(--trans-fast), background var(--trans-fast);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-item .nav-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.nav-item:hover,
.nav-item.active {
  color: var(--blue-700);
  background: var(--blue-100);
}

/* Underline only on active/hover */
.nav-underline {
  position: absolute;
  bottom: 2px;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-blue-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-item:hover .nav-underline,
.nav-item.active .nav-underline {
  transform: scaleX(1);
}

/* Full-width divider */
.nav-divider {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue-300) 15%,
    var(--blue-500) 35%,
    var(--orange-300) 65%,
    var(--orange-500) 82%,
    transparent 100%
  );
  opacity: 0.6;
}

/* Actions Wrapper in nav */
.nav-right-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* CTA button in nav */
.nav-cta {
  padding: 9px 18px;
  background: var(--grad-blue-orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: box-shadow var(--trans-fast), transform var(--trans-fast);
  box-shadow: 0 3px 16px rgba(58,144,212,0.25);
  flex-shrink: 0;
}
.nav-cta:hover {
  box-shadow: 0 6px 28px rgba(58,144,212,0.40);
  transform: translateY(-1px);
}

/* Login button in nav */
.nav-login-btn {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid rgba(58,144,212,0.3);
  border-radius: 50px;
  color: var(--grey-800);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--trans-fast);
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.nav-login-btn:hover {
  background: rgba(58,144,212,0.08);
  border-color: rgba(58,144,212,0.6);
  transform: translateY(-1px);
  color: #fff;
  background-color: var(--blue-500);
}
.nav-login-btn:hover svg {
  stroke: #fff;
}
.nav-login-btn svg {
  stroke: var(--grey-800);
  vertical-align: middle;
  transition: stroke var(--trans-fast);
}

/* Cart button in nav */
.nav-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(58,144,212,0.3);
  border-radius: 50%;
  color: var(--grey-800);
  text-decoration: none;
  transition: all var(--trans-fast);
  background: transparent;
  cursor: pointer;
}
.nav-cart-btn:hover {
  background: rgba(58,144,212,0.08);
  border-color: rgba(58,144,212,0.6);
  transform: translateY(-1px);
}
.nav-cart-btn svg {
  stroke: var(--grey-800);
  transition: stroke var(--trans-fast);
}
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange-500);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.1px solid #fff;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: 12px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--grey-800);
  border-radius: 2px;
  transition: var(--trans-fast);
}

/* ══════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  margin-top: var(--nav-h);
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual Slide */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  display: flex;
  align-items: center;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

/* Background image with zoom animation */
.slide-bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  animation: none;
  filter: blur(3px);
}
.hero-slide.active .slide-bg {
  animation: heroZoom 8s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.10); }
}

/* Gradient overlay */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: var(--grad-hero-overlay);
  z-index: 1;
}
/* Additional right-side colour bleed */
.hero-slide:nth-child(1) .slide-overlay { background: linear-gradient(120deg, rgba(10,35,70,0.78) 0%, rgba(15,50,90,0.42) 50%, rgba(240,112,32,0.22) 100%); }
.hero-slide:nth-child(2) .slide-overlay { background: linear-gradient(120deg, rgba(5,60,20,0.72) 0%, rgba(10,90,40,0.38) 50%, rgba(240,200,32,0.18) 100%); }
.hero-slide:nth-child(3) .slide-overlay { background: linear-gradient(120deg, rgba(60,20,5,0.72) 0%, rgba(120,60,10,0.38) 50%, rgba(58,144,212,0.18) 100%); }
.hero-slide:nth-child(4) .slide-overlay { background: linear-gradient(120deg, rgba(10,45,70,0.76) 0%, rgba(20,80,60,0.42) 50%, rgba(240,112,32,0.20) 100%); }

/* Content row inside slide */
.slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ── Text Side ── */
.slide-text {
  flex: 1;
  max-width: 560px;
  color: #fff;
}

.slide-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-300);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.hero-slide.active .slide-tag { opacity: 1; transform: translateY(0); }

.slide-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem); /* Increased size range */
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease 0.35s, transform 0.55s ease 0.35s;
}
.hero-slide.active .slide-title { opacity: 1; transform: translateY(0); }
.slide-title em {
  font-style: normal;
  background: var(--grad-blue-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slide-desc {
  font-size: 1.15rem; /* Increased from 0.97rem */
  line-height: 1.8;
  color: rgba(255,255,255,0.92);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease 0.5s, transform 0.55s ease 0.5s;
}
.hero-slide.active .slide-desc { opacity: 1; transform: translateY(0); }
.slide-desc strong { color: var(--orange-300); }

/* Stats row */
.slide-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease 0.65s, transform 0.55s ease 0.65s;
}
.hero-slide.active .slide-stats { opacity: 1; transform: translateY(0); }

.stat-item { display: flex; flex-direction: column; }
.stat-num {
  font-size: 2.0rem; /* Increased from 1.6rem */
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stat-prefix {
  color: #f07020;
  font-weight: 800;
  font-size: 1.1rem;
  margin-right: 6px;
  text-transform: uppercase;
}
.stat-lbl {
  font-size: 0.82rem; /* Increased from 0.7rem */
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

/* CTA button */
.slide-cta {
  display: inline-block;
  padding: 14px 32px; /* Increased padding */
  background: var(--grad-blue-orange);
  color: #fff;
  font-size: 1.05rem; /* Increased from 0.88rem */
  font-weight: 700;
  border-radius: 50px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(240,112,32,0.35);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease 0.8s,
    transform 0.5s ease 0.8s,
    box-shadow var(--trans-fast),
    scale var(--trans-fast);
}
.hero-slide.active .slide-cta { opacity: 1; transform: translateY(0); }
.slide-cta:hover {
  box-shadow: 0 8px 32px rgba(240,112,32,0.55);
  scale: 1.04;
}

/* Container for actions in slides */
.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
}

/* Premium Buy Now glassmorphic button */
.slide-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(240, 112, 32, 0.7);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease 0.9s,
    transform 0.5s ease 0.9s,
    background var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast),
    scale var(--trans-fast);
}

.hero-slide.active .slide-buy-btn {
  opacity: 1;
  transform: translateY(0);
}

.slide-buy-btn:hover {
  background: #f07020;
  border-color: #f07020;
  box-shadow: 0 8px 32px rgba(240, 112, 32, 0.45);
  scale: 1.04;
}

.slide-buy-btn svg {
  stroke: #fff;
}

/* ── Product Image Side ── */
.slide-product {
  position: relative;
  flex: 0 0 auto;
  width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}
.hero-slide.active .slide-product {
  opacity: 1;
  transform: translateX(0);
}

.product-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 40px rgba(58,144,212,0.55));
  /* No border-radius — keeps transparent PNG edges clean */
}
.hero-slide.active .product-img {
  animation: productFloat 4s ease-in-out infinite;
}

@keyframes productFloat {
  0%   { transform: scale(1.00) translateY(0px); filter: drop-shadow(0 8px 40px rgba(58,144,212,0.55)); }
  50%  { transform: scale(1.04) translateY(-10px); filter: drop-shadow(0 18px 60px rgba(58,144,212,0.75)); }
  100% { transform: scale(1.00) translateY(0px); filter: drop-shadow(0 8px 40px rgba(58,144,212,0.55)); }
}

/* -- Industrial, Poultry, Agriculture & Commercial slides: vivid blue smoky glow + outline + normal size -- */
#product-industry,
#product-poultry,
#product-agriculture,
#product-hotel {
  position: relative;
}
#product-industry::before,
#product-agriculture::before,
#product-hotel::before {
  content: '';
  position: absolute;
  inset: -15% -10%;
  background: radial-gradient(ellipse at center,
    rgba(58,144,212,0.18) 0%,
    rgba(30,90,180,0.10) 40%,
    transparent 72%);
  border-radius: 50%;
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
  animation: glowPulse 3s ease-in-out infinite;
}
#product-agriculture .product-img {
  position: relative;
  z-index: 1;
  transform: scale(1.00);
  filter:
    drop-shadow(0 0 6px rgba(58,144,212,0.55))
    drop-shadow(0 0 14px rgba(58,144,212,0.35))
    drop-shadow(0 8px 30px rgba(20,70,180,0.20));
}
#product-industry .product-img,
#product-hotel .product-img {
  position: relative;
  z-index: 1;
  transform: scale(0.92); /* Increased size comparing to other sectors */
  filter:
    drop-shadow(0 0 6px rgba(58,144,212,0.55))
    drop-shadow(0 0 14px rgba(58,144,212,0.35))
    drop-shadow(0 8px 30px rgba(20,70,180,0.20));
}
#slide-agriculture.active #product-agriculture .product-img {
  animation: agricultureFloatCustom 4s ease-in-out infinite;
}
#slide-industry.active #product-industry .product-img,
#slide-hotel.active #product-hotel .product-img {
  animation: industrialPoultryFloat 4s ease-in-out infinite;
}
@keyframes industrialPoultryFloat {
  0%   {
    transform: scale(0.92) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(58,144,212,0.55))
      drop-shadow(0 0 14px rgba(58,144,212,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
  50%  {
    transform: scale(0.96) translateY(-10px);
    filter:
      drop-shadow(0 0 8px rgba(58,144,212,0.65))
      drop-shadow(0 0 20px rgba(58,144,212,0.45))
      drop-shadow(0 12px 40px rgba(20,70,180,0.30));
  }
  100% {
    transform: scale(0.92) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(58,144,212,0.55))
      drop-shadow(0 0 14px rgba(58,144,212,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
}

/* -- Agriculture specific scale override to increase its size -- */
#product-agriculture .product-img {
  transform: scale(1.00); /* Display at full container size due to its wider aspect ratio */
}
#slide-agriculture.active #product-agriculture .product-img {
  animation: agricultureFloatCustom 4s ease-in-out infinite;
}
@keyframes agricultureFloatCustom {
  0%   {
    transform: scale(1.00) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(58,144,212,0.55))
      drop-shadow(0 0 14px rgba(58,144,212,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
  50%  {
    transform: scale(1.04) translateY(-10px);
    filter:
      drop-shadow(0 0 8px rgba(58,144,212,0.65))
      drop-shadow(0 0 20px rgba(58,144,212,0.45))
      drop-shadow(0 12px 40px rgba(20,70,180,0.30));
  }
  100% {
    transform: scale(1.00) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(58,144,212,0.55))
      drop-shadow(0 0 14px rgba(58,144,212,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
}

/* -- Domestic & Poultry/Animal Husbandry: glowing blue smoke aura + larger product size -- */
#product-domestic,
#product-poultry {
  position: relative;
}
#product-domestic .product-img,
#product-poultry .product-img {
  position: relative;
  z-index: 1;
  transform: scale(1.15); /* Increased size for transparent cropped cutout */
  filter:
    drop-shadow(0 0 6px rgba(56,189,248,0.55))
    drop-shadow(0 0 14px rgba(37,99,235,0.35))
    drop-shadow(0 8px 30px rgba(20,70,180,0.20));
}
#slide-domestic.active #product-domestic .product-img,
#slide-poultry.active #product-poultry .product-img {
  animation: domesticPoultryFloatCustom 4s ease-in-out infinite;
}
@keyframes domesticPoultryFloatCustom {
  0%   {
    transform: scale(1.15) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(56,189,248,0.55))
      drop-shadow(0 0 14px rgba(37,99,235,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
  50%  {
    transform: scale(1.20) translateY(-10px);
    filter:
      drop-shadow(0 0 8px rgba(56,189,248,0.65))
      drop-shadow(0 0 20px rgba(37,99,235,0.45))
      drop-shadow(0 12px 40px rgba(20,70,180,0.30));
  }
  100% {
    transform: scale(1.15) translateY(0px);
    filter:
      drop-shadow(0 0 6px rgba(56,189,248,0.55))
      drop-shadow(0 0 14px rgba(37,99,235,0.35))
      drop-shadow(0 8px 30px rgba(20,70,180,0.20));
  }
}

/* Glow ring behind product */
.product-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse, rgba(58,144,212,0.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* ── Dots ── */
.hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.5);
  transition: background var(--trans-fast), transform var(--trans-fast), width 0.3s ease;
  cursor: pointer;
}
.dot.active {
  background: var(--orange-300);
  border-color: var(--orange-300);
  width: 28px;
  border-radius: 6px;
}
.dot:hover { transform: scale(1.25); }

/* ── Arrows ── */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans-fast), transform var(--trans-fast);
}
.hero-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.5px;
  display: block;
  transition: stroke var(--trans-fast);
}
.hero-arrow:hover { background: rgba(58,144,212,0.55); transform: translateY(-50%) scale(1.08); }
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }

/* ── Counter ── */
.hero-counter {
  position: absolute;
  bottom: 32px;
  right: 60px;
  z-index: 10;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.counter-current { color: #fff; font-size: 1.1rem; }
.counter-sep { color: rgba(255,255,255,0.4); margin: 0 2px; }

/* ── Progress bar ── */
.hero-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.18);
  z-index: 10;
}
.hero-progress-bar {
  height: 100%;
  background: var(--grad-blue-orange);
  width: 0%;
  transition: width 0.1s linear;
}

/* ══════════════════════════════════════
   ABOUT STRIP
══════════════════════════════════════ */
.about-strip {
  padding: 90px 0;
  background: linear-gradient(160deg, var(--bg-subtle) 0%, var(--blue-100) 50%, var(--orange-100) 100%);
  position: relative;
  overflow: hidden;
}
.about-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(58,144,212,0.07) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(240,112,32,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}

/* Restructured About page styles */
.about-restructured-section {
  padding: 80px 0;
  background: var(--bg-base);
}

.about-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.about-section-block {
  margin-bottom: 75px; /* Clean vertical spacing between sequential blocks */
}

.about-lead-text {
  font-size: 1.18rem !important;
  line-height: 1.75 !important;
  color: var(--grey-900) !important;
  margin-bottom: 24px;
}

.grid-margin-top {
  margin-top: 48px;
}

.about-glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
  display: flex;
  flex-direction: column;
}

.about-glass-card.hover-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(58, 144, 212, 0.08);
  border-color: rgba(58, 144, 212, 0.35);
}

.about-glass-card.border-orange {
  border: 1px solid rgba(240, 112, 32, 0.25);
  background: #ffffff;
}

.about-glass-card.border-orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(240, 112, 32, 0.08);
  border-color: rgba(240, 112, 32, 0.6);
}

.about-glass-card.flex-row {
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.about-card-icon {
  font-size: 2.2rem;
  background: rgba(240, 112, 32, 0.08);
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-card-text h3 {
  font-size: 1.4rem;
  color: #0b2240;
  margin-bottom: 10px;
  font-weight: 700;
}

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

.card-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--orange-500);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  display: block;
}

.about-glass-card h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b2240;
  margin-bottom: 20px;
}

.about-glass-card p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--grey-700);
  margin-bottom: 16px;
}

.about-glass-card p:last-child {
  margin-bottom: 0;
}

/* Stats grid */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.stat-glass-tile {
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--trans-fast);
}

.stat-glass-tile:hover {
  transform: translateY(-3px);
}

.stat-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.icon-blue { background: rgba(58, 144, 212, 0.08); color: var(--blue-500); }
.icon-green { background: rgba(34, 197, 94, 0.08); color: #22c55e; }
.icon-purple { background: rgba(168, 85, 247, 0.08); color: #a855f7; }

.stat-count-num {
  font-size: 2rem;
  font-weight: 850;
  color: var(--orange-500);
  margin-bottom: 6px;
  display: block;
}

.stat-glass-tile h4 {
  font-size: 0.95rem;
  color: #0b2240;
  font-weight: 700;
}

/* Client logos section */
.clients-scroller-wrap {
  margin-top: 80px;
  padding: 40px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  text-align: center;
}

.section-subheading {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.clients-section-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0b2240;
  margin-bottom: 30px;
}

.clients-logos-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.clients-logos-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.client-logo-item {
  width: 190px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 14px;
  transition: all var(--trans-fast);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
  gap: 8px;
}

.client-logo-item:hover {
  background: var(--blue-100);
  border-color: rgba(58, 144, 212, 0.35);
  transform: translateY(-2px);
}

.client-logo-item img {
  max-width: 100%;
  height: 55px;
  object-fit: contain;
}

.client-logo-item span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0b2240;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

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

@media (max-width: 992px) {
  .about-dual-grid {
    grid-template-columns: 1fr;
  }
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .about-glass-card.flex-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.section-tag {
  display: inline-block;
  font-size: 0.85rem; /* Increased from 0.73rem */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-500);
  background: var(--orange-100);
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  border: 1px solid rgba(240,112,32,0.18);
}

.section-title {
  font-size: clamp(2.0rem, 3.5vw, 3.0rem); /* Increased size range */
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 22px;
  color: var(--grey-900);
}
.section-title .highlight,
.sector-title .highlight,
.solution-title .highlight {
  background: var(--grad-blue-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-text p {
  color: var(--grey-700);
  margin-bottom: 18px;
  font-size: 1.12rem; /* Increased from 0.97rem */
  line-height: 1.8;
}

/* Feature cards */
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform var(--trans-med), box-shadow var(--trans-med), border-color var(--trans-fast);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-blue-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(58,144,212,0.12);
  border-color: var(--blue-300);
}
.feat-icon { font-size: 2.2rem; margin-bottom: 12px; }
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: var(--grey-800); }
.feature-card p { font-size: 0.97rem; color: var(--grey-600); line-height: 1.6; }

/* Buttons */
.btn-primary {
  display: inline-block;
  padding: 15px 36px; /* Increased padding */
  background: var(--grad-blue-orange);
  color: #fff;
  font-size: 1.05rem; /* Increased from 0.9rem */
  font-weight: 700;
  border-radius: 50px;
  margin-top: 8px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px rgba(58,144,212,0.3);
  transition: box-shadow var(--trans-fast), transform var(--trans-fast);
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  box-shadow: 0 8px 32px rgba(58,144,212,0.45);
  transform: translateY(-2px);
}
.btn-primary.full-width { display: block; width: 100%; text-align: center; }

.btn-outline {
  display: inline-block;
  padding: 10px 22px;
  border: 2px solid var(--blue-500);
  color: var(--blue-700);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 50px;
  transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
}
.btn-outline:hover {
  background: var(--blue-500);
  color: #fff;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   PRODUCTS SECTION
══════════════════════════════════════ */
.products-section {
  padding: 90px 0;
  background: var(--bg-base);
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-subtitle {
  font-size: 0.97rem;
  color: var(--grey-600);
  margin-top: 8px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  transition: transform var(--trans-med), box-shadow var(--trans-med);
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(58,144,212,0.14);
}
.product-card.featured {
  border: 1.5px solid var(--orange-500);
  box-shadow: 0 8px 32px rgba(240,112,32,0.1);
}

.product-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--grad-blue-orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 50px;
  z-index: 2;
}

.product-card-img-wrap {
  height: 240px;
  background: linear-gradient(135deg, var(--grey-100) 0%, var(--blue-100) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--grey-200);
}
.product-card-img {
  max-height: 210px;
  max-width: 90%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card-img { transform: scale(1.06); }

.product-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--grey-900);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.product-card-desc {
  font-size: 0.85rem;
  color: var(--grey-600);
  line-height: 1.6;
  margin-bottom: 16px;
  min-height: 64px; /* Align heights */
}
.product-card-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.p-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
}
.p-tag.size {
  background: rgba(58,144,212,0.08);
  color: var(--blue-600);
  border: 1px solid rgba(58,144,212,0.18);
}
.p-tag.stock {
  background: rgba(34,197,94,0.08);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.18);
}

/* Price Section */
.product-card-price {
  margin-top: auto;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
}
.price-lbl {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--grey-500);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.price-current {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--grey-900);
}
.price-original {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: var(--grey-500);
}
.price-save {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-500);
}
.price-custom {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--orange-500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 10px 0;
}

/* Actions Row */
.product-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  padding: 4px;
  background: rgba(0,0,0,0.02);
}
.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--grey-800);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background var(--trans-fast);
}
.qty-btn:hover {
  background: var(--grey-200);
}
.qty-val {
  font-size: 0.95rem;
  font-weight: 700;
  width: 28px;
  text-align: center;
  color: var(--grey-900);
}
.btn-add-to-cart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad-blue-orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  box-shadow: 0 4px 12px rgba(240,112,32,0.15);
}
.btn-add-to-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240,112,32,0.25);
}
.cart-icon {
  stroke: #fff;
}

/* ══════════════════════════════════════
   SECTORS SECTION
══════════════════════════════════════ */
.sectors-section {
  padding: 90px 0;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-base) 100%);
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.sector-tile {
  position: relative;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform var(--trans-med);
}
.sector-tile:hover { transform: translateY(-6px) scale(1.02); }

.sector-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,35,70,0.22) 0%, rgba(10,35,70,0.78) 100%);
  transition: background var(--trans-med);
}
.sector-tile:hover .sector-overlay { background: linear-gradient(180deg, rgba(58,144,212,0.2) 0%, rgba(10,35,70,0.88) 100%); }

.sector-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
  color: #fff;
  z-index: 2;
}
.sector-icon { font-size: 1.8rem; margin-bottom: 8px; }
.sector-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sector-content p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  white-space: normal;
}

/* ══════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════ */
.contact-section {
  padding: 90px 0;
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 50%, #1a4060 100%);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(240,112,32,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(58,144,212,0.25) 0%, transparent 50%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
}

.contact-text .section-tag { color: var(--orange-300); background: rgba(240,112,32,0.15); border-color: rgba(240,112,32,0.25); }
.contact-text .section-title { color: #fff; }
.contact-text p { color: rgba(255,255,255,0.75); font-size: 0.97rem; margin-top: 10px; margin-bottom: 28px; }

.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  line-height: 1.45;
}
.ci-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--orange-400);
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.contact-form-wrap {
  position: relative;
}

.form-lock-overlay.dark-overlay {
  background: rgba(13, 59, 104, 0.65) !important;
  border-radius: var(--radius-lg);
}

.form-lock-overlay.dark-overlay .lock-card {
  background: #0f172a !important; /* Tailwind slate-900 */
  border: 1.5px solid rgba(240, 112, 32, 0.45) !important;
  box-shadow: 0 8px 32px rgba(240, 112, 32, 0.2) !important;
}

.form-lock-overlay.dark-overlay .lock-card h3 {
  color: #ffffff !important;
}

.form-lock-overlay.dark-overlay .lock-card p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.form-success-notice.dark-notice {
  background: rgba(34, 160, 107, 0.12) !important;
  border-color: rgba(34, 160, 107, 0.45) !important;
  color: #a7f3d0 !important;
}

.form-success-notice.dark-notice h4 {
  color: #34d399 !important;
}

.form-success-notice.dark-notice p {
  color: #a7f3d0 !important;
}

.form-group { display: flex; flex-direction: column; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: border-color var(--trans-fast), background var(--trans-fast);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.45); }
.form-group select { color: rgba(255,255,255,0.75); }
.form-group select option { background: var(--blue-900); color: #fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--orange-300);
  background: rgba(255,255,255,0.15);
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background: var(--grey-900);
  padding: 56px 0 0;
  color: rgba(255,255,255,0.75);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo {
  width: 130px; /* Sized to be a neat, small footer badge */
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: #e0f2fe; /* Light blue background for visibility */
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(58,144,212,0.15);
  display: inline-block;
}
.footer-brand p { font-size: 0.97rem; line-height: 1.7; max-width: 320px; color: rgba(255,255,255,0.65); }

.footer-links h4,
.footer-sectors h4,
.footer-legal h4 {
  font-size: 0.95rem; /* Increased from 0.83rem */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
}
.footer-links a,
.footer-sectors a,
.footer-legal a {
  display: block;
  font-size: 1.0rem; /* Increased from 0.88rem */
  color: rgba(255,255,255,0.8);
  margin-bottom: 10px;
  transition: color var(--trans-fast);
}
.footer-links a:hover,
.footer-sectors a:hover,
.footer-legal a:hover { color: var(--orange-300); }

.footer-bottom {
  padding: 18px 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ══════════════════════════════════════
   SCROLL REVEAL ANIMATION
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: 1fr 1fr; }
  .sectors-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { gap: 40px; }
}

/* ─── Laptop & Medium Screens Navigation (1025px to 1365px) ─── */
@media (min-width: 1025px) and (max-width: 1365px) {
  .nav-inner {
    padding: 0 10px;
  }
  .logo-img {
    width: 125px !important;
  }
  .nav-links {
    margin-left: 4px;
    gap: 0px;
  }
  .nav-item {
    padding: 5px 6px;
    font-size: 0.82rem;
  }
  .nav-item .nav-icon {
    font-size: 0.80rem;
  }
  .nav-right-actions {
    gap: 6px;
  }
  .nav-login-btn {
    padding: 5px 10px;
    font-size: 0.80rem;
    display: flex !important;
  }
  .nav-cta {
    padding: 7px 11px;
    font-size: 0.80rem;
  }
}

/* ─── Tablet & Mobile Navigation (<= 1024px) ─── */
@media (max-width: 1024px) {
  :root { --nav-h: 64px; }
  .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-base) !important;
  }
  .nav-inner {
    padding: 0 12px;
  }
  .logo-img {
    width: 130px;
    height: auto;
  }

  /* Body backdrop overlay when menu is open */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(30, 28, 26, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 950;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  body.nav-menu-open::after {
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-menu-open {
    overflow: hidden;
  }

  /* Hamburger anim active transition */
  .hamburger span {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 96px;
    right: -300px;
    width: 280px;
    background: rgba(240,238,235,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 80px 24px 20px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    z-index: 1500;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    gap: 8px;
    visibility: hidden;
  }
  
  .nav-right-actions {
    display: flex !important;
    margin-left: auto;
    align-items: center;
    gap: 12px;
  }

  .nav-right-actions:not(.open) .nav-login-btn {
    display: flex !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    align-items: center;
  }
  .nav-right-actions:not(.open) .nav-login-btn span {
    display: none;
  }
  .nav-right-actions:not(.open) .nav-cta {
    display: none;
  }

  /* Clearer mobile header icons */
  .nav-cart-btn svg,
  .nav-login-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    z-index: 2000;
  }

  .nav-links.open {
    right: 0;
    visibility: visible;
  }

  .nav-right-actions.open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    right: -300px;
    width: 280px;
    height: auto;
    background: rgba(240,238,235,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 24px max(24px, env(safe-area-inset-bottom));
    box-shadow: -10px 10px 30px rgba(0,0,0,0.05);
    z-index: 1500;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 1px solid var(--grey-200);
    gap: 12px;
    align-items: stretch;
    margin: 0;
  }

  .nav-right-actions.open.open {
    right: 0;
  }

  .nav-right-actions.open .nav-login-btn,
  .nav-right-actions.open .nav-cta {
    display: flex !important;
    justify-content: center;
    text-align: center;
    flex: 1;
    width: 100%;
  }

  .nav-right-actions.open .nav-login-btn {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    width: auto;
    height: auto;
  }
  .nav-right-actions.open .nav-login-btn span {
    display: inline !important;
  }

  .nav-right-actions.open .nav-cta {
    padding: 12px 22px;
    border-radius: var(--radius-sm);
  }

  .nav-right-actions.open .nav-cart-btn {
    display: none;
  }

  .slide-content {
    flex-direction: column;
    padding: 10px 20px 55px;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    gap: 0;
    height: 100%;
  }
  .slide-product {
    width: 100%;
    max-width: 280px;
    height: 200px;
    margin: 0 auto 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0) !important;
    order: -1;
    flex-shrink: 0;
    position: relative;
  }
  #product-domestic .product-img,
  #product-hotel .product-img,
  #product-industry .product-img,
  #product-agriculture .product-img,
  #product-poultry .product-img,
  .slide-product .product-img {
    transform: none !important;
    max-height: 195px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 20px rgba(58,144,212,0.55)) !important;
  }

  /* ── Mobile: remove glowing background box from Domestic & Animal Husbandry product images ── */
  /* The product-glow div + heavy drop-shadow creates a visible coloured rectangle on small screens.
     On mobile we want only the product + pipe visible, blending into the hero background image. */
  #product-domestic .product-glow,
  #product-poultry .product-glow {
    display: none !important;
  }
  #product-domestic .product-img,
  #product-poultry .product-img {
    filter: none !important;
    background: transparent !important;
  }
  #slide-industry.active #product-industry .product-img,
  #slide-poultry.active #product-poultry .product-img,
  #slide-agriculture.active #product-agriculture .product-img,
  #slide-hotel.active #product-hotel .product-img,
  .hero-slide.active .product-img {
    animation: mobileProductFloat 3.5s ease-in-out infinite !important;
  }
  @keyframes mobileProductFloat {
    0%   { transform: translateY(0px) !important; }
    50%  { transform: translateY(-5px) !important; }
    100% { transform: translateY(0px) !important; }
  }
  .slide-stats { justify-content: center; gap: 14px; margin-bottom: 14px; }
  .slide-actions { justify-content: center; gap: 10px; }
  .hero-arrow {
    width: 36px;
    height: 36px;
    background: rgba(30, 28, 26, 0.45);
    border-color: rgba(255, 255, 255, 0.3);
    top: 35%;
  }
  .hero-arrow svg {
    width: 16px;
    height: 16px;
    stroke-width: 3px;
  }
  .hero-arrow-prev { left: 10px; }
  .hero-arrow-next { right: 10px; }
  .hero-counter { display: none; }

  /* Mobile hero dots sizing override */
  .dot {
    width: 8px;
    height: 8px;
    border-width: 1px;
  }
  .dot.active {
    width: 20px;
    height: 8px;
    border-radius: 4px;
  }

  .about-grid { grid-template-columns: 1fr; }
  .about-features { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  .about-features { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr; }
  .slide-stats { gap: 10px; }
  .slide-title { font-size: 1.5rem; line-height: 1.15; margin-bottom: 6px; }
  .slide-desc { font-size: 0.84rem; line-height: 1.4; margin-bottom: 10px; }
  .slide-product {
    max-width: 250px;
    height: 180px;
    margin-bottom: 6px;
  }
  #product-domestic .product-img,
  #product-hotel .product-img,
  #product-industry .product-img,
  #product-agriculture .product-img,
  #product-poultry .product-img,
  .slide-product .product-img {
    max-height: 175px !important;
  }
  /* Remove glow background box on very small screens too */
  #product-domestic .product-glow,
  #product-poultry .product-glow {
    display: none !important;
  }
  #product-domestic .product-img,
  #product-poultry .product-img {
    filter: none !important;
    background: transparent !important;
  }
}

/* Subpage Hero */
.subpage-hero {
  padding: 160px 0 80px;
  background: var(--grey-900);
  background-image: var(--grad-hero-overlay), radial-gradient(circle at 80% 20%, rgba(58,144,212,0.15) 0%, transparent 50%);
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.subpage-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.subpage-subtitle {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.7);
  max-width: 650px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .subpage-hero { padding: 120px 0 60px; }
  .subpage-title { font-size: 2.2rem; }
  .subpage-subtitle { font-size: 1rem; }
}

/* ══════════════════════════════════════
   TECHNOLOGY SECTION
══════════════════════════════════════ */
.tech-section {
  padding: 90px 0;
  background: var(--bg-subtle);
  position: relative;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tech-card {
  background: var(--bg-card);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  transition: transform var(--trans-med), box-shadow var(--trans-med);
}
.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(58,144,212,0.08);
}
.tech-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(58,144,212,0.15);
  margin-bottom: 16px;
  font-family: var(--font-main);
  line-height: 1;
}
.tech-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 12px;
}
.tech-card p {
  font-size: 0.9rem;
  color: var(--grey-600);
  line-height: 1.6;
}

/* ══════════════════════════════════════
   BLOG SECTION
══════════════════════════════════════ */
.blog-section {
  padding: 90px 0;
  background: var(--bg-base);
  position: relative;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans-med), box-shadow var(--trans-med);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}
.blog-img-wrap {
  height: 200px;
  overflow: hidden;
}
.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-slow);
}
.blog-card:hover .blog-img {
  transform: scale(1.05);
}
.blog-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.blog-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--grey-900);
  line-height: 1.4;
  margin-bottom: 12px;
}
.blog-body p {
  font-size: 0.88rem;
  color: var(--grey-600);
  line-height: 1.6;
  margin-bottom: 16px;
}
.blog-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: none;
  margin-top: auto;
  transition: color var(--trans-fast);
}
.blog-link:hover {
  color: var(--orange-500);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   INTRODUCTION SECTION
══════════════════════════════════════ */
.intro-section {
  padding: 90px 0;
  background: var(--bg-base);
  position: relative;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.intro-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--grey-800);
  margin-bottom: 28px;
}
.intro-bullets {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro-bullet-item {
  display: flex;
  gap: 16px;
}
.bullet-icon {
  color: var(--blue-500);
  background: rgba(58,144,212,0.08);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bullet-icon svg {
  width: 22px;
  height: 22px;
}
.intro-bullet-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 4px;
}
.intro-bullet-item p {
  font-size: 0.9rem;
  color: var(--grey-600);
  line-height: 1.5;
}

/* Media styling with orange border & blue glow */
.intro-media-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.intro-video-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: transform var(--trans-fast);
}

.intro-video-card:hover {
  transform: translateY(-3px);
}

.video-card-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  /* Black base with blue-orange gradient on keyword — same as .section-title */
  color: var(--grey-900);
}

.video-card-title .vc-highlight {
  background: var(--grad-blue-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pdf-brochure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: #f07020;
  color: #ffffff;
  text-decoration: none;
  border-radius: 60px;
  padding: 16px 45px;
  box-shadow: 0 8px 24px rgba(240, 112, 32, 0.3);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background-color var(--trans-fast);
  width: 100%;
  max-width: 460px;
}

.pdf-brochure-btn:hover {
  transform: translateY(-2px);
  background-color: #d65c12;
  box-shadow: 0 12px 28px rgba(240, 112, 32, 0.45);
}

.dl-icon {
  color: #ffffff;
  flex-shrink: 0;
}

.btn-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.btn-line-1 {
  font-size: 1.1rem;
  font-weight: 400;
}

.btn-line-2 {
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: capitalize;
}

@media (max-width: 1024px) {
  .intro-grid { gap: 32px; }
}
@media (max-width: 768px) {
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ══════════════════════════════════════
   SECTORS DETAILED CONTENT
   ══════════════════════════════════════ */
.sectors-detail-section {
  padding: 80px 0;
  background: var(--bg-base);
}

.sector-detail-block {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 80px;
  scroll-margin-top: 100px;
}

.sector-detail-block:nth-of-type(even) {
  grid-template-columns: 0.85fr 1.15fr;
}
.sector-detail-block:nth-of-type(even) .sector-text-content {
  order: 2;
}
.sector-detail-block:nth-of-type(even) .sector-media-side {
  order: 1;
}

.sector-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(240, 112, 32, 0.08);
  color: #f07020;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.sector-title {
  font-size: 2.2rem;
  color: #0b2240;
  margin-bottom: 20px;
  font-weight: 800;
}

.sector-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--grey-800);
  margin-bottom: 25px;
}

.problem-highlights h3 {
  font-size: 1.15rem;
  color: #0b2240;
  font-weight: 700;
  margin-bottom: 15px;
}

.problem-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.problem-highlights li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-700);
}

.problem-highlights li::before {
  content: "⚠";
  position: absolute;
  left: 0;
  top: 1px;
  color: #f07020;
  font-weight: 700;
  font-size: 1rem;
}

.sector-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1025px) {
  .sector-detail-block {
    align-items: center !important;
  }
  .sector-media-side {
    margin-top: 0 !important;
    align-self: center !important;
  }
}

/* Single Large Product Card in Sector Sections */
.single-product-grid {
  grid-template-columns: 1fr !important;
  max-width: 460px !important;
  width: 100% !important;
  margin: 0 auto;
}

.single-product-card {
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--grey-200) !important;
  background: #ffffff !important;
  overflow: hidden;
}

.single-product-card img {
  height: 280px !important;
  object-fit: contain !important;
  padding: 20px !important;
  background: #ffffff !important;
  transition: transform 0.3s ease;
}

.single-product-card:hover img {
  transform: scale(1.05);
}

.single-product-card span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  color: #0b2240 !important;
  text-align: center;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0 !important;
}

.media-card {
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  display: flex;
  flex-direction: column;
}

.media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.media-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.media-card span {
  display: block;
  padding: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey-700);
  text-align: center;
  border-top: 1px solid var(--grey-100);
}

.sector-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grey-200), transparent);
  margin: 60px 0;
}

/* ULTIMATE SOLUTION SECTION */
.ultimate-solution-section {
  padding: 90px 0;
  background: linear-gradient(180deg, #ffffff 0%, rgba(240, 112, 32, 0.03) 100%);
  border-top: 1px solid var(--grey-100);
}

.solution-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.solution-tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(58, 144, 212, 0.08);
  color: #3a90d4;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.solution-title {
  font-size: 2.5rem;
  color: #0b2240;
  margin-bottom: 20px;
  font-weight: 800;
}

.solution-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--grey-800);
}

.solution-detail-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.solution-text-block p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--grey-800);
  margin-bottom: 30px;
}

.solution-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sol-bullet-item {
  display: flex;
  gap: 16px;
}

.sol-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f07020;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(240, 112, 32, 0.3);
}

.sol-bullet-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0b2240;
  margin-bottom: 4px;
}

.sol-bullet-item p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-600);
}

.solution-images-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Remove first-child stretching to maintain a balanced 2x2 grid */
.solution-images-row .solution-media-card:first-child {
  grid-column: span 1;
}

.solution-media-card {
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  display: flex;
  flex-direction: column;
}

.solution-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.solution-media-card img {
  width: 100%;
  height: 135px;
  object-fit: cover;
}

.solution-images-row .solution-media-card:first-child img {
  height: 135px;
}

.sol-card-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  border-top: 1px solid var(--grey-100);
  background: #ffffff;
}

.sol-card-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0b2240;
  margin: 0;
  line-height: 1.3;
}

.sol-card-content p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--grey-600);
  margin: 0;
}

@media (max-width: 1024px) {
  .sector-detail-block, 
  .sector-detail-block:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .sector-detail-block:nth-of-type(even) .sector-text-content,
  .sector-detail-block:nth-of-type(even) .sector-media-side {
    order: unset;
  }
  .solution-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


@media (max-width: 576px) {
  .sector-media-grid, 
  .solution-images-row {
    grid-template-columns: 1fr;
  }
  .solution-images-row .solution-media-card:first-child {
    grid-column: span 1;
  }
  .media-card img, 
  .solution-media-card img,
  .solution-images-row .solution-media-card:first-child img {
    height: 160px;
  }
  .sector-title {
    font-size: 1.8rem;
  }
  .solution-title {
    font-size: 2rem;
  }
}

/* ══════════════════════════════════════
   TECHNOLOGY PAGE EXTRAS
   ══════════════════════════════════════ */
.tech-intro-section {
  padding: 80px 0;
  background: var(--bg-base);
}

.tech-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.tech-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--grey-900);
  margin-bottom: 20px;
}

.tech-intro-visuals {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tech-micro-card {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--grey-200);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  min-height: 120px;
}

.tech-micro-card img {
  width: 140px;
  align-self: stretch;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}

.card-desc {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-desc h4 {
  font-size: 1.05rem;
  color: #0b2240;
  margin-bottom: 6px;
  font-weight: 700;
}

.card-desc p {
  font-size: 0.85rem;
  color: var(--grey-600);
  line-height: 1.4;
  margin: 0;
}

/* Pipe slider styles */
.interactive-slider-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
}

.pipe-slider-wrapper {
  max-width: 900px;
  margin: 40px auto 0 auto;
  position: relative;
}

.pipe-comparison-container {
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  user-select: none;
  cursor: ew-resize;
}

.pipe-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pipe-clogged {
  background: linear-gradient(180deg, #091322 0%, #1a2a47 50%, #0f1c30 100%);
  z-index: 2;
  width: 50%;
  border-right: 2px solid #ffffff;
}

.pipe-clean {
  background: linear-gradient(180deg, #07172e 0%, #173884 50%, #0384c7 100%);
  z-index: 1;
}

.pipe-wall {
  height: 28px;
  width: 100%;
}

.top-wall {
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border-bottom: 1px solid #475569;
}

.bottom-wall {
  background: linear-gradient(0deg, #64748b 0%, #334155 100%);
  border-top: 1px solid #475569;
}

.pipe-water-flow,
.home-water-flow {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Limescale visual elements */
.scale-buildup {
  position: absolute;
  background: linear-gradient(90deg, #ca8a04 0%, #854d0e 100%);
  opacity: 0.85;
}

.top-scale {
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  border-radius: 0 0 10px 10px;
  border-bottom: 3px solid #713f12;
}

.bottom-scale {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  border-radius: 10px 10px 0 0;
  border-top: 3px solid #713f12;
}

/* Floating microbes and realistic water currents */
.pathogen-organism {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pathogen-svg {
  width: 100%;
  height: 100%;
}

/* Individual roaming / swimming patterns for pathogens */
.p1 {
  top: 35px;
  animation: flowPathogen1 12s infinite linear;
}
.p2 {
  top: 110px;
  animation: flowPathogen2 14s infinite linear;
  animation-delay: 2.5s;
}
.p3 {
  top: 60px;
  animation: flowPathogen3 11s infinite linear;
  animation-delay: 5s;
}
.p4 {
  top: 125px;
  animation: flowPathogen4 15s infinite linear;
  animation-delay: 1s;
}

@keyframes flowPathogen1 {
  0% {
    left: -15%;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  25% { transform: translateY(-12px) rotate(20deg) scale(1.05); }
  50% { transform: translateY(12px) rotate(-15deg) scale(0.95); }
  75% { transform: translateY(-8px) rotate(25deg) scale(1.03); }
  90% { opacity: 0.85; }
  100% {
    left: 115%;
    transform: translateY(0) rotate(90deg) scale(1);
    opacity: 0;
  }
}

@keyframes flowPathogen2 {
  0% {
    left: -15%;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  33% { transform: translateY(15px) rotate(-25deg) scale(0.95); }
  66% { transform: translateY(-15px) rotate(30deg) scale(1.1); }
  90% { opacity: 0.85; }
  100% {
    left: 115%;
    transform: translateY(0) rotate(-60deg) scale(1);
    opacity: 0;
  }
}

@keyframes flowPathogen3 {
  0% {
    left: -15%;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  20% { transform: translateY(10px) rotate(15deg) scale(1.05); }
  45% { transform: translateY(-15px) rotate(-20deg) scale(0.9); }
  75% { transform: translateY(8px) rotate(30deg) scale(1.05); }
  90% { opacity: 0.85; }
  100% {
    left: 115%;
    transform: translateY(0) rotate(120deg) scale(1);
    opacity: 0;
  }
}

@keyframes flowPathogen4 {
  0% {
    left: -15%;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  40% { transform: translateY(-18px) rotate(35deg) scale(1.1); }
  70% { transform: translateY(18px) rotate(-25deg) scale(0.95); }
  90% { opacity: 0.85; }
  100% {
    left: 115%;
    transform: translateY(0) rotate(90deg) scale(1);
    opacity: 0;
  }
}

/* Scale buildup particles that drift and stick to the walls */
.scale-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #f1ebd9; /* Calcite/beige color */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(241, 235, 217, 0.8));
}

.sp1 { animation: floatAndStick1 7s infinite linear; }
.sp2 { animation: floatAndStick2 9s infinite linear; animation-delay: 1.5s; }
.sp3 { animation: floatAndStick3 6s infinite linear; animation-delay: 3s; }
.sp4 { animation: floatAndStick4 8s infinite linear; animation-delay: 0.8s; }
.sp5 { animation: floatAndStick5 10s infinite linear; animation-delay: 2.2s; }
.sp6 { animation: floatAndStick6 7.5s infinite linear; animation-delay: 4s; }

@keyframes floatAndStick1 {
  0% { left: -5%; top: 45%; opacity: 0; transform: scale(0.6); }
  10% { opacity: 0.9; }
  65% { left: 40%; top: 18%; opacity: 0.95; }
  75% { left: 43%; top: 14%; opacity: 1; transform: scale(1.2); }
  95% { left: 43%; top: 14%; opacity: 1; }
  100% { left: 43%; top: 14%; opacity: 0; }
}

@keyframes floatAndStick2 {
  0% { left: -5%; top: 55%; opacity: 0; transform: scale(0.7); }
  10% { opacity: 0.9; }
  60% { left: 55%; top: 82%; opacity: 0.95; }
  70% { left: 58%; top: 86%; opacity: 1; transform: scale(1.3); }
  95% { left: 58%; top: 86%; opacity: 1; }
  100% { left: 58%; top: 86%; opacity: 0; }
}

@keyframes floatAndStick3 {
  0% { left: -5%; top: 38%; opacity: 0; transform: scale(0.5); }
  10% { opacity: 0.9; }
  70% { left: 70%; top: 16%; opacity: 0.95; }
  80% { left: 73%; top: 13%; opacity: 1; transform: scale(1.1); }
  95% { left: 73%; top: 13%; opacity: 1; }
  100% { left: 73%; top: 13%; opacity: 0; }
}

@keyframes floatAndStick4 {
  0% { left: -5%; top: 62%; opacity: 0; transform: scale(0.8); }
  10% { opacity: 0.9; }
  55% { left: 32%; top: 83%; opacity: 0.95; }
  65% { left: 34%; top: 87%; opacity: 1; transform: scale(1.4); }
  95% { left: 34%; top: 87%; opacity: 1; }
  100% { left: 34%; top: 87%; opacity: 0; }
}

@keyframes floatAndStick5 {
  0% { left: -5%; top: 50%; opacity: 0; transform: scale(0.6); }
  10% { opacity: 0.9; }
  72% { left: 78%; top: 82%; opacity: 0.95; }
  82% { left: 81%; top: 86%; opacity: 1; transform: scale(1.2); }
  95% { left: 81%; top: 86%; opacity: 1; }
  100% { left: 81%; top: 86%; opacity: 0; }
}

@keyframes floatAndStick6 {
  0% { left: -5%; top: 42%; opacity: 0; transform: scale(0.5); }
  10% { opacity: 0.9; }
  62% { left: 50%; top: 17%; opacity: 0.95; }
  72% { left: 53%; top: 13%; opacity: 1; transform: scale(1.1); }
  95% { left: 53%; top: 13%; opacity: 1; }
  100% { left: 53%; top: 13%; opacity: 0; }
}

/* Water Flow Currents Styling */
.water-current-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, rgba(56, 189, 248, 0.02) 50%, rgba(14, 165, 233, 0.08) 100%);
}

.water-current-svg {
  width: 100%;
  height: 100%;
}

.current-line {
  animation: flowWater 4s infinite linear;
}

.c1 { stroke-dasharray: 80 120; animation-duration: 2.8s; }
.c2 { stroke-dasharray: 120 180; animation-duration: 4.2s; }
.c3 { stroke-dasharray: 100 140; animation-duration: 3.2s; }
.c4 { stroke-dasharray: 90 130; animation-duration: 3.8s; }
.c5 { stroke-dasharray: 150 200; animation-duration: 4.8s; }
.c6 { stroke-dasharray: 110 160; animation-duration: 3.5s; }
.c7 { stroke-dasharray: 130 170; animation-duration: 4s; }

@keyframes flowWater {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

/* Water Flow Bubbles */
.water-bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.wb1 { width: 5px; height: 5px; top: 75%; animation: floatBubble 5.5s infinite linear; }
.wb2 { width: 7px; height: 7px; top: 35%; animation: floatBubble 4.8s infinite linear 1.2s; }
.wb3 { width: 4px; height: 4px; top: 55%; animation: floatBubble 6.2s infinite linear 2.5s; }
.wb4 { width: 6px; height: 6px; top: 20%; animation: floatBubble 4.2s infinite linear 0.7s; }
.wb5 { width: 5px; height: 5px; top: 60%; animation: floatBubble 5.2s infinite linear 1.8s; }

@keyframes floatBubble {
  0% { left: -5%; transform: translateY(0) scale(0.6); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(-6px) scale(1); }
  90% { opacity: 0.8; }
  100% { left: 105%; transform: translateY(-12px) scale(0.6); opacity: 0; }
}

.water-label {
  position: absolute;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 5;
  white-space: nowrap;
}

.label-clogged {
  background: rgba(220, 38, 38, 0.95);
  left: 20px;
  bottom: 20px;
  border: 1px solid rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
}

.label-clean {
  background: rgba(16, 185, 129, 0.95);
  right: 20px;
  bottom: 20px;
  white-space: nowrap;
  border: 1px solid rgba(110, 231, 183, 0.6);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Murky, Slow, Uneven Water Flow on Untreated side */
.murky-flow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0.02) 50%, rgba(56, 189, 248, 0.05) 100%);
}

.murky-flow-svg {
  width: 100%;
  height: 100%;
}

.murky-line {
  stroke-dasharray: 50 180;
  animation: flowMurkyWater 11s infinite linear;
}

.ml1 { animation-duration: 9.5s; }
.ml2 { animation-duration: 12s; }
.ml3 { animation-duration: 10.5s; }

@keyframes flowMurkyWater {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}

/* Drag handle indicator */
.slider-drag-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f07020;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
  margin-left: -22px;
  margin-top: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background-color 0.2s;
}

.drag-arrows {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
}

.pipe-comparison-container:hover .slider-drag-handle {
  background: #d65c12;
}

/* Frequency Visualizer Section */
.wave-visualizer-section {
  padding: 80px 0;
  background: #ffffff;
}

.visualizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.visualizer-box {
  background: #0f172a;
  border-radius: 20px;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.device-clamp-illustration {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.device-clamp-box {
  background: linear-gradient(135deg, #f07020 0%, #d65c12 100%);
  padding: 10px 24px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(240, 112, 32, 0.4);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulseLight 1s infinite alternate;
}

@keyframes pulseLight {
  0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 8px 3px rgba(74, 222, 128, 0.8); }
}

canvas#waveCanvas {
  width: 100%;
  height: 120px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  display: block;
}

.visualizer-status {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: monospace;
  border-top: 1px solid #334155;
  padding-top: 15px;
}

.status-active {
  color: #4ade80;
}

.frequency-text {
  color: #38bdf8;
}

.frequency-highlights ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.frequency-highlights li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-700);
}

.frequency-highlights li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 1px;
  color: #f07020;
  font-weight: 700;
}


/* Homepage Before-After Slider Section */
.home-slider-section {
  padding: 100px 0;
  background: var(--bg-base);
  border-bottom: 2px solid var(--grey-200);
}

.slider-intro-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

.slider-intro-header .section-subtitle {
  font-size: 1.15rem;
  color: var(--grey-600);
  margin-top: 12px;
}

.home-slider-wrapper {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.home-comparison-container {
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(10, 35, 70, 0.15);
  user-select: none;
  cursor: ew-resize;
  border: 1px solid var(--grey-300);
}

.home-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Red/Brown Clogged Untreated State (Overlay) */
.home-clogged {
  background: #111215;
  z-index: 2;
  width: 50%;
  border-right: 2px solid #ffffff;
}

.red-water {
  background: linear-gradient(180deg, #091322 0%, #1a2a47 50%, #0f1c30 100%);
  width: 100%;
  position: relative;
}

/* Green Clean Polarized State (Background) */
.home-clean {
  background: #0b1528;
  z-index: 1;
}

.green-water {
  background: linear-gradient(180deg, #07172e 0%, #173884 50%, #0384c7 100%);
  width: 100%;
  position: relative;
}

/* Container for water visualization inside flow */
.clogged-pipe-box,
.clean-pipe-box {
  width: 960px; /* Locked to the max width to avoid stretching visuals while sliding */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.flow-label-top {
  position: absolute;
  top: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 4px;
  z-index: 5;
}

.home-clogged .flow-label-top {
  background: rgba(185, 28, 28, 0.85);
  color: #ff8b8b;
  border: 1px solid rgba(239, 68, 68, 0.4);
  left: 24px;
}

.home-clean .flow-label-top {
  background: rgba(16, 185, 129, 0.85);
  color: #a7f3d0;
  border: 1px solid rgba(52, 211, 153, 0.4);
  right: 24px;
}

/* Irregular Limescale blocks styling */
.scale-block {
  position: absolute;
  background: linear-gradient(135deg, #78350f 0%, #451a03 100%);
  border: 2px solid #92400e;
  border-radius: 8px;
  opacity: 0.85;
}

.sb1 {
  top: 50px;
  right: 180px;
  width: 140px;
  height: 80px;
}

.sb2 {
  bottom: 50px;
  right: 280px;
  width: 110px;
  height: 70px;
}

.sb3 {
  top: 110px;
  right: 80px;
  width: 100px;
  height: 60px;
}

/* Bacteria particle styling with pointing labels */
.bug-particle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #ef4444;
  opacity: 0.9;
}

.b1 {
  top: 80px;
  right: 420px;
  animation: jitterBug 0.4s infinite alternate;
}

.b2 {
  bottom: 110px;
  right: 150px;
  animation: jitterBug 0.5s infinite alternate-reverse;
}

/* Algae particle styling with pointers */
.algae-particle {
  position: absolute;
  width: 18px;
  height: 12px;
  background: #15803d;
  border-radius: 40%;
  box-shadow: 0 0 10px #22c55e;
  opacity: 0.8;
}

.alg1 {
  top: 150px;
  right: 320px;
  animation: driftAlgae 4s infinite ease-in-out;
}

.alg2 {
  bottom: 80px;
  right: 480px;
  animation: driftAlgae 5s infinite ease-in-out 1s;
}

/* Tooltip labels in Red Untreated Phase */
.tooltip-lbl {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: #fca5a5;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.sb1 .tooltip-lbl {
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.sb1 .arrow-indicator {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  color: #ef4444;
  font-size: 0.75rem;
}

.bug-particle .tooltip-lbl {
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
}

.bug-particle .line-ptr {
  position: absolute;
  width: 1px;
  height: 12px;
  background: #ef4444;
  top: -12px;
  left: 50%;
}

.algae-particle .tooltip-lbl {
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
}

.algae-particle .line-ptr {
  position: absolute;
  width: 1px;
  height: 12px;
  background: #22c55e;
  bottom: -12px;
  left: 50%;
}

/* Safe Aragonite Micro-particles inside Green Phase */
.safe-aragonite {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #86efac;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  opacity: 0.85;
}

.ap1 { top: 70px; left: 120px; animation: floatGreen 4s infinite linear; }
.ap2 { top: 150px; left: 80px; animation: floatGreen 3.2s infinite linear 0.8s; }
.ap3 { top: 220px; left: 160px; animation: floatGreen 4.8s infinite linear 1.2s; }
.ap4 { top: 100px; left: 240px; animation: floatGreen 3.6s infinite linear 0.4s; }
.ap5 { top: 180px; left: 280px; animation: floatGreen 4.2s infinite linear 1.6s; }

/* Optional HydroPulse device clamp overlay in green area */
.device-clamp-tag {
  position: absolute;
  top: 50px;
  left: 30px;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: 1px solid #34d399;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 850;
  padding: 4px 10px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Flow stats text absolute placements */
.water-loss-stat {
  position: absolute;
  bottom: 50px;
  left: 24px;
  color: #fca5a5;
  font-size: 0.9rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  border-left: 3px solid #ef4444;
  padding-left: 8px;
}

.water-win-stat {
  position: absolute;
  bottom: 50px;
  right: 24px;
  color: #a7f3d0;
  font-size: 0.9rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  border-left: 3px solid #10b981;
  padding-left: 8px;
}

/* Phase watermark labels at very bottom corners of layers */
.bottom-phase-label {
  position: absolute;
  bottom: 16px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 2px;
  opacity: 1;
}

.label-before {
  color: #ff6b6b;
  left: 24px;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.8), 0 0 2px rgba(0, 0, 0, 0.8);
}

.label-after {
  color: #3dfcbe;
  right: 24px;
  text-shadow: 0 0 12px rgba(61, 252, 190, 0.8), 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Drag handle indicator */
.home-drag-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #10b981;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
  margin-left: -24px;
  margin-top: 96px; /* Centered relative to 240px height */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: border-color var(--trans-fast), transform var(--trans-fast);
}

.home-comparison-container:hover .home-drag-handle {
  border-color: #ef4444;
  transform: scale(1.06);
}

/* Call to action below comparison scroller */
.slider-attraction-footer {
  text-align: center;
  max-width: 820px;
  margin: 40px auto 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 20px 0 0 0;
  box-shadow: none;
}

.slider-attraction-footer h3 {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0b2240;
  margin-bottom: 16px;
  line-height: 1.3;
}

.slider-attraction-footer h3 .highlight {
  background: var(--grad-blue-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.slider-attraction-footer p {
  font-size: 1.12rem;
  color: var(--grey-600);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* Animations for comparison elements */
@keyframes jitterBug {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-8px) scale(1.15) rotate(15deg); }
  100% { transform: translateY(3px) scale(0.95) rotate(-15deg); }
}

@keyframes driftAlgae {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15px, -10px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes floatGreen {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  10% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { transform: translateX(60px) translateY(-10px); opacity: 0; }
}

/* Tech Stages Side-by-Side */
.tech-stages-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
}

.stages-interactive-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  margin-top: 40px;
}

.stages-nav-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stage-nav-item {
  background: #ffffff;
  border: 1.5px solid var(--grey-200);
  border-radius: 16px;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  transition: all var(--trans-fast);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.stage-nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: transparent;
  transition: background-color var(--trans-fast);
}

.stage-nav-item.active {
  border-color: #0284c7;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
}

.stage-nav-item.active::before {
  background-color: #0284c7;
}

.stage-step-num {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stage-nav-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0b2240;
  margin: 0;
}

.stage-nav-item p {
  font-size: 0.85rem;
  color: var(--grey-600);
  line-height: 1.4;
  margin: 0;
}

.stages-visuals-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 24px;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  min-height: 380px;
  position: relative; /* Added relative positioning to anchor absolute arrows */
}

/* Stage Arrow Buttons styling */
.stage-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1.5px solid var(--grey-200);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  z-index: 10;
  transition: all var(--trans-fast);
  color: var(--blue-700);
  font-size: 1.25rem;
  font-weight: bold;
}
.stage-arrow-btn:hover {
  background: var(--blue-50);
  border-color: var(--blue-300);
  color: var(--blue-800);
  transform: translateY(-50%) scale(1.05);
}
.stage-arrow-btn.prev-btn {
  left: 12px;
}
.stage-arrow-btn.next-btn {
  right: 12px;
}

.stage-diagram-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-diagram {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  animation: fadeIn 0.4s ease-out;
}

.stage-diagram.active {
  display: flex;
}

/* Stages Timeline sequential blocks */
.stages-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 50px;
}

.stage-timeline-item {
  display: grid;
  grid-template-columns: 1fr 1.50fr;
  gap: 40px;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.stage-timeline-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03);
}

.stage-timeline-item.reverse {
  grid-template-columns: 1.50fr 1fr;
}

.stage-timeline-item.reverse .stage-svg-column {
  order: 2;
}

.stage-svg-column {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.stage-svg-wrap {
  background: #f8fafc;
  border: 1px solid var(--grey-200);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.stage-svg-wrap svg {
  width: 100%;
  height: auto;
}

.stage-info-column {
  text-align: left;
}

.stage-timeline-num {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0070f3;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 8px;
}

.stage-info-column h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0b2240;
  margin-top: 0;
  margin-bottom: 12px;
}

.stage-info-column p {
  font-size: 0.88rem;
  color: var(--grey-600);
  line-height: 1.55;
  margin: 0;
}

/* Science Breakdown Section - Alternating Rows */
.science-breakdown-section {
  padding: 80px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--grey-100);
}

.science-rows-container {
  display: flex;
  flex-direction: column;
  gap: 75px;
  margin-top: 50px;
}

.science-row-item {
  display: grid;
  grid-template-columns: 1fr 1.20fr;
  gap: 50px;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  scroll-margin-top: calc(var(--nav-h) + 30px);
}

.science-row-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.science-row-item.reverse {
  grid-template-columns: 1.20fr 1fr;
}

.science-row-item.reverse .science-img-wrap {
  order: 2;
}

.science-img-wrap {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  height: 260px;
  border: 1px solid var(--grey-100);
}

.science-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-medium);
}

.science-row-item:hover .science-img-wrap img {
  transform: scale(1.03);
}

.science-body {
  display: flex;
  flex-direction: column;
}

.science-body h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0b2240;
  margin-top: 0;
  margin-bottom: 20px;
}

.science-comparison {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comparison-block {
  padding-left: 18px;
  position: relative;
}

.comparison-block h5 {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  margin-top: 0;
}

.comparison-block p {
  font-size: 0.85rem;
  color: var(--grey-600);
  line-height: 1.55;
  margin: 0;
}

.comparison-block.threat {
  border-left: 3px solid #ef4444;
}

.comparison-block.threat h5 {
  color: #ef4444;
}

.comparison-block.solution {
  border-left: 3px solid #0070f3;
}

.comparison-block.solution h5 {
  color: #0070f3;
}

/* Benefits cards grid */
.benefits-section {
  padding: 80px 0;
  background: #ffffff;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 45px;
}

.benefits-card {
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 20px;
  padding: 35px 30px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.benefits-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.benefit-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 112, 243, 0.05);
  color: #0070f3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color var(--trans-fast), color var(--trans-fast);
}

.benefit-logo svg {
  width: 12px;
  height: 12px;
}

.benefits-card:hover .benefit-logo {
  background: #0070f3;
  color: #ffffff;
}

.benefit-number {
  font-size: 1.25rem; /* Exactly the height/scale of the headings and small text */
  font-weight: 800;
  color: rgba(0, 112, 243, 0.15);
  position: absolute;
  top: 30px;
  right: 30px;
}

.benefits-card h3 {
  font-size: 1.25rem;
  color: #0b2240;
  margin-bottom: 12px;
  font-weight: 700;
}

.benefits-card p {
  font-size: 0.9rem;
  color: var(--grey-600);
  line-height: 1.5;
  margin: 0;
}

/* Comparison matrix table */
.comparison-matrix-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
}

.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: 40px;
  border-radius: 16px;
  border: 1px solid var(--grey-200);
  box-shadow: 0 6px 20px rgba(0,0,0,0.02);
}

.comparison-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: #ffffff;
  min-width: 800px;
}

.comparison-matrix-table th, 
.comparison-matrix-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--grey-200);
  font-size: 0.95rem;
}

.comparison-matrix-table th {
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
}

.comparison-matrix-table th.pulse-column {
  background: #f07020;
}

.comparison-matrix-table td.pulse-column {
  background: rgba(240, 112, 32, 0.03);
  font-weight: 700;
  border-left: 1px solid rgba(240, 112, 32, 0.1);
  border-right: 1px solid rgba(240, 112, 32, 0.1);
}

.param-name {
  font-weight: 700;
  color: #0b2240;
}

.check-val {
  color: #16a34a;
}

.cross-val {
  color: #dc2626;
}

.warning-val {
  color: #d97706;
}

/* Table Icons styling */
.table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
}

.table-icon svg {
  width: 12px;
  height: 12px;
}

.check-icon {
  border: 2px solid #22c55e;
  color: #22c55e;
  background-color: rgba(34, 197, 94, 0.05);
}

.cross-icon {
  border: 2px solid #ef4444;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.05);
}

.warning-icon {
  border: 2px solid #f59e0b;
  color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.05);
}

.comparison-matrix-table td {
  line-height: 1.4;
  vertical-align: middle;
}

/* Comparison Badges styling */
.comparison-badges-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px dashed var(--grey-200);
}

.badge-item {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.badge-icon-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #0f172a; /* dark blue matching the theme */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.badge-icon-circle:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

.badge-icon-circle svg {
  width: 44px;
  height: 44px;
}

.badge-title-box {
  background: #f07020; /* brand orange */
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(240, 112, 32, 0.2);
}

.badge-description {
  font-size: 0.85rem;
  color: var(--grey-600);
  line-height: 1.4;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comparison-badges-container {
    gap: 30px;
  }
  .badge-item {
    min-width: 45%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .badge-item {
    min-width: 100%;
  }
}

/* FAQs accordion styling */
.tech-faq-section {
  padding: 80px 0;
  background: #ffffff;
}

.faq-accordion-container {
  max-width: 1140px;
  margin: 40px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.faq-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 768px) {
  .faq-accordion-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.faq-item {
  border: 1px solid var(--grey-200);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.01);
  transition: border-color var(--trans-fast);
}

.faq-item.active {
  border-color: #f07020;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0b2240;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-arrow {
  font-size: 0.8rem;
  color: var(--grey-500);
  transition: transform var(--trans-fast);
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: #f07020;
}

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

.faq-answer p {
  padding: 0 28px 24px 28px;
  margin: 0;
  font-size: 0.95rem;
  color: var(--grey-600);
  line-height: 1.6;
}


/* Responsiveness overrides */
@media (max-width: 1024px) {
  .tech-intro-grid, 
  .visualizer-grid,
  .stages-timeline-list,
  .stages-interactive-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tech-intro-visuals {
    flex-direction: row;
  }
  .tech-micro-card {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .tech-intro-visuals {
    flex-direction: column;
  }
  .pipe-comparison-container {
    height: 200px;
  }
  .slider-drag-handle {
    margin-top: 78px;
  }
  .stage-timeline-item,
  .stage-timeline-item.reverse {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  .stage-timeline-item.reverse .stage-svg-column {
    order: 0;
  }
  .stage-info-column {
    text-align: center;
  }
  .science-row-item,
  .science-row-item.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .science-row-item.reverse .science-img-wrap {
    order: 0;
  }
  .science-img-wrap {
    height: 180px;
  }
}

@media (max-width: 576px) {
  .visualizer-status {
    flex-direction: column;
    gap: 8px;
  }
  .stage-svg-wrap {
    max-width: 160px;
  }
}

/* Technology subpage Resource Center styles */
.tech-resources-section {
  padding: 90px 0;
  background: var(--bg-base);
  border-top: 1px solid var(--grey-200);
}

.tech-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 40px auto 0 auto;
}

.tech-video-card {
  background: #ffffff;
  border: 2px solid #f07020; /* Vibrant orange border matching homepage video */
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.tech-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(58, 144, 212, 0.25); /* Blue glow on hover */
}

.video-item-title {
  font-size: 1.15rem;
  color: #0b2240;
  font-weight: 700;
  margin: 0;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tech-pdf-download-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .tech-videos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ══════════════════════════════════════
   SCIENTIFIC DETAILS MORE INFO BUTTON
   ══════════════════════════════════════ */
.btn-more-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 36px;
  background: #ffffff;
  border: 1px solid var(--grey-400);
  color: var(--grey-800);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all var(--trans-fast);
  text-transform: lowercase;
}

.btn-more-info:hover {
  border-color: var(--orange-500);
  color: var(--orange-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(240, 112, 32, 0.12);
}

/* FOOTER SOCIAL MEDIA ICONS */
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--trans-fast);
  text-decoration: none;
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.social-icon:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   LEGAL SUBPAGES STYLING
   ══════════════════════════════════════ */
.legal-section {
  padding: 80px 0;
  background-color: var(--bg-base);
}
.legal-card {
  background: var(--bg-card);
  padding: 60px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--grey-200);
}
.legal-card h2 {
  font-size: 1.8rem;
  color: var(--grey-900);
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--orange-300);
  padding-bottom: 8px;
  display: inline-block;
}
.legal-card h2:first-of-type {
  margin-top: 0;
}
.legal-card h3 {
  font-size: 1.3rem;
  color: var(--grey-800);
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}
.legal-card p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--grey-600);
  margin-bottom: 20px;
}
.legal-card ul, .legal-card ol {
  margin-left: 24px;
  margin-bottom: 20px;
  color: var(--grey-600);
}
.legal-card li {
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.legal-card strong {
  color: var(--grey-900);
}
@media (max-width: 768px) {
  .legal-card {
    padding: 40px 24px;
  }
  .legal-card h2 {
    font-size: 1.5rem;
  }
  .legal-section {
    padding: 40px 0;
  }
}

/* Legal Tables & Alert Boxes */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0 35px;
  font-size: 1.0rem;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--grey-200);
  padding: 12px 18px;
  text-align: left;
  line-height: 1.5;
}
.legal-table th {
  background-color: var(--grey-100);
  font-weight: 700;
  color: var(--grey-900);
}
.legal-table td:first-child {
  font-weight: 600;
  color: var(--grey-900);
  background-color: rgba(0, 0, 0, 0.01);
  width: 25%;
}
.legal-table td {
  color: var(--grey-600);
}
.disclaimer-box {
  background-color: var(--orange-100);
  border-left: 4px solid var(--orange-500);
  padding: 20px;
  margin: 0 0 30px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.disclaimer-box p {
  margin-bottom: 0 !important;
  color: var(--orange-700);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.6;
}

/* ══════════════════ TESTIMONIALS (REVIEWS) SECTION ══════════════════ */
.testimonials-section {
  padding: 100px 0;
  background-color: #0b0c0e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.testimonials-section .section-header .section-title {
  color: #ffffff;
}

.testimonials-section .section-header .section-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

.testimonials-section .section-tag {
  color: var(--orange-300);
  background: rgba(240, 112, 32, 0.12);
  border: 1px solid rgba(240, 112, 32, 0.25);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: start;
}

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

/* Glass Card override - Dark Theme */
.testimonials-section .glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 36px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
}

.testimonials-section .glass-card:hover {
  border-color: rgba(240, 112, 32, 0.35);
  box-shadow: 0 15px 40px rgba(240, 112, 32, 0.06);
}

/* Dashboard styles */
.ratings-dashboard {
  margin-bottom: 32px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.dashboard-score-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dashboard-big-score {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dashboard-max-score {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.dashboard-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dashboard-total-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.live-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(58, 144, 212, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(58, 144, 212, 0.18);
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--blue-500);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.live-pulse-dot::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  background-color: var(--blue-500);
  border-radius: 50%;
  opacity: 0.4;
  animation: pulse-ring 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.live-badge-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-300);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-main);
}

/* Progress bars */
.progress-bar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 60px;
}

.progress-track {
  flex-grow: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--orange-500);
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-pct {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  min-width: 35px;
  text-align: right;
}

/* Reviews list */
.reviews-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.review-card {
  border-radius: var(--radius-md);
  padding: 28px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.review-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.reviewer-info {
  display: flex;
  gap: 14px;
  align-items: center;
}

.reviewer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(240, 112, 32, 0.1);
  color: var(--orange-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  border: 1px solid rgba(240, 112, 32, 0.25);
}

.reviewer-meta {
  display: flex;
  flex-direction: column;
}

.reviewer-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 1.05rem;
}

.reviewer-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.verified-badge {
  color: #10b981;
  font-weight: 600;
}

.rating-stars {
  display: flex;
  gap: 3px;
  color: #fbbf24;
}

.review-comment {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  margin-bottom: 12px;
}

.review-date {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

/* Submit Form Card */
.submit-form-card {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}

.submit-form-card h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 10px;
  font-weight: 700;
}

.submit-form-card p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 28px;
  line-height: 1.5;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.input-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.08em;
}

.input-field {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background-color var(--trans-fast);
}

.input-field::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.input-field:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.stars-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.star-btn {
  color: rgba(255, 255, 255, 0.25);
  transition: transform var(--trans-fast), color var(--trans-fast);
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
}

.star-btn:hover {
  transform: scale(1.2);
}

.btn-primary-review {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6b00;
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.25);
  transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
  margin-top: 8px;
}

.btn-primary-review:hover {
  background: #e05e00;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.35);
}

.btn-primary-review svg {
  margin-right: 4px;
}

.live-preview-box {
  margin-top: 32px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 24px;
}

.live-preview-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.testimonials-section .form-success-message {
  color: #ffffff !important;
}

.testimonials-section .form-success-message p {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ══════════════════ SHOPPING CART DRAWER STYLES ══════════════════ */
.cart-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  z-index: 1050;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 100%;
  background: #ffffff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: var(--font-main);
  color: var(--grey-800);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--grey-200);
  background: var(--grey-100);
}

.cart-drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-drawer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: 0.06em;
}

.cart-drawer-close {
  color: var(--grey-600);
  padding: 4px;
  transition: color var(--trans-fast), transform var(--trans-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.cart-drawer-close:hover {
  color: var(--orange-500);
  transform: scale(1.1);
}

.cart-drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Empty State */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  gap: 16px;
  color: var(--grey-600);
  margin: auto 0;
}

.cart-empty-state svg {
  color: var(--grey-400);
  animation: float-icon 3s ease-in-out infinite;
}

@keyframes float-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cart-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-empty-text {
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 280px;
}

.btn-cart-empty-browse {
  margin-top: 12px;
  padding: 10px 24px;
  background: var(--orange-500);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: background var(--trans-fast), transform var(--trans-fast);
}

.btn-cart-empty-browse:hover {
  background: var(--orange-700);
  transform: translateY(-1px);
}

/* Cart Items */
.cart-item-card {
  display: flex;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--grey-200);
  position: relative;
}

.cart-item-img-wrap {
  width: 72px;
  height: 72px;
  background: var(--grey-100);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--grey-200);
  flex-shrink: 0;
}

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

.cart-item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.cart-item-name {
  font-weight: 700;
  color: var(--blue-900);
  font-size: 0.95rem;
  max-width: calc(100% - 24px);
}

.cart-item-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.cart-item-unit-price {
  font-size: 0.82rem;
  color: var(--grey-600);
}

.cart-item-total-price {
  font-weight: 700;
  color: var(--grey-900);
  font-size: 0.95rem;
}

.cart-item-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}

.cart-item-qty-btn {
  padding: 2px 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--grey-800);
  background: var(--grey-100);
  border: none;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.cart-item-qty-btn:hover {
  background: var(--orange-100);
  color: var(--orange-500);
}

.cart-item-qty-val {
  padding: 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--grey-900);
}

.cart-item-remove {
  position: absolute;
  top: 0; right: 0;
  color: var(--grey-400);
  transition: color var(--trans-fast), transform var(--trans-fast);
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px;
}

.cart-item-remove:hover {
  color: #ef4444;
  transform: scale(1.1);
}

/* Footer & Calculations */
.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--grey-200);
  background: var(--grey-100);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
}

.cart-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--grey-600);
  font-weight: 500;
}

.cart-summary-row.total-row {
  border-top: 1px solid var(--grey-300);
  padding-top: 12px;
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-900);
}

.btn-cart-checkout {
  width: 100%;
  padding: 16px;
  background: var(--orange-500);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(240, 112, 32, 0.25);
  transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
  border: none;
  cursor: pointer;
}

.btn-cart-checkout:hover {
  background: var(--orange-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(240, 112, 32, 0.35);
}

/* Checkout Form state inside Drawer */
.cart-checkout-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.cart-checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cart-checkout-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-checkout-back {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-500);
  cursor: pointer;
}

.btn-checkout-back:hover {
  text-decoration: underline;
}

.cart-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-checkout-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cart-checkout-field input {
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--grey-800);
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: border-color var(--trans-fast), background var(--trans-fast);
  outline: none;
}

.cart-checkout-field input::placeholder {
  color: var(--grey-400);
}

.cart-checkout-field input:focus {
  border-color: var(--orange-500);
  background: #ffffff;
}

.cart-error-message {
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: -2px;
}

/* Spinner Loader */
.cart-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  gap: 20px;
  margin: auto 0;
}

.cart-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--grey-200);
  border-top: 4px solid var(--orange-500);
  border-radius: 50%;
  animation: spin-loader 1s linear infinite;
}

@keyframes spin-loader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cart-spinner-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
  letter-spacing: 0.02em;
}

/* Receipt / Success State */
.cart-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px;
  gap: 20px;
  margin: auto 0;
}

.cart-success-icon {
  width: 64px;
  height: 64px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.2);
}

.cart-success-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.cart-success-desc {
  font-size: 0.9rem;
  color: var(--grey-600);
  line-height: 1.6;
  max-width: 300px;
}

.cart-receipt-card {
  width: 100%;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.cart-receipt-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--grey-200);
  padding-bottom: 8px;
}

.cart-receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.cart-receipt-label {
  color: var(--grey-600);
  font-weight: 500;
}

.cart-receipt-value {
  color: var(--grey-900);
  font-weight: 700;
}

.btn-success-close {
  width: 100%;
  padding: 14px;
  background: var(--blue-900);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--trans-fast), transform var(--trans-fast);
  border: none;
  cursor: pointer;
  margin-top: 8px;
}

.btn-success-close:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
}

/* ══════════════════ LOGIN DRAWER SYSTEM ══════════════════ */
.login-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(11, 12, 14, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  z-index: 1050;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.login-overlay.open {
  opacity: 1;
  visibility: visible;
}

.login-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 440px;
  max-width: 100%;
  background: #ffffff;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: var(--font-main);
  color: var(--grey-800);
}

.login-drawer.open {
  transform: translateX(0);
}

.login-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--grey-200);
  background: var(--grey-100);
}

.login-drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-drawer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: 0.06em;
}

.login-drawer-close {
  color: var(--grey-600);
  padding: 4px;
  transition: color var(--trans-fast), transform var(--trans-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.login-drawer-close:hover {
  color: var(--orange-500);
  transform: scale(1.1);
}

.login-drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* User Avatar Header */
.login-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}

.login-avatar-circle {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(240, 112, 32, 0.25);
  margin-bottom: 12px;
}

.login-welcome-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue-900);
  text-align: center;
  margin-bottom: 4px;
}

.login-welcome-desc {
  font-size: 0.88rem;
  color: var(--grey-600);
  text-align: justify;
  line-height: 1.5;
  max-width: 320px;
}

/* Form Styles */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.login-field input {
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--grey-800);
  font-family: var(--font-main);
  font-size: 0.92rem;
  transition: border-color var(--trans-fast), background var(--trans-fast);
  outline: none;
}

.login-field input::placeholder {
  color: var(--grey-400);
}

.login-field input:focus {
  border-color: var(--orange-500);
  background: #ffffff;
}

.login-error-message {
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: -2px;
}

/* Button Sign In / Continue */
.btn-login-action {
  width: 100%;
  padding: 14px;
  background: var(--orange-500);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(240, 112, 32, 0.25);
  transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
  border: none;
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-login-action:hover {
  background: var(--orange-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(240, 112, 32, 0.35);
}

.btn-login-action.loading {
  background: var(--orange-300) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: btn-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Social Login Divider */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--grey-500);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--grey-200);
}

.login-divider:not(:empty)::before {
  margin-right: 12px;
}

.login-divider:not(:empty)::after {
  margin-left: 12px;
}

/* Social Buttons */
.login-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-login-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}

.btn-login-social.google {
  background: #ffffff;
  border: 1px solid var(--grey-300);
  color: var(--grey-800);
}

.btn-login-social.google:hover {
  background: var(--grey-50);
  border-color: var(--grey-400);
  transform: translateY(-1px);
}

/* Success View */
.login-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 10px;
  gap: 20px;
  margin: auto 0;
}

.login-success-icon {
  width: 68px;
  height: 68px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

.login-success-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-success-desc {
  font-size: 0.92rem;
  color: var(--grey-600);
  line-height: 1.6;
  max-width: 320px;
}

.btn-login-success-close {
  width: 100%;
  padding: 14px;
  background: var(--blue-900);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--trans-fast), transform var(--trans-fast);
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.btn-login-success-close:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════════════
   LOGIN RATE-LIMIT POPUP
   Shown when the user exceeds 3 failed login attempts.
   Auto-dismiss not needed — user must click "Understood".
   ══════════════════════════════════════════════════════════════════ */

/* Full-screen overlay wrapper */
#hp-rate-limit-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#hp-rate-limit-overlay.hp-rate-limit-show {
  opacity: 1;
  pointer-events: all;
}

/* Dark blurred backdrop */
.hp-rate-limit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 40, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Floating modal card */
.hp-rate-limit-modal {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 36px 36px;
  max-width: 400px;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-top: 4px solid #ef4444;
}

#hp-rate-limit-overlay.hp-rate-limit-show .hp-rate-limit-modal {
  transform: translateY(0) scale(1);
}

/* Icon circle — red warning */
.hp-rate-limit-icon-wrap {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  border: 3px solid rgba(220, 38, 38, 0.2);
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.2);
  flex-shrink: 0;
  animation: hp-rl-pulse 2s ease-in-out infinite;
}

@keyframes hp-rl-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(220, 38, 38, 0.2); }
  50%       { box-shadow: 0 6px 32px rgba(220, 38, 38, 0.45); }
}

/* Title */
.hp-rate-limit-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e1e2e;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Body message */
.hp-rate-limit-msg {
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.65;
  margin: 0;
  max-width: 320px;
}

/* Timer badge — clock icon + time left */
.hp-rate-limit-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fbbf24;
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 0.88rem;
  color: #92400e;
  font-weight: 600;
}

.hp-rate-limit-timer svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.hp-rate-limit-timer strong {
  color: #b45309;
  font-weight: 800;
}

/* Sub-note below timer */
.hp-rate-limit-sub {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.6;
  margin: 0;
}

/* "Understood" close button */
.hp-rate-limit-close-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}

.hp-rate-limit-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45);
  filter: brightness(1.08);
}

.hp-rate-limit-close-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* ══════════════════════════════════════
   CASE STUDIES SECTION
   ══════════════════════════════════════ */
.cs-section {
  padding: 80px 0;
  background-color: var(--bg-base);
}

.cs-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.cs-filter-btn {
  padding: 10px 24px;
  background: var(--bg-card);
  color: var(--grey-800);
  border: 1.5px solid var(--grey-200);
  border-radius: 50px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--trans-fast);
  cursor: pointer;
}

.cs-filter-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--blue-300);
  color: var(--blue-700);
}

.cs-filter-btn.active {
  background: var(--grad-blue-orange);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(240,112,32,0.25);
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 60px;
}

@media (max-width: 992px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.cs-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid rgba(58,144,212,0.12);
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(58,144,212,0.04);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(58,144,212,0.12);
}

.cs-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--grey-200);
  overflow: hidden;
}

.cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-med);
}

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

.cs-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  color: var(--blue-700);
  border: 1px solid rgba(58,144,212,0.2);
  z-index: 10;
}

.cs-card-badge.industry { color: #818cf8; }
.cs-card-badge.agriculture { color: #10b981; }
.cs-card-badge.domestic { color: #f59e0b; }
.cs-card-badge.commercial { color: #3b82f6; }
.cs-card-badge.poultry { color: #ec4899; }

.cs-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cs-location {
  font-size: 0.85rem;
  color: var(--grey-600);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-location svg {
  color: var(--orange-500);
}

.cs-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 12px;
  line-height: 1.3;
}

.cs-desc {
  font-size: 0.95rem;
  color: var(--grey-600);
  margin-bottom: 20px;
  line-height: 1.5;
  flex-grow: 1;
}

.cs-stats-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--grad-blue-light);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  border-left: 4px solid var(--blue-500);
}

.cs-stats-badge.orange-theme {
  background: var(--grad-orange-warm);
  border-left-color: var(--orange-500);
}

.cs-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue-700);
  line-height: 1;
  white-space: nowrap;
}

.cs-stats-badge.orange-theme .cs-stat-value {
  color: var(--orange-700);
}

.cs-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--grey-800);
  line-height: 1.2;
}

.cs-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--blue-700);
  transition: gap var(--trans-fast), color var(--trans-fast);
  margin-top: auto;
  align-self: flex-start;
  cursor: pointer;
}

.cs-link-btn:hover {
  color: var(--orange-500);
  gap: 10px;
}

/* Modal details */
.cs-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30, 28, 26, 0.6);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.cs-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cs-modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid rgba(58,144,212,0.2);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(10,35,70,0.18);
  transform: translateY(30px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.cs-modal-overlay.open .cs-modal-card {
  transform: translateY(0) scale(1);
}

.cs-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: var(--grey-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-800);
  transition: all var(--trans-fast);
  cursor: pointer;
  z-index: 100;
}

.cs-modal-close-btn:hover {
  background: var(--blue-100);
  color: var(--blue-700);
  transform: rotate(90deg);
}

.cs-modal-header {
  padding: 40px 40px 24px;
  border-bottom: 1px solid var(--grey-200);
  position: relative;
}

.cs-modal-sector {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--blue-100);
  color: var(--blue-700);
  margin-bottom: 12px;
}

.cs-modal-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--grey-900);
  line-height: 1.25;
  margin-bottom: 8px;
}

.cs-modal-client {
  font-size: 0.95rem;
  color: var(--grey-600);
  font-weight: 600;
}

.cs-modal-body {
  padding: 32px 40px 40px;
}

.cs-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

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

.cs-modal-panel {
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  padding: 24px;
  border: 1px solid var(--grey-200);
}

.cs-modal-panel h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-modal-panel h4 svg {
  color: var(--blue-500);
}

.cs-modal-panel p {
  font-size: 0.95rem;
  color: var(--grey-800);
  line-height: 1.5;
}

.cs-modal-results-box {
  background: var(--grad-blue-light);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(58,144,212,0.3);
  padding: 28px;
  margin-bottom: 32px;
}

.cs-modal-results-box.orange-theme {
  background: var(--grad-orange-warm);
  border-color: rgba(240,112,32,0.3);
}

.cs-modal-results-box h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blue-700);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-modal-results-box.orange-theme h4 {
  color: var(--orange-700);
}

.cs-modal-results-list {
  list-style: none;
}

.cs-modal-results-list li {
  font-size: 1rem;
  color: var(--grey-900);
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
  font-weight: 600;
}

.cs-modal-results-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue-500);
  font-weight: 800;
}

.cs-modal-results-list.orange-theme li::before {
  color: var(--orange-500);
}

.cs-modal-tech-details {
  border-top: 1px solid var(--grey-200);
  padding-top: 24px;
}

.cs-modal-tech-details h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 12px;
}

.cs-modal-tech-details p {
  font-size: 0.95rem;
  color: var(--grey-600);
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════════
   ADVANCED MOBILE OPTIMIZATION (max-width: 768px)
   Touch-first, scroll-friendly, premium feel
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Global Touch Targets ─── */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exclude micro-interactive elements from global touch target sizes */
  .dot,
  .hero-arrow,
  .nav-cart-btn,
  .nav-login-btn,
  .hamburger {
    min-height: unset;
    min-width: unset;
  }

  /* ─── Hero: crisp mobile layout ─── */
  .hero {
    height: auto;
    min-height: calc(100svh - var(--nav-h));
    padding-top: 8px;
    padding-bottom: 20px;
  }

  /* On mobile the hero is height:auto, so absolute-positioned slides won't
     fill it. We switch them to position:relative so the active one expands
     the hero, and stack them on top of each other via the flex wrapper. */
  .hero-slides {
    display: flex;
    min-height: calc(100svh - var(--nav-h) - 28px);
  }

  .hero-slide {
    position: absolute;
    inset: 0;
    min-height: calc(100svh - var(--nav-h) - 28px);
  }

  .slide-content {
    padding: 10px 18px 55px;
    justify-content: center;
    height: 100%;
  }

  .slide-title {
    font-size: clamp(1.45rem, 6vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .slide-desc {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 12px;
    max-width: 480px;
  }

  .slide-text {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .slide-tag {
    font-size: 0.72rem;
    margin-bottom: 4px;
  }

  .slide-product {
    width: 100%;
    max-width: 280px;
    height: 200px;
    margin: 0 auto 8px auto;
  }

  /* ── Mobile: remove glowing background box from Domestic & Animal Husbandry ── */
  #product-domestic .product-glow,
  #product-poultry .product-glow {
    display: none !important;
  }
  #product-domestic .product-img,
  #product-poultry .product-img {
    filter: none !important;
    background: transparent !important;
  }

  .slide-stats {
    gap: 14px;
    margin-bottom: 14px;
  }

  .stat-num {
    font-size: 1.6rem;
  }

  .stat-lbl {
    font-size: 0.72rem;
  }

  /* ─── Hero CTA & Buy Now buttons (compact for mobile) ─── */
  .slide-cta,
  .slide-buy-btn {
    padding: 10px 22px;
    font-size: 0.88rem;
    min-height: unset;
  }

  /* ─── Subpage Hero ─── */
  .subpage-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    padding: 0 8px;
  }

  .subpage-subtitle {
    font-size: 0.95rem;
    padding: 0 8px;
  }

  /* ─── Section Headers ─── */
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  .section-header {
    margin-bottom: 36px;
  }

  /* ─── Cards: full-width, better padding ─── */
  .product-card {
    padding: 24px 20px;
  }

  .blog-card .blog-body {
    padding: 20px 18px;
  }

  .about-feature-card {
    padding: 20px 18px;
  }

  /* ─── Technology grid: single col ─── */
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tech-card {
    padding: 24px 20px;
  }

  /* ─── Blog grid: single col ─── */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* ─── Solutions/Sectors: single col ─── */
  .solutions-grid,
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ─── Contact: better mobile form ─── */
  .contact-form .form-input,
  .contact-form .form-textarea {
    font-size: 16px; /* Prevent iOS auto-zoom */
    padding: 14px 16px;
  }

  /* ─── Footer: readable ─── */
  .footer-inner {
    gap: 28px;
    padding-bottom: 80px; /* Prevent overlap with mobile action bar */
  }

  .footer-bottom {
    margin-bottom: 0;
  }

  /* ─── Case Studies: single col ─── */
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-filters {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cs-filters::-webkit-scrollbar {
    display: none;
  }

  .cs-filter-btn {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 8px 18px;
    white-space: nowrap;
  }

  .cs-modal-card {
    border-radius: var(--radius-sm);
    max-height: 95vh;
  }

  .cs-modal-header {
    padding: 28px 24px 18px;
  }

  .cs-modal-title {
    font-size: 1.45rem;
  }

  .cs-modal-body {
    padding: 20px 24px 32px;
  }

  .cs-modal-results-box {
    padding: 20px;
  }

  /* ─── Subpage sections: compact ─── */
  .tech-section,
  .cs-section,
  .blog-section,
  .about-section,
  .products-section,
  .solutions-section {
    padding: 56px 0;
  }

  /* ─── Table of contents / nav stage bar ─── */
  .stage-nav {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  /* ─── Testimonials ─── */
  .testimonials-grid {
    gap: 28px;
  }

  /* ─── About section ─── */
  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* ─── Floating Mobile Bottom CTA ─── */
  .mobile-bottom-cta {
    display: flex !important;
  }
}

/* ─── Floating Mobile Bottom CTA Bar ─── */
.mobile-bottom-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: rgba(240,238,235,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 16px;
  border-top: 1px solid var(--grey-200);
  box-shadow: 0 -4px 24px rgba(58,144,212,0.10);
  gap: 10px;
  align-items: center;
}

.mobile-bottom-cta a {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mobile-bottom-cta .mob-cta-primary {
  background: var(--grad-blue-orange);
  color: #fff;
  box-shadow: 0 3px 14px rgba(240,112,32,0.28);
}

.mobile-bottom-cta .mob-cta-secondary {
  background: var(--bg-card);
  color: var(--blue-700);
  border: 1.5px solid rgba(58,144,212,0.3);
}


/* ══════════════════════════════════════════════════════
   SMALL PHONE (max-width: 400px)
   ══════════════════════════════════════════════════════ */

@media (max-width: 400px) {

  .nav-links {
    width: 100%;
    right: -110%;
  }

  .nav-links.open {
    right: 0;
  }

  .nav-right-actions.open {
    width: 100%;
    right: -110%;
  }

  .nav-right-actions.open.open {
    right: 0;
  }

  .subpage-title {
    font-size: 1.7rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .slide-title {
    font-size: 1.6rem;
  }

  .cs-modal-header,
  .cs-modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ══════════════════════════════════════════════════════
   iOS SAFE AREA & NOTCH SUPPORT
   ══════════════════════════════════════════════════════ */

/* Navbar top safe area (handles notch on landscape) */
#navbar {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* Mobile bottom CTA: above home bar */
.mobile-bottom-cta {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Mobile nav drawer: respect safe areas */
@media (max-width: 768px) {
  .nav-links {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-top: max(80px, calc(60px + env(safe-area-inset-top)));
    overscroll-behavior: contain;
  }
}


/* ══════════════════════════════════════════════════════
   GLOBAL TOUCH EXPERIENCE POLISH
   ══════════════════════════════════════════════════════ */

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth momentum scrolling on iOS */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Better text rendering on mobile */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text size adjust on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Swipeable carousels / horizontal scroll areas */
.cs-filters,
.stage-nav {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.cs-filter-btn {
  scroll-snap-align: start;
}

/* Image loading optimization for mobile */
img {
  content-visibility: auto;
}

/* Focus rings only for keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════
   DEALERSHIP BUTTON & FORM LAYOUTS
   ══════════════════════════════════════ */
.dealership-cta-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 12px;
}

/* Big Dealership CTA Button with Orange-to-Blue Gradient */
.contact-dealer-box {
  margin-top: 32px;
}

.dealer-big-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #ffe5d9 0%, #d8ebff 100%);
  border: 1.5px solid rgba(240, 112, 32, 0.2);
  color: #0b2240; /* Decent dark navy blue for text */
  font-family: var(--font-main), sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}

.dealer-big-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffdcd0 0%, #cae4ff 100%);
  box-shadow: 0 8px 20px rgba(240, 112, 32, 0.12), 0 4px 12px rgba(30, 64, 175, 0.08);
  color: #0b2240;
}

.dealer-big-btn:active {
  transform: translateY(0);
}

.dealer-big-icon {
  stroke: #f07020; /* Keep the icon orange for nice accent contrast */
  display: block;
  flex-shrink: 0;
}

/* Footer Dealership Button */
.footer-dealer-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ffe5d9 0%, #d8ebff 100%);
  border: 1.5px solid rgba(240, 112, 32, 0.3);
  color: #0b2240 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
  white-space: nowrap;
}

.footer-dealer-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffdcd0 0%, #cae4ff 100%);
  box-shadow: 0 6px 18px rgba(240, 112, 32, 0.3);
  color: #0b2240 !important;
}

.footer-dealer-btn svg {
  flex-shrink: 0;
}

.dealer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(58, 144, 212, 0.4);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  line-height: 1;
  transition: background var(--trans-fast), border-color var(--trans-fast), scale var(--trans-fast);
}

.dealer-cta-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.dealer-cta-btn:hover {
  background: rgba(58, 144, 212, 0.15);
  border-color: var(--blue-300);
  scale: 1.02;
}

.dealer-btn-icon {
  stroke: var(--orange-300);
}

/* ── Dealership Page Styles ── */
.dealer-page-section {
  padding: 80px 0;
  background: var(--bg-base);
}

.dealer-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: stretch;
}

/* Criteria Column (Left) */
.criteria-card {
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid rgba(58, 144, 212, 0.15);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.criteria-card h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--blue-900);
  margin-bottom: 8px;
}

.criteria-card .sub-header-text {
  font-size: 1.0rem;
  color: var(--grey-600);
  margin-bottom: 32px;
}

.criteria-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.criteria-item {
  display: flex;
  gap: 16px;
}

.criteria-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(240, 112, 32, 0.08);
  border: 1.5px solid rgba(240, 112, 32, 0.2);
  color: var(--orange-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.criteria-item-icon svg {
  width: 20px;
  height: 20px;
}

.criteria-item-text h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 4px;
}

.criteria-item-text p {
  font-size: 0.92rem;
  color: var(--grey-600);
  line-height: 1.5;
}

/* Agreement Checkbox */
.criteria-agree-box {
  margin-top: auto;
  padding: 20px;
  background: rgba(58, 144, 212, 0.05);
  border: 1.5px dashed rgba(58, 144, 212, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}

.criteria-agree-box:hover {
  background: rgba(58, 144, 212, 0.08);
  border-color: var(--blue-300);
}

.criteria-agree-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--blue-500);
  accent-color: var(--blue-500);
  margin-top: 2px;
  cursor: pointer;
}

.criteria-agree-box label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-900);
  line-height: 1.4;
  cursor: pointer;
}

.criteria-agree-box span {
  display: block;
  font-size: 0.82rem;
  color: var(--grey-600);
  margin-top: 4px;
  font-weight: 400;
}

/* Form Wrap (Right) */
.dealer-form-wrap {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(58, 144, 212, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

/* Overlay for lock state */
.form-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: auto;
}

.form-lock-overlay.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lock-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(240, 112, 32, 0.25);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(240, 112, 32, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lock-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(240, 112, 32, 0.08);
  color: var(--orange-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon-wrap svg {
  width: 26px;
  height: 26px;
}

.lock-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--grey-900);
}

.lock-card p {
  font-size: 0.88rem;
  color: var(--grey-600);
  line-height: 1.5;
}

/* Form Styles */
.dealer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dealer-form .form-group input,
.dealer-form .form-group select,
.dealer-form .form-group textarea {
  background: rgba(13, 59, 104, 0.03);
  border: 1px solid rgba(13, 59, 104, 0.15);
  color: var(--grey-900);
  width: 100%;
}

.dealer-form .form-group input::placeholder,
.dealer-form .form-group textarea::placeholder {
  color: var(--grey-400);
}

.dealer-form .form-group input:focus,
.dealer-form .form-group select:focus,
.dealer-form .form-group textarea:focus {
  border-color: var(--orange-500);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.12);
}

.dealer-form .form-group select option {
  background: #fff;
  color: var(--grey-900);
}

/* Success Notice */
.form-success-notice {
  margin-top: 16px;
  padding: 20px;
  background: rgba(34, 160, 107, 0.08);
  border: 1.5px solid rgba(34, 160, 107, 0.25);
  border-radius: var(--radius-md);
  color: #1e5c3e;
  animation: fadeIn 0.4s ease;
}

.form-success-notice h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-success-notice p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #2b6e4e;
}

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

/* Responsive adjustment */
@media (max-width: 992px) {
  .dealer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ══════════════════════════════════════
   FOOTER CERTIFICATIONS
   ══════════════════════════════════════ */
.footer-certs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

.cert-badge:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.cert-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: rgba(255, 255, 255, 0.55);
  transition: stroke var(--trans-fast);
}

.cert-badge:hover .cert-svg {
  stroke: #fff;
}

/* Green leaf/RoHS specific color hover */
.cert-badge:hover .green-cert {
  stroke: #3cd08c;
}

/* ISO orange/theme specific color hover */
.cert-badge:hover .orange-cert {
  stroke: var(--orange-400);
}

.cert-text {
  font-family: var(--font-main);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════
   CARD MORE INFO BUTTONS (SCIENCE LIST)
   ══════════════════════════════════════ */
.card-more-info-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.btn-card-more-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  background: #ffffff;
  border: 1px solid var(--grey-400);
  color: var(--grey-800);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
  transition: all var(--trans-fast);
  text-transform: lowercase;
}

.btn-card-more-info:hover {
  border-color: var(--orange-500);
  color: var(--orange-500);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 15px rgba(240, 112, 32, 0.1);
}

/* ══════════════════════════════════════
   EXPLORE SECTOR BUTTON & SIDE WRAPPER
   ══════════════════════════════════════ */
.sector-media-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align to the right under the grid by default */
  width: 100%;
}

/* On even blocks where media is on the left, align the button to the left */
.sector-detail-block:nth-of-type(even) .sector-media-side {
  align-items: flex-start;
}

.explore-sector-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 28px;
  background-color: transparent;
  color: #f07020;
  border: 2px solid #f07020;
  border-radius: 50px;
  font-family: var(--font-main), sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(240, 112, 32, 0.05);
}

.explore-sector-btn .arrow {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.explore-sector-btn:hover {
  background-color: #f07020;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(240, 112, 32, 0.2);
  transform: translateY(-2px);
}

.explore-sector-btn:hover .arrow {
  transform: translateX(5px);
}

/* Mobile responsive alignments */
@media (max-width: 1024px) {
  .sector-media-side {
    align-items: center !important; /* Center on mobile for clean looks */
  }
}

/* ══════════════════════════════════════
   INDUSTRIAL SUB-SECTORS GRID SECTION
   ══════════════════════════════════════ */
.subsectors-grid-section {
  padding: 60px 0;
  background-color: var(--bg-base);
}

.subsectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.subsector-card {
  background: #ffffff;
  border: 1px solid var(--grey-200, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subsector-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.subsector-card-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f1f5f9;
}

.subsector-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.subsector-card:hover .subsector-card-img-wrap img {
  transform: scale(1.05);
}

.subsector-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.subsector-card-title {
  color: #1e305f;
  font-family: var(--font-main), sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.subsector-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  flex-grow: 1;
}

.subsector-card-bullets li {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--grey-800, #4a5568);
  margin-bottom: 10px;
}

.subsector-card-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: #10b981;
  font-size: 1.05rem;
  font-weight: 800;
}

.subsector-card-action {
  font-family: var(--font-main), sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f07020;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.subsector-card:hover .subsector-card-action {
  gap: 10px;
}

/* ══════════════════════════════════════
   SUB-SECTOR DETAIL PAGE HERO (IMAGE OVERLAY)
   ══════════════════════════════════════ */
.subsector-hero-wrap {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 350px;
  overflow: hidden;
}

.subsector-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subsector-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 34, 64, 0.4) 0%, rgba(3, 15, 38, 0.85) 100%);
}

.subsector-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px 0;
  color: #ffffff;
}

.subsector-hero-title-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 30px;
  display: inline-block;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.subsector-hero-title {
  font-family: var(--font-main), sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

/* cert-badge logo styles and hover highlights */
.cert-img-logo {
  height: 48px !important; /* Increased to 2x (48px) for maximum visibility */
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* Adjust CE logo height specifically for proportion */
.cert-badge[title*="CE"] .cert-img-logo {
  height: 40px !important; /* Increased to 2x (40px) */
}

.cert-badge:hover .cert-img-logo {
  opacity: 1 !important;
}

/* ══════════════════════════════════════
   AUTHENTICATION REQUIRED NOTICE MODAL
   ══════════════════════════════════════ */
.auth-required-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInAuth 0.25s ease-out;
}

.auth-required-modal {
  background: rgba(17, 18, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 90%;
  max-width: 440px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: scaleInAuth 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-required-icon {
  margin-bottom: 20px;
  display: inline-flex;
  padding: 16px;
  border-radius: 50%;
  background: rgba(240, 112, 32, 0.1);
  color: #f07020;
}

.auth-required-title {
  font-family: var(--font-main), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.auth-required-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
}

.auth-required-actions {
  display: flex;
  gap: 12px;
}

.btn-auth-required-login {
  flex: 1;
  background: linear-gradient(135deg, #f07020, #c2410c);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-auth-required-login:hover {
  opacity: 0.9;
}

.btn-auth-required-cancel {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-auth-required-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes fadeInAuth {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleInAuth {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Admin Portal Link in Navbar */
.admin-portal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(58,144,212,0.3);
  border-radius: 50%;
  color: var(--grey-800);
  background: transparent;
  cursor: pointer;
  transition: all var(--trans-fast);
  margin-right: 12px;
}
.admin-portal-link:hover {
  background: rgba(224, 94, 43, 0.08);
  border-color: rgba(224, 94, 43, 0.6);
  color: var(--orange-500);
  transform: translateY(-1px);
}
.admin-portal-link svg {
  stroke: currentColor;
  transition: transform 0.3s ease, stroke var(--trans-fast);
}
.admin-portal-link:hover svg {
  transform: rotate(45deg);
}

/* ─── ADMIN PORTAL MODAL OVERLAY ─── */
.admin-portal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 11, 14, 0.7);
  backdrop-filter: blur(15px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInAuth 0.3s ease;
}

.admin-portal-modal {
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  width: 95%;
  max-width: 1100px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: scaleInAuth 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.admin-portal-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
}

.admin-portal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-portal-title-wrap h2 {
  font-family: var(--font-main), sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.btn-admin-logout {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 8px 16px;
  border-radius: 18px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-admin-logout:hover {
  background: #ef4444;
  color: #fff;
}

.admin-portal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

.admin-portal-close:hover {
  color: #fff;
}

/* Tabs */
.admin-portal-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.02);
  padding: 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
}

.admin-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tab:hover {
  color: #fff;
}

.admin-tab.active {
  color: var(--orange-500);
  border-bottom-color: var(--orange-500);
}

/* Body */
.admin-portal-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

/* Scrollbar Customization */
.admin-portal-body::-webkit-scrollbar {
  width: 8px;
}
.admin-portal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
}
.admin-portal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.admin-portal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-loading,
.admin-empty,
.admin-error {
  text-align: center;
  padding: 64px 32px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
}

.admin-error {
  color: #ef4444;
}

/* Two-Column Master-Detail Layout */
.admin-two-column-layout {
  display: flex;
  height: calc(85vh - 150px);
  gap: 24px;
  overflow: hidden;
}

.admin-sidebar {
  width: 320px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-search-wrap {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-search-wrap input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
}

.admin-search-wrap input:focus {
  border-color: var(--orange-500);
  background: rgba(255, 255, 255, 0.08);
}

.admin-email-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Custom scrollbar for sidebar email list */
.admin-email-list::-webkit-scrollbar {
  width: 6px;
}
.admin-email-list::-webkit-scrollbar-track {
  background: transparent;
}
.admin-email-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.admin-email-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.admin-email-item {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid transparent;
}

.admin-email-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.admin-email-item.active {
  background: rgba(240, 112, 32, 0.12);
  border-color: rgba(240, 112, 32, 0.3);
}

.admin-email-item .email-text {
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  word-break: break-all;
}

.admin-email-item .name-text {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.admin-main-view {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 18px;
  flex-shrink: 0;
}

.admin-main-header-info h3 {
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}

.admin-main-header-info p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
}

.admin-main-header-info span {
  color: rgba(255, 255, 255, 0.4);
}

.admin-user-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
}

.admin-delete-btn-main {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.admin-delete-btn-main:hover {
  background: #ef4444;
  color: #fff;
  transform: translateY(-1px);
}

.detail-section {
  border-left: 3px solid rgba(255, 255, 255, 0.06);
  padding-left: 16px;
}

.detail-section h5 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-500);
  margin: 0 0 12px 0;
}

.no-data {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.detail-item-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.detail-item-card.order-theme {
  border-color: rgba(240, 112, 32, 0.15);
  background: rgba(240, 112, 32, 0.01);
}

.detail-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.admin-delete-item-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

.admin-delete-item-btn:hover {
  color: #ef4444;
}

.detail-item-card p {
  margin: 0 0 6px 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

.detail-item-card strong {
  color: rgba(255, 255, 255, 0.95);
}

.order-items-list {
  margin: 4px 0 0 0;
  padding-left: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.badge-pending {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Review Moderation Panel Styling */
.admin-reviews-table-header {
  margin-bottom: 24px;
}

.admin-reviews-table-header h4 {
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 6px 0;
}

.admin-reviews-table-header p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
}

.admin-reviews-moderation-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-review-moderation-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.admin-review-moderation-card.pending-highlight {
  border-color: rgba(234, 179, 8, 0.25);
  background: rgba(234, 179, 8, 0.02);
}

.admin-review-mod-info {
  flex: 1;
}

.rating-stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.review-mod-author {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 6px 0;
}

.review-mod-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.admin-review-mod-actions {
  display: flex;
  gap: 12px;
}

.admin-approve-btn {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-approve-btn:hover {
  background: #22c55e;
  color: #fff;
}

.admin-unapprove-btn {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  color: #eab308;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-unapprove-btn:hover {
  background: #eab308;
  color: #000;
}

.admin-reject-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-reject-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* ─── CONFETTI ANIMATION STYLING ─── */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 20px;
  opacity: 0.95;
  animation: fallConfetti linear forwards;
}

@keyframes fallConfetti {
  0% {
    top: -20px;
    transform: rotate(0deg) translateX(0);
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) translateX(30px);
  }
  100% {
    top: 105vh;
    transform: rotate(720deg) translateX(-30px);
    opacity: 0;
  }
}

/* ─── ADMIN PORTAL OVERHAUL & RAZORPAY STYLING ─── */

/* Activity indicator badge in User List sidebar */
.admin-email-item {
  position: relative;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-email-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.admin-email-item-main span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-activity-badge {
  background: var(--orange-500);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(240, 112, 32, 0.3);
}

/* Scroll wrapper for details view */
.admin-user-details-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-right: 8px;
}

.admin-user-details-scroll::-webkit-scrollbar {
  width: 6px;
}
.admin-user-details-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.admin-user-details-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.admin-user-details-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.admin-no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
  gap: 12px;
  text-align: center;
}

.admin-no-selection svg {
  color: rgba(255, 255, 255, 0.2);
}

/* Payment Status Badges */
.admin-pay-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-pay-badge-paid {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.admin-pay-badge-pending {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.admin-pay-badge-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Orders Tab Layout & Stat Cards */
.admin-orders-header {
  margin-bottom: 24px;
}

.admin-orders-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.admin-orders-stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-orders-stat-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.admin-orders-stat-lbl {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-orders-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  max-height: calc(85vh - 280px);
  overflow-y: auto;
  padding-right: 8px;
}

.admin-orders-list::-webkit-scrollbar {
  width: 6px;
}
.admin-orders-list::-webkit-scrollbar-track {
  background: transparent;
}
.admin-orders-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

@media(max-width: 768px) {
  .admin-orders-list {
    grid-template-columns: 1fr;
  }
}

.admin-order-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s ease;
}

.admin-order-card:hover {
  border-color: rgba(240, 112, 32, 0.2);
}

.admin-order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 12px;
}

.admin-order-ref {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--orange-500);
}

.admin-order-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

.admin-order-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.admin-order-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-order-detail-row {
  display: flex;
  font-size: 0.85rem;
  line-height: 1.4;
}

.admin-order-lbl {
  width: 90px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  flex-shrink: 0;
}

.admin-order-val {
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
}

/* Trash Icon styling on delete button */
.admin-delete-item-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.admin-delete-item-btn:hover {
  background: #ef4444 !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* Styled Confirmation Dialog */
.admin-confirm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 17, 30, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-confirm-modal {
  background: #111a2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.admin-confirm-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.admin-confirm-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.admin-confirm-msg {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0;
}

.admin-confirm-actions {
  display: flex;
  width: 100%;
  gap: 12px;
  margin-top: 8px;
}

.admin-confirm-cancel-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-confirm-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-confirm-delete-btn {
  flex: 1;
  background: #ef4444;
  border: none;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-confirm-delete-btn:hover {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Checkout payment error styling inside drawer */
.cart-payment-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  animation: modalPop 0.3s ease;
}

.cart-payment-error-icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.cart-payment-error-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.cart-payment-error-msg {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0 0 20px 0;
  max-width: 280px;
}

.btn-payment-retry {
  background: var(--orange-500);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-payment-retry:hover {
  background: var(--orange-600);
}

.cart-receipt-badge-paid {
  margin-top: 16px;
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  text-align: center;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════════ */
/* BENEFIT SQUARE CARDS GRID (4 PER ROW WITH GREEN TICK)             */
/* ══════════════════════════════════════════════════════════════════ */
.benefit-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px;
}

@media (max-width: 1200px) {
  .benefit-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .benefit-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .benefit-cards-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-square-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  height: 100%;
  min-height: 185px;
}

.benefit-square-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

.benefit-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.benefit-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-card-number {
  font-size: 0.95rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
  font-family: var(--font-primary, sans-serif);
}

.benefit-card-text {
  font-family: var(--font-secondary, sans-serif);
  font-size: 0.93rem;
  line-height: 1.5;
  color: #1e293b;
  font-weight: 500;
  margin: 0;
  text-align: left;
}

/* ══════════════════════════════════════
   REFERENCE STYLE BLOG CARD & DETAIL READER
══════════════════════════════════════ */
.blog-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .blog-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-cards-container {
    grid-template-columns: 1fr;
  }
}

.ref-blog-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.ref-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.09);
}

.ref-blog-card-img-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.ref-blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ref-blog-card:hover .ref-blog-card-img {
  transform: scale(1.04);
}

.ref-blog-card-body {
  padding: 28px 24px 28px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ref-blog-card-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
}

.ref-blog-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b2240;
  line-height: 1.35;
  margin-bottom: 12px;
  font-family: 'Outfit', sans-serif;
}

.ref-blog-card-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ref-blog-card-link {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0b2240;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, gap 0.2s;
}

.ref-blog-card:hover .ref-blog-card-link {
  color: #f07020;
  gap: 10px;
}

/* Full Article Page & Reader Overlay */
.blog-post-wrapper {
  background: #ffffff;
  border-radius: 20px;
  max-width: 920px;
  margin: 0 auto 80px auto;
  box-shadow: 0 15px 45px rgba(0,0,0,0.06);
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.blog-watermark-bg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 7.5rem;
  font-weight: 900;
  color: rgba(14, 165, 233, 0.03);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 14px;
}

.blog-post-body {
  position: relative;
  z-index: 1;
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.8;
}

.blog-post-body h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b2240;
  line-height: 1.3;
  margin-bottom: 18px;
  font-family: 'Outfit', sans-serif;
}

.blog-post-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0b2240;
  margin-top: 36px;
  margin-bottom: 16px;
  font-family: 'Outfit', sans-serif;
}

.blog-post-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 28px;
  margin-bottom: 12px;
}

.blog-post-body p {
  margin-bottom: 18px;
}

.blog-post-hero-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.blog-post-inline-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 14px;
  margin: 28px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* Callout Styling */
.blog-callout {
  padding: 24px;
  border-radius: 12px;
  margin: 28px 0;
  position: relative;
}

.blog-callout.eng-note {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
}

.blog-callout.did-know {
  background: #fff8f1;
  border-left: 4px solid #f07020;
}

.blog-callout.hydropulse-help {
  background: linear-gradient(135deg, #0b2240 0%, #1e3a8a 100%);
  color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(11, 34, 64, 0.12);
}

.blog-callout.hydropulse-help h2,
.blog-callout.hydropulse-help p {
  color: #ffffff !important;
}

.blog-callout.key-takeaways {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

/* Tables */
.blog-table-box {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.blog-custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.93rem;
}

.blog-custom-table th {
  background: #0b2240;
  color: #ffffff;
  padding: 14px 18px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

.blog-custom-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

.blog-custom-table tr:nth-child(even) {
  background: #f8fafc;
}

/* FAQs */
.blog-faq-list {
  margin: 28px 0;
}

.blog-faq-box {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #ffffff;
}

.blog-faq-btn {
  width: 100%;
  padding: 18px 20px;
  background: #ffffff;
  border: none;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0b2240;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-faq-btn svg {
  transition: transform 0.2s ease;
}

.blog-faq-box.active .blog-faq-btn svg {
  transform: rotate(180deg);
}

.blog-faq-content {
  padding: 0 20px 18px 20px;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
  display: none;
}

.blog-faq-box.active .blog-faq-content {
  display: block;
}

/* Modal View */
.ref-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 34, 64, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 20px;
}

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

.ref-modal-card {
  background: #ffffff;
  border-radius: 24px;
  max-width: 920px;
  width: 100%;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin: auto;
  animation: refModalSlide 0.35s ease-out forwards;
}

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

.ref-modal-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 16px 28px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.ref-modal-close {
  background: #f1f5f9;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  font-size: 1.2rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.ref-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .blog-post-wrapper {
    padding: 24px 20px;
  }
  .blog-post-body h1 {
    font-size: 1.6rem;
  }
  .blog-watermark-bg {
    font-size: 4rem;
  }
  .blog-cards-container {
    grid-template-columns: 1fr;
  }
}

/* Read Next Interactive Links */
.ref-read-next-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
  color: #0284c7;
  line-height: 2;
}

.ref-read-next-item {
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ref-read-next-bullet {
  color: #0284c7;
  font-size: 1.1rem;
}

.ref-read-next-link {
  color: #0284c7;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.15s ease;
  display: inline-block;
}

.ref-read-next-link:hover {
  color: #0369a1;
  text-decoration: underline;
  transform: translateX(4px);
}

/* ═════════════════════════════════════════════════════════════════════
   JIO DLT OTP VERIFICATION & COUNTRY SELECTOR & OBSERVABILITY STYLES
   ═════════════════════════════════════════════════════════════════════ */

/* Phone Input Container with Country Selector */
.hp-phone-input-container {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  background: var(--grey-100);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  position: relative;
}

.hp-phone-input-container:focus-within {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.15);
  background: #ffffff;
}

.hp-country-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: none;
  border-right: 1px solid var(--grey-300);
  border-radius: 9px 0 0 9px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-900);
  user-select: none;
  transition: background 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.hp-country-native-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  -webkit-appearance: menulist;
}

.hp-country-select-btn:hover {
  background: rgba(240, 112, 32, 0.08);
}

.hp-country-flag {
  font-size: 1.25rem;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Country Flags', sans-serif;
}

.hp-country-code {
  font-weight: 700;
  color: var(--orange-500);
}

.hp-country-code-input {
  width: 48px;
  border: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: var(--orange-500) !important;
  font-size: 0.95rem !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 4px !important;
  box-shadow: none !important;
}

.hp-phone-number-field {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  outline: none !important;
  color: var(--grey-900) !important;
  box-shadow: none !important;
}

/* Country Picker Dropdown */
.hp-country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 260px;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff !important;
  border: 1px solid var(--grey-300);
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  z-index: 999999 !important;
  display: none;
  flex-direction: column;
  padding: 6px 0;
}

.hp-country-dropdown.show {
  display: flex !important;
  animation: hpDropdownFade 0.2s ease-out;
}

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

.hp-country-search-input {
  margin: 6px 10px;
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  font-size: 0.85rem;
  outline: none;
}

.hp-country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.hp-country-option:hover {
  background: rgba(240, 112, 32, 0.08);
}

.hp-country-option-name {
  flex: 1;
  color: var(--grey-800);
}

.hp-country-option-code {
  font-weight: 700;
  color: var(--orange-500);
}

/* 6-Digit OTP Boxes UI */
.hp-otp-boxes-wrap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0;
}

.hp-otp-box {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-900);
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.hp-otp-box:focus {
  border-color: var(--orange-500);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(240, 112, 32, 0.25);
}

.hp-otp-box.filled {
  border-color: var(--blue-900);
  background: #f0f7ff;
}

.hp-otp-box.success {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.hp-otp-box.error {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
  animation: hpShake 0.4s ease;
}

@keyframes hpShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Resend Cooldown Ring & Status Badge */
.hp-resend-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.hp-cooldown-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-600);
}

.hp-cooldown-ring {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.hp-cooldown-ring-circle {
  stroke: var(--orange-500);
  stroke-dasharray: 63;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.hp-btn-resend {
  background: none;
  border: none;
  color: var(--orange-500);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: opacity 0.2s ease;
}

.hp-btn-resend:disabled {
  color: var(--grey-400);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.6;
}

/* Real-Time DLR Delivery Status Badge */
.hp-dlr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.hp-dlr-badge.sending {
  background: #fffbebf5;
  color: #b45309;
  border: 1px solid #fde68a;
}

.hp-dlr-badge.dispatched {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.hp-dlr-badge.delivered {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.hp-dlr-badge.failed {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.hp-dlr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: hpPulseDot 1.5s infinite;
}

@keyframes hpPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Admin Observability Tab & Table */
.dlt-obs-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

.dlt-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.dlt-stat-card {
  background: #161b22;
  border: 1px solid #30363d;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
}

.dlt-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f07020;
  margin-top: 4px;
}

.dlt-stat-label {
  font-size: 0.75rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dlt-logs-table-wrap {
  overflow-x: auto;
  border: 1px solid #30363d;
  border-radius: 8px;
}

.dlt-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: #c9d1d9;
}

.dlt-logs-table th {
  background: #161b22;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
}

.dlt-logs-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #21262d;
}

/* ─────────────────────────────────────────────────────────────────────
   UNIFIED DLT OTP PORTAL & PROFILE ICON STYLES
   ───────────────────────────────────────────────────────────────────── */
.user-avatar-initials {
  background: linear-gradient(135deg, #f07020, #d95300);
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  margin-right: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(240, 112, 32, 0.35);
  transition: transform 0.2s ease;
}

.nav-login-btn:hover .user-avatar-initials {
  transform: scale(1.1);
}

.btn-send-otp {
  background: var(--orange-500);
  color: #fff;
  border: none;
  border-left: 1px solid var(--grey-300);
  border-radius: 0 9px 9px 0;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.btn-send-otp:hover {
  background: #d95300;
}

.btn-send-otp:disabled {
  background: var(--grey-400);
  cursor: not-allowed;
}

.btn-verify-otp {
  background: #22a06b;
  color: #fff;
  border: none;
  padding: 0 16px;
  border-radius: 0 9px 9px 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-verify-otp:hover {
  background: #1b8256;
}

.btn-verify-otp:disabled {
  background: var(--grey-400);
  cursor: not-allowed;
}

#otp-resend-container:hover {
  filter: brightness(1.2);
}

/* =====================================================================
   OPTIMIZED ADMIN PORTAL INTERFACE STYLES (USERS, REVIEWS, DLT, DP)
   ===================================================================== */

/* Summary Statistics Cards */
.admin-stats-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.admin-dashboard-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.admin-dashboard-card:hover {
  transform: translateY(-2px);
  border-color: var(--orange-500);
}

.admin-dashboard-card-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.admin-dashboard-card-lbl {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Control & Filter Bars */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.01);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.admin-filters-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-filter-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-filter-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-filter-pill.active {
  background: rgba(240, 112, 32, 0.15);
  border-color: var(--orange-500);
  color: var(--orange-500);
}

.admin-select-input {
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.admin-select-input:focus {
  border-color: var(--orange-500);
}

.admin-text-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.88rem;
  outline: none;
  transition: all 0.2s ease;
}

.admin-text-input:focus {
  border-color: var(--orange-500);
  background: rgba(255, 255, 255, 0.08);
}

/* CSV Export Button */
.btn-admin-export {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3b82f6;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-admin-export:hover {
  background: #3b82f6;
  color: #fff;
}

/* Jio DLT Live SMS Tester Card */
.dlt-tester-card {
  background: rgba(240, 112, 32, 0.02);
  border: 1px solid rgba(240, 112, 32, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.dlt-tester-title {
  font-size: 1rem;
  color: var(--orange-500);
  margin: 0 0 12px 0;
  font-weight: 700;
}

.dlt-tester-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.dlt-tester-input-group {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.dlt-tester-cc {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  outline: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dlt-tester-phone {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.88rem;
  outline: none;
  width: 140px;
}

.btn-dlt-test-submit {
  background: var(--orange-500);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dlt-test-submit:hover {
  background: #d95300;
}

.btn-dlt-test-submit:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
}

.dlt-tester-console {
  margin-top: 12px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: monospace;
  font-size: 0.8rem;
  padding: 10px 14px;
  border-radius: 6px;
  color: #a8ffb2;
  word-break: break-all;
  display: none;
}

/* DP Section Layout Styles */
.dp-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.dp-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.dp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 112, 32, 0.3);
}

.dp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.dp-company-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.dp-type-badge {
  background: rgba(240, 112, 32, 0.12);
  color: var(--orange-500);
  border: 1px solid rgba(240, 112, 32, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dp-meta-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.dp-meta-item span {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-right: 4px;
}

.dp-gstin-badge {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  color: #e6edf3;
}

.dp-user-link {
  font-size: 0.78rem;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: text-decoration 0.2s;
  background: none;
  border: none;
  padding: 0;
}

.dp-user-link:hover {
  text-decoration: underline;
  color: #60a5fa;
}

.dp-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
  margin-top: 6px;
}

/* Inspector / JSON Overlay Modal */
.admin-inspector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 11, 14, 0.85);
  backdrop-filter: blur(10px);
  z-index: 110000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-inspector-modal {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 16px;
  width: 90%;
  max-width: 650px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: scaleInAuth 0.25s ease-out;
}

.admin-inspector-header {
  padding: 16px 24px;
  border-bottom: 1px solid #30363d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #161b22;
}

.admin-inspector-header h4 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.admin-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #c9d1d9;
  background: #0d1117;
}

.admin-inspector-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.admin-inspector-close {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.admin-inspector-close:hover {
  color: #fff;
}

.dlt-log-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dlt-log-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS AND DRAWERS OPTIMIZATION OVERRIDES
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  /* Phone input with Send OTP button wrapping */
  .hp-phone-input-container {
    flex-wrap: wrap !important;
  }
  
  .hp-phone-number-field {
    flex: 1 !important;
    min-width: 140px !important;
  }

  .btn-send-otp, .btn-verify-otp {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--grey-300) !important;
    border-radius: 0 0 9px 9px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 46px !important;
    font-size: 0.9rem !important;
  }
  
  /* Stack the checkout grid (State and PIN Code) vertically on mobile */
  .cart-checkout-field.flex-field {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Make sure drawer padding is optimized so it does not feel squeezed */
  .login-drawer-body, .cart-drawer-body {
    padding: 16px !important;
  }
  
  .login-drawer-header, .cart-drawer-header {
    padding: 16px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   ADMIN PORTAL DASHBOARD STYLING OVERRIDES (GLASSMORPHISM & PREMIUM UI)
   ═════════════════════════════════════════════════════════════════════ */

.admin-stats-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
}

.admin-dashboard-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-dashboard-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(240, 112, 32, 0.25);
}

.admin-dashboard-card-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.admin-dashboard-card-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}

.admin-progress-bar-bg {
  background: rgba(255, 255, 255, 0.05);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.admin-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-feed-container {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(10px);
}

.activity-feed-table {
  width: 100%;
  border-collapse: collapse;
}

.activity-feed-table th {
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.activity-feed-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.activity-log-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.activity-input-inspector {
  position: relative;
  display: inline-block;
}

.json-content-box {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.json-content-box::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.json-content-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* Custom scrollbar for interactive lists */
.scrollbar-custom::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Specific details badge highlights */
.badge-pending {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.badge-approved {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.pending-highlight {
  border-color: rgba(234, 179, 8, 0.25) !important;
  background: rgba(234, 179, 8, 0.015) !important;
}

.admin-email-item.admin-dashboard-toggle-item:hover {
  background: rgba(240, 112, 32, 0.06) !important;
}