@import "styles.base.css";
@import "styles.sections.css";

/* ---- Variables ---- */
:root{
  --bg: #040f12;
  --panel: #071b1e;
  --muted: #91b0a9;
  --accent: #00ff9c;         /* terminal green */
  --accent-2: #5ad8ff;       /* cool blue */
  --text: #d8f6f0;
  --glass: rgba(255,255,255,0.02);
  --container:1100px;
  --gap:28px;
  --radius:12px;
  --rail-gap: 14px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready * { transition: none !important; animation: none !important; }
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(0,255,179,0.02), transparent 8%),
              linear-gradient(180deg, var(--bg), #021014 120%);
  color:var(--text); -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:48px 24px}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;border-radius:6px;z-index:9999}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(2,6,7,0.45), rgba(2,6,7,0.15));backdrop-filter: blur(6px);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--accent);font-family:JetBrains Mono}
.brand .logo-shield{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  color:var(--accent); font-weight:800;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Nav */
.primary-nav{display:flex;align-items:center;gap:12px}
.primary-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.primary-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.primary-nav a:hover, .primary-nav a:focus{color:var(--accent);text-decoration:underline;text-underline-offset:6px}

/* hamburger (mobile) */
.nav-toggle{display:none;background:transparent;border:0}
.hamburger{width:22px;height:2px;background:var(--muted);display:block;position:relative}
.hamburger::after,.hamburger::before{content:"";position:absolute;left:0;height:2px;background:var(--muted);width:22px}
.hamburger::before{top:-7px}.hamburger::after{top:7px}

/* CTA */
.cta.resume{border:1px solid rgba(0,255,179,0.12);padding:8px 12px;border-radius:8px;color:var(--accent);text-decoration:none}

/* Panels and rhythm */
.panel{padding:44px 0;border-top:1px solid rgba(255,255,255,0.02)}
.eyebrow{font-family:JetBrains Mono;color:var(--accent);margin:0 0 8px 0}
.hero{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;padding-top:28px}
.hero h1{font-size:40px;margin:0;line-height:1.04;letter-spacing:-0.01em}
.hero .mono{font-family:JetBrains Mono;color:var(--accent)}
.tagline{display:block;color:var(--muted);font-weight:500}
.lead{color:var(--muted);max-width:60ch;margin-top:12px}

/* hero actions */
.hero-actions{display:flex;gap:12px;margin-top:18px}
.btn{padding:10px 16px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#022;box-shadow:0 8px 30px rgba(0,255,179,0.06)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* badges */
.badges{margin-top:16px;display:flex;gap:10px}
.badge{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:999px;color:var(--muted);font-weight:700}

/* hero art */
.hero-art{justify-self:end;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02)}
.hero-art img{display:block;width:100%;height:auto;object-fit:cover}
.grid-overlay{position:absolute;inset:0;pointer-events:none}

/* experiences */
.experiences{display:grid;gap:18px}
.experience-item{display:flex;gap:18px;align-items:flex-start}
.logo-wrap img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:var(--glass);padding:8px}
.exp-body h3{margin:0}
.exp-tags{display:flex;gap:8px;margin-top:8px}
.exp-tags span{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px}

/* projects */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border-radius:12px;overflow:hidden;display:flex;gap:0;align-items:stretch;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.project-thumb{position:relative;width:40%;min-width:40%}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-flag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,0.5);padding:6px 8px;border-radius:6px;color:var(--accent);font-weight:700;font-size:.7rem}
.project-content{padding:14px;flex:1;display:flex;flex-direction:column}
.project-content h3{margin:0 0 6px 0;line-height:1.25;font-size:1rem}
.project-content p.muted{margin:0 0 10px 0;font-size:.85rem}
.project-content .meta{display:flex;gap:10px;margin-top:auto;color:var(--muted);font-size:.65rem;font-weight:600;letter-spacing:.04em}
.project-actions{margin-top:8px;display:flex;gap:20px}
.more-projects-wrap{margin-top:24px;text-align:center;display:block;width:100%}
.more-projects{font-size:.8rem;letter-spacing:.5px;background:transparent;padding:.75rem 1.4rem;border:1px solid rgba(0,255,179,.35);border-radius:12px;color:var(--accent);cursor:pointer;display:inline-block}
.more-projects:hover{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--accent)}
.projects-grid .project-card.extra[hidden]{display:none !important}
@media (max-width:860px){ .projects-grid{grid-template-columns:1fr} .project-card{flex-direction:row} }

/* skills */
.skills-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.radar-svg{width:220px;height:220px}
.skill-list{flex:1;min-width:300px}
.skill label{display:block;color:var(--muted);font-weight:700}
.bar{height:12px;background:rgba(255,255,255,0.03);border-radius:999px;margin-top:8px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width 900ms cubic-bezier(.22,.9,.32,1)}

/* publications */
.publications{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.publications li{background:rgba(255,255,255,0.01);padding:12px;border-radius:10px}

/* --- Publications layout polish (title, authors, venue) --- */
.publications{ gap:12px }
.publications .pub-item{ display:grid; gap:4px }
.pub-title{ font-weight:800; color: var(--text) }
.pub-authors{ color: var(--muted) }
.pub-venue{ color: var(--muted); font-style: italic }
.publications .pub-item .link{ margin-top:4px; align-self:start }
/* --- end publications polish --- */

/* fun list */
.fun-list{list-style:disc;margin-left:18px;color:var(--muted)}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{
  display: flex;
  gap: 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  padding:18px;
  border-radius:12px;
}
.post-thumb {
  display: block;
  flex-shrink: 0;
  width: 140px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post-card:hover .post-thumb img {
  transform: scale(1.05);
}
.post-body {
  flex: 1;
}
.post-card .post-title {
  display: block;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text);
  text-decoration: none;
}
.post-card .post-title:hover {
  color: var(--accent);
}

/* Responsive blog cards */
@media (max-width: 640px) {
  .post-card {
    flex-direction: column;
  }
  .post-thumb {
    width: 100%;
    height: 180px;
    margin-bottom: 12px;
  }
}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:20px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.contact-meta{color:var(--muted)}
.social{display:flex;gap:10px;margin-top:12px}
.social-item{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--muted)}
.certs ul{margin:6px 0 0 16px;color:var(--muted)}

/* post article styles */
.post-article{max-width:900px}
.post-article .post-body{margin-top:18px;color:var(--muted);line-height:1.7}
.post-article pre{background:#001616;padding:12px;border-radius:8px;overflow:auto;color:#bfffe9}

/* footer */
.footer{padding-bottom:80px}
.copyright{color:var(--muted);margin-top:20px}

/* Section titles with index */
.section-title{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px 0;
}
.section-title::before{
  content: attr(data-index) ".";
  font-family: JetBrains Mono, monospace;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-weight:700;
}

/* Title without numbering for finale */
.section-title.no-index::before{ content: none !important }

/* Fixed side rails (desktop only) */
.side-rail{
  position:fixed; bottom:0; z-index:5; opacity:.9;
}
.side-rail.left{ left:22px; }
.side-rail.right{ right:22px; }
.side-rail.left ul{ list-style:none; padding:0; margin:0 0 22px 0; display:flex; flex-direction:column; gap:var(--rail-gap); align-items:center;}
.side-rail a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:rgba(255,255,255,0.02); color:var(--muted); text-decoration:none; font-weight:800; font-size:12px;
  transition:color .2s ease, transform .2s ease, background .2s ease;
}
.side-rail a:hover{ color:#022; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:translateY(-2px) }
.side-rail.right .email{
  writing-mode: vertical-rl; text-orientation: mixed; letter-spacing:.08em;
  padding:12px 6px; border-radius:10px; background:rgba(255,255,255,0.02); color:var(--muted);
}
.side-rail a svg{
  width:18px; height:18px; display:block; /* use currentColor from link */
}

/* Accessible text helper for icons */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Active nav link while scrolling */
.primary-nav a.active{ color:var(--accent); text-decoration:underline; text-underline-offset:8px }

/* Post tags + hero polish */
.tag{display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.04); color:var(--accent); font-weight:700; font-size:12px}
.post-hero img{border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.03)}

/* Reading progress (post pages) */
.reading-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:100; box-shadow:0 0 12px rgba(0,255,179,0.3);
}

/* Card hover polish */
.post-card, .project-card{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-card:hover, .project-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));
}

/* Smooth scrolling + light snap */
html{ scroll-behavior:smooth }
main{ scroll-snap-type:y proximity }
.panel,.hero,.footer{ scroll-snap-align:start; scroll-margin:64px }

/* Section transition glow */
.panel, .hero { position:relative }
.panel::before, .hero::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,255,179,.35), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
}
.revealed.panel::before, .revealed.hero::before{ transform:scaleX(1) }

/* Cyber hover polish */
.btn{ transition: transform .15s ease, filter .2s ease, box-shadow .2s ease }
.btn.primary:hover{ transform: translateY(-1px); filter: saturate(120%); box-shadow: 0 8px 30px rgba(0,255,179,.18) }
.btn.ghost:hover{ border-color: rgba(255,255,255,.18) }

.primary-nav a{ position:relative }
.primary-nav a::after{
  content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s ease;
}
.primary-nav a:hover::after, .primary-nav a.active::after{ width:100% }

/* Project image scan effect */
.project-thumb{ overflow:hidden }
.project-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,255,179,0) 30%, rgba(0,255,179,.22) 45%, rgba(0,255,179,0) 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none; mix-blend-mode:screen;
}
.project-card:hover .project-thumb::after{ transform: translateX(120%) }

/* Collapsible experience */
.experience-item.collapsible{ border:1px solid rgba(255,255,255,.04); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); box-shadow: var(--shadow) }
.exp-toggle{
  width:100%; display:grid; grid-template-columns:64px 1fr auto 20px; gap:12px; align-items:center;
  padding:12px; background:transparent; border:0; color:inherit; text-align:left; cursor:pointer;
}
.exp-toggle .logo-wrap img{ width:48px; height:48px; border-radius:10px; background:var(--glass); padding:6px }
.exp-toggle .exp-head{ display:flex; flex-direction:column }
.exp-toggle .chev{ transition: transform .2s ease; color:var(--muted) }
.exp-toggle[aria-expanded="true"] .chev{ transform: rotate(90deg) }

.exp-panel{
  overflow:hidden; padding:0 16px 12px 92px; /* indent under header */
  --h: 0px; max-height: var(--h); transition: max-height .35s ease, clip-path .35s ease;
  clip-path: inset(0 round 12px);
  border-top:1px dashed rgba(0,255,179,.15);
}
.exp-panel.open{ max-height: 420px } /* large enough to fit content */
.points{ margin:12px 0; color:var(--muted) }
.points li{ margin:6px 0 }

/* Intro gate (landing animation) */
.intro-gate{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(0,255,179,.08), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(109,247,231,.06), transparent 50%),
    linear-gradient(180deg, #02070b, #04131a);
}
.intro-gate.hidden{ opacity:0; pointer-events:none; transition: opacity .6s ease }
.intro-inner{
  width:min(820px, 92vw); border-radius:16px; background:rgba(2,14,18,.75);
  border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.intro-header{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02) }
.intro-header .dot{ width:10px; height:10px; border-radius:50% }
.intro-header .green{ background:#00ffb3 } .intro-header .yellow{ background:#ffd15c } .intro-header .red{ background:#ff6b6b }
.title{ margin-left:auto; font-weight:700; color:var(--muted) }

.intro-lines{
  margin:0; padding:18px; min-height:220px; max-height:46vh; overflow:hidden; color:#bfffe9;
  line-height:1.45; font-size:14px;
}
.intro-lines .dim{ color:#7ab3a6 }
.intro-lines .ok{ color:#00ffb3 }
.intro-lines .warn{ color:#ffd15c }
.intro-lines .err{ color:#ff6b6b }

.intro-progress{ height:3px; background:rgba(255,255,255,.06) }
.intro-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(0,255,156,.3) }

.intro-actions{ display:flex; justify-content:flex-end; padding:10px 12px }

.intro-scan{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.18;
  background:linear-gradient(transparent 96%, rgba(0,0,0,.35) 96%), linear-gradient(180deg, rgba(0,255,179,.08), transparent 35%);
  animation: scan 6s linear infinite;
}
@keyframes scan { 0%{ transform: translateY(-100%) } 100%{ transform: translateY(100%) } }

/* Terminal-style text */
.mono{ font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }

/* Respect reduced motion for intro */
@media (prefers-reduced-motion: reduce){
  .intro-scan{ animation:none }
}

/* Small tweaks */
.link{ position:relative; color:var(--accent) }
.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s ease;
}
.link:hover::after{ width:100% }

/* Responsive fix for collapsible layout */
@media (max-width:980px){
  .exp-toggle{ grid-template-columns:48px 1fr auto 16px; padding:10px }
  .exp-panel{ padding:0 12px 12px 72px }
}

/* Landing hero */
.landing-hero{ padding-top:28px }
.landing-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center }
.landing-left .catchy{ margin:4px 0 10px 0; font-size:40px; line-height:1.1 }
.term{
  border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
}
.term-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(255,255,255,.02); border-bottom:1px solid rgba(255,255,255,.06) }
.term-head .dot{ width:10px; height:10px; border-radius:50% } .term-head .g{background:#00ff9c}.term-head .y{background:#ffd15c}.term-head .r{background:#ff6b6b}
.term-head .path{ margin-left:auto; color:var(--muted); font-weight:700 }
.term-body{
  margin:0; padding:14px 16px; min-height:160px; max-height:38vh; overflow:auto;
  color:#bfffe9; white-space:pre-wrap;
}
.term-progress{ height:3px; background:rgba(255,255,255,.06) }
.term-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(0,255,156,.3)
}

/* Scroll cue */
.scroll-cue{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px;
  opacity:0; transform:translateY(6px);
  background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer
}
.scroll-cue .dots{ display:inline-flex; gap:6px }
.scroll-cue .dots i{
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.45; animation:pulse 1.8s infinite
}
.scroll-cue .dots i:nth-child(2){ animation-delay:.25s } .scroll-cue .dots i:nth-child(3){ animation-delay:.5s }
@keyframes pulse{ 0%,100%{opacity:.15} 50%{opacity:.9} }
.scroll-cue.show{ opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease }

/* Landing decor */
.landing-art{ position:relative; justify-self:end }
.net-grid{ position:absolute; inset:-8% -8% auto auto; width:110%; height:110%; opacity:.22 }
.scanline{
  position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background:linear-gradient(transparent 96%, rgba(0,0,0,.35) 96%), linear-gradient(180deg, rgba(0,255,156,.08), transparent 35%);
  mix-blend-mode:screen; animation: scan 6s linear infinite;
}
@keyframes scan{ 0%{ transform: translateY(-100%) } 100%{ transform: translateY(100%) } }
.glow{ filter: drop-shadow(0 0 30px rgba(0,255,156,.22)) }

/* Cipher rings (subtle) */
.cipher-rings{ position:absolute; inset: -10% -10% auto auto; width: 120%; height: 120%; pointer-events:none }
.cipher-rings i{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(0,255,156,.12);
  animation: spin 24s linear infinite;
}
.cipher-rings i:nth-child(2){ inset:6%; border-color: rgba(90,216,255,.12); animation-duration: 36s }
.cipher-rings i:nth-child(3){ inset:12%; border-color: rgba(0,255,156,.08); animation-duration: 48s; animation-direction: reverse }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Section snap + transition cues */
html{ scroll-behavior: smooth }
main{ scroll-snap-type: y mandatory }
.panel,.hero,.footer{ scroll-snap-align: start; scroll-margin: 64px }
.panel,.hero{ position:relative }
.panel::before,.hero::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,255,156,.35), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
}
.revealed.panel::before,.revealed.hero::before{ transform:scaleX(1) }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scanline, .cipher-rings i{ animation: none }
  main{ scroll-snap-type: y proximity }
}

/* Responsive landing layout */
@media (max-width: 980px){
  .landing-hero{ grid-template-columns: 1fr; }
  .security-orb{ width:min(340px, 70vw); }
}

/* Hide legacy portrait in landing if still present */
.landing-art img.portrait{ display:none }

/* Personalized “Ray” security orb */
.security-orb{
  position:relative; width:min(520px, 42vw); aspect-ratio:1/1;
  border-radius:50%; filter: drop-shadow(0 16px 60px rgba(0,0,0,.5));
  isolation:isolate;
}
.security-orb .orb-glow{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(0,255,156,.25), rgba(0,255,156,.06) 60%, transparent 61%),
    radial-gradient(circle at 70% 30%, rgba(90,216,255,.25), transparent 50%);
  box-shadow: inset 0 0 60px rgba(0,255,156,.15), inset 0 0 120px rgba(90,216,255,.12);
}
.security-orb .orb-grid{
  position:absolute; inset:8% 8%; width:84%; height:84%;
  filter: drop-shadow(0 0 16px rgba(0,255,156,.15));
}

/* Radar sweep using conic-gradient */
.security-orb .radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(0,255,156,.35), rgba(0,255,156,0) 45% 100%);
  mix-blend-mode:screen; opacity:.45;
  animation: sweep 6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg) } }

/* Sigil (R + rotating dashed ring) */
.security-orb .sigil{ position:absolute; inset:0; }
.sigil-r{
  font: 800 60px/1 "JetBrains Mono", ui-monospace, monospace;
  fill: url(#sigG);
  filter: drop-shadow(0 0 10px rgba(0,255,156,.25));
  letter-spacing:.02em;
}
.security-orb .ring{
  animation: ringSpin 14s linear infinite;
  opacity:.9;
}
@keyframes ringSpin { to{ transform: rotate(360deg) } }

/* Slight parallax on hover */
.security-orb:hover .orb-grid{ transform: translateY(-1px) }
.security-orb:hover .sigil{ transform: translateY(-1px) }

/* Keep landing layout intact */
.landing-art{ justify-self:end }
@media (max-width:980px){
  .landing-art{ justify-self:center }
  .security-orb{ width:min(440px, 80vw) }
}

/* ---- Welcome Gate (new) ---- */
.welcome{
  margin-top:12px; display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
}
.welcome .badge{
  align-self:flex-start; padding:3px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#022; font-weight:800; font-size:12px; letter-spacing:.06em;
  box-shadow:0 0 12px rgba(0,255,156,.25);
}
.welcome .hello{ font-size:18px; font-weight:700 }
.welcome .context{ color:var(--muted) }
.welcome.show{ opacity:1; transform:none }

/* Safety net: if JS fails, never show the overlay (even if it accidentally returns) */
/* Keep this even though we removed the overlay, it prevents future lock-ups */
.no-js #intro-gate{ display:none !important; }

/* Make the terminal visually dominant and the globe smaller */
.landing-hero{ grid-template-columns: 1.25fr .75fr; }          /* more space for terminal */
.landing-left .term{ max-width: 680px; }                       /* keep terminal wide */
.security-orb{ width: min(360px, 32vw); }                      /* smaller globe */
.security-orb .orb-grid{ inset:10% 10%; width:80%; height:80%; } /* keep proportions */
@media (max-width:980px){
  .landing-hero{ grid-template-columns: 1fr; }
  .security-orb{ width:min(340px, 70vw); }
}

/* About Me section (mint-accent, two-column, offset frame) */
.about-section{ padding: clamp(64px, 8vw, 96px) 0 }
.about-inner{ width: min(var(--container,1100px), 92vw); margin: 0 auto }

.about-heading{
  display:flex; align-items:center; gap:14px; margin:0 0 28px;
}
.about-heading .index{ color: var(--accent); font-weight:800 }
.about-heading .text{ font-size: clamp(22px, 3vw, 28px); font-weight:800 }
.about-heading .rule{ height:1px; flex:1; background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0)) }

.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:start;
}
.about-text .lead{ font-size:18px; line-height:1.65; color:var(--text); margin:0 0 14px }
.about-text p{ line-height:1.65; color:var(--muted); margin:0 0 14px }
.about-text p.subtle{ font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:12px; color:var(--accent); margin-top:4px }

.core-list{
  list-style:none; padding:0; margin:6px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px 30px;
  font-size:14px;
}
.core-list li{
  position:relative; padding-left:18px; line-height:1.5; color:var(--muted);
}
.core-list li::before{
  content:"▸"; position:absolute; left:0;
}

/* Offset, tinted photo frame */
.about-photo{ justify-self:center }
.photo-frame{ position:relative; width:min(380px, 42vw); border-radius:12px }
.photo-frame img{
  display:block; width:100%; height:auto; border-radius:12px;
  filter: grayscale(100%) contrast(105%) brightness(90%);
}
.photo-frame::before{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,255,156,.28), rgba(0,255,156,.06));
  mix-blend-mode:screen; pointer-events:none;
}
.photo-frame::after{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border-radius:14px; border:2px solid rgba(0,255,156,.35); z-index:-1;
  transition: transform .25s ease;
}
.photo-frame:hover::after{ transform: translate(6px, 6px) }

/* Education */
.edu-section{ padding: clamp(44px, 6vw, 64px) 0 }
.edu-list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}
.edu-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:16px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  --edu-card: 1; /* linter pacifier */
}

.edu-head{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.edu-head .degree{ font-size:16px }
.edu-head .school{ color:var(--muted); margin-left:auto; display:inline-flex; align-items:center }
.edu-head .timeframe{ margin-left:10px; color:var(--muted) }

.edu-card .points{
  margin:10px 0 0; padding-left:20px; list-style: disc;
}
.edu-card .points li{ margin:6px 0; color:var(--muted) }
.edu-card .points li::marker{ color:var(--accent) }

@media (max-width: 900px){
  .edu-list{ grid-template-columns: 1fr }
}

/* Education subfield value block (pairs with .edu-subtitle) */
.edu-value{
  margin:6px 0 10px;
  color: var(--text);
  background: rgba(0,255,156,.05);
  border-left: 3px solid var(--accent);
  padding:8px 12px;
  border-radius:8px;
}

/* Education sub-sections */
.edu-subtitle{
  margin:14px 0 6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent); font-weight:800;
}
.edu-card .capstone{
  margin:6px 0 10px; color: var(--text);
  background: rgba(0,255,156,.05); border-left: 3px solid var(--accent);
  padding:8px 12px; border-radius:8px;
}
.points.compact li{ margin:4px 0; }

/* Tags for education */
.edu-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.edu-tags span{
  background: rgba(0,255,156,.08); color: var(--accent);
  font-size:12px; padding:3px 8px; border-radius:6px;
}

/* Education — timeline layout */
.edu-timeline{
  position: relative;
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 20px;
}
.edu-timeline::before{
  content:""; position:absolute; left:42px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(180deg, rgba(0,255,156,.35), rgba(0,255,156,.08));
  border-radius: 2px;
}
.edu-item{
  display:grid; grid-template-columns: 110px 1fr; gap:16px; align-items:start;
}
.edu-marker{
  position:relative; display:flex; align-items:center; gap:10px; padding-left:16px;
}
.edu-marker .dot{
  width:12px; height:12px; border-radius:50%;
  background: rgba(0,255,156,.18);
  border:2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(0,255,156,.08);
}
.edu-marker .year{ color: var(--text); font-weight:700; box-shadow: 0 6px 16px rgba(0,0,0,.25) }
.edu-card{ /* reuses your existing card styles */
  --edu-card: 1; /* linter pacifier */
}

/* Responsive */
@media (max-width: 720px){
  .edu-timeline::after{ left:20px }
  .edu-item{ grid-template-columns: 1fr; }
  .edu-marker{ order:-1; margin-bottom: -6px; padding-left:0 }
}

/* Experience — vertical tabs */
.exp-section{ padding: clamp(44px, 6vw, 64px) 0 }
.exp-section .section-title{ margin-bottom: 24px }
.exp-grid{ 
  display: grid; 
  grid-template-columns: 280px 1fr; 
  gap: 24px; 
  align-items: start;
  max-width: var(--container, 1100px);
  margin: 0 auto;
}

.exp-nav{ 
  display: flex; 
  flex-direction: column; 
  gap: 12px;
}
.exp-tab{
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 16px; 
  border-radius: 8px; 
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text); 
  cursor: pointer; 
  text-align: left;
  transition: all 0.2s ease;
  font-weight: 700;
  position: relative;
}
.exp-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 4px 0 0 4px;
  transition: background 0.2s ease;
}
.exp-tab[aria-selected="true"]::before {
  background: var(--accent);
}
.exp-tab .dates{ 
  color: var(--muted); 
  font-size: 13px;
  font-weight: 500;
}
.exp-tab[aria-selected="true"]{
  border-color: rgba(0,255,156,.4);
  box-shadow: 0 0 0 2px rgba(0,255,156,.12) inset, 0 8px 30px rgba(0,0,0,.3);
  background: linear-gradient(180deg, rgba(0,255,156,.05), rgba(0,255,156,.02));
}

/* Panels container - critical fix for layout */
.exp-panels{ 
  position: relative; 
  width: 100%;
  min-height: 200px;
}

.exp-panel {
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  background: rgba(0,0,0,.1);
  position: relative;
  overflow: hidden;
}
.exp-panel[hidden]{ display: none !important; }

/* Scan animation fix */
.exp-panel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, 
    rgba(0,255,156,0) 30%, 
    rgba(0,255,156,.18) 50%, 
    rgba(0,255,156,0) 70%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.exp-panel.animating::after{
  opacity: 1;
  animation: panelScan 0.6s ease-out forwards;
}
@keyframes panelScan { to{ transform: translateX(100%) } }

.exp-headline{ 
  display: flex; 
  gap: 8px; 
  align-items: baseline; 
  flex-wrap: wrap; 
  margin-bottom: 12px;
}
.exp-headline strong{ font-size: 18px }
.exp-headline .muted{ color: var(--muted) }
.exp-headline .timeframe{ margin-left: auto }

.points{ 
  margin: 16px 0; 
  padding-left: 20px;
}
.points li{ 
  margin: 8px 0;
  color: var(--muted);
  position: relative;
}
.points li::marker{ 
  color: var(--accent);
}

.exp-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.exp-tags span{
  background: rgba(0,255,156,.08);
  color: var(--accent);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 4px;
}

/* Fix responsive layout */
@media (max-width: 900px){
  .exp-grid{ 
    grid-template-columns: 1fr; 
    gap: 16px;
  }
  .exp-nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .exp-tab{
    flex: 1 1 40%;
    min-width: 150px;
  }
}

/* Fix: unclip panels in the new tabbed Experience section */
.exp-section .exp-panel{
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  padding: 20px !important;
  border-top: 0 !important;
}

/* Ensure points render clearly */
.exp-section .points{
  margin: 14px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.exp-section .points li{
  margin: 8px 0;
  color: var(--muted);
}

/* Resume CTA – make it pop */
.cta.resume{
  --glow: rgba(0,255,156,.35);
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-radius:10px;
  color:#021a16;
  background: linear-gradient(180deg,#00ffb3,#7ef7de);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow:
    0 8px 24px rgba(0,255,156,.15),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.cta.resume:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 40px rgba(0,255,156,.25),
    0 0 0 6px var(--glow);
  filter: saturate(1.1);
}
.cta.resume:active{ transform: translateY(0); filter: saturate(1) }
.cta.resume:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #021a16, 0 0 0 6px var(--glow);
}

/* Projects – reveal more */
.project-card[hidden]{ display:none }
.projects-actions{ display:flex; justify-content:center; margin-top:16px }
.more-projects{
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,255,156,.35);
  padding:10px 14px; border-radius:10px;
  font-weight:700; letter-spacing:.02em;
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.more-projects:hover{
  background: rgba(0,255,156,.06);
  box-shadow: 0 8px 28px rgba(0,255,156,.18);
  transform: translateY(-1px);
}
.more-projects:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(0,255,156,.4);
}

/* Resume = same visual as .more-projects */
.resume-cta::before{ content:none !important; } /* override older neon outline */

/* Base */
.more-projects,
.resume-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,255,156,.35);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}

/* Hover pop-out */
.more-projects:hover,
.resume-cta:hover{
  background: rgba(0,255,156,.06);
  box-shadow: 0 8px 28px rgba(0,255,156,.18);
  transform: translateY(-1px);
}

/* Focus ring */
.more-projects:focus-visible,
.resume-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,255,156,.4);
}

/* Nice fade/slide when extras appear */
.projects-grid .extra.reveal{
  animation: projReveal .32s ease-out both;
}
@keyframes projReveal{
  from{ opacity:0; transform: translateY(8px) }
  to{ opacity:1; transform: translateY(0) }
}

/* Leadership — compact grid cards with gradient outline */
.lead-section{ 
  padding-top: clamp(44px, 6vw, 64px);
  padding-bottom: clamp(30px, 4vw, 50px);
}
.lead-controls{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px }
.lead-chip{
  background: transparent; color: var(--accent); border:1px solid rgba(0,255,156,.35);
  padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}
.lead-chip:hover{ background: rgba(0,255,156,.06); transform: translateY(-1px) }
.lead-chip.is-active{ background: rgba(0,255,156,.10); box-shadow: 0 6px 18px rgba(0,255,156,.16) }

/* New leadership design with modern cards */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0 28px;
}

.leadership-card {
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 24px 28px;
}

.leadership-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(180deg, rgba(0,255,156,.75), rgba(126,247,222,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
}

.leadership-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0,255,156,0) 30%, rgba(0,255,156,.18) 50%, rgba(0,255,156,0) 70%);
  transform: translateX(-120%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.leadership-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,255,156,.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.leadership-card:hover::before {
  opacity: 1;
  transform: translateX(120%);
  transition: transform 0.6s ease;
}

.leadership-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-main);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.leadership-org {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.leadership-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}

.leadership-date {
  font-size: 13px;
  color: var(--muted);
}

.leadership-badge {
  background: rgba(0, 255, 156, 0.1);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Leadership heading spacing and readability */
.lead-section .section-title{
  display:block;
  margin-bottom: 16px;
  line-height: 1.15;
  white-space: normal;
}

/* Leadership — collapsed = header only (clean summary) */
.lead-card.is-collapsed .lead-body{ display:none }                /* remove details space entirely */
.lead-card.is-collapsed .timeframe,
.lead-card.is-collapsed .lead-badge{ display:none }               /* hide meta in summary */
.lead-card.is-collapsed .lead-head{
  grid-template-columns: 1fr 28px;                                 /* title | toggle */
  padding-right: 4px;
}

/* Header layout polish */
.lead-head{ grid-template-columns: 1fr auto auto 28px }            /* expanded: title | timeframe | badge | toggle */
.lead-title{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; min-width:0 }
.lead-title .role{ font-size: clamp(16px, 1.7vw, 18px); line-height:1.25; white-space:normal }
.lead-title .org{ color: var(--muted) }

/* Make the toggle live at the far right */
.lead-toggle{ justify-self:end }

/* Replace +/- with a chevron that rotates */
.lead-toggle{
  width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer; position:relative; display:grid; place-items:center;
  transition: transform .15s ease, background .2s ease;
}

/* remove old plus bars */
.lead-toggle::after{ content:none !important; }
.lead-toggle::before{
  content:""; width:12px; height:12px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform: rotate(45deg);                 /* chevron-down */
  transition: transform .2s ease;
}

/* Expanded = chevron-up */
.lead-card:not(.is-collapsed) .lead-toggle::before{
  transform: rotate(-135deg);
}

.lead-toggle:hover{ background: rgba(0,255,156,.08); transform: translateY(-1px) }
.lead-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(0,255,156,.4) }

/* Connect (finale) */
.connect-section{ padding: clamp(64px, 8vw, 96px) 0 }
.connect-wrap{ max-width: 860px; margin: 0 auto; text-align: center }
.connect-card{ position:relative; margin-top:10px; padding: clamp(22px,4vw,34px); border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); box-shadow: 0 18px 60px rgba(0,0,0,.45); overflow:hidden;
}
.connect-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.5px;
  background: linear-gradient(90deg, rgba(0,255,156,.6), rgba(90,216,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.45;
}
.connect-ornaments{ position:absolute; inset:0; pointer-events:none }
.connect-ornaments .orn{ position:absolute; color: var(--accent); filter: drop-shadow(0 8px 20px rgba(0,255,156,.15)); }
.connect-ornaments .o-shield{ top:-10px; left:-6px; width:92px; opacity:.12 }
.connect-ornaments .o-lock{ bottom:-8px; right:10px; width:84px; opacity:.10 }
.connect-ornaments .o-radar{ top:10px; right:-6px; width:80px; opacity:.10 }

.connect-lead{ color: var(--muted); margin: 0 0 16px; font-size: clamp(16px,1.6vw,18px) }
.connect-ctas{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:6px }

/* Socials */
.connect-social{ list-style:none; padding:0; margin:16px 0 0; display:flex; gap:12px; justify-content:center }
.connect-social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  color: var(--accent); border:1px solid rgba(0,255,156,.35); background: rgba(0,255,156,.04);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.connect-social a:hover{ transform: translateY(-2px); background: rgba(0,255,156,.08); box-shadow: 0 10px 28px rgba(0,255,156,.18) }
.connect-social svg{ width:20px; height:20px }

/* Footer */
.footer-bottom{ margin: 24px 0 40px; text-align:center; color: var(--muted) }
.footer-bottom .heart{
  display:inline-block;
  margin-left:6px;
  font-size:1.1em;
  color:#ff4d4d; /* ensure red heart */
  transform-origin:center;
  animation:heartBeat 2.2s ease-in-out infinite;
}
@keyframes heartBeat{
  0%,20%,100%{ transform: scale(1) }
  10%{ transform: scale(1.18) }
}

/* Leadership card animations */
.leadership-card.reveal {
  animation: fadeInUp 0.5s ease forwards;
}

.leadership-card.extra {
  opacity: 0;
  transform: translateY(20px);
}

.leadership-card.extra.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Lead actions styling */
.lead-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.lead-actions button {
  border: 1px solid rgba(0,255,156,.35);
  background: rgba(0,255,156,.04);
  padding: 10px 20px;
  border-radius: 500px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}

.lead-actions button:hover {
  background: rgba(0,255,156,.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,255,156,.15);
}

@keyframes fadeInUp {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blog — cohesive with site */
.blog-section{ padding: clamp(44px,6vw,64px) 0 }
.blog-tagline{ color: var(--muted); margin: 4px 0 14px }

/* Controls */
.blog-controls{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom: 16px }
.search-wrap{ position:relative; display:flex; align-items:center }
.blog-search{
  width: min(320px, 70vw);
  padding:10px 34px 10px 36px;
  border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02); color: var(--text);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-search:focus{
  border-color: rgba(0,255,156,.35);
  box-shadow: 0 8px 28px rgba(0,255,156,.18);
}
.search-ico{ position:absolute; left:10px; width:18px; height:18px; color: var(--muted) }
.hint{
  position:absolute; right:8px; padding:2px 6px; border-radius:6px;
  border:1px solid rgba(255,255,255,.12); color:var(--muted); font: 700 11px/1 JetBrains Mono, monospace;
  background: rgba(255,255,255,.02);
}

/* Chips (reuse leadership vibe) */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  background: transparent; color: var(--accent); border:1px solid rgba(0,255,156,.35);
  padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}
.chip:hover{ background: rgba(0,255,156,.06); transform: translateY(-1px) }
.chip.is-active{ background: rgba(0,255,156,.10); box-shadow: 0 6px 18px rgba(0,255,156,.16) }

/* Grid + cards */
.blog-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px }
@media (max-width: 820px){ .blog-grid{ grid-template-columns: 1fr } }

.post-card{
  position:relative; padding:16px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  overflow:hidden;
}
.post-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.2px;
  background: linear-gradient(180deg, rgba(0,255,156,.75), rgba(126,247,222,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.post-card:hover{ transform: translateY(-2px); border-color: rgba(0,255,156,.35); box-shadow: 0 12px 32px rgba(0,0,0,.28) }
.post-card .post-head{ display:flex; align-items:start; gap:10px; justify-content:space-between; flex-wrap:wrap }
.post-title{ font-weight:800; color:var(--text); text-decoration:none }
.post-title:hover{ color: var(--accent) }
.post-excerpt{ color: var(--muted); margin:8px 0 0 }
.post-meta{ display:flex; gap:8px; align-items:center }
.pill{
  background: rgba(255,255,255,.04); color: var(--muted);
  border:1px solid rgba(255,255,255,.08); padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px;
}
.post-tags{ list-style:none; padding:0; margin:10px 0 0; display:flex; gap:8px; flex-wrap:wrap }
.post-tags li{
  background: rgba(0,255,156,.08); color: var(--accent);
  font-size:12px; padding:3px 8px; border-radius:6px;
}

/* Empty state */
.no-results{ color: var(--muted); margin-top: 12px }

/* Scanline hover (subtle) */
.post-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,255,156,0) 30%, rgba(0,255,179,.18) 50%, rgba(0,255,179,0) 70%);
  transform: translateX(-120%); opacity:0; mix-blend-mode:screen; pointer-events:none;
}
.post-card:hover::before{ opacity:1; transform: translateX(120%); transition: transform .6s ease }

/* Strengths Mosaic (replaces .core-tiles) */
.strengths-grid{
  --gap:14px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  margin:18px 0 0;
  padding:0;
  list-style:none;
  max-width:640px; /* lock width so photo stays put */
}
.strength{
  position:relative;
  padding:18px 16px 16px 16px;
  border-radius:18px;
  background:
    radial-gradient(160% 120% at -10% -20%, rgba(0,255,156,.18), rgba(0,255,156,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:6px;
  isolation:isolate;
  transition:transform .25s cubic-bezier(.4,.25,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.strength::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(0,255,156,0) 35%, rgba(0,255,156,.22) 50%, rgba(0,255,156,0) 65%);
  transform:translateX(-120%);
  mix-blend-mode:screen;
  transition:transform .8s ease;
}
.strength::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:16px;
  background:
    radial-gradient(90% 75% at 110% 120%, rgba(90,216,255,.12), transparent 70%);
  opacity:.7;
  pointer-events:none;
}
.strength:hover{
  transform:translateY(-4px);
  border-color:rgba(0,255,156,.35);
  box-shadow:0 14px 42px -6px rgba(0,0,0,.55);
}
.strength:hover::before{ transform:translateX(120%) }

.strength h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.25px;
  color:var(--text);
}
.strength p{
  margin:0;
  font-size:13.2px;
  line-height:1.45;
  color:var(--muted);
}

/* Icon pill */
.str-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  color:var(--accent);
  box-shadow:0 6px 20px -4px rgba(0,0,0,.5);
  position:relative;
}
.str-icon::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px), #000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px), #000 0);
  animation:core-spin 8s linear infinite;
  opacity:.35;
}
.str-icon svg{ width:22px; height:22px; display:block }

/* Mosaic spans (desktop ≥ 900px) */
.sg-1{ grid-column: span 7 }
.sg-2{ grid-column: span 5 }
.sg-3{ grid-column: span 5 }
.sg-4{ grid-column: span 7 }
.sg-5{ grid-column: span 6 }
.sg-6{ grid-column: span 6 }

/* Medium: 2 columns (maintain rhythm) */
@media (max-width: 900px){
  .strengths-grid{ grid-template-columns:repeat(6,1fr) }
  .strength{ grid-column: span 3 }
}

/* Small: single column */
@media (max-width: 560px){
  .strengths-grid{ grid-template-columns:1fr }
  .strength{ grid-column:auto }
}

/* Remove old core tiles if present */
.core-tiles{ display:none !important }

/* Compact Strength Chips */
.strengths-grid{display:none !important} /* legacy removal */

.strength-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:14px 0 8px;
  max-width:640px;
  position:relative;
}

.strength-chip{
  --pad-x:14px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px var(--pad-x);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  cursor:default;
  isolation:isolate;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
  backdrop-filter: blur(4px);
}
.strength-chip:focus-visible,
.strength-chip:hover{
  border-color:rgba(0,255,156,.4);
  box-shadow:0 6px 22px -6px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,255,156,.08),rgba(0,255,156,.03));
  transform:translateY(-2px);
}
.strength-chip .ico{
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--accent); position:relative;
}
.strength-chip .ico::after{
  content:""; position:absolute; inset:-2px; border-radius:12px;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  animation:core-spin 9s linear infinite; opacity:.32;
}
.strength-chip svg{ width:16px; height:16px; display:block }

/* Popline */
.strength-popline{
  position:relative;
  max-width:640px;
  min-height:44px;
  padding:10px 14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(120% 140% at 0% 0%, rgba(0,255,156,.12), transparent 70%);
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
.strength-popline::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(0,255,156,0) 35%, rgba(0,255,156,.25) 50%, rgba(0,255,156,0) 65%);
  transform:translateX(-120%);
  opacity:.6;
  mix-blend-mode:screen;
  pointer-events:none;
}
.strength-popline.show::before{
  animation: popscan 2.8s ease-out forwards;
}
@keyframes popscan{
  0%{ transform:translateX(-120%) }
  55%{ transform:translateX(0) }
  100%{ transform:translateX(120%) }
}
.strength-popline .hint{ opacity:.6 }

/* Fade-in text change (optional) */
.strength-popline span,
.strength-popline strong{
  animation: popfade .35s ease;
}
@keyframes popfade{
  from{ opacity:0; transform:translateY(4px) }
  to{ opacity:1; transform:translateY(0) }
}

/* Compact on narrow screens */
@media (max-width:600px){
  .strength-chip{ --pad-x:12px; font-size:13px }
  .strength-popline{ font-size:13px; }
}

/* About typing effect (geeky, minimal) */
.about-text .type-line{
  position: relative;
  font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .01em;
  padding-left: 18px;
}
.about-text .type-line::before{
  content: "›";
  position: absolute;
  left: 0; top: .15em;
  color: var(--accent);
  opacity: .9;
}
.about-text .type-line .caret{
  display:inline-block;
  width:8px; height:1.05em;
  background: rgba(0,255,156,.75);
  margin-left:2px;
  vertical-align:-.2em;
  animation: caret-blink 1s steps(1,end) infinite;
}
@keyframes caret-blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:.15} }

/* Defer-reveal targets (chips + popline) */
.about-text .is-waiting{ opacity:0; transform: translateY(6px); pointer-events:none }
.about-text .is-revealed{ opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease }
.about-text .type-line.pending::before{ opacity:0 }
.about-text .type-line:empty::before{ opacity:0 }

/* --- Experience: creative summary card --- */
.exp-panel .exp-summary{
  position: relative;
  display: block;
  margin: 8px 0 12px;
  padding: 14px 16px 14px 20px;
  color: var(--muted);
  line-height: 1.65;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,255,156,.10);
  overflow: hidden;
}
/* Accent rail on the left */
.exp-panel .exp-summary::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(0,255,156,.7), rgba(90,216,255,.55));
  box-shadow: 0 0 16px rgba(0,255,156,.25);
}
/* Gradient outline using mask */
.exp-panel .exp-summary::after{
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; padding: 1.2px;
  background: linear-gradient(180deg, rgba(0,255,156,.55), rgba(90,216,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .30;
}
/* Scan sweep on hover */
.exp-panel .exp-summary:hover{
  border-color: rgba(0,255,156,.28);
  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,255,156,.16);
}
.exp-panel .exp-summary:hover::before{ box-shadow: 0 0 22px rgba(0,255,156,.35) }
.exp-panel .exp-summary:hover{ background: linear-gradient(180deg, rgba(0,255,156,.03), rgba(255,255,255,.01)) }

/* Optional small header tag inside card (visual only) */
.exp-panel .exp-summary span.kicker{
  display: inline-block; margin-bottom: 6px;
  font: 700 11px/1 JetBrains Mono, monospace; letter-spacing: .08em; color: var(--accent);
  background: rgba(0,255,156,.06); border: 1px solid rgba(0,255,156,.28); padding: 3px 6px; border-radius: 6px;
}

/* Match exp-summary left rail color to company tab rail */
.exp-panel .exp-summary::before{ background: var(--accent) !important }

/* --- Experience panels: interactive hover polish --- */
.exp-panel{ transition: transform .18s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease }

/* Top accent glow bar (animates in on hover) */
.exp-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:12px 12px 0 0;
  background: linear-gradient(90deg, transparent, rgba(0,255,156,.35), transparent);
  transform: scaleX(0); transform-origin:left; transition: transform .35s ease;
  pointer-events:none;
}

@media (hover:hover){
  .exp-panel:hover{
    transform: translateY(-2px);
    border-color: rgba(0,255,156,.35);
    background: linear-gradient(180deg, rgba(0,255,156,.03), rgba(255,255,255,.01));
    box-shadow: 0 14px 38px rgba(0,0,0,.34);
  }
  .exp-panel:hover::before{ transform: scaleX(1) }
  /* Reuse the scan sweep animation on hover */
  .exp-panel:hover::after{ opacity:.8; animation: panelScan .7s ease-out forwards }
}

/* --- Research Experience: clean minimal lab card (refined) --- */
/* Card */
.res-card{
  /* keep base but soften shadow */
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
  border-radius:14px;
  padding:18px 18px 16px;
  transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
/* Replace older rails/spine/corner accents with a soft lab glow */
.res-card::before{
  content:""; position:absolute; right:-12%; top:-18%; width:320px; height:320px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,156,.12), rgba(90,216,255,.06) 45%, transparent 65%);
  filter: blur(10px); opacity:.45;
}
.res-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background: linear-gradient(120deg, rgba(0,255,156,0) 40%, rgba(0,255,156,.16) 50%, rgba(0,255,156,0) 60%);
  transform: translateX(-120%);
}
@media (hover:hover){
  .res-card:hover{ transform: translateY(-2px); border-color: rgba(0,255,156,.28); box-shadow: 0 14px 38px rgba(0,0,0,.34) }
  .res-card:hover::after{ opacity:1; transform: translateX(120%); transition: transform .8s ease }
}

/* Header */
.res-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px }
.res-icon{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center; color: var(--accent);
  background: rgba(0,255,156,.08); border:1px solid rgba(0,255,156,.28); position:relative }
.res-icon::after{ content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  opacity:.28; }
.res-title{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-weight:800 }
.res-title strong{ font-size: 17px; color: var(--text) }
.res-title .muted{ color: var(--muted); background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:2px 6px; border-radius:8px }
.res-head .timeframe{ margin-left:auto; color:var(--muted) }

/* Summary */
.res-summary{ margin:6px 0 0; color: var(--text); font-size: clamp(16px, 2vw, 18px); line-height:1.7 }

/* --- Research: normalize summary typography to theme --- */
.res-summary{
  /* Align with general paragraph size and tone */
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width: 600px){
  .res-summary{ font-size: 14px }
}
/* --- end normalization --- */

/* Metric pills */
.res-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.res-meta .pill{ background: rgba(255,255,255,.04); color: var(--muted); border:1px solid rgba(255,255,255,.10); padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px }

/* Disable shimmer sweep on Research cards */
.research-section .res-card::after{
  content: none !important; /* remove scan overlay entirely */
}
@media (hover:hover){
  .research-section .res-card:hover::after{
    content: none !important; /* ensure no animation on hover-capable devices */
  }
}

/* --- Research: flask bubble micro-anim (Option C) --- */
.research-section .res-icon svg circle{
  transform-box: fill-box;        /* ensure transforms are relative to each circle */
  transform-origin: center;       /* smooth bounce */
}
@keyframes bubbleFloat{ 
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-3px) }
}
@media (hover:hover){
  .research-section .res-card:hover .res-icon svg circle{
    animation: bubbleFloat 2.2s ease-in-out infinite;
  }
  .research-section .res-card:hover .res-icon svg circle:nth-of-type(2){
    animation-delay: .3s;
  }
}
/* --- end flask micro-anim --- */

/* --- Education polish: visibility/contrast tweaks --- */
/* Stronger spine glow so it reads on dark bg */
.edu-timeline::after{ width:10px; filter: blur(8px); opacity:.75 }

/* Let the connector notch render outside the card */
.edu-card{ overflow: visible }
.edu-card::before{ left:-10px; top:28px; width:18px; height:18px; border-radius:3px; }

/* Year pill clarity and hover accent */
.edu-marker .year{ color: var(--text); font-weight:700; box-shadow: 0 6px 16px rgba(0,0,0,.25) }
@media (hover:hover){
  .edu-item:hover .year{
    background: rgba(0,255,156,.08);
    border-color: rgba(0,255,156,.35);
  }
}
/* Mobile alignment for stronger glow */
@media (max-width: 720px){
  .edu-timeline::after{ left:18px }
}
/* --- end visibility tweaks --- */

/* --- Education: stronger, clearly visible styling overrides --- */
/* Section backdrop (very subtle vignette) */
.edu-section{ position: relative }
.edu-section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(0,255,156,.05), transparent 60%),
    radial-gradient(700px 360px at 100% 12%, rgba(90,216,255,.04), transparent 60%);
}

/* Bring timeline above backdrop */
.edu-timeline{ position: relative; z-index: 1 }

/* Thicker, brighter spine */
.edu-timeline::before{
  width:3px !important;
  background: linear-gradient(180deg, rgba(0,255,156,.6), rgba(90,216,255,.28)) !important;
  box-shadow: 0 0 18px rgba(0,255,156,.25);
}

/* Glow behind spine – keep visible */
.edu-timeline::after{ width:12px; filter: blur(10px); opacity:.8 }

/* Bigger milestone & clearer */
.edu-marker .dot{ width:14px; height:14px; box-shadow: 0 0 0 5px rgba(0,255,156,.10), 0 0 24px rgba(0,255,156,.28) }

/* Year pill: stronger base */
.edu-marker .year{
  background: rgba(0,255,156,.06);
  border-color: rgba(0,255,156,.28);
}

/* Card: stronger gradient outline */
.edu-card::after{ opacity:.5 }
.edu-head .degree{ font-size:18px }

/* Notch larger and brighter */
.edu-card::before{
  left:-12px; top:26px; width:20px; height:20px; border-left-color: rgba(0,255,156,.28); border-top-color: rgba(0,255,156,.28);
}

/* Mobile tune */
@media (max-width:720px){
  .edu-timeline::after{ left:16px }
}
/* --- end overrides --- */

/* --- Education: alternating (zig‑zag) timeline layout --- */
/* Center the spine */
.edu-section .edu-timeline{ position:relative; display:grid; gap:24px }
.edu-section .edu-timeline::before{
  left:50% !important; transform: translateX(-50%);
}
/* keep the spine glow centered */
.edu-section .edu-timeline::after{ left: calc(50% - 6px) }

/* Three-column grid per item: left | spine | right */
.edu-section .edu-item{
  display:grid; grid-template-columns: 1fr 70px 1fr; align-items:start; position:relative;
}
/* Marker sits on the spine */
.edu-section .edu-marker{ grid-column:2; justify-self:center; padding-left:0; display:grid; place-items:center; gap:6px }

/* Default (odd) cards on the left */
.edu-section .edu-card{ grid-column:1; justify-self:end; max-width:min(520px,92%); margin-right:10px }
/* Even cards on the right */
.edu-section .edu-item:nth-child(even) .edu-card{ grid-column:3; justify-self:start; margin-left:10px; margin-right:0 }

/* Flip the connector notch based on side */
.edu-section .edu-card::before{ right:-12px; left:auto; }
.edu-section .edu-item:nth-child(even) .edu-card::before{ left:-12px; right:auto }

/* Mobile: fall back to single-column timeline on the left */
@media (max-width: 720px){
  .edu-section .edu-item{ grid-template-columns: 110px 1fr }
  .edu-section .edu-marker{ grid-column:1; justify-self:start; display:flex; align-items:center; gap:10px; padding-left:16px }
  .edu-section .edu-card{ grid-column:2; justify-self:stretch; margin:0 }
  .edu-section .edu-item:nth-child(even) .edu-card{ grid-column:2 }
  .edu-section .edu-timeline::before{ left:42px !important; transform:none }
  .edu-section .edu-timeline::after{ left:18px }
}
/* --- end zig‑zag layout --- */

/* --- Education header: degree on first line; school + years on second line --- */
.edu-section .edu-head{
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "degree degree"
    "school timeframe";
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
}
.edu-section .edu-head .degree{ grid-area: degree; }
.edu-section .edu-head .school{ grid-area: school; margin-left: 0 !important; white-space: normal !important; }
.edu-section .edu-head .timeframe{ grid-area: timeframe; margin-left: 0 !important; justify-self: end; white-space: normal !important; }

/* Small screens: keep same structure; allow wrap if needed */
@media (max-width: 720px){
  .edu-section .edu-head{ row-gap: 4px }
}
/* --- end Education header layout --- */

/* --- Education program hover micro-animations --- */
/* Smooth transitions on key parts */
.edu-card{ transition: transform .28s cubic-bezier(.22,.9,.32,1), box-shadow .28s ease, border-color .28s ease, background .28s ease }
.edu-head .degree{ position:relative; transition: color .2s ease }
/* Animated underline for the degree */
.edu-head .degree{
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .35s ease;
}
/* Chip slide/glow */
.edu-value{ transition: transform .28s ease, box-shadow .28s ease, border-left-width .28s ease }
/* Notch pop */
.edu-card::before{ transition: transform .28s ease, box-shadow .28s ease }

@media (hover:hover){
  /* Subtle lift + side tilt */
  .edu-section .edu-item:nth-child(odd):hover .edu-card{
    transform: translateY(-3px) translateX(-2px) rotate(-0.35deg);
    box-shadow: 0 16px 36px rgba(0,0,0,.32);
  }
  .edu-section .edu-item:nth-child(even):hover .edu-card{
    transform: translateY(-3px) translateX(2px) rotate(0.35deg);
    box-shadow: 0 16px 36px rgba(0,0,0,.32);
  }
  /* Degree underline reveal */
  .edu-section .edu-item:hover .edu-head .degree{ background-size: 100% 2px }
  /* Chip nudge + glow */
  .edu-section .edu-item:hover .edu-value{
    transform: translateX(4px);
    border-left-width: 5px;
    box-shadow: 0 8px 22px rgba(0,255,156,.12);
  }
  /* Notch subtle pop */
  .edu-section .edu-item:hover .edu-card::before{
    transform: rotate(45deg) scale(1.08);
    box-shadow: -2px 2px 12px rgba(0,0,0,.36);
  }
}
/* --- end program hover animations --- */

/* --- Publications: disable animations --- */
/* Remove section reveal bar for Publications only */
#publications.panel::before{ content:none !important }
/* Kill transitions/animations inside the list */
.publications .pub-item, .publications .pub-item *{
  transition: none !important;
  animation: none !important;
}
/* Remove animated underline from links in Publications */
.publications .link::after{ content:none !important }
/* Ensure no hover transforms apply (safety) */
.publications .pub-item:hover{ transform:none !important; box-shadow:none !important }
/* --- end Publications animation overrides --- */

/* --- UI cleanup: hide bottom-right email rail --- */
.side-rail.right{ display: none !important }

/* --- Fix white flash when overscrolling top/bottom --- */
/* Ensure the viewport background matches the site bg behind body gradients */
html{ background-color: var(--bg) !important }
/* Reduce rubber-band overscroll where supported (Chrome/Edge/Firefox) */
html, body{ overscroll-behavior: none }
/* iOS/Safari still rubber-bands; background-color above prevents white flash */