/* Scanner Dex uses the same dark surface and blue accent family as the iOS app. */
:root {
  --ink: #f7f9fc;
  --muted: #9bacbc;
  --paper: #0f121a;
  --violet: #76c6f9;
  --violet-dark: #349fd7;
  --line: rgba(255, 255, 255, .08);
  --card: #1a1f29;
}

.hero {
  background: radial-gradient(circle at 76% 24%, #1e608f 0, transparent 28%),
    linear-gradient(145deg, #0f121a 0%, #111923 100%);
}

.button {
  background: linear-gradient(100deg, #76c6f9, #349fd7);
  color: #0b1218;
  box-shadow: 0 8px 20px #349fd740;
}

.button:hover { background: #9bd8fb; }

.card { background: #1a1f29; }
.card a { color: #76c6f9; }
.callout { background: #171d27; border: 1px solid rgba(118, 198, 249, .18); }
.callout .button { color: #0b1218; background: #76c6f9; }
.note { background: #132b3b; border-left-color: #76c6f9; }

/* Navigation CTA is intentionally quiet so the page's primary CTA remains the focus. */
.nav .button {
  background: transparent;
  color: #bfe6ff;
  box-shadow: none;
  border: 1px solid rgba(118, 198, 249, .42);
}

.nav .button:hover {
  background: rgba(118, 198, 249, .12);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 370px);
  align-items: center;
  column-gap: 54px;
}

.hero-copy { grid-column: 1; }
.hero-visual { grid-column: 2; grid-row: 1; margin: 0; }
.hero-visual img {
  display: block;
  width: 100%;
  max-height: 590px;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  box-shadow: 0 28px 60px #3f237a38;
}

@media (max-width: 720px) {
  .hero .wrap { display: block; }
  .hero-visual { max-width: 340px; margin: 34px auto 0; }
  .hero-visual img { max-height: 450px; }
}