html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

:root {
    --fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

section,
article,
blockquote,
table,
a,
button,
img {
    transition: transform 320ms var(--fx-ease), box-shadow 320ms var(--fx-ease), opacity 320ms var(--fx-ease), filter 320ms var(--fx-ease), border-color 320ms var(--fx-ease);
}

h1 {
    font-size: clamp(2.15rem, 4.3vw, 3.1rem) !important;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
}

h3 {
    font-size: clamp(1.05rem, 1.65vw, 1.28rem) !important;
}

p,
li,
td,
th,
a,
button {
    font-size: 1.04em;
}

#hero::before,
#hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 9999px;
    filter: blur(54px);
    opacity: 0.45;
}

#hero::before {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -70px;
    background: radial-gradient(circle, rgba(123, 202, 255, 0.95), rgba(123, 202, 255, 0));
    animation: floatOrb 10s ease-in-out infinite;
}

#hero::after {
    width: 260px;
    height: 260px;
    left: -80px;
    bottom: 40px;
    background: radial-gradient(circle, rgba(255, 220, 80, 0.55), rgba(255, 220, 80, 0));
    animation: floatOrb 12s ease-in-out infinite reverse;
}

#hero > * {
    position: relative;
    z-index: 1;
}

.fx-reveal {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(1px);
    transition: opacity 480ms var(--fx-ease), transform 560ms var(--fx-ease), filter 560ms var(--fx-ease);
    will-change: transform, opacity, filter;
}

.fx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

article:hover,
blockquote:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 24px 42px -20px rgba(30, 64, 175, 0.5);
}

a:hover,
button:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
}

header nav a:not(.rounded-full):hover,
#mobileNav a:not(.rounded-lg):hover {
    text-shadow: 0 0 20px rgba(191, 219, 254, 0.55);
}

a.rounded-full:hover,
a.rounded-lg:hover,
button.rounded-full:hover,
button.rounded-lg:hover {
    box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.65);
}

#hero a.rounded-full:hover {
    box-shadow: 0 18px 34px -16px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

#hero img[data-hero-image]:hover {
    transform: perspective(900px) translateY(-3px) scale(1.01);
    box-shadow: 0 26px 46px -28px rgba(15, 23, 42, 0.68);
}

img[data-hero-image] {
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes floatOrb {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    section,
    article,
    blockquote,
    table,
    a,
    button,
    img,
    .fx-reveal,
    .fx-reveal.is-visible,
    #hero::before,
    #hero::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}