/* =====================================================================
   HighPur Water Express — core styles
   Tokens · reset · typography · atmosphere · cursor · nav · hero
   ===================================================================== */

:root{
  /* depth palette */
  --abyss:   #04141c;
  --abyss-2: #061d27;
  --deep:    #082a37;
  --hydro:   #0a3a48;
  --hydro-2: #0e4f5e;

  /* luminous accents */
  --aqua:    #33e8d6;
  --cyan:    #27d3f5;
  --cyan-hi: #7ff6ea;
  --white:   #eafcff;
  --mist:    #9fc6cf;
  --mist-dim:#6f96a0;

  --glass:        rgba(14, 48, 60, 0.42);
  --glass-line:   rgba(127, 246, 234, 0.16);
  --glass-line-2: rgba(127, 246, 234, 0.30);

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-body);
  background:var(--abyss);
  color:var(--white);
  line-height:1.55;
  overflow-x:hidden;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }

::selection{ background:var(--aqua); color:var(--abyss); }

.mono{ font-family:var(--font-mono); font-weight:500; letter-spacing:.04em; }

/* =====================================================================
   ATMOSPHERE — fixed background layers behind all content
   ===================================================================== */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--hydro) 0%, var(--deep) 38%, var(--abyss-2) 70%, var(--abyss) 100%);
}
#water-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }

/* gradient fallback (shown when WebGL unavailable / reduced motion) */
.water-fallback{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(39,211,245,.20), transparent 60%),
    radial-gradient(70% 60% at 75% 35%, rgba(51,232,214,.16), transparent 60%),
    radial-gradient(90% 80% at 50% 110%, rgba(8,42,55,.9), var(--abyss) 70%);
  background-size:200% 200%, 200% 200%, 100% 100%;
  animation:driftbg 26s ease-in-out infinite alternate;
}
body.use-fallback .water-fallback{ opacity:1; }
body.use-fallback #water-canvas{ display:none; }
@keyframes driftbg{
  0%{ background-position:0% 0%, 100% 0%, 0 0; }
  100%{ background-position:100% 100%, 0% 100%, 0 0; }
}

/* god rays */
.godrays{
  position:absolute; inset:-20% 0 0 0; mix-blend-mode:screen; opacity:.5;
  background:
    linear-gradient(101deg, transparent 12%, rgba(127,246,234,.10) 16%, transparent 22%),
    linear-gradient(96deg, transparent 38%, rgba(39,211,245,.12) 43%, transparent 49%),
    linear-gradient(110deg, transparent 62%, rgba(127,246,234,.08) 67%, transparent 74%);
  filter:blur(6px);
  animation:rays 18s ease-in-out infinite alternate;
  transform-origin:top center;
}
@keyframes rays{
  0%{ transform:translateX(-3%) skewX(-2deg); opacity:.35; }
  100%{ transform:translateX(3%) skewX(2deg); opacity:.6; }
}

/* film grain */
.grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

/* scroll-linked depth tint, controlled by JS via --descent (0..1) */
.depth-tint{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(4,20,28,0) 0%,
    rgba(3,16,23,calc(var(--descent,0)*.55)) 45%,
    rgba(2,12,18,calc(var(--descent,0)*.78)) 100%);
}

/* =====================================================================
   CUSTOM FLUID CURSOR
   ===================================================================== */
.cursor{
  position:fixed; top:0; left:0; width:46px; height:46px;
  border-radius:50%; z-index:200; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 45%, rgba(127,246,234,.55), rgba(39,211,245,.22) 55%, transparent 72%);
  filter:blur(2px); opacity:0;
  transition:opacity .3s ease, width .25s var(--ease), height .25s var(--ease);
}
.cursor-dot{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  background:var(--cyan-hi); transform:translate(-50%,-50%); box-shadow:0 0 10px var(--cyan-hi);
}
body.cursor-on .cursor{ opacity:1; }
body.cursor-on{ cursor:none; }
body.cursor-on a, body.cursor-on button, body.cursor-on input,
body.cursor-on select, body.cursor-on textarea, body.cursor-on .ba-range{ cursor:none; }
.cursor.hot{ width:74px; height:74px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.95em 1.6em; border-radius:999px; font-weight:600;
  font-family:var(--font-body); letter-spacing:.01em; border:1px solid transparent;
  overflow:hidden; will-change:transform; transition:transform .25s var(--ease), box-shadow .3s ease, background .3s ease;
  isolation:isolate;
}
.btn-lg{ padding:1.1em 2em; font-size:1.05rem; }
.btn-primary{
  background:linear-gradient(135deg, var(--cyan-hi), var(--cyan) 55%, var(--aqua));
  color:var(--abyss);
  box-shadow:0 6px 26px rgba(39,211,245,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{ box-shadow:0 10px 40px rgba(39,211,245,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost{
  background:rgba(127,246,234,.06); color:var(--white);
  border-color:var(--glass-line-2); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(127,246,234,.13); border-color:var(--cyan); }

/* ripple-on-click */
.btn .rip{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(234,252,255,.6), transparent 70%);
  pointer-events:none; z-index:-1; animation:rip .6s var(--ease-out) forwards;
}
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(12); opacity:0; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad); transition:padding .3s var(--ease), background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:10px var(--pad);
  background:rgba(6,29,39,.55);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--glass-line);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-logo{
  height:72px; width:auto; display:block;
  filter:drop-shadow(0 2px 16px rgba(39,211,245,.45));
}
.brand-logo-footer{ height:92px; }
@media (max-width:600px){
  .brand-logo{ height:54px; }
  .brand-logo-footer{ height:70px; }
}
.brand-mark{ display:grid; place-items:center; filter:drop-shadow(0 2px 10px rgba(39,211,245,.5)); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.01em; }
.brand-sub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; color:var(--mist); text-transform:uppercase; margin-top:3px; }

.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  position:relative; font-size:.96rem; font-weight:500; color:var(--mist); padding:4px 0;
  white-space:nowrap;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--aqua),var(--cyan)); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--white); }
.nav-links a.active::after{ width:100%; }

.btn-call{
  flex-direction:column; gap:1px; padding:.5em 1.3em; line-height:1.12; white-space:nowrap;
  background:linear-gradient(135deg, var(--cyan-hi), var(--cyan) 60%, var(--aqua));
  color:var(--abyss); box-shadow:0 5px 22px rgba(39,211,245,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.call-label{ font-size:.58rem; font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; opacity:.78; }
.call-num{ font-weight:700; font-size:.95rem; white-space:nowrap; }
.call-pulse{
  position:absolute; inset:0; border-radius:999px; border:2px solid var(--cyan-hi);
  animation:callpulse 2.6s ease-out infinite; opacity:0;
}
@keyframes callpulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--glass-line-2); border-radius:12px; }
.nav-toggle span{ width:20px; height:2px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px); z-index:115;
  display:flex; flex-direction:column; gap:8px; padding:90px 28px 28px;
  transform:translateX(105%); transition:transform .4s var(--ease-out);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; padding:10px 0; border-bottom:1px solid var(--glass-line); }
.mobile-menu .btn{ margin-top:18px; }

/* glass utility — crisp acrylic, low fill, specular top edge */
.glass{
  background:linear-gradient(180deg, rgba(20,56,68,.46), rgba(7,30,40,.32));
  backdrop-filter:blur(26px) saturate(142%);
  -webkit-backdrop-filter:blur(26px) saturate(142%);
  border:1px solid var(--glass-line);
  box-shadow:0 30px 72px rgba(1,8,12,.6), inset 0 1px 0 rgba(190,255,250,.20), inset 0 -1px 0 rgba(2,12,18,.4);
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:140px var(--pad) 80px;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 90% at 18% 55%, rgba(3,16,23,.62), transparent 60%),
    linear-gradient(180deg, rgba(4,20,28,.4) 0%, transparent 30%, transparent 70%, rgba(3,14,20,.6) 100%);
}
.hero-inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--aqua); margin-bottom:22px;
}
.eyebrow-dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px var(--aqua); animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe{ 50%{ opacity:.35; transform:scale(.7); } }

.hero-title{
  font-family:var(--font-display);
  font-weight:800; font-size:clamp(2.9rem, 7vw, 6.4rem); line-height:.95;
  letter-spacing:-.035em; margin-bottom:26px; text-wrap:balance;
}
.hero-title .line{ display:block; overflow:hidden; }
/* rising-water text fill */
.fill-text{
  display:inline-block;
  background:linear-gradient(180deg, var(--white) 0%, var(--white) 50%, var(--mist-dim) 50%, var(--mist-dim) 100%);
  background-size:100% 200%;
  background-position:0 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transform:translateY(106%);
}
.hero-title.in .fill-text{
  transform:translateY(0);
  background-position:0 0;
  transition:transform 1s var(--ease-out), background-position 1.4s var(--ease-out) .25s;
}
.hero-title .line:nth-child(2) .fill-text{ transition-delay:.12s, .37s; }

.hero-sub{ font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--mist); max-width:46ch; margin-bottom:34px; line-height:1.6; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; }

.stat-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:8px 15px; border-radius:999px; font-size:.86rem; color:var(--mist);
  background:rgba(127,246,234,.05); border:1px solid var(--glass-line);
  backdrop-filter:blur(8px);
}
.chip b{ font-family:var(--font-display); color:var(--white); font-weight:700; font-size:.98rem; }

/* purity index card */
.purity-index{ border-radius:26px; padding:28px; display:flex; flex-direction:column; gap:18px; }
.pi-head{ display:flex; align-items:center; justify-content:space-between; }
.pi-label{ font-size:.66rem; letter-spacing:.18em; color:var(--mist); }
.pi-live{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; color:var(--aqua); font-family:var(--font-mono); }
.pi-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 10px var(--aqua); animation:breathe 1.8s ease-in-out infinite; }

.droplet{ position:relative; width:118px; height:118px; margin:6px auto 2px; }
.droplet-core{
  position:absolute; inset:0; border-radius:54% 46% 47% 53% / 60% 58% 42% 40%;
  background:radial-gradient(circle at 38% 30%, var(--cyan-hi), var(--cyan) 42%, #0c7fa0 78%, #073a4d 100%);
  box-shadow:0 0 50px rgba(39,211,245,.55), inset -8px -10px 22px rgba(3,30,40,.6), inset 6px 8px 18px rgba(234,252,255,.5);
  animation:wobble 6s ease-in-out infinite;
}
.droplet-shine{ position:absolute; top:18%; left:26%; width:30px; height:22px; border-radius:50%; background:radial-gradient(circle,#fff,transparent 70%); filter:blur(1px); opacity:.85; }
.droplet-caustic{
  position:absolute; inset:8%; border-radius:inherit; mix-blend-mode:screen; opacity:.5;
  background:conic-gradient(from 0deg, transparent, rgba(234,252,255,.6), transparent 30%, rgba(127,246,234,.5), transparent 60%);
  animation:spin 9s linear infinite;
}
@keyframes wobble{ 50%{ border-radius:48% 52% 55% 45% / 52% 46% 54% 48%; transform:translateY(-4px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.pi-readout{ display:flex; align-items:baseline; gap:10px; justify-content:center; }
.pi-value{ font-family:var(--font-display); font-weight:800; font-size:3.1rem; line-height:1; color:var(--white); font-variant-numeric:tabular-nums; }
.pi-unit{ font-size:.82rem; color:var(--mist); }
.pi-bar{ height:6px; border-radius:6px; background:rgba(127,246,234,.12); overflow:hidden; }
.pi-bar-fill{ height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg,#ff6b6b,#ffd166 35%,var(--aqua) 70%,var(--cyan)); transition:width 1.2s var(--ease); }
.pi-foot{ font-size:.7rem; color:var(--mist-dim); text-align:center; }
.pi-foot b{ color:var(--aqua); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.64rem; letter-spacing:.22em; color:var(--mist-dim);
}
.scroll-line{ width:1px; height:46px; background:linear-gradient(var(--aqua),transparent); position:relative; overflow:hidden; }
.scroll-line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--cyan-hi); animation:scrolldown 1.9s var(--ease) infinite; }
@keyframes scrolldown{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(260%); } }

/* reveal base */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ===== Floating contact CTA (sticky while scrolling) ===== */
.floating-cta{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  z-index:80; display:inline-flex; align-items:center; gap:11px;
  padding:.95em 1.5em; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.96rem;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
  color:var(--abyss); text-decoration:none; border:1px solid rgba(234,252,255,.45);
  background:linear-gradient(135deg, var(--cyan-hi), var(--cyan) 55%, var(--aqua));
  box-shadow:0 10px 34px rgba(39,211,245,.40), inset 0 1px 0 rgba(255,255,255,.55);
  transform:translateY(14px); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease-out), opacity .45s var(--ease-out), box-shadow .3s var(--ease);
}
.floating-cta.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.floating-cta:hover{ box-shadow:0 14px 42px rgba(39,211,245,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.floating-cta .fcta-ic{
  width:9px; height:9px; border-radius:50%; background:var(--abyss);
  box-shadow:0 0 0 4px rgba(4,20,28,.18); flex:0 0 auto;
  animation:breathe 2.4s ease-in-out infinite;
}
@media (max-width:560px){
  .floating-cta{ font-size:.74rem; padding:.85em 1.15em; gap:8px; letter-spacing:.01em; }
}

/* ===== Contact form thank-you state ===== */
.form-thanks[hidden]{ display:none !important; }
.form-thanks{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:8px 0;
}
.form-thanks .ft-mark{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan-hi), var(--cyan) 60%, var(--aqua));
  color:var(--abyss); box-shadow:0 8px 26px rgba(39,211,245,.4);
}
.form-thanks .ft-mark svg{ width:28px; height:28px; }
.form-thanks h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--white); }
.form-thanks p{ color:var(--mist); max-width:42ch; }

@media (max-width:920px){
  .nav-links{ display:none; }
  .btn-call{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .purity-index{ max-width:420px; }
}