/* =========================================================
   BaseAim Landing Page — styles.css
   Mobile-first. Desktop widening via media queries at the end.
   ========================================================= */

:root {
  /* colors */
  --accent: #1d6fff;
  --accent-strong: #0d5cf0;
  --ink: #0f1419;
  --ink-soft: #1f2733;
  --muted: #5b6573;
  --muted-light: #7a8494;
  --navy: #0b1f4d;
  --navy-deep: #081940;
  --white: #ffffff;

  /* gradient backgrounds */
  --grad-hero: linear-gradient(180deg, #d9e8ff 0%, #eaf3ff 45%, #f4f9ff 100%);
  --grad-soft: linear-gradient(180deg, #f1f7ff 0%, #eaf2ff 100%);

  /* pills */
  --pink-bg: #fde8ea;   --pink-fg: #d6455a;
  --blue-bg: #e6efff;   --blue-fg: #2563eb;
  --green-bg: #e3f5ea;  --green-fg: #1f9d57;

  /* card */
  --card-radius: 18px;
  --card-border: #e7ecf3;
  --card-shadow: 0 10px 30px rgba(20, 40, 80, 0.06);

  --container: 480px;
  --container-wide: 760px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #f4f9ff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* ---------- layout helpers ---------- */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 22px;
}
.container--narrow { max-width: var(--container); }

.section { padding: 54px 0; position: relative; }

/* hero: soft cyan sky-blue held through most of the hero, then a short, crisp
   transition to white near the bottom so the boundary with the white pain
   section is clearly defined. Colours sampled from the reference (01-hero.png). */
.section--gradient {
  background:
    /* soft white glow near the top (this layer slowly drifts) */
    radial-gradient(75% 55% at 50% 14%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 70%),
    /* edge tint — corners/edges a touch deeper, clean sky-blue (static) */
    radial-gradient(115% 92% at 50% 38%, rgba(255,255,255,0) 44%, rgba(150,206,240,0.46) 100%),
    /* base vertical fade (static) — bright, clean cyan */
    linear-gradient(180deg, #def2fd 0%, #e4f4fe 88%, #e8f6fe 100%);
  background-size: 150% 150%, 100% 100%, 100% 100%;
  background-position: 50% 8%, 0 0, 0 0;
  animation: heroGlow 26s ease-in-out infinite;
}
/* only the soft top glow layer drifts — the edge darkening and fade stay fixed */
@keyframes heroGlow {
  0%, 100% { background-position: 45% 6%, 0 0, 0 0; }
  50%      { background-position: 55% 20%, 0 0, 0 0; }
}

/* soft sections: very light cyan wash, gently shifting, consistent with the hero */
.section--gradient-soft {
  background: linear-gradient(180deg, #eef6fd 0%, #e2f4fd 50%, #eef6fd 100%);
  background-size: 100% 180%;
  background-position: 0 0;
  animation: softShift 32s ease-in-out infinite;
}
@keyframes softShift {
  0%, 100% { background-position: 0 0%; }
  50%      { background-position: 0 100%; }
}
.section--white { background: var(--white); }

.section__title {
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 30px;
}
.section__title--left { text-align: left; }
.section__title--light { color: #fff; }

.eyebrow {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.accent { color: var(--accent); }
.accent-italic {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}

/* ---------- buttons ---------- */
.btn {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.btn--cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 340px;
  margin: 30px auto 0;
  padding: 16px 22px;
  /* depth: slightly lighter at the top, deeper at the bottom */
  background: linear-gradient(180deg, #3d82ff 0%, #1d6fff 55%, #0d5cf0 100%);
  color: #fff;
  font-size: 17px;
  /* lift + soft blue glow */
  box-shadow: 0 10px 24px rgba(29, 111, 255, 0.40), 0 0 24px rgba(45, 120, 255, 0.22);
}
/* periodic shine sweep — quick pass, then a long rest */
.btn--cta::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: btnShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%   { left: -60%; }
  16%  { left: 130%; }
  100% { left: 130%; }
}
.btn--cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
  box-shadow: 0 16px 34px rgba(29, 111, 255, 0.50), 0 0 34px rgba(45, 120, 255, 0.38);
}
.btn--cta:active {
  transform: translateY(-1px);
  filter: brightness(0.98);
  box-shadow: 0 6px 14px rgba(29, 111, 255, 0.38), 0 0 16px rgba(45, 120, 255, 0.20);
}
.btn__sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero { padding-top: 20px; padding-bottom: 30px; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero__logo { width: 34px; height: 34px; object-fit: contain; margin-bottom: 8px; }

.hero__headline { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.hero__line { line-height: 1.2; }
.hero__line--bold { font-size: 33px; font-weight: 700; letter-spacing: -0.005em; }
/* accent phrases: elegant italic serif with a transparent blue gradient + soft glow */
.hero .accent-italic {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 29px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgba(106, 170, 255, 0.9) 0%, rgba(48, 124, 255, 0.9) 52%, rgba(26, 96, 220, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(45, 120, 255, 0.35);
}
.hero__line--mid { font-size: 22px; font-weight: 600; margin-top: 16px; }
.hero__line--mid strong { font-weight: 700; }
.hero .hero__line--big { font-size: 42px; margin-top: 16px; }

/* VSL card */
.vsl-card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 14px;
}
.vsl-card__label {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 12px;
}
.ic-speaker { width: 17px; height: 17px; color: var(--accent); }

/* VSL player — the slot holds the in-flow space; .vsl fills it (and goes fixed when floating) */
.vsl-slot { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.vsl {
  position: absolute; inset: 0;
  background: #0a0f1c;
  border: 2px solid #6f9bf5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(125, 168, 255, 0.14),
    0 0 22px rgba(95, 141, 240, 0.45);
  transition: box-shadow .3s ease;
}
/* floating mini-player: docked bottom-right, above the page (modal still sits above it) */
.vsl.is-floating {
  position: fixed;
  inset: auto 18px 18px auto;
  width: 220px;
  height: auto;
  aspect-ratio: 16 / 10;
  z-index: 990;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(8, 20, 50, 0.48), 0 0 0 2px rgba(111, 155, 245, 0.55);
  animation: vslDock .35s cubic-bezier(.2, .7, .3, 1);
}
@keyframes vslDock {
  from { transform: translateY(26px) scale(.9); opacity: .35; }
  to   { transform: none; opacity: 1; }
}
.vsl__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* close (×) — only shown while floating */
.vsl__close {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(10, 16, 30, 0.72); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.vsl.is-floating .vsl__close { display: flex; }
.vsl__close:hover { background: rgba(10, 16, 30, 0.92); }

.vsl__poster {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 28, 0.25);
  border: none; cursor: pointer;
  transition: opacity .25s ease;
}
.vsl__poster.is-hidden { opacity: 0; pointer-events: none; }
.vsl__play {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.vsl__play svg { width: 26px; height: 26px; color: var(--ink); margin-left: 3px; }

.vsl__controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  opacity: 0; transition: opacity .2s ease;
}
/* controls are visible once playback has started (stays visible while paused) */
.vsl.is-active .vsl__controls { opacity: 1; }
.vsl__btn {
  background: rgba(255,255,255,0.14);
  border: none; border-radius: 50%;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; flex: none;
}
.vsl__btn svg { width: 16px; height: 16px; }

/* each toggle button shows exactly one icon for the current state */
.vsl__ic--pause { display: none; }            /* paused: show play, hide pause */
.vsl.is-playing .vsl__ic--play  { display: none; }
.vsl.is-playing .vsl__ic--pause { display: block; }
.vsl__ic--muted { display: none; }             /* unmuted: show sound, hide muted */
.vsl.is-muted .vsl__ic--sound { display: none; }
.vsl.is-muted .vsl__ic--muted { display: block; }
.vsl__btn:hover { background: rgba(255,255,255,0.26); }
.vsl__progress {
  flex: 1; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.28);
  overflow: hidden;
  cursor: default; /* not interactive — no seek */
}
.vsl__progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .25s linear; }

/* chevron */
.chevron { margin-top: 18px; color: var(--accent); }
.chevron svg { width: 26px; height: 26px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* =========================================================
   Cards (Pain Point / Diagnosis / The Shift)
   ========================================================= */
.card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 26px 22px;
}
.card--accent-pink { border-color: #f6d7dc; }

.card__title { font-size: 23px; font-weight: 800; margin: 14px 0 18px; letter-spacing: -0.01em; }
.card__closing { margin-top: 20px; color: var(--muted); font-size: 15.5px; }

.pill {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.pill--pink { background: var(--pink-bg); color: var(--pink-fg); }
.pill--blue { background: var(--blue-bg); color: var(--blue-fg); }
.pill--green { background: var(--green-bg); color: var(--green-fg); }

/* pain-point lead list */
.lead-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.lead-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.lead-list strong { color: var(--ink); font-weight: 700; }

/* diagnosis numbered list */
.num-list li { padding: 14px 0; border-bottom: 1px solid #eef1f6; }
.num-list li:last-child { border-bottom: none; }
.num-list__title { font-weight: 700; font-size: 16px; color: var(--ink); }
.num-list__sub { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* the shift check list */
.check-list li { padding: 14px 0; border-bottom: 1px solid #eef1f6; }
.check-list li:last-child { border-bottom: none; }
.check-list__title { font-weight: 700; font-size: 16px; color: var(--ink); }
.check-list__sub { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* scarcity badge */
.scarcity {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; margin: 24px auto 0;
  padding: 8px 16px; border: 1.5px solid #3d82ff; border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 600;
}
.scarcity__dot { width: 9px; height: 9px; border-radius: 50%; background: #1f9d57; box-shadow: 0 0 0 4px rgba(31,157,87,0.16); }

/* =========================================================
   5. How it works
   ========================================================= */
.steps { display: flex; flex-direction: column; gap: 40px; }
.step { text-align: center; }
.step__num {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 18px rgba(29,111,255,0.3);
}
.step__title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.step__text { color: var(--muted); font-size: 15.5px; max-width: 340px; margin: 0 auto; }

/* =========================================================
   6. Guarantee
   ========================================================= */
.guarantee { text-align: center; }
.media-placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #11213f, #0a1830);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #aebfd8; font-size: 15px; text-align: center;
  border: 1px solid #c9d8f5;
}
.media-placeholder small { color: #7d90b3; }
.guarantee__roadmap { font-size: 15px; margin: 22px auto; max-width: 360px; }
.shield { margin: 8px auto 0; }
.shield svg { width: 78px; height: 78px; }
.guarantee__title { font-size: 26px; font-weight: 800; margin: 14px 0 12px; }
.guarantee__text { color: var(--muted); font-size: 16px; max-width: 360px; margin: 0 auto; }
.guarantee__text strong { color: var(--ink); }

/* =========================================================
   7. Testimonials
   ========================================================= */
.placeholder-note {
  font-size: 12.5px; color: var(--muted-light);
  font-style: italic; margin-bottom: 22px;
}
.tcards { display: flex; flex-direction: column; gap: 20px; }
.tcard {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  padding: 22px;
}
.tcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tcard__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.tcard__name { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.tcard__headline { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.tcard__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.tcard__score { font-weight: 700; font-size: 14px; }
.tcard__quote { font-style: italic; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.tcard__quote strong { font-weight: 700; }
.tcard__date { color: var(--muted-light); font-size: 13px; margin-top: 14px; }

/* =========================================================
   8. If you're thinking
   ========================================================= */
#thinking { text-align: center; }
.quote-list { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin: 0 auto; text-align: left; }
.quote-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--ink-soft); }
.quote-list__check { color: #1f9d57; font-weight: 800; flex: none; }
.thinking__closing { margin-top: 24px; color: var(--muted); font-size: 16px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* =========================================================
   9. Book a Strategy Call (navy)
   ========================================================= */
.section--navy { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); text-align: center; }
.navy__lead { color: #c8d6f0; font-size: 16px; margin-bottom: 18px; }
.navy-list { display: flex; flex-direction: column; gap: 14px; max-width: 360px; margin: 0 auto; text-align: left; }
.navy-list li { display: flex; align-items: flex-start; gap: 10px; color: #eaf0fb; font-size: 15.5px; }
.navy-list__check { color: var(--accent); font-weight: 800; flex: none; }
.navy__closing { margin-top: 26px; color: #fff; font-weight: 600; font-size: 16px; }

/* =========================================================
   10. Booking calendar
   ========================================================= */
.booking__sub { text-align: center; color: var(--muted); font-size: 15.5px; max-width: 380px; margin: -16px auto 28px; }

/* GoHighLevel booking embed — full width on mobile, centred with a max-width on desktop */
.calendar-embed {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* nothing clips the iframe; the GHL script sets the height dynamically */
  overflow: visible;
}
.calendar-embed iframe {
  display: block;
  width: 100%;
  min-height: 650px; /* keeps space before form_embed.js resizes it */
  border: none;
}

/* =========================================================
   11. FAQ
   ========================================================= */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 18px; font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink); text-align: left;
}
.faq__icon { font-size: 22px; font-weight: 400; color: var(--muted); flex: none; transition: transform .2s ease; line-height: 1; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__a p { padding: 0 18px 18px; color: var(--muted); font-size: 15px; }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: #0b1f4d; color: #c8d6f0; text-align: center; padding: 30px 0; }
.footer__logo { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 12px; filter: brightness(0) invert(1); }
.footer__brand { font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 6px; }
.footer__copy { font-size: 13px; color: #8ea2cc; }

/* =========================================================
   LEAD MODAL
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8, 16, 36, 0.7);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal__panel {
  background: #fff; border-radius: 18px;
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
  padding: 28px 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
  animation: pop .22s ease;
}
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__title { font-size: 22px; font-weight: 800; text-align: center; }
.modal__sub { text-align: center; color: var(--muted); font-size: 14.5px; margin: 8px 0 20px; }

.modal__form { display: flex; flex-direction: column; gap: 14px; }
/* honeypot — visually hidden & off-screen, not announced or tabbable */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select {
  font-family: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid #d6dde8; border-radius: 10px;
  background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,111,255,0.15); }
.modal__submit { margin-top: 8px; }

/* =========================================================
   DESKTOP / RESPONSIVE WIDENING (min-width: 768px)
   ========================================================= */
@media (min-width: 768px) {
  .container--narrow { max-width: var(--container-wide); }
  .section { padding: 76px 0; }

  .hero__line--bold { font-size: 40px; }
  .hero .accent-italic { font-size: 32px; }
  .hero__line--mid { font-size: 26px; }
  .hero .hero__line--big { font-size: 44px; }
  .vsl-card { max-width: 620px; margin: 0 auto; }
  .vsl.is-floating { width: 340px; }

  .section__title { font-size: 34px; }
  .eyebrow { font-size: 16px; }

  /* steps + testimonials become grids */
  .steps { flex-direction: row; gap: 28px; }
  .step { flex: 1; }
  .tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  .card { padding: 34px 32px; }
  .card__title { font-size: 26px; }
}

@media (min-width: 1100px) {
  .container--narrow { max-width: 980px; }
  .vsl-card { max-width: 700px; }
}

/* tighten the gaps between the Pain Point / Diagnosis / The Shift cards by ~half */
#painpoint { padding-bottom: 27px; }
#diagnosis { padding-top: 27px; padding-bottom: 27px; }
#theshift  { padding-top: 27px; }
@media (min-width: 768px) {
  #painpoint { padding-bottom: 38px; }
  #diagnosis { padding-top: 38px; padding-bottom: 38px; }
  #theshift  { padding-top: 38px; }
}

/* each themed card gets a matching coloured border + a slight matching glow.
   The glows are large/soft and low-opacity, so the gaps between sections read as
   a smooth colour gradient rather than a hard section break. */
#painpoint .card {
  border: 1px solid rgba(214, 69, 90, 0.45);
  box-shadow: 0 0 48px 2px rgba(214, 69, 90, 0.11);
}
#diagnosis .card {
  border: 1px solid rgba(37, 99, 235, 0.44);
  box-shadow: 0 0 48px 2px rgba(37, 99, 235, 0.11);
}
#theshift .card {
  border: 1px solid rgba(31, 157, 87, 0.45);
  box-shadow: 0 0 48px 2px rgba(31, 157, 87, 0.11);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}