/* Lapis — lembar-lembar bertumpuk: header pil gelap mengambang, section bersudut membulat yang saling menumpuk */
.fam-lapis { --card: var(--bg); --sec-y: clamp(56px, 7vw, 112px); --sheet-r: clamp(24px, 4vw, 44px); }
.fam-lapis .display, .fam-lapis .h2 { letter-spacing: -.04em; }
.fam-lapis .display em, .fam-lapis .h1 em, .fam-lapis .h2 em { font-style: normal; color: var(--primary-text); }
.fam-lapis .eyebrow { padding: .35rem .8rem; border-radius: 999px; background: var(--tint); letter-spacing: .06em; }
.fam-lapis .btn { font-weight: 700; }

/* Header: pil gelap yang melayang */
.fam-lapis .hdr { top: 0; padding-top: 10px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fam-lapis .hdr__in { min-height: 60px; padding-inline: 10px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .45); }
.fam-lapis .hdr .icon-btn { border-color: color-mix(in oklab, var(--bg) 22%, var(--ink)); }
.fam-lapis .hdr .icon-btn:hover { background: color-mix(in oklab, var(--bg) 12%, var(--ink)); }
.fam-lapis .brand__mark { border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.fam-lapis .nav__a { border-radius: 999px; color: color-mix(in oklab, var(--bg) 78%, var(--ink)); }
.fam-lapis .nav__a:hover { color: var(--bg); background: color-mix(in oklab, var(--bg) 12%, var(--ink)); }
.fam-lapis .nav__a.is-active { color: var(--ink); background: var(--bg); }
.fam-lapis .nav__a.is-active::after { display: none; }
.fam-lapis .hdr__cta { --btn-bg: var(--primary); }
.fam-lapis .hdr .mnav { margin: 10px var(--gutter) 0; border: 0; border-radius: 28px; background: var(--ink); color: var(--bg); --line: color-mix(in oklab, var(--bg) 16%, var(--ink)); }

/* Section beranda seperti lembar yang ditumpuk */
.fam-lapis.page-home main > section:not(.sec--hero) { position: relative; margin-top: calc(var(--sheet-r) * -1); padding-top: calc(var(--sec-y) + var(--sheet-r) * .3); border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--bg); box-shadow: 0 -18px 40px -26px rgb(0 0 0 / .35); }
.fam-lapis.page-home main > section:not(.sec--hero):nth-of-type(odd) { background: var(--surface); }
.fam-lapis.page-home main > section.sec--testimonials, .fam-lapis.page-home main > section.sec--stats { background: color-mix(in oklab, var(--primary) 10%, var(--bg)); }
.fam-lapis.page-home main > section.sec--cta { background: var(--ink); color: var(--bg); --muted: color-mix(in oklab, var(--bg) 70%, var(--ink)); }
.fam-lapis.page-home .ftr { position: relative; margin-top: calc(var(--sheet-r) * -1); border-radius: var(--sheet-r) var(--sheet-r) 0 0; }
.fam-lapis .hero--deck { padding-bottom: calc(var(--sec-y) + var(--sheet-r)); }

.fam-lapis .feat, .fam-lapis .tcard, .fam-lapis .step, .fam-lapis .cinfo { border: 0; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 8px 0 -4px color-mix(in oklab, var(--primary) 26%, var(--bg)), var(--shadow); }
.fam-lapis .fbento__t { background: var(--bg); box-shadow: var(--shadow); }
.fam-lapis .fbento__t.is-lead { background: var(--primary); color: var(--on-primary); --muted: color-mix(in oklab, var(--on-primary) 80%, var(--primary)); }
.fam-lapis .fbento__t.is-lead .feat__ic { background: color-mix(in oklab, var(--on-primary) 16%, var(--primary)); color: var(--on-primary); }
.fam-lapis .feat__ic { border-radius: 14px; }
.fam-lapis .stats { border: 0; gap: 12px; background: transparent; }
.fam-lapis .stat { border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); }
.fam-lapis .cat { border-radius: var(--r-lg); }
.fam-lapis .about-banner { box-shadow: var(--shadow-lg); }
.fam-lapis .faq { border: 0; gap: 10px; }
.fam-lapis .faq__i { padding-inline: 18px; border: 0; border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow); }
.fam-lapis .cta { box-shadow: var(--shadow-lg); }
.fam-lapis .ftr { background: var(--ink); color: var(--bg); border: 0; --muted: color-mix(in oklab, var(--bg) 62%, var(--ink)); --line: color-mix(in oklab, var(--bg) 16%, var(--ink)); }
.fam-lapis .ftr .ftr__links a { color: color-mix(in oklab, var(--bg) 86%, var(--ink)); }
.fam-lapis .ftr .socials a { border-color: color-mix(in oklab, var(--bg) 28%, var(--ink)); }
.fam-lapis .ftr__word { color: var(--primary); }
.fam-lapis { --wf: .6; }