/* ========= Base ========= */
:root{
  --bg:#0b0d12;
  --bg-alt:#10141c;
  --card:#151b25;
  --text:#e6e9ef;
  --muted:#aab4c4;
  --brand:#7c9cff;
  --brand-2:#58e1ff;
  --border:#232a36;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}

.container{max-width:1080px;margin:0 auto;padding:0 16px}
.section{padding:80px 0}
.section.alt{background:var(--bg-alt)}
.section-head{text-align:center;margin-bottom:32px}
.section-head h2{font-size:32px;margin:0 0 8px}
.section-head p{color:var(--muted);margin:0}

.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}.grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.three{grid-template-columns:1fr}}

/* ========= App Bar (dark, compact, pill active) ========= */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,13,18,.85);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:48px}
.brand,.brand-text{color:#34d399;text-decoration:none;font-weight:800;font-size:16px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav--pill a{padding:4px 8px;border-radius:8px;transition:background .2s,color .2s}
.nav--pill a.active{background:rgba(16,185,129,.15);color:#34d399;border:1px solid var(--border)}
.hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0}
.hamburger span{display:block;width:22px;height:2px;background:#9fb0d0}
@media (max-width:900px){
  .nav{display:none;position:absolute;right:16px;top:48px;flex-direction:column;background:var(--bg-alt);padding:12px;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .nav.open{display:flex}
  .hamburger{display:flex}
}

/* ========= Buttons ========= */
.btn{padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0d12;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.wide{width:100%;text-align:center}
.btn.small{padding:6px 12px;font-size:13px}

/* Loading state */
.btn.loading{position:relative;pointer-events:none;opacity:.85}
.btn.loading .btn-label{visibility:hidden}
.btn.loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========= Hero (image left, text right, compact) ========= */
.section.hero{padding:48px 0 56px}
.hero{min-height:auto;display:flex;align-items:center}
.hero-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:flex-start}
.hero-media{grid-column:1;align-self:flex-start;display:flex;justify-content:flex-start}
.hero-text{grid-column:2;align-self:flex-start}
.hero .eyebrow{letter-spacing:.15em;text-transform:uppercase;color:var(--brand-2);font-weight:700}
.hero h1{font-size:46px;line-height:1.1;margin:.2em 0 .4em}
.accent{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:18px}
.cta-row{display:flex;gap:12px;margin:22px 0}
.meta{margin:22px 0 0;padding:0;list-style:none;color:var(--muted)}
.avatar{width:280px;height:280px;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.avatar img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .section.hero{padding:36px 0 44px}
  .hero-inner{grid-template-columns:1fr;gap:20px}
  .hero-media,.hero-text{grid-column:auto}
  .hero-media{justify-content:center}
}
@media (max-width:640px){
  .avatar{width:220px;height:220px}
  .hero h1{font-size:36px}
}

/* ========= Generic Cards ========= */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card-title{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700}
.card-body{padding:16px;color:#cbd5e1}

/* ========= About ========= */
.about-section{background:var(--bg-alt);color:var(--text)}
.about-head{text-align:center;max-width:820px;margin:0 auto 40px}
.about-head h2{font-size:34px;margin:0 0 8px}
.about-head p{color:var(--muted);font-size:18px}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:start}
.about-copy p{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.8}
.about-cards{display:grid;gap:20px}
.about-card{display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.about-card .icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(124,156,255,.15);font-size:20px;color:var(--brand)}
.about-card h3{margin:2px 0 6px;font-size:16px}
.about-card p{margin:0 0 4px;color:var(--muted)}
.about-card p.accent{color:var(--brand-2);font-weight:600}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* ========= Publications ========= */
.publications-section{background:var(--bg)}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:24px}
.pub-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pub-head{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:flex-start;margin-bottom:8px}
.pub-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(124,156,255,.15);color:var(--brand);font-size:20px}
.pub-title h3{margin:0 0 6px;font-size:18px;color:var(--text)}
.pub-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.pub-meta .venue{color:#34d399;text-decoration:none}
.pub-meta .venue:hover{text-decoration:underline}
.pub-meta .dot{opacity:.6}
.pub-desc{color:var(--muted);margin:10px 0 12px}
.pub-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pub-tags span{background:rgba(16,185,129,.12);color:#86efac;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px}
.pub-actions{display:grid}

/* ========= Skills ========= */
.skills-section{background:var(--bg)}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.skill-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.skill-card h3{margin:0 0 16px;font-size:18px;color:var(--text);display:flex;align-items:center;gap:6px}
.skill{margin-bottom:14px}
.skill span{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:4px}
.bar{width:100%;height:6px;background:var(--border);border-radius:4px;overflow:hidden}
.bar div{height:100%;background:var(--brand);border-radius:4px}

/* ========= Projects & Experience ========= */
.projects-section{background:var(--bg-alt)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.project-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.25);display:flex;flex-direction:column}
.pc-head{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.pc-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(124,156,255,.15);color:var(--brand);font-size:22px}
.pc-title h3{margin:0 0 6px;font-size:18px;color:var(--text)}
.pc-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(88,225,255,.15);color:var(--brand-2);border:1px solid var(--border)}
.pc-badge.green{background:rgba(16,185,129,.15);color:#34d399}
.pc-badge.teal{background:rgba(45,212,191,.15);color:#2dd4bf}
.pc-desc{color:var(--muted);margin:6px 0 12px}
.pc-subhead{margin:4px 0 8px;font-weight:700;color:var(--text)}
.pc-bullets{margin:0 0 12px;padding-left:18px;color:var(--muted)}
.pc-bullets li{margin:6px 0}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.pc-tags span{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;color:#cbd5e1}
.pc-actions{display:grid;gap:10px;margin-top:auto}

/* ========= Additional Competencies ========= */
.competencies-section{background:var(--bg)}
.competencies-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.comp-title{text-align:center;color:var(--text);font-weight:600;margin-bottom:16px}
.comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;text-align:center}
.comp-item h4{margin:4px 0 6px;font-size:20px;font-weight:800;color:#126e43}
.comp-item p{margin:0;color:var(--muted);font-size:14px}
@media (max-width:900px){.comp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.comp-grid{grid-template-columns:1fr}}

/* ========= Leadership ========= */
.leadership-section{background:var(--bg)}
.lead-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.25);max-width:900px;margin:0 auto}
.lead-head{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.lead-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(124,156,255,.15);color:var(--brand);font-size:20px}
.lead-title h3{margin:0;font-size:18px;color:var(--text)}
.lead-dates{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.lead-desc{color:var(--muted);margin:10px 0 14px}
.lead-subhead{font-weight:700;color:var(--text);margin:6px 0 8px}
.lead-list{margin:0;padding-left:18px;color:var(--muted)}
.lead-list li{margin:6px 0}

/* ========= Contact ========= */
.contact-section{background:var(--bg-alt)}
/* Right form boxed */
.form-card .card-title{font-size:18px;font-weight:700}
.form-card .card-body{padding:16px}
.contact-form{display:grid;gap:12px}
.contact-form label{display:grid;gap:6px}
.contact-form input,.contact-form textarea{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  border-radius:12px;padding:12px;font:inherit;
}
.form-note{color:#86efac}

/* Left minimal list */
.info-panel{padding:4px 0}
.contact-list{list-style:none;margin:0 0 16px;padding:0}
.contact-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.contact-row:first-child{border-top:1px solid var(--border)}
.contact-row.between{justify-content:space-between}
.contact-row .left{display:flex;align-items:center;gap:12px}
.ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(124,156,255,.12);color:var(--brand);font-size:16px}
.row-title{color:var(--text);font-weight:600;line-height:1.2}
.row-sub{color:var(--muted);font-size:14px}
.link-chip{padding:6px 10px;border-radius:8px;border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:13px}
.inline-actions{display:flex;gap:12px}

/* ========= Footer ========= */
.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);text-align:center}


/* ==== Enhancements per request ==== */

/* Theme binding & spacing */
.section{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.section.tight{padding-bottom:clamp(24px,4vw,40px)}
.section + .section{margin-top:0}

/* Hero vars pick up site theme if present */
.hero.hero-v2{
  --green: var(--primary, var(--primary-color, #166534));
  --slate:#0f172a; --muted:#4b5563; --ring:#e5e7eb; --chip:#f3f4f6;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:#fff; position:relative; padding-top:clamp(56px,8vw,92px);
}
.hero.hero-v2::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(#eaecef 1px, transparent 1px);
  background-size: 26px 26px; opacity:.9; pointer-events:none;
}
.hero-v2-inner{position:relative; z-index:1; text-align:center; max-width:980px; margin:0 auto}

/* Big bold animated title */
.hero-v2-title{
  margin:0 0 8px; line-height:1.06; font-weight:900;
  font-size:clamp(40px,7vw,74px); letter-spacing:-0.02em; color:var(--slate);
  white-space:pre-wrap;
}
.hero-v2-title .char{display:inline-block; transform:translateY(24px); opacity:0}
.hero-v2-title .char.in{transform:none; opacity:1; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease}

/* Specialties as chips */
.hero-specialties{display:flex; gap:10px; justify-content:center; align-items:center; margin:6px 0 10px}
.hero-specialties::before{content:"Specialized in:"; color:var(--muted); font-weight:600; margin-right:4px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
      background:var(--chip); border:1px solid var(--ring); font-weight:600; color:#0b1324; font-size:14px}
.chip::before{content:"•"; color:var(--green)}

/* Description & CTAs */
.hero-v2-desc{margin:0 auto 18px; max-width:780px; color:var(--muted); font-size:clamp(15px,1.7vw,18px)}
.hero-v2-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0 16px}
.btn2{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid transparent;
      font-weight:800; text-decoration:none; line-height:1; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
      box-shadow:0 1px 1px rgba(0,0,0,.03), 0 2px 6px rgba(16,24,40,.04)}
.btn2 .icon-pill{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; border:1px solid transparent}
.btn2.primary{background:var(--green); color:#fff}
.btn2.primary .icon-pill{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22)}
.btn2.primary:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(22,101,52,.25)}
.btn2.outline{background:#fff; color:#111827; border-color:var(--ring)}
.btn2.outline .icon-pill{background:var(--chip); color:#111827; border-color:var(--ring)}
.btn2.outline:hover{background:#f9fafb; transform:translateY(-1px)}

/* Divider & stats */
.hero-v2-divider{margin:22px auto 6px; border:0; height:1px; background:#e5e7eb; width:min(960px,92%)}
.hero-v2-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:760px; margin:6px auto 0}
.hero-v2-stats .stat{text-align:center}
.hero-v2-stats .num{font-weight:900; font-size:clamp(24px,3.6vw,36px); color:color-mix(in oklab, var(--green) 86%, #0c7a43)}
.hero-v2-stats .label{margin-top:2px; font-size:14px; color:#6b7280}

/* Keep stats in a ROW on mobile */
@media (max-width:560px){
  .hero-v2-stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
  .hero-v2-stats .num{font-size:22px}
  .hero-v2-stats .label{font-size:12px}
  .btn2{width:auto}
}


/* ===== Pixel-closer hero to screenshot ===== */
.hero.hero-v2{
  --green: var(--primary, var(--primary-color, #166534));
  --slate:#111827; --muted:#475569; --ring:#e5e7eb; --chip:#f3f4f6;
  background:#fff; position:relative;
  padding-top:84px; padding-bottom:40px;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.hero.hero-v2::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(#ecf0f3 1px, transparent 1px);
  background-size:26px 26px; opacity:.9; pointer-events:none;
}
.hero-v2-inner{position:relative; z-index:1; text-align:center; max-width:980px; margin:0 auto}
.hero-v2-title{
  margin:0 0 14px; line-height:1.05; font-weight:900;
  font-size: clamp(44px, 7.5vw, 84px);
  letter-spacing:-0.02em; color:var(--slate);
}
/* Real-time color wrap for the name */
#heroTitle .char.accent{color:var(--green)}
.hero-v2-subtitle{
  margin:0 0 20px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight:600; color:var(--slate);
}
.hero-v2-desc{
  margin:0 auto 26px; max-width:820px; color:var(--muted);
  font-size: clamp(15px, 1.7vw, 18px);
}

/* Buttons */
.hero-v2-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:10px 0 30px}
.btn2{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:10px; border:1px solid transparent;
     font-weight:800; text-decoration:none; line-height:1; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
     box-shadow:0 1px 1px rgba(0,0,0,.03), 0 2px 6px rgba(16,24,40,.04)}
.icon-pill{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; border:1px solid transparent}
.caret-badge{border-radius:6px}
.btn2.primary{background:var(--green); color:#fff}
.btn2.primary .icon-pill{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.24)}
.btn2.primary:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(22,101,52,.25)}
.btn2.outline{background:#fff; color:#111827; border-color:var(--ring)}
.btn2.outline .icon-pill{background:#fff; color:#111827; border-color:var(--ring)}
.btn2.outline:hover{background:#f9fafb; transform:translateY(-1px)}

/* Divider & Stats */
.hero-v2-divider{margin:30px auto 26px; border:0; height:1px; background:#e5e7eb; width:min(960px,92%)}
.hero-v2-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:760px; margin:0 auto}
.hero-v2-stats .stat{text-align:center}
.hero-v2-stats .num{font-weight:900; font-size: clamp(26px, 3.6vw, 34px); color:var(--green)}
.hero-v2-stats .label{margin-top:8px; font-size:14px; color:#6b7280}

/* Global section spacing tightened */
.section{padding-top:64px; padding-bottom:64px}
.section.tight{padding-bottom:36px}
.section + .section{margin-top:0}

/* Keep stats in a row even on mobile */
@media (max-width:560px){
  .hero-v2-stats{grid-template-columns:repeat(3,1fr); gap:12px}
  .hero-v2-stats .label{font-size:12px}
  .btn2{padding:11px 16px}
}