:root {
  --cyan: #00aeef;
  --ink: #12394a;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background: var(--cyan);
  font-synthesis: none;
  scrollbar-color: var(--ink) var(--cyan);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
::selection { background: var(--ink); color: #fff; }
p, h1, h2, ul { margin: 0; }
.hero { height: 502px; position: relative; background: #fff; isolation: isolate; }
.hero-logo { position: absolute; top: 29px; left: 50%; transform: translateX(-50%); width: 1100px; height: 450px; object-fit: contain; }
.monitor { position: absolute; z-index: 1; width: 574px; aspect-ratio: 1; top: 45px; left: 50%; transform: translateX(-50%); }
.monitor-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.monitor::after { content: ""; position: absolute; z-index: 1; left: 17%; bottom: 1.1%; width: 66%; height: 3.8%; border-radius: 50%; background: radial-gradient(ellipse, rgb(14 39 48 / .42) 0%, rgb(14 39 48 / .24) 42%, transparent 76%); filter: blur(7px); pointer-events: none; }
.monitor-screen { position: absolute; left: 16.7%; top: 11.2%; width: 66%; height: 52.8%; overflow: hidden; border-radius: 9% / 10%; background: #edfaff; isolation: isolate; }
.screen-logo { position: absolute; z-index: 0; width: 1100px; height: 450px; left: calc(33.3% - 550px); top: calc(-16px - 21.2%); background: #edfaff; }
.screen-logo img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .1; }
.monitor-screen video { position: absolute; z-index: 1; width: 80%; height: 96%; left: 10%; top: 2%; object-fit: contain; transform-origin: center; transform: scale(var(--h-size, 1), var(--v-size, 1)); filter: grayscale(1) sepia(.35) saturate(1.4) hue-rotate(145deg) brightness(var(--brightness, 1.5)) contrast(var(--contrast, .95)); }
.monitor-screen.glitch video { animation: pigeon-glitch 120ms steps(2, end) both; }
@keyframes pigeon-glitch { 25% { transform: translateX(-2px) scale(var(--h-size, 1), var(--v-size, 1)); filter: grayscale(1) sepia(.35) saturate(2) hue-rotate(145deg) brightness(1.9) contrast(1.25); } 55% { transform: translateX(2px) scale(var(--h-size, 1), var(--v-size, 1)); filter: grayscale(1) sepia(.35) saturate(1.8) hue-rotate(160deg) brightness(1.15) contrast(1.3); } }
.screen-scanlines, .screen-reflection { position: absolute; inset: 0; pointer-events: none; }
.screen-scanlines { z-index: 2; background: repeating-linear-gradient(0deg, rgb(14 69 89 / .1) 0, rgb(14 69 89 / .1) 1px, transparent 1px, transparent 3px); background-size: 100% 4px; animation: crt-roll 1.2s linear infinite; }
@keyframes crt-roll { to { background-position: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .screen-scanlines { animation: none; } }
.screen-reflection { z-index: 3; background: linear-gradient(135deg, rgb(221 250 255 / .12), transparent 55%); box-shadow: inset 0 0 22px rgb(15 50 63 / .18); }
.screen-osd { position: absolute; z-index: 4; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 3px 8px; white-space: nowrap; background: #12394a; color: #d7faff; font: 700 clamp(9px, 2vw, 12px) / 1.5 monospace; font-variant-numeric: tabular-nums; }
.monitor-screen > * { opacity: 1; transition: opacity 120ms ease-out; }
.monitor-screen::before { content: ""; position: absolute; z-index: 5; inset: 0; opacity: 0; pointer-events: none; background: #e8fcff; box-shadow: 0 0 12px 3px rgb(195 248 255 / .9); transform: scaleY(0); }
.monitor.poweroff .monitor-screen { background: #10191b; }
.monitor.poweroff .monitor-screen > * { opacity: 0; }
.monitor.poweroff .monitor-screen::before { animation: crt-poweroff 520ms ease-in forwards; }
@keyframes crt-poweroff { 0% { opacity: 0; transform: scaleY(1); } 12% { opacity: .95; transform: scaleY(1); } 55% { opacity: .9; transform: scaleY(.018); } 82% { opacity: .8; transform: scaleY(.018) scaleX(.08); } 100% { opacity: 0; transform: scaleY(.018) scaleX(.08); } }
@media (prefers-reduced-motion: reduce) { .monitor.poweroff .monitor-screen::before { animation-duration: 120ms; } }
.monitor-knob { position: absolute; z-index: 4; left: var(--knob-x); top: 81.818182%; width: 6.5%; height: 6.5%; transform: translate(-50%, -50%); border-radius: 50%; cursor: ns-resize; touch-action: none; user-select: none; }
.monitor-knob:focus-visible { outline: none; }
.monitor-knob:hover { background: rgb(0 174 239 / .08); }
.monitor-knob::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; transform: rotate(var(--knob-angle, 0deg)); background: linear-gradient(#29434c, #29434c) center 0 / 2px 22% no-repeat; opacity: .65; pointer-events: none; }
.monitor-led { position: absolute; z-index: 3; left: 73.524721%; top: 78.070175%; width: 2.870813%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #c4ad89; box-shadow: 0 0 2px 1px #c4ad89; pointer-events: none; }
.monitor-led::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: #8cff3b; box-shadow: 0 0 5px 2px rgb(106 255 37 / .8); }
.monitor.poweroff .monitor-led::after { background: #34432c; box-shadow: inset 0 1px 2px #20281d; }
.monitor-power { position: absolute; z-index: 3; left: 75%; top: 77%; width: 8%; height: 8%; border: 0; border-radius: 4px; background: transparent; }
.monitor-power:hover { background: rgb(0 174 239 / .12); }
.monitor-power:focus-visible { outline-color: #005574; outline-offset: 1px; }
.page-content { max-width: 925px; margin-inline: auto; padding: 152px 0 42px; }
.intro { text-align: center; }
h1 { font-size: 42px; line-height: 1.25; font-weight: 700; text-transform: uppercase; text-wrap: balance; }
.intro p { margin-top: 18px; line-height: 23px; }
.services { margin-top: 62px; }
.services h2 { font-size: 32px; font-weight: 700; margin-bottom: 23px; text-align: center; text-transform: uppercase; }
.services-row { display: grid; grid-template-columns: 540px 1fr; gap: 35px; }
.services-row p { line-height: 23px; }
.services ul { padding-left: 16px; font-weight: 700; line-height: 23px; }
.contact { margin-top: 58px; text-align: center; }
.contact-button { width: 228px; border: 0; border-radius: 0; background: #fff; color: var(--cyan); padding: 9px 16px; font-size: 20px; line-height: 27px; font-weight: 900; text-transform: uppercase; }
.contact-button:hover { background: #e4f7ff; }
.glitch-label { position: relative; display: inline-block; }
.glitch-label::before, .glitch-label::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch-label::before { color: #f04a9b; }
.glitch-label::after { color: #0077a6; }
.contact-button:hover .glitch-label, .contact-button:focus-visible .glitch-label { animation: glitch-jitter 320ms steps(2, end) infinite; }
.contact-button:hover .glitch-label::before, .contact-button:focus-visible .glitch-label::before { opacity: .8; animation: glitch-slice-a 240ms steps(2, end) infinite; }
.contact-button:hover .glitch-label::after, .contact-button:focus-visible .glitch-label::after { opacity: .75; animation: glitch-slice-b 190ms steps(2, end) infinite; }
@keyframes glitch-jitter { 0%, 100% { transform: translate(0); } 35% { transform: translate(1px, -1px); } 70% { transform: translate(-1px, 1px); } }
@keyframes glitch-slice-a { 0%, 100% { clip-path: inset(0 0 68%); transform: translate(-2px, -1px); } 50% { clip-path: inset(38% 0 28%); transform: translate(2px, 1px); } }
@keyframes glitch-slice-b { 0%, 100% { clip-path: inset(56% 0 12%); transform: translate(2px, 1px); } 50% { clip-path: inset(12% 0 62%); transform: translate(-2px, -1px); } }
@media (prefers-reduced-motion: reduce) { .contact-button:hover .glitch-label, .contact-button:focus-visible .glitch-label, .contact-button:hover .glitch-label::before, .contact-button:focus-visible .glitch-label::before, .contact-button:hover .glitch-label::after, .contact-button:focus-visible .glitch-label::after { animation: none; } }

.contact p { max-width: none; margin: 28px auto 0; line-height: 23px; white-space: nowrap; }
body.modal-active { overflow: hidden; }
dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 58px 28px 28px; border: 4px solid; border-color: #fff #404040 #404040 #fff; color: #111; background: #c0c0c0; box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080, 12px 16px 34px rgb(0 0 0 / .38); font-family: Arial, sans-serif; }
dialog::backdrop { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 4px), rgb(0 14 28 / .82); }
dialog h2 { position: absolute; top: 7px; left: 8px; right: 8px; height: 34px; padding: 4px 44px 4px 10px; background: var(--cyan); color: #12394a; font-size: 19px; line-height: 26px; font-weight: 700; }
.modal-close { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #111; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.modal-close:hover { background: #d4d4d4; }
form > label { display: block; margin-bottom: 6px; }
input[type='email'], textarea { width: 100%; border: 2px solid; border-color: #404040 #fff #fff #404040; border-radius: 0; padding: 10px; color: #111; background: #fff; margin-bottom: 20px; caret-color: #000080; }
textarea { resize: vertical; min-height: 100px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 24px; }
.contact-honeypot { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
input[type='checkbox'] { accent-color: #00769f; flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.send-button { border: 0; padding: 10px 24px; background: var(--cyan); color: #12394a; text-transform: uppercase; font-weight: 700; }
.send-button:hover { background: var(--ink); }
#form-status:not(:empty) { margin: 0 0 18px; font-size: 14px; font-weight: 700; }
#form-status[data-state='error'] { color: #8a1717; }
#form-status[data-state='success'] { color: #174c22; }
.send-button:disabled { cursor: wait; opacity: .7; }
@media (max-width: 1000px) {
  .page-content { margin-inline: 28px; }
  .services-row { grid-template-columns: 1.5fr 1fr; gap: 32px; }
}
@media (max-width: 650px) {
  .hero { height: calc(80vw + 20px); }
  .hero-logo { top: 22px; width: 1100px; height: 450px; }
  .monitor { top: 35px; width: 94vw; max-width: 574px; }
  .monitor-power { min-width: 32px; min-height: 32px; }
  .page-content { margin-inline: 24px; padding-top: calc(14vw + 48px); padding-bottom: 36px; }
  h1 { font-size: clamp(30px, 8.25vw, 42px); }
  .intro p { margin-top: 14px; }
  .services { margin-top: 42px; }
  .services h2 { margin-bottom: 18px; }
  .services-row { grid-template-columns: 1fr; gap: 22px; }
  .services ul { padding-left: 20px; }
  .contact { margin-top: 44px; }
  .contact p { margin-top: 20px; white-space: normal; }
  dialog { padding: 28px 22px; }
}

.time-travel { position: relative; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.time-travel:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.delorean-flight { position: fixed; z-index: 9999; top: 24vh; left: 0; width: min(690px, 69vw); aspect-ratio: 1944 / 809; visibility: hidden; pointer-events: none; background: url("assets/delorean-car.png") center / 100% 100% no-repeat; image-rendering: pixelated; }
.time-travel.is-playing .delorean-flight { visibility: visible; animation: delorean-pass 1.65s linear both; }
@keyframes delorean-pass { from { transform: translateX(105vw); } to { transform: translateX(-110vw); } }
.delorean-trail { position: fixed; z-index: 9998; top: calc(24vh + min(193px, 19.3vw) + 30px - min(120px, 26vw)); left: 0; display: block; width: 100vw; height: min(120px, 26vw); visibility: hidden; pointer-events: none; image-rendering: pixelated; }
.time-travel.is-playing .delorean-trail { visibility: visible; }
@media (max-width: 600px) { .delorean-flight { top: 20vh; width: 72vw; } .delorean-trail { top: calc(20vh + min(80px, 20vw) + 18px - min(108px, 28vw)); height: min(108px, 28vw); } }
@media (prefers-reduced-motion: reduce) { .time-travel.is-playing .delorean-flight { animation-duration: .01ms; animation-delay: 0s; } }