/* ===== Theme ===== */
:root{
  --bg:#f6fbf9;            /* light mint */
  --panel:#ffffff;
  --text:#0b1f17;          /* deep green/black */
  --muted:#5a6b63;         /* cool grey-green */
  --border:#e6f1ec;
  --accent:#22c55e;        /* green */
  --accent-2:#16a34a;      /* deeper green */
  --chip:#eef7f2;
  --shadow:0 10px 30px rgba(20, 83, 45, .12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ===== Decorative background: subtle grid + soft green glow ===== */
.bg-wrap{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
}
.bg-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(255,255,255,.6), rgba(255,255,255,.6)),
    repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(0,0,0,.04) 25px),
    repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(0,0,0,.04) 25px);
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.bg-blur{
  position:absolute; width:80vmax; height:80vmax;
  background:radial-gradient(closest-side, rgba(34,197,94,.18), transparent 70%);
  filter:blur(40px);
  top:-20vmax; right:-20vmax;
}

/* ===== Links & buttons ===== */
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--text);
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; box-shadow:0 12px 34px rgba(20,83,45,.16); }
.btn-ghost{ background:transparent; border-color:#cfe9dc; }
.btn-solid{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white; border:none; }

/* Chip buttons for quicklinks */
.chip{
  display:inline-flex; align-items:center;
  background:var(--chip); color:var(--text);
  padding:10px 14px; border-radius:999px; border:1px solid #ddefe6;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:#c7e5d7; }

/* ===== Header ===== */
.nav{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(246,251,249,.7); border-bottom:1px solid var(--border);
}
.brand{font-weight:800; letter-spacing:.2px}

/* ===== Hero ===== */
.hero{padding:54px 20px 10px}
.hero-inner{max-width:980px; margin:0 auto; text-align:center}
.avatar{
  width:110px; height:110px; border-radius:50%; object-fit:cover;
  border:3px solid #d6efe2; box-shadow:var(--shadow); background:#fff;
}
.hero h1{font-size:36px; line-height:1.15; margin:18px 0 8px}
.tagline{color:var(--muted); margin:0 0 6px}

/* ===== Sections ===== */
.section{max-width:980px; margin:28px auto; padding:0 20px}
.section-head{display:flex; align-items:end; justify-content:space-between; margin-bottom:12px}
.section h2{margin:0; font-size:24px}
.muted{color:var(--muted)}
.mt{margin-top:16px}

/* Quick Links row centered */
.quicklinks{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}

/* ===== Grid & cards ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hover-pop:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(20,83,45,.18); border-color:#d8efe4; }
.card-body{padding:16px 16px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}

/* Tags & bullets */
.tags{display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 10px; list-style:none}
.tags li{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:#f0fbf5; border:1px solid #d7efe4; color:#155e3c;
}
.bullets{margin:0; padding-left:18px; color:#1c2a25}
.bullets li{margin:6px 0}

/* Pills (skills) */
.pillbox{display:flex; flex-wrap:wrap; gap:8px}
.pillbox span{
  background:#f0fbf5; border:1px solid #d7efe4; color:#1a3a2d;
  border-radius:999px; padding:6px 10px; font-size:13px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.pillbox span:hover{ transform:translateY(-2px); background:#e8f7ee; box-shadow:var(--shadow); }

/* About text */
.about p{color:#243730; line-height:1.7}

/* ===== Footer ===== */
.site-footer{
  max-width:980px; margin:46px auto 24px; padding:0 20px;
  display:flex; justify-content:space-between; align-items:center; color:var(--muted);
  border-top:1px solid var(--border); padding-top:16px;
}

/* Small screens */
@media (max-width: 560px){
  .hero h1{font-size:28px}
}