:root{
    --ink:#111827; --muted:#6B7280; --line:#E5E7EB; --panel:#F9FAFB;
    --accent:#F97316; --accent-dark:#C2410C;
  }
  *{box-sizing:border-box;}
  body{
    font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink); margin:0; line-height:1.5; background:#fff;
  }
  img{max-width:100%; display:block; border-radius:10px;}
  h1,h2,h3{margin:0;}
  .container{max-width:1100px; margin:0 auto; padding:0 1.5rem;}
  section{scroll-margin-top:80px;}
  .btn{
    display:inline-block; background:var(--accent); color:#fff; font-weight:700;
    padding:.75rem 1.6rem; border-radius:8px; text-decoration:none; border:none;
    cursor:pointer; font-size:.95rem;
  }
  .btn:hover{background:var(--accent-dark);}
  .btn-outline{
    display:inline-block; background:transparent; color:var(--ink); font-weight:700;
    padding:.7rem 1.5rem; border-radius:8px; text-decoration:none; border:1px solid var(--line);
    font-size:.95rem;
  }
  .btn-outline:hover{border-color:var(--ink);}
  .eyebrow{color:var(--accent-dark); text-transform:uppercase; font-weight:700; font-size:.78rem; letter-spacing:1px;}
  .section-head{margin-bottom:2rem;}
  .section-head h2{font-size:1.7rem; margin:.35rem 0 .3rem;}
  .section-head p{color:var(--muted); margin:0; max-width:60ch;}

  /* ================= NAVBAR ================= */
  /* flex: justify-content spaces logo from links · align-items keeps them vertically centered
     · flex-wrap lets the links drop below the logo on very narrow screens instead of squashing */
  .navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.8rem;
    padding:1.1rem 0;
    border-bottom:1px solid var(--line);
  }
  .logo{font-size:1.3rem; font-weight:800; letter-spacing:.5px;}
  .nav-links{
    list-style:none; display:flex; gap:1.6rem; margin:0; padding:0;
  }
  .nav-links a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;}
  .nav-links a:hover{color:var(--accent);}

  /* ================= HERO ================= */
  /* flex-wrap does the responsive work here: each child has min-width, so when the
     container gets too narrow to fit both side by side, they wrap — no media query needed.
     order flips which one appears first once they've wrapped onto mobile. */
  .hero{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2.5rem;
    padding:3.5rem 0;
  }
  .hero-text{ flex:1 1 320px; order:1; }
  .hero-text h1{font-size:2.3rem; margin:.5rem 0 1rem; line-height:1.15;}
  .hero-text p{color:var(--muted); margin:0 0 1.5rem; max-width:46ch;}
  .hero-actions{display:flex; gap:.9rem; flex-wrap:wrap;}
  .hero-image{ flex:1 1 280px; order:2; max-width:340px; }
  .hero-image img{border-radius:50%; aspect-ratio:1/1; object-fit:cover;}

  @media (max-width: 640px){
    .hero-image{ order:-1; max-width:220px; margin:0 auto; }
  }

  /* ================= ABOUT ================= */
  /* same flex-wrap + order pattern as the hero, just mirrored: image on the right this time */
  .about{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2.5rem;
    padding:3.5rem 0;
    border-top:1px solid var(--line);
  }
  .about-image{ flex:1 1 280px; order:2; }
  .about-text{ flex:1 1 340px; order:1; }
  .about-text p{color:var(--muted); margin:0 0 1rem; max-width:56ch;}
  .about-stats{display:flex; flex-wrap:wrap; gap:1.8rem; margin-top:1.3rem;}
  .about-stats div strong{display:block; font-size:1.4rem; color:var(--ink);}
  .about-stats div span{color:var(--muted); font-size:.85rem;}

  @media (max-width: 640px){
    .about-image{ order:-1; }
  }

  /* ================= SKILLS ================= */
  /* pure flex-wrap "tag cloud": no fixed widths, items just flow and wrap naturally */
  .skills{padding:3rem 0; border-top:1px solid var(--line);}
  .skill-pills{display:flex; flex-wrap:wrap; gap:.8rem;}
  .skill-pill{
    background:var(--panel); border:1px solid var(--line); border-radius:30px;
    padding:.6rem 1.2rem; font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem;
  }
  .skill-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);}

  /* ================= PROJECTS ================= */
  /* the classic responsive card grid: flex-wrap lets cards fall onto new rows,
     gap spaces them, justify-content centers the last (incomplete) row instead of
     stretching it awkwardly to the edges. */
  .projects{padding:3rem 0 4rem; border-top:1px solid var(--line);}
  .project-grid{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    justify-content:center;
  }
  .project-card{
    flex:1 1 280px;
    max-width:330px;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
  }
  .project-card img{border-radius:0;}
  .project-card .info{padding:1.1rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}
  .project-card h3{font-size:1.05rem;}
  .project-card p{color:var(--muted); font-size:.88rem; margin:0; flex:1;}
  .project-tags{display:flex; flex-wrap:wrap; gap:.4rem;}
  .project-tags span{
    background:var(--panel); border:1px solid var(--line); border-radius:20px;
    padding:.2rem .65rem; font-size:.75rem; color:var(--muted); font-weight:600;
  }
  .project-card a{font-weight:700; color:var(--accent-dark); text-decoration:none; font-size:.88rem;}
  .project-card a:hover{text-decoration:underline;}

  /* ================= FOOTER / CONTACT ================= */
  /* three columns that wrap to a stacked layout on mobile · align-items:flex-start keeps
     each column's content pinned to the top even if one column is taller · the contact
     column uses align-self to opt out of that and stretch to match the tallest column. */
  footer{background:var(--ink); color:#fff; padding:3rem 0 2rem; margin-top:1rem;}
  .footer-cols{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:2.5rem;
    padding-bottom:2rem;
    border-bottom:1px solid #374151;
  }
  .footer-col{flex:1 1 200px;}
  .footer-col h3{font-size:1rem; margin-bottom:.9rem;}
  .footer-col ul{list-style:none; margin:0; padding:0;}
  .footer-col li{margin-bottom:.5rem;}
  .footer-col a{color:#D1D5DB; text-decoration:none; font-size:.92rem;}
  .footer-col a:hover{color:var(--accent);}
  .footer-col.contact{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#1F2937;
    border-radius:8px;
    padding:1.2rem;
  }
  .footer-col.contact p{color:#D1D5DB; font-size:.88rem; margin:0 0 1rem;}
  .footer-bottom{padding-top:1.2rem; text-align:center; color:#9CA3AF; font-size:.82rem;}