/* ================================================
   DESIGN TOKENS — Dark Editorial + Neo-Brutalist
   ================================================ */
:root {
  --ink:      #111010;       /* near-black warm base */
  --ink-2:    #1a1918;       /* card/section dark */
  --cream:    #F0E6D3;       /* warm parchment — primary text & borders */
  --cream-dim:#A89880;       /* muted cream */
  --gold:     #D4A843;       /* warm gold accent */
  --orange:   #C8522A;       /* burnt orange second accent */
  --green:    #7AB648;       /* fresh green for active status */
  --border:   rgba(240,230,211,.15);
  --shadow-cartoon: 5px 5px 0px var(--gold);  /* neo-brutalist offset shadow */

  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --nav-h: 64px;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ======= RESET ======= */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { background:var(--ink); color:var(--cream); font-family:var(--font-body); line-height:1.65; overflow-x:hidden }
body.loading { overflow:hidden }
a { text-decoration:none; color:inherit }
ul { list-style:none }
img { max-width:100%; display:block }
strong { color:var(--cream); font-weight:600 }

/* ======= LOADER ======= */
#loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none }

.loader-inner { text-align: center }

.loader-name {
  display: flex; gap: .04em; justify-content: center;
  font-family: var(--font-head); font-size: clamp(2.8rem, 9vw, 6rem);
  font-weight: 800; letter-spacing: -.04em; overflow: hidden;
}
.loader-name span {
  display: inline-block;
  transform: translateY(110%);
}
body.fonts-loaded .loader-name span {
  animation: loader-rise .65s var(--ease) forwards;
}
body.fonts-loaded .loader-name span:nth-child(1){animation-delay:.05s}
body.fonts-loaded .loader-name span:nth-child(2){animation-delay:.10s}
body.fonts-loaded .loader-name span:nth-child(3){animation-delay:.15s}
body.fonts-loaded .loader-name span:nth-child(4){animation-delay:.20s}
body.fonts-loaded .loader-name span:nth-child(5){animation-delay:.25s}
body.fonts-loaded .loader-name span:nth-child(6){animation-delay:.30s}
body.fonts-loaded .loader-name span:nth-child(7){animation-delay:.35s}
body.fonts-loaded .loader-name span:nth-child(8){animation-delay:.40s}
@keyframes loader-rise { to { transform: translateY(0) } }

.loader-tagline {
  color: var(--gold); font-size: .72rem; letter-spacing: .2em;
  margin-top: .8rem;
  opacity: 0; animation: ldr-fade .5s .65s forwards;
}
.loader-bar {
  width: 180px; height: 2px; background: var(--border);
  margin: 1.6rem auto 0; border-radius: 1px; overflow: hidden;
}
.loader-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange));
  width: 0; animation: ldr-progress 1.3s var(--ease) .5s forwards;
  border-radius: 1px;
}
@keyframes ldr-progress { to { width: 100% } }
@keyframes ldr-fade     { to { opacity: 1 } }

/* ======= HELPERS ======= */
.mono { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em }
.container { max-width:1160px; margin:0 auto; padding:0 3rem }
.section-label { font-family:var(--font-mono); font-size:.72rem; color:var(--gold); letter-spacing:.15em; text-transform:uppercase; margin-bottom:1rem }
.section-heading { font-family:var(--font-head); font-size:clamp(2.4rem,5vw,4rem); font-weight:800; line-height:1.0; letter-spacing:-.03em; margin-bottom:2.5rem }

/* ======= SCROLL BAR ======= */
#scroll-bar { position:fixed; top:0; left:0; height:3px; width:0; background:var(--gold); z-index:9999; transition:width .1s linear }

/* ======= SECTION COUNTER ======= */
#sec-counter {
  position: fixed; right: 2rem; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: 0; transition: opacity .5s;
}
#sec-counter.visible { opacity: 1 }
#sec-cur {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 800;
  color: var(--gold); line-height: 1;
  transition: transform .35s var(--ease), opacity .35s;
}
#sec-cur.flip { transform: translateY(-8px); opacity: 0 }
.sec-divider {
  width: 1px; height: 32px; background: var(--border);
}
#sec-tot {
  font-family: var(--font-mono); font-size: .65rem; color: var(--cream-dim); letter-spacing: .05em;
}
#sec-name {
  font-family: var(--font-mono); font-size: .6rem; color: var(--gold);
  letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl;
  margin-top: .4rem;
  transition: opacity .3s;
}
@media(max-width:960px){ #sec-counter { display: none } }

/* ======= NAV ======= */
#nav { position:fixed; top:0; left:0; right:0; z-index:1000; border-bottom:1px solid transparent; transition:background .3s, border-color .3s }
#nav.scrolled { background:rgba(17,16,16,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:var(--border) }
.nav-wrap { display:flex; align-items:center; gap:1.5rem; max-width:1400px; margin:0 auto; padding:0 2.5rem; height:var(--nav-h) }
.nav-name { font-family:var(--font-head); font-weight:700; font-size:.95rem; white-space:nowrap }
.nav-role { font-family:var(--font-mono); font-size:.65rem; color:var(--cream-dim); letter-spacing:.1em; margin-right:auto }
.nav-links { display:flex; gap:2rem; align-items:center }
.nav-links a { font-size:.85rem; color:var(--cream-dim); transition:color .2s }
.nav-links a:hover { color:var(--cream) }
.nav-resume { border:1.5px solid var(--gold); color:var(--gold) !important; padding:.35rem .9rem; border-radius:4px; transition:background .2s !important }
.nav-resume:hover { background:var(--gold); color:var(--ink) !important }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.burger span { display:block; width:22px; height:2px; background:var(--cream); border-radius:1px; transition:.3s }
.mobile-menu { display:none; flex-direction:column; padding:1.5rem 2.5rem; gap:1.2rem; border-top:1px solid var(--border); background:rgba(17,16,16,.97) }
.mobile-menu.open { display:flex }
.mobile-menu a { font-size:1.05rem; color:var(--cream-dim) }
.mobile-menu a:hover { color:var(--cream) }

/* ======= HERO ======= */
#hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 2rem) 3rem 4rem; position:relative; overflow:hidden }
#hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 60% 40%, rgba(212,168,67,.06), transparent 65%); pointer-events:none; transform:translateY(var(--prlx,0px)); will-change:transform }

.hero-available { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.72rem; color:var(--gold); letter-spacing:.08em; margin-bottom:2rem }
.avail-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse-dot 2s infinite }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(122,182,72,.5)} 50%{box-shadow:0 0 0 6px rgba(122,182,72,0)} }

.hero-eyebrow { display:flex; align-items:center; gap:1.5rem; margin-bottom:1.5rem }
.eyebrow-line { flex:1; height:1px; background:var(--border); max-width:200px }

/* Typewriter */
.tw-wrap { display:inline-flex; align-items:center; min-width:14ch }
.tw-cursor {
  display:inline-block; color:var(--gold); margin-left:1px;
  animation: tw-blink .75s step-end infinite;
  font-weight: 400;
}
@keyframes tw-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-headline { margin-bottom:3rem }
.hl-row { overflow:hidden; line-height:1 }
.hl-word { display:inline-block; font-family:var(--font-head); font-size:clamp(3rem,8vw,7.5rem); font-weight:800; letter-spacing:-.04em; line-height:.9; transform:translateY(110%); animation:word-rise .9s var(--ease) forwards }
.hl-word.outline { -webkit-text-stroke:2px var(--cream); color:transparent }
.hl-amp { display:inline-block; font-family:var(--font-head); font-size:clamp(3rem,7vw,6.5rem); font-weight:300; color:var(--gold); margin-left:1.5rem; vertical-align:middle; transform:translateY(110%); animation:word-rise .9s var(--ease) forwards }
.hl-row-1 .hl-word { animation-delay:.05s }
.hl-row-2 .hl-word { animation-delay:.15s }
.hl-row-2 .hl-amp  { animation-delay:.2s }
.hl-row-3 .hl-word { animation-delay:.25s }
.hl-row-4 .hl-word { animation-delay:.35s }
@keyframes word-rise { to { transform:translateY(0) } }

.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.hero-desc { font-size:1rem; color:var(--cream-dim); line-height:1.7; max-width:320px }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap }
.cta-primary { background:var(--gold); color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:.9rem; padding:.8rem 2rem; border-radius:4px; transition:transform .2s, box-shadow .2s; box-shadow:4px 4px 0 var(--orange) }
.cta-primary:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--orange) }
.cta-ghost { border:1.5px solid var(--cream); color:var(--cream); font-family:var(--font-head); font-weight:600; font-size:.9rem; padding:.8rem 2rem; border-radius:4px; transition:background .2s, color .2s }
.cta-ghost:hover { background:var(--cream); color:var(--ink) }

.hero-scroll-hint { position:absolute; bottom:2rem; right:3rem; font-family:var(--font-mono); font-size:.7rem; color:var(--cream-dim); letter-spacing:.12em; animation:float-hint 3s ease-in-out infinite }
@keyframes float-hint { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ======= MARQUEE ======= */
.marquee-wrap { background:var(--gold); overflow:hidden; padding:.7rem 0; border-top:2px solid var(--orange); border-bottom:2px solid var(--orange) }
.marquee-track { display:flex; gap:2rem; width:max-content; animation:marquee 28s linear infinite }
@keyframes marquee { to { transform:translateX(-50%) } }
.marquee-track span { font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--ink); white-space:nowrap }

/* ======= REVEAL ======= */
.reveal { opacity:0; will-change:opacity,transform }
.reveal[data-anim="fade-up"]    { transform:translateY(50px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal[data-anim="fade-right"] { transform:translateX(-50px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal[data-anim="fade-left"]  { transform:translateX(50px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.visible { opacity:1; transform:none }

/* ======= ABOUT ======= */
#about { padding:7rem 0; background:var(--ink-2); border-top:1px solid var(--border) }
.about-wrap { max-width:1160px; margin:0 auto; padding:0 3rem; display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; align-items:center }
.about-left .section-heading { margin-bottom:1.5rem }
.about-body { color:var(--cream-dim); margin-bottom:1rem; line-height:1.8; font-size:.95rem }
.stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:2.5rem }
.stat-box {
  position: relative;
  border:2px solid var(--cream); padding:1.4rem .8rem 1.2rem; border-radius:4px;
  text-align:center; box-shadow:4px 4px 0 var(--gold);
  transition:transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  overflow: hidden;
}
.stat-box:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--gold) }
.stat-accent-line {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  border-radius: 4px 4px 0 0;
}
.stat-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .1rem;
}
.stat-n {
  display: block; font-family: var(--font-head); font-size: 2rem;
  font-weight: 800; color: var(--gold); line-height: 1;
  text-shadow: 0 0 24px rgba(212,168,67,.35);
}
.stat-text {
  display: block; font-family: var(--font-head); font-size: 1.6rem;
  font-weight: 800; color: var(--gold); line-height: 1;
  text-shadow: 0 0 24px rgba(212,168,67,.35);
}
.stat-shield {
  display: block; font-size: 1.8rem; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(212,168,67,.35);
}
.stat-box--secure { border-color: var(--cream); box-shadow: 4px 4px 0 var(--gold) }
.stat-box--secure:hover { box-shadow: 6px 6px 0 var(--gold) }
.stat-box--secure .stat-accent-line { background: linear-gradient(90deg, var(--gold), var(--orange)) }
.stat-box--secure .stat-tag { color: var(--orange) }
.stat-l {
  font-size: .82rem; color: var(--cream-dim); font-family: var(--font-body);
  letter-spacing: .01em; line-height: 1.4; text-align: center; font-weight: 500;
}

.about-right { display:flex; justify-content:center }
.avatar-frame { position:relative; width:340px }
.avatar-frame img { width:100%; border-radius:8px; border:3px solid var(--cream); position:relative; z-index:1 }
.avatar-shadow { position:absolute; inset:0; background:var(--gold); border-radius:8px; transform:translate(10px,10px); z-index:0 }

/* ======= SKILLS ======= */
#skills { padding:7rem 0 }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; margin-top:1rem }
.skill-card { background:var(--ink-2); border:2px solid var(--border); border-radius:4px; padding:1.8rem; transition:border-color .3s, box-shadow .3s, transform .3s; animation-delay:var(--di,0s) }
.skill-card:hover { border-color:var(--gold); box-shadow:5px 5px 0 var(--gold); transform:translate(-3px,-3px) }
.skill-card-num { font-family:var(--font-mono); font-size:.7rem; color:var(--gold); margin-bottom:.8rem; letter-spacing:.1em }
.skill-card h3 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; margin-bottom:1rem }
.skill-pills { display:flex; flex-wrap:wrap; gap:.5rem }
.skill-pills span { font-size:.72rem; font-family:var(--font-mono); background:rgba(240,230,211,.06); border:1px solid rgba(240,230,211,.18); color:var(--cream-dim); padding:.28rem .65rem; border-radius:3px; transition:background .2s, color .2s, border-color .2s }
.skill-pills span:hover { background:var(--gold); color:var(--ink); border-color:var(--gold) }

/* ======= PROJECTS ======= */
#projects {
  padding:7rem 0;
  border-top:1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(212,168,67,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 80% 70%, rgba(200,82,42,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(122,182,72,.07) 0%, transparent 55%),
    var(--ink-2);
}
.proj-list { max-width:1160px; margin:0 auto; padding:0 3rem; display:flex; flex-direction:column; gap:1.5rem }

/* Glass card base */
.proj-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 2rem;
  align-items: start;
  padding: 2.2rem 2rem;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Frosted glass */
  background: rgba(26, 25, 24, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Gradient border via pseudo element */
  border: 1px solid rgba(240,230,211,.1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  will-change: transform;
}
/* Top-left glass highlight */
.proj-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,168,67,.07) 0%, transparent 55%);
  pointer-events: none;
}
/* Bottom glow line */
.proj-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.proj-item:hover {
  border-color: rgba(212,168,67,.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 0 0 1px rgba(212,168,67,.15),
    inset 0 1px 0 rgba(240,230,211,.08);
}
.proj-item:hover::after { opacity: 1 }

.proj-number { font-family:var(--font-mono); font-size:2rem; font-weight:700; color:rgba(240,230,211,.1); line-height:1; padding-top:.5rem }
.proj-header { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem }
.proj-title { font-family:var(--font-head); font-size:1.6rem; font-weight:800; letter-spacing:-.02em }
.proj-status-pill { font-family:var(--font-mono); font-size:.65rem; padding:.25rem .6rem; border-radius:100px; letter-spacing:.06em }
.proj-status-pill.active { background:rgba(122,182,72,.12); border:1px solid rgba(122,182,72,.35); color:var(--green) }
.proj-status-pill.done { background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.3); color:var(--gold) }
.proj-desc { color:var(--cream-dim); font-size:.9rem; line-height:1.75; margin-bottom:1rem; max-width:600px }
.proj-metrics-row { display:flex; gap:1.5rem; margin-bottom:1rem; flex-wrap:wrap }
.pm { font-size:.82rem; color:var(--cream-dim) }
.pm strong { color:var(--gold) }
.proj-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem }
.proj-tags span {
  font-family:var(--font-mono); font-size:.68rem; color:var(--cream-dim); padding:.2rem .55rem; border-radius:3px;
  background: rgba(240,230,211,.05);
  border: 1px solid rgba(240,230,211,.12);
  transition: background .2s, border-color .2s, color .2s;
}
.proj-tags span:hover { background:rgba(212,168,67,.15); border-color:rgba(212,168,67,.4); color:var(--gold) }
.proj-date { color:var(--cream-dim); font-size:.68rem }
.proj-link-btn { display:inline-flex; align-items:center; white-space:nowrap; background:transparent; border:1.5px solid rgba(240,230,211,.35); color:var(--cream); font-family:var(--font-head); font-weight:700; font-size:.85rem; padding:.6rem 1.3rem; border-radius:6px; transition:background .25s,color .25s,box-shadow .25s,border-color .25s; margin-top:.5rem; backdrop-filter:blur(4px) }
.proj-link-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--ink); box-shadow:0 4px 20px rgba(212,168,67,.35) }

/* ======= EDUCATION ======= */
#education { padding:7rem 0 }
.edu-list { display:flex; flex-direction:column; gap:0; margin-top:1rem }
.edu-item { display:grid; grid-template-columns:120px 1fr auto; gap:2rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--border) }
.edu-year { color:var(--gold) }
.edu-info h3 { font-family:var(--font-head); font-size:1.2rem; font-weight:700; margin-bottom:.3rem }
.edu-grade { font-family:var(--font-mono); font-size:.72rem; color:var(--gold); border:1px solid rgba(212,168,67,.4); padding:.15rem .5rem; border-radius:3px; vertical-align:middle; margin-left:.6rem; font-weight:400 }
.edu-info span { font-size:.85rem; color:var(--cream-dim) }
.edu-badge { border:2px solid var(--gold); color:var(--gold); font-family:var(--font-head); font-weight:800; font-size:.8rem; padding:.4rem .9rem; border-radius:4px; box-shadow:3px 3px 0 var(--gold) }

/* ======= RESUME CTA ======= */
#resume { padding:6rem 0; background:var(--ink-2); border-top:1px solid var(--border) }

.resume-cta-block {
  display:flex; align-items:center; justify-content:space-between;
  gap:3rem; flex-wrap:wrap; padding:3.5rem;
  border:2px solid var(--cream); border-radius:6px;
  box-shadow:8px 8px 0 var(--gold); background:var(--ink);
}
.rcta-text p { color:var(--cream-dim); max-width:380px; margin-top:.5rem; line-height:1.7 }
.rcta-text .section-heading { margin-bottom:.5rem }
.big-dl-btn { display:inline-flex; align-items:center; gap:.8rem; background:var(--gold); color:var(--ink); font-family:var(--font-head); font-weight:800; font-size:1.05rem; padding:1rem 2.2rem; border-radius:4px; box-shadow:5px 5px 0 var(--orange); transition:transform .2s, box-shadow .2s; white-space:nowrap }
.big-dl-btn:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--orange) }


/* ======= CONTACT ======= */
#contact { padding:7rem 0 }
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start; margin-top:1rem }
.contact-form { display:flex; flex-direction:column; gap:1.2rem }
.fg { display:flex; flex-direction:column; gap:.45rem }
.fg label { font-family:var(--font-mono); font-size:.72rem; color:var(--cream-dim); letter-spacing:.07em }
.fg input,.fg textarea { background:var(--ink-2); border:1.5px solid var(--border); border-radius:4px; padding:.8rem 1rem; color:var(--cream); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color .2s; resize:vertical }
.fg input::placeholder,.fg textarea::placeholder { color:rgba(168,152,128,.5) }
.fg input:focus,.fg textarea:focus { border-color:var(--gold) }
.form-submit-btn { background:var(--cream); color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:.95rem; padding:.9rem; border:none; border-radius:4px; cursor:pointer; box-shadow:4px 4px 0 var(--gold); transition:transform .2s, box-shadow .2s }
.form-submit-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--gold) }
.form-submit-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:4px 4px 0 var(--gold) }
.form-status { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; min-height:1.2em; margin-top:.2rem }
.form-status--ok  { color:var(--green) }
.form-status--err { color:var(--orange) }

.contact-aside-text { color:var(--cream-dim); font-size:.92rem; line-height:1.75; margin-bottom:2rem }
.social-list { display:flex; flex-direction:column; gap:.8rem }
.social-item { display:flex; align-items:center; gap:1rem; border:1.5px solid var(--border); border-radius:4px; padding:.8rem 1rem; font-size:.85rem; color:var(--cream-dim); transition:border-color .2s, color .2s, box-shadow .2s, transform .2s }
.social-item:hover { border-color:var(--gold); color:var(--cream); box-shadow:3px 3px 0 var(--gold); transform:translate(-2px,-2px) }
.social-icon { font-family:var(--font-mono); font-size:.8rem; color:var(--gold); min-width:20px; text-align:center }

/* ======= FOOTER ======= */
footer { border-top:1px solid var(--border); padding:2rem 3rem }
.footer-wrap { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.footer-name,.footer-stack { font-size:.72rem; color:var(--cream-dim) }
.back-top { font-family:var(--font-mono); font-size:.75rem; color:var(--cream-dim); border:1.5px solid var(--border); padding:.4rem .9rem; border-radius:3px; transition:color .2s, border-color .2s }
.back-top:hover { color:var(--gold); border-color:var(--gold) }

/* ======= RESPONSIVE ======= */
@media(max-width:960px){
  .about-wrap { grid-template-columns:1fr; gap:3rem }
  .about-right { order:-1 }
  .avatar-frame { width:260px; margin:0 auto }
  .contact-grid { grid-template-columns:1fr }
  .resume-cta-block { flex-direction:column; align-items:flex-start }
  .proj-item { grid-template-columns: 40px 1fr; padding: 1.8rem 1.4rem; }
  .proj-item:hover { transform: none; }
  .proj-link-btn { grid-column: 2 }
}
@media(max-width:680px){
  .nav-links { display:none }
  .burger { display:flex }
  #hero { padding-left:1.5rem; padding-right:1.5rem }
  .hero-scroll-hint { display:none }
  .container,.proj-list,.about-wrap { padding-left:1.5rem; padding-right:1.5rem }
  .edu-item { grid-template-columns:1fr; gap:.5rem }
  .edu-badge { width:fit-content }
  .resume-cta-block { padding:2rem }
  footer { padding:1.5rem }
  .stat-row { grid-template-columns:repeat(2,1fr) }
}