/* ==========================================================================
   AM3 Technology — Light Refresh Layer (2026)
   Loads after Tailwind. Elevates the existing brand without restructuring:
   refined type, layered card shadows, deeper buttons, accessible focus,
   a lightweight CSS fog (replaces the heavy three.js/Vanta background),
   and a mobile click-to-call bar.
   ========================================================================== */

:root {
  --am3-red: #961F25;
  --am3-red-dark: #7C1A1F;
  --am3-ink: #15171A;
  --am3-body: #3E444D;
  --am3-muted: #6B7280;
  --am3-line: rgba(21, 23, 26, 0.08);
  --am3-bg-soft: #F7F7F8;
  --am3-shadow-sm: 0 1px 2px rgba(21,23,26,.04), 0 2px 8px rgba(21,23,26,.05);
  --am3-shadow-md: 0 2px 6px rgba(21,23,26,.05), 0 10px 24px rgba(21,23,26,.07);
  --am3-shadow-lg: 0 6px 16px rgba(21,23,26,.08), 0 20px 48px rgba(21,23,26,.10);
  --am3-ring: 0 0 0 3px rgba(150, 31, 37, .28);
}

/* ---- Base typography polish ---------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--am3-body);
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { color: var(--am3-ink); letter-spacing: -0.018em; }
h1 { letter-spacing: -0.028em; line-height: 1.08; }
h2 { line-height: 1.14; }
p { line-height: 1.7; }

/* Keep comfortable measure on long paragraphs without touching layout */
section p { max-width: 68ch; }
section p.text-center, .text-center p, footer p { max-width: none; }

/* ---- Header: hairline instead of heavy shadow ---------------------------- */
header.sticky {
  box-shadow: none !important;
  border-bottom: 1px solid var(--am3-line);
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

/* ---- Cards: softer, layered shadows + hairline edge ---------------------- */
.shadow-md, .shadow-lg {
  box-shadow: var(--am3-shadow-md) !important;
}
.rounded-xl.shadow-md,
.rounded-lg.shadow-md,
.rounded-2xl.shadow-lg,
.rounded-xl.shadow-lg {
  border: 1px solid var(--am3-line);
}
.hover\:shadow-xl:hover, .hover\:shadow-lg:hover {
  box-shadow: var(--am3-shadow-lg) !important;
}
/* Smooth, consistent card motion */
.transition, [class*="transition"] { transition-duration: .22s; transition-timing-function: cubic-bezier(.2,.6,.2,1); }

/* ---- Buttons: give the primary CTA real depth ---------------------------- */
.bg-am3red {
  background-image: linear-gradient(180deg, #A82830 0%, var(--am3-red) 55%, #8A1C22 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--am3-shadow-sm);
}
.bg-am3red:hover, .hover\:bg-red-800:hover {
  background-image: linear-gradient(180deg, #991f26 0%, var(--am3-red-dark) 100%);
}

/* ---- Accessible focus everywhere ---------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--am3-ring);
  border-radius: 8px;
}

/* ---- Partner logos: calmer default, crisp on hover ---------------------- */
.partner-logo { opacity: .55; filter: grayscale(100%) contrast(.9); transition: opacity .22s ease, filter .22s ease; }
.partner-logo:hover { opacity: 1; filter: grayscale(0%) contrast(1); }

/* ---- Links in prose ----------------------------------------------------- */
.text-am3red { color: var(--am3-red); }

/* ==========================================================================
   Lightweight CSS "fog" background — replaces three.js + Vanta (~600KB saved)
   Targets the existing #vanta-bg wrapper. Only shows behind transparent
   sections (the hero); solid sections sit on top, exactly as before.
   ========================================================================== */
#vanta-bg { position: relative; isolation: isolate; }
#vanta-bg::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(42vmax 42vmax at 18% 12%, rgba(150,31,37,.10), transparent 60%),
    radial-gradient(38vmax 38vmax at 85% 8%,  rgba(197,197,197,.38), transparent 62%),
    radial-gradient(50vmax 50vmax at 70% 80%, rgba(150,31,37,.06), transparent 60%),
    radial-gradient(60vmax 60vmax at 25% 90%, rgba(255,255,255,.9),  transparent 65%),
    #FAF9F9;
  background-repeat: no-repeat;
  filter: blur(6px);
  animation: am3Fog 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes am3Fog {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
}

/* ==========================================================================
   Mobile click-to-call bar — revenue add. Phones only.
   ========================================================================== */
#am3CallBar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--am3-line);
  box-shadow: 0 -6px 20px rgba(21,23,26,.08);
}
#am3CallBar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 10px;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1;
}
#am3CallBar .am3-call {
  color: #fff;
  background-image: linear-gradient(180deg, #A82830 0%, var(--am3-red) 55%, #8A1C22 100%);
  box-shadow: var(--am3-shadow-sm);
}
#am3CallBar .am3-scan {
  color: var(--am3-ink);
  background: #fff;
  border: 1px solid var(--am3-line);
}
#am3CallBar svg { width: 18px; height: 18px; }
/* Keep the bar from covering the footer's last line on phones */
@media (max-width: 767px) { body { padding-bottom: 72px; } }
@media (min-width: 768px) { #am3CallBar { display: none; } }

/* ---- Respect reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #vanta-bg::before { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}