*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#030303;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
}

.navbar{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:95px;
    padding:0 6%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.88),
        rgba(0,0,0,0)
    );
    border-bottom:1px solid rgba(212,175,55,.12);
}

.logo{
    color:#d4af37;
    text-decoration:none;
    font-size:25px;
    font-weight:800;
    letter-spacing:9px;
    text-shadow:0 0 22px rgba(212,175,55,.20);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:42px;
}

.nav-links a{
    position:relative;
    color:#d2d2d2;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:
        color .35s ease,
        transform .35s ease;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:1px;
    background:#d4af37;
    transition:width .35s ease;
}

.nav-links a:hover{
    color:#ffffff;
    transform:translateY(-2px);
}

.nav-links a:hover::after{
    width:100%;
}

.hero{
    position:relative;
    min-height:100vh;
    padding:125px 7% 75px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.90) 28%,
            rgba(0,0,0,.50) 57%,
            rgba(0,0,0,.16) 100%
        ),
        linear-gradient(
            to top,
            #030303 0%,
            rgba(3,3,3,.65) 20%,
            transparent 52%
        ),
        url("images/backgrounds/lucius-home.jpg");

    background-size:cover;
    background-position:center 55%;
    background-repeat:no-repeat;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 18% 44%,
            rgba(212,175,55,.10),
            transparent 31%
        );
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:180px;
    background:linear-gradient(
        to bottom,
        transparent,
        #030303
    );
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(610px, 48%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}

.hero-label{
    display:block;
    margin-bottom:22px;
    color:#c2a24a;
    font-size:11px;
    font-weight:800;
    letter-spacing:7px;
}

.hero-content h1{
    margin-bottom:28px;
    color:#d4af37;
    font-size:clamp(58px, 7vw, 105px);
    font-weight:800;
    line-height:.92;
    letter-spacing:5px;
    text-shadow:
        0 7px 35px rgba(0,0,0,.85),
        0 0 36px rgba(212,175,55,.12);
}

.hero-content p{
    max-width:510px;
    margin-bottom:38px;
    color:#d0d0d0;
    font-size:19px;
    font-weight:300;
    line-height:1.8;
    letter-spacing:.5px;
}

.enter-btn{
    min-width:180px;
    min-height:52px;
    padding:0 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#d4af37;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(212,175,55,.85);
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    letter-spacing:4px;
    backdrop-filter:blur(5px);
    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.enter-btn:hover{
    color:#050505;
    background:#d4af37;
    transform:translateY(-3px);
    box-shadow:0 14px 38px rgba(212,175,55,.20);
}

.explore-link{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:78px;
    color:#ffffff;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    letter-spacing:5px;
    transition:color .35s ease;
}

.explore-link span{
    display:block;
    width:30px;
    height:1px;
    background:#d4af37;
    transition:width .35s ease;
}

.explore-link:hover{
    color:#d4af37;
}

.explore-link:hover span{
    width:45px;
}

.business-section{
    position:relative;
    min-height:100vh;
    padding:95px 6% 125px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.06),
            transparent 28%
        ),
        #030303;
}

.section-heading{
    max-width:850px;
    margin:0 auto 65px;
    text-align:center;
}

.section-heading span{
    display:block;
    margin-bottom:18px;
    color:#d4af37;
    font-size:10px;
    font-weight:800;
    letter-spacing:6px;
}

.section-heading h2{
    margin-bottom:20px;
    color:#ffffff;
    font-size:clamp(38px, 5vw, 64px);
    font-weight:750;
    line-height:1.1;
    letter-spacing:2px;
}

.section-heading p{
    max-width:650px;
    margin:0 auto;
    color:#929292;
    font-size:16px;
    line-height:1.8;
}

.business-grid{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
}

.business-card{
    position:relative;
    min-height:500px;
    padding:30px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    overflow:hidden;
    color:#ffffff;
    background:#101010;
    border:1px solid rgba(255,255,255,.09);
    text-decoration:none;
    isolation:isolate;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.business-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.66) 47%,
        rgba(0,0,0,.16) 100%
    );
}

.business-card::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid transparent;
    pointer-events:none;
    transition:
        inset .45s ease,
        border-color .45s ease;
}

.business-card:hover{
    transform:translateY(-12px);
    border-color:rgba(212,175,55,.55);
    box-shadow:0 28px 75px rgba(0,0,0,.62);
}

.business-card:hover::after{
    inset:10px;
    border-color:rgba(212,175,55,.17);
}

.streaming-card{
    background:
        url("images/backgrounds/streaming-home.jpg")
        center / cover no-repeat;
}

.food-card{
    background:
        url("images/backgrounds/food-home.jpg")
        center / cover no-repeat;
}

.clothing-card{
    background:#101010;
}

.business-image{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.68;
    transform:scale(1.01);
    transition:
        transform .7s ease,
        opacity .7s ease;
}

.business-card:hover .business-image{
    opacity:.82;
    transform:scale(1.06);
}

.card-number{
    position:absolute;
    top:26px;
    right:28px;
    z-index:3;
    color:rgba(255,255,255,.44);
    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
}

.card-icon{
    position:relative;
    z-index:3;
    width:62px;
    height:62px;
    margin-bottom:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d4af37;
    background:rgba(0,0,0,.48);
    border:1px solid rgba(212,175,55,.58);
    border-radius:50%;
    font-size:24px;
    backdrop-filter:blur(6px);
    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.business-card:hover .card-icon{
    color:#050505;
    background:#d4af37;
    transform:scale(1.06);
}

.card-content{
    position:relative;
    z-index:3;
}

.card-content span{
    display:block;
    margin-bottom:13px;
    color:#d4af37;
    font-size:9px;
    font-weight:800;
    letter-spacing:4px;
}

.business-card h3{
    margin-bottom:16px;
    color:#ffffff;
    font-size:26px;
    font-weight:800;
    letter-spacing:4px;
}

.business-card p{
    max-width:330px;
    margin:0;
    color:#b0b0b0;
    font-size:14px;
    line-height:1.75;
}

.card-action{
    display:inline-flex;
    align-items:center;
    margin-top:27px;
    color:#ffffff;
    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
    transition:
        color .35s ease,
        transform .35s ease;
}

.business-card:hover .card-action{
    color:#d4af37;
    transform:translateX(8px);
}

.footer{
    padding:72px 25px;
    background:#010101;
    border-top:1px solid rgba(212,175,55,.12);
    text-align:center;
}

.footer-logo{
    display:inline-block;
    margin-bottom:22px;
    color:#d4af37;
    text-decoration:none;
    font-size:24px;
    font-weight:800;
    letter-spacing:9px;
}

.footer p{
    margin-bottom:20px;
    color:#858585;
    font-size:13px;
}

.footer span{
    color:#505050;
    font-size:9px;
    letter-spacing:3px;
}

@media(max-width:1000px){

    .navbar{
        padding:0 35px;
    }

    .hero{
        padding-left:45px;
    }

    .hero-content{
        width:58%;
    }

    .business-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .business-card:last-child{
        grid-column:1 / -1;
    }
}

@media(max-width:700px){

    .navbar{
        height:80px;
        padding:0 22px;
    }

    .logo{
        font-size:20px;
        letter-spacing:6px;
    }

    .nav-links{
        display:none;
    }

    .hero{
        min-height:100svh;
        padding:115px 24px 60px;
        align-items:flex-end;

        background:
            linear-gradient(
                to top,
                #030303 0%,
                rgba(0,0,0,.88) 47%,
                rgba(0,0,0,.20) 100%
            ),
            url("images/backgrounds/lucius-home.jpg");

        background-size:cover;
        background-position:center top;
        background-repeat:no-repeat;
    }

    .hero-content{
        width:100%;
    }

    .hero-label{
        margin-bottom:17px;
        font-size:9px;
        letter-spacing:5px;
    }

    .hero-content h1{
        margin-bottom:20px;
        font-size:52px;
        letter-spacing:3px;
    }

    .hero-content p{
        max-width:350px;
        margin-bottom:28px;
        font-size:15px;
        line-height:1.7;
    }

    .enter-btn{
        min-width:160px;
        min-height:48px;
        padding:0 32px;
    }

    .explore-link{
        margin-top:52px;
        font-size:9px;
        letter-spacing:3px;
    }

    .business-section{
        padding:75px 20px 90px;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading p{
        font-size:15px;
    }

    .business-grid{
        grid-template-columns:1fr;
    }

    .business-card,
    .business-card:last-child{
        grid-column:auto;
        min-height:440px;
    }

    .footer{
        padding:55px 20px;
    }
}