/* ==========================================================================
   Halaman publik.
   Memakai token, font, radius, dan komponen yang sama dengan dashboard
   (app.css). Berkas ini hanya menambah komposisi khusus halaman pemasaran,
   tidak pernah mendefinisikan ulang warna dasar.

   Aturan yang dipegang sama dengan app.css:
   - Radius hanya dari kelima token skala.
   - Setiap pasangan teks/latar >= 4.5:1.
   - Gerak dimatikan pada prefers-reduced-motion.
   ========================================================================== */

.lp {
  background: var(--bg);
  /* Permukaan browser ikut bertema, bukan bawaan sistem. */
  scrollbar-color: var(--line-strong) var(--bg);
  scroll-behavior: smooth;
}
.lp ::selection { background: var(--accent-soft); color: var(--accent-text); }
.lp :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-chip); }
.lp input { caret-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .lp { scroll-behavior: auto; }
}

.lp-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  z-index: 100;
}
.lp-skip:focus { left: 12px; }

.lp-wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   Tipografi halaman
   -------------------------------------------------------------------------- */

.lp-h1 {
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  /* Penyeimbang baris menggantikan <br> paksaan, yang pada 1440px justru
     menyisakan kata "Anda," sendirian di satu baris. */
  text-wrap: balance;
  max-width: 16ch;
  overflow-wrap: break-word;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 640;
  margin: 0 0 20px;
  color: var(--text);
}

.lp-h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.038em;
  font-weight: 620;
  margin: 0 0 14px;
  max-width: 20ch;
  text-wrap: balance;
}

.lp-h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 10px;
}

.lp-h4 {
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  font-weight: 620;
  margin: 0 0 10px;
}

/* Jarak di atas judul selalu lebih besar daripada di bawahnya. */
.lp-mt { margin-top: 34px; }

.lp-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 28px;
}

.lp-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
  margin: 0 0 40px;
}
.lp-sub--left { margin-bottom: 0; }
.lp-sub--center { margin-inline: auto; text-align: center; }

.lp-caption {
  font-size: 12px;
  color: var(--text-faint);
  margin: 12px 0 0;
}
.lp-caption--center { text-align: center; margin-top: 26px; }

.lp-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 22px 0 0;
  max-width: 70ch;
}

.lp-inline {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 2px 6px;
}

/* --------------------------------------------------------------------------
   Navigasi
   -------------------------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.lp-nav__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--text);
  font-size: 15px;
}
.lp-brand:hover { text-decoration: none; color: var(--text); }
.lp-brand__mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--r-tile);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.lp-nav__links {
  display: flex;
  gap: 22px;
  margin-inline: auto;
}
.lp-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.lp-nav__links a:hover {
  color: var(--text);
  text-decoration: none;
  border-bottom-color: var(--accent);
}

.lp-nav__actions { display: flex; gap: 8px; align-items: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.lp-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 68px 0 76px;
}
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.lp-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-cta--center { justify-content: center; }

.btn--lg {
  padding: 11px 22px;
  font-size: 14.5px;
  border-radius: var(--r-control);
}

.lp-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 22px 0 0;
}
.lp-trust .ph { color: var(--accent-text); font-size: 16px; }

.lp-device { margin-bottom: 0; box-shadow: var(--shadow); }
.lp-device__name { font-size: 15px; }
.lp-device__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.lp-device__count {
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Linimasa tiga langkah
   -------------------------------------------------------------------------- */

.lp-steps { padding: 84px 0 88px; }

.lp-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 56px;
  position: relative;
}
.lp-step:last-child { padding-bottom: 0; }

/* Garis penghubung antar langkah, digambar dari penanda waktu. */
.lp-step::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 30px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.lp-step:last-child::before { display: none; }

.lp-step__mark { position: relative; z-index: 1; }
.lp-step__time {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  width: 64px;
  padding: 4px 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lp-step__body p {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 18px;
}

.lp-mock { max-width: 420px; margin-bottom: 0; box-shadow: var(--shadow-sm); }
/* Dibatasi selebar isinya; sebelumnya melebar penuh dan menyisakan ruang
   kosong besar di kanan kartu. */
.lp-mock--qr { max-width: 560px; }
.lp-mock__btn { pointer-events: none; }

.lp-qrbox {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.lp-qr {
  width: 148px;
  height: 148px;
  flex: 0 0 148px;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 10px;
  background: #ffffff;
}
.lp-qr svg { display: block; width: 100%; height: 100%; }
.lp-qr__side { min-width: 200px; flex: 1; }
.lp-qr__status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 550;
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--text);
}
.lp-qr__hint { margin: 0; }

/* Satu momen gerak yang diotori: status berpindah ke tersambung saat
   langkah ini masuk layar. Bukan efek hover yang tersebar. */
.lp-qr__status.is-linked { color: var(--accent-text); }
.lp-qr__status.is-linked .dot { background: var(--success); }

.lp-send { display: grid; gap: 18px; }
.lp-send__out {
  display: grid;
  grid-template-columns: minmax(0, 420px) 236px;
  gap: 22px;
  align-items: start;
  justify-content: start;
}
.lp-resp { display: grid; gap: 10px; justify-items: start; }
.lp-resp .lp-code { width: 100%; }

/* --------------------------------------------------------------------------
   Blok kode
   -------------------------------------------------------------------------- */

.lp-code {
  background: #101820;
  color: #d7dee6;
  border: 1px solid #1d2831;
  border-radius: var(--r-surface);
  padding: 16px 18px;
  margin: 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}
.lp-code--sm { font-size: 12.5px; padding: 14px 16px; }
.lp-code code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
/* Warna sintaks diverifikasi >= 4.5:1 terhadap latar #101820. */
.lp-code .c-str { color: #8fd3a4; }
.lp-code .c-key { color: #8ec5f0; }
.lp-code .c-fn { color: #f0c987; }
.lp-code .c-kw { color: #d7a8e8; }
.lp-code .c-cm { color: #93a2ae; }

/* --------------------------------------------------------------------------
   Ponsel peraga
   -------------------------------------------------------------------------- */

.lp-phone {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-surface);
  overflow: hidden;
  background: #e9e2d9;
  box-shadow: var(--shadow);
}
.lp-phone__bar {
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.lp-phone__screen { padding: 14px; min-height: 128px; }
.lp-bubble {
  background: #d4f5c8;
  color: #10310a;
  border-radius: var(--r-tile);
  padding: 9px 12px 6px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 92%;
  margin-left: auto;
}
.lp-bubble__meta {
  display: block;
  text-align: right;
  font-size: 10.5px;
  color: #3d5c35;
  margin-top: 3px;
}
.lp-bubble__meta .ph { font-size: 12px; vertical-align: -1px; }

/* --------------------------------------------------------------------------
   Bagian berlatar
   -------------------------------------------------------------------------- */

.lp-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 84px 0 88px;
}
.lp-band--tint {
  background:
    radial-gradient(900px 380px at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}

/* Daftar kemampuan sebagai lembar spesifikasi, bukan deretan kartu seragam. */
.lp-spec { border-top: 1px solid var(--line); }
.lp-spec__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.lp-spec__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}
.lp-spec__label .ph { color: var(--accent-text); font-size: 19px; }
.lp-spec__body p {
  margin: 0;
  line-height: 1.65;
  max-width: 66ch;
  color: var(--text);
}
.lp-spec__detail {
  margin-top: 8px !important;
  font-size: 13.5px;
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   API
   -------------------------------------------------------------------------- */

.lp-api { padding: 84px 0 88px; }
.lp-api__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lp-api__main p { color: var(--text-muted); line-height: 1.65; max-width: 62ch; margin: 0 0 14px; }
.lp-api__main pre + p { margin-top: 10px; }
.lp-api__wide { margin-top: 64px; }
.lp-api__wide > p { color: var(--text-muted); line-height: 1.65; max-width: 68ch; }

.lp-api__side {
  position: sticky;
  top: 76px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: 20px;
}
.lp-endpoints { display: grid; gap: 18px; }
.lp-endpoints__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0 0 8px;
}
.lp-endpoint {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.lp-endpoint__method {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  border-radius: var(--r-chip);
  padding: 2px 6px;
  flex: 0 0 auto;
}
.lp-endpoint__method--get { background: var(--info-soft); color: var(--info); }
.lp-endpoint__method--post { background: var(--accent-soft); color: var(--accent-text); }
.lp-endpoint__method--delete { background: var(--danger-soft); color: var(--danger); }
.lp-endpoint__path { font-size: 12.5px; color: var(--text); background: none; border: none; padding: 0; }
.lp-endpoint__note { font-size: 11px; color: var(--text-faint); }

.lp-events { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 26px; }
.lp-event {
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  color: var(--text);
}

.lp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lp-table td, .lp-table th { vertical-align: top; }

/* --------------------------------------------------------------------------
   Harga
   -------------------------------------------------------------------------- */

.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.lp-plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* Paket yang disorot dibedakan lewat ketebalan garis dan bayangan, bukan
   warna latar, agar tetap terbaca tanpa persepsi warna. */
.lp-plan--lead {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.lp-plan__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  /* Tinggi baris ini dipesan untuk semua kartu, bukan hanya yang punya badge,
     supaya harga dan daftar fiturnya tetap sebaris antar kartu. */
  min-height: 26px;
}
.lp-plan__name { font-size: 16px; font-weight: 620; margin: 0; letter-spacing: -0.02em; }
.lp-plan__price {
  font-size: 30px;
  font-weight: 640;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lp-plan__cur { font-size: 17px; font-weight: 550; margin-right: 2px; color: var(--text-muted); }
.lp-plan__per { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.lp-plan__cta { margin-top: auto; justify-content: center; }
.lp-plan .plan-list { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Batasan dan penutup
   -------------------------------------------------------------------------- */

.lp-limits { padding: 84px 0 88px; }
.lp-limits__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.lp-facts { margin: 0; }
.lp-facts dt {
  font-weight: 620;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
}
.lp-facts dd {
  margin: 0 0 26px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 66ch;
}
.lp-facts dd:last-child { margin-bottom: 0; }

.lp-close {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 88px 0 96px;
}
.lp-close__inner { text-align: center; }
.lp-close__title { margin-inline: auto; max-width: 18ch; }

/* --------------------------------------------------------------------------
   Kaki halaman
   -------------------------------------------------------------------------- */

.lp-foot {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 52px 0 0;
}
.lp-foot__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.lp-foot__note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 40ch;
  margin: 12px 0 0;
}
.lp-foot__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.lp-foot nav a {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 4px 0;
}
.lp-foot nav a:hover { color: var(--text); }
.lp-foot__bar {
  max-width: 1160px;
  margin: 40px auto 0;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Gerak
   Satu momen: langkah muncul saat masuk layar, dan status QR berpindah ke
   tersambung. Elemen tetap terlihat secara bawaan agar tanpa JavaScript pun
   tidak ada yang hilang.
   -------------------------------------------------------------------------- */

.lp-step[data-reveal] { opacity: 1; }
.has-js .lp-step[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.has-js .lp-step[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .lp-step[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .lp-hero__grid,
  .lp-limits__grid,
  .lp-api__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-api__side { position: static; }
  .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-spec__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-send__out { grid-template-columns: minmax(0, 1fr); }
  .lp-phone { max-width: 260px; }
  .lp-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .lp-nav__links { display: none; }
  .lp-nav__inner { gap: 12px; }
  .lp-nav__actions { margin-left: auto; }
  .lp-wrap { padding-inline: 18px; }
  .lp-hero { padding: 44px 0 52px; }
  .lp-steps, .lp-band, .lp-api, .lp-limits { padding: 56px 0 60px; }
  .lp-close { padding: 60px 0 64px; }
  .lp-step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-step::before { display: none; }
  .lp-two { grid-template-columns: minmax(0, 1fr); }
  .lp-foot__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}