/* ─── TOKENS ─────────────────────────────────────────────────────────────── */
:root{--bg:#0a0a0a;--surface:#111111;--surface2:#181818;--border:#222222;--text:#f0ede8;--muted:#6b6762;--accent:#e8c547;--accent2:#4a9eff;--accent3:#ff6b4a;--tag-bg:#1a1a1a}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;font-size:14px;line-height:1.7;overflow-x:hidden;transition:padding-right .3s cubic-bezier(.4,0,.2,1)}
body.panel-open{padding-right:420px}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;opacity:.3;pointer-events:none;z-index:0}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 48px;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:right .3s cubic-bezier(.4,0,.2,1)}
body.panel-open nav{right:420px}
.nav-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;letter-spacing:.08em;color:var(--accent);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
/* hamburger hidden on desktop */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:110}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text);transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid;transition:all .2s;cursor:pointer}
.btn-primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--text)}

/* ─── SECTIONS ───────────────────────────────────────────────────────────── */
section{position:relative;z-index:1;padding:96px 48px}
.section-header{display:flex;align-items:baseline;gap:20px;margin-bottom:64px}
.section-num{font-size:11px;color:var(--accent);letter-spacing:.15em}
h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.01em}
h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--accent)}

/* ─── TAGS ───────────────────────────────────────────────────────────────── */
.tag{padding:3px 10px;border:1px solid var(--border);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--tag-bg)}
.tag-accent{border-color:rgba(232,197,71,.3);color:var(--accent)}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer{position:relative;z-index:1;padding:24px 48px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
footer p{font-size:11px;color:var(--muted)}

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ─── HERO (index only) ──────────────────────────────────────────────────── */
#hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:120px 48px 80px;gap:60px;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
.hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--accent)}
h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(52px,6vw,88px);line-height:.95;letter-spacing:-.02em;margin-bottom:8px}
h1 .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--accent)}
.hero-subtitle{font-family:'Syne',sans-serif;font-size:clamp(16px,2vw,22px);font-weight:600;color:var(--muted);margin-bottom:32px}
.hero-subtitle-qualifier{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:.85em;color:var(--muted);opacity:.6;letter-spacing:.01em}
.hero-desc{color:#9a9690;font-size:13px;line-height:1.8;max-width:480px;margin-bottom:44px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-left>*{opacity:0;transform:translateY(20px);animation:fadeUp .7s ease forwards}
.hero-left>*:nth-child(1){animation-delay:.1s}
.hero-left>*:nth-child(2){animation-delay:.2s}
.hero-left>*:nth-child(3){animation-delay:.3s}
.hero-left>*:nth-child(4){animation-delay:.4s}
.hero-left>*:nth-child(5){animation-delay:.5s}
.hero-right{opacity:0;animation:fadeUp .8s ease .5s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ─── TERMINAL ───────────────────────────────────────────────────────────── */
.terminal{background:var(--surface);border:1px solid var(--border);border-radius:2px;overflow:hidden;position:relative}
.terminal::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,197,71,.04) 0%,transparent 60%);pointer-events:none}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff5f56}.dot-y{background:#ffbd2e}.dot-g{background:#27c93f}
.terminal-title{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.terminal-body{padding:24px;font-size:12.5px;line-height:1.9}
.t-key{color:var(--accent2)}.t-string{color:var(--accent)}.t-num{color:var(--accent3)}.t-kw{color:#c084fc}.t-bracket{color:var(--muted)}
.t-cursor{display:inline-block;width:8px;height:14px;background:var(--accent);vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─── STATS BAR ──────────────────────────────────────────────────────────── */
.stats-bar{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat-item{padding:32px 48px;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:'Syne',sans-serif;font-weight:800;font-size:42px;line-height:1;color:var(--accent);margin-bottom:6px}
.stat-label{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

/* ─── EXPERIENCE ─────────────────────────────────────────────────────────── */
#experience{background:var(--surface)}
.exp-item{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--border)}
.exp-item:last-child{border-bottom:none}
.exp-period{font-size:11px;color:var(--accent);letter-spacing:.1em;margin-bottom:4px}
.exp-company{font-size:11px;color:var(--muted)}
.exp-role{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;margin-bottom:12px}
.exp-desc{color:#8a8682;font-size:13px;line-height:1.8;margin-bottom:16px}
.exp-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ─── PROJECTS ───────────────────────────────────────────────────────────── */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.project-card{background:var(--surface);padding:36px;position:relative;overflow:hidden;transition:background .3s}
.project-card:hover{background:var(--surface2)}
.project-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.project-card:hover::after{transform:scaleX(1)}
.project-num{font-size:10px;color:var(--border);letter-spacing:.15em;margin-bottom:20px}
.project-name{font-family:'Syne',sans-serif;font-weight:700;font-size:20px;margin-bottom:12px}
.project-desc{font-size:12px;color:#7a7672;line-height:1.8;margin-bottom:24px}
.project-metric{font-size:11px;color:var(--accent);padding-top:20px;border-top:1px solid var(--border)}

/* ─── SKILLS ─────────────────────────────────────────────────────────────── */
#skills{background:var(--surface)}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.skill-group{background:var(--surface);padding:32px}
.skill-group-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.skill-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.skill-list li{font-size:12px;color:#9a9690;display:flex;align-items:center;gap:8px}
.skill-list li::before{content:'▸';color:var(--border);font-size:10px}

/* ─── BLOG PREVIEW (index) ───────────────────────────────────────────────── */
#blog-preview{background:var(--bg)}
.blog-preview-footer{text-align:center;margin-top:48px}

/* ─── BLOG PAGE ──────────────────────────────────────────────────────────── */
.blog-page-hero{position:relative;z-index:1;padding:140px 48px 80px;border-bottom:1px solid var(--border)}
.blog-page-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.blog-page-eyebrow::before{content:'';width:32px;height:1px;background:var(--accent)}
.blog-page-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(36px,5vw,72px);line-height:.95;letter-spacing:-.02em;margin-bottom:20px}
.blog-page-title em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--accent)}
.blog-page-sub{color:var(--muted);font-size:13px;max-width:480px}
#blog-main{position:relative;z-index:1;padding:80px 48px}

/* ─── BLOG GRID (shared) ─────────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.blog-card{background:var(--surface);padding:32px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:background .3s;text-decoration:none;color:inherit}
.blog-card:hover{background:var(--surface2)}
.blog-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent2);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.blog-card:hover::after{transform:scaleX(1)}
.blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.blog-date{font-size:10px;color:var(--muted);letter-spacing:.1em}
.blog-platform{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--border);color:var(--muted)}
.blog-platform.devto{border-color:rgba(74,158,255,.3);color:var(--accent2)}
.blog-platform.linkedin{border-color:rgba(74,158,255,.3);color:var(--accent2)}
.blog-platform.medium{border-color:rgba(255,107,74,.3);color:var(--accent3)}
.blog-platform.personal{border-color:rgba(232,197,71,.3);color:var(--accent)}
.blog-title{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--text)}
.blog-excerpt{font-size:12px;color:#7a7672;line-height:1.8;flex:1}
.blog-footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border);align-items:center;justify-content:space-between}
.blog-read{font-size:11px;color:var(--accent);letter-spacing:.08em;white-space:nowrap}
.blog-empty{grid-column:1/-1;padding:80px 40px;text-align:center;background:var(--surface)}
.blog-empty-title{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;margin-bottom:12px;color:var(--muted)}
.blog-empty-sub{font-size:12px;color:var(--border)}

/* ─── CONTACT SECTION ────────────────────────────────────────────────────── */
#contact{text-align:center;padding:120px 48px}
.contact-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.contact-headline{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(42px,6vw,80px);line-height:.95;letter-spacing:-.02em;margin-bottom:20px}
.contact-headline .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--accent)}
.contact-sub{color:var(--muted);font-size:13px;margin-bottom:48px;max-width:420px;margin-left:auto;margin-right:auto}
.contact-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ─── SIDE PANEL ─────────────────────────────────────────────────────────── */
#chat-fab{position:fixed;bottom:32px;right:32px;z-index:300;width:56px;height:56px;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,right .3s cubic-bezier(.4,0,.2,1);animation:pulse-ring 2.5s ease-out infinite}
body.panel-open #chat-fab{right:calc(420px + 32px)}
#chat-fab:hover{transform:scale(1.08)}
#chat-fab.panel-open{animation:none;background:var(--surface2);border:1px solid var(--border)}
#chat-fab.panel-open svg{color:var(--muted)}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(232,197,71,.5)}70%{box-shadow:0 0 0 14px rgba(232,197,71,0)}100%{box-shadow:0 0 0 0 rgba(232,197,71,0)}}
#chat-fab svg{width:24px;height:24px;color:#0a0a0a;transition:color .2s}
#chat-window{position:fixed;top:0;right:0;bottom:0;z-index:200;width:420px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
#chat-window.open{transform:translateX(0)}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:20px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0}
.chat-header-left{display:flex;align-items:center;gap:10px}
.chat-avatar{width:32px;height:32px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:12px;color:#0a0a0a}
.chat-header-name{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;line-height:1.2}
.chat-header-status{font-size:10px;color:var(--accent);letter-spacing:.08em}
.chat-close{background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer;padding:6px 10px;font-size:14px;line-height:1;transition:all .2s}
.chat-close:hover{border-color:var(--text);color:var(--text)}
.resume-download-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:rgba(232,197,71,.08);border-bottom:1px solid var(--border);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;transition:background .2s;flex-shrink:0}
.resume-download-btn:hover{background:rgba(232,197,71,.15)}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-tab{flex:1;padding:12px 0;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px}
.panel-tab:hover{color:var(--text)}
.panel-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.panel-view{display:none;flex:1;flex-direction:column;overflow:hidden}
.panel-view.active{display:flex}
.chat-suggestions{padding:14px 16px;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--border);flex-shrink:0}
.suggestion-chip{padding:5px 12px;border:1px solid var(--border);font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);background:none;cursor:pointer;letter-spacing:.06em;transition:all .15s;white-space:nowrap}
.suggestion-chip:hover{border-color:var(--accent);color:var(--accent)}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg-bubble{padding:12px 16px;font-size:12.5px;line-height:1.75;max-width:88%}
.msg-ai .msg-bubble{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:0 4px 4px 4px}
.msg-user{flex-direction:row-reverse}
.msg-user .msg-bubble{background:rgba(232,197,71,.12);border:1px solid rgba(232,197,71,.25);color:var(--text);border-radius:4px 0 4px 4px}
.msg-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:9px;margin-top:2px}
.msg-ai .msg-icon{background:var(--accent);color:#0a0a0a}
.msg-user .msg-icon{background:var(--border);color:var(--muted)}
.typing-dots{display:flex;gap:4px;padding:4px 0;align-items:center}
.typing-dots span{width:5px;height:5px;background:var(--muted);border-radius:50%;animation:dot-bounce 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes dot-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
.chat-input-row{display:flex;border-top:1px solid var(--border);flex-shrink:0}
#chat-input{flex:1;background:transparent;border:none;outline:none;padding:16px 18px;font-family:'DM Mono',monospace;font-size:12px;color:var(--text);resize:none}
#chat-input::placeholder{color:var(--muted)}
#chat-send{padding:16px 20px;background:var(--accent);border:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;color:#0a0a0a;letter-spacing:.08em;transition:background .2s;flex-shrink:0}
#chat-send:hover{background:#f0d060}
#chat-send:disabled{opacity:.4;cursor:not-allowed}

/* ─── CONTACT FORM (panel) ───────────────────────────────────────────────── */
.contact-form{flex:1;overflow-y:auto;padding:28px 20px;display:flex;flex-direction:column;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.form-input,.form-textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:'DM Mono',monospace;font-size:12px;padding:12px 14px;outline:none;transition:border-color .2s;width:100%}
.form-input:focus,.form-textarea:focus{border-color:var(--accent)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted)}
.form-textarea{resize:vertical;min-height:120px;line-height:1.7}
.form-submit{background:var(--accent);color:#0a0a0a;border:none;font-family:'DM Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;cursor:pointer;transition:background .2s;width:100%}
.form-submit:hover{background:#f0d060}
.form-note{font-size:11px;color:var(--muted);line-height:1.6}
.form-success{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;padding:40px 20px;text-align:center}
.form-success.visible{display:flex}
.form-success-icon{width:48px;height:48px;background:rgba(232,197,71,.15);border:1px solid rgba(232,197,71,.3);display:flex;align-items:center;justify-content:center;font-size:20px}
.form-success h3{font-family:'Syne',sans-serif;font-weight:700;font-size:16px}
.form-success p{font-size:12px;color:var(--muted);line-height:1.7;max-width:280px}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  nav{padding:16px 24px}
  .nav-hamburger{display:flex}
  .nav-links{
    position:fixed;top:0;left:0;right:0;bottom:0;
    flex-direction:column;align-items:center;justify-content:center;gap:32px;
    background:rgba(10,10,10,.97);backdrop-filter:blur(16px);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:105;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:16px;letter-spacing:.15em}
  #hero{grid-template-columns:1fr;padding:100px 24px 60px}
  .hero-right{display:none}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat-item{padding:24px}
  section{padding:64px 24px}
  #blog-main{padding:40px 24px}
  .blog-page-hero{padding:100px 24px 60px}
  .exp-item{grid-template-columns:1fr;gap:12px}
  .projects-grid,.blog-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  footer{flex-direction:column;gap:12px;text-align:center}
  #chat-window{width:100vw;border-left:none}
  #chat-fab{right:16px;bottom:20px}
  body.panel-open{padding-right:0}
  body.panel-open nav{right:0}
  body.panel-open #chat-fab{right:16px}
}