/* Global Reset & Variables */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #f6f7fb;
    --surface: rgba(255, 255, 255, .78);
    --surface-strong: rgba(255, 255, 255, .96);
    --text: #0b1020;
    --muted: #667085;
    --muted-2: #98a2b3;
    --border: rgba(15, 23, 42, .12);
    --primary: #6c5ce7;
    --primary-2: #927cff;
    --accent: #00d1ff;
    --success: #17c964;
    --danger: #ef4444;
    --shadow: 0 34px 110px rgba(15, 23, 42, .14);
    --shadow-soft: 0 18px 55px rgba(15, 23, 42, .10);
    --radius-xl: 38px;
    --radius-lg: 28px;
    --radius-md: 18px;
}

[data-theme="dark"] {
    --bg: #050812;
    --surface: rgba(13, 20, 36, .74);
    --surface-strong: rgba(17, 24, 39, .96);
    --text: #f8fafc;
    --muted: #a1aab8;
    --muted-2: #737c8c;
    --border: rgba(255, 255, 255, .11);
    --shadow: 0 40px 140px rgba(0, 0, 0, .58);
    --shadow-soft: 0 20px 65px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: var(--primary); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: Inter, system-ui, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 12% -10%, rgba(108, 92, 231, .30), transparent 34%),
        radial-gradient(circle at 90% 8%, rgba(0, 209, 255, .22), transparent 34%),
        radial-gradient(circle at 50% 110%, rgba(146, 124, 255, .14), transparent 38%),
        var(--bg);
}
/* Global Background Decorations */
.noise {
    position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.background-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: -4; opacity: .26;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle at top, black, transparent 72%);
}

.orb { position: fixed; width: 560px; height: 560px; border-radius: 999px; filter: blur(95px); opacity: .24; pointer-events: none; z-index: -3; }
.orb-one { top: -190px; left: -190px; background: var(--primary); }
.orb-two { right: -210px; top: 120px; background: var(--accent); }
.orb-three { left: 38%; bottom: -310px; background: var(--primary-2); opacity: .14; }