/* --- Mobile Upgrade (drop-in) ---
   Include after your existing style.css:
   <link rel="stylesheet" href="assets/css/style.mobile.css" />
*/
:root{ --nav-height: 56px; }
h1{font-size:clamp(1.75rem, 2.5vw + 1rem, 2.5rem)}
h2{font-size:clamp(1.25rem, 1.5vw + 0.9rem, 1.75rem)}
h3{font-size:clamp(1.05rem, 1.1vw + 0.8rem, 1.25rem)}
body{font-size:clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem)}
.topbar{position:sticky;top:0;height:var(--nav-height);padding:10px 14px}
.topbar .brand a{font-size:1.4rem}
.topbar nav{display:flex;gap:14px}
.topbar .contact-inline{display:flex;gap:8px;align-items:center}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:#e7e9ff;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#e7e9ff;transition:.2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
@media (max-width: 900px){
  .topbar{gap:10px}
  .topbar nav{position:fixed;inset:var(--nav-height) 0 auto 0;transform:translateY(-8px);background:rgba(10,14,34,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);display:none;flex-direction:column;padding:14px 18px;z-index:200}
  .topbar nav a{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
  .topbar nav.open{display:flex}
  .nav-toggle{display:flex}
  .topbar .contact-inline{display:none}
}
.hero{min-height:60vh;padding:40px 16px}
.hero .avatar{width:clamp(120px, 26vw, 220px);height:clamp(120px, 26vw, 220px)}
.container{padding:0 16px}
.card{padding:clamp(16px, 3vw, 24px);margin:12px 0;border-radius:16px}
.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px, 2.5vw, 18px)}
@media (max-width: 820px){ .about-wrap{grid-template-columns:1fr;gap:18px}}
.timeline .item{grid-template-columns:56px 1fr;gap:12px}
.timeline .logo{width:48px;height:48px;border-radius:12px}
.tag{padding:6px 10px;font-size:.8rem}
.site-footer .container{flex-direction:column;gap:8px;align-items:flex-start}