:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --border:#dfe6f3;

    --text:#1e293b;
    --text-soft:#64748b;

    --blue:#315efb;
    --violet:#7c3aed;
    --green:#1f6f5f;

    --shadow:0 10px 30px rgba(0,0,0,.05);
    --radius:22px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;

    padding: 25px;

    border: 12px solid #2b2f3a;
    border-radius: 28px;

    min-height: 100vh;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.04),
        0 10px 40px rgba(0,0,0,.08);
}

/* HERO */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

    background:linear-gradient(
        135deg,
        rgba(49,94,251,.08),
        rgba(124,58,237,.08)
    );

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

    padding:50px;
    border-radius:var(--radius);

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

.hero h1{
    font-size:58px;
    line-height:1;
    margin-bottom:15px;
}

.hero h1 span{
    color:var(--blue);
}

.hero p{
    max-width:600px;
    font-size:18px;
    line-height:1.7;
    color:var(--text-soft);
}

.buttons{
    display:flex;
    gap:15px;
    margin-top:30px;
}

button{
    border:none;
    padding:14px 22px;
    border-radius:14px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.primary{
    background:var(--blue);
    color:white;
}

.secondary{
    background:white;
    color:var(--text);
    border:1px solid var(--border);
}

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

/* STATUS */

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

    margin-top:35px;
}

.status-card{
    background:var(--card);
    border:1px solid var(--border);

    padding:24px;
    border-radius:var(--radius);

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

.status-card small{
    color:var(--text-soft);
    display:block;
    margin-bottom:10px;
}

.status-card h3{
    font-size:28px;
}

.online{
    color:var(--green);
}

/* STACK */

.section{
    margin-top:70px;
}

.section-title{
    font-size:32px;
    margin-bottom:25px;
}

.stack{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.tech{
    background:white;
    border:1px solid var(--border);

    padding:12px 18px;
    border-radius:999px;

    font-weight:600;

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

/* PROJECTS */

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

.project-card{
    background:white;
    border:1px solid var(--border);

    border-radius:var(--radius);
    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.2s;
}

.project-card:hover{
    transform:translateY(-4px);
}

.project-image{
    height:180px;

    background:linear-gradient(
        135deg,
        rgba(49,94,251,.9),
        rgba(124,58,237,.9)
    );
}

.project-image{
    height:180px;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

}

.project-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

.project-content{
    padding:24px;
}

.project-content h3{
    margin-bottom:10px;
}

.project-content p{
    color:var(--text-soft);
    line-height:1.6;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.tag{
    background:#eef2ff;
    color:var(--blue);

    padding:8px 12px;
    border-radius:999px;

    font-size:13px;
    font-weight:600;
}

.learned{
    margin-top:20px;

    padding:16px;
    border-left:4px solid var(--violet);

    background:#faf5ff;

    border-radius:12px;
}

/* FOOTER */

footer{
    margin-top:80px;

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

    padding:30px;
    border-radius:var(--radius);

    text-align:center;

    color:var(--text-soft);

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


/* DEVELOPMENT LIST */

.dev-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.dev-item{
    background:white;
    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    box-shadow:var(--shadow);

    transition:.2s;
}

.dev-item:hover{
    transform:translateY(-3px);
}

.dev-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.dev-top h3{
    margin-bottom:10px;
}

.dev-top p{
    color:var(--text-soft);
    line-height:1.6;
}

.dev-status{
    background:rgba(31,111,95,.12);
    color:var(--green);

    padding:10px 14px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;
}

.building{
    background:rgba(124,58,237,.12);
    color:var(--violet);
}

.dev-progress{
    margin-top:24px;
}

.progress-bar{
    width:100%;
    height:12px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;
}

.progress-fill{
    height:100%;

    background:linear-gradient(
        90deg,
        var(--blue),
        var(--violet)
    );

    border-radius:999px;
}

.dev-progress small{
    display:block;
    margin-top:10px;

    color:var(--text-soft);
}

.dev-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:22px;
}

.dev-tags span{
    background:#f3f4f6;

    color:var(--text);

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;
}

@media (max-width: 900px){
    body{
        padding:18px;
        border-width:8px;
        border-radius:20px;
    }

    .hero{
        flex-direction:column;
        align-items:flex-start;
        padding:32px;
    }

    .hero h1{
        font-size:clamp(36px, 9vw, 58px);
    }

    .projects{
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }

    .dev-top{
        flex-direction:column;
    }
}

@media (max-width: 560px){
    body{
        padding:12px;
        border-width:5px;
        border-radius:16px;
    }

    .hero,
    .status-card,
    .project-content,
    .dev-item,
    footer{
        padding:20px;
    }

    .buttons{
        flex-direction:column;
    }

    .buttons button{
        width:100%;
    }

    .section{
        margin-top:44px;
    }

    .section-title{
        font-size:26px;
    }

    .projects{
        grid-template-columns:1fr;
    }

    .dev-status{
        white-space:normal;
        text-align:center;
    }
}