/* Best Ma — Care with Love · small layer of custom CSS on top of Tailwind */

:root {
  --brand:  #3C75BA;   /* logo blue   */
  --accent: #DC4D3E;   /* logo coral  */
  --gold:   #F3AF30;   /* logo gold   */
  --ink:    #1A2A40;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Focus ring consistent with the brand */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Horizontal scrollers without visible scrollbar */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Announcement marquee */
.marquee-track { display: flex; width: max-content; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Accordion chevrons */
[data-accordion] > button[aria-expanded="true"] .acc-icon { transform: rotate(180deg); }
.acc-icon { transition: transform .25s ease; }
[data-accordion] .acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
[data-accordion].is-open .acc-panel { grid-template-rows: 1fr; }
[data-accordion] .acc-panel > div { overflow: hidden; }

/* Variant / swatch selection */
.variant-card input:checked + span { border-color: var(--brand); background: #EFF5FC; }
.variant-card input:checked + span .variant-dot { border-color: var(--brand); }
.variant-card input:checked + span .variant-dot::after { transform: scale(1); }
.variant-dot::after {
  content: ''; display: block; width: 10px; height: 10px; border-radius: 999px;
  background: var(--brand); transform: scale(0); transition: transform .18s ease;
}

/* Product gallery thumbs */
.thumb.is-active { border-color: var(--brand); }

/* Drawer / overlay transitions */
.drawer { transition: transform .35s cubic-bezier(.4,0,.2,1); }
.overlay { transition: opacity .3s ease; }

/* Sale / trust ribbon dots */
.dot-sep::before { content: '•'; margin: 0 .6rem; opacity: .45; }

/* Rich text for policy pages */
.prose-policy h2 { font-family: Poppins, Rubik, sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 2rem 0 .75rem; }
.prose-policy h3 { font-family: Poppins, Rubik, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 1.5rem 0 .5rem; }
.prose-policy p  { color: #4b5563; line-height: 1.8; margin-bottom: 1rem; }
.prose-policy ul { list-style: disc; padding-left: 1.25rem; color: #4b5563; line-height: 1.9; margin-bottom: 1rem; }
.prose-policy a  { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Star rating */
.stars { color: var(--gold); letter-spacing: 1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   GRADIENT SYSTEM — built only from the logo palette
   blue #3C75BA · coral #DC4D3E · gold #F3AF30
   ============================================================ */
:root {
  --grad-brand: linear-gradient(135deg, #3C75BA 0%, #3A69AE 40%, #DC4D3E 100%);
  --grad-cool:  linear-gradient(135deg, #6494CE 0%, #3C75BA 55%, #274D7C 100%);
  --grad-warm:  linear-gradient(135deg, #F3AF30 0%, #DC4D3E 100%);
  --grad-deep:  linear-gradient(140deg, #14283F 0%, #1F3B5C 55%, #274D7C 100%);
}

/* Soft mesh wash: three blurred colour fields over a tinted base.
   .mesh for hero-weight sections, .mesh-soft for mid-page bands. */
.mesh {
  background:
    radial-gradient(58% 55% at 10% 0%,   rgba(60,117,186,.30) 0%, rgba(60,117,186,0) 62%),
    radial-gradient(48% 52% at 92% 6%,   rgba(220,77,62,.20)  0%, rgba(220,77,62,0)  64%),
    radial-gradient(52% 46% at 76% 74%,  rgba(243,175,48,.17) 0%, rgba(243,175,48,0) 66%),
    linear-gradient(180deg, #EFF5FC 0%, #FFFFFF 62%, #FFFFFF 100%);
}
.mesh-soft {
  background:
    radial-gradient(45% 60% at 0% 50%,   rgba(60,117,186,.16) 0%, rgba(60,117,186,0) 66%),
    radial-gradient(45% 60% at 100% 50%, rgba(243,175,48,.14) 0%, rgba(243,175,48,0) 66%),
    linear-gradient(180deg, #F7FAFE 0%, #EFF5FC 100%);
}
/* .mesh-deep is defined in the deep gradient system near the end of this file */

/* Floating colour blobs — pair with .blur-3xl on the element */
.blob-blue  { background: radial-gradient(circle, rgba(60,117,186,.42) 0%, rgba(60,117,186,0) 70%); }
.blob-coral { background: radial-gradient(circle, rgba(220,77,62,.34)  0%, rgba(220,77,62,0)  70%); }
.blob-gold  { background: radial-gradient(circle, rgba(243,175,48,.34) 0%, rgba(243,175,48,0) 70%); }

/* Gradient buttons — the fill slides on hover instead of hard-swapping */
.btn-grad {
  background-image: var(--grad-brand);
  background-size: 220% 100%;
  background-position: 0 0;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(60,117,186,.65);
  transition: background-position .5s ease, box-shadow .3s ease, transform .2s ease;
}
.btn-grad:hover { background-position: 100% 0; box-shadow: 0 10px 26px -8px rgba(220,77,62,.55); }
.btn-grad:active { transform: translateY(1px); }
.btn-grad-warm { background-image: var(--grad-warm); box-shadow: 0 6px 18px -8px rgba(243,175,48,.65); }

/* Static gradient pill for badges (no hover slide) */
.badge-grad {
  background-image: var(--grad-warm);
  color: #fff;
  box-shadow: 0 4px 12px -6px rgba(220,77,62,.7);
}

/* Gradient hairline ring for cards */
.grad-ring {
  position: relative;
  background: #fff;
}
.grad-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.grad-ring:hover::before { opacity: 1; }

/* Icon tile: flat tint at rest, gradient fill when its card is hovered */
.icon-tile { transition: background-image .3s ease, color .3s ease, box-shadow .3s ease; }
.group:hover .icon-tile,
.icon-tile:hover {
  background-image: var(--grad-cool);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(60,117,186,.8);
}

/* Thin gradient rule, used to cap sections */
.grad-rule { height: 3px; background: linear-gradient(90deg, #3C75BA 0%, #3C75BA 30%, #DC4D3E 65%, #F3AF30 100%); }

/* ============================================================
   MODERN UI LAYER — shared polish used across every page
   ============================================================ */

/* --- Motion: lift a card on hover -------------------------------------- */
.hover-lift { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(20,40,63,.35); }

/* --- Glass panel ------------------------------------------------------- */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 1px 2px rgba(20,40,63,.04), 0 20px 40px -28px rgba(20,40,63,.35);
}
.glass-dark {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
}

/* --- Eyebrow label above a section heading ----------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
  background: rgba(60,117,186,.08);
  border: 1px solid rgba(60,117,186,.16);
}
.eyebrow::before {
  content: ''; width: .375rem; height: .375rem; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(220,77,62,.18);
}
.eyebrow-light { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

/* --- Subtle dotted / grid textures ------------------------------------- */
.dot-grid {
  background-image: radial-gradient(rgba(60,117,186,.16) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dot-grid-light {
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* --- Animated gradient underline for links ----------------------------- */
.link-line {
  background-image: var(--grad-brand);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s ease;
}
.link-line:hover { background-size: 100% 2px; }

/* --- Reading progress bar (top of viewport) ---------------------------- */
.read-bar {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 0;
  z-index: 60;
  background: linear-gradient(90deg, #3C75BA 0%, #DC4D3E 65%, #F3AF30 100%);
  transition: width .1s linear;
  pointer-events: none;
}

/* --- Back-to-top button ------------------------------------------------ */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  z-index: 45;
  display: grid; place-items: center;
  height: 2.875rem; width: 2.875rem;
  border-radius: 999px;
  color: #fff;
  background-image: var(--grad-brand);
  box-shadow: 0 12px 28px -12px rgba(60,117,186,.9);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-2px); }

/* --- Testimonials ------------------------------------------------------ */
.tcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 1.25rem;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .3s ease;
}
.tcard::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(20,40,63,.4); }
.tcard:hover::after { opacity: 1; }
.quote-mark {
  font-family: Poppins, Rubik, sans-serif;
  font-size: 5rem; line-height: 1; font-weight: 700;
  background-image: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .18;
}
.avatar-grad {
  background-image: var(--grad-cool);
  color: #fff;
  font-family: Poppins, Rubik, sans-serif;
  letter-spacing: .02em;
}
.avatar-grad-warm { background-image: var(--grad-warm); }

/* Edge fade for auto-scrolling rails */
.rail-fade {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}

/* --- Footer ------------------------------------------------------------ */
/* Glow now comes from the .aurora layer inside the footer, not pseudo-elements,
   so .seam-top::before stays free to draw the top edge line. */
.footer-shell { position: relative; overflow: hidden; }

.logo-plate {
  display: inline-grid; place-items: center;
  border-radius: 1.25rem;
  background: #fff;
  padding: .875rem 1.25rem;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.75);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.logo-plate:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -22px rgba(0,0,0,.85); }

.footer-link { position: relative; transition: color .25s ease, padding-left .25s ease; }
.footer-link::before {
  content: ''; position: absolute; left: 0; top: 50%;
  height: 1px; width: 0; transform: translateY(-50%);
  background: var(--gold); transition: width .25s ease;
}
.footer-link:hover { padding-left: 1rem; }
.footer-link:hover::before { width: .75rem; }

/* --- Section divider wave --------------------------------------------- */
.fade-edge-top { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* --- Sticky header: condenses once the page is scrolled ---------------- */
.site-bar { transition: box-shadow .35s ease, background-color .35s ease; }
.site-bar.is-stuck {
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 32px -20px rgba(20,40,63,.55);
}
.header-logo { transition: height .35s cubic-bezier(.2,.7,.3,1); }
.site-bar.is-stuck .header-logo { height: 3.25rem; }
@media (min-width: 640px) { .site-bar.is-stuck .header-logo { height: 3.5rem; } }
@media (min-width: 1024px) { .site-bar.is-stuck .header-logo { height: 4rem; } }

/* --- Testimonial card on the dark band -------------------------------- */
.tcard-dark {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.25rem;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tcard-dark:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.09);
  border-color: rgba(100,148,206,.55);
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.75);
}
.quote-mark-light {
  font-family: Poppins, Rubik, sans-serif;
  font-size: 4.5rem; line-height: 1; font-weight: 700;
  color: rgba(255,255,255,.14);
}

/* ============================================================
   DEEP GRADIENT SYSTEM — the dark bands (marquee, testimonials, footer)
   Layered mesh + drifting aurora + film grain, all from the logo palette
   ============================================================ */

/* Rich multi-field mesh replacing the old flat 3-stop ramp */
.mesh-deep {
  position: relative;
  background:
    radial-gradient(62% 78% at 10% 4%,   rgba(60,117,186,.55) 0%, rgba(60,117,186,0) 60%),
    radial-gradient(52% 62% at 92% 2%,   rgba(220,77,62,.26)  0%, rgba(220,77,62,0)  62%),
    radial-gradient(48% 58% at 78% 98%,  rgba(243,175,48,.20) 0%, rgba(243,175,48,0) 60%),
    radial-gradient(70% 80% at 42% 62%,  rgba(39,77,124,.55)  0%, rgba(39,77,124,0)  70%),
    linear-gradient(155deg, #0A1626 0%, #12253C 45%, #0C1D31 100%);
  background-color: #0A1626;
}

/* A brighter, wider variant for full sections (testimonials, footer) */
.mesh-deep-xl {
  background:
    radial-gradient(58% 70% at 14% 0%,   rgba(60,117,186,.62) 0%, rgba(60,117,186,0) 58%),
    radial-gradient(46% 58% at 88% 6%,   rgba(220,77,62,.30)  0%, rgba(220,77,62,0)  60%),
    radial-gradient(46% 56% at 86% 100%, rgba(243,175,48,.13) 0%, rgba(243,175,48,0) 62%),
    radial-gradient(60% 60% at 46% 54%,  rgba(48,96,154,.50)  0%, rgba(48,96,154,0)  72%),
    linear-gradient(155deg, #09131F 0%, #14283F 48%, #0B1B2E 100%);
  background-color: #09131F;
}

/* Drifting aurora ribbons — sits behind content, above the mesh */
.aurora { position: absolute; inset: -20%; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .48;
  will-change: transform;
}
.aurora span:nth-child(1) {
  top: 4%; left: 6%; height: 46%; width: 42%;
  background: radial-gradient(circle, rgba(100,148,206,.85) 0%, rgba(100,148,206,0) 68%);
  animation: aurora-a 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(2) {
  top: 32%; right: 4%; height: 44%; width: 38%;
  background: radial-gradient(circle, rgba(220,77,62,.60) 0%, rgba(220,77,62,0) 68%);
  animation: aurora-b 27s ease-in-out infinite alternate;
}
.aurora span:nth-child(3) {
  bottom: 2%; left: 34%; height: 40%; width: 44%;
  background: radial-gradient(circle, rgba(243,175,48,.26) 0%, rgba(243,175,48,0) 68%);
  animation: aurora-c 31s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(14%, 10%, 0) scale(1.18); }
}
@keyframes aurora-b {
  0%   { transform: translate3d(0,0,0) scale(1.1); }
  100% { transform: translate3d(-16%, -12%, 0) scale(.92); }
}
@keyframes aurora-c {
  0%   { transform: translate3d(0,0,0) scale(.95); }
  100% { transform: translate3d(10%, -14%, 0) scale(1.2); }
}

/* Fine film grain so the large gradients never look banded */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glowing seam along the top edge of a dark band */
.seam-top::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(100,148,206,.7) 22%, rgba(243,175,48,.8) 50%, rgba(220,77,62,.7) 78%, transparent 100%);
}
.seam-glow::after {
  content: '';
  position: absolute; inset: -60px 0 auto 0;
  height: 120px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(100,148,206,.28) 0%, rgba(100,148,206,0) 70%);
}

/* Spotlight vignette that keeps the centre content readable */
.vignette::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(4,10,18,.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none !important; }
}

/* First heading inside a prose card should not push the card open */
.prose-policy > h2:first-child, .prose-policy > h3:first-child { margin-top: 0; }
.prose-policy > *:last-child { margin-bottom: 0; }