/* =========================================================
   Harshit Singhal — Portfolio
   Concept: AI automation canvas / node-graph terminal
   ========================================================= */

:root{
  --bg:        #08090b;
  --bg-2:      #0b0d10;
  --surface:   #101318;
  --surface-2: #161a21;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --text:      #ECEEF1;
  --muted:     #8b929c;
  --muted-2:   #5b626c;

  --accent:    #c9f24d;          /* electric lime — "signal / automated" */
  --accent-d:  #a6d52f;
  --accent-glow: rgba(201,242,77,.45);
  --blue:      #5d7bff;          /* data / input */
  --green:     #57e2a3;          /* validated output */

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

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

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width:900px){ body{ cursor:auto; } }

::selection{ background: var(--accent); color:#0a0b0c; }

a{ color:inherit; text-decoration:none; }
strong{ color:#fff; font-weight:600; }
em{ font-style:normal; color:var(--accent); }

/* ---------- grain + scroll progress ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:9999;
  background:linear-gradient(90deg,var(--blue),var(--accent));
  box-shadow:0 0 12px var(--accent-glow);
}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--line-2);
  border-radius:50%; z-index:9997; pointer-events:none; transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s;
  mix-blend-mode:difference;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:5px; height:5px; background:var(--accent); border-radius:50%;
  z-index:9997; pointer-events:none; transform:translate(-50%,-50%);
}
.cursor.is-hover{ width:64px; height:64px; border-color:var(--accent); background:rgba(201,242,77,.06); }
@media (max-width:900px){ .cursor,.cursor-dot{ display:none; } }

/* ---------- reveal animations ---------- */
.reveal,.reveal-up{ opacity:0; }
.reveal{ transform:translateY(14px); transition:opacity .8s var(--ease-out) var(--d,0s), transform .8s var(--ease-out) var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
.reveal-up{ transform:translateY(34px); transition:opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s); }
.reveal-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-up{ opacity:1!important; transform:none!important; }
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(18px,4vw,46px);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,9,11,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding-top:14px; padding-bottom:14px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:14px; }
.nav__mark{
  width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  background:var(--accent); color:#0a0b0c; font-family:var(--font-display); font-weight:800; font-size:18px;
  box-shadow:0 0 18px var(--accent-glow);
}
.nav__name{ letter-spacing:.02em; }
.nav__links{ display:flex; gap:30px; font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.nav__links a{ position:relative; transition:color .25s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:30px; color:var(--text);
  transition:background .3s,border-color .3s,color .3s;
}
.nav__cta:hover{ background:var(--accent); color:#0a0b0c; border-color:var(--accent); }
@media (max-width:760px){ .nav__links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:120px clamp(18px,4vw,46px) 80px; overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 78%);
  opacity:.5;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, transparent 40%, var(--bg) 100%);
}
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; }

.hero__status{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:30px;
  padding:7px 15px 7px 12px; border:1px solid var(--line-2); border-radius:30px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted); background:rgba(16,19,24,.5);
  backdrop-filter:blur(6px);
}
.hero__status .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 var(--green); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(87,226,163,.55);} 70%{ box-shadow:0 0 0 8px rgba(87,226,163,0);} 100%{ box-shadow:0 0 0 0 rgba(87,226,163,0);} }

.hero__title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2.6rem,8.5vw,6.6rem); line-height:.98; color:#fff;
}
.hero__title .line{ display:block; }
.rotator{
  display:inline-block; position:relative; color:var(--accent);
  text-shadow:0 0 38px var(--accent-glow);
}
.rotator__word{ display:inline-block; }

.hero__lede{
  max-width:none; width:min(620px,100%); margin-top:30px;
  font-size:clamp(1.02rem,1.7vw,1.28rem); color:var(--muted); line-height:1.6;
}
.hero__lede strong{ color:var(--text); }

.hero__actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:14px;
  padding:14px 24px; border-radius:12px; transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn--primary{ background:var(--accent); color:#0a0b0c; font-weight:600; box-shadow:0 0 0 0 var(--accent-glow); }
.btn--primary:hover{ box-shadow:0 14px 40px -8px var(--accent-glow); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:46px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2);
}
.hero__meta-item .k{ color:var(--accent-d); margin-right:8px; }

.hero__scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll-line{ width:1px; height:38px; background:linear-gradient(var(--accent),transparent); animation:scrolldown 2s infinite; transform-origin:top; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- MARQUEE ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--bg-2); padding:18px 0; }
.marquee__track{ display:flex; align-items:center; gap:34px; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2.4vw,1.7rem); color:var(--text); }
.marquee__track i{ color:var(--accent); font-style:normal; font-size:.9rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- shared section bits ---------- */
section{ position:relative; }
.about,.workflow,.work,.projects,.stack,.testimonial{
  max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,150px) clamp(18px,4vw,46px);
}
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--accent-d); text-transform:uppercase; }
.eyebrow__bar{ width:26px; height:1px; background:var(--accent); display:inline-block; }
.section-head{ margin-bottom:62px; max-width:760px; }
.section-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-.02em; margin-top:20px; color:#fff; }
.section-sub{ color:var(--muted); margin-top:18px; font-size:1.06rem; max-width:600px; }

/* ---------- ABOUT ---------- */
.about__lead{ margin-bottom:70px; }
.about__big{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.22; letter-spacing:-.01em; margin-top:24px; color:#cfd3d8; max-width:980px; }
.about__big .hl{ color:#fff; background:linear-gradient(transparent 62%, rgba(201,242,77,.22) 0); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stat{ background:var(--bg); padding:34px 26px; }
.stat__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--accent); letter-spacing:-.02em; line-height:1; }
.stat__label{ color:var(--muted); font-size:.92rem; margin-top:14px; }
@media (max-width:780px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .stats{ grid-template-columns:1fr; } }

/* ---------- WORKFLOW ---------- */
.workflow{ max-width:1280px; }
.flow{
  position:relative; display:grid; grid-template-columns:1.15fr .9fr .8fr 1.15fr; gap:clamp(26px,5vw,68px);
  align-items:center; padding:40px 8px; border:1px solid var(--line); border-radius:20px;
  background:
    linear-gradient(rgba(11,13,16,.6),rgba(11,13,16,.6)),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size:auto, 26px 26px;
  overflow:hidden;
}
.flow__wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.flow__stage{ position:relative; z-index:2; display:flex; flex-direction:column; gap:18px; }
.flow__stage--center{ align-self:center; }
.flow__stage-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px; padding-left:2px; }

.node{
  position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  padding:15px 16px; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  opacity:0; transform:translateY(16px) scale(.96);
}
.flow.in .node{ opacity:1; transform:none; }
.flow.in .node{ transition-delay:calc(var(--ni,0) * .09s); }
.node:hover{ border-color:var(--accent); box-shadow:0 16px 50px -18px rgba(0,0,0,.7); transform:translateY(-4px); }
.node__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.node__ico{ font-size:18px; filter:saturate(1.1); }
.node__tag{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:3px 8px; border:1px solid var(--line); border-radius:20px; }
.node__title{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; line-height:1.15; }
.node__desc{ font-size:.84rem; color:var(--muted); margin-top:5px; }
.node__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.node__chips span{ font-family:var(--font-mono); font-size:10px; color:var(--accent-d); padding:3px 8px; border:1px solid rgba(201,242,77,.28); border-radius:20px; background:rgba(201,242,77,.05); }

.node[data-color="blue"]{ border-left:2px solid var(--blue); }
.node[data-color="green"]{ border-left:2px solid var(--green); }
.node[data-color="lime"]{ border-left:2px solid var(--accent); }
.node--hero{ background:linear-gradient(160deg,#161a21,#0e1116); box-shadow:0 0 60px -28px var(--accent-glow); }

.node__port{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--surface-2); border:1.5px solid var(--line-2); top:50%; transform:translateY(-50%); z-index:3; }
.node__port--in{ left:-5px; }
.node__port--out{ right:-5px; }
.node--hero .node__port{ border-color:var(--accent); }

/* wires */
.wire{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:1.4; }
.wire--lit{ stroke:url(#wireGrad); stroke-width:1.6; stroke-dasharray:7 9; animation:dash 1.1s linear infinite; opacity:.9; }
@keyframes dash{ to{ stroke-dashoffset:-32; } }
.pulse{ fill:var(--accent); filter:drop-shadow(0 0 6px var(--accent-glow)); }

.flow__note{ text-align:center; color:var(--muted); font-family:var(--font-mono); font-size:13px; margin-top:34px; }

@media (max-width:860px){
  .flow{ grid-template-columns:1fr; gap:26px; }
  .flow__wires{ display:none; }
  .flow__stage--center{ align-self:stretch; }
}

/* ---------- EXPERIENCE ---------- */
.exp{ display:grid; grid-template-columns:240px 1fr; gap:30px; padding:38px 0; border-top:1px solid var(--line); }
.exp:last-of-type{ border-bottom:1px solid var(--line); }
.exp__time{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-mono); font-size:13px; }
.exp__years{ color:var(--text); }
.exp__where{ color:var(--muted-2); }
.exp__role{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.exp__role h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.8rem); color:#fff; }
.exp__co{ font-family:var(--font-mono); font-size:13px; color:var(--accent); padding:4px 11px; border:1px solid rgba(201,242,77,.3); border-radius:20px; }
.exp__list{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.exp__list li{ position:relative; padding-left:22px; color:var(--muted); font-size:1rem; }
.exp__list li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border:1.5px solid var(--accent); border-radius:2px; transform:rotate(45deg); }
@media (max-width:680px){ .exp{ grid-template-columns:1fr; gap:16px; } }

/* ---------- PROJECTS ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.proj{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:32px; overflow:hidden; transition:border-color .4s, transform .5s var(--ease), box-shadow .5s;
  transform-style:preserve-3d;
}
.proj--wide{ grid-column:1 / -1; }
.proj:hover{ border-color:var(--line-2); box-shadow:0 30px 80px -40px rgba(0,0,0,.9); }
.proj__index{ font-family:var(--font-mono); font-size:12px; color:var(--accent-d); margin-bottom:18px; }
.proj__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.proj__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.7vw,1.95rem); color:#fff; line-height:1.1; letter-spacing:-.01em; }
.proj__year{ font-family:var(--font-mono); font-size:12px; color:var(--muted-2); white-space:nowrap; }
.proj__desc{ color:var(--muted); margin-top:16px; font-size:1rem; max-width:62ch; }
.proj__stack{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.proj__stack span{ font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:5px 11px; border:1px solid var(--line); border-radius:20px; transition:color .3s,border-color .3s; }
.proj:hover .proj__stack span{ border-color:var(--line-2); }
.proj__link{ display:inline-block; margin-top:20px; font-family:var(--font-mono); font-size:13px; color:var(--accent); transition:gap .3s; }
.proj__link:hover{ text-decoration:underline; text-underline-offset:4px; }
.proj__glow{ position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,var(--accent-glow),transparent 70%); opacity:0; filter:blur(40px); pointer-events:none; transition:opacity .4s; z-index:0; left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%); }
.proj:hover .proj__glow{ opacity:.14; }
.proj > *{ position:relative; z-index:1; }
@media (max-width:720px){ .proj-grid{ grid-template-columns:1fr; } .proj{ padding:26px; } }

/* ---------- STACK ---------- */
.stack__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.stack__col{ background:var(--bg); padding:30px 24px; transition:background .4s; }
.stack__col:hover{ background:var(--surface); }
.stack__cat{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.stack__list{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.stack__list li{ font-size:.95rem; color:var(--muted); padding-left:16px; position:relative; }
.stack__list li::before{ content:"›"; position:absolute; left:0; color:var(--accent-d); }
@media (max-width:880px){ .stack__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stack__grid{ grid-template-columns:1fr; } }

/* ---------- TESTIMONIAL VIDEO ---------- */
.vid{ position:relative; border-radius:20px; }
.vid__media{ width:100%; aspect-ratio:16/9; border-radius:18px; border:1px solid var(--line); display:block; background:#000; }
.vid__placeholder{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-2); background:linear-gradient(160deg,#0d1014,#0a0b0d);
  display:grid; place-items:center; transition:border-color .4s, transform .4s var(--ease);
}
.vid__placeholder:hover{ border-color:var(--accent); }
.vid__grid{ position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 80%); mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 80%); }
.vid__play{
  position:relative; width:78px; height:78px; border-radius:50%; display:grid; place-items:center; color:#0a0b0c;
  background:var(--accent); box-shadow:0 0 50px -6px var(--accent-glow); transition:transform .35s var(--ease); z-index:2;
}
.vid__play::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid var(--accent); opacity:.5; animation:ring 2.4s ease-out infinite; }
@keyframes ring{ 0%{ transform:scale(.9); opacity:.6; } 100%{ transform:scale(1.5); opacity:0; } }
.vid__placeholder:hover .vid__play{ transform:scale(1.08); }
.vid__caption{ position:absolute; bottom:26px; left:28px; z-index:2; text-align:left; }
.vid__badge{ font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:.05em; }
.vid__caption p{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2.4vw,1.5rem); color:#fff; margin-top:6px; }
.vid__hint{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); }
.vid__corner{ position:absolute; width:18px; height:18px; border:1.5px solid var(--accent); z-index:2; opacity:.7; }
.vid__corner--tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.vid__corner--tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.vid__corner--bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.vid__corner--br{ bottom:16px; right:16px; border-left:0; border-top:0; }
.vid__cap{ display:flex; align-items:center; gap:12px; margin-top:18px; font-family:var(--font-mono); font-size:13px; }
.vid__cap-dim{ color:var(--muted-2); }
@media (max-width:520px){ .vid__caption{ left:18px; bottom:18px; } .vid__play{ width:60px; height:60px; } }

/* ---------- CONTACT ---------- */
.contact{ border-top:1px solid var(--line); margin-top:40px; }
.contact__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,14vh,170px) clamp(18px,4vw,46px) 70px; text-align:center; }
.contact .eyebrow{ justify-content:center; }
.contact__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,6.5vw,5rem); line-height:1.02; letter-spacing:-.03em; margin-top:22px; color:#fff; }
.contact__sub{ color:var(--muted); max-width:560px; margin:24px auto 0; font-size:1.08rem; }
.contact__mail{
  display:inline-flex; align-items:center; gap:14px; margin-top:46px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem,3.6vw,2.4rem); color:#fff;
  padding-bottom:8px; border-bottom:1px solid var(--line-2); transition:color .3s, border-color .3s, gap .3s;
}
.contact__mail:hover{ color:var(--accent); border-color:var(--accent); gap:20px; }
.contact__links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:42px; font-family:var(--font-mono); font-size:13px; }
.contact__links a{ padding:10px 20px; border:1px solid var(--line); border-radius:30px; color:var(--muted); transition:color .3s,border-color .3s,background .3s; }
.contact__links a:hover{ color:var(--accent); border-color:var(--accent); }

.footer{ max-width:var(--maxw); margin:0 auto; padding:26px clamp(18px,4vw,46px); display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--muted-2); flex-wrap:wrap; }
.footer__top{ transition:color .3s; }
.footer__top:hover{ color:var(--accent); }
@media (max-width:560px){ .footer{ justify-content:center; text-align:center; } .footer__mid{ display:none; } }