* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-image:
    linear-gradient(to right, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, #000000, #050d25);
  background-size: 40px 40px, 40px 40px, auto;
  animation: slideGridRight 4s linear infinite;
  color: #91ebeb;
  font-family: Century Gothic, Segoe UI, AppleGothic, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

@keyframes slideGridRight {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 80px 80px, 80px -80px, 0 0;
  }
}

.circuit {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.trace {
  position: absolute;
  right: 0;
  top: var(--t);
  width: var(--w);
  height: 2px;
  background: linear-gradient(to left, rgba(88, 222, 255, 0.55), rgba(88, 222, 255, 0.15));
  box-shadow: 0 0 6px rgba(88, 222, 255, 0.35);
}

.trace::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8fbff;
  box-shadow: 0 0 8px 2px #58deff;
  animation: nodePulse 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}

.trace::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #d8fbff, rgba(88, 222, 255, 0));
  box-shadow: 0 0 10px #58deff;
  opacity: 0;
  animation: pulseMove var(--s) linear infinite;
  animation-delay: var(--d);
}

.trace span {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 6vh;
  transform-origin: 0 0;
  background: linear-gradient(to bottom, rgba(88, 222, 255, 0.6), rgba(88, 222, 255, 0.4));
  box-shadow: 0 0 6px rgba(88, 222, 255, 0.35);
}

.trace span.up {
  transform: scaleY(-1);
}

.trace span::before {
  content: "";
  position: absolute;
  left: -8vw;
  bottom: 0;
  width: 8vw;
  height: 2px;
  background: linear-gradient(to right, rgba(88, 222, 255, 0.1), rgba(88, 222, 255, 0.5));
  box-shadow: 0 0 6px rgba(88, 222, 255, 0.35);
}

.trace span::after {
  content: "";
  position: absolute;
  left: calc(-8vw - 4px);
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8fbff;
  box-shadow: 0 0 8px 2px #58deff;
  animation: nodePulse 2.4s ease-in-out infinite;
  animation-delay: 0.7s;
}

@keyframes pulseMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(-1 * var(--w) + 80px));
    opacity: 0;
  }
}

@keyframes nodePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.trace:nth-child(1)  { --t: 6vh;  --w: 52vw; --d: 0s;   --s: 3.2s; }
.trace:nth-child(2)  { --t: 14vh; --w: 34vw; --d: 1.1s; --s: 2.8s; }
.trace:nth-child(3)  { --t: 22vh; --w: 46vw; --d: 0.4s; --s: 3.6s; }
.trace:nth-child(4)  { --t: 30vh; --w: 28vw; --d: 2s;   --s: 2.4s; }
.trace:nth-child(5)  { --t: 38vh; --w: 58vw; --d: 0.8s; --s: 4s;   }
.trace:nth-child(6)  { --t: 46vh; --w: 38vw; --d: 1.6s; --s: 3s;   }
.trace:nth-child(7)  { --t: 54vh; --w: 50vw; --d: 0.2s; --s: 3.4s; }
.trace:nth-child(8)  { --t: 62vh; --w: 30vw; --d: 2.4s; --s: 2.6s; }
.trace:nth-child(9)  { --t: 70vh; --w: 44vw; --d: 1.3s; --s: 3.8s; }
.trace:nth-child(10) { --t: 78vh; --w: 56vw; --d: 0.6s; --s: 3.1s; }
.trace:nth-child(11) { --t: 86vh; --w: 36vw; --d: 1.9s; --s: 2.9s; }
.trace:nth-child(12) { --t: 94vh; --w: 48vw; --d: 0.9s; --s: 3.5s; }

  header, main, footer {
    max-width: 1100px;
    margin: auto;
    padding: 24px;
  }

  header, nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  a {
    color: #58deff;
    text-underline-offset: 3px;
  }

  .brand {
    font-family: "Century Gothic", "Segoe UI", sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }

  h1 {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #d8fbff;
    text-shadow: 0 0 14px rgba(88, 222, 255, 0.7);
  }

  section {
    margin-top: 32px;
  }

  .eyebrow {
    font-family: Consolas, "Lucida Console", "Courier New", monospace;
    color: #629ac0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

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

  article {
    background: white;
    border: 1px solid #dce2dc;
    border-radius: 16px;
    padding: 20px;
  }

  footer {
    font-family: Consolas, "Lucida Console", monospace;
    color: #629ac0;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }

  @media (max-width: 700px) {
    .modules {
      grid-template-columns: 1fr;
      .wide { grid-column: auto; }
    }
  }

  .my-image {
    position: relative;
    left: 700px;
    top: 100px;
    width: 400px;
    height: auto;
    margin: auto;
    align-items: center;
  }

  p {
    font-family: Consolas, "Lucida Console", monospace;
    font-size: 24px;
    letter-spacing: 0.05em;
  }

  .type {
    width: fit-content;
    max-width: 100%;
    clip-path: inset(0 100% 0 0);
    animation: typing calc(var(--n) * var(--speed, 0.05s))
              steps(var(--n)) var(--delay, 0s) forwards;
    padding-right: 0.6em;
  }

  .type.nowrap {
    white-space: nowrap;
  }

  @keyframes typing {
    to { clip-path: inset(0 0 0 0); }
  }

  /* Show the text instantly for people who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .type {
      animation: none;
      clip-path: none;
      article {
        animation: none;
        opacity: 1;
      }
    }
  }

  article {
    background: rgba(5, 13, 37, 0.65);
    border: 1px solid rgba(88, 222, 255, 0.35);
    backdrop-filter: blur(6px);
    box-shadow:
      0 0 18px rgba(88, 222, 255, 0.12),
      inset 0 0 20px rgba(88, 222, 255, 0.05);
    opacity: 0;
    animation: cardIn 0.6s ease-out var(--delay, 0s) forwards;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }

  article:hover {
    transform: translateY(-6px);
    border-color: #58deff;
    box-shadow:
      0 0 28px rgba(88, 222, 255, 0.35),
      inset 0 0 24px rgba(88, 222, 255, 0.1);
  }

  @keyframes cardIn {
    from { opacity: 0; translate: 0 25px; }
    to { opacity: 1; translate: 0 0;}
  }

  article h2 {
    margin-top: 0;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8fbff;
    text-shadow: 0 0 10px rgba(88, 222, 255, 0.6);
  }

  article p,
  article li {
    font-size: 1rem;
    line-height: 1.7;
  }

  article ul {
    margin: 0;
    padding-left: 1.2rem;
  }

  .wide {
    grid-column: span 2;
  }

  footer p {
    font-size: 0.875rem;
  }
  
.quiz {
  padding: 24px;
  border: 1px solid rgba(88, 222, 255, 0.35);
  border-radius: 16px;
  background: rgba(5, 13, 37, 0.85);
}

.quiz h2 {
  color: #d8fbff;
  font-family: Impact, "Arial Black", sans-serif;
}

.quiz-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quiz.answers input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz.answers label {
  padding: 16px;
  border: 1px solid #29405e;
  border-radius: 10px;
  background: #0a1631;
  color: #d8fbff;
  cursor: pointer;
  font-family: Consolas, monospace;
  font-size: 1rem;
}

.quiz.answers label:hover {
  border-color: #58deff;
}

.quiz.answers input:checked + label {
  border-color: #58deff;
  background: #172e50;
  box-shadow: 0 0 12px rgba(88, 222, 255, 0.15);
}

.quiz details {
  margin-top: 20px;
  color: #d8fbff;
}

.quiz summary {
  color: #58deff;
  cursor: pointer;
}

.quiz .correct {
  color: #58deff;
  font-size: 1rem;
}

@media (max-width: 700px) {
  .quiz-answers {
    grid-template-columns: 1fr;
  }
}

.quiz {
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid rgba(88, 222, 255, 0.35);
  border-radius: 16px;
  background: rgba(5, 13, 37, 0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(88, 222, 255, 0.12), inset 0 0 24px rgba(88, 222, 255, 0.05);
}

.quiz-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(88, 222, 255, 0.2);
}

.quiz-top .topic {
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 0.85rem;
  color: #629ac0;
  border: 1px solid rgba(98, 154, 192, 0.5);
  border-radius: 999px;
  padding: 2px 12px;
}

.quiz .question {
  margin: 0 0 32px;
  font-family: "Century Gothic", "Segoe UI", sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.3;
  font-weight: bold;
  color: #d8fbff;
  text-shadow: 0 0 12px rgba(88, 222, 255, 0.45);
  max-width: 34ch;
}

.quiz code {
  font-family: Consolas, "Lucida Console", monospace;
  color: #58deff;
}

.quiz-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quiz-answers input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz-answers label {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid #29405e;
  border-radius: 12px;
  background: #0a1631;
  color: #d8fbff;
  cursor: pointer;
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 1.1rem;
  transition: border-color 0.2s, 0.2s, box-shadow 0.2s, transform 0.2s;
}

.quiz-answers .key {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #58deff;
  border-radius: 8px;
  color: #58deff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  transition: 0.2s, color 0.2s;
}

.quiz-answers label:hover {
  border-color: #58deff;
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(88, 222, 255, 0.2);
}

.quiz-answers input:checked + label {
  border-color: #58deff;
  background: #172e50;
  box-shadow: 0 0 18px rgba(88, 222, 255, 0.3);
}

.quiz-answers input:checked + label .key {
  background: #58deff;
  color: #050d25;
}

.quiz-answers input:focus-visible + label {
  outline: 2px solid #d8fbff;
  outline-offset: 3px;
}

.quiz-answers input:disabled + label {
  cursor: default;
  transform: none;
}

.quiz-answers label.is-correct {
  border-color: #3dffa0;
  background: rgba(61, 255, 160, 0.12);
  box-shadow: 0 0 18px rgba(61, 255, 160, 0.35);
}

.quiz-answers label.is-correct .key {
  background: #3dffa0;
  border-color: #3dffa0;
  color: #050d25;
}

.quiz-answers label.is-wrong {
  border-color: #ff5c7a;
  background: rgba(255, 92, 122, 0.12);
  box-shadow: 0 0 18px rgba(255, 92, 122, 0.3);
}

.quiz-answers label.is-wrong .key {
  background: #ff5c7a;
  border-color: #ff5c7a;
  color: #050d25;
}

.quiz-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}

.check-btn {
  padding: 12px 28px;
  border: 1px solid #58deff;
  border-radius: 10px;
  background: transparent;
  color: #58deff;
  font-family: "Century Gothic", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: 0.2s, color 0.2s, box-shadow 0.2s;
}

.check-btn:hover:not(:disabled) {
  background: #58deff;
  color: #050d25;
  box-shadow: 0 0 18px rgba(88, 222, 255, 0.5);
}

.check-btn:focus-visible {
  outline: 2px solid #d8fbff;
  outline-offset: 3px;
}

.check-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.quiz .feedback {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.feedback.good { color: #3dffa0; }
.feedback.bad  { color: #ff5c7a; }
.feedback.warn { color: #ffd166; }

.quiz .explain {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid #58deff;
  font-size: 1rem;
  line-height: 1.7;
  color: #91ebeb;
}

.score {
  padding: 28px;
  text-align: center;
  border: 1px solid #58deff;
  border-radius: 16px;
  background: rgba(5, 13, 37, 0.9);
  box-shadow: 0 0 28px rgba(88, 222, 255, 0.3);
}

.score h2 {
  margin: 0 0 8px;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8fbff;
}

@media (max-width: 700px) {
  .quiz-answers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-answers label, .check-btn { transition: none; }
}

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

body {
  margin: 0;
  background-image:
    linear-gradient(to right, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, #000000, #050d25);
  background-size: 40px 40px, 40px 40px, auto;
  animation: slideGridRight 4s linear infinite;
  color: #91ebeb;
  font-family: Century Gothic, Segoe UI, AppleGothic, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes slideGridRight {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 80px 80px, 80px -80px, 0 0;
  }
}

.circuit {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.trace {
  position: absolute;
  right: 0;
  top: var(--t);
  width: var(--w);
  height: 2px;
  background: linear-gradient(to left, rgba(88, 222, 255, 0.55), rgba(88, 222, 255, 0.15));
  box-shadow: 0 0 6px rgba(88, 222, 255, 0.35);
}

.trace::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8fbff;
  box-shadow: 0 0 8px 2px #58deff;
  animation: nodePulse 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}

.trace::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #d8fbff, rgba(88, 222, 255, 0));
  box-shadow: 0 0 10px #58deff;
  opacity: 0;
  animation: pulseMove var(--s) linear infinite;
  animation-delay: var(--d);
}

@keyframes pulseMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(-1 * var(--w) + 80px));
    opacity: 0;
  }
}

@keyframes nodePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.trace:nth-child(1)  { --t: 6vh;  --w: 52vw; --d: 0s;   --s: 3.2s; }
.trace:nth-child(2)  { --t: 14vh; --w: 34vw; --d: 1.1s; --s: 2.8s; }
.trace:nth-child(3)  { --t: 22vh; --w: 46vw; --d: 0.4s; --s: 3.6s; }
.trace:nth-child(4)  { --t: 30vh; --w: 28vw; --d: 2s;   --s: 2.4s; }
.trace:nth-child(5)  { --t: 38vh; --w: 58vw; --d: 0.8s; --s: 4s;   }
.trace:nth-child(6)  { --t: 46vh; --w: 38vw; --d: 1.6s; --s: 3s;   }
.trace:nth-child(7)  { --t: 54vh; --w: 50vw; --d: 0.2s; --s: 3.4s; }
.trace:nth-child(8)  { --t: 62vh; --w: 30vw; --d: 2.4s; --s: 2.6s; }
.trace:nth-child(9)  { --t: 70vh; --w: 44vw; --d: 1.3s; --s: 3.8s; }
.trace:nth-child(10) { --t: 78vh; --w: 56vw; --d: 0.6s; --s: 3.1s; }
.trace:nth-child(11) { --t: 86vh; --w: 36vw; --d: 1.9s; --s: 2.9s; }
.trace:nth-child(12) { --t: 94vh; --w: 48vw; --d: 0.9s; --s: 3.5s; }

header, main, footer {
  max-width: 1100px;
  margin: auto;
  padding: 24px;
}

header {
  border-bottom: 1px solid rgba(88, 222, 255, 0.25);
  padding-bottom: 32px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

a {
  color: #58deff;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.8);
}

.brand {
  font-family: "Century Gothic", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.5);
}

.nav-btn {
  padding: 8px 18px;
  border: 1px solid #58deff;
  border-radius: 8px;
  font-family: Consolas, monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(88, 222, 255, 0.05);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.nav-btn:hover {
  background: #58deff;
  color: #050d25;
  box-shadow: 0 0 16px rgba(88, 222, 255, 0.6);
  transform: translateY(-2px);
}

h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d8fbff;
  text-shadow: 0 0 14px rgba(88, 222, 255, 0.7);
  margin: 16px 0;
}

.eyebrow {
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  color: #629ac0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  margin-bottom: 12px;
}

.hero-desc {
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 1.1rem;
  color: #91ebeb;
  max-width: 800px;
}

.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

article {
  background: rgba(5, 13, 37, 0.65);
  border: 1px solid rgba(88, 222, 255, 0.35);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 18px rgba(88, 222, 255, 0.12),
    inset 0 0 20px rgba(88, 222, 255, 0.05);
  opacity: 0;
  animation: cardIn 0.6s ease-out var(--delay, 0s) forwards;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

article:hover {
  transform: translateY(-6px);
  border-color: #58deff;
  box-shadow:
    0 0 28px rgba(88, 222, 255, 0.35),
    inset 0 0 24px rgba(88, 222, 255, 0.1);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

article h2 {
  margin-top: 0;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.6);
}

article p,
article li {
  font-size: 1rem;
  line-height: 1.7;
}

article ul {
  margin: 12px 0 0 0;
  padding-left: 1.2rem;
}

.wide {
  grid-column: span 2;
}

footer {
  font-family: Consolas, "Lucida Console", monospace;
  color: #629ac0;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(88, 222, 255, 0.25);
  margin-top: 60px;
}

@media (max-width: 700px) {
  .modules {
    grid-template-columns: 1fr;
  }
  .wide { 
    grid-column: auto; 
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .trace::before, .trace::after { animation: none; }
  article { animation: none; opacity: 1; }
}

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

body {
  margin: 0;
  background-image:
    linear-gradient(to right, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(88, 222, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, #000000, #050d25);
  background-size: 40px 40px, 40px 40px, auto;
  animation: slideGridRight 4s linear infinite;
  color: #91ebeb;
  font-family: Century Gothic, Segoe UI, AppleGothic, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes slideGridRight {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 80px 80px, 80px -80px, 0 0;
  }
}

.circuit {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.trace {
  position: absolute;
  right: 0;
  top: var(--t);
  width: var(--w);
  height: 2px;
  background: linear-gradient(to left, rgba(88, 222, 255, 0.55), rgba(88, 222, 255, 0.15));
  box-shadow: 0 0 6px rgba(88, 222, 255, 0.35);
}

.trace::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8fbff;
  box-shadow: 0 0 8px 2px #58deff;
  animation: nodePulse 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}

.trace::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #d8fbff, rgba(88, 222, 255, 0));
  box-shadow: 0 0 10px #58deff;
  opacity: 0;
  animation: pulseMove var(--s) linear infinite;
  animation-delay: var(--d);
}

@keyframes pulseMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(-1 * var(--w) + 80px));
    opacity: 0;
  }
}

@keyframes nodePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.trace:nth-child(1)  { --t: 6vh;  --w: 52vw; --d: 0s;   --s: 3.2s; }
.trace:nth-child(2)  { --t: 14vh; --w: 34vw; --d: 1.1s; --s: 2.8s; }
.trace:nth-child(3)  { --t: 22vh; --w: 46vw; --d: 0.4s; --s: 3.6s; }
.trace:nth-child(4)  { --t: 30vh; --w: 28vw; --d: 2s;   --s: 2.4s; }
.trace:nth-child(5)  { --t: 38vh; --w: 58vw; --d: 0.8s; --s: 4s;   }
.trace:nth-child(6)  { --t: 46vh; --w: 38vw; --d: 1.6s; --s: 3s;   }
.trace:nth-child(7)  { --t: 54vh; --w: 50vw; --d: 0.2s; --s: 3.4s; }
.trace:nth-child(8)  { --t: 62vh; --w: 30vw; --d: 2.4s; --s: 2.6s; }
.trace:nth-child(9)  { --t: 70vh; --w: 44vw; --d: 1.3s; --s: 3.8s; }
.trace:nth-child(10) { --t: 78vh; --w: 56vw; --d: 0.6s; --s: 3.1s; }
.trace:nth-child(11) { --t: 86vh; --w: 36vw; --d: 1.9s; --s: 2.9s; }
.trace:nth-child(12) { --t: 94vh; --w: 48vw; --d: 0.9s; --s: 3.5s; }

header, main, footer {
  max-width: 1100px;
  margin: auto;
  padding: 24px;
}

header {
  border-bottom: 1px solid rgba(88, 222, 255, 0.25);
  padding-bottom: 32px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

a {
  color: #58deff;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.8);
}

.brand {
  font-family: "Century Gothic", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.5);
}

.nav-btn {
  padding: 8px 18px;
  border: 1px solid #58deff;
  border-radius: 8px;
  font-family: Consolas, monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(88, 222, 255, 0.05);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.nav-btn:hover {
  background: #58deff;
  color: #050d25;
  box-shadow: 0 0 16px rgba(88, 222, 255, 0.6);
  transform: translateY(-2px);
}

h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d8fbff;
  text-shadow: 0 0 14px rgba(88, 222, 255, 0.7);
  margin: 16px 0;
}

.eyebrow {
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  color: #629ac0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  margin-bottom: 12px;
}

.hero-desc {
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 1.1rem;
  color: #91ebeb;
  max-width: 800px;
}

.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

article {
  background: rgba(5, 13, 37, 0.65);
  border: 1px solid rgba(88, 222, 255, 0.35);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 18px rgba(88, 222, 255, 0.12),
    inset 0 0 20px rgba(88, 222, 255, 0.05);
  opacity: 0;
  animation: cardIn 0.6s ease-out var(--delay, 0s) forwards;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

article:hover {
  transform: translateY(-6px);
  border-color: #58deff;
  box-shadow:
    0 0 28px rgba(88, 222, 255, 0.35),
    inset 0 0 24px rgba(88, 222, 255, 0.1);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

article h2 {
  margin-top: 0;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8fbff;
  text-shadow: 0 0 10px rgba(88, 222, 255, 0.6);
}

article p,
article li {
  font-size: 1rem;
  line-height: 1.7;
}

article ul {
  margin: 12px 0 0 0;
  padding-left: 1.2rem;
}

.wide {
  grid-column: span 2;
}

footer {
  font-family: Consolas, "Lucida Console", monospace;
  color: #629ac0;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(88, 222, 255, 0.25);
  margin-top: 60px;
}

.matrix-stream {
  margin-top: 50px;
  background: rgba(5, 13, 37, 0.75);
  border: 1px solid rgba(88, 222, 255, 0.35);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px rgba(88, 222, 255, 0.12);
}

.matrix-header {
  border-bottom: 1px solid rgba(88, 222, 255, 0.2);
  padding-bottom: 14px;
  margin-bottom: 28px;
}

.matrix-header h2 {
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 0.1em;
  color: #d8fbff;
  text-shadow: 0 0 12px rgba(88, 222, 255, 0.6);
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.matrix-card {
  background: rgba(5, 13, 37, 0.85);
  border: 1px solid rgba(88, 222, 255, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 0 14px rgba(88, 222, 255, 0.08);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.matrix-card:hover {
  transform: translateY(-4px);
  border-color: #58deff;
  box-shadow: 0 0 22px rgba(88, 222, 255, 0.3);
}

.card-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Consolas, monospace;
  font-size: 0.75rem;
  color: #629ac0;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(88, 222, 255, 0.15);
}

.card-hud .tag {
  color: #58deff;
  background: rgba(88, 222, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(88, 222, 255, 0.3);
  font-weight: bold;
}

.matrix-card h3 {
  margin: 0 0 10px 0;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: #d8fbff;
  text-shadow: 0 0 8px rgba(88, 222, 255, 0.6);
}

.matrix-card p {
  margin: 0;
  font-family: Century Gothic, Segoe UI, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #91ebeb;
}

.wide-card {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .modules, .matrix-grid {
    grid-template-columns: 1fr;
  }
  .wide, .wide-card { 
    grid-column: auto; 
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .trace::before, .trace::after { animation: none; }
  article, .matrix-card { animation: none; opacity: 1; }
}