@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #08080d;
  --ink: #fff3e4;
  --muted: #cdb9a9;
  --ember: #ff5b19;
  --ember2: #ffbd52;
  --red: #b4162a;
  --violet: #281831;
  --smoke: rgba(255, 243, 228, .12);
  --glass: rgba(13, 10, 17, .72);
  --line: rgba(255, 116, 37, .58);
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 92, 22, .22), transparent 25rem),
    radial-gradient(circle at 75% 10%, rgba(128, 21, 39, .38), transparent 30rem),
    linear-gradient(135deg, #050508 0%, #11101a 48%, #060406 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 36px);
  mix-blend-mode: screen;
  z-index: 3;
  animation: gridJump 7s steps(2) infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: auto -20vw -8vh -20vw;
  height: 28vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(255, 73, 12, .55), transparent 55%),
    radial-gradient(ellipse at 55% 100%, rgba(255, 177, 57, .45), transparent 42%),
    radial-gradient(ellipse at 80% 100%, rgba(188, 22, 41, .55), transparent 60%);
  filter: blur(16px) saturate(1.3);
  opacity: .88;
  z-index: 2;
  animation: baseFlame 2.2s ease-in-out infinite alternate;
}

#emberCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.1) 7px, transparent 8px);
  animation: scan 5.5s linear infinite;
}

.haze {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  filter: blur(28px);
  opacity: .35;
  background: conic-gradient(from 90deg, transparent, rgba(255, 96, 21, .45), transparent, rgba(255, 214, 130, .2), transparent);
  mix-blend-mode: screen;
  animation: drift 11s ease-in-out infinite alternate;
}

.haze.one {
  width: 38vw;
  height: 38vw;
  left: 2vw;
  top: 8vh;
}

.haze.two {
  width: 28vw;
  height: 28vw;
  right: 4vw;
  bottom: 8vh;
  animation-delay: -4s;
}

.corner {
  position: fixed;
  z-index: 50;
  font: 700 .62rem Share Tech Mono, monospace;
  letter-spacing: .08em;
  color: rgba(255, 218, 172, .76);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(255, 91, 25, .9);
  animation: microGlitch 2.8s steps(2) infinite;
}

.cornerOne { top: .65rem; left: .75rem; }
.cornerTwo { top: .65rem; right: .75rem; }
.cornerThree { bottom: .65rem; left: .75rem; }
.cornerFour { bottom: .65rem; right: .75rem; }

.sideNav {
  position: fixed;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: .95rem;
  padding-left: .8rem;
  border-left: 2px solid var(--line);
}

.sideNav::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 8px;
  height: 28px;
  background: var(--ember2);
  box-shadow: 0 0 24px var(--ember);
  animation: navSpark 4s linear infinite;
}

.navLink {
  position: relative;
  display: block;
  color: var(--muted);
  font: 800 .76rem Share Tech Mono, monospace;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  padding: .12rem .06rem;
  transition: color .2s ease, transform .2s ease;
}

.navLink:hover,
.navLink.active {
  color: var(--ink);
  transform: translateX(5px) skewY(-4deg);
  text-shadow: 0 0 10px var(--ember);
}

main {
  position: relative;
  z-index: 10;
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem) clamp(5.25rem, 10vw, 10rem);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 5rem 3vw auto 4vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform: skewY(-1.5deg);
  animation: slashBlink 5s steps(3) infinite;
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14rem;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 72, 14, .12), transparent);
  clip-path: polygon(0 70%, 13% 60%, 29% 75%, 48% 51%, 64% 68%, 82% 42%, 100% 60%, 100% 100%, 0 100%);
  z-index: -1;
}

.slashMarker {
  position: absolute;
  left: clamp(4.7rem, 8vw, 8.2rem);
  top: clamp(5rem, 7vw, 7rem);
  font: 900 clamp(3rem, 10vw, 8rem) Inter, sans-serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 144, 72, .35);
  text-shadow: 0 0 35px rgba(255, 87, 19, .18);
  z-index: -1;
  animation: markerSlip 6s steps(3) infinite;
}

.heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(16rem, .82fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  min-height: 62vh;
}

.copy,
.sectionHead,
.aboutFlow,
.experienceText,
.contactGrid,
.feedbackRiver,
.traits,
.timeline {
  max-width: 74rem;
}

.kicker {
  margin: 0 0 .75rem;
  color: var(--ember2);
  font: 800 .8rem Share Tech Mono, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  position: relative;
  width: fit-content;
  margin-bottom: .35rem;
  font-size: clamp(4.6rem, 15vw, 13rem);
  line-height: .78;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 83, 24, .38), 0 0 60px rgba(180, 22, 42, .28);
}

h2 {
  max-width: 17ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.3rem, 6vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

h3 {
  margin-bottom: .85rem;
  color: var(--ember2);
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  text-transform: uppercase;
}

p {
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.75;
}

.aliases {
  margin-bottom: 1.4rem;
  color: var(--ink);
  font: 700 clamp(1.2rem, 2.3vw, 2.1rem) Share Tech Mono, monospace;
  letter-spacing: .04em;
  animation: textBurn 3.2s ease-in-out infinite;
}

.intro {
  max-width: 43rem;
}

.statsStrip {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  margin-top: 2rem;
  font-family: Share Tech Mono, monospace;
}

.statsStrip span {
  position: relative;
  padding: .7rem .95rem .65rem;
  border-top: 1px solid rgba(255, 173, 80, .55);
  border-bottom: 1px solid rgba(255, 72, 14, .45);
  color: var(--muted);
  background: linear-gradient(90deg, rgba(255, 103, 20, .08), transparent);
  clip-path: polygon(0 0, 95% 0, 100% 35%, 94% 100%, 0 100%, 3% 55%);
  animation: statFlicker 4.2s ease-in-out infinite;
}

.statsStrip strong {
  color: var(--ink);
}

.avatarZone {
  position: relative;
  justify-self: center;
  width: min(30rem, 82vw);
  transform: rotate(-1.5deg);
}

.profileArt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(255, 156, 76, .75);
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 92%);
  filter: contrast(1.1) saturate(1.16) drop-shadow(0 0 28px rgba(255, 73, 20, .45));
  animation: avatarGlitch 4.8s steps(2) infinite, flameFloat 5s ease-in-out infinite;
}

.avatarZone::before,
.avatarZone::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 114, 39, .75);
  clip-path: polygon(0 8%, 90% 0, 100% 88%, 12% 100%);
  pointer-events: none;
  z-index: 3;
}

.avatarZone::before {
  transform: translate(12px, -12px);
  border-color: rgba(255, 207, 102, .65);
  animation: frameSnap 2.1s steps(2) infinite;
}

.avatarZone::after {
  inset: 15px -15px -15px 15px;
  border-color: rgba(183, 22, 42, .8);
  mix-blend-mode: screen;
  animation: frameSnap 2.6s steps(2) infinite reverse;
}

.avatarCaption {
  position: absolute;
  right: -1rem;
  bottom: 2rem;
  color: #16080a;
  background: var(--ember2);
  padding: .46rem .62rem;
  font: 800 .72rem Share Tech Mono, monospace;
  text-transform: uppercase;
  transform: skewX(-12deg);
  box-shadow: 0 0 28px rgba(255, 116, 37, .44);
  animation: captionPanic 3.5s steps(3) infinite;
}

.fireCrown {
  position: absolute;
  inset: -4.5rem 4rem auto 4rem;
  height: 8rem;
  z-index: 4;
  pointer-events: none;
  filter: blur(.4px) saturate(1.4);
  background:
    radial-gradient(ellipse at 18% 100%, rgba(255, 193, 76, .88) 0 12%, transparent 34%),
    radial-gradient(ellipse at 34% 100%, rgba(255, 79, 19, .92) 0 14%, transparent 38%),
    radial-gradient(ellipse at 51% 100%, rgba(255, 214, 113, .82) 0 10%, transparent 32%),
    radial-gradient(ellipse at 69% 100%, rgba(216, 28, 48, .82) 0 14%, transparent 40%),
    radial-gradient(ellipse at 84% 100%, rgba(255, 101, 28, .88) 0 11%, transparent 34%);
  clip-path: polygon(0 100%, 8% 66%, 15% 100%, 26% 39%, 34% 100%, 46% 12%, 54% 100%, 67% 32%, 74% 100%, 86% 51%, 100% 100%);
  animation: crownBurn .55s ease-in-out infinite alternate;
}

.aboutFlow {
  margin-top: clamp(3rem, 7vw, 7rem);
  padding: 2rem 0 0 clamp(0rem, 4vw, 4rem);
  border-left: 1px solid rgba(255, 116, 37, .35);
}

.aboutFlow p {
  max-width: 66rem;
}

.sectionHead {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.timeline {
  position: relative;
  display: grid;
  gap: 1.35rem;
  margin-bottom: 3rem;
  padding-left: clamp(1rem, 4vw, 4rem);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--ember2), var(--red), transparent);
  box-shadow: 0 0 20px var(--ember);
}

.lineItem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, .85fr) minmax(8rem, .45fr) 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .95rem 0 .95rem 1.35rem;
  border-bottom: 1px solid rgba(255, 115, 42, .28);
  background: linear-gradient(90deg, rgba(255, 83, 24, .1), transparent 75%);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 2% 100%);
  animation: lineHeat 3.8s ease-in-out infinite;
}

.lineItem::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 15px;
  height: 15px;
  background: var(--ember2);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 20px var(--ember);
}

.role,
.rank,
.note {
  display: block;
}

.role {
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.3vw, 2rem);
  text-transform: uppercase;
}

.rank {
  color: var(--ember2);
  font: 800 1rem Share Tech Mono, monospace;
  text-transform: uppercase;
}

.note {
  color: var(--muted);
}

.experienceText {
  padding-left: clamp(0rem, 4vw, 4rem);
}

.roleCloud {
  display: block;
  max-width: 75rem;
  color: rgba(255, 243, 228, .76);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.9;
}

.roleCloud span {
  color: var(--ember2);
  text-shadow: 0 0 12px rgba(255, 83, 24, .35);
}

.feedbackRiver {
  display: grid;
  gap: 1.2rem;
  max-width: 60rem;
}

.proofLink {
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -.05em;
  text-transform: uppercase;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 116, 37, .32);
  border-bottom: 1px solid rgba(255, 116, 37, .32);
  overflow: hidden;
  transition: transform .2s ease, color .2s ease;
}

.proofLink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 83, 24, .2), transparent);
  transform: translateX(-110%) skewX(-18deg);
  animation: proofSweep 5s ease-in-out infinite;
}

.proofLink:hover {
  color: var(--ember2);
  transform: translateX(14px) skewX(-4deg);
}

.proofLink span {
  display: block;
  margin-top: .4rem;
  color: var(--muted);
  font: 700 .95rem Share Tech Mono, monospace;
  letter-spacing: .04em;
}

.traits {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.1rem;
  margin-top: 3rem;
}

.traits p {
  position: relative;
  margin: 0;
  padding: .5rem .8rem;
  border-left: 2px solid var(--ember);
  color: var(--ink);
  font-family: Share Tech Mono, monospace;
  background: linear-gradient(90deg, rgba(255, 83, 24, .12), transparent);
  animation: traitJolt 4s steps(2) infinite;
}

.contactGrid {
  display: grid;
  grid-template-columns: minmax(12rem, .65fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.handles {
  border-left: 2px solid var(--line);
  padding-left: 1.2rem;
}

.handles p {
  color: var(--ink);
}

.copyHandle,
.contactForm button {
  appearance: none;
  display: block;
  width: 100%;
  margin: .65rem 0;
  border: 1px solid rgba(255, 116, 37, .65);
  background: linear-gradient(90deg, rgba(255, 83, 24, .2), rgba(80, 12, 24, .45));
  color: var(--ink);
  padding: .95rem 1rem;
  font: 900 1rem Share Tech Mono, monospace;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, 96% 0, 100% 35%, 94% 100%, 0 100%);
  transition: transform .16s ease, background .16s ease;
}

.copyHandle:hover,
.contactForm button:hover {
  transform: translateX(8px) skewX(-5deg);
  background: linear-gradient(90deg, rgba(255, 147, 45, .38), rgba(180, 22, 42, .35));
}

.copyHandle.copied::after {
  content: " copied";
  color: var(--ember2);
}

.contactForm {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
}

.contactForm label {
  display: grid;
  gap: .45rem;
  color: var(--ember2);
  font: 800 .78rem Share Tech Mono, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contactForm input,
.contactForm textarea {
  width: 100%;
  border: 1px solid rgba(255, 116, 37, .45);
  border-left: 4px solid var(--ember);
  background: rgba(8, 8, 13, .82);
  color: var(--ink);
  padding: 1rem;
  font: 500 1rem Inter, sans-serif;
  outline: none;
  box-shadow: inset 0 0 30px rgba(255, 83, 24, .08);
}

.contactForm input:focus,
.contactForm textarea:focus {
  border-color: var(--ember2);
  box-shadow: 0 0 0 2px rgba(255, 177, 82, .15), inset 0 0 36px rgba(255, 83, 24, .12);
}

footer {
  position: relative;
  z-index: 10;
  padding: 2rem 1rem 5rem clamp(5.25rem, 10vw, 10rem);
  color: rgba(255, 228, 196, .74);
  font: 700 .78rem Share Tech Mono, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-top: 1px solid rgba(255, 116, 37, .3);
}

.glitch {
  animation: titleShake 3.2s steps(2) infinite;
}

.glitch::before,
.glitch::after,
.glitchSmall::before,
.glitchSmall::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glitch::before {
  color: rgba(255, 52, 87, .72);
  transform: translate(4px, 0);
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 28%);
  animation: glitchA 1.8s steps(2) infinite;
}

.glitch::after {
  color: rgba(255, 188, 67, .76);
  transform: translate(-5px, 0);
  mix-blend-mode: screen;
  clip-path: polygon(0 62%, 100% 48%, 100% 100%, 0 100%);
  animation: glitchB 2.4s steps(2) infinite;
}

.glitchSmall {
  position: relative;
  width: fit-content;
}

.glitchSmall::before {
  color: rgba(255, 93, 28, .6);
  transform: translate(2px, 0);
  animation: glitchA 2.6s steps(2) infinite;
}

.glitchSmall::after {
  color: rgba(255, 196, 78, .55);
  transform: translate(-2px, 0);
  animation: glitchB 2.2s steps(2) infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(34px) skewY(1.5deg);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .1, 1);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

.delayOne { transition-delay: .12s; }
.delayTwo { transition-delay: .22s; }

@keyframes gridJump {
  0%, 92%, 100% { transform: translate(0,0); }
  94% { transform: translate(10px,-6px); }
  96% { transform: translate(-6px,4px); }
}

@keyframes baseFlame {
  from { transform: translateY(0) scaleX(1); opacity: .7; }
  to { transform: translateY(-1.2rem) scaleX(1.06); opacity: .95; }
}

@keyframes scan {
  to { transform: translateY(18px); }
}

@keyframes drift {
  from { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  to { transform: translate3d(4vw,-3vh,0) rotate(18deg) scale(1.12); }
}

@keyframes microGlitch {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(2px, -1px); }
  92% { transform: translate(-1px, 1px); }
}

@keyframes navSpark {
  from { transform: translateY(0); }
  to { transform: translateY(22rem); }
}

@keyframes slashBlink {
  0%, 84%, 100% { opacity: .6; transform: skewY(-1.5deg) translateX(0); }
  88% { opacity: 1; transform: skewY(1deg) translateX(16px); }
  92% { opacity: .35; transform: skewY(-3deg) translateX(-10px); }
}

@keyframes markerSlip {
  0%, 89%, 100% { transform: translateX(0); }
  92% { transform: translateX(24px); }
  94% { transform: translateX(-12px); }
}

@keyframes textBurn {
  0%, 100% { text-shadow: 0 0 15px rgba(255, 94, 24, .42); }
  50% { text-shadow: 0 0 28px rgba(255, 184, 74, .65), 0 0 50px rgba(174, 22, 40, .35); }
}

@keyframes statFlicker {
  0%, 100% { transform: translateY(0); }
  48% { transform: translateY(-2px); }
  50% { transform: translateY(3px) skewX(-3deg); }
  52% { transform: translateY(0); }
}

@keyframes avatarGlitch {
  0%, 92%, 100% { transform: translate(0); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 92%); }
  94% { transform: translate(8px, -3px); clip-path: polygon(0 3%, 96% 0, 100% 88%, 4% 100%); }
  96% { transform: translate(-5px, 3px); clip-path: polygon(8% 0, 100% 5%, 92% 100%, 0 87%); }
}

@keyframes flameFloat {
  0%, 100% { filter: contrast(1.1) saturate(1.15) drop-shadow(0 0 24px rgba(255, 73, 20, .44)); }
  50% { filter: contrast(1.18) saturate(1.35) drop-shadow(0 0 38px rgba(255, 168, 54, .55)); }
}

@keyframes frameSnap {
  0%, 84%, 100% { transform: translate(12px, -12px); opacity: .9; }
  88% { transform: translate(18px, -6px); opacity: .55; }
  92% { transform: translate(5px, -18px); opacity: 1; }
}

@keyframes captionPanic {
  0%, 82%, 100% { transform: skewX(-12deg) translate(0); }
  86% { transform: skewX(-12deg) translate(7px, -3px); }
  90% { transform: skewX(-12deg) translate(-5px, 2px); }
}

@keyframes crownBurn {
  from { transform: translateY(2px) scaleY(.92) skewX(-2deg); opacity: .72; }
  to { transform: translateY(-6px) scaleY(1.16) skewX(3deg); opacity: 1; }
}

@keyframes lineHeat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  52% { transform: translateX(-2px); }
}

@keyframes proofSweep {
  0%, 58% { transform: translateX(-110%) skewX(-18deg); }
  78%, 100% { transform: translateX(110%) skewX(-18deg); }
}

@keyframes traitJolt {
  0%, 90%, 100% { transform: translate(0); }
  94% { transform: translate(4px, -2px); }
  96% { transform: translate(-2px, 1px); }
}

@keyframes titleShake {
  0%, 91%, 100% { transform: translate(0); }
  93% { transform: translate(8px, -2px) skewX(3deg); }
  95% { transform: translate(-6px, 2px) skewX(-2deg); }
}

@keyframes glitchA {
  0%, 80%, 100% { clip-path: inset(0 0 70% 0); transform: translate(3px, 0); }
  84% { clip-path: inset(20% 0 48% 0); transform: translate(12px, -3px); }
  90% { clip-path: inset(62% 0 12% 0); transform: translate(-8px, 2px); }
}

@keyframes glitchB {
  0%, 78%, 100% { clip-path: inset(60% 0 0 0); transform: translate(-4px, 0); }
  82% { clip-path: inset(8% 0 72% 0); transform: translate(-12px, 3px); }
  88% { clip-path: inset(42% 0 30% 0); transform: translate(8px, -2px); }
}

@media (max-width: 840px) {
  .scene {
    padding-left: 4.8rem;
  }

  .heroGrid,
  .contactGrid {
    grid-template-columns: 1fr;
  }

  .avatarZone {
    justify-self: start;
    width: min(24rem, 74vw);
  }

  .lineItem {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .sideNav {
    left: .6rem;
  }
}

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

.serverBlock {
  max-width: 78rem;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.serverBlock h3 {
  margin-bottom: 1.2rem;
}

.serverGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.currentGrid {
  grid-template-columns: minmax(0, 34rem);
}

.serverPanel {
  --accent: var(--ember);
  position: relative;
  display: block;
  min-height: 18rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  background:
    linear-gradient(180deg, rgba(8, 8, 13, .72), rgba(8, 8, 13, .96)),
    radial-gradient(circle at 15% 0, color-mix(in srgb, var(--accent) 28%, transparent), transparent 18rem);
  clip-path: polygon(0 0, 92% 0, 100% 10%, 100% 100%, 7% 100%, 0 91%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .22s ease, border-color .22s ease, filter .22s ease;
  animation: serverHoverPulse 4.6s ease-in-out infinite;
}

.serverPanel:nth-child(2n) {
  animation-delay: -.85s;
}

.serverPanel:nth-child(3n) {
  animation-delay: -1.7s;
}

.serverPanel:hover {
  transform: translateY(-8px) skewX(-1.5deg);
  border-color: color-mix(in srgb, var(--accent) 90%, white 10%);
  filter: saturate(1.2);
}

.serverPanel::before,
.serverPanel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.serverPanel::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,255,255,.04) 17px 18px);
  mix-blend-mode: screen;
  opacity: .34;
  transform: translateX(-120%) skewX(-18deg);
  animation: serverSweep 5.2s ease-in-out infinite;
}

.serverPanel::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 20px var(--accent);
  animation: serverBurnLine 1.6s ease-in-out infinite alternate;
}

.serverBanner {
  position: relative;
  height: 7.4rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 52%, #0b0c16), #15101a),
    var(--banner, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.serverBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 80%, color-mix(in srgb, var(--accent) 58%, transparent), transparent 38%),
    linear-gradient(0deg, rgba(8,8,13,.94), rgba(8,8,13,.08));
  animation: bannerFlicker 3s steps(3) infinite;
}

.serverBody {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 1.15rem 1rem;
  margin-top: -2.15rem;
  z-index: 4;
}

.serverIcon {
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 75%, white 6%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, #111), #15131b);
  color: var(--ink);
  font: 900 1.35rem Share Tech Mono, monospace;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
  clip-path: polygon(0 0, 82% 0, 100% 22%, 100% 100%, 18% 100%, 0 78%);
  animation: iconSnap 3.4s steps(2) infinite;
}

.imageIcon {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.ownersIcon {
  background-image: url('https://delly2ep.carrd.co/assets/images/image03.jpg?v=a00e08d9');
}

.lucIcon {
  background-image: url('https://delly2ep.carrd.co/assets/images/image02.png?v=a00e08d9');
}

.blueIcon {
  background-image: url('https://delly2ep.carrd.co/assets/images/image04.jpg?v=a00e08d9');
}

.serverCopy {
  min-width: 0;
  padding-top: 2.55rem;
}

.serverName {
  margin: 0;
  color: var(--ink);
  font: 900 clamp(1.1rem, 2vw, 1.55rem) Inter, sans-serif;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.serverMembers {
  margin: .3rem 0 .8rem;
  color: rgba(255, 243, 228, .66);
  font: 700 .78rem Share Tech Mono, monospace;
  line-height: 1.25;
}

.serverDesc {
  margin: 0;
  color: rgba(255, 229, 207, .78);
  font-size: .88rem;
  line-height: 1.45;
}

.serverFoot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 1.15rem 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
}

.serverFoot span {
  color: var(--ember2);
  font: 900 .9rem Share Tech Mono, monospace;
  text-transform: uppercase;
}

.serverFoot strong {
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  padding: .38rem .62rem;
  font: 900 .72rem Share Tech Mono, monospace;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  clip-path: polygon(0 0, 92% 0, 100% 35%, 92% 100%, 0 100%);
}

.archiveList {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
  max-width: 75rem;
}

.archiveList p {
  flex-basis: 100%;
  margin: 0 0 .2rem;
  color: var(--ink);
  font: 900 1rem Share Tech Mono, monospace;
  text-transform: uppercase;
}

.archiveList span {
  display: inline-block;
  padding: .58rem .78rem;
  color: rgba(255, 243, 228, .84);
  border-left: 2px solid var(--ember);
  background: linear-gradient(90deg, rgba(255, 83, 24, .14), rgba(255, 83, 24, .02));
  font: 800 .82rem Share Tech Mono, monospace;
  text-transform: uppercase;
  clip-path: polygon(0 0, 96% 0, 100% 40%, 94% 100%, 0 100%);
  animation: traitJolt 4.5s steps(2) infinite;
}

.contactPanel {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
  border-left: 2px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 83, 24, .12), rgba(80, 12, 24, .18));
  clip-path: polygon(0 0, 96% 0, 100% 10%, 100% 100%, 4% 100%, 0 88%);
}

.contactPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 177, 82, .14), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: proofSweep 6s ease-in-out infinite;
  pointer-events: none;
}

.copyHandle,
.contactForm button {
  text-transform: none;
}

.copyHandle span {
  display: block;
  color: var(--ember2);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mailtoLink {
  display: block;
  color: var(--ink);
  text-decoration: none;
  margin: .65rem 0;
  border: 1px solid rgba(255, 116, 37, .65);
  background: linear-gradient(90deg, rgba(255, 83, 24, .2), rgba(80, 12, 24, .45));
  padding: .95rem 1rem;
  font: 900 clamp(1rem, 2.3vw, 1.45rem) Share Tech Mono, monospace;
  overflow-wrap: anywhere;
  clip-path: polygon(0 0, 96% 0, 100% 35%, 94% 100%, 0 100%);
  transition: transform .16s ease, background .16s ease;
}

.mailtoLink:hover {
  transform: translateX(8px) skewX(-5deg);
  background: linear-gradient(90deg, rgba(255, 147, 45, .38), rgba(180, 22, 42, .35));
}

.mailHint {
  margin: .8rem 0 0;
  font: 700 .84rem Share Tech Mono, monospace;
  color: rgba(255, 229, 207, .7);
}

@keyframes serverHoverPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  52% { transform: translateY(1px) skewX(-.6deg); }
}

@keyframes serverSweep {
  0%, 62% { transform: translateX(-120%) skewX(-18deg); }
  84%, 100% { transform: translateX(120%) skewX(-18deg); }
}

@keyframes serverBurnLine {
  from { opacity: .45; transform: scaleX(.88); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes bannerFlicker {
  0%, 80%, 100% { opacity: .85; transform: translateX(0); }
  86% { opacity: 1; transform: translateX(8px); }
  92% { opacity: .65; transform: translateX(-5px); }
}

@keyframes iconSnap {
  0%, 88%, 100% { transform: translate(0); }
  92% { transform: translate(3px, -2px); }
  96% { transform: translate(-2px, 1px); }
}

@media (max-width: 1060px) {
  .serverGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .currentGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .serverBody {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }

  .serverIcon {
    width: 3.8rem;
    height: 3.8rem;
    font-size: 1.05rem;
  }

  .serverCopy {
    padding-top: 2.2rem;
  }

  .serverFoot {
    align-items: flex-start;
    flex-direction: column;
  }
}

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