:root{
  /* Pastel blue / gray / white / black palette (bluer emphasis) */
  --accent:#7cc0ff;        /* primary pastel blue */
  --accent-2:#d6ecff;      /* light blue tint */
  --accent-3:#edf6ff;      /* faint blue wash */
  --ink:#0b0e11;           /* near-black text */
  --muted:#5d6d83;         /* muted text */
  --panel:#ffffff;         /* card surface */
  --line:#d9e6f6;          /* subtle borders (bluish) */
  --bg:#f6fbff;            /* page background (very light blue) */
  --radius:18px;
  --shadow:0 10px 28px rgba(14,22,33,.08);
}

/* ====== Base ====== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.65 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;border-radius:12px}

/* Links */
a{color:#0a4c80;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Type */
h1,h2,h3{margin:0 0 .6rem;line-height:1.2}
h1{font-size:2.6rem;letter-spacing:.2px}
h2{font-size:1.6rem;margin-top:2rem}
h3{font-size:1.1rem}
.small{font-size:.92rem;color:var(--muted)}
.muted{color:var(--muted)}
.wrap{max-width:980px;margin:0 auto;padding:22px}
.section{padding:10px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ====== Header / Hero ====== */
.site-header{background:linear-gradient(180deg,var(--accent-2),var(--accent-3) 55%,#ffffff);border-bottom:1px solid var(--line)}
.hero{padding:64px 22px 28px}
.hero-grid{display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:center}
@media (max-width:720px){.hero-grid{grid-template-columns:1fr;}}
.avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 18px rgba(10,76,128,.18)}

/* ====== Buttons ====== */
.btn{display:inline-block;margin:0 10px 10px 0;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:var(--accent);color:#052743;font-weight:700;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(14,22,33,.12);background:#73b9fc}
.btn.ghost{background:#ffffff;border-color:#9fc9ee;color:#0a4c80}

/* ====== Chips / Pills ====== */
.pill{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.86rem;margin:0 6px 6px 0;background:#f0f8ff}

/* ====== Cards & Grids ====== */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:1fr}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:16px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(14,22,33,.10)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
}

/* ====== Resume iframe ====== */
.resume-embed{width:100%;height:680px;border:0;border-radius:14px;box-shadow:var(--shadow);background:#fff}

/* ====== Section separators (blue hint) ====== */
.section + .section{margin-top:8px}
.section h2{position:relative;padding-top:8px}
.section h2::after{content:"";display:block;height:2px;width:72px;background:var(--accent);border-radius:2px;margin-top:10px}

/* ====== Footer ====== */
footer{padding:26px 22px;border-top:1px solid var(--line)}