/* Reusable component classes + custom effects that utilities don't cover.
 * Tailwind utilities handle layout/spacing/typography in the markup; this file
 * holds the bits that repeat across pages (buttons, the container, the hero
 * glow) so every page stays consistent. Tokens come from DESIGN.md. */

:root {
  --primary: #0D6EFD;
  --primary-hover: #0957D9;
  --primary-active: #073BA3;
  --surface-tint: #F4F7FD;
  --accent-light: #B6CCEF;
  --body: #464E5A;
}

html { scroll-behavior: smooth; }

/* Centered max-width container with responsive gutters (DESIGN.md: 1400px). */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 1023px) { .container { padding-inline: 24px; } }
@media (max-width: 767px)  { .container { padding-inline: 16px; } }

/* Buttons - pill-shaped, reusable across pages and inside the web components. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-secondary { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn-secondary:hover { background: var(--surface-tint); color: var(--primary-hover); border-color: var(--primary-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); }

/* Accent word in a heading: a clean gradient fill on the text itself (no box,
   no underline). Modern and crisp at large sizes. */
.hl {
  background-image: linear-gradient(90deg, #0D6EFD 0%, #4F93FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Uppercase pill label used above section headings. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-tint);
  border: 1px solid var(--accent-light);
  padding: 6px 14px;
  border-radius: 100px;
}

/* Square icon tile (feature cards, process items). */
.ico {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--surface-tint);
  color: var(--primary);
  border: 1px solid #E3EBFB;
}
.ico-solid { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Card surface used across sections (feature/widget/step cards, FAQ items).
   White panel, hairline border, soft shadow - DESIGN.md surface system. */
.card {
  background: #FFFFFF;
  border: 1px solid #DBDFE8;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px 0px;
}

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks). Hidden off-screen until
   focused, then slides into view. */
.skip-link {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; outline: none; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); }

/* FAQ accordion built on native <details>/<summary> - keyboard accessible and
   fully in the DOM (so crawlers and AI engines read every answer). */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { cursor: pointer; }
.faq summary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); border-radius: 8px; }
.faq .faq-chev { transition: transform .2s ease; }
.faq details[open] .faq-chev { transform: rotate(180deg); }

/* Radial wash behind the hero (not worth a utility). overflow-x: clip stops the
   off-frame blobs/chips from creating a horizontal scrollbar. */
.hero-glow {
  background: radial-gradient(1200px 420px at 50% -140px, var(--surface-tint), transparent 70%);
  overflow-x: clip;
}

/* =====================================================================
   Hero product mockup + ambient life
   The hero "image" is built from markup (a browser window showing a live
   reviews widget) so it stays crisp at any size, weighs almost nothing, and
   shows the actual product. Decorative, so the wrapper is aria-hidden.
   ===================================================================== */

/* Soft blurred colour blobs behind the hero visual for depth. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

/* Browser window frame. */
.browser {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #DBDFE8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(13, 49, 109, .30), 0 10px 24px -14px rgba(13, 49, 109, .18);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  background: #F8F9FA;
  border-bottom: 1px solid #ECEAEA;
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-url {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted, #6C757D);
  background: #fff;
  border: 1px solid #ECEAEA;
  border-radius: 100px;
}
.mock-body { padding: 18px; background: linear-gradient(180deg, #FFFFFF, #F6F8FC); }

/* Mini reviews widget inside the frame. */
.rv-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.rv-g { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #ECEAEA; }
.rv-score { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 700; color: #1E2531; line-height: 1; }
.rv-sub { margin-top: 3px; font-size: 12px; color: #6C757D; }
.rv-stars { display: inline-flex; gap: 1px; color: #FBBF24; }
.rv-card { background: #fff; border: 1px solid #DBDFE8; border-radius: 12px; padding: 12px 13px; box-shadow: rgba(0,0,0,.04) 0 2px 8px; }
.rv-card + .rv-card { margin-top: 10px; }
.rv-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.rv-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.rv-name { font-size: 13px; font-weight: 600; color: #1E2531; }
.rv-txt { font-size: 12.5px; line-height: 1.5; color: #5B6470; }

/* Floating trust chips that overlap the frame. */
.chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #1E2531;
  background: #fff;
  border: 1px solid #DBDFE8;
  border-radius: 14px;
  box-shadow: 0 14px 34px -14px rgba(13, 49, 109, .35);
}
.chip-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }

/* Motion: a gentle float on the chips and a one-time entrance on the mock. */
@keyframes ws-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.floaty      { animation: ws-float 5s ease-in-out infinite; }
.floaty-slow { animation: ws-float 7s ease-in-out infinite; }

@keyframes ws-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: ws-fade-up .7s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .floaty, .floaty-slow, .fade-up { animation: none !important; }
}

/* On phones the mock goes full-width; the off-frame chips would crowd or clip,
   so drop them (decorative only). */
@media (max-width: 639px) {
  .chip { display: none; }
}

/* Decorative chips inside the bottom CTA box: only on wide screens, where the
   centered copy leaves room in the corners. */
@media (max-width: 1023px) {
  .cta-deco { display: none; }
}

/* Sticky translucent header. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(8px);
}