/* ══════════════════════════════════════════════════════════════
   FRESHHUB LAUNDRY — Design System
   Inspired by: Deep surface + glass + atmosphere + Syne 800
   White dominant · Water · Premium · Figma-level
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700;800&family=Plus+Jakarta+Sans:ital,opsz,wght@0,6..10,400;0,6..10,500;0,6..10,600;0,6..10,700;0,6..10,800;1,6..10,400&display=swap');

/* ── 01. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --deep:       #041e2f;
  --surface:    #082f49;
  --surface-2:  #0c3d5e;
  --surface-3:  #0f4a72;
  --border:     rgba(255,255,255,0.07);
  --border-h:   rgba(255,255,255,0.15);

  /* Brand accents */
  --aqua:       #22d3ee;
  --aqua-light: #67e8f9;
  --aqua-glow:  rgba(34,211,238,0.30);
  --teal:       #0891b2;
  --teal-glow:  rgba(8,145,178,0.28);
  --ocean:      #0c4a6e;
  --sky:        #7dd3fc;
  --sage:       #4ade80;
  --sage-glow:  rgba(74,222,128,0.28);

  /* Text */
  --tx-1:  #f8fafc;
  --tx-2:  rgba(248,250,252,0.68);
  --tx-3:  rgba(248,250,252,0.42);

  /* White-mode text (for light sections) */
  --ink:   #0b1d2a;
  --ink-2: #2c4a5a;
  --ink-3: #5a7a8a;

  /* Gradients */
  --g-aqua:    linear-gradient(135deg, #22d3ee, #0891b2, #0c4a6e);
  --g-aqua-h:  linear-gradient(135deg, #67e8f9, #22d3ee, #0891b2);
  --g-text:    linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #4ade80 100%);
  --g-deep:    linear-gradient(160deg, #041e2f 0%, #082f49 50%, #0891b2 100%);

  /* Glass */
  --glass:       rgba(255,255,255,0.05);
  --glass-b:     rgba(255,255,255,0.09);
  --glass-blur:  blur(24px);
  --glass-white: rgba(255,255,255,0.75);

  /* Shadows */
  --s-sm:   0 1px 4px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --s-md:   0 4px 20px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.06);
  --s-lg:   0 10px 36px rgba(0,0,0,0.13), 0 3px 10px rgba(0,0,0,0.07);
  --s-xl:   0 20px 56px rgba(0,0,0,0.16), 0 6px 16px rgba(0,0,0,0.08);
  --s-aqua: 0 6px 24px var(--aqua-glow), 0 2px 6px rgba(0,0,0,0.12);
  --s-glow: 0 0 28px rgba(34,211,238,0.22), 0 0 56px rgba(34,211,238,0.10);

  /* Radii */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  40px;
  --r-pill: 9999px;

  /* Motion */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --snap:   cubic-bezier(0.23, 1, 0.32, 1);
  --t1: 180ms; --t2: 300ms; --t3: 500ms;

  /* Layout */
  --section-pad: clamp(80px, 10vw, 140px);
}

/* ── 02. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; font-size: 16px; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #f0f9ff;
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: min(1240px, 100% - 64px);
  margin-inline: auto;
}
section { padding: var(--section-pad) 0; }

/* ── 03. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(3.2rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
h4 { font-size: 1.05rem; font-weight: 700; }

.gradient-text {
  background: var(--g-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section tag — same rhythm as Lumenoid */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
  color: var(--aqua-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.section-tag svg { width: 13px; height: 13px; }

.section-header { margin-bottom: clamp(48px, 6vw, 72px); }
.section-title  { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.06; margin-bottom: 14px; }
.section-sub    { font-size: 1rem; color: var(--tx-2); max-width: 500px; line-height: 1.75; }

/* Dark-section overrides */
.on-dark .section-tag  { color: var(--aqua-light); }
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--tx-1); }
.on-dark .section-sub  { color: var(--tx-2); }

/* ── 04. BUTTON SYSTEM ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .01em;
  cursor: pointer;
  border: none;
  transition: all var(--t2) var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.11);
  opacity: 0;
  transition: opacity var(--t1);
}
.btn:hover::before { opacity: 1; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--g-aqua);
  color: #fff;
  box-shadow: var(--s-aqua);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--aqua-glow), 0 3px 10px rgba(0,0,0,0.15);
}

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  color: var(--tx-1);
  backdrop-filter: var(--glass-blur);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--border-h);
  transform: translateY(-2px);
}

.btn-white {
  background: #fff;
  color: var(--ocean);
  font-weight: 700;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,255,255,0.22);
}

.btn-ghost-white {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.30);
  color: #fff;
  backdrop-filter: blur(12px);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-2px);
}

.btn-wa {
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.35);
  color: #4ade80;
  box-shadow: 0 0 20px rgba(34,197,94,0.12);
}
.btn-wa:hover {
  background: rgba(34,197,94,0.25);
  box-shadow: 0 8px 28px rgba(34,197,94,0.25);
  transform: translateY(-2px);
}

.btn-sm { padding: 9px 18px; font-size: .8rem; }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

/* ── 05. FLOATING ACTIONS ───────────────────────────────────── */
.floating-actions {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.fab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .82rem;
  transition: all var(--t2) var(--spring);
  box-shadow: var(--s-md);
  text-decoration: none;
}
.fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.fab-whatsapp {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 28px rgba(22,163,74,0.40);
}
.fab-whatsapp:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 40px rgba(22,163,74,0.55); }
.fab-call {
  background: var(--g-aqua);
  color: #fff;
  box-shadow: var(--s-aqua);
}
.fab-call:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--s-glow); }

/* ── 06. NAVBAR ─────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: all var(--t2) var(--ease);
}
.header.scrolled {
  background: rgba(4,30,47,0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity var(--t1);
  flex-shrink: 0;
}
.logo:hover { opacity: .82; }
.logo img { height: 58px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(34,211,238,0.35)); }
.logo-wordmark {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.logo-wordmark span {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
}
nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all var(--t1) var(--ease);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  width: 0; height: 1.5px;
  background: var(--aqua);
  transform: translateX(-50%);
  transition: width var(--t2) var(--snap);
}
.nav-link:hover::after, .nav-link.active::after { width: 52%; }
.nav-link:hover  { color: #fff; }
.nav-link.active { color: #fff; background: rgba(34,211,238,0.10); }

.header-cta { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.btn-nav {
  font-size: .78rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.15);
  border: 1px solid rgba(34,211,238,0.35);
  color: var(--aqua-light);
  transition: all var(--t2) var(--snap);
}
.btn-nav:hover {
  background: var(--g-aqua);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--s-aqua);
  transform: translateY(-1px);
}

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(4,30,47,0.97);
  backdrop-filter: blur(24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link { font-size: 1.6rem; font-weight: 800; font-family: 'Open Sans', sans-serif; color: #fff; }
.mobile-nav-close { position: absolute; top: 24px; right: 24px; font-size: 1.8rem; color: #fff; background: none; border: none; cursor: pointer; }

/* ── 07. HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
  padding: 120px 0 80px;
}

/* Ken Burns keyframes — alternating zoom-in / zoom-out / pan */
@keyframes kbIn {
  0%   { transform: scale(1.00) translate(0,   0);   }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}
@keyframes kbOut {
  0%   { transform: scale(1.18) translate(-2%, -2%); }
  100% { transform: scale(1.00) translate( 2%,  1%); }
}
@keyframes kbPanLeft {
  0%   { transform: scale(1.12) translate( 2%,  0); }
  100% { transform: scale(1.12) translate(-2%,  0); }
}
@keyframes kbPanRight {
  0%   { transform: scale(1.12) translate(-2%,  0); }
  100% { transform: scale(1.12) translate( 2%,  0); }
}

/* Alternate between four Ken Burns phases seamlessly */
@keyframes kbCycle {
  0%    { transform: scale(1.00) translate( 0,    0);   }
  24%   { transform: scale(1.18) translate(-2%,  -2%);  }
  25%   { transform: scale(1.18) translate(-2%,  -2%);  }
  49%   { transform: scale(1.00) translate( 2%,   1%);  }
  50%   { transform: scale(1.12) translate( 2%,   0);   }
  74%   { transform: scale(1.12) translate(-2%,   0);   }
  75%   { transform: scale(1.12) translate(-2%,   0);   }
  99%   { transform: scale(1.00) translate( 0%,   0%);  }
  100%  { transform: scale(1.00) translate( 0,    0);   }
}

/* Photo layer */
.hero-bg-image {
  position: absolute; inset: 0;
  background:
    url('https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?auto=format&fit=crop&w=1800&q=80')
    center/cover no-repeat;
  opacity: .32;
  will-change: transform;
  animation: kbCycle 32s ease-in-out infinite;
  transform-origin: center center;
}

/* Layered overlays */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(4,30,47,0.95) 0%, rgba(4,30,47,0.70) 55%, rgba(4,30,47,0.25) 100%),
    linear-gradient(to top,   rgba(4,30,47,0.80) 0%, transparent 50%);
}

/* Atmosphere blobs — like Lumenoid */
.hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: blobFloat ease-in-out infinite alternate;
}
.blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(34,211,238,0.22) 0%, transparent 70%);
  top: -150px; right: -100px;
  animation-duration: 18s;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(8,145,178,0.18) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation-duration: 24s;
  animation-delay: 3s;
}
.blob-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, transparent 70%);
  top: 40%; left: 35%;
  animation-duration: 16s;
  animation-delay: 6s;
}
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 25px) scale(1.08); }
}

/* Mesh grid overlay */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* Hero layout */
.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

/* Hero badge */
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.28);
  color: var(--aqua-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 28px;
  animation: fadeSlideUp .8s var(--ease) .1s both;
}
.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(74,222,128,.4);
  animation: pulseGreen 2.2s infinite;
}
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.4); }
  50%     { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
}

/* Headline */
.hero h1 {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  line-height: .95;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeSlideUp .9s var(--ease) .2s both;
}
.hero h1 .stroke {
  display: block;
  color: #ffffff;
  -webkit-text-stroke: 0;
  /* bright white, no outline effect */
}
.hero h1 .fill {
  display: block;
  background: var(--g-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 .dim {
  display: block;
  font-size: .72em;
  color: rgba(255,255,255,0.70);
  -webkit-text-stroke: 0;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--tx-2);
  max-width: 460px;
  margin-bottom: 2.8rem;
  animation: fadeSlideUp .9s var(--ease) .35s both;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  animation: fadeSlideUp .9s var(--ease) .5s both;
}

/* Hero stats pill — Lumenoid style */
.hero-stats {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-b);
  border-radius: var(--r-xl);
  width: fit-content;
  gap: 0;
  animation: fadeSlideUp .9s var(--ease) .65s both;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
}
.hero-stat + .hero-stat {
  border-left: 1px solid var(--border);
}
.hero-stat-num {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-stat-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-top: 4px;
  white-space: nowrap;
}

/* ── HERO GLASS CARD (booking widget) ─── */
.hero-card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-2xl);
  padding: 40px;
  box-shadow: var(--s-xl), 0 0 0 1px rgba(255,255,255,0.45), inset 0 1px 0 rgba(255,255,255,1);
  position: relative;
  overflow: hidden;
  animation: fadeSlideLeft 1s var(--ease) .4s both;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.hero-card-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ocean);
  letter-spacing: -0.03em;
}
.hero-card-badge {
  background: var(--g-aqua);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  box-shadow: var(--s-aqua);
}

/* Widget form */
.widget-fields { display: flex; flex-direction: column; gap: 12px; }
.widget-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.widget-field  {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(240,249,255,0.7);
  border: 1.5px solid rgba(34,211,238,0.15);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: all var(--t2) var(--ease);
}
.widget-field:focus-within {
  border-color: var(--aqua);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.12);
}
.widget-field svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; }
.widget-field input,
.widget-field select {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem;
  color: var(--ocean);
  outline: none;
  padding: 0;
  min-width: 0;
}
.widget-field select { cursor: pointer; }
.widget-field input::placeholder { color: #94a3b8; }
.widget-submit {
  width: 100%;
  padding: 15px;
  background: var(--g-aqua);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  letter-spacing: -.01em;
  transition: all var(--t2) var(--snap);
  box-shadow: var(--s-aqua);
  margin-top: 4px;
}
.widget-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--aqua-glow), var(--s-aqua);
  background: var(--g-aqua-h);
}
.widget-alts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.widget-alt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border-radius: var(--r-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  transition: all var(--t2) var(--snap);
  text-decoration: none;
}
.widget-alt-wa {
  background: rgba(34,197,94,0.10);
  border: 1.5px solid rgba(34,197,94,0.25);
  color: #15803d;
}
.widget-alt-wa:hover {
  background: #22c55e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34,197,94,0.38);
}
.widget-alt-call {
  background: rgba(34,211,238,0.08);
  border: 1.5px solid rgba(34,211,238,0.22);
  color: var(--ocean);
}
.widget-alt-call:hover {
  background: var(--g-aqua);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--s-aqua);
}

/* Floating context chips */
.hero-float {
  position: absolute;
  background: rgba(4,30,47,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(34,211,238,0.20);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--s-lg);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
@keyframes floatY  { 0%,100% { transform: translateY(0);   } 50% { transform: translateY(-7px); } }
@keyframes floatYR { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY( 3px); } }
@keyframes floatD  { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -6px); } }

/* Staggered positions — intentionally offset so they're never aligned */
.hero-float-1 {
  top: -22px;
  left: -18px;
  animation: chipIn .6s cubic-bezier(0.22,1,0.36,1) .9s both, floatY 4.8s ease-in-out 1.5s infinite;
}
.hero-float-2 {
  bottom: 60px;
  left: -24px;
  animation: chipIn .6s cubic-bezier(0.22,1,0.36,1) 1.15s both, floatD 5.4s ease-in-out 2s infinite;
}
.hero-float-3 {
  top: 38px;
  right: -20px;
  animation: chipIn .6s cubic-bezier(0.22,1,0.36,1) 1.35s both, floatYR 5.1s ease-in-out 1.8s infinite;
}
.hf-icon svg { width: 15px; height: 15px; flex-shrink: 0; }
.hf-text { font-size: .78rem; font-weight: 700; line-height: 1.2; }
.hf-sub  { font-size: .66rem; color: rgba(255,255,255,0.48); margin-top: 1px; }

/* ── 08. TRUST BAND ─────────────────────────────────────────── */
.trust-band {
  background: var(--deep);
  border-top: 1px solid rgba(34,211,238,0.10);
  border-bottom: 1px solid rgba(34,211,238,0.10);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.trust-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(34,211,238,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.trust-band-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative; z-index: 1;
}
.tb-item {
  text-align: center;
  padding: 0 28px;
  position: relative;
  transition: transform var(--t2) var(--spring);
  cursor: default;
}
.tb-item:hover { transform: translateY(-4px); }
.tb-item + .tb-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; height: 76%;
  width: 1px;
  background: var(--border);
}
.tb-num {
  font-family: 'Open Sans', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 6px;
  background: var(--g-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tb-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* ── 09. PROCESS SECTION ────────────────────────────────────── */
.process-section {
  background: var(--deep);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34,211,238,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(8,145,178,0.05) 0%, transparent 55%);
  pointer-events: none;
}
.process-header {
  max-width: 540px;
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
}
.process-header p { color: var(--tx-2); font-size: .98rem; margin-top: 12px; line-height: 1.75; }

.process-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
  z-index: 1;
}
/* Animated connector line */
.process-track::before {
  content: '';
  position: absolute;
  top: 48px;
  left: calc(16.666% + 12px);
  right: calc(16.666% + 12px);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(34,211,238,0.5) 0%,
    rgba(34,211,238,0.2) 50%,
    rgba(34,211,238,0.5) 100%);
  animation: lineFlow 3s ease-in-out infinite;
}
@keyframes lineFlow {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; box-shadow: 0 0 8px rgba(34,211,238,.6); }
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.process-num-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}
.process-num {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--g-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  position: relative;
  transition: all var(--t2) var(--spring);
}
/* Pulsing rings */
.process-num::before, .process-num::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.28);
  animation: ringExpand 3s ease-out infinite;
}
.process-num::after {
  inset: -16px;
  border-color: rgba(34,211,238,0.14);
  animation-delay: 1.5s;
}
@keyframes ringExpand {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.32); opacity: 0; }
}
.process-step:hover .process-num {
  transform: scale(1.08);
  box-shadow: var(--s-glow);
}
.process-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-b);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  width: 100%;
  transition: all var(--t2) var(--snap);
}
.process-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--g-aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t2) var(--ease);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.process-step:hover .process-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(34,211,238,0.28);
  transform: translateY(-4px);
  box-shadow: var(--s-md), 0 0 20px rgba(34,211,238,0.08);
}
.process-step:hover .process-card::before { transform: scaleX(1); }
.process-card h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
}
.process-card p { color: var(--tx-2); font-size: .82rem; line-height: 1.72; }
.process-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.ptag {
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.20);
  color: rgba(34,211,238,.82);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.process-cta {
  text-align: center;
  margin-top: 72px;
  position: relative;
  z-index: 1;
}
.process-cta p {
  color: var(--tx-3);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ── 10. SERVICES — Photo grid ──────────────────────────────── */
.services-section {
  background: #fff;
  padding: var(--section-pad) 0;
}
.services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 20px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.svc-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t2) var(--spring), box-shadow var(--t2) var(--ease);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--s-lg); }
.svc-card.featured { grid-column: span 2; min-height: 400px; }
.svc-card:not(.featured) { min-height: 280px; }

.svc-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s var(--ease), opacity .3s;
}
.svc-card:hover .svc-img { transform: scale(1.06); }

/* Photo art — real water/fabric images */
.svc-img-1 { background-image: url('https://images.unsplash.com/photo-1545173168-9f1947eebb7f?auto=format&fit=crop&w=1200&q=82'); }
.svc-img-2 { background-image: url('https://images.unsplash.com/photo-1582735689369-4fe89db7114c?auto=format&fit=crop&w=800&q=80'); }
.svc-img-3 { background-image: url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?auto=format&fit=crop&w=800&q=80'); }
.svc-img-4 { background-image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=800&q=80'); }
.svc-img-5 { background-image: url('https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?auto=format&fit=crop&w=800&q=80'); }
.svc-img-6 { background-image: url('https://images.unsplash.com/photo-1567376783744-acd50fe8cb93?auto=format&fit=crop&w=800&q=80'); }

.svc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,30,47,0.92) 0%, rgba(4,30,47,0.42) 50%, rgba(4,30,47,0.05) 100%);
  transition: background .3s;
}
.svc-card:hover .svc-overlay {
  background: linear-gradient(to top, rgba(4,30,47,0.96) 0%, rgba(4,30,47,0.55) 50%, rgba(4,30,47,0.12) 100%);
}
.svc-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  z-index: 1;
}
.svc-tag {
  display: inline-block;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(34,211,238,0.18);
  border: 1px solid rgba(34,211,238,0.40);
  color: var(--aqua);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
  backdrop-filter: blur(8px);
}
.svc-card h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
.svc-card.featured h3 { font-size: 1.9rem; }
.svc-card p {
  color: rgba(255,255,255,0.60);
  font-size: .82rem;
  line-height: 1.65;
}
.svc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  margin-top: 16px;
  transition: all var(--t2) var(--spring);
}
.svc-card:hover .svc-arrow {
  background: var(--g-aqua);
  border-color: transparent;
  transform: translateX(4px);
  box-shadow: var(--s-aqua);
}

/* ── 11. USP SECTION ────────────────────────────────────────── */
.usp-section {
  background: #f0f9ff;
  padding: var(--section-pad) 0;
}
.usp-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}
.usp-left h2    { margin-bottom: 1.2rem; }
.usp-left p     { color: var(--ink-3); font-size: .93rem; line-height: 1.82; margin-bottom: 2rem; }
.usp-actions    { display: flex; gap: 14px; flex-wrap: wrap; }

.usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.usp-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 26px 22px;
  border: 1px solid rgba(8,47,73,0.07);
  box-shadow: 0 1px 4px rgba(8,47,73,0.05);
  transition: all var(--t2) var(--spring);
  position: relative;
  overflow: hidden;
}
.usp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.usp-card:hover { transform: translateY(-4px); box-shadow: var(--s-md); border-color: rgba(34,211,238,0.18); }
.usp-card:hover::before { transform: scaleX(1); }
.usp-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.06));
  border: 1px solid rgba(34,211,238,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: all var(--t2) var(--spring);
}
.usp-icon svg { width: 20px; height: 20px; color: var(--teal); }
.usp-card:hover .usp-icon {
  background: var(--g-aqua);
  border-color: transparent;
  box-shadow: 0 6px 20px var(--aqua-glow);
}
.usp-card:hover .usp-icon svg { color: #fff; }
.usp-card h4 { font-size: .95rem; font-weight: 800; margin-bottom: 6px; color: var(--ink); letter-spacing: -0.02em; }
.usp-card p  { font-size: .78rem; color: var(--ink-3); line-height: 1.65; }

/* ── 12. WATER SECTION ──────────────────────────────────────── */
.water-section {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.water-bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1800&q=82') center/cover no-repeat;
}
.water-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(4,30,47,0.90) 0%, rgba(8,145,178,0.48) 100%);
}
.water-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.water-blob  { position: absolute; border-radius: 50%; filter: blur(60px); animation: blobFloat ease-in-out infinite alternate; }
.wb1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(34,211,238,0.14) 0%, transparent 70%); top: -80px;  right: -60px; animation-duration: 18s; }
.wb2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(8,145,178,0.10) 0%, transparent 70%); bottom: 0; left: 10%;   animation-duration: 22s; }

.water-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 100px 0;
  width: 100%;
}
.water-content { color: #fff; }

.eco-features { display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }
.eco-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: all var(--t2) var(--ease);
}
.eco-feat:hover { background: rgba(255,255,255,0.10); border-color: rgba(34,211,238,0.25); transform: translateX(3px); }
.ef-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(34,211,238,0.15);
  border: 1px solid rgba(34,211,238,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef-icon svg { width: 17px; height: 17px; color: var(--aqua); }
.ef-title { font-size: .85rem; font-weight: 800; color: #fff; margin-bottom: 3px; letter-spacing: -0.02em; }
.ef-desc  { font-size: .76rem; color: rgba(255,255,255,0.52); line-height: 1.6; }

/* Glass stat cards */
.water-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wstat {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.80);
  border-radius: var(--r-lg);
  padding: 30px 24px;
  text-align: center;
  transition: all var(--t2) var(--spring);
}
.wstat:hover { transform: translateY(-3px); background: rgba(255,255,255,0.72); box-shadow: var(--s-md); }
.wstat-num {
  font-family: 'Open Sans', sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--ocean);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 6px;
}
.wstat-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 13. TESTIMONIALS ───────────────────────────────────────── */
.testi-section { background: #fff; padding: var(--section-pad) 0; }
.testi-header  { text-align: center; max-width: 560px; margin: 0 auto 64px; }
.testi-header p { color: var(--ink-3); font-size: .93rem; margin-top: 12px; }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.testi-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px 28px;
  border: 1px solid rgba(8,47,73,0.08);
  box-shadow: 0 1px 4px rgba(8,47,73,0.05);
  position: relative;
  overflow: hidden;
  transition: all var(--t2) var(--spring);
}
.testi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--g-aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--s-md); border-color: rgba(34,211,238,0.18); }
.testi-card:hover::after { transform: scaleX(1); }

.testi-quote {
  font-family: 'Open Sans', sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  color: rgba(34,211,238,0.18);
  line-height: .9;
  margin-bottom: 6px;
}
.tstars  { color: #fbbf24; font-size: .78rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-body {
  font-size: .87rem;
  line-height: 1.82;
  color: var(--ink-3);
  margin-bottom: 24px;
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.tav {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--g-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px var(--aqua-glow);
  flex-shrink: 0;
}
.tname { font-size: .84rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.trole { font-size: .7rem; color: var(--ink-3); margin-top: 1px; }

/* ── 14. CTA SECTION ────────────────────────────────────────── */
.cta-section {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
  background: var(--deep);
}
.cta-bg-img {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1521656958158-0ac47b5d9f3d?auto=format&fit=crop&w=1800&q=80') center/cover;
  opacity: .14;
}
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(4,30,47,.96) 0%, rgba(8,145,178,.38) 100%); }
.cta-blobs   { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cb1 { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.12) 0%, transparent 70%); top: -200px; right: -100px; filter: blur(80px); animation: blobFloat 20s ease-in-out infinite alternate; }
.cb2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(8,145,178,.08) 0%, transparent 70%); bottom: -100px; left: -60px;   filter: blur(80px); animation: blobFloat 25s ease-in-out infinite alternate; animation-delay: 5s; }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner h2 { color: #fff; max-width: 640px; margin: 0 auto 1rem; }
.cta-inner p  { color: rgba(255,255,255,0.55); font-size: 1rem; margin-bottom: 2.8rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-actions  { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cta-note     { color: rgba(255,255,255,0.20); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }

/* ── 15. FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 72px 0 36px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-logo-row img { height: 38px; filter: drop-shadow(0 0 10px rgba(34,211,238,.4)); }
.footer-brand-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.footer-brand p {
  font-size: .8rem;
  line-height: 1.75;
  color: var(--tx-3);
  max-width: 280px;
  margin-bottom: 22px;
}
.footer-social { display: flex; gap: 10px; }
.fsoc {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--glass-b);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-3);
  transition: all var(--t2) var(--spring);
}
.fsoc:hover { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.35); color: var(--aqua); transform: translateY(-2px); }
.fsoc svg { width: 15px; height: 15px; }
.footer-col h5 {
  font-family: 'Open Sans', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: .8rem;
  color: var(--tx-3);
  margin-bottom: 12px;
  transition: color var(--t1);
}
.footer-col a:hover { color: var(--aqua); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: .73rem; color: var(--tx-3); }

/* ── 16. INNER PAGE FORMS ───────────────────────────────────── */
input, select, textarea {
  width: 100%;
  padding: 13px 17px;
  background: #f0f9ff;
  border: 1.5px solid rgba(34,211,238,0.14);
  border-radius: var(--r-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .87rem;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--t2) var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--aqua);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.12);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
textarea { resize: vertical; min-height: 100px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230891b2'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}
label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group  { margin-bottom: 18px; }
.form-card {
  background: #fff;
  border-radius: var(--r-2xl);
  padding: 48px;
  box-shadow: var(--s-lg);
  border: 1px solid rgba(34,211,238,0.08);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-aqua);
}
.success-msg {
  background: linear-gradient(135deg,#d1fae5,#ecfdf5);
  border: 1px solid #6ee7b7;
  border-radius: var(--r-md);
  padding: 16px 20px;
  color: #065f46;
  margin-bottom: 20px;
  font-size: .86rem;
  font-weight: 600;
}
.error-msg {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--r-md);
  padding: 14px 18px;
  color: #991b1b;
  margin-bottom: 18px;
  font-size: .82rem;
}

/* ── 17. PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  position: relative;
  padding: 180px 0 110px;
  overflow: hidden;
  background: var(--deep);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1800&q=80') center/cover;
  opacity: .18;
}
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,30,47,0.92), rgba(4,30,47,0.78)); }
.page-hero-inner   { position: relative; z-index: 1; text-align: center; }
.page-hero h1      { color: #fff; margin-bottom: 1rem; }
.page-hero p       { color: rgba(255,255,255,0.58); font-size: 1.05rem; }

/* ── 18. ABOUT ──────────────────────────────────────────────── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-img-wrap { position: relative; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4/5; }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-img-badge {
  position: absolute;
  bottom: 24px; left: 24px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-md);
  padding: 16px 20px;
  box-shadow: var(--s-md);
}
.aib-num   { font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--ocean); line-height: 1; }
.aib-label { font-size: .68rem; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; }
.about-content h2 { margin-bottom: 1.2rem; }
.about-content p  { color: var(--ink-3); font-size: .9rem; line-height: 1.82; margin-bottom: .8rem; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 2.4rem; }
.val-card {
  background: #f0f9ff;
  border-radius: var(--r-md);
  padding: 20px;
  border: 1px solid rgba(8,47,73,0.07);
  transition: all var(--t2) var(--spring);
}
.val-card:hover { transform: translateY(-2px); box-shadow: var(--s-sm); border-color: rgba(34,211,238,0.18); }
.val-card h4 { font-size: .88rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.02em; }
.val-card p  { font-size: .76rem; color: var(--ink-3); }

/* ── 19. SERVICES PAGE ──────────────────────────────────────── */
.svc-page-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }
.svc-page-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 34px 26px;
  border: 1px solid rgba(8,47,73,0.08);
  box-shadow: 0 1px 4px rgba(8,47,73,0.05);
  position: relative;
  overflow: hidden;
  transition: all var(--t2) var(--spring);
  cursor: pointer;
}
.svc-page-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--g-aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.svc-page-card:hover { transform: translateY(-5px); box-shadow: var(--s-md); }
.svc-page-card:hover::after { transform: scaleX(1); }
.svc-page-icon {
  width: 58px; height: 58px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.06));
  border: 1px solid rgba(34,211,238,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all var(--t2) var(--spring);
}
.svc-page-icon svg { width: 24px; height: 24px; color: var(--teal); }
.svc-page-card:hover .svc-page-icon { background: var(--g-aqua); border-color: transparent; box-shadow: 0 8px 24px var(--aqua-glow); transform: scale(1.08) rotate(-4deg); }
.svc-page-card:hover .svc-page-icon svg { color: #fff; }
.svc-page-card h3 { font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.svc-page-card p  { font-size: .8rem; color: var(--ink-3); line-height: 1.7; }
.svc-badge {
  display: inline-block;
  margin-top: 14px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.09);
  border: 1px solid rgba(34,211,238,0.20);
  color: var(--teal);
}

/* ── 20. PICKUP PAGE ────────────────────────────────────────── */
.pickup-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.pickup-info h2 { margin-bottom: 1rem; }
.pickup-info p  { color: var(--ink-3); font-size: .9rem; line-height: 1.82; margin-bottom: 1.8rem; }
.pickup-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pf-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.06));
  border: 1px solid rgba(34,211,238,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-icon svg { width: 17px; height: 17px; color: var(--teal); }
.pf-title { font-size: .86rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pf-sub   { font-size: .76rem; color: var(--ink-3); }

/* ── 21. CONTACT PAGE ───────────────────────────────────────── */
.contact-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contact-info  { background: #fff; border-radius: var(--r-2xl); padding: 40px; box-shadow: var(--s-md); border: 1px solid rgba(8,47,73,0.08); }
.contact-info h3 { margin-bottom: 1.6rem; font-size: 1.3rem; }
.contact-row {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 22px; padding-bottom: 22px;
  border-bottom: 1px solid rgba(8,47,73,0.06);
}
.contact-row:last-of-type { border: none; margin-bottom: 0; padding-bottom: 0; }
.cr-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.06));
  border: 1px solid rgba(34,211,238,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--t2) var(--spring);
}
.contact-row:hover .cr-icon { background: var(--g-aqua); border-color: transparent; transform: scale(1.08); }
.contact-row:hover .cr-icon svg { color: #fff; }
.cr-icon svg { width: 16px; height: 16px; color: var(--teal); }
.cr-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 3px; }
.cr-val   { font-size: .88rem; color: var(--ink); font-weight: 600; }
.cr-val a { color: var(--ocean); }
.cr-val a:hover { color: var(--teal); }
.contact-socials { display: flex; gap: 10px; margin-top: 22px; }
.csoc {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700;
  transition: all var(--t2) var(--spring);
}
.csoc-wa { background: #22c55e; color: #fff; }
.csoc-wa:hover { box-shadow: 0 6px 20px rgba(34,197,94,0.40); transform: translateY(-2px); }
.csoc-ig { background: linear-gradient(135deg,#f43f5e,#8b5cf6); color: #fff; }
.csoc-ig:hover { box-shadow: 0 6px 20px rgba(244,63,94,0.35); transform: translateY(-2px); }
.map-wrap { background: #fff; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--s-md); border: 1px solid rgba(8,47,73,0.08); }
.map-wrap iframe { width: 100%; height: 380px; border: none; display: block; }
.map-footer { padding: 22px 28px; display: flex; align-items: center; gap: 12px; }
.map-footer p { font-size: .8rem; color: var(--ink-3); }
.map-footer strong { color: var(--ink); }

/* ── 22. SCROLL ANIMATIONS ──────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s var(--snap), transform .72s var(--snap);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(1) { transition-delay: .05s; }
.fade-up:nth-child(2) { transition-delay: .13s; }
.fade-up:nth-child(3) { transition-delay: .21s; }
.fade-up:nth-child(4) { transition-delay: .29s; }
.fade-up:nth-child(5) { transition-delay: .37s; }
.fade-up:nth-child(6) { transition-delay: .45s; }

/* ── 23. KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeSlideUp   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideLeft { from { opacity: 0; transform: translateX(36px); }  to { opacity: 1; transform: translateX(0); } }

/* ── 24. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner       { gap: 48px; }
  .services-grid    { grid-template-columns: 1fr 1fr; }
  .svc-card.featured { grid-column: span 2; }
  .footer-inner     { grid-template-columns: 1fr 1fr; }
  .trust-band-inner { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .tb-item+.tb-item:nth-child(odd)::before { display: none; }
}
@media (max-width: 860px) {
  .hero-inner,.usp-inner,.water-inner,.about-split,.pickup-split,.contact-split { grid-template-columns: 1fr; }
  .process-track    { grid-template-columns: 1fr; gap: 24px; }
  .process-track::before { display: none; }
  .testi-grid       { grid-template-columns: 1fr; }
  .svc-page-grid    { grid-template-columns: 1fr 1fr; }
  .form-row         { grid-template-columns: 1fr; }
  .form-card        { padding: 32px 24px; }
  .hero-inner       { padding: 140px 0 80px; }
}
@media (max-width: 768px) {
  nav, .header-cta { display: none; }
  .hamburger        { display: flex; }
  .hero-inner       { grid-template-columns: 1fr; }
  .hero-card, .hero-float { display: none; }
  .services-grid    { grid-template-columns: 1fr; }
  .svc-card.featured { grid-column: span 1; }
  .water-stats      { grid-template-columns: 1fr 1fr; }
  .footer-inner     { grid-template-columns: 1fr 1fr; }
  .fab span         { display: none; }
  .fab              { padding: 13px; }
}
@media (max-width: 480px) {
  .svc-page-grid, .values-grid, .trust-band-inner { grid-template-columns: 1fr; }
  .footer-inner     { grid-template-columns: 1fr; }
  .footer-bottom    { flex-direction: column; text-align: center; gap: 8px; }
  h1 { font-size: 2.9rem; }
}

/* ── 25. MISSING VARS & ALIASES ─────────────────────────────── */
:root {
  --bg:              #f0f9ff;
  --bg-alt:          #e0f2fe;
  --white:           #ffffff;
  --muted:           #64748b;
  --radius-sm:       var(--r-sm);
  --radius-md:       var(--r-md);
  --radius-lg:       var(--r-lg);
  --shadow-soft:     0 2px 12px rgba(8,47,73,0.08);
  --gradient-subtle: linear-gradient(135deg, rgba(34,211,238,0.06) 0%, rgba(8,145,178,0.03) 100%);
}

/* ── 26. SECTION LABEL (inner pages) ────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.25);
  color: var(--aqua-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
/* On light backgrounds, override to dark */
.section-label.dark {
  color: var(--teal);
  background: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.18);
}

/* ── 27. PAGE-HERO SECTION-TAG / SECTION-LABEL CENTERING ────── */
.page-hero-inner .section-tag,
.page-hero-inner .section-label {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* ── 28. ADDITIONAL BUTTON VARIANTS ────────────────────────── */
.btn-whatsapp {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 4px 16px rgba(22,163,74,0.30);
}
.btn-whatsapp:hover {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22,163,74,0.40);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(34,211,238,0.35);
  color: var(--teal);
}
.btn-outline:hover {
  background: rgba(34,211,238,0.08);
  border-color: var(--aqua);
  transform: translateY(-2px);
}

.btn-white-outline {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
}
.btn-white-outline:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.60);
  transform: translateY(-2px);
}

/* ── 29. ABOUT PAGE — INNER SPECIFIC ────────────────────────── */
.about-section  { background: #fff; padding: var(--section-pad) 0; }
.about-inner    { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

/* Visual column: logo card + stat chips */
.about-visual   { position: relative; }
.about-main-card {
  background: var(--deep);
  border-radius: var(--r-2xl);
  padding: 48px 40px;
  text-align: center;
  box-shadow: var(--s-xl);
  border: 1px solid var(--glass-b);
  position: relative;
  overflow: hidden;
}
.about-main-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,211,238,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.about-logo-wrap {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
}
.about-logo-wrap img { height: 52px; filter: drop-shadow(0 2px 8px rgba(34,211,238,0.4)); }
.about-main-card h3 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.about-main-card p  { color: var(--tx-3); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* Floating stat chips */
.about-float-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.about-float-stat {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(34,211,238,0.12);
  box-shadow: var(--shadow-soft);
  transition: all var(--t2) var(--spring);
}
.about-float-stat:hover { transform: translateY(-3px); box-shadow: var(--s-md); }
.about-float-num   { font-family: 'Open Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--ocean); line-height: 1; letter-spacing: -0.04em; }
.about-float-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* Content */
.about-content h2 { color: var(--ink); margin-bottom: 1.2rem; }
.about-content p  { color: var(--ink-3); font-size: .9rem; line-height: 1.82; margin-bottom: .8rem; }

/* Value items */
.value-item {
  background: #f0f9ff;
  border-radius: var(--r-md);
  padding: 20px;
  border: 1px solid rgba(8,47,73,0.07);
  transition: all var(--t2) var(--spring);
}
.value-item:hover { transform: translateY(-3px); box-shadow: var(--s-md); border-color: rgba(34,211,238,0.18); }
.value-item h4 { font-size: .88rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.value-item p  { font-size: .76rem; color: var(--ink-3); }

/* ── 30. SERVICES PAGE — INNER SPECIFIC ─────────────────────── */
/* .svc-page-grid and .svc-page-card already defined — section wrapper */
.services-inner-section { background: #fff; padding: var(--section-pad) 0; }
.services-inner-header  { text-align: center; margin-bottom: 56px; }

/* ── 31. PICKUP PAGE — INNER SPECIFIC ──────────────────────── */
.pickup-section  { background: #fff; padding: var(--section-pad) 0; }
/* .pickup-split, .pickup-info, .pickup-feature, .pf-icon, etc. already defined */
/* alias for pages that used .pickup-inner */
.pickup-inner    { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }

/* instant-book box */
.instant-book {
  margin-top: 2rem;
  padding: 20px 24px;
  background: var(--gradient-subtle);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: var(--r-md);
}
.instant-book p   { font-size: .85rem; color: var(--ink-3); margin-bottom: 12px; }
.instant-book strong { color: var(--ink); }
.instant-book-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* form submit row */
.form-submit-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form-whatsapp-note {
  font-size: .72rem;
  color: var(--ink-3);
  margin-top: 10px;
  line-height: 1.6;
}

/* ── 32. CONTACT PAGE — INNER SPECIFIC ──────────────────────── */
/* CSS already has .contact-split, .contact-info, .contact-row, .cr-icon,
   .cr-label, .cr-val, .contact-socials, .csoc, .map-wrap, .map-footer */
/* aliases for old class names used in contact.php: */
.contact-section     { padding: var(--section-pad) 0; background: #f0f9ff; }
.contact-inner       { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contact-info-card   { background: #fff; border-radius: var(--r-2xl); padding: 40px; box-shadow: var(--s-md); border: 1px solid rgba(8,47,73,0.08); }
.contact-info-card h3 { margin-bottom: 1.6rem; font-size: 1.3rem; color: var(--ink); }
.contact-item        { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(8,47,73,0.06); transition: all var(--t1); }
.contact-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-icon        { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,rgba(34,211,238,0.10),rgba(8,145,178,0.06)); border: 1px solid rgba(34,211,238,0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; transition: all var(--t2) var(--spring); }
.contact-item:hover .contact-icon { background: var(--g-aqua); transform: scale(1.08); }
.contact-item-label  { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 3px; }
.contact-item-val    { font-size: .88rem; color: var(--ink); font-weight: 600; }
.contact-item-val a  { color: var(--ocean); }
.contact-item-val a:hover { color: var(--teal); }
.contact-social      { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.social-btn          { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 700; transition: all var(--t2) var(--spring); }
.social-btn-wa       { background: #22c55e; color: #fff; }
.social-btn-wa:hover { box-shadow: 0 6px 20px rgba(34,197,94,0.40); transform: translateY(-2px); }
.social-btn-ig       { background: linear-gradient(135deg,#f43f5e,#8b5cf6); color: #fff; }
.social-btn-ig:hover { box-shadow: 0 6px 20px rgba(244,63,94,0.35); transform: translateY(-2px); }
.map-card            { background: #fff; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--s-md); border: 1px solid rgba(8,47,73,0.08); }
.map-card iframe     { width: 100%; height: 380px; border: none; display: block; }
.map-card-footer     { padding: 22px 28px; display: flex; align-items: center; gap: 12px; background: #fff; }
.map-card-footer p   { font-size: .8rem; color: var(--ink-3); line-height: 1.55; }
.map-card-footer strong { color: var(--ink); display: block; margin-bottom: 2px; }
.faq-card            { background: #fff; border-radius: var(--r-xl); padding: 32px; margin-top: 24px; box-shadow: var(--shadow-soft); border: 1px solid rgba(34,211,238,0.09); }
.faq-card h4         { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 20px; }
.faq-item            { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(34,211,238,0.08); }
.faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.faq-item strong     { font-size: .88rem; color: var(--ink); display: block; margin-bottom: 4px; }
.faq-item p          { font-size: .82rem; color: var(--ink-3); line-height: 1.65; }

/* ── 33. CTA BANNER ALIAS ───────────────────────────────────── */
.cta-banner {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: var(--deep);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(34,211,238,0.09) 0%, transparent 65%);
  pointer-events: none;
}
.cta-banner .cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-banner .cta-inner h2 { color: #fff; max-width: 640px; margin: 0 auto 1rem; }
.cta-banner .cta-inner p  { color: rgba(255,255,255,0.55); font-size: 1rem; margin-bottom: 2.8rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-banner .cta-actions  { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── 34. FLOATING ACTIONS MOBILE FIX ───────────────────────── */
@media (max-width: 768px) {
  .floating-actions { bottom: 20px; right: 16px; }
}

/* ── 35. ABOUT PAGE RESPONSIVE ──────────────────────────────── */
@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ── 36. CONTACT INNER RESPONSIVE ──────────────────────────── */
@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ── 37. EYEBROW LABEL (used throughout index.php) ──────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
  color: var(--aqua-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
/* Light background overrides */
.services-section .eyebrow,
.usp-section     .eyebrow,
.testi-section   .eyebrow {
  color: var(--teal);
  background: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.20);
}

/* ── 38. PROCESS SECTION — force white text on dark bg ──────── */
.process-section h2,
.process-header h2   { color: var(--tx-1) !important; }
.process-section h3,
.process-header h3   { color: var(--tx-1); }
.process-header p    { color: var(--tx-2); }
/* Water section headings */
.water-content h2    { color: #fff; }
.water-content p     { color: rgba(255,255,255,0.65); }

/* ── 39. HERO-CARD SHIMMER (one-time load animation) ────────── */
@keyframes cardShimmer {
  0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(240%) skewX(-12deg); opacity: 0; }
}
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  animation: cardShimmer 1.6s var(--ease) 1.4s 1 both;
  pointer-events: none;
  z-index: 5;
}

/* ── 40. WIDGET SUBMIT — idle glow pulse ────────────────────── */
@keyframes submitPulse {
  0%, 100% { box-shadow: var(--s-aqua); }
  50%       { box-shadow: 0 6px 28px rgba(34,211,238,0.28), 0 2px 8px rgba(0,0,0,0.10); }
}
.widget-submit {
  animation: submitPulse 3.5s ease-in-out 3s infinite;
}
.widget-submit:hover {
  animation: none;
}

/* ── 41. CARD HOVER TRANSITIONS — smoother/longer ───────────── */
.usp-card,
.testi-card,
.svc-page-card,
.svc-card,
.process-card,
.wstat,
.eco-feat,
.val-card,
.value-item {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}

/* ── 42. TRUST BAND — staggered reveal animation ────────────── */
.tb-item {
  animation: fadeSlideUp .6s var(--snap) both;
}
.tb-item:nth-child(1) { animation-delay: .1s; }
.tb-item:nth-child(2) { animation-delay: .2s; }
.tb-item:nth-child(3) { animation-delay: .3s; }
.tb-item:nth-child(4) { animation-delay: .4s; }

/* ── 43. BTN BEFORE OVERLAY — softer, no flash ──────────────── */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.09);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: inherit;
}
.btn:hover::before { opacity: 1; }

/* ── 44. SECTION PROGRESS LINE — hero to first section ─────── */
/* Subtle entrance for hero content */
.hero-content > * {
  animation-fill-mode: both;
}

/* ── 45. PROCESS NUM RING — gentler pulse ───────────────────── */
.process-num::before, .process-num::after {
  animation: ringExpand 4s ease-out infinite;
}
.process-num::after {
  animation-delay: 2s;
}

/* ── 46. FLOATING ACTIONS — entrance animation ──────────────── */
@keyframes fabIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fab {
  animation: fabIn 0.5s var(--snap) both;
}
.fab:nth-child(1) { animation-delay: 1.2s; }
.fab:nth-child(2) { animation-delay: 1.4s; }

/* ── 47. NAV LINK ACTIVE UNDERLINE — smoother ───────────────── */
.nav-link::after {
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 48. HERO STAT NUMS — subtle shimmer on load ────────────── */
@keyframes statReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-stat-num {
  animation: statReveal 0.6s var(--snap) both;
}
.hero-stat:nth-child(1) .hero-stat-num { animation-delay: 0.8s; }
.hero-stat:nth-child(2) .hero-stat-num { animation-delay: 0.95s; }
.hero-stat:nth-child(3) .hero-stat-num { animation-delay: 1.1s; }
.hero-stat:nth-child(4) .hero-stat-num { animation-delay: 1.25s; }

/* ── 49. HERO OVERLINE — gentle glow pulse ──────────────────── */
@keyframes badgePulse {
  0%, 100% { border-color: rgba(34,211,238,0.28); box-shadow: none; }
  50%       { border-color: rgba(34,211,238,0.50); box-shadow: 0 0 12px rgba(34,211,238,0.12); }
}
.hero-overline {
  animation: fadeSlideUp .8s var(--ease) .1s both,
             badgePulse 4s ease-in-out 2s infinite;
}

/* ── 50. PROCESS CARD TOP BAR — smoother reveal ─────────────── */
.process-card::before {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ── 51. HERO FLOAT CHIP STYLE — softer backdrop ────────────── */
.hero-float {
  background: rgba(4,30,47,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(34,211,238,0.16);
  box-shadow: 0 4px 20px rgba(0,0,0,0.20), 0 1px 4px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════════
   52. HUB / ORBITAL "WHY FRESHHUB" SECTION
   ══════════════════════════════════════════════════════════════ */
.hub-section {
  background: #fff;
  padding: var(--section-pad) 0;
}
.hub-header {
  text-align: center;
  margin-bottom: 72px;
}
.hub-header h2  { color: var(--ink); margin-bottom: 12px; }
.hub-header p   { color: var(--ink-3); font-size: .93rem; max-width: 480px; margin: 0 auto; line-height: 1.75; }

.hub-layout {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 40px 56px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 64px;
}

/* Feature columns */
.hub-col { display: flex; flex-direction: column; gap: 28px; }

.hub-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: default;
}
.hub-col-left .hub-feat {
  flex-direction: row-reverse;
  text-align: right;
}
.hub-col-right .hub-feat {
  flex-direction: row;
  text-align: left;
}

.hub-feat-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.06));
  border: 1px solid rgba(34,211,238,0.16);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-feat-icon svg { width: 22px; height: 22px; color: var(--teal); transition: color var(--t2); }
.hub-feat:hover .hub-feat-icon {
  background: var(--g-aqua);
  border-color: transparent;
  box-shadow: 0 6px 20px var(--aqua-glow);
  transform: scale(1.08) rotate(-3deg);
}
.hub-feat:hover .hub-feat-icon svg { color: #fff; }

.hub-feat-text h5 {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.02em;
}
.hub-feat-text p {
  font-size: .75rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Central circle element */
.hub-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hub-center-ring {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--g-aqua);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 8px 36px var(--aqua-glow), 0 2px 10px rgba(0,0,0,0.12);
  z-index: 1;
}
/* Dashed orbital ring */
.hub-center-ring::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1.5px dashed rgba(34,211,238,0.30);
  animation: orbitSpin 28s linear infinite;
}
/* Outer subtle ring */
.hub-center-ring::after {
  content: '';
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.10);
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hub-center-img {
  width: 58px; height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
  margin-bottom: 4px;
}
.hub-center-label {
  font-size: .58rem;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Hub CTA row */
.hub-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hub responsive */
@media (max-width: 860px) {
  .hub-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    max-width: 640px;
  }
  .hub-center {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 8px;
  }
  .hub-col-left  { grid-column: 1; grid-row: 2; }
  .hub-col-right { grid-column: 2; grid-row: 2; }
  .hub-col-left .hub-feat { flex-direction: row; text-align: left; }
}
@media (max-width: 520px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-col-left, .hub-col-right { grid-column: 1; }
  .hub-col-right { grid-row: 3; }
}

/* ══════════════════════════════════════════════════════════════
   53. TESTIMONIALS v2 — Editorial / Magazine Style
   ══════════════════════════════════════════════════════════════ */
.testi-v2 {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Featured large testimonial */
.testi-feat {
  background: var(--deep);
  border-radius: var(--r-2xl);
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.testi-feat:hover { transform: translateY(-3px); box-shadow: var(--s-md); }
/* Large decorative quote mark */
.testi-feat::before {
  content: '"';
  position: absolute;
  top: -32px; left: 24px;
  font-size: 20rem;
  color: rgba(34,211,238,0.06);
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
}
/* Ambient glow blob */
.testi-feat::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.tf-stars {
  display: flex; gap: 3px;
  color: #fbbf24; font-size: 1rem;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.tf-rating-label {
  font-size: .68rem; font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: .1em; text-transform: uppercase;
  margin-left: 8px;
  align-self: center;
}
.tf-body {
  font-size: 1.08rem; line-height: 1.82;
  color: rgba(255,255,255,0.80);
  font-style: italic;
  position: relative; z-index: 1;
  flex: 1;
  margin-bottom: 32px;
}
.tf-author {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tf-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--g-text);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 800; color: #fff;
  flex-shrink: 0; box-shadow: 0 4px 14px var(--aqua-glow);
}
.tf-name { font-size: .9rem; font-weight: 800; color: #fff; }
.tf-role { font-size: .7rem; color: rgba(255,255,255,0.38); margin-top: 2px; }
.tf-badge {
  margin-left: auto;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.22);
  color: var(--aqua-light);
  font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}

/* Compact testimonial stack */
.testi-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testi-mini {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 28px 28px;
  border: 1px solid rgba(8,47,73,0.07);
  box-shadow: var(--s-sm);
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
}
.testi-mini::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--g-aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.testi-mini:hover { transform: translateY(-3px); box-shadow: var(--s-md); }
.testi-mini:hover::before { transform: scaleX(1); }
.mini-stars  { color: #fbbf24; font-size: .78rem; letter-spacing: 2px; margin-bottom: 10px; }
.mini-body   { font-size: .84rem; line-height: 1.72; color: var(--ink-3); font-style: italic; flex: 1; margin-bottom: 18px; }
.mini-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.mini-av     { width: 36px; height: 36px; border-radius: 50%; background: var(--g-aqua); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.mini-name   { font-size: .82rem; font-weight: 800; color: var(--ink); }
.mini-role   { font-size: .68rem; color: var(--ink-3); margin-top: 1px; }

/* Testimonials v2 responsive */
@media (max-width: 860px) {
  .testi-v2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   54. HERO FLOAT BADGE — anchored chip style
   ══════════════════════════════════════════════════════════════ */
.hero-float {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   REFINEMENT PASS v8 — Full audit fixes
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: process-card missing position:relative ──────────────
   Without this, ::before anchors to process-section itself,
   drawing a stray line across the top of the whole dark section  */
.process-card {
  position: relative;
  overflow: hidden;
}

/* ── FIX 2: Hub section eyebrow on white background ─────────────
   Default eyebrow uses aqua-light (#67e8f9) — near-invisible on white */
.hub-section .eyebrow {
  color: var(--teal);
  background: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.20);
}

/* ── FIX 3: Hub header h2 — constrain size and center ───────────
   The unconstrained h2 at 3.8rem for a long centred heading wraps badly */
.hub-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.25;
}

/* ── FIX 4: Hub layout center column — wider for orbital rings ───
   Outer ring = 160px + 44+44 = 248px. 220px column clips it. */
.hub-layout {
  grid-template-columns: 1fr 260px 1fr;
  overflow: visible;
}
.hub-center {
  padding: 52px 0;
  overflow: visible;
}

/* ── FIX 5: Hub hub-feat-icon SVG display fix ────────────────── */
.hub-feat-icon svg { display: block; }

/* ── FIX 6: Hub col left — text should be right-aligned properly */
.hub-col-left .hub-feat-text h5 { text-align: right; }
.hub-col-left .hub-feat-text p  { text-align: right; }

/* ── REFINEMENT 1: Trust band labels — contrast improvement ─────
   tx-3 = 42% opacity white is barely readable against deep navy */
.tb-label { color: rgba(248,250,252,0.62); }

/* ── REFINEMENT 2: Section heading sizes — proportional ─────────
   h2 base is 3.8rem max which is oversized for short section titles */
.services-header h2         { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.process-header h2          { font-size: clamp(1.9rem, 3.2vw, 2.8rem); color: var(--tx-1) !important; }
.testi-header h2            { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.water-content h2           { font-size: clamp(2rem, 3.5vw, 3rem); color: #fff !important; }
.usp-left h2                { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }

/* ── REFINEMENT 3: Section rhythm — lighter padding ─────────────
   clamp(80px, 10vw, 140px) is very generous, eases to 8vw max 112px */
:root { --section-pad: clamp(72px, 8vw, 112px); }

/* ── REFINEMENT 4: Section dividers — visual breathing ──────────
   Hard dark-to-white transitions benefit from a 1px hairline */
.services-section       { border-top: 1px solid rgba(8,47,73,0.07); }
.hub-section            { border-top: 1px solid rgba(8,47,73,0.06); border-bottom: 1px solid rgba(8,47,73,0.06); }
.testi-section          { border-top: 1px solid rgba(8,47,73,0.07); }

/* ── REFINEMENT 5: Hub feature hover — directional icon motion ── */
.hub-col-right .hub-feat:hover .hub-feat-icon { transform: scale(1.08) rotate(-3deg) translateX(3px); }
.hub-col-left  .hub-feat:hover .hub-feat-icon { transform: scale(1.08) rotate(3deg)  translateX(-3px); }

/* ── REFINEMENT 6: btn-outline on white background — stronger ─── */
.services-section .btn-outline,
.hub-section .btn-outline {
  border-color: rgba(8,145,178,0.40);
  color: var(--teal);
}
.services-section .btn-outline:hover,
.hub-section .btn-outline:hover {
  background: rgba(8,145,178,0.07);
  border-color: var(--teal);
}

/* ── REFINEMENT 7: Water section eyebrow explicit ───────────────
   Confirm dark-bg eyebrow style on water section */
.water-section .eyebrow {
  color: var(--aqua-light);
  background: rgba(34,211,238,0.10);
  border-color: rgba(34,211,238,0.22);
}

/* ── REFINEMENT 8: CTA section — remove over-reliance on inline ─ */
.cta-actions .btn-white     { font-size: .95rem; padding: 16px 32px; }
.cta-actions .btn-ghost-white { font-size: .95rem; padding: 16px 32px; }
.cta-section .eyebrow       { color: rgba(34,211,238,0.85); justify-content: center; }

/* ── REFINEMENT 9: Process steps — lighter number circles ───────
   96px circles feel heavy; 80px is authoritative without dominating */
.process-num {
  width: 80px;
  height: 80px;
  font-size: 1.75rem;
}

/* ── REFINEMENT 10: Service card arrow — smooth direction motion ─ */
.svc-card:hover .svc-arrow { transform: translateX(5px); }

/* ── REFINEMENT 11: Hero float chips — tighter, anchored style ── */
.hero-float {
  font-size: .76rem;
  padding: 10px 14px;
  gap: 8px;
  border-radius: var(--r-md);
}
.hf-text { font-size: .76rem; font-weight: 700; }
.hf-sub  { font-size: .62rem; color: rgba(255,255,255,0.44); margin-top: 1px; }

/* ── REFINEMENT 12: Eyebrow in dark sections — explicit ─────────
   Ensures process, cta, water eyebrow use the correct token */
.process-section .eyebrow,
.cta-section .eyebrow,
.water-section .eyebrow {
  display: inline-flex;
  color: var(--aqua-light);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
}

/* ── REFINEMENT 13: Testi mini body — warm readable contrast ──── */
.testi-mini .mini-body { color: #374151; }
.testi-mini .mini-name { color: var(--ink); }

/* ── REFINEMENT 14: Hub feat text sizes — refined scale ─────────*/
.hub-feat-text h5 {
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -.02em;
}
.hub-feat-text p {
  font-size: .76rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ── REFINEMENT 15: Water inner grid — generous spacing ─────────*/
.water-inner { gap: 64px; }

/* ── REFINEMENT 16: Testi featured card — dark deep bg glow ─────*/
.testi-feat {
  background: linear-gradient(150deg, var(--surface) 0%, var(--deep) 100%);
}

/* ── REFINEMENT 17: Fade-up transition refinement ───────────────
   Slightly larger translateY for more expressive entrance */
.fade-up {
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(0.22,1,0.36,1),
              transform .65s cubic-bezier(0.22,1,0.36,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── REFINEMENT 18: Consistent section-tag on page-hero ─────────*/
.page-hero .section-tag { display: inline-flex; }

/* ══════════════════════════════════════════════════════════════
   REFINEMENT PASS v8 — Full audit fixes
   ══════════════════════════════════════════════════════════════ */

/* FIX 1: process-card missing position:relative ─────────────────
   Without this, ::before anchors to process-section itself,
   drawing a stray line across the top of the whole dark section  */
.process-card {
  position: relative;
  overflow: hidden;
}

/* FIX 2: Hub section eyebrow on white background ────────────────
   Default eyebrow uses aqua-light (#67e8f9) — near-invisible on white */
.hub-section .eyebrow {
  color: var(--teal);
  background: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.20);
}

/* FIX 3: Hub header h2 — constrain size and center ──────────────
   Unconstrained at 3.8rem this heading wraps badly when centered */
.hub-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.25;
}

/* FIX 4: Hub layout center column — wider for orbital rings ──────
   Outer ring = 160px + 44+44 = 248px. 220px column clips it. */
.hub-layout {
  grid-template-columns: 1fr 260px 1fr;
  overflow: visible;
}
.hub-center {
  padding: 52px 0;
  overflow: visible;
}

/* FIX 5: Hub-feat-icon SVG display block */
.hub-feat-icon svg { display: block; }

/* FIX 6: Hub col left — right-align text properly */
.hub-col-left .hub-feat-text h5,
.hub-col-left .hub-feat-text p { text-align: right; }

/* REFINEMENT 1: Trust band labels — better contrast ─────────────
   tx-3 = 42% opacity white is barely readable on deep navy */
.tb-label { color: rgba(248,250,252,0.62); }

/* REFINEMENT 2: Section heading sizes — proportional ────────────
   h2 base is 3.8rem max, too large for short centred section titles */
.services-header h2  { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.process-header h2   { font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important; color: var(--tx-1) !important; }
.testi-header h2     { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.water-content h2    { font-size: clamp(2rem, 3.5vw, 3rem); color: #fff !important; }

/* REFINEMENT 3: Section rhythm — lighter vertical padding */
:root { --section-pad: clamp(72px, 8vw, 112px); }

/* REFINEMENT 4: Section dividers — hairline transitions ──────────
   Hard dark-to-white transitions need a 1px structural hairline */
.services-section { border-top: 1px solid rgba(8,47,73,0.07); }
.hub-section      { border-top: 1px solid rgba(8,47,73,0.06); border-bottom: 1px solid rgba(8,47,73,0.06); }
.testi-section    { border-top: 1px solid rgba(8,47,73,0.07); }

/* REFINEMENT 5: Hub feature hover — directional icon motion */
.hub-col-right .hub-feat:hover .hub-feat-icon { transform: scale(1.08) rotate(-3deg) translateX(3px); }
.hub-col-left  .hub-feat:hover .hub-feat-icon { transform: scale(1.08) rotate(3deg)  translateX(-3px); }

/* REFINEMENT 6: btn-outline on white — slightly stronger border */
.services-section .btn-outline,
.hub-section .btn-outline {
  border-color: rgba(8,145,178,0.40);
  color: var(--teal);
}
.services-section .btn-outline:hover,
.hub-section .btn-outline:hover {
  background: rgba(8,145,178,0.07);
  border-color: var(--teal);
}

/* REFINEMENT 7: Water section eyebrow — explicit dark-bg tokens */
.water-section .eyebrow {
  color: var(--aqua-light);
  background: rgba(34,211,238,0.10);
  border-color: rgba(34,211,238,0.22);
}

/* REFINEMENT 8: CTA section button sizing — drop inline overrides */
.cta-actions .btn { font-size: .95rem; padding: 16px 32px; }
.cta-section .eyebrow { color: rgba(34,211,238,0.85); justify-content: center; }

/* REFINEMENT 9: Process steps — lighter number circles */
.process-num { width: 80px; height: 80px; font-size: 1.75rem; }

/* REFINEMENT 10: Service card arrow hover — clean translate */
.svc-card:hover .svc-arrow {
  background: var(--g-aqua);
  border-color: transparent;
  transform: translateX(5px);
  box-shadow: var(--s-aqua);
}

/* REFINEMENT 11: Hero float chips — tighter anchored style */
.hero-float { padding: 10px 14px; gap: 8px; border-radius: var(--r-md); }
.hf-text    { font-size: .76rem; font-weight: 700; }
.hf-sub     { font-size: .62rem; color: rgba(255,255,255,0.44); margin-top: 1px; }

/* REFINEMENT 12: Dark section eyebrows — explicit tokens */
.process-section .eyebrow,
.cta-section .eyebrow,
.water-section .eyebrow {
  display: inline-flex;
  color: var(--aqua-light);
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
}

/* REFINEMENT 13: Testi mini body — warm readable contrast */
.mini-body { color: #374151; }

/* REFINEMENT 14: Hub feat text — explicit scale */
.hub-feat-text h5 { font-size: .9rem; font-weight: 800; color: var(--ink); margin-bottom: 3px; letter-spacing: -.02em; }
.hub-feat-text p  { font-size: .76rem; color: var(--ink-3); line-height: 1.6; }

/* REFINEMENT 15: Water inner — more generous column gap */
.water-inner { gap: 64px; }

/* REFINEMENT 16: Testi featured — richer gradient bg */
.testi-feat { background: linear-gradient(150deg, var(--surface) 0%, var(--deep) 100%); }

/* REFINEMENT 17: Fade-up — more expressive entrance */
.fade-up {
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(0.22,1,0.36,1),
              transform .65s cubic-bezier(0.22,1,0.36,1);
}

/* REFINEMENT 18: Process section connector line fix ─────────────
   position: relative on process-step ensures ::before of process-card
   stays inside the card boundary */
.process-step { position: relative; }

/* REFINEMENT 19: Testi header — centered block (was inline) */
.testi-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}
.testi-header p { color: var(--ink-3); font-size: .93rem; margin-top: 10px; }

/* REFINEMENT 20: btn-lg override — consolidate inline padding */
.btn.btn-lg { padding: 16px 34px; font-size: .95rem; }

/* REFINEMENT 21: Hero card title font weight */
.hero-card-title { font-weight: 700; letter-spacing: -.02em; }

/* REFINEMENT 22: Services section header alignment ─────────────── 
   btn on right should align to bottom of heading stack */
.services-header { align-items: flex-end; }
.services-header > div { flex: 1; }

/* REFINEMENT 23: Hub layout — align items to start for feature cols */
.hub-layout { align-items: center; }

/* REFINEMENT 24: Process connector line position fix ────────────── 
   top property aligns to center of circles (80px / 2 = 40px) */
.process-track::before {
  top: 40px;
}

/* REFINEMENT 25: Water wstat border on glass cards */
.wstat { border: 1px solid rgba(255,255,255,0.75); }

/* ══════════════════════════════════════════════════════════════
   POLISH PASS — Aesthetic improvements only (no layout changes)
   ══════════════════════════════════════════════════════════════ */

/* ── FONT IMPORT: Syne kept for card title only ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap');

/* ── LOGO: bigger, cleaner ───────────────────────────────────── */
.logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(34,211,238,0.30));
}
/* Hide the text wordmark since new logo already contains text */
.logo-wordmark { display: none; }

/* Footer logo — same treatment */
.footer-logo-row img {
  height: 32px;
  filter: drop-shadow(0 0 10px rgba(34,211,238,0.35));
}
.footer-brand-name { display: none; }

/* ── HERO H1: Open Sans, two-tone white + gradient ───────────── */
.hero h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: .98;
  letter-spacing: -0.035em;
  gap: 6px;
}

/* White spans — solid, bright */
.hero h1 .stroke {
  color: #ffffff;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #ffffff;
}

/* Filled gradient word: vivid aqua-to-green */
.hero h1 .fill {
  background: linear-gradient(120deg, #22d3ee 0%, #67e8f9 45%, #4ade80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Third line — white, slightly dimmed */
.hero h1 .dim,
.hero h1 span[style*="opacity"] {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  -webkit-text-stroke: 0 !important;
  font-size: .68em !important;
}

/* ── HERO DESC: Slightly larger, better leading ──────────────── */
.hero-desc {
  font-size: 1.08rem;
  line-height: 1.82;
  color: rgba(248,250,252,0.72);
  letter-spacing: .005em;
}

/* ── HERO OVERLINE BADGE: sharper glow ───────────────────────── */
.hero-overline {
  background: rgba(34,211,238,0.09);
  border-color: rgba(34,211,238,0.35);
  letter-spacing: .08em;
}

/* ── HERO STAT NUMBERS: bigger, more impact ─────────────────── */
.hero-stat-num {
  font-size: 1.9rem;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.05em;
}

/* ── HERO CARD: crisper glass, better shadow ─────────────────── */
.hero-card {
  background: rgba(255,255,255,0.82);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.50),
    inset 0 1px 0 rgba(255,255,255,1);
  border-color: rgba(255,255,255,0.92);
}

/* ── HERO CARD BADGE: deeper aqua gradient ───────────────────── */
.hero-card-badge {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  letter-spacing: .12em;
  font-size: .58rem;
}

/* ── HERO CARD TITLE: ink blue, authoritative ───────────────── */
.hero-card-title {
  color: #0c4a6e;
  font-size: 1.05rem;
  font-family: 'Syne', 'Open Sans', sans-serif;
  letter-spacing: -.03em;
}

/* ── WIDGET SUBMIT: richer gradient on hover ─────────────────── */
.widget-submit {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 60%, #0c4a6e 100%);
  letter-spacing: .005em;
  font-size: .9rem;
}
.widget-submit:hover {
  background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #0891b2 100%);
}

/* ── HERO BG: animation handled in main .hero-bg-image rule ─── */
/* .hero-bg-image opacity is set to .32 in base rule above */

/* ── HERO BLOBS: shift positions slightly for better composition */
.blob-1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(34,211,238,0.18) 0%, transparent 65%);
  top: -200px; right: -150px;
}
.blob-2 {
  background: radial-gradient(circle, rgba(8,145,178,0.14) 0%, transparent 65%);
}

/* ── HEADER: slightly deeper glass on scroll ─────────────────── */
.header.scrolled {
  background: rgba(4,30,47,0.92);
  box-shadow: 0 4px 32px rgba(0,0,0,0.30);
}

/* ── NAV LINKS: brighter active state ────────────────────────── */
.nav-link.active {
  color: #fff;
  background: rgba(34,211,238,0.12);
}
.nav-link::after { background: var(--aqua-light); }

/* ── BTN NAV: stronger glow on hover ─────────────────────────── */
.btn-nav:hover {
  box-shadow: 0 4px 20px rgba(34,211,238,0.35);
}

/* ── TRUST BAND: richer gradient numbers ─────────────────────── */
.tb-num {
  background: linear-gradient(120deg, #22d3ee 0%, #67e8f9 50%, #4ade80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
}
.tb-label {
  color: rgba(248,250,252,0.58);
  letter-spacing: .16em;
}

/* ── PROCESS NUMBERS: richer gradient fill ───────────────────── */
.process-num {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 60%, #083d5a 100%);
  box-shadow: 0 6px 24px rgba(34,211,238,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ── PROCESS CARDS: deeper glass tint ───────────────────────────*/
.process-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.process-step:hover .process-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(34,211,238,0.30);
}

/* ── SERVICES SECTION: white bg slight warmth ────────────────── */
.services-section { background: #fafeff; }

/* ── SERVICE CARDS: slightly deeper overlay on hover ─────────── */
.svc-card { border-radius: 20px; }
.svc-card.featured { border-radius: 22px; }

/* ── EYEBROW: sharper on both dark and light ─────────────────── */
.eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
}

/* ── HUB CENTER RING: deeper gradient ────────────────────────── */
.hub-center-ring {
  background: linear-gradient(150deg, #22d3ee 0%, #0891b2 60%, #062d45 100%);
  box-shadow: 0 12px 48px rgba(34,211,238,0.38), 0 2px 12px rgba(0,0,0,0.20);
}

/* ── WATER WSTATS: deeper ink numbers ────────────────────────── */
.wstat-num {
  color: #062d45;
  font-size: 2.5rem;
}

/* ── TESTI FEATURED: richer bg gradient ─────────────────────── */
.testi-feat {
  background: linear-gradient(150deg, #0c3d5e 0%, #041e2f 100%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}

/* ── TESTI MINI: cleaner card ────────────────────────────────── */
.testi-mini {
  background: #fafeff;
  border-color: rgba(8,47,73,0.06);
}

/* ── CTA SECTION: stronger overlay for text legibility ──────── */
.cta-overlay {
  background: linear-gradient(135deg, rgba(4,30,47,.97) 0%, rgba(8,100,145,.45) 100%);
}

/* ── FOOTER: subtle top glow ─────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #041e2f 0%, #031625 100%);
  border-top: 1px solid rgba(34,211,238,0.12);
}

/* ── FOOTER COL LINKS: slightly brighter on hover ───────────── */
.footer-col a:hover { color: var(--aqua-light); }

/* ── FLOATING ACTIONS: more vivid whatsapp ───────────────────── */
.fab-whatsapp {
  background: #15803d;
  box-shadow: 0 8px 32px rgba(22,163,74,0.45);
}

/* ── MOBILE NAV: darker overlay ──────────────────────────────── */
.mobile-nav {
  background: rgba(4,24,38,0.98);
}

/* ── SCROLL ANIMATIONS: fractionally longer for elegance ─────── */
.fade-up {
  transition:
    opacity .70s cubic-bezier(0.22,1,0.36,1),
    transform .70s cubic-bezier(0.22,1,0.36,1);
}

/* ── ECO FEAT CARDS: slightly richer glass ───────────────────── */
.eco-feat {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.13);
}
.eco-feat:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(34,211,238,0.28);
}

/* ── PAGE HERO (inner pages): consistent gradient ────────────── */
.page-hero-overlay {
  background: linear-gradient(to bottom, rgba(4,30,47,0.94) 0%, rgba(4,30,47,0.82) 100%);
}

/* ── FORM CARDS: more refined shadow ─────────────────────────── */
.form-card {
  box-shadow: 0 12px 48px rgba(8,47,73,0.12), 0 2px 8px rgba(8,47,73,0.06);
}
.form-card::before {
  background: linear-gradient(90deg, #22d3ee, #0891b2, #4ade80);
}

/* ── INPUTS FOCUS: stronger ring ─────────────────────────────── */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(34,211,238,0.16);
}

/* ── BTN PRIMARY: richer gradient ───────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 55%, #0c4a6e 100%);
}
.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(34,211,238,0.38), 0 3px 10px rgba(0,0,0,0.15);
}

/* ── SECTION TRANSITIONS: subtle bg shifts ───────────────────── */
.hub-section { background: #fafeff; }
.testi-section { background: #ffffff; }

/* ── HERO FLOAT CHIPS: entrance + continuous float — positions set above ─── */
/* chipIn keyframe used in the float position declarations earlier */
@keyframes chipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── H2 ON DARK: slightly improved weight ────────────────────── */
.process-section h2,
.water-content h2,
.cta-section h2 {
  letter-spacing: -0.03em;
}

/* ── CARD TOP ACCENT BAR: gradient → brand arc ───────────────── */
.usp-card::before,
.testi-card::after,
.testi-mini::before,
.svc-page-card::after {
  background: linear-gradient(90deg, #22d3ee 0%, #0891b2 55%, #4ade80 100%);
}

/* ── HERO MESH: subtler grid ─────────────────────────────────── */
.hero-mesh {
  background-image:
    linear-gradient(rgba(34,211,238,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── PROCESS SECTION BG: deeper atmosphere ───────────────────── */
.process-section::before {
  background:
    radial-gradient(ellipse 55% 55% at 80% 15%, rgba(34,211,238,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 5% 85%, rgba(8,145,178,0.06) 0%, transparent 55%);
}

/* ── ABOUT MAIN CARD: consistent dark card ───────────────────── */
.about-main-card {
  background: linear-gradient(150deg, #082f49 0%, #041e2f 100%);
}

/* ── MOBILE: logo scaling improvement ───────────────────────── */
@media (max-width: 768px) {
  .logo img { height: 40px; }
  .hero h1  { font-size: clamp(2.6rem, 10vw, 3.8rem); }
}

/* ── POWERED BY LUMENOID STUDIOS ─────────────────────────────── */
.powered-by {
  text-align: center;
  padding: 14px 0;
  background: rgba(4,30,47,0.95);
  border-top: 1px solid rgba(34,211,238,0.08);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(248,250,252,0.30);
}
.powered-by a {
  color: rgba(34,211,238,0.55);
  text-decoration: none;
  transition: color .2s;
}
.powered-by a:hover { color: var(--aqua-light); }


/* ══════════════════════════════════════════════════════════════
   PRICES PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Prices section ─────────────────────────────────────────── */
.prices-section {
  padding: var(--section-pad) 0;
  background: #f8fbff;
}
.prices-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(48px,6vw,80px);
}
.prices-intro h2 { color: var(--ink); margin-bottom: 12px; }
.prices-intro p  { color: var(--ink-2); font-size: 1rem; line-height: 1.7; }

/* ── Price category card ────────────────────────────────────── */
.price-category {
  background: #fff;
  border-radius: var(--r-xl);
  border: 1px solid rgba(8,145,178,0.10);
  box-shadow: 0 4px 24px rgba(8,47,73,0.07), 0 1px 4px rgba(8,47,73,0.04);
  margin-bottom: 28px;
  overflow: hidden;
  transition: box-shadow var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.price-category:hover {
  box-shadow: 0 12px 40px rgba(8,47,73,0.12), 0 2px 8px rgba(8,47,73,0.06);
  transform: translateY(-2px);
}

.price-cat-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-bottom: 1px solid rgba(8,145,178,0.08);
  background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
}
.price-cat-header > div:nth-child(2) { flex: 1; }
.price-cat-header h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 4px; }
.price-cat-header p  { font-size: .85rem; color: var(--ink-3); margin: 0; }

.price-cat-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(34,211,238,0.05));
  border: 1px solid rgba(34,211,238,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.price-cat-icon svg { stroke: var(--aqua); }

.price-cat-tag {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
  color: var(--teal);
  white-space: nowrap;
}

/* ── Price table ────────────────────────────────────────────── */
.price-table { padding: 0 8px 8px; }

.price-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  transition: background var(--t1);
}
.price-row:hover:not(.price-row-head) { background: #f0f9ff; }

.price-row-head {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 24px;
  border-bottom: 1px solid rgba(8,145,178,0.08);
  margin-bottom: 4px;
}
.price-row span { display: flex; align-items: center; }
.price-row:not(.price-row-head) span:first-child { font-weight: 600; color: var(--ink); }
.price-row:not(.price-row-head) span:not(:first-child) { font-weight: 700; color: var(--teal); font-size: .95rem; }

.price-row-highlight {
  background: rgba(34,211,238,0.05) !important;
  border-radius: var(--r-md);
}
.price-row-highlight span:first-child { color: var(--ocean) !important; }

/* ── Packages section ───────────────────────────────────────── */
.packages-section {
  padding: var(--section-pad) 0;
  background: var(--deep);
}
.packages-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(48px,6vw,72px);
}
.packages-header h2 { color: var(--tx-1); margin-bottom: 14px; }
.packages-header p  { color: var(--tx-2); }

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pkg-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  position: relative;
  transition: all var(--t2) var(--ease);
}
.pkg-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-h);
  transform: translateY(-4px);
}
.pkg-popular {
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: rgba(34,211,238,0.25);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.12), 0 24px 56px rgba(0,0,0,0.25);
}

.pkg-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--g-aqua);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.pkg-header { margin-bottom: 28px; }
.pkg-name {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 12px;
}
.pkg-price {
  font-family: 'Open Sans', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--tx-1);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.pkg-price span { font-size: 1rem; color: var(--tx-3); font-weight: 500; }
.pkg-desc { font-size: .82rem; color: var(--tx-2); }

.pkg-features { margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.pkg-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--tx-2);
}
.pkg-features svg { stroke: var(--sage); flex-shrink: 0; }

.pkg-cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .875rem;
  background: var(--glass);
  border: 1.5px solid var(--border-h);
  color: var(--tx-1);
  transition: all var(--t2) var(--ease);
}
.pkg-cta:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-2px);
}
.pkg-cta-primary {
  background: var(--g-aqua);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--s-aqua);
}
.pkg-cta-primary:hover {
  background: var(--g-aqua-h);
  box-shadow: 0 10px 32px var(--aqua-glow);
}

/* ── Founders section ───────────────────────────────────────── */
.founders-section {
  padding: var(--section-pad) 0;
  background: #fff;
}
.founders-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(48px,6vw,72px);
}
.founders-header h2 { color: var(--ink); margin-bottom: 14px; }
.founders-header p  { color: var(--ink-2); }

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.founder-card {
  display: flex;
  gap: 28px;
  padding: 36px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(8,145,178,0.10);
  background: linear-gradient(150deg, #f0f9ff 0%, #fff 100%);
  box-shadow: 0 4px 24px rgba(8,47,73,0.07);
  transition: all var(--t2) var(--ease);
}
.founder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(8,47,73,0.12);
  border-color: rgba(34,211,238,0.20);
}

.founder-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--g-aqua);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--s-aqua);
}
.founder-info h4 { color: var(--ink); margin-bottom: 4px; font-size: 1.05rem; }
.founder-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 14px;
}
.founder-info p { font-size: .875rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 16px; }
.founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.founder-tags span {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.18);
  color: var(--teal);
  font-size: .72rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVENESS FIXES
   ══════════════════════════════════════════════════════════════ */

/* Fix: hero section padding on small screens (content clipped under navbar) */
@media (max-width: 768px) {
  .hero { padding-top: 80px; }
  .hero-inner { padding: 100px 0 60px !important; }
}

/* Fix: hero h1 stroke text overflowing on mobile */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero h1 .stroke { -webkit-text-stroke-width: 1.5px; }
}

/* Fix: trust band overflowing on small screens */
@media (max-width: 480px) {
  .trust-band-inner { grid-template-columns: 1fr 1fr !important; gap: 20px; }
  .tb-item+.tb-item::before { display: none !important; }
}

/* Fix: process section grid not collapsing cleanly */
@media (max-width: 860px) {
  .process-step { flex-direction: column; }
}

/* Fix: services grid gap on tablets */
@media (max-width: 1100px) and (min-width: 861px) {
  .services-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Fix: hub layout (Why FreshHub) broken on mid-size screens */
@media (max-width: 860px) {
  .hub-layout { flex-direction: column; gap: 40px; }
  .hub-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .hub-center { order: -1; }
}
@media (max-width: 520px) {
  .hub-col { grid-template-columns: 1fr; }
}

/* Fix: footer link hover — missing underline/highlight feedback */
.footer-col a:hover { color: var(--aqua-light); }

/* Fix: floating FABs overlapping form on mobile */
@media (max-width: 480px) {
  .floating-actions { bottom: 16px; right: 16px; }
  .fab { padding: 11px; }
}

/* Fix: container padding too tight on very small screens */
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
}

/* Fix: hero stats wrapping badly on 360px phones */
@media (max-width: 400px) {
  .hero-stats { flex-direction: column; gap: 8px; }
}

/* Fix: .section-tag dark variant undefined */
.section-tag.dark {
  background: rgba(34,211,238,0.10);
  border-color: rgba(34,211,238,0.22);
  color: var(--teal);
}

/* Prices page responsive */
@media (max-width: 860px) {
  .price-row { grid-template-columns: 2fr 1fr 1fr; }
  .price-row span:last-child { display: none; }
  .price-row-head span:last-child { display: none; }
  .packages-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .founders-grid { grid-template-columns: 1fr; }
  .price-cat-header { flex-wrap: wrap; gap: 14px; }
  .price-cat-tag { order: 3; }
}
@media (max-width: 600px) {
  .price-row { grid-template-columns: 1fr 1fr; }
  .price-row span:nth-child(3) { display: none; }
  .price-row-head span:nth-child(3) { display: none; }
  .price-cat-header { padding: 20px; }
  .price-table { padding: 0 4px 4px; }
  .price-row { padding: 12px 16px; }
  .founder-card { flex-direction: column; gap: 20px; padding: 24px; }
  .founder-avatar { width: 56px; height: 56px; font-size: 1rem; }
  .pkg-card { padding: 28px 24px; }
}


/* ══════════════════════════════════════════════════════════════
   CONTINUED FIXES — ROUND 2
   ══════════════════════════════════════════════════════════════ */

/* ── Fix: Nav overflow on 900–1100px with 6 items ───────────── */
@media (max-width: 1100px) {
  .nav-link { padding: 7px 9px; font-size: .78rem; }
  .logo-wordmark span { display: none; }           /* hide tagline, save space */
  .logo img { height: 44px; }
}
@media (max-width: 960px) {
  .nav-link { padding: 6px 7px; font-size: .74rem; }
  .header-cta { display: none; }                   /* hide "Book Free Pickup" CTA button, keep nav links */
}

/* ── Fix: hamburger breakpoint now at 860px instead of 768px ── */
/* (6 links really need more room — show hamburger earlier)      */
@media (max-width: 860px) {
  nav { display: none; }
  .hamburger { display: flex !important; }
  .header-cta { display: none !important; }
}
@media (min-width: 861px) {
  nav { display: flex; }
}

/* ── Fix: About page stat inconsistency (500 → 1000) handled   */
/* in about.php below; CSS not needed here                       */

/* ── Fix: About inner grid collapse ─────────────────────────── */
@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr !important; gap: 48px; }
  .about-float-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .about-float-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .about-float-num { font-size: 1.6rem; }
}

/* ── Fix: values-grid collapse on mobile ─────────────────────── */
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr !important; }
}

/* ── Fix: USP grid on about page — 4 cards → 2-col → 1-col ── */
@media (max-width: 600px) {
  .usp-grid { grid-template-columns: 1fr !important; }
}

/* ── Fix: contact-split grid missing from responsive block ───── */
@media (max-width: 860px) {
  .contact-split, .contact-inner { grid-template-columns: 1fr !important; }
}

/* ── Fix: svc-page-grid too narrow on tablet ─────────────────── */
@media (max-width: 600px) {
  .svc-page-grid { grid-template-columns: 1fr !important; }
}

/* ── Fix: pickup form date field too narrow on mobile ─────────  */
@media (max-width: 480px) {
  .widget-row { grid-template-columns: 1fr !important; gap: 10px; }
  .widget-field input[type="date"] { min-width: 100%; }
}

/* ── Fix: hero-actions buttons wrapping awkwardly at 360px ─── */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Fix: CTA actions wrapping on small screens ──────────────── */
@media (max-width: 500px) {
  .cta-actions { flex-direction: column; align-items: center; gap: 10px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ── Fix: process-header text too large on mobile ────────────── */
@media (max-width: 480px) {
  .process-header h2 { font-size: 2rem; }
}

/* ── Fix: page-hero missing background on about/contact ─────── */
/* pages that don't override .page-hero-bg get the default img   */
/* (already set in .page-hero-bg rule) — just ensure min-height  */
.page-hero { min-height: 300px; }

/* ── Fix: prices.php eyebrow in light sections ───────────────── */
.prices-section .eyebrow,
.founders-section .eyebrow {
  color: var(--teal);
  background: rgba(8,145,178,0.08);
  border-color: rgba(8,145,178,0.18);
}
.prices-intro .eyebrow,
.founders-header .eyebrow { display: flex; margin: 0 auto 18px; }

/* ── Fix: pickup-split not defined (used in 860px media query) ─ */
.pickup-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) {
  .pickup-split { grid-template-columns: 1fr !important; gap: 40px; }
}

/* ── Fix: mobile-nav missing Pricing link visual consistency ─── */
.mobile-nav .nav-link:hover { color: var(--aqua); }

/* ── Fix: footer responsive — 3-col at 768px ─────────────────── */
@media (max-width: 768px) and (min-width: 481px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; }
}

/* ── Fix: svc-img aspect ratio collapse on 1-col mobile layout ─ */
@media (max-width: 768px) {
  .svc-card { min-height: 260px; }
  .svc-img  { height: 100%; min-height: 260px; }
}

/* ── Fix: process-cta paragraph wrapping on 320px ────────────── */
@media (max-width: 360px) {
  .process-cta p { font-size: .78rem; }
}


/* ══════════════════════════════════════════════════════════════
   HERO FORM — matches pickup.php form card style
   ══════════════════════════════════════════════════════════════ */

/* Card override — white, matches form-card */
.hero-form-card {
  background: #fff !important;
  border-radius: var(--r-2xl) !important;
  padding: 32px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.50) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(34,211,238,0.10) !important;
}
.hero-form-card .hero-card-header {
  border-bottom: 1px solid rgba(8,145,178,0.10);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.hero-form-card .hero-card-title { color: var(--ink) !important; }

/* Form layout inside hero */
.hero-pickup-form { display: flex; flex-direction: column; gap: 0; }

.hf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.hf-field { display: flex; flex-direction: column; gap: 5px; }
.hf-field-full { margin-bottom: 14px; }

.hf-field label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.hf-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f9ff;
  border: 1.5px solid rgba(8,145,178,0.15);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t1), box-shadow var(--t1);
}
.hf-input-wrap:focus-within {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.12);
  background: #fff;
}
.hf-input-wrap svg { color: var(--teal); flex-shrink: 0; }
.hf-input-wrap input,
.hf-input-wrap select {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .84rem;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.hf-input-wrap input::placeholder { color: #94a3b8; }
.hf-input-wrap select {
  cursor: pointer;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230891b2'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 18px;
  padding-right: 20px;
}
.hf-input-wrap input[type="date"] { color-scheme: light; }

/* ══════════════════════════════════════════════════════════════
   HAMBURGER — pushed to far right via nav taking margin-left:auto
   and hamburger stays after header-cta (which hides on mobile)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .header-inner { position: relative; }
  .hamburger    { margin-left: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   HERO ACTIONS — responsive fix for "Book Free Pickup" +
   "Chat on WhatsApp" buttons overflowing on mobile
   ══════════════════════════════════════════════════════════════ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero-actions .btn {
  flex: 1 1 auto;          /* grow to share available space  */
  min-width: 0;            /* allow shrinking below content  */
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* At medium sizes — keep side by side but cap width */
@media (max-width: 600px) {
  .hero-actions .btn {
    font-size: .82rem;
    padding: 11px 16px;
  }
}

/* At very small screens — stack vertically, full width */
@media (max-width: 420px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
    padding: 13px 20px;
    font-size: .875rem;
  }
}

/* Also tighten hero-form-card on tablet when side-by-side */
@media (max-width: 1100px) {
  .hero-form-card { padding: 24px !important; }
  .hf-row { gap: 10px; }
}

/* On single-column mobile layout, show form (was hidden at 768px) */
@media (max-width: 768px) {
  .hero-card { display: block !important; }   /* override previous hide rule */
  .hero-form-card { margin-top: 0; }
  .hf-row { grid-template-columns: 1fr 1fr; } /* keep 2-col in card on mobile */
}

@media (max-width: 480px) {
  .hf-row { grid-template-columns: 1fr; }     /* stack fields on very small screens */
  .hero-form-card { padding: 20px !important; }
}


/* ══════════════════════════════════════════════════════════════
   HERO MOBILE OVERFLOW — ROOT FIX
   Problem: hero section itself has no overflow:hidden, hero-inner
   grid has no max-width guard, hero-actions buttons break out.
   ══════════════════════════════════════════════════════════════ */

/* Contain the whole hero horizontally */
.hero { overflow-x: hidden; }

/* On single-column mobile, constrain content width */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 110px 0 56px !important;
    gap: 32px;
    width: 100%;
  }
  /* Show the form card again (was hidden) */
  .hero-card { display: block !important; }
  /* Don't let the form card overflow its column */
  .hero-form-card {
    width: 100% !important;
    box-sizing: border-box;
    padding: 22px !important;
  }
  /* Form rows stack on narrow screens */
  .hf-row { grid-template-columns: 1fr !important; gap: 10px; }
  /* Float chips hidden on mobile (stay as-is per request) */
  .hero-float { display: none !important; }
}

/* Hero CTA buttons — fully responsive at all sizes */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.hero-actions .btn {
  flex: 1 1 160px;        /* each button takes at least 160px, shares space */
  min-width: 0;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .hero-actions .btn {
    flex: 1 1 100%;        /* full width, stacked */
    font-size: .85rem;
    padding: 12px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HUB SECTION ("Why FreshHub") — MOBILE REDESIGN
   Replace the 3-col orbital layout with a compact 2-col card
   grid on mobile. Hide the centre circle. Clean and efficient.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Turn hub-layout into a simple card grid */
  .hub-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }

  /* Hide the centre logo hub entirely on mobile */
  .hub-center { display: none !important; }

  /* Each column becomes a normal grid child */
  .hub-col-left,
  .hub-col-right {
    grid-column: auto !important;
    grid-row: auto !important;
    display: contents !important; /* flatten children into grid */
  }

  /* Each feature becomes a card */
  .hub-feat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: #f8fbff;
    border: 1px solid rgba(8,145,178,0.10);
    border-radius: var(--r-lg);
    padding: 18px 16px;
    gap: 10px;
  }
  .hub-col-left .hub-feat {
    flex-direction: column !important;
    text-align: left !important;
  }

  /* Smaller icon on mobile */
  .hub-feat-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .hub-feat-icon svg { width: 18px !important; height: 18px !important; }

  /* Tighter text */
  .hub-feat-text h5 { font-size: .82rem; }
  .hub-feat-text p  { font-size: .72rem; display: none; } /* hide long desc on mobile to save space */

  /* Hub header margin */
  .hub-header { margin-bottom: 32px !important; }
}

@media (max-width: 480px) {
  .hub-layout { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .hub-feat { padding: 14px 12px; }
}

/* ── Prices page: kg-grid + price-notes ─────────────────────── */
.price-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.price-note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--ink-2);
  background: rgba(8,145,178,0.06);
  border: 1px solid rgba(8,145,178,0.12);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  flex: 1 1 auto;
}
.price-note-item svg { stroke: var(--teal); flex-shrink: 0; }

.kg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 8px 8px 16px;
}
.kg-item {
  padding: 20px 24px;
  border-right: 1px solid rgba(8,145,178,0.08);
  text-align: center;
}
.kg-item:last-child { border-right: none; }
.kg-label { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.kg-price { font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--ocean); line-height: 1; letter-spacing: -0.03em; }
.kg-price span { font-size: .7rem; font-weight: 600; color: var(--ink-3); }

@media (max-width: 640px) {
  .kg-grid { grid-template-columns: 1fr 1fr; }
  .kg-item { border-right: none; border-bottom: 1px solid rgba(8,145,178,0.08); }
  .kg-item:nth-child(even) { border-right: none; }
}
@media (max-width: 400px) {
  .kg-grid { grid-template-columns: 1fr; }
}



/* ══════════════════════════════════════════════════════════════
   HERO MOBILE — CONSOLIDATED OVERFLOW FIX
   Fixes: buttons overflowing, hero-stats breaking out, form
   card exceeding viewport width on screens ≤ 768px.
   ══════════════════════════════════════════════════════════════ */

/* 1. Hard-stop any horizontal bleed from the hero root */
.hero,
.hero .container,
.hero-inner {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. Reduce container side-padding on small screens so content
      has enough room (was 64px total, drop to 32px on mobile) */
@media (max-width: 768px) {
  .container {
    width: min(1240px, 100% - 32px);
  }
}

/* 3. Single-column hero on mobile */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 100px !important;
    padding-bottom: 48px !important;
  }

  /* Hero heading — scale down so it never exceeds viewport */
  .hero h1 {
    font-size: clamp(2.2rem, 9vw, 3.6rem) !important;
  }

  /* Description text */
  .hero-desc {
    font-size: .95rem;
    max-width: 100%;
  }

  /* 4. CTA buttons — stack vertically, each full width */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;   /* allow text to wrap if needed */
    padding: 13px 16px !important;
    font-size: .875rem !important;
    box-sizing: border-box !important;
  }

  /* 5. Stats pill — constrain width so it doesn't overflow */
  .hero-stats {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-around !important;
    padding: 14px 12px !important;
    gap: 0 !important;
  }
  .hero-stat {
    padding: 0 10px !important;
    flex: 1 !important;
  }
  .hero-stat-num  { font-size: 1.3rem !important; }
  .hero-stat-label { font-size: .58rem !important; }

  /* 6. Form card — full width, no side overflow */
  .hero-card,
  .hero-form-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    border-radius: var(--r-xl) !important;
  }

  /* 7. Form rows — single column inside narrow card */
  .hf-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 8. Hide floating chips (they'd overlap content in 1-col layout) */
  .hero-float {
    display: none !important;
  }
}

/* Extra-small phones (≤ 400px) — tighten further */
@media (max-width: 400px) {
  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
  }
  .hero-card,
  .hero-form-card {
    padding: 16px !important;
  }
  .hero-stat-num  { font-size: 1.1rem !important; }
  .hero-stat-label { font-size: .52rem !important; letter-spacing: .04em !important; }
}


/* ── FOUNDER CARD IMAGE ─────────────────────────────────────── */
.founder-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  box-shadow: var(--s-aqua);
  border: 2px solid rgba(34,211,238,0.25);
}

/* Full portrait variant (when image is displayed above card content) */
.founder-portrait-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
}
.founder-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.founder-card-portrait {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.founder-card-portrait .founder-info {
  padding: 28px 32px 32px;
}

@media (max-width: 600px) {
  .founder-portrait-wrap {
    aspect-ratio: 4 / 3;
    max-height: 260px;
  }
  .founder-card-portrait .founder-info {
    padding: 20px;
  }
}