/* ==========================================================================
   INSYNTIVE Academy — gaya khusus landing page (index.html saja, <body class="… landing">)
   --------------------------------------------------------------------------
   Dimuat SETELAH app.css. app.css dipakai 12 halaman lain (member area, bayar, daftar, admin, …) — jangan ubah
   tampilan landing di sana. Isi file ini: header terang + hero terpusat (badge, judul, harga, tombol, statistik)
   dengan "panggung" produk: sheet contoh template di tengah, kartu lisensi / sertifikat / rilis harian tersebar.
   ========================================================================== */

.landing {
  --hc-bg: #F7F9FC;
  --hc-ink: #0B1220;
  --hc-ink-2: #3D4A5C;
  --hc-ink-3: #64748B;
  --hc-line: #E3E8EF;
  --hc-green: #0E9F6E;
  --hc-blue: #2B5FD9;
}

/* ---- Scroll halus dari menu atas -----------------------------------------
   Klik Fitur / Cara kerja / Harga / FAQ → bergulir halus; judul section berhenti tepat di bawah header yang menempel.
   prefers-reduced-motion: app.css memaksa scroll-behavior: auto. */
html:has(body.landing) { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 64px) + 16px); }

/* ---- Header terang ------------------------------------------------------
   Di atas: menyatu dengan hero (tanpa garis). Setelah digulir (public-landing.js memberi .is-scrolled):
   transparan + blur, dengan garis & bayangan tipis. Layar lebar: menu tepat di tengah (grid 1fr auto 1fr). */
.landing .site-header {
  color: var(--hc-ink);
  background: var(--hc-bg);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.landing .site-header.is-scrolled {
  background: rgba(247, 249, 252, .7);
  border-bottom-color: rgba(227, 232, 239, .9);
  box-shadow: 0 8px 24px -20px rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing .site-header.is-scrolled { background: rgba(247, 249, 252, .97); }
}
@media (min-width: 960px) {
  .landing .site-header .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .landing .site-header .brand { justify-self: start; }
  .landing .site-nav { margin-inline: 0; }
  .landing .hdr-actions { justify-self: end; }
}
.landing .site-header .brand { color: var(--hc-ink); }
.landing .site-header .brand__word span { color: #1B8FB0; }
.landing .site-header .brand__app { color: var(--hc-ink-3); }
.landing .site-nav a { border-radius: 10px; color: var(--hc-ink-2); }
.landing .site-nav a:hover { color: var(--hc-ink); background: rgba(11, 18, 32, .05); }
/* Section yang sedang terlihat (public-landing.js initNavSpy → aria-current): teks tegas + garis kecil dari tengah. */
.landing .site-nav a { position: relative; }
.landing .site-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px;
  background: var(--hc-blue); transform: scaleX(0); transition: transform .25s ease;
}
.landing .site-nav a[aria-current="true"] { color: var(--hc-ink); }
.landing .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
/* Tombol header senada dengan tombol hero: sudut 10px, "Daftar" gelap, "Masuk" teks saja. */
.landing .hdr-actions { gap: 4px; }
.landing .hdr-link { min-height: 42px; padding: 8px 14px; border-radius: 10px; color: var(--hc-ink); }
.landing .hdr-link:hover { color: var(--hc-ink); background: rgba(11, 18, 32, .05); }
.landing .site-header .btn--primary {
  --btn-bg: var(--hc-ink); --btn-fg: #fff;
  min-height: 42px; padding: 8px 20px; border-radius: 10px; box-shadow: 0 8px 18px -12px rgba(11, 18, 32, .9);
}
.landing .site-header .btn--primary:hover { --btn-bg: #1C2638; }
/* HP sempit: logo + Masuk + Daftar harus muat tanpa melebarkan halaman (tanpa ini halaman bisa digeser ke samping). */
@media (max-width: 419.98px) {
  .landing .site-header .container { gap: 8px; }
  .landing .hdr-actions { gap: 2px; }
  .landing .hdr-link { padding-inline: 10px; }
  .landing .site-header .btn--primary { padding-inline: 14px; }
}
@media (max-width: 359.98px) {
  .landing .site-header .brand { gap: 8px; }
  .landing .site-header .brand__mark { width: 28px; height: 28px; }
  .landing .site-header .brand__word { font-size: 1rem; letter-spacing: .06em; }
  .landing .hdr-link { padding-inline: 8px; }
  .landing .site-header .btn--primary { padding-inline: 12px; }
}
.landing .site-header :focus-visible { outline-color: var(--hc-blue); }

/* ---- Hero terpusat ------------------------------------------------------ */
.landing .hero--center {
  background: var(--hc-bg);
  color: var(--hc-ink);
  padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--hc-line);
}
.landing .hero--center :focus-visible { outline-color: var(--hc-blue); }

.hc { display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); }
.hc__copy { display: grid; justify-items: center; gap: 18px; text-align: center; max-width: 1080px; }

.hc__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; font-size: var(--fs-sm); font-weight: 700; line-height: 1.35;
}
.hc__badge .i { width: 16px; height: 16px; color: var(--hc-green); }

.landing .hero--center h1 {
  max-width: none; color: var(--hc-ink);
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance;
}
.hc__accent { white-space: normal; }
.hc__green { color: var(--hc-green); white-space: nowrap; }
.hc__blue { color: var(--hc-blue); white-space: nowrap; } /* "produk digital" tidak dipatah di tengah */

/* Ikon ikut mengalir di baris teks (bukan item flex), jadi saat teks terbungkus di layar sempit semuanya tetap rata tengah. */
.hc__hook {
  display: inline-block; margin: 2px 0 0; padding: 10px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); font-weight: 600; line-height: 1.45; color: var(--hc-ink-2);
  text-align: center; text-wrap: balance;
}
.hc__hook .i { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; color: #107C41; }
.hc__hook b { color: var(--hc-ink); font-weight: 800; }

.landing .hero--center .hero__lead { max-width: 62ch; color: var(--hc-ink-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.landing .hero--center .hero__lead strong { color: var(--hc-ink); }

.landing .hero--center .hero__price { justify-content: center; text-align: center; }
.landing .hero--center .hero__price b { color: var(--hc-ink); }
.landing .hero--center .hero__price .per { color: var(--hc-ink-2); }
.landing .hero--center .hero__price .note { color: var(--hc-ink-3); }
/* "Cuma ±Rp700 per hari" — angka dihitung site.js dari harga (promo kalau ada) ÷ hari dalam masa akses. */
.hero__perday { display: flex; justify-content: center; flex-basis: 100%; margin-top: 10px; }
.hero__perday[hidden] { display: none; }
.perday {
  display: inline-flex; align-items: baseline; gap: .3em; padding: 6px 16px; border-radius: 999px;
  background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); font-weight: 700; line-height: 1.35;
}
.perday strong { color: var(--hc-green); font-size: 1.2em; font-weight: 800; letter-spacing: -.01em; }
.landing .hero--center .hero__price .note--promo { color: var(--hc-ink-2); }
.landing .hero--center .hero__price .note--promo b { color: var(--hc-green); }
.landing .hero--center .promo-chip--ink { background: #E9F8F1; border-color: #BFE9D5; color: #0B7A55; }

.landing .hero--center .hero__ctas { justify-content: center; width: auto; gap: 14px; margin-top: 6px; }
.hc-btn { min-height: 58px; padding: 15px 30px; border-radius: 12px; font-size: 1.0625rem; font-weight: 800; box-shadow: none; }
.hc-btn--dark { --btn-bg: #0B1220; --btn-fg: #fff; box-shadow: 0 10px 24px -14px rgba(11, 18, 32, .9); }
.hc-btn--dark:hover { --btn-bg: #1C2638; }
.hc-btn--line { --btn-bg: #fff; --btn-fg: #0B1220; --btn-bd: #0B1220; }
.hc-btn--line:hover { --btn-bg: #F3F6FA; }
@media (max-width: 479.98px) { .landing .hero--center .hero__ctas { width: 100%; } .hc-btn { flex: 1 1 100%; } }

.landing .hero--center .hero__login { margin-top: -4px; color: var(--hc-ink-3); }
.landing .hero--center .hero__login a { color: var(--hc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Statistik besar ---------------------------------------------------- */
.hc__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(28px, 5vw, 64px); width: 100%; }
.hc__stats ul { list-style: none; margin: 0; padding: 0; display: contents; }
.landing .hc__stats ul[hidden] { display: none; }
.hc__stats li { display: grid; justify-items: center; gap: 4px; min-width: 150px; text-align: center; padding: 0; border: 0; }
.hc__stats strong {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--hc-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hc__stats span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-ink-3); line-height: 1.35; }
.hc__stats strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
/* Kartu statistik dari app.css (hero gelap) dinetralkan. */
.landing .hc__stats .hero-stats li { border-left: 0; padding-left: 0; }
@media (max-width: 559.98px) {
  .hc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .hc__stats li { min-width: 0; }
  .hc__stats strong { font-size: 1.875rem; }
  .hc__stats span { font-size: .6875rem; letter-spacing: .05em; }
}

/* ---- Kartu dekoratif di kiri & kanan teks hero ---------------------------
   --lw = lebar bagian teks yang sempit (paragraf), --kw = lebar kartu, --gap = jarak kartu ke teks. Kartu di luar
   (boleh masuk ke margin container), jadi tidak pernah menutupi judul / tombol. */
.hc__top { position: relative; width: 100%; display: grid; justify-items: center; }
.landing .hero--center { overflow: clip; }
.hc__deco { font-size: 13px; }
.hc-float > * { position: relative; inset: auto; width: 100%; }
.landing .hv-chip { background: #0B1220; border-color: #0B1220; color: #fff; box-shadow: 0 10px 22px -12px rgba(11, 18, 32, .7); }
.landing .hv-lic { box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .35), 0 1px 3px rgba(15, 23, 42, .08); border: 1px solid var(--hc-line); }
.landing .hv-cert { background: #0F1B2B; }

/* Goyang pelan: tiap kartu berayun ±1,5° di sekitar sudut dasarnya (--r), tempo berbeda supaya tidak serempak.
   Pakai properti `rotate` (bukan transform) supaya tidak bentrok dengan animasi melayang bawaan kartu. */
@keyframes hc-sway {
  0%, 100% { rotate: calc(var(--r, 0deg) - 1.5deg); translate: 0 0; }
  50% { rotate: calc(var(--r, 0deg) + 1.5deg); translate: 0 -4px; }
}
.hc-float { --r: 0deg; rotate: var(--r); transform-origin: 50% 20%; animation: hc-sway var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; }
.hc-float--chip { --r: -4deg; --dur: 6.5s; }
.hc-float--cert { --r: -3deg; --dur: 8s; --delay: -2s; }
.hc-float--lic { --r: 3deg; --dur: 7.5s; --delay: -4s; }
.hc-float--drop { --r: -2deg; --dur: 9s; --delay: -1s; }

@media (min-width: 1440px) {
  /* Teks hero tetap lebar penuh (judul tidak dipersempit). Kartu diletakkan di samping bagian yang LEBIH SEMPIT
     dari judul — badge, paragraf, harga, tombol (--lw ≈ lebar paragraf) — jadi tidak pernah menutupi teks. */
  .hc { --lw: 800px; --kw: 230px; --gap: 28px; }
  .hc__deco { position: absolute; inset: 0; pointer-events: none; }
  .hc-float { position: absolute; width: var(--kw); }
  .hc-float--chip, .hc-float--cert { left: calc((100% - var(--lw)) / 2 - var(--gap) - var(--kw)); }
  .hc-float--lic, .hc-float--drop { right: calc((100% - var(--lw)) / 2 - var(--gap) - var(--kw)); }
  .hc-float--chip { top: 0; width: auto; margin-left: 40px; }   /* sejajar badge */
  .hc-float--cert { top: 60%; }                                 /* sejajar harga */
  /* Lisensi: tepat setelah ujung kata "digital" (baris ke-2 judul). Mulai 1440px judul selalu 72px & selebar 1080px,
     jadi ujung "produk digital" selalu 457px di kanan tengah, baris ke-2 mulai ±118px dari atas. */
  .hc-float--lic { left: calc(50% + 457px + 24px); right: auto; top: 128px; width: 220px; }
  .hc-float--drop { top: 80%; width: calc(var(--kw) - 24px); margin-right: 20px; } /* sejajar tombol */
}
@media (min-width: 1600px) {
  .hc { --kw: 250px; --gap: 40px; }
  .hc__deco { font-size: 14px; }
  .hc-float--lic { width: 250px; }
}

/* < 1440px: tidak cukup ruang di samping teks → kartu berjejer rapi di bawah teks hero. */
@media (max-width: 1439.98px) {
  .hc__deco { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; margin-top: 36px; width: 100%; }
  .hc-float { position: static; }
  .hc-float--chip { flex: 1 1 100%; display: flex; justify-content: center; }
  .hc-float--chip > * { width: auto; }
  .hc-float--lic { width: 300px; }
  .hc-float--cert { width: 270px; }
  .hc-float--drop { width: 230px; }
  .hc-float > * { animation: none; }
  .hc-float { --r: 0deg; } /* berjejer: tetap bergoyang pelan, tanpa miring dasar */
}
/* Tablet & HP (< 1024px): kartu dekoratif disembunyikan — hero langsung lanjut ke statistik. */
@media (max-width: 1023.98px) { .hc__deco { display: none; } }
@media (prefers-reduced-motion: reduce) { .hc-float, .hc-float > * { animation: none; } }

/* ---- Rilis template harian (#rilis) — senada dengan hero ------------------
   Judul terpusat + badge pill, kartu lebih lega (maks. 3 kolom), chip & tombol bersudut 12px seperti tombol hero. */
.landing .drops { background: #fff; border-bottom: 1px solid var(--hc-line); padding-block: clamp(56px, 7vw, 96px); }
.landing .drops__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 40px); text-align: center; }
.landing .drops__head > div { display: grid; justify-items: center; gap: 16px; width: 100%; }
.landing .drops .eyebrow {
  gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; line-height: 1.35;
}
.landing .drops .eyebrow .dot { background: var(--hc-green); box-shadow: 0 0 0 4px rgba(14, 159, 110, .16); }
.landing .drops__head h2 {
  margin: 0; color: var(--hc-ink); font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
}
.landing .drops__note { color: var(--hc-ink-3); font-size: clamp(.9375rem, .9rem + .2vw, 1rem); }
.landing .drops__note .i { color: var(--hc-green); }

/* Chip kategori: tetap satu baris yang bisa digeser; auto-margin = rata tengah kalau muat, tanpa memotong sisi kiri. */
.landing .drops__filters { gap: 10px; margin-bottom: clamp(24px, 3vw, 32px); }
.landing .drops__chip:first-child { margin-left: auto; }
.landing .drops__chip:last-child { margin-right: auto; }
.landing .drops__chip { min-height: 42px; padding: 8px 16px; border-radius: 12px; border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing .drops__chip:hover { border-color: var(--hc-ink-3); color: var(--hc-ink); }
.landing .drops__chip span { color: var(--hc-ink-3); }
.landing .drops__chip[aria-pressed="true"] { background: var(--hc-ink); border-color: var(--hc-ink); color: #fff; }
.landing .drops__chip[aria-pressed="true"] span { color: #D6FD91; }

.landing .drop-list { gap: 16px; }
@media (min-width: 900px) { .landing .drop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.landing .drop {
  grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px;
  border-radius: 16px; border-color: var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.landing .drop:hover { border-color: #CBD5E1; box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .35); }
.landing .drop__ic { width: 52px; height: 52px; border-radius: 14px; }
.landing .drop__meta { gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--hc-ink-3); }
.landing .drop__title { margin-top: 6px; font-size: 1.0625rem; line-height: 1.4; color: var(--hc-ink); }

.landing .drops__more { margin-top: clamp(28px, 4vw, 40px); }
.landing .drops__more .btn {
  --btn-bg: #fff; --btn-fg: var(--hc-ink); --btn-bd: var(--hc-ink);
  min-height: 52px; padding: 12px 26px; border-radius: 12px; font-size: 1rem; font-weight: 800; box-shadow: none;
}
.landing .drops__more .btn:hover { --btn-bg: #F3F6FA; }

/* ---- Yang Anda dapat (#fitur) — senada dengan hero ------------------------
   Judul terpusat (badge pill hijau, judul gelap + aksen hijau/biru), kartu putih lega bersudut 20px, ikon hijau/biru. */
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) { padding-block: clamp(64px, 8vw, 112px); }
.landing :is(#fitur, #ide) { background: var(--hc-bg); }
.landing #cara-kerja { background: #fff; }
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) .sec-head { max-width: 860px; margin-inline: auto; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) .eyebrow {
  gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px;
  background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; line-height: 1.35;
}
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) .eyebrow__idx { padding: 4px 7px; border-radius: 999px; background: #fff; color: var(--hc-green); }
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) .h2 { color: var(--hc-ink); font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.landing :is(#fitur, #cara-kerja, #ide, #harga, #tentang) .lead { max-width: 62ch; color: var(--hc-ink-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }

.landing #fitur .feat { gap: clamp(16px, 2vw, 24px); }
.landing #fitur .card {
  gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.landing #fitur .feat h3 { color: var(--hc-ink); font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem); }
.landing #fitur .feat p { color: var(--hc-ink-2); font-size: 1rem; line-height: 1.65; }
.landing #fitur .icon-box { width: 52px; height: 52px; border-radius: 14px; background: #EAF0FD; color: var(--hc-blue); }
.landing #fitur .icon-box .i { width: 24px; height: 24px; }
.landing #fitur .feat > .card:nth-child(odd) .icon-box { background: #E9F8F1; color: var(--hc-green); }
.landing #fitur .chip--tint { background: #F3F6FA; border-color: var(--hc-line); color: var(--hc-ink-2); border-radius: 10px; min-height: 30px; padding: 4px 12px; }
.landing #fitur .link { color: var(--hc-ink); text-decoration: underline; text-underline-offset: 3px; }
.landing #fitur .link .i { color: var(--hc-green); }
.landing #fitur .feat__live { color: var(--hc-green); }

/* Kartu utama: tetap gelap sebagai aksen, pakai tinta hero. */
.landing #fitur .feat__main { background: var(--hc-ink); border-color: transparent; box-shadow: 0 24px 48px -28px rgba(11, 18, 32, .7); }
.landing #fitur .feat__main::before { background: radial-gradient(circle, rgba(14, 159, 110, .4), transparent 68%); }
.landing #fitur .feat__main h3 { color: #fff; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; }
.landing #fitur .feat__main p { color: rgba(255, 255, 255, .72); }
.landing #fitur .feat__main .feat__live { color: #D6FD91; }
.landing #fitur .feat__week { border-radius: 14px; }

/* ---- Yang Anda dapat: tab per tujuan (Berjualan · Belajar · Berkarier) ----
   public-landing.js menampilkan tablist & menyembunyikan panel yang tidak aktif. Tanpa JS: semua panel tampil berurutan.
   Layar lebar: kartu pertama tiap panel besar (2 kolom × --rows baris), kartu lain bertumpuk di kolom kanan. */
.ftabs {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto clamp(28px, 4vw, 40px); padding: 6px;
  border-radius: 16px; background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.ftabs[hidden] { display: none; }
.ftab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px;
  border: 0; border-radius: 11px; background: none; color: var(--hc-ink-2);
  font: inherit; font-size: 1rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s;
}
.ftab .i { width: 20px; height: 20px; }
.ftab:hover { color: var(--hc-ink); background: #F3F6FA; }
.ftab[aria-selected="true"] { background: var(--hc-ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(11, 18, 32, .9); }
.ftab[aria-selected="true"] .i { color: #D6FD91; }
.ftab:focus-visible { outline: 2px solid var(--hc-blue); outline-offset: 2px; }
@media (max-width: 519.98px) {
  .ftabs { width: 100%; }
  .ftab { flex: 1 1 0; min-width: 0; padding: 10px 8px; gap: 6px; font-size: .9375rem; }
  .ftab .i { width: 18px; height: 18px; }
}
@media (max-width: 399.98px) { .ftab .i { display: none; } .ftab { font-size: .875rem; padding-inline: 4px; } }

.fpanel[hidden] { display: none; }
.fpanel { animation: fpanel-in .35s var(--ease) both; }
@keyframes fpanel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fpanel { animation: none; } }
.landing #fitur .fpanel + .fpanel { margin-top: clamp(16px, 2vw, 24px); } /* tanpa JS: panel berurutan */

/* Kartu utama terang (Belajar / Berkarier): sedikit gradasi hijau-biru supaya terasa "unggulan". */
.landing #fitur .fcard--lead { background: linear-gradient(155deg, #fff 45%, #EDF7F2 78%, #EAF0FD); align-content: start; }
.landing #fitur .fcard--lead h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; }
.landing #fitur .fcard--lead p { font-size: 1.0625rem; max-width: 60ch; }

@media (min-width: 680px) and (max-width: 1023.98px) {
  .landing #fitur .fpanel > .card:first-child { grid-column: 1 / -1; }
  .landing #fitur .fpanel > .card:last-child:nth-child(even) { grid-column: 1 / -1; } /* kartu ganjil terakhir selebar panel */
}
@media (min-width: 1024px) {
  .landing #fitur .fpanel { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; }
  .landing #fitur .fpanel > .card:first-child { grid-column: 1 / span 2; grid-row: span var(--rows, 2); }
}
/* Berjualan: kartu utama gelap selebar panel di atas, 3 kartu kecil sejajar di bawahnya. */
@media (min-width: 1024px) {
  .landing #fitur .fpanel--top > .card:first-child { grid-column: 1 / -1; grid-row: auto; }
}


/* ---- Cara kerja (#cara-kerja) — senada dengan hero ----------------------
   Layar lebar: langkah rata tengah, nomor di tengah, garis putus-putus antar-nomor. HP: daftar vertikal seperti semula. */
.landing #cara-kerja .step__num {
  width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--hc-line);
  color: var(--hc-green); font-size: .9375rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.landing #cara-kerja .step:first-child .step__num { background: var(--hc-ink); border-color: var(--hc-ink); color: #D6FD91; box-shadow: 0 10px 24px -14px rgba(11, 18, 32, .9); }
.landing #cara-kerja .step { grid-template-columns: 52px minmax(0, 1fr); }
.landing #cara-kerja .step::before { left: 25px; top: 60px; background: var(--hc-line); }
.landing #cara-kerja .step__title { color: var(--hc-ink); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); padding-top: 13px; }
.landing #cara-kerja .step__text { color: var(--hc-ink-2); font-size: 1rem; line-height: 1.6; }
@media (min-width: 960px) {
  .landing #cara-kerja .steps--h { gap: 24px; }
  .landing #cara-kerja .steps--h .step { grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
  .landing #cara-kerja .steps--h .step::before {
    left: calc(50% + 38px); right: calc(-50% + 14px); top: 25px;
    background: repeating-linear-gradient(90deg, #CBD5E1 0 6px, transparent 6px 12px);
  }
  .landing #cara-kerja .steps--h .step__title { padding-top: 0; }
  .landing #cara-kerja .steps--h .step__text { max-width: 30ch; margin-inline: auto; }
}

/* ---- Ide menghasilkan (#ide) — kartu putih lega seperti "Yang Anda dapat" ---- */
.landing #ide .ideas { gap: clamp(16px, 2vw, 24px); }
.landing #ide .idea {
  gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.landing #ide .icon-box { width: 52px; height: 52px; border-radius: 14px; background: #E9F8F1; color: var(--hc-green); }
.landing #ide .idea:nth-child(even) .icon-box { background: #EAF0FD; color: var(--hc-blue); }
.landing #ide .icon-box .i { width: 24px; height: 24px; }
.landing #ide .idea h3 { color: var(--hc-ink); font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }
.landing #ide .idea p { color: var(--hc-ink-2); font-size: 1rem; line-height: 1.65; }
.landing #ide .chip { background: #F3F6FA; border-color: var(--hc-line); color: var(--hc-ink-2); border-radius: 10px; min-height: 30px; padding: 4px 12px; }
.landing #ide .disclaimer { justify-content: center; max-width: 72ch; margin-inline: auto; margin-top: clamp(28px, 4vw, 40px); text-align: center; color: var(--hc-ink-3); }
.landing #ide .disclaimer .i { flex: none; color: var(--hc-ink-3); }

/* ---- Harga (#harga) — satu kartu lebar dua sisi + catatan ringan -------------
   Kiri gelap (harga + tombol), kanan terang (benefit). Info bayar jadi 2 catatan tanpa kotak; info internasional dilipat. */
.landing #harga { background: var(--hc-bg); }
.pc {
  display: grid; max-width: 1080px; margin-inline: auto; overflow: hidden; border-radius: 24px;
  background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 32px 64px -44px rgba(11, 18, 32, .45);
}
@media (min-width: 900px) { .pc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pc .price-card__amt b { font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem); }
.pc__buy { display: grid; gap: 22px; align-content: start; padding: clamp(28px, 4vw, 48px); background: var(--hc-ink); color: #fff; }
.pc .promo-chip { justify-self: start; }
.pc .price-card__sub { gap: 8px 16px; }
.hc-btn--lime { --btn-bg: #D6FD91; --btn-fg: var(--hc-ink); width: 100%; margin-top: 6px; }
.hc-btn--lime:hover { --btn-bg: #E3FFB0; }
.pc__get { display: grid; gap: 20px; align-content: start; padding: clamp(28px, 4vw, 48px); }
.pc__label { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--hc-ink); }
.pc__get .ticks { gap: 14px; }
.pc__get .ticks li { color: var(--hc-ink-2); font-size: 1rem; line-height: 1.5; }
.pc__get .ticks .i { color: var(--hc-green); }

.pc-notes { display: grid; gap: 24px clamp(24px, 4vw, 48px); max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; padding-inline: 4px; }
@media (min-width: 760px) { .pc-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.pc-note > .i { width: 22px; height: 22px; margin-top: 1px; color: var(--hc-green); }
.pc-note h3 { margin: 0 0 6px; font-size: 1.0625rem; color: var(--hc-ink); letter-spacing: -.01em; }
.pc-note p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--hc-ink-2); }
.pc-note p b { color: var(--hc-ink); }
.pc-note a { color: var(--hc-ink); text-decoration: underline; text-underline-offset: 3px; }

.pc-intl { max-width: 1080px; margin: clamp(28px, 3vw, 40px) auto 0; border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.pc-intl summary {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 4px; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--hc-ink);
}
.pc-intl summary::-webkit-details-marker { display: none; }
.pc-intl summary > .i { width: 20px; height: 20px; flex: none; color: var(--hc-blue); }
.pc-intl__hint { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--hc-ink-3); }
.pc-intl .pc-intl__chev { width: 18px; height: 18px; color: var(--hc-ink-3); transition: transform .2s; }
.pc-intl[open] .pc-intl__chev { transform: rotate(45deg); }
@media (max-width: 559.98px) { .pc-intl__hint { display: none; } .pc-intl .pc-intl__chev { margin-left: auto; } }
.pc-intl__body { display: grid; gap: 14px; padding: 0 4px 24px 36px; max-width: 80ch; }
.pc-intl__body p, .pc-intl__body .ticks li { color: var(--hc-ink-2); font-size: .9375rem; line-height: 1.6; }
.pc-intl__body b { color: var(--hc-ink); }
.pc-intl__body .ticks .i { color: var(--hc-green); }
.pc-intl__body .link { color: var(--hc-blue); }

/* ---- Di balik Academy (#tentang) — kartu founder tinta hero, angka tanpa kotak (garis rambut, seperti statistik hero) ---- */
.landing #tentang { background: #fff; }
@media (min-width: 960px) { .landing #tentang .founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 56px); align-items: center; } }
.landing #tentang .founder__card { gap: 20px; padding: clamp(28px, 3.4vw, 44px); border-radius: 24px; background: var(--hc-ink); box-shadow: 0 32px 64px -44px rgba(11, 18, 32, .6); }
.landing #tentang .founder__card::before { display: none; }
.landing #tentang .founder__mono { width: 64px; height: 64px; border-radius: 18px; background: rgba(214, 253, 145, .12); color: #D6FD91; border: 1px solid rgba(214, 253, 145, .3); box-shadow: none; font-size: 1.375rem; }
.landing #tentang .founder__role { color: rgba(255, 255, 255, .62); }
.landing #tentang .founder__card p { color: rgba(255, 255, 255, .74); font-size: 1.0625rem; line-height: 1.7; }
.landing #tentang .founder__links .btn { border-radius: 10px; --btn-bd: rgba(255, 255, 255, .22); }
.landing #tentang .facts { gap: 0 clamp(20px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .landing #tentang .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.landing #tentang .fact { gap: 8px; padding: 24px 0; border: 0; border-top: 1px solid var(--hc-line); border-radius: 0; background: none; }
.landing #tentang .fact b { background: none; color: var(--hc-ink); -webkit-text-fill-color: currentColor; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); letter-spacing: -.035em; }
.landing #tentang .fact span { color: var(--hc-ink-3); font-size: .9375rem; font-weight: 600; }
.landing #tentang .facts__src { padding-top: 16px; border-top: 1px solid var(--hc-line); color: var(--hc-ink-3); }
@media (max-width: 479.98px) { .hc-btn--lime { padding-inline: 18px; font-size: 1rem; } }

/* Foto founder (crop wajah 256px, tampil 72px). */
.founder__photo { flex: none; width: 72px; height: 72px; border-radius: 20px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .16); }

/* ---- FAQ (#faq) — senada dengan hero: badge pill, daftar bergaris rambut (bukan kotak) ---- */
.landing #faq { background: var(--hc-bg); padding-block: clamp(64px, 8vw, 112px); }
.landing #faq .eyebrow { gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; line-height: 1.35; }
.landing #faq .eyebrow__idx { padding: 4px 7px; border-radius: 999px; background: #fff; color: var(--hc-green); }
.landing #faq .h2 { color: var(--hc-ink); font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; }
.landing #faq .lead { color: var(--hc-ink-2); }
.landing #faq .faq { gap: 0; border-top: 1px solid var(--hc-line); }
.landing #faq .faq__item { border: 0; border-bottom: 1px solid var(--hc-line); border-radius: 0; background: none; box-shadow: none; }
.landing #faq .faq__item summary { min-height: 72px; padding: 20px 4px; color: var(--hc-ink); font-size: 1.125rem; }
.landing #faq .faq__item summary:hover { color: #000; }
.landing #faq .faq__icon { width: 34px; height: 34px; border-radius: 999px; background: #fff; border: 1px solid var(--hc-line); color: var(--hc-ink-2); }
.landing #faq .faq__item[open] .faq__icon { background: var(--hc-ink); border-color: var(--hc-ink); color: #fff; }
.landing #faq .faq__a { padding: 0 52px 24px 4px; color: var(--hc-ink-2); font-size: 1rem; line-height: 1.7; }
.landing #faq .faq__a strong, .landing #faq .faq__a b { color: var(--hc-ink); }
.landing #faq .faq__a a:not(.btn) { color: var(--hc-blue); }
.landing #faq .help-card {
  gap: 16px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.landing #faq .help-card p { color: var(--hc-ink-2); font-size: 1rem; line-height: 1.6; }
.landing #faq .help-card b { color: var(--hc-ink); }
.landing #faq .help-card .btn { border-radius: 12px; min-height: 52px; box-shadow: none; }

/* ---- CTA penutup — cermin hero: panel terang, teks terpusat, tombol gelap ---- */
.landing .cta-band {
  justify-items: center; gap: 28px; padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); border-radius: 28px;
  background: var(--hc-bg); border: 1px solid var(--hc-line); color: var(--hc-ink); text-align: center;
}
@media (min-width: 900px) { .landing .cta-band { grid-template-columns: 1fr; } }
.landing .cta-band h2 { color: var(--hc-ink); font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.landing .cta-band p { margin-inline: auto; color: var(--hc-ink-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.landing .cta-band__act { justify-items: center; gap: 14px; }
.landing .cta-band__price { color: var(--hc-ink-3); }
.landing .cta-band__price b { color: var(--hc-ink); }

/* ---- Footer (landing) — terang: putih, garis rambut di atas, teks tinta hero, tanpa watermark ---- */
.landing .site-footer { background: #fff; color: var(--hc-ink-2); border-top: 1px solid var(--hc-line); }
.landing .footer__word { display: none; }
.landing .site-footer .brand { color: var(--hc-ink); }
.landing .site-footer .brand__word span { color: #1B8FB0; }
.landing .site-footer .brand__app { color: var(--hc-ink-3); }
.landing .footer__tag { color: var(--hc-ink); }
.landing .footer__brand p { color: var(--hc-ink-2); }
.landing .footer__brand b, .landing .footer__brand strong { color: var(--hc-ink); }
.landing .footer__col h2 { color: var(--hc-ink); font-size: .9375rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.landing .footer__col a { color: var(--hc-ink-2); }
.landing .footer__col a:hover { color: var(--hc-ink); }
.landing .footer__pay .chip { border-radius: 8px; background: var(--hc-bg); border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing .footer__bottom { border-top-color: var(--hc-line); color: var(--hc-ink-3); }
.landing .site-footer :focus-visible { outline-color: var(--hc-blue); }

/* ---- Halaman konten bergaya landing (/lisensi/): hero terang terpusat, judul section seperti landing ---- */
.landing .page-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); background: var(--hc-bg); color: var(--hc-ink); border-bottom: 1px solid var(--hc-line); text-align: center; }
.landing .page-hero .container { justify-items: center; gap: 20px; }
.landing .page-hero h1 { max-width: 18ch; color: var(--hc-ink); font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.landing .page-hero .lead { max-width: 62ch; color: var(--hc-ink-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.landing .page-hero__meta { justify-content: center; gap: 10px; }
.landing .page-hero .chip { min-height: 34px; padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.landing .page-hero .chip--lime { background: #E9F8F1; border-color: #BFE9D5; color: #0B7A55; }
.landing .page-hero .chip--glass { background: #fff; border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing .crumb { color: var(--hc-ink-3); }
.landing .crumb:hover { color: var(--hc-ink); }
.landing .page-hero :focus-visible { outline-color: var(--hc-blue); }

.landing .content-sec + .content-sec { margin-top: clamp(72px, 9vw, 128px); }
.landing .content-sec .sec-head { max-width: 860px; margin: 0 auto clamp(28px, 4vw, 48px); justify-items: center; gap: 16px; text-align: center; }
.landing .content-sec .eyebrow { gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; line-height: 1.35; }
.landing .content-sec .eyebrow__idx { padding: 4px 7px; border-radius: 999px; background: #fff; color: var(--hc-green); }
.landing .content-sec .sec-head .h2 { color: var(--hc-ink); font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.landing .content-sec .lead { max-width: 64ch; color: var(--hc-ink-2); }
.landing .content-sec .lead b { color: var(--hc-ink); }
.landing .content-sec .card { gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px; background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.landing .content-sec .card h3 { color: var(--hc-ink); }
.landing .content-sec .card p { color: var(--hc-ink-2); }
.landing .content-sec .ticks li { color: var(--hc-ink-2); }
.landing .content-sec .ticks .i { color: var(--hc-green); }
.landing .content-sec .ticks .is-no .i { color: #D14343; }
.landing .ex--yes h3 .i { color: var(--hc-green); }
.landing .ex--no h3 .i { color: #D14343; }
.landing .lcard__code { border-radius: 8px; background: var(--hc-ink); color: #D6FD91; }
.landing .content-sec .lcard--featured { border-color: var(--hc-green); box-shadow: 0 0 0 4px rgba(14, 159, 110, .1), 0 24px 48px -36px rgba(11, 18, 32, .5); }
.landing .lcard .ticks { border-top-color: var(--hc-line); }
.landing .lcard__terms { border-radius: 14px; background: var(--hc-bg); color: var(--hc-ink-2); }
.landing .lcard__terms strong { color: var(--hc-ink); }
.landing .lcard__terms-lbl { color: var(--hc-ink-3); letter-spacing: .04em; }
.landing .content-sec .table-wrap { border-radius: 16px; border-color: var(--hc-line); }
.landing .content-sec .table th, .landing .content-sec .table td { border-bottom-color: var(--hc-line); padding: 14px 16px; }
.landing .content-sec .table thead th { background: var(--hc-bg); color: var(--hc-ink); }
.landing .licmx thead th:first-child { background: var(--hc-bg); }
.landing .licmx tbody th { color: var(--hc-ink-2); box-shadow: inset -1px 0 0 var(--hc-line); }
.landing .licmx th[scope="col"] small { color: var(--hc-green); }
.landing .licmx .yes { color: var(--hc-green); }
.landing .licmx .col-hl { background: rgba(14, 159, 110, .06); }
.landing .content-sec .table-cap { color: var(--hc-ink-3); text-align: center; }
.landing .how .icon-box { width: 52px; height: 52px; border-radius: 14px; background: #E9F8F1; color: var(--hc-green); }
.landing .how .card:nth-child(even) .icon-box { background: #EAF0FD; color: var(--hc-blue); }
.landing .content-sec .alert { padding: 18px 20px; border-radius: 16px; background: var(--hc-bg); border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing .content-sec .alert > .i { color: var(--hc-blue); }
.landing .content-sec .alert b { color: var(--hc-ink); }
.landing .content-sec .cta-band__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---- Lisensi di landing (#lisensi) — tetap gelap sebagai sorotan, tapi bahasa visual hero:
   tinta polos (tanpa grid/glow), judul terpusat + badge pill, aksen hijau muda, kartu 20px bergaris halus, tombol 12px. ---- */
.landing #lisensi { background: var(--hc-ink); padding-block: clamp(64px, 8vw, 112px); }
.landing #lisensi .sec-head { max-width: 860px; margin-inline: auto; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.landing #lisensi .eyebrow { gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(214, 253, 145, .1); border: 1px solid rgba(214, 253, 145, .28); color: #D6FD91; line-height: 1.35; }
.landing #lisensi .eyebrow__idx { padding: 4px 7px; border-radius: 999px; background: rgba(214, 253, 145, .16); color: #D6FD91; }
.landing #lisensi .h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.lic-accent { color: #D6FD91; }
.landing #lisensi .lead { color: rgba(255, 255, 255, .72); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.landing #lisensi .lead b { color: #fff; }
.landing #lisensi .lic3 { gap: clamp(16px, 2vw, 24px); }
.landing #lisensi .card--glass {
  gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: 20px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.landing #lisensi .lic3__mark { width: 48px; height: 48px; border-radius: 14px; background: rgba(214, 253, 145, .12); border-color: rgba(214, 253, 145, .3); color: #D6FD91; }
.landing #lisensi .lic3__mark--no { background: rgba(255, 156, 156, .1); border-color: rgba(255, 156, 156, .3); color: #FF9C9C; }
.landing #lisensi .lic3 h3 { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); }
.landing #lisensi .lic3 p { color: rgba(255, 255, 255, .7); font-size: 1rem; line-height: 1.65; }
.landing #lisensi .lic3__eg { border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); font-size: .9375rem; }
.landing #lisensi .lic3__eg b { color: #fff; }
.landing #lisensi .lic-foot { justify-items: center; gap: 24px; margin-top: clamp(32px, 4vw, 48px); text-align: center; }
@media (min-width: 900px) { .landing #lisensi .lic-foot { grid-template-columns: 1fr; } }
.landing #lisensi .lic-foot p { max-width: 72ch; color: rgba(255, 255, 255, .6); }
.landing #lisensi .lic-foot .btn-row { justify-content: center; gap: 12px; }
.landing #lisensi .hc-btn--lime { width: auto; margin-top: 0; }
.hc-btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .28); }
.hc-btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .06); --btn-bd: rgba(255, 255, 255, .45); }
.landing #lisensi :focus-visible { outline-color: #D6FD91; }

/* Kartu terang: garis abu-abu tipis + bayangan tipis saat diam; menonjol saat hover (lihat di bawah). */
.landing :is(#fitur .card:not(.feat__main), #jalur .path-card, #ide .idea, .content-sec .card, .drop) {
  border: 1px solid #E8ECF1; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02);
}
/* ---- Micro-interaction kartu (hover) — hanya perangkat ber-hover & tanpa "kurangi gerakan" ----
   Kartu terangkat 4px (properti `translate`, bukan `transform`, supaya tidak ditimpa animasi .reveal) + bayangan membesar + garis menebal; ikon membesar & miring sedikit; panah link bergeser. */
.landing :is(#fitur .card, #jalur .path-card, #ide .idea, #lisensi .card--glass, .content-sec .card, .drop) {
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .25s, background-color .25s;
}
.landing :is(.icon-box, .lic3__mark, .drop__ic), .landing .link .i, .landing #fitur .feat__main::before { transition: transform .35s var(--ease); }
.landing #fitur .feat__main::before { transition-duration: .8s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .landing :is(#fitur .card:not(.feat__main), #jalur .path-card, #ide .idea, .content-sec .card, .drop):hover {
    translate: 0 -6px; border-color: #C3CCD8;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 28px 56px -24px rgba(11, 18, 32, .3);
  }
  .landing #fitur .feat__main:hover { translate: 0 -6px; box-shadow: 0 32px 64px -30px rgba(11, 18, 32, .75); }
  .landing #fitur .feat__main:hover::before { transform: translate(-40px, 40px) scale(1.08); }
  .landing #lisensi .card--glass:hover { translate: 0 -6px; background: rgba(255, 255, 255, .06); border-color: rgba(214, 253, 145, .32); }
  .landing .card:hover :is(.icon-box, .lic3__mark) { transform: scale(1.08) rotate(-4deg); }
  .landing .drop:hover .drop__ic { transform: scale(1.06) rotate(-3deg); }
  .landing .card:hover .link .i { transform: translateX(4px); }
  .landing #tentang .fact b { transition: color .25s; }
  .landing #tentang .fact:hover b { color: var(--hc-green); }
}
/* Kartu lisensi unggulan (PLR-END di /lisensi/) tetap bergaris hijau, juga saat hover. */
.landing .content-sec .lcard--featured { border-color: var(--hc-green); box-shadow: 0 0 0 4px rgba(14, 159, 110, .1), 0 1px 2px rgba(15, 23, 42, .04); }
.landing .content-sec .lcard--featured:hover { border-color: var(--hc-green); }
/* FAQ: ikon & warna mengikuti status yang dituju (data-state dari public-landing.js), jadi ikon langsung berputar balik
   saat mulai menutup — tidak menunggu atribut [open] dilepas di akhir animasi. */
.landing #faq .faq__icon { transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s; }
.landing #faq .faq__item[data-state="closed"] .faq__icon { transform: none; background: #fff; border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing #faq .faq__item[data-state="open"] .faq__icon { transform: rotate(45deg); background: var(--hc-ink); border-color: var(--hc-ink); color: #fff; }

/* ---- Kartu kecil (Ide menghasilkan + kartu kecil "Yang Anda dapat") — teks lebih proporsional ----
   Deskripsi 15px & lebih redup (±35–40 karakter/baris, bukan ±26), judul tetap tegas, tag ringkas supaya cenderung 1 baris. */
.landing #ide .idea, .landing #fitur .card:not(.feat__main):not(.fcard--lead) { gap: 12px; padding: clamp(22px, 2.2vw, 28px); }
.landing #ide .icon-box, .landing #fitur .card:not(.feat__main):not(.fcard--lead) .icon-box { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px; }
.landing #ide .icon-box .i, .landing #fitur .card:not(.feat__main):not(.fcard--lead) .icon-box .i { width: 22px; height: 22px; }
.landing #ide .idea h3, .landing #fitur .card:not(.feat__main):not(.fcard--lead) h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.02em; }
.landing #ide .idea p, .landing #fitur .card:not(.feat__main):not(.fcard--lead) p { font-size: .9375rem; line-height: 1.6; color: var(--hc-ink-3); }
.landing #ide .chip-row { gap: 6px; padding-top: 8px; }
.landing #ide .chip { min-height: 26px; padding: 3px 10px; border-radius: 8px; font-size: .8125rem; font-weight: 600; }
/* Tag platform → baris keterangan di kaki kartu ("Shopee · Tokopedia · …"): membungkus rapi, tidak jadi 2 baris pill yang tak seragam. */
.landing #ide .chip-row { gap: 2px 0; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hc-line); }
.landing #ide .chip { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--hc-ink-2); font-size: .8125rem; font-weight: 700; }
.landing #ide .chip + .chip::before { content: "·"; margin: 0 7px; color: var(--hc-ink-3); font-weight: 400; }
.landing #ide .chip-row { box-sizing: border-box; min-height: 56px; align-content: start; line-height: 1.5; } /* ruang 2 baris → garis kaki sejajar di semua kartu */

/* ---- Tab "Yang Anda dapat": pill gelap yang meluncur di belakang tab aktif (public-landing.js mengisi --x / --w) ---- */
.ftabs { position: relative; isolation: isolate; }
.ftabs__pill {
  position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 11px; background: var(--hc-ink); box-shadow: 0 10px 24px -14px rgba(11, 18, 32, .9);
}
.ftabs.is-ready .ftabs__pill { transition: transform .45s cubic-bezier(.3, 1.25, .5, 1), width .45s cubic-bezier(.3, 1.25, .5, 1); }
.ftabs.is-measuring .ftabs__pill { transition: none; }
.ftab { position: relative; transition: color .3s ease, background-color .2s; }
.ftab .i { transition: color .3s ease, transform .35s var(--ease); }
.ftab[aria-selected="true"] { background: none; box-shadow: none; }
.ftab[aria-selected="true"]:hover { background: none; color: #fff; }
.ftab:not([aria-selected="true"]):hover .i { transform: translateY(-1px); }
.ftab:focus { outline: none; }
.ftab:focus-visible { outline: 2px solid var(--hc-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ftabs.is-ready .ftabs__pill { transition: none; } }
/* Saat tab aktif (JS siap), animasi panel diatur public-landing.js (pudar keluar → tinggi → kartu masuk berurutan). */
.ftabs.is-ready ~ .fpanel { animation: none; }

/* ---- Coba gratis (#gratis) & Kata member (#kata-member) — section baru dari Fase 1–2, disamakan dengan hero ---- */
.landing #gratis { background: #fff; padding-block: clamp(64px, 8vw, 112px); border-bottom: 1px solid var(--hc-line); }
.landing #gratis .free__head { display: grid; justify-items: center; gap: 24px; max-width: 860px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.landing #gratis .free__head > div { display: grid; justify-items: center; gap: 18px; }
.landing :is(#gratis, #kata-member) .eyebrow { gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: #E9F8F1; border: 1px solid #BFE9D5; color: #0B7A55; line-height: 1.35; }
.landing :is(#gratis, #kata-member) .eyebrow .dot { background: var(--hc-green); box-shadow: 0 0 0 4px rgba(14, 159, 110, .16); }
.landing #gratis .h2, .landing #kata-member .h2 { margin: 0; color: var(--hc-ink); font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.landing :is(#gratis, #kata-member) .lead { margin: 0; max-width: 62ch; color: var(--hc-ink-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.landing #gratis .free-grid { gap: clamp(16px, 2vw, 24px); }
.landing #gratis .free-card > a {
  gap: 16px; padding: 22px; border-radius: 20px; border: 1px solid #E8ECF1; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transform: none;
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.landing #gratis .free-card--media > a { padding: 0; }
.landing #gratis .free-card__media { background: var(--hc-bg); border-bottom-color: var(--hc-line); }
.landing #gratis .free-card__ic { border-radius: 12px; background: #E9F8F1; color: var(--hc-green); }
.landing #gratis .free-card__body b { color: var(--hc-ink); font-size: 1.0625rem; }
.landing #gratis .free-card__body small { color: var(--hc-ink-3); font-size: .875rem; }
.landing #gratis .free-card__tag { background: #E9F8F1; color: #0B7A55; }
.landing #kata-member { background: var(--hc-bg); padding-block: clamp(64px, 8vw, 112px); }
.landing #kata-member .sec-head { gap: 18px; margin-bottom: clamp(32px, 4vw, 48px); }
/* Slider testimoni: track scroll-snap horizontal (3 kolom desktop, 2 tablet, 1 HP). Padding + margin negatif supaya
   bayangan & efek angkat kartu tidak terpotong oleh overflow. Scrollbar disembunyikan: navigasi lewat swipe, panah, titik. */
.landing #kata-member .kata-slider { --kata-gap: clamp(16px, 2vw, 24px); --kata-cols: 3; }
.landing #kata-member .kata-track {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--kata-cols) - 1) * var(--kata-gap)) / var(--kata-cols));
  gap: var(--kata-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 12px 6px 44px; margin: -12px -6px -44px; scroll-padding-inline: 6px; scrollbar-width: none;
}
.landing #kata-member .kata-track::-webkit-scrollbar { display: none; }
.landing #kata-member .kata-track > li { scroll-snap-align: start; min-width: 0; }
@media (max-width: 959px) { .landing #kata-member .kata-slider { --kata-cols: 2; } }
@media (max-width: 639px) { .landing #kata-member .kata-slider { --kata-cols: 1; } }
@media (prefers-reduced-motion: reduce) { .landing #kata-member .kata-track { scroll-behavior: auto; } }
.landing #kata-member .kata-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.landing #kata-member .kata-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--hc-line); background: #fff; color: var(--hc-ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: background .2s, border-color .2s, color .2s, box-shadow .25s var(--ease);
}
.landing #kata-member .kata-btn .i { width: 20px; height: 20px; }
.landing #kata-member .kata-btn:hover { border-color: #C3CCD8; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25); }
.landing #kata-member .kata-btn:focus-visible { outline: 2px solid var(--hc-green); outline-offset: 2px; }
.landing #kata-member .kata-dots { display: flex; gap: 8px; }
.landing #kata-member .kata-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #CBD3DE; cursor: pointer;
  transition: width .3s var(--ease), background .2s;
}
.landing #kata-member .kata-dot[aria-current="true"] { width: 24px; background: var(--hc-green); }
.landing #kata-member .kata-dot:focus-visible { outline: 2px solid var(--hc-green); outline-offset: 3px; }
.landing #kata-member .kata-card figure {
  gap: 14px; padding: clamp(22px, 2.4vw, 28px); border-radius: 20px; border: 1px solid #E8ECF1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 6px 16px -8px rgba(15, 23, 42, .08), 0 18px 40px -24px rgba(15, 23, 42, .12);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.landing #kata-member .kata-card blockquote { color: var(--hc-ink); }
.landing #kata-member .kata-card figcaption { border-top-color: var(--hc-line); color: var(--hc-ink-3); }
.landing #kata-member .kata-card figcaption b { color: var(--hc-ink); }
.landing #kata-member .kata-note { justify-content: center; text-align: left; color: var(--hc-ink-3); }
.landing #kata-member .kata-note .i { color: var(--hc-green); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .landing #gratis .free-card > a:hover, .landing #kata-member .kata-card figure:hover {
    translate: 0 -6px; transform: none; border-color: #C3CCD8;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 24px -12px rgba(15, 23, 42, .12), 0 32px 64px -28px rgba(11, 18, 32, .28);
  }
}
/* 8 menu (termasuk "Gratis" & "Kata member"): di 960–1179px tautan dirapatkan supaya tidak menabrak logo / tombol Masuk/Daftar
   (diukur: 8 tautan butuh ±540px di 1024px dan ±505px di 960px). */
@media (min-width: 1024px) and (max-width: 1179.98px) { .landing .site-nav a { padding-inline: 6px; font-size: .85rem; } }
@media (min-width: 960px) and (max-width: 1023.98px) { .landing .site-nav a { padding-inline: 5px; font-size: .8125rem; } }
@media (min-width: 960px) and (max-width: 1179.98px) { .landing .site-header .btn { white-space: nowrap; } }
/* Kartu #gratis rata tengah mengikuti judul — berapa pun jumlahnya (CV Builder saja / + template sampel dari API). */
.landing #gratis .free-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 300px)); justify-content: center; }

/* ---- Kata member: kutipan lebih tegas, semua kartu tampil sama (unggulan hanya memengaruhi urutan), badge pill hijau ---- */
.landing #kata-member .kata-card blockquote { font-size: 1.0625rem; line-height: 1.7; }
.landing #kata-member .kata-stars { color: #F5A524; font-size: 17px; }
.landing #kata-member .kata-stars__off { color: #DCE2EA; }
.landing #kata-member .kata-card figcaption { gap: 4px; padding-top: 16px; }
.landing #kata-member .kata-badge { border-radius: 999px; background: #F3F6FA; border-color: var(--hc-line); color: var(--hc-ink-2); }
.landing #kata-member .kata-badge--ok { background: #E9F8F1; border-color: #BFE9D5; color: #0B7A55; }
.landing #kata-member .kata-meta time { font-size: .8125rem; color: var(--hc-ink-3); }

/* ---- Kartu sampel bercover: gambar di atas (zoom halus saat hover); kartu CV ikut punya area visual setinggi cover ---- */
.landing #gratis .free-card--media > a { gap: 0; overflow: hidden; }
.landing #gratis .free-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.landing #gratis .free-card__media img { transition: transform .6s var(--ease); }
.landing #gratis .free-card--media .free-card__body { gap: 6px; padding: 18px 20px 20px; }
.landing #gratis .free-card--media .free-card__tag { margin-top: 0; }
.landing #gratis .free-grid:has(.free-card--media) .free-card--cv > a { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.landing #gratis .free-grid:has(.free-card--media) .free-card--cv .free-card__ic {
  width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; border-bottom: 1px solid var(--hc-line);
  background: linear-gradient(150deg, #F2FBF6, #E9F8F1 55%, #EAF0FD);
}
.landing #gratis .free-grid:has(.free-card--media) .free-card--cv .free-card__ic .i { width: 44px; height: 44px; }
.landing #gratis .free-grid:has(.free-card--media) .free-card--cv .free-card__body { gap: 6px; padding: 18px 20px 20px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .landing #gratis .free-card > a:hover .free-card__media img { transform: scale(1.04); }
}

/* ---- #gratis: 5 kartu dalam satu baris di desktop (≥1100px) — kartu vertikal: ikon/cover di atas, tag, judul, deskripsi ≤3 baris ---- */
@media (min-width: 1100px) {
  .landing #gratis .free-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; justify-content: stretch; }
  .landing #gratis .free-card > a { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 20px; }
  .landing #gratis .free-card--media > a,
  .landing #gratis .free-grid:has(.free-card--media) .free-card--cv > a { gap: 0; padding: 0; }
}
.landing #gratis .free-card__body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.landing #gratis .free-card__body small { -webkit-line-clamp: 3; line-height: 1.55; }
.landing #gratis .free-card__tag { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Pilih jalurmu (Fase 5): warna judul & kartu mengikuti gaya terang landing. */
.landing #jalur .path-card h3 { color: var(--hc-ink); }
.landing #jalur .path-card .icon-box { background: #E9F8F1; color: var(--hc-green); }
.landing #jalur .path-card:nth-child(2) .icon-box { background: #EAF1FF; color: var(--hc-blue); }
.landing #jalur .path-card::before { background: linear-gradient(90deg, var(--hc-green), var(--hc-blue)); }
.landing #jalur .path-card__dl dd { color: var(--hc-ink-2); }
.landing #jalur .path-note { color: var(--hc-ink-3); }