* { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.anim-fade { animation: fadeInUp .6s ease-out forwards; opacity:0; }
.anim-scale { animation: scaleIn .5s ease-out forwards; opacity:0; }
.anim-float { animation: float 3s ease-in-out infinite; }
.d1{animation-delay:.1s} .d2{animation-delay:.2s} .d3{animation-delay:.3s} .d4{animation-delay:.4s}

.observe { opacity:0; }
.observe.visible { opacity:1; animation: fadeInUp .6s ease-out forwards; }

.hero-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 40%, #166534 100%);
    position: relative; overflow: hidden;
}
.hero-bg::before {
    content:''; position:absolute; inset:0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-bg::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:80px;
    background:#fff; clip-path:ellipse(55% 100% at 50% 100%);
}

.glass { background:rgba(255,255,255,.1); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); }

.svc-card { transition:all .3s ease; }
.svc-card:hover { transform:translateY(-5px); box-shadow:0 16px 32px -8px rgba(0,0,0,.12); }
.svc-card:hover .svc-ico { background:#1e3a8a; color:#fff; transform:scale(1.08); }
.svc-ico { transition:all .3s ease; }

.nav-lk { position:relative; }
.nav-lk::after { content:''; position:absolute; bottom:-4px; left:50%; width:0; height:2px; background:#1e40af; transition:all .3s; transform:translateX(-50%); }
.nav-lk:hover::after, .nav-lk.active::after { width:100%; }

.step-line::after {
    content:''; position:absolute; top:28px; left:28px; right:0; height:2px;
    background:linear-gradient(to right, #1e40af, #22c55e);
}
.step-line:last-child::after { display:none; }

.mobile-menu { transform:translateX(100%); transition:transform .3s ease; }
.mobile-menu.open { transform:translateX(0); }

.bg-dots {
    background-color:#f8fafc;
    background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e2e8f0' fill-opacity='.4'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

.status-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:9999px; }
.status-proses { background:#dbeafe; color:#1e40af; }
.status-selesai { background:#dcfce7; color:#166534; }
.status-ditolak { background:#fef2f2; color:#991b1b; }
.status-menunggu { background:#fef3c7; color:#92400e; }

.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; }
.faq-answer.open { max-height:300px; }

.logo-nav { width:44px; height:44px; object-fit:contain; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.15); }
@media (min-width:1024px) { .logo-nav { width:48px; height:48px; border-radius:14px; } }
.logo-footer { width:36px; height:36px; object-fit:contain; border-radius:10px; }

@media print {
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea { position:absolute; left:0; top:0; width:100%; padding:15mm 20mm; }
}