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

body {

    font-family: "Segoe UI", Arial, sans-serif;

    min-height: 100vh;

    background:
        linear-gradient(135deg,
            #667eea 0%,
            #764ba2 35%,
            #ff758c 70%,
            #ffb199 100%);

    color: white;

}

header {

    text-align: center;

    padding: 60px 20px 30px;

}

header h1 {

    font-size: 42px;

}

header p {

    margin-top: 12px;

    font-size: 20px;

    opacity: .9;

}

main {

    max-width: 1200px;

    margin: auto;

    padding: 20px;

}

#projects {

    display: grid;

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

    gap: 25px;

}

.card {

    background: rgba(255,255,255,.18);

    backdrop-filter: blur(14px);

    border-radius: 20px;

    padding: 25px;

    border:1px solid rgba(255,255,255,.25);

    transition:.25s;

}

.card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.25);

}

.icon{

    font-size:48px;

}

.card h2{

    margin:18px 0 10px;

}

.card p{

    color:#f4f4f4;

    line-height:1.5;

}

.button{

    display:inline-block;

    margin-top:20px;

    text-decoration:none;

    background:white;

    color:#4f46e5;

    padding:12px 22px;

    border-radius:12px;

    font-weight:bold;

}

.button:hover{

    background:#f3f4f6;

}