*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --blue:#3b82f6;
    --purple:#8b5cf6;
    --text:#f8fafc;
    --muted:#cbd5e1;
}
html{scroll-behavior:smooth;}
::selection{background:#8b5cf6;color:white;}
body{
    font-family:system-ui,sans-serif;
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    background:linear-gradient(-45deg,#0f172a,#1e293b,#312e81,#1e3a8a);
    background-size:400% 400%;
    animation:bg 15s ease infinite;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}
@keyframes bg{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
body::before,
body::after{
    content:"";
    position:fixed;
    width:350px;
    height:350px;
    border-radius:50%;
    filter:blur(80px);
    z-index:-1;
}
body::before{
    background:#3b82f677;
    top:-100px;
    left:-100px;
    animation:float1 12s infinite alternate;
}
body::after{
    background:#8b5cf655;
    bottom:-100px;
    right:-100px;
    animation:float2 15s infinite alternate;
}
@keyframes float1{to{transform:translate(120px,80px);}}
@keyframes float2{to{transform:translate(-120px,-60px);}}
.card{
    width:100%;
    max-width:760px;
    padding:45px;
    border-radius:25px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 20px 70px rgba(0,0,0,.4);
    animation:fade .8s;
    position:relative;
    overflow:hidden;
}
@keyframes fade{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:none;}
}
.card::after{
    content:"";
    position:absolute;
    top:0; left:-75%;
    width:50%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
    animation:shine 3s infinite;
}
@keyframes shine{100%{left:125%;}}
nav{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:30px;
}
nav a{
    color:#cbd5e1;
    text-decoration:none;
    transition:.3s;
}
nav a:hover{color:white;}
nav a:focus-visible,
.button:focus-visible,
.btn:focus-visible{
    outline:3px solid #93c5fd;
    outline-offset:4px;
}
.emoji{display:block;text-align:center;font-size:4rem;margin-bottom:15px;}
h1{text-align:center;font-size:3rem;}
.intro{text-align:center;color:var(--muted);margin:15px 0 35px;line-height:1.6;}
.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:35px;
}
.stat{
    background:rgba(255,255,255,.05);
    padding:20px;
    border-radius:18px;
    text-align:center;
}
.number{font-size:2rem;font-weight:bold;}
.project{
    background:rgba(255,255,255,.05);
    border-radius:20px;
    padding:25px;
    margin:20px 0;
    border:1px solid rgba(255,255,255,.08);
    transition:transform .35s ease,background .35s ease,box-shadow .35s ease;
}
.project:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.09);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.project h2{margin-bottom:12px;}
.project p{color:var(--muted);line-height:1.6;}
.status{
    float:right;
    font-size:.7rem;
    padding:5px 10px;
    border-radius:999px;
}
.live{background:#22c55e33;color:#86efac;}
.current{background:#3b82f633;color:#93c5fd;}
.soon{background:#f59e0b33;color:#fde68a;}
.tags{margin:18px 0;}
.tags span{
    display:inline-block;
    background:rgba(255,255,255,.08);
    color:#cbd5e1;
    padding:6px 12px;
    border-radius:999px;
    font-size:.8rem;
    margin-right:8px;
}
.button{
    display:inline-block;
    padding:14px 28px;
    border-radius:999px;
    text-decoration:none;
    color:white;
    font-weight:bold;
    background:linear-gradient(90deg,#3b82f6,#8b5cf6);
    transition:.3s;
    position:relative;
    overflow:hidden;
}
.button:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 15px 30px rgba(59,130,246,.4);
}
.button:active{transform:scale(.97);}
.button::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:inherit;
    background:linear-gradient(90deg,#3b82f6,#8b5cf6);
    filter:blur(20px);
    opacity:.6;
    animation:aura 4s infinite alternate;
    z-index:-1;
}
@keyframes aura{
    from{transform:scale(1);opacity:.4;}
    to{transform:scale(1.2);opacity:.8;}
}
.center{text-align:center;margin-top:35px;}
.footer{text-align:center;color:#cbd5e1;margin-top:40px;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#111827;}
::-webkit-scrollbar-thumb{
    background:linear-gradient(#3b82f6,#8b5cf6);
    border-radius:999px;
}
.subtitle{text-align:center;color:var(--muted);margin:15px 0 35px;line-height:1.7;}
.section{margin:35px 0;}
.section h2{margin-bottom:20px;text-align:center;}
.skill{margin-bottom:20px;font-weight:600;}
.bar{
    width:100%;
    height:12px;
    margin-top:8px;
    background:rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
}
.fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#3b82f6,#8b5cf6);
}
.buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:35px;
}
.btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:999px;
    text-decoration:none;
    color:white;
    font-weight:bold;
    background:linear-gradient(90deg,#3b82f6,#8b5cf6);
    transition:.3s;
    position:relative;
    overflow:hidden;
}
.btn:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 15px 30px rgba(59,130,246,.4);
}
.btn:active{transform:scale(.97);}
.btn::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:inherit;
    background:linear-gradient(90deg,#3b82f6,#8b5cf6);
    filter:blur(20px);
    opacity:.6;
    animation:aura 4s infinite alternate;
    z-index:-1;
}