:root {
  --bg: #07080b;
  --bg-soft: #0b0d11;
  --panel: rgba(255, 255, 255, 0.03);
  --text: #f3f4f6;
  --muted: #9a9ea6;
  --muted-strong: #c1c4ca;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.15);
  --accent: #f91f38;
  --accent-soft: rgba(249, 31, 56, 0.12);
  --green: #4fd67f;
  --radius: 20px;
  --max-width: 1260px;
  --header-h: 90px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 85% 8%, rgba(249, 31, 56, 0.08), transparent 24rem),
    radial-gradient(circle at 8% 12%, rgba(249, 31, 56, 0.035), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

::selection {
  background: var(--accent);
  color: white;
}

.site-wrap {
  width: min(calc(100% - 48px), var(--max-width));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(7, 8, 11, 0.72);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.brand-logo {
  display: block;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}

.brand-logo-footer {
  width: 100px;
}

.site-nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.site-nav a,
.eyebrow,
.status,
.side-list p,
.button,
.tech-row span,
.stack span,
.badge,
.experience-date,
.contact-links a,
.back-top,
.site-footer p {
  font-family: "Poppins", sans-serif;
}

.site-nav a {
  position: relative;
  padding-block: 12px;
  color: var(--muted-strong);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 6px auto;
  background: var(--text);
  transition: transform 180ms ease, opacity 180ms ease;
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.55fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  padding-block: 60px 80px;
  isolation: isolate;
}

.hero-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  --mx: 0px;
  --my: 0px;
}

.code-grid {
  position: absolute;
  inset: 4% -8% 0 22%;
  background-image:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 66% 44%, black 0%, rgba(0,0,0,.62) 44%, transparent 76%);
  opacity: .58;
  transform: translate3d(calc(var(--mx) * .08), calc(var(--my) * .08), 0);
  transition: transform 160ms ease-out;
}

.hero-brand-mark {
  position: absolute;
  width: clamp(260px, 33vw, 520px);
  right: 5%;
  top: 13%;
  opacity: .075;
  filter: saturate(.95);
  transform: translate3d(calc(var(--mx) * -.15), calc(var(--my) * -.15), 0) rotate(-4deg);
  transition: transform 180ms ease-out;
  user-select: none;
}

.code-fragment {
  position: absolute;
  color: rgba(249, 31, 56, .17);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1;
  user-select: none;
  animation: codeFloat 10s ease-in-out infinite alternate;
}

.code-a {
  right: 34%;
  top: 16%;
  font-size: clamp(34px, 5vw, 72px);
}

.code-b {
  right: 10%;
  top: 51%;
  font-size: clamp(46px, 7vw, 92px);
  animation-duration: 13s;
}

.code-c {
  right: 29%;
  bottom: 13%;
  font-size: clamp(34px, 5vw, 70px);
  animation-duration: 14s;
}

.code-d {
  right: 8%;
  top: 23%;
  color: rgba(255,255,255,.055);
  font-size: clamp(30px, 4vw, 58px);
  animation-duration: 19s;
}

.code-e {
  right: 40%;
  top: 47%;
  color: rgba(255,255,255,.045);
  font-size: clamp(54px, 8vw, 120px);
  animation-duration: 17s;
}

.code-line {
  position: absolute;
  right: 4%;
  width: min(38vw, 560px);
  color: rgba(255,255,255,.075);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, .9vw, 13px);
  white-space: nowrap;
  letter-spacing: .01em;
  transform: translate3d(calc(var(--mx) * .12), calc(var(--my) * .12), 0);
  transition: transform 170ms ease-out;
}

.code-line span {
  display: inline-block;
  width: 30px;
  color: rgba(249,31,56,.22);
  font-family: "Poppins", sans-serif;
}

.line-a { bottom: 34%; }
.line-b { bottom: 29%; opacity: .72; }
.line-c { bottom: 24%; opacity: .52; }

.code-bracket {
  position: absolute;
  width: 44px;
  height: 44px;
  opacity: .16;
}

.code-bracket::before,
.code-bracket::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.code-bracket::before {
  width: 24px;
  height: 1px;
}

.code-bracket::after {
  width: 1px;
  height: 24px;
}

.bracket-a {
  right: 3%;
  top: 11%;
}

.bracket-b {
  right: 42%;
  bottom: 16%;
  transform: rotate(180deg);
}

@keyframes codeFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(8px, -13px, 0); }
}

.hero-content {
  max-width: 860px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(58px, 8vw, 110px);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.07em;
}

.hero-role {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
  color: var(--muted-strong);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-role span {
  color: var(--accent);
}

.hero-intro {
  max-width: 680px;
  margin: 38px 0 0;
  color: var(--muted-strong);
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  border: 1px solid var(--accent);
  color: white;
  background: transparent;
}

.button-primary:hover {
  background: var(--accent-soft);
}

.button-secondary {
  border: 1px solid var(--border-strong);
  color: var(--muted-strong);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.hero-side {
  position: relative;
  z-index: 3;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(7, 8, 11, 0.82), rgba(7, 8, 11, 0.56));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-side::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: -1px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(249, 31, 56, 0.42) 18%, rgba(255, 255, 255, 0.11) 56%, transparent);
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: #d9dbe0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.075em;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(79, 214, 127, 0.5);
}

.side-list {
  display: grid;
  gap: 28px;
}

.side-list p {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
}

.side-list span {
  color: #c7c9cf;
  font-size: 15px;
}

.side-list div {
  position: relative;
}

.side-list div + div {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.section {
  padding-block: 108px;
  border-top: 1px solid var(--border);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}

.section-head h2,
.about-content h2,
.contact-content h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.055em;
}

.section-note {
  max-width: 460px;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.project-grid,
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.project-card,
.focus-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%),
    var(--panel);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.project-card:hover,
.focus-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.project-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
}

.project-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.project-kicker,
.focus-index {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.project-card h3,
.focus-card h3,
.experience-main h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.project-card > p,
.focus-card > p:last-child,
.experience-summary,
.about-content p,
.contact-content p {
  color: var(--muted);
}

.project-card > p {
  margin: 28px 0;
  font-size: 15px;
}

.badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted-strong);
  font-size: 9px;
  letter-spacing: 0.07em;
}

.badge-building {
  border-color: rgba(249, 31, 56, 0.25);
  background: var(--accent-soft);
  color: #ff7686;
}

.tech-row,
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-row {
  margin-top: auto;
}

.tech-row span,
.stack span {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 10px;
  padding: 6px 10px;
}

.focus-card {
  min-height: 235px;
}

.focus-index {
  color: var(--accent);
  margin-bottom: 28px;
}

.focus-card > p:last-child {
  margin: 16px 0 0;
  font-size: 15px;
}

.experience-list {
  border-top: 1px solid var(--border);
}

.experience-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 120px minmax(0, 1.35fr);
  gap: 36px;
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
}

.experience-main p,
.experience-date,
.experience-summary {
  margin: 0;
}

.experience-main p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.experience-date {
  color: var(--muted-strong);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.experience-summary {
  font-size: 15px;
}

.impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--border);
}

.impact div {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  background: var(--bg-soft);
}

.impact strong {
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.06em;
}

.impact span {
  max-width: 240px;
  color: var(--muted);
  font-size: 14px;
}

.about-section,
.contact-section {
  display: grid;
  grid-template-columns: 0.35fr minmax(0, 1fr);
  gap: 76px;
}

.about-content {
  max-width: 830px;
}

.about-content p {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 17px;
}

.stack {
  margin-top: 38px;
}

.contact-section {
  min-height: 500px;
  align-items: start;
}

.contact-content p {
  max-width: 640px;
  margin: 22px 0 36px;
  font-size: 17px;
}

.contact-links {
  max-width: 620px;
  border-top: 1px solid var(--border);
}

.contact-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted-strong);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 180ms ease, padding-left 180ms ease;
}

.contact-links a:hover {
  color: white;
  padding-left: 8px;
}

.contact-links span {
  color: var(--accent);
}

.site-footer {
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--border);
}

.brand-footer {
  padding-block: 10px;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.04em;
}

.back-top {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  transition: color 180ms ease;
}

.back-top:hover {
  color: white;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1020px) {
  :root {
    --header-h: 80px;
  }

  .site-wrap {
    width: min(calc(100% - 36px), var(--max-width));
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 54px;
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 76px;
  }

  .hero h1 {
    font-size: clamp(58px, 12vw, 94px);
  }

  .hero-side {
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-side::before {
    top: -1px;
    bottom: auto;
    left: 24px;
    right: 24px;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(249, 31, 56, 0.36), rgba(255, 255, 255, 0.10), transparent);
  }

  .side-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .section-note {
    justify-self: start;
  }

  .project-grid,
  .focus-grid {
    grid-template-columns: 1fr;
  }

  .about-section,
  .contact-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .experience-item {
    grid-template-columns: 1fr 100px;
  }

  .experience-summary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .site-wrap {
    width: min(calc(100% - 28px), var(--max-width));
  }

  .site-header {
    height: 72px;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 72px 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 30px 28px;
    background: rgba(7, 8, 11, 0.98);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
  }

  .site-nav a::after {
    display: none;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .hero {
    padding-top: 72px;
    padding-bottom: 60px;
  }

  .hero h1 {
    font-size: clamp(48px, 16vw, 72px);
    line-height: 0.93;
  }

  .hero-role {
    display: block;
    line-height: 1.9;
  }

  .hero-role span {
    display: none;
  }

  .hero-intro {
    margin-top: 28px;
    font-size: 18px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .side-list {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: 76px;
  }

  .section-head h2,
  .about-content h2,
  .contact-content h2 {
    font-size: clamp(32px, 11vw, 46px);
  }

  .project-card,
  .focus-card {
    padding: 22px;
  }

  .project-top {
    flex-direction: column-reverse;
    gap: 14px;
  }

  .experience-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 24px;
  }

  .experience-summary {
    grid-column: auto;
    margin-top: 4px;
  }

  .impact {
    grid-template-columns: 1fr;
  }

  .contact-section {
    min-height: auto;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 24px;
  }

  .site-footer p {
    text-align: left;
  }

  .back-top {
    justify-self: start;
  }

  .floating-mark {
    font-size: 6rem;
    opacity: 0.1;
  }

  .mark-m {
    top: 10%;
    right: 14%;
  }

  .mark-r {
    right: 5%;
    bottom: 14%;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 44px;
  }

  .hero-intro,
  .about-content p,
  .contact-content p,
  .experience-summary,
  .focus-card > p:last-child,
  .project-card > p {
    font-size: 15px;
  }
}


/* Typography refinement */
h1,
h2,
h3,
.button,
.site-nav a,
.eyebrow,
.badge,
.experience-date,
.contact-links a,
.back-top {
  font-family: "Poppins", sans-serif;
}

p,
li,
span,
dd,
.section-note,
.hero-intro,
.experience-summary,
.about-content p,
.contact-content p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero h1 {
  font-weight: 600;
}

.hero-role {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.hero-role span {
  font-family: inherit;
}

.status,
.side-list p {
  font-family: "Poppins", sans-serif;
}

@media (max-width: 720px) {
  .hero-brand-mark {
    width: 260px;
    right: -70px;
    top: 12%;
    opacity: .055;
  }

  .code-line {
    display: none;
  }

  .code-grid {
    inset: 0 -30% 0 26%;
    opacity: .34;
  }

  .code-fragment {
    opacity: .72;
  }

  .code-a { right: 8%; top: 15%; }
  .code-b { right: -4%; top: 56%; }
  .code-c { right: 18%; bottom: 10%; }
  .code-d,
  .code-e {
    display: none;
  }
}

/* =========================================================
   V6 — Mobile navigation + footer fixes
   ========================================================= */

@media (max-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 8, 11, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .site-nav {
    position: fixed;
    inset: 72px 0 0 0;
    z-index: 999;
    width: 100vw;
    height: calc(100dvh - 72px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 28px;
    overflow-y: auto;
    background:
      radial-gradient(circle at 100% 0%, rgba(249, 31, 56, 0.07), transparent 28rem),
      #07080b;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 76px;
    width: 100%;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: #d7d9de;
    font-family: "Poppins", sans-serif;
    font-size: clamp(20px, 6vw, 28px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .site-nav a:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: #fff;
  }

  body.menu-open main,
  body.menu-open .site-footer {
    visibility: hidden;
  }

  .menu-toggle {
    position: relative;
    z-index: 1001;
  }

  .site-footer {
    position: relative;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    min-height: 104px;
    padding-block: 24px;
    align-items: center;
  }

  .site-footer .brand-footer {
    justify-self: center;
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer p {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }

  .site-footer .back-top {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    text-align: right;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .site-nav {
    padding-inline: 20px;
  }

  .site-nav a {
    min-height: 68px;
    font-size: 22px;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto minmax(72px, 1fr);
  }

  .brand-logo-footer {
    width: 82px;
  }

  .site-footer p {
    font-size: 9px;
  }

  .site-footer .back-top {
    font-size: 10px;
  }
}


/* =========================================================
   V7 — Hero background expansion + redistributed motion
   ========================================================= */

.hero {
  overflow: hidden;
}

.hero-background::before {
  content: "";
  position: absolute;
  inset: -12% -8% -14% -18%;
  background:
    radial-gradient(circle at 28% 42%, rgba(249, 31, 56, 0.15), transparent 28rem),
    radial-gradient(circle at 42% 28%, rgba(249, 31, 56, 0.11), transparent 22rem),
    radial-gradient(circle at 76% 16%, rgba(249, 31, 56, 0.06), transparent 20rem);
  opacity: 0.95;
  pointer-events: none;
}

.hero-brand-mark {
  right: auto;
  left: 56%;
  top: 18%;
  width: clamp(280px, 34vw, 520px);
  opacity: 0.078;
  transform: translate3d(calc(var(--mx) * -0.16), calc(var(--my) * -0.16), 0) rotate(-6deg);
  transition: transform 180ms ease-out;
  animation: brandDrift 18s ease-in-out infinite alternate;
}

.code-a {
  right: auto;
  left: 58%;
  top: 12%;
  font-size: clamp(38px, 5.5vw, 76px);
  opacity: 0.9;
}

.code-b {
  right: auto;
  left: 76%;
  top: 52%;
  font-size: clamp(48px, 7vw, 94px);
  opacity: 0.9;
}

.code-c {
  right: auto;
  left: 45%;
  bottom: 10%;
  font-size: clamp(40px, 5.5vw, 74px);
  opacity: 0.82;
}

.code-d {
  right: auto;
  left: 72%;
  top: 22%;
  font-size: clamp(32px, 4vw, 58px);
}

.code-e {
  right: auto;
  left: 50%;
  top: 50%;
  font-size: clamp(58px, 8vw, 120px);
}

.code-line {
  right: auto;
  left: 49%;
  width: min(34vw, 520px);
  opacity: 0.74;
}

.line-a { bottom: 34%; }
.line-b { bottom: 28%; opacity: 0.58; }
.line-c { bottom: 22%; opacity: 0.44; }

.bracket-a {
  right: auto;
  left: 82%;
  top: 10%;
  animation: bracketFloat 11s ease-in-out infinite alternate;
}

.bracket-b {
  right: auto;
  left: 46%;
  bottom: 14%;
  transform: rotate(180deg);
  animation: bracketFloat 13s ease-in-out infinite alternate;
}

.code-fragment {
  animation: codeFloat2 11s ease-in-out infinite alternate;
}

.code-b { animation-duration: 14s; }
.code-c { animation-duration: 12.5s; }
.code-d { animation-duration: 16s; }
.code-e { animation-duration: 18s; }

@keyframes brandDrift {
  from { transform: translate3d(calc(var(--mx) * -0.16), calc(var(--my) * -0.16), 0) rotate(-6deg); }
  to   { transform: translate3d(calc(var(--mx) * -0.20), calc(var(--my) * -0.20), 0) rotate(-2deg) translateY(-10px); }
}

@keyframes codeFloat2 {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(10px, -12px, 0) rotate(2deg); }
}

@keyframes bracketFloat {
  from { transform: translate3d(0, 0, 0) rotate(180deg); }
  to   { transform: translate3d(0, -10px, 0) rotate(180deg); }
}

.bracket-a::before,
.bracket-a::after {
  background: rgba(249, 31, 56, 0.7);
}

.bracket-b::before,
.bracket-b::after {
  background: rgba(249, 31, 56, 0.55);
}

@media (max-width: 1020px) {
  .hero-background::before {
    inset: -8% -18% -10% -18%;
    background:
      radial-gradient(circle at 30% 34%, rgba(249, 31, 56, 0.14), transparent 24rem),
      radial-gradient(circle at 54% 22%, rgba(249, 31, 56, 0.08), transparent 18rem);
  }

  .hero-brand-mark {
    left: 60%;
    top: 12%;
    width: 320px;
    opacity: 0.06;
  }

  .code-line {
    left: 46%;
    width: min(40vw, 420px);
  }
}

@media (max-width: 720px) {
  .hero-background::before {
    inset: -8% -20% -6% -16%;
    background:
      radial-gradient(circle at 24% 34%, rgba(249, 31, 56, 0.16), transparent 16rem),
      radial-gradient(circle at 62% 14%, rgba(249, 31, 56, 0.08), transparent 12rem);
  }

  .hero-brand-mark {
    left: auto;
    right: -56px;
    top: 16%;
    width: 240px;
    opacity: 0.05;
  }

  .code-a {
    left: auto;
    right: 16%;
    top: 14%;
  }

  .code-b {
    left: auto;
    right: -2%;
    top: 58%;
  }

  .code-c {
    left: auto;
    right: 18%;
    bottom: 10%;
  }

  .code-d,
  .code-e,
  .bracket-a {
    display: none;
  }

  .bracket-b {
    left: auto;
    right: 26%;
    bottom: 12%;
  }
}


.bracket-a {
  transform: none;
}

@keyframes bracketFloatA {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -10px, 0) rotate(0deg); }
}

.bracket-a {
  animation: bracketFloatA 11s ease-in-out infinite alternate;
}


/* =========================================================
   V8 — Stronger hero motion + logo path shifted left
   ========================================================= */

.hero-brand-mark {
  left: 47%;
  top: 17%;
  width: clamp(300px, 36vw, 560px);
  opacity: 0.09;
  transform: translate3d(calc(var(--mx) * -0.24), calc(var(--my) * -0.18), 0) rotate(-7deg);
  animation: brandDriftV8 12s ease-in-out infinite alternate;
}

.code-grid {
  transform: translate3d(calc(var(--mx) * 0.12), calc(var(--my) * 0.12), 0);
}

.code-a {
  left: 55%;
  top: 10%;
  animation-duration: 8.5s;
}

.code-b {
  left: 74%;
  top: 49%;
  animation-duration: 10s;
}

.code-c {
  left: 41%;
  bottom: 9%;
  animation-duration: 9.5s;
}

.code-d {
  left: 69%;
  top: 20%;
  animation-duration: 11.5s;
}

.code-e {
  left: 47%;
  top: 46%;
  animation-duration: 13s;
}

.code-line {
  left: 46%;
  transform: translate3d(calc(var(--mx) * 0.18), calc(var(--my) * 0.18), 0);
}

.bracket-a {
  left: 84%;
  top: 9%;
  animation: bracketFloatAV8 7s ease-in-out infinite alternate;
}

.bracket-b {
  left: 44%;
  bottom: 13%;
  animation: bracketFloatBV8 8.5s ease-in-out infinite alternate;
}

@keyframes brandDriftV8 {
  from {
    transform: translate3d(calc(var(--mx) * -0.24), calc(var(--my) * -0.18), 0) rotate(-7deg);
  }
  to {
    transform: translate3d(calc(var(--mx) * -0.34 - 48px), calc(var(--my) * -0.24 - 8px), 0) rotate(-1deg);
  }
}

@keyframes codeFloatV8 {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(18px, -22px, 0) rotate(3deg) scale(1.03); }
}

@keyframes bracketFloatAV8 {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-8px, -16px, 0) rotate(0deg); }
}

@keyframes bracketFloatBV8 {
  from { transform: translate3d(0, 0, 0) rotate(180deg); }
  to   { transform: translate3d(10px, -16px, 0) rotate(180deg); }
}

.code-fragment {
  animation-name: codeFloatV8;
}

@media (max-width: 1020px) {
  .hero-brand-mark {
    left: 52%;
    top: 14%;
    width: 340px;
    opacity: 0.075;
  }

  .code-line {
    left: 43%;
  }
}

@media (max-width: 720px) {
  .hero-brand-mark {
    left: auto;
    right: -64px;
    top: 17%;
    width: 240px;
    opacity: 0.055;
    animation: none;
  }

  .code-fragment {
    animation-duration: 7s;
  }
}


/* =========================================================
   V9 — Remove hero logo mark, add richer code symbol system
   ========================================================= */

.hero-brand-mark {
  display: none !important;
}

.code-a {
  left: 56%;
  top: 10%;
  font-size: clamp(44px, 6vw, 84px);
}

.code-b {
  left: 76%;
  top: 50%;
  font-size: clamp(52px, 7vw, 100px);
}

.code-c {
  left: 42%;
  bottom: 9%;
  font-size: clamp(42px, 5.8vw, 78px);
}

.code-d {
  left: 70%;
  top: 18%;
  color: rgba(255,255,255,.07);
  font-size: clamp(32px, 4vw, 60px);
}

.code-e {
  left: 50%;
  top: 45%;
  color: rgba(255,255,255,.055);
  font-size: clamp(58px, 8vw, 124px);
}

.code-f {
  left: 62%;
  top: 28%;
  font-size: clamp(36px, 4.5vw, 68px);
  color: rgba(249, 31, 56, .18);
  animation-duration: 9s;
}

.code-g {
  left: 86%;
  top: 28%;
  font-size: clamp(60px, 7vw, 108px);
  color: rgba(249, 31, 56, .16);
  animation-duration: 7.5s;
}

.code-h {
  left: 63%;
  bottom: 16%;
  font-size: clamp(34px, 4vw, 56px);
  color: rgba(255,255,255,.065);
  animation-duration: 12s;
}

.code-i {
  left: 82%;
  bottom: 20%;
  font-size: clamp(34px, 4vw, 62px);
  color: rgba(249, 31, 56, .18);
  animation-duration: 10.5s;
}

.code-j {
  left: 53%;
  top: 60%;
  font-size: clamp(24px, 2.6vw, 42px);
  color: rgba(255,255,255,.055);
  animation-duration: 14s;
}

.code-line {
  width: min(38vw, 580px);
}

.line-d {
  bottom: 18%;
  opacity: 0.36;
}

.line-e {
  bottom: 13%;
  opacity: 0.28;
}

@media (max-width: 1020px) {
  .code-f { left: 58%; top: 26%; }
  .code-g { left: 84%; top: 30%; }
  .code-h { left: 58%; bottom: 15%; }
  .code-i { left: 80%; bottom: 18%; }
  .code-j { left: 49%; top: 58%; }
}

@media (max-width: 720px) {
  .code-f { left: auto; right: 20%; top: 26%; font-size: 42px; }
  .code-g { left: auto; right: 6%; top: 30%; font-size: 68px; }
  .code-h { left: auto; right: 28%; bottom: 16%; font-size: 32px; }
  .code-i { left: auto; right: 10%; bottom: 20%; font-size: 34px; }
  .code-j,
  .line-d,
  .line-e {
    display: none;
  }
}


/* =========================================================
   V10 — Code editor hero feeling, softer motion
   Right status block intentionally untouched.
   ========================================================= */

.code-grid {
  inset: 2% -5% 0 18%;
  background-size: 104px 104px;
  opacity: 0.42;
  mask-image: radial-gradient(circle at 62% 42%, black 0%, rgba(0,0,0,.74) 48%, transparent 82%);
  transform: translate3d(calc(var(--mx) * .04), calc(var(--my) * .04), 0);
}

.editor-snippet {
  position: absolute;
  z-index: 0;
  color: rgba(255, 255, 255, 0.10);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, .88vw, 13px);
  line-height: 1.75;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  animation: editorDriftV10 18s ease-in-out infinite alternate;
}

.editor-line .ln {
  display: inline-block;
  width: 34px;
  color: rgba(255,255,255,.05);
}

.editor-line .kw { color: rgba(249,31,56,.40); }
.editor-line .fn { color: rgba(255,255,255,.18); }
.editor-line .op { color: rgba(249,31,56,.28); }
.editor-line .tag { color: rgba(150,180,255,.18); }
.editor-line .type { color: rgba(185,145,255,.20); }
.editor-line .bool { color: rgba(95,215,150,.18); }
.editor-line .comment { color: rgba(95,215,150,.12); }

.editor-snippet-a {
  left: 2.5%;
  top: 6%;
  opacity: .70;
  animation-duration: 20s;
}

.editor-snippet-b {
  left: 53%;
  top: 29%;
  opacity: .58;
  animation-duration: 22s;
}

.editor-snippet-c {
  left: 48%;
  bottom: 4%;
  opacity: .46;
  animation-duration: 24s;
}

.code-a {
  left: 53%;
  top: 10%;
  color: rgba(249,31,56,.20);
  animation-duration: 16s;
}

.code-b {
  left: 67%;
  top: 22%;
  color: rgba(185,145,255,.14);
  animation-duration: 18s;
}

.code-c {
  left: 40%;
  bottom: 8%;
  color: rgba(95,215,150,.12);
  animation-duration: 19s;
}

.code-d {
  left: 77%;
  top: 12%;
  color: rgba(249,31,56,.12);
  animation-duration: 21s;
}

.code-f {
  left: 61%;
  top: 56%;
  color: rgba(255,255,255,.095);
  animation-duration: 17s;
}

.code-g {
  left: 67%;
  bottom: 29%;
  color: rgba(249,31,56,.14);
  animation-duration: 15s;
}

.code-h {
  left: 54%;
  bottom: 24%;
  color: rgba(249,31,56,.12);
  animation-duration: 20s;
}

.code-i {
  left: 45%;
  top: 45%;
  color: rgba(95,215,150,.11);
  animation-duration: 18s;
}

.code-fragment {
  animation-name: editorSymbolFloatV10;
}

.bracket-a {
  left: 88%;
  top: 7%;
  opacity: .13;
  animation: bracketSoftAV10 16s ease-in-out infinite alternate;
}

.bracket-b {
  left: 42%;
  bottom: 13%;
  opacity: .12;
  animation: bracketSoftBV10 18s ease-in-out infinite alternate;
}

@keyframes editorDriftV10 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(4px, -6px, 0); }
}

@keyframes editorSymbolFloatV10 {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(6px, -8px, 0) rotate(1deg); }
}

@keyframes bracketSoftAV10 {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-4px,-6px,0); }
}

@keyframes bracketSoftBV10 {
  from { transform: translate3d(0,0,0) rotate(180deg); }
  to   { transform: translate3d(4px,-7px,0) rotate(180deg); }
}

@media (max-width: 720px) {
  .editor-snippet {
    font-size: 9px;
    opacity: .28;
  }

  .editor-snippet-a {
    left: 1%;
    top: 8%;
  }

  .editor-snippet-b {
    display: none;
  }

  .editor-snippet-c {
    left: 18%;
    bottom: 5%;
  }

  .code-a { left: auto; right: 12%; top: 15%; }
  .code-b { left: auto; right: -1%; top: 38%; }
  .code-c { left: auto; right: 20%; bottom: 11%; }
  .code-d { display: none; }
  .code-f { left: auto; right: 18%; top: 56%; }
  .code-g { left: auto; right: 6%; bottom: 28%; }
  .code-h { display: none; }
  .code-i { left: auto; right: 28%; top: 48%; }
}


/* =========================================================
   V11 — Faster + more visible hero code motion
   Right status panel remains untouched.
   ========================================================= */

.editor-snippet {
  animation-name: editorDriftV11;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
}

.editor-snippet-a {
  animation-duration: 9s;
}

.editor-snippet-b {
  animation-duration: 11s;
}

.editor-snippet-c {
  animation-duration: 12s;
}

.code-fragment {
  animation-name: editorSymbolFloatV11;
  animation-timing-function: ease-in-out;
}

.code-a { animation-duration: 8s; }
.code-b { animation-duration: 9.5s; }
.code-c { animation-duration: 10s; }
.code-d { animation-duration: 11s; }
.code-f { animation-duration: 8.5s; }
.code-g { animation-duration: 7s; }
.code-h { animation-duration: 10s; }
.code-i { animation-duration: 9s; }

.bracket-a {
  animation: bracketV11A 8s ease-in-out infinite alternate;
}

.bracket-b {
  animation: bracketV11B 9s ease-in-out infinite alternate;
}

@keyframes editorDriftV11 {
  0% {
    transform: translate3d(-4px, 5px, 0);
  }
  50% {
    transform: translate3d(7px, -9px, 0);
  }
  100% {
    transform: translate3d(14px, -16px, 0);
  }
}

@keyframes editorSymbolFloatV11 {
  0% {
    transform: translate3d(-6px, 5px, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(7px, -9px, 0) rotate(1deg);
  }
  100% {
    transform: translate3d(16px, -18px, 0) rotate(2.2deg);
  }
}

@keyframes bracketV11A {
  from {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(-10px, -13px, 0);
  }
}

@keyframes bracketV11B {
  from {
    transform: translate3d(-5px, 5px, 0) rotate(180deg);
  }
  to {
    transform: translate3d(10px, -14px, 0) rotate(180deg);
  }
}

/* Slightly more visible editor material while preserving the dark look */
.editor-snippet-a { opacity: .78; }
.editor-snippet-b { opacity: .68; }
.editor-snippet-c { opacity: .56; }

.code-a { color: rgba(249,31,56,.25); }
.code-b { color: rgba(185,145,255,.20); }
.code-c { color: rgba(95,215,150,.18); }
.code-f { color: rgba(255,255,255,.14); }
.code-g { color: rgba(249,31,56,.21); }
.code-i { color: rgba(95,215,150,.17); }

/* More responsive parallax depth */
.code-grid {
  transform: translate3d(calc(var(--mx) * .085), calc(var(--my) * .085), 0);
}

@media (max-width: 720px) {
  /* Keep mobile alive, but slightly calmer than desktop */
  .editor-snippet {
    animation-duration: 13s;
  }

  .code-fragment {
    animation-duration: 11s;
  }
}


/* =========================================================
   V12 — Independent/random-feeling motion per hero element
   ========================================================= */

/*
  Each symbol gets its own keyframes, duration and delay.
  This avoids the "whole background drifting together" effect.
*/

.code-a {
  animation: symbolA 10.5s ease-in-out -1.4s infinite alternate;
}

.code-b {
  animation: symbolB 13s ease-in-out -4.7s infinite alternate;
}

.code-c {
  animation: symbolC 12s ease-in-out -2.2s infinite alternate;
}

.code-d {
  animation: symbolD 15s ease-in-out -6.1s infinite alternate;
}

.code-f {
  animation: symbolF 10s ease-in-out -3.3s infinite alternate;
}

.code-g {
  animation: symbolG 11s ease-in-out -5.5s infinite alternate;
}

.code-h {
  animation: symbolH 14s ease-in-out -1.8s infinite alternate;
}

.code-i {
  animation: symbolI 12.5s ease-in-out -7s infinite alternate;
}

@keyframes symbolA {
  0%   { transform: translate3d(-5px,  8px, 0) rotate(-2deg); }
  35%  { transform: translate3d(12px, -7px, 0) rotate(1deg); }
  70%  { transform: translate3d( 4px,-18px, 0) rotate(3deg); }
  100% { transform: translate3d(19px, -3px, 0) rotate(0deg); }
}

@keyframes symbolB {
  0%   { transform: translate3d( 7px,-10px, 0) rotate(2deg); }
  30%  { transform: translate3d(-9px,  5px, 0) rotate(-2deg); }
  65%  { transform: translate3d(13px, 14px, 0) rotate(1deg); }
  100% { transform: translate3d(-4px,-17px, 0) rotate(3deg); }
}

@keyframes symbolC {
  0%   { transform: translate3d(-10px,-4px, 0) rotate(-1deg); }
  40%  { transform: translate3d(  6px,13px, 0) rotate(2deg); }
  75%  { transform: translate3d( 17px,-8px, 0) rotate(0deg); }
  100% { transform: translate3d( -3px, 5px, 0) rotate(-3deg); }
}

@keyframes symbolD {
  0%   { transform: translate3d( 0px, 10px, 0) rotate(0deg); }
  33%  { transform: translate3d(-15px,-4px, 0) rotate(-1deg); }
  72%  { transform: translate3d(  8px,-15px,0) rotate(2deg); }
  100% { transform: translate3d( 14px,  3px,0) rotate(1deg); }
}

@keyframes symbolF {
  0%   { transform: translate3d(-7px, -9px,0) rotate(-2deg); }
  28%  { transform: translate3d(11px,  4px,0) rotate(2deg); }
  62%  { transform: translate3d(-2px, 17px,0) rotate(0deg); }
  100% { transform: translate3d(18px,-11px,0) rotate(3deg); }
}

@keyframes symbolG {
  0%   { transform: translate3d( 4px, 15px,0) rotate(0deg); }
  38%  { transform: translate3d(-8px, -7px,0) rotate(-3deg); }
  73%  { transform: translate3d(14px,-13px,0) rotate(2deg); }
  100% { transform: translate3d(-3px,  2px,0) rotate(1deg); }
}

@keyframes symbolH {
  0%   { transform: translate3d(-12px, 3px,0) rotate(-1deg); }
  31%  { transform: translate3d(  5px,-14px,0) rotate(1deg); }
  68%  { transform: translate3d( 16px,  7px,0) rotate(2deg); }
  100% { transform: translate3d( -5px,12px,0) rotate(-2deg); }
}

@keyframes symbolI {
  0%   { transform: translate3d(10px,-12px,0) rotate(2deg); }
  37%  { transform: translate3d(-8px,  9px,0) rotate(-2deg); }
  66%  { transform: translate3d( 3px, 18px,0) rotate(1deg); }
  100% { transform: translate3d(16px, -5px,0) rotate(3deg); }
}

/* Code snippets also move independently, but more subtly. */
.editor-snippet-a {
  animation: snippetA 15s ease-in-out -3.2s infinite alternate;
}

.editor-snippet-b {
  animation: snippetB 18s ease-in-out -7.3s infinite alternate;
}

.editor-snippet-c {
  animation: snippetC 16.5s ease-in-out -5.1s infinite alternate;
}

@keyframes snippetA {
  0%   { transform: translate3d(-3px, 2px,0); }
  45%  { transform: translate3d( 8px,-6px,0); }
  100% { transform: translate3d( 2px, 8px,0); }
}

@keyframes snippetB {
  0%   { transform: translate3d( 5px,-5px,0); }
  52%  { transform: translate3d(-7px, 6px,0); }
  100% { transform: translate3d( 9px, 2px,0); }
}

@keyframes snippetC {
  0%   { transform: translate3d(-5px,-3px,0); }
  43%  { transform: translate3d( 4px, 8px,0); }
  100% { transform: translate3d(10px,-6px,0); }
}

.bracket-a {
  animation: bracketIndependentA 13s ease-in-out -2.8s infinite alternate;
}

.bracket-b {
  animation: bracketIndependentB 15s ease-in-out -6.4s infinite alternate;
}

@keyframes bracketIndependentA {
  0%   { transform: translate3d(-2px, 8px,0) rotate(0deg); }
  50%  { transform: translate3d(10px,-6px,0) rotate(1deg); }
  100% { transform: translate3d(-8px,-12px,0) rotate(-1deg); }
}

@keyframes bracketIndependentB {
  0%   { transform: translate3d(8px,-7px,0) rotate(180deg); }
  47%  { transform: translate3d(-7px,9px,0) rotate(179deg); }
  100% { transform: translate3d(5px,-13px,0) rotate(181deg); }
}

/*
  Keep cursor parallax extremely subtle now that each element
  already has independent animation.
*/
.code-grid {
  transform: translate3d(calc(var(--mx) * .025), calc(var(--my) * .025), 0);
}

@media (max-width: 720px) {
  .code-a { animation-duration: 14s; }
  .code-b { animation-duration: 16s; }
  .code-c { animation-duration: 15s; }
  .code-f { animation-duration: 14s; }
  .code-g { animation-duration: 15s; }
  .code-i { animation-duration: 16s; }

  .editor-snippet-a,
  .editor-snippet-c {
    animation-duration: 20s;
  }
}