/* Neon — gelap bercahaya, panel kaca, gradasi dua warna, dock bawah di HP */
.fam-neon { --card: color-mix(in oklab, var(--bg) 92%, var(--ink)); --line: color-mix(in oklab, var(--ink) 12%, var(--bg)); --shadow: 0 20px 50px -24px rgb(0 0 0 / .7); --sec-y: clamp(52px, 7vw, 110px); background: radial-gradient(1200px 600px at 100% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%), var(--bg); }
.fam-neon .display { line-height: 1.02; }
.fam-neon .h2 em, .fam-neon .h1 em { font-style: normal; background: linear-gradient(95deg, var(--primary-text), var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam-neon .eyebrow { color: var(--accent-text); letter-spacing: .14em; }
.fam-neon .hero--glow .eyebrow { letter-spacing: 0; color: var(--ink); }
.fam-neon .btn--primary { background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 55%, var(--accent))); box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--primary) 80%, transparent); }
.fam-neon .btn--primary:hover { box-shadow: 0 14px 40px -10px color-mix(in oklab, var(--primary) 95%, transparent); }
.fam-neon .btn--ghost { border-color: color-mix(in oklab, var(--ink) 25%, transparent); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.fam-neon .icon-btn { border-color: color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 999px; }

/* Header: pil kaca melayang di desktop */
.fam-neon .hdr { background: color-mix(in oklab, var(--bg) 70%, transparent); }
.fam-neon .brand__mark { border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--accent)); }
@media (min-width: 960px) {
  .fam-neon .hdr { top: 12px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fam-neon .hdr__in { min-height: 64px; padding: 0 10px 0 18px; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--bg) 66%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .6); }
  .fam-neon .nav__a { border-radius: 999px; }
  .fam-neon .nav__a.is-active { background: color-mix(in oklab, var(--ink) 9%, transparent); }
  .fam-neon .nav__a.is-active::after { display: none; }
  .fam-neon .hdr__cta { border-radius: 999px; }
  .fam-neon main { margin-top: -76px; }
  .fam-neon main > :first-child { padding-top: calc(96px + clamp(16px, 3vw, 40px)); }
}

/* Kartu kaca */
.fam-neon .feat, .fam-neon .tcard, .fam-neon .step, .fam-neon .cinfo, .fam-neon .fbento__t, .fam-neon .fstrip__i, .fam-neon .faq__i { border: 1px solid color-mix(in oklab, var(--ink) 11%, transparent); background: color-mix(in oklab, var(--ink) 4%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fam-neon .fbento__t.is-lead { background: linear-gradient(140deg, color-mix(in oklab, var(--primary) 70%, var(--bg)), color-mix(in oklab, var(--accent) 45%, var(--bg))); color: #fff; --muted: rgb(255 255 255 / .82); }
.fam-neon .fbento__t.is-lead .feat__ic { background: rgb(255 255 255 / .16); color: #fff; }
.fam-neon .feat__ic { background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--primary-text); border-radius: 14px; }
.fam-neon .step__n { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.fam-neon .stats { border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); background: color-mix(in oklab, var(--ink) 10%, transparent); }
.fam-neon .stat { background: var(--bg); }
.fam-neon .stat__v { background: linear-gradient(95deg, var(--primary-text), var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam-neon .faq { border: 0; gap: 10px; }
.fam-neon .faq__i { padding-inline: 18px; border-radius: var(--r); }
.fam-neon .marquee { border-color: color-mix(in oklab, var(--ink) 10%, transparent); background: transparent; }
.fam-neon .marquee__item { font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.fam-neon .marquee__item:nth-child(odd) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.fam-neon .marquee__item::after { color: var(--accent-text); }
.fam-neon .cta { background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 80%, #000), color-mix(in oklab, var(--accent) 60%, #000)); }
.fam-neon .cta::after { background: linear-gradient(100deg, rgb(0 0 0 / .62), rgb(0 0 0 / .2)); }
.fam-neon .crail__img { border-color: var(--bg); box-shadow: 0 0 0 2px var(--primary), 0 0 18px -2px var(--primary); }
.fam-neon .gitem, .fam-neon .about__img, .fam-neon .cat { border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.fam-neon .input, .fam-neon .select, .fam-neon .textarea { background: color-mix(in oklab, var(--ink) 5%, var(--bg)); }
.fam-neon .ftr { border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); background: transparent; }
.fam-neon .ftr__brand { background: linear-gradient(95deg, var(--primary-text), var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam-neon .wa-float { box-shadow: 0 0 0 6px color-mix(in oklab, #25d366 22%, transparent), 0 10px 30px -6px rgb(37 211 102 / .6); }
.fam-neon .drawer, .fam-neon .sheet { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); }