:root {
  color-scheme: only light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --canvas: #dce0e0;
  --ink: #172123;
  --muted-ink: #29383b;
  --cyan: #00aaf0;
  --lime: #83b800;
  --detail: #3f4c4f;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); }

.page-shell {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: var(--canvas);
}

.armor-field,
.circuit-field {
  position: absolute;
  pointer-events: none;
}

.armor-field {
  inset: 0;
}

.armor-field::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("/white-shield.webp?v=20260930-7") center / cover no-repeat;
  filter: brightness(.94) contrast(1.08);
}

.circuit-field {
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(220px, 38svh, 420px);
}

.armor-field canvas,
.circuit-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.armor-field canvas { position: relative; height: 80px; }

.hero {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  transform: translateY(-6svh);
}

.logo-mark {
  position: relative;
  width: 100%;
  aspect-ratio: 753 / 224;
}

.logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.logo--symbol-cyan {
  clip-path: inset(0 79% 0 0);
  animation: symbol-cyan-arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo--symbol-lime {
  clip-path: inset(0 62% 0 20%);
  animation: symbol-lime-arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.logo--tagline {
  clip-path: inset(0 0 53% 35.5%);
  animation: lettering-arrive 640ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both;
}

.logo--wordmark {
  clip-path: inset(47% 0 0 35.5%);
  animation: lettering-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) 230ms both;
}

.email,
.email:visited {
  display: block;
  width: fit-content;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 8px;
  color: var(--muted-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-text-fill-color: currentColor;
  -webkit-tap-highlight-color: rgb(0 170 240 / 14%);
  text-decoration-line: underline;
  text-decoration-color: #829193;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
  animation: email-arrive 560ms cubic-bezier(0.16, 1, 0.3, 1) 550ms both;
}

.email:hover, .email:active { color: #006a94; text-decoration-color: var(--cyan); }
.email:focus-visible { outline: 2px solid #006a94; outline-offset: 6px; border-radius: 2px; }

@keyframes symbol-cyan-arrive { from { opacity: 0; transform: translate(-8px, 7px) scale(.97); } to { opacity: 1; transform: translate(0) scale(1); } }
@keyframes symbol-lime-arrive { from { opacity: 0; transform: translate(8px, 7px) scale(.97); } to { opacity: 1; transform: translate(0) scale(1); } }
@keyframes lettering-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes email-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .armor-field::before { background-image: url("/white-shield-mobile.webp?v=20260930-7"); }
  .page-shell { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .hero { gap: 22px; transform: translateY(-7svh); }
  .circuit-field { height: clamp(210px, 34svh, 320px); }
  .email, .email:visited { font-size: 1.0625rem; }
}

@media (max-height: 500px) { .hero { max-width: 360px; gap: 12px; transform: translateY(-12px); } .circuit-field { height: 110px; } .armor-field::before { background-image: url("/white-shield.webp?v=20260930-7"); } }
@media (forced-colors: active) { .armor-field, .circuit-field { display: none; } .page-shell { background: Canvas; } .email, .email:visited { color: LinkText; } }
@media (prefers-reduced-motion: reduce) { .logo, .email { animation: none; } .email { transition: none; } }