/* Sahamity — website. Aurum Noir: obsidian, champagne gold, glass. */
:root {
  --bg: #040508;
  --surface: rgba(18, 20, 27, 0.72);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f2ea;
  --muted: #a4a8b2;
  --faint: #7e838e;
  --gold-from: #f7e6b0;
  --gold-mid: #e2c16e;
  --gold-to: #b8893a;
  --gold: linear-gradient(135deg, var(--gold-from), var(--gold-mid) 45%, var(--gold-to));
  --accent: #e7c779;
  --bull: #41de9c;
  --bear: #ff6e6a;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --screen: #111216;
  --screen-fg: #fff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(226, 193, 110, 0.35); color: #fff; }

/* Language: only the chosen one shows */
html[data-lang='id'] [lang='en'],
html[data-lang='en'] [lang='id'] { display: none !important; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
section { position: relative; padding: 130px 0; }
@media (max-width: 900px) { section { padding: 84px 0; } }

/* Film grain */
.noise { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--gold); box-shadow: 0 0 12px rgba(226, 193, 110, 0.6); }

/* ───── Nav ───── */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav .bar { pointer-events: auto; display: flex; align-items: center; gap: 22px; height: 60px; padding: 0 10px 0 18px; border-radius: 999px;
  background: rgba(10, 11, 16, 0.55); border: 1px solid var(--border); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: background 0.3s, border-color 0.3s; }
.nav.scrolled .bar { background: rgba(10, 11, 16, 0.82); border-color: var(--border-strong); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 17px; letter-spacing: -0.4px; }
.brand:hover { text-decoration: none; }
.nav .spacer { flex: 1; }
.nav a.link { color: var(--muted); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav a.link:hover { color: var(--text); text-decoration: none; }
.lang { display: flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; }
.lang button { background: none; border: 0; color: var(--muted); font: 600 12px var(--sans); letter-spacing: 0.6px; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed='true'] { background: var(--text); color: var(--bg); }
.theme-btn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: none; color: var(--text); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn svg { grid-area: 1 / 1; }
html[data-theme='light'] .theme-btn .sun, html:not([data-theme='light']) .theme-btn .moon { display: none; }
.nav .get { height: 42px; padding: 0 18px; font-size: 14px; }
@media (max-width: 900px) { .nav a.link, .nav .get { display: none; } .nav .bar { gap: 12px; } }

/* ───── Type ───── */
.kicker { font: 600 11.5px var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ''; width: 22px; height: 1.5px; background: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -1px; margin: 0; }
h1 { font-size: clamp(46px, 6vw, 76px); line-height: 0.98; letter-spacing: -2.5px; margin: 24px 0 26px; }
h2 { font-size: clamp(36px, 5vw, 66px); line-height: 1.02; letter-spacing: -1.6px; }
h3 { font-size: 24px; letter-spacing: -0.5px; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 540px; margin: 0 0 36px; }
.grad { background: linear-gradient(100deg, var(--gold-from) 0%, var(--gold-mid) 30%, #fff4cf 50%, var(--gold-mid) 70%, var(--gold-to) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s ease-in-out infinite; font-style: italic; padding-right: 0.06em;
  /* The text is painted from the background, which ends at the box: extend it under descenders (the gg in menggerakkan). */
  padding-bottom: 0.16em; margin-bottom: -0.16em; }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head h2 { margin-top: 18px; }
.section-head p { color: var(--muted); font-size: 18px; margin: 20px 0 0; max-width: 620px; }
.center { text-align: center; margin-inline: auto; }
.center .kicker { justify-content: center; }
.center p { margin-inline: auto; }

/* ───── Buttons ───── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font: 600 15px var(--sans); letter-spacing: -0.2px; border: 0; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-gold { color: #0b0904; background: var(--gold); box-shadow: 0 12px 34px rgba(184, 137, 58, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-gold:hover { box-shadow: 0 18px 44px rgba(184, 137, 58, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Store buttons (links are placeholders until the listings go live) */
.store { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 18px; border-radius: 18px; color: var(--text); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: transform 0.25s var(--ease), border-color 0.25s; }
.store::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease); }
.store:hover { text-decoration: none; transform: translateY(-3px); border-color: rgba(226, 193, 110, 0.7); }
.store:hover::after { transform: translateX(120%); }
.store > span { display: flex; flex-direction: column; font: 600 19px/1.1 var(--sans); letter-spacing: -0.3px; text-align: left; }
.store small { font: 500 11px var(--sans); color: var(--muted); letter-spacing: 0.2px; margin-bottom: 3px; }
.store.primary { border-color: rgba(226, 193, 110, 0.55); box-shadow: 0 14px 40px rgba(184, 137, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* ───── Atmosphere ───── */
.aurora { position: absolute; inset: -20% -10% auto; height: 140%; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(70px) saturate(130%); }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 52vw; height: 52vw; left: 42%; top: 0; background: radial-gradient(circle, rgba(226, 193, 110, 0.30), transparent 62%); }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; left: -6%; top: 18%; background: radial-gradient(circle, rgba(120, 95, 50, 0.30), transparent 60%); animation-duration: 28s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 62%; top: 38%; background: radial-gradient(circle, rgba(65, 222, 156, 0.10), transparent 60%); animation-duration: 34s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, 6%, 0) scale(1.15); } }
.grid-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); }
.spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(226, 193, 110, 0.09), transparent 60%); }

/* ───── Hero ───── */
.hero { min-height: 100vh; padding: 150px 0 90px; display: flex; align-items: center; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); font-size: 13px; color: var(--muted); backdrop-filter: blur(8px); }
.live-pill b { color: var(--text); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); animation: ping 2s infinite; flex: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(65, 222, 156, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(65, 222, 156, 0); } }
.trust { display: grid; grid-template-columns: repeat(4, max-content); gap: 18px 36px; margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; }
.trust b { color: var(--text); font: 600 30px var(--serif); letter-spacing: -0.8px; display: block; line-height: 1.1; }
@media (max-width: 560px) { .trust { grid-template-columns: repeat(2, 1fr); gap: 18px; font-size: 12px; } .trust b { font-size: 24px; } }

.stage { position: relative; height: 740px; perspective: 1700px; }
.stage .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, -12deg)) rotateX(var(--rx, 5deg)); transition: transform 0.7s var(--ease); }
.stage .device { position: absolute; left: 50%; top: 0; width: 330px; transform: translateX(-50%); }
.stage .halo { position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(226, 193, 110, 0.26), transparent 62%); filter: blur(30px); }
.stage .comp { position: absolute; width: 262px; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(226, 193, 110, 0.25); }
.stage .comp.a { left: -12px; top: 64px; transform: translateZ(90px); }
.stage .comp.b { right: -92px; bottom: 36px; width: 290px; transform: translateZ(150px); }
.ring { position: absolute; left: 50%; top: 48%; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; border: 1px solid rgba(226, 193, 110, 0.12); pointer-events: none; animation: spin 40s linear infinite; }
.ring.r2 { width: 840px; height: 840px; margin: -420px 0 0 -420px; border-color: rgba(226, 193, 110, 0.06); animation-duration: 70s; animation-direction: reverse; }
.ring::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.float { animation: bob 7s ease-in-out infinite; }
.float.d2 { animation-delay: -2.2s; }
.float.d3 { animation-delay: -4.4s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 1000px) {
  .hero { padding-top: 120px; min-height: auto; }
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { height: 660px; margin-top: 10px; }
  .stage .comp { width: 240px; }
  .stage .comp.a { left: 0; top: 80px; }
  .stage .comp.b { right: 0; bottom: 30px; width: 260px; }
  .ring { width: 480px; height: 480px; margin: -240px 0 0 -240px; } .ring.r2 { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
}
@media (max-width: 520px) {
  .stage { height: 640px; }
  .stage .tilt { transform: rotateY(-6deg) rotateX(3deg); }
  .stage .device { width: 262px; }
  .stage .comp { width: 186px; border-radius: 14px; }
  .stage .comp.a { left: -4px; top: 64px; }
  .stage .comp.b { right: -4px; width: 206px; bottom: 26px; }
}

/* ───── Device frame (real screenshots inside) ───── */
.device { position: relative; aspect-ratio: 390 / 872; border-radius: 54px; padding: 10px;
  background: linear-gradient(145deg, #3d4049 0%, #16181d 28%, #0b0c10 62%, #2c2f37 100%);
  box-shadow: 0 0 0 1.5px #050608, 0 0 0 2.5px rgba(255, 255, 255, 0.08), 0 60px 120px rgba(0, 0, 0, 0.75), 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.45); }
.device::before, .device::after { content: ''; position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #3a3d46, #1b1d23); }
.device::before { left: -3px; top: 21%; height: 8%; box-shadow: 0 64px 0 #24262d; }
.device::after { right: -3px; top: 27%; height: 12%; }
.device .screen { position: relative; height: 100%; border-radius: 45px; overflow: hidden; background: var(--screen); display: flex; flex-direction: column; isolation: isolate; }
.device .status { flex: none; height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 2px 22px 0 28px; font: 600 12px var(--sans); color: var(--screen-fg); background: var(--screen); position: relative; z-index: 2; }
.device .island { position: absolute; top: 7px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 3; }
.device .shot { flex: 1; min-height: 0; position: relative; }
.device .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
.device .glare { position: absolute; inset: 0; border-radius: 45px; pointer-events: none; z-index: 4; background: linear-gradient(125deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 22%, transparent 40%); }

/* Hero phone alternates between the IDX and US feeds */
.shot.cycle img { opacity: 0; transform: scale(1.02); }
.shot.cycle img.on { opacity: 1; transform: none; }

/* ───── Two markets ───── */
.markets { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.market { position: relative; border-radius: 32px; padding: 34px 34px 0; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 0% 0%, rgba(226, 193, 110, 0.12), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); border: 1px solid var(--border); }
.market.us { background: radial-gradient(120% 80% at 100% 0%, rgba(120, 160, 255, 0.12), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); }
.mk-head { display: flex; align-items: center; gap: 16px; }
.mk-code { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font: 700 15px var(--sans); letter-spacing: 1px; color: #0b0904; background: var(--gold); box-shadow: 0 10px 26px rgba(184, 137, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.market.us .mk-code { color: #fff; background: linear-gradient(135deg, #3d4a6b, #1c2236); box-shadow: 0 10px 26px rgba(40, 60, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(160, 185, 255, 0.35); }
.mk-head h3 { font-size: 26px; line-height: 1.1; }
.mk-sub { color: var(--muted); font-size: 13px; letter-spacing: 1.5px; margin-top: 4px; }
.cur { margin-left: auto; font: 600 30px var(--serif); letter-spacing: -0.5px; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.market.us .cur { background: linear-gradient(135deg, #e6ecff, #9fb2e8); -webkit-background-clip: text; background-clip: text; }
.market ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 11px; font-size: 15px; color: var(--muted); }
.market li { display: flex; gap: 12px; }
.market li b { color: var(--text); }
.market li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--accent); }
.market.us li::before { background: #9fb2e8; }
.mk-phone { margin-top: auto; height: 440px; overflow: hidden; display: flex; justify-content: center; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.mk-phone .device { flex: none; width: 300px; height: max-content; transition: transform 0.8s var(--ease); }
.market:hover .mk-phone .device { transform: translateY(-14px); }
@media (max-width: 900px) { .markets { grid-template-columns: 1fr; } .market { padding: 26px 22px 0; } .mk-phone { height: 380px; } .mk-phone .device { width: 260px; } .cur { font-size: 24px; } }

/* ───── Ticker tape (real recent events) ───── */
.tape { position: relative; z-index: 1; border-block: 1px solid var(--border); background: linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)); overflow: hidden; padding: 18px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tape-track { display: flex; gap: 46px; width: max-content; animation: tape 60s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tick { display: flex; align-items: center; gap: 12px; font-size: 14px; white-space: nowrap; color: var(--muted); }
.tick b { color: var(--text); font-weight: 700; letter-spacing: 0.4px; }
.tick .v { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.tick .up { color: var(--bull); font-weight: 600; font-size: 12.5px; }
.tick .ex { font-size: 10.5px; letter-spacing: 1px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--faint); }

/* ───── How it works ───── */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps .line { position: absolute; top: 59px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 193, 110, 0.35), transparent); overflow: hidden; z-index: 2; pointer-events: none; }
.steps .line::after { content: ''; position: absolute; top: -1px; width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-from), transparent); animation: travel 3.6s var(--ease) infinite; }
@keyframes travel { from { left: -140px; } to { left: 100%; } }
.step { position: relative; padding: 30px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); border: 1px solid var(--border); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s; }
.step:hover { transform: translateY(-6px); border-color: rgba(226, 193, 110, 0.35); }
.step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--x, 50%) var(--y, 0%), rgba(226, 193, 110, 0.10), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.step:hover::before { opacity: 1; }
.step .ic { position: relative; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 26px;
  background: linear-gradient(145deg, rgba(247, 230, 176, 0.18), rgba(184, 137, 58, 0.06)); border: 1px solid rgba(226, 193, 110, 0.35); box-shadow: 0 10px 30px rgba(184, 137, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.step .ic svg { width: 28px; height: 28px; }
.step .num { position: absolute; top: 24px; right: 28px; font: 600 64px/1 var(--serif); letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1px rgba(226, 193, 110, 0.3); }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); margin: 0 0 24px; font-size: 15.5px; }
.viz { border-radius: 18px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.35); padding: 16px; min-height: 168px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; align-items: flex-start; }
.chips span { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); background: rgba(255, 255, 255, 0.03); animation: glow 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.45s); }
@keyframes glow { 0%, 70%, 100% { border-color: var(--border-strong); color: var(--muted); box-shadow: none; } 80% { border-color: rgba(226, 193, 110, 0.7); color: var(--text); box-shadow: 0 0 18px rgba(226, 193, 110, 0.25); } }
.checks { display: grid; gap: 8px; font-size: 13px; }
.checks div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); }
.checks i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; }
.checks .ok i { background: rgba(65, 222, 156, 0.15); color: var(--bull); }
.checks .no { color: var(--faint); }
.checks .no span { text-decoration: line-through; text-decoration-color: rgba(255, 110, 106, 0.6); }
.checks .no i { background: rgba(255, 110, 106, 0.13); color: var(--bear); }
.meters { display: grid; gap: 13px; font-size: 12.5px; }
.meters .m { display: grid; grid-template-columns: 96px 1fr 44px; gap: 10px; align-items: center; color: var(--muted); }
.meters .m b { color: var(--text); font-weight: 600; text-align: right; }
.meters .t { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.meters .t span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--gold); transition: width 1.6s var(--ease) 0.3s; }
.meters .t span.bull { background: linear-gradient(90deg, #1f9e6b, var(--bull)); }
.in .meters .t span { width: var(--w); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .steps .line { display: none; } .viz { min-height: 0; } }

/* ───── App tour (sticky storytelling) ───── */
.tour { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.tour .phone-col { position: sticky; top: 84px; height: calc(100vh - 100px); max-height: 840px; display: grid; place-items: center; }
.tour .phone-col .device { width: min(340px, 100%); max-height: 100%; }
.tour .phone-col .halo { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 193, 110, 0.2), transparent 62%); filter: blur(30px); }
.tour .phone-col .shot img { opacity: 0; transform: scale(1.04); }
.tour .phone-col .shot img.on { opacity: 1; transform: none; }
.chapter { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: 0.25; transition: opacity 0.6s var(--ease); }
.chapter.active { opacity: 1; }
.chapter .idx { font: 600 13px var(--sans); letter-spacing: 2px; color: var(--accent); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.chapter .idx::after { content: ''; flex: 0 0 60px; height: 1px; background: rgba(226, 193, 110, 0.4); }
.chapter h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -1.2px; margin-bottom: 18px; }
.chapter p { color: var(--muted); font-size: 17px; margin: 0 0 24px; max-width: 470px; }
.chapter ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.chapter li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.chapter li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px), rgba(226, 193, 110, 0.12); border: 1px solid rgba(226, 193, 110, 0.4); }
.chapter .mobile-shot { display: none; }
.illus { color: var(--faint); font-size: 12.5px; margin-top: 30px; }
@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; gap: 0; }
  .tour .phone-col { display: none; }
  .chapter { min-height: 0; opacity: 1; padding: 36px 0; }
  .chapter .mobile-shot { display: block; width: min(300px, 82%); margin: 30px auto 0; }
}

/* ───── Bento of real components ───── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { position: relative; grid-column: span 3; border-radius: 30px; padding: 32px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); border: 1px solid var(--border); transition: border-color 0.4s; }
.tile:hover { border-color: rgba(226, 193, 110, 0.3); }
.tile.wide { grid-column: span 4; }
.tile.narrow { grid-column: span 2; }
.tile h3 { font-size: 26px; margin-bottom: 8px; }
.tile p { color: var(--muted); margin: 0; font-size: 15px; max-width: 440px; }
.tile .comp { margin-top: 28px; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07); transition: transform 0.6s var(--ease); }
.tile:hover .comp { transform: translateY(-6px); }
.tile .comp { max-width: 470px; }
.tile.wide { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px; align-items: center; }
.tile.wide .comp { margin-top: 0; justify-self: end; width: 100%; }
.tile.wide .fx { margin-top: 0; justify-content: flex-end; }
.tile .comp.crop { aspect-ratio: 350 / 268; }
html[data-lang='id'] .tile .comp.crop { aspect-ratio: 350 / 284; } /* Indonesian scenario labels wrap to two lines */
.tile .comp.crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile .big { font: 600 clamp(64px, 8vw, 110px)/0.95 var(--serif); letter-spacing: -3px; margin: 30px 0 12px; }
.tile .big.duo { display: flex; align-items: baseline; gap: 14px; }
.tile .big.duo i { font-style: normal; color: var(--faint); }
.tile .big .gold { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile .big.gold { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile .fx { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tile .fx > span { font-size: 13px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); }
.tile .fx span b { color: var(--accent); }
.tile .glow { position: absolute; width: 440px; height: 440px; right: -170px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 193, 110, 0.16), transparent 62%); pointer-events: none; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .tile, .tile.wide, .tile.narrow { grid-column: auto; padding: 24px; } .tile.wide { display: block; } .tile.wide .comp { margin-top: 24px; } .tile.wide .fx { margin-top: 22px; justify-content: flex-start; } }

/* ───── Pricing ───── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { position: relative; border-radius: 32px; padding: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); border: 1px solid var(--border); }
.plan.pro { background: linear-gradient(160deg, rgba(226, 193, 110, 0.16), rgba(20, 18, 12, 0.6) 45%, rgba(10, 10, 12, 0.9)); border-color: rgba(226, 193, 110, 0.45);
  box-shadow: 0 40px 100px rgba(184, 137, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.plan.best::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a), transparent 0 72%, var(--gold-from) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orbit 6s linear infinite; pointer-events: none; }
@keyframes orbit { to { --a: 360deg; } }
.plan .name { min-height: 28px; font: 600 13px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.plan.pro .name { color: var(--accent); }
.plan .badge { margin-left: auto; font-size: 10.5px; letter-spacing: 1px; padding: 5px 10px; border-radius: 999px; color: #0b0904; background: var(--gold); }
.plan .price { font: 600 clamp(38px, 3.6vw, 48px)/1 var(--serif); letter-spacing: -1.6px; margin: 22px 0 8px; font-variant-numeric: tabular-nums; }
.plan .price small { display: block; margin-top: 8px; font: 500 16px var(--sans); color: var(--muted); letter-spacing: 0; }
.plan .sub { color: var(--muted); font-size: 14px; min-height: 22px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 13px; }
.plan li { display: flex; gap: 12px; font-size: 15px; }
.plan li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--bull); background: rgba(65, 222, 156, 0.12); }
.plan.pro li::before { color: #0b0904; background: var(--gold); }
.plan li.off { color: var(--faint); }
.plan li.off::before { content: '–'; color: var(--faint); background: rgba(255, 255, 255, 0.05); }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .plan { padding: 28px; } }

/* ───── Finale ───── */
.finale { text-align: center; overflow: hidden; padding: 170px 0; }
.finale .wrap { position: relative; z-index: 1; }
.finale h2 { font-size: clamp(44px, 7vw, 100px); letter-spacing: -2.6px; line-height: 0.98; }
.finale p { color: var(--muted); font-size: 19px; margin: 24px auto 40px; max-width: 520px; }
.finale .cta { justify-content: center; }
.finale .mark { width: 88px; height: 88px; margin: 0 auto 32px; filter: drop-shadow(0 20px 40px rgba(184, 137, 58, 0.45)); }

/* ───── Footer ───── */
footer { border-top: 1px solid var(--border); padding: 56px 0 64px; color: var(--faint); font-size: 13.5px; }
footer .top { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
footer nav a { color: var(--muted); }
.disclaimer { max-width: 760px; margin: 26px 0 10px; line-height: 1.6; }

/* ───── Reveal ───── */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.split .w { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--i) * 70ms + 100ms); }
.split.in .w { opacity: 1; transform: none; filter: none; }

/* ───── First-visit language picker ───── */
.langpick { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: lp-in 0.35s ease both; }
.langpick[hidden] { display: none; }
.langpick .card { position: relative; width: min(440px, 100%); text-align: center; padding: 38px 28px 30px; border-radius: 30px; background: linear-gradient(170deg, rgba(226, 193, 110, 0.12), rgba(14, 15, 20, 0.96) 40%); border: 1px solid rgba(226, 193, 110, 0.4); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7); animation: lp-up 0.5s var(--ease) both; }
.langpick .mark { display: block; width: 56px; height: 56px; margin: 0 auto 18px; }
.langpick h2 { font-size: 32px; margin: 12px 0 6px; letter-spacing: -0.8px; }
.langpick h2 em { display: block; font-style: italic; font-size: 20px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.langpick p { color: var(--muted); margin: 0 0 26px; font-size: 14px; }
.langpick .theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.langpick .theme-pick button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px; border-radius: 16px; border: 1px solid var(--border-strong); background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.langpick .theme-pick button:hover { border-color: var(--gold-mid); color: var(--text); }
.langpick .theme-pick button[aria-pressed='true'] { border-color: var(--accent); color: var(--text); background: rgba(226, 193, 110, 0.12); }
.langpick .opts { display: grid; gap: 12px; }
.langpick .opts button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 600 16px var(--sans); cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.langpick .opts button:hover, .langpick .opts button:focus-visible { border-color: var(--gold-mid); background: rgba(226, 193, 110, 0.08); outline: none; transform: translateY(-1px); }
.langpick .opts small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.langpick .flag { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 13px var(--sans); letter-spacing: 1px; color: #0b0904; background: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(184, 137, 58, 0.3); }
.langpick .opts button::after { content: '→'; margin-left: auto; color: var(--muted); transition: transform 0.2s, color 0.2s; }
.langpick .opts button:hover::after { transform: translateX(4px); color: var(--accent); }
@keyframes lp-in { from { opacity: 0; } }
@keyframes lp-up { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

/* ───── Legal pages ───── */
.legal { padding: 140px 0 90px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(38px, 5.4vw, 60px); margin: 16px 0 8px; letter-spacing: -1.4px; }
.legal .updated { color: var(--faint); font-size: 13px; }
.legal .intro { color: var(--muted); font-size: 17px; margin: 22px 0 30px; }
.legal .card { margin-bottom: 14px; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); border: 1px solid var(--border); }
.legal .card h2 { font-family: var(--sans); font-size: 17px; letter-spacing: -0.2px; margin-bottom: 10px; }
.legal .card p { font-size: 15px; margin: 0 0 10px; }
.legal .card p:last-child { margin-bottom: 0; }
.legal .card ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.legal .support-contact { border-color: rgba(226, 193, 110, 0.4); background: linear-gradient(170deg, rgba(226, 193, 110, 0.1), rgba(255, 255, 255, 0.012) 60%); }
.legal .support-contact .btn { margin-top: 8px; height: 50px; }
.legal .card a { overflow-wrap: anywhere; }
.delete-form { margin-bottom: 14px; padding: 26px; border-radius: 22px; border: 1px solid var(--bear); }
.delete-form h2 { font-family: var(--sans); font-size: 20px; letter-spacing: -0.3px; margin-bottom: 16px; }
.delete-form [hidden] { display: none; }
.delete-form p { font-size: 15px; margin: 0 0 14px; }
.delete-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.delete-form input { display: block; width: 100%; height: 50px; padding: 0 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: 500 16px var(--sans); }
.delete-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.delete-form .btn { width: 100%; height: 50px; }
.delete-form .btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-danger { color: #fff; background: #b3332c; }
.delete-form .form-error { margin: 14px 0 0; color: var(--bear); font-weight: 500; }

/* ───── Light theme ───── */
html[data-theme='light'] {
  --bg: #f5f2eb;
  --surface: rgba(255, 255, 255, 0.86);
  --border: rgba(20, 18, 12, 0.1);
  --border-strong: rgba(20, 18, 12, 0.18);
  --text: #0e0d0a;
  --muted: #55524a;
  --faint: #6b675f;
  --accent: #7d5f12;
  --bull: #0a7a4e;
  --bear: #b3332c;
  --screen: #f5f2eb;
  --screen-fg: #0e0d0a;
  color-scheme: light;
}
html[data-theme='light'] ::selection { color: #0e0d0a; }
html[data-theme='light'] .noise { opacity: 0.025; }
html[data-theme='light'] .nav .bar { background: rgba(255, 253, 248, 0.72); box-shadow: 0 16px 40px rgba(60, 45, 15, 0.1), inset 0 1px 0 #fff; }
html[data-theme='light'] .nav.scrolled .bar { background: rgba(255, 253, 248, 0.92); }
html[data-theme='light'] .grad { background-image: linear-gradient(100deg, #6f5310 0%, #9a7420 30%, #c79f45 50%, #9a7420 70%, #6f5310 100%); }
html[data-theme='light'] .store { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7)); box-shadow: 0 12px 28px rgba(60, 45, 15, 0.12), inset 0 1px 0 #fff; }
html[data-theme='light'] .store::after { background: linear-gradient(115deg, transparent 30%, rgba(226, 193, 110, 0.25) 50%, transparent 70%); }
html[data-theme='light'] .store.primary { border-color: rgba(140, 107, 23, 0.5); }
html[data-theme='light'] .aurora i { mix-blend-mode: normal; opacity: 0.75; }
html[data-theme='light'] .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(214, 174, 82, 0.2), transparent 60%); }
html[data-theme='light'] .grid-lines { background-image: linear-gradient(rgba(20, 18, 12, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 18, 12, 0.05) 1px, transparent 1px); }
html[data-theme='light'] .live-pill { background: rgba(255, 255, 255, 0.65); }
html[data-theme='light'] .device { box-shadow: 0 0 0 1.5px #050608, 0 40px 80px rgba(60, 45, 15, 0.28), 0 14px 34px rgba(60, 45, 15, 0.18), inset 0 0 2px rgba(255, 255, 255, 0.45); }
html[data-theme='light'] .device .glare { background: linear-gradient(125deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 40%); }
html[data-theme='light'] .stage .comp { box-shadow: 0 30px 70px rgba(60, 45, 15, 0.28), 0 0 0 1px rgba(140, 107, 23, 0.3); }
html[data-theme='light'] .tile .comp { box-shadow: 0 22px 54px rgba(60, 45, 15, 0.18), 0 0 0 1px rgba(20, 18, 12, 0.08); }
html[data-theme='light'] .step,
html[data-theme='light'] .tile,
html[data-theme='light'] .plan,
html[data-theme='light'] .legal .card { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.72)); box-shadow: 0 18px 44px rgba(60, 45, 15, 0.07); }
html[data-theme='light'] .market { background: radial-gradient(120% 80% at 0% 0%, rgba(214, 174, 82, 0.2), transparent 55%), linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.72)); }
html[data-theme='light'] .market.us { background: radial-gradient(120% 80% at 100% 0%, rgba(90, 125, 220, 0.14), transparent 55%), linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.72)); }
html[data-theme='light'] .cur,
html[data-theme='light'] .tile .big .gold,
html[data-theme='light'] .tile .big.gold { background: linear-gradient(135deg, #9a7420, #6f5310); -webkit-background-clip: text; background-clip: text; }
html[data-theme='light'] .market.us .cur { background: linear-gradient(135deg, #2a4fc4, #1c2236); -webkit-background-clip: text; background-clip: text; }
html[data-theme='light'] .market.us li::before { background: #2a4fc4; }
html[data-theme='light'] .tape { background: rgba(255, 255, 255, 0.55); }
html[data-theme='light'] .step .ic { background: linear-gradient(145deg, #fff9e8, #f3e4bc); border-color: rgba(140, 107, 23, 0.35); box-shadow: 0 10px 26px rgba(140, 107, 23, 0.14); }
html[data-theme='light'] .step .num { -webkit-text-stroke-color: rgba(140, 107, 23, 0.35); }
html[data-theme='light'] .viz { background: rgba(245, 242, 235, 0.7); }
html[data-theme='light'] .chips span,
html[data-theme='light'] .checks div,
html[data-theme='light'] .tile .fx > span { background: #fff; }
html[data-theme='light'] .meters .t { background: rgba(20, 18, 12, 0.08); }
html[data-theme='light'] .meters .t span.bull { background: linear-gradient(90deg, #0a7a4e, #2fb37e); }
html[data-theme='light'] .plan.pro { background: linear-gradient(160deg, #fff9e8, #f3e4bc); border-color: rgba(140, 107, 23, 0.4); box-shadow: 0 30px 70px rgba(140, 107, 23, 0.16), inset 0 1px 0 #fff; }
html[data-theme='light'] .plan.best::before { background: conic-gradient(from var(--a), transparent 0 72%, #9a7420 82%, transparent 92%); }
html[data-theme='light'] .plan li::before { background: rgba(10, 122, 78, 0.1); }
html[data-theme='light'] .plan.pro li::before { background: var(--gold); }
html[data-theme='light'] .plan li.off::before { background: rgba(20, 18, 12, 0.06); }
html[data-theme='light'] .langpick { background: rgba(245, 242, 235, 0.72); }
html[data-theme='light'] .langpick .card { background: linear-gradient(170deg, #fff9e8, #fff 40%); border-color: rgba(140, 107, 23, 0.35); box-shadow: 0 40px 90px rgba(60, 45, 15, 0.2); }
html[data-theme='light'] .langpick .opts button { background: #fff; }
html[data-theme='light'] .langpick .opts button:hover,
html[data-theme='light'] .langpick .opts button:focus-visible { background: #fff9e8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .split .w { opacity: 1; transform: none; filter: none; }
}