/* =========================================================
   Base: tokens, reset e tipografia
   ========================================================= */
:root {
    --color-purple: #7B3FF2;
    --color-blue: #2962FF;
    --color-cyan: #00D4FF;
    --color-dark: #0F172A;
    --color-dark-2: #111C34;
    --color-white: #FFFFFF;
    --color-muted: #B8C3D9;
    --color-line: rgba(255, 255, 255, 0.14);
    --glass: rgba(15, 23, 42, 0.68);
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    --radius: 8px;
    --container: 1180px;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--color-white);
    font-family: var(--font);
    background:
        linear-gradient(135deg, rgba(123, 63, 242, 0.16), transparent 32rem),
        radial-gradient(circle at 80% 8%, rgba(0, 212, 255, 0.15), transparent 26rem),
        var(--color-dark);
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 0 1rem;
    color: var(--color-muted);
}

h1,
h2,
h3 {
    margin: 0 0 1rem;
    line-height: 1.08;
    letter-spacing: 0;
}

h1 {
    font-size: clamp(2.4rem, 5vw, 5rem);
}

h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

h3 {
    font-size: 1.25rem;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    color: var(--color-dark);
    background: var(--color-cyan);
}