*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,sans-serif}
    body{background:#0a0a0a;color:#eee;line-height:1.6;scroll-behavior:smooth}
    .container{max-width:900px;margin:auto;padding:40px 20px;}

    /* HERO WITH PFP + NAME */
    .hero{
        display:flex;
        align-items:center;
        gap:20px;
        margin-bottom:50px;
    }
    .pfp{
        width:90px;
        height:90px;
        border-radius:50%;
        object-fit:cover;
        border:3px solid #111;
        box-shadow:0 0 20px rgba(255,255,255,0.08);
    }
    .hero-text h1{
        font-size:2.4rem;
        font-weight:700;
        font-family: "MuseoModerno", sans-serif;
    }
    .hero-text .sub{
        color:#777;
        margin-top:6px;
        font-size:1.05rem;
    }

    /* HERO ROW: hero + navbar side-by-side */
    .hero-row{
        display:flex;
        align-items:flex-start;
        gap:24px;
        margin-bottom:24px;
        justify-content:space-between;
    }
    .hero-row .hero{flex:1;min-width:0}

    /* Navbar next to hero */
    .navbar{
        min-width:160px;
        background:transparent;
    }
    /* Position the navbar to align with the hero heading (Luca) */
    .navbar{transform:none;margin-top:10px}
    .navbar ul{list-style:none;display:flex;flex-direction:row;gap:12px;align-items:center}
    .navbar a{
        display:inline-block;
        padding:10px 14px;
        color:#ddd;
        text-decoration:none;
        border-radius:10px;
        font-weight:600;
        transition:background .18s, color .18s, transform .12s;
    }
    .navbar a:hover{background:#151515;color:#fff;transform:translateX(4px)}
    .navbar a:focus{outline:2px solid #333}

    /* small screens: stack hero and nav */
    @media (max-width:720px){
        .hero-row{flex-direction:column;align-items:flex-start}
        .navbar{width:100%}
        .navbar ul{flex-direction:column;gap:8px}
        .navbar a{padding:8px 10px;font-size:.95rem}
        .navbar{transform:none;margin-top:0}
    }

    /* Sections */
    h2{font-size:1.6rem;margin:40px 0 20px;font-weight:600;}
    /* Arrow icon in headings: right-aligned for headings with .with-arrow */
    h2.with-arrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
    h2.with-arrow .arrow-icon{display:inline-block;width:20px;height:20px;margin-left:0;vertical-align:middle;color:#ddd;transition:color .18s, transform .12s}
    h2.with-arrow .arrow-icon svg{width:100%;height:100%;display:block}
    h2.with-arrow .arrow-icon:hover{color:#fff;transform:translateX(6px)}

    /* On small screens keep arrow close to text (no large translate) */
    @media (max-width:520px){
        h2.with-arrow{gap:8px}
        h2.with-arrow .arrow-icon{width:18px;height:18px}
        h2.with-arrow .arrow-icon:hover{transform:none}
    }

    /* Cards */
    .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    .card{
        background:#141414;
        padding:22px;
        border-radius:16px;
        transition:.25s;
        border:1px solid #1d1d1d;
    }
    .card:hover{
        transform:translateY(-4px);
        border-color:#333;
        box-shadow:0 0 20px rgba(255,255,255,0.05);
    }
    .card h3{font-size:1.2rem;margin-bottom:8px;}
    .card p{color:#bcbcbc;font-size:.95rem;}

    /* Skills */
    .skills span{
        display:inline-block;
        background:#1b1b1b;
        padding:6px 12px;
        font-size:.85rem;
        border-radius:10px;
        margin:4px;
        color:#ccc;
    }

    /* Socials */
    .socials a{
        color:#fff;
        text-decoration:none;
        margin-right:15px;
        opacity:.8;
        transition:.2s;
        font-weight:500;
    }
    .socials a:hover{opacity:1;}

    .footer{
        margin-top:60px;
        text-align:center;
        color:#666;
        font-size:.9rem;
    }

    @keyframes fadein{
        from{opacity:0;transform:translateY(10px)}
        to{opacity:1;transform:translateY(0)}
    }