/* Base styles */
:root{
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #0ea5e9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{
  /* scale down entire page on mobile */
  transform-origin: top center;
}
@media (max-width: 768px){
  html{transform: scale(1); width:100%; margin:0 auto;}
}
body{
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* Layout */
.container{max-width: 1120px; margin: 0 auto; padding: 0 24px;} /* more side padding for mobile */
.main-grid{display:grid; gap: 32px; padding: 32px 0;}
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center}
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr}
}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(255,255,255,.75); border-bottom:1px solid var(--border); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-text{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon{width:24px; height:24px}
.icon-sm{width:16px; height:16px}
.icon-ss{width:14px; height:14px}
a .icon-sm, a .icon-ss{flex:0 0 auto}
.actions{display:flex; align-items:center; gap:8px}

/* Tabs (static) */
.tabs{display:flex; gap:4px; background:#eef2f7; border-radius:8px; padding:2px}
.tab{border:0;background:transparent;padding:6px 10px;border-radius:6px; font-size:14px; color:#334155}
.tab.active{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.03);}

/* Typography */
.h1{font-size: clamp(28px, 4vw, 36px); line-height:1.2; font-weight:800; margin:0}
.h2{font-size: 20px; line-height:1.3; font-weight:700; margin:0 0 8px}
.lead{font-size:18px; margin:16px 0 0}
.muted{color: var(--muted)}
.sm{font-size:14px}
.xs{font-size:12px}
.strong{font-weight:600}
.mt{margin-top:12px}

/* Badges & Chips */
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:#eef2f7; color:#0f172a; border-radius:999px; font-size:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:6px 10px; background:#eef2f7; border-radius:999px; font-size:12px}
.chip-outline{background:transparent; border:1px solid var(--border)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:#0ea5e9; color:#fff; text-decoration:none; border:1px solid transparent; font-weight:600}
.btn:hover{background:#0284c7}
.btn-outline{background:#fff; color:#0f172a; border-color:var(--border)}
.btn-outline:hover{border-color:#cbd5e1; background:#f8fafc}
.btn-ghost{background:transparent; color:#0f172a}
.btn-ghost:hover{background:#f1f5f9}

/* Cards */
.card{border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.02)}
.card-body{padding:24px}
.card-title{font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:8px}
.card-head{display:flex; align-items:center; gap:8px; font-weight:600}

/* Metric grid */
.metrics{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:8px}
.metric{border:1px solid var(--border); border-radius:12px; text-align:center; padding:12px}
.metric-val{font-weight:800; font-size:22px}
.metric-lbl{font-size:12px; color:var(--muted)}
@media (max-width: 900px){
  .metrics{grid-template-columns: repeat(2, 1fr)}
}

/* Grids */
.grid-4{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.col{display:grid; gap:16px}
@media (max-width: 900px){
  .grid-4{grid-template-columns: 1fr 1fr}
  .grid-3{grid-template-columns: 1fr 1fr}
  .grid-2{grid-template-columns: 1fr}
}

/* Lists and links */
.list{margin:8px 0 0; padding-left:18px}
.list li{margin:6px 0}
.links{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.link{display:inline-flex; align-items:center; gap:6px; color:#0f172a; text-decoration: underline; text-underline-offset:2px}
.link:hover{color:#0ea5e9}
.row-between{display:flex; align-items:baseline; justify-content:space-between; gap:8px}

/* Sections */
.projects, .experience, .skills, .contact{display:grid; gap:12px}

/* Footer */
.footer{padding:40px 0; text-align:center; color:var(--muted); font-size:12px}

/****************************
 * Mobile first enhancements *
 ****************************/
@media (max-width: 650px){
  .container{padding: 0 20px}
  .main-grid{gap:20px; padding:20px 0}
  .header-inner{padding:8px 0}
  .h1{font-size: clamp(24px, 7vw, 28px)}
  .lead{font-size:16px}
  .badge{font-size:11px; padding:3px 8px}
  .chip{font-size:11px; padding:5px 8px}
  .card-body{padding:16px}
  .metrics{gap:8px}
  .metric{padding:10px}
  .metric-val{font-size:20px}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .cta-row{display:flex; flex-wrap:wrap; gap:8px}
  .cta-row .btn{flex:1 1 100%}
  .links{gap:8px}
}
@media (max-width: 480px){
  .container{padding: 0 16px}
  .icon{width:22px; height:22px}
  .icon-sm{width:16px; height:16px}
  .icon-ss{width:13px; height:13px}
  .h2{font-size:18px}
  .hero{gap:16px}
  .metrics{grid-template-columns:1fr}
  .card{border-radius:14px}
  .btn{padding:12px 14px; border-radius:12px}
  .chips{gap:6px}
  .row-between{align-items:flex-start}
}
@media (max-width: 360px){
  .h1{font-size:22px}
  .lead{font-size:15px}
  .badge,.chip{font-size:10px}
  .card-body{padding:14px}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn, .card, .badge, .chip{transition:none}
}