*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top left, rgba(85,214,255,0.12), transparent 26%),
        #090018;
    color:#f5f7ff;
    min-height:100vh;
}

a{
    color:inherit;
}

/* NAVBAR */

header{
    width:100%;
    padding:22px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(9,0,24,0.75);
    backdrop-filter:blur(14px);
}

.logo{
    width:70px;
    height:70px;
    font-weight:700;
    color:#7f5af0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}

.brand .name{
    font-weight:700;
    font-size:20px;
    color:#7f5af0;
}

nav a{
    text-decoration:none;
    color:#7f5af0;
    margin-left:20px;
    transition:.3s;
}

nav a:hover{
    color:#55d6ff;
}

/* HERO */

.hero{
    min-height:86vh;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    align-items:center;
    padding:60px 8% 80px;
    gap:48px;
}

.hero-content{
    max-width:660px;
}

.eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:#55d6ff;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.78rem;
    font-weight:600;
}

.hero-content h1{
    font-size:clamp(2.3rem, 4.2vw, 3.7rem);
    line-height:1.08;
    letter-spacing:-0.02em;
    margin-bottom:16px;
}

.hero-content h1 span{
    color:#7f5af0;
    text-shadow:0 0 20px rgba(127,90,240,0.25);
}

.hero-content p{
    color:#c7c7d5;
    line-height:1.8;
    font-size:1rem;
    max-width:580px;
}

.buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:26px;
}

.btn{
    text-decoration:none;
    padding:12px 18px;
    border-radius:999px;
    display:inline-block;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.primary{
    background:linear-gradient(90deg, #7f5af0, #55d6ff);
    color:white;
    box-shadow:0 10px 28px rgba(127,90,240,0.2);
}

.secondary{
    border:1px solid rgba(85,214,255,0.45);
    color:#55d6ff;
}

.secondary:hover{
    box-shadow:0 10px 24px rgba(85,214,255,0.12);
}

/* AVATAR */

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.avatar-circle{
    width:min(300px, 72vw);
    aspect-ratio:1;
    border-radius:100%;
    border:1px solid rgba(85,214,255,0.7);
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:
        0 0 0 1px rgba(127,90,240,0.3),
        0 0 45px rgba(127,90,240,0.26),
        0 0 90px rgba(85,214,255,0.12);
}

.avatar-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:100%;
}

/* STATS */

.stats{
    width:min(92%, 1120px);
    margin:20px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
}

.card{
    background:linear-gradient(135deg, rgba(18,3,37,0.98), rgba(12,2,24,0.95));
    border:1px solid rgba(85,214,255,0.2);
    padding:28px;
    border-radius:16px;
    transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{
    transform:translateY(-5px) scale(1.01);
    box-shadow:0 14px 42px rgba(43,149,255,0.14);
}

.card h2{
    color:#55d6ff;
    margin-bottom:10px;
    font-size:1.4rem;
}

.card p{
    color:#c7c7d5;
}

/* Sections */
.section-inner{
    width:min(92%, 1120px);
    margin:88px auto;
}

.section-title{
    font-size:28px;
    margin-bottom:12px;
    color:#7f5af0;
    letter-spacing:-0.02em;
}

.section-copy{
    color:#b6b6c8;
    line-height:1.7;
    max-width:640px;
    margin-bottom:22px;
}

.about p,
.contact p{
    color:#bdbdbd;
    line-height:1.8;
    margin-bottom:10px;
}

.skill-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.skill{
    background:#120325;
    border:1px solid rgba(127,90,240,0.4);
    padding:8px 12px;
    border-radius:999px;
    color:#55d6ff;
}

.projects-grid,
.proof-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
}

.project-card,
.proof-card{
    background:linear-gradient(135deg, rgba(18,3,37,0.98), rgba(12,2,24,0.95));
    border:1px solid rgba(85,214,255,0.2);
    border-radius:16px;
    padding:20px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position:relative;
    overflow:hidden;
}

.project-card:hover,
.proof-card:hover{
    transform:translateY(-6px) scale(1.01);
    border-color:rgba(127,90,240,0.7);
    box-shadow:0 18px 44px rgba(85,214,255,0.12), 0 0 28px rgba(127,90,240,0.16);
}

.project-card::before,
.proof-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(85,214,255,0.08), transparent 55%);
    pointer-events:none;
}

.project-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.project-top h3,
.proof-card h3{
    color:#f5f7ff;
    font-size:1.1rem;
}

.status{
    padding:6px 10px;
    border-radius:999px;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:#55d6ff;
    background:rgba(85,214,255,0.1);
    border:1px solid rgba(85,214,255,0.2);
}

.project-card p,
.proof-card p{
    color:#c7c7d5;
    line-height:1.7;
    margin-top:8px;
}

.project-link{
    display:inline-flex;
    margin-top:16px;
    color:#55d6ff;
    text-decoration:none;
    font-weight:600;
}

.project-link:hover{
    color:#7f5af0;
}

.contact-cta{
    font-size:1.12rem;
    font-weight:600;
    color:#f3f1ff;
    margin-bottom:6px;
}

.contact-note{
    color:#55d6ff;
    margin-bottom:16px;
}

@media (max-width: 900px){
    .hero{
        grid-template-columns:1fr;
        padding-top:36px;
    }

    .hero-image{
        order:-1;
    }
}

@media (max-width: 700px){
    header{
        flex-direction:column;
        gap:12px;
    }

    nav a{
        margin:0 10px;
    }

    .hero{
        padding:28px 8% 60px;
    }

    .section-inner{
        margin:70px auto;
    }
}