* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    background:#0b0b0d;

    color:#f5f5f5;

    font-family:Inter,system-ui,sans-serif;

    overflow-x:hidden;

}



.background {

    position:fixed;

    inset:0;

    z-index:-1;

    background:
    radial-gradient(circle at 15% 20%, #d9775733, transparent 30%),
    radial-gradient(circle at 85% 80%, #6366f133, transparent 35%);

    animation:move 15s infinite alternate;

}



@keyframes move {

    from {
        transform:scale(1);
    }

    to {
        transform:scale(1.15);
    }

}



/* Header */

header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:40px 8%;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:-1px;

}



.logo span {

    color:#d97757;

}



.badge {

    font-family:"JetBrains Mono",monospace;

    font-size:13px;

    padding:12px 20px;

    border-radius:999px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    color:#aaa;

}



/* Hero */


main {

    padding:0 8%;

}



.hero {

    max-width:850px;

    padding:70px 0;

    animation:fade .9s ease;

}



@keyframes fade {

    from {

        opacity:0;

        transform:translateY(40px);

    }

    to {

        opacity:1;

        transform:none;

    }

}



.label {

    color:#d97757;

    font-family:"JetBrains Mono",monospace;

    letter-spacing:3px;

    font-size:13px;

}



h1 {

    font-size:clamp(60px,8vw,100px);

    line-height:.95;

    letter-spacing:-5px;

    margin:25px 0;

}



h1 span {

    color:#d97757;

}



.hero p:last-child {

    color:#aaa;

    font-size:22px;

    max-width:650px;

    line-height:1.6;

}



/* Cards */


.grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

    padding-bottom:100px;

}



.card {

    position:relative;

    padding:32px;

    min-height:330px;

    border-radius:28px;

    background:

    linear-gradient(
    145deg,
    #ffffff12,
    #ffffff05
    );

    border:1px solid #ffffff15;

    backdrop-filter:blur(20px);

    transition:.45s;

    animation:cardIn .8s ease backwards;

}



.card:hover {

    transform:

    translateY(-12px)
    scale(1.02);

    border-color:#d9775777;

    box-shadow:

    0 30px 80px #0008;

}



@keyframes cardIn {

    from {

        opacity:0;

        transform:translateY(50px);

    }

    to {

        opacity:1;

    }

}



.card h2 {

    color:#d97757;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:2px;

}



.card h3 {

    font-size:25px;

    margin:20px 0;

}



code {

    display:block;

    padding:14px;

    background:#00000055;

    border-radius:12px;

    color:#a7f3d0;

    font-family:"JetBrains Mono",monospace;

    font-size:13px;

    overflow-wrap:anywhere;

}



.card p {

    color:#bbb;

    line-height:1.6;

    margin-top:25px;

}



.tags {

    position:absolute;

    bottom:30px;

    display:flex;

    gap:10px;

}



.tags span {

    padding:7px 14px;

    border-radius:20px;

    background:#ffffff12;

    border:1px solid #ffffff15;

    font-size:13px;

    color:#ccc;

}



/* Footer */


footer {

    text-align:center;

    padding:50px;

    color:#777;

    font-family:"JetBrains Mono",monospace;

}