/* ==========================================================================
   WaterCare — style.css
   Design system + component + section styles.
   Breakpoint overrides live in responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette */
  --black: #000000;
  --white: #ffffff;
  --navy: #07111f;
  --navy-700: #0d1c30;
  --navy-500: #14304f;
  --blue: #1677ff;
  --blue-600: #0b5ed7;
  --blue-300: #7db3ff;
  --light-blue: #eaf4ff;

  /* Neutrals */
  --gray-50: #f8f9fb;
  --gray-100: #f1f3f5;
  --gray-200: #e5e8ec;
  --gray-300: #d3d8de;
  --gray-500: #6b7280;
  --gray-600: #52596a;
  --gray-900: #111827;

  /* Semantic surfaces */
  --surface: var(--white);
  --surface-alt: var(--gray-50);
  --surface-dark: var(--navy);
  --ink: var(--gray-900);
  --ink-muted: var(--gray-500);
  --ink-inverse: var(--white);
  --hairline: var(--gray-200);
  --hairline-dark: rgba(255, 255, 255, 0.12);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Sizes are tuned so the longest unbreakable word in each headline fits
     its column at every breakpoint — see the fit test in the build notes. */
  --fs-display: clamp(2.5rem, 7vw, 5.25rem);     /* 40px → 84px   */
  --fs-h1: clamp(2rem, 4.8vw, 3.5rem);           /* 32px → 56px   */
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);       /* 28px → 44px   */
  --fs-h3: clamp(1.375rem, 2.4vw, 2rem);         /* 22px → 32px   */
  --fs-h4: clamp(1.125rem, 1.5vw, 1.375rem);     /* 18px → 22px   */
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);  /* 17px → 22px   */
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);      /* 16px → 18px   */
  --fs-small: 0.9375rem;                         /* 15px          */
  --fs-eyebrow: 0.75rem;                         /* 12px          */

  --lh-tight: 1.02;
  --lh-snug: 1.12;
  --lh-body: 1.6;

  --tracking-display: -0.035em;
  --tracking-head: -0.025em;
  --tracking-eyebrow: 0.16em;

  /* Space scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(5rem, 11vw, 11rem);
  /* Taller than a typical header: the logo stacks "Water" over "Care", so it
     needs height to stay legible rather than width. */
  --header-h: 88px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(7, 17, 31, 0.06),
    0 4px 12px rgba(7, 17, 31, 0.05);
  --shadow-md: 0 8px 24px rgba(7, 17, 31, 0.08),
    0 2px 6px rgba(7, 17, 31, 0.04);
  --shadow-lg: 0 24px 60px rgba(7, 17, 31, 0.12),
    0 8px 20px rgba(7, 17, 31, 0.06);
  --shadow-product: 0 48px 90px -24px rgba(7, 17, 31, 0.32),
    0 18px 40px -18px rgba(22, 119, 255, 0.24);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;

  --z-header: 100;
  --z-menu: 110;
  --z-fab: 90;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
figcaption,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* Focus: visible, brand-consistent, never suppressed */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-dark :focus-visible,
.section--dark :focus-visible {
  outline-color: var(--blue-300);
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transform: translate(-50%, -110%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--flush {
  padding-block: 0;
}

.section--alt {
  background: var(--surface-alt);
}

.section--dark {
  color: var(--ink-inverse);
  background: var(--surface-dark);
}

.section--dark .lead,
.section--dark .section-head__lead {
  color: rgba(255, 255, 255, 0.72);
}

/* NOTE: never size a container that holds display-scale text in `ch` —
   `ch` resolves against the container's own (body-size) font, which
   silently strangles the heading inside it. rem throughout. */
.section-head {
  max-width: 50rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.eyebrow::before {
  width: 22px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.55;
}

.section--dark .eyebrow {
  color: var(--blue-300);
}

.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

.body-text {
  max-width: 60ch;
  color: var(--ink-muted);
}

.text-accent {
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

/* Primary — blue */
.btn--primary {
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 6px 18px -6px rgba(22, 119, 255, 0.6);
}

.btn--primary:hover {
  background: var(--blue-600);
  box-shadow: 0 10px 26px -8px rgba(22, 119, 255, 0.65);
}

/* Solid navy */
.btn--dark {
  color: var(--white);
  background: var(--navy);
}

.btn--dark:hover {
  background: var(--navy-500);
}

/* Solid white — for dark sections */
.btn--light {
  color: var(--navy);
  background: var(--white);
}

.btn--light:hover {
  background: var(--light-blue);
}

/* Outline on light backgrounds */
.btn--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--gray-300);
}

.btn--ghost:hover {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Outline on dark backgrounds */
.btn--ghost-invert {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--ghost-invert:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--wa {
  color: var(--white);
  background: #1faf54;
}

.btn--wa:hover {
  background: #17913f;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--blue);
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--dur-fast) var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    backdrop-filter var(--dur-mid) var(--ease-out);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
}

/* Scrolled state — blurred glass */
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 20px rgba(7, 17, 31, 0.05);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-scrolled {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* Brand */
.brand {
  display: inline-flex;
  flex: none;
  gap: 0.55rem;
  align-items: center;
  margin-right: auto;
}

/* The logo ships with the site, so it renders unconditionally — no JS gate,
   no class toggling, nothing to go wrong. `width: auto` lets the file's real
   aspect ratio win over the width/height attributes in the markup, and those
   attributes reserve the right box so there is no layout shift. */
.brand__logo {
  width: auto;
  height: 56px;
}

/* Footer: white plate behind the logo so it stays legible on navy without
   recolouring the logo itself. */
.brand--plate {
  padding: 0.6rem 0.85rem;
  background: var(--white);
  border-radius: var(--r-md);
}

.brand--plate .brand__logo {
  height: 64px;
}

/* Desktop nav */
.nav {
  display: flex;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
  align-items: center;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.25rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  position: absolute;
  bottom: 0.1rem;
  left: 0.25rem;
  right: 0.25rem;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--navy);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.header__cta {
  flex: none;
  min-height: 40px;
  padding: 0.5rem 1.15rem;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: var(--r-sm);
}

.nav-toggle__box {
  position: relative;
  width: 20px;
  height: 12px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bar:nth-child(1) {
  top: 0;
}

.nav-toggle__bar:nth-child(2) {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(5.1px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-5.1px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 auto;
  z-index: var(--z-menu);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid) linear;
}

.mobile-menu[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-5) var(--sp-6);
}

.mobile-menu__link {
  padding: 0.95rem 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(10px);
}

.mobile-menu[data-open="true"] .mobile-menu__link {
  animation: menu-in var(--dur-mid) var(--ease-out) forwards;
}

.mobile-menu[data-open="true"] .mobile-menu__link:nth-child(1) { animation-delay: 40ms; }
.mobile-menu[data-open="true"] .mobile-menu__link:nth-child(2) { animation-delay: 80ms; }
.mobile-menu[data-open="true"] .mobile-menu__link:nth-child(3) { animation-delay: 120ms; }
.mobile-menu[data-open="true"] .mobile-menu__link:nth-child(4) { animation-delay: 160ms; }
.mobile-menu[data-open="true"] .mobile-menu__link:nth-child(5) { animation-delay: 200ms; }

@keyframes menu-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu__actions {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.mobile-menu__actions .btn {
  width: 100%;
}

body.is-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 900px);
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem))
    clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* Ambient water-light backdrop — very restrained */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 32rem at 78% 18%,
      rgba(22, 119, 255, 0.13),
      transparent 68%
    ),
    radial-gradient(
      30rem 30rem at 12% 82%,
      rgba(22, 119, 255, 0.07),
      transparent 70%
    ),
    linear-gradient(180deg, var(--white) 0%, var(--light-blue) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

/* The grid column sets the measure. The lead has its own cap below. */
.hero__copy {
  min-width: 0;
}

.hero__title {
  margin-bottom: var(--sp-5);
}

/* Two-line hero headline with staggered reveal */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
  transform: translateY(105%);
  animation: hero-line var(--dur-slow) var(--ease-out) forwards;
}

.hero__line:nth-child(2) > span {
  animation-delay: 110ms;
}

@keyframes hero-line {
  to {
    transform: translateY(0);
  }
}

.hero__lead {
  max-width: 42ch;
  margin-bottom: var(--sp-6);
  color: var(--gray-600);
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 280ms forwards;
}

.hero__actions {
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 400ms forwards;
}

.hero__eyebrow {
  opacity: 0;
  animation: fade-up var(--dur-mid) var(--ease-out) 80ms forwards;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero product stage */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: hero-product 1200ms var(--ease-out) 220ms forwards;
}

@keyframes hero-product {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Concentric water rings behind the unit */
.hero__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero__ring {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(22, 119, 255, 0.16);
  border-radius: 50%;
  animation: ring-pulse 7s var(--ease-in-out) infinite;
}

.hero__ring:nth-child(2) {
  width: 96%;
  animation-delay: 1.4s;
  opacity: 0.7;
}

.hero__ring:nth-child(3) {
  width: 118%;
  animation-delay: 2.8s;
  opacity: 0.45;
}

@keyframes ring-pulse {
  0%,
  100% {
    transform: scale(0.97);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.85;
  }
}

/* The product media itself. `.product-media` wraps either the real photo
   (when assets/images/hero/watercare-hero.webp exists) or the SVG stand-in. */
/* The units are landscape (the panel is 10" x 7"), so the media box is
   wide rather than tall. */
.product-media {
  position: relative;
  width: min(100%, 520px);
  filter: drop-shadow(0 40px 60px rgba(7, 17, 31, 0.18));
  will-change: transform;
}

.hero .product-media {
  animation: float-soft 8s var(--ease-in-out) infinite;
}

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

.product-media__img {
  width: 100%;
  border-radius: var(--r-lg);
}

/* Credibility strip under the hero CTAs */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
  margin-top: var(--sp-6);
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 520ms forwards;
}

.hero__trust-item {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
}

.hero__trust-item::before {
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--blue);
  border-radius: 50%;
  content: "";
}

/* Scroll cue */
.hero__cue {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: var(--sp-7);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 700ms forwards;
}

.hero__cue svg {
  width: 14px;
  height: 14px;
  animation: nudge-down 2.4s var(--ease-in-out) infinite;
}

@keyframes nudge-down {
  0%,
  70%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(4px);
  }
}

/* --------------------------------------------------------------------------
   8. SCROLL REVEAL UTILITIES
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: translateY(22px) scale(0.97);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }
[data-reveal-delay="5"] { transition-delay: 450ms; }

/* Line-by-line text reveal */
.reveal-lines .reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-lines .reveal-line > span {
  display: block;
  transform: translateY(100%);
  transition: transform 900ms var(--ease-out);
}

.reveal-lines.is-visible .reveal-line > span {
  transform: translateY(0);
}

.reveal-lines.is-visible .reveal-line:nth-child(2) > span {
  transition-delay: 90ms;
}

.reveal-lines.is-visible .reveal-line:nth-child(3) > span {
  transition-delay: 180ms;
}

/* --------------------------------------------------------------------------
   9. SECTION 2 — PRODUCT STORY (cinematic)
   -------------------------------------------------------------------------- */

.story {
  color: var(--ink-inverse);
  background: var(--navy);
  overflow: hidden;
}

.story__head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.story__lead {
  margin: var(--sp-5) auto 0;
  color: rgba(255, 255, 255, 0.66);
  text-align: center;
}

.story__figure {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.story__glow {
  position: absolute;
  inset: -10% -5% 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    50% 55% at 50% 45%,
    rgba(22, 119, 255, 0.22),
    transparent 70%
  );
}

.story__scroller {
  position: relative;
  z-index: 1;
}

.story__svg {
  width: min(100%, 960px);
  margin-inline: auto;
}

/* Shown only where the diagram becomes pannable — see responsive.css */
.story__hint {
  display: none;
}

/* --------------------------------------------------------------------------
   SYSTEM DIAGRAM (section 2)
   One shared 18s timeline drives every moving part, so the water level, the
   pump, the pipe flow, the panel readout and the two probe labels can never
   drift out of sync with each other.

   Cycle:  0–6%   level sits below the ON probe, pump idle
           6%     lower probe calls for water — pump starts
           6–50%  tank fills
           50%    water reaches the upper probe — pump stops
           50–66% tank full, pump idle
           66–100% level draws down again toward the ON probe
   -------------------------------------------------------------------------- */

.sys {
  --sys-cycle: 18s;
}

/* Captions */
.sys__cap {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  fill: #ffffff;
  fill-opacity: 0.45;
}

.sys__cap--accent {
  fill: var(--blue-300);
  fill-opacity: 0.9;
}

.sys__cap--sm {
  font-size: 10.5px;
  letter-spacing: 1.2px;
}

.sys__micro {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  fill: #ffffff;
  fill-opacity: 0.6;
}

.sys__micro--dark {
  fill: #3f4652;
  fill-opacity: 1;
}

.sys__term {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  fill: #07111f;
  fill-opacity: 0.7;
}

/* Seven-segment style readout */
.sys__seg {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.5px;
  fill: #ff3b30;
}

.sys__seg--on {
  fill: #3ddc6a;
}

/* Probe labels */
.sys__probe rect {
  fill: #ffffff;
  fill-opacity: 0.07;
  stroke: #ffffff;
  stroke-opacity: 0.16;
  stroke-width: 1.2;
}

.sys__probe text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  fill: #ffffff;
  fill-opacity: 0.45;
}

/* ---- the timeline ---- */

/* Water level. 280 is the clip height in the viewBox; scaling from the
   bottom keeps the tank floor fixed. */
.sys__water {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: sys-level var(--sys-cycle) linear infinite;
}

@keyframes sys-level {
  0%,
  6% {
    transform: scaleY(0.229);
  }
  50%,
  66% {
    transform: scaleY(0.793);
  }
  100% {
    transform: scaleY(0.229);
  }
}

/* The wave rides on top of the water. Outer group tracks the level, inner
   group drifts sideways, so the two transforms never fight. */
.sys__surface {
  animation: sys-surface var(--sys-cycle) linear infinite;
}

@keyframes sys-surface {
  0%,
  6% {
    transform: translateY(216px);
  }
  50%,
  66% {
    transform: translateY(58px);
  }
  100% {
    transform: translateY(216px);
  }
}

.sys__surface-drift {
  animation: sys-drift 9s linear infinite;
}

@keyframes sys-drift {
  to {
    transform: translateX(160px);
  }
}

/* Water climbing the riser — only while the pump runs */
.sys__flow {
  animation: sys-flow 1.5s linear infinite,
    sys-flow-visible var(--sys-cycle) step-end infinite;
}

@keyframes sys-flow {
  from {
    stroke-dashoffset: 72;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sys-flow-visible {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Pump rotor spins and the housing picks up a glow while running */
.sys__rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: sys-spin 1.5s linear infinite,
    sys-run var(--sys-cycle) step-end infinite;
}

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

@keyframes sys-run {
  0% {
    stroke: #7db3ff;
  }
  6% {
    stroke: #3ddc6a;
  }
  50%,
  100% {
    stroke: #7db3ff;
  }
}

.sys__pump-glow {
  animation: sys-glow var(--sys-cycle) ease-in-out infinite;
}

@keyframes sys-glow {
  0%,
  5% {
    fill-opacity: 0;
  }
  10%,
  46% {
    fill-opacity: 0.18;
  }
  50%,
  100% {
    fill-opacity: 0;
  }
}

/* Panel readout swaps between OFF and ON */
.sys__state-off {
  animation: sys-off var(--sys-cycle) step-end infinite;
}

.sys__state-on {
  animation: sys-on var(--sys-cycle) step-end infinite;
}

@keyframes sys-off {
  0% {
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

@keyframes sys-on {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.sys__btn-green {
  animation: sys-btn var(--sys-cycle) step-end infinite;
}

@keyframes sys-btn {
  0% {
    fill: #28a854;
  }
  6% {
    fill: #4ade80;
  }
  50%,
  100% {
    fill: #28a854;
  }
}

/* Each probe label lights when it is the one acting */
.sys__probe--on rect {
  animation: sys-probe-on-box var(--sys-cycle) step-end infinite;
}

.sys__probe--on text {
  animation: sys-probe-on-text var(--sys-cycle) step-end infinite;
}

/* The lower probe is the one calling for water, so it stays lit for the
   whole time the pump is running (0–50%). */
@keyframes sys-probe-on-box {
  0% {
    fill: #3ddc6a;
    fill-opacity: 0.18;
    stroke-opacity: 0.55;
  }
  50% {
    fill: #ffffff;
    fill-opacity: 0.07;
    stroke-opacity: 0.16;
  }
}

@keyframes sys-probe-on-text {
  0% {
    fill: #8fe3a4;
    fill-opacity: 1;
  }
  50% {
    fill: #ffffff;
    fill-opacity: 0.45;
  }
}

.sys__probe--stop rect {
  animation: sys-probe-stop-box var(--sys-cycle) step-end infinite;
}

.sys__probe--stop text {
  animation: sys-probe-stop-text var(--sys-cycle) step-end infinite;
}

/* The upper probe lights at the moment it cuts the pump, and holds while
   the tank sits full (50–66%). */
@keyframes sys-probe-stop-box {
  0% {
    fill: #ffffff;
    fill-opacity: 0.07;
    stroke-opacity: 0.16;
  }
  50% {
    fill: #ff6b6b;
    fill-opacity: 0.2;
    stroke-opacity: 0.55;
  }
  66% {
    fill: #ffffff;
    fill-opacity: 0.07;
    stroke-opacity: 0.16;
  }
}

@keyframes sys-probe-stop-text {
  0% {
    fill: #ffffff;
    fill-opacity: 0.45;
  }
  50% {
    fill: #ffb3b3;
    fill-opacity: 1;
  }
  66% {
    fill: #ffffff;
    fill-opacity: 0.45;
  }
}

/* --------------------------------------------------------------------------
   10. SECTION 3 — PROBLEM / SOLUTION (split, sticky)
   -------------------------------------------------------------------------- */

.overflow-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Both columns pin while the section scrolls past, giving the fill
   animation a long, cinematic runway. The extra height is what the
   scroll progress in main.js maps across. */
#overflow {
  min-height: 160vh;
}

.overflow-split__copy,
.overflow-split__stage {
  position: sticky;
  top: calc(var(--header-h) + clamp(2rem, 7vh, 5rem));
  align-self: start;
}

.overflow-split__stage {
  display: grid;
  place-items: center;
}

/* Animated tank */
.tank {
  position: relative;
  width: min(100%, 340px);
}

.tank__svg {
  width: 100%;
}

/* The water level is driven by --fill (0 → 1), set on .tank from JS.
   222 is the inner height of the tank's clip rect in the SVG viewBox. */
.tank {
  --fill: 0.1;
}

.tank__water {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(var(--fill));
  transition: transform 300ms linear;
}

/* Outer group positions the wave at the waterline; the inner group drifts,
   so the two transforms never fight each other. */
.tank__surface {
  transform: translateY(calc((1 - var(--fill)) * 222px));
  transition: transform 300ms linear;
}

.tank__surface-drift {
  animation: surface-drift 9s linear infinite;
}

@keyframes surface-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(160px);
  }
}

/* Inlet flow — only animates while the pump is on */
.tank__flow {
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.tank.is-pumping .tank__flow {
  opacity: 1;
  animation: flow-down 900ms linear infinite;
}

@keyframes flow-down {
  from {
    stroke-dashoffset: 16;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Pump indicator */
.tank__pump-ring,
.tank__pump-dot {
  transition: stroke var(--dur-mid) var(--ease-out),
    fill var(--dur-mid) var(--ease-out);
}

.tank.is-pumping .tank__pump-ring {
  stroke: var(--blue);
  animation: pump-spin 1.6s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
  stroke-dasharray: 26 74;
}

.tank.is-pumping .tank__pump-dot {
  fill: var(--blue);
}

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

/* Stage list beside/below the tank */
.tank-steps {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 340px);
  margin-top: var(--sp-6);
}

.tank-step {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gray-500);
  background: transparent;
  border-radius: var(--r-md);
  transition: background-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
}

.tank-step__dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--gray-300);
  border-radius: 50%;
  transition: background-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}

.tank-step.is-active {
  color: var(--navy);
  font-weight: 600;
  background: var(--light-blue);
}

.tank-step.is-active .tank-step__dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.18);
  transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   11. SECTION 4 — SMART CONTROL (dark)
   -------------------------------------------------------------------------- */

.smart__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.smart__stage {
  position: relative;
  display: grid;
  place-items: center;
}

.smart__stage::before {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(22, 119, 255, 0.26),
    transparent 66%
  );
  content: "";
}

.smart__stage .product-media {
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.5));
}

/* Automatic start / stop thresholds */
.threshold {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--hairline-dark);
  border-radius: var(--r-md);
  overflow: hidden;
}

.threshold__item {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--navy-700);
}

.threshold__value {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue-300);
  font-variant-numeric: tabular-nums;
}

.threshold__unit {
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
}

.threshold__label {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
}

.threshold__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--hairline-dark);
  border-radius: var(--r-md);
  overflow: hidden;
}

.feature-list__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  background: var(--navy);
}

.feature-list__icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--blue-300);
}

.smart__note {
  margin-top: var(--sp-5);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------------------------
   12. SECTION 5 — HOW IT WORKS (horizontal flow)
   -------------------------------------------------------------------------- */

.steps {
  overflow: hidden;
}

.steps__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* Connecting rail */
.steps__rail {
  position: absolute;
  top: 21px;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: var(--gray-200);
  border-radius: 2px;
}

.steps__rail::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-300));
  border-radius: 2px;
  content: "";
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 320ms linear;
}

.step {
  position: relative;
  padding-top: 56px;
}

.step__marker {
  position: absolute;
  top: 8px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 50%;
  transition: color var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
}

.step.is-active .step__marker {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.step__num {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: var(--tracking-eyebrow);
}

.step__title {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.step__text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--gray-500);
}

/* --------------------------------------------------------------------------
   13. SECTION 6 — PRODUCT SHOWCASE
   -------------------------------------------------------------------------- */

.showcase__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.showcase__stage {
  position: relative;
  display: grid;
  place-items: center;
  order: 2;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, var(--light-blue), var(--gray-50));
  border-radius: var(--r-lg);
}

.showcase__stage .product-media {
  width: min(100%, 440px);
  filter: drop-shadow(0 26px 40px rgba(7, 17, 31, 0.16));
}

.showcase__body {
  order: 1;
}

.showcase__title {
  margin-bottom: var(--sp-4);
}

.showcase__spec {
  display: grid;
  gap: 0.5rem;
  margin-block: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  font-size: 0.9375rem;
}

.spec-row__key {
  color: var(--gray-500);
}

.spec-row__val {
  font-weight: 500;
  color: var(--navy);
}

/* "Most popular" flag on the featured product stage */
.stage-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 0.3rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  background: var(--navy);
  border-radius: var(--r-pill);
}

/* Sensor pricing pair */
.price-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.price-option {
  flex: 1 1 10rem;
  padding: 0.85rem 1.1rem;
  background: var(--gray-50);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

.price-option--accent {
  background: var(--light-blue);
  border-color: rgba(22, 119, 255, 0.28);
}

.price-option__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
}

.price-option__value {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.price-option--accent .price-option__value {
  color: var(--blue-600);
}

/* Secondary models, two-up */
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.model-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  transition: border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}

.model-card:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 119, 255, 0.32);
  box-shadow: var(--shadow-md);
}

.model-card__stage {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(165deg, var(--light-blue), var(--gray-50));
}

.model-card__stage .product-media {
  width: min(100%, 340px);
  filter: drop-shadow(0 18px 30px rgba(7, 17, 31, 0.14));
}

.model-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.model-card__title {
  margin-bottom: var(--sp-3);
}

.model-card__text {
  font-size: 0.9375rem;
  color: var(--gray-500);
}

.model-card__spec {
  display: grid;
  gap: 0.45rem;
  margin-block: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.model-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

.products__note {
  max-width: 62ch;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.875rem;
  color: var(--gray-500);
}

.products__note .link-arrow {
  font-size: inherit;
}

/* Content placeholder chip — makes unconfirmed data obvious and editable */
.placeholder-chip {
  display: inline-block;
  padding: 0.15em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-600);
  letter-spacing: 0.02em;
  background: var(--light-blue);
  border: 1px dashed rgba(22, 119, 255, 0.4);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   14. SECTION 7 — APPLICATIONS
   -------------------------------------------------------------------------- */

.apps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.app-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
}

.app-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, 0.35);
  box-shadow: var(--shadow-lg);
}

.app-tile__art {
  display: grid;
  place-items: end center;
  margin-bottom: var(--sp-5);
  aspect-ratio: 4 / 3;
  background: linear-gradient(170deg, var(--light-blue), var(--gray-50));
  border-radius: var(--r-md);
  overflow: hidden;
}

.app-tile__art svg {
  width: 100%;
  height: 100%;
}

.app-tile__title {
  margin-bottom: 0.4rem;
}

.app-tile__text {
  font-size: 0.9375rem;
  color: var(--gray-500);
}

/* --------------------------------------------------------------------------
   15. SECTION 8 — INSTALLATION
   -------------------------------------------------------------------------- */

.install {
  color: var(--ink-inverse);
  background: var(--navy);
}

.install__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.process {
  display: grid;
  gap: 1px;
  background: var(--hairline-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.process__item {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: baseline;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--navy-700);
  transition: background-color var(--dur-mid) var(--ease-out);
}

.process__item:hover {
  background: var(--navy-500);
}

.process__num {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--blue-300);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.process__label {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   16. SECTION 9 — WHOLESALE + RETAIL
   -------------------------------------------------------------------------- */

.channels__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.channel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  transition: border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.channel:hover {
  border-color: rgba(22, 119, 255, 0.35);
  box-shadow: var(--shadow-md);
}

.channel__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--sp-5);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  background: var(--light-blue);
  border-radius: var(--r-pill);
}

.channel__title {
  margin-bottom: var(--sp-3);
}

.channel__text {
  margin-bottom: var(--sp-6);
  color: var(--gray-500);
}

.channel__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   17. SECTION 10 — TRUST
   -------------------------------------------------------------------------- */

/* Benefit pillars */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.benefit {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.benefit__icon {
  width: 26px;
  height: 26px;
  margin-bottom: var(--sp-5);
  color: var(--blue);
}

.benefit__title {
  margin-bottom: 0.35rem;
}

.benefit__text {
  font-size: 0.9375rem;
  color: var(--gray-500);
}

.trust__subhead {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.trust__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.75rem, 1.5vw, 1.5rem)
    clamp(1.5rem, 3vw, 2.25rem) 0;
  border-right: 1px solid var(--hairline);
}

.trust__item:last-child {
  border-right: 0;
}

.trust__icon {
  width: 22px;
  height: 22px;
  margin-bottom: var(--sp-4);
  color: var(--blue);
}

.trust__label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   18. SECTION 11 — ABOUT
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.about__title {
  letter-spacing: -0.04em;
}

.about__tagline {
  max-width: 22ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--blue);
}

/* Mission / Vision */
.mv {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

.mv__item {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--light-blue);
}

.mv__label {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.mv__text {
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-500);
}

.about__meta {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}

.about__meta-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--sp-4);
  font-size: var(--fs-small);
}

.about__meta-key {
  font-weight: 600;
  color: var(--gray-500);
}

.about__meta-val {
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   19. SECTION 12 — FINAL CTA
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  padding-block: clamp(6rem, 14vw, 13rem);
  overflow: hidden;
  color: var(--ink-inverse);
  text-align: center;
  background: var(--black);
  isolation: isolate;
}

.final-cta__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      60rem 34rem at 50% 108%,
      rgba(22, 119, 255, 0.4),
      transparent 68%
    ),
    radial-gradient(
      40rem 26rem at 50% -10%,
      rgba(22, 119, 255, 0.14),
      transparent 70%
    );
}

/* Slow drifting waterline */
.final-cta__wave {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 30%;
  min-height: 120px;
  pointer-events: none;
  opacity: 0.5;
}

/* max-width:none is essential — the global img/svg reset caps svg at 100%,
   which would clamp this to one viewport and let the drift animation expose
   bare background on the right. */
.final-cta__wave svg {
  width: 200%;
  max-width: none;
  height: 100%;
  animation: wave-drift 22s linear infinite;
}

@keyframes wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.final-cta__title {
  max-width: 46rem;
  margin-inline: auto;
}

.final-cta__lead {
  max-width: 44ch;
  margin: var(--sp-5) auto var(--sp-7);
  color: rgba(255, 255, 255, 0.7);
}

.final-cta .btn-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--sp-6);
  color: var(--ink-inverse);
  background: var(--navy);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline-dark);
}

.footer__tagline {
  max-width: 34ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

.footer__col-title {
  margin-bottom: var(--sp-5);
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.footer__links {
  display: grid;
  gap: 0.7rem;
}

.footer__link {
  display: inline-block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.74);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--white);
}

.footer__address {
  max-width: 26ch;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}

.footer__contact {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--sp-5);
}

.footer__contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.74);
}

.footer__contact-row {
  align-items: flex-start;
}

.footer__contact-key {
  flex: none;
  min-width: 74px;
  color: rgba(255, 255, 255, 0.42);
}

/* Two phone numbers stack cleanly instead of wrapping around a separator */
.footer__contact-values {
  display: grid;
  gap: 0.2rem;
}

/* Placeholder chip, dark variant */
.placeholder-chip--dark {
  color: var(--blue-300);
  background: rgba(22, 119, 255, 0.12);
  border-color: rgba(125, 179, 255, 0.4);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------------------------
   21. FLOATING WHATSAPP BUTTON
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: var(--z-fab);
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  height: 52px;
  padding-inline: 1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
  background: #1faf54;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px -8px rgba(31, 175, 84, 0.65),
    0 2px 8px rgba(7, 17, 31, 0.18);
  transition: background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  /* Entrance is a CSS animation, not a JS-added class, so the button is
     present and clickable even with JavaScript disabled. */
  animation: fab-in var(--dur-mid) var(--ease-out) 400ms backwards;
}

@keyframes fab-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
}

.wa-fab:hover {
  background: #17913f;
  transform: translateY(-2px);
}

.wa-fab__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.wa-fab__label {
  display: inline;
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  /* Ensure entrance animations settle in their final state */
  .hero__line > span,
  .reveal-lines .reveal-line > span {
    transform: none !important;
  }

  .hero__eyebrow,
  .hero__lead,
  .hero__actions,
  .hero__trust,
  .hero__stage,
  .hero__cue,
  .mobile-menu__link,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .wa-fab {
    animation: none !important;
  }

  /* No scroll-driven fill, so don't make the user scroll through the
     runway that existed only to drive it. */
  #overflow {
    min-height: 0;
  }

  .overflow-split__copy,
  .overflow-split__stage {
    position: static;
  }

  .hero__ring,
  .final-cta__wave svg,
  .hero .product-media,
  .tank__surface-drift,
  .tank.is-pumping .tank__flow,
  .tank.is-pumping .tank__pump-ring {
    animation: none !important;
  }

  /* The system diagram resolves to a single coherent frame: tank filled to
     the upper probe, pump off, readout showing OFF. Without this the
     duration override would drop each part back to its own base style and
     the two readout states would overlap. */
  .sys__water,
  .sys__surface,
  .sys__surface-drift,
  .sys__flow,
  .sys__rotor,
  .sys__pump-glow,
  .sys__state-off,
  .sys__state-on,
  .sys__btn-green,
  .sys__probe--on rect,
  .sys__probe--on text,
  .sys__probe--stop rect,
  .sys__probe--stop text {
    animation: none !important;
  }

  .sys__water {
    transform: scaleY(0.793);
  }

  .sys__surface {
    transform: translateY(58px);
  }

  .sys__flow,
  .sys__pump-glow,
  .sys__state-on {
    opacity: 0;
  }

  .sys__state-off {
    opacity: 1;
  }

}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .mobile-menu,
  .wa-fab,
  .hero__cue,
  .hero__ambient,
  .final-cta__wave {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section--dark,
  .story,
  .install,
  .final-cta,
  .footer {
    color: #000 !important;
    background: #fff !important;
  }
}