:root {
    --lontar-ink: #182433;
    --lontar-soft: #f4f6f9;
    --lontar-accent: #206bc4;
    --lontar-border: #dce3ec;
}

html { scroll-behavior: smooth; }
body.lontar-public { color: var(--lontar-ink); background: var(--lontar-soft); }

.lontar-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--lontar-border);
    backdrop-filter: blur(10px);
}

.lontar-brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--lontar-ink); }
.lontar-brand strong { display: block; font-size: 1.1rem; letter-spacing: .09em; line-height: 1.1; }
.lontar-brand small { display: block; margin-top: .15rem; color: #667382; font-size: .72rem; }
.lontar-mark {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .65rem;
    background: var(--lontar-accent); 
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: 0 .35rem 1rem rgba(32, 107, 196, .18);
}

.lontar-topbar nav a { color: #52606f; font-weight: 600; text-decoration: none; }
.lontar-topbar nav a:hover { color: var(--lontar-accent); }

.lontar-hero {
    background:
        radial-gradient(circle at 90% 10%, rgba(32, 107, 196, .13), transparent 32rem),
        linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
    border-bottom: 1px solid var(--lontar-border);
}
.lontar-kicker { color: var(--lontar-accent); letter-spacing: .08em; }
.lontar-search-card { border-radius: 1rem; }
.lontar-hero-panel {
    min-height: 22rem;
    border: 1px solid rgba(32, 107, 196, .12);
    border-radius: 1.2rem;
    padding: 2rem;
    background: linear-gradient(145deg, #edf5ff, #fff);
    box-shadow: 0 1rem 3rem rgba(24, 36, 51, .08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.lontar-book-stack { display: grid; gap: .55rem; margin-bottom: 3rem; transform: rotate(-3deg); }
.lontar-book-stack span { display: block; height: 2.1rem; border-radius: .35rem; box-shadow: 0 .4rem .9rem rgba(24, 36, 51, .08); }
.lontar-book-stack span:nth-child(1) { width: 72%; background: #206bc4; }
.lontar-book-stack span:nth-child(2) { width: 88%; margin-left: 7%; background: #4299e1; }
.lontar-book-stack span:nth-child(3) { width: 78%; margin-left: 2%; background: #6aa84f; }
.lontar-book-stack span:nth-child(4) { width: 92%; margin-left: 4%; background: #f59f00; }

.lontar-service-card { border-color: var(--lontar-border); transition: transform .18s ease, box-shadow .18s ease; }
.lontar-service-card:hover { transform: translateY(-3px); box-shadow: 0 .7rem 2rem rgba(24, 36, 51, .08); }
.lontar-service-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--lontar-accent);
    background: #eaf2fd;
}
.lontar-section-muted { background: #eef2f7; }
.lontar-footer { background: #fff; border-top: 1px solid var(--lontar-border); }

@media (max-width: 767.98px) {
    .lontar-brand small { display: none; }
    .lontar-hero-panel { min-height: 17rem; }
}