:root{
  --p:#0a84ff;--p-ink:#ffffff;
  --wa:#1f9d55;--wa-ink:#ffffff;
  --tg:#1c8fc4;--sp:#d94f2a;--ig:#c13584;
  --ok:#1f9d55;

  --bg:#ffffff;
  --surface:#f4f5f7;
  --surface-2:#ebedf0;
  --border:#d8dbe0;
  --border-2:#b9bec5;
  --txt:#0d0f12;
  --txt2:#525860;
  --txt3:#7a8189;

  --r-sm:10px;
  --r:14px;
  --r-lg:16px;
  --r-pill:999px;

  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  color-scheme:light;
}

[data-theme="dark"]{
  --p:#4aa3ff;--p-ink:#06101a;
  --wa:#34c46b;--wa-ink:#06101a;
  --tg:#4bb3e0;--sp:#ff7a52;--ig:#e86ab0;
  --ok:#34c46b;

  --bg:#0a0b0d;
  --surface:#14171a;
  --surface-2:#1b1f23;
  --border:#2a2f35;
  --border-2:#3a4047;
  --txt:#f2f4f6;
  --txt2:#a6adb5;
  --txt3:#7d858d;
  color-scheme:dark;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font:400 16px/1.55 var(--font);
  background:var(--bg);color:var(--txt);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;min-height:100vh;
  word-wrap:break-word;overflow-wrap:break-word;
  transition:background-color .3s ease,color .3s ease;
}

img,svg{display:block;max-width:100%;height:auto}
a{color:var(--p)}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--p);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;pointer-events:none}

/* ===================== nav ===================== */

.nav{
  position:sticky;top:0;z-index:100;width:100%;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  transition:background-color .3s ease,border-color .3s ease;
}

.nav-in{
  display:flex;justify-content:space-between;align-items:center;
  height:64px;gap:12px;max-width:1080px;margin:0 auto;width:100%;
}

.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--txt);text-decoration:none;flex-shrink:0;min-width:0;
}

.brand-mark{
  width:32px;height:32px;border-radius:10px;
  background:var(--txt);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;line-height:1;
  padding-bottom:1px;flex-shrink:0;
  transition:transform .3s var(--ease-spring);
}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.05)}

.brand-text{font-weight:700;white-space:nowrap}
.brand-text span{color:var(--txt2);font-weight:500}

.nav-menu{
  display:flex;gap:28px;list-style:none;
  margin-left:auto;margin-right:12px;
}
.nav-menu a{
  text-decoration:none;color:var(--txt2);
  font-weight:500;font-size:.9rem;padding:6px 0;
  position:relative;
  transition:color .2s ease;
}
.nav-menu a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1.5px;background:var(--txt);
  border-radius:2px;
  transition:width .3s var(--ease-out);
}
.nav-menu a:hover{color:var(--txt)}
.nav-menu a:hover::after{width:100%}

.theme-btn{
  width:38px;height:38px;border-radius:12px;padding:0;
  color:var(--txt2);background:transparent;
  border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex-shrink:0;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    transform .25s var(--ease-spring);
}
.theme-btn:hover{
  color:var(--txt);
  border-color:var(--border-2);
  background:var(--surface);
  transform:translateY(-1px) scale(1.05);
}
.theme-btn:active{transform:scale(.93)}

.theme-btn .ic{
  width:18px;height:18px;position:absolute;
  transition:transform .35s var(--ease-spring),opacity .2s ease;
}
.theme-btn .i-sun {transform:scale(0) rotate(-90deg);opacity:0}
.theme-btn .i-moon{transform:scale(0) rotate(-90deg);opacity:0}
.theme-btn .i-auto{transform:scale(0) rotate(-90deg);opacity:0}

[data-theme-pref="light"]  .theme-btn .i-sun {transform:scale(1) rotate(0);opacity:1}
[data-theme-pref="dark"]   .theme-btn .i-moon{transform:scale(1) rotate(0);opacity:1}
[data-theme-pref="system"] .theme-btn .i-auto{transform:scale(1) rotate(0);opacity:1}

/* ===================== hero ===================== */

.hero{padding:56px 0 48px;position:relative}
.hero-grid{
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:48px;align-items:start;
}
.hero-l{max-width:560px;min-width:0}
.hero-r{
  min-width:0;display:flex;justify-content:center;align-items:flex-start;
  position:relative;z-index:1;
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:500;color:var(--txt2);
  margin-bottom:18px;max-width:100%;
  background:var(--surface);border:1px solid var(--border);
}
.pill-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);flex-shrink:0;
}

.hero-h1{
  font-size:clamp(1.9rem,3.8vw,2.75rem);
  font-weight:700;line-height:1.12;letter-spacing:-.03em;
  margin-bottom:16px;color:var(--txt);
}
.grad{color:var(--txt2)}

.hero-p{
  font:400 1rem/1.55 var(--mono);color:var(--txt2);
  margin-bottom:24px;min-height:1.5em;
}
.cursor{
  display:inline-block;margin-left:2px;color:var(--p);font-weight:700;
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;max-width:100%;
}

/* ===================== buttons ===================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:12px;
  font-weight:600;font-size:.92rem;letter-spacing:-.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
  position:relative;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .25s var(--ease-spring),
    box-shadow .25s ease;
}
.btn .ic{width:16px;height:16px}

.btn-primary{
  background:var(--p);color:var(--p-ink);border-color:var(--p);
}
.btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--p) 60%,transparent);
}
.btn-primary:active{transform:translateY(0) scale(.98)}

.btn-glass{
  background:var(--surface);color:var(--txt);border-color:var(--border);
}
.btn-glass:hover{
  background:var(--surface-2);border-color:var(--border-2);
  transform:translateY(-2px);
}
.btn-glass:active{transform:translateY(0) scale(.98)}

/* ===================== hero stats ===================== */

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
}
.hero-stats>div{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  padding:14px 8px;min-width:0;position:relative;
}
.hero-stats>div:not(:last-child)::after{
  content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--border);
}
.stat-v{
  font-size:1.15rem;font-weight:700;line-height:1.1;color:var(--txt);
  letter-spacing:-.02em;white-space:nowrap;
}
.stat-l{font-size:.68rem;font-weight:500;color:var(--txt3);white-space:nowrap}

/* ===================== demo WA ===================== */

.demo{
  width:100%;max-width:420px;padding:16px;
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  position:relative;
}

.demo-status{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;flex-shrink:0;
}
.ds-left{display:flex;align-items:center;gap:10px;min-width:0}

.ds-logo{
  width:32px;height:32px;border-radius:10px;
  background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .4s var(--ease-spring);
}
.ds-logo svg{width:20px;height:20px}
.demo:hover .ds-logo{transform:scale(1.08) rotate(-4deg)}

.ds-title{
  font-size:.92rem;font-weight:600;color:var(--txt);
  letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.ds-time{
  font:500 .78rem var(--mono);color:var(--txt2);
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--border);
  flex-shrink:0;
}

.demo-screen{
  position:relative;width:100%;height:400px;
  background:var(--bg);
  border-radius:var(--r);border:1px solid var(--border);
  overflow:hidden;flex-shrink:0;
}

.app-ui{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:18px;gap:12px;z-index:2;overflow:hidden;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.app-ui.on{opacity:1;transform:translateY(0)}

.app-country{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-sm);
  align-self:flex-start;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
}
.ac-flag-img{
  width:22px;height:16px;border-radius:4px;object-fit:cover;
  flex-shrink:0;border:1px solid var(--border);
}
.ac-code{font:700 .88rem var(--mono);color:var(--txt)}
.ac-arrow{display:inline-flex;color:var(--txt3)}
.ac-arrow svg{width:14px;height:14px}

.app-number{
  font:700 1.45rem var(--mono);color:var(--txt);
  letter-spacing:.02em;padding:4px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:0;
}
.app-instruction{margin-top:2px;flex-shrink:0}
.ai-label{
  font-size:.68rem;font-weight:700;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;
}
.ai-text{font-size:.85rem;color:var(--txt2);line-height:1.5}

.app-otp-row{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:6px;margin:8px 0;flex-shrink:0;
}
.app-otp-cell{
  aspect-ratio:1/1.15;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font:700 1.15rem var(--mono);color:var(--txt);
  min-width:0;
  transition:
    border-color .3s var(--ease-spring),
    color .3s var(--ease-spring),
    background-color .3s var(--ease-spring),
    transform .3s var(--ease-spring);
}
.app-otp-cell.filled{
  border-color:var(--p);color:var(--p);
  background:color-mix(in srgb,var(--p) 10%,var(--bg));
  transform:scale(1.04);
}

.app-btn{
  width:100%;padding:12px;border-radius:12px;border:none;
  background:var(--p);color:var(--p-ink);
  font:600 .9rem var(--font);letter-spacing:-.005em;
  cursor:pointer;flex-shrink:0;
  transition:filter .2s ease,background-color .3s ease,transform .2s var(--ease-spring);
}
.app-btn:disabled{opacity:.4;cursor:not-allowed}
.app-btn:not(:disabled):hover{filter:brightness(1.08)}
.app-btn:not(:disabled):active{transform:scale(.98)}
.app-btn.done{background:var(--ok)}

.app-hint{
  font:500 .7rem var(--mono);color:var(--txt3);
  text-align:center;margin-top:auto;flex-shrink:0;
}

/* notif */
.notif{
  position:absolute;top:14px;left:14px;right:14px;
  border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg);border:1px solid var(--border);
  z-index:4;pointer-events:none;
  opacity:0;
  transform:translateY(-16px) scale(.96);
  transition:
    opacity .35s var(--ease-out),
    transform .45s var(--ease-spring);
}
.notif.on{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}

.notif-head{display:flex;align-items:center;gap:10px}
.notif-logo{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  background:var(--txt);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;line-height:1;padding-bottom:1px;
}
.notif-meta{flex:1;min-width:0}
.notif-name{
  font-size:.85rem;font-weight:600;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notif-sub{
  font-size:.7rem;color:var(--txt3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notif-time{font:500 .64rem var(--mono);color:var(--txt3);flex-shrink:0}

.notif-body{display:flex;flex-direction:column;gap:8px}
.notif-text{font-size:.75rem;color:var(--txt2)}
.notif-code{
  display:flex;gap:4px;justify-content:center;padding:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.notif-digit{
  font:700 1.2rem var(--mono);color:var(--p);
  transition:transform .3s var(--ease-spring);
}
.notif-digit:nth-child(1){transition-delay:0s}
.notif-digit:nth-child(2){transition-delay:.03s}
.notif-digit:nth-child(3){transition-delay:.06s}
.notif-digit:nth-child(4){transition-delay:.09s}
.notif-digit:nth-child(5){transition-delay:.12s}
.notif-digit:nth-child(6){transition-delay:.15s}
.notif:not(.on) .notif-digit{transform:translateY(4px)}

.notif-copy{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border-radius:10px;border:none;
  background:var(--p);color:var(--p-ink);
  font:600 .75rem var(--font);cursor:pointer;
  transition:filter .2s ease,background-color .3s ease,transform .2s var(--ease-spring);
}
.notif-copy:hover{filter:brightness(1.08)}
.notif-copy:active{transform:scale(.97)}
.notif-copy svg{width:14px;height:14px}
.notif-copy.done{background:var(--ok)}

/* verified - tanpa ring hijau */
.verified{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;text-align:center;
  background:var(--bg);border-radius:var(--r);
  pointer-events:none;
  opacity:0;
  transform:scale(.94);
  transition:
    opacity .4s var(--ease-out),
    transform .5s var(--ease-spring);
}
.verified.on{opacity:1;transform:scale(1);pointer-events:auto}

.verified-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease-spring);
}
.verified.on .verified-icon{animation:verPop .5s var(--ease-spring) both}
@keyframes verPop{from{transform:scale(.4)}to{transform:scale(1)}}

.verified-icon svg{width:32px;height:32px}
.verified-text{font-size:1.05rem;font-weight:700;color:var(--txt)}
.verified-sub{font:600 .82rem var(--mono);color:var(--txt2)}

.demo-progress{
  height:3px;border-radius:2px;overflow:hidden;flex-shrink:0;
  background:var(--surface-2);
}
.demo-progress-fill{
  height:100%;width:0;background:var(--p);
  border-radius:2px;
  transition:width .1s linear;
}

/* ===================== section head ===================== */

section{padding:72px 0;position:relative}
.sec-head{text-align:center;margin-bottom:48px;padding:0 4px}

.tag{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:500;color:var(--txt2);
  margin-bottom:14px;
  background:var(--surface);border:1px solid var(--border);
}
.sec-head h2{
  font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;margin-bottom:10px;
}
.sec-head p{
  font-size:1rem;color:var(--txt2);max-width:520px;
  margin:0 auto;line-height:1.55;
}

/* ===================== support ===================== */

.support-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:720px;margin:0 auto;
}
.support-card{
  display:flex;align-items:center;gap:14px;padding:20px;
  border-radius:var(--r-lg);
  text-decoration:none;
  background:var(--surface);border:1px solid var(--border);color:var(--txt);
  min-width:0;
  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .3s var(--ease-spring),
    box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.support-card:hover{
  transform:translateY(-3px);
  background:var(--surface-2);
  border-color:var(--border-2);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.35);
}
.support-card:active{transform:translateY(-1px) scale(.99)}

.sc-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease-spring);
}
.support-card:hover .sc-icon{transform:scale(1.08) rotate(-4deg)}

.support-tg .sc-icon{background:var(--tg);color:#fff}
.support-wa .sc-icon{background:var(--wa);color:var(--wa-ink)}
.sc-icon img{width:24px;height:24px;filter:brightness(0) invert(1)}

.sc-info{flex:1;min-width:0}
.sc-name{
  font-size:1rem;font-weight:600;color:var(--txt);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sc-id{
  font:500 .8rem var(--mono);color:var(--txt2);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sc-arrow{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt3);background:transparent;
  border:1px solid var(--border);
  transition:transform .3s var(--ease-spring),color .2s,border-color .2s;
}
.sc-arrow svg{width:16px;height:16px}
.support-card:hover .sc-arrow{
  transform:translateX(3px);
  color:var(--txt);border-color:var(--border-2);
}

/* ===================== features ===================== */

.feat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1080px;margin:0 auto;
}
.feat{
  padding:24px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  min-width:0;position:relative;
  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .3s var(--ease-spring),
    box-shadow .3s ease;
}
.feat:hover{
  transform:translateY(-3px);
  background:var(--surface-2);
  border-color:var(--border-2);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.35);
}

.feat-ic{
  width:44px;height:44px;border-radius:12px;
  background:var(--surface-2);color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  transition:transform .35s var(--ease-spring),background-color .25s ease;
}
.feat:hover .feat-ic{transform:scale(1.08) rotate(-4deg)}
.feat-ic svg{width:22px;height:22px}

.feat h3{font-size:1.05rem;font-weight:600;margin-bottom:6px;letter-spacing:-.015em}
.feat p{font-size:.9rem;color:var(--txt2);line-height:1.6}

/* ===================== how it works ===================== */

.how-demo{
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  border-radius:var(--r-lg);overflow:hidden;
  min-height:400px;position:relative;
  background:var(--surface);border:1px solid var(--border);
}

.how-steps{
  padding:24px 20px;display:flex;flex-direction:column;gap:6px;
  justify-content:center;border-right:1px solid var(--border);
  min-width:0;
}

.how-step-row{
  display:flex;gap:12px;padding:12px;border-radius:12px;
  min-width:0;opacity:.55;
  transition:
    background-color .3s ease,
    opacity .3s ease,
    transform .3s var(--ease-spring);
}
.how-step-row.active{
  opacity:1;background:var(--surface-2);
  transform:translateX(3px);
}

.how-step-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);color:var(--txt2);
  display:flex;align-items:center;justify-content:center;
  font:700 .82rem var(--mono);
  transition:
    background-color .35s var(--ease-spring),
    color .35s var(--ease-spring),
    transform .35s var(--ease-spring);
}
.how-step-row.active .how-step-num{
  background:var(--txt);color:var(--bg);
  transform:scale(1.08);
}

.how-step-info{min-width:0;flex:1}
.how-step-t{
  font-size:.88rem;font-weight:600;color:var(--txt);
  margin-bottom:2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.how-step-d{
  font-size:.72rem;color:var(--txt3);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.how-preview{
  position:relative;overflow:hidden;padding:18px;
  min-height:400px;display:flex;flex-direction:column;min-width:0;
  background:var(--bg);
}

.how-scr{
  position:absolute;inset:18px;display:flex;flex-direction:column;gap:12px;
  min-width:0;overflow:hidden;
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:
    opacity .35s var(--ease-out),
    transform .45s var(--ease-spring);
}
.how-scr.on{opacity:1;transform:translateY(0);pointer-events:auto}

.how-scr-head{
  font-size:.7rem;font-weight:600;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:10px;border-bottom:1px solid var(--border);
  flex-shrink:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.how-app-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.how-app-item{
  display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:12px;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  transition:
    border-color .3s ease,
    background-color .3s ease,
    transform .3s var(--ease-spring);
}
.how-app-item.picked{
  background:var(--surface-2);
  border-color:var(--txt2);
  transform:scale(1.03);
}
.how-app-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:var(--c);
  display:flex;align-items:center;justify-content:center;
}
.how-app-icon img{width:18px;height:18px;filter:brightness(0) invert(1)}
.how-app-name{
  font-size:.8rem;font-weight:500;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;
}

.how-country-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.how-country-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:12px;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  transition:
    border-color .3s ease,
    background-color .3s ease,
    transform .3s var(--ease-spring);
}
.how-country-item.picked{
  background:var(--surface-2);
  border-color:var(--txt2);
  transform:scale(1.02);
}
.how-flag{
  width:24px;height:18px;border-radius:4px;object-fit:cover;
  flex-shrink:0;border:1px solid var(--border);
  background:var(--surface);
}
.how-country-info{flex:1;min-width:0}
.how-country-name{
  font-size:.8rem;font-weight:500;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.how-country-code{
  font:500 .68rem var(--mono);color:var(--txt3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.how-target-app{
  display:flex;align-items:center;gap:14px;padding:12px;
  border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  min-width:0;
}
.how-target-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--c);
  display:flex;align-items:center;justify-content:center;
}
.how-target-icon img{width:20px;height:20px;filter:brightness(0) invert(1)}
.how-target-info{flex:1;min-width:0}
.how-target-name{
  font-size:.84rem;font-weight:600;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.how-target-code{
  font:500 .74rem var(--mono);color:var(--txt3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.how-paste-hint{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:12px;font-size:.76rem;font-weight:500;line-height:1.4;
  background:var(--surface);border:1px dashed var(--border-2);color:var(--txt2);
}
.how-paste-hint svg{width:14px;height:14px;flex-shrink:0}

.how-otp-notif{
  display:flex;flex-direction:column;gap:10px;padding:14px;
  border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
}
.how-otp-head{display:flex;align-items:center;gap:10px}
.how-otp-logo{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:var(--txt);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.86rem;line-height:1;padding-bottom:1px;
}
.how-otp-name{font-size:.82rem;font-weight:600;color:var(--txt)}
.how-otp-digits{
  display:flex;gap:4px;justify-content:center;padding:10px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
}
.how-otp-digits span{
  width:24px;height:30px;border-radius:7px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font:700 .96rem var(--mono);color:var(--p);
}
.how-otp-note{font-size:.72rem;color:var(--txt3);text-align:center}

.how-cursor{
  position:absolute;width:22px;height:22px;pointer-events:none;z-index:10;
  color:var(--txt);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transform:translate(-3px,-3px);left:50%;top:50%;opacity:0;
  transition:
    left .55s var(--ease-out),
    top .55s var(--ease-out),
    opacity .2s ease,
    transform .15s var(--ease-spring);
}
.how-cursor.on{opacity:1}
.how-cursor.press{transform:translate(-3px,-3px) scale(.85)}

.how-tap{
  position:absolute;width:32px;height:32px;border-radius:50%;
  background:transparent;border:2px solid var(--p);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  pointer-events:none;z-index:9;
}
.how-tap.on{animation:tapPop .65s var(--ease-spring)}
@keyframes tapPop{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  60%{opacity:.5;transform:translate(-50%,-50%) scale(1.4)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}
}

/* ===================== faq ===================== */

.faq-list{max-width:720px;margin:0 auto}
.faq-item{
  margin-bottom:8px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .25s var(--ease-spring);
}
.faq-item:hover{
  background:var(--surface-2);
  border-color:var(--border-2);
}
.faq-item.active{background:var(--surface-2);border-color:var(--border-2)}

.faq-q{
  width:100%;padding:16px 20px;text-align:left;
  background:none;border:none;
  font:600 .94rem var(--font);letter-spacing:-.005em;line-height:1.4;
  color:var(--txt);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:color .2s ease;
  border-radius:var(--r);
}
.faq-q:hover{color:var(--p)}

.faq-ic{
  width:18px;height:18px;color:var(--txt2);
  transition:transform .35s var(--ease-spring),color .2s;
  flex-shrink:0;transform-origin:center;
}
.faq-item.active .faq-ic{
  transform:rotate(135deg);color:var(--p);
}

.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease-out);
}
.faq-a-in{
  padding:0 20px 16px;color:var(--txt2);
  font-size:.88rem;line-height:1.65;
}
.faq-item.active .faq-a{max-height:400px}

/* ===================== footer ===================== */

.foot{
  background:var(--bg);color:var(--txt2);
  padding:40px 0 24px;
  border-top:1px solid var(--border);
  position:relative;z-index:2;
}
.foot-in{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.foot-brand{
  display:flex;align-items:center;gap:10px;
  color:var(--txt);font-weight:600;font-size:1rem;
}
.foot-brand .brand-mark{
  width:28px;height:28px;font-size:1rem;
  border-radius:9px;background:var(--txt);color:var(--bg);
}
.foot-menu{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.foot-menu a{
  color:var(--txt2);text-decoration:none;font-size:.86rem;
  transition:color .2s ease;
}
.foot-menu a:hover{color:var(--txt)}
.foot-copy{
  margin-top:24px;padding-top:16px;
  border-top:1px solid var(--border);
  font-size:.78rem;color:var(--txt3);line-height:1.6;
}
.foot-copy a{
  color:var(--txt2);text-decoration:underline;text-underline-offset:2px;
  transition:color .2s ease;
}
.foot-copy a:hover{color:var(--txt)}

/* ===================== to-top ===================== */

.to-top{
  position:fixed;bottom:20px;right:20px;
  width:44px;height:44px;border-radius:50%;
  color:var(--txt2);background:var(--bg);
  border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transform:translateY(10px) scale(.9);
  -webkit-tap-highlight-color:transparent;z-index:90;padding:0;
  transition:
    opacity .25s ease,
    transform .35s var(--ease-spring),
    color .2s,border-color .2s,background-color .2s;
}
.to-top.on{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.to-top:hover{
  color:var(--txt);border-color:var(--border-2);
  transform:translateY(-3px) scale(1.04);
}
.to-top:active{transform:translateY(-1px) scale(.96)}
.to-top svg{width:18px;height:18px}

/* ===================== reveal & entrance ===================== */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeScale{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.hero-l{animation:fadeUp .55s var(--ease-out) both}
.hero-r{animation:fadeScale .65s var(--ease-out) .08s both}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out);
}
.reveal.on{opacity:1;transform:translateY(0)}

.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}

/* ===================== responsive ===================== */

/* Tablet */
@media (max-width:1024px){
  .hero{padding:44px 0 36px}
  .hero-grid{gap:32px}
  .demo{max-width:380px}
  .demo-screen{height:380px}
  .how-demo{grid-template-columns:1fr 1fr;min-height:380px}
  .how-preview{min-height:380px}
}

/* HP: sembunyiin demo & bikin simetris */
@media (max-width:900px){
  .nav-menu{display:none}
  
  .hero{padding:40px 0 32px}
  .hero-grid{grid-template-columns:1fr;gap:0;text-align:center}
  .hero-l{max-width:none;display:flex;flex-direction:column;align-items:center}
  
  /* Sembunyiin kotak demo WA di HP */
  .hero-r{display:none}
  
  .hero-cta{justify-content:center;width:100%;max-width:440px}
  .hero-stats{max-width:480px;margin:0 auto}
  
  .feat-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .support-grid{grid-template-columns:1fr;max-width:560px}
  .how-demo{grid-template-columns:1fr;min-height:auto}
  .how-steps{
    padding:16px;
    border-right:none;border-bottom:1px solid var(--border);
    flex-direction:row;flex-wrap:wrap;gap:6px;
  }
  .how-step-row{flex:1;min-width:calc(50% - 3px);padding:10px;gap:10px}
  .how-step-d{display:none}
  .how-preview{min-height:340px}
  section{padding:48px 0}
  .sec-head{margin-bottom:32px}
}

/* HP Kecil */
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding:28px 0 24px}
  .hero-h1{font-size:1.65rem;line-height:1.2;margin-bottom:12px}
  .hero-p{font-size:.88rem;margin-bottom:16px;line-height:1.5}
  .pill{font-size:.7rem;padding:5px 10px;margin-bottom:12px}
  
  .hero-cta{flex-direction:column;gap:8px;margin-bottom:16px;align-items:stretch}
  .btn{width:100%;min-height:44px;font-size:.9rem}

  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stats>div{padding:12px 8px;border-bottom:1px solid var(--border)}
  .hero-stats>div:nth-child(1){border-right:1px solid var(--border)}
  .hero-stats>div:nth-child(2){border-right:none}
  .hero-stats>div:nth-child(3){border-right:1px solid var(--border);border-bottom:none}
  .hero-stats>div:nth-child(4){border-right:none;border-bottom:none}
  .hero-stats>div::after{display:none!important}
  .stat-v{font-size:1rem}
  .stat-l{font-size:.6rem}

  section{padding:40px 0}
  .sec-head{margin-bottom:24px}
  .sec-head h2{font-size:1.3rem;line-height:1.25}
  .sec-head p{font-size:.86rem}

  .support-grid{gap:10px}
  .support-card{padding:14px;gap:12px}
  .sc-icon{width:40px;height:40px;border-radius:10px}
  .sc-icon img{width:20px;height:20px}
  .sc-name{font-size:.92rem}
  .sc-id{font-size:.72rem}
  .sc-arrow{width:28px;height:28px}

  .feat{padding:18px}
  .feat-ic{width:40px;height:40px;border-radius:10px;margin-bottom:12px}
  .feat-ic svg{width:20px;height:20px}
  .feat h3{font-size:.96rem}
  .feat p{font-size:.82rem}

  .how-demo{border-radius:var(--r)}
  .how-steps{padding:12px;gap:4px}
  .how-step-row{flex:100%;min-width:100%;padding:8px 10px;gap:8px}
  .how-step-num{width:24px;height:24px;font-size:.72rem}
  .how-step-t{font-size:.78rem}
  .how-preview{min-height:300px;padding:14px}
  .how-scr{inset:14px;gap:10px}
  .how-scr-head{font-size:.62rem;padding-bottom:8px}
  .how-app-list{grid-template-columns:1fr 1fr;gap:6px}
  .how-app-item{padding:8px;gap:6px}
  .how-app-icon{width:24px;height:24px;border-radius:7px}
  .how-app-icon img{width:14px;height:14px}
  .how-app-name{font-size:.7rem}
  .how-country-list{gap:5px}
  .how-country-item{padding:8px 10px;gap:8px}
  .how-flag{width:20px;height:14px}
  .how-country-name{font-size:.74rem}
  .how-country-code{font-size:.62rem}
  .how-target-app{padding:10px;gap:10px}
  .how-target-icon{width:32px;height:32px;border-radius:9px}
  .how-target-icon img{width:18px;height:18px}
  .how-target-name{font-size:.76rem}
  .how-target-code{font-size:.68rem}
  .how-paste-hint{padding:8px 10px;font-size:.72rem}
  .how-otp-notif{padding:12px;gap:8px}
  .how-otp-logo{width:24px;height:24px;font-size:.76rem;border-radius:7px}
  .how-otp-name{font-size:.74rem}
  .how-otp-digits span{width:20px;height:26px;font-size:.82rem;border-radius:6px}
  .how-otp-note{font-size:.64rem}

  .faq-q{padding:14px 16px;font-size:.86rem}
  .faq-a-in{padding:0 16px 14px;font-size:.82rem}

  .foot{padding:28px 0 20px}
  .foot-in{flex-direction:column;text-align:center;gap:14px}
  .foot-menu{gap:16px;justify-content:center}
  .foot-copy{font-size:.7rem;margin-top:16px;padding-top:12px;text-align:center}

  .to-top{bottom:14px;right:14px;width:40px;height:40px}

  .nav-in{height:56px}
  .brand-mark{width:28px;height:28px;font-size:.95rem;border-radius:9px}
  .brand-text{font-size:.94rem}
  .theme-btn{width:34px;height:34px;border-radius:10px}
  .theme-btn .ic{width:16px;height:16px}
}

@media (max-width:400px){
  .wrap{padding:0 14px}
  .hero-h1{font-size:1.5rem}
  .hero-p{font-size:.82rem}
  .how-app-list{grid-template-columns:1fr}
  .hero-stats>div{padding:10px 6px}
}

/* ===================== reduced motion ===================== */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero-l,.hero-r,.reveal{opacity:1!important;transform:none!important;animation:none!important}
}

@media print{body{display:none!important}}