/* vitap.id — landing: langit berawan, panel hero biru, kartu kaca mengambang, chip & statistik kaca. Hanya dimuat di index.html. */
body.landing {
  --sky-1: #cfe6ff; --sky-2: #eaf4ff; --blue: #2f6bf0; --blue-2: #4a86ff; --blue-deep: #1d4fd6; --lime: #c9f26b; --lime-deep: #b2e04a; --navy: #0e1b3d;
  --accent: var(--blue); --accent-deep: var(--blue-deep); --accent-soft: #e5eeff; --band: linear-gradient(100deg, #4a86ff 0%, #2f6bf0 55%, #1d4fd6 100%);
  /* Hallmark · motion: tiga kurva bernama, tanpa overshoot; durasi mikro/pendek/panjang */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, #f4f8ff 70%, #f7f9fd 100%); color: var(--navy); overflow-x: hidden;
}
.landing .page-loader { background: linear-gradient(180deg, var(--sky-1), #f4f8ff); }
.landing .page-loader i { background: rgba(47, 107, 240, .15); }
.landing .page-loader i::after { background: linear-gradient(90deg, var(--blue-2), var(--blue-deep)); }

/* ---------- awan (radial blob kabur) ---------- */
.cloud { position: absolute; pointer-events: none; filter: blur(16px); opacity: .95;
  background:
    radial-gradient(closest-side at 26% 62%, #fff 0 60%, transparent 100%),
    radial-gradient(closest-side at 50% 42%, #fff 0 62%, transparent 100%),
    radial-gradient(closest-side at 74% 60%, #fff 0 58%, transparent 100%),
    radial-gradient(closest-side at 50% 78%, rgba(255,255,255,.9) 0 70%, transparent 100%); }

/* ---------- hero ---------- */
.lp-hero { position: relative; padding: clamp(18px, 4vw, 56px) clamp(12px, 3vw, 40px) 40px; }
.lp-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lp-sky .cloud.s1 { width: 520px; height: 220px; left: -160px; top: 46%; --dx: 60px; }
.lp-sky .cloud.s2 { width: 600px; height: 240px; right: -200px; top: 38%; --dx: -70px; --dur: 46s; }
.lp-sky .cloud.s3 { width: 900px; height: 260px; left: 10%; bottom: -150px; --dx: 50px; --dur: 52s; opacity: .9; }
.lp-panel {
  position: relative; max-width: 1240px; margin: 0 auto; min-height: min(760px, calc(100svh - 60px)); border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 18%, #5a92ff 0%, #3a74f4 40%, #2c63e8 70%, #2558db 100%);
  box-shadow: 0 50px 90px -40px rgba(29, 79, 214, .6), inset 0 1px 0 rgba(255,255,255,.35);
  display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr auto; padding: 26px 32px 30px; color: #fff;
  animation: panelIn 600ms var(--ease-out) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lp-glow { position: absolute; left: 50%; top: 8%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 205, 255, .65), transparent); filter: blur(10px); z-index: -1; }
.lp-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-clouds .cloud.c1 { width: 40%; height: 26%; left: -12%; top: 28%; --dx: 30px; --dur: 34s; opacity: .8; }
.lp-clouds .cloud.c2 { width: 46%; height: 30%; right: -12%; top: 25%; --dx: -36px; --dur: 38s; opacity: .85; }
.lp-clouds .cloud.c3 { width: 30%; height: 18%; left: 35%; top: 52%; --dx: 24px; --dur: 30s; opacity: .45; }
.lp-clouds .cloud.c4 { width: 36%; height: 22%; right: 2%; top: 60%; --dx: -20px; --dur: 44s; opacity: .4; }
.lp-clouds .cloud.c5 { width: 30%; height: 18%; left: 8%; top: 8%; --dx: 26px; --dur: 50s; opacity: .35; }
/* tangga perspektif di bawah kartu */
.lp-steps { position: absolute; left: 50%; top: 47%; width: 26%; height: 22%; translate: -50% 0; perspective: 300px; z-index: 0; pointer-events: none; }
.lp-steps i { position: absolute; left: 0; right: 0; height: 12%; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04)); transform: rotateX(58deg);
  top: calc(var(--k) * 15%); scale: calc(.62 + var(--k) * .09) 1; opacity: calc(.95 - var(--k) * .12); }

/* ---------- navigasi pil kaca ---------- */
.lp-nav { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; position: relative; z-index: 3; animation: fadeDown var(--dur-long) var(--ease-out) 100ms both; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 700 20px/1 var(--head); letter-spacing: -.02em; text-decoration: none !important; }
.lp-brand img { width: 34px; height: 34px; filter: drop-shadow(0 6px 12px rgba(10, 30, 90, .25)); transition: transform var(--dur-short) var(--ease-out); }

.lp-brand span { opacity: .75; font-weight: 600; margin-left: -10px; }
.lp-menu { display: flex; align-items: center; gap: 6px; }
.lp-links { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px -14px rgba(10, 30, 90, .45); }
.lp-links a { padding: 9px 16px; border-radius: 999px; color: var(--navy); font: 500 13.5px/1 var(--head); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }

.lp-acc { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; background: #fff; color: var(--navy); font: 600 13.5px/1 var(--head); text-decoration: none !important;
  box-shadow: 0 10px 30px -14px rgba(10, 30, 90, .45); transition: transform var(--dur-short) var(--ease-out); }

.lp-acc svg { width: 18px; height: 18px; }

/* ---------- panggung: kartu kaca + chip ---------- */
.lp-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lp-stage > * { pointer-events: auto; }
.lp-card-wrap { position: absolute; left: 50%; top: 16%; width: clamp(250px, 27vw, 340px); translate: -50% 0; perspective: 1200px; }
.lp-card-in { animation: cardIn 700ms var(--ease-out) 150ms both; transform-style: preserve-3d; }
.lp-card { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform 700ms var(--ease-in-out); cursor: pointer; }
.lp-card.flipped { transform: rotateY(180deg); }
.lp-card-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-long) var(--ease-out); transform-style: preserve-3d; }
@keyframes cardIn { from { opacity: 0; transform: translateY(-16px) rotateX(14deg) scale(.96); } to { opacity: 1; transform: none; } }
.lp-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 16px 18px; color: #fff;
  background: linear-gradient(140deg, rgba(255, 150, 226, .92) 0%, rgba(214, 120, 255, .86) 45%, rgba(150, 128, 255, .82) 100%);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 30px 50px -24px rgba(40, 20, 120, .55), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(12px); }
.lp-face::before, .lp-face::after { content: ""; position: absolute; pointer-events: none; }
.lp-face::before { inset: 0; background: linear-gradient(118deg, transparent 0 38%, rgba(255,255,255,.18) 38% 62%, transparent 62%), linear-gradient(200deg, transparent 0 55%, rgba(255,255,255,.12) 55% 75%, transparent 75%); }
.lp-face::after { inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); transform: translateX(-60%); animation: shine 900ms var(--ease-in-out) 700ms both; }
@keyframes shine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.lp-back { transform: rotateY(180deg); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.lp-face .nm { position: relative; font: 600 13px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; opacity: .95; }
.lp-face .tt { position: relative; font: 400 11.5px/1.3 var(--head); opacity: .85; margin-top: 3px; }
.lp-face .lg { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; }
.lp-face .lbl { position: absolute; left: 18px; bottom: 38px; font: 400 10px/1 var(--head); opacity: .75; }
.lp-face .num { position: absolute; left: 18px; bottom: 16px; font: 500 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; opacity: .95; }
.lp-face .qr { position: absolute; right: 16px; bottom: 14px; width: 46px; height: 46px; padding: 3px; border-radius: 6px; background: rgba(255,255,255,.2); }
.lp-face .qr .m, .lp-back .qrb .m { fill: #fff; }
.lp-back .qrb { width: 92px; height: 92px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.18); position: relative; }
.lp-back b { display: block; font: 600 15px/1.2 var(--head); position: relative; }
.lp-back p { margin: 6px 0 0; font: 400 12px/1.4 var(--head); opacity: .9; position: relative; }

.lp-chip { position: absolute; left: var(--x); top: var(--y); min-width: 116px; padding: 12px 14px 12px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, rgba(140, 175, 255, .5), rgba(60, 110, 240, .32)); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(10px);
  box-shadow: 0 18px 30px -20px rgba(10, 30, 90, .5); font: 500 12.5px/1.2 var(--head); text-shadow: 0 1px 6px rgba(20, 50, 140, .35);
  animation: chipIn var(--dur-long) var(--ease-out) both; animation-delay: var(--in, 300ms); }
.lp-chip svg { display: block; width: 18px; height: 18px; margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-chip .tag { position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: 6px; background: #fff; color: var(--navy); font: 600 9.5px/1 var(--head); }
.lp-chip .tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--navy); margin-right: 4px; vertical-align: 1px; }
@keyframes chipIn { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }

/* ---------- teks & CTA ---------- */
.lp-copy { grid-column: 1; grid-row: 3; position: relative; z-index: 3; align-self: end; max-width: 620px; }
.lp-copy::before { content: ""; position: absolute; inset: -40px -60px -30px -60px; z-index: -1; background: radial-gradient(closest-side, rgba(36, 86, 220, .55), transparent); pointer-events: none; }
.lp-copy h1 { font: 700 clamp(34px, 4vw, 54px)/1.03 var(--head); letter-spacing: -.035em; margin: 0 0 16px; color: #fff; text-shadow: 0 8px 28px rgba(10, 30, 90, .35); }
.lp-copy h1 .w { display: inline-block; animation: wordIn 600ms var(--ease-out) both; animation-delay: calc(250ms + var(--i) * 40ms); }
@keyframes wordIn { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.lp-copy p { margin: 0 0 22px; font: 400 15px/1.55 var(--head); color: rgba(255,255,255,.86); max-width: 440px; animation: wordIn 600ms var(--ease-out) 450ms both; }
.lp-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; animation: wordIn 600ms var(--ease-out) 500ms both; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; background: var(--lime); color: var(--navy); font: 600 14.5px/1 var(--head); text-decoration: none !important;
  box-shadow: 0 14px 30px -14px rgba(120, 180, 20, .9); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); position: relative; overflow: hidden; }

.lp-btn.ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.4); }

.lp-note { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--head); color: rgba(255,255,255,.9); }
.lp-note i { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; font-style: normal; font-size: 12px; }

/* ---------- statistik kaca ---------- */
.lp-stats { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 12px; position: relative; z-index: 3; }
.lp-stat { position: relative; padding: 16px 16px 14px; min-height: 128px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(12px);
  animation: chipIn var(--dur-long) var(--ease-out) both; animation-delay: calc(550ms + var(--i) * 60ms); }
.lp-stat b { font: 600 30px/1 var(--head); letter-spacing: -.02em; }
.lp-stat small { display: block; margin-top: 8px; font: 400 12px/1.3 var(--head); color: rgba(255,255,255,.85); }
.lp-stat .up { position: absolute; top: 12px; right: 12px; font: 600 11.5px/1.1 var(--head); text-align: right; }
.lp-stat .up em { display: block; font-style: normal; font-weight: 400; opacity: .8; font-size: 10.5px; }

/* ---------- navigasi lengket setelah hero lewat ---------- */
.lp-topnav { position: fixed; top: 12px; left: 50%; z-index: 50; translate: -50% -140%; display: flex; align-items: center; gap: 14px; padding: 7px 7px 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -20px rgba(10, 30, 90, .5); transition: translate var(--dur-long) var(--ease-out); }
.lp-topnav.show { translate: -50% 0; }
.lp-topnav .lp-brand { color: var(--navy); font-size: 16px; } .lp-topnav .lp-brand img { width: 26px; height: 26px; filter: none; }
.lp-topnav a.lnk { color: var(--navy); font: 500 13px/1 var(--head); padding: 8px 10px; border-radius: 999px; text-decoration: none; }

.lp-topnav .lp-btn { padding: 10px 16px; font-size: 13px; }

/* ---------- bagian bawah: kaca terang ---------- */
.landing .wrap { position: relative; }
.landing .section h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; }
.landing .card, .landing .ncard { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.9); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -28px rgba(29, 79, 214, .45); }
.landing .ncard .ic { background: #e5eeff; color: var(--blue); }
.landing .theme-opt { background: rgba(255,255,255,.8); border-color: #dfe8f8; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }

.landing .theme-opt.on { border-color: var(--blue); background: #edf3ff; }
.landing .pill-nav { background: #dfe8f8; }
.landing .btn.red { background: var(--lime); border-color: var(--lime); color: var(--navy); }

.landing .plan2.featured { outline-color: var(--blue); }
.landing .plan2 .price { color: var(--blue-deep); }
.landing .ncframe .screen { box-shadow: 0 40px 70px -40px rgba(29, 79, 214, .55), 0 0 0 1px rgba(255,255,255,.9); }
.landing .section-sky { position: relative; }
.landing .section-sky .cloud { z-index: -1; }
.landing footer.foot { border-top-color: #dfe8f8; }

/* ---------- layar kecil ---------- */
@media (max-width: 980px) {
  .lp-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding: 18px 18px 22px; min-height: 0; }
  .lp-links { display: none; }
  .lp-stage { position: relative; inset: auto; height: clamp(300px, 70vw, 420px); grid-row: 2; margin: 6px -18px 0; }
  .lp-card-wrap { top: 18%; width: min(300px, 64vw); }
  .lp-steps { top: 64%; width: 50%; }
  .lp-chip { min-width: 0; padding: 9px 11px; font-size: 11.5px; }
  .lp-chip svg { margin-bottom: 6px; width: 16px; height: 16px; }
  .lp-chip .tag { display: none; }
  .lp-copy { grid-row: 3; margin-top: 4px; }
  .lp-stats { grid-column: 1; grid-row: 4; justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; gap: 8px; }
  .lp-stat { min-height: 96px; padding: 12px; } .lp-stat b { font-size: 22px; } .lp-stat .up { display: none; }
  .lp-steps i { border-radius: 4px; }
  .lp-topnav a.lnk { display: none; }
}
@media (max-width: 980px) {
  /* chip mengelilingi kartu, tidak tertutup */
  .lp-chip.c1 { left: 5%; top: 66%; } .lp-chip.c2 { left: auto; right: 5%; top: 72%; }
  .lp-chip.c3 { left: 4%; top: 4%; } .lp-chip.c4 { left: auto; right: 4%; top: 2%; }
}
@media (max-width: 520px) {
  .lp-chip.c3, .lp-chip.c4 { display: none; }
  .lp-stage { height: clamp(330px, 92vw, 400px); }
  .lp-card-wrap { top: 10%; width: min(290px, 76vw); }
  .lp-steps { top: 56%; }
  .lp-copy h1 { font-size: 34px; }
  .lp-copy p { font-size: 14px; }
  .lp-cta { gap: 10px; } .lp-btn { padding: 13px 20px; }
  .lp-stat { min-height: 84px; padding: 10px 10px 9px; border-radius: 14px; }
  .lp-stat b { font-size: 19px; } .lp-stat small { font-size: 10.5px; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .lp-card-in, .lp-chip, .lp-stat, .lp-panel, .lp-copy *, .lp-face::after, }

/* foto pada kartu kaca hero */
.lp-face .ph { position: absolute; left: 16px; top: 15px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 14px -6px rgba(40, 20, 120, .6); }
.lp-front .nm, .lp-front .tt { margin-left: 56px; margin-right: 34px; }
.lp-front .nm { margin-top: 4px; }

/* hover hanya untuk perangkat berpointer: di layar sentuh, hover tidak "menempel" setelah ketukan */
@media (hover: hover) and (pointer: fine) { /* hallmark:hover */
  .lp-brand:hover img { transform: translateY(-1px); }
  .lp-links a:hover { background: #eef3ff; color: var(--blue); }
  .lp-acc:hover { transform: translateY(-1px); }
  .lp-btn:hover { transform: translateY(-1px); background: var(--lime-deep); }
  .lp-btn.ghost:hover { background: rgba(255,255,255,.26); }
  .lp-topnav a.lnk:hover { background: #eef3ff; }
  .landing .theme-opt:hover { transform: translateY(-1px); }
  .landing .btn.red:hover { background: var(--lime-deep); box-shadow: 0 10px 20px -12px rgba(120, 180, 20, .9); }
}

/* tekan & fokus di landing; di panel biru cincin fokus berwarna putih agar terlihat */
.lp-btn:active, .lp-acc:active, .lp-links a:active, .lp-topnav a:active { transform: scale(.97); transition: transform var(--dur-micro) var(--ease-in); }
.lp-panel :focus-visible { outline: 2px solid #fff; outline-offset: 3px; transition: none; }
.lp-topnav :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lp-card:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 16px; }
@media (pointer: coarse) { .lp-btn, .lp-acc, .lp-topnav .lp-btn { min-height: 44px; } }