/* ─────────────────────────────────────────
   SARVA.ID  –  Brand Stylesheet
   Color palette:
     black  : #071F13
     dark   : #0d4a2c
     mid    : #155c37
     light  : #EBF5EE
     yellow : #F0B429
─────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* ── Scrollbar (desktop only) ── */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: #071F13; }
    ::-webkit-scrollbar-thumb { background: rgba(240,180,41,.4); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(240,180,41,.7); }
}

/* ── Navbar ── */
#navbar { background: transparent; }

#navbar.scrolled {
    background: rgba(7,31,19,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(240,180,41,.15);
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

/* ── Hero dot grid ── */
.hero-dot-grid {
    background-image: radial-gradient(circle, rgba(240,180,41,.25) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Scroll indicator line ── */
.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
    animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50%       { transform: translateY(8px); opacity: 1; }
}

/* ── Dot pattern accent ── */
.dot-pattern {
    background-image: radial-gradient(circle, rgba(240,180,41,.5) 1px, transparent 1px);
    background-size: 10px 10px;
    width: 100%;
    height: 100%;
}

/* ── Fade-in on scroll ── */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Pilar card — text always above overlay ── */
.pilar-card > .relative { position: relative; z-index: 10; }

/* ── Section anchor offset for fixed navbar ── */
section[id] { scroll-margin-top: 72px; }

/* ── Typography ── */
h1, h2, h3 { letter-spacing: -.01em; }

/* ─────────────────────────────────────────
   MOBILE SPECIFIC
─────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Bigger tap targets for nav links */
    #mobile-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Prevent hero text overflow */
    #hero h1 {
        word-break: break-word;
    }

    /* Nilai inti: hide description on mobile, title always visible */
    #nilai .grid > div {
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Footer copyright stack nicely */
    footer .border-t div {
        text-align: center;
    }

    /* Stats strip items equal height */
    .stats-item {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* ─────────────────────────────────────────
   TOUCH DEVICE: disable hover-only effects
─────────────────────────────────────────── */
@media (hover: none) {
    /* Pilar cards: show content normally without hover state */
    .pilar-card .absolute.bg-sarva-dark {
        display: none;
    }
    .pilar-card h3 { color: #071F13 !important; }
    .pilar-card p  { color: #6B7280 !important; }
    .pilar-card .w-12,
    .pilar-card .w-14 { background-color: rgba(13,74,44,.1) !important; }
    .pilar-card svg { color: #0d4a2c !important; }
}