/* ==========================================================================
   NOW! — PT Nano Oxywater Internasional
   --------------------------------------------------------------------------
   MENAMBAH SECTION BARU:
     <section class="section section--navy" id="nama">
       <div class="shell reveal"> ... </div>
     </section>
   Varian latar : --navy (utama) · --indigo (produk) · --deep (paling gelap)
   Varian jarak : --tight (rapat ke section sebelumnya) · --flush (tanpa padding)
   Kelas .reveal memberi animasi muncul saat masuk layar. Selesai — tidak
   ada nilai yang perlu diubah di tempat lain.
   ========================================================================== */

/* ---------- 1. TOKEN ---------- */
:root{
  /* warna */
  --navy-900:#05203F;   /* paling gelap — poster & kontak   */
  --navy-800:#072956;   /* latar utama                      */
  --navy-700:#2B3966;   /* section produk                   */
  --navy-600:#0A3164;   /* hover baris                      */
  --navy-500:#0D3468;   /* tipografi lapis belakang         */
  --poster-back:#517281; /* kata "Oxybubble" di poster -- abu gelap */
  --paper:#FBFCFD;
  --hero-bg:#FFFFFF;    /* latar hero -- putih */
  --amber-hero:#C77800; /* amber utk judul besar di latar terang */
  --hero-mark-a:#0A2A4A;
  --hero-mark-b:#082441;
  --paper-2:#F2F7FB;    /* bingkai foto produk              */
  --ink:#072956;
  --ink-soft:#3D5F8A;
  --ink-faint:#6E88AC;
  --cyan:#1F97C9;
  --cyan-text:#147BA6;   /* cyan lebih gelap utk teks di latar putih */
  --sky:#7FC6E8;
  --amber:#F9B02F;
  --amber-deep:#E08A00;
  --amber-lift:#FFC257;
  --amber-ink:#A35F00;  /* amber utk teks di latar terang -- 5.0:1 */
  --text:#FFFFFF;
  --text-1:#D6E2F0;
  --text-2:#A9B6D8;
  --text-3:#93AAC8;
  --text-4:#7C97BC;
  --text-5:#5F7CA0;
  --statement-off:#3C5F8E;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);

  /* ukuran & ritme */
  --shell:1560px;
  --gut:clamp(32px,4.5vw,84px);
  --pad-section:clamp(60px,11vh,70px);
  --pad-tight:clamp(60px,8vh,100px);
  --pad-bottom:clamp(60px,8vh,100px);
  --radius:14px;

  /* gerak */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.65s;
}

/* ---------- 2. DASAR ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;touch-action:auto}
html{scroll-behavior:smooth}
body{
  background:var(--navy-800);
  color:var(--text);
  font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior:auto;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:opacity .25s ease}
a:hover{opacity:.55}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

/* ---------- 3. RANGKA ---------- */
.section{padding:var(--pad-section) var(--gut) var(--pad-bottom);background:var(--navy-800)}
.section--navy{background:var(--navy-800)}
.section--indigo{background:var(--navy-700)}
.section--deep{background:var(--navy-900)}
.section--light{background:var(--paper);color:var(--ink)}
.section--light .section__head{border-color:rgba(7,41,86,.14)}
.section--light .feature h3{color:var(--ink)}
.section--light .feature p{color:var(--ink-soft)}
.section--light .assurance{border-color:rgba(7,41,86,.14);color:var(--ink-soft)}
.section--light .eyebrow{color:var(--cyan-text)}
.section--light ::selection{background:var(--navy-800);color:#fff}
.section--light :focus-visible{outline-color:var(--navy-800)}
.section--tight{padding-top:var(--pad-tight)}
.section--snug{padding-top:clamp(52px,7vh,88px);padding-bottom:clamp(48px,6vh,78px)}
.section--flush{padding:0}

.shell{max-width:var(--shell);margin:0 auto}
.shell--split{display:grid;grid-template-columns:minmax(180px,1fr) 3fr;gap:clamp(36px,4vw,72px)}

/* Section teknologi: pernyataan besar padat di kanan, penjelasan dan
   teknologi inti bertumpuk di kiri bawahnya. */
/* .tech{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,4.5vw,72px);align-items:start;
} */
/* Rata kiri di semua lebar. Aturan .statement umum rata KANAN; di sini
   tepi kirinya harus lurus dengan .tech__lede tepat di bawahnya --
   rata kanan membuat tepi kiri bergerigi dan keduanya tampak meleset. */
.tech .statement{max-width:none;text-align:left}
/* .tech__left{max-width:none}
.tech__left .figur{margin-bottom:clamp(26px,3.5vh,44px)}
.tech__right .figur{margin-top:clamp(28px,4vh,48px)} */

/* Section teknologi: heading "Teknologi Inti" di atas, lalu grid
   teks1/gambar1 sejajar, gambar2 melebar, teks2 melebar di bawah. */
.tech__intro{margin-bottom:clamp(34px,4.5vh,56px);text-align:center}
.tech__intro .eyebrow{display:block}
/* 1,5vw praktis tidak berpengaruh di layar sempit (cuma 5,9px di 390px)
   sehingga ukurannya mentok di nilai minimum. Dipakai 4vw supaya di HP
   ikut membesar, dengan batas atas 24px agar tidak menyaingi eyebrow.
   Jarak atas dirapatkan 14px -> 8px. */
.tech__intro .tech__core-list{
  margin-top:8px;font-size:clamp(30px,4vw,34px);
  line-height:1.4;letter-spacing:-.005em;color:var(--paper);
}

.tech__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "t1 g1"
    "g2 g2"
    "t2 t2";
  gap:clamp(28px,3.5vw,52px) clamp(34px,4.5vw,72px);
  align-items:start;
}
.tech__kata{grid-area:t1;align-self:center;container-type:inline-size}
.tech__statement{max-width:none}
/* Paragraf penjelas di bawah statement. Rata kanan-kiri supaya kedua
   tepinya lurus dan sisi kanannya segaris dengan statement di atasnya,
   yang memang rata kanan.

   TAPI hanya kalau kolomnya cukup lebar. Di bawah ~600px satu baris
   cuma memuat ~28-42 karakter, dan justify pada baris sependek itu
   merentangkan jarak antarkata jadi "sungai" putih. Biasanya ditolong
   pemenggalan kata, tapi Chrome tidak punya kamus pemenggalan bahasa
   Indonesia sehingga hyphens:auto tidak berpengaruh -- sudah dicoba.

   Patokannya lebar KOLOM, bukan lebar layar: kolom ini penuh di <=820px
   lalu terbelah dua di atasnya, jadi urutannya tidak searah dengan
   lebar layar. Peramban yang belum mendukung @container tetap dapat
   rata kiri yang aman. */
.tech__lede{
  margin:clamp(18px,2.4vh,28px) 0 0;text-align:left;
  font-size:19px;line-height:1.75;color:var(--text-1);text-wrap:pretty;
}
@container (min-width:600px){
  .tech__lede{text-align:justify;text-wrap:auto}
}
.tech__img-a{grid-area:g1;margin:0}
.tech__img-b{
  grid-area:g2;
  margin:0 auto;
  max-width:1200px;   /* atur sesuai selera, mis. 500px–700px */
  width:100%;
  justify-self:center;
}
.tech__desc{
  grid-area:t2;margin:0;
  font-size:19px;line-height:1.75;color:var(--text-1);
  text-align:center;hyphens:auto;
}

@media (max-width:820px){
  .tech__grid{
    grid-template-columns:1fr;
    grid-template-areas:"t1" "g1" "g2" "t2";
  }
  /* Di layar sempit paragraf ini jadi 8 baris. Rata tengah membuat
     tepi kirinya bergerigi sehingga mata kehilangan awal tiap baris --
     di desktop yang cuma 3 baris masih aman, jadi center dipertahankan. */
  .tech__desc{text-align:left}
}

/* Gambar penjelas: infografik padat, jadi diberi jalan untuk diperbesar */
.figur{position:relative;margin:0}
.figur img{width:100%;height:auto;display:block;border-radius:12px;cursor:zoom-in}
.figur figcaption{
  margin-top:12px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-4);
}
.figur::after{
  content:"Klik untuk memperbesar";
  position:absolute;right:12px;top:12px;
  font-size:11px;font-weight:600;letter-spacing:.07em;
  color:var(--ink);background:rgba(252,252,250,.88);
  border-radius:999px;padding:7px 13px;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
.figur:hover::after,.figur:focus-within::after{opacity:1}
/* .tech__desc{font-size:19px;line-height:1.75;color:var(--text-1);text-align:justify;hyphens:auto}
.tech__core{margin-top:clamp(30px,4vh,46px);padding-top:clamp(22px,2.6vh,32px);border-top:1px solid var(--line)}
.tech__core-list{margin-top:12px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.005em;color:var(--paper)} */

.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.section__head--center{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;border-bottom:0;padding-bottom:0;
}
.section__head--center .section__title{max-width:none}
.section__title--wide{
  font-size:clamp(19px,2.35vw,34px);line-height:1.2;text-wrap:nowrap;
  max-width:100%;overflow-wrap:normal;
}
@media (max-width:820px){ .section__title--wide{text-wrap:balance;font-size:clamp(20px,4.6vw,28px)} }
.section__title{font-size:clamp(22px,2.5vw,36px);font-weight:400;letter-spacing:-.025em;line-height:1.16;text-wrap:balance}

.eyebrow{font-size:22px;font-weight:600;letter-spacing:.13em;color:var(--sky)}
.eyebrow--sky{color:var(--sky)}
.eyebrow-block{font-size:13px;font-weight:600;letter-spacing:.13em;color:var(--text-4)}
.eyebrow-block__sub{margin-top:22px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.005em;color:var(--text-1)}

.display{font-size:clamp(34px,4.6vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.03em;max-width:14ch}
.lede{margin-top:26px;max-width:640px;font-size:22px;line-height:1.7;color:var(--text-2)}

/* ---------- 4. NAV ---------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
  padding:30px var(--gut);font-size:16px;font-weight:400;
}
.nav__logo{flex:0 0 auto}
.nav__logo img{height:50px;width:auto}
.nav__menu{display:flex;justify-self:center;align-items:center;min-width:0}
.nav__group{display:flex;flex-wrap:wrap;gap:14px 34px;min-width:0}
.nav__group--center{justify-content:center}
.nav__meta{
  justify-self:end;font-size:13px;font-weight:600;letter-spacing:.09em;
  white-space:nowrap;color:var(--cyan-text);
}
.nav__toggle{display:none}

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;height:100vh;min-height:620px;overflow:hidden;
  background:var(--hero-bg);color:var(--ink);
}

/* Rekaman air mengalir di kaca. Ditaruh di BELAKANG produk supaya
   mesinnya tidak ikut memutih, dan dipadu screen 20% agar hanya
   sorotan airnya yang muncul di atas navy -- teks tetap terbaca. */
/* Di latar putih, screen/overlay tak terlihat. multiply membuat butiran
   tampil sebagai bayangan lembut, jadi teksturnya muncul tanpa
   menggelapkan halaman. */
.hero__glass{
  position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
  width:100%;height:100%;object-fit:cover;
  opacity:.35;mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){ .hero__glass{display:none} }
.hero__stage{position:absolute;inset:0;z-index:2}
.hero__img{
  filter:drop-shadow(0 18px 34px rgba(7,41,86,.22));
  position:absolute;bottom:0;left:64%;
  width:clamp(2300px,26vw,400px);height:80vh;
  object-fit:contain;object-position:50% 100%;
  transform:translateX(calc(-50% - 90px));opacity:0;
  transition:transform .85s var(--ease),opacity .85s ease;
  will-change:transform,opacity;
}
.hero__img.is-current{transform:translateX(-50%);opacity:1}
.hero__img.is-out{transform:translateX(calc(-50% + 90px));opacity:0}
.hero__img.no-anim{transition:none}

.hero__foot{
  position:absolute;left:var(--gut);right:var(--gut);
  top: 50%;                    /* Memindahkan elemen 50% dari atas */
  transform: translateY(-50%); /* Menggeser titik tengah elemen agar pas di tengah */
  bottom: auto;
  z-index:5;
  display:flex;
  align-items:center;justify-content:space-between;gap:24px;
}
.hero__copy{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,24px);max-width:min(58vw,760px);align-items: flex-start;text-align: left;}
.hero__kicker{font-size:clamp(16px,1.75vw,23px);line-height:1.5;color:var(--ink-soft);white-space:nowrap}
.hero__kicker strong{display:block;font-size:clamp(26px,3vw,42px);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
.hero__sorot{
  display:block;margin-top:0;font-style:normal;font-weight:600;
  font-size:clamp(18px,2.1vw,29px);line-height:1.3;letter-spacing:-.01em;
  color:var(--navy-800);
  white-space:normal;          /* induknya nowrap -- kalimat ini harus boleh membungkus */
  max-width:22ch;
}
.hero__title{font-size:clamp(42px,5.6vw,86px);font-weight:500;line-height:.96;letter-spacing:-.035em}
.hero__title em{font-style:normal;color:var(--amber-hero)}
.hero__title .mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .mask>span{display:block}
.hero__scroll{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:500;letter-spacing:.14em;opacity:.55;white-space:nowrap}
.hero__scroll::after{content:"";width:44px;height:1px;background:currentColor;transform:scaleX(1)}

/* ---------- 6. STATEMENT ---------- */
.statement{
  text-align:right;font-size:clamp(24px,3.1vw,48px);font-weight:400;
  line-height:1.18;letter-spacing:-.022em;color:var(--text);text-wrap:pretty;
}
.tech-foot{margin-top:clamp(36px,5vh,64px)}
.tech-foot__text{max-width:640px;font-size:19.0px;line-height:1.75;color:var(--text-1)}
.tech-foot__text--right{margin-left:auto;text-align:right;text-wrap:pretty}
.stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,64px);align-items:flex-start;margin-top:clamp(28px,4vh,42px)}
.stat__num{
  font-size:clamp(26px,2.9vw,42px);font-weight:500;letter-spacing:-.025em;
  color:var(--sky);font-variant-numeric:tabular-nums;
}
.stat__unit{font-size:.42em;font-weight:400;margin-left:.34em;letter-spacing:.04em;opacity:.8}

.stat__label{margin-top:8px;font-size:13.5px;letter-spacing:.11em;color:var(--text-3)}

/* ---------- 7. NANO OXY BUBBLE ---------- */
.bubble{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.15fr); /* .92fr → 1.15fr, kolom video dilebarkan */
  align-items:center;gap:clamp(24px,3.5vw,56px);
}
.bubble__copy{max-width:640px}
.bubble__title{margin-top:18px;font-size:clamp(28px,3.4vw,50px);font-weight:400;line-height:1.08;letter-spacing:-.028em}
.bubble__text{margin-top:20px;font-size:18.5px;line-height:1.75;color:var(--text-2);max-width:52ch}
/* Dulu min(750px,50vw): 50vw tidak tahu selebar apa jalur gridnya, jadi
   videonya menembus keluar 17-23px di 1101-1440px. width:100% membuatnya
   pas mengisi jalur, batas 750px tetap menahan di layar sangat lebar. */
.bubble__anim{justify-self:center;width:100%;max-width:750px}
.bubble__video{
  width:100%;height:auto;display:block;border-radius:14px;
  background:var(--navy-600);aspect-ratio:720/406;object-fit:cover;
}

/* ---------- 8. SHOWROOM PRODUK ---------- */
.showroom{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);margin-top:clamp(30px,4vh,52px);
}
.showroom__stage{
  position:relative;background:var(--paper-2);border-radius:var(--radius);
  overflow:hidden;min-height:clamp(420px,58vh,600px);
}
.showroom__slide{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,44px);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.showroom__slide.is-current{opacity:1;visibility:visible;transition:opacity .45s ease}
.showroom__slide::before{
  content:attr(data-no);position:absolute;left:4%;top:2%;
  font-size:clamp(120px,13vw,220px);font-weight:600;letter-spacing:-.05em;
  line-height:1;color:rgba(7,41,86,.06);
}
.showroom__slide img{
  position:relative;max-height:86%;max-width:88%;width:auto;height:auto;
  object-fit:contain;transform:translateY(14px);transition:transform .55s var(--ease);
}
.showroom__slide.is-current img{transform:none}
.showroom__slide figcaption{
  position:absolute;left:18px;bottom:14px;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);opacity:0;transform:translateY(6px);
  transition:opacity .4s ease .15s,transform .4s ease .15s;
}
.showroom__slide.is-current figcaption{opacity:1;transform:none}

.showroom__list{display:flex;flex-direction:column;justify-content:center}
.showroom__item{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(18px,2.6vh,26px) 6px;border-top:1px solid rgba(7,41,86,.14);
  transition:background .3s ease,padding-inline .3s ease;
}
.showroom__item:last-child{border-bottom:1px solid rgba(7,41,86,.14)}
.showroom__item:hover{opacity:1;background:var(--paper-2);padding-inline:16px}
.showroom__txt{display:block;min-width:0}
.showroom__no{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--ink-faint);transition:color .3s ease}
.showroom__item.is-current .showroom__no{color:var(--amber-deep)}
.showroom__name{display:block;margin-top:6px;font-size:clamp(18px,2.1vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.showroom__meta{display:block;margin-top:7px;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
.showroom__arrow{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(7,41,86,.2);display:grid;place-items:center;
  font-size:15px;color:var(--ink-soft);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.showroom__item:hover .showroom__arrow{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.showroom__hint{margin-top:clamp(22px,3vh,36px);font-size:16.0px;letter-spacing:.06em;color:var(--ink-faint)}
.showroom__hint--sentuh{display:none}

/* ---------- 9. POSTER ---------- */
/* Video gelembung sebagai latar. mix-blend-mode:screen hanya MENAMBAH
   cahaya, jadi navy-900 di bawahnya tetap jadi warna dasar poster. */
.poster__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;
  opacity:.16;mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){ .poster__bg{display:none} }

.poster{
  position:relative;height:104vh;min-height:600px;overflow:hidden;
  background:var(--navy-900);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.poster__type{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.poster__row{
  position:relative;left:-6vw;will-change:transform;
  white-space:nowrap;font-size:clamp(64px,21vw,400px);font-weight:500;
  letter-spacing:-.05em;line-height:.85;color:var(--text);
}
.poster__row--back{left:6vw;font-size:clamp(56px,18.5vw,352px);color:var(--poster-back);margin-top:-.05em}
.poster__stage{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,3vw,52px);padding:0 var(--gut) 15vh;
  will-change:transform;
}
.poster__stage img{
  height:auto;width:auto;max-height:70vh;min-height:45vh;max-width:20vw;object-fit:contain;
  flex-shrink:0;
}
/* menjaga aspek rasio dan lebar konsisten per produk */
.poster__stage img:nth-child(1){aspect-ratio:661/1400;max-width:12vw}   /* vending */
.poster__stage img:nth-child(2){aspect-ratio:583/1400;max-width:11vw}   /* dispenser */
.poster__stage img:nth-child(3){aspect-ratio:1100/1215;max-width:20vw}  /* faucet, paling lebar */
.poster__stage img:nth-child(4){aspect-ratio:276/977;max-width:8vw}     /* home appliance, paling sempit */
.poster__logo{position:absolute;top:16%;left:50%;transform:translateX(-50%);z-index:4;height:34px;width:auto}
.poster__cap{
  position:absolute;bottom:44px;left:0;right:0;z-index:4;text-align:center;
  font-size:17.5px;line-height:1.7;color:#A9BFDA;
}

/* ---------- 10. MANFAAT ---------- */
.manfaat__head{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(280px,.98fr);
  gap:clamp(28px,4vw,72px);align-items:center;
}
.manfaat__copy .lede{max-width:44ch}
.manfaat__shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);align-items:start}
.shot{margin:0;overflow:hidden;border-radius:10px;background:var(--navy-600);aspect-ratio:4/5}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--a{margin-top:clamp(14px,2.4vw,34px)}
.shot--b{margin-bottom:clamp(14px,2.4vw,34px)}

.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,6vw,110px);margin-top:clamp(46px,6vh,80px)}
.benefit{position:relative;display:flex;gap:clamp(18px,2vw,32px);padding:clamp(28px,3.6vh,44px) 0}
.benefit::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);transform:scaleX(1);transform-origin:left;
}
.benefit:nth-last-child(-n+2)::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}
.benefit__no{flex:0 0 auto;font-size:clamp(18px,1.8vw,26px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--cyan)}
.benefit p{font-size:clamp(18.5px,1.4vw,21px);line-height:1.62;color:var(--text-1);text-wrap:pretty}

/* ---------- 11. FITUR ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,52px) clamp(24px,3vw,44px);margin-top:clamp(32px,4vh,52px)}
.feature__shot{
  margin:0 0 clamp(14px,1.6vw,20px);overflow:hidden;border-radius:10px;
  background:var(--paper-2);aspect-ratio:4/3;
}
.feature__shot img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .8s var(--ease);
}
.feature:hover .feature__shot img{transform:scale(1.07)}
.feature h3{font-size:15px;font-weight:600;letter-spacing:.06em}
.feature p{margin-top:10px;font-size:20px;line-height:1.72;color:var(--text-3)}
.assurance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3.4vw,48px);
  margin-top:clamp(48px,6vh,76px);padding-top:clamp(34px,4vh,48px);
  border-top:1px solid var(--line);
}
.assurance li{
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.assurance li img{height:56px;width:auto}
.assurance li span{font-size:12.5px;font-weight:600;letter-spacing:.09em;line-height:1.6;color:var(--text-4)}
.section--light .assurance li span{color:var(--ink-soft)}

/* ---------- 12a. SLIDESHOW PENERAPAN ---------- */
.show{position:relative;margin-top:clamp(30px,4vh,52px)}
.show__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  cursor:grab;
  /* JANGAN pakai touch-action:pan-y -- itu menyuruh peramban hanya
     menangani gerakan VERTIKAL, sehingga sapuan mendatar di layar
     sentuh tidak pernah sampai ke scroll. Biarkan default (auto). */
}
.show__track.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.show__track.is-drag *{pointer-events:none}
.show__track::-webkit-scrollbar{display:none}
/* Satu slide penuh: foto di kiri, keterangan di kanan. */
.slide{
  scroll-snap-align:center;scroll-snap-stop:always;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,52px);align-items:center;padding:0 2px;
}
.slide img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;background:var(--navy-600);
  -webkit-user-drag:none;user-select:none;
}
.slide__over{color:var(--paper)}
.slide__tempat{font-size:clamp(50px,3.6vw,1000px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.slide__unit{margin-top:14px;font-size:20px;font-weight:600;letter-spacing:.09em;color:var(--sky)}
.slide__desc{margin-top:20px;font-size:19px;line-height:1.72;color:var(--text-2)}

/* titik penanda */
.show__dots{display:flex;justify-content:center;gap:10px;margin-top:clamp(22px,3vh,32px)}
.show__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .3s ease,transform .3s ease;
}
.show__dot:hover{background:rgba(255,255,255,.55)}
.show__dot.is-current{background:var(--amber);transform:scale(1.35)}
.show__nav{
  position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;
  border:1px solid var(--line-strong);border-radius:50%;
  background:rgba(4,24,47,.82);color:var(--paper);cursor:pointer;
  transition:background .3s ease,border-color .3s ease,opacity .3s ease;
}
.show__nav:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.show__nav[disabled]{opacity:.25;cursor:default}
.show__nav::before{
  content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
}
.show__nav--prev{left:-22px}
.show__nav--prev::before{transform:translate(-35%,-50%) rotate(135deg)}
.show__nav--next{right:-22px}
.show__nav--next::before{transform:translate(-65%,-50%) rotate(-45deg)}
.show__hint{margin-top:14px;text-align:center;font-size:14px;letter-spacing:.04em;color:var(--text-4)}

/* ---------- 12b. PERTANYAAN UMUM ---------- */
.faqs{margin-top:clamp(30px,4vh,52px)}
.faq{
  position:relative;width:100%;appearance:none;border:0;background:none;
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.8vh,32px) 0;
  transition:background .3s ease,padding-inline .3s ease;
}
.faq::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line-strong);transform:scaleX(1);transform-origin:left;
}
.faqs li:last-child .faq__panel::after{
  content:"";display:block;height:1px;background:var(--line-strong);
}
.faq:hover{opacity:1;background:var(--navy-600);padding-inline:20px}
.faq__txt{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,26px);min-width:0}
.faq__no{flex:0 0 auto;font-size:13px;font-weight:600;letter-spacing:.11em;color:var(--cyan)}
.faq__q{font-size:clamp(16px,1.8vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.4}
.faq__mark{
  flex:0 0 auto;position:relative;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);color:#CFE0F0;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .45s var(--ease);
}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);
}
.faq__mark::before{width:14px;height:1.5px}
.faq__mark::after{width:1.5px;height:14px}
.faq:hover .faq__mark{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.faq[aria-expanded="true"] .faq__mark{transform:rotate(135deg);background:var(--amber);color:var(--ink);border-color:var(--amber)}
.faq__panel{
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .5s var(--ease),visibility 0s linear .5s;
}
.faq__panel.is-open{max-height:460px;visibility:visible;transition:max-height .5s var(--ease)}
.faq__a{
  max-width:76ch;padding:2px 0 clamp(24px,3vh,36px) clamp(30px,3.6vw,58px);
  font-size:17px;line-height:1.8;color:var(--text-2);
}

/* ---------- 12c. TOMBOL SOSIAL ---------- */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.social__btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:14px;font-weight:500;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.social__btn:hover{opacity:1;background:var(--amber);border-color:var(--amber);color:var(--ink)}

/* ---------- 13. KONTAK ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:999px;
  background:var(--amber);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.03em;
  transition:background .3s ease;
}
.btn:hover{opacity:1;background:var(--amber-lift)}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--line-strong)}
.btn--ghost:hover{opacity:1;background:rgba(255,255,255,.08)}
.colophon{
  margin-top:clamp(40px,5vh,64px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  font-size:12.5px;letter-spacing:.12em;color:var(--text-5);
}

/* ---------- 14. GERAK ---------- */
@keyframes markSwayA{from{transform:translateX(-4.5vw)}to{transform:translateX(5.5vw)}}
@keyframes markSwayB{from{transform:translateX(4.5vw)}to{transform:translateX(-5.5vw)}}
@keyframes lightUp{from{color:var(--statement-off)}to{color:var(--text)}}
@keyframes cyanUp{from{color:var(--statement-off)}to{color:var(--cyan)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 -2% 0 0);opacity:1}}

@keyframes maskUp{from{transform:translateY(112%)}to{transform:none}}
@keyframes riseSoft{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cueX{
  0%{transform:scaleX(0);transform-origin:left}
  45%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
@media (prefers-reduced-motion:no-preference){
  .is-ready .hero__title .mask>span{animation:maskUp .9s cubic-bezier(.16,.84,.3,1) 1s both}
  .is-ready .hero__title .mask:nth-child(2)>span{animation-delay:1.12s}
  .is-ready .hero__kicker{animation:riseSoft .8s ease .55s both}
  .is-ready .hero__stage{animation:riseSoft 1s cubic-bezier(.16,.84,.3,1) .2s both}
  .is-ready .hero__scroll::after{animation:cueX 2.4s ease-in-out 2s infinite}
}

/* Animasi berbasis scroll — hanya jika browser mendukung. Tanpa dukungan,
   halaman tampil normal dan terbaca penuh (bukan tersangkut di keyframe akhir). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .statement__w{animation:lightUp linear both;animation-timeline:view()}
    .statement__w:nth-child(1){animation-range:entry 12% cover 32%}
    .statement__w:nth-child(2){animation-range:entry 22% cover 42%}
    .statement__w:nth-child(3){animation-range:entry 32% cover 52%}
    .statement__w:nth-child(4){animation-range:entry 42% cover 62%}
    .reveal{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 5% entry 42%}
    .section__title,.display,.bubble__title{animation:wipeIn linear both;animation-timeline:view();animation-range:entry 8% entry 38%}
    .benefit,.faq,.slide{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    .faq::before,.benefit::before{animation:growX linear both;animation-timeline:view();animation-range:entry 0% entry 26%}
    .benefit__no{animation:cyanUp linear both;animation-timeline:view();animation-range:entry 4% entry 34%}
  }
}

/* Cadangan untuk browser tanpa dukungan (mis. Firefox) — IntersectionObserver */
.no-sdt .reveal{opacity:0;transform:translateY(44px)}
.no-sdt .reveal.is-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s var(--ease)}
.no-sdt .statement__w{color:var(--statement-off);transition:color .6s ease}
.no-sdt .js-statement.is-in .statement__w{color:var(--text)}
.no-sdt .js-statement.is-in .statement__w:nth-child(2){transition-delay:.12s}
.no-sdt .js-statement.is-in .statement__w:nth-child(3){transition-delay:.24s}
.no-sdt .js-statement.is-in .statement__w:nth-child(4){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .no-sdt .reveal{opacity:1;transform:none}
  .no-sdt .statement__w{color:var(--text)}
}

/* ---------- 15. RESPONSIF ---------- */
@media (max-width:1100px){
  .shell--split{grid-template-columns:1fr;gap:28px}
  .statement{text-align:left}
  .tech-foot__text--right{text-align:left;margin-left:0}
  .features{grid-template-columns:repeat(2,1fr)}
  .manfaat__head{grid-template-columns:1fr;gap:30px}
  .tech{grid-template-columns:1fr;gap:30px}
}

@media (max-width:900px){
  :root{--gut:20px}

  /* Section Nano Oxy Bubble memakai skala sendiri yang menyimpang dari
     section lain di layar sempit. Tiga sumbernya:
       1) .section--snug menulis padding sendiri dengan angka tetap,
          jadi tidak ikut waktu --pad-section dibatasi 70px -- hasilnya
          59/51px sementara section lain 70/68px.
       2) .bubble__title punya kurva sendiri (min 28px) sedangkan semua
          <h2> lain memakai .section__title (min 22px).
       3) .bubble__anim disisipkan 86vw sehingga videonya 15px lebih
          sempit dari isi, padahal media di section lain selebar isi.
     Ketiganya disamakan HANYA di <=900px; di desktop skala aslinya
     tetap. Semua kelas ini cuma dipakai section tersebut. */
  .section--snug{padding-top:var(--pad-section);padding-bottom:var(--pad-bottom)}
  .bubble__title{font-size:clamp(26px,2.5vw,48px)}
  .bubble__text{font-size:19px}
  /* Menumpuk di <=900, bukan <=1100. Sebelumnya section ini sudah jadi
     satu kolom sejak 1100px padahal Produk, Fitur, dan Hipoksia masih
     dua kolom sampai 900px -- di rentang 900-1100 hanya section ini
     yang tampil versi HP. max-width:none supaya videonya selebar isi,
     sama seperti media di section lain saat menumpuk. */
  .bubble{grid-template-columns:1fr}
  .bubble__anim{max-width:none}

  /* nav jadi menu lipat */
  .nav{display:flex;flex-wrap:wrap;padding:18px var(--gut)}
  .nav__toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:38px;height:38px;border:0;background:none;cursor:pointer;padding:0;
  }
  .nav__toggle span{display:block;height:1.5px;width:20px;background:var(--ink);margin-inline:auto;transition:transform .3s ease,opacity .3s ease}
  .nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav__menu{
    flex:0 0 100%;order:3;margin:0;justify-self:stretch;
    flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  .nav__menu.is-open{max-height:340px}
  .nav__group,.nav__group--center{flex-direction:column;gap:0;width:100%;justify-content:flex-start}
  .nav__group:last-child{margin-left:0}
  .nav__group li a{display:block;padding:11px 0;font-size:15px;border-bottom:1px solid rgba(7,41,86,.12)}
  .nav__meta{display:none}

  /* Hero di HP: gambar lebih dulu (urutan DOM), teks di bawahnya.
     Dulu jarak besar keliru ditaruh di ATAS blok teks -- akibatnya
     gambar tampak menggantung tinggi dan teks mentok ke dasar layar.
     Sekarang jaraknya pindah ke bawah teks, dan gambar ditengahkan
     lewat object-position (sedikit di bawah tengah, memberi ruang
     untuk navbar yang melayang di atasnya). */
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
  .hero__stage{
    position:relative;inset:auto;flex:1 1 auto;
    min-height:48svh;margin:0;
  }
  .hero__img{
    left:50%;top:calc(76px + 2.5vh);bottom:8vh;height:auto;
    width:auto;max-width:60vw;
    object-fit:contain;object-position:10% 10%;
  }
  /* Faucet hampir bujur sangkar, jadi lebarnya yang mentok (max-width di
     atas) -- itulah tuas ukurannya. Tiga gambar lain jauh lebih jangkung
     (rasio ~1:2,4 sampai 1:2,8) sehingga kotaknya ikut memanjang dari
     top sampai bottom -- hasilnya kelewat besar dan turun menabrak teks.
     Ketiganya dikunci tingginya sendiri (bottom:auto) dan didorong
     lebih ke atas. */
  .hero__img[src*="prod-home"],
  .hero__img[src*="prod-tapwater"],
  .hero__img[src*="prod-vending"]{
    top:calc(76px + 1vh);bottom:auto;
    height:clamp(253px,50.6svh,452px);
    width:auto;max-width:59vw;
    object-position:50% 0;
  }
  .hero__foot{
    position:absolute;left:var(--gut);right:var(--gut);
    bottom:clamp(28px,5vh,56px);   /* margin kecil dari tepi bawah, atur sesuai selera */
    top:auto;transform:none;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero__copy{
    display:flex;flex-direction:column;gap:clamp(14px,2.2vh,24px);
    max-width:min(58vw,760px);
    align-items:center;text-align:center;
  }
  .hero__kicker{font-size:clamp(16px,1.75vw,23px);line-height:1.5;color:var(--ink-soft);white-space:nowrap}
  .hero__kicker strong{display:block;font-size:clamp(26px,3vw,42px);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
  .hero__sorot{
    display:block;margin-top:0;font-style:normal;font-weight:600;
    font-size:clamp(18px,2.1vw,29px);line-height:1.3;letter-spacing:-.01em;
    color:var(--navy-800);
    white-space:normal;
    max-width:22ch;
  }
  .hero__sorot{font-size:min(5.2vw,26px);max-width:none}
  /* Batas 58vw dari aturan desktop (agar teks tak menabrak produk)
     ikut berlaku di HP dan MEMOTONG judul. Dibatalkan di sini. */
  .hero__copy{max-width:none;width:100%}
  /* tiap frasa dijaga satu baris; ukuran dihitung dari lebar sebenarnya
     "KAYA KEHIDUPAN." pada Montserrat = 9,19em setelah letter-spacing */
  .hero__title{font-size:min(8.4vw,54px)}
  .hero__title .mask>span{white-space:nowrap}
  .hero__scroll{
    position:absolute;right:var(--gut);bottom:clamp(28px,5vh,56px);
    display:flex;align-items:center;gap:10px;font-size:10px;font-weight:500;letter-spacing:.14em;opacity:.55;white-space:nowrap;
  }

  /* showroom jadi tumpukan: panggung di atas, daftar di bawah */
  .showroom{grid-template-columns:1fr;gap:20px}
  .showroom__stage{min-height:46vh}
  .showroom__slide::before{font-size:clamp(90px,24vw,140px)}
  .showroom__arrow{width:40px;height:40px;font-size:13px}
  /* hover tidak ada di layar sentuh: pratinjau diputar sendiri oleh JS,
     jadi petunjuk "arahkan kursor" diganti yang sesuai */
  .showroom__hint--kursor{display:none}
  .showroom__hint--sentuh{display:inline}

  /* sisanya */
  .benefits{grid-template-columns:1fr}
  .benefit:nth-last-child(-n+2)::after{content:none}
  .benefit:last-child::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}
  .features{grid-template-columns:1fr}
  .manfaat__head{grid-template-columns:1fr;gap:24px}
  .shot--a,.shot--b{margin:0}
  .shot{aspect-ratio:4/3}
  /* empat model berjajar -> harus muat di layar sempit.
     min-height:40vh dulu menggelembungkan KOTAK tiap gambar sampai ~300px
     padahal isinya cuma ~130px, jadi produknya mengambang di tengah kotak:
     terlihat kecil, alasnya tidak rata satu sama lain, dan menggantung
     jauh di atas keterangan. Di HP batas tinggi dilepas -- ukuran murni
     ditentukan lebar, kotak jadi sepas gambar, dan align-items:flex-end
     merapikan alasnya tepat di atas keterangan.
     Lebar tiap produk = nilai desktop x 1,7. Selot dan padding samping
     dipangkas supaya empat produk yang membesar tetap muat di layar
     sempit -- flex-shrink:0, kalau kelebihan akan terpotong. */
  /* Section tadinya 104vh / min 600px, padahal isinya -- gambar, logo,
     keterangan -- semuanya ditentukan LEBAR layar, bukan tinggi. Sisanya
     jadi lahan kosong (~270px di atas). Tingginya sekarang sepas isi:
       48,2vw  gambar tertinggi (home appliance, 13,6vw x 977/276)
     + 195px   alas keterangan: 44 jarak dasar + 119 teks + 32 sela
     + 120px   ruang atas: 46 margin + 34 logo + 40 sela ke gambar
     Karena alas dan ruang atas tetap dalam px, gambar selalu mulai 120px
     dari puncak section berapa pun lebar layarnya. Logo ikut dipatok px:
     top:16% dulu ikut mengecil dan menempel ke gambar. */
  .poster{height:calc(48.2vw + 315px);min-height:0}
  .poster__logo{top:46px}
  /* tinggi section tidak lagi berbasis vh, jadi alasnya cukup px tetap */
  .poster__stage{gap:2px;padding-inline:10px;padding-bottom:195px}
  .poster__stage img{max-height:none;min-height:0}
  .poster__stage img:nth-child(1){max-width:20.4vw}  /* vending */
  .poster__stage img:nth-child(2){max-width:18.7vw}  /* dispenser */
  .poster__stage img:nth-child(3){max-width:34vw}    /* faucet */
  .poster__stage img:nth-child(4){max-width:13.6vw}  /* home appliance */
  /* aspek rasio sudah di-set di desktop, tidak perlu override di mobile */
  .poster__cap{padding-inline:var(--gut)}
  .faq__mark{width:38px;height:38px}
  .show__nav{display:none}
  .slide{grid-template-columns:1fr;gap:16px;align-content:start}
  .slide__desc{margin-top:12px;font-size:17px}
  /* Keterangan pindah ke BAWAH foto. Sebelumnya overlay dibuka penuh
     dan menutupi seluruh gambar di layar sempit. */
  .slide{aspect-ratio:auto;background:none;overflow:visible}
  .slide img{aspect-ratio:4/3;border-radius:12px;object-fit:cover}
  .slide__over{
    position:relative;inset:auto;transform:none;
    background:none;padding:14px 2px 0;
  }
  .slide__desc{margin-top:10px}
  .contact{gap:36px}
}

/* Di bawah 340px keterangan poster pecah jadi 5 baris (149px), bukan 4.
   Alas panggung dan tinggi section sama-sama ditambah satu baris (30px)
   supaya sela ke keterangan tetap 32px dan ruang atas tetap 120px. */
@media (max-width:339px){
  .poster{height:calc(48.2vw + 345px)}
  .poster__stage{padding-bottom:225px}
}

/* ---------- 16. TOPBAR TETAP ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
  padding:18px var(--gut);
  background:rgba(5,32,63,.92);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .4s var(--ease);
}
@supports (backdrop-filter:blur(12px)){
  .topbar{background:rgba(5,32,63,.72);backdrop-filter:blur(12px)}
}
.topbar.is-shown{transform:none}
.topbar__logo img{height:42px;width:auto}
.topbar__nav{display:flex;justify-self:center;gap:34px;font-size:15.5px}
.topbar__nav a{opacity:.72}
.topbar__nav a:hover{opacity:1}
.topbar__cta{
  justify-self:end;padding:12px 24px;border-radius:999px;
  background:var(--amber);color:var(--ink);
  font-size:14px;font-weight:600;letter-spacing:.03em;
  transition:background .3s ease;
}
.topbar__cta:hover{opacity:1;background:var(--amber-lift)}

/* ---------- 17. FOOTER ---------- */
.footer{
  display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(200px,1fr) minmax(180px,.9fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
/* Dua logo sebaris. Lebar kolom brand tidak searah dengan lebar layar
   (grid 3 kolom di atas 900px, satu kolom penuh di bawahnya), jadi
   patokannya lebar KOLOM lewat container query, bukan media query.
   Di kolom sempit lencana mengecil supaya tetap muat bersebelahan;
   flex-wrap tinggal jadi pengaman terakhir di layar sangat sempit. */
.footer__brand{container-type:inline-size}
.footer__logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer__logo{height:40px;width:auto}
/* Lebar lencana = sisa ruang kolom setelah dipotong logo NOW! (135px)
   + selot (14px) + kelegaan (6px) = 155px. 100cqw itu lebar kolom brand,
   bukan lebar layar -- kolom ini paling sempit justru DI ATAS 900px
   (268px, saat grid masih tiga kolom), bukan di HP. Dibatasi 203px agar
   tidak melampaui ukuran aslinya, dan 110px agar tetap terbaca; di bawah
   itu flex-wrap menurunkannya ke baris berikutnya. Tingginya mengikuti
   sendiri dari rasio pada atribut width/height gambar. */
.footer__powered-logo{
  display:block;height:auto;
  width:clamp(110px, calc(100cqw - 155px), 203px);
}
.footer__tag{margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.01em}
/* Lencana "Powered by Nanotechnology" + klaimnya, mengisi ruang kosong
   di bawah tagline pada kolom brand. Ukurannya sengaja di bawah logo
   NOW! (44px) supaya tidak menyaingi merek utama. */
.footer__powered-txt{
  margin-top:14px;font-size:11.5px;line-height:1.85;
  letter-spacing:.1em;color:var(--ink-soft);
}
.footer__tag span{color:var(--amber)}
.footer__addr{font-size:17.5px;line-height:1.85;color:var(--text-3)}
/* display:contents membuat pembungkus ini TIDAK ADA artinya di desktop:
   .footer__contact tetap jadi item grid langsung dengan justify-self:end
   persis seperti sebelumnya, jadi tampilan desktop tidak berubah sama
   sekali. Pembungkusnya baru "hidup" jadi flex di <=900px. */
.footer__hubungi{display:contents}
.footer__co-logo{display:none}
.footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-self:end}
.footer__link{font-size:18.0px;font-weight:500;border-bottom:1px solid var(--line-strong);padding-bottom:3px}
.footer__link:hover{opacity:1;border-color:var(--amber);color:var(--amber)}
.colophon img{height:80px;width:auto;opacity:.9}
/* Blok afiliasi induk perusahaan. Logonya sengaja lebih kecil dari
   logo perusahaan sendiri di sebelahnya supaya hierarkinya jelas:
   ini keterangan keanggotaan, bukan pemilik halaman. */
.colophon__member{display:flex;align-items:center;gap:12px;margin:0}
.colophon__member img{height:46px;width:auto;display:block;flex:0 0 auto}
/* Nama PT ditulis sebagai teks di sebelah kanan logo, dua baris.
   Jarak antarhurufnya dilonggarkan lebih sedikit daripada baris hak
   cipta -- dengan .12em bawaan colophon, nama sepanjang ini tidak muat
   di layar 390px. */
.colophon__member-txt{letter-spacing:.04em;line-height:1.55}
.colophon__member-txt strong{display:block;font-weight:600;color:var(--ink)}

/* ---------- 18. WHATSAPP MENGAMBANG ---------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:45;
  width:54px;height:54px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:#25D366;color:#FFFFFF;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transform:scale(0);transition:transform .35s var(--ease);
}
.wa-float.is-shown{transform:none}
.wa-float:hover{opacity:1}

@media (max-width:900px){
  .topbar{display:flex;gap:14px;padding:12px var(--gut)}
  .topbar__nav{display:none}
  .topbar__cta{margin-left:auto;padding:9px 16px;font-size:11px}
  .footer{grid-template-columns:1fr;gap:30px}
  .footer__contact{justify-self:start}
  .hero__kicker{white-space:normal;font-size:min(4.4vw,21px)}
  .hero__kicker strong{font-size:min(6.8vw,36px);white-space:nowrap}
  .wa-float{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .topbar,.wa-float{transition:none}
}

/* ---------- 19. HALAMAN DETAIL PRODUK ---------- */
.subnav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gut);background:var(--paper);
  border-bottom:1px solid rgba(7,41,86,.1);
}
.subnav a{color:var(--ink)}
.subnav__back{font-size:14.5px}
.subnav__logo img{height:26px;width:auto}
.subnav__cta{
  font-size:12px;font-weight:600;letter-spacing:.03em;
  padding:9px 18px;border-radius:999px;background:var(--amber);color:var(--ink);
  transition:background .3s ease;
}
.subnav__cta:hover{opacity:1;background:var(--amber-lift)}

.phero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.phero__title{margin-top:14px;font-size:clamp(30px,3.8vw,56px);font-weight:400;letter-spacing:-.03em;line-height:1.04}
.phero__facts{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);margin:26px 0 30px}
.fact__num{display:block;font-size:clamp(20px,2vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--cyan-text)}
.fact__label{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.11em;color:var(--ink-faint)}
.phero__stage{
  margin:0;background:var(--paper-2);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(360px,56vh,560px);padding:clamp(18px,3vw,40px);
}
.phero__stage img{max-height:clamp(320px,50vh,520px);max-width:100%;width:auto;object-fit:contain}

.stable{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px clamp(28px,4vw,64px);margin-top:clamp(26px,3vh,40px);
}
.stable__row{
  display:grid;grid-template-columns:minmax(118px,150px) 1fr;align-items:center;
  gap:16px;padding:11px 0;border-bottom:1px solid rgba(7,41,86,.12);
}
.stable__key{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-align:center;
  color:var(--navy-800);background:#E8F3FA;border-radius:999px;padding:7px 12px;
}
.stable__val{font-size:17.5px;font-weight:500;color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px)}
.chips li{
  font-size:16.5px;letter-spacing:.02em;color:var(--text-1);
  border:1px solid var(--line-strong);border-radius:999px;padding:11px 20px;
}

.pn__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.pn__link{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(22px,3vh,34px);border:1px solid var(--line);border-radius:var(--radius);
  transition:background .3s ease,border-color .3s ease;
}
.pn__link:hover{opacity:1;background:var(--navy-800);border-color:var(--line-strong)}
.pn__link--next{text-align:right;align-items:flex-end}
.pn__dir{font-size:11px;letter-spacing:.12em;color:var(--text-4)}
.pn__name{font-size:clamp(17px,2vw,24px);letter-spacing:-.02em}

@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr;gap:26px}
  .phero__stage{order:-1;min-height:44vh}
  .stable{grid-template-columns:1fr}
  .pn__grid{grid-template-columns:1fr}
  .pn__link--next{text-align:left;align-items:flex-start}
  .subnav__back span{display:none}
}


/* ---------- 20. PRELOADER (dari sampul katalog) ---------- */
.loader{
  position:fixed;inset:0;z-index:70;background:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  transition:transform .7s cubic-bezier(.7,0,.25,1),visibility 0s linear .7s;
}
.loader--done{transform:translateY(-100%);visibility:hidden}
.loader__arcs{position:absolute;top:0;right:0;width:min(58vw,560px);height:auto;color:#EDEDED}
.loader__arcs circle{
  fill:none;stroke:currentColor;stroke-width:9;
  stroke-dasharray:100 100;stroke-dashoffset:100;
}
.loader__mid{position:relative;text-align:center;padding:0 24px}
.loader__mid img{height:clamp(52px,8vw,84px);width:auto;margin:0 auto}
.loader__tag{
  margin-top:16px;font-size:clamp(13px,1.6vw,17px);font-weight:600;
  letter-spacing:.04em;color:#FFFFFF;
}
.loader__tag span{color:var(--amber)}
.loader__mid img,.loader__tag{opacity:0}

@media (prefers-reduced-motion:no-preference){
  .loader__arcs circle{animation:arcDraw .9s cubic-bezier(.3,.7,.3,1) forwards}
  .loader__arcs circle:nth-child(1){animation-delay:.15s}
  .loader__arcs circle:nth-child(2){animation-delay:.3s}
  .loader__arcs circle:nth-child(3){animation-delay:.45s}
  .loader__arcs{transform-origin:100% 0;animation:arcBreathe 3.2s ease-in-out 1.4s infinite alternate}
  .loader__mid img{animation:riseSoft .8s cubic-bezier(.16,.84,.3,1) .35s both}
  .loader__tag{animation:riseSoft .8s cubic-bezier(.16,.84,.3,1) .6s both}
}
@keyframes arcDraw{to{stroke-dashoffset:0}}
@keyframes arcBreathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes loaderAway{to{opacity:0;visibility:hidden}}
.no-js-guard{animation:loaderAway .6s ease 4.5s forwards}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .loader__mid img,.loader__tag{opacity:1}
}

/* ---------- 21. VEIL — transisi antar halaman ---------- */
.veil{
  position:fixed;inset:0;z-index:60;background:var(--cyan);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,visibility 0s linear .32s;
}
.veil--show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease}
@media (prefers-reduced-motion:no-preference){
  .veil--in{animation:veilOut .55s ease .12s both}
}
@keyframes veilOut{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}

/* ---------- 22. ZOOM GAMBAR PRODUK ---------- */
.phero__stage.js-zoom{cursor:zoom-in;position:relative}
.phero__stage.js-zoom::after{
  content:"Klik untuk memperbesar";
  position:absolute;right:14px;bottom:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--ink-faint);background:rgba(255,255,255,.8);
  border-radius:999px;padding:7px 13px;pointer-events:none;
}
.zoom{
  position:fixed;inset:0;z-index:80;background:rgba(5,32,63,.95);
  display:flex;align-items:center;justify-content:center;
  touch-action:none;overscroll-behavior:contain;
}
.zoom__img{
  max-width:92vw;max-height:88vh;user-select:none;-webkit-user-drag:none;
  cursor:grab;will-change:transform;
}
.zoom.is-drag .zoom__img{cursor:grabbing}
.zoom__close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:none;color:#FFF;font-size:22px;line-height:1;cursor:pointer;
  transition:background .25s ease;
}
.zoom__close:hover{background:rgba(255,255,255,.14)}
.zoom__hint{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font-size:11.5px;letter-spacing:.08em;color:#A9BFDA;pointer-events:none;
}

/* ---------- 23. UNDUH KATALOG ---------- */
.dl{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,28px);
  border:1px solid rgba(7,41,86,.16);border-radius:12px;
  background:var(--paper-2);color:var(--ink);
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.dl:hover,.dl:focus-visible{
  opacity:1;border-color:var(--navy-800);background:#EAF3FA;transform:translateY(-2px);
}
.dl__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy-800);color:var(--paper);
}
.dl__txt{flex:1;min-width:0}
.dl__title{display:block;font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:-.015em}
.dl__meta{display:block;margin-top:7px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.dl__cta{
  flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  padding:11px 22px;border-radius:999px;background:var(--amber);color:var(--ink);
  transition:background .3s ease;
}
.dl:hover .dl__cta{background:var(--amber-lift)}

@media (max-width:640px){
  .dl{flex-wrap:wrap;row-gap:16px}
  .dl__txt{flex:1 1 calc(100% - 62px)}
  .dl__cta{width:100%;text-align:center}
}

/* ---------- 24. BLOK DALAM HALAMAN PRODUK ----------
   Spesifikasi, harga, dan unduhan dulu berupa tiga <section> terpisah,
   sehingga menumpuk padding penuh dua kali (±200px ruang kosong).
   Sekarang satu section, jaraknya diatur di sini. */
.pblock{margin-top:clamp(44px,5.5vh,72px)}

/* ---------- 25. DAFTAR HARGA ---------- */
.prices{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(12px,1.6vw,18px);margin-top:clamp(22px,3vh,32px);
}
.price{
  display:flex;align-items:stretch;
  border:1.5px solid var(--navy-800);border-radius:10px;overflow:hidden;
  transition:background .3s ease;
}
.price:hover{background:var(--paper-2)}
.price__type{
  flex:0 0 44%;display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:clamp(14px,1.8vw,20px);
  border-right:1.5px solid var(--navy-800);text-align:center;
}
.price__code{font-size:clamp(17px,1.9vw,23px);font-weight:700;letter-spacing:-.01em;color:var(--navy-800)}
.price__spec{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--cyan-text)}
.price__amount{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,1.8vw,20px);text-align:center;
  font-size:clamp(17px,2vw,24px);font-weight:700;letter-spacing:-.02em;
  color:var(--navy-800);font-variant-numeric:tabular-nums;
}
.price__note{margin-top:16px;font-size:13.5px;letter-spacing:.04em;color:var(--cyan-text)}

@media (max-width:560px){
  .price{flex-direction:column}
  .price__type{flex:none;border-right:0;border-bottom:1.5px solid var(--navy-800)}
}


/* ---------- 26. HIPOKSIA ---------- */
.hipo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4.5vw,72px);align-items:center;
  margin-top:clamp(32px,4.5vh,56px);
}
.hipo__teks p{font-size:19.5px;line-height:1.8;color:var(--text-1);text-align:justify;hyphens:auto}
.hipo__teks p + p{margin-top:clamp(18px,2.4vh,28px)}
.hipo__tekan{
  padding-left:clamp(16px,2vw,24px);border-left:2px solid var(--cyan);
  color:var(--paper)!important;
}
@media (max-width:900px){
  .hipo{grid-template-columns:1fr;gap:28px}
  .hipo__teks p{font-size:17.5px}
}


/* ---------- 27. VIDEO CARA PAKAI ---------- */
.tayang{margin-top:clamp(30px,4vh,52px);display:flex;justify-content:center}
.tayang__vid{
  width:min(100%,1000px);height:auto;display:block;
  border-radius:16px;background:var(--navy-900);
  aspect-ratio:16/9;object-fit:cover;
}

/* ---------- 28. POPUP PROMO ---------- */
/* [hidden] HARUS didahulukan: display:flex di bawah akan mengalahkannya,
   dan lapisan tembus pandang itu tetap menadah klik walau sudah ditutup. */
.promo[hidden]{display:none}
.promo{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(4,24,47,.86);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s ease,visibility 0s linear .4s;
}
@supports (backdrop-filter:blur(6px)){ .promo{backdrop-filter:blur(6px)} }
.promo.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .4s ease;
}
.promo__kotak{
  position:relative;max-width:min(94vw,620px);max-height:94svh;
  transform:translateY(18px) scale(.97);
  transition:transform .45s var(--ease);
}
.promo.is-open .promo__kotak{transform:none}
.promo__tautan{display:block;border-radius:14px;overflow:hidden;background:var(--paper)}
.promo__tautan img{width:100%;height:auto;display:block;max-height:82svh;object-fit:contain}
.promo__cta{
  display:block;padding:16px 20px;text-align:center;
  background:var(--amber);color:var(--ink);
  font-size:15.5px;font-weight:600;letter-spacing:.03em;
}
.promo__tautan:hover{opacity:1}
.promo__tautan:hover .promo__cta{background:var(--amber-lift)}
.promo__tutup{
  position:absolute;top:-14px;right:-14px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:var(--navy-900);color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;
  transition:background .25s ease;
}
.promo__tutup:hover{background:var(--navy-600)}

@media (max-width:560px){
  .promo__tutup{top:-8px;right:-8px;width:38px;height:38px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .promo,.promo__kotak{transition:none}
}


/* ---------- 29. FOOTER TERANG ---------- */
.footer--terang .footer__logo{height:44px}
.footer--terang .footer__tag{color:var(--ink)}
.footer--terang .footer__tag span{color:var(--amber-ink)}
.footer--terang .footer__addr{color:var(--ink-soft)}
.footer--terang .footer__link{color:var(--ink);border-bottom-color:rgba(7,41,86,.28)}
.footer--terang .footer__link:hover{color:var(--amber-ink);border-bottom-color:var(--amber-ink)}
.footer--terang .social__btn{color:var(--ink);border-color:rgba(7,41,86,.24)}
.footer--terang .social__btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.footer--terang .colophon{border-top-color:rgba(7,41,86,.14);color:var(--ink-soft)}
.footer--terang .colophon img{opacity:1}
.footer--terang :focus-visible{outline-color:var(--navy-800)}

/* ---------- 29b. FOOTER DI HP ----------
   Ditaruh DI SINI, bukan di blok @media (max-width:900px) bagian atas.
   Blok itu letaknya sebelum komponen footer didefinisikan, sehingga pada
   specificity yang sama aturan komponen selalu menang dan override-nya
   diam-diam tidak berlaku. Menaruhnya setelah komponen jauh lebih jujur
   daripada menaikkan specificity dengan selektor tambahan. */
@media (max-width:900px){
  /* HUBUNGI KAMI di kiri, logo Nano Oxywater di kanannya, supaya footer
     tidak menumpuk jadi satu kolom panjang. Salinan logo di baris
     colophon disembunyikan agar tidak tampil dua kali -- display:none
     juga mengeluarkannya dari pembacaan screen reader. */
  .footer__hubungi{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    container-type:inline-size;
  }
  .footer__co-logo{
    display:block;height:auto;margin-left:auto;
    width:clamp(200px, calc(100cqw - 244px), 400px);
  }
  .colophon__logo{display:none}
}

/* ---------- 30. HIPOKSIA DI HP: gambar di atas teks ---------- */
@media (max-width:900px){
  .hipo__teks{order:2}
  .hipo .figur{order:1}
}