/* Custom Utilities and Base Styles */

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/instrumentserif/v4/jizDREVItHgc8qDIbSTKq4XK_OWUe9PxgcA.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/instrumentserif/v4/jizBREVItHgc8qDIbSTKq4XK_OWFNcm_oQ.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/worksans/v23/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBigQUTM.woff2") format("woff2");
}

:root {
    --radius: 1rem;
    --background: oklch(0.13 0.04 270);
    --foreground: oklch(0.97 0.01 270);
    --violet: oklch(0.66 0.24 290);
    --primary: oklch(0.62 0.22 280);
    --border: oklch(1 0 0 / 0.08);
}

body {
    background-color: var(--background);
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.40 0.18 285 / 0.35), transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 0%, oklch(0.55 0.22 300 / 0.20), transparent 60%);
    background-attachment: fixed;
}

h1, h2, h3, h4 {
    font-family: "Instrument Serif", ui-serif, Georgia, serif;
    letter-spacing: -0.01em;
}

.container-page {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem;
    max-width: 80rem;
}
@media (min-width: 768px) {
    .container-page { padding-inline: 2rem; }
}

.text-gradient {
    background: linear-gradient(120deg, oklch(0.97 0.01 270) 0%, oklch(0.78 0.16 295) 50%, oklch(0.85 0.14 85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glass {
    background: linear-gradient(180deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid oklch(1 0 0 / 0.08);
}

.glass-strong {
    background: linear-gradient(180deg, oklch(1 0 0 / 0.10), oklch(1 0 0 / 0.04));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid oklch(1 0 0 / 0.12);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: oklch(0.99 0.01 270);
    background: linear-gradient(120deg, oklch(0.55 0.24 290), oklch(0.65 0.22 280));
    box-shadow: 0 10px 40px -10px oklch(0.55 0.24 290 / 0.7), inset 0 1px 0 oklch(1 0 0 / 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-primary-hover:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 18px 50px -12px oklch(0.55 0.24 290 / 0.9);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    font-weight: 500;
    color: oklch(0.97 0.01 270);
    border: 1px solid oklch(1 0 0 / 0.14);
    background: oklch(1 0 0 / 0.04);
    transition: all 0.25s ease;
}

.shadow-glow {
    box-shadow: 0 0 80px -10px color-mix(in oklab, oklch(0.66 0.24 290) 60%, transparent);
}

.noise {
    position: relative;
}

.noise::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    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='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
}