/* ============================================================
   Filter8 — shared stylesheet
   Self-hosted variable fonts (OFL) + resets + responsive system.
   Element-level styling stays inline in each page.
   ============================================================ */

/* ---- Self-hosted fonts (no CDN) ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-var.woff2') format('woff2') tech('variations'),
       url('fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-var.woff2') format('woff2') tech('variations'),
       url('fonts/JetBrainsMono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0b0f14;
  color: #e6edf3;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: #35e1f2; text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #35e1f2; color: #04222a; }
textarea:focus { outline: none; }
textarea::placeholder { color: #56626f; }
img { max-width: 100%; display: block; }

@keyframes f8blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ---- Buttons ----------------------------------------------------------------
   The CTAs are inline-styled <a> "boxes": their colour, border, and geometry
   live in the element's own style attribute. These classes add the interaction
   layer inline styles can't express — a hover/active lift + glow, a keyboard
   focus ring, and, critically, suppression of the global underline-on-hover
   that made a filled button behave like a plain text link. Hover/active recolours
   use !important to win over the element's inline background/border/colour;
   transform and box-shadow are never set inline, so they don't need it. Base
   geometry (padding, font-size, radius) stays inline on each button. */
.f8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none !important;   /* beat the global a:hover underline */
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s ease,
              background-color .16s ease, border-color .16s ease, color .16s ease;
}
.f8-btn:focus-visible { outline: 2px solid #7febf9; outline-offset: 3px; }
.f8-btn:active { transition-duration: .06s; transform: translateY(0); }

/* Primary — filled cyan: brighten, lift, and cast a cyan glow. */
.f8-btn-primary:hover {
  background: #5cebf9 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(53, 225, 242, .75),
              0 3px 10px -5px rgba(53, 225, 242, .5);
}
.f8-btn-primary:active {
  background: #29cfe2 !important;
  box-shadow: 0 2px 8px -4px rgba(53, 225, 242, .55);
}

/* Ghost — outlined: cyan border + a faint wash, matching lift, softer glow. */
.f8-btn-ghost:hover {
  border-color: #35e1f2 !important;
  color: #d6faff !important;
  background: rgba(53, 225, 242, .10) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(53, 225, 242, .4);
}
.f8-btn-ghost:active {
  background: rgba(53, 225, 242, .18) !important;
  box-shadow: none;
}

/* Reduced-motion: keep the colour + glow feedback, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .f8-btn {
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, box-shadow .16s ease;
  }
  .f8-btn:active, .f8-btn-primary:hover, .f8-btn-ghost:hover { transform: none; }
}

/* ---- Shared responsive system ---- */
@media (max-width: 920px) {
  .f8-hero { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 56px !important; }
  .f8-2col { grid-template-columns: 1fr !important; }
  .f8-3col { grid-template-columns: 1fr 1fr !important; }
  .f8-4col { grid-template-columns: 1fr 1fr !important; }
  .f8-navlinks { display: none !important; }
  .f8-pipeline { flex-wrap: wrap !important; }
  .f8-pipeline > div { border-radius: 12px !important; border-left: 1px solid #1f2a35 !important; flex-basis: calc(50% - 6px) !important; }
  .f8-side { grid-template-columns: 1fr !important; }
  .f8-side aside { position: static !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px 16px !important; margin-bottom: 12px; }
}
@media (max-width: 680px) {
  .f8-3col { grid-template-columns: 1fr !important; }
  .f8-footer { grid-template-columns: 1fr 1fr !important; }
  .f8-h1 { font-size: 34px !important; }
  .f8-pipeline > div { flex-basis: 100% !important; }
  .f8-pad { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 460px) {
  .f8-4col { grid-template-columns: 1fr !important; }
  .f8-footer { grid-template-columns: 1fr !important; }
}

/* Wide comparison table -> horizontal scroll on small screens */
.f8-tablewrap { overflow-x: auto !important; }
.f8-tablewrap table { min-width: 640px; }