:root {
    --bg-color: #0a0a0a;
    --box-color: #D9D9D933;
    --text-muted: #808080;
    --hero-section-bg: #D9D9D91A;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;
}
*, *:before, *:after { box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; background-color: var(--bg-color); margin: 0; overflow-x: hidden; width: 100vw; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

.f-outfit-100 { font-family: "Outfit", sans-serif; font-weight: 100; }
.f-outfit-200 { font-family: "Outfit", sans-serif; font-weight: 200; }
.f-outfit-300 { font-family: "Outfit", sans-serif; font-weight: 300; }
.f-outfit-400 { font-family: "Outfit", sans-serif; font-weight: 400; }
.f-outfit-500 { font-family: "Outfit", sans-serif; font-weight: 500; }
.f-outfit-600 { font-family: "Outfit", sans-serif; font-weight: 600; }
.f-outfit-700 { font-family: "Outfit", sans-serif; font-weight: 700; }
.f-outfit-800 { font-family: "Outfit", sans-serif; font-weight: 800; }
.f-outfit-900 { font-family: "Outfit", sans-serif; font-weight: 900; }

.hover-navlink:hover { text-decoration: underline !important; }
.hover-navlink:active { opacity: 0.6; }

@media (min-width: 992px) { .hover-navlink { font-size: 16px !important; } }

header.navbar { position: relative; z-index: 2000; }

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background-color:#0A0C0A; display: flex !important; flex-direction: column;
        justify-content: center; align-items: center; z-index: 1050;
    }
    .collapse:not(.show) { display: none !important; }
}

#main-content {
    display: flex; align-items: center; justify-content: center; min-height: 84vh;
    transition: padding-left 0.5s ease-out; background-color: var(--hero-section-bg);
    width: 100%;
}

#main-content2 {
    display: flex; align-items: center; justify-content: center; min-height: 84vh;
    transition: padding-left 0.5s ease-out, opacity 1s ease-out, transform 1s ease-out;
    opacity: 0; transform: translateY(40px);
    width: 100%;
}

#main-content2.visible { opacity: 1; transform: translateY(0); }

.hero-wrapper { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
}

.hero-wrapper2 { 
    position: relative; 
    display: flex; 
    width: 100%; 
}

.illustration-box {
    background-color: var(--box-color); 
    width: clamp(300px, 35vw, 500px); 
    aspect-ratio: 1 / 1; 
    border-radius: clamp(20px, 3vw, 40px); 
    display: flex; 
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;
}

.illustration-box span { 
    color: var(--text-muted); 
    font-size: clamp(26px, 4vw, 60px); 
    font-weight: 500; 
}

.illustration-box2 {
    background-color: var(--box-color); 
    width: 1300px; 
    height: 600px;
    max-width: 90vw; 
    border-radius: 40px; 
    display: flex; 
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;
}

.illustration-box2 span { 
    color: var(--text-muted); 
    font-size: clamp(30px, 5vw, 80px); 
    font-weight: 500; 
}

.hero-title {
    color: white; 
    font-size: clamp(2.5rem, 6vw, 5.5rem); 
    font-weight: 400; 
    line-height: 0.95;
    transform: translateX(clamp(-80px, -5vw, -20px));
    position: relative; 
    z-index: 10;
    white-space: nowrap; 
    letter-spacing: -2px;
}

@media (max-width: 991px) {
    #main-content, #main-content2 {
        padding-left: 20px !important; 
        padding-right: 20px !important;
        min-height: auto !important; 
        padding-top: 50px !important; 
        padding-bottom: 50px !important;
        display: flex !important; 
        flex-direction: column !important;
    }

    .hero-wrapper { 
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hero-wrapper2 { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; 
        width: 100% !important;
    }

    .illustration-box { 
        flex: 0 0 150px !important;
        width: 150px !important; 
        height: 250px !important; 
        aspect-ratio: 1 / 1 !important;
        border-radius: 30px !important; 
        flex-shrink: 0 !important;
    }

    .hero-title { 
        margin-left: 0 !important;
        transform: translateX(0) !important;
        margin-top: 25px !important;
        font-size: 2.5rem !important; 
        white-space: normal !important;
        line-height: 1.05 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center;
    }

    .illustration-box2 { 
        width: 100% !important; 
        height: auto !important; 
        aspect-ratio: 1.65 / 1 !important; 
        border-radius: 30px !important; 
    }

    .illustration-box span, .illustration-box2 span { 
        font-size: 26px !important; 
    }
}

footer {
    background-color: #1a1a1a; color: var(--text-muted); padding: 100px 20px;
    text-align: center; font-size: 2rem; font-family: "Outfit", sans-serif;
}