:root{
      --bg:#f6fbff; --card:#ffffff; --muted:#6b7280; --accent:#0A84FF; --glass: rgba(255,255,255,0.7);
      --container:1100px; --radius:14px; --pad:1.05rem;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:#0f1724}
    a{color:var(--accent);text-decoration:none}
    header{position:sticky;top:0;backdrop-filter:blur(6px);background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));border-bottom:1px solid rgba(10,132,255,0.06);}
    .nav{max-width:var(--container);margin:0 auto;display:flex;gap:1rem;align-items:center;padding:0.6rem 1rem}
    .brand{display:flex;align-items:center;gap:.7rem;font-weight:700}
    .brand .dot{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#006ae6);display:inline-grid;place-items:center;color:#fff}
    nav{margin-left:auto;display:flex;gap:1rem}
    nav a{padding:.5rem .8rem;border-radius:10px;font-weight:600;color:#08315e}
    nav a:hover{background:#eaf4ff}
    .hamburger{display:none;border:0;background:none;padding:.5rem}

    main{max-width:var(--container);margin:2.2rem auto;padding:0 1rem}
    .hero{display:grid;grid-template-columns:1fr 400px;gap:2rem;align-items:center}
    .intro{background:linear-gradient(180deg,#fff,#fbfdff);padding:2rem;border-radius:var(--radius);box-shadow:0 8px 28px rgba(10,132,255,0.08)}
    h1{margin:0;font-size:2.1rem}
    .tag{color:var(--muted);margin-top:.25rem}
    .cta{margin-top:1.1rem;display:flex;gap:.6rem}
    .btn{background:var(--accent);color:white;padding:.6rem 1rem;border-radius:10px;border:none;font-weight:700;cursor:pointer}
    .btn.ghost{background:transparent;color:var(--accent);border:1.6px solid rgba(10,132,255,0.12)}

    .card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(10,132,255,0.06)}
    .stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
    .stat{flex:1 1 120px;padding:.8rem;border-radius:10px;background:linear-gradient(180deg,#fbfbff,#fff);text-align:center}
    .stat h3{margin:.25rem 0;color:var(--accent)}

    section{margin-top:1.6rem}
    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
    .list{display:flex;flex-direction:column;gap:.6rem}
    ul.clean{padding-left:1.05rem}

    .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
    .project{padding:1rem;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(10,132,255,0.04)}
    .project h4{margin:.2rem 0}
    .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
    .tag-pill{font-size:.82rem;padding:.25rem .5rem;border-radius:999px;background:#eef7ff;color:#063055;border:1px solid rgba(10,132,255,0.06)}

    footer{margin:2rem auto;text-align:center;color:var(--muted);padding:2rem 1rem}

    /* contact */
    .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:1rem}
    form{display:flex;flex-direction:column;gap:.6rem}
    input,textarea{padding:.7rem;border-radius:8px;border:1px solid #e6eefc;background:#fbfdff}
    button[type=submit]{margin-top:.4rem}

    /* responsive */
    @media (max-width:980px){.hero{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
    @media (max-width:700px){nav{display:none}.hamburger{display:block}.brand{gap:.5rem}.hero{gap:1rem}.projects-grid{grid-template-columns:1fr}}

    /* small utilities */
    .muted{color:var(--muted)}
    .small{font-size:.92rem}
    .center{text-align:center}