:root{

    --bg:#0b0d10;
    --card:#15181d;
    --gold:#d6b35d;
    --text:#ffffff;
    --grey:#9ea3ad;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:white;

    font-family:Inter,sans-serif;

    line-height:1.6;

}

#boot{

    position:fixed;

    inset:0;

    background:#0b0d10;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

html.skipBoot #boot{

    display:none;

}

html.skipBoot #site{

    opacity:1;

}

#terminal{

    color:#d6b35d;

    font-size:clamp(1.3rem,2vw,2rem);

    font-family:Consolas, monospace;

    white-space:pre;

}

.cursor{

    display:inline-block;

    margin-left:2px;

    font-weight:300;

    animation:cursor .8s infinite;
}

@keyframes cursor{

    50%{

        opacity:0;

    }

}

#site{

    opacity:0;

    transition:opacity .7s ease;

}

#site.visible{

    opacity:1;

}

#boot.fade{

    opacity:0;

    transition:opacity .6s ease;

    pointer-events:none;

}

.gold{

    color:#ffffff;

    animation:goldReveal 1.5s ease forwards;

    animation-delay:10s;

}

@keyframes goldReveal{

    from{

        color:#ffffff;

        text-shadow:none;

    }

    to{

        color:#d6b35d;

        text-shadow:0 0 18px rgba(214,179,93,.35);

    }

}

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.heroContainer{

    width:min(1200px,90%);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    z-index:2;

}

.reveal{

    opacity:0;

    transform:translateY(35px);

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

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

.line{

    display:block;

}

.heroTag{

    color:var(--gold);

    letter-spacing:6px;

    font-size:.85rem;

    margin-bottom:40px;

    text-transform:uppercase;

}

#hero h1{

    width:min(1100px,100%);

    margin:auto;

    font-size:clamp(4rem,9vw,8rem);

    line-height:.95;

    text-align:center;

}

.heroDescription{

    width:min(700px,90%);

    margin:50px auto;

    text-align:center;

}

.heroButton{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:100px;

    background:var(--gold);

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.heroButton:hover{

    transform:translateY(-5px);

}

.scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:#777;

    font-size:2rem;

    animation:scroll 2s infinite;

    opacity:0;

    transition:opacity .8s;

}

.scroll.show{

    opacity:1;

}

@keyframes scroll{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

.heroGlow{

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(214,179,93,.20) 0%,
    rgba(214,179,93,.05) 35%,
    transparent 70%);

    filter:blur(120px);

    top:-250px;

    left:50%;

    opacity:0;

    transform:
        translateX(-50%)
        scale(.8);

    transition:

        opacity 1.2s ease,

        transform 2s ease;

}

.heroGlow.show{

    opacity:1;

    transform:
        translateX(-50%)
        scale(1);

}

.mouseGlow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(214,179,93,.40) 0%,
        rgba(214,179,93,.22) 22%,
        rgba(214,179,93,.10) 45%,
        transparent 75%);

    filter:blur(60px);

    pointer-events:none;

    left:0;
    top:0;

    opacity:0;

    transform:translate3d(-210px,-210px,0) scale(.35);

    transition:
        opacity .45s ease,
        transform .60s cubic-bezier(.22,1,.36,1);

    z-index:10;

}

#hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:radial-gradient(circle, black 35%, transparent 90%);

    pointer-events:none;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    backdrop-filter:blur(15px);

    background:rgba(15,17,21,.70);

    z-index:100;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}

.logo h1{

    font-size:1rem;

    letter-spacing:4px;

}

.logo span{

    color:#999;

    font-size:.8rem;

}

nav{

    display:flex;

    gap:30px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

nav a:hover{

    color:#c7a64a;

}


section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.card{

    background:#1b1d23;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.card:hover,
.card.mobile-hover{

    transform:translateY(-10px);

}


.card-image{

    position:relative;

    width:100%;

    height:250px;

    overflow:hidden;

    border-radius:16px 16px 0 0;

    background:#111;

}


.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
        sepia(100%)
        saturate(.65)
        brightness(.85)
        contrast(1.05);

    transform:scale(1);

    transition:
        filter .5s ease,
        transform .6s ease;

}


.card-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:80px;

    background:linear-gradient(
        to bottom,
        transparent,
        var(--card-bg)
    );

    pointer-events:none;

}

.card:hover .card-image img,
.card.mobile-hover .card-image img{

    filter:none;

    transform:scale(1.04);

}


.card-content{

    padding:30px;

}

.categoria{

    color:#c7a64a;

    font-size:.8rem;

    text-transform:uppercase;

}

.card h3{

    margin:12px 0;

}

.card p{

    color:#bdbdbd;

    margin-bottom:20px;

}

.card a{

    color:#fff;

    text-decoration:none;

}

.tech{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    justify-content:center;

}

.tech span{

    padding:14px 28px;

    background:#1b1d23;

    border-radius:50px;

}

footer{

    border-top:1px solid #2c2c2c;

    padding:40px 0;

    text-align:center;

    color:#888;

}



@media(max-width:768px){

    .hero h2{

        font-size:2.7rem;

    }

    nav{

        display:none;

    }

}