*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080D1A;--bg2:#0E1528;--bg3:#141E33;
  --s1:#111827;--s2:#1A2540;
  --b1:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.13);
  --teal:#00C9A7;--td:rgba(0,201,167,0.12);--tm:rgba(0,201,167,0.22);
  --pur:#A78BFA;--purd:rgba(167,139,250,0.12);
  --blu:#60A5FA;--blud:rgba(96,165,250,0.12);
  --grn:#34D399;--grnd:rgba(52,211,153,0.12);
  --amb:#FBBF24;--ambd:rgba(251,191,36,0.12);
  --org:#FB923C;--orgd:rgba(251,146,60,0.12);
  --red:#F87171;--redd:rgba(248,113,113,0.12);
  --txt:#E2E8F5;--mut:#8A9BC0;--fnt:#3D4E6E;
  --fn:'Space Grotesk',system-ui,sans-serif;
  --mo:'JetBrains Mono','Fira Code',monospace;
  --r:10px;--rl:16px;--rx:20px;
}
html{scroll-behavior:smooth}
body{font-family:var(--fn);background:var(--bg);color:var(--txt);line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased}
.container{max-width:1120px;margin:0 auto;padding:0 2rem}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(8,13,26,0.85);backdrop-filter:blur(18px);border-bottom:1px solid var(--b1);height:64px}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 2rem;height:100%;display:flex;align-items:center;gap:2rem}
.nav-logo{font-family:var(--mo);font-size:18px;font-weight:600;color:var(--teal);text-decoration:none;flex-shrink:0}
.lb{color:var(--fnt)}
.nav-links{display:flex;gap:1.75rem;margin-right:auto}
.nav-links a{font-size:14px;color:var(--mut);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--teal)}
.nav-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;background:var(--td);color:var(--teal);border:1px solid rgba(0,201,167,0.3);border-radius:7px;padding:8px 16px;text-decoration:none;transition:background .2s;flex-shrink:0}
.nav-cta:hover{background:var(--tm)}

/* HERO */
.hero{padding:148px 0 80px;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,201,167,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,0.04) 1px,transparent 1px);background-size:60px 60px}
.glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.g1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,201,167,0.08) 0%,transparent 70%);top:-100px;right:-100px}
.g2{width:400px;height:400px;background:radial-gradient(circle,rgba(167,139,250,0.07) 0%,transparent 70%);bottom:100px;left:-100px}
.hero .container{position:relative;z-index:1;width:100%}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mo);font-size:12px;font-weight:500;color:var(--teal);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem}
.edot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,201,167,.2);animation:ep 2.5s ease-in-out infinite}
@keyframes ep{0%,100%{box-shadow:0 0 0 3px rgba(0,201,167,.2)}50%{box-shadow:0 0 0 6px rgba(0,201,167,.05)}}
.hero-name{font-size:clamp(52px,7vw,80px);font-weight:700;line-height:1.0;letter-spacing:-.035em;color:#fff;margin-bottom:.6rem}
.hero-role{font-size:clamp(16px,2.5vw,22px);font-weight:400;color:var(--mut);margin-bottom:1.5rem}
.hero-bio{font-size:16px;color:var(--mut);line-height:1.8;max-width:460px;margin-bottom:1.75rem}
.hero-bio em{color:var(--txt);font-style:normal}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem}
.hero-tags span{font-family:var(--mo);font-size:11.5px;background:var(--s2);color:var(--mut);border:1px solid var(--b2);border-radius:5px;padding:5px 11px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-p{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#050C18;font-family:var(--fn);font-size:14px;font-weight:600;padding:12px 26px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:opacity .2s,transform .15s}
.btn-p:hover{opacity:.88;transform:translateY(-1px)}
.btn-g{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--txt);font-family:var(--fn);font-size:14px;font-weight:500;padding:12px 26px;border-radius:8px;text-decoration:none;border:1px solid var(--b2);cursor:pointer;transition:background .2s,border-color .2s}
.btn-g:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.25)}

/* TERMINAL */
.terminal{background:#060B17;border:1px solid var(--b2);border-radius:var(--rl);overflow:hidden;margin-bottom:1.5rem;box-shadow:0 0 80px rgba(0,201,167,.06),0 24px 64px rgba(0,0,0,.5)}
.term-chrome{background:#0D1422;border-bottom:1px solid var(--b1);padding:11px 16px;display:flex;align-items:center;gap:8px}
.td{width:12px;height:12px;border-radius:50%}
.r{background:#FF5F57}.y{background:#FEBC2E}.g{background:#28C840}
.term-title{flex:1;text-align:center;font-family:var(--mo);font-size:11.5px;color:var(--fnt)}
.term-body{padding:18px 20px 16px;font-family:var(--mo);font-size:12.5px}
.tl{display:flex;gap:8px;margin-bottom:2px}
.tp{color:var(--teal)}
.tcur{color:var(--teal);animation:blink 1.1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
#tout{min-height:120px;padding-left:4px}
.tol{line-height:2.1;font-family:var(--mo);font-size:12.5px}
.tol .g{color:var(--grn)}.tol .t{color:var(--teal)}.tol .o{color:var(--org)}.tol .m{color:var(--mut)}

/* HERO STATS */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
.hs{background:var(--s1);padding:1rem .5rem;text-align:center;display:flex;flex-direction:column;gap:4px}
.hn{font-size:26px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.hl{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}

/* SECTIONS */
.sec{padding:7rem 0}
.sec-alt{background:var(--bg2)}
.sec-hd{margin-bottom:3.5rem;max-width:640px}
.sec-ey{font-family:var(--mo);font-size:11px;font-weight:500;color:var(--teal);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.75rem}
.sec-title{font-size:clamp(26px,4vw,36px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:.75rem}
.sec-sub{font-size:15px;color:var(--mut);line-height:1.75}

/* PROJECT GRID */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.pfeat{grid-column:1/-1}
.pcard{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rx);padding:2rem;display:flex;flex-direction:column;gap:1.25rem;transition:border-color .25s,transform .2s}
.pcard:hover{border-color:var(--b2);transform:translateY(-2px)}
.ph{display:flex;align-items:flex-start;gap:1rem}
.pi{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pi-purple{background:var(--purd);color:var(--pur)}
.pi-green{background:var(--grnd);color:var(--grn)}
.pi-blue{background:var(--blud);color:var(--blu)}
.pi-teal{background:var(--td);color:var(--teal)}
.pi-amber{background:var(--ambd);color:var(--amb)}
.pi-orange{background:var(--orgd);color:var(--org)}
.pt-grp{flex:1}
.pt{font-size:18px;font-weight:700;color:#fff;margin-bottom:3px}
.ps{font-size:13px;color:var(--mut)}
.pgh{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--b2);color:var(--mut);text-decoration:none;transition:color .2s,border-color .2s;flex-shrink:0}
.pgh:hover{color:var(--txt);border-color:rgba(255,255,255,.25)}
.pd{font-size:14px;color:var(--mut);line-height:1.75}
.pd strong{color:var(--txt);font-weight:500}

/* MOCK SCREENS */
.mock{border:1px solid var(--b2);border-radius:var(--r);overflow:hidden;background:var(--bg3)}
.mc{background:var(--s2);border-bottom:1px solid var(--b1);padding:9px 14px;display:flex;align-items:center;gap:8px}
.md{width:10px;height:10px;border-radius:50%}
.mu{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:4px 10px;font-family:var(--mo);font-size:10.5px;color:var(--fnt)}
.mb{padding:14px 16px}

/* RAG mock */
.rag-wrap{}
.rag-q{margin-bottom:12px}
.rag-ql{font-family:var(--mo);font-size:9.5px;color:var(--fnt);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.rag-qi{font-size:12px;color:var(--txt);background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:8px 12px;font-style:italic}
.rag-pipe{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:4px;align-items:center;margin-bottom:12px}
.rag-step{background:var(--s1);border:1px solid var(--b1);border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.rag-on{border-color:rgba(0,201,167,.3);background:var(--td)}
.rsn{width:20px;height:20px;border-radius:50%;flex-shrink:0;background:var(--s2);color:var(--mut);font-family:var(--mo);font-size:10px;display:flex;align-items:center;justify-content:center}
.rag-on .rsn{background:var(--teal);color:#050C18}
.rst{font-size:11px;font-weight:600;color:var(--txt)}
.rss{font-size:9.5px;color:var(--mut)}
.rag-arr{color:var(--fnt);font-size:14px;text-align:center}
.rag-res{background:var(--grnd);border:1px solid rgba(52,211,153,.2);border-radius:6px;padding:8px 12px;font-size:11.5px;display:flex;align-items:center;gap:10px}
.rrl{font-family:var(--mo);font-size:10px;color:var(--grn);flex-shrink:0}
.rrt{color:var(--txt)}

/* Terminal mock */
.mtm{background:#050A14;border-radius:6px;font-family:var(--mo);font-size:11.5px;line-height:2}
.tl2{display:flex;gap:7px}
.to{color:var(--mut);padding-left:19px}
.warn{color:var(--amb)}

/* DR mock */
.dr-chips{display:flex;gap:6px;margin-bottom:10px}
.drc{font-family:var(--mo);font-size:11px;padding:4px 10px;border-radius:5px;background:var(--s1);border:1px solid var(--b2);color:var(--mut)}
.drc-on{background:var(--td);border-color:rgba(0,201,167,.4);color:var(--teal)}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.dr-f label{font-size:9.5px;color:var(--fnt);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:3px}
.dr-v{font-size:11.5px;color:var(--txt);background:var(--s1);border:1px solid var(--b1);border-radius:5px;padding:5px 8px}
.dr-log{font-family:var(--mo);font-size:10.5px;background:#050A14;border-radius:6px;padding:10px 12px;line-height:2}
.ts{color:var(--fnt)}.ok{color:var(--grn)}

/* EC2 mock */
.ec2-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ec2-t{font-size:13px;font-weight:600;color:var(--txt)}
.ec2-s{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--grn)}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--grn);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ec2-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ec2-form{display:flex;flex-direction:column;gap:6px}
.ef label{font-size:9.5px;color:var(--fnt);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}
.ev{font-size:11px;color:var(--txt);background:var(--s1);border:1px solid var(--b1);border-radius:5px;padding:5px 8px}
.ec2-btn{font-size:11px;font-weight:600;background:var(--td);color:var(--teal);border:1px solid rgba(0,201,167,.3);border-radius:5px;padding:6px 10px;text-align:center;margin-top:4px}
.ec2-list{display:flex;flex-direction:column;gap:5px}
.ei{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:1px solid var(--b1);border-radius:6px;padding:6px 10px}
.en{font-family:var(--mo);font-size:10.5px;color:var(--txt)}
.eb{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--grnd);color:var(--grn)}
.eb-s{background:rgba(255,255,255,.06);color:var(--mut)}
.ec2-con{font-family:var(--mo);font-size:10.5px;background:#050A14;border-radius:6px;padding:10px 12px;line-height:2;color:var(--grn)}
.dim{color:var(--fnt)}

/* SOURCE SNIPPETS */
.src-block{background:#060B17;border:1px solid var(--b2);border-radius:var(--r);overflow:hidden}
.src-label{font-family:var(--mo);font-size:10px;color:var(--fnt);padding:8px 14px;border-bottom:1px solid var(--b1);background:var(--s2)}
.src{font-family:var(--mo);font-size:11.5px;color:#CBD5E1;line-height:1.9;padding:12px 14px;overflow-x:auto;white-space:pre}
.kw{color:#89DDFF}.cn{color:#FFCB6B}.fn{color:#82AAFF}.st{color:#C3E88D}.cm{color:var(--fnt)}.nm{color:#F78C6C}.tp{color:#FFCB6B}

/* FEATURES */
.pfeats{display:flex;flex-direction:column;gap:7px}
.pf{font-size:13.5px;color:var(--mut);line-height:1.5}
.pf strong{color:var(--txt);font-weight:500}

/* PILLS */
.pstack{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.pill{font-family:var(--mo);font-size:11px;font-weight:500;padding:4px 10px;border-radius:5px;border:1px solid transparent}
.pp{background:var(--purd);color:var(--pur);border-color:rgba(167,139,250,.22)}
.pg{background:var(--grnd);color:var(--grn);border-color:rgba(52,211,153,.22)}
.pb{background:var(--blud);color:var(--blu);border-color:rgba(96,165,250,.22)}
.pt2{background:var(--td);color:var(--teal);border-color:rgba(0,201,167,.22)}
.pa{background:var(--ambd);color:var(--amb);border-color:rgba(251,191,36,.22)}
.po{background:var(--orgd);color:var(--org);border-color:rgba(251,146,60,.22)}

/* SKILL FILES */
.skill-files-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.5rem}
.sf-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:1.25rem}
.sf-label{font-family:var(--mo);font-size:10.5px;color:var(--teal);margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--b1)}
.sf-desc{font-size:12.5px;color:var(--mut);line-height:1.7}

/* AI TOOLS */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:var(--rl);overflow:hidden}
.tc{background:var(--s1);padding:1.5rem;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.tc:hover{background:var(--s2)}
.ti{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:20px}
.ti-v{background:var(--purd)}.ti-g{background:var(--grnd)}.ti-b{background:var(--blud)}.ti-d{background:var(--s2)}.ti-o{background:var(--orgd)}.ti-p{background:var(--purd)}.ti-r{background:var(--redd)}.ti-t{background:var(--td)}
.tbadge{font-family:var(--mo);font-size:10px;font-weight:500;padding:3px 8px;border-radius:4px;background:var(--s2);color:var(--mut);border:1px solid var(--b2);display:inline-block}
.tbadge-p{background:var(--purd);color:var(--pur);border-color:rgba(167,139,250,.25)}
.tbadge-g{background:var(--grnd);color:var(--grn);border-color:rgba(52,211,153,.25)}
.tbadge-o{background:var(--orgd);color:var(--org);border-color:rgba(251,146,60,.25)}
.tn{font-size:15px;font-weight:600;color:#fff}
.td2{font-size:13px;color:var(--mut);line-height:1.7;flex:1}
.tu{display:flex;flex-wrap:wrap;gap:5px}
.tu span{font-family:var(--mo);font-size:10px;background:var(--bg3);color:var(--fnt);border:1px solid var(--b1);border-radius:4px;padding:2px 7px}

/* SKILLS */
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.sk-h{font-size:12px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--b1)}
.sbars{display:flex;flex-direction:column;gap:1.1rem}
.sb{}
.sbm{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13.5px;color:var(--txt)}
.sbn{font-family:var(--mo);font-size:12px;color:var(--teal)}
.sbt{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.sbf{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--teal),rgba(0,201,167,.6));width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}

/* CONTACT */
.sec-contact{background:var(--bg2);padding:7rem 0}
.ct-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.ct-title{font-size:clamp(26px,4vw,40px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:1rem}
.ct-bio{font-size:15px;color:var(--mut);line-height:1.75;margin-bottom:1.5rem}
.ct-bio strong{color:var(--txt);font-weight:500}
.ct-links{display:flex;flex-direction:column;gap:10px}
.ct-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut);text-decoration:none;transition:color .2s}
.ct-link:hover{color:var(--teal)}
.av-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rx);padding:2rem;display:flex;flex-direction:column;gap:1.25rem}
.av-hd{display:flex;align-items:center;gap:10px}
.av-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);animation:ep 2.5s ease-in-out infinite}
.av-lbl{font-size:14px;font-weight:600;color:var(--teal)}
.av-roles{font-size:14px;color:var(--txt)}
.av-prefs{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--mut)}

/* FOOTER */
.foot{border-top:1px solid var(--b1);padding:1.75rem 0}
.fi{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fl{font-family:var(--mo);font-size:14px;font-weight:600;color:var(--teal)}
.fc{font-size:12px;color:var(--fnt)}
.fc a{color:var(--mut);text-decoration:none}
.fc a:hover{color:var(--teal)}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .hero-right{order:-1}
  .pgrid{grid-template-columns:1fr}
  .pfeat{grid-column:1}
  .rag-pipe{grid-template-columns:1fr}
  .rag-arr{transform:none}
  .sk-grid{grid-template-columns:1fr}
  .ct-inner{grid-template-columns:1fr;gap:2.5rem}
  .ec2-body{grid-template-columns:1fr}
  .skill-files-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav-links{display:none}
  .hero{padding-top:100px}
  .hero-name{font-size:42px}
  .dr-grid{grid-template-columns:1fr}
  .fi{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── NEW PROJECT COLOURS ── */
.pi-red  { background:rgba(248,113,113,0.12); color:#F87171; }
.pi-amber{ background:rgba(251,191,36,0.12);  color:#FBBF24; }
.pi-orange{background:rgba(251,146,60,0.12);  color:#FB923C; }
.pr{ background:rgba(248,113,113,0.12); color:#F87171; border-color:rgba(248,113,113,0.22); }
.pa{ background:rgba(251,191,36,0.12);  color:#FBBF24; border-color:rgba(251,191,36,0.22); }
.po{ background:rgba(251,146,60,0.12);  color:#FB923C; border-color:rgba(251,146,60,0.22); }

/* ── FEATURED BADGE ── */
.pfeat-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#FBBF24;
  background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.25);
  border-radius:6px; padding:5px 12px; margin-bottom:1rem; letter-spacing:0.04em;
}

/* ── LOCAL BADGE (no GitHub link) ── */
.pgh-local {
  font-family:var(--mo); font-size:10px; color:var(--fnt);
  background:var(--s2); border:1px solid var(--b1);
  border-radius:6px; padding:4px 10px; flex-shrink:0; align-self:flex-start;
}

/* ── COMPLIANCE SCREENSHOTS ── */
.screenshots-row { display:flex; gap:12px; overflow-x:auto; }
.ss-card {
  background:#111827; border:1px solid var(--b2); border-radius:var(--r);
  overflow:hidden; flex:1; min-width:0;
}
.ss-chrome {
  background:#1A2540; border-bottom:1px solid var(--b1);
  padding:8px 12px; display:flex; align-items:center; gap:7px;
}
.ssd { width:10px; height:10px; border-radius:50%; }
.ss-url {
  flex:1; background:rgba(255,255,255,0.05); border-radius:4px;
  padding:3px 9px; font-family:var(--mo); font-size:10px; color:var(--fnt);
}
.ss-body { padding:12px 14px; }
.ss-kpis {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin-bottom:12px;
}
.ss-kpi {
  background:var(--bg3); border:1px solid var(--b1); border-radius:6px;
  padding:8px 6px; text-align:center;
}
.ss-kpi-n { display:block; font-size:18px; font-weight:700; line-height:1.1; }
.ss-kpi-l { display:block; font-size:9.5px; color:var(--mut); margin-top:3px; }
.ss-filters {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px;
}
.ss-filter label { font-size:9px; color:var(--fnt); display:block; margin-bottom:3px; }
.ss-sel {
  background:var(--bg3); border:1px solid var(--b2); border-radius:4px;
  padding:4px 7px; font-size:10.5px; color:var(--txt);
}
.ss-charts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.ss-chart-box { background:var(--bg3); border:1px solid var(--b1); border-radius:6px; padding:10px; }
.ss-chart-title { font-size:10.5px; font-weight:600; color:var(--txt); margin-bottom:8px; }
.ss-bar-chart {
  display:flex; align-items:flex-end; gap:4px; height:64px;
}
.ss-bar {
  flex:1; border-radius:2px 2px 0 0; display:flex;
  align-items:flex-end; justify-content:center; padding-bottom:2px;
  min-width:0;
}
.ss-bar span { font-size:8px; color:rgba(255,255,255,0.6); writing-mode:horizontal-tb; }
.ss-grouped-bars { display:flex; align-items:flex-end; gap:14px; height:64px; margin-bottom:6px; }
.ss-group { display:flex; align-items:flex-end; gap:3px; flex-direction:column-reverse; position:relative; }
.ss-gbar { width:18px; border-radius:2px 2px 0 0; }
.ss-glabel {
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  font-size:8.5px; color:var(--mut); white-space:nowrap;
}
.ss-legend { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.ss-leg-item { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--mut); }
.ss-leg-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.ss-pie-row { background:var(--bg3); border:1px solid var(--b1); border-radius:6px; padding:10px; }
.ss-pie-wrap { display:flex; align-items:center; gap:14px; margin-top:8px; }
.ss-pie-legend { display:flex; flex-direction:column; gap:5px; }
.ss-pie-item { display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--mut); }
.ss-pie-item span { width:10px; height:10px; border-radius:2px; flex-shrink:0; display:inline-block; }

/* ── JIRA SKILL CALLOUT ── */
.skill-callout {
  background:rgba(248,113,113,0.06); border:1px solid rgba(248,113,113,0.2);
  border-radius:var(--r); overflow:hidden;
}
.skill-callout-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid rgba(248,113,113,0.15);
  background:rgba(248,113,113,0.08);
}
.skill-callout-icon { font-size:16px; }
.skill-callout-title { font-family:var(--mo); font-size:12px; font-weight:500; color:var(--txt); flex:1; }
.skill-callout-badge {
  font-family:var(--mo); font-size:10px; font-weight:600;
  background:rgba(248,113,113,0.15); color:#F87171;
  border:1px solid rgba(248,113,113,0.3); border-radius:4px; padding:3px 9px;
}
.skill-callout-body { padding:12px 16px; }
.skill-workflow {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:6px; align-items:center; margin-bottom:12px;
}
.sw-step {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:6px; padding:8px 10px;
  display:flex; align-items:flex-start; gap:8px;
}
.sw-active { border-color:rgba(248,113,113,0.3); background:rgba(248,113,113,0.07); }
.sw-n {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--s2); color:var(--mut);
  font-family:var(--mo); font-size:10px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.sw-active .sw-n { background:#F87171; color:#0A0D16; }
.sw-t { font-size:11px; font-weight:600; color:var(--txt); }
.sw-s { font-size:9.5px; color:var(--mut); margin-top:2px; }
.sw-arr { color:var(--fnt); font-size:14px; text-align:center; }
.skill-code { border-top:1px solid rgba(248,113,113,0.12); }

/* ── SKILL MINI TAGS ── */
.skill-mini { display:flex; flex-wrap:wrap; gap:6px; }
.sm-tag {
  font-family:var(--mo); font-size:10px;
  background:rgba(0,201,167,0.08); color:var(--teal);
  border:1px solid rgba(0,201,167,0.2); border-radius:4px;
  padding:3px 9px;
}

/* ── MCP SERVER SECTION ── */
.mcp-row { margin-bottom:2.5rem; }
.mcp-label {
  font-family:var(--mo); font-size:11px; color:var(--teal);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1rem;
}
.mcp-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mcp-card {
  border-radius:var(--r); padding:1.25rem;
  display:flex; flex-direction:column; gap:8px;
}
.mcp-jira {
  background:rgba(248,113,113,0.07);
  border:1px solid rgba(248,113,113,0.22);
}
.mcp-conf {
  background:rgba(96,165,250,0.07);
  border:1px solid rgba(96,165,250,0.22);
}
.mcp-icon { font-size:22px; }
.mcp-name { font-size:15px; font-weight:600; color:#fff; }
.mcp-desc { font-size:13px; color:var(--mut); line-height:1.65; flex:1; }
.mcp-project { font-family:var(--mo); font-size:11px; color:var(--teal); }

/* ── SKILL FILES SECTION ── */
.skill-files-title {
  font-family:var(--mo); font-size:11px; color:var(--teal);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1rem;
}
.skill-files-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; margin-bottom:2.5rem;
}
.sf-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); padding:1.25rem;
  transition:border-color .2s;
}
.sf-card:hover { border-color:var(--b2); }
.sf-label {
  font-family:var(--mo); font-size:10.5px; color:var(--teal);
  margin-bottom:.75rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--b1);
}
.sf-desc { font-size:12.5px; color:var(--mut); line-height:1.7; }

/* ── TOOL ICON EXTRAS ── */
.ti-r   { background:rgba(248,113,113,0.12); }
.ti-conf{ background:rgba(96,165,250,0.12); }
.ti-chaos{background:rgba(52,211,153,0.12); }
.tbadge-jira { background:rgba(248,113,113,0.12); color:#F87171; border-color:rgba(248,113,113,0.25); }

/* ── RESPONSIVE PATCHES ── */
@media(max-width:900px) {
  .mcp-cards          { grid-template-columns:1fr; }
  .skill-files-row    { grid-template-columns:1fr 1fr; }
  .skill-workflow     { grid-template-columns:1fr; }
  .sw-arr             { display:none; }
  .ss-kpis            { grid-template-columns:repeat(2,1fr); }
  .ss-charts          { grid-template-columns:1fr; }
  .ss-filters         { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
  .skill-files-row    { grid-template-columns:1fr; }
  .ss-kpis            { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════
   DASHBOARD MOCK — dm-* classes
   ═══════════════════════════════════════════ */
.dash-mock { border:1px solid var(--b2); border-radius:var(--r); overflow:hidden; background:var(--bg3); }
.dm-chrome { background:var(--s2); border-bottom:1px solid var(--b1); padding:9px 14px; display:flex; align-items:center; gap:8px; }
.dmd { width:10px; height:10px; border-radius:50%; }
.dm-url { flex:1; background:rgba(255,255,255,.05); border-radius:4px; padding:4px 10px; font-family:var(--mo); font-size:10.5px; color:var(--fnt); }
.dm-body { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }

/* KPI row */
.dm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.dm-kpi { background:var(--s1); border:1px solid var(--b1); border-radius:7px; padding:10px 8px; text-align:center; }
.dm-kn { display:block; font-size:20px; font-weight:700; line-height:1.1; }
.dm-kl { display:block; font-size:9.5px; color:var(--mut); margin-top:3px; }

/* Filters */
.dm-filters { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dm-f { display:flex; flex-direction:column; gap:3px; }
.dm-fl { font-size:9px; color:var(--fnt); text-transform:uppercase; letter-spacing:.08em; }
.dm-fv { background:var(--s1); border:1px solid var(--b2); border-radius:5px; padding:5px 8px; font-size:10.5px; color:var(--txt); }

/* Charts */
.dm-charts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dm-chart { background:var(--s1); border:1px solid var(--b1); border-radius:7px; padding:10px 12px; }
.dm-ct { font-size:10.5px; font-weight:600; color:var(--txt); margin-bottom:8px; }
.dm-bars { display:flex; align-items:flex-end; gap:5px; height:60px; }
.dm-bar { flex:1; border-radius:2px 2px 0 0; min-width:0; }
.dm-grouped { display:flex; gap:18px; align-items:flex-end; }
.dm-grp { display:flex; flex-direction:column; align-items:center; gap:4px; }
.dm-gl { font-size:8.5px; color:var(--mut); text-align:center; }
.dm-legend { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.dm-legend span { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--mut); }
.dm-legend span span { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* Data table */
.dm-table { border:1px solid var(--b1); border-radius:6px; overflow:hidden; font-size:10px; }
.dm-th { display:grid; grid-template-columns:2.5fr 1fr 1.5fr .7fr .6fr .6fr; gap:0; background:var(--s2); padding:7px 10px; font-weight:600; color:var(--mut); letter-spacing:.04em; }
.dm-tr { display:grid; grid-template-columns:2.5fr 1fr 1.5fr .7fr .6fr .6fr; gap:0; padding:6px 10px; border-top:1px solid var(--b1); font-family:var(--mo); color:var(--mut); align-items:center; }
.dm-tr-ok  { background:rgba(39,174,96,.04); }
.dm-tr-gap { background:rgba(231,76,60,.05); }
.dm-yes { color:var(--grn); font-weight:600; }
.dm-gap { color:#F87171; font-weight:600; }
.dm-exports { display:flex; gap:8px; padding-top:4px; }
.dm-btn { font-size:11px; font-weight:600; border:none; border-radius:6px; padding:7px 14px; cursor:default; }
.dm-btn-xl  { background:rgba(39,174,96,.15);  color:#27AE60; }
.dm-btn-pdf { background:rgba(231,76,60,.15);   color:#E74C3C; }

/* ═══════════════════════════════════════════
   JIRA SKILL CALLOUT — sc-* classes
   ═══════════════════════════════════════════ */
.skill-callout { background:rgba(248,113,113,.06); border:1px solid rgba(248,113,113,.2); border-radius:var(--r); overflow:hidden; }
.sc-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(248,113,113,.15); background:rgba(248,113,113,.08); }
.sc-icon  { font-size:16px; flex-shrink:0; }
.sc-title { font-family:var(--mo); font-size:12px; font-weight:500; color:var(--txt); flex:1; }
.sc-badge { font-family:var(--mo); font-size:10px; font-weight:600; background:rgba(248,113,113,.15); color:#F87171; border:1px solid rgba(248,113,113,.3); border-radius:4px; padding:3px 9px; flex-shrink:0; }
.sc-body  { padding:14px 16px; }
.sc-flow  { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:6px; align-items:center; margin-bottom:12px; }
.sc-step  { background:var(--s1); border:1px solid var(--b1); border-radius:6px; padding:8px 10px; display:flex; align-items:flex-start; gap:8px; }
.sc-on    { border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.07); }
.sc-n     { width:20px; height:20px; border-radius:50%; flex-shrink:0; background:var(--s2); color:var(--mut); font-family:var(--mo); font-size:10px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.sc-on .sc-n { background:#F87171; color:#0A0D16; }
.sc-t  { font-size:11px; font-weight:600; color:var(--txt); }
.sc-s  { font-size:9.5px; color:var(--mut); margin-top:2px; }
.sc-arr { color:var(--fnt); font-size:14px; text-align:center; }

/* ═══════════════════════════════════════════
   MCP SECTION
   ═══════════════════════════════════════════ */
.mcp-section { margin-bottom:2.5rem; }
.mcp-proj { font-family:var(--mo); font-size:11px; color:var(--teal); margin-top:auto; padding-top:6px; }
.mcp-card { display:flex; flex-direction:column; gap:8px; }

/* ═══════════════════════════════════════════
   SKILL FILES SECTION
   ═══════════════════════════════════════════ */
.skill-section { margin-bottom:2.5rem; }
.skill-section-label { font-family:var(--mo); font-size:11px; color:var(--teal); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.sf { background:var(--s1); border:1px solid var(--b1); border-radius:var(--r); padding:1.25rem; transition:border-color .2s; }
.sf:hover { border-color:var(--b2); }
.sf-name { font-family:var(--mo); font-size:10.5px; color:var(--teal); margin-bottom:.75rem; padding-bottom:.75rem; border-bottom:1px solid var(--b1); }
.sf-d { font-size:12.5px; color:var(--mut); line-height:1.7; }

/* ═══════════════════════════════════════════
   SKILL MINI TAGS
   ═══════════════════════════════════════════ */
.skill-mini-row { display:flex; flex-wrap:wrap; gap:6px; }
.sm-tag { font-family:var(--mo); font-size:10px; border-radius:4px; padding:3px 9px; }
.sm-teal { background:rgba(0,201,167,.08); color:var(--teal); border:1px solid rgba(0,201,167,.2); }

/* ═══════════════════════════════════════════
   TOOL CARD ICON WRAPPERS
   ═══════════════════════════════════════════ */
.ti-wrap { width:42px; height:42px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:20px; }
.ti-v    { background:var(--purd); }
.ti-g    { background:var(--grnd); }
.ti-b    { background:var(--blud); }
.ti-d    { background:var(--s2); }
.ti-r    { background:rgba(248,113,113,.12); }
.ti-conf { background:rgba(96,165,250,.12); }
.ti-o    { background:var(--orgd); }
.ti-chaos{ background:var(--grnd); }
.ti-p    { background:var(--purd); }
.ti-t    { background:var(--td); }
.tbadge-jira { background:rgba(248,113,113,.12); color:#F87171; border-color:rgba(248,113,113,.25); }

/* ═══════════════════════════════════════════
   MISC NEW UTILS
   ═══════════════════════════════════════════ */
.mt8 { margin-top:8px; }

/* ═══════════════════════════════════════════
   RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════ */
@media(max-width:900px) {
  .dm-kpis    { grid-template-columns:repeat(2,1fr); }
  .dm-charts  { grid-template-columns:1fr 1fr; }
  .dm-filters { grid-template-columns:1fr 1fr; }
  .dm-th, .dm-tr { grid-template-columns:2fr 1fr .7fr .6fr; }
  .dm-th span:nth-child(2),.dm-tr span:nth-child(2),
  .dm-th span:nth-child(3),.dm-tr span:nth-child(3) { display:none; }
  .sc-flow  { grid-template-columns:1fr; }
  .sc-arr   { display:none; }
  .skill-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
  .dm-kpis    { grid-template-columns:repeat(2,1fr); }
  .dm-charts  { grid-template-columns:1fr; }
  .dm-filters { grid-template-columns:1fr; }
  .skill-grid { grid-template-columns:1fr; }
}