/* ============================================================
   Zero Friction Labs — shared site styles
   Loaded from every page. Tailwind utility classes handle most
   layout; this file holds custom CSS for things Tailwind can't
   express cleanly: gradients, masks, animations, focus rings.
   ============================================================ */

html, body {
  background-color: #040506;   /* brand-ink — set here so the page is dark even before Tailwind upgrades the bg-brand-ink utility class */
  color: #F2F1F1;               /* brand-paper */
  min-height: 100%;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; cursor: default; }
a, button, [role="button"], summary, label[for] { cursor: pointer; }

/* ----- Skip-to-main link (a11y) -----
   Visually hidden until focused. First Tab on every page lands here. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background: #128FE3;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: none; }

/* ----- Focus-visible rings -----
   Override browser default with brand-colored outlines that
   don't appear on mouse click, only keyboard nav. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid #18A1E8;
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.card:focus-visible { outline-color: #18A1E8; }
.card-qa:focus-visible { outline-color: #10B981; }

/* ----- Decorative grid background ----- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(24, 161, 232, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 161, 232, 0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%);
}

/* ----- Hero gradient text ----- */
.text-gradient {
  background: linear-gradient(90deg, #18A1E8 0%, #7DD3FC 60%, #F2F1F1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-qa {
  background: linear-gradient(90deg, #10B981 0%, #6EE7B7 60%, #F2F1F1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Buttons ----- */
.btn-primary {
  background: linear-gradient(90deg, #128FE3, #18A1E8);
  box-shadow: 0 0 0 1px rgba(24,161,232,0.3), 0 10px 30px -10px rgba(18,143,227,0.6);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(24,161,232,0.5), 0 18px 40px -12px rgba(18,143,227,0.8);
  filter: brightness(1.05);
}
.btn-outline {
  border: 1px solid rgba(24,161,232,0.45);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline:hover {
  background-color: rgba(24,161,232,0.10);
  border-color: rgba(24,161,232,0.8);
  transform: translateY(-1px);
}

/* ----- Card variants ----- */
/* Anchor cards inherit the link styling reset to avoid blue-on-dark default link color. */
a.card, a.card-qa { color: inherit; text-decoration: none; }
a.card:hover, a.card-qa:hover { color: inherit; }

.card {
  position: relative;
  display: block;
  background: linear-gradient(180deg, rgba(24,161,232,0.06), rgba(24,161,232,0.02));
  border: 1px solid rgba(24,161,232,0.18);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.card:hover {
  border-color: rgba(24,161,232,0.55);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(24,161,232,0.10), rgba(24,161,232,0.03));
}
.card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(24,161,232,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

.card-qa {
  position: relative;
  display: block;
  background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
  border: 1px solid rgba(16,185,129,0.18);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.card-qa:hover {
  border-color: rgba(16,185,129,0.55);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.03));
}
.card-qa::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(16,185,129,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.card-qa:hover::after { opacity: 1; }

/* "→" arrow that fades in on card hover, signals card is a link */
.card-arrow, .card-qa-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.card:hover .card-arrow,
.card:focus-visible .card-arrow,
.card-qa:hover .card-qa-arrow,
.card-qa:focus-visible .card-qa-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Anchor heading wrapper used on home: section h3 → category page */
a.heading-link { color: inherit; text-decoration: none; }
a.heading-link:hover h3 { color: #18A1E8; }
a.heading-link[data-accent="qa"]:hover h3 { color: #10B981; }

/* ----- Reveal-on-scroll ----- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ----- Logo glow on hero ----- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24,161,232,0.0), 0 0 60px rgba(24,161,232,0.25); }
  50%      { box-shadow: 0 0 0 0 rgba(24,161,232,0.0), 0 0 100px rgba(24,161,232,0.45); }
}
.logo-glow { animation: pulseGlow 6s ease-in-out infinite; border-radius: 24px; }

/* ----- Active nav link ----- */
[aria-current="page"] {
  color: #F2F1F1;
  font-weight: 600;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo-glow { animation: none; }
  .card-arrow, .card-qa-arrow { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
}