/* =====================================================================
   H2O SIMPLIFIED, design tokens
   A Sharp Cars Company. Built as one self-contained file.
   ===================================================================== */
:root{
  /* --- Brand color: water + luxury --- */
  --ink:        #06121f;   /* deepest navy, darkest sections */
  --ink-2:      #0a1c30;   /* dark navy surface */
  --deep:       #0c2440;   /* deep ocean blue */
  --blue:       #2a86f0;   /* primary water blue */
  --blue-deep:  #0b5cd6;
  --aqua:       #34e0d8;   /* signature teal */
  --cyan:       #56ccf2;
  --champagne:  #e8cf9c;   /* luxury micro-accent */

  /* --- Light surfaces --- */
  --white:      #ffffff;
  --mist:       #f4f9fc;   /* light section background */
  --cloud:      #e9f1f8;

  /* --- Text on light --- */
  --t-head:     #0b2032;
  --t-body:     #2f4d63;
  --t-muted:    #51697d;

  /* --- Text on dark --- */
  --t-head-d:   #ffffff;
  --t-body-d:   #c4d8e8;
  --t-muted-d:  #8aa6bd;

  /* --- Signature gradients --- */
  --grad-water: linear-gradient(120deg, #5af0e0 0%, #34c5f5 45%, #2a86f0 100%);
  --grad-text:  linear-gradient(100deg, #9af6ea 0%, #56ccf2 40%, #6aa6ff 100%);
  --grad-cta:   linear-gradient(120deg, #6ff0e0 0%, #34c5f5 100%);

  /* --- Radius --- */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --pill: 999px;

  /* --- Layout --- */
  --container: 1200px;
  --wide:      1340px;
  --pad:       clamp(1.15rem, 5vw, 2rem);
  --section-y: clamp(5rem, 11vw, 9rem);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* --- Shadows --- */
  --shadow-sm: 0 4px 20px rgba(6,18,31,.10);
  --shadow:    0 18px 50px rgba(6,18,31,.16);
  --shadow-lg: 0 40px 90px rgba(6,18,31,.30);
  --glow:      0 14px 40px rgba(52,197,245,.35);
}

/* ===================== reset & base ===================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--t-body);
  background:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
:focus-visible{ outline:2.5px solid var(--cyan); outline-offset:3px; border-radius:6px; }
.skip-link{ position:fixed; top:-100px; left:1rem; z-index:200; background:var(--grad-cta); color:#04101c; font-weight:600; padding:.75rem 1.2rem; border-radius:0 0 12px 12px; box-shadow:var(--shadow); transition:top .3s var(--ease); }
.skip-link:focus{ top:0; }
section[id], main[id]{ scroll-margin-top:84px; }
.nav__links a.active{ color:#fff; }
.nav__links a.active::after{ width:100%; }

h1,h2,h3,h4{ font-family:'Playfair Display',Georgia,serif; font-weight:500; line-height:1.14; color:var(--t-head); letter-spacing:-.012em; }

/* ===================== utility ===================== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.container.wide{ max-width:var(--wide); }
.section{ padding-block:var(--section-y); position:relative; }
.center{ text-align:center; }
.eyebrow{
  font-family:'Inter',sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--blue-deep);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--blue); display:inline-block; }
.on-dark .eyebrow{ color:var(--aqua); }
.on-dark .eyebrow::before{ background:linear-gradient(90deg,var(--aqua),transparent); }

.lead{ font-size:clamp(1.05rem,1.5vw,1.27rem); line-height:1.6; color:var(--t-body); max-width:62ch; }
.on-dark{ color:var(--t-body-d); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--t-head-d); }
.on-dark .lead{ color:var(--t-body-d); }
.muted{ color:var(--t-muted); }
.on-dark .muted{ color:var(--t-muted-d); }

.h2{ font-size:clamp(2.1rem,4.6vw,3.5rem); }
.h3{ font-size:clamp(1.45rem,2.4vw,1.9rem); }
.grad-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ margin-top:.8rem; }
.section-head .lead{ margin-top:1.1rem; }

/* ===================== buttons ===================== */
.btn{
  --bg:var(--grad-cta);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.7rem; border-radius:var(--pill);
  font-weight:600; font-size:1rem; letter-spacing:.01em;
  background:var(--bg); color:#04101c;
  box-shadow:var(--glow); overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 22px 55px rgba(52,197,245,.5); }
.btn:hover svg{ transform:translateX(4px); }
.btn::after{ /* shine sweep */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }

.btn-ghost{
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.22); box-shadow:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.btn-ghost::after{ display:none; }

.btn-lg{ padding:1.15rem 2.1rem; font-size:1.06rem; }

.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.text-link{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--blue-deep);
}
.text-link svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease); }
.text-link:hover svg{ transform:translateX(4px); }
.on-dark .text-link{ color:var(--cyan); }

/* ===================== scroll progress + nav ===================== */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--grad-water); z-index:120;
  box-shadow:0 0 14px rgba(86,204,242,.7);
}
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.scrolled{
  padding:.6rem 0;
  background:rgba(6,18,31,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.30);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.7rem; color:#fff; font-weight:700; letter-spacing:.01em; }
.brand__mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--grad-water); display:grid; place-items:center;
  box-shadow:var(--glow);
}
.brand__mark svg{ width:21px; height:21px; }
.brand__name{ font-family:'Playfair Display',serif; font-size:1.22rem; line-height:1; }
.brand__name small{ display:block; font-family:'Inter',sans-serif; font-size:.6rem; letter-spacing:.28em; font-weight:600; color:var(--aqua); margin-top:3px; }
.brand__fallback{ display:flex; align-items:center; gap:.7rem; }
/* Logo: trimmed black-background PNG; screen blend wipes the black so the chrome floats on dark sections. */
.brand__logo-wrap{ display:block; flex:none; line-height:0; }
.brand__logo{ display:block; height:46px; width:auto; max-width:none; mix-blend-mode:screen; pointer-events:none; -webkit-user-drag:none; }
.nav.scrolled .brand__logo{ height:40px; }
.brand.has-logo .brand__fallback{ display:none; }
.brand:not(.has-logo) .brand__logo-wrap{ display:none; }
.footer .brand__logo{ height:50px; }
@media (max-width:560px){ .brand__logo{ height:38px; } }

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{ color:rgba(255,255,255,.82); font-weight:500; font-size:.95rem; position:relative; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--grad-water); transition:width .3s var(--ease); }
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
.nav .btn{ padding:.7rem 1.3rem; font-size:.92rem; }

.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; color:#fff; }
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .x{ display:none; }
body.menu-open .nav-toggle .x{ display:block; }
body.menu-open .nav-toggle .bars{ display:none; }
.nav__menu{ display:none; } /* hidden on desktop; revealed as overlay in mobile breakpoint */

/* ===================== hero ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:7rem; padding-bottom:5rem; overflow:hidden; isolation:isolate;
  color:#fff;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; }
/* Sunset-on-water placeholder gradient, replaced when a hero photo loads */
.hero__photo{
  position:absolute; inset:0; z-index:-3;
  background:radial-gradient(125% 120% at 78% 12%, #ffb070 0%, #f2683f 11%, #944067 32%, #243a63 58%, #06121f 100%);
  background-size:cover; background-position:center;
  transform:scale(1.06);
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease); }
.hero__photo img.loaded{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg, rgba(4,12,22,.94) 0%, rgba(4,12,22,.74) 34%, rgba(4,12,22,.30) 66%, rgba(4,12,22,.62) 100%),
    linear-gradient(0deg, rgba(4,12,22,.85) 0%, transparent 38%);
}
/* drifting aurora / caustics */
.hero__aurora{ position:absolute; inset:-20%; z-index:-1; pointer-events:none; filter:blur(20px); opacity:.55; }
.hero__aurora span{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.hero__aurora .a1{ width:46vw; height:46vw; left:48%; top:-8%; background:radial-gradient(circle, rgba(52,224,216,.55), transparent 60%); animation:drift1 18s ease-in-out infinite; }
.hero__aurora .a2{ width:40vw; height:40vw; left:62%; top:30%; background:radial-gradient(circle, rgba(42,134,240,.55), transparent 60%); animation:drift2 22s ease-in-out infinite; }
.hero__aurora .a3{ width:30vw; height:30vw; left:30%; top:55%; background:radial-gradient(circle, rgba(106,166,255,.4), transparent 60%); animation:drift3 26s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-6%,8%) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(8%,-6%) scale(1.15);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1.05);} 50%{ transform:translate(-8%,-8%) scale(.92);} }

/* rising bubbles */
.bubbles{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bubbles i{
  position:absolute; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), rgba(120,210,240,.18) 55%, transparent 70%);
  box-shadow:inset 0 0 8px rgba(255,255,255,.4);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.6; }
  100%{ transform:translateY(-110svh) translateX(30px); opacity:0; }
}

.hero__inner{ position:relative; max-width:780px; }
.hero .eyebrow{ color:#fff; }
.hero .eyebrow::before{ background:linear-gradient(90deg,var(--aqua),transparent); }
.hero h1{
  color:#fff; font-weight:500;
  font-size:clamp(2.7rem,6.6vw,5.6rem); line-height:1.14; letter-spacing:-.02em;
  margin:1.1rem 0 1.4rem; text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero h1 .word{ display:inline-block; padding-bottom:.1em; }
.hero p.sub{ font-size:clamp(1.08rem,1.7vw,1.35rem); line-height:1.55; color:rgba(255,255,255,.9); max-width:54ch; }
.hero .cta-row{ margin-top:2.2rem; }
.hero__trust{
  margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; align-items:center;
  color:rgba(255,255,255,.74); font-size:.86rem; font-weight:500; letter-spacing:.02em;
}
.hero__trust span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero__trust svg{ width:15px; height:15px; color:var(--aqua); }

/* floating glass spec card */
.hero__card{
  position:absolute; right:max(var(--pad),3vw); bottom:9vh; z-index:2;
  width:270px; padding:1.4rem 1.5rem; border-radius:var(--r-lg);
  background:rgba(10,28,48,.55); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--shadow-lg);
}
.hero__card .k{ font-family:'Playfair Display',serif; font-size:2.4rem; line-height:1; color:#fff; }
.hero__card .k small{ font-size:1.2rem; color:var(--aqua); }
.hero__card .l{ font-size:.82rem; color:rgba(255,255,255,.75); margin-top:.35rem; letter-spacing:.04em; }
.hero__card hr{ border:none; height:1px; background:rgba(255,255,255,.14); margin:1rem 0; }
.hero__card .row{ display:flex; align-items:center; gap:.7rem; font-size:.86rem; color:rgba(255,255,255,.85); }
.hero__card .row svg{ width:18px; height:18px; color:var(--aqua); flex:none; }
.hero__card .row + .row{ margin-top:.6rem; }

/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.6); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; }
.scroll-cue .mouse{ width:24px; height:38px; border:2px solid rgba(255,255,255,.45); border-radius:14px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:3px; background:#fff; transform:translateX(-50%); animation:wheel 1.8s infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 60%{ opacity:0; transform:translate(-50%,12px);} 100%{opacity:0;} }

/* wave divider */
.wave-divider{ position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; pointer-events:none; }
.wave-divider svg{ width:100%; height:auto; display:block; }

/* ===================== marquee ===================== */
.marquee{ background:var(--ink-2); border-block:1px solid rgba(255,255,255,.07); padding:1.4rem 0; overflow:hidden; position:relative; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink-2),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--ink-2),transparent); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:scrollx 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:1.1rem; padding:0 1.6rem; color:rgba(255,255,255,.82); font-weight:600; font-size:1.05rem; letter-spacing:.02em; white-space:nowrap; }
.marquee__item svg{ width:16px; height:16px; color:var(--aqua); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ===================== two benefits ===================== */
.benefits{ background:var(--mist); color:var(--t-body); }
.benefits__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:3rem; }
.bcard{
  position:relative; background:#fff; border-radius:var(--r-xl); padding:2.6rem;
  box-shadow:var(--shadow-sm); border:1px solid var(--cloud); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bcard::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad-water); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.bcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.bcard:hover::before{ opacity:1; }
.bcard__top{ display:flex; align-items:center; gap:1rem; }
.icon-chip{ width:60px; height:60px; border-radius:18px; flex:none; display:grid; place-items:center; background:var(--grad-water); color:#04101c; box-shadow:var(--glow); }
.icon-chip svg{ width:28px; height:28px; }
.bcard h3{ font-size:1.65rem; }
.bcard > p{ margin-top:1.1rem; color:var(--t-body); }
.feature-list{ margin-top:1.5rem; display:grid; gap:.7rem; }
.feature-list li{ display:flex; align-items:flex-start; gap:.7rem; font-weight:500; color:var(--t-head); }
.feature-list li svg{ width:21px; height:21px; flex:none; margin-top:2px; color:var(--blue); }
.chip-label{ margin-top:1.7rem; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--t-muted); }
.chips{ margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ padding:.45rem .9rem; border-radius:var(--pill); background:var(--mist); border:1px solid var(--cloud); font-size:.84rem; font-weight:500; color:var(--t-body); transition:.3s var(--ease); }
.chip:hover{ background:var(--deep); color:#fff; border-color:var(--deep); transform:translateY(-2px); }

/* ===================== patented (dark) ===================== */
.patent{ background:
    radial-gradient(120% 90% at 85% 0%, rgba(42,134,240,.25), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(52,224,216,.18), transparent 55%),
    var(--ink); color:var(--t-body-d); overflow:hidden; }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.patent .problem-list{ margin-top:2rem; display:grid; gap:1rem; }
.problem{ display:flex; gap:1.1rem; padding:1.3rem 1.4rem; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition:.4s var(--ease); }
.problem:hover{ background:rgba(255,255,255,.07); transform:translateX(6px); }
.problem .num{ font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--aqua); flex:none; }
.problem h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:1.02rem; color:#fff; }
.problem p{ margin-top:.25rem; font-size:.94rem; color:var(--t-muted-d); }
.patent-badge{ display:inline-flex; align-items:center; gap:.7rem; margin-top:2rem; padding:.7rem 1.2rem; border-radius:var(--pill); background:rgba(232,207,156,.12); border:1px solid rgba(232,207,156,.4); color:var(--champagne); font-weight:600; font-size:.9rem; letter-spacing:.03em; }
.patent-badge svg{ width:18px; height:18px; }

/* media frame (image slots) */
.media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg,#0e2742,#143a5e 60%,#1d567f);
  box-shadow:var(--shadow-lg); isolation:isolate;
}
.media::before{ content:""; display:block; padding-bottom:75%; }
.media.wide::before{ padding-bottom:62.5%; }
.media.tall::before{ padding-bottom:133.333%; }
.media-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s var(--ease), transform 1.2s var(--ease); z-index:2; }
.media img.loaded{ opacity:1; }
.media__ph{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; z-index:1; }
.media__ph::before{ content:""; position:absolute; inset:0; background:
   radial-gradient(70% 60% at 70% 20%, rgba(86,204,242,.25), transparent 60%),
   linear-gradient(0deg, rgba(4,12,22,.55), transparent 55%); }
.media__ph .tag{ position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; border-radius:var(--pill); background:rgba(6,18,31,.55); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:.74rem; font-weight:600; letter-spacing:.05em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.media__ph .tag svg{ width:14px; height:14px; color:var(--aqua); }
.media__ph .cap{ position:relative; color:rgba(255,255,255,.92); font-size:.92rem; margin-top:.7rem; max-width:90%; }
.media__icon{ position:absolute; inset:0; display:grid; place-items:center; z-index:0; opacity:.5; }
.media__icon svg{ width:84px; height:84px; color:rgba(255,255,255,.35); }
.media.loaded .media__ph{ opacity:0; }
.media:hover img.loaded{ transform:scale(1.06); }

/* ===================== built for life ===================== */
.life{ background:var(--white); }
.life__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-top:2.5rem; }
.loc-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.loc-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:var(--pill); background:var(--mist); border:1px solid var(--cloud); font-weight:500; color:var(--t-head); transition:.35s var(--ease); }
.loc-chip svg{ width:17px; height:17px; color:var(--blue); }
.loc-chip:hover{ transform:translateY(-3px); border-color:var(--blue); box-shadow:var(--shadow-sm); }
.cap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cap{ display:flex; align-items:flex-start; gap:.9rem; padding:1.3rem; border-radius:var(--r); background:var(--mist); border:1px solid var(--cloud); transition:.4s var(--ease); }
.cap:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); background:#fff; border-color:#cfe2f0; }
.cap .ci{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--grad-water); color:#04101c; }
.cap .ci svg{ width:21px; height:21px; }
.cap h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:.98rem; color:var(--t-head); line-height:1.3; }

/* ===================== stats / more than water ===================== */
.more{ background:var(--ink); color:var(--t-body-d); position:relative; overflow:hidden; }
.more::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 70% at 100% 0%, rgba(42,134,240,.16), transparent 55%); pointer-events:none; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:3.5rem; }
.stat{ text-align:center; padding:2rem 1rem; border-radius:var(--r-lg); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition:.4s var(--ease); }
.stat:hover{ transform:translateY(-6px); border-color:rgba(86,204,242,.4); background:rgba(255,255,255,.06); }
.stat .num{ font-family:'Playfair Display',serif; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .lbl{ margin-top:.6rem; font-size:.9rem; color:var(--t-muted-d); letter-spacing:.03em; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
.product{ display:flex; align-items:center; gap:.9rem; padding:1.15rem 1.3rem; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); font-weight:500; color:#eaf3fb; transition:.35s var(--ease); }
.product svg{ width:22px; height:22px; flex:none; color:var(--aqua); }
.product:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); border-color:rgba(52,224,216,.35); }
.aftercare{ background:var(--ink-2); }
.aftercare .media.wide::before{ padding-bottom:100%; }

/* ===================== designed for ===================== */
.designed{ background:var(--mist); }
.check-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.check-item{ display:flex; align-items:center; gap:.9rem; padding:1.25rem 1.4rem; border-radius:var(--r); background:#fff; border:1px solid var(--cloud); font-weight:600; color:var(--t-head); box-shadow:var(--shadow-sm); transition:.4s var(--ease); }
.check-item .tick{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--grad-water); color:#04101c; }
.check-item .tick svg{ width:18px; height:18px; }
.check-item:hover{ transform:translateY(-5px) scale(1.01); box-shadow:var(--shadow); border-color:#bcdcf0; }
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; }
.app-card{ background:#fff; border:1px solid var(--cloud); border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.app-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:#bcdcf0; }
.app-card .ci{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--grad-water); color:#04101c; box-shadow:var(--glow); }
.app-card .ci svg{ width:26px; height:26px; }
.app-card h3{ font-size:1.22rem; margin-top:1.1rem; }
.app-card p{ margin-top:.55rem; color:var(--t-body); font-size:.95rem; line-height:1.62; }

/* ===================== gallery ===================== */
.gallery{ background:var(--white); }
/* Justified rows: photos line up in clean, equal-height rows — full size, never cropped.
   Each .media flex-grows in proportion to its aspect ratio (--ar), so a row's images
   share one height and fill the width exactly, with no object-fit cropping. */
.gallery__grid{ display:flex; flex-direction:column; gap:1.1rem; margin-top:3rem; }
.g-row{ display:flex; gap:1.1rem; align-items:flex-start; }
.g-row .media{ flex:var(--ar,1.4) 1 0; min-width:0; }
.g-row .media::before{ display:none; }
.g-row .media img{ position:relative; z-index:2; width:100%; height:auto; display:block; }

/* ===================== founder ===================== */
.founder{ background:linear-gradient(180deg,var(--mist) 0%,#fff 62%); position:relative; overflow:hidden; }
.founder::after{ content:""; position:absolute; inset:0; pointer-events:none;
   background:radial-gradient(64% 60% at 100% 0%, rgba(42,134,240,.10), transparent 58%); }
.founder .split{ align-items:start; position:relative; z-index:1; }
.founder .media.wide::before{ padding-bottom:83%; }
.media__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.6rem 1.4rem 1.25rem;
   color:#fff; font-size:.92rem; font-weight:500; line-height:1.45;
   background:linear-gradient(0deg, rgba(4,12,22,.85), rgba(4,12,22,.5) 45%, transparent); }
.founder__name{ font-size:clamp(2.3rem,5vw,3.5rem); margin-top:.6rem; }
.founder__role{ margin-top:.85rem; font-weight:600; font-size:1.02rem; color:var(--blue-deep); letter-spacing:.01em; }
.founder__bio{ margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; max-width:60ch;
   font-size:1.05rem; line-height:1.62; color:var(--t-body); }
.founder__bio strong{ color:var(--t-head); font-weight:600; }
.founder__cta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem; }

/* ===================== why choose ===================== */
.why{ background:
   radial-gradient(100% 80% at 0% 0%, rgba(52,224,216,.16), transparent 55%),
   var(--deep); color:var(--t-body-d); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }
.why-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; padding:1.7rem; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:.4s var(--ease); }
.why-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.09); border-color:rgba(86,204,242,.45); box-shadow:0 24px 50px rgba(0,0,0,.3); }
.why-card .tick{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; background:var(--grad-water); color:#04101c; box-shadow:var(--glow); }
.why-card .tick svg{ width:24px; height:24px; }
.why-card h3{ font-family:'Inter',sans-serif; font-weight:600; color:#fff; font-size:1.12rem; line-height:1.25; }
.why-card p{ color:var(--t-body-d); font-size:.93rem; line-height:1.55; }

/* ===================== CTA + form ===================== */
.cta{ background:var(--ink); color:var(--t-body-d); position:relative; overflow:hidden; }
.cta__aurora{ position:absolute; inset:-30%; z-index:0; pointer-events:none; filter:blur(40px); opacity:.5; }
.cta__aurora span{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.cta__aurora .c1{ width:40vw; height:40vw; left:-10%; top:-20%; background:radial-gradient(circle,rgba(52,224,216,.5),transparent 60%); animation:drift1 20s ease-in-out infinite; }
.cta__aurora .c2{ width:38vw; height:38vw; right:-5%; bottom:-25%; left:auto; background:radial-gradient(circle,rgba(42,134,240,.5),transparent 60%); animation:drift2 24s ease-in-out infinite; }
.cta__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cta h2{ font-size:clamp(2.2rem,4.8vw,3.6rem); }
.contact-rows{ margin-top:2rem; display:grid; gap:1rem; }
.contact-row{ display:flex; align-items:center; gap:1rem; }
.contact-row .ci{ width:50px; height:50px; border-radius:14px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--aqua); }
.contact-row .ci svg{ width:22px; height:22px; }
.contact-row .lbl{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-muted-d); }
.contact-row a,.contact-row .v{ font-size:1.12rem; font-weight:600; color:#fff; }

.form-card{
  position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl); padding:clamp(1.6rem,3vw,2.4rem); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--shadow-lg);
}
.form-card h3{ font-size:1.5rem; color:#fff; }
.form-card .sub{ color:var(--t-muted-d); font-size:.95rem; margin-top:.4rem; }
.field{ position:relative; margin-top:1.1rem; }
.field input,.field textarea,.field select{
  width:100%; padding:1.15rem 1rem .55rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:1rem; transition:.3s var(--ease); appearance:none;
}
.field textarea{ min-height:110px; resize:vertical; padding-top:1.4rem; }
.field select{ color:#fff; }
.field select option{ color:#0b2032; }
.field label{
  position:absolute; left:1rem; top:1rem; color:var(--t-muted-d); font-size:1rem;
  pointer-events:none; transition:.25s var(--ease); transform-origin:left;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--cyan); background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(86,204,242,.16); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field.filled label,.field select:focus + label{
  transform:translateY(-9px) scale(.74); color:var(--cyan);
}
.field .req{ color:var(--aqua); }
.form-card .btn{ width:100%; justify-content:center; margin-top:1.3rem; }
.form-note{ margin-top:1rem; font-size:.8rem; color:var(--t-muted-d); text-align:center; }
.form-success{
  display:none; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding:2rem 1rem;
}
.form-success .ok{ width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:var(--grad-water); color:#04101c; box-shadow:var(--glow); animation:pop .5s var(--ease-out); }
.form-success .ok svg{ width:34px; height:34px; }
.form-success h3{ color:#fff; }
@keyframes pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
body.sent .form-fields{ display:none; }
body.sent .form-success{ display:flex; }

/* ===================== footer ===================== */
.footer{ background:#040d17; color:var(--t-muted-d); padding-top:4.5rem; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer .brand{ margin-bottom:1.2rem; }
.footer__tag{ font-family:'Playfair Display',serif; font-size:1.3rem; color:#fff; line-height:1.3; max-width:24ch; }
.footer__col h3{ font-family:'Inter',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.footer__col a,.footer__col li{ display:block; color:var(--t-muted-d); padding:.32rem 0; transition:color .3s, transform .3s; }
.footer__col a:hover{ color:var(--cyan); transform:translateX(4px); }
.footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.8rem 0; font-size:.85rem; }
.footer__bottom .patent-line{ display:inline-flex; align-items:center; gap:.5rem; }
.footer__bottom .patent-line svg{ width:15px; height:15px; color:var(--champagne); }
.to-top{ display:inline-flex; align-items:center; gap:.5rem; color:var(--cyan); font-weight:600; }
.to-top svg{ width:16px; height:16px; }

/* ===================== floating CTA ===================== */
.float-cta{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:90;
  opacity:0; transform:translateY(20px) scale(.9); pointer-events:none;
  transition:.45s var(--ease);
}
.float-cta.show{ opacity:1; transform:none; pointer-events:auto; }

/* ===================== reveal animations ===================== */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); will-change:transform,opacity; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal].in{ transform:none; }

/* hero load sequence */
.hero [data-anim]{ opacity:0; transform:translateY(28px); }
body.loaded .hero [data-anim]{ animation:heroIn .9s var(--ease-out) forwards; animation-delay:calc(var(--d,0) * 1ms); }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ===================== responsive ===================== */
@media (max-width: 960px){
  .nav__links, .nav__cta .btn{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .nav__menu{
    position:fixed; inset:0; z-index:99; padding:6rem var(--pad) 2rem;
    background:rgba(6,18,31,.96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    display:flex; flex-direction:column; gap:.3rem;
    transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
  }
  body.menu-open .nav__menu{ transform:none; visibility:visible; }
  .nav__menu a{ color:#fff; font-family:'Playfair Display',serif; font-size:1.8rem; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav__menu .btn{ display:inline-flex; margin-top:1.5rem; align-self:flex-start; }

  .benefits__grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .patent .split .media{ order:-1; }
  .life__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:1fr 1fr; }
  .check-grid, .app-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .g-row{ flex-direction:column; }
  .g-row .media{ flex:none; }
  .cta__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .hero__card{ display:none; }
}
@media (max-width: 560px){
  :root{ --section-y:4.2rem; }
  .cap-grid{ grid-template-columns:1fr; }
  .product-grid,.check-grid,.why-grid,.app-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .bcard{ padding:1.8rem; }
  .hero__trust{ font-size:.8rem; }
}

/* ============== first-load "spot-free dry" intro ============== */
#intro{ position:fixed; inset:0; z-index:9999; pointer-events:none; animation:introOut .9s ease 2s forwards; }
.intro__frost{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(224,238,250,.20), rgba(196,220,240,.12));
  -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  animation:frostClear 1.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
.intro__spots{ position:absolute; inset:0; overflow:hidden; }
.spot{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), rgba(214,236,250,.42) 42%, rgba(168,205,232,.15) 70%, transparent 78%);
  box-shadow:inset 1px 1px 4px rgba(255,255,255,.6), inset -1px -2px 7px rgba(110,155,190,.28), 0 2px 6px rgba(80,120,160,.18);
  animation:spotDry 1.25s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes frostClear{ to{ -webkit-backdrop-filter:blur(0) saturate(1); backdrop-filter:blur(0) saturate(1); background:rgba(255,255,255,0); } }
@keyframes spotDry{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 55%{ opacity:1; } 100%{ transform:translate(-50%,-50%) scale(.04); opacity:0; } }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }
.no-intro #intro{ display:none !important; }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero [data-anim]{ opacity:1 !important; transform:none !important; }
  .bubbles,.hero__aurora,.cta__aurora{ display:none; }
  #intro{ display:none !important; }
}