/* =====================================================================
   Steel Hull Studio — Cyber Edition '96
   Concept: de splashpagina van een grote merksite uit 1996. Een cockpit
   van chroomblauwe panelen op een golvend neongroen draadraster (de
   digitale zee), een beeldscherm met het logo in vuur, rode capsules,
   een ENTER-knop en de beruchte LOW ROAD voor trage modems.
   Alleen systeemfonts van toen (Impact, Arial Black, Verdana, Courier).
   ===================================================================== */

:root {
  --neon: #39ff14;
  --neon-soft: #c6ffb0;
  --hot: #ff2020;
  --ink-dark: #04143a;
  --fire-hi: #fff4b0;

  --font-impact: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --font-black: "Arial Black", "Arial Bold", Gadget, sans-serif;
  --font-body: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --font-term: "Courier New", "Lucida Console", ui-monospace, monospace;

  /* Het chroomblauw van de panelen: licht randje boven, donker midden, weerkaatsing onder */
  --panel: linear-gradient(180deg, #c3e0ff 0%, #5a98f0 12%, #2259c8 38%, #0e3288 66%, #1b4db4 86%, #7cb1f7 100%);
  --panel-edge:
    inset 0 3px 0 rgba(255, 255, 255, .6),
    inset 0 -4px 0 rgba(0, 0, 0, .35),
    0 0 0 3px var(--ink-dark),
    0 0 0 5px #6fa8f5,
    0 0 0 7px var(--ink-dark),
    0 14px 34px rgba(0, 0, 0, .75);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #000;
  color: #dbe7ff;
  font: 14px/1.6 var(--font-body);
  overflow-x: hidden;
}

/* ---------- Het golvende neonraster ---------- */

/* Eén tegel verder dan het scherm, zodat de verschuiving van precies één
   tegel naadloos rondloopt. transform = alleen compositor-werk. */
.cybergrid {
  position: fixed;
  top: 0;
  left: -480px;
  z-index: -2;
  width: calc(100% + 960px);
  height: 100%;
  background: #000 url("../img/cybergrid.svg") 0 0 / 480px 480px repeat;
  animation: gridflow 36s linear infinite;
  will-change: transform;
}

@keyframes gridflow {
  to { transform: translateX(480px); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%);
  pointer-events: none;
}

/* ---------- Gedeelde knoppen ---------- */

/* Rode capsule, zoals "WHAT'S NEW" */
.capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffa3a3 0%, #ff3030 32%, #c3000e 62%, #ff4545 100%);
  box-shadow: 0 0 0 2px #5a0006, 0 3px 6px rgba(0, 0, 0, .5), inset 0 -3px 5px rgba(0, 0, 0, .25);
  color: #fff;
  font: italic 900 13px/1.1 var(--font-black);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 #5a0006;
  text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease;
}

.capsule:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

.capsule--big {
  min-height: 42px;
  padding: 0 26px;
  font-size: 17px;
}

.capsule--small {
  min-height: 30px;
  padding: 0 14px;
  font-size: 11px;
}

.capsule--green {
  background: linear-gradient(180deg, #dcffc8 0%, #54e62a 32%, #1e8f00 62%, #6ef23e 100%);
  box-shadow: 0 0 0 2px #0b3d00, 0 3px 6px rgba(0, 0, 0, .5), inset 0 -3px 5px rgba(0, 0, 0, .25);
  color: #042000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
}

.capsule--blue {
  background: linear-gradient(180deg, #c3e0ff 0%, #4a8cf0 32%, #1340a8 62%, #5b9af3 100%);
  box-shadow: 0 0 0 2px var(--ink-dark), 0 3px 6px rgba(0, 0, 0, .5), inset 0 -3px 5px rgba(0, 0, 0, .25);
  text-shadow: 1px 1px 0 var(--ink-dark);
}

/* De grote rode ovale ENTER-knop */
.enter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 168px;
  height: 82px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 28%, #ff9a9a 0%, #e8141e 42%, #8a0008 100%);
  box-shadow:
    0 0 0 3px #7a0008,
    0 0 0 6px #c9d0d9,
    0 0 0 8px #1a1f27,
    0 8px 16px rgba(0, 0, 0, .6),
    inset 0 -8px 14px rgba(0, 0, 0, .35);
  color: #fff;
  font: italic 900 30px/1 var(--font-black);
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 2px 3px 0 #3a0003;
  -webkit-text-stroke: 1.5px #5a0006;
  transition: transform .15s ease, filter .15s ease;
}

.enter:hover {
  filter: brightness(1.12);
  transform: scale(1.05);
}

.capsule:focus-visible,
.enter:focus-visible,
.light:focus-visible,
.plug:focus-visible,
.lr:focus-visible,
.release:focus-visible,
.orbit:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 4px;
}

/* ---------- De boog bovenaan ---------- */

.arc {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 12px;
  text-align: center;
}

.arc-plate {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: -6px;
  padding: 5px 30px 7px;
  border: 3px solid var(--ink-dark);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #d8ffc8 0%, #45d41e 40%, #137a00 75%, #3fbf1a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .6);
  color: #fff;
  font: italic 900 15px/1.2 var(--font-black);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #073a00, -1px -1px 0 #073a00, 1px -1px 0 #073a00, -1px 1px 0 #073a00;
}

.arc-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 16px;
  padding: 18px 24px 24px;
  border-radius: 0 0 50% 50% / 0 0 46px 46px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
}

.arc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

/* Rode lampjes = talen; de actieve taal brandt geel */
.light {
  display: grid;
  place-items: center;
  width: 33px;
  height: 20px;
  border: 1px solid #3a0003;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9d9d 0%, #e0141e 45%, #7a0008 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .5);
  color: #fff;
  font: 900 10px/1 var(--font-black);
  text-decoration: none;
  text-shadow: 1px 1px 0 #3a0003;
}

.light:hover { filter: brightness(1.25); }

.light.on {
  background: linear-gradient(180deg, #ffffff 0%, #fff36b 40%, #e8a800 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 10px #fff36b, 0 0 20px rgba(255, 220, 60, .7);
  color: #4a2a00;
  text-shadow: none;
}

.arc-label {
  margin: 10px 0 0;
  color: var(--neon-soft);
  font: 700 11px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--neon);
}

/* ---------- De cockpit ---------- */

.cockpit {
  padding: 26px 16px 60px;
}

.cockpit-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

/* De vleugels staan schuin naar het scherm toe, zoals een cockpit */
.wing {
  padding: 12px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
}

.wing--left { transform: perspective(900px) rotateY(20deg); transform-origin: right center; }
.wing--right { transform: perspective(900px) rotateY(-20deg); transform-origin: left center; }

.wing-screen {
  padding: 18px 16px;
  border: 2px solid #000;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #0c2b0c 0%, #020802 75%);
  box-shadow: inset 0 0 22px rgba(57, 255, 20, .18), inset 0 2px 8px rgba(0, 0, 0, .9);
  text-align: center;
}

/* Neongroene blokletters: "CHECK OUT THE ...!" */
.neon {
  margin: 0 0 12px;
  color: var(--neon-soft);
  font: 400 clamp(22px, 2.4vw, 30px)/1.02 var(--font-impact);
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #0a4a00;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 22px var(--neon), 2px 3px 0 #001a00;
  animation: buzzsign 4s steps(1) infinite;
}

/* Een neonreclame die af en toe hapert */
@keyframes buzzsign {
  0%, 91%, 94%, 100% { opacity: 1; }
  92%, 95% { opacity: .55; }
}

.wing-text {
  margin: 0 0 14px;
  color: #b8f5a6;
  font: 12.5px/1.55 var(--font-body);
}

/* Rode gloeiletters: "Full of magic and surprise… PEPSI HOLIDAY '96" */
.hotline {
  margin: 0;
  line-height: 1.1;
}

.hotline span {
  display: block;
  color: #fff;
  font: italic 700 15px/1.2 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  text-shadow: 0 0 6px #ff4d4d;
}

.hotline strong {
  display: inline-block;
  margin-top: 4px;
  color: #ff2a2a;
  font: italic 400 24px/1 var(--font-impact);
  letter-spacing: .04em;
  transform: rotate(-6deg);
  text-shadow: 0 0 6px #ff0000, 0 0 16px #ff3b00, 1px 1px 0 #3a0000;
}

/* ---------- Het scherm met het logo in vuur ---------- */

.monitor {
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f4f6f8 0%, #b9c1cb 30%, #858f9c 50%, #dde2e8 70%, #9aa3af 100%);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(0, 0, 0, .3),
    0 0 0 3px #1a1f27,
    0 0 0 7px #2256c8,
    0 0 0 10px var(--ink-dark),
    0 18px 44px rgba(0, 0, 0, .8);
}

.monitor-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 250px;
  padding: 24px 20px;
  overflow: hidden;
  border: 3px solid #000;
  border-radius: 8px;
  background: #000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .9);
}

/* Explosie: kern, stralenkrans en wat zwarte spetters */
.fire {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 24% 72%, #000 0 4px, transparent 5px),
    radial-gradient(circle at 78% 22%, #000 0 6px, transparent 7px),
    radial-gradient(circle at 70% 80%, #000 0 3px, transparent 4px),
    radial-gradient(circle at 34% 18%, #000 0 5px, transparent 6px),
    radial-gradient(circle at 88% 58%, #000 0 4px, transparent 5px),
    radial-gradient(ellipse 36% 46% at 56% 52%, #fffbe0 0%, #ffd23a 18%, #ff8a00 36%, rgba(214, 48, 0, .85) 55%, rgba(120, 12, 0, 0) 74%),
    repeating-conic-gradient(from 0deg at 56% 52%, rgba(255, 196, 64, .5) 0deg 3deg, rgba(255, 196, 64, 0) 3deg 9deg),
    radial-gradient(ellipse 70% 70% at 56% 52%, #7a1400 0%, #1a0300 60%, #000 100%);
  animation: flicker 1.8s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { transform: scale(1) rotate(0deg); filter: brightness(1); }
  to { transform: scale(1.06) rotate(2deg); filter: brightness(1.15) saturate(1.2); }
}

/* Het logo als glanzende bol, zoals de Pepsi-globe */
.orbit {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  width: 134px;
  height: 134px;
  overflow: hidden;
  border-radius: 50%;
  background: #051e3c; /* exact de achtergrond van de logo-jpg */
  box-shadow:
    0 0 0 3px #c9d0d9,
    0 0 0 5px #1a1f27,
    0 0 26px rgba(255, 170, 0, .9),
    inset 0 -10px 20px rgba(0, 0, 0, .6);
}

/* Het logo reikt tot de randen van de jpg; op 74% past boot en golf in de cirkel */
.orbit img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -52%);
}

.orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 50% 32% at 36% 22%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .45) 100%);
}

/* Dikke schuine chroomblauwe letters met witte rand: "PEPSI WORLD" */
.world {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-black);
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  text-transform: uppercase;
  transform: skewX(-8deg);
}

.world span {
  display: block;
  font-size: clamp(30px, 4.6vw, 60px);
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #e6f3ff 0%, #7fbaff 26%, #2462e6 50%, #0b2c9a 74%, #4c8cf2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #eef6ff;
  filter: drop-shadow(3px 4px 0 #000) drop-shadow(0 0 12px rgba(0, 0, 0, .8));
}

.world span + span { text-align: right; }

.ticker {
  margin-top: 10px;
  padding: 4px 0;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 4px;
  background: #000;
  box-shadow: inset 0 0 10px rgba(57, 255, 20, .3);
  color: var(--neon);
  font: 700 13px var(--font-term);
  text-shadow: 0 0 6px var(--neon);
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: ticker 28s linear infinite;
}

.ticker-track span { padding-right: 3em; }

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---------- Rechtervleugel: "plugin"-knoppen en het schuine plaatje ---------- */

.plugs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border: 2px solid #000;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #0c2b0c 0%, #020802 75%);
  box-shadow: inset 0 0 22px rgba(57, 255, 20, .14), inset 0 2px 8px rgba(0, 0, 0, .9);
}

.plug {
  display: block;
  width: 100%;
  max-width: 170px;
  padding: 8px 10px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .7);
  font: 900 14px/1.1 var(--font-black);
  text-align: center;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform .15s ease;
}

.plug:nth-child(2) { transform: rotate(1.5deg); }
.plug:hover { transform: rotate(0) scale(1.06); }

/* Rood met witte schrijfletters, zoals "Get Shockwave" */
.plug--links {
  background: linear-gradient(180deg, #ff5a3c, #c40010);
  color: #fff;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-style: italic;
  text-shadow: 1px 1px 0 #5a0006;
}

/* Wit met zwart, zoals "RealAudio" */
.plug--maffiosi {
  border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%;
  background: #fff;
  color: #000;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.plug--maffiosi small { font-size: .7em; }

/* Grijs met blauw, zoals de oude browserknoppen */
.plug--pimpen {
  background: linear-gradient(180deg, #f2f2f2, #b9b9b9);
  color: #1c4fb0;
  font-size: 13px;
}

.plug--pimpen b { color: #d6007e; }

/* Het schuin gekantelde plaatje: "APPLICATIONS NEEDED" */
.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--ink-dark);
  border-radius: 10px;
  background: linear-gradient(180deg, #6ea6f5, #1b4db4 60%, #0e3288);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 8px rgba(0, 0, 0, .6);
  color: #fff;
  font: italic 900 13px/1.15 var(--font-black);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--ink-dark);
  transform: rotate(8deg);
}

.led {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #eaffef 0 2px, #3cff7a 4px, #0f9b3a 100%);
  box-shadow: 0 0 8px #3cff7a;
  animation: led 1.4s ease-in-out infinite;
}

@keyframes led {
  0%, 100% { box-shadow: 0 0 10px #3cff7a; }
  50% { box-shadow: 0 0 2px #3cff7a; }
}

/* ---------- Het dek onderaan: ENTER, waarschuwing, LOW ROAD ---------- */

.deck {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 960px;
  margin: 34px auto 0;
  padding: 16px 30px 16px 22px;
  border-radius: 90px / 60px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
}

.warning {
  flex: 1;
  margin: 0;
  color: #fff;
  font: 700 13px/1.35 var(--font-body);
  text-shadow: 1px 1px 0 var(--ink-dark);
}

.warning strong {
  color: #ff2a2a;
  font: italic 900 18px var(--font-black);
  letter-spacing: .02em;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255, 255, 255, .6);
}

/* LR-knopje: blauw ovaal; als de low road aan staat, brandt hij groen */
.lr {
  flex: 0 0 auto;
  width: 72px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, #b3caff 0%, #1b3fb0 55%, #071a5c 100%);
  box-shadow: 0 0 0 2px var(--ink-dark), 0 4px 8px rgba(0, 0, 0, .6), inset 0 -5px 8px rgba(0, 0, 0, .3);
  color: #fff;
  font: italic 900 17px/1 var(--font-black);
  text-shadow: 1px 1px 0 var(--ink-dark);
  cursor: pointer;
}

.lr:hover { filter: brightness(1.2); }

.lr[aria-pressed="true"] {
  background: radial-gradient(ellipse 70% 60% at 50% 30%, #f0ffe8 0%, var(--neon) 55%, #0a7a00 100%);
  box-shadow: 0 0 0 2px var(--ink-dark), 0 0 16px var(--neon), inset 0 -5px 8px rgba(0, 0, 0, .25);
  color: #042000;
  text-shadow: none;
}

/* ---------- Secties: chroomblauw frame met een zwart scherm erin ---------- */

.zone {
  position: relative;
  max-width: 1080px;
  margin: 70px auto 0;
  padding: 12px;
  border-radius: 30px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
  scroll-margin-top: 40px;
}

main {
  padding: 0 16px 70px;
}

.zone-title {
  position: absolute;
  top: -24px;
  left: 50%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.zone-title span {
  display: inline-block;
  padding: 7px 30px 9px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffa3a3 0%, #ff3030 32%, #c3000e 62%, #ff4545 100%);
  box-shadow: 0 0 0 3px #5a0006, 0 6px 12px rgba(0, 0, 0, .6), inset 0 -4px 6px rgba(0, 0, 0, .25);
  color: #fff;
  font: italic 900 clamp(17px, 2.4vw, 24px)/1.1 var(--font-black);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #5a0006;
}

.zone-inner {
  padding: 46px clamp(16px, 4vw, 40px) 36px;
  border: 2px solid #000;
  border-radius: 20px;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, #0b1d45 0%, #02050f 70%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .9);
}

.kicker {
  margin: 0 0 6px;
  color: var(--neon-soft);
  font: 400 18px/1.1 var(--font-impact);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--neon);
}

.zone-intro {
  max-width: 62ch;
  margin: 0 auto 30px;
  color: #c9d8f5;
  font-size: 15px;
  text-align: center;
}

/* ---------- Wat ik bouw: vier kleine monitoren ---------- */

.screens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 560px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .screens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.screen {
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4f6f8 0%, #b9c1cb 30%, #858f9c 50%, #dde2e8 70%, #9aa3af 100%);
  box-shadow: inset 0 2px 0 #fff, 0 0 0 2px #1a1f27, 0 8px 18px rgba(0, 0, 0, .6);
  transition: transform .2s ease;
}

.screen:hover { transform: translateY(-5px) rotate(-1deg); }

.screen-glass {
  position: relative;
  height: 100%;
  padding: 20px 14px 18px;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 20%, #0f2a12 0%, #010401 80%);
  text-align: center;
}

/* Beeldlijnen */
.screen-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  pointer-events: none;
}

.screen-icon {
  width: 46px;
  height: 46px;
  stroke: var(--neon);
  filter: drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 10px rgba(57, 255, 20, .6));
}

/* Kopjes in vuurletters */
.screen h3 {
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #fff6b8 0%, #ffcc00 40%, #ff6a00 75%, #d10000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 400 26px/1.1 var(--font-impact);
  letter-spacing: .03em;
  text-transform: uppercase;
  filter: drop-shadow(2px 2px 0 #000);
}

.screen p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #b8f5a6;
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- Eigen releases: cd-roms ---------- */

.releases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 1000px) {
  .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.release {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 18px 18px 14px;
  border: 2px solid #5f95ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #102a66 0%, #050d24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px #000, 0 6px 14px rgba(0, 0, 0, .5);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.release:hover {
  border-color: var(--neon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px #000, 0 0 18px rgba(57, 255, 20, .45);
}

.case {
  --s: 128px;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--s) + 42px);
  height: var(--s);
}

/* De schijf zit half achter het doosje en schuift eruit bij hover */
.disc {
  position: absolute;
  top: 4px;
  left: calc(var(--s) * .3);
  width: calc(var(--s) - 8px);
  height: calc(var(--s) - 8px);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 11%, rgba(255, 255, 255, .9) 11.5% 13%, #b8c3cf 13.5% 20%, rgba(255, 255, 255, .7) 20.5% 21.5%, transparent 22%),
    conic-gradient(from 0deg, #e8edf2, #bff3ff 8%, #e7d0ff 16%, #fff1b8 24%, #cfffe0 32%, #e8edf2 40%, #c5e6ff 50%, #f7d0ff 60%, #fff4c2 70%, #d0ffe6 80%, #e8edf2 90%, #bff3ff 100%);
  box-shadow: 0 0 0 1px rgba(90, 100, 120, .45), inset 0 0 0 2px rgba(255, 255, 255, .7), 0 4px 10px rgba(0, 0, 0, .4);
  transition: translate .6s cubic-bezier(.2, .8, .2, 1);
}

.release:hover .disc,
.release:focus-visible .disc {
  translate: 26% 0;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { rotate: 360deg; }
}

.cover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--s);
  height: var(--s);
  padding: 9px 9px 8px 17px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--cover-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .5);
  color: var(--cover-ink);
  text-align: left;
}

/* Scharnier van het doosje */
.cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 2px, rgba(0, 0, 0, .18) 2px 4px),
    linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .2));
}

/* Glans op het plastic */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 32%, rgba(255, 255, 255, 0) 33% 70%, rgba(255, 255, 255, .12) 100%);
  pointer-events: none;
}

.cover-top {
  font: 700 8px var(--font-body);
  letter-spacing: .28em;
  opacity: .8;
}

.cover-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: normal;
}

.cover-title small {
  display: block;
  font-size: .62em;
  opacity: .9;
}

.cover-pub {
  font: 700 7px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.case--mafia {
  --cover-bg: radial-gradient(circle at 75% 20%, #8a1414, #2a0505 72%);
  --cover-ink: #f1c96a;
}

.case--mafia .cover-title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 21px;
  text-shadow: 0 2px 0 #000;
}

.case--glitter {
  --cover-bg:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 18%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 82% 64%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 40% 78%, #fff 0 1.4px, transparent 2.4px),
    linear-gradient(135deg, #ff7ad9, #b44dff);
  --cover-ink: #ffffff;
}

.case--glitter .cover-title {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 19px;
  text-shadow: 0 2px 0 #c2189a, 0 0 8px #ffd1f3;
}

.case--portal {
  --cover-bg: radial-gradient(circle at 84% 20%, #8cc6ff 0 5%, #3f8ff0 9%, rgba(63, 143, 240, 0) 10%), linear-gradient(180deg, #1c63d6, #0a3a8c);
  --cover-ink: #ffe36b;
}

.case--portal .cover-title {
  font-family: Verdana, Tahoma, sans-serif;
  font-style: italic;
  font-size: 13.5px;
  background: linear-gradient(180deg, #fff27a, #ff9d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .6px #0a2a6b;
}

.case--blanc {
  --cover-bg: radial-gradient(circle at 80% 22%, #fff7da 0 8%, rgba(255, 247, 218, 0) 30%), linear-gradient(160deg, #ffffff, #d9dfe7);
  --cover-ink: #1b2b44;
}

.case--blanc .cover-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #a7741d;
  text-shadow: 0 1px 0 #fff;
}

/* Starburst-sticker */
.badge {
  position: absolute;
  top: -12px;
  left: calc(var(--s) - 36px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  clip-path: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
  font: 900 11px var(--font-black);
  animation: badge 1.6s ease-in-out infinite;
}

.badge--hot {
  background: radial-gradient(circle, #ff5a3c, #d10f0f);
  color: #ffe36b;
  text-shadow: 0 1px 0 #6a0000;
}

.badge--new {
  background: radial-gradient(circle, #fff27a, #ffb800);
  color: #c40000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

@keyframes badge {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.1); }
}

.release-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.release-name {
  color: #fff;
  font: italic 900 18px/1.2 var(--font-black);
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(79, 140, 242, .8);
}

.release-desc {
  color: #c9d8f5;
  font-size: 13px;
  line-height: 1.55;
}

.release .capsule { margin-top: 4px; }

/* ---------- Samenwerken: de terminal ---------- */

.zone--contact { max-width: 820px; }

.terminal {
  position: relative;
  margin-bottom: 26px;
  padding: 18px 20px;
  overflow: hidden;
  border: 3px solid #000;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, #0d2a0d 0%, #010401 80%);
  box-shadow: inset 0 0 26px rgba(57, 255, 20, .2), 0 0 0 3px #858f9c;
  color: var(--neon);
  font: 700 15px/1.6 var(--font-term);
  text-shadow: 0 0 6px var(--neon);
}

.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  pointer-events: none;
}

.term-line {
  margin: 0 0 8px;
  color: #8cff74;
  opacity: .8;
}

.prompt { color: #fff36b; text-shadow: 0 0 6px #fff36b; }

.term-msg { margin: 0; }

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.enter--mail {
  width: 150px;
  height: 72px;
  font-size: 22px;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- Footer met 88x31-knopjes ---------- */

.footer {
  padding: 10px 16px 34px;
  color: #8fb0e0;
  text-align: center;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.b88 {
  display: inline-flex;
  width: 88px;
  height: 31px;
  overflow: hidden;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(0, 0, 0, .4);
  font: 700 9px/1.05 Verdana, Tahoma, sans-serif;
  text-transform: uppercase;
}

.b88 b,
.b88 i {
  display: grid;
  place-items: center;
  font-style: normal;
}

.b88 b {
  padding: 0 4px;
  border-right: 1px solid rgba(0, 0, 0, .5);
}

.b88 i { flex: 1; }

.b88--shs b { width: 28px; background: #051e3c; color: #c08a3c; font-size: 13px; }
.b88--shs i { background: linear-gradient(180deg, #2a4b78, #0f2e4f); color: #dfe8f2; }

.b88--nl b { width: 22px; padding: 0; background: linear-gradient(180deg, #ae1c28 0 33.3%, #fff 33.3% 66.6%, #21468b 66.6%); }
.b88--nl i { background: linear-gradient(180deg, #fdfdfd, #d6dce3); color: #21468b; }

.b88--php b { background: #777bb4; color: #fff; }
.b88--php i { background: linear-gradient(180deg, #4f5b93, #2f365c); color: #e6e8ff; }

.b88--y2k b { width: 24px; background: #0b7a26; color: #b9ff9a; font-size: 13px; }
.b88--y2k i { background: linear-gradient(180deg, #ceffb0, #7cd94b); color: #0b3d12; }

.b88--any b { background: #ffffff; color: #1c4fb0; }
.b88--any i { background: linear-gradient(180deg, #3f7fe0, #1c4fb0); color: #fff; }

.footer-line {
  margin: 0;
  font: 12px var(--font-body);
  text-shadow: 0 1px 2px #000;
}

.footer-line span { margin: 0 6px; color: var(--neon); }

/* ---------- Glitterspoor ---------- */

.sparkle {
  position: fixed;
  z-index: 999;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 6px currentColor;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: sparkle .8s ease-out forwards;
}

@keyframes sparkle {
  to { opacity: 0; transform: translate(-50%, 18px) scale(.3) rotate(120deg); }
}

/* ---------- Kleinere schermen ---------- */

@media (max-width: 980px) {
  /* minmax(0, …): anders rekt de nowrap-lichtkrant de kolom op tot 1600px */
  .cockpit-frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Scherm eerst, de twee vleugels daaronder naast elkaar */
  .monitor { grid-column: 1 / -1; order: -1; }

  .wing--left,
  .wing--right { transform: none; }
}

@media (max-width: 720px) {
  .arc-band {
    padding: 16px 14px 22px;
    border-radius: 0 0 40px 40px;
  }

  .arc-nav { order: -1; width: 100%; }
  .capsule--big { font-size: 14px; min-height: 36px; padding: 0 18px; }

  .cockpit { padding: 20px 12px 44px; }
  .cockpit-frame { grid-template-columns: minmax(0, 1fr); }

  .monitor-screen {
    flex-direction: column;
    min-height: 0;
    padding: 22px 12px;
    gap: 14px;
  }

  .orbit { width: 110px; height: 110px; }
  .world span + span { text-align: center; }
  .world { text-align: center; }

  .plugs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .plug { width: auto; }
  .plate { transform: rotate(3deg); }

  .deck {
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
    border-radius: 40px;
    text-align: center;
  }

  main { padding: 0 12px 50px; }
  .zone { margin-top: 56px; padding: 8px; border-radius: 22px; }
  .zone-inner { padding: 40px 14px 26px; border-radius: 16px; }
  .zone-title { white-space: normal; width: max-content; max-width: 92%; text-align: center; }
}

@media (max-width: 520px) {
  .release { flex-direction: column; text-align: center; padding: 18px 14px; }
  .release-text { align-items: center; }
  .case { --s: 118px; }
}

/* ---------- LOW ROAD en minder beweging: alles stil ---------- */

.low-road *,
.low-road *::before,
.low-road *::after {
  animation: none !important;
  transition: none !important;
}

.low-road .cursor { opacity: 1; }

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}