*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

:root {
  --bg:    #060810; --bg1: #0c0f1a; --bg2: #121626; --bg3: #181d30;
  --line:  #1c2138; --line2: #232843;
  --a:     #5b9ef9; --a-dim: rgba(91,158,249,0.10); --a-glow: rgba(91,158,249,0.20); --a-border: rgba(91,158,249,0.22);
  --r:     #f87171; --r-dim: rgba(248,113,113,0.09); --r-border: rgba(248,113,113,0.22);
  --t:     #2dd4bf; --t-dim: rgba(45,212,191,0.09);  --t-border: rgba(45,212,191,0.22);
  --g:     #34d399; --g-dim: rgba(52,211,153,0.10);  --g-border: rgba(52,211,153,0.22);
  --v:     #a78bfa; --v-dim: rgba(167,139,250,0.09);
  --y:     #fbbf24; --y-dim: rgba(251,191,36,0.08);  --y-border: rgba(251,191,36,0.20);
  --tx:    #dde4f5; --tx2: #7d8aaa; --tx3: #434d6a;
  --sidebar-w: 68px; --chat-w: 390px; --r-lg: 16px; --r-md: 10px; --r-sm: 6px;
  --sans: 'Cabinet Grotesk', sans-serif; --mono: 'JetBrains Mono', monospace;
}

body { background:var(--bg); color:var(--tx); font-family:var(--sans); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size:28px 28px; }
body::after  { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 55% 45% at 30% 0%, rgba(91,158,249,0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 85% 100%, rgba(45,212,191,0.05) 0%, transparent 60%); }

.loader { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity 0.5s, visibility 0.5s; }
.loader.out { opacity:0; visibility:hidden; pointer-events:none; }
.loader-content { display:flex; flex-direction:column; align-items:center; gap:18px; }
.loader-logo { font-family:var(--mono); font-size:26px; font-weight:500; letter-spacing:6px; color:var(--a); }
.loader-track { width:140px; height:1px; background:var(--line2); overflow:hidden; }
.loader-bar { height:100%; width:0; background:var(--a); animation:load 1.4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes load { 0%{width:0} 70%{width:80%} 100%{width:100%} }
.loader-label { font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--tx3); }

.app { position:relative; z-index:1; display:grid; grid-template-columns:var(--sidebar-w) 1fr var(--chat-w); min-height:100vh; opacity:0; transition:opacity 0.7s ease; }
.app.ready { opacity:1; }

.sidebar { width:var(--sidebar-w); background:var(--bg1); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:20px 0 24px; position:sticky; top:0; height:100vh; z-index:20; }
.sidebar-logo { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--a); letter-spacing:3px; text-decoration:none; margin-bottom:32px; transition:opacity 0.2s; }
.sidebar-logo:hover { opacity:0.75; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; width:100%; padding:0 6px; }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; border-radius:var(--r-md); color:var(--tx3); text-decoration:none; font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; transition:all 0.18s; }
.nav-item:hover { color:var(--tx2); background:var(--bg2); }
.nav-item.active { color:var(--a); background:var(--a-dim); }
.nav-icon { width:15px; height:15px; }
.sidebar-status { margin-top:auto; }
.status-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--g); box-shadow:0 0 0 3px var(--g-dim); animation:breathe 3s ease infinite; }
.status-dot.small { width:6px; height:6px; }
@keyframes breathe { 0%,100%{box-shadow:0 0 0 3px var(--g-dim)} 50%{box-shadow:0 0 0 7px rgba(52,211,153,0)} }

.content { overflow-y:auto; max-height:100vh; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.panel { padding:72px 60px; border-bottom:1px solid var(--line); }
.panel:last-child { border-bottom:none; }
.panel-header { display:flex; align-items:baseline; gap:14px; margin-bottom:36px; }
.panel-num { font-size:11px; color:var(--tx3); }
.panel-title { font-size:22px; font-weight:800; letter-spacing:-0.6px; color:var(--tx); }
.mono-tag { font-family:var(--mono); font-size:10.5px; color:var(--tx3); }

.hero-block { margin-bottom:52px; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; padding:5px 13px; border-radius:100px; white-space:nowrap; }
.tag-green { background:var(--g-dim); border:1px solid var(--g-border); color:var(--g); }
.tag-blue  { background:var(--a-dim); border:1px solid var(--a-border); color:var(--a); }
.tag-dim   { background:var(--bg2);   border:1px solid var(--line2);    color:var(--tx3); }
.hero-name { font-size:clamp(3rem,5.5vw,4.8rem); font-weight:900; letter-spacing:-4px; line-height:1.0; color:var(--tx); margin-bottom:10px; }
.hero-title { font-family:var(--mono); font-size:13px; letter-spacing:1.5px; color:var(--a); margin-bottom:22px; }
.hero-summary { font-size:15px; line-height:1.82; color:var(--tx2); font-weight:300; max-width:580px; margin-bottom:32px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:700; padding:10px 22px; border-radius:var(--r-md); text-decoration:none; letter-spacing:0.1px; transition:all 0.18s; border:none; cursor:pointer; }
.btn-solid { background:var(--a); color:#060810; }
.btn-solid:hover { opacity:0.88; transform:translateY(-1px); }
.btn-ghost { border:1px solid var(--line2); color:var(--tx2); background:transparent; }
.btn-ghost:hover { border-color:var(--a); color:var(--tx); }

.passion-block { background:var(--bg1); border:1px solid var(--line2); border-left:2px solid var(--a); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:36px; }
.passion-label { margin-bottom:10px; }
.passion-text { font-size:14px; line-height:1.82; color:var(--tx2); font-style:italic; font-weight:300; }

.certs-block { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.cert-chip { display:inline-flex; align-items:center; gap:7px; background:var(--y-dim); border:1px solid var(--y-border); color:var(--y); font-family:var(--mono); font-size:10.5px; padding:5px 13px; border-radius:var(--r-sm); }

.security-block { background:linear-gradient(135deg,rgba(91,158,249,0.05),rgba(45,212,191,0.04)); border:1px solid var(--a-border); border-radius:var(--r-lg); padding:24px 26px; }
.security-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.security-shield { font-size:28px; flex-shrink:0; }
.security-title { font-size:15px; font-weight:700; color:var(--a); margin-bottom:3px; }
.security-sub { font-size:12px; color:var(--tx3); font-family:var(--mono); }
.security-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.s-pill { font-family:var(--mono); font-size:10px; background:var(--a-dim); color:var(--a); border:1px solid var(--a-border); border-radius:4px; padding:2px 9px; }
.security-note { font-size:12.5px; color:var(--tx3); line-height:1.7; font-family:var(--mono); }

.skills-container { display:flex; flex-direction:column; gap:28px; }
.skill-group-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.skill-group-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.skill-group-label { font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.skill-group-count { font-family:var(--mono); font-size:9px; color:var(--tx3); }
.skill-tags { display:flex; flex-wrap:wrap; gap:7px; }
.skill-tag { font-size:12.5px; font-weight:500; padding:5px 13px; border-radius:6px; cursor:default; transition:all 0.15s; user-select:none; background:var(--bg2); border:1px solid var(--line2); color:var(--tx2); }
.skill-tag:hover { color:var(--tx); border-color:var(--line); }
.skill-tag.offense  { background:var(--r-dim); border-color:var(--r-border); color:var(--r); }
.skill-tag.homelab  { background:var(--t-dim); border-color:var(--t-border); color:var(--t); }
.skill-tag.cloud    { background:var(--v-dim); border-color:rgba(167,139,250,0.22); color:var(--v); }
.skill-tag.dev      { background:var(--a-dim); border-color:var(--a-border); color:var(--a); }
.skill-tag.forensics{ background:var(--y-dim); border-color:var(--y-border); color:var(--y); }
.skill-tag.network  { background:var(--bg2);   border-color:var(--line2);    color:var(--tx2); }

.projects-container { display:flex; flex-direction:column; gap:18px; }
.project-card { background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color 0.2s, transform 0.2s; }
.project-card:hover { border-color:var(--line2); transform:translateY(-2px); }
.project-card.featured { border-color:var(--a-border); }
.project-card.featured:hover { border-color:var(--a); }
.project-card.featured::before { content:''; display:block; height:2px; background:linear-gradient(90deg,var(--a),var(--t)); }
.project-body { padding:24px 26px; }
.project-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.project-head-left { display:flex; align-items:center; gap:12px; }
.project-em { font-size:24px; line-height:1; }
.project-name { font-size:17px; font-weight:800; letter-spacing:-0.3px; margin-bottom:4px; }
.project-badges { display:flex; gap:6px; flex-wrap:wrap; }
.badge-award   { font-family:var(--mono); font-size:9.5px; font-weight:500; background:var(--y-dim); border:1px solid var(--y-border); color:var(--y); padding:2px 9px; border-radius:4px; display:inline-flex; align-items:center; gap:4px; }
.badge-status  { font-family:var(--mono); font-size:9.5px; background:var(--g-dim); border:1px solid var(--g-border); color:var(--g); padding:2px 9px; border-radius:4px; display:inline-flex; align-items:center; gap:4px; }
.badge-status .dot { width:5px; height:5px; border-radius:50%; background:var(--g); animation:breathe 3s infinite; }
.badge-research{ font-family:var(--mono); font-size:9.5px; background:var(--bg3); border:1px solid var(--line2); color:var(--tx3); padding:2px 9px; border-radius:4px; }
.project-links { display:flex; gap:10px; }
.project-link  { font-family:var(--mono); font-size:11px; color:var(--tx3); text-decoration:none; display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; border:1px solid var(--line2); transition:all 0.18s; }
.project-link:hover { color:var(--a); border-color:var(--a-border); }
.project-desc { font-size:13.5px; color:var(--tx2); line-height:1.75; margin-bottom:16px; }
.project-highlights { margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.highlight-item { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--tx2); line-height:1.6; }
.highlight-bullet { color:var(--a); font-family:var(--mono); font-size:10px; margin-top:3px; flex-shrink:0; }
.project-skills-label { font-family:var(--mono); font-size:9.5px; color:var(--tx3); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.project-tech { display:flex; flex-wrap:wrap; gap:6px; }
.tech-tag { font-family:var(--mono); font-size:10.5px; background:var(--bg2); border:1px solid var(--line2); color:var(--tx3); border-radius:4px; padding:2px 9px; }
.tech-tag.sec   { background:var(--r-dim); border-color:var(--r-border); color:var(--r); }
.tech-tag.infra { background:var(--t-dim); border-color:var(--t-border); color:var(--t); }
.tech-tag.cloud { background:var(--v-dim); border-color:rgba(167,139,250,0.22); color:var(--v); }

.exp-list { display:flex; flex-direction:column; }
.exp-row { display:grid; grid-template-columns:100px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); }
.exp-row:last-child { border-bottom:none; }
.exp-time { font-family:var(--mono); font-size:10px; color:var(--tx3); line-height:1.6; padding-top:3px; }
.exp-role { font-size:15px; font-weight:700; letter-spacing:-0.2px; margin-bottom:3px; }
.exp-company { font-family:var(--mono); font-size:11px; color:var(--a); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.exp-current { font-family:var(--mono); font-size:9px; background:var(--g-dim); border:1px solid var(--g-border); color:var(--g); padding:1px 7px; border-radius:3px; }
.exp-desc { font-size:13px; color:var(--tx2); line-height:1.72; }

.vol-list { display:flex; flex-direction:column; gap:8px; }
.vol-row { display:flex; align-items:flex-start; gap:12px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 16px; transition:border-color 0.15s; }
.vol-row:hover { border-color:var(--line2); }
.vol-icon { color:var(--a); font-family:var(--mono); font-size:12px; margin-top:1px; flex-shrink:0; }
.vol-text { flex:1; font-size:13px; line-height:1.5; }
.vol-role { font-weight:600; color:var(--tx); }
.vol-org  { color:var(--tx2); }
.vol-detail { color:var(--tx3); font-size:12px; margin-top:2px; }
.vol-period { font-family:var(--mono); font-size:9.5px; color:var(--tx3); white-space:nowrap; margin-left:auto; flex-shrink:0; }

.contact-intro { font-size:14.5px; color:var(--tx2); line-height:1.8; max-width:520px; margin-bottom:32px; font-weight:300; }
.contact-links { display:flex; flex-direction:column; gap:10px; max-width:440px; }
.contact-row { display:flex; align-items:center; gap:14px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; text-decoration:none; color:var(--tx2); transition:all 0.18s; }
.contact-row:hover { border-color:var(--a-border); color:var(--tx); transform:translateX(4px); }
.contact-icon  { font-size:18px; flex-shrink:0; }
.contact-label { font-weight:600; font-size:14px; flex:1; }
.contact-val   { font-family:var(--mono); font-size:11px; color:var(--tx3); }
.contact-row:hover .contact-val { color:var(--a); }

.chat-panel { background:var(--bg1); border-left:1px solid var(--line); display:flex; flex-direction:column; height:100vh; position:sticky; top:0; overflow:hidden; }
.chat-top { padding:16px 18px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.chat-identity { display:flex; align-items:center; gap:10px; }
.chat-avatar { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,var(--a),var(--t)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.chat-name { font-size:13px; font-weight:700; }
.chat-sub  { font-size:9.5px; color:var(--tx3); margin-top:1px; }
.chat-live { display:flex; align-items:center; gap:5px; color:var(--g); }
.chat-chips { display:flex; flex-wrap:wrap; gap:5px; padding:10px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.chip { font-family:var(--mono); font-size:9.5px; color:var(--tx3); background:transparent; border:1px solid var(--line2); border-radius:100px; padding:3px 10px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.chip:hover { border-color:var(--a); color:var(--a); }
.chat-messages { flex:1; overflow-y:auto; padding:14px 13px 6px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.chat-msg { display:flex; gap:8px; animation:rise 0.25s ease; }
@keyframes rise { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.chat-msg.user { flex-direction:row-reverse; }
.chat-msg-av { width:26px; height:26px; border-radius:7px; flex-shrink:0; font-size:12px; display:flex; align-items:center; justify-content:center; }
.chat-msg.bot  .chat-msg-av { background:linear-gradient(135deg,var(--a),var(--t)); }
.chat-msg.user .chat-msg-av { background:var(--bg2); border:1px solid var(--line2); }
.chat-bubble { max-width:87%; padding:10px 13px; font-size:12.5px; line-height:1.7; border-radius:12px; }
.chat-msg.bot  .chat-bubble { background:var(--bg2); border:1px solid var(--line); border-bottom-left-radius:3px; }
.chat-msg.user .chat-bubble { background:linear-gradient(135deg,var(--a),#7eb8fc); color:#060810; font-weight:500; border-bottom-right-radius:3px; }
.typing { display:flex; gap:4px; align-items:center; padding:10px 13px; }
.typing span { width:5px; height:5px; border-radius:50%; background:var(--tx3); animation:dot 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-compose { padding:10px 12px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }
#chat-input { flex:1; background:var(--bg2); border:1px solid var(--line2); border-radius:9px; color:var(--tx); font-family:var(--sans); font-size:12.5px; padding:9px 12px; resize:none; max-height:90px; outline:none; line-height:1.5; transition:border-color 0.18s; }
#chat-input:focus { border-color:var(--a); }
#chat-input::placeholder { color:var(--tx3); }
.chat-send { width:36px; height:36px; flex-shrink:0; background:var(--a); border:none; border-radius:9px; color:#060810; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.18s; }
.chat-send:hover { opacity:0.88; transform:scale(1.06); }
.chat-send:disabled { opacity:0.25; cursor:not-allowed; transform:none; }
.chat-send svg { width:14px; height:14px; }

@media(max-width:1120px) { :root{--chat-w:340px} .panel{padding:60px 40px} }
@media(max-width:860px)  { .app{grid-template-columns:1fr} .sidebar{display:none} .content{max-height:none} .chat-panel{height:540px;position:static;border-left:none;border-top:1px solid var(--line);width:100%} .panel{padding:48px 22px} .hero-name{letter-spacing:-3px} }