:root{
  --bg: #f6fbff;
  --surface: #ffffff;
  --ink: #0f2b3c;
  --muted: #4c6b80;
  --brand: #bfe3ff; /* pastel light blue */
  --brand-strong: #89c8ff;
  --ring: rgba(137,200,255,0.6);
  --shadow: 0 10px 25px rgba(15,43,60,0.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1200px 800px at 100% -10%, #eaf6ff, transparent) no-repeat, var(--bg);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}

.site-header{
  position:sticky;top:0;background:rgba(255,255,255,0.8);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #eaf3fb; z-index:50;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1.2rem}
.brand{display:flex;gap:0.8rem;align-items:center;text-decoration:none;color:inherit}
.brand .avatar{width:42px;height:42px;border-radius:50%;background:var(--brand);box-shadow:var(--shadow)}
.brand h1{font-size:1.1rem;margin:0}
.brand p{margin:0;font-size:0.9rem;color:var(--muted)}

.nav a{color:var(--ink);text-decoration:none;margin-left:1rem;padding:0.4rem 0.6rem;border-radius:12px}
.nav a:hover{background:var(--brand);}

.hero{display:grid;grid-template-columns:1fr;gap:1.6rem;padding:4.5rem 0 2rem}
.hero h2{font-size:2rem;margin:0 0 0.5rem}
.hero p{font-size:1.05rem;max-width:65ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1rem}
.btn{background:var(--ink);color:#fff;border:none;border-radius:14px;padding:0.6rem 0.9rem;text-decoration:none;box-shadow:var(--shadow)}
.btn.ghost{background:var(--brand-strong);}
.btn:hover{filter:brightness(0.95)}

.section{padding:2rem 0}
.section h3{font-size:1.4rem;margin:0 0 1rem}

.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.tags li{background:var(--brand);border-radius:999px;padding:0.35rem 0.6rem}

.grid{display:grid;gap:1rem}
.grid.skills-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.list.two-col{columns:2;column-gap:2rem}
@media (max-width:800px){.list.two-col{columns:1}}

.card{background:var(--surface);border:1px solid #eaf3fb;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h4{margin:0 0 0.5rem}

.timeline .item{border-left:3px solid var(--brand-strong);padding-left:1rem;margin:0 0 1.1rem;position:relative}
.timeline .item:before{content:"";position:absolute;left:-9px;top:0.3rem;width:12px;height:12px;border-radius:50%;background:var(--brand-strong);box-shadow:0 0 0 3px #e6f3ff}
.timeline header{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:baseline}
.timeline h4{margin:0}
.timeline span{color:var(--muted)}
.timeline time{margin-left:auto;color:var(--muted)}

.edu h4{margin:0}
.edu p{margin:0.2rem 0 0.5rem;color:var(--muted)}

.list{display:grid;gap:1rem}
.list li{margin:0.2rem 0}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.8rem}
.contact-card{display:flex;flex-direction:column;gap:0.25rem;padding:0.9rem;border-radius:var(--radius);border:1px solid #dfeffc;background:#f7fbff;text-decoration:none;color:inherit}
.contact-card:hover{background:#eaf6ff;border-color:#cfe7ff}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid #eaf3fb;padding:1.2rem 0;margin-top:2rem}
.mt{margin-top:1rem}

#backToTop{
  position:fixed;bottom:20px;right:20px;border:none;background:var(--ink);color:#fff;width:44px;height:44px;border-radius:50%;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
}
#backToTop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#backToTop:hover{filter:brightness(0.92)}