/* ==========================================================================
   ACCUECO FEATURE 30A.3C-R3 — CURTAIN RAISER VISUAL LAYER

   Restores the full-viewport loading curtain used by the existing
   #accuecoPageLoader markup.

   Keep this block ABOVE the Cinematic Hero CSS.
   ========================================================================== */

.accueco-home .accueco-page-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;

  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  padding:
    calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));

  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(0, 200, 83, 0.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #061712 0%,
      #0a1f1a 58%,
      #071a14 100%
    );

  color: #f4fbf7;
  text-align: center;
  text-shadow: none !important;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;

  /*
    CSS fail-safe:
    the curtain cannot permanently trap the visitor even if JavaScript
    or a secondary page asset fails unexpectedly.
  */
  animation:
    accueco-loader-failsafe-hide 0.01s linear 5s forwards;
}

.accueco-home .accueco-page-loader.is-hidden {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.accueco-home .accueco-page-loader[hidden] {
  display: none !important;
}

/* Central ring-and-mark assembly */

.accueco-page-loader__visual {
  position: relative;

  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;
}

/* Rotating green-and-gold ring */

.accueco-page-loader__ring {
  position: absolute;
  inset: 0;

  display: block;

  border: 3px solid rgba(255, 255, 255, 0.09);
  border-top-color: #00c853;
  border-right-color: rgba(212, 175, 55, 0.76);
  border-radius: 999px;

  box-shadow:
    0 0 28px rgba(0, 200, 83, 0.20),
    inset 0 0 22px rgba(0, 200, 83, 0.05);

  animation:
    accueco-loader-spin 0.95s linear infinite;

  will-change: transform;
}

/* Central Accueco “e” */

.accueco-page-loader__mark {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border-radius: 999px;

  background: rgba(0, 200, 83, 0.10);
  color: #7cf4a9;

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;

  text-shadow: none !important;

  box-shadow:
    0 0 0 1px rgba(0, 200, 83, 0.16),
    inset 0 0 20px rgba(0, 200, 83, 0.08);
}

/* Loading message */

.accueco-page-loader__copy {
  margin: 0;
  max-width: 28ch;

  color: rgba(238, 248, 242, 0.76);

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;

  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-shadow: none !important;
}

/* Loader animations */

@keyframes accueco-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes accueco-loader-failsafe-hide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Mobile refinement */

@media (max-width: 520px) {
  .accueco-page-loader__visual {
    width: 72px;
    height: 72px;
  }

  .accueco-page-loader__mark {
    width: 46px;
    height: 46px;
    font-size: 1.75rem;
  }

  .accueco-page-loader__copy {
    font-size: 0.70rem;
    letter-spacing: 0.11em;
  }
}

/* Accessibility: reduced-motion preference */

@media (prefers-reduced-motion: reduce) {
  .accueco-home .accueco-page-loader {
    transition: none !important;
  }

  .accueco-page-loader__ring {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}






/* ==========================================================================
   ACCUECO FEATURE 30A.3 — CINEMATIC HERO ENGINE
   Layered Vancouver background, atmospheric particles, hero choreography
   and motion-safe responsive presentation.
   ========================================================================== */

.accueco-cinematic-hero {
  --accueco-hero-parallax: 0px;

  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;

  min-height: calc(100svh - 66px);
  box-sizing: border-box;
  overflow: hidden;

  /*
    The existing body has 10px horizontal padding.
    These negative margins allow the cinematic hero to reach both edges.
  */
  margin:
    66px
    -10px
    0;

  padding:
    clamp(96px, 12vh, 150px)
    clamp(18px, 5vw, 64px)
    clamp(92px, 12vh, 140px);

  background: #071a13 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff;
}

/*
  Gentle lower transition into the next homepage section.
*/
.accueco-cinematic-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 24%;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(7, 26, 19, 0.45) 54%,
      #071a13 100%
    );
}


/* ==========================================================================
   CINEMATIC BACKGROUND
   The parent receives JavaScript parallax movement.
   Its pseudo-element receives the independent Ken Burns animation.
   ========================================================================== */

.accueco-hero-bg {
  position: absolute;
  inset: -9% -5%;
  z-index: -5;
  pointer-events: none;

  transform:
    translate3d(
      0,
      var(--accueco-hero-parallax),
      0
    );

  will-change: transform;
}

.accueco-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    url("/assets/images/hero/vancouver-skyline.jpg")
    center 54% / cover
    no-repeat;

  filter:
    brightness(0.73)
    saturate(1.12)
    contrast(1.06);

  transform: scale(1.08);
  transform-origin: center center;
  will-change: transform;

  animation:
    accuecoHeroBreath
    22s
    ease-in-out
    infinite
    alternate;
}


/* ==========================================================================
   CINEMATIC OVERLAY
   Preserves skyline detail while maintaining strong text contrast.
   ========================================================================== */

.accueco-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(7, 42, 27, 0.02) 0%,
      rgba(7, 30, 21, 0.18) 38%,
      rgba(3, 18, 13, 0.58) 82%
    ),
    linear-gradient(
      180deg,
      rgba(3, 18, 13, 0.78) 0%,
      rgba(3, 18, 13, 0.24) 31%,
      rgba(3, 18, 13, 0.42) 63%,
      rgba(3, 18, 13, 0.88) 100%
    );
}

.accueco-hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(1, 12, 8, 0.34),
      transparent 24%,
      transparent 76%,
      rgba(1, 12, 8, 0.34)
    );

  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.28);
}


/* ==========================================================================
   PARTICLE FIELD
   JavaScript will populate this container with atmospheric embers.
   ========================================================================== */

.accueco-hero-particles {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.accueco-hero-particle {
  --accueco-particle-size: 3px;
  --accueco-particle-drift: 0px;
  --accueco-particle-opacity: 0.7;
  --accueco-particle-duration: 14s;
  --accueco-particle-delay: 0s;
  --accueco-particle-colour: rgba(79, 255, 147, 0.92);

  position: absolute;
  bottom: -26px;

  width: var(--accueco-particle-size);
  height: var(--accueco-particle-size);

  border-radius: 999px;
  background: var(--accueco-particle-colour);

  opacity: 0;
  pointer-events: none;

  box-shadow:
    0 0 7px var(--accueco-particle-colour),
    0 0 16px rgba(0, 200, 83, 0.22);

  will-change: transform, opacity;

  animation:
    accuecoHeroParticleRise
    var(--accueco-particle-duration)
    linear
    var(--accueco-particle-delay)
    infinite;
}


/* ==========================================================================
   FOREGROUND CONTENT
   ========================================================================== */

.accueco-hero-content {
  position: relative;
  z-index: 2;

  width: min(100%, 1080px);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.accueco-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: fit-content;
  margin: 0 auto clamp(22px, 3vw, 34px);
  padding: 9px 17px;

  border:
    1px solid
    rgba(139, 255, 183, 0.25);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 53, 35, 0.68),
      rgba(5, 31, 22, 0.46)
    );

  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);

  color: #d8f8e5;

  font-size: clamp(0.68rem, 1.5vw, 0.82rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 0 18px rgba(0, 200, 83, 0.07);

  text-shadow: none !important;
}

.accueco-live-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;

  border-radius: 50%;
  background: #5cf09d;

  box-shadow:
    0 0 0 5px rgba(92, 240, 157, 0.1),
    0 0 16px rgba(92, 240, 157, 0.88);

  animation:
    accuecoHeroLivePulse
    2.1s
    ease-in-out
    infinite;
}


/* Main CMS-controlled hero heading */

.accueco-cinematic-hero h2 {
  width: min(100%, 1040px);

  margin:
    0
    auto
    clamp(20px, 3vw, 30px);

  color: #f4fbf7;

  font-size:
    clamp(
      1.9rem,
      4.8vw,
      4.25rem
    );

  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.035em;

  text-wrap: balance;

  text-shadow:
    0 5px 22px rgba(0, 0, 0, 0.76),
    0 1px 2px rgba(0, 0, 0, 0.96) !important;
}

/*
  The first CMS span currently carries the prominent Accueco/Vancouver line.
*/
.accueco-cinematic-hero h2 > span {
  display: inline-block;

  margin-bottom: clamp(12px, 2vw, 22px);

  color: #ffc700 !important;

  font-size:
    clamp(
      3.1rem,
      9.2vw,
      7rem
    ) !important;

  font-weight: 950;
  line-height: 0.88;
  letter-spacing: 0.035em;
  text-transform: uppercase;

  text-shadow:
    0 5px 26px rgba(0, 0, 0, 0.86),
    0 0 34px rgba(255, 199, 0, 0.18) !important;
}

.accueco-cinematic-hero .accueco-hero-lead {
  width: min(100%, 720px);

  margin:
    0
    auto
    clamp(22px, 3vw, 32px);

  color: rgba(240, 248, 243, 0.91);

  font-size:
    clamp(
      1rem,
      2.2vw,
      1.28rem
    );

  line-height: 1.72;
  text-wrap: balance;

  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.82) !important;
}


/* ==========================================================================
   HERO FEATURE PILLS
   ========================================================================== */

.accueco-cinematic-hero .horizontal-list {
  width: min(100%, 760px);

  margin:
    0
    auto
    clamp(22px, 3vw, 34px);

  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  list-style: none;
}

.accueco-cinematic-hero .horizontal-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;
  padding: 8px 14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 999px;

  background:
    rgba(5, 35, 23, 0.48);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(244, 251, 247, 0.94);

  font-size:
    clamp(
      0.72rem,
      1.5vw,
      0.88rem
    );

  font-weight: 700;
  line-height: 1.25;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.22);

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.82) !important;
}

.accueco-cinematic-hero .horizontal-list li::after {
  content: none !important;
}


/* ==========================================================================
   PRIMARY HERO CTA
   ========================================================================== */

.accueco-cinematic-hero .accueco-hero-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 50px;
  margin: 0 auto clamp(34px, 5vw, 52px);
  padding: 13px 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(127, 255, 177, 0.36);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #08753a,
      #00a94f
    ) !important;

  color: #ffffff;

  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-decoration: none;

  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.36),
    0 9px 24px rgba(0, 200, 83, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.62) !important;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.accueco-cinematic-hero .accueco-hero-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 255, 255, 0.28) 46%,
      transparent 70%
    );

  transform: translateX(-130%);
  transition: transform 600ms ease;
}

.accueco-cinematic-hero .accueco-hero-cta:hover {
  transform: translateY(-3px);

  filter: brightness(1.07);

  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.43),
    0 12px 32px rgba(0, 200, 83, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.accueco-cinematic-hero .accueco-hero-cta:hover::before {
  transform: translateX(130%);
}

.accueco-cinematic-hero .accueco-hero-cta:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 5px;
}


/* ==========================================================================
   HERO SERVICE ICONS
   ========================================================================== */

.accueco-cinematic-hero .hero-icons {
  width: min(100%, 780px);

  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(76px, 1fr)
    );

  gap: 11px;
}

.accueco-cinematic-hero .hero-icons > div {
  width: auto;
  min-width: 0;
  min-height: 102px;

  padding: 13px 8px 11px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 17px;

  background:
    linear-gradient(
      155deg,
      rgba(12, 52, 36, 0.54),
      rgba(4, 27, 19, 0.38)
    );

  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 18px rgba(0, 200, 83, 0.035);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.accueco-cinematic-hero .hero-icons > div:hover {
  transform: translateY(-5px);

  border-color:
    rgba(255, 199, 0, 0.34);

  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(0, 200, 83, 0.09);
}

.accueco-cinematic-hero .hero-icons img {
  width: 43px;
  height: 43px;
  margin: 0 auto 9px;

  object-fit: contain;

  filter:
    brightness(0)
    invert(1)
    drop-shadow(
      0 4px 10px
      rgba(0, 0, 0, 0.44)
    );
}

.accueco-cinematic-hero .hero-icons span {
  margin: 0 !important;

  color: rgba(245, 251, 247, 0.92) !important;

  font-size: 0.66rem !important;
  font-weight: 700;
  line-height: 1.3;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.78) !important;
}


/* ==========================================================================
   STAGGERED HERO ENTRANCES
   The JavaScript phase will arm and start these animations.
   Without JavaScript, content stays visible.
   ========================================================================== */

.accueco-cinematic-hero .accueco-hero-item {
  opacity: 1;
  transform: none;
}

.accueco-cinematic-hero.is-hero-armed
.accueco-hero-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.accueco-cinematic-hero.is-hero-live
.accueco-hero-item {
  animation:
    accuecoHeroReveal
    850ms
    cubic-bezier(0.16, 1, 0.3, 1)
    var(--accueco-delay, 0ms)
    both;
}


/* ==========================================================================
   SCROLL CUE
   ========================================================================== */

.accueco-hero-scroll-cue {
  position: absolute;
  bottom: clamp(22px, 4vh, 38px);
  left: 50%;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;

  color: rgba(232, 244, 237, 0.68);

  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  transform: translateX(-50%);
  pointer-events: none;
  text-shadow: none !important;
}

.accueco-hero-scroll-mouse {
  position: relative;

  width: 23px;
  height: 37px;

  border:
    1.5px solid
    rgba(255, 255, 255, 0.58);

  border-radius: 999px;
}

.accueco-hero-scroll-mouse::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;

  width: 3px;
  height: 7px;

  border-radius: 99px;
  background: #5cf09d;

  transform: translateX(-50%);

  box-shadow:
    0 0 8px rgba(92, 240, 157, 0.7);

  animation:
    accuecoHeroScrollDot
    1.85s
    ease-in-out
    infinite;
}


/* ==========================================================================
   ANIMATION DEFINITIONS
   ========================================================================== */

@keyframes accuecoHeroBreath {
  0% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1.155);
  }
}

@keyframes accuecoHeroParticleRise {
  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        18px,
        0
      )
      scale(0.55);
  }

  12% {
    opacity:
      var(
        --accueco-particle-opacity
      );
  }

  76% {
    opacity:
      calc(
        var(
          --accueco-particle-opacity
        ) * 0.72
      );
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--accueco-particle-drift),
        -112vh,
        0
      )
      scale(1.5);
  }
}

@keyframes accuecoHeroReveal {
  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        28px,
        0
      );

    filter: blur(5px);
  }

  55% {
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes accuecoHeroLivePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.32);
  }
}

@keyframes accuecoHeroScrollDot {
  0% {
    opacity: 0;
    transform:
      translate3d(
        -50%,
        0,
        0
      );
  }

  22% {
    opacity: 1;
  }

  75% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        -50%,
        15px,
        0
      );
  }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {
  .accueco-cinematic-hero {
    min-height:
      calc(
        100svh - 66px
      );

    padding:
      92px
      20px
      108px;
  }

  .accueco-cinematic-hero .hero-icons {
    width: min(100%, 620px);

    grid-template-columns:
      repeat(
        3,
        minmax(82px, 1fr)
      );
  }

  .accueco-cinematic-hero .hero-icons > div {
    min-height: 94px;
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 560px) {
  .accueco-cinematic-hero {
    min-height: 790px;

    padding:
      72px
      16px
      96px;
  }

  .accueco-hero-bg {
    inset: -7% -18%;
  }

  .accueco-hero-bg::before {
    background-position:
      58% center;
  }

  .accueco-cinematic-hero h2 {
    font-size:
      clamp(
        1.72rem,
        8vw,
        2.45rem
      );

    line-height: 1.08;
  }

  .accueco-cinematic-hero h2 > span {
    font-size:
      clamp(
        2.85rem,
        15vw,
        4.5rem
      ) !important;

    line-height: 0.92;
  }

  .accueco-cinematic-hero
  .accueco-hero-lead {
    font-size: 0.98rem;
    line-height: 1.62;
  }

  .accueco-cinematic-hero
  .horizontal-list {
    gap: 8px;
  }

  .accueco-cinematic-hero
  .horizontal-list li {
    min-height: 35px;
    padding: 7px 11px;
    font-size: 0.69rem;
  }

  .accueco-cinematic-hero
  .accueco-hero-cta {
    width: min(100%, 290px);
    margin-bottom: 34px;
  }

  .accueco-cinematic-hero
  .hero-icons {
    grid-template-columns:
      repeat(
        3,
        minmax(72px, 1fr)
      );

    gap: 8px;
  }

  .accueco-cinematic-hero
  .hero-icons > div {
    min-height: 88px;
    padding: 11px 5px 9px;
    border-radius: 14px;
  }

  .accueco-cinematic-hero
  .hero-icons img {
    width: 38px;
    height: 38px;
    margin-bottom: 7px;
  }

  .accueco-cinematic-hero
  .hero-icons span {
    font-size: 0.59rem !important;
  }

  .accueco-hero-scroll-cue {
    bottom: 19px;
  }
}


/* ==========================================================================
   REDUCED-MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .accueco-hero-bg {
    transform: none !important;
  }

  .accueco-hero-bg::before {
    animation: none !important;
    transform: scale(1.08);
  }

  .accueco-hero-particle {
    display: none !important;
    animation: none !important;
  }

  .accueco-cinematic-hero.is-hero-armed
  .accueco-hero-item,
  .accueco-cinematic-hero.is-hero-live
  .accueco-hero-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .accueco-live-dot,
  .accueco-hero-scroll-mouse::after {
    animation: none !important;
  }

  .accueco-cinematic-hero
  .accueco-hero-cta,
  .accueco-cinematic-hero
  .hero-icons > div {
    transition: none !important;
  }
}


/* ==========================================================================
   ACCUECO FEATURE 30A.3E-R1 — HORIZONTAL ALIGNMENT CORRECTION

   Restores true full-viewport hero width where the legacy body has
   10px horizontal padding, and makes the mobile CTA width include
   its padding and borders.
   ========================================================================== */

.accueco-home .accueco-cinematic-hero {
  width: calc(100% + 20px);
  max-width: none;

  margin-left: -10px;
  margin-right: -10px;
}

.accueco-home
.accueco-cinematic-hero
.accueco-hero-cta {
  box-sizing: border-box;

  align-self: center;

  max-width: 100%;

  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .accueco-home
  .accueco-cinematic-hero
  .accueco-hero-cta {
    width: min(100%, 290px);
  }
}

/* ==========================================================================
   ACCUECO FEATURE 30A.4A — HIGH-PERFORMANCE SCROLL-REVEAL FOUNDATION

   Provides progressive, directional entrances for homepage content.
   JavaScript activation will be installed separately in Step 30A.4B.

   The transform variables are intentionally composable so later tactile
   effects—such as 3D card tilt—can coexist with the reveal animation.
   ========================================================================== */

/*
  Base variables only.

  Nothing is hidden unless JavaScript successfully adds
  .accueco-scroll-reveals-active to the body.
*/
.accueco-scroll-reveal {
  --accueco-reveal-x: 0px;
  --accueco-reveal-y: 42px;
  --accueco-reveal-delay: 0ms;

  /*
    Reserved for the later tactile card-tilt engine.
  */
  --accueco-tilt-x: 0deg;
  --accueco-tilt-y: 0deg;
  --accueco-lift-y: 0px;
}

/* Directional starting positions */

.accueco-scroll-reveal--left {
  --accueco-reveal-x: -42px;
  --accueco-reveal-y: 0px;
}

.accueco-scroll-reveal--right {
  --accueco-reveal-x: 42px;
  --accueco-reveal-y: 0px;
}

.accueco-scroll-reveal--up {
  --accueco-reveal-x: 0px;
  --accueco-reveal-y: 42px;
}

/*
  Activated hidden state.

  This is deliberately dependent on a body activation class.
  Therefore, page content remains fully visible if JavaScript is unavailable.
*/

.accueco-home.accueco-scroll-reveals-active
.accueco-scroll-reveal {
  opacity: 0;

  transform:
    translate3d(
      var(--accueco-reveal-x),
      calc(
        var(--accueco-reveal-y) +
        var(--accueco-lift-y)
      ),
      0
    )
    perspective(1000px)
    rotateX(var(--accueco-tilt-x))
    rotateY(var(--accueco-tilt-y));

  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay:
    var(--accueco-reveal-delay);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change:
    opacity,
    transform;
}

/* Final revealed state */

.accueco-home.accueco-scroll-reveals-active
.accueco-scroll-reveal.is-revealed {
  --accueco-reveal-x: 0px;
  --accueco-reveal-y: 0px;

  opacity: 1;
}

/*
  Once an entrance has completed, JavaScript will add this class so the
  browser can release the temporary compositing hint.
*/

.accueco-home.accueco-scroll-reveals-active
.accueco-scroll-reveal.is-reveal-complete {
  will-change: auto;
}


/* ==========================================================================
   MOBILE MOTION REFINEMENT

   Smaller travel distances feel more controlled on narrow screens and avoid
   content appearing to enter from outside the physical phone display.
   ========================================================================== */

@media (max-width: 600px) {
  .accueco-scroll-reveal {
    --accueco-reveal-y: 28px;
  }

  .accueco-scroll-reveal--left {
    --accueco-reveal-x: -24px;
    --accueco-reveal-y: 0px;
  }

  .accueco-scroll-reveal--right {
    --accueco-reveal-x: 24px;
    --accueco-reveal-y: 0px;
  }

  .accueco-scroll-reveal--up {
    --accueco-reveal-x: 0px;
    --accueco-reveal-y: 28px;
  }
}


/* ==========================================================================
   REDUCED-MOTION ACCESSIBILITY

   Visitors requesting reduced motion receive immediately visible content
   without translations or delayed transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .accueco-home.accueco-scroll-reveals-active
  .accueco-scroll-reveal,

  .accueco-home.accueco-scroll-reveals-active
  .accueco-scroll-reveal.is-revealed {
    --accueco-reveal-x: 0px;
    --accueco-reveal-y: 0px;
    --accueco-lift-y: 0px;
    --accueco-tilt-x: 0deg;
    --accueco-tilt-y: 0deg;

    opacity: 1;
    transform: none;

    transition: none;
    transition-delay: 0ms;

    will-change: auto;
  }
}

/* ==========================================================================
   ACCUECO FEATURE 30A.5A — TACTILE 3D CARD-TILT CSS FOUNDATION

   Provides the visual layer for cursor-responsive 3D service cards.

   This block is deliberately dormant until Step 30A.5B adds:
   - body.accueco-card-tilt-active
   - .accueco-tilt-card
   - the temporary interaction-state classes

   The existing 30A.4A transform variables are reused so card tilt,
   vertical lift and completed scroll reveals remain fully composable.
   ========================================================================== */


/* --------------------------------------------------------------------------
   CARD-LOCAL VISUAL VARIABLES

   These values are harmless before JavaScript activation.
   -------------------------------------------------------------------------- */

.accueco-home .content-grid > .card {
  --accueco-tilt-glare-x: 50%;
  --accueco-tilt-glare-y: 50%;
  --accueco-tilt-glare-opacity: 0;
}


/* --------------------------------------------------------------------------
   FINE-POINTER TILT ENVIRONMENT

   Full spatial tilt is intentionally restricted to devices that genuinely
   have a precise hover-capable pointer. Phones and ordinary touchscreens
   retain their stable, non-tilting card presentation.
   -------------------------------------------------------------------------- */

@media
  (hover: hover)
  and (pointer: fine)
  and (prefers-reduced-motion: no-preference) {

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    transform-origin: center center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    border:
      1px solid
      rgba(255, 255, 255, 0.10);
  }


  /* ------------------------------------------------------------------------
     CURSOR-TRACKING LIGHT FIELD

     JavaScript will update the two position variables as the pointer moves.
     The radial field therefore follows the cursor across the card surface.
     ------------------------------------------------------------------------ */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card::before {
    content: "";

    position: absolute;
    inset: -1px;
    z-index: 1;

    border-radius: inherit;

    pointer-events: none;

    background:
      radial-gradient(
        circle
        at
        var(--accueco-tilt-glare-x)
        var(--accueco-tilt-glare-y),

        rgba(255, 255, 255, 0.28) 0%,
        rgba(92, 240, 157, 0.15) 18%,
        rgba(255, 199, 0, 0.09) 35%,
        transparent 64%
      );

    opacity:
      var(--accueco-tilt-glare-opacity);

    mix-blend-mode: screen;

    transition:
      opacity 180ms ease;
  }


  /*
    Keep real card content above the decorative light field.
    No transform is placed on the children, so existing CTA behaviour
    and future child interactions remain unaffected.
  */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card > * {
    position: relative;
    z-index: 2;
  }


  /* ------------------------------------------------------------------------
     ACTIVE TILT APPEARANCE

     The JavaScript runtime will add this class only after the card's
     scroll entrance has fully completed.
     ------------------------------------------------------------------------ */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card.is-tilt-engaged {
    --accueco-lift-y: -8px;
    --accueco-tilt-glare-opacity: 1;

    border-color:
      rgba(92, 240, 157, 0.36);

    box-shadow:
      0 27px 58px rgba(0, 0, 0, 0.42),
      0 0 32px rgba(0, 200, 83, 0.13),
      inset 0 0 25px rgba(0, 200, 83, 0.09);

    will-change: transform;
  }


  /* ------------------------------------------------------------------------
     LIVE POINTER TRACKING

     A compact transform transition prevents harsh frame-to-frame movement
     without making the card feel delayed or disconnected from the pointer.
     ------------------------------------------------------------------------ */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card.is-tilt-tracking {
    transition:
      transform 90ms linear,
      border-color 180ms ease,
      box-shadow 180ms ease;

    transition-delay: 0ms;
  }


  /* ------------------------------------------------------------------------
     PHYSICAL RETURN TO REST

     JavaScript will briefly add this state when the pointer leaves.
     The spring-like curve returns all tilt variables smoothly to zero.
     ------------------------------------------------------------------------ */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card.is-tilt-settling {
    transition:
      transform 440ms
        cubic-bezier(0.22, 1, 0.36, 1),

      border-color 320ms ease,
      box-shadow 380ms
        cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0ms;

    will-change: transform;
  }


  /* ------------------------------------------------------------------------
     KEYBOARD-FOCUS EQUIVALENT

     Keyboard visitors receive a controlled lift and highlight without
     needing pointer movement.
     ------------------------------------------------------------------------ */

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card:focus-within {
    --accueco-lift-y: -4px;
    --accueco-tilt-glare-opacity: 0.52;

    border-color:
      rgba(255, 199, 0, 0.42);

    box-shadow:
      0 20px 44px rgba(0, 0, 0, 0.36),
      0 0 25px rgba(255, 199, 0, 0.10),
      inset 0 0 22px rgba(0, 200, 83, 0.07);

    transition:
      transform 280ms
        cubic-bezier(0.22, 1, 0.36, 1),

      border-color 220ms ease,
      box-shadow 280ms ease;

    transition-delay: 0ms;
  }
}


/* --------------------------------------------------------------------------
   TOUCH AND COARSE-POINTER SAFETY

   Even if future code accidentally applies a tilt class on a touchscreen,
   physical tilt and glare remain disabled.
   -------------------------------------------------------------------------- */

@media
  (hover: none),
  (pointer: coarse) {

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card {
    --accueco-tilt-x: 0deg;
    --accueco-tilt-y: 0deg;
    --accueco-lift-y: 0px;
    --accueco-tilt-glare-opacity: 0;
  }

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card::before {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY

   Explicitly neutralizes every tactile motion variable and removes the
   cursor-following light field for reduced-motion visitors.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card {
    --accueco-tilt-x: 0deg !important;
    --accueco-tilt-y: 0deg !important;
    --accueco-lift-y: 0px !important;
    --accueco-tilt-glare-opacity: 0 !important;

    transition: none !important;

    will-change: auto !important;
  }

  .accueco-home.accueco-card-tilt-active
  .content-grid > .card.accueco-tilt-card::before {
    display: none !important;
  }
}



/* ==========================================================================
   ACCUECO FEATURE 30A.6A-R3 — SAGE DIGITAL AMBASSADOR VISUAL LAYER

   Production visual system for SAGE's flight state, introduction callout,
   accessible guide dialog and perched resting state.

   The entire layer is progressively enhanced. The trigger remains hidden
   until the 30A.6B runtime completes initialization.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ACCESSIBILITY UTILITY
   -------------------------------------------------------------------------- */

.accueco-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* --------------------------------------------------------------------------
   EXPERIENCE ROOT
   -------------------------------------------------------------------------- */

.accueco-home .accueco-sage-experience {
  --accueco-sage-x: 0px;
  --accueco-sage-y: 0px;
  --accueco-sage-angle: 0deg;
  --accueco-sage-scale: 1;

  /*
    Do not create a root stacking context here. SAGE and her callout are
    viewport-fixed descendants with their own z-index values. A positioned
    z-index: 0 root traps them beneath the later isolated cinematic hero.
  */
  position: static;
  z-index: auto;
}


/* --------------------------------------------------------------------------
   FLYING SAGE TRIGGER
   -------------------------------------------------------------------------- */

.accueco-home .accueco-sage-trigger {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9200;

  width: 116px;
  height: 88px;
  min-width: 72px;
  min-height: 58px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate3d(
      var(--accueco-sage-x),
      var(--accueco-sage-y),
      0
    )
    rotate(var(--accueco-sage-angle))
    scale(var(--accueco-sage-scale));

  transform-origin: center center;

  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 15px rgba(0, 200, 83, 0.24));

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    opacity 520ms ease,
    visibility 0s linear 520ms,
    filter 220ms ease;

  will-change: transform, opacity;
}

.accueco-home .accueco-sage-trigger[hidden] {
  display: none !important;
}

.accueco-home .accueco-sage-trigger.is-sage-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 520ms ease,
    filter 220ms ease;
}

.accueco-home .accueco-sage-trigger.is-sage-departing {
  pointer-events: none;

  transition:
    transform 760ms cubic-bezier(0.55, 0.06, 0.68, 0.19),
    opacity 680ms ease,
    filter 260ms ease;

  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 19px rgba(252, 211, 77, 0.24));
}

.accueco-home .accueco-sage-trigger:hover {
  filter:
    drop-shadow(0 15px 17px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 22px rgba(0, 200, 83, 0.46));
}

.accueco-home .accueco-sage-trigger:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 5px;
}

.accueco-sage-trigger__halo {
  position: absolute;
  inset: 14% 18%;
  z-index: -1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(92, 240, 157, 0.18) 0%,
      rgba(0, 200, 83, 0.08) 42%,
      transparent 72%
    );

  opacity: 0.72;
  filter: blur(6px);
  pointer-events: none;

  animation:
    accuecoSageHaloPulse
    2.8s
    ease-in-out
    infinite;
}

.accueco-sage-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.accueco-sage-wing,
.accueco-sage-perched__wing {
  transform-box: fill-box;
  transform-origin: center right;
  backface-visibility: hidden;
}

.accueco-sage-wing--right,
.accueco-sage-perched__wing--right {
  transform-origin: center left;
}

.accueco-sage-wing--left {
  animation:
    accuecoSageWingLeft
    180ms
    cubic-bezier(0.45, 0, 0.55, 1)
    infinite;
}

.accueco-sage-wing--right {
  animation:
    accuecoSageWingRight
    190ms
    cubic-bezier(0.45, 0, 0.55, 1)
    -52ms
    infinite;
}


/* --------------------------------------------------------------------------
   SAGE INTRODUCTION CALLOUT
   -------------------------------------------------------------------------- */

.accueco-home .accueco-sage-callout {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9201;

  width: min(244px, calc(100vw - 32px));
  min-height: 82px;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 7px;

  padding: 12px 10px 12px 14px;

  border:
    1px solid
    rgba(134, 255, 180, 0.28);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(0, 200, 83, 0.20),
      transparent 38%
    ),
    rgba(7, 29, 21, 0.94);

  color: #f4fbf7;

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.46),
    inset 0 0 20px rgba(0, 200, 83, 0.06);

  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate3d(0, 10px, 0)
    scale(0.97);

  transform-origin: center bottom;

  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 320ms;

  text-shadow: none !important;
}

.accueco-home .accueco-sage-callout[hidden] {
  display: none !important;
}

.accueco-home .accueco-sage-callout.is-sage-callout-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.accueco-sage-callout__message {
  min-width: 0;
  padding: 3px 4px 4px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-shadow: none !important;
  cursor: pointer;
}

.accueco-sage-callout__message strong,
.accueco-sage-callout__message span {
  display: block;
  text-shadow: none !important;
}

.accueco-sage-callout__message strong {
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 0.91rem;
  font-weight: 900;
  line-height: 1.25;
}

.accueco-sage-callout__message span {
  color: rgba(229, 244, 235, 0.79);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.45;
}

.accueco-sage-callout__message:focus-visible,
.accueco-sage-callout__dismiss:focus-visible {
  outline: 2px solid #ffc700;
  outline-offset: 2px;
  border-radius: 8px;
}

.accueco-sage-callout__dismiss {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.84);

  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: none !important;

  cursor: pointer;
}

.accueco-sage-callout__dismiss:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}


/* --------------------------------------------------------------------------
   SAGE GUIDE DIALOG
   -------------------------------------------------------------------------- */

.accueco-home .accueco-sage-dialog {
  width: min(610px, calc(100vw - 28px));
  max-width: 610px;
  max-height: min(760px, calc(100dvh - 28px));

  padding: 0;
  border:
    1px solid
    rgba(212, 175, 55, 0.26);

  border-radius: 28px;

  background: transparent;
  color: #f4fbf7;

  box-shadow: none;
  overflow: visible;
}

.accueco-home .accueco-sage-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.accueco-home .accueco-sage-dialog[open] {
  animation:
    accuecoSageDialogReveal
    460ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.accueco-sage-panel {
  position: relative;

  max-height: min(760px, calc(100dvh - 28px));
  overflow-y: auto;
  overscroll-behavior: contain;

  padding:
    clamp(26px, 5vw, 42px);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 11% 4%,
      rgba(0, 200, 83, 0.22),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 14%,
      rgba(255, 199, 0, 0.10),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(7, 30, 22, 0.985),
      rgba(9, 34, 26, 0.985)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.62),
    inset 0 0 28px rgba(0, 200, 83, 0.065);

  text-shadow: none !important;
}

.accueco-sage-panel__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;

  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;

  font-family: inherit;
  font-size: 1.65rem;
  line-height: 1;
  text-shadow: none !important;

  cursor: pointer;
}

.accueco-sage-panel__close:hover,
.accueco-sage-panel__close:focus-visible {
  background: rgba(0, 200, 83, 0.17);
  outline: 3px solid rgba(255, 199, 0, 0.72);
  outline-offset: 3px;
}

.accueco-sage-panel__header {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: start;
  gap: 18px;

  padding-right: 38px;
  margin-bottom: 27px;
}

.accueco-sage-perched {
  width: 76px;
  height: auto;
  overflow: visible;

  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 12px rgba(0, 200, 83, 0.24));
}

/*
  The dialog portrait remains stationary, but its wings stay energetically
  alive rather than switching to the former slow breathing cycle.
*/
.accueco-sage-perched__wing--left {
  animation:
    accuecoSageWingLeft
    236ms
    cubic-bezier(0.45, 0, 0.55, 1)
    infinite;
}

.accueco-sage-perched__wing--right {
  animation:
    accuecoSageWingRight
    248ms
    cubic-bezier(0.45, 0, 0.55, 1)
    -68ms
    infinite;
}

.accueco-sage-panel__eyebrow {
  margin: 0 0 7px;

  color: #77f2a4;

  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none !important;
}

.accueco-sage-panel h2 {
  margin: 0 0 9px;
  color: #ffffff;

  font-size:
    clamp(
      1.55rem,
      4.8vw,
      2.25rem
    );

  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: none !important;
}

#accuecoSageDialogDescription {
  margin: 0;
  max-width: 44ch;

  color: rgba(225, 239, 231, 0.72);

  font-size: 0.92rem;
  line-height: 1.6;
  text-shadow: none !important;
}

.accueco-sage-panel__actions {
  display: grid;
  gap: 12px;
}

.accueco-sage-action {
  min-height: 86px;

  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  gap: 13px;

  padding: 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.105);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.025)
    );

  color: #f5fbf7;
  text-decoration: none;
  text-shadow: none !important;

  box-shadow:
    inset 0 0 18px rgba(0, 200, 83, 0.025);

  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.accueco-sage-action:hover {
  transform: translateY(-2px);

  border-color:
    rgba(92, 240, 157, 0.34);

  background:
    linear-gradient(
      145deg,
      rgba(0, 200, 83, 0.125),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.23),
    inset 0 0 20px rgba(0, 200, 83, 0.045);
}

.accueco-sage-action:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 3px;
}

.accueco-sage-action__icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: rgba(0, 200, 83, 0.13);
  color: #77f2a4;

  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    inset 0 0 15px rgba(0, 200, 83, 0.08);

  text-shadow: none !important;
}

.accueco-sage-action strong,
.accueco-sage-action small {
  display: block;
  text-shadow: none !important;
}

.accueco-sage-action strong {
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.3;
}

.accueco-sage-action small {
  color: rgba(222, 237, 228, 0.68);
  font-size: 0.76rem;
  font-weight: 550;
  line-height: 1.45;
}

.accueco-sage-panel__note {
  margin: 19px 0 0;
  padding-top: 16px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.09);

  color: rgba(210, 224, 216, 0.57);

  font-size: 0.69rem;
  line-height: 1.5;
  text-align: center;
  text-shadow: none !important;
}


/* --------------------------------------------------------------------------
   SAGE ANIMATION DEFINITIONS
   -------------------------------------------------------------------------- */

@keyframes accuecoSageWingLeft {
  0%,
  100% {
    transform: rotateY(6deg) rotateZ(0deg);
  }

  50% {
    transform: rotateY(58deg) rotateZ(-2deg);
  }
}

@keyframes accuecoSageWingRight {
  0%,
  100% {
    transform: rotateY(-6deg) rotateZ(0deg);
  }

  50% {
    transform: rotateY(-58deg) rotateZ(2deg);
  }
}

@keyframes accuecoSageBreatheLeft {
  0%,
  100% {
    transform: rotateY(4deg);
  }

  50% {
    transform: rotateY(29deg);
  }
}

@keyframes accuecoSageBreatheRight {
  0%,
  100% {
    transform: rotateY(-4deg);
  }

  50% {
    transform: rotateY(-29deg);
  }
}

@keyframes accuecoSageHaloPulse {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.86;
    transform: scale(1.08);
  }
}

@keyframes accuecoSageDialogReveal {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 22px, 0)
      scale(0.975);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}


/* --------------------------------------------------------------------------
   MOBILE AND COARSE-POINTER REFINEMENT
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .accueco-home .accueco-sage-trigger {
    width: 88px;
    height: 68px;
  }

  .accueco-home .accueco-sage-callout {
    width: min(228px, calc(100vw - 24px));
    min-height: 76px;
  }

  .accueco-home .accueco-sage-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    border-radius: 23px;
  }

  .accueco-sage-panel {
    max-height: calc(100dvh - 18px);
    padding: 30px 18px 24px;
    border-radius: 23px;
  }

  .accueco-sage-panel__header {
    grid-template-columns: 58px 1fr;
    gap: 13px;
    padding-right: 30px;
  }

  .accueco-sage-perched {
    width: 58px;
  }

  .accueco-sage-panel h2 {
    font-size: 1.46rem;
  }

  .accueco-sage-action {
    min-height: 82px;
    padding: 14px;
  }
}

@media
  (hover: none),
  (pointer: coarse) {

  /*
    SAGE now uses the compact flight profile on touch/coarse-pointer devices.
    Native click activation remains the only activation path, while normal
    pan/zoom gestures remain available when a visitor begins a scroll nearby.
  */
  .accueco-home .accueco-sage-trigger {
    min-width: 88px;
    min-height: 68px;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .accueco-home .accueco-sage-trigger:hover {
    filter:
      drop-shadow(0 12px 14px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 15px rgba(0, 200, 83, 0.24));
  }

  .accueco-sage-action:hover {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   REDUCED-MOTION ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .accueco-home .accueco-sage-trigger,
  .accueco-home .accueco-sage-trigger.is-sage-visible,
  .accueco-home .accueco-sage-trigger.is-sage-departing,
  .accueco-home .accueco-sage-callout,
  .accueco-home .accueco-sage-callout.is-sage-callout-visible,
  .accueco-home .accueco-sage-dialog[open],
  .accueco-sage-action {
    transition: none !important;
    animation: none !important;
  }

  .accueco-sage-wing--left,
  .accueco-sage-wing--right,
  .accueco-sage-perched__wing--left,
  .accueco-sage-perched__wing--right,
  .accueco-sage-trigger__halo {
    animation: none !important;
  }

  .accueco-sage-wing--left,
  .accueco-sage-wing--right,
  .accueco-sage-perched__wing--left,
  .accueco-sage-perched__wing--right {
    transform: none !important;
  }

  .accueco-sage-trigger__halo {
    opacity: 0.55;
    transform: none;
  }

  .accueco-sage-action:hover {
    transform: none;
  }
}



/* ==========================================================================
   ACCUECO FEATURE 30A.6A-R4 — WHOLE-PAGE REDUCED-MOTION HARDENING

   Completes the homepage motion contract beyond SAGE, Scroll Reveal and
   tactile cards. The navigation shell, decorative hover movement, footer
   icon scaling and loader spinner become immediate/static when a visitor
   requests reduced motion. The functional loader fail-safe remains intact.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .accueco-home .global-header,
  .accueco-home .drawer,
  .accueco-home .drawer.open,
  .accueco-home .hamburger,
  .accueco-home .close-btn,
  .accueco-home .auth-widget .user-icon,
  .accueco-home .auth-link,
  .accueco-home .public-account-menu,
  .accueco-home .public-account-menu-item,
  .accueco-home .public-auth-dialog,
  .accueco-home .public-auth-panel,
  .accueco-home .public-auth-close,
  .accueco-home .public-auth-submit,
  .accueco-home .back-to-top,
  .accueco-home .back-to-top.is-visible,
  .accueco-home .social-icons a,
  .accueco-home .utility-bar .social-icons a,
  .accueco-home .accueco-cinematic-hero .accueco-hero-cta,
  .accueco-home .accueco-cinematic-hero .hero-icons > div {
    transition: none !important;
  }

  .accueco-home .auth-widget .user-icon:hover,
  .accueco-home .social-icons a:hover,
  .accueco-home .utility-bar .social-icons a:hover,
  .accueco-home .accueco-cinematic-hero .accueco-hero-cta:hover,
  .accueco-home .accueco-cinematic-hero .hero-icons > div:hover {
    transform: none !important;
  }

  /* Disable the CTA light sweep rather than allowing an instant flash. */
  .accueco-home .accueco-cinematic-hero .accueco-hero-cta::before {
    display: none !important;
    transition: none !important;
  }

  /* The video is paused by the 30A.6M-R1 motion governor. */
  .accueco-home .hero-video video[data-accueco-motion-video] {
    transform: none !important;
  }
}


/* ==========================================================================
   ACCUECO FEATURE 30A.7A-R1 — MARCHING ANT COLONY VISUAL LAYER

   A fixed, clipped discovery layer for ten procedurally generated SVG ants.
   The JavaScript runtime owns translation and physics; CSS owns anatomy,
   biological tripod gait, hover/focus feedback, smoke material and responsive
   touch targets. The layer sits below SAGE and the fixed navigation shell.
   ========================================================================== */


/* --------------------------------------------------------------------------
   VIEWPORT-SAFE COLONY ROOT
   -------------------------------------------------------------------------- */

.accueco-home .accueco-ant-colony {
  position: fixed;
  inset: 0;
  z-index: 9100;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;
  pointer-events: none;

  contain: layout style paint;
  isolation: isolate;

  text-shadow: none !important;
}

.accueco-home .accueco-ant-colony[hidden] {
  display: none !important;
}

.accueco-ant-colony__track,
.accueco-ant-colony__effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   INDIVIDUAL DISCOVERY ANT
   -------------------------------------------------------------------------- */

.accueco-ant {
  --accueco-ant-x: 0px;
  --accueco-ant-y: -80px;
  --accueco-ant-rotation: 0deg;
  --accueco-ant-scale: 1;
  --accueco-ant-opacity: 1;

  position: absolute;
  top: 0;
  left: 0;

  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;

  opacity: var(--accueco-ant-opacity);

  transform:
    translate3d(
      var(--accueco-ant-x),
      var(--accueco-ant-y),
      0
    )
    rotate(var(--accueco-ant-rotation))
    scale(var(--accueco-ant-scale));

  transform-origin: center center;

  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Preserve vertical page scrolling when a gesture begins on an ant. */
  touch-action: pan-y pinch-zoom;

  will-change: transform, opacity;
}

.accueco-ant[aria-hidden="true"] {
  pointer-events: none;
}

.accueco-ant:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 2px;

  background: rgba(0, 200, 83, 0.10);

  box-shadow:
    0 0 0 6px rgba(0, 200, 83, 0.08),
    0 0 26px rgba(0, 200, 83, 0.42);
}

@media (hover: hover) and (pointer: fine) {
  .accueco-ant:hover {
    background: rgba(0, 200, 83, 0.075);

    filter:
      brightness(1.38)
      drop-shadow(0 0 9px rgba(0, 200, 83, 0.74));
  }
}

.accueco-ant.is-ant-dying {
  pointer-events: none;
  cursor: default;
}


/* --------------------------------------------------------------------------
   PROCEDURAL SVG ANATOMY AND BIOLOGICAL TRIPOD GAIT
   -------------------------------------------------------------------------- */

.accueco-ant__svg {
  width: 31px;
  height: 22px;
  overflow: visible;
  pointer-events: none;

  /* The SVG ant is drawn facing left; -90deg makes it face downward. */
  transform: rotate(-90deg) translateZ(0);
  transform-origin: center center;

  filter:
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 3px rgba(0, 200, 83, 0.20));

  animation:
    accuecoAntBodyBob
    280ms
    ease-in-out
    infinite;
}

.accueco-ant__leg {
  transform-box: view-box;
  backface-visibility: hidden;
}

.accueco-ant__leg--fl {
  transform-origin: 14px 12px;
  animation: accuecoAntSwingA 280ms ease-in-out infinite;
}

.accueco-ant__leg--fr {
  transform-origin: 14px 12px;
  animation: accuecoAntSwingB 280ms ease-in-out infinite;
}

.accueco-ant__leg--ml {
  transform-origin: 18px 12px;
  animation: accuecoAntSwingB 280ms ease-in-out infinite;
}

.accueco-ant__leg--mr {
  transform-origin: 18px 12px;
  animation: accuecoAntSwingA 280ms ease-in-out infinite;
}

.accueco-ant__leg--bl {
  transform-origin: 22px 12px;
  animation: accuecoAntSwingA 280ms ease-in-out infinite;
}

.accueco-ant__leg--br {
  transform-origin: 22px 12px;
  animation: accuecoAntSwingB 280ms ease-in-out infinite;
}

.accueco-ant-colony.is-colony-paused
.accueco-ant__svg,
.accueco-ant-colony.is-colony-paused
.accueco-ant__leg,
.accueco-ant.is-ant-dying
.accueco-ant__svg,
.accueco-ant.is-ant-dying
.accueco-ant__leg {
  animation-play-state: paused !important;
}


/* --------------------------------------------------------------------------
   VOLUMETRIC GREEN SMOKE
   -------------------------------------------------------------------------- */

.accueco-ant-smoke-particle {
  position: absolute;
  top: 0;
  left: 0;

  width: var(--accueco-smoke-size, 24px);
  height: var(--accueco-smoke-size, 24px);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 42% 38%,
      rgba(126, 255, 173, 0.92) 0%,
      rgba(0, 200, 83, 0.68) 34%,
      rgba(0, 200, 83, 0.27) 67%,
      transparent 100%
    );

  opacity: 0;
  filter: blur(5px);
  mix-blend-mode: screen;

  pointer-events: none;
  will-change: transform, opacity;
}


/* --------------------------------------------------------------------------
   SECRET ACCUECO SIGNAL TYPOGRAPHY
   -------------------------------------------------------------------------- */

.accueco-ant-signal {
  position: absolute;
  top: 0;
  left: 0;

  width: min(180px, calc(100vw - 48px));
  max-width: 180px;

  color: #62f49a;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  font-size: clamp(1.18rem, 2.2vw, 1.72rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-align: center;

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;

  text-shadow:
    0 0 10px rgba(0, 200, 83, 0.95),
    0 0 20px rgba(0, 200, 83, 0.64),
    0 0 32px rgba(0, 200, 83, 0.32) !important;

  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;

  will-change: transform, opacity, filter;
}


/* --------------------------------------------------------------------------
   ANIMATION DEFINITIONS
   -------------------------------------------------------------------------- */

@keyframes accuecoAntSwingA {
  0%,
  100% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(22deg);
  }
}

@keyframes accuecoAntSwingB {
  0%,
  100% {
    transform: rotate(22deg);
  }

  50% {
    transform: rotate(-22deg);
  }
}

@keyframes accuecoAntBodyBob {
  0%,
  100% {
    transform:
      rotate(-90deg)
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      rotate(-90deg)
      translate3d(0, -0.5px, 0);
  }
}


/* --------------------------------------------------------------------------
   COMPACT AND TOUCH-SCREEN REFINEMENT
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .accueco-ant {
    width: 46px;
    height: 46px;
  }

  .accueco-ant__svg {
    width: 29px;
    height: 21px;
  }

  .accueco-ant-signal {
    width: min(154px, calc(100vw - 36px));
    max-width: 154px;
    font-size: 1.12rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .accueco-ant:hover {
    background: transparent;
    filter: none;
  }

  .accueco-ant {
    min-width: 46px;
    min-height: 46px;
  }
}


/* --------------------------------------------------------------------------
   REDUCED-MOTION FAIL-SAFE

   The runtime suppresses the decorative colony entirely when reduced motion
   is requested. These rules are a second boundary if classes survive a live
   preference change or JavaScript interruption.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .accueco-ant__svg,
  .accueco-ant__leg {
    animation: none !important;
  }

  .accueco-ant,
  .accueco-ant-smoke-particle,
  .accueco-ant-signal {
    transition: none !important;
    animation: none !important;
  }
}



/* ==========================================================================
   ACCUECO FEATURE 30A.8A-R1 — PRECISION ENERGY CURSOR + MORPHING NAVIGATION

   A production-safe interpretation of the original two-part lerp cursor:
   - Native cursor remains untouched until a real desktop mouse is detected.
   - Dot follows immediately; energy ring follows with frame-rate-independent
     interpolation, velocity stretch and a restrained click pulse.
   - Interactive controls shift the ring from green to Accueco gold.
   - Text-entry controls and native modal dialogs automatically restore the
     browser cursor.
   - Touch, coarse pointers, forced colours and reduced motion retain the
     ordinary system cursor.
   - Existing aria-expanded state morphs the hamburger into an X without
     changing main.js or the drawer's focus management.
   ========================================================================== */


/* --------------------------------------------------------------------------
   MORPHING HAMBURGER
   -------------------------------------------------------------------------- */

.accueco-home .hamburger {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  margin: 0;
  margin-bottom: 0;
  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4fbf7;

  cursor: pointer;
  text-shadow: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.accueco-home .hamburger:hover {
  background: rgba(92, 240, 157, 0.10);
  color: #8affb2;
}

.accueco-home .hamburger:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 3px;
  background: rgba(255, 199, 0, 0.08);
}

.accueco-hamburger-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}

.accueco-hamburger-line {
  position: absolute;
  left: 0;

  width: 24px;
  height: 2.5px;

  border-radius: 999px;
  background: currentColor;

  transform-origin: center center;
  will-change: transform, opacity;

  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    width 220ms ease;
}

.accueco-hamburger-line--top {
  top: 0;
}

.accueco-hamburger-line--middle {
  top: 7.75px;
}

.accueco-hamburger-line--bottom {
  top: 15.5px;
}

.accueco-home .hamburger[aria-expanded="true"] {
  color: #ffc700;
  background: rgba(255, 199, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 199, 0, 0.18);
}

.accueco-home .hamburger[aria-expanded="true"]
.accueco-hamburger-line--top {
  transform: translate3d(0, 7.75px, 0) rotate(45deg);
}

.accueco-home .hamburger[aria-expanded="true"]
.accueco-hamburger-line--middle {
  width: 7px;
  opacity: 0;
  transform: translate3d(8.5px, 0, 0) scaleX(0.25);
}

.accueco-home .hamburger[aria-expanded="true"]
.accueco-hamburger-line--bottom {
  transform: translate3d(0, -7.75px, 0) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   CURSOR HOST AND MATERIAL
   -------------------------------------------------------------------------- */

.accueco-home .accueco-energy-cursor {
  position: fixed;
  inset: 0;
  z-index: 19990;

  overflow: visible;
  pointer-events: none;
  user-select: none;

  contain: layout style;
  isolation: isolate;

  opacity: 1;
  visibility: visible;
  text-shadow: none !important;
}

.accueco-home .accueco-energy-cursor[hidden] {
  display: none !important;
}

.accueco-energy-cursor__dot,
.accueco-energy-cursor__ring,
.accueco-energy-cursor__pulse {
  position: fixed;
  top: 0;
  left: 0;

  display: block;
  border-radius: 999px;
  pointer-events: none;

  opacity: 0;
  transform: translate3d(-120px, -120px, 0);
  transform-origin: center center;
}

.accueco-energy-cursor__dot {
  z-index: 3;

  width: 7px;
  height: 7px;

  background: #5cf09d;

  box-shadow:
    0 0 8px rgba(92, 240, 157, 0.98),
    0 0 18px rgba(0, 200, 83, 0.58);

  transition:
    width 130ms ease,
    height 130ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    opacity 100ms ease;
}

.accueco-energy-cursor__ring {
  z-index: 2;

  width: 38px;
  height: 38px;

  border: 1.5px solid rgba(92, 240, 157, 0.88);

  background:
    radial-gradient(
      circle,
      rgba(92, 240, 157, 0.055) 0%,
      rgba(0, 200, 83, 0.025) 48%,
      transparent 70%
    );

  box-shadow:
    0 0 14px rgba(92, 240, 157, 0.18),
    inset 0 0 13px rgba(0, 200, 83, 0.05);

  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 110ms ease;
}

.accueco-energy-cursor__ring::before,
.accueco-energy-cursor__ring::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.accueco-energy-cursor__ring::before {
  inset: 5px;
  border:
    1px solid
    rgba(92, 240, 157, 0.12);
}

.accueco-energy-cursor__ring::after {
  top: -2px;
  left: 50%;

  width: 7px;
  height: 3px;

  background: #8affb2;
  box-shadow: 0 0 8px rgba(92, 240, 157, 0.86);

  transform: translateX(-50%);
}

.accueco-energy-cursor__pulse {
  --accueco-cursor-pulse-x: -120px;
  --accueco-cursor-pulse-y: -120px;

  z-index: 1;

  width: 42px;
  height: 42px;

  border: 1.5px solid rgba(255, 199, 0, 0.88);
  box-shadow: 0 0 18px rgba(255, 199, 0, 0.25);

  transform:
    translate3d(
      var(--accueco-cursor-pulse-x),
      var(--accueco-cursor-pulse-y),
      0
    )
    translate(-50%, -50%)
    scale(0.72);
}

.accueco-energy-cursor.is-visible:not(.is-native-zone)
.accueco-energy-cursor__dot,
.accueco-energy-cursor.is-visible:not(.is-native-zone)
.accueco-energy-cursor__ring {
  opacity: 1;
}


/* Interactive energy state */

.accueco-energy-cursor.is-interactive
.accueco-energy-cursor__ring {
  width: 58px;
  height: 58px;

  border-color: rgba(255, 199, 0, 0.92);

  background:
    radial-gradient(
      circle,
      rgba(255, 199, 0, 0.10) 0%,
      rgba(255, 199, 0, 0.035) 54%,
      transparent 72%
    );

  box-shadow:
    0 0 20px rgba(255, 199, 0, 0.23),
    inset 0 0 18px rgba(255, 199, 0, 0.065);
}

.accueco-energy-cursor.is-interactive
.accueco-energy-cursor__ring::before {
  border-color: rgba(255, 199, 0, 0.17);
}

.accueco-energy-cursor.is-interactive
.accueco-energy-cursor__ring::after,
.accueco-energy-cursor.is-interactive
.accueco-energy-cursor__dot {
  background: #ffc700;
  box-shadow:
    0 0 9px rgba(255, 199, 0, 0.96),
    0 0 20px rgba(255, 199, 0, 0.38);
}


/* Press compression */

.accueco-energy-cursor.is-pressing
.accueco-energy-cursor__ring {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.92);
}

.accueco-energy-cursor.is-pressing
.accueco-energy-cursor__dot {
  width: 10px;
  height: 10px;
  background: #ffffff;
}


/* Native zones and top-layer dialogs intentionally restore the OS cursor. */

.accueco-energy-cursor.is-native-zone
.accueco-energy-cursor__dot,
.accueco-energy-cursor.is-native-zone
.accueco-energy-cursor__ring {
  opacity: 0;
}

.accueco-energy-cursor__pulse.is-pulsing {
  animation:
    accuecoEnergyCursorPulse
    460ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

@keyframes accuecoEnergyCursorPulse {
  0% {
    opacity: 0.78;
    filter: blur(0);

    transform:
      translate3d(
        var(--accueco-cursor-pulse-x),
        var(--accueco-cursor-pulse-y),
        0
      )
      translate(-50%, -50%)
      scale(0.72);
  }

  100% {
    opacity: 0;
    filter: blur(1.5px);

    transform:
      translate3d(
        var(--accueco-cursor-pulse-x),
        var(--accueco-cursor-pulse-y),
        0
      )
      translate(-50%, -50%)
      scale(2.15);
  }
}


/* --------------------------------------------------------------------------
   NATIVE-CURSOR POLICY

   cursor:none is applied only after the runtime sees a genuine mouse move.
   Text entry, modal top-layer content and explicit opt-out zones restore the
   browser cursor immediately.
   -------------------------------------------------------------------------- */

@media
  (hover: hover)
  and (pointer: fine)
  and (prefers-reduced-motion: no-preference) {

  .accueco-home.accueco-energy-cursor-active,
  .accueco-home.accueco-energy-cursor-active * {
    cursor: none !important;
  }

  .accueco-home.accueco-energy-cursor-native-mode,
  .accueco-home.accueco-energy-cursor-native-mode * {
    cursor: auto !important;
  }

  .accueco-home.accueco-energy-cursor-active input,
  .accueco-home.accueco-energy-cursor-active textarea,
  .accueco-home.accueco-energy-cursor-active [contenteditable="true"] {
    cursor: text !important;
  }

  .accueco-home.accueco-energy-cursor-active select,
  .accueco-home.accueco-energy-cursor-active option,
  .accueco-home.accueco-energy-cursor-active iframe,
  .accueco-home.accueco-energy-cursor-active [data-accueco-native-cursor] {
    cursor: auto !important;
  }
}


/* --------------------------------------------------------------------------
   ACCESSIBILITY AND INPUT-MODE FAIL-SAFES
   -------------------------------------------------------------------------- */

@media
  (hover: none),
  (pointer: coarse),
  (prefers-reduced-motion: reduce),
  (forced-colors: active) {

  .accueco-home .accueco-energy-cursor {
    display: none !important;
  }

  .accueco-home.accueco-energy-cursor-active,
  .accueco-home.accueco-energy-cursor-active * {
    cursor: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueco-home .hamburger,
  .accueco-hamburger-line {
    transition: none !important;
  }
}

@media print {
  .accueco-home .accueco-energy-cursor {
    display: none !important;
  }
}


/* ==========================================================================
   ACCUECO FEATURE 30A.9A-R1 — VERIFIED METRICS + CONVERSION STORY

   Proof-backed operating snapshot and a three-stage conversion narrative.
   The section remains fully readable without JavaScript. Runtime classes add
   counter motion and a restrained energy-current entrance only after the
   section reaches the viewport.
   ========================================================================== */

.accueco-home .accueco-proof-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: min(100%, 1200px);
  max-width: 1200px;
  scroll-margin-top: 88px;
  margin: clamp(38px, 7vw, 76px) auto 28px;
  padding: clamp(28px, 5vw, 62px);
  box-sizing: border-box;

  border: 1px solid rgba(126, 255, 176, 0.18);
  border-radius: clamp(24px, 3vw, 34px);

  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(0, 200, 83, 0.15),
      transparent 29%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 199, 0, 0.10),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      rgba(7, 31, 23, 0.98),
      rgba(5, 24, 18, 0.98)
    );

  color: #f3faf6;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.34),
    inset 0 0 44px rgba(0, 200, 83, 0.045);

  text-shadow: none !important;
}

.accueco-proof-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(92, 240, 157, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(92, 240, 157, 0.035) 1px,
      transparent 1px
    );

  background-size: 42px 42px;
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.72),
      transparent 82%
    );
}

.accueco-proof-story__ambient {
  position: absolute;
  top: -140px;
  right: -100px;
  z-index: -1;

  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(92, 240, 157, 0.14),
      rgba(0, 200, 83, 0.035) 44%,
      transparent 72%
    );

  filter: blur(7px);
}

.accueco-proof-story *,
.accueco-proof-story *::before,
.accueco-proof-story *::after {
  box-sizing: border-box;
  text-shadow: none !important;
}

.accueco-proof-story__header {
  width: min(100%, 850px);
  margin: 0 auto clamp(28px, 4vw, 42px);
  text-align: center;
}

.accueco-proof-story__eyebrow {
  margin: 0 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #87f2ae;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.accueco-proof-story__eyebrow-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #5cf09d;
  box-shadow:
    0 0 0 5px rgba(92, 240, 157, 0.09),
    0 0 14px rgba(92, 240, 157, 0.62);
}

.accueco-proof-story__header h2 {
  margin: 0 auto 16px;
  color: #f5fbf7;

  font-size: clamp(2rem, 4.8vw, 4.15rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.accueco-proof-story__intro {
  width: min(100%, 720px);
  margin: 0 auto;
  color: rgba(222, 238, 229, 0.78);
  font-size: clamp(0.98rem, 1.8vw, 1.14rem);
  line-height: 1.72;
  text-wrap: balance;
}

.accueco-proof-story__integrity {
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 9px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid rgba(255, 199, 0, 0.2);
  border-radius: 999px;
  background: rgba(255, 199, 0, 0.055);
  color: rgba(255, 237, 176, 0.88);

  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
  text-align: left;
}

.accueco-proof-story__integrity > span {
  color: #ffc700;
  font-weight: 950;
}

.accueco-proof-story__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 clamp(44px, 6vw, 68px);
}

.accueco-proof-story__metric {
  position: relative;
  overflow: hidden;

  min-width: 0;
  min-height: 252px;
  padding: 24px 20px 20px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 22px;
  background:
    linear-gradient(
      155deg,
      rgba(18, 62, 43, 0.68),
      rgba(6, 31, 22, 0.54)
    );

  box-shadow:
    0 17px 38px rgba(0, 0, 0, 0.24),
    inset 0 0 24px rgba(0, 200, 83, 0.035);

  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.accueco-proof-story__metric::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -58px;

  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(92, 240, 157, 0.13),
      transparent 68%
    );
}

.accueco-proof-story__value {
  margin: 0 0 12px;
  color: #ffc700;

  font-size: clamp(2.9rem, 5vw, 4.65rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums lining-nums;
}

.accueco-proof-story__metric h3 {
  margin: 0 0 10px;
  color: #f6fbf8;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}

.accueco-proof-story__metric > p:not(.accueco-proof-story__value) {
  margin: 0 0 20px;
  color: rgba(214, 232, 221, 0.7);
  font-size: 0.82rem;
  line-height: 1.58;
}

.accueco-proof-story__source {
  margin-top: auto;
  padding-top: 13px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;

  color: rgba(143, 241, 179, 0.74);
  font-size: 0.67rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.accueco-proof-story__source > span {
  color: #5cf09d;
  font-weight: 950;
}

.accueco-proof-story__journey-header {
  width: min(100%, 780px);
  margin: 0 auto 28px;
  text-align: center;
}

.accueco-proof-story__journey-header h3 {
  margin: 0 0 12px;
  color: #f5fbf7;
  font-size: clamp(1.55rem, 3.2vw, 2.65rem);
  font-weight: 880;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.accueco-proof-story__journey-header > p:last-child {
  margin: 0 auto;
  color: rgba(215, 232, 222, 0.72);
  font-size: 0.94rem;
  line-height: 1.65;
  text-wrap: balance;
}

.accueco-proof-story__journey {
  position: relative;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  list-style: none;
}

.accueco-proof-story__journey::before,
.accueco-proof-story__journey::after {
  content: "";
  position: absolute;
  top: 29px;
  right: 11%;
  left: 11%;
  height: 2px;
  z-index: 0;
  pointer-events: none;
}

.accueco-proof-story__journey::before {
  background: rgba(255, 255, 255, 0.08);
}

.accueco-proof-story__journey::after {
  background:
    linear-gradient(
      90deg,
      #5cf09d,
      #00c853 48%,
      #ffc700
    );
  box-shadow: 0 0 15px rgba(92, 240, 157, 0.28);
  transform: scaleX(1);
  transform-origin: left center;
}

.accueco-proof-story__journey > li {
  position: relative;
  z-index: 1;

  min-width: 0;
  padding: 0 10px;
  text-align: center;
}

.accueco-proof-story__step-number {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(92, 240, 157, 0.4);
  border-radius: 50%;
  background: #09261c;
  color: #8affb2;

  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;

  box-shadow:
    0 0 0 7px rgba(5, 29, 20, 0.96),
    0 0 25px rgba(0, 200, 83, 0.1);
}

.accueco-proof-story__journey h4 {
  margin: 0 0 9px;
  color: #f4fbf7;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}

.accueco-proof-story__journey p {
  margin: 0;
  color: rgba(210, 228, 218, 0.7);
  font-size: 0.82rem;
  line-height: 1.58;
}

.accueco-proof-story__actions {
  margin-top: clamp(32px, 5vw, 48px);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.accueco-proof-story__cta {
  min-height: 50px;
  padding: 13px 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.accueco-proof-story__cta--primary {
  border: 1px solid rgba(126, 255, 176, 0.34);
  background: linear-gradient(135deg, #08753a, #00a94f);
  color: #ffffff;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.3),
    0 8px 22px rgba(0, 200, 83, 0.17);
}

.accueco-proof-story__cta--secondary {
  border: 1px solid rgba(255, 199, 0, 0.28);
  background: rgba(255, 199, 0, 0.055);
  color: #ffe78f;
}

.accueco-proof-story__cta:focus-visible {
  outline: 3px solid #ffc700;
  outline-offset: 4px;
}

.accueco-proof-story__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Runtime choreography: content remains readable before and without JS. */

.accueco-proof-story[data-accueco-proof-runtime]
.accueco-proof-story__metric,
.accueco-proof-story[data-accueco-proof-runtime]
.accueco-proof-story__journey > li {
  opacity: 0.78;
  transform: translate3d(0, 14px, 0);
}

.accueco-proof-story[data-accueco-proof-runtime]
.accueco-proof-story__journey::after {
  transform: scaleX(0);
}

.accueco-proof-story.is-proof-live
.accueco-proof-story__metric,
.accueco-proof-story.is-proof-live
.accueco-proof-story__journey > li {
  animation:
    accuecoProofItemReveal
    760ms
    cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--accueco-proof-index, 0) * 90ms)
    both;
}

.accueco-proof-story.is-proof-live
.accueco-proof-story__journey::after {
  animation:
    accuecoProofCurrent
    1200ms
    cubic-bezier(0.22, 1, 0.36, 1)
    260ms
    both;
}

@keyframes accuecoProofItemReveal {
  from {
    opacity: 0.78;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes accuecoProofCurrent {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media
  (hover: hover)
  and (pointer: fine)
  and (prefers-reduced-motion: no-preference) {

  .accueco-proof-story__metric:hover {
    transform: translateY(-6px);
    border-color: rgba(92, 240, 157, 0.3);
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.31),
      0 0 26px rgba(0, 200, 83, 0.075),
      inset 0 0 24px rgba(0, 200, 83, 0.05);
  }

  .accueco-proof-story__cta:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 980px) {
  .accueco-proof-story__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accueco-proof-story__metric {
    min-height: 224px;
  }
}

@media (max-width: 700px) {
  .accueco-home .accueco-proof-story {
    padding: 28px 18px 32px;
    border-radius: 24px;
  }

  .accueco-proof-story__header {
    margin-bottom: 28px;
  }

  .accueco-proof-story__integrity {
    border-radius: 16px;
    align-items: flex-start;
  }

  .accueco-proof-story__metrics {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 42px;
  }

  .accueco-proof-story__metric {
    min-height: 0;
    padding: 22px 18px 18px;
  }

  .accueco-proof-story__journey {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .accueco-proof-story__journey::before,
  .accueco-proof-story__journey::after {
    top: 28px;
    right: auto;
    bottom: 28px;
    left: 28px;
    width: 2px;
    height: auto;
  }

  .accueco-proof-story__journey::after {
    transform: scaleY(1);
    transform-origin: center top;
  }

  .accueco-proof-story[data-accueco-proof-runtime]
  .accueco-proof-story__journey::after {
    transform: scaleY(0);
  }

  .accueco-proof-story.is-proof-live
  .accueco-proof-story__journey::after {
    animation: accueillecoProofCurrentVertical 1100ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
  }

  .accueco-proof-story__journey > li {
    padding: 0 0 0 78px;
    min-height: 76px;
    text-align: left;
  }

  .accueco-proof-story__step-number {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .accueco-proof-story__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .accueco-proof-story__cta {
    width: 100%;
  }
}

@keyframes accueillecoProofCurrentVertical {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueco-proof-story[data-accueco-proof-runtime]
  .accueco-proof-story__metric,
  .accueco-proof-story[data-accueco-proof-runtime]
  .accueco-proof-story__journey > li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .accueco-proof-story[data-accueco-proof-runtime]
  .accueco-proof-story__journey::after {
    transform: none !important;
    animation: none !important;
  }

  .accueco-proof-story__metric,
  .accueco-proof-story__cta {
    transition: none !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .accueco-home .accueco-proof-story,
  .accueco-proof-story__metric,
  .accueco-proof-story__step-number,
  .accueco-proof-story__cta {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }

  .accueco-proof-story::before,
  .accueco-proof-story__ambient,
  .accueco-proof-story__metric::after {
    display: none;
  }

  .accueco-proof-story__value,
  .accueco-proof-story__eyebrow,
  .accueco-proof-story__source,
  .accueco-proof-story__integrity,
  .accueco-proof-story__cta--secondary {
    color: LinkText;
  }
}

/* 30A.11B-R3 POLICY VISUAL MODULATION
   Fail-safe styles only. Real behavior is enforced by runtime hooks:
   SAGE.setPolicyCalloutSuppressed and AntColony.setExternalPauseReason. */

body.experience-policy-sage-suppressed .accueco-sage-callout {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.experience-policy-overlay .accueco-energy-cursor {
  opacity: 0.6;
}

body.experience-policy-crowded .accueco-hero-particles {
  opacity: 0.6;
}

/* Step 47A-R2: production-stack desktop hero containment and CTA sizing.
   The original hero span font-size uses !important; this matching scoped
   override is required to bound that winning declaration. */
.accueco-home .accueco-cinematic-hero {
  box-sizing: border-box;
  overflow-x: clip;
  padding-left: clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}

.accueco-home .accueco-cinematic-hero .accueco-hero-content {
  box-sizing: border-box;
  max-width: min(1120px, calc(100vw - 32px));
  width: 100%;
}

.accueco-home .accueco-cinematic-hero h2 {
  box-sizing: border-box;
  max-width: min(1040px, calc(100vw - 32px));
  width: 100%;
  font-size: clamp(2rem, 4.45vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  overflow-wrap: normal;
  word-break: normal;
}

.accueco-home .accueco-cinematic-hero h2 > span {
  max-width: 100%;
  font-size: clamp(3.05rem, 7.35vw, 6rem) !important;
  line-height: 1.18;
  letter-spacing: clamp(0.01em, 0.32vw, 0.028em);
  white-space: normal;
}

.accueco-home .accueco-cinematic-hero .accueco-hero-lead {
  box-sizing: border-box;
  max-width: min(760px, calc(100vw - 32px));
}

.accueco-home .accueco-cinematic-hero .accueco-lead-review-cta {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  max-height: 56px;
}

.accueco-home .hero-video.video-hero + .accueco-proof-story {
  margin-top: 34px;
}

.accueco-home #accuecoProofStory.accueco-proof-story {
  margin-top: 70px;
}

@media (max-width: 560px) {
  .accueco-home .accueco-cinematic-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .accueco-home .hero-video.video-hero + .accueco-proof-story {
    margin-top: 24px;
  }

  .accueco-home #accuecoProofStory.accueco-proof-story {
    margin-top: 56px;
  }
}