/* =============================================================
   Digiza.id — Landing v2 (STATIS, mengikuti referensi mockup)
   Catatan: halaman ini sengaja tidak mengambil data dari database.
   Semua teks/angka bersifat placeholder desain.
   ============================================================= */

:root {
    --blue: #2b7fff;
    --blue-600: #1d6fe8;
    --blue-700: #1657c4;
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;

    --ink: #0f172a;
    --ink-2: #475569;
    --ink-3: #94a3b8;

    --paper: #ffffff;
    --paper-2: #f8fafc;
    --line: #e8edf4;

    --green: #16a34a;
    --green-bg: #dcfce7;
    --amber: #d97706;
    --amber-bg: #fef3c7;
    --star: #fbbf24;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
    --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    --sh-1: 0 1px 3px rgba(15,23,42,.05);
    --sh-2: 0 4px 16px -4px rgba(15,23,42,.08);
    --sh-3: 0 16px 40px -12px rgba(15,23,42,.14);
    --sh-blue: 0 8px 22px -6px rgba(43,127,255,.4);

    --ease: cubic-bezier(.16,1,.3,1);
    --spring: cubic-bezier(.34,1.4,.64,1);
}

.lp { font-family: var(--font); color: var(--ink); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1,.lp h2,.lp h3,.lp h4,.lp h5 { margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; }
.lp p { margin:0; color:var(--ink-2); line-height:1.7; }
.lp a { text-decoration:none; }
.lp ul { list-style:none; margin:0; padding:0; }
.lp img { max-width:100%; height:auto; }

.lp-wrap { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--s5); }

/* Teks gradient bergerak.
   display:inline-block + -webkit-text-fill-color wajib, kalau tidak
   sebagian browser tidak me-repaint animasi background-position. */
.lp-grad, .lp-anim-text {
    display:inline-block;
    background-size:200% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    will-change:background-position;
}
.lp-grad      { background-image:linear-gradient(90deg,#25a1f4,#f91fa9,#25a1f4,#f91fa9,#25a1f4); animation:gradmove 7s linear infinite; }
.lp-anim-text { background-image:linear-gradient(90deg,#2b7fff,#22d3ee,#6366f1,#22d3ee,#2b7fff); animation:gradmove 5s linear infinite; }

@keyframes gradmove {
    0%   { background-position:0% 50%; }
    100% { background-position:200% 50%; }
}
.lp-blue { color: var(--blue); }

/* Helper PHP text_gradient() mengubah marker [ST_GRADIENT] / [ST_PRIMARY]
   pada teks yang diatur admin menjadi dua class di bawah. Aslinya
   didefinisikan di custom.css — yang tidak dimuat halaman ini — jadi
   ditulis ulang di sini supaya teks editable tetap tampil benar. */
.lp .hero-text-gradient {
    display:inline-block;
    background-image:linear-gradient(90deg,#25a1f4,#f91fa9,#25a1f4,#f91fa9,#25a1f4);
    background-size:200% 100%; background-position:0% 50%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:gradmove 7s linear infinite;
}
.lp .text-primary { color:var(--blue) !important; }

/* =============================== NAV =============================== */
.lp-navbar { position:sticky; top:0; z-index:300; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.lp-nav { max-width:1280px; margin:0 auto; padding:var(--s3) var(--s5); display:flex; align-items:center; justify-content:space-between; gap:var(--s5); }

.lp-logo { display:inline-flex; align-items:center; gap:var(--s2); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink); flex-shrink:0; }
/* Lencana dari pengaturan website. contain supaya logo bentuk apa pun tidak
   terpotong maupun gepeng. */
.lp-logo-img { width:34px; height:34px; border-radius:9px; object-fit:contain; flex-shrink:0; }
/* Cadangan kalau berkas gambarnya tidak ada */
.lp-logo-mark { width:34px; height:34px; border-radius:9px; background:linear-gradient(140deg,#3b8cff,#1657c4); display:grid; place-items:center; color:#fff; flex-shrink:0; box-shadow:var(--sh-blue); }
.lp-logo-mark[hidden] { display:none; }
.lp-logo-mark svg { width:19px; height:19px; }
.lp-logo-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lp-menu { display:flex; align-items:center; gap:var(--s6); }
.lp-menu a { font-size:.9rem; font-weight:600; color:var(--ink-2); transition:color .18s var(--ease); white-space:nowrap; }
.lp-menu a:hover, .lp-menu a.on { color:var(--blue); }

.lp-nav-right { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; }
.lp-burger {
    display:none; align-items:center; justify-content:center;
    min-width:40px; min-height:40px;
    background:none; border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--ink); cursor:pointer;
    transition:background .18s, border-color .18s, transform .18s var(--ease);
}
.lp-burger:active { background:var(--paper-2); border-color:var(--blue); transform:scale(.94); }

/* =============================== BUTTONS =============================== */
.lp-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); font-family:var(--font); font-weight:600; font-size:.9rem; padding:.7rem 1.4rem; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:transform .25s var(--spring), box-shadow .25s var(--ease), background .18s, color .18s, border-color .18s; }
.lp-btn svg { width:16px; height:16px; flex-shrink:0; }
.lp-btn-primary { background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.lp-btn-primary:hover { background:var(--blue-600); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px -6px rgba(43,127,255,.5); }
.lp-btn-primary:active { transform:translateY(0); }
.lp-btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1); }
.lp-btn-ghost:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.lp-btn-white { background:#fff; color:var(--blue); }
.lp-btn-white:hover { transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,0,0,.28); color:var(--blue-700); }
.lp-btn-sm { padding:.55rem 1.1rem; font-size:.85rem; }
.lp-btn-lg { padding:.85rem 1.7rem; font-size:.95rem; }
.lp-btn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* =============================== BADGE =============================== */
.lp-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); background:var(--blue-50); padding:.4rem .85rem; border-radius:var(--r-pill); }
.lp-badge svg { width:13px; height:13px; }

/* Mahkota emas */
.lp-crown { display:inline-flex; align-items:center; color:#eba000; }
.lp-crown svg { width:14px; height:14px; fill:rgba(245,183,49,.35); filter:drop-shadow(0 1px 2px rgba(217,119,6,.4)); }

/* =============================== HERO =============================== */
.lp-hero { position:relative; padding:var(--s7) 0 var(--s6); background:radial-gradient(55% 45% at 12% 0%, rgba(43,127,255,.06), transparent 70%); overflow:hidden; }

/* Garis kotak-kotak tipis (mengikuti pola hero project Digitals) */
.lp-hero-grid-bg {
    position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
    width:100vw; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(to right, rgba(0,99,230,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,99,230,.07) 1px, transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 34%, #000 28%, transparent 78%);
    mask-image:radial-gradient(ellipse 72% 78% at 50% 34%, #000 28%, transparent 78%);
}

.lp-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.08fr 1fr; gap:var(--s6); align-items:center; }

/* Batas atas dihitung dari lebar kolom teks pada kontainer 1280px, agar
   "Semua Kebutuhan Social Media" (28 karakter) tetap muat 1 baris. */
.lp-hero h1 { font-size:clamp(1.7rem,2.4vw + .4rem,2.4rem); line-height:1.25; margin:var(--s5) 0 var(--s5); }
/* Jarak ke tombol dibuat lega: tombol elemen berat, butuh ruang napas.
   Selector ditulis `.lp p.lp-hero-lede` (bukan `.lp-hero-lede` saja) karena
   reset `.lp p { margin:0 }` di atas punya specificity lebih tinggi dan akan
   menelan margin-bottom-nya. */
.lp p.lp-hero-lede { font-size:1rem; line-height:1.8; max-width:46ch; margin-bottom:2.25rem; }

.lp-hero-cta { display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s6); }

/* Poin keunggulan di bawah tombol (pengganti chips + blok avatar) */
.lp-points { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); }
.lp-point { display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600; color:var(--ink-2); }
.lp-point svg { width:19px; height:19px; flex-shrink:0; }

/* Warna ikon dipilih lewat urutan, bukan class di <i>, karena Lucide
   mengganti <i> menjadi <svg> saat render. */
.lp-point:nth-child(1) svg { color:#2b7fff; }
.lp-point:nth-child(2) svg { color:#16a34a; }
.lp-point:nth-child(3) svg { color:#ea580c; }

/* ---- Panggung hero kanan: glow + mockup + kartu melayang ---- */
.lp-hero-vis { position:relative; min-width:0; }

.lp-glow {
    position:absolute; inset:-12% -10%;
    background:radial-gradient(50% 50% at 50% 45%, rgba(43,127,255,.32), transparent 70%),
               radial-gradient(40% 40% at 78% 72%, rgba(147,51,234,.16), transparent 70%);
    filter:blur(46px); z-index:0; pointer-events:none;
    animation:glowPulse 6.5s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.72; transform:scale(1)} 50%{opacity:1; transform:scale(1.07)} }

/* Kartu kecil melayang di sekitar mockup */
.lp-float {
    position:absolute; z-index:3; display:flex; align-items:center; gap:.6rem;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:.6rem .85rem; box-shadow:0 14px 34px -12px rgba(15,23,42,.26);
    white-space:nowrap;
}
.lp-float .fi { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.lp-float .fi svg { width:16px; height:16px; }
.lp-float b { display:block; font-size:.84rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.lp-float span { font-size:.66rem; color:var(--ink-3); }
.lp-float.f1 { top:4%;  left:-7%;  animation:floatA 5.2s ease-in-out infinite; }
.lp-float.f2 { bottom:6%; left:-5%; animation:floatB 6.4s ease-in-out infinite; }
.lp-float.f3 { top:42%; right:-6%;  animation:floatA 5.8s ease-in-out infinite .7s; }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(13px)} }

/* ---- Mockup dashboard: panggung melayang + tilt 3D saat hover ---- */
.lp-mock-stage { position:relative; z-index:1; perspective:1400px; animation:float 7s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.lp-mock {
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-3); overflow:hidden; display:grid; grid-template-columns:150px 1fr;
    transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    will-change:transform;
}
.lp-mock-stage.tilting .lp-mock,
.lp-mock-stage:hover .lp-mock {
    transition:transform .12s linear, box-shadow .4s var(--ease);
    box-shadow:0 34px 70px -22px rgba(15,23,42,.34), 0 0 0 1px rgba(43,127,255,.16);
}
/* Kilau mengikuti arah tilt */
.lp-mock::before {
    content:''; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
    background:linear-gradient(var(--sh-ang,120deg), rgba(255,255,255,.5), transparent 45%);
    transition:opacity .3s var(--ease);
}
.lp-mock-stage.tilting .lp-mock::before,
.lp-mock-stage:hover .lp-mock::before { opacity:.55; }

/* Bar "memproses" indeterminate — bikin mockup terasa hidup */
.lp-mk-prog { margin-top:.6rem; }
.lp-mk-prog-l { display:flex; justify-content:space-between; font-size:.6rem; color:var(--ink-3); margin-bottom:.28rem; }
.lp-mk-bar { height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
.lp-mk-bar i { display:block; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg,#3b8cff,#1657c4); animation:slide 2.1s ease-in-out infinite; }
@keyframes slide { 0%{transform:translateX(-110%)} 100%{transform:translateX(280%)} }

.lp-mk-side { background:var(--paper-2); border-right:1px solid var(--line); padding:var(--s4) var(--s3); }
.lp-mk-brand { display:flex; align-items:center; gap:.4rem; font-weight:800; font-size:.78rem; margin-bottom:var(--s4); padding-left:.25rem; }
.lp-mk-brand i { width:18px; height:18px; border-radius:5px; background:linear-gradient(140deg,#3b8cff,#1657c4); display:grid; place-items:center; color:#fff; }
.lp-mk-brand i svg { width:11px; height:11px; }

.lp-mk-nav { display:flex; flex-direction:column; gap:1px; }
.lp-mk-item { display:flex; align-items:center; gap:.5rem; font-size:.71rem; font-weight:500; color:var(--ink-3); padding:.4rem .5rem; border-radius:6px; }
.lp-mk-item svg { width:13px; height:13px; flex-shrink:0; }
.lp-mk-item.on { background:var(--blue-50); color:var(--blue); font-weight:600; }

.lp-mk-main { padding:var(--s4); min-width:0; }
.lp-mk-hi { font-size:.78rem; font-weight:700; margin-bottom:.1rem; }
.lp-mk-sub { font-size:.67rem; color:var(--ink-3); margin-bottom:var(--s4); }

.lp-mk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:var(--s4); }
.lp-mk-stat { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem; min-width:0; }
.lp-mk-ico { width:19px; height:19px; border-radius:5px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center; margin-bottom:.3rem; }
.lp-mk-ico svg { width:11px; height:11px; }
.lp-mk-lbl { font-size:.57rem; color:var(--ink-3); }
.lp-mk-val { font-size:.71rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lp-mk-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.lp-mk-head b { font-size:.72rem; }
.lp-mk-head span { font-size:.61rem; color:var(--blue); font-weight:600; }
.lp-mk-row { position:relative; display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-top:1px solid var(--line); }
/* Sorotan berjalan bergiliran antar baris */
.lp-mk-row::after { content:''; position:absolute; inset:0 -8px; border-radius:6px; background:rgba(43,127,255,.08); opacity:0; pointer-events:none; animation:rowHi 12s ease-in-out infinite; animation-delay:var(--g,0s); }
@keyframes rowHi { 0%,88%,100%{opacity:0} 3%,7%{opacity:1} }
.lp-mk-row > i { font-size:.85rem; width:16px; text-align:center; flex-shrink:0; }
.lp-mk-name { flex:1; font-size:.64rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lp-mk-qty { font-size:.62rem; font-weight:700; flex-shrink:0; }
.lp-tag { font-size:.55rem; font-weight:700; padding:.14rem .42rem; border-radius:var(--r-pill); flex-shrink:0; }
.lp-tag.ok { background:var(--green-bg); color:var(--green); }
.lp-tag.wait { background:var(--amber-bg); color:var(--amber); }

/* =============================== STATS BAR =============================== */
.lp-stats { padding:0 0 var(--s6); }
/* Latar statistik: belah ketupat abstrak.
   Dua lapis kerja bareng:
   1) Kisi belah ketupat — dua repeating-linear-gradient bersilang di 45 dan
      -45 derajat, garis 1px berjarak 52px. Halus, dan karena berulang ia
      mengisi seluruh bidang tanpa titik kosong.
   2) Dua faset besar (::before/::after) berupa persegi diputar 45 derajat
      dengan sudut membulat, menembus dari pojok kiri-atas dan kanan-bawah.
      Inilah yang memberi kesan abstrak/berpermata dan menutup bagian tengah
      yang tadinya terasa menganga.

   Bingkai pelangi empat warna versi sebelumnya diganti garis biru sangat muda.
   Gradien di tepi kartu jarang terbaca mahal; yang membuat kartu ini terasa
   berkelas justru bayangan dalam dan pola yang tenang.
   Semuanya DIAM — tidak ada satu pun animasi. */
.lp-statbar {
    position:relative; overflow:hidden; isolation:isolate;
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
    padding:var(--s6) var(--s5); border-radius:var(--r-xl);
    border:1px solid #dbe6f7;
    background:
        repeating-linear-gradient(45deg,  rgba(43,127,255,.075) 0 1px, transparent 1px 52px),
        repeating-linear-gradient(-45deg, rgba(43,127,255,.075) 0 1px, transparent 1px 52px),
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    box-shadow:
        0 26px 64px -30px rgba(15,23,42,.30),
        0 2px 8px -4px rgba(43,127,255,.14);
}

/* Faset besar — sekarang jauh lebih lembut.
   Tiga perbaikan dari versi sebelumnya:
   1) Diburamkan (blur 40px). Tanpa itu tepi 45 derajatnya jadi garis lurus
      tegas yang membelah kartu; matanya membaca "pojoknya beda warna",
      bukan kaca terpotong. Blur mengubahnya jadi cahaya yang jatuh.
   2) Dua warna saja dan masing-masing tunggal: biru di kiri, hijau di kanan.
      Versi sebelumnya tiap faset memuat dua warna sekaligus (biru-ungu dan
      hijau-oranye), sehingga kesannya acak. Sekarang tiap sisi satu warna
      yang memudar ke transparan.
   3) Opacity dipangkas hampir separuh, supaya kisi belah ketupatnya tetap
      terbaca merata di seluruh bidang, tidak hilang di area faset. */
.lp-statbar::before,
.lp-statbar::after {
    content:''; position:absolute; z-index:-1; pointer-events:none;
    width:420px; height:420px; border-radius:80px; transform:rotate(45deg);
    filter:blur(40px);
}
.lp-statbar::before {
    left:-200px; top:-250px;
    background:linear-gradient(145deg, rgba(43,127,255,.13), rgba(43,127,255,.03));
}
.lp-statbar::after {
    right:-200px; bottom:-250px;
    background:linear-gradient(145deg, rgba(34,197,94,.13), rgba(34,197,94,.03));
}
.lp-stat { position:relative; display:flex; align-items:center; gap:var(--s4); justify-content:center; transition:transform .3s var(--ease); }
.lp-stat:hover { transform:translateY(-4px); }

.lp-stat-ico { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; transition:transform .35s var(--spring); }
.lp-stat:hover .lp-stat-ico { transform:scale(1.1) rotate(-6deg); }
.lp-stat-ico svg { width:22px; height:22px; }

/* Ikon berwarna-warni per statistik */
.lp-stat-ico.c1 { background:linear-gradient(140deg,#dbeafe,#bfdbfe); color:#1d6fe8; box-shadow:0 8px 18px -8px rgba(43,127,255,.55); }
.lp-stat-ico.c2 { background:linear-gradient(140deg,#dcfce7,#bbf7d0); color:#15803d; box-shadow:0 8px 18px -8px rgba(22,163,74,.5); }
.lp-stat-ico.c3 { background:linear-gradient(140deg,#f3e8ff,#e9d5ff); color:#7e22ce; box-shadow:0 8px 18px -8px rgba(147,51,234,.45); }
.lp-stat-ico.c4 { background:linear-gradient(140deg,#ffedd5,#fed7aa); color:#c2410c; box-shadow:0 8px 18px -8px rgba(234,88,12,.45); }

.lp-stat-v { font-size:1.5rem; font-weight:800; letter-spacing:-.035em; line-height:1.1; }
.lp-stat-l { font-size:.8rem; color:var(--ink-2); margin-top:.1rem; }

/* =============================== SECTION =============================== */
.lp-sec { padding:var(--s7) 0; }
.lp-sec-alt { background:var(--paper-2); }
.lp-head { text-align:center; max-width:640px; margin:0 auto var(--s6); }
.lp-head .lp-badge { margin-bottom:var(--s3); }
.lp-head h2 { font-size:clamp(1.5rem,2.2vw + .6rem,2.05rem); margin-bottom:var(--s3); }
.lp-head p { font-size:.94rem; }

/* =============================== PLATFORM =============================== */
/* Marquee platform: konten digandakan 2x di markup, track digeser -50%
   sehingga loop-nya mulus tanpa plugin JS. */
.lp-mask {
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lp-track { display:flex; width:max-content; gap:var(--s6); padding:var(--s2) 0; animation:scrollx 48s linear infinite; }
.lp-mask:hover .lp-track { animation-play-state:paused; }
@keyframes scrollx { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.lp-plat { display:flex; flex-direction:column; align-items:center; gap:.6rem; flex-shrink:0; width:96px; }
.lp-plat-ico { width:62px; height:62px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1); display:grid; place-items:center; font-size:1.5rem; transition:transform .28s var(--spring), box-shadow .28s var(--ease); }
.lp-plat:hover .lp-plat-ico { transform:translateY(-6px); box-shadow:var(--sh-3); }
.lp-plat span { font-size:.76rem; font-weight:600; color:var(--ink-2); text-align:center; }

/* =============================== FEATURE CARDS =============================== */
.lp-feats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }

/* Tiap kartu punya warnanya sendiri lewat 3 variabel:
   --c = warna utama, --c-bg = latar lembut, --c-sh = warna bayangan */
.lp-card {
    --c:#2b7fff; --c-bg:#eff6ff; --c-sh:rgba(43,127,255,.35);
    position:relative; overflow:hidden; text-align:center;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:var(--s6) var(--s5);
    box-shadow:var(--sh-1);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.lp-feats > .lp-card:nth-child(1) { --c:#2b7fff; --c-bg:#eff6ff; --c-sh:rgba(43,127,255,.35); }
.lp-feats > .lp-card:nth-child(2) { --c:#16a34a; --c-bg:#f0fdf4; --c-sh:rgba(22,163,74,.32); }
.lp-feats > .lp-card:nth-child(3) { --c:#8b5cf6; --c-bg:#f5f3ff; --c-sh:rgba(139,92,246,.35); }
.lp-feats > .lp-card:nth-child(4) { --c:#f59e0b; --c-bg:#fffbeb; --c-sh:rgba(245,158,11,.35); }

/* Semburat warna: TAMPIL SEJAK AWAL, menguat saat hover */
.lp-card::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(80% 55% at 50% 0%, var(--c-bg), transparent 72%);
    opacity:.9; transition:opacity .35s var(--ease);
}
/* Pita aksen atas: sudah terlihat (45%), melebar penuh saat hover */
.lp-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, transparent, var(--c), transparent);
    transform:scaleX(.45); transition:transform .45s var(--ease);
}
.lp-card:hover { transform:translateY(-8px); border-color:var(--c); box-shadow:0 22px 44px -18px var(--c-sh); }
.lp-card:hover::before { opacity:1; }
.lp-card:hover::after  { transform:scaleX(1); }

.lp-card-ico {
    position:relative; z-index:1;
    width:62px; height:62px; margin:0 auto var(--s4);
    border-radius:18px;
    background:linear-gradient(145deg, var(--c-bg), #fff);
    border:1px solid var(--c-bg);
    color:var(--c);
    display:grid; place-items:center;
    box-shadow:0 6px 16px -8px var(--c-sh);
    transition:transform .4s var(--spring), box-shadow .4s var(--ease);
}
/* Cincin yang mengembang keluar dari ikon saat hover */
.lp-card-ico::after {
    content:''; position:absolute; inset:-7px; border-radius:24px;
    border:2px solid var(--c); opacity:0; transform:scale(.82);
    transition:opacity .45s var(--ease), transform .45s var(--spring);
}
.lp-card:hover .lp-card-ico { transform:translateY(-4px) scale(1.1) rotate(-7deg); box-shadow:0 14px 26px -10px var(--c-sh); }
.lp-card:hover .lp-card-ico::after { opacity:.4; transform:scale(1); }
.lp-card-ico svg { width:27px; height:27px; }

.lp-card h3 { position:relative; z-index:1; font-size:1rem; margin-bottom:var(--s2); color:var(--c); }
.lp-card p { position:relative; z-index:1; font-size:.82rem; line-height:1.7; }

/* =============================== STEPS =============================== */
.lp-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); position:relative; }

/* Garis alur: gradasi mengikuti warna tiap langkah, jadi arah 1->4 terbaca */
.lp-steps::before {
    content:''; position:absolute; top:41px; left:12.5%; right:12.5%; height:3px; z-index:0;
    border-radius:99px; opacity:.3;
    background:linear-gradient(90deg,#2b7fff,#16a34a,#8b5cf6,#f59e0b);
}

/* Warna per langkah — dipakai ulang dari palet kartu fitur agar konsisten */
.lp-step { --c:#2b7fff; --c-bg:#eff6ff; --c-sh:rgba(43,127,255,.4); text-align:center; position:relative; z-index:1; }
.lp-steps > .lp-step:nth-child(1) { --c:#2b7fff; --c-bg:#eff6ff; --c-sh:rgba(43,127,255,.4); }
.lp-steps > .lp-step:nth-child(2) { --c:#16a34a; --c-bg:#f0fdf4; --c-sh:rgba(22,163,74,.38); }
.lp-steps > .lp-step:nth-child(3) { --c:#8b5cf6; --c-bg:#f5f3ff; --c-sh:rgba(139,92,246,.4); }
.lp-steps > .lp-step:nth-child(4) { --c:#f59e0b; --c-bg:#fffbeb; --c-sh:rgba(245,158,11,.4); }

.lp-step-c {
    position:relative; width:82px; height:82px; margin:0 auto var(--s4);
    border-radius:50%; background:#fff; border:3px solid var(--c); color:var(--c);
    display:grid; place-items:center;
    box-shadow:0 10px 24px -10px var(--c-sh);
    transition:transform .4s var(--spring), box-shadow .4s var(--ease), background .3s var(--ease);
}
.lp-step-c svg { width:32px; height:32px; }

/* Nomor langkah: besar & kontras, menempel di pojok lingkaran */
.lp-step-c::before {
    content:attr(data-n);
    position:absolute; top:-4px; right:-4px;
    width:30px; height:30px; border-radius:50%;
    background:var(--c); color:#fff; border:3px solid #fff;
    font-size:.82rem; font-weight:800; line-height:1;
    display:grid; place-items:center;
    box-shadow:0 4px 10px -4px var(--c-sh);
}

/* Cincin mengembang saat hover */
.lp-step-c::after {
    content:''; position:absolute; inset:-10px; border-radius:50%;
    border:2px solid var(--c); opacity:0; transform:scale(.82);
    transition:opacity .45s var(--ease), transform .45s var(--spring);
}
.lp-step:hover .lp-step-c { transform:translateY(-6px); background:var(--c-bg); box-shadow:0 18px 32px -12px var(--c-sh); }
.lp-step:hover .lp-step-c::after { opacity:.45; transform:scale(1); }

.lp-step h4 { font-size:1rem; margin-bottom:var(--s2); color:var(--c); }
.lp-step p { font-size:.84rem; line-height:1.7; }

/* =============================== PRICING =============================== */


/* =============================== TESTIMONI =============================== */
/* Kartu testimoni berjalan di dalam .lp-track (marquee CSS yang sama
   dipakai section platform). Lebar dikunci agar loop -50% presisi. */
.lp-track-t { gap:var(--s4); animation-duration:64s; }
.lp-track-rev { animation-name:scrollx-rev; animation-duration:72s; }
@keyframes scrollx-rev { from { transform:translateX(-50%); } to { transform:translateX(0); } }

.lp-testi {
    flex-shrink:0; width:370px;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:var(--s5); box-shadow:var(--sh-1);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.lp-testi:hover { transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#cfe0f9; }
.lp-testi-top { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); }
.lp-testi-top img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.lp-testi-n { font-size:.88rem; font-weight:700; line-height:1.3; }
.lp-testi-r { font-size:.76rem; color:var(--ink-3); }
.lp-qm { margin-left:auto; color:#d9e6f9; flex-shrink:0; }
.lp-qm svg { width:22px; height:22px; }
.lp-testi p { font-size:.85rem; line-height:1.65; }

/* =============================== FAQ =============================== */
.lp-faq { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); align-items:start; }
.lp-faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.lp-faq details[open] { border-color:#cfe0f9; box-shadow:var(--sh-2); }
.lp-faq summary { list-style:none; cursor:pointer; padding:var(--s4); font-size:.88rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:''; width:16px; height:16px; flex-shrink:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b7fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background-size:contain; background-repeat:no-repeat; transition:transform .25s var(--ease); }
.lp-faq details[open] summary::after { transform:rotate(135deg); }
.lp-faq-b { padding:0 var(--s4) var(--s4); font-size:.85rem; color:var(--ink-2); line-height:1.7; animation:fadein .28s var(--ease); }
@keyframes fadein { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* =============================== CTA =============================== */
.lp-cta { background:linear-gradient(120deg,#2b7fff,#1657c4); border-radius:var(--r-xl); padding:var(--s7); padding-right:260px; display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; position:relative; overflow:hidden; }
.lp-cta::after { content:''; position:absolute; inset:0; background:radial-gradient(55% 75% at 88% 20%, rgba(255,255,255,.2), transparent 65%); pointer-events:none; }
.lp-cta-t { position:relative; z-index:1; }
.lp-cta h2 { color:#fff; font-size:clamp(1.3rem,1.8vw + .6rem,1.8rem); margin-bottom:var(--s2); }
.lp-cta p { color:rgba(255,255,255,.86); font-size:.92rem; }
.lp-cta .lp-btn { position:relative; z-index:1; }
.lp-cta-art { position:absolute; right:var(--s5); bottom:-20px; width:210px; z-index:0; pointer-events:none; animation:float 6.5s ease-in-out infinite; }

/* =============================== FOOTER =============================== */
/* .lp-foot sudah tidak dipakai — halaman depan kini memakai footer publik
   bersama (.dzp-foot di publik-v2.css). Aturannya dibiarkan sebentar kalau
   ternyata masih ada view lama yang merujuknya; hapus setelah dipastikan. */
.lp-foot { background:var(--paper-2); border-top:1px solid var(--line); padding:var(--s5) 0; margin-top:var(--s6); text-align:center; }
.lp-foot p { font-size:.85rem; }

/* Jarak footer publik dari bagian terakhir halaman depan. Kerangka publik
   sudah punya jarak dari .dzp-main, halaman depan tidak. */
.lp .dzp-foot { margin-top:var(--s7); }

/* =============================== ANIMASI =============================== */

/* Reveal saat scroll — lebih terasa (jarak & skala) */
.lp-rev { opacity:0; transform:translateY(34px) scale(.97); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0s); }
.lp-rev.in { opacity:1; transform:none; }

/* Masuk otomatis saat halaman dibuka (hero) */
.lp-in { opacity:0; transform:translateY(26px); animation:heroIn .85s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes heroIn { to { opacity:1; transform:none; } }

/* Tombol utama berdenyut */
.lp-pulse { animation:btnPulse 2.8s ease-in-out infinite; }
@keyframes btnPulse {
    0%,100% { box-shadow:0 8px 22px -6px rgba(43,127,255,.42); }
    50%     { box-shadow:0 10px 34px -4px rgba(43,127,255,.78); }
}

/* Badge berkedip lembut */
.lp-badge-glow { animation:badgeGlow 3s ease-in-out infinite; }

/* PENTING: kalau satu elemen memakai .lp-in DAN .lp-badge-glow, properti
   `animation` saling menimpa dan heroIn tidak pernah jalan -> elemen tetap
   opacity:0 (tak terlihat). Rangkap dua animasi dalam satu deklarasi. */
.lp-in.lp-badge-glow {
    animation:heroIn .85s var(--ease) var(--d,0s) forwards,
              badgeGlow 3s ease-in-out 1s infinite;
}
@keyframes badgeGlow {
    0%,100% { background:var(--blue-50); }
    50%     { background:#dceafe; }
}

/* Ikon platform melayang (delay bertingkat via --d) */
/* Melayang halus, dibagi 3 kelompok jeda agar tidak serempak.
   Pakai nth-child (bukan --d inline) karena item digandakan di markup. */
.lp-plat { animation:floatSm 4.2s ease-in-out infinite; }
.lp-track .lp-plat:nth-child(3n+2) { animation-delay:.5s; }
.lp-track .lp-plat:nth-child(3n)   { animation-delay:1s; }
@keyframes floatSm { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Titik "live" berdenyut di mockup */
.lp-live { display:inline-block; width:6px; height:6px; border-radius:50%; background:#16a34a; margin-right:5px; animation:blink 1.8s ease-in-out infinite; }
@keyframes blink {
    0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(22,163,74,.55); }
    50%     { opacity:.55; box-shadow:0 0 0 6px rgba(22,163,74,0); }
}

/* Baris order mockup masuk berurutan */
.lp-mk-row { opacity:0; animation:rowIn .6s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes rowIn { from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none} }

/* Kilau melintas di stat bar */

/* Angka statistik sedikit "pop" saat selesai berhitung */
.lp-stat-v.done { animation:pop .45s var(--spring); }
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* Stagger otomatis untuk anak-anak grid (kartu muncul berurutan) */
.lp-feats  > *:nth-child(1){--d:0s}    .lp-feats  > *:nth-child(2){--d:.09s}
.lp-feats  > *:nth-child(3){--d:.18s}  .lp-feats  > *:nth-child(4){--d:.27s}
.lp-feats  > *:nth-child(5){--d:.36s}  .lp-feats  > *:nth-child(6){--d:.45s}

.lp-steps  > *:nth-child(1){--d:0s}    .lp-steps  > *:nth-child(2){--d:.12s}
.lp-steps  > *:nth-child(3){--d:.24s}  .lp-steps  > *:nth-child(4){--d:.36s}


/* Bintang testimoni muncul satu per satu */

/* Catatan soal "prefers-reduced-motion":
   Di Windows 11, toggle "Animation effects" sering mati secara default atau
   dimatikan demi performa — sehingga banyak pengunjung mengirim sinyal
   "reduce" tanpa benar-benar bermaksud mematikan animasi web. Karena itu
   animasi TIDAK dimatikan total di sini; sesuai anjuran spesifikasi
   ("reduce", bukan "remove"), geraknya hanya diperlembut: jarak lebih
   pendek dan durasi lebih panjang. */
@media (prefers-reduced-motion: reduce) {
    .lp-rev    { transform:translateY(14px) scale(.99); transition-duration:.9s; }
    .lp-in     { transform:translateY(12px); animation-duration:1.1s; }
    .lp-mk-row { animation-duration:.8s; }

    /* gerak melayang & berulang -> diperlambat, tetap terlihat hidup */
    .lp-glow, .lp-mock-stage, .lp-cta-art { animation-duration:12s; }
    .lp-float     { animation-duration:11s; }
    .lp-plat      { animation-duration:9s; }
    .lp-track     { animation-duration:90s; }
    .lp-mk-row::after  { animation-duration:18s; }
    .lp-mk-bar i  { animation-duration:3.6s; }
    .lp-live      { animation-duration:3s; }
    .lp-pulse     { animation-duration:5s; }

    /* animasi warna: tidak memicu masalah vestibular, cukup diperlambat */
    .lp-grad      { animation-duration:11s; }
    .lp-anim-text { animation-duration:9s; }
    .lp-badge-glow{ animation-duration:8s; }
}

/* =============================== MOBILE MENU ===============================

   DUA MASALAH YANG DIPERBAIKI DI SINI:

   1. Terasa kaku. Buka/tutupnya memakai display:none <-> display:flex, dan
      display tidak bisa dianimasikan — menunya muncul mendadak tanpa satu
      pun tahap peralihan. Sekarang dipakai opacity + visibility, keduanya
      bisa ditransisikan.

   2. Terasa "membesar". Lembarnya menutup seluruh layar dengan putih polos,
      jadi yang terlihat bukan panel yang terbuka melainkan halaman yang
      tiba-tiba berganti dan segalanya jadi besar. Sekarang panelnya
      selebar 340px menggeser dari kanan di atas latar gelap; halaman
      aslinya tetap terlihat samar, jadi jelas ini lapisan, bukan halaman
      lain. */
.lp-mob {
    position:fixed; inset:0; z-index:500;
    display:flex; justify-content:flex-end;
    background:rgba(15,23,42,.45);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), visibility .3s;
}
.lp-mob.open { opacity:1; visibility:visible; pointer-events:auto; }

.lp-mob-panel {
    width:min(340px, 86vw); height:100%;
    background:#fff; box-shadow:-18px 0 48px -20px rgba(15,23,42,.4);
    padding:var(--s5); overflow-y:auto;
    display:flex; flex-direction:column;
    transform:translateX(102%);
    transition:transform .38s var(--ease);
}
.lp-mob.open .lp-mob-panel { transform:translateX(0); }

.lp-mob-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s5); }
.lp-mob-x {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; min-height:40px;
    background:none; border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--ink); cursor:pointer;
    transition:background .18s, border-color .18s;
}
.lp-mob-x:active { background:var(--paper-2); border-color:var(--blue); }

/* Tautan menyusul panelnya satu per satu. Kalau keenamnya muncul serentak,
   gerakannya terbaca sebagai satu blok kaku — persis keluhan yang dilaporkan. */
.lp-mob a.ml {
    display:block; font-size:.98rem; font-weight:600; color:var(--ink);
    padding:.85rem .25rem; border-bottom:1px solid var(--line);
    opacity:0; transform:translateX(16px);
    transition:opacity .32s var(--ease), transform .32s var(--ease), color .18s;
}
.lp-mob.open a.ml { opacity:1; transform:none; }
.lp-mob.open a.ml:nth-of-type(1) { transition-delay:.12s; }
.lp-mob.open a.ml:nth-of-type(2) { transition-delay:.17s; }
.lp-mob.open a.ml:nth-of-type(3) { transition-delay:.22s; }
.lp-mob.open a.ml:nth-of-type(4) { transition-delay:.27s; }
.lp-mob.open a.ml:nth-of-type(5) { transition-delay:.32s; }
.lp-mob.open a.ml:nth-of-type(6) { transition-delay:.37s; }
.lp-mob a.ml:active { color:var(--blue); }

/* margin-top:auto mendorong tombol ke dasar panel — sisa ruang kosong
   berkumpul di satu tempat, bukan menganga di bawah tautan terakhir. */
.lp-mob-cta {
    display:grid; gap:var(--s3); margin-top:auto; padding-top:var(--s5);
    opacity:0; transform:translateY(12px);
    transition:opacity .32s var(--ease) .40s, transform .32s var(--ease) .40s;
}
.lp-mob.open .lp-mob-cta { opacity:1; transform:none; }

/* =============================== RESPONSIVE =============================== */
@media (max-width:1240px) {
    .lp-float.f1 { left:-2%; }
    .lp-float.f2 { left:-1%; }
    .lp-float.f3 { right:-2%; }
}

@media (max-width:1100px) {
    .lp-menu { gap:var(--s4); }
    .lp-hero-grid { grid-template-columns:1fr; gap:var(--s6); }
    .lp-hero h1 { max-width:none; }
    .lp-mock-stage { max-width:660px; margin:0 auto; }
    .lp-float { display:none; }
    .lp-stat-v { font-size:1.35rem; }
    .lp-feats { grid-template-columns:repeat(2,1fr); }
    .lp-track { gap:var(--s5); }
}

@media (max-width:900px) {
    .lp-menu { display:none; }
    .lp-burger { display:inline-flex; }
    .lp-nav-right .lp-btn { display:none; }
    .lp-statbar { grid-template-columns:repeat(2,1fr); gap:var(--s5); }
    /* Mobile/tablet: berubah jadi timeline vertikal — lingkaran di kiri,
       teks di kanan, dihubungkan garis tegak. Lebih hemat ruang dan alur
       1->4 lebih jelas dibanding 4 kartu bertumpuk. */
    .lp-steps { grid-template-columns:1fr; gap:0; }
    .lp-steps::before { display:none; }

    .lp-step {
        display:grid; grid-template-columns:82px 1fr;
        column-gap:var(--s4); text-align:left; padding-bottom:var(--s6);
    }
    .lp-step:last-child { padding-bottom:0; }

    /* Garis tegak penghubung antar langkah */
    .lp-step::after {
        content:''; position:absolute; left:40px; top:92px; bottom:0;
        width:3px; border-radius:99px; background:var(--c); opacity:.28;
    }
    .lp-step:last-child::after { display:none; }

    .lp-step-c { grid-column:1; grid-row:1 / span 2; align-self:start; margin:0; }
    .lp-step h4 { grid-column:2; grid-row:1; padding-top:.85rem; }
    .lp-step p  { grid-column:2; grid-row:2; }
    .lp-faq { grid-template-columns:1fr; }
    .lp-cta { flex-direction:column; text-align:center; padding:var(--s6) var(--s5); }
    .lp-cta-art { display:none; }
}

@media (max-width:640px) {
    .lp-sec { padding:var(--s7) 0; }
    .lp-hero { padding:var(--s6) 0 var(--s5); }

    /* Hero ditengahkan di ponsel. Saat kolomnya cuma satu, teks rata kiri
       menyisakan ruang kosong yang tidak seimbang di kanan — apalagi baris
       judulnya pendek-pendek. Perataan tengah membuat blok badge, judul,
       paragraf, tombol, dan poin jadi satu poros. */
    .lp-hero-grid > div:first-child { text-align:center; }
    .lp p.lp-hero-lede { max-width:38ch; margin-left:auto; margin-right:auto; }
    .lp-hero-cta { justify-content:center; }
    /* Poin dipaksa satu baris utuh lalu ditengahkan — kalau dibiarkan
       membungkus bebas, baris terakhir menggantung di kiri dan malah
       terlihat seperti salah taruh. */
    .lp-points { justify-content:center; gap:var(--s3) var(--s5); }
    /* ---- Hero ponsel ----
       Versi sebelumnya mematikan hampir semua yang membuat hero desktop
       menarik: kartu melayang hilang di 1100px, sidebar mockup hilang di
       640px. Yang tersisa cuma badge, judul kecil, paragraf, dua tombol,
       dan sebuah kotak putih. Bagian di bawah ini mengembalikan ketiganya
       dalam bentuk yang muat di layar sempit — bukan dengan menampilkan
       ulang versi desktopnya. */

    /* Judul berani. 1.7rem terbaca seperti judul isi, bukan judul utama.
       clamp dipakai supaya di 320px pun "Dalam Satu Platform" tetap muat. */
    .lp-hero h1 { font-size:clamp(1.9rem, 8.6vw, 2.25rem); line-height:1.18; letter-spacing:-.02em; }

    /* Poin keunggulan jadi tiga kotak sejajar.
       Sebelumnya membungkus bebas jadi 2 + 1, dan item ketiga menggantung
       sendirian di baris kedua — terbaca seperti salah taruh. Grid tiga
       kolom membuatnya tegas dan tidak bergantung panjang teksnya. */
    .lp-points { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
    .lp-point {
        flex-direction:column; gap:.35rem; text-align:center; font-size:.72rem; line-height:1.35;
        background:#fff; border:1px solid var(--line); border-radius:12px;
        padding:.7rem .35rem; box-shadow:0 2px 10px -6px rgba(15,23,42,.18);
    }
    .lp-point svg { width:18px; height:18px; }

    /* Sidebar mockup dikecilkan jadi rail ikon, bukan dihilangkan.
       Tanpa sidebar, mockup terbaca sebagai kartu teks biasa dan hilang
       maknanya sebagai cuplikan dashboard. Label disembunyikan lewat
       font-size:0 — ikonnya punya ukuran sendiri jadi tetap tampil. */
    .lp-mock { grid-template-columns:46px 1fr; }
    .lp-mk-side { display:block; padding:.6rem .3rem; }
    .lp-mk-brand { justify-content:center; gap:0; padding-left:0; margin-bottom:.6rem; font-size:0; }
    .lp-mk-item { justify-content:center; gap:0; padding:.4rem 0; font-size:0; }
    .lp-mk-item svg { width:15px; height:15px; }

    /* Tinggi mockup dipotong lalu dilarutkan di tepi bawah. Dibiarkan penuh,
       mockup memanjang sampai bagian bawah hero terdorong jauh keluar layar
       pertama. Larutan gradien memberi tahu bahwa isinya masih berlanjut. */
    .lp-mock {
        max-height:390px;
        -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 100%);
        mask-image:linear-gradient(180deg, #000 76%, transparent 100%);
    }

    /* Satu kartu melayang dikembalikan, dipindah ke DALAM batas panggung.
       Alasan aslinya dimatikan memang benar — posisi left:-7% terpotong di
       layar sempit. Yang salah cuma penyelesaiannya. Ditempel di sudut atas
       mockup, sedikit tumpang tindih, kesan berlapisnya kembali tanpa ada
       yang keluar layar. Dua kartu lain tetap disembunyikan; di ruang
       sesempit ini satu sudah cukup, tiga jadi berantakan. */
    .lp-float { display:flex; }
    .lp-float.f1, .lp-float.f3 { display:none; }
    .lp-float.f2 {
        top:-12px; right:4px; bottom:auto; left:auto;
        padding:.45rem .6rem; border-radius:12px;
        animation:floatB 7s ease-in-out infinite;
    }
    .lp-float.f2 .fi { width:27px; height:27px; border-radius:8px; }
    .lp-float.f2 .fi svg { width:14px; height:14px; }
    .lp-float.f2 b { font-size:.76rem; }
    .lp-float.f2 span { font-size:.6rem; }

    .lp-mk-stats { grid-template-columns:repeat(2,1fr); }
    .lp-feats { grid-template-columns:repeat(2,1fr); }
    .lp-plat { width:84px; }
    .lp-plat-ico { width:54px; height:54px; font-size:1.3rem; }
    /* Statistik jadi 2x2 dengan isi bertumpuk dan rata tengah.
       Sebelumnya satu lajur rata kiri: ikon berbaris di tepi kiri sementara
       sisi kanan kartu menganga, dan tinggi kartunya jadi berlebihan.
       Perataan tengah pada satu lajur pun kurang bagus — panjang angkanya
       berbeda-beda, jadi ikonnya akan zig-zag. Bertumpuk memecahkan keduanya. */
    .lp-statbar { grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s3); padding:var(--s5) var(--s4); }
    /* Kisi dirapatkan & faset dikecilkan supaya proporsinya sebanding di layar sempit */
    .lp-statbar {
        background:
            repeating-linear-gradient(45deg,  rgba(43,127,255,.075) 0 1px, transparent 1px 38px),
            repeating-linear-gradient(-45deg, rgba(43,127,255,.075) 0 1px, transparent 1px 38px),
            linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    }
    .lp-statbar::before, .lp-statbar::after { width:260px; height:260px; border-radius:48px; filter:blur(28px); }
    .lp-statbar::before { left:-125px; top:-150px; }
    .lp-statbar::after  { right:-125px; bottom:-150px; }
    .lp-stat { flex-direction:column; justify-content:center; text-align:center; gap:var(--s2); }
    .lp-stat-ico { width:42px; height:42px; border-radius:12px; }
    .lp-stat-ico svg { width:20px; height:20px; }
    /* Angka dikecilkan: "8.592.143+" tidak muat di sel selebar ~150px */
    .lp-stat-v { font-size:1.15rem; }
    .lp-stat-l { font-size:.78rem; }
    /* Mobile: profil di atas melebar penuh, lalu Navigasi + Kontak
       berdampingan supaya footer tidak memanjang ke bawah. */
}

@media (max-width:420px) {
    .lp-wrap { padding:0 var(--s4); }
    .lp-hero-cta { width:100%; }
    .lp-hero-cta .lp-btn { flex:1 1 auto; }

    /* Kotak poin dirapatkan — tiga kolom di 320px hanya menyisakan ~90px
       per kolom, jadi bantalannya yang mengalah, bukan jumlah kolomnya. */
    .lp-points { gap:.4rem; }
    .lp-point { padding:.6rem .25rem; font-size:.68rem; }

    /* Kartu melayang dikecilkan lagi supaya tidak menutupi sapaan di
       dalam mockup. */
    .lp-float.f2 { right:0; padding:.4rem .5rem; }
    .lp-float.f2 b { font-size:.71rem; }

    .lp-mock { max-height:360px; }
    .lp-feats, .lp-steps { grid-template-columns:1fr; }
    .lp-track { gap:var(--s4); animation-duration:38s; }

    /* Timeline dirampingkan agar kolom teks tetap lega */
    .lp-step { grid-template-columns:64px 1fr; column-gap:var(--s3); }
    .lp-step-c { width:64px; height:64px; }
    .lp-step-c svg { width:26px; height:26px; }
    .lp-step-c::before { width:26px; height:26px; font-size:.72rem; }
    .lp-step::after { left:31px; top:74px; }
    .lp-step h4 { padding-top:.55rem; }

    /* Statistik tetap 2 kolom walau layar sangat sempit — ditumpuk jadi satu
       lajur akan membuat kartunya memanjang tanpa guna. Angkanya yang
       menyesuaikan. */
    .lp-stat-v { font-size:1.05rem; letter-spacing:-.045em; }
    .lp-statbar { gap:var(--s4) var(--s2); }
}