/* Shared EEZ brand primitives, sourced from 0xarmagan/eez-demos. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./geist-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./geist-mono-latin.woff2') format('woff2');
}

:root {
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --eez-green: #3be57e;
  --eez-label: #9ba6d6;
  --eez-lede: #c9cfda;
  --eez-hook: #8f8f8f;
  --eez-pinned: #a8f3ce;
  --eez-logo-grad: linear-gradient(180deg, #8ce8ab, #3f2acd);
  --eez-canvas: #0a0a0a;
  --eez-screen: #161616;
  --eez-chrome: #1f1f1f;
  --eez-edge: #2e2e2e;
  --eez-muted: #9aa3b3;
  --eez-grad: linear-gradient(90deg, #8ae5ac 0%, #6283bd 55%, #4439cb 100%);
  --eez-grad-btn: linear-gradient(90deg, #8ae5ac 0%, #6283bd 100%);
  --eez-ink-on-grad: #0a0a0a;
  --eez-grid: rgba(255, 255, 255, .045);
  --eez-heading: #fff;
  --eez-heading-light: #dcdcdc;
  --eez-pill-bg: #fff;
  --eez-pill-ink: #0a0a0a;
  color-scheme: dark;
}


.eez-eyebrow {
  margin: 0 0 16px;
  color: var(--eez-muted);
  font: 400 12.5px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eez-intro { padding: 48px 0 32px; }
.eez-page-heading {
  margin: 0;
  color: var(--eez-heading-light);
  font: 300 48px/1.08 var(--sans);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.eez-page-heading strong { color: var(--eez-heading); font-weight: 800; }
.eez-description {
  margin: 16px 0 0;
  max-width: 640px;
  color: var(--eez-lede);
  font: 400 18px/1.55 var(--sans);
  text-wrap: pretty;
}

.eez-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 5px 5px 20px;
  border: 1px solid var(--eez-edge);
  border-radius: 100px;
  background-color: var(--eez-pill-bg);
  background-clip: padding-box;
  background-repeat: no-repeat;
  color: var(--eez-pill-ink);
  font: 500 12px/1.5 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.eez-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--eez-pill-ink);
  color: var(--eez-pill-bg);
  font-size: 16px;
  transition: transform .2s ease;
}
.eez-pill:hover .eez-arrow { transform: translateX(3px); }
.eez-pill:hover { background-image: var(--eez-grad-btn); color: var(--eez-ink-on-grad); }

/* Use the card's own rounded border for hover and keyboard focus. */
.eez-card:is(:hover, :focus-within) { border-color: var(--border-hover); }

.eez-skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--eez-pill-bg);
  color: var(--eez-pill-ink);
  font: 500 12px var(--mono);
  transform: translateY(-160%);
}
.eez-skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--eez-green); outline-offset: 2px; }

@media (max-width: 640px) {
  .eez-intro { padding: 32px 0 24px; }
  .eez-page-heading { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Application panels share card surfaces; only whole-card links lift. */
.eez-card.eez-card {
  position: relative;
  overflow: visible;
  border: 1px solid var(--eez-edge);
  border-radius: 16px;
  background: var(--eez-screen);
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.eez-card.eez-card::before {
  content: ""; position: absolute; pointer-events: none;
  top: -1px; left: -1px; right: -1px; height: 20px; padding: 2px;
  border-radius: 16px 16px 0 0;
  background: var(--eez-grad); opacity: 0; transition: opacity .2s ease;
  /* Follow the rounded edge, then fade as the rail turns down each corner. */
  mask-image: linear-gradient(#000 2px, transparent 18px), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: border-box, content-box, border-box;
  mask-composite: intersect, exclude;
}
.eez-card.eez-card:is(:hover, :focus-within) { border-color: #333; background: #0d0d0d; }
.eez-card.eez-card:is(:hover, :focus-within)::before { opacity: 1; }
a.eez-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -20px rgba(0,0,0,.75); }