html { scroll-behavior: smooth; }

body.vw-era-1986 {
  --e80-night: #07051f;
  --e80-blue: #171054;
  --e80-pink: #ff2caf;
  --e80-cyan: #16f4ff;
  --e80-violet: #8f42ff;
  --e80-yellow: #ffe66b;
  margin: 0;
  background: var(--e80-night);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.e80 { overflow: hidden; background: var(--e80-night); }
.e80 a { color: inherit; }

.e80-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1rem, 3vw, 2.2rem) clamp(1rem, 5vw, 5rem) 2rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgb(131 30 183 / 38%), transparent 26%),
    linear-gradient(#08051d 0 48%, #18073c 70%, #08051d 100%);
}

.e80-stars,
.e80-stars::before,
.e80-stars::after {
  position: absolute;
  z-index: -5;
  inset: 0;
  content: "";
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, var(--e80-cyan) 0 1px, transparent 1.5px),
    radial-gradient(circle, var(--e80-pink) 0 1px, transparent 1.5px);
  background-position: 4% 8%, 42% 17%, 73% 9%;
  background-size: 139px 151px, 191px 173px, 227px 211px;
}

.e80-stars::before { opacity: 0.5; transform: translate(31px, 47px); animation: e80-twinkle 2.4s steps(2, end) infinite; }
.e80-stars::after { opacity: 0.3; transform: translate(79px, 19px); animation: e80-twinkle 3.1s steps(2, end) reverse infinite; }

.e80-nav { position: relative; z-index: 8; display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; }
.e80-brand { color: #fff; font-size: 1.25rem; font-weight: 1000; font-style: italic; letter-spacing: -0.08em; text-decoration: none; text-transform: uppercase; text-shadow: 2px 2px 0 var(--e80-pink); }
.e80-brand span { color: var(--e80-cyan); font-family: cursive; font-size: 0.8em; text-transform: none; }
.e80-nav > div { display: flex; justify-content: center; gap: clamp(0.8rem, 3vw, 2.4rem); }
.e80-nav > div a { position: relative; padding: 0.45rem 0; color: #d8d3fa; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.e80-nav > div a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--e80-cyan), var(--e80-pink)); content: ""; transform: scaleX(0); transition: transform 160ms ease; }
.e80-nav > div a:hover::after,
.e80-nav > div a:focus-visible::after { transform: scaleX(1); }
.e80-language { display: flex; gap: 0.3rem; }
.e80-language a { padding: 0.35rem; color: #aaa4d1; font-size: 0.7rem; font-weight: 900; text-decoration: none; }
.e80-language a[aria-current="page"] { color: var(--e80-cyan); text-shadow: 0 0 10px var(--e80-cyan); }

.e80-hero-copy { position: relative; z-index: 3; width: min(880px, 100%); margin: auto; padding: clamp(5rem, 14vh, 10rem) 0 9rem; text-align: center; }
.e80-overline { margin: 0 0 0.5rem; color: var(--e80-cyan); font: 800 clamp(0.65rem, 1.5vw, 0.85rem)/1.2 "Courier New", monospace; letter-spacing: 0.32em; text-transform: uppercase; }
.e80-logo { position: relative; margin: 0; color: #fff; font: italic 1000 clamp(3.5rem, 10vw, 8rem)/0.85 "Arial Black", Impact, sans-serif; letter-spacing: -0.08em; text-shadow: 0 3px 0 #6c0b75, 0 6px 0 #290835, 0 0 10px #fff, 0 0 28px var(--e80-pink), 0 0 65px var(--e80-pink); transform: skewX(-7deg); }
.e80-logo span { color: var(--e80-cyan); -webkit-text-stroke: 2px #fff; text-shadow: 5px 5px 0 var(--e80-pink), 9px 9px 0 #4e168d, 0 0 24px var(--e80-cyan); }
.e80-hero h1 { max-width: 32ch; margin: 2.5rem auto 0.65rem; color: #f8f6ff; font-size: clamp(1.5rem, 3.4vw, 2.45rem); line-height: 1.05; text-transform: uppercase; }
.e80-hero-copy > .e80-cta { margin-top: 1rem; }

.e80-cta { display: inline-flex; align-items: stretch; border: 2px solid var(--e80-cyan); border-radius: 2px; background: #0b0730; box-shadow: 0 0 10px rgb(22 244 255 / 50%), inset 0 0 12px rgb(22 244 255 / 10%); color: #fff; font: 900 0.84rem/1.1 "Arial Black", Arial, sans-serif; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.e80-cta span { display: grid; place-items: center; padding: 0.95rem 1.2rem; }
.e80-cta i { display: grid; place-items: center; min-width: 3rem; background: linear-gradient(135deg, var(--e80-pink), var(--e80-violet)); font-style: normal; }
.e80-cta:hover,
.e80-cta:focus-visible { background: var(--e80-cyan); box-shadow: 0 0 24px var(--e80-cyan); color: var(--e80-night); }
.e80-cta:active { transform: translateY(3px); }

.e80-sun { position: absolute; z-index: -3; top: 45%; left: 50%; width: clamp(15rem, 36vw, 35rem); aspect-ratio: 1; border-radius: 50%; background: repeating-linear-gradient(to bottom, transparent 0 8%, #ff4eb8 8% 12%), linear-gradient(#ffe474, #ff288f 68%); box-shadow: 0 0 65px rgb(255 44 175 / 60%); transform: translate(-50%, -50%); opacity: 0.8; }
.e80-grid { position: absolute; z-index: -1; right: -30%; bottom: -24%; left: -30%; height: 54%; background-image: linear-gradient(rgb(22 244 255 / 80%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 44 175 / 85%) 1px, transparent 1px); background-size: 60px 34px; box-shadow: 0 -8px 30px var(--e80-pink); transform: perspective(310px) rotateX(64deg); transform-origin: center top; animation: e80-grid 3s linear infinite; }
.e80-expertise { position: relative; display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 6vw, 6rem); background: radial-gradient(circle at 15% 20%, rgb(143 66 255 / 26%), transparent 28%), #090621; }
.e80-expertise::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgb(255 255 255 / 2%) 5px 6px); content: ""; pointer-events: none; }
.e80-section-intro { position: relative; z-index: 1; align-self: start; }
.e80-section-intro > p:first-child,
.e80-projects header > p,
.e80-contact-sign > p { color: var(--e80-cyan); font: 800 0.72rem/1.2 "Courier New", monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.e80-section-intro h2,
.e80-projects h2 { margin: 0 0 1.5rem; font: 1000 clamp(2rem, 4.25vw, 4.5rem)/0.96 "Arial Black", Impact, sans-serif; letter-spacing: -0.035em; text-transform: uppercase; }
.e80-section-intro > p:last-child { max-width: 36ch; color: #c9c2e6; font-size: 1.1rem; line-height: 1.6; }

.e80-console { position: relative; z-index: 1; align-self: start; border: 2px solid #443b79; background: #100c32; box-shadow: 12px 12px 0 #050316, 0 0 28px rgb(143 66 255 / 20%); }
.e80-console-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; padding: 0.65rem 0.8rem; background: linear-gradient(90deg, var(--e80-violet), var(--e80-pink)); font: 800 0.7rem/1.2 "Courier New", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.e80-console-bar span:last-child { text-align: right; }
.e80-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #30285d; }
.e80-groups section { min-width: 0; background: #100c32; }
.e80-groups h3 { margin: 0; padding: 0.8rem; border-bottom: 1px solid #30285d; color: var(--e80-yellow); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.e80-groups details { border-bottom: 1px solid #30285d; }
.e80-groups summary { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; align-items: center; min-height: 3rem; padding: 0.6rem 0.8rem; color: #eeeaff; font-weight: 700; cursor: pointer; list-style: none; }
.e80-groups summary::-webkit-details-marker { display: none; }
.e80-groups summary span { color: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.e80-groups summary:hover,
.e80-groups summary:focus-visible { background: rgb(255 255 255 / 6%); color: var(--e80-cyan); }
.e80-groups summary:active { transform: translate(2px, 2px); }
.e80-groups details[open] { box-shadow: inset 3px 0 0 var(--accent); }
.e80-groups details p { margin: 0; padding: 0 1rem 1rem 2.3rem; color: #aaa4cd; font-size: 0.86rem; line-height: 1.5; }

.e80-projects { position: relative; padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 6vw, 6rem); background: linear-gradient(155deg, #16083d 0 48%, #2a0751 48% 100%); }
.e80-projects::before { position: absolute; inset: 0; opacity: 0.18; background-image: radial-gradient(var(--e80-cyan) 1px, transparent 1px); background-size: 18px 18px; content: ""; }
.e80-projects header { position: relative; max-width: 760px; margin-bottom: 2.25rem; }
.e80-projects h2 { margin-bottom: 0.8rem; color: #fff; text-shadow: 3px 3px 0 var(--e80-pink); }
.e80-projects header > span { color: #c8c0eb; }
.e80-project-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.4rem); }
.e80-project-grid > a { position: relative; isolation: isolate; min-height: 280px; display: flex; flex-direction: column; padding: 0.9rem; overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent), #fff 28%); background: linear-gradient(155deg, color-mix(in srgb, var(--accent), #151033 82%), #08051c 62%); box-shadow: 5px 5px 0 #050315, 0 0 16px color-mix(in srgb, var(--accent), transparent 78%); text-decoration: none; transition: border-color 120ms linear, box-shadow 120ms linear; }
.e80-project-grid > a::before { position: absolute; z-index: 0; inset: 0; opacity: 0.22; background: repeating-linear-gradient(0deg, transparent 0 4px, rgb(255 255 255 / 11%) 4px 5px); content: ""; }
.e80-project-grid > a::after { position: absolute; z-index: 0; right: 0; top: 0; left: 0; height: 1px; background: color-mix(in srgb, var(--accent), transparent 60%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent), transparent 45%); content: ""; opacity: 0; pointer-events: none; }
.e80-project-number { position: relative; z-index: 1; align-self: flex-end; color: var(--accent); font: 900 0.8rem/1 "Courier New", monospace; }
.e80-project-art { position: relative; z-index: 1; width: 5.5rem; aspect-ratio: 1; display: grid; place-items: center; margin: 0.4rem auto 0.8rem; border: 1px solid rgb(255 255 255 / 34%); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 65%); box-shadow: 0 0 18px var(--accent), inset 0 0 16px rgb(255 255 255 / 12%); }
.e80-project-icon { width: 2.7rem; height: 2.7rem; color: #fff; filter: drop-shadow(0 0 6px var(--accent)); fill: currentColor; }
.e80-project-grid strong { position: relative; z-index: 1; margin: 0.4rem 0; font-size: 0.95rem; overflow-wrap: anywhere; text-transform: uppercase; }
.e80-project-grid small { position: relative; z-index: 1; color: #bcb5dd; font-size: 0.78rem; line-height: 1.45; }
.e80-project-grid em { position: relative; z-index: 1; margin-top: auto; padding-top: 1rem; color: color-mix(in srgb, var(--accent), #fff 28%); font-size: 0.8rem; font-style: normal; font-weight: 900; }
.e80-project-grid > a:hover,
.e80-project-grid > a:focus-visible { border-color: var(--e80-cyan); box-shadow: 5px 5px 0 #050315, 0 0 28px var(--accent), inset 0 0 20px color-mix(in srgb, var(--accent), transparent 84%); }
.e80-project-grid > a:hover::after,
.e80-project-grid > a:focus-visible::after { opacity: 0.32; animation: e80-card-scan 850ms linear 1; }
.e80-project-grid > a:active { box-shadow: 2px 2px 0 #050315, 0 0 14px var(--accent); transform: translate(3px, 3px); }

.e80-contact { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); min-height: 760px; background: radial-gradient(circle at 20% 40%, #37126c, transparent 33%), linear-gradient(135deg, #07051f, #18073c); }
.e80-contact::after { position: absolute; right: -15%; bottom: -35%; left: -15%; height: 55%; background-image: linear-gradient(rgb(22 244 255 / 34%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 44 175 / 38%) 1px, transparent 1px); background-size: 54px 32px; content: ""; transform: perspective(280px) rotateX(62deg); transform-origin: top; }
.e80-contact-sign,
.e80-contact-panel { position: relative; z-index: 1; padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 6vw, 6rem); }
.e80-contact-sign { display: flex; flex-direction: column; justify-content: center; }
.e80-contact-sign h2 { margin: 0; color: #fff; font: italic 1000 clamp(3.5rem, 8vw, 7.5rem)/0.9 "Arial Black", Impact, sans-serif; letter-spacing: -0.04em; text-transform: uppercase; text-shadow: 0 0 7px #fff, 0 0 20px var(--e80-pink), 0 0 50px var(--e80-pink); transform: skewX(-7deg); }
.e80-contact-sign i { width: 60%; height: 3px; margin: 2rem auto 0; background: var(--e80-pink); box-shadow: 0 0 10px var(--e80-pink), 0 0 22px var(--e80-pink); }
.e80-contact-panel { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgb(255 255 255 / 12%); background: rgb(4 3 21 / 50%); }
.e80-contact-status { color: var(--e80-cyan); font: 800 0.72rem/1.2 "Courier New", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.e80-contact-status span { display: inline-block; width: 0.55rem; aspect-ratio: 1; margin-right: 0.5rem; border-radius: 50%; background: #55ff87; box-shadow: 0 0 10px #55ff87; }
.e80-contact-panel h3 { margin: 1rem 0 0; font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; }
.e80-contact-panel > p:not(.e80-contact-status) { max-width: 34rem; color: #c9c2e6; font-size: 1.1rem; line-height: 1.6; }
.e80-contact-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin: 2rem 0; }
.e80-contact-actions > a:not(.e80-cta) { color: #fff; font-weight: 800; text-underline-offset: 0.3em; }
.e80-contact-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2rem 0 0; border-top: 1px solid #39315f; }
.e80-contact-panel dl div { padding: 1rem 0; border-bottom: 1px solid #39315f; }
.e80-contact-panel dt { color: #77709c; font: 700 0.65rem/1.2 "Courier New", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.e80-contact-panel dd { margin: 0.35rem 0 0; color: #fff; font-weight: 700; }
.e80-footer { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem clamp(1rem, 5vw, 5rem); border-top: 1px solid #39315f; background: #050319; color: #8f88b3; font-size: 0.78rem; }
.e80-footer p { margin: 0; text-align: center; }
.e80-footer a { color: #fff; font-weight: 800; }

@keyframes e80-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 34px, 0 0; } }
@keyframes e80-card-scan { from { transform: translateY(0); } to { transform: translateY(280px); } }
@keyframes e80-twinkle { 50% { opacity: 0.15; } }

@media (max-width: 980px) {
  .e80-expertise,
  .e80-contact { grid-template-columns: 1fr; }
  .e80-section-intro { max-width: 700px; }
  .e80-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e80-contact { min-height: auto; }
  .e80-contact-sign { min-height: 520px; align-items: center; text-align: center; }
  .e80-contact-panel { border-top: 1px solid rgb(255 255 255 / 12%); border-left: 0; }
}

@media (max-width: 650px) {
  .e80-hero { min-height: 860px; }
  .e80-nav { grid-template-columns: 1fr auto; }
  .e80-nav > div { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
  .e80-language { grid-column: 2; grid-row: 1; }
  .e80-hero-copy { padding-top: 6rem; }
  .e80-logo { font-size: clamp(3.5rem, 22vw, 6.5rem); }
  .e80-grid { bottom: -16%; height: 45%; }
  .e80-groups,
  .e80-project-grid { grid-template-columns: 1fr; }
  .e80-project-grid > a { min-height: 270px; }
  .e80-contact-sign { min-height: 430px; }
  .e80-contact-panel dl { grid-template-columns: 1fr; }
  .e80-footer { grid-template-columns: 1fr; text-align: center; }
}