.landing-page { --landing-ink: #14213d; --landing-muted: #64748b; }
.landing-hero {
    padding: 7rem 0 5rem;
    background:
        radial-gradient(circle at 80% 10%, rgba(var(--brand-primary-rgb, 64, 179, 216), .18), transparent 35%),
        radial-gradient(circle at 10% 40%, rgba(var(--brand-accent-rgb, 131, 201, 51), .12), transparent 30%);
}
.eyebrow { color: var(--brand-primary, var(--bs-primary)); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.pulse-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: var(--brand-accent, #83c933); box-shadow: 0 0 0 .25rem rgba(var(--brand-accent-rgb, 131, 201, 51), .18); }
.landing-lead { max-width: 600px; font-size: 1.15rem; }
.text-gradient { background: linear-gradient(100deg, var(--brand-primary, #3a9cbd), var(--brand-accent, #83c933)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-dashboard { max-width: 430px; margin-inline: auto; padding: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: 1.5rem; background: var(--bs-body-bg); transform: rotate(1deg); }
.brand-mark { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; color: #fff; font-size: .7rem; font-weight: 800; background: linear-gradient(135deg, var(--brand-primary, #40b3d8), var(--brand-accent, #83c933)); }
.company-logo { width: 2.2rem; height: 2.2rem; object-fit: contain; border-radius: .5rem; }
.status-chip { padding: .3rem .55rem; border-radius: 999px; color: #277a3c; background: rgba(var(--brand-accent-rgb, 131, 201, 51), .14); font-size: .7rem; font-weight: 700; }
.trend-up { color: #277a3c; font-size: .8rem; font-weight: 700; }
.trend-up small { color: var(--bs-secondary-color); font-weight: 400; }
.mini-chart { display: flex; align-items: end; gap: .45rem; height: 5rem; padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); }
.mini-chart i { flex: 1; border-radius: .3rem .3rem 0 0; background: linear-gradient(var(--brand-primary, #40b3d8), var(--brand-accent, #83c933)); opacity: .8; }
.mini-chart i:nth-child(1) { height: 25%; }.mini-chart i:nth-child(2) { height: 42%; }.mini-chart i:nth-child(3) { height: 35%; }.mini-chart i:nth-child(4) { height: 60%; }.mini-chart i:nth-child(5) { height: 52%; }.mini-chart i:nth-child(6) { height: 76%; }.mini-chart i:nth-child(7) { height: 94%; }
.metric-card { padding: .7rem; border-radius: .7rem; background: var(--bs-tertiary-bg); }
.metric-card span { display: block; color: var(--bs-secondary-color); font-size: .65rem; }.metric-card strong { font-size: 1.1rem; }
.section-heading { max-width: 560px; }.section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.solution-card { padding: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); transition: transform .2s ease, box-shadow .2s ease; }
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(20, 33, 61, .08); }
.feature-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .8rem; color: #fff; font-size: 1.45rem; background: linear-gradient(135deg, var(--brand-primary, #40b3d8), var(--brand-accent, #83c933)); }
.action-panel { border-radius: 1.5rem; background: var(--bs-tertiary-bg); }
.tracking-widget { padding: 1.2rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); }
.onboarding-strip { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border-radius: 1rem; color: #fff; background: linear-gradient(110deg, #17335f, #286c88); }
/* ---- Artikel publik ---- */
.article-cover { height: 170px; object-fit: cover; }
.article-meta { color: var(--bs-secondary-color); font-size: .78rem; }
.article-page-body { line-height: 1.8; }
.article-page-body img { max-width: 100%; height: auto; border-radius: .75rem; }
[data-bs-theme="dark"] .hero-dashboard, [data-bs-theme="dark"] .solution-card { box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); }
@media (max-width: 767.98px) {
    .landing-hero { padding-top: 5rem; }
    .landing-hero h1 { font-size: 2.7rem; }
    .hero-dashboard { transform: none; }
    .onboarding-strip { align-items: flex-start; flex-direction: column; }
}

/* ---- Halaman Pricing ---- */
.pricing-featured { transform: scale(1.02); }
.pricing-ribbon { background: linear-gradient(90deg, var(--brand-primary, #40b3d8), var(--brand-accent, #83c933)); color: #fff; letter-spacing: .5px; }
@media (max-width: 991.98px) {
    .pricing-featured { transform: none; }
}