/* Mayvora Lab — base tokens (ungu x hitam) */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg: #07050b;
  --bg-2: #0d0914;
  --surface: #120d1c;
  --surface-2: #191226;
  --line: rgba(190, 160, 255, 0.12);
  --line-2: rgba(190, 160, 255, 0.22);
  --text: #f4f0ff;
  --muted: #a49bb8;
  --dim: #6d6480;
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --violet-3: #c4b5fd;
  --deep: #4c1d95;
  --plum: #2a0f4f;
  --accent-grad: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 45%, #5b21b6 100%);
  --danger: #f87171;
  --ok: #4ade80;
  --warn: #fbbf24;
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line-2);
  font-weight: 600; font-size: 14px; letter-spacing: .02em; cursor: pointer;
  background: transparent; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); border-color: var(--violet-2); }
.btn-primary {
  background: linear-gradient(135deg, #9d6bff, #6d28d9);
  border-color: transparent;
  box-shadow: 0 10px 40px -10px rgba(139, 92, 246, .8), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: 0 14px 50px -8px rgba(139, 92, 246, 1), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: rgba(255,255,255,.03); backdrop-filter: blur(10px); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translate(2px, -2px); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-3);
  background: rgba(139, 92, 246, .06);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }

.noise::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: rgba(139, 92, 246, .45); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2140; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }