/* =========================================================
   WAZZ PAYMENT — Design tokens
   Palette : #05070F (void), #0B1020 (surface), #131A2E (surface-2)
             #2B6CFF (electric blue), #4EE1FF (cyan glow)
             #F5F7FA (white), #8A93A8 (slate)
   Type    : Space Grotesk (display), Inter (body), JetBrains Mono (data)
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --void: #07040F;
  --surface: #0F0A1E;
  --surface-2: #171029;
  --surface-3: #211936;
  --blue: #9333EA;
  --blue-dim: #6B21A8;
  --cyan: #C084FC;
  --white: #F5F3FF;
  --slate: #A296C0;
  --line: rgba(168,148,208,0.18);
  --shadow-blue: 0 0 40px rgba(147,51,234,0.4);
  --shadow-cyan: 0 0 40px rgba(192,132,252,0.3);
  --radius: 16px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--void);
  color: var(--white);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--blue);color:var(--white);}

h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.02em;
}
.mono{font-family:'JetBrains Mono', monospace;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* ---------- ambient network grid background ---------- */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(78,225,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,225,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}
.glow-orb{
  position:fixed; z-index:0; border-radius:50%; filter:blur(90px); pointer-events:none;
  opacity:.55; animation: drift 18s ease-in-out infinite;
}
.glow-orb.one{ width:420px;height:420px; background:var(--blue); top:-120px; left:-100px;}
.glow-orb.two{ width:380px;height:380px; background:var(--cyan); bottom:-140px; right:-80px; animation-delay:-8s;}
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-30px) scale(1.12); }
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw;
  backdrop-filter: blur(14px);
  background: rgba(5,7,15,0.6);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:700;}
.logo-mark{width:34px;height:34px; display:block; border-radius:8px; object-fit:cover;}
img.logo-mark{ box-shadow:0 0 14px rgba(147,51,234,0.45); }
.nav-links{display:flex; gap:34px; font-size:.92rem; color:var(--slate);}
.nav-links a{transition:color .25s var(--ease);}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  display:flex; gap:12px; align-items:center;
}

.btn{
  padding:12px 26px; border-radius:999px; font-weight:600; font-size:.9rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color:#04060d;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: var(--shadow-blue); }
.btn-ghost{
  border:1px solid var(--line); color:var(--white);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(78,225,255,0.06); }
.btn:active{ transform: scale(.96); }

/* ---------- hero / banner ---------- */
.hero{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
  padding: 90px 6vw 60px; align-items:center;
  min-height:86vh;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:.78rem; color:var(--cyan); background:rgba(78,225,255,0.05);
  margin-bottom:22px; letter-spacing:.04em;
  animation: fadeUp .8s var(--ease) both;
}
.dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation: pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);}}

.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height:1.05; font-weight:700;
  animation: fadeUp .9s .05s var(--ease) both;
}
.hero h1 span{
  background: linear-gradient(120deg, var(--cyan), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  margin-top:22px; color:var(--slate); font-size:1.05rem; max-width:520px; line-height:1.7;
  animation: fadeUp .9s .12s var(--ease) both;
}
.hero-actions{ display:flex; gap:16px; margin-top:36px; animation: fadeUp .9s .18s var(--ease) both;}
.hero-stats{ display:flex; gap:34px; margin-top:52px; animation: fadeUp .9s .24s var(--ease) both;}
.hero-stats div b{ font-family:'Space Grotesk'; font-size:1.5rem; display:block;}
.hero-stats div span{ color:var(--slate); font-size:.82rem;}

@keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

/* ---------- banner (real image) ---------- */
.banner-wrap{
  position:relative; z-index:1; padding: 24px 6vw 0; overflow:hidden;
}
.banner-img{
  width:100%; display:block; border-radius:22px; border:1px solid var(--line);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(147,51,234,.25);
  animation: bannerIn 1.1s var(--ease) both, bannerGlow 5s ease-in-out infinite;
  transition: transform .5s var(--ease);
}
.banner-wrap:hover .banner-img{ transform: scale(1.012); }
@keyframes bannerIn{ from{ opacity:0; transform: translateY(30px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes bannerGlow{ 0%,100%{ box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(147,51,234,.25);} 50%{ box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 90px rgba(192,132,252,.4);} }
.banner-flare{
  position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent);
  animation: flareSweep 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flareSweep{ 0%{ left:-40%;} 45%,100%{ left:120%;} }

.hero-compact{ min-height:auto; padding: 56px 6vw 40px; display:block; text-align:center; }
.hero-compact > div{ max-width:760px; margin:0 auto; }
.hero-compact p{ margin-left:auto; margin-right:auto; }
.hero-compact .hero-actions{ justify-content:center; }
.hero-compact .hero-stats{ justify-content:center; }

/* ---------- kenapa harus bayar di sini ---------- */
.why-section{ padding-top:60px; padding-bottom:20px; }
.why-lead{ max-width:640px; margin:14px auto 0; color:var(--slate); line-height:1.7; }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:44px; }
.why-card{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:18px; padding:26px;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.why-card:hover{ transform: translateY(-6px); border-color: rgba(192,132,252,.35); }
.why-icon{ font-size:1.6rem; margin-bottom:14px; }
.why-card h3{ font-size:1.05rem; margin-bottom:8px; }
.why-card p{ color:var(--slate); font-size:.86rem; line-height:1.6; }

/* ---------- tombol masuk dashboard — CTA jelas, bukan di nav ---------- */
.enter-cta{ padding-top:20px; padding-bottom:20px; }
.enter-cta-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background: linear-gradient(135deg, var(--blue-dim), var(--surface-2));
  border:1px solid rgba(192,132,252,.35); border-radius:24px;
  padding:36px 40px; position:relative; overflow:hidden;
  box-shadow: 0 0 60px rgba(147,51,234,.2);
}
.enter-cta-card::after{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(192,132,252,.3), transparent 65%);
  top:-160px; right:-80px; pointer-events:none;
}
.enter-cta-text h2{ font-size:1.4rem; margin-bottom:8px; }
.enter-cta-text p{ color:var(--slate); font-size:.9rem; }
.enter-cta-btn{
  font-size:1rem; padding:16px 30px; white-space:nowrap; position:relative; z-index:1;
  animation: ctaPulse 2.2s ease-in-out infinite;
}
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 0 0 rgba(147,51,234,.5);} 50%{ box-shadow:0 0 30px rgba(192,132,252,.6);} }

/* ---------- standalone QRIS demo stage (real image) ---------- */
.qris-demo-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:460px; max-width:400px; margin:0 auto;
}
.qr-real-img{
  width:220px; height:220px; object-fit:contain; border-radius:16px;
}
.qr-card.small{ width:220px; height:220px; }

/* ---------- QRIS demo modal (dashboard, client-side only) ---------- */
.qris-modal{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background: rgba(5,3,10,0.72); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.qris-modal.show{ opacity:1; pointer-events:all; }
.qris-modal-card{
  position:relative; width:min(360px, 90vw); text-align:center; padding:34px 28px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transform: translateY(24px) scale(.96); transition: transform .35s var(--ease);
}
.qris-modal.show .qris-modal-card{ transform: translateY(0) scale(1); }
.qris-modal-card h3{ font-size:1.1rem; margin-bottom:6px; }
.modal-sub{ color:var(--slate); font-size:.8rem; margin-bottom:20px; }
.qris-modal-close{
  position:absolute; top:14px; right:14px; width:30px;height:30px; border-radius:50%;
  background: var(--surface-3); color:var(--slate); font-size:.85rem;
  display:flex; align-items:center; justify-content:center; transition: color .2s, background .2s;
}
.qris-modal-close:hover{ color:var(--white); background: var(--blue-dim); }
.modal-status{ margin-top:14px; font-size:.82rem; color:var(--cyan); min-height:1.2em; }
.qr-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:440px;
  animation: fadeUp 1s .2s var(--ease) both;
}
.qr-card{
  position:relative; width:280px; height:280px; border-radius:26px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.02);
  display:flex; align-items:center; justify-content:center;
  transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
  animation: floatCard 6s ease-in-out infinite;
  overflow:hidden;
}
@keyframes floatCard{ 0%,100%{ transform: perspective(900px) rotateY(-8deg) rotateX(4deg) translateY(0);} 50%{ transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-14px);} }
.qr-grid{
  width:190px; height:190px; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr); gap:6px;
}
.qr-grid i{ background: var(--surface-3); border-radius:3px; }
.qr-grid i.on{ background: var(--white); box-shadow:0 0 8px rgba(255,255,255,.5);}
.qr-grid i.corner{ background:var(--cyan); box-shadow: 0 0 10px var(--cyan);}
.scan-line{
  position:absolute; left:6%; right:6%; height:2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 18px var(--cyan);
  animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan{ 0%{ top:8%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ top:92%; opacity:0;} }
.qr-badge{
  position:absolute; bottom:-18px; right:-18px;
  background: var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; display:flex; align-items:center; gap:10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  animation: floatCard 6s ease-in-out infinite reverse;
}
.qr-badge .ok{ width:22px;height:22px; border-radius:50%; background: linear-gradient(135deg,var(--cyan),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:.7rem;}
.qr-badge b{font-family:'Space Grotesk'; font-size:.85rem;}
.qr-badge span{display:block; font-size:.7rem; color:var(--slate);}
.orbit-ring{
  position:absolute; border:1px solid var(--line); border-radius:50%;
  animation: spin 16s linear infinite;
}
.orbit-ring.r1{width:360px;height:360px;}
.orbit-ring.r2{width:420px;height:420px; animation-duration:24s; animation-direction:reverse;}
.orbit-ring i{
  position:absolute; top:-5px; left:50%; width:9px;height:9px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan);
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* ---------- sections ---------- */
section{ position:relative; z-index:1; padding: 90px 6vw; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head .tag{ color:var(--cyan); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;}
.section-head h2{ font-size: clamp(1.8rem,3vw,2.6rem); margin-top:14px;}
.section-head p{ color:var(--slate); margin-top:14px; line-height:1.7;}

.reveal{ opacity:0; transform:translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* payment methods grid */
.methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.method-card{
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius: var(--radius);
  padding:30px; position:relative; overflow:hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.method-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease);
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(78,225,255,0.12), transparent 60%);
}
.method-card:hover::before{ opacity:1; }
.method-card:hover{ transform: translateY(-8px); border-color: rgba(78,225,255,.35); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.method-icon{
  width:52px;height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(43,108,255,.18), rgba(78,225,255,.12));
  margin-bottom:22px; font-size:1.4rem;
}
.method-card h3{ font-size:1.15rem; margin-bottom:10px;}
.method-card p{ color:var(--slate); font-size:.9rem; line-height:1.65; margin-bottom:18px;}
.method-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.method-list li{ font-size:.82rem; color:var(--slate); display:flex; align-items:center; gap:8px;}
.method-list li::before{ content:''; width:5px;height:5px;border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan);}
.method-status{
  position:absolute; top:26px; right:26px; font-size:.68rem; padding:4px 10px; border-radius:999px;
  background: rgba(78,225,255,0.1); color:var(--cyan); border:1px solid rgba(78,225,255,0.25);
}

/* ---------- rekening / e-wallet cards ---------- */
.rek-card{ display:flex; flex-direction:column; }
.rek-name{ color:var(--slate); font-size:.85rem; margin-bottom:16px; }
.rek-number-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background: var(--surface-3); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-top:auto;
}
.rek-number{ font-size:.95rem; letter-spacing:.02em; }
.copy-btn{
  padding:7px 14px; border-radius:999px; font-size:.75rem; font-weight:600;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#0b0614;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.copy-btn:hover{ transform:translateY(-2px); box-shadow: var(--shadow-blue); }
.copy-btn.copied{ background: var(--surface-3); color: var(--cyan); border:1px solid var(--cyan); }
.rek-note{ text-align:center; color:var(--slate); font-size:.78rem; margin-top:28px; }

/* ---------- dashboard: embedded QRIS + rekening panels ---------- */
.qris-panel{ padding-bottom:26px; margin-bottom:24px; }
.qris-panel-body{ display:flex; gap:28px; align-items:center; padding:0 22px 20px; flex-wrap:wrap; }
.qris-panel-info{ flex:1; min-width:220px; }
.qris-panel-info p{ color:var(--slate); font-size:.9rem; line-height:1.6; margin-bottom:18px; }
.rekening-panel{ padding-bottom:26px; margin-bottom:24px; }
.dash-rek-grid{ padding:0 22px 8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.dash-rek-grid .rek-card{ padding:18px; }
.rekening-panel .rek-note{ padding:0 22px; margin-top:12px; }

/* ---------- floating sound toggle ---------- */
.sound-toggle{
  position:fixed; bottom:26px; left:26px; z-index:120;
  padding:14px 20px; border-radius:999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color:#0b0614; font-size:.95rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
  box-shadow: 0 14px 34px rgba(147,51,234,.5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  animation: soundPulse 2s ease-in-out infinite;
  white-space:nowrap;
}
.sound-toggle span{ font-size:.82rem; }
.sound-toggle:hover{ transform: translateY(-3px) scale(1.03); }
.sound-toggle.muted{ background: var(--surface-3); color: var(--slate); box-shadow:none; animation:none; }
@keyframes soundPulse{ 0%,100%{ box-shadow:0 14px 34px rgba(147,51,234,.5);} 50%{ box-shadow:0 14px 48px rgba(192,132,252,.75);} }

.sound-hint{
  position:fixed; bottom:82px; left:26px; z-index:119;
  background: var(--surface-2); border:1px solid var(--line); color:var(--white);
  font-size:.78rem; padding:10px 14px; border-radius:12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  max-width:220px;
}
.sound-hint.show{ opacity:1; transform: translateY(0); animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }

/* ---------- QRIS zoom hint + actions ---------- */
.qr-zoomable{ cursor:zoom-in; position:relative; }
.qr-zoom-hint{
  position:absolute; left:0; right:0; bottom:-34px; text-align:center;
  font-size:.72rem; color:var(--slate); opacity:0; transition:opacity .3s var(--ease);
}
.qr-zoomable:hover .qr-zoom-hint{ opacity:1; }
.qris-actions{ display:flex; gap:16px; justify-content:center; margin-top:56px; flex-wrap:wrap; }

/* ---------- generic zoom lightbox (QRIS, images) ---------- */
.zoom-lightbox{
  position:fixed; inset:0; z-index:180; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background: rgba(5,3,10,0.9); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
  padding:24px;
}
.zoom-lightbox.show{ opacity:1; pointer-events:all; }
.zoom-image{
  max-width:min(88vw, 560px); max-height:70vh; border-radius:18px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  transform: scale(.94); transition: transform .35s var(--ease);
}
.zoom-lightbox.show .zoom-image{ transform: scale(1); }
.zoom-close{
  position:absolute; top:22px; right:24px; width:42px;height:42px; border-radius:50%;
  background: var(--surface-3); color:var(--white); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition: background .2s;
}
.zoom-close:hover{ background: var(--blue-dim); }
.zoom-download{ position:relative; }

/* ---------- enlarge-number modal ---------- */
.number-modal{
  position:fixed; inset:0; z-index:180; display:flex; align-items:center; justify-content:center;
  background: rgba(5,3,10,0.78); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
  padding:24px;
}
.number-modal.show{ opacity:1; pointer-events:all; }
.number-modal-card{
  width:min(380px, 92vw); text-align:center; padding:38px 28px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transform: translateY(24px) scale(.96); transition: transform .35s var(--ease);
  position:relative;
}
.number-modal.show .number-modal-card{ transform: translateY(0) scale(1); }
.number-modal-label{ display:block; color:var(--slate); font-size:.8rem; margin-bottom:14px; }
.number-modal-value{
  font-size:2.1rem; font-weight:600; color:var(--white); letter-spacing:.03em;
  margin-bottom:26px; word-break:break-all;
  text-shadow: 0 0 20px rgba(192,132,252,.4);
}
.number-modal-close{
  position:absolute; top:14px; right:14px; width:30px;height:30px; border-radius:50%;
  background: var(--surface-3); color:var(--slate); font-size:.85rem;
  display:flex; align-items:center; justify-content:center; transition: color .2s, background .2s;
}
.number-modal-close:hover{ color:var(--white); background: var(--blue-dim); }

.rek-btn-group{ display:flex; gap:8px; }
.enlarge-btn{
  padding:7px 14px; border-radius:999px; font-size:.75rem; font-weight:600;
  background: var(--surface-3); border:1px solid var(--line); color:var(--white);
  transition: border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.enlarge-btn:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ---------- wallet brand badges (DANA / GoPay) — stylized, not copied logos ---------- */
.wallet-logo{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; color:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.wallet-logo::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 60%);
}
.wallet-logo.dana{ background: linear-gradient(150deg, #1279E0, #0C4FA3); font-size:1.5rem; }
.wallet-logo.gopay{ background: linear-gradient(150deg, #00AA5B, #00703C); font-size:1.4rem; }
.wallet-logo.ovo{ background: linear-gradient(150deg, #7C3AED, #4C1D95); font-size:1.4rem; }
.mini-card .wallet-logo{ width:38px; height:38px; border-radius:10px; font-size:1rem; }
.mini-card .wallet-logo.dana{ font-size:1.05rem; }
.mini-card .wallet-logo.gopay{ font-size:.95rem; }
.mini-card .wallet-logo.ovo{ font-size:1.05rem; }

/* ---------- rekening category box (number hidden until clicked) ---------- */
.rek-view-btn{
  width:100%; margin-top:auto; padding:13px 16px; border-radius:12px;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#0b0614;
  font-weight:600; font-size:.88rem;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rek-view-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-blue); }
.rek-view-btn:active{ transform: scale(.97); }

/* ---------- bouncy reveal animation for the popped-up number ---------- */
.number-modal-value.pop{ animation: numberPop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes numberPop{
  0%{ transform: scale(.35); opacity:0; }
  55%{ transform: scale(1.12); opacity:1; }
  80%{ transform: scale(.96); }
  100%{ transform: scale(1); }
}

/* flow / how it works */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.flow::before{
  content:''; position:absolute; top:26px; left:6%; right:6%; height:1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.flow-step{ text-align:center; padding:0 14px; position:relative; }
.flow-num{
  width:52px; height:52px; border-radius:50%; margin:0 auto 20px; position:relative; z-index:2;
  background: var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:600;
  transition: border-color .3s, box-shadow .3s;
}
.flow-step:hover .flow-num{ border-color:var(--cyan); box-shadow: var(--shadow-cyan); color:var(--cyan);}
.flow-step h4{ font-size:1rem; margin-bottom:8px;}
.flow-step p{ color:var(--slate); font-size:.85rem; line-height:1.6;}

/* stats banner strip */
.strip{
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:24px;
  padding:44px 6vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(43,108,255,0.04), transparent);
}
.strip div{ text-align:center;}
.strip b{ font-family:'Space Grotesk'; font-size:2rem; background:linear-gradient(120deg,var(--white),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block;}
.strip span{ color:var(--slate); font-size:.82rem;}

/* CTA */
.cta-panel{
  border-radius:28px; padding:64px 6vw; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
}
.cta-panel::after{
  content:''; position:absolute; width:600px;height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(43,108,255,.28), transparent 65%);
  top:-260px; left:50%; transform:translateX(-50%); pointer-events:none;
}
.cta-panel h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); position:relative;}
.cta-panel p{ color:var(--slate); margin:16px 0 32px; position:relative;}

/* footer */
footer{ position:relative; z-index:1; padding:40px 6vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .credit{ color:var(--slate); font-size:.82rem;}
footer .credit b{ color:var(--cyan); }

/* ---------- LOGIN PAGE ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  padding: 24px;
}
.login-card{
  width:100%; max-width:420px; text-align:center; padding:56px 40px;
  background: rgba(11,16,32,0.7); backdrop-filter: blur(20px);
  border:1px solid var(--line); border-radius:24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  animation: cardIn 1s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(40px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }

.login-logo{
  width:74px; height:74px; margin:0 auto 26px; position:relative;
  animation: logoPulse 2.6s ease-in-out infinite;
}
@keyframes logoPulse{ 0%,100%{ filter:drop-shadow(0 0 10px rgba(78,225,255,.35)); } 50%{ filter:drop-shadow(0 0 26px rgba(78,225,255,.7)); } }

.login-card h1{ font-size:1.5rem; margin-bottom:8px;}
.login-card p.sub{ color:var(--slate); font-size:.9rem; margin-bottom:36px;}

.btn-enter{
  width:100%; padding:16px; border-radius:14px; font-size:1rem; font-weight:600;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#04060d;
  position:relative; overflow:hidden; z-index:1;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-enter:hover{ transform:translateY(-3px); box-shadow: 0 14px 40px rgba(43,108,255,.45); }
.btn-enter:active{ transform:scale(.97); }
.btn-enter .shine{
  position:absolute; top:0; left:-60%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shine 3s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-60%;} 40%,100%{ left:130%;} }

.login-foot{ margin-top:28px; font-size:.75rem; color:var(--slate); }
.login-foot b{ color:var(--cyan); }

.secure-badges{ display:flex; justify-content:center; gap:18px; margin-top:26px; }
.secure-badges span{ font-size:.68rem; color:var(--slate); display:flex; align-items:center; gap:6px;}
.secure-badges i{ width:6px;height:6px;border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan);}

/* loading overlay */
.loader-overlay{
  position:fixed; inset:0; z-index:100; background:var(--void);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px;
  opacity:0; pointer-events:none; transition: opacity .5s var(--ease);
}
.loader-overlay.show{ opacity:1; pointer-events:all; }
.loader-ring-wrap{ position:relative; width:120px; height:120px; }
.loader-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid transparent; }
.loader-ring.a{ border-top-color:var(--cyan); animation: spin 1.1s linear infinite; }
.loader-ring.b{ inset:14px; border-bottom-color:var(--blue); animation: spin 1.6s linear infinite reverse; }
.loader-ring.c{ inset:28px; border-left-color:var(--white); opacity:.5; animation: spin .9s linear infinite; }
.loader-logo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.loader-text{ font-family:'Space Grotesk'; font-size:.95rem; letter-spacing:.05em; color:var(--slate);}
.loader-text b{ color:var(--white); }
.loader-bar{ width:220px; height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.loader-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition: width .3s ease; }

/* ---------- DASHBOARD ---------- */
.dash-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; position:relative; z-index:1;}
.sidebar{
  border-right:1px solid var(--line); padding:26px 20px; display:flex; flex-direction:column; gap:6px;
  background: rgba(11,16,32,0.4);
}
.side-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; color:var(--slate); font-size:.9rem;
  transition: background .25s, color .25s;
}
.side-link:hover, .side-link.active{ background: rgba(78,225,255,0.08); color:var(--white); }
.side-link.active{ box-shadow: inset 0 0 0 1px rgba(78,225,255,0.25); color:var(--cyan);}
.dash-main{ padding:36px 44px; }
.dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:34px; flex-wrap:wrap; gap:16px;}
.dash-top h1{ font-size:1.6rem; }
.dash-top p{ color:var(--slate); font-size:.88rem; margin-top:4px;}

.balance-card{
  background: linear-gradient(135deg, var(--blue), var(--cyan) 140%);
  border-radius:22px; padding:32px; color:#04060d; position:relative; overflow:hidden; margin-bottom:34px;
}
.balance-card::after{ content:''; position:absolute; width:260px;height:260px; border-radius:50%; background:rgba(255,255,255,.15); top:-120px; right:-60px;}
.balance-card span{ font-size:.85rem; opacity:.8;}
.balance-card h2{ font-size:2.4rem; margin:10px 0 18px; font-family:'Space Grotesk';}
.balance-actions{ display:flex; gap:12px; position:relative; flex-wrap:wrap;}
.balance-actions button, .balance-actions a{ background:rgba(4,6,13,0.15); padding:10px 20px; border-radius:999px; font-size:.85rem; font-weight:600; transition:transform .25s; color:inherit; display:inline-flex; align-items:center;}
.balance-actions button:hover, .balance-actions a:hover{ transform:translateY(-2px); background:rgba(4,6,13,0.25);}

.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:34px;}
.mini-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:16px; padding:22px;
  transition: transform .3s var(--ease), border-color .3s;
}
.mini-card:hover{ transform:translateY(-4px); border-color:rgba(78,225,255,.3); }
.mini-card .top-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.mini-card .ic{ width:38px;height:38px;border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(78,225,255,.12);}
.mini-card h3{ font-size:1.3rem; }
.mini-card span{ color:var(--slate); font-size:.8rem;}

.table-card{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:18px; padding:8px; }
.table-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px;}
.table-head h3{ font-size:1.05rem;}
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); padding:12px 22px; border-top:1px solid var(--line);}
td{ padding:16px 22px; font-size:.88rem; border-top:1px solid var(--line); }
tr:hover td{ background: rgba(78,225,255,0.03); }
.badge{ padding:4px 10px; border-radius:999px; font-size:.72rem; }
.badge.success{ background:rgba(78,225,255,.12); color:var(--cyan); }
.badge.pending{ background:rgba(255,193,7,.12); color:#ffc107; }

/* toast */
.toast{
  position:fixed; bottom:26px; right:26px; z-index:200;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px 20px;
  display:flex; align-items:center; gap:12px; box-shadow:0 20px 50px rgba(0,0,0,.5);
  transform: translateY(120%); opacity:0; transition: all .5s var(--ease);
}
.toast.show{ transform:translateY(0); opacity:1; }

/* responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:50px; }
  .qr-stage{ height:320px; order:-1;}
  .nav-links{ display:none; }
  .flow{ grid-template-columns:1fr 1fr; gap:30px 0;}
  .flow::before{ display:none; }
  .dash-shell{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}