@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lexend:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Ambient depth — fixed mesh so scrolling feels less “flat CMS” */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 0% -10%, rgba(255, 242, 0, 0.055) 0%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 100% 5%, rgba(30, 58, 95, 0.06) 0%, transparent 48%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(15, 23, 42, 0.035) 0%, transparent 55%);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--color-ink);
  background: var(--color-bg);
  background-image: var(--color-bg-wash);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .v2-btn,
  .v2-stat,
  .v2-import-card,
  .v2-import-review,
  .v2-import-logo,
  .v2-logo,
  .v2-nav__link {
    transition: none !important;
  }

  .v2-btn--primary:hover,
  .v2-btn--ghost.v2-btn--on-dark:hover,
  .v2-stat:hover,
  .v2-import-card:hover,
  .v2-import-review:hover,
  .v2-import-logo:hover {
    transform: none;
  }
}

/* Interactive controls: explicit pointer (ui-ux checklist) */
button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
summary,
.v2-btn,
.v2-nav-toggle {
  cursor: pointer;
}

button:disabled,
.v2-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--color-teal-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-ink);
  text-decoration-color: var(--wd-accent);
}

:focus-visible {
  outline: 2px solid var(--wd-accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}