.hero {
    padding: 6rem 0;
    background: radial-gradient(circle at 80% 20%, #ececff 0%, #ffffff 55%);
}

.avatar {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #a5a5ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 60px rgba(91, 91, 214, 0.35);
}

.avatar span {
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.project {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6e9ee;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(17, 22, 29, 0.08);
}

.project-image {
    height: 200px;
}

.project-image.p1 { background: linear-gradient(135deg, #ffb199, #ff0844); }
.project-image.p2 { background: linear-gradient(135deg, #c79081, #dfa579); }
.project-image.p3 { background: linear-gradient(135deg, #84fab0, #8fd3f4); }

.quote {
    font-size: 1.35rem;
    font-weight: 500;
    background: #fff;
    border-left: 4px solid var(--brand);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(17, 22, 29, 0.06);
}

.quote footer {
    font-size: 1rem;
    color: var(--muted);
}