@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --background:222 44% 6%; --foreground:210 40% 98%;
  --card:217 33% 12%; --primary:221 83% 53%; --accent:188 91% 43%;
  --border:217 25% 22%; --radius:0.75rem;
}
*{ border-color: hsl(var(--border)); }
html{ color-scheme:dark; scroll-behavior:smooth; }
body{ margin:0; background:#0B0F17; color:#F8FAFC; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; }
.font-display{ font-family:'Plus Jakarta Sans',sans-serif; }
.font-mono{ font-family:'JetBrains Mono',monospace; }

.hero-grid{ background-image:linear-gradient(to right,rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.06) 1px,transparent 1px); background-size:48px 48px; }
.glow-cyan{ box-shadow:0 0 0 1px rgba(6,182,212,.35),0 12px 40px -12px rgba(6,182,212,.45); }
.glass{ background:rgba(17,24,39,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0B0F17; }
::-webkit-scrollbar-thumb{ background:#1E293B; border-radius:9999px; }
::-webkit-scrollbar-thumb:hover{ background:#334155; }
::selection{ background:rgba(6,182,212,.3); color:#fff; }

@keyframes pulse{ 50%{ opacity:.5; } }
.animate-pulse{ animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.animate-spin{ animation:spin 1s linear infinite; }

/* scroll reveal (pengganti framer-motion) */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* toast */
#toast-wrap{ position:fixed; top:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{ background:#111827; border:1px solid rgba(255,255,255,.12); color:#fff; padding:12px 16px; border-radius:12px; font-size:14px; box-shadow:0 12px 40px -12px rgba(0,0,0,.6); animation:toastIn .3s ease; }
.toast.success{ border-color:rgba(16,185,129,.4); }
.toast.error{ border-color:rgba(244,63,94,.4); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px); } }

[data-lucide]{ width:1em; height:1em; }