:root {
    /* Brand Colors */
    --brand-bg: #0e0e0e;
    --brand-accent: #f2f2f2;
    --brand-secondary: #8c8c8c;
    --brand-border: rgba(255, 255, 255, 0.1);
    --brand-border-light: rgba(255, 255, 255, 0.05);
    
    /* Typography */
    --font-main: 'Inter', sans-serif;
    
    /* Constraints */
    --logo-max-width: 350px;
    --container-max-width: 1800px;
}

body {
    font-family: var(--font-main);
    background-color: var(--brand-bg);
    color: var(--brand-accent);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--brand-bg);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

/* Animations */
@keyframes reveal {
    from { 
        clip-path: inset(100% 0 0 0); 
        transform: translateY(20px); 
    }
    to { 
        clip-path: inset(0 0 0 0); 
        transform: translateY(0); 
    }
}

.animate-reveal {
    animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Logo Constraints */
.logo-container {
    max-width: var(--logo-max-width);
    width: 100%;
}

.logo-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* Utility Layouts */
.max-site-width {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Custom Component Styles */
.header-glass {
    background-color: rgba(14, 14, 14, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--brand-border);
}

.form-input-line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.image-card-bg {
    background-color: #1a1a1a;
}