/* =====================================================================
   Hanguk: halaman sambutan (landing page) untuk pengunjung baru.
   Navy dan merah, terpisah dari tema aplikasi; semua kelas berawalan lp-
   agar tidak bertabrakan dengan app.css/design.css. Gambar: img/sambut/.
   ===================================================================== */
.lp{
  --lp-navy:#0A2A57; --lp-navy-2:#0E3E77; --lp-navy-3:#061C3B; --lp-blue:#1455A3; --lp-blue-2:#1F6BD1;
  --lp-red:#D91A2A; --lp-red-2:#F0313F; --lp-red-soft:rgba(217,26,42,.10);
  --lp-bg:#FFFFFF; --lp-soft:#F3F6FB; --lp-card:#FFFFFF; --lp-ink:#0D2C58; --lp-text:#33445E; --lp-muted:#5B6B82; --lp-line:#E1E8F1;
  --lp-shadow:0 1px 2px rgba(10,42,87,.05),0 10px 28px -14px rgba(10,42,87,.22);
  --lp-r:16px;
  background:var(--lp-bg); color:var(--lp-text); font-family:"Plus Jakarta Sans","Noto Sans KR",system-ui,sans-serif;
  font-size:16px; line-height:1.6; min-height:100svh; overflow-x:clip;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lp{--lp-bg:#06142A;--lp-soft:#0A1D3A;--lp-card:#0D2345;--lp-ink:#EAF1FB;--lp-text:#C9D6E8;--lp-muted:#9DB0CA;--lp-line:#1C355B;--lp-red-soft:rgba(240,49,63,.16);--lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6)}
}
:root[data-theme="dark"] .lp{--lp-bg:#06142A;--lp-soft:#0A1D3A;--lp-card:#0D2345;--lp-ink:#EAF1FB;--lp-text:#C9D6E8;--lp-muted:#9DB0CA;--lp-line:#1C355B;--lp-red-soft:rgba(240,49,63,.16);--lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6)}
body.bare:has(.lp){background:var(--lp-bg,#fff)}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp h1,.lp h2,.lp h3{color:var(--lp-ink);margin:0;letter-spacing:-.03em;line-height:1.15}
.lp p{margin:0}
.lp a{color:inherit}
.lp svg{width:1.2em;height:1.2em;flex-shrink:0}
.lp [lang="ko"]{font-family:"Noto Sans KR",sans-serif;font-weight:700}
.lp-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- tombol ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 20px;border-radius:12px;border:1px solid transparent;font:inherit;font-size:.92rem;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn:active{transform:translateY(0)}
.lp-btn.lp-lg{min-height:52px;padding:14px 24px;font-size:1rem}
.lp-red{background:linear-gradient(160deg,var(--lp-red-2),var(--lp-red));color:#fff!important;box-shadow:0 10px 22px -10px rgba(217,26,42,.7)}
.lp-blue{background:var(--lp-blue);color:#fff!important;box-shadow:0 10px 22px -12px rgba(20,85,163,.7)}
.lp-ghost{background:transparent;color:var(--lp-ink);border-color:var(--lp-line)}
.lp-ghost:hover{border-color:var(--lp-ink)}
.lp-glass{background:rgba(255,255,255,.08);color:#fff!important;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lp-glass:hover{background:rgba(255,255,255,.16)}
.lp :focus-visible{outline:3px solid #FFC23D;outline-offset:3px}

/* ---------- menu atas ---------- */
.lp-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--lp-bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px);transition:border-color .2s,box-shadow .2s}
.lp-top.scrolled{border-bottom-color:var(--lp-line);box-shadow:0 8px 24px -18px rgba(10,42,87,.4)}
.lp-nav{display:flex;align-items:center;gap:14px;height:70px}
.lp-brand{display:flex;align-items:center;gap:11px;border:0;background:none;padding:0;cursor:pointer;color:var(--lp-ink);text-align:left;font:inherit;flex-shrink:0}
.lp-brand .logo{width:40px;height:40px;font-size:1.25rem}
.lp-brand b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.06em;line-height:1.1}
.lp-brand small{display:block;font-size:.75rem;font-weight:600;color:var(--lp-muted);letter-spacing:0}
.lp-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1}
.lp-links button{position:relative;border:0;background:none;font:inherit;font-size:.92rem;font-weight:700;color:var(--lp-ink);padding:10px 12px;cursor:pointer;border-radius:8px;white-space:nowrap}
.lp-links button:hover{color:var(--lp-red)}
.lp-links button[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--lp-red)}
.lp-only-menu{display:none!important}
.lp-hamb{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);color:var(--lp-ink);cursor:pointer}
.lp-hamb svg{width:22px;height:22px}

/* ---------- hero ---------- */
.lp-hero{position:relative;display:flex;flex-direction:column;overflow:hidden;color:#fff;
  background:radial-gradient(900px 500px at 85% 20%,rgba(31,107,209,.45),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(217,26,42,.18),transparent 60%),linear-gradient(105deg,var(--lp-navy-3),var(--lp-navy) 45%,var(--lp-navy-2))}
.lp-hero-bg{position:absolute;top:0;right:0;bottom:0;width:58%;display:grid;place-items:center}
.lp-hero-art{width:min(100%,560px);padding:24px 32px;opacity:.95}
.lp-hero-art .hero-art{padding:0}
.lp-hero-art .hero-art svg{width:100%;height:auto;max-height:none}
.lp-hero-art .hero-art>span{display:none}
/* hero.webp lebar (± 2,5:1; versi 960/1440/1920 px lewat srcset), pasangan di sekitar 31–77% dari kiri: foto mengisi seluruh hero,
   sisi kiri digelapkan agar teks terbaca */
.lp-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lp-hero-bg.ada-foto{width:100%}
.lp-hero-bg.ada-foto .lp-hero-art{display:none}
/* foto terlihat utuh; area teks di kiri digelapkan dengan navy tema agar terbaca (struktur sama dengan web japan).
   Satu lapisan tanpa z-index: tergambar di bawah tulisan (.lp-hero-in z-index 1), jadi tulisan tidak ikut redup. */
.lp-hero-bg.ada-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,28,59,.82) 0%,rgba(6,28,59,.62) 32%,rgba(6,28,59,.18) 50%,transparent 62%),linear-gradient(0deg,rgba(6,28,59,.55),transparent 26%)}
.lp-hero:has(.ada-foto) .lp-hero-copy{text-shadow:0 1px 3px rgba(4,16,38,.55),0 3px 22px rgba(4,16,38,.5)}
/* layar lebar: foto lebih banyak terlihat, penggelapan lebih tipis */
@media (min-width:861px){.lp-hero-bg.ada-foto::after{background:linear-gradient(90deg,rgba(6,28,59,.52) 0%,rgba(6,28,59,.44) 30%,rgba(6,28,59,.24) 48%,transparent 62%),linear-gradient(0deg,rgba(4,16,38,.38),transparent 24%)}}
.lp-hero-in{position:relative;z-index:1;display:flex;align-items:center;min-height:min(560px,calc(100svh - 70px));padding-top:48px;padding-bottom:48px}
.lp-hero-copy{max-width:600px}
.lp-eyebrow{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lp-ink);margin-bottom:14px!important}
.lp-eyebrow::before{content:"";width:26px;height:6px;border-radius:6px;background:var(--lp-red);flex-shrink:0}
.lp-hero .lp-eyebrow{color:#fff}
.lp-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.75rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin-bottom:20px}
.lp-hero h1 em{position:relative;font-style:normal;color:#FF3A48;white-space:nowrap}
.lp-hero h1 em::after{content:"";position:absolute;left:2%;right:-2%;bottom:-.12em;height:.13em;border-radius:99px;background:var(--lp-red-2);transform:rotate(-1.5deg)}
.lp-lead{font-size:1.06rem;line-height:1.7;color:#DCE7F7;max-width:54ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp-perks{list-style:none;margin:34px 0 0;padding:20px 0 0;display:grid;grid-template-columns:repeat(4,auto);gap:12px 26px;border-top:1px solid rgba(255,255,255,.14);justify-content:start}
.lp-perks li{display:flex;align-items:center;gap:10px;font-size:.88rem;line-height:1.35;color:#DCE7F7}
.lp-perks li b{display:block;color:#fff;font-weight:800}
.lp-perks svg{width:28px;height:28px;color:#fff;opacity:.9}

/* ---------- judul bagian ---------- */
.lp-intro h2,.lp-head h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800}
.lp-intro p:not(.lp-eyebrow),.lp-head p:not(.lp-eyebrow){margin-top:12px!important;color:var(--lp-muted);font-size:1rem;line-height:1.7}

/* ---------- sektor kerja ---------- */
.lp-sektor{padding:72px 0;background:var(--lp-bg)}
.lp-sektor-in{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:36px;align-items:start}
.lp-sektor .lp-intro{position:sticky;top:96px}
.lp-sektor .lp-btn{margin-top:22px}
.lp-sektor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lp-kartu{position:relative;display:flex;flex-direction:column;border-radius:var(--lp-r);background:var(--lp-card);border:1px solid var(--lp-line);box-shadow:var(--lp-shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}
.lp-kartu-img{position:relative;height:168px;overflow:hidden;background:linear-gradient(150deg,#1D5FB8,var(--lp-navy) 75%)}
.lp-kartu-ganti{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.22)}
.lp-kartu-ganti svg{width:96px;height:96px;stroke-width:1.2}
.lp-kartu-img::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.18),transparent 45%)}
.lp-kartu .lp-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .5s}
/* ikon besar dan kilau hanya pengganti saat foto belum ada; tidak boleh menimpa foto */
.lp-kartu-img.ada-foto .lp-kartu-ganti,.lp-kartu-img.ada-foto::before{display:none}
.lp-kartu-ic{position:absolute;left:16px;top:142px;z-index:2;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--lp-blue-2);color:#fff;border:3px solid var(--lp-card);box-shadow:0 6px 14px -6px rgba(10,42,87,.5)}
.lp-kartu-ic svg{width:24px;height:24px}
.lp-kartu-isi{padding:34px 18px 20px}
.lp-kartu h3{font-size:1.05rem;font-weight:800;margin-bottom:8px}
.lp-kartu p{font-size:.92rem;line-height:1.6;color:var(--lp-muted)}
.lp-kartu p b{color:var(--lp-text)}

/* ---------- program ---------- */
.lp-program{position:relative;padding:72px 0;color:#fff;overflow:hidden;
  background:radial-gradient(700px 380px at 10% 0%,rgba(31,107,209,.35),transparent 60%),linear-gradient(105deg,#06366E,#052A57 55%,#04224A)}
.lp-program::before{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M0 24h48M24 0v48M0 0l48 48M48 0L0 48'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");mask-image:linear-gradient(90deg,#000,transparent 70%)}
.lp-program-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.lp-program h2{color:#fff}
.lp-program .lp-eyebrow{color:#fff}
.lp-program-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-prog{display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:var(--lp-r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .2s,transform .2s}
.lp-prog-ic{display:grid;place-items:center;flex-shrink:0;align-self:flex-start;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff}
.lp-prog-ic svg{width:26px;height:26px}
.lp-prog h3{color:#fff;font-size:1.02rem;font-weight:800;margin-bottom:8px}
.lp-prog h3 em{display:inline-block;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:99px;background:#FFC23D;color:#3A2600;vertical-align:2px;margin-left:4px}
.lp-prog p{font-size:.9rem;line-height:1.6;color:#CFDDF0}

/* ---------- materi ---------- */
.lp-materi{padding:76px 0;background:var(--lp-soft)}
.lp-head{max-width:720px;margin-bottom:34px}
.lp-langkah{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:x}
.lp-tahap{padding:22px 20px;border-radius:var(--lp-r);background:var(--lp-card);border:1px solid var(--lp-line);box-shadow:var(--lp-shadow)}
.lp-tahap-no{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-red);background:var(--lp-red-soft);padding:5px 10px;border-radius:8px;margin-bottom:12px}
.lp-tahap h3{font-size:1.08rem;font-weight:800;margin-bottom:10px}
.lp-tahap h3 span{display:block;font-size:.9rem;color:var(--lp-muted);margin-top:4px;letter-spacing:0}
.lp-tahap p{font-size:.92rem;color:var(--lp-muted)}
.lp-tahap ol{margin:0;padding-left:1.8em;font-size:.9rem;line-height:1.45;color:var(--lp-text);display:grid;gap:5px}
.lp-tahap ol li::marker{color:var(--lp-muted);font-weight:700;font-size:.85em}
.lp-tahap{display:flex;flex-direction:column;align-items:flex-start}
/* cuplikan topik: beberapa bab saja, sisanya "terkunci" agar pengunjung membukanya di mode demo */
.lp-cuplik{list-style:none;margin:4px 0 18px;padding:0;display:grid;gap:8px;width:100%}
.lp-cuplik li{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:10px;background:var(--lp-soft);font-size:.92rem;font-weight:700;color:var(--lp-ink);line-height:1.35}
.lp-cuplik li small{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lp-muted)}
.lp-cuplik .lp-sisa{flex-direction:row;align-items:center;gap:8px;background:none;border:1.5px dashed var(--lp-line);color:var(--lp-muted);font-weight:600}
.lp-cuplik .lp-sisa svg{width:16px;height:16px}
.lp-intip{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;color:var(--lp-blue-2);text-decoration:none}
.lp-intip svg{transition:transform .2s}
@media (hover:hover){.lp-intip:hover svg{transform:translateX(4px)}}
.lp-tahap-hangul{background:linear-gradient(160deg,var(--lp-navy),var(--lp-navy-2));border-color:transparent;color:#DCE7F7}
.lp-tahap-hangul h3{color:#fff}
.lp-tahap-hangul h3 span,.lp-tahap-hangul p{color:#C6D6EE}
.lp-tahap-hangul .lp-tahap-no{background:rgba(255,255,255,.12);color:#fff}
.lp-tahap-hangul ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:9px;font-size:.9rem;line-height:1.45;color:#E4EDF9}
.lp-tahap-hangul li{display:flex;gap:9px}
.lp-tahap-hangul li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-top:.5em;border-radius:50%;background:var(--lp-red-2)}
.lp-tahap-hangul .lp-btn{margin-top:auto}

/* ---------- FAQ ---------- */
.lp-faq{padding:76px 0;background:var(--lp-bg)}
.lp-faq-in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:start}
.lp-faq-list{display:grid;gap:10px}
.lp-faq details{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);transition:border-color .2s}
.lp-faq details[open]{border-color:var(--lp-blue-2);box-shadow:var(--lp-shadow)}
.lp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:700;color:var(--lp-ink);cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lp-soft);color:var(--lp-blue-2);font-size:1.2rem;font-weight:700;transition:transform .2s}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq details p{padding:0 20px 18px;color:var(--lp-muted);font-size:.95rem;line-height:1.7}

/* ---------- ajakan dan kaki ---------- */
.lp-ajak{padding:0 0 76px;background:var(--lp-bg)}
.lp-ajak-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:40px;border-radius:24px;color:#fff;
  background:radial-gradient(500px 260px at 100% 0%,rgba(240,49,63,.35),transparent 60%),linear-gradient(110deg,var(--lp-navy-3),var(--lp-navy-2))}
.lp-ajak-in{width:calc(100% - 2 * clamp(16px,4vw,40px));max-width:calc(1240px - 2 * clamp(16px,4vw,40px));padding-left:clamp(22px,4vw,48px);padding-right:clamp(22px,4vw,48px)}
.lp-ajak h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800}
.lp-ajak p{color:#CFDDF0;margin-top:8px!important}
.lp-ajak .lp-cta{margin-top:0}
.lp-foot{background:var(--lp-navy-3);color:#A9BBD4;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:.85rem}
.lp-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.lp-foot b{color:#fff;letter-spacing:.08em}
.lp-foot a{color:#fff;text-decoration:none;font-weight:700}
.lp-foot a:hover{text-decoration:underline}

@media (hover:hover){
  .lp-kartu:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(10,42,87,.45)}
  .lp-kartu:hover .lp-foto{transform:scale(1.05)}
  .lp-prog:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
}

/* ---------- layar sedang ---------- */
/* judul di atas kartu: empat kartu sektor/program butuh lebar penuh */
@media (max-width:1320px){
  .lp-sektor-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-sektor .lp-intro{position:static;max-width:680px}
}
@media (max-width:1180px){
  .lp-faq-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-faq .lp-intro{max-width:640px}
  .lp-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-perks{grid-template-columns:repeat(2,auto)}
}
@media (max-width:1100px){
  .lp-nav .lp-pjg{display:none}
}
/* layar sedang: foto lebih lebar dari layar, jadi digeser supaya pasangan agak ke kanan, menjauhi judul */
@media (min-width:861px) and (max-width:1180px){.lp-hero-foto{object-position:35% 30%}}
@media (max-width:980px){
  .lp-links button{padding:10px 8px;font-size:.88rem}
  .lp-masuk{display:none}
  .lp-sektor-grid,.lp-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- HP ---------- */
@media (max-width:860px){
  .lp-nav{height:64px;gap:10px}
  .lp-brand{flex:1;min-width:0}
  .lp-brand .logo{width:36px;height:36px;font-size:1.1rem}
  .lp-brand b{font-size:1.05rem}
  .lp-hamb{display:grid}
  .lp-nav>.lp-red{min-height:44px;padding:10px 14px;font-size:.85rem}
  .lp-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--lp-bg);border-bottom:1px solid var(--lp-line);box-shadow:0 18px 30px -18px rgba(10,42,87,.35)}
  .lp-links.open{display:flex}
  .lp-links button{text-align:left;padding:14px 4px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--lp-line)}
  .lp-links button[aria-current]::after{left:auto;right:4px;top:50%;bottom:auto;width:8px;height:8px;border-radius:50%;transform:translateY(-50%)}
  .lp-only-menu{display:inline-flex!important;margin-top:14px}
  .lp-hero-bg{position:relative;order:2;width:100%;height:240px;margin-top:-8px}
  .lp-hero-art{width:min(100%,400px);padding:0 16px 8px}
  /* HP (potret): foto menjadi latar penuh di belakang tulisan, seperti di layar lebar */
  .lp-hero-bg.ada-foto{position:absolute;inset:0;order:0;width:100%;height:auto;margin:0}
  .lp-hero-foto{object-position:60% 30%}
  /* tulisan memenuhi lebar layar: navy merata dari atas ke bawah, sedikit lebih tipis di tengah agar foto tetap terlihat */
  .lp-hero-bg.ada-foto::after{background:linear-gradient(180deg,rgba(6,28,59,.84) 0%,rgba(6,28,59,.66) 38%,rgba(6,28,59,.6) 62%,rgba(4,16,38,.86) 100%)}
  .lp-hero-in{min-height:0;padding-top:36px;padding-bottom:16px}
  .lp-lead{font-size:1rem}
  .lp-cta .lp-btn{flex:1 1 220px}
  .lp-perks{gap:14px 18px;margin-top:28px}
  .lp-perks li{font-size:.85rem}
  .lp-perks svg{width:24px;height:24px}
  .lp-sektor,.lp-program,.lp-materi,.lp-faq{padding:52px 0}
  .lp-ajak{padding-bottom:52px}
}
@media (max-width:560px){
  .lp-daftar svg,.lp-nav .lp-pjg{display:none}
  .lp-sektor-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .lp-kartu{flex-direction:row}
  .lp-kartu-img{width:118px;height:auto;min-height:140px;flex-shrink:0}
  .lp-kartu-ganti svg{width:56px;height:56px}
  .lp-kartu-ic{left:92px;top:14px;width:40px;height:40px}
  .lp-kartu-ic svg{width:20px;height:20px}
  .lp-kartu-isi{padding:16px 16px 16px 30px}
  .lp-kartu h3{font-size:1rem}
  .lp-kartu p{font-size:.88rem}
  .lp-program-grid,.lp-langkah{grid-template-columns:minmax(0,1fr)}
  .lp-prog{flex-direction:row;gap:14px;padding:18px 16px}
  .lp-prog-ic{width:44px;height:44px}
  .lp-ajak-in{padding-top:30px;padding-bottom:30px;border-radius:20px}
  .lp-foot-in{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .lp *{transition:none!important}
  .lp-btn:hover,.lp-kartu:hover,.lp-prog:hover{transform:none}
}