/* ==========================================
   Reset
========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}
/* ==========================================
   Body
========================================== */

body {

    background: var(--bg-primary);

    color: var(--text-primary);

    font-family: "Inter", sans-serif;

    min-height: 100vh;

    line-height: 1.6;

    overflow-x: hidden;

    background-image:
        radial-gradient(circle at top left,
            rgba(59,130,246,.08),
            transparent 40%),

        radial-gradient(circle at bottom right,
            rgba(16,185,129,.08),
            transparent 40%);
}
/* ==========================================
   Typography
========================================== */

h1,
h2,
h3,
h4 {

    font-family: "Outfit", sans-serif;

    font-weight: 700;

    color: white;

}

h1 {

    font-size: 3rem;

    margin-bottom: 1rem;

}

h2 {

    font-size: 2rem;

    margin-bottom: .75rem;

}

p {

    color: var(--text-secondary);

    margin-bottom: 1rem;

}
a {

    color: var(--primary);

    text-decoration: none;

    transition: .25s;

}

a:hover {

    color: var(--primary-hover);

}
main.container {

    padding-top: 3rem;

    padding-bottom: 4rem;

}
.section {

    margin-bottom: 4rem;

}

.section-title {

    margin-bottom: .75rem;

}

.section-subtitle {

    max-width: 650px;

    color: var(--text-secondary);

}
.card-custom {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 1.5rem;

    box-shadow: var(--shadow);

    transition: .25s ease;

}

.card-custom:hover {

    transform: translateY(-3px);

    border-color: rgba(255,255,255,.15);

}
@keyframes fadeIn {

    from {

        opacity: 0;
        transform: translateY(8px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

main {

    animation: fadeIn .35s ease;

}
::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--bg-primary);

}

::-webkit-scrollbar-thumb {

    background: var(--bg-card);

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}
footer {

    text-align: center;

    color: var(--text-secondary);

    padding: 2rem;

    border-top: 1px solid var(--border);

}
/* ==========================================
   Scroll Reveal
========================================== */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}
.stagger > * {

    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.stagger > *.show {

    opacity: 1;
    transform: translateY(0);

}