/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}

/* ── Tokens — dark ─────────────────────────────────────── */
:root{
  --bg:    #0a0a0a;
  --bg2:   #0d0d0d;
  --card:  #141414;
  --card2: #1a1a1a;
  --ac:    #14b8a6;
  --acd:   rgba(20,184,166,.13);
  --acg:   linear-gradient(90deg,#0d9488,#14b8a6);
  --tx:    #f0f0f0;
  --txd:   rgba(240,240,240,.52);
  --txm:   rgba(240,240,240,.24);
  --rl:    rgba(240,240,240,.07);
  --nav:   rgba(10,10,10,.9);
  --shadow:0 6px 40px rgba(0,0,0,.5);
  --font-h:'Montserrat',sans-serif;
  --font-b:'Inter',sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);
  --gutter:2.75rem;          /* consistent horizontal gutter */
  --side:  56px;             /* side-nav width */
}
/* ── Tokens — light ────────────────────────────────────── */
:root[data-theme="light"]{
  --bg:    #f5f4f2;
  --bg2:   #eeede9;
  --card:  #ffffff;
  --card2: #f9f8f6;
  --ac:    #0d9488;
  --acd:   rgba(13,148,136,.1);
  --tx:    #111111;
  --txd:   rgba(17,17,17,.55);
  --txm:   rgba(17,17,17,.28);
  --rl:    rgba(17,17,17,.08);
  --nav:   rgba(245,244,242,.93);
  --shadow:0 4px 24px rgba(0,0,0,.1);
}
body{background:var(--bg);color:var(--tx)}

/* ── Side nav ──────────────────────────────────────────── */
#side-nav{
  position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;padding:1rem 0;
}
#side-nav::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--rl);transform:translateX(-50%);
}
.snav-item{
  position:relative;display:flex;align-items:center;
  width:100%;justify-content:center;
}
.snav-dot{
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--txm);background:transparent;
  transition:all .2s;cursor:pointer;position:relative;z-index:2;flex-shrink:0;
}
.snav-item.active .snav-dot,
.snav-item:hover .snav-dot{
  border-color:var(--ac);background:var(--ac);
}
.snav-label{
  position:absolute;left:calc(var(--side) + .4rem);
  font-family:var(--font-h);font-size:.875rem;font-weight:700;
  color:var(--txm);white-space:nowrap;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s;pointer-events:none;
  background:var(--card);padding:.2rem .5rem;
  border:1px solid var(--rl);
}
.snav-item:hover .snav-label{opacity:1;transform:translateX(0)}
.snav-item.active .snav-label{color:var(--ac)}

/* ── Top nav ───────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--gutter) .9rem calc(var(--side) + var(--gutter));
  background:var(--nav);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
nav.scrolled{border-bottom-color:var(--rl)}
.nav-logo{font-family:var(--font-h);font-size:.875rem;font-weight:700;color:var(--tx);letter-spacing:-.01em}
.nav-right{display:flex;align-items:center;gap:.6rem}
.lang-toggle{display:flex;border:1px solid var(--rl);overflow:hidden}
.lang-toggle button{background:transparent;border:none;color:var(--txd);font-family:var(--font-h);font-size:.875rem;font-weight:700;padding:.34rem .72rem;cursor:pointer;transition:all .18s}
.lang-toggle button.active{background:var(--acd);color:var(--ac)}
.lang-toggle button:first-child{border-right:1px solid var(--rl)}
.theme-btn{background:transparent;border:1px solid var(--rl);color:var(--txd);font-size:.875rem;padding:.34rem .58rem;cursor:pointer;transition:all .18s;line-height:1}
.theme-btn:hover,.lang-toggle button:hover{color:var(--tx);border-color:var(--ac)}

/* ── Hero ──────────────────────────────────────────────── */
#hero{
  min-height:100svh;position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding-left:var(--side);
}
#hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(140deg,#060d12 0%,#0a1a1e 55%,#061210 100%);
  transition:background .3s;
}
:root[data-theme="light"] #hero::before{
  background:linear-gradient(140deg,#e0f2f1 0%,#f0faf9 55%,#e4f3f1 100%);
}

/* Portrait — absolute, configurable side via data-portrait="left"|"right" on <section> */
.hero-portrait{
  position:absolute;right:0;top:0;bottom:0;width:44%;
  overflow:hidden;
}
/* portrait left variant */
#hero[data-portrait="left"]{padding-left:0}
#hero[data-portrait="left"] .hero-portrait{right:auto;left:0}
#hero[data-portrait="left"] .hero-inner{margin-left:44%;padding-left:var(--gutter)}
#hero[data-portrait="left"] .hero-portrait::before{
  left:auto;right:0;
  background:linear-gradient(to left,#060d12 0%,rgba(6,13,18,.82) 42%,transparent);
}
:root[data-theme="light"] #hero[data-portrait="left"] .hero-portrait::before{
  background:linear-gradient(to left,#e0f2f1 0%,rgba(224,242,241,.82) 42%,transparent);
}
#hero[data-portrait="left"] .hero-stats{left:44%;right:0}

.hero-portrait::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:280px;
  background:linear-gradient(to right,#060d12 0%,rgba(6,13,18,.82) 42%,transparent);
  z-index:2;pointer-events:none;transition:background .3s;
}
:root[data-theme="light"] .hero-portrait::before{
  background:linear-gradient(to right,#e0f2f1 0%,rgba(224,242,241,.82) 42%,transparent);
}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}

/* Hero content — same gutter + max-width as sections */
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1200px;
  padding:6rem var(--gutter) 7rem var(--gutter);
}

/* keep text within ~56% so portrait doesn't overlap */
.hero-text{max-width:54%}

.hero-eye{font-family:var(--font-h);font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.9rem}
.hero-name{
  font-family:var(--font-h);
  font-size:clamp(3rem,6.5vw,6rem);
  font-weight:800;line-height:.9;
  letter-spacing:-.035em;margin-bottom:1rem;
  color:#fff;
}
:root[data-theme="light"] .hero-name{color:#0a0a0a}
.hero-tagline{
  font-family:var(--font-h);font-size:.95rem;font-weight:600;
  color:var(--ac);margin-bottom:.7rem;letter-spacing:-.01em;
}
.hero-sub{
  font-size:.94rem;color:rgba(240,240,240,.48);
  line-height:1.8;max-width:420px;margin-bottom:2.2rem;font-weight:300;
}
:root[data-theme="light"] .hero-sub{color:rgba(10,10,10,.46)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.6rem}

.btn-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-h);font-size:.875rem;font-weight:700;
  color:#fff;background:var(--ac);padding:.85rem 1.7rem;
  transition:all .2s var(--ease);
  box-shadow:0 6px 26px rgba(20,184,166,.28);
}
.btn-primary:hover{background:#0fa99a;box-shadow:0 10px 36px rgba(20,184,166,.42);transform:translateY(-1px)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-h);font-size:.875rem;font-weight:600;
  color:var(--txd);border:1px solid var(--rl);padding:.8rem 1.4rem;
  transition:all .18s;
}
.btn-secondary:hover{color:var(--tx);border-color:var(--ac)}

/* hero stats bar */
.hero-stats{
  position:absolute;bottom:0;left:var(--side);right:44%;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(6,13,18,.76);backdrop-filter:blur(14px);
  border-top:1px solid rgba(240,240,240,.08);z-index:3;
}
:root[data-theme="light"] .hero-stats{
  background:rgba(224,242,241,.86);border-top-color:rgba(10,10,10,.08);
}
.hero-stat{padding:1rem .6rem;text-align:center;border-right:1px solid rgba(240,240,240,.07)}
.hero-stat:last-child{border-right:none}
.stat-n{font-family:var(--font-h);font-size:1.7rem;font-weight:800;color:var(--ac);line-height:1}
.stat-l{font-size:.875rem;font-weight:600;color:rgba(240,240,240,.35);margin-top:.18rem}
:root[data-theme="light"] .stat-l{color:rgba(10,10,10,.38)}

/* ── Page content offset ───────────────────────────────── */
section:not(#hero){
  padding-left:var(--side);
  background:var(--bg);transition:background .3s;
}
section:not(#hero):nth-of-type(even){background:var(--bg2)}

.sec-inner{
  max-width:1200px;
  padding:5rem var(--gutter);
  border-top:1px solid var(--rl);
}
.sec-label{font-family:var(--font-h);font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.35rem}
.sec-head{
  font-family:var(--font-h);
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;color:var(--tx);
  letter-spacing:-.025em;line-height:1;margin-bottom:2.5rem;
}

/* ── About ─────────────────────────────────────────────── */
.about-layout{display:grid;grid-template-columns:1fr 260px;gap:3.5rem;align-items:start}
.about-text{font-size:.95rem;color:var(--txd);line-height:1.95;font-weight:300;margin-bottom:1.75rem}
.about-text strong{color:var(--tx);font-weight:600}

/* skill bars */
.skill-bars{display:flex;flex-direction:column;gap:.9rem}
.sbar-top{display:flex;justify-content:space-between;margin-bottom:.3rem}
.sbar-name{font-size:.875rem;font-weight:600;color:var(--tx)}
.sbar-pct{font-size:.875rem;font-weight:700;color:var(--ac)}
.sbar-track{height:2px;background:var(--rl);overflow:hidden}
.sbar-fill{height:100%;background:var(--acg);width:0;transition:width 1.1s var(--ease)}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rl);border:1px solid var(--rl);overflow:hidden}
.kpi-item{padding:1.35rem 1rem;background:var(--card)}
.kpi-val{font-family:var(--font-h);font-size:2rem;font-weight:800;color:var(--ac);line-height:1}
.kpi-lbl{font-size:.875rem;color:var(--txd);margin-top:.2rem;line-height:1.4}

/* International chips */
.intl-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem;align-items:center}
.intl-chip{
  display:flex;align-items:center;gap:.35rem;
  font-size:.875rem;color:var(--txd);border:1px solid var(--rl);
  padding:.25rem .7rem;
}
.intl-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--ac);flex-shrink:0}

/* ── Projects ──────────────────────────────────────────── */
.proj-featured-wrap{margin-bottom:1rem}
.pcard-feat{
  background:var(--card);border:1px solid var(--rl);border-top:3px solid var(--ac);
  cursor:pointer;display:grid;grid-template-columns:1fr 1fr;
  transition:box-shadow .22s;overflow:hidden;
}
.pcard-feat:hover{box-shadow:var(--shadow)}
.pcard-feat .pcard-body{padding:2rem 2.2rem;display:flex;flex-direction:column;justify-content:space-between}
.pcard-stat-row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.6rem}
.pcard-stat{font-family:var(--font-h);font-size:3rem;font-weight:800;color:var(--ac);line-height:1}
.pcard-tag{font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.5rem}
.pcard-title{font-family:var(--font-h);font-size:1.15rem;font-weight:700;color:var(--tx);margin-bottom:.5rem}
.pcard-desc{font-size:.92rem;color:var(--txd);line-height:1.72}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--rl)}
.detail-btn{font-size:.875rem;font-weight:700;color:var(--txd);border:1px solid var(--rl);padding:.28rem .7rem;transition:all .18s}
.pcard-feat:hover .detail-btn,.pcard:hover .detail-btn{color:var(--ac);border-color:rgba(20,184,166,.3)}

/* tile grid — 3 columns */
.proj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pcard{
  background:var(--card);border:1px solid var(--rl);
  cursor:pointer;display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s,border-color .2s;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(20,184,166,.2)}
.pcard-body{padding:1.25rem 1.4rem 1.4rem;flex:1}
.pcard .pcard-stat{font-size:2.2rem}

/* svg placeholder images */
.pcard-img-wrap{overflow:hidden;flex-shrink:0;border-bottom:1px solid var(--rl)}
.pcard-img-wrap svg{display:block;width:100%;background:var(--card2)}
.pcard-feat .pcard-img-wrap{min-height:200px;border-bottom:none;border-left:1px solid var(--rl);display:flex}
.pcard-feat .pcard-img-wrap svg{flex:1;min-height:200px}
.pcard-feat .pcard-img-wrap img{flex:1;width:100%;object-fit:cover;object-position:center center;display:block}


/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:800;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:opacity .28s;
  backdrop-filter:blur(10px);
}
.modal-overlay.on{opacity:1;pointer-events:all}
.modal-box{
  background:var(--card);border:1px solid var(--rl);
  max-width:760px;width:100%;max-height:88vh;overflow-y:auto;
  position:relative;transform:translateY(18px);transition:transform .3s var(--ease);
  scrollbar-width:thin;scrollbar-color:var(--rl) transparent;
}
.modal-overlay.on .modal-box{transform:translateY(0)}
.modal-close{
  position:sticky;top:0;float:right;margin:.8rem .8rem 0 0;
  width:30px;height:30px;background:var(--rl);color:var(--txd);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  cursor:pointer;transition:all .15s;z-index:5;
}
.modal-close:hover{background:var(--acd);color:var(--ac)}
.mpanel{padding:0 0 2.2rem;display:none}
.modal-visual{overflow:hidden;margin-bottom:1.5rem;max-height:260px;background:var(--card2)}
.modal-visual img{width:100%;height:260px;object-fit:contain;object-position:center top;display:block;background:var(--card2)}
.modal-visual svg{display:block;width:100%;height:220px}
.modal-cat{padding:0 2rem;font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.35rem}
.mpanel.on{display:block}
.modal-cat{font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.35rem}
.modal-title{font-family:var(--font-h);font-size:1.75rem;font-weight:800;color:var(--tx);letter-spacing:-.025em;margin-bottom:.85rem;line-height:1.05;padding:0 2rem}
.modal-desc{font-size:.92rem;color:var(--txd);line-height:1.85;font-weight:300;margin-bottom:1.5rem;padding:0 2rem}
.modal-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:0 2rem}
.modal-lbl{font-size:.875rem;font-weight:700;color:var(--txm);margin-bottom:.55rem}
.modal-results{display:flex;flex-direction:column;gap:.5rem}
.modal-rv{font-family:var(--font-h);font-size:1.45rem;font-weight:800;color:var(--ac);line-height:1}
.modal-rl{font-size:.875rem;color:var(--txd)}
.modal-tools{display:flex;flex-wrap:wrap;gap:.3rem}
.modal-tool{background:var(--acd);border:1px solid rgba(20,184,166,.22);color:var(--ac);font-size:.875rem;padding:.18rem .58rem}

/* ── Experience ────────────────────────────────────────── */
.exp-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
.jobs-list{display:flex;flex-direction:column;gap:.4rem}

/* job accordion */
.job-entry{
  background:var(--card);border:1px solid var(--rl);
  border-left:3px solid transparent;
  transition:border-left-color .22s;cursor:pointer;
}
.job-entry:first-child{border-left-color:var(--ac)}
.job-entry.open{border-left-color:var(--ac)}
.job-entry-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.2rem 1.5rem;gap:.8rem;
}
.job-entry-head:hover .job-toggle{color:var(--ac)}
.job-entry-meta{flex:1;min-width:0}
.job-toggle{
  font-size:1.25rem;color:var(--txm);transition:transform .22s,color .15s;
  flex-shrink:0;margin-top:.1rem;user-select:none;line-height:1;
}
.job-entry.open .job-toggle{transform:rotate(180deg);color:var(--ac)}

.job-period{font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.18rem}
.job-role{font-size:1rem;font-weight:700;color:var(--tx);margin-bottom:.15rem}
.job-company{font-size:.875rem;color:var(--txd);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.job-badge{
  font-size:.875rem;font-weight:600;
  color:var(--txd);background:rgba(255,255,255,.07);
  border:1px solid var(--rl);padding:.12rem .5rem;
}
:root[data-theme="light"] .job-badge{color:var(--txd);background:rgba(0,0,0,.05);border-color:var(--rl)}

/* bullets — hidden by default, shown when open */
.job-bullets{
  list-style:none;display:none;flex-direction:column;gap:.32rem;
  padding:.2rem 1.5rem 1.2rem;
  border-top:1px solid var(--rl);margin-top:0;
}
.job-entry.open .job-bullets{display:flex}
.job-bullets li{font-size:.92rem;color:var(--txd);line-height:1.72;display:flex;align-items:flex-start;gap:.55rem;font-weight:300}
.job-bullets li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--ac);flex-shrink:0;margin-top:.58rem;opacity:.7}

/* cert/edu sidebar */
.cert-group{margin-bottom:1.8rem}
.cert-group-label{font-family:var(--font-h);font-size:.875rem;font-weight:700;color:var(--ac);margin-bottom:.7rem}
.cert-card{
  background:var(--card);border:1px solid var(--rl);padding:.85rem .95rem;
  margin-bottom:.4rem;display:flex;align-items:flex-start;gap:.7rem;transition:border-color .18s;
}
.cert-card:hover{border-color:rgba(20,184,166,.22)}
.cert-icon{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--acd);border:1px solid rgba(20,184,166,.18);font-size:.875rem}
.cert-name{font-size:.875rem;font-weight:600;color:var(--tx);line-height:1.2}
.cert-issuer{font-size:.875rem;color:var(--txd);margin-top:.1rem}
.cert-year{font-size:.875rem;font-weight:700;color:var(--ac);margin-top:.15rem}
.edu-card{background:var(--card);border:1px solid var(--rl);padding:.85rem .95rem;margin-bottom:.4rem}
.edu-degree{font-size:.88rem;font-weight:700;color:var(--tx);line-height:1.2}
.edu-school{font-size:.875rem;color:var(--txd);margin-top:.1rem}
.edu-period{font-size:.875rem;font-weight:700;color:var(--ac);margin-top:.14rem}

/* ── Skills ────────────────────────────────────────────── */
.skills-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}

.skills-zone-head{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-h);font-size:.875rem;font-weight:700;
  padding:.45rem 0;margin-bottom:.85rem;
  border-bottom:1px solid var(--rl);
}
.skills-zone-comp{color:var(--ac)}
.skills-zone-tools{color:var(--txd)}
.skills-zone-icon{font-size:.875rem}

.comp-intro{font-size:.88rem;color:var(--txd);line-height:1.7;margin-bottom:.9rem;font-weight:300}

/* competency flat tags */
.skill-cloud{display:flex;flex-wrap:wrap;gap:.35rem}
.comp-tag{
  font-size:.875rem;font-weight:500;padding:.32rem .8rem;line-height:1;white-space:nowrap;
  background:var(--card);border:1px solid var(--rl);color:var(--txd);
  transition:all .15s;cursor:default;
}
.comp-tag-hi{color:var(--ac);border-color:rgba(20,184,166,.3);background:var(--acd);font-weight:600}
.comp-tag-mid{color:var(--tx);border-color:rgba(240,240,240,.12)}
:root[data-theme="light"] .comp-tag-mid{border-color:rgba(17,17,17,.12)}

/* ── Style selector toggle ─────────────────────────────── */
.style-sel{display:flex;gap:.3rem;margin-bottom:.8rem}
.style-sel-btn{
  font-size:.875rem;font-weight:600;color:var(--txm);
  background:transparent;border:1px solid var(--rl);
  padding:.2rem .6rem;cursor:pointer;line-height:1.4;
  transition:all .15s;letter-spacing:.02em;
}
.style-sel-btn.active{color:var(--ac);border-color:rgba(20,184,166,.4);background:var(--acd)}
.style-sel-btn:hover:not(.active){color:var(--tx)}

/* competency — dot rating */
.comp-dots-group{margin-bottom:1rem}
.comp-dots-group-label{font-size:.875rem;font-weight:700;color:var(--txm);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45rem}
.comp-dots-item{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.04);
}
:root[data-theme="light"] .comp-dots-item{border-bottom:1px solid rgba(0,0,0,.05)}
.comp-dots-item:last-child{border-bottom:none}
.comp-dots-name{font-size:.875rem;color:var(--txd);flex:1}
.comp-dots-name.hi{color:var(--tx);font-weight:600}
.dot-row{display:flex;gap:.22rem;flex-shrink:0}
.dot-pip{width:8px;height:8px;border-radius:50%;background:var(--rl)}
.dot-pip.on{background:var(--ac)}

/* competency — bars */
.comp-bar{margin-bottom:.55rem}
.comp-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.25rem}
.comp-bar-name{font-size:.875rem;color:var(--txd)}
.comp-bar-name.hi{color:var(--tx);font-weight:600}
.comp-bar-pct{font-size:.875rem;color:var(--txm)}
.comp-bar-track{height:2px;background:var(--rl);overflow:hidden}
.comp-bar-fill{height:100%;background:var(--acg);width:0;transition:width 1.1s var(--ease)}

/* competency — category cards */
.comp-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.comp-card{background:var(--card);border:1px solid var(--rl);padding:.7rem .85rem}
.comp-card-label{font-size:.875rem;font-weight:700;color:var(--ac);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem}
.comp-card-items{display:flex;flex-direction:column;gap:.12rem}
.comp-card-item{font-size:.875rem;color:var(--txd);padding:.08rem 0;display:flex;align-items:center;gap:.38rem}
.comp-card-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--ac);opacity:.4;flex-shrink:0}
.comp-card-item.hi{color:var(--tx);font-weight:500}
.comp-card-item.hi::before{opacity:.9}

/* tool category list */
.tool-cat{margin-bottom:1.1rem}
.tool-cat-label{font-size:.875rem;font-weight:700;color:var(--txm);margin-bottom:.4rem;letter-spacing:.03em}
.tool-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.tool-chip{
  font-size:.875rem;font-weight:500;color:var(--txd);
  background:var(--card);border:1px solid var(--rl);
  padding:.2rem .6rem;
  transition:all .15s;
}
.tool-chip.t5{color:var(--tx);border-color:rgba(20,184,166,.15);font-weight:600}
.tool-chip.t4{color:var(--txd)}
.tool-chip.t1{color:var(--txm);font-size:.875rem}
.tool-chip:hover{border-color:rgba(20,184,166,.28);color:var(--ac)}

/* languages row */
.skills-langs{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rl);
}
.lang-item{display:flex;align-items:center;gap:.55rem}
.lang-name{font-size:.88rem;font-weight:600;color:var(--tx)}
.lang-level{font-size:.875rem;color:var(--txd)}
.lang-sep{width:1px;height:1.2rem;background:var(--rl)}

/* ── Hire me ───────────────────────────────────────────── */
.hire-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.hire-col{padding:1.9rem 2.1rem}
.hire-yes{background:var(--acd);border:1px solid rgba(20,184,166,.18);border-top:3px solid var(--ac)}
.hire-no{background:var(--card);border:1px solid var(--rl);border-top:3px solid var(--rl)}
.hire-col-head{display:flex;align-items:center;gap:.65rem;margin-bottom:1.3rem}
.hire-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem}
.hire-yes .hire-icon{background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.28)}
.hire-no .hire-icon{background:var(--rl);border:1px solid var(--rl)}
.hire-col-label{font-family:var(--font-h);font-size:.875rem;font-weight:700}
.hire-yes .hire-col-label{color:var(--ac)}
.hire-no .hire-col-label{color:var(--txd)}
.hire-items{display:flex;flex-direction:column;gap:.65rem}
.hire-item{display:flex;align-items:flex-start;gap:.6rem;font-size:.875rem;color:var(--txd);line-height:1.62;font-weight:300}
.hire-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:.58rem}
.hire-yes .hire-dot{background:var(--ac)}
.hire-no .hire-dot{background:var(--txm)}

/* ── Contact ───────────────────────────────────────────── */
#contact-sec{background:var(--bg) !important}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.contact-head{
  font-family:var(--font-h);
  font-size:clamp(2rem,5vw,3.8rem);
  font-weight:800;color:var(--ac);
  letter-spacing:-.03em;line-height:.95;margin-bottom:.9rem;
}
.contact-sub{font-size:.88rem;color:var(--txd);line-height:1.85;max-width:400px;margin-bottom:1.75rem;font-weight:300}
.contact-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-h);font-size:.875rem;font-weight:700;
  color:var(--bg);background:var(--ac);padding:.85rem 1.7rem;
  transition:all .18s;
}
.contact-cta:hover{background:#0fa99a;transform:translateY(-1px)}
.cdetails{display:flex;flex-direction:column;gap:.65rem}
.cdetail{
  display:flex;align-items:center;gap:.95rem;
  padding:.9rem 1.2rem;background:var(--card);border:1px solid var(--rl);
  transition:border-color .18s,transform .18s;
}
.cdetail:hover{border-color:rgba(20,184,166,.28);transform:translateX(4px)}
.cdet-ico{width:38px;height:38px;background:var(--acd);border:1px solid rgba(20,184,166,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.cdet-m{font-size:.875rem;font-weight:600;color:var(--tx)}
.cdet-s{font-size:.875rem;color:var(--txd);margin-top:.08rem}

/* ── Footer ────────────────────────────────────────────── */
footer{
  padding-left:var(--side);
  background:var(--bg);border-top:1px solid var(--rl);
  transition:background .3s;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem var(--gutter);
}
.footer-copy{font-size:.875rem;color:var(--txm)}

/* ── Fade-in ───────────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.fade-in.visible{opacity:1;transform:none}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:920px){
  :root{--side:0px;--gutter:1.5rem}
  #side-nav{display:none}
  nav{padding:.85rem var(--gutter)}
  #hero{padding-left:0}
  .hero-portrait{width:50%}
  .hero-portrait::before{width:220px}
  .hero-text{max-width:50%}
  .hero-stats{left:0;right:50%}
}
@media(max-width:680px){
  .hero-portrait{position:relative;width:100%;height:55vw;order:-1}
  .hero-portrait::before{background:linear-gradient(to bottom,transparent 55%,#060d12 100%)}
  :root[data-theme="light"] .hero-portrait::before{background:linear-gradient(to bottom,transparent 55%,#e0f2f1 100%)}
  #hero{flex-direction:column;min-height:auto;padding-top:4rem}
  .hero-inner{padding:1.5rem var(--gutter) 5rem}
  .hero-text{max-width:100%}
  .hero-stats{position:static;display:grid;grid-template-columns:repeat(4,1fr)}
  .about-layout,.exp-layout,.skills-split,.hire-grid,.contact-grid{grid-template-columns:1fr}
  .pcard-feat{grid-template-columns:1fr}
  .proj-tiles{grid-template-columns:1fr}
  .modal-cols{grid-template-columns:1fr}
  footer .footer-inner{flex-direction:column;gap:.35rem}
}