* {
    box-sizing: border-box;
}

html, body {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

body.preloader-active {
    overflow: hidden;
}

body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

section,
header,
nav,
.card,
footer {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

:root {
    --base-color: white;
    --base-variant: #e8e9ed;
    --text-color: #111528;
    --secondary-text: #232738;
    --primary-color: #3a435d;
    --accent-color: #0071ff;
}

.dark {
    --base-color: #070b1d;
    --base-variant: #101425;
    --text-color: #ffffff;
    --secondary-text: #a4a5b8;
    --primary-color: #3a435d;
    --accent-color: #0071ff;
}

:target {
    scroll-margin-top: 120px; 
}

.separator {
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #1f2937);
    margin: 2rem 0;
}

.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}