/* ============================================================
   Rohit Singh — Backend Java Developer
   Palette: near-black cool slate + Spring green. Grayscale rest.
   Type: Inter (prose) / JetBrains Mono (anything machine-generated)
   ============================================================ */

:root{
  /* Backgrounds — elevation via hairline borders, not shadows */
  --bg:         #0B0F14;
  --surface:    #121820;
  --raised:     #1A222C;
  --line:       #232D38;
  --line-hi:    #33404E;

  /* Text — all AA/AAA verified on --bg */
  --tx:         #E6EDF3;
  --tx2:        #9BA8B4;
  --tx3:        #7E8C9A;

  /* Accent — Spring green, lifted for dark bg */
  --ac:         #7DD35B;
  --ac-dim:     #6DB33F;
  --ac-wash:    rgba(125,211,91,.09);
  --ac-line:    rgba(125,211,91,.28);

  /* Semantic — data viz + diagrams ONLY */
  --amber:      #E3B341;
  --cyan:       #56C7D6;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid type — 1.25 ratio */
  --s--1: clamp(.78rem, .76rem + .1vw, .82rem);
  --s-0:  clamp(1rem, .96rem + .2vw, 1.06rem);
  --s-1:  clamp(1.15rem, 1.09rem + .3vw, 1.32rem);
  --s-2:  clamp(1.5rem, 1.34rem + .7vw, 2rem);
  --s-3:  clamp(2.3rem, 1.8rem + 2.3vw, 4rem);

  --pad:  clamp(72px, 11vh, 128px);
  --rad:  10px;
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100% }

body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:var(--s-0);
  line-height:1.65;
  font-optical-sizing:auto;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }

.mono{ font-family:var(--mono); font-variant-ligatures:none }
.muted{ color:var(--tx3) }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px) }

::selection{ background:var(--ac); color:#08110B }

:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; border-radius:3px }

.skip{
  position:absolute; left:-9999px; top:10px; z-index:200;
  background:var(--ac); color:#08110B; padding:10px 18px; border-radius:6px;
  font:600 var(--s--1)/1 var(--mono);
}
.skip:focus{ left:16px }

/* ── scroll reveal ─────────────────────────────────── */
.r{ opacity:0; transform:translateY(8px); transition:opacity .5s ease-out, transform .5s ease-out }
.r.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .r{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* ══════════════ NAV ══════════════ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(11,15,20,.72);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.hdr.stuck{ border-bottom-color:var(--line); background:rgba(11,15,20,.9) }

.hdr-in{ display:flex; align-items:center; justify-content:space-between; height:72px }

.brand{ display:flex; align-items:center; gap:11px; font-size:.95rem }
.brand-mark{
  width:34px; height:34px; flex:none;
  border-radius:8px; object-fit:cover; object-position:50% 42%;
  border:1px solid var(--ac-line); background:var(--raised);
  transition:border-color .18s, transform .18s;
}
.brand:hover .brand-mark{ border-color:var(--ac); transform:scale(1.05) }

.brand-name{ color:var(--tx2); letter-spacing:-.01em }
.brand-name b{ color:var(--tx); font-weight:600 }
.brand:hover .brand-name b{ color:var(--ac) }

.menu{ display:flex; align-items:center; gap:6px }
.menu a{
  display:block; padding:8px 13px; border-radius:6px;
  font:500 var(--s--1)/1 var(--mono); color:var(--tx3);
  transition:color .18s, background .18s;
}
.menu a:hover{ color:var(--tx); background:var(--raised) }
.menu a.on{ color:var(--ac) }

.nav-cta{
  color:var(--ac) !important;
  border:1px solid var(--ac-line); background:var(--ac-wash);
  margin-left:8px;
}
.nav-cta:hover{ background:rgba(125,211,91,.16) !important; border-color:var(--ac) }

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:40px; height:40px; padding:0 9px;
  background:none; border:1px solid var(--line); border-radius:7px; cursor:pointer;
}
.burger span{ height:1.5px; background:var(--tx); border-radius:2px; transition:transform .22s, opacity .18s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

.scroll-bar{ height:1.5px; background:var(--ac); width:0; transition:width .1s linear }

/* ══════════════ HERO ══════════════ */
.hero{ position:relative; padding:calc(72px + clamp(56px,9vh,96px)) 0 clamp(56px,8vh,88px); overflow:hidden }

.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 25%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 25%, transparent 76%);
}

.hero-in{
  position:relative; display:grid; gap:clamp(38px,6vw,72px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:500 var(--s--1)/1 var(--mono); color:var(--tx3);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:20px;
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 0 rgba(125,211,91,.5); animation:beat 2.4s infinite }
@keyframes beat{ 0%{box-shadow:0 0 0 0 rgba(125,211,91,.5)} 70%{box-shadow:0 0 0 8px rgba(125,211,91,0)} 100%{box-shadow:0 0 0 0 rgba(125,211,91,0)} }

.hero h1{
  font-size:var(--s-3); font-weight:700; line-height:1.02;
  letter-spacing:-.035em; margin-bottom:14px;
}

.role{
  font:500 var(--s-1)/1.35 var(--mono); color:var(--ac);
  letter-spacing:-.01em; margin-bottom:22px;
}
.role .sep{ color:var(--tx3); margin:0 3px }

.lede{ font-size:var(--s-1); color:var(--tx2); max-width:60ch; line-height:1.6; margin-bottom:30px }
.lede b{ color:var(--tx); font-weight:600 }

.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:8px;
  background:var(--ac); color:#08110B; border:1px solid var(--ac);
  font:600 var(--s--1)/1 var(--mono);
  transition:transform .16s ease-out, box-shadow .16s, background .16s;
}
.btn svg{ width:15px; height:15px }
.btn:hover{ background:#8FE06D; transform:translateY(-2px); box-shadow:0 8px 22px rgba(125,211,91,.22) }
.btn:active{ transform:none }

.btn.ghost{ background:transparent; color:var(--tx); border-color:var(--line-hi) }
.btn.ghost:hover{ background:var(--raised); border-color:var(--tx3); box-shadow:none }

.hero-links{ display:flex; flex-wrap:wrap; gap:8px 22px }
.hero-links a{
  display:inline-flex; align-items:center; gap:8px;
  font:400 var(--s--1)/1 var(--mono); color:var(--tx3);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.hero-links svg{ width:14px; height:14px; flex:none }
.hero-links a:hover{ color:var(--ac); border-bottom-color:var(--ac-line) }

/* photo */
.hero-photo{ position:relative; justify-self:center; width:100%; max-width:340px }
.photo-frame{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  aspect-ratio:1;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.95);
  transition:filter .5s ease;
}
.hero-photo:hover .photo-frame img{ filter:grayscale(0) contrast(1) brightness(1) }
.photo-glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(125,211,91,.16), transparent 46%, rgba(11,15,20,.5));
  mix-blend-mode:screen; transition:opacity .5s;
}
.hero-photo:hover .photo-glow{ opacity:.35 }

.photo-tag{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-15px; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line);
  font-size:.7rem; color:var(--tx2);
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--ac); animation:beat 2.4s infinite }

/* ══════════════ IMPACT ══════════════ */
.impact{ border-block:1px solid var(--line); background:var(--surface) }
.impact-in{ display:grid; grid-template-columns:repeat(4,1fr) }

.stat{ padding:clamp(28px,4vw,42px) clamp(14px,2vw,24px); border-left:1px solid var(--line) }
.stat:first-child{ border-left:0 }
.stat b{
  display:block; font-size:clamp(2rem,4.4vw,3.1rem); font-weight:700;
  color:var(--ac); line-height:1; letter-spacing:-.045em; margin-bottom:10px;
}
.stat b span{ font-size:.5em; color:var(--ac-dim); margin-left:2px; vertical-align:super }
.stat > span{ font-size:var(--s--1); color:var(--tx3); line-height:1.5 }

/* ══════════════ SECTIONS ══════════════ */
.sec{ padding-block:var(--pad); position:relative }
.sec.alt{ background:var(--surface); border-block:1px solid var(--line) }

.label{
  font-size:.72rem; font-weight:500; color:var(--tx3);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
}
.label::before{ content:""; display:inline-block; width:22px; height:1px; background:var(--ac); vertical-align:middle; margin-right:11px }

.sec-h{ font-size:var(--s-2); font-weight:700; letter-spacing:-.028em; line-height:1.15; margin-bottom:12px }
.sec-sub{ color:var(--tx3); max-width:62ch; margin-bottom:clamp(34px,5vw,54px) }

/* ── About ── */
.about-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start }
.about-copy h2{ font-size:var(--s-2); font-weight:700; letter-spacing:-.028em; line-height:1.18; margin-bottom:22px; max-width:20ch }
.about-copy p{ color:var(--tx2); max-width:64ch; margin-bottom:17px }
.about-copy p:last-child{ margin-bottom:0 }
.about-copy b{ color:var(--tx); font-weight:600 }

/* terminal */
.term{ border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; background:var(--surface) }
.sec.alt .term{ background:var(--bg) }
.term-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:var(--raised); border-bottom:1px solid var(--line);
}
.term-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-hi) }
.term-bar i:nth-child(1){ background:#E06C75 } .term-bar i:nth-child(2){ background:var(--amber) } .term-bar i:nth-child(3){ background:var(--ac-dim) }
.term-bar span{ margin-left:8px; font-size:.68rem; color:var(--tx3) }
.term-body{ padding:18px 16px; font-size:.76rem; line-height:1.75; overflow-x:auto; color:var(--tx2) }

.c-p{ color:var(--ac) } .c-k{ color:var(--cyan) } .c-s{ color:var(--amber) }
.c-n{ color:var(--ac) } .c-o{ color:var(--tx3) } .c-g{ color:var(--ac) }

/* ── Timeline ── */
.tl{ position:relative }
.tl-item{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(20px,3vw,42px);
  padding:clamp(26px,3.5vw,38px) 0; border-top:1px solid var(--line);
}
.tl-item:last-child{ border-bottom:1px solid var(--line) }

.tl-when{ display:flex; flex-direction:column; gap:7px; font-size:var(--s--1); color:var(--tx3); padding-top:3px }
.tl-now{ color:var(--ac) }
.tl-dur{
  align-self:start; padding:3px 9px; border-radius:999px;
  background:var(--raised); border:1px solid var(--line);
  font-size:.66rem; color:var(--tx3);
}

.tl-what h3{ font-size:var(--s-1); font-weight:600; letter-spacing:-.015em; margin-bottom:16px }
.tl-what .at{ color:var(--tx3); margin:0 4px; font-weight:400 }
.tl-what .co{ color:var(--ac); font-weight:500 }

.tl-pts li{
  position:relative; padding-left:20px; margin-bottom:11px;
  color:var(--tx2); font-size:.95rem; max-width:74ch;
}
.tl-pts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:1px; background:var(--ac-dim); transform:rotate(45deg);
}
.tl-pts b{ color:var(--tx); font-weight:600 }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px }
.chips li{
  padding:4px 10px; border-radius:5px;
  background:var(--raised); border:1px solid var(--line);
  font-size:.68rem; color:var(--tx3); white-space:nowrap;
  transition:color .16s, border-color .16s;
}
.chips li:hover{ color:var(--ac); border-color:var(--ac-line) }
.chips.lg li{ padding:6px 12px; font-size:.72rem }
.sec.alt .chips li{ background:var(--bg) }

/* ── Projects ── */
.proj{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:clamp(22px,3vw,38px); margin-bottom:22px;
  transition:border-color .22s;
}
.proj:hover{ border-color:var(--line-hi) }
.proj:last-child{ margin-bottom:0 }

.proj-head{ display:flex; justify-content:space-between; align-items:start; gap:28px; flex-wrap:wrap; margin-bottom:26px }
.proj-head > div{ flex:1 1 380px }
.proj-head .chips{ margin-top:0; flex:0 1 auto; max-width:340px; justify-content:flex-end }
.proj-head .chips li{ background:var(--bg) }

.proj-org{ font-size:.72rem; color:var(--tx3); letter-spacing:.05em; text-transform:uppercase; margin-bottom:9px }
.gov{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:4px;
  background:var(--ac-wash); border:1px solid var(--ac-line); color:var(--ac);
  font-size:.62rem; letter-spacing:.04em; text-transform:none;
}
.proj h3{ font-size:var(--s-1); font-weight:600; letter-spacing:-.018em; line-height:1.3; margin-bottom:11px }
.proj-prob{ color:var(--tx2); max-width:60ch; font-size:.95rem }

.proj-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,3.5vw,44px); align-items:start }

.proj-pts li{
  position:relative; padding-left:20px; margin-bottom:11px;
  color:var(--tx2); font-size:.93rem;
}
.proj-pts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:1px; background:var(--ac-dim); transform:rotate(45deg);
}
.proj-pts b{ color:var(--tx); font-weight:600 }

.tradeoff{
  margin-top:20px; padding:15px 17px; border-radius:8px;
  background:var(--bg); border:1px solid var(--line); border-left:2px solid var(--amber);
}
.tradeoff p:first-child{
  font-family:var(--mono); font-size:.66rem; color:var(--amber);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px;
}
.tradeoff p:last-child{ font-size:.88rem; color:var(--tx2); line-height:1.6 }
.tradeoff b{ color:var(--tx); font-weight:600 }

.viz-cap{ font-size:.68rem; color:var(--tx3); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px }
.viz-note{ margin-top:13px; font-size:.78rem; color:var(--tx3); line-height:1.55 }

/* before/after bars */
.bars{
  padding:20px 18px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line);
}
.bar-row{ margin-bottom:20px }
.bar-row:last-child{ margin-bottom:0 }
.bar-lbl{ display:block; font-size:.7rem; color:var(--tx3); margin-bottom:10px }
.bar-track{ display:flex; flex-direction:column; gap:7px }
.bar{
  height:30px; border-radius:5px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:10px; width:var(--w); min-width:64px;
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.in .bar, .r.in .bar{ transform:scaleX(1) }
.bar span{ font-size:.64rem; font-weight:500 }
.bar.before{ background:rgba(227,179,65,.16); border:1px solid rgba(227,179,65,.4) }
.bar.before span{ color:var(--amber) }
.bar.after{ background:rgba(125,211,91,.16); border:1px solid var(--ac-line) }
.bar.after span{ color:var(--ac) }

/* API block */
.api{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg) }
.api-tabs{ display:flex; border-bottom:1px solid var(--line); background:var(--raised) }
.api-tab{
  padding:10px 15px; background:none; border:0; cursor:pointer;
  border-bottom:1.5px solid transparent; margin-bottom:-1px;
  font:500 .68rem/1 var(--mono); color:var(--tx3);
  transition:color .16s, border-color .16s;
}
.api-tab:hover{ color:var(--tx) }
.api-tab.is-on{ color:var(--ac); border-bottom-color:var(--ac) }

.api-pane{ display:none; padding:17px 16px; font-size:.73rem; line-height:1.8; overflow-x:auto; color:var(--tx2) }
.api-pane.is-on{ display:block }
.m-get{ color:var(--cyan); font-weight:700 }
.s-ok{ color:var(--ac); font-weight:700 }
.s-err{ color:#E06C75; font-weight:700 }

/* architecture svg */
.arch{ padding:16px; border-radius:10px; background:var(--bg); border:1px solid var(--line) }
.arch svg{ width:100%; height:auto }
.arch .n rect{ fill:var(--raised); stroke:var(--line); stroke-width:1 }
.arch .n text{ fill:var(--tx2); font:500 9px var(--mono); text-anchor:middle }
.arch .e-lbl{ fill:var(--tx3); font:400 7.5px var(--mono); text-anchor:start }
.arch .api-n rect{ fill:var(--ac-wash); stroke:var(--ac-line) }
.arch .api-n .t-b{ fill:var(--ac); font-weight:700; font-size:10.5px }
.arch .api-n .t-s{ fill:var(--tx3); font-size:8px }
.arch .s3 rect,.arch .rek rect{ stroke:rgba(86,199,214,.35) }
.arch .s3 text,.arch .rek text{ fill:var(--cyan) }
.arch .db rect{ stroke:var(--line-hi) }
.arch .e{ fill:none; stroke:var(--tx3); stroke-width:1.1; opacity:.65 }
.arch .e.dash{ stroke-dasharray:3 3; stroke:var(--cyan); opacity:.5 }

/* ── Stack ── */
.stack-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.stack-card{
  padding:22px; border-radius:12px;
  background:var(--bg); border:1px solid var(--line);
  transition:border-color .2s;
}
.stack-card:hover{ border-color:var(--line-hi) }
.stack-card.wide{ grid-column:span 2 }

.stack-h{ display:flex; align-items:center; gap:9px; font-size:.72rem; color:var(--tx2); letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px }
.stack-h em{ color:var(--tx3); font-style:normal; text-transform:none; letter-spacing:0 }
.sq{ width:7px; height:7px; background:var(--ac); border-radius:1.5px; transform:rotate(45deg); flex:none }
.stack-card .chips{ margin-top:0 }
.stack-card .chips li{ background:var(--surface) }

/* ── Education ── */
.edu-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.edu{
  padding:24px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.edu:hover{ border-color:var(--ac-line); transform:translateY(-3px) }
.edu-yr{ font-size:.7rem; color:var(--ac); letter-spacing:.06em; margin-bottom:12px }
.edu h3{ font-size:1.02rem; font-weight:600; letter-spacing:-.015em; line-height:1.3; margin-bottom:8px }
.edu-in{ font-size:.84rem; color:var(--tx2); margin-bottom:10px }
.edu-note{ font-size:.8rem; color:var(--tx3); line-height:1.55 }

.certs{ margin-top:clamp(30px,4vw,48px) }
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px }
.cert{
  display:flex; align-items:center; gap:13px; padding:15px;
  border-radius:10px; background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.cert:hover{ border-color:var(--ac-line); transform:translateY(-2px) }
.cert-ic{
  display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:8px;
  background:var(--ac-wash); border:1px solid var(--ac-line); color:var(--ac);
  font:700 .74rem/1 var(--mono);
}
.cert-t{ display:block; font-size:.88rem; font-weight:500; line-height:1.35 }
.cert-m{ display:block; font-size:.72rem; color:var(--tx3); font-family:var(--mono); margin-top:3px }

/* ══════════════ CONTACT ══════════════ */
.contact{ overflow:hidden; border-top:1px solid var(--line) }
.contact-in{ position:relative; text-align:center }
.contact .label{ display:inline-block }
.contact h2{ font-size:var(--s-2); font-weight:700; letter-spacing:-.03em; margin-bottom:14px }
.contact-sub{ color:var(--tx2); max-width:52ch; margin:0 auto 34px }

.mail{
  display:inline-block; font-size:clamp(.95rem,2.4vw,1.45rem); font-weight:500;
  color:var(--ac); padding-bottom:5px; margin-bottom:44px;
  border-bottom:1px solid var(--ac-line); transition:border-color .2s, color .2s;
  word-break:break-all;
}
.mail:hover{ border-bottom-color:var(--ac); color:#8FE06D }

.contact-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:40px; text-align:left;
}
.contact-grid li{ background:var(--bg); padding:22px; display:flex; flex-direction:column; gap:7px }
.ck{ font-size:.66rem; color:var(--tx3); letter-spacing:.11em; text-transform:uppercase; margin-bottom:4px }
.contact-grid a{ font-size:.86rem; color:var(--tx2); transition:color .16s; width:fit-content; word-break:break-all }
.contact-grid a:hover{ color:var(--ac) }
.cv{ font-size:.86rem; color:var(--tx2) }
.contact .cta{ justify-content:center; margin-bottom:0 }

/* ══════════════ FOOTER ══════════════ */
.ftr{ border-top:1px solid var(--line); background:var(--surface); padding-block:26px }
.ftr-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.72rem; color:var(--tx3) }
.top-link{ color:var(--tx3); transition:color .16s }
.top-link:hover{ color:var(--ac) }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1000px){
  .hero-in{ grid-template-columns:1fr; gap:44px }
  .hero-photo{ grid-row:1; max-width:210px; justify-self:start }
  .photo-tag{ left:0; transform:none }
  .about-grid{ grid-template-columns:1fr; gap:34px }
  .proj-body{ grid-template-columns:1fr; gap:28px }
  .proj-head .chips{ justify-content:flex-start; max-width:none }
  .edu-grid{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr }
}

@media (max-width:820px){
  .burger{ display:flex }
  .menu{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px clamp(20px,5vw,40px) 22px;
    background:rgba(11,15,20,.97);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .2s ease-out, opacity .2s ease-out;
  }
  .menu.open{ transform:none; opacity:1; pointer-events:auto }
  .menu a{ padding:13px 12px; font-size:.84rem }
  .nav-cta{ margin:8px 0 0; text-align:center }

  .impact-in{ grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(3){ border-left:0 }
  .stat:nth-child(n+3){ border-top:1px solid var(--line) }

  .tl-item{ grid-template-columns:1fr; gap:14px }
  .tl-when{ flex-direction:row; align-items:center; gap:12px }
  .stack-grid{ grid-template-columns:1fr }
  .stack-card.wide{ grid-column:span 1 }
}

@media (max-width:520px){
  .hero-links{ gap:6px 16px }
  .proj{ padding:20px 16px }
  .ftr-in{ justify-content:center; text-align:center }
}

@media print{
  .hdr,.burger,.cta,.grid-bg,.ftr{ display:none }
  body{ background:#fff; color:#000 }
}