/* ==========================================================================
   Hugo Simoes — hugosimoes.com redesign
   Ultra-modern dark theme, neon (cyan/magenta) accents on near-black.
   ========================================================================== */

:root{
  --bg:        #06070a;
  --bg-alt:    #0b0d13;
  --bg-raise:  #11141c;
  --ink:       #f4f6f8;
  --ink-dim:   #9aa1b0;
  --ink-faint: #5b6270;
  --line:      rgba(244,246,248,0.08);
  --line-strong: rgba(244,246,248,0.16);

  --cyan:      #00fff0;
  --cyan-dim:  #00c9c0;
  --magenta:   #ff21c4;
  --magenta-dim: #cc1a9d;
  --blue:      #2f6bff;
  --blue-dim:  #1f4bcc;
  --orange:    #ff7a1a;
  --orange-dim: #cc5f10;

  --glow-cyan: 0 0 24px rgba(0,255,240,0.35);
  --glow-magenta: 0 0 24px rgba(255,33,196,0.35);
  --glow-blue: 0 0 24px rgba(47,107,255,0.35);
  --glow-orange: 0 0 24px rgba(255,122,26,0.35);

  --font-display: 'Clash Display', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --container: 1220px;
  --edge: clamp(1.25rem, 4vw, 4rem);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; color: var(--ink-dim); }
.mono{ font-family: var(--font-mono); }

::selection{ background: var(--magenta); color: #06070a; }

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

/* ---------- utility ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.1rem;
}
.accent{ color: var(--magenta); }

.hero-titles{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 0 1.6rem;
}
.hero-titles .title-line{
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.hero-titles .title-line::before{
  content: '';
  width: 20px;
  height: 1px;
  background: var(--cyan);
  opacity: .6;
  flex-shrink: 0;
}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  z-index: 1000;
  box-shadow: 0 0 12px rgba(0,255,240,0.6);
  transition: width .1s linear;
}

/* ---------- nav ---------- */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--edge);
  background: linear-gradient(to bottom, rgba(6,7,10,0.85), rgba(6,7,10,0));
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.site-nav > *{ pointer-events: auto; }
.nav-mark{
  display: inline-flex; align-items: center;
  line-height: 0;
  position: relative;
}
/* hover "magnifying glass" treatment: a small circular lens follows the
   cursor over the mark, showing a zoomed-in view of just the area under it
   (the mark itself never scales up as a whole — no whole-shape zoom here,
   just this lens). main.js drives the lens position/zoom on pointermove;
   see .nav-mark-lens / .nav-mark-svg-lens. Hover-capable pointers only —
   on touch/mobile the lens stays off entirely (main.js also skips setting
   it up there) and the mark just does its normal build/reverse loop. */
.nav-mark:hover, .nav-mark:focus-visible{ z-index: 5; }
.nav-mark-lens{
  display: none;
  position: absolute; top: 0; left: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  box-shadow: 0 6px 20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(244,246,248,.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 6;
}
@media (hover: hover) and (pointer: fine){
  .nav-mark-lens{ display: block; }
}
.nav-mark-lens.active{ opacity: 1; }
.nav-mark-svg-lens{
  position: absolute; top: 0; left: 0;
  overflow: visible;
  display: block;
  transform-origin: 0 0;
}
/* nav mark: the "Signal Reveal" logo mark — draws itself on when the page
   loads, holds solid, then every 6s reverses direction (un-draws, then
   draws back in) — a slow "breathing" loop rather than a one-shot intro.
   animation-direction:alternate + infinite on a 6s duration is what makes
   each leg (forward/reverse) last 6s; the keyframes front-load the actual
   draw/fill motion into the first ~24% of that 6s and hold for the rest,
   so most of each leg is a solid hold with a quick reveal/retract at the
   seam. Same mark/choreography as logo/option-e-signal-reveal.html. */
.nav-mark-svg{
  width: 75px; height: auto; overflow: visible;
  display: block;
}
.nav-mark-svg .nm-h-stroke,
.nav-mark-svg .nm-s-stroke{
  fill: none; stroke-width: 16; stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 100;
  animation: nm-draw 6s cubic-bezier(.16,.84,.32,1) infinite alternate;
}
.nav-mark-svg .nm-h-stroke{ stroke: var(--cyan); filter: drop-shadow(-4px 0 5px rgba(0,255,240,0.5)); }
.nav-mark-svg .nm-s-stroke{ stroke: var(--magenta); filter: drop-shadow(0 0 5px rgba(255,33,196,0.5)); animation-delay: .12s; }
.nav-mark-svg .nm-h-fill{
  fill: var(--magenta);
  opacity: 0;
  transform: translateX(-14px);
  animation: nm-h-fill 6s cubic-bezier(.16,.84,.32,1) infinite alternate;
}
.nav-mark-svg .nm-s-fill{
  fill: var(--ink);
  opacity: 0;
  animation: nm-s-fill 6s cubic-bezier(.16,.84,.32,1) infinite alternate;
}
.nav-mark-svg .nm-dot{
  fill: var(--cyan);
  opacity: 0;
  animation: nm-dot-fill 6s cubic-bezier(.16,.84,.32,1) infinite alternate;
}
@keyframes nm-draw{
  0%{ stroke-dashoffset: 100; }
  22%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 0; }
}
@keyframes nm-h-fill{
  0%{ opacity: 0; }
  9%{ opacity: 0; }
  21%{ opacity: 1; }
  100%{ opacity: 1; }
}
@keyframes nm-s-fill{
  0%{ opacity: 0; }
  11%{ opacity: 0; }
  23%{ opacity: 1; }
  100%{ opacity: 1; }
}
@keyframes nm-dot-fill{
  0%{ opacity: 0; }
  13%{ opacity: 0; }
  22%{ opacity: 1; }
  100%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .nav-mark-svg .nm-h-stroke, .nav-mark-svg .nm-s-stroke,
  .nav-mark-svg .nm-h-fill, .nav-mark-svg .nm-s-fill, .nav-mark-svg .nm-dot{
    animation: none; stroke-dashoffset: 0; opacity: 1;
  }
}
.nav-links{
  display: flex; gap: 2rem;
}
.nav-links a{
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--ink-dim); display: inline-flex; gap: .5em; align-items: baseline;
  padding: .3rem 0; position: relative;
  transition: color .2s ease, transform .35s cubic-bezier(.16,.84,.32,1);
}
.nav-links a .n{ color: var(--ink-faint); font-size: .72rem; }
.nav-links a::after{
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0%;
  background: var(--cyan); transition: width .25s ease;
}
/* same hover "magnifying glass" treatment as the nav mark: a soft glass
   lens halo behind the label, plus a slight scale-up. */
.nav-links a::before{
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 44px; min-width: 90px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 34% 28%, rgba(244,246,248,.12), rgba(244,246,248,0) 62%);
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,.84,.32,1), opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a:hover{ transform: scale(1.16); z-index: 2; }
.nav-links a:hover::before{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
.nav-links a:hover::after, .nav-links a.active::after{ width: 100%; }
.nav-links a.active .n{ color: var(--cyan); }

.nav-toggle{
  display: none; flex-direction: column; gap: 5px; width: 34px; height: 34px;
  background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span{ width: 16px; height: 1.5px; background: var(--ink); display: block; }

@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; }
  .nav-links{
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; gap: 0;
    background: var(--bg-alt);
    padding: 6rem var(--edge) 2rem;
    transform: translateY(-100%);
    transition: transform .35s ease;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em;
  padding: .95rem 1.7rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-solid{
  background: var(--cyan); color: #04211e; border-color: var(--cyan);
}
.btn-solid:hover{ box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.btn-outline{
  border-color: var(--line-strong); color: var(--ink);
}
.btn-outline:hover{ border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.btn-magenta:hover{ border-color: var(--magenta); color: var(--magenta); box-shadow: var(--glow-magenta); }
.btn.full{ width: 100%; }

/* ---------- background media (image now, video-ready later) ---------- */
.bg-media{
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.bg-video{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.05);
  object-position: 72% 32%;
}
.work-bg .bg-video{ object-position: center; }
.bg-scrim{
  position: absolute; inset: 0;
  /* lighter overall veil, pulled back further still on the right where
     Hugo is in-frame — just enough to keep the page dark-themed */
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(6,7,10,0.01), rgba(6,7,10,0.28) 78%),
    linear-gradient(180deg, rgba(6,7,10,0.08) 0%, rgba(6,7,10,0.14) 55%, rgba(6,7,10,0.34) 100%);
}
.bg-scrim--strong{
  background: linear-gradient(180deg, rgba(6,7,10,0.4) 0%, rgba(6,7,10,0.55) 100%);
}
/* directional veil just behind the copy, so text stays legible while the
   rest of the photo (screens, Hugo in-frame on the right) stays bright and
   visible — fade completes well before the right edge */
.bg-scrim-text{
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(6,7,10,0.78) 0%,
    rgba(6,7,10,0.5) 26%,
    rgba(6,7,10,0.14) 44%,
    rgba(6,7,10,0) 58%);
}
@media (max-width: 760px){
  .bg-scrim-text{
    background: linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.35) 45%, rgba(6,7,10,0.75) 100%);
  }
}
.bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,240,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,240,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 90%);
}

/* ---------- hero ---------- */
.hero{
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden;
  padding: 7rem var(--edge) 4rem;
}
.hero-inner{ position: relative; z-index: 2; max-width: 1100px; }
.hero-name{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .04em;
  row-gap: 0;
  font-size: clamp(2.6rem, 9.2vw, 7.6rem);
  margin: .1em 0 .3em;
  animation: sign-buzz 130ms steps(2, jump-none) infinite;
}
.hero-name .line{ display: inline-block; }

/* ---------------------------------------------------------------------
   Neon letters — used for SIMOES (hero) and MEDIA (Wirestream section).
   Solid outline always on; a slow light sweep travels through the
   interior; the glow brightens toward the pointer; a constant tiny
   buzz plus occasional irregular stutters sell a real, powered tube.
--------------------------------------------------------------------- */
.neon-letters{
  position: relative;
  color: var(--bg);
  -webkit-text-stroke: 2px var(--magenta);
  text-shadow: 0 0 10px rgba(255,33,196,0.55), 0 0 40px rgba(255,33,196,0.35);
  background-image:
    radial-gradient(220px 220px at var(--mx, -50%) var(--my, -50%), rgba(255,255,255,0.95), rgba(0,255,240,0.65) 38%, transparent 68%),
    linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,255,255,0.85) 50%, var(--cyan) 55%, transparent 64%, transparent 100%);
  background-size: 100% 100%, 320% 100%;
  background-repeat: no-repeat;
  background-blend-mode: screen;
  -webkit-background-clip: text;
  background-clip: text;
  animation: neon-sweep 5s ease-in-out infinite, neon-flicker 7.2s ease-in-out infinite;
}
@supports not (-webkit-text-stroke: 1px black){
  .neon-letters{ color: var(--magenta); -webkit-text-stroke: 0; background: none; }
}
.neon-letters.glitch{
  animation: neon-glitch 220ms steps(6, jump-none) 1;
}

/* constant, barely-there buzz — the whole sign (both words) vibrating
   together, like a physical tube housing on a wall */
@keyframes sign-buzz{
  0%   { filter: brightness(1); }
  50%  { filter: brightness(0.985); }
  100% { filter: brightness(1); }
}
/* light travelling through the tube */
@keyframes neon-sweep{
  0%   { background-position: 0% 0, 140% 0; }
  50%  { background-position: 0% 0, -40% 0; }
  100% { background-position: 0% 0, 140% 0; }
}
/* slow, irregular power-flicker — two uneven stutters per loop rather
   than one clean pulse, so it doesn't read as mechanical */
@keyframes neon-flicker{
  0%, 100%{ opacity: 1; text-shadow: 0 0 10px rgba(255,33,196,0.55), 0 0 40px rgba(255,33,196,0.35); }
  2%{ opacity: .82; text-shadow: 0 0 4px rgba(255,33,196,0.22), 0 0 14px rgba(255,33,196,0.14); }
  3%{ opacity: 1; text-shadow: 0 0 15px rgba(255,33,196,0.75), 0 0 52px rgba(255,33,196,0.5); }
  4%{ opacity: .92; }
  5%{ opacity: 1; }
  46%{ opacity: 1; }
  47%{ opacity: .88; text-shadow: 0 0 5px rgba(255,33,196,0.3), 0 0 18px rgba(255,33,196,0.18); }
  48%{ opacity: 1; text-shadow: 0 0 10px rgba(255,33,196,0.55), 0 0 40px rgba(255,33,196,0.35); }
}
/* short one-shot stutter, randomly triggered from JS for realism */
@keyframes neon-glitch{
  0%, 100%{ opacity: 1; }
  10%{ opacity: .35; }
  20%{ opacity: 1; }
  35%{ opacity: .5; }
  45%{ opacity: 1; }
  60%{ opacity: .65; }
  70%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-name, .wordmark{ animation: none; }
  .neon-letters{ animation: none; background-image: none; color: var(--magenta); }
}
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 640px;
  color: var(--ink-dim);
}
.hero-sub a{ color: var(--cyan); border-bottom: 1px solid rgba(0,255,240,0.4); }
.hero-sub a:hover{ color: var(--ink); border-color: var(--ink); }
.hero-actions{
  display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap;
}

.scroll-cue{
  position: absolute; left: var(--edge); bottom: 2.2rem; z-index: 2;
  display: flex; align-items: center; gap: .8rem; color: var(--ink-faint);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.cue-line{ width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity: .3 } 50%{ opacity: 1 } }

/* ---------- sections (shared) ---------- */
.section{
  position: relative;
  padding: 7rem var(--edge);
  max-width: var(--container);
  margin: 0 auto;
}
.section-alt{
  max-width: none;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-alt > *{ max-width: var(--container); margin-left: auto; margin-right: auto; }
.section-head{ max-width: 760px; margin-bottom: 3.5rem; }
.section-head h2{ font-size: clamp(2.1rem, 5vw, 3.6rem); }
.section-intro{ margin-top: 1rem; color: var(--ink-dim); font-size: 1.05rem; }
.section-head.light .eyebrow{ color: var(--cyan); }
.section-head.light h2{ color: var(--ink); }

[data-reveal]{
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].in{ opacity: 1; transform: translateY(0); }

/* ---------- about ---------- */
.about-grid{
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-media{ position: relative; }
.about-media img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(0.15) contrast(1.05); }
.media-frame{
  position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--cyan);
  z-index: -1;
}
.about-copy .lede{ font-size: 1.2rem; color: var(--ink); }
.fact-row{
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 2rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink);
}
.fact-row li{ display: flex; flex-direction: column; gap: .35rem; }
.fact-row li span{ color: var(--ink-faint); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ max-width: 280px; }
}

/* ---------- capabilities ---------- */
.cap-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap-card{
  background: var(--bg-alt);
  padding: 2.2rem 1.8rem;
  transition: background .25s ease;
}
.cap-card:hover{ background: var(--bg-raise); }
.cap-num{ color: var(--magenta); font-size: .85rem; display: block; margin-bottom: 1.4rem; }
.cap-card h3{ font-size: 1.15rem; margin-bottom: .7rem; }
.cap-card p{ font-size: .92rem; margin: 0; }

@media (max-width: 980px){ .cap-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cap-grid{ grid-template-columns: 1fr; } }

/* ---------- work ---------- */
.work{ max-width: none; overflow: hidden; }
.work .section-head, .work-grid, .work-note{ position: relative; z-index: 2; max-width: var(--container); margin-left: auto; margin-right: auto; }
.work-grid{
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem;
}
.work-shot{ margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line-strong); }
.work-shot img{ width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform .6s ease; }
.work-shot:hover img{ transform: scale(1.04); }
.work-shot figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.3rem;
  background: linear-gradient(0deg, rgba(6,7,10,0.92), transparent);
  font-size: .85rem; color: var(--ink);
}
.work-note{ margin-top: 1.6rem; color: var(--ink-faint); font-size: .74rem; letter-spacing: .04em; }

@media (max-width: 760px){ .work-grid{ grid-template-columns: 1fr; } }

/* ---------- wirestream ---------- */
.section-wirestream{
  max-width: none; background: var(--bg-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section-wirestream > *{ max-width: var(--container); margin-left: auto; margin-right: auto; }
.wordmark{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .04em;
  row-gap: 0;
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: -.01em;
  animation: sign-buzz 130ms steps(2, jump-none) infinite;
}
.wordmark .accent{ display: inline-block; color: var(--bg-alt); }
@supports not (-webkit-text-stroke: 1px black){ .wordmark .accent{ color: var(--magenta); } }
.wirestream-grid{ max-width: 720px; }
.wirestream-grid .lede{ font-size: 1.15rem; color: var(--ink); }
.wirestream-grid .btn{ margin-top: 1rem; }

/* ---------- contact ---------- */
.contact-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-email{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--cyan);
  word-break: break-word;
  display: inline-block; margin-bottom: 2rem;
  text-shadow: var(--glow-cyan);
}
.contact-email:hover{ color: var(--magenta); text-shadow: var(--glow-magenta); }
.social-row{ display: flex; gap: 1rem; }
.social-row a{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.social-row svg{ width: 17px; height: 17px; fill: var(--ink-dim); transition: fill .2s ease; }
.social-row a:hover{ border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.social-row a:hover svg{ fill: var(--cyan); }

.contact-form{ display: flex; flex-direction: column; gap: 1.3rem; }
.field{ position: relative; }
.field input, .field textarea{
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--font-body); font-size: 1rem; padding: .8rem 0;
  resize: vertical;
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--cyan); }
.field label{
  position: absolute; left: 0; top: .8rem; color: var(--ink-faint);
  transition: transform .18s ease, color .18s ease, font-size .18s ease;
  pointer-events: none;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform: translateY(-1.4rem); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}

@media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer{
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem var(--edge) 2.4rem; max-width: var(--container); margin: 0 auto;
  color: var(--ink-faint); font-size: .78rem;
  border-top: 1px solid var(--line);
}
.back-top{ color: var(--ink-faint); transition: color .2s ease; }
.back-top:hover{ color: var(--cyan); }

.footer-credit{ display: inline-flex; flex-wrap: wrap; gap: .35em; align-items: baseline; }
.footer-name, .footer-brand{ text-decoration: none; transition: opacity .2s ease; }
.footer-name:hover, .footer-brand:hover{ opacity: .8; }
.fn-hugo{ color: var(--blue); font-weight: 700; }
.fn-simoes{ color: var(--magenta); font-weight: 700; }
.footer-brand{ font-variant: small-caps; letter-spacing: .03em; }
.fb-wirestream{ color: var(--ink); }
.fb-media{ color: var(--orange); font-weight: 700; }