@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {

    color-scheme: light dark;

    --bg: #080808;
    --surface: rgba(255,255,255,.04);
    --surface-hover: rgba(255,255,255,.07);

    --text: #fafafa;
    --muted: #9d9d9d;

    --border: rgba(255,255,255,.08);

    --accent: #4f8cff;

    --shadow:
        0 20px 60px rgba(0,0,0,.45);
}

[data-theme="light"]{

    --bg:#f7f7f7;

    --surface:rgba(255,255,255,.8);
    --surface-hover:white;

    --text:#111;

    --muted:#666;

    --border:#e6e6e6;

    --shadow:
        0 15px 50px rgba(0,0,0,.08);
}

*{

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

html{

    scroll-behavior:smooth;
}

body{

    font-family:Inter,sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;
}

.background{

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at top left,#316cff22,transparent 35%),

        radial-gradient(circle at bottom right,#7b4dff18,transparent 30%),

        var(--bg);

    z-index:-1;
}

.hero{

    max-width:1100px;

    margin:auto;

    padding:120px 30px 90px;
}

.hero-content{

    max-width:700px;
}

.badge{

    display:inline-block;

    padding:.45rem .9rem;

    border-radius:999px;

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--muted);

    margin-bottom:30px;

    backdrop-filter:blur(20px);
}

h1{

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

    line-height:.95;

    font-weight:800;

    letter-spacing:-4px;

    margin-bottom:30px;
}

h1 span{

    color:var(--accent);
}

.hero p{

    color:var(--muted);

    font-size:1.3rem;

    line-height:1.8;
}

main{

    max-width:1100px;

    margin:auto;

    padding:0 30px 120px;
}

section{

    margin-top:100px;
}

h2{

    font-size:2rem;

    margin-bottom:35px;
}

.projects{

    display:grid;

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

    gap:28px;
}

.card{

    text-decoration:none;

    color:inherit;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    transition:
        .35s ease;
}

.card:hover{

    transform:
        translateY(-8px);

    background:var(--surface-hover);

    box-shadow:var(--shadow);
}

.card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:.6s;
}

.card:hover img{

    transform:scale(1.04);
}

.card-content{

    padding:28px;
}

.card h3{

    font-size:1.35rem;

    margin-bottom:10px;
}

.card p{

    color:var(--muted);

    line-height:1.7;
}

.contact{

    text-align:center;

    margin-top:140px;
}

.contact a{

    display:inline-block;

    margin-top:25px;

    color:var(--text);

    font-size:1.2rem;

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:.25s;
}

.contact a:hover{

    border-color:var(--accent);

    color:var(--accent);
}

#theme-toggle{

    position:fixed;

    top:25px;
    right:25px;

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:var(--surface);

    border:1px solid var(--border);

    backdrop-filter:blur(15px);

    color:var(--text);

    cursor:pointer;

    font-size:1.2rem;

    transition:.3s;
}

#theme-toggle:hover{

    transform:rotate(15deg) scale(1.08);
}

::selection{

    background:var(--accent);

    color:white;
}

@media(max-width:700px){

    .hero{

        padding-top:90px;
    }

    h1{

        letter-spacing:-2px;
    }

}

html {
    transition:
        background-color .35s ease,
        color .35s ease;
}

body,
.background,
.card,
.badge,
#theme-toggle,
.contact a,
.card img {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease,
        opacity .35s ease;
}