/* ============================================================================
   MeterAir.online Landing "Desa Air" — production CSS (di-build via Vite, bukan CDN).
   Diport dari prototype landing/MeterAir.online Diorama Landing.html (struktur & gaya SAMA).
   Font di-self-host (woff2 latin + latin-ext) → public/fonts/landing/.
   ============================================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/archivo-black-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/archivo-black-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/landing/plus-jakarta-sans-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/space-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/space-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/space-mono-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/space-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- design tokens ---------- */
:root{
  --ice0:#F4F8FC; --ice1:#EAF1F8; --ice2:#DCE6F2; --ice3:#CBD9EA;
  --water:#19B5E6; --waterdeep:#0E89B5; --coral:#FF5A4D;
  --ink:#10202E; --body:#46586B; --faint:#8597AC; --lunas:#22C55E;
  /* iso material tones */
  --f-top:#EAF1FA; --f-left:#C6D7EC; --f-right:#A9C0DD; --f-edge:#9DB5D3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--body);
  background:var(--ice0); margin:0; line-height:1.65; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* very fine grain/noise overlay for premium feel (sits below nav, non-interactive) */
body::before{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{color:var(--ink);margin:0}
.display{font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:-.03em;line-height:.96}
.mono{font-family:'Space Mono',monospace}
a{color:inherit;text-decoration:none}
::selection{background:var(--water);color:#fff}
/* global click ripple */
.om-ripple{position:fixed;z-index:95;width:20px;height:20px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(25,181,230,.55);transform:translate(-50%,-50%) scale(0);will-change:transform,opacity}
@keyframes om-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
.om-ripple.dot{width:7px;height:7px;border:0;background:rgba(25,181,230,.5)}
@keyframes om-dot{0%{transform:translate(-50%,-50%) scale(.4);opacity:.8}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}

/* ---------- buttons (pill) ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;font-family:inherit}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 14px 26px -14px rgba(16,32,46,.7)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 22px 36px -16px rgba(16,32,46,.7)}
.btn-water{background:var(--water);color:#04222e;box-shadow:0 14px 26px -12px rgba(25,181,230,.65)}
.btn-water:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(25,181,230,.7)}
.btn-soft{background:#fff;color:var(--ink);border:1.5px solid var(--ice3)}
.btn-soft:hover{border-color:var(--water);color:var(--waterdeep);transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:16.5px}

/* ---------- nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,56px);transition:padding .25s,background .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
#nav.scrolled{padding:12px clamp(20px,4vw,56px);background:rgba(244,248,252,.78);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--ice2);box-shadow:0 10px 30px -24px rgba(16,32,46,.6)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ink);box-shadow:0 8px 16px -8px rgba(16,32,46,.7)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:600;color:var(--body)}
.nav-links a{position:relative}
.nav-links a:hover{color:var(--waterdeep)}
.nav-right{display:flex;align-items:center;gap:14px}

/* ID/EN toggle */
.lang{display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--ice2);border-radius:999px;padding:3px;position:relative}
.lang a,.lang button{font-family:inherit;font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:999px;color:var(--faint);background:transparent;border:0;cursor:pointer;transition:.2s;text-decoration:none;display:inline-block}
.lang a.on,.lang button.on{background:var(--ink);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.section{padding:clamp(72px,9vw,120px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--waterdeep)}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--water);border-radius:2px}
.eyebrow.coral{color:var(--coral)}
.eyebrow.coral::before{background:var(--coral)}

/* ---------- diorama placeholder frame ---------- */
.diorama{position:relative;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--ice1) 45%, var(--ice2) 100%);
  border:1px solid var(--ice2);box-shadow:inset 0 1px 0 #fff,0 40px 80px -50px rgba(36,70,110,.45)}
.diorama .tag3d{position:absolute;top:14px;left:14px;z-index:6;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--waterdeep);background:rgba(255,255,255,.7);border:1px solid var(--ice2);
  border-radius:8px;padding:4px 9px;backdrop-filter:blur(4px)}
.diorama .tag3d b{color:var(--coral)}
.grid-floor{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(125,160,200,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(125,160,200,.10) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(120% 80% at 50% 35%,#000,transparent 75%);mask-image:radial-gradient(120% 80% at 50% 35%,#000,transparent 75%)}

/* iso material classes (used inside SVG) */
.f-top{fill:var(--f-top)} .f-left{fill:var(--f-left)} .f-right{fill:var(--f-right)}
.iso *{stroke:var(--f-edge);stroke-width:.7;stroke-linejoin:round}
.roofL{fill:var(--roofL,#D6E2F1)} .roofD{fill:var(--roofD,#BCCEE5)}
.iso .pipe-flow{stroke:var(--water)}
.shadow{fill:#9DB4D2;opacity:.34;stroke:none!important;filter:blur(2.5px)}
.iso .far{filter:blur(1.7px);opacity:.82}

/* idle animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(60px)}}
@keyframes ripple{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(1.5px) scaleX(1.012)}}
@keyframes flow{to{stroke-dashoffset:-220}}
@keyframes chev{0%{transform:translateY(0);opacity:.4}50%{opacity:1}100%{transform:translateY(7px);opacity:.4}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

.anim-spin{transform-box:fill-box;transform-origin:center;animation:spin 7s linear infinite}
.anim-bob{animation:bob 3.4s ease-in-out infinite}
.anim-drift{animation:drift 26s linear infinite alternate}
.anim-ripple{transform-box:fill-box;transform-origin:center;animation:ripple 4.5s ease-in-out infinite}
.pipe-flow{stroke-dasharray:10 14;animation:flow 3s linear infinite}

@media (prefers-reduced-motion: reduce){
  .anim-spin,.anim-bob,.anim-drift,.anim-ripple,.pipe-flow,.chev{animation:none!important}
}

/* ---------- hero sinematik (pinned 3D scrollytelling) ---------- */
/* #hero = track tinggi (5 "layar": intro + 4 tahap). .hero-pin di-PIN penuh layar;
   scroll menggerakkan kamera 3D, bukan menggeser konten. */
.hero-cine{position:relative;height:520vh}
#hero.nogl{height:100vh;height:100svh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 6%, #FFFFFF 0%, var(--ice0) 48%, var(--ice1) 100%)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#hero.nogl #heroCanvas{display:none}
.hero-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:none}
#hero.nogl .hero-fallback{display:block}
.hero-overlays{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-overlays a,.hero-overlays button{pointer-events:auto}

/* intro headline (tahap 0) */
.hero-intro{position:absolute;top:clamp(116px,15vh,176px);left:50%;transform:translateX(-50%);
  width:min(1000px,92vw);text-align:center;will-change:opacity,transform}
.hero-h1{font-size:clamp(44px,8.4vw,112px)}
.hero-h1 .em{color:var(--waterdeep)}
.hero-sub{font-size:clamp(16px,2vw,21px);color:var(--body);max-width:34em;margin:24px auto 0;line-height:1.6}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* panel tahap (kiri-bawah) */
.hero-stagepanel{position:absolute;left:clamp(20px,5vw,76px);bottom:clamp(92px,15vh,148px);width:min(440px,86vw);
  opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1);
  background:rgba(255,255,255,.64);backdrop-filter:blur(13px) saturate(140%);-webkit-backdrop-filter:blur(13px) saturate(140%);
  border:1px solid var(--ice2);border-radius:20px;padding:24px 26px;box-shadow:0 34px 64px -42px rgba(16,32,46,.62)}
.hero-stagepanel.on{opacity:1;transform:none}
.hsp-no{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--coral)}
.hsp-title{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin:7px 0 10px;line-height:1.04}
.hsp-desc{font-size:15.5px;color:var(--body);line-height:1.6}
.hsp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hsp-chips span{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;color:var(--waterdeep);
  background:var(--ice1);border:1px solid var(--ice2);border-radius:999px;padding:5px 12px}

/* rail bernomor (kanan) */
.hero-rail{position:absolute;right:clamp(18px,3.5vw,52px);top:50%;transform:translateY(-50%);
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.hero-rail li{display:flex;align-items:center;gap:12px;justify-content:flex-end;opacity:.45;transition:opacity .35s}
.hero-rail li b{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--faint);order:2;
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ice3);display:grid;place-items:center;
  background:rgba(255,255,255,.66);transition:.35s}
.hero-rail li span{font-size:13px;font-weight:700;color:var(--ink);order:1;opacity:0;transform:translateX(8px);transition:.35s}
.hero-rail li.on{opacity:1}
.hero-rail li.on b{color:#fff;background:var(--coral);border-color:var(--coral)}
.hero-rail li.on span{opacity:1;transform:none}

.scrollcue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;
  align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);pointer-events:none;will-change:opacity}
.chev{animation:chev 1.6s ease-in-out infinite}

@media (max-width:900px){
  .hero-cine{height:100vh;height:100svh}
  .hero-pin{position:relative;height:100vh;height:100svh}
  .hero-stagepanel,.hero-rail{display:none}
  .hero-intro{top:clamp(96px,13vh,150px)}
  .hero-h1{font-size:clamp(38px,11vw,68px)}
}
@media (prefers-reduced-motion: reduce){ .hero-cine{height:100vh} .hero-pin{position:sticky} }

/* ---------- process ---------- */
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.proc-steps{display:flex;flex-direction:column}
.step{padding:40px 0;border-top:1px solid var(--ice2);opacity:.45;transition:opacity .35s ease}
.step:first-child{border-top:0}
.step.active{opacity:1}
.step-no{font-family:'Space Mono',monospace;font-size:15px;font-weight:700;color:var(--faint);transition:color .3s}
.step.active .step-no{color:var(--coral)}
.step h3{font-size:clamp(26px,3.2vw,38px);margin:10px 0 12px;letter-spacing:-.03em}
.step p{font-size:16.5px;max-width:30em}
.step .meta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;color:var(--waterdeep);background:var(--ice1);
  border:1px solid var(--ice2);border-radius:999px;padding:5px 12px}
.proc-sticky{position:sticky;top:96px;height:min(78vh,640px)}
.proc-stage{height:100%;border-radius:26px}
/* process diorama overlay states */
.fx{opacity:0;transition:opacity .5s ease}
.state-1 .fx-1,.state-2 .fx-2,.state-3 .fx-3,.state-4 .fx-4{opacity:1}
/* pop entrance scoped to the active state only (no 'both' fill that lingers) */
.proc-stage.state-1 .fx-1{animation:pop .5s ease}
.state-4 .village-glow{opacity:1}
.village-glow{opacity:0;transition:opacity .6s ease}
/* meter recolor via inheritable CSS var — inherits through the <use> shadow boundary */
.meter-dot{fill:var(--meter-fill,var(--f-right));transition:fill .4s}
.proc-stage{--meter-fill:var(--f-right)}
.proc-stage.state-1{--meter-fill:var(--water)}
.proc-stage.state-4{--meter-fill:var(--lunas)}

/* ---------- features tabs ---------- */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:#fff;border:1px solid var(--ice2);
  border-radius:999px;padding:6px;width:max-content;margin:0 auto 48px;box-shadow:0 16px 36px -28px rgba(16,32,46,.5)}
.tab{font-family:inherit;font-weight:700;font-size:15px;color:var(--body);background:transparent;border:0;cursor:pointer;
  padding:11px 22px;border-radius:999px;transition:.2s;display:inline-flex;align-items:center;gap:9px}
.tab.on{background:var(--ink);color:#fff}
.feat-panel{display:none;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feat-panel.on{display:grid}
.feat-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.feat-list li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--body)}
.feat-list .tick{flex:none;width:24px;height:24px;border-radius:8px;background:var(--ice1);border:1px solid var(--ice2);
  display:grid;place-items:center;color:var(--waterdeep);margin-top:1px}
.feat-viz{height:380px;border-radius:24px}

/* ---------- trust ---------- */
.paystrip{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,46px);flex-wrap:wrap;
  padding:22px 30px;background:#fff;border:1px solid var(--ice2);border-radius:18px;box-shadow:0 20px 44px -34px rgba(16,32,46,.5)}
.paystrip .lbl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.paystrip .pm{font-weight:800;font-size:17px;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.stat{text-align:center;background:linear-gradient(180deg,#fff,var(--ice0));border:1px solid var(--ice2);border-radius:20px;padding:34px 18px}
.stat .v{font-family:'Archivo Black',sans-serif;font-size:clamp(38px,5vw,58px);color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .v .u{color:var(--water)}
.stat .k{font-size:14.5px;color:var(--body);margin-top:6px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.tcard{background:#fff;border:1px solid var(--ice2);border-radius:20px;padding:28px;box-shadow:0 24px 50px -40px rgba(16,32,46,.5)}
.tcard p{font-size:16px;color:var(--ink);line-height:1.6}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.tcard .av{width:44px;height:44px;border-radius:50%;background:var(--ice2);display:grid;place-items:center;font-weight:800;color:var(--waterdeep)}
.tcard .who b{display:block;color:var(--ink);font-size:14.5px}
.tcard .who span{font-size:12.5px;color:var(--faint)}
.stars{color:#F5A623;letter-spacing:2px;font-size:14px}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.price{background:#fff;border:1px solid var(--ice2);border-radius:24px;padding:32px 28px;position:relative;transition:transform .2s,box-shadow .2s}
.price:hover{transform:translateY(-4px);box-shadow:0 36px 70px -46px rgba(16,32,46,.55)}
.price.feat{background:var(--ink);border-color:var(--ink);box-shadow:0 50px 90px -50px rgba(16,32,46,.8);transform:scale(1.04)}
.price.feat:hover{transform:scale(1.04) translateY(-4px)}
.price .nm{font-weight:800;font-size:17px;color:var(--ink)}
.price.feat .nm,.price.feat .desc{color:#fff}
.price .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;
  font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.price .amt{font-family:'Archivo Black',sans-serif;font-size:42px;color:var(--ink);margin:18px 0 2px;letter-spacing:-.03em}
.price.feat .amt{color:#fff}
.price .amt small{font-family:'Plus Jakarta Sans';font-size:15px;color:var(--faint);font-weight:600}
.price.feat .amt small{color:rgba(255,255,255,.6)}
.price .desc{font-size:14px;color:var(--body);min-height:42px}
.price ul{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.price li{display:flex;gap:11px;font-size:14.5px;color:var(--body)}
.price.feat li{color:rgba(255,255,255,.86)}
.price li i{color:var(--water);flex:none;margin-top:2px}
.price .btn{width:100%}

/* ---------- CTA banner ---------- */
.cta-band{position:relative;border-radius:30px;overflow:hidden;padding:clamp(50px,7vw,86px) clamp(24px,5vw,70px);text-align:center;
  background:linear-gradient(135deg,var(--waterdeep) 0%,var(--water) 55%,#5BD0F2 100%)}
.cta-band h2{color:#fff;font-size:clamp(32px,5.4vw,62px)}
.cta-band p{color:rgba(255,255,255,.9);font-size:18px;max-width:30em;margin:18px auto 0}
.cta-band .btn-white{background:#fff;color:var(--waterdeep);margin-top:34px}
.cta-band .btn-white:hover{transform:translateY(-2px);box-shadow:0 24px 44px -16px rgba(0,0,0,.3)}
.cta-waves{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.cta-band .inner{position:relative;z-index:1}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#A9BAC9;padding:72px 0 40px;margin-top:0}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;font-weight:800}
footer a{display:block;color:#A9BAC9;font-size:14.5px;margin-bottom:11px;transition:.2s}
footer a:hover{color:var(--water)}
footer .fbrand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;color:#fff;margin-bottom:14px}
footer .fbrand .brand-mark{background:var(--water)}
footer .fdesc{font-size:14.5px;max-width:28em;line-height:1.6}
footer .fsoc{display:flex;gap:10px;margin-top:20px}
footer .fsoc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;margin:0;color:#cfe}
footer .fsoc a:hover{background:var(--water);color:#04222e}
footer .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:54px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#7C8EA0}

/* ---------- responsive ---------- */
/* JANGAN set overflow-x di html → akan mematikan position:sticky hero (pin kamera).
   body sudah overflow-x:hidden; overflow mobile ditangani via sizing navbar di bawah. */
body{max-width:100%}
@media (max-width:900px){
  .nav-links{display:none}
  /* navbar ramping di mobile → tidak melebihi lebar layar (penyebab konten ke-geser) */
  #nav{padding:12px 16px;gap:8px}
  #nav .nav-right{gap:8px}
  #nav .lang{display:none}
  #nav .nav-right .btn{padding:9px 13px;font-size:13px}
  .brand{font-size:17px;gap:8px}
  .brand-mark{width:32px;height:32px}
  .proc-grid{grid-template-columns:1fr;gap:8px}
  .proc-sticky{position:relative;top:0;height:auto;margin-bottom:14px}
  .proc-stage{height:340px}
  .feat-panel.on{grid-template-columns:1fr}
  .feat-viz{height:280px;order:-1}
  .stats,.tcards,.prices{grid-template-columns:1fr}
  .price.feat{transform:none}.price.feat:hover{transform:translateY(-4px)}
  footer .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  footer .fgrid{grid-template-columns:1fr}
  .paystrip{flex-direction:column;gap:14px}
}
@media (max-width:430px){
  /* layar kecil: sembunyikan tombol "Masuk" di nav, sisakan CTA utama (login tetap via CTA) */
  #nav .nav-right .btn-soft{display:none}
}