:root{
  --bg:#0b0d10; --card:#12161c; --muted:#9fb0c3; --text:#e9f0f7; --accent:#69b3ff; --ring: rgba(105,179,255,.35); --rule:#1f2b3a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% -10%, #14202e 0%, var(--bg) 55%) no-repeat fixed;
  color:var(--text); line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:900px; margin:0 auto; padding:28px 20px 10px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--ring)}
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid #223041; background:#0e131a; color:var(--text);
  transition:transform .06s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); border-color:#2d445f}
.btn.primary{background:linear-gradient(180deg, #1a4a7a, #143a60); border-color:#2b5d8f}
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center; margin:18px 0 26px}
.card{background:linear-gradient(180deg, #121923, #0e141b); border:1px solid var(--rule); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.headline{font-size:38px; line-height:1.1; margin:0 0 10px}
.sub{color:var(--muted); margin:0 0 14px}
.chiprow{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #233244; color:#cfe2ff; background:#0a1016}
.section-title{font-size:22px; margin:0 0 14px; letter-spacing:.2px}
.grid{display:grid; gap:14px}
.experience-card{display:block;background:linear-gradient(180deg, #0f141b, #0c1117);border:1px solid #1c2634;border-radius:16px;padding:16px}
.xp-head{display:flex;align-items:flex-start;gap:12px}
.role{font-weight:700}
.org{color:#cfe2ff}
.meta{margin-left:auto; color:var(--muted); font-size:14px}
ul{margin:8px 0 0 18px; padding:0}
li{margin:6px 0}
.portrait{width:100%; aspect-ratio:4/5; border-radius:18px; object-fit:cover; background:#0f1520; border:1px solid var(--rule)}
footer{margin-top:40px; color:var(--muted); font-size:14px; text-align:center}
@media (max-width:930px){ .hero{grid-template-columns:1fr} .meta{width:100%; margin-left:0} }
.portfolio{display:flex; flex-direction:column; gap:24px; align-items:center}
.sheet{width:min(1000px, 96%); border-radius:14px; border:1px solid var(--rule); box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Small role headers inside experience cards */
.subheader{font-size:14px; letter-spacing:.3px; font-weight:700; color:#cfe2ff; margin:6px 0 4px; text-transform:none}
.subheader .label{color:#9fb0c3; font-weight:600; margin-left:6px; font-size:13px}
    
.logo{width:80px;height:80px;object-fit:contain;border-radius:8px;background:#0f1520;border:1px solid #223041;margin-top:2px;margin-right:12px;flex-shrink:0}
.xp-head{display:flex;align-items:flex-start;gap:12px}

.experience-card{display:block;background:linear-gradient(180deg, #0f141b, #0c1117);border:1px solid #1c2634;border-radius:16px;padding:16px}
.experience-card .content{flex:1;display:flex;flex-direction:column;justify-content:center}
.xp-head{display:flex;align-items:flex-start;gap:12px}
.role{font-weight:700;font-size:18px}
.org{color:#cfe2ff;font-size:15px}
.meta{color:#9fb0c3;font-size:14px}

.xp-head{display:flex;align-items:flex-start;gap:12px}
.xp-text{display:flex;flex-direction:column;gap:2px;align-items:flex-start}


.xp-text .meta{white-space:normal}

.experience-card{display:block;background:linear-gradient(180deg, #0f141b, #0c1117);border:1px solid #1c2634;border-radius:16px;padding:16px}
.logo{width:80px;height:80px;object-fit:contain;border-radius:8px;background:#0f1520;border:1px solid #223041;margin-top:2px;margin-right:12px;flex-shrink:0}
.xp-head{display:flex;align-items:flex-start;gap:12px}
.xp-text{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.role{font-weight:600;font-size:16px;margin:0}
.org{font-size:15px;color:#e0e0e0;margin:2px 0}
.meta{font-size:13px;color:#9fb0c3;margin:2px 0}
.experience-card ul{margin:6px 0 0 18px;padding:0}

/* Narrower, consistent card width like the first card */
.experience-card{max-width:900px;margin:10 auto}