:root {
  --color-bg: 248 250 252;
  --color-border: 255 255 255;
  --color-box: 255 255 255;
  --box-border: 226 232 240;
  --box-sd: 148 163 184 / 0.18;

  /* Core surfaces */
  --surface-base: 255 255 255;
  --surface-elevated: 248 250 252;
  --surface-muted: 241 245 249;
  --stroke: 203 213 225;
  --ink-strong: 15 23 42;
  --ink-muted: 71 85 105;

  /* Section system (Version B) */
  --section-base: 248 250 252;
  --section-alt: 241 245 249;
  --section-alt-border: 226 232 240;
  --section-emphasis-from: 16 42 67;
  --section-emphasis-to: 12 33 54;
  --section-emphasis-border: 72 99 126;

  --heading-1: 23 37 84;
  --heading-2: 31 41 55;
  --heading-3: 71 85 105;
}

.dark {
  --color-bg: 6 11 23;
  --color-box: 15 23 42;
  --box-border: 148 163 184 / 0.2;
  --box-sd: transparent;

  --surface-base: 15 23 42;
  --surface-elevated: 21 32 56;
  --surface-muted: 10 18 34;
  --stroke: 71 85 105;
  --ink-strong: 241 245 249;
  --ink-muted: 203 213 225;

  --section-base: 6 11 23;
  --section-alt: 10 18 34;
  --section-alt-border: 37 52 78;
  --section-emphasis-from: 17 43 68;
  --section-emphasis-to: 11 30 49;
  --section-emphasis-border: 78 104 130;

  --heading-1: 255 255 255;
  --heading-2: 226 232 240;
  --heading-3: 148 163 184;
}

html {
  scroll-behavior: smooth;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex !important;
}

.section-surface-base {
  background:
    radial-gradient(circle at 8% 12%, rgb(241 196 74 / 0.08), transparent 34%),
    radial-gradient(circle at 90% 86%, rgb(125 211 252 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(var(--section-base)), rgb(255 255 255));
}

.section-surface-alt {
  background:
    radial-gradient(circle at 12% 8%, rgb(255 255 255 / 0.5), transparent 34%),
    radial-gradient(circle at 86% 80%, rgb(241 196 74 / 0.08), transparent 40%),
    linear-gradient(180deg, rgb(var(--section-alt)), rgb(248 250 252));
  border-top: 1px solid rgb(var(--section-alt-border) / 0.65);
  border-bottom: 1px solid rgb(var(--section-alt-border) / 0.65);
}

.dark .section-surface-base {
  background:
    radial-gradient(circle at 8% 12%, rgb(241 196 74 / 0.16), transparent 36%),
    radial-gradient(circle at 90% 86%, rgb(59 130 246 / 0.14), transparent 40%),
    linear-gradient(180deg, rgb(6 11 23), rgb(8 14 27));
}

.dark .section-surface-alt {
  background:
    radial-gradient(circle at 10% 10%, rgb(241 196 74 / 0.1), transparent 36%),
    radial-gradient(circle at 86% 84%, rgb(30 64 175 / 0.18), transparent 42%),
    linear-gradient(180deg, rgb(10 18 34), rgb(8 15 29));
}

.section-surface-emphasis {
  background: linear-gradient(140deg, rgb(var(--section-emphasis-from)), rgb(var(--section-emphasis-to)));
  border-top: 1px solid rgb(var(--section-emphasis-border) / 0.5);
  border-bottom: 1px solid rgb(var(--section-emphasis-border) / 0.5);
}

.section-surface-emphasis .glass-panel {
  background: rgb(255 255 255 / 0.09);
  border-color: rgb(255 255 255 / 0.25);
}

.dark .section-surface-emphasis .glass-panel {
  background: rgb(15 23 42 / 0.3);
  border-color: rgb(148 163 184 / 0.28);
}

.glass,
.glass-panel,
.glass-card,
.glass-surface,
.glass-nav {
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.7);
}

.dark .glass,
.dark .glass-panel,
.dark .glass-card,
.dark .glass-surface,
.dark .glass-nav {
  background: rgb(15 23 42 / 0.7);
  border-color: rgb(148 163 184 / 0.2);
}

.glass-panel {
  box-shadow: 0 12px 30px -20px rgb(15 23 42 / 0.3);
}

.glass-card {
  box-shadow: 0 14px 34px -24px rgb(15 23 42 / 0.35);
}

.glass-surface {
  box-shadow: 0 10px 26px -22px rgb(15 23 42 / 0.3);
}

.dark .glass-card,
.dark .glass-panel,
.dark .glass-surface {
  box-shadow: 0 18px 36px -26px rgb(2 6 23 / 0.65);
}

.premium-gold-glass-card {
  position: relative;
  border-color: rgb(212 175 55 / 0.3) !important;
  background:
    radial-gradient(circle at 11% 10%, rgb(241 196 74 / 0.2), transparent 42%),
    radial-gradient(circle at 90% 88%, rgb(125 211 252 / 0.12), transparent 46%),
    linear-gradient(145deg, rgb(255 255 255 / 0.88), rgb(255 250 238 / 0.75)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.86),
    0 16px 34px -24px rgb(166 124 0 / 0.34),
    0 0 0 1px rgb(212 175 55 / 0.08) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.premium-gold-glass-card:hover {
  border-color: rgb(212 175 55 / 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.92),
    0 20px 40px -24px rgb(166 124 0 / 0.42),
    0 0 0 1px rgb(212 175 55 / 0.2),
    0 0 28px -16px rgb(241 196 74 / 0.52) !important;
}

.dark .premium-gold-glass-card {
  border-color: rgb(243 199 92 / 0.34) !important;
  background:
    radial-gradient(circle at 12% 10%, rgb(241 196 74 / 0.2), transparent 44%),
    radial-gradient(circle at 88% 88%, rgb(59 130 246 / 0.16), transparent 48%),
    linear-gradient(145deg, rgb(48 37 21 / 0.74), rgb(18 27 45 / 0.66)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 244 211 / 0.2),
    0 20px 38px -26px rgb(2 6 23 / 0.74),
    0 0 0 1px rgb(243 199 92 / 0.14) !important;
}

.dark .premium-gold-glass-card:hover {
  border-color: rgb(243 199 92 / 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 244 211 / 0.3),
    0 22px 40px -24px rgb(2 6 23 / 0.78),
    0 0 0 1px rgb(243 199 92 / 0.22),
    0 0 30px -16px rgb(243 199 92 / 0.34) !important;
}

.glass-nav {
  border-bottom-color: rgb(148 163 184 / 0.26);
  box-shadow: 0 8px 26px -22px rgb(15 23 42 / 0.35);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.glass-nav.is-scrolled {
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 14px 32px -26px rgb(15 23 42 / 0.45);
}

.dark .glass-nav.is-scrolled {
  background: rgb(9 14 27 / 0.9);
  border-bottom-color: rgb(148 163 184 / 0.25);
  box-shadow: 0 16px 34px -26px rgb(2 6 23 / 0.72);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-panel,
  .glass-card,
  .glass-surface,
  .glass-nav {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .glass-nav.is-scrolled {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

/* =============================================
   SITE ENTRY LOADER
   ============================================= */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none !important;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 30% 16%, rgb(241 196 74 / 0.18), transparent 38%),
    radial-gradient(circle at 75% 85%, rgb(255 255 255 / 0.05), transparent 42%),
    radial-gradient(circle at 35% 20%, rgb(34 44 59 / 0.86), rgb(10 16 26 / 0.96));
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}

.site-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.14), transparent 55%);
  opacity: 0;
  animation: loaderSweep 1.8s ease-out 1 both;
}

.site-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

.site-loader.is-closing .site-loader-brand {
  transform: translateY(0) scale(1.14);
}

.site-loader.is-closing .site-loader-logo {
  transform: scale(1.16);
}

.site-loader.is-closing .site-loader-subtitle {
  transform: translateY(-2px) scale(1.07);
  letter-spacing: 0.26em;
}

.site-loader-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-loader-brand {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 760px);
  transform-origin: center;
  transform: translateY(10px) scale(0.93);
  opacity: 0;
  animation: siteLoaderReveal 900ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.site-loader-logo {
  width: min(100%, clamp(460px, 72vw, 980px));
  height: auto;
  filter: drop-shadow(0 20px 55px rgb(0 0 0 / 0.55));
  animation: logoDrift 3.9s ease-in-out infinite;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-loader-subtitle {
  margin-top: 0.4rem;
  font-size: clamp(1.9rem, 4.8vw, 4.8rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.96);
  font-weight: 800;
  line-height: 1.02;
  text-wrap: balance;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 760ms cubic-bezier(0.32, 1.2, 0.64, 1) forwards;
  animation-delay: 240ms;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 620ms;
}

.site-loader-mark {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  position: relative;
  background:
    linear-gradient(135deg, rgb(241 196 74 / 0.24), rgb(255 255 255 / 0.05));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 12px 30px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.site-loader-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.42), transparent 58%);
  opacity: 0.4;
}

.site-loader-star {
  --size: 0.8rem;
  width: 0;
  height: 0;
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: calc(var(--size) * 1.6) solid #f1c44a;
  transform: rotate(-18deg) translateY(-1px);
  position: relative;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.35));
}

.site-loader-star::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--size));
  top: calc(var(--size) * 0.45);
  width: 0;
  height: 0;
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: calc(var(--size) * 1.6) solid #b77f21;
}

.site-root {
  opacity: 0;
  filter: blur(8px) brightness(0.4);
  transform-origin: top center;
  transform: perspective(900px) rotateX(78deg) scaleY(0.02) scale(1.02);
}

.site-root.is-visible {
  animation: tvPowerOn 900ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes tvPowerOn {
  0% {
    opacity: 0;
    filter: blur(12px) brightness(0.35);
    transform: perspective(900px) rotateX(78deg) scaleY(0.02) scale(1.02);
  }
  35% {
    opacity: 0.85;
    filter: blur(10px) brightness(1.15);
    transform: perspective(900px) rotateX(16deg) scaleY(0.34) scale(1.03);
  }
  65% {
    opacity: 0.95;
    filter: blur(6px) brightness(0.95);
    transform: perspective(900px) rotateX(-7deg) scaleY(1.06) scale(0.99);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: perspective(900px) rotateX(0deg) scaleY(1) scale(1);
  }
}

@keyframes siteLoaderReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoDrift {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes loaderSweep {
  from {
    opacity: 0.25;
    transform: translateY(18px) scale(1.01);
  }
  to {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* =============================================
   SCROLL-TRIGGERED ANIMATION SYSTEM
   ============================================= */

[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

[data-animate="fadeInUp"] {
  transform: translateY(30px);
}

[data-animate="fadeIn"] {
  transform: none;
}

[data-animate="fadeInLeft"] {
  transform: translateX(-40px);
}

[data-animate="fadeInRight"] {
  transform: translateX(40px);
}

[data-animate="scaleIn"] {
  transform: scale(0.92);
}

/* =============================================
   TRUST SECTION ANIMATIONS (CINEMATIC GLASS)
   ============================================= */

.trust-cinema-shell {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 10% 22%, rgb(241 196 74 / 0.1), transparent 32%),
    radial-gradient(circle at 90% 24%, rgb(30 64 175 / 0.08), transparent 35%),
    radial-gradient(circle at 50% 110%, rgb(15 23 42 / 0.38), transparent 55%);
}

.trust-cinema-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
  animation: trustOrbFloat 16s ease-in-out infinite;
  opacity: 0.36;
  mix-blend-mode: screen;
}

.trust-cinema-orb-a {
  width: 420px;
  height: 420px;
  left: -120px;
  top: -90px;
  background: radial-gradient(circle, rgba(241, 196, 74, 0.52), transparent 72%);
  animation-delay: -2.5s;
}

.trust-cinema-orb-b {
  width: 360px;
  height: 360px;
  right: -100px;
  bottom: -130px;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.26), transparent 75%);
  animation-duration: 18s;
  animation-delay: -7.8s;
}

.trust-cinema-orb-c {
  width: 220px;
  height: 220px;
  left: 52%;
  top: 35%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 70%);
  animation-duration: 15s;
  animation-direction: reverse;
  animation-delay: -12s;
}

.trust-cinema-panel {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02) 40%, rgb(15 23 42 / 0.1));
  border: 1px solid rgb(255 255 255 / 0.22);
  position: relative;
  overflow: hidden;
}

.dark .trust-cinema-panel {
  background:
    linear-gradient(145deg, rgb(15 23 42 / 0.42), rgb(10 18 34 / 0.24));
  border: 1px solid rgb(148 163 184 / 0.34);
}

.trust-cinema-panel-glow {
  background:
    radial-gradient(circle at 18% 12%, rgb(241 196 74 / 0.12), transparent 52%),
    radial-gradient(circle at 82% 90%, rgb(59 130 246 / 0.16), transparent 53%);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: trustPanelGlow 8.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.trust-cinema-panel-sheen {
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 0.22), transparent);
  transform: translateX(-160%);
  opacity: 0;
  animation: trustPanelSheen 6.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.5s;
}

.trust-cinema-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.trust-cinema-badge {
  border-width: 1px;
  animation: trustBadgePulse 4s ease-in-out infinite;
}

.trust-stat {
  text-shadow: 0 12px 35px rgb(0 0 0 / 0.42);
}

.trust-meter-card {
  will-change: transform, filter;
  animation: trustCardFloat 6.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  animation-delay: var(--float-delay, 0s);
}

.trust-meter-card:hover {
  animation-play-state: paused;
  transform: translateY(-7px) scale(1.035) !important;
  border-color: rgba(241, 196, 74, 0.9);
  box-shadow: 0 26px 54px -30px rgba(241, 196, 74, 0.45);
}

.trust-meter-sheen {
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-150%);
  animation: trustSheen 5.5s cubic-bezier(0.32, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--float-delay, 0s) + 0.9s);
}

[data-animate].trust-meter-card {
  transform: translateY(30px);
}

[data-animate].trust-meter-card.is-visible {
  animation-name: trustCardFloat;
}

@keyframes trustOrbFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(0, -18px, 0) scale(1.07);
  }
  66% {
    transform: translate3d(0, 12px, 0) scale(0.96);
  }
}

@keyframes trustPanelGlow {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08) translateY(-10px);
    opacity: 0.84;
  }
}

@keyframes trustPanelSheen {
  0% {
    transform: translateX(-160%);
    opacity: 0;
  }
  18% {
    opacity: 0.3;
  }
  52% {
    opacity: 0.24;
  }
  86% {
    opacity: 0;
    transform: translateX(160%);
  }
  100% {
    opacity: 0;
    transform: translateX(160%);
  }
}

@keyframes trustBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(241 196 74 / 0);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 7px rgb(241 196 74 / 0.08);
    transform: translateY(-1px);
  }
}

@keyframes trustCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(2px);
  }
}

@keyframes trustSheen {
  0% {
    transform: translateX(-180%);
    opacity: 0;
  }
  18% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.45;
  }
  82% {
    opacity: 0;
  }
  100% {
    transform: translateX(180%);
    opacity: 0;
  }
}

/* =============================================
   TRUSTED BRANDS LOGOS
   ============================================= */

#trusted-brands .trusted-heading-block {
  position: relative;
}

#trusted-brands .trusted-label--hero {
  border-color: rgb(212 175 55 / 0.42) !important;
  background: linear-gradient(145deg, rgb(255 247 224 / 0.82), rgb(255 236 182 / 0.58));
  color: #8a6312 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 10px 24px -18px rgb(166 124 0 / 0.4);
}

#trusted-brands .trusted-main-title {
  color: transparent !important;
  background-image: linear-gradient(102deg, #8f5a00 0%, #d4af37 26%, #f7d774 46%, #fff2c7 50%, #d4af37 64%, #a67c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 220% auto;
  letter-spacing: -0.01em;
  line-height: 1.14;
  text-shadow: 0 8px 24px rgb(166 124 0 / 0.2);
  animation: trustedGoldFlow 6.4s ease-in-out infinite;
}

#trusted-brands .trusted-subcopy {
  color: rgb(51 65 85 / 0.95) !important;
}

#trusted-brands .trusted-brands-panel {
  position: relative;
  border: 1px solid rgb(212 175 55 / 0.28);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.74), rgb(255 255 255 / 0.46));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    0 18px 36px -24px rgb(15 23 42 / 0.24),
    0 0 0 1px rgb(212 175 55 / 0.08);
  backdrop-filter: blur(14px) saturate(155%);
  isolation: isolate;
}

#trusted-brands .trusted-panel-glow {
  background:
    radial-gradient(circle at 8% 12%, rgb(241 196 74 / 0.3), transparent 38%),
    radial-gradient(circle at 92% 16%, rgb(125 211 252 / 0.24), transparent 40%),
    radial-gradient(circle at 86% 88%, rgb(217 119 6 / 0.2), transparent 44%);
  filter: blur(26px);
  opacity: 0.6;
  z-index: 0;
  animation: trustedPanelPulse 7.8s ease-in-out infinite;
}

#trusted-brands .trusted-panel-sheen {
  background: linear-gradient(118deg, transparent 22%, rgb(255 255 255 / 0.4) 50%, transparent 78%);
  transform: translateX(-135%);
  opacity: 0.35;
  z-index: 0;
  animation: trustedSheenSweep 8.8s ease-in-out infinite;
}

#trusted-brands {
  scroll-margin-top: 8.7rem;
}

#trusted-brands .trusted-brand-grid {
  position: relative;
}

#trusted-brands .trusted-logo-cell {
  min-height: 94px;
  transition: transform 220ms ease;
}

#trusted-brands .trusted-logo-cell:hover {
  transform: translateY(-2px);
}

#trusted-brands .trusted-partner-logo {
  filter: grayscale(1) brightness(0.07) contrast(1.55);
  opacity: 1;
  transition: transform 240ms ease, filter 240ms ease;
}

#trusted-brands .trusted-logo-cell:hover .trusted-partner-logo {
  transform: scale(1.02);
}

#trusted-brands .trusted-partner-logo--lg {
  max-width: 130px;
}

#trusted-brands .trusted-partner-logo--loblaws {
  max-width: 152px;
}

#trusted-brands .trusted-partner-logo--rogers {
  max-width: 160px;
}

#trusted-brands .trusted-partner-logo--tim {
  max-width: 170px;
}

#trusted-brands .trusted-partner-logo--staples {
  max-width: 160px;
}

@media (max-width: 640px) {
  #trusted-brands .trusted-heading-block {
    max-width: 94%;
  }

  #trusted-brands .trusted-label--hero {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    padding: 0.3rem 0.7rem;
  }

  #trusted-brands .trusted-main-title {
    font-size: 1.55rem;
    line-height: 1.22;
  }

  #trusted-brands .trusted-subcopy {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  #trusted-brands .trusted-logo-cell {
    min-height: 70px;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
  }

  #trusted-brands .trusted-partner-logo,
  #trusted-brands .trusted-partner-logo--loblaws,
  #trusted-brands .trusted-partner-logo--rogers,
  #trusted-brands .trusted-partner-logo--tim,
  #trusted-brands .trusted-partner-logo--staples,
  #trusted-brands .trusted-partner-logo--lg {
    max-width: 106px;
  }

  #trusted-brands .trusted-partner-logo--tim {
    max-width: 126px;
  }
}

.dark #trusted-brands .trusted-label--hero {
  border-color: rgb(243 199 92 / 0.5) !important;
  background: linear-gradient(145deg, rgb(120 82 16 / 0.45), rgb(60 42 9 / 0.36));
  color: #f7d77b !important;
}

.dark #trusted-brands .trusted-main-title {
  background-image: linear-gradient(102deg, #b8891e 0%, #f1c44a 34%, #ffe7a8 52%, #f1c44a 68%, #b8891e 100%);
  text-shadow: 0 10px 26px rgb(241 196 74 / 0.22);
}

.dark #trusted-brands .trusted-subcopy {
  color: rgb(226 232 240 / 0.94) !important;
}

.dark #trusted-brands .trusted-brands-panel {
  border-color: rgb(243 199 92 / 0.46);
  background: linear-gradient(145deg, rgb(86 68 35 / 0.74), rgb(48 37 20 / 0.68));
  box-shadow:
    inset 0 1px 0 rgb(255 243 207 / 0.32),
    0 20px 40px -24px rgb(2 6 23 / 0.56),
    0 0 0 1px rgb(243 199 92 / 0.2),
    0 0 34px -18px rgb(241 196 74 / 0.34);
  backdrop-filter: blur(16px) saturate(175%) brightness(1.08);
}

.dark #trusted-brands .trusted-panel-glow {
  opacity: 0.78;
  filter: blur(24px);
}

.dark #trusted-brands .trusted-panel-sheen {
  background: linear-gradient(118deg, transparent 24%, rgb(255 225 142 / 0.32) 52%, transparent 80%);
}

.dark #trusted-brands .trusted-partner-logo {
  filter: grayscale(1) invert(1) brightness(1.18) contrast(1.2) drop-shadow(0 0 10px rgb(255 227 150 / 0.22));
  opacity: 0.98;
}

@keyframes trustedGoldFlow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes trustedPanelPulse {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.03);
  }
}

@keyframes trustedSheenSweep {
  0%,
  100% {
    transform: translateX(-138%);
    opacity: 0;
  }
  18% {
    opacity: 0.34;
  }
  50% {
    transform: translateX(138%);
    opacity: 0.38;
  }
  82% {
    opacity: 0;
  }
}

#trusted-brands .trusted-brand-item {
  background: linear-gradient(140deg, rgb(255 255 255 / 0.96), rgb(249 250 252 / 0.96));
  border-color: rgb(15 23 42 / 0.18);
  box-shadow: 0 12px 24px -22px rgb(15 23 42 / 0.28);
}

#trusted-brands .trusted-brand-item:hover {
  transform: translateY(-3px);
  border-color: rgb(15 23 42 / 0.42);
  box-shadow: 0 18px 36px -28px rgb(15 23 42 / 0.35);
}

#trusted-brands .trusted-brand-item::after {
  background: radial-gradient(circle at 20% 0%, rgb(15 23 42 / 0.08), transparent 46%);
}

.trusted-label {
  display: inline-flex;
  margin: 0 auto;
  padding: 0.34rem 0.82rem;
  border: 1px solid rgb(241 196 74 / 0.35);
  border-radius: 999px;
  color: #b98f1f;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dark .trusted-label {
  color: #f3c75c;
  border-color: rgb(243 199 92 / 0.4);
}

.trusted-brand-layout {
  display: grid;
  gap: 0.9rem;
}

.trusted-brand-row {
  --cols: 2;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .trusted-brand-row {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
}

.trusted-brand-item {
  position: relative;
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 0.8rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: linear-gradient(140deg, rgb(255 255 255 / 0.58), rgb(241 245 249 / 0.6));
  box-shadow: 0 12px 28px -24px rgb(15 23 42 / 0.38);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.trusted-brand-item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  background: radial-gradient(circle at 20% 0%, rgb(15 23 42 / 0.08), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.trusted-brand-item:hover {
  transform: translateY(-4px);
  border-color: rgb(241 196 74 / 0.45);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / 0.44);
}

.trusted-brand-item:hover::after {
  opacity: 1;
}

.trusted-brand-logo {
  width: 100%;
  max-width: 180px;
  height: 40px;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.2) contrast(1.08) brightness(1.06);
  opacity: 1;
  transition: opacity 220ms ease;
}

.dark .trusted-brand-item {
  background: linear-gradient(140deg, rgb(15 23 42 / 0.56), rgb(10 18 34 / 0.42));
  border-color: rgb(148 163 184 / 0.2);
}

.dark .trusted-brand-item::after {
  background: radial-gradient(circle at 20% 0%, rgb(241 196 74 / 0.12), transparent 42%);
}


/* =============================================
   HERO PAGE-LOAD ANIMATIONS
   ============================================= */

.hero-shell {
  min-height: min(84svh, 920px);
}

.hero-content-wrap {
  padding-top: calc(var(--main-nav-height, 116px) + clamp(0.9rem, 1.7vw, 1.35rem));
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.hero-ambient {
  background:
    radial-gradient(circle at 24% 16%, rgba(241, 196, 74, 0.12), transparent 42%),
    radial-gradient(circle at 80% 86%, rgba(15, 23, 42, 0.09), transparent 44%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.75), rgba(248, 250, 252, 0.92));
  isolation: isolate;
}

.dark .hero-ambient {
  background:
    radial-gradient(circle at 24% 16%, rgba(241, 196, 74, 0.18), transparent 42%),
    radial-gradient(circle at 82% 84%, rgba(59, 131, 246, 0.1), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(9, 14, 27, 0.94));
}

.hero-ambient-glow-1,
.hero-ambient-glow-2 {
  position: absolute;
  border-radius: 999px;
  filter: blur(32px);
  opacity: 0.55;
}

.hero-ambient-glow-1 {
  width: min(44vw, 680px);
  height: min(44vw, 680px);
  left: clamp(-12rem, -10vw, -5rem);
  top: -7rem;
  background: radial-gradient(circle, rgba(241, 196, 74, 0.36), transparent 70%);
}

.hero-ambient-glow-2 {
  width: min(38vw, 560px);
  height: min(38vw, 560px);
  right: -10rem;
  bottom: -8rem;
  background: radial-gradient(circle, rgba(59, 131, 246, 0.3), transparent 72%);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f2747;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgb(15 23 42 / 0.12);
  border-radius: 999px;
  padding: 0.52rem 0.85rem;
}

.dark .hero-kicker {
  color: rgb(226 232 240);
  border-color: rgb(226 232 240 / 0.18);
}

.hero-title {
  text-wrap: balance;
  letter-spacing: -0.028em;
  line-height: 1.03;
  color: rgb(var(--heading-1));
  text-transform: none;
  text-rendering: optimizeLegibility;
}

.hero-title-line {
  display: inline-block;
}

.hero-title-accent {
  --accent-start: #d4a017;
  --accent-mid: #f2b544;
  --accent-end: #9f7b2a;
  color: transparent;
  background-image: linear-gradient(120deg, var(--accent-start), var(--accent-mid) 50%, var(--accent-end));
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

.hero-title-main {
  color: rgb(var(--heading-1));
  letter-spacing: -0.025em;
}

.hero-copy-panel {
  position: relative;
}

.hero-description {
  max-width: 34rem;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  font-size: clamp(1.03rem, 0.96rem + 0.35vw, 1.14rem);
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgb(var(--ink-muted));
}

.dark .hero-description {
  color: rgb(var(--ink-muted));
}

@media (min-width: 768px) {
  .hero-description {
    margin-left: 0;
    margin-right: 0;
  }
}

.hero-cta-button {
  border-radius: 999px;
  min-height: 3.15rem;
  padding-inline: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.58rem;
  margin-top: 1.45rem;
}

.hero-highlight {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(212 175 55 / 0.34);
  color: #0f172a;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.88), rgb(255 247 226 / 0.74));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.86),
    0 10px 20px -16px rgb(15 23 42 / 0.3);
  backdrop-filter: blur(8px);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-highlight:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.92),
    0 14px 24px -16px rgb(166 124 0 / 0.34);
}

.dark .hero-highlight {
  color: #f8fafc;
  border-color: rgb(243 199 92 / 0.38);
  background: linear-gradient(145deg, rgb(71 52 18 / 0.56), rgb(25 36 57 / 0.56));
  box-shadow:
    inset 0 1px 0 rgb(255 243 207 / 0.2),
    0 10px 24px -18px rgb(2 6 23 / 0.6);
}

@media (min-width: 768px) {
  .hero-highlights {
    justify-content: flex-start;
  }
}

.hero-arrow {
  transition: transform 200ms ease;
}

a:hover .hero-arrow {
  transform: translate(3px, -2px);
}

.hero-video-shell {
  width: min(100%, 680px);
}

.hero-video-frame {
  position: absolute;
  inset: -0.95rem;
  border-radius: 1.8rem;
  background: linear-gradient(152deg, rgb(241 196 74 / 0.38), rgb(255 255 255 / 0.18), rgb(15 23 42 / 0.2));
  filter: blur(0.2px);
  opacity: 0.72;
}

.hero-video-glow {
  position: absolute;
  inset: -1.8rem;
  border-radius: 2.2rem;
  background: radial-gradient(circle at 35% 24%, rgb(241 196 74 / 0.35), transparent 56%);
  filter: blur(34px);
  opacity: 0.45;
  animation: heroVideoPulse 6.2s ease-in-out infinite;
}

.hero-video-card {
  position: relative;
  aspect-ratio: 1/1;
  border: 1px solid rgb(15 23 42 / 0.14);
  box-shadow: 0 24px 70px -46px rgb(15 23 42 / 0.45);
  overflow: hidden;
  background: #0b0f17;
}

.hero-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.03), rgba(2, 6, 23, 0.08)),
    radial-gradient(140% 140% at 50% 52%, transparent 60%, rgba(2, 6, 23, 0.16) 100%);
}

.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: contrast(1.03) saturate(1.02) brightness(1);
  z-index: 1;
}

@keyframes heroVideoPulse {
  0%, 100% { transform: scale(1); opacity: 0.38; }
  50% { transform: scale(1.05); opacity: 0.54; }
}

.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(30 41 59 / 0.82);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dark .hero-scroll-hint {
  color: rgb(203 213 225 / 0.85);
}

.hero-scroll-icon {
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  animation: scrollBounce 2.1s ease-in-out infinite;
}

.hero-scroll-icon::after {
  content: "";
  width: 0.2rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  opacity: 0;
  animation: heroFadeInUp 820ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-delay-1 { animation-delay: 120ms; }
.hero-delay-2 { animation-delay: 320ms; }
.hero-delay-3 { animation-delay: 540ms; }
.hero-delay-4 { animation-delay: 760ms; }
.hero-delay-5 { animation-delay: 980ms; }

/* =============================================
   HERO VIDEO SECTION
   ============================================= */

/* Subtle grain texture */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); }
  70% { transform: translate(9%, 4%); }
  90% { transform: translate(-1%, 7%); }
}

.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}

/* Glow pulse behind video */
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
}

.hero-glow {
  animation: glowPulse 4s ease-in-out infinite;
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

.scroll-line {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* =============================================
   HOVER EFFECTS
   ============================================= */

.hover-lift {
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.dark .hover-lift:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.btn-hover {
  transition: transform 150ms ease, box-shadow 300ms ease;
}
.btn-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-hover:active {
  transform: translateY(0);
}

.focus-glow:focus-within {
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.2);
  border-color: #D4A017;
}

/* =============================================
   GRADIENT TEXT SHIMMER
   ============================================= */

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.gradient-shimmer {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* =============================================
   FAQ SMOOTH EXPAND
   ============================================= */

details .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

details[open] .faq-content {
  grid-template-rows: 1fr;
}

details .faq-content > div {
  overflow: hidden;
}

/* =============================================
   TOUCH DEVICE SUPPORT
   ============================================= */

@media (hover: none) {
  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-animate {
    opacity: 1 !important;
    animation: none !important;
  }
  .gradient-shimmer {
    animation: none !important;
  }
  .hero-grain {
    animation: none !important;
  }
  .hero-glow {
    animation: none !important;
  }
  .scroll-line {
    animation: none !important;
  }

  .trust-meter-card,
  .trust-meter-sheen {
    animation: none !important;
  }

  .site-loader {
    display: none !important;
  }

  .site-root {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}