/* =========================================================
   MAPPLY VERSION 2.6
   COMPLETE STYLES.CSS REPLACEMENT
   ========================================================= */

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

   :root {
    --blue: #1a73e8;
    --blue-strong: #0b57d0;
    --blue-deep: #073b96;
    --blue-soft: #eaf3ff;
    --blue-pale: #f5f9ff;
  
    --green: #34a853;
    --green-strong: #188038;
    --green-soft: #eaf8ef;
  
    --yellow: #f9ab00;
    --yellow-strong: #e58b00;
    --yellow-soft: #fff7df;
  
    --red: #ea4335;
    --red-strong: #d93025;
    --red-soft: #fff0ee;
  
    --purple: #7e2ac3;
    --purple-strong: #5f18aa;
    --purple-soft: #f5ecff;
  
    --orange: #ff7a00;
    --orange-soft: #fff2e5;
  
    --teal: #159e9f;
    --teal-soft: #e7f8f7;
  
    --indigo: #4f46e5;
    --indigo-soft: #eef0ff;
  
    --ink: #071a3a;
    --ink-soft: #10264d;
    --text: #314463;
    --muted: #687893;
    --subtle: #8b98ab;
  
    --white: #ffffff;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-solid: #ffffff;
    --surface-soft: #f8fbff;
    --surface-blue: #f4f8ff;
  
    --line: #d8e6f7;
    --line-strong: #bdd4f3;
    --line-soft: #e9f0f9;
  
    --shadow-xs:
      0 4px 14px rgba(20, 55, 100, 0.06);
  
    --shadow-sm:
      0 10px 28px rgba(20, 55, 100, 0.09);
  
    --shadow-md:
      0 20px 52px rgba(20, 55, 100, 0.12);
  
    --shadow-lg:
      0 32px 80px rgba(20, 55, 100, 0.16);
  
    --shadow-blue:
      0 20px 45px rgba(26, 115, 232, 0.23);
  
    --shadow-green:
      0 20px 45px rgba(52, 168, 83, 0.2);
  
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;
  
    --page-width: 1460px;
    --header-height: 86px;
  
    --card-padding:
      clamp(28px, 4.5vw, 72px);
  
    --title-size:
      clamp(2.65rem, 4.7vw, 5.25rem);
  
    --section-title-size:
      clamp(2.1rem, 3.6vw, 4rem);
  
    --ease-standard:
      cubic-bezier(0.22, 0.8, 0.28, 1);
  
    --ease-spring:
      cubic-bezier(0.16, 1, 0.3, 1);
  
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --card-lift: 0px;
  
    --journey-x: 72px;
    --journey-y: 175px;
    --journey-scale: 1;
    --star-fill: 0%;
  }
  
  /* =========================================================
     02. RESET
     ========================================================= */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
    background: #f3f8ff;
  }
  
  body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background:
      radial-gradient(
        circle at 12% 8%,
        rgba(26, 115, 232, 0.08),
        transparent 28%
      ),
      radial-gradient(
        circle at 88% 20%,
        rgba(52, 168, 83, 0.055),
        transparent 25%
      ),
      linear-gradient(
        180deg,
        #f7fbff 0%,
        #f1f7ff 46%,
        #f7fbff 100%
      );
    font-family:
      Inter,
      ui-sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  body.nav-open {
    overflow: hidden;
  }
  
  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }
  
  img {
    height: auto;
  }
  
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  
  button {
    border: 0;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  
  figure,
  blockquote,
  p,
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
  
  h1,
  h2,
  h3,
  h4,
  strong {
    color: var(--ink);
  }
  
  h1,
  h2,
  h3 {
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  
  ::selection {
    color: #ffffff;
    background: var(--blue);
  }
  
  .svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  
  /* =========================================================
     03. ACCESSIBILITY
     ========================================================= */
  
  .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;
  }
  
  .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 99999;
    padding: 12px 18px;
    color: #ffffff;
    background: var(--blue-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transform: translateY(-160%);
    transition: transform 180ms ease;
  }
  
  .skip-link:focus {
    transform: translateY(0);
  }
  
  :focus-visible {
    outline: 3px solid rgba(26, 115, 232, 0.42);
    outline-offset: 4px;
  }
  
  /* =========================================================
     04. SHARED LAYOUT
     ========================================================= */
  
  .page-shell {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 34px), var(--page-width));
    margin: 0 auto;
    padding:
      calc(var(--header-height) + 42px)
      0
      44px;
  }
  
  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 24px;
    padding: var(--card-padding);
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.99),
        rgba(250, 253, 255, 0.97)
      );
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
  
  .card::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    content: "";
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(26, 115, 232, 0.08),
        transparent 30%
      ),
      radial-gradient(
        circle at 0% 100%,
        rgba(52, 168, 83, 0.045),
        transparent 27%
      );
  }
  
  .card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: 0.42;
    background-image:
      linear-gradient(
        rgba(26, 115, 232, 0.019) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(26, 115, 232, 0.019) 1px,
        transparent 1px
      );
    background-size: 34px 34px;
    mask-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45),
        transparent 78%
      );
  }
  
  .reveal {
    opacity: 1;
    transform: none;
  }
  
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 760ms var(--ease-standard),
      transform 760ms var(--ease-standard);
  }
  
  .js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .blue {
    color: var(--blue);
  }
  
  .green {
    color: var(--green);
  }
  
  .orange {
    color: var(--orange);
  }
  
  .motion-card,
  [data-tilt-card] {
    transform:
      perspective(900px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translateY(var(--card-lift));
    transform-style: preserve-3d;
    transition:
      transform 260ms var(--ease-standard),
      box-shadow 260ms ease,
      border-color 260ms ease;
    will-change: transform;
  }
  
  .motion-card:hover,
  [data-tilt-card]:hover {
    --card-lift: -5px;
  }
  
  .image-load-error,
  .has-image-error img {
    opacity: 0.28;
    filter: grayscale(1);
  }
  
  /* =========================================================
     05. GLOBAL SITE BACKGROUND
     ========================================================= */
  
  .site-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .background-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.75;
    animation: backgroundOrbFloat 18s ease-in-out infinite;
  }
  
  .orb-blue {
    top: 2%;
    right: -8%;
    width: clamp(280px, 38vw, 620px);
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.14),
        rgba(26, 115, 232, 0)
      );
  }
  
  .orb-green {
    top: 38%;
    left: -12%;
    width: clamp(260px, 34vw, 560px);
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(52, 168, 83, 0.11),
        rgba(52, 168, 83, 0)
      );
    animation-delay: -6s;
  }
  
  .orb-yellow {
    right: 4%;
    bottom: -8%;
    width: clamp(240px, 32vw, 520px);
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(249, 171, 0, 0.1),
        rgba(249, 171, 0, 0)
      );
    animation-delay: -11s;
  }
  
  .background-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
      radial-gradient(
        rgba(26, 115, 232, 0.17) 1px,
        transparent 1px
      );
    background-size: 34px 34px;
    mask-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.34),
        transparent 82%
      );
  }
  
  .background-star-field,
  .background-clouds,
  .background-route,
  .background-floating-star {
    position: absolute;
    pointer-events: none;
    user-select: none;
  }
  
  .background-star-field {
    opacity: 0.4;
    animation: starFieldDrift 28s linear infinite;
  }
  
  .background-star-field-one {
    top: 8%;
    right: 2%;
    width: 390px;
  }
  
  .background-star-field-two {
    top: 43%;
    left: 0;
    width: 310px;
    animation-direction: reverse;
    animation-duration: 34s;
  }
  
  .background-star-field-three {
    right: 4%;
    bottom: 12%;
    width: 360px;
    opacity: 0.25;
    animation-duration: 38s;
  }
  
  .background-clouds {
    opacity: 0.2;
    animation: cloudDrift 32s ease-in-out infinite;
  }
  
  .background-clouds-one {
    top: 22%;
    left: 2%;
    width: 260px;
  }
  
  .background-clouds-two {
    right: 4%;
    bottom: 28%;
    width: 230px;
    animation-delay: -15s;
  }
  
  .background-route {
    width: min(380px, 30vw);
    opacity: 0.1;
    animation: routeBackgroundDrift 20s ease-in-out infinite;
  }
  
  .background-route-one {
    top: 32%;
    right: 2%;
  }
  
  .background-route-two {
    bottom: 10%;
    left: 1%;
    animation-delay: -9s;
  }
  
  .background-floating-star {
    width: 18px;
    opacity: 0.68;
    animation:
      globalStarFloat 8s ease-in-out infinite,
      starGlow 3.8s ease-in-out infinite;
  }
  
  .global-star-one {
    top: 14%;
    left: 4%;
  }
  
  .global-star-two {
    top: 29%;
    right: 7%;
    width: 24px;
    animation-delay: -2s;
  }
  
  .global-star-three {
    top: 51%;
    left: 7%;
    width: 20px;
    animation-delay: -4s;
  }
  
  .global-star-four {
    top: 67%;
    right: 5%;
    width: 17px;
    animation-delay: -1s;
  }
  
  .global-star-five {
    bottom: 19%;
    left: 10%;
    width: 16px;
    animation-delay: -5s;
  }
  
  .global-star-six {
    right: 12%;
    bottom: 6%;
    width: 19px;
    animation-delay: -3s;
  }
  
  /* =========================================================
     06. HEADER
     ========================================================= */
  
  .site-header {
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
    z-index: 1000;
    width: min(calc(100% - 34px), var(--page-width));
    margin: 0 auto;
    transition:
      transform 280ms ease,
      box-shadow 280ms ease;
  }
  
  .header-inner {
    display: grid;
    grid-template-columns:
      minmax(230px, 1fr)
      auto
      minmax(176px, 1fr);
    align-items: center;
    min-height: var(--header-height);
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(185, 208, 239, 0.96);
    border-radius: 28px;
    box-shadow:
      0 12px 34px rgba(17, 67, 128, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition:
      min-height 260ms ease,
      background 260ms ease,
      box-shadow 260ms ease;
  }
  
  .site-header.is-scrolled .header-inner {
    min-height: 70px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
      0 15px 42px rgba(17, 67, 128, 0.15);
  }
  
  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
    min-width: 0;
  }
  
  .brand-logo {
    width: 44px;
    max-height: 48px;
    object-fit: contain;
  }
  
  .brand-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  
  .brand-copy strong {
    font-size: 1.24rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  
  .brand-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .primary-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.2vw, 34px);
  }
  
  .primary-navigation a {
    position: relative;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 750;
    white-space: nowrap;
    transition:
      color 200ms ease,
      transform 200ms ease;
  }
  
  .primary-navigation a::after {
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 2px;
    content: "";
    background:
      linear-gradient(
        90deg,
        var(--blue),
        var(--green)
      );
    border-radius: var(--radius-pill);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms ease;
  }
  
  .primary-navigation a:hover {
    color: var(--blue);
    transform: translateY(-1px);
  }
  
  .primary-navigation a:hover::after,
  .primary-navigation a:focus-visible::after {
    transform: scaleX(1);
  }
  
  .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    color: #ffffff;
    background:
      linear-gradient(
        135deg,
        var(--blue),
        #347fff
      );
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-blue);
    font-size: 0.92rem;
    font-weight: 800;
    transition:
      transform 220ms var(--ease-standard),
      box-shadow 220ms ease;
  }
  
  .header-cta img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  
  .header-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 20px 44px rgba(26, 115, 232, 0.3);
  }
  
  .nav-toggle {
    display: none;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--ink);
    background: var(--blue-soft);
    border: 1px solid var(--line);
    border-radius: 15px;
    cursor: pointer;
  }
  
  .nav-toggle svg {
    width: 24px;
    height: 24px;
  }
  
  .menu-close-icon {
    display: none;
  }
  
  .nav-toggle[aria-expanded="true"] .menu-open-icon {
    display: none;
  }
  
  .nav-toggle[aria-expanded="true"] .menu-close-icon {
    display: block;
  }
  
  /* =========================================================
     07. BUTTONS
     ========================================================= */
  
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition:
      transform 220ms var(--ease-standard),
      box-shadow 220ms ease,
      background 220ms ease,
      border-color 220ms ease;
  }
  
  .button img,
  .button svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }
  
  .button-primary {
    color: #ffffff;
    background:
      linear-gradient(
        135deg,
        var(--blue),
        #326fff
      );
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: var(--shadow-blue);
  }
  
  .button-primary img {
    filter: brightness(0) invert(1);
  }
  
  .button-primary:hover {
    transform: translateY(-3px);
    box-shadow:
      0 22px 48px rgba(26, 115, 232, 0.3);
  }
  
  .button-secondary {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  
  .button-secondary:hover {
    color: var(--blue);
    border-color: rgba(26, 115, 232, 0.35);
    transform: translateY(-3px);
  }
  
  /* =========================================================
     08. SHARED SECTION HEADINGS
     ========================================================= */
  
  .section-heading {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
    margin: 0 auto clamp(38px, 5vw, 64px);
    text-align: center;
  }
  
  .section-heading-left {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }
  
  .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 6px 15px;
    margin-bottom: 17px;
    color: var(--blue-strong);
    background: rgba(237, 245, 255, 0.96);
    border: 1px solid rgba(26, 115, 232, 0.22);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  
  .section-kicker img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  
  .section-heading h2 {
    color: var(--ink);
    font-size: var(--section-title-size);
    font-weight: 860;
    text-wrap: balance;
  }
  
  .section-heading p {
    width: min(780px, 100%);
    margin: 20px auto 0;
    color: var(--text);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.72;
    text-wrap: balance;
  }
  
  .section-heading-left p {
    margin-right: 0;
    margin-left: 0;
  }
  
  .section-live-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .section-floating-star {
    position: absolute;
    z-index: 1;
    width: 24px;
    animation:
      sectionStarFloat 7s ease-in-out infinite,
      starGlow 3.2s ease-in-out infinite;
  }
  
  .section-route-decoration {
    position: absolute;
    width: 280px;
    opacity: 0.09;
    animation: routeDecorationFloat 12s ease-in-out infinite;
  }
  
  /* =========================================================
     09. HERO
     ========================================================= */
  
.hero {
  padding-top: 16px;
  padding-bottom: clamp(32px, 4vw, 56px);
}
  
  .hero-v26::before {
    background:
      radial-gradient(
        circle at 88% 10%,
        rgba(26, 115, 232, 0.14),
        transparent 33%
      ),
      radial-gradient(
        circle at 7% 70%,
        rgba(52, 168, 83, 0.075),
        transparent 27%
      ),
      radial-gradient(
        circle at 64% 94%,
        rgba(249, 171, 0, 0.08),
        transparent 24%
      );
  }
  
  .hero-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
  }
  
  .shape-blue {
    top: -110px;
    right: -70px;
    width: 390px;
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.11),
        transparent 68%
      );
  }
  
  .shape-green {
    bottom: -130px;
    left: -120px;
    width: 390px;
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(52, 168, 83, 0.08),
        transparent 68%
      );
  }
  
  .shape-yellow {
    right: 27%;
    bottom: -140px;
    width: 330px;
    aspect-ratio: 1;
    background:
      radial-gradient(
        circle,
        rgba(249, 171, 0, 0.09),
        transparent 68%
      );
  }
  
  .hero-dot-pattern {
    position: absolute;
    top: 90px;
    right: 26px;
    width: 180px;
    opacity: 0.46;
  }
  
  .hero-star-field {
    position: absolute;
    top: 8px;
    right: 0;
    width: 47%;
    opacity: 0.35;
    animation: starFieldDrift 24s linear infinite;
  }
  
  .hero-star-art {
    position: absolute;
    animation:
      heroStarFloat 6.5s ease-in-out infinite,
      starGlow 3s ease-in-out infinite;
  }
  
  .hero-star-art-one {
    top: 15%;
    left: 39%;
    width: 25px;
  }
  
  .hero-star-art-two {
    top: 25%;
    left: 52%;
    width: 17px;
    animation-delay: -1.4s;
  }
  
  .hero-star-art-three {
    top: 43%;
    left: 36%;
    width: 22px;
    animation-delay: -2.8s;
  }
  
  .hero-star-art-four {
    top: 54%;
    right: 5%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .hero-star-art-five {
    top: 72%;
    left: 41%;
    width: 20px;
    animation-delay: -2s;
  }
  
  .hero-star-art-six {
    top: 82%;
    right: 8%;
    width: 24px;
    animation-delay: -5s;
  }
  
  .hero-top-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      minmax(0, 0.86fr)
      minmax(560px, 1.14fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
  }
  
  .hero-copy {
    position: relative;
    z-index: 3;
    padding-top: 16px;
  }
  
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 46px;
    padding: 6px 12px;
    color: var(--blue-strong);
    background: rgba(244, 249, 255, 0.96);
    border: 1px solid rgba(26, 115, 232, 0.28);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font-size: clamp(0.76rem, 1vw, 0.9rem);
    font-weight: 820;
  }
  
  .eyebrow-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  
  .eyebrow-level {
    width: 54px;
    max-height: 25px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  
  .hero-stars {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 15px;
    color: #7a4b00;
    font-size: 0.93rem;
    font-weight: 780;
  }
  
  .hero-stars > img {
    width: 112px;
    height: 34px;
    object-fit: contain;
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid #ffe2a1;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
  }
  
  .hero h1 {
    display: grid;
    gap: 0;
    margin-top: 22px;
    color: var(--ink);
    font-size: var(--title-size);
    font-weight: 890;
    letter-spacing: -0.055em;
    line-height: 0.99;
  }
  
  .hero h1 span {
    display: block;
  }
  
  .hero h1 em {
    font-style: normal;
  }
  
  .hero-lead {
    max-width: 620px;
    margin-top: 24px;
    color: var(--text);
    font-size: clamp(1rem, 1.25vw, 1.13rem);
    line-height: 1.72;
  }
  
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
  }
  
  .hero-platform-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 17px;
  }
  
  .hero-platform-badges span {
    display: grid;
    place-items: center;
    min-height: 46px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-xs);
  }
  
  .hero-platform-badges img {
    width: auto;
    height: 27px;
    object-fit: contain;
  }
  
  /* =========================================================
     10. HERO THREE MOBILE PHONES
     ========================================================= */
  
  .hero-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
  }
  
  .hero-phone-stage {
    position: relative;
    width: 100%;
    height: clamp(550px, 43vw, 660px);
    margin: 0 auto;
    perspective: 1500px;
  }
  
  .hero-phone {
    position: absolute;
    top: 0;
    overflow: hidden;
    background: #ffffff;
    border: 4px solid #141c28;
    border-radius: clamp(29px, 2.7vw, 42px);
    box-shadow:
      0 30px 50px rgba(13, 34, 65, 0.24),
      0 6px 18px rgba(13, 34, 65, 0.15);
    transform-origin: center bottom;
    transition:
      transform 760ms var(--ease-spring),
      opacity 560ms ease,
      filter 560ms ease;
    will-change: transform;
  }
  
  .hero-phone img[data-hero-image] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  
  .hero-phone-main {
    top: 0;
    left: 50%;
    z-index: 5;
    width: clamp(235px, 19vw, 300px);
    aspect-ratio: 9 / 19.6;
    transform: translateX(-50%);
  }
  
  .hero-phone-left {
    top: 60px;
    left: 8%;
    z-index: 3;
    width: clamp(195px, 15.7vw, 248px);
    aspect-ratio: 9 / 19.6;
    transform:
      rotate(-7deg)
      translateZ(-20px);
  }
  
  .hero-phone-right {
    top: 60px;
    right: 2%;
    z-index: 3;
    width: clamp(195px, 15.7vw, 248px);
    aspect-ratio: 9 / 19.6;
    transform:
      rotate(7deg)
      translateZ(-20px);
  }
  
  .hero-phone-stage.is-changing .hero-phone-main {
    transform:
      translateX(-50%)
      translateY(-5px)
      scale(0.985);
  }
  
  .phone-speaker {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 8;
    width: 29%;
    height: 7px;
    background: #121820;
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
  }
  
  .phone-camera {
    position: absolute;
    top: 10px;
    right: 20%;
    z-index: 8;
    width: 7px;
    height: 7px;
    background: #0d1420;
    border: 1px solid #3d4654;
    border-radius: 50%;
  }
  
  .phone-screen-shine {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
      linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.22),
        transparent 22%,
        transparent 72%,
        rgba(255, 255, 255, 0.08)
      );
  }
  
  .hero-map-pin {
    position: absolute;
    z-index: 9;
    width: 38px;
    animation:
      mapPinFloat 4.6s ease-in-out infinite,
      pinPulse 2.7s ease-in-out infinite;
  }
  
  .hero-map-pin.pin-one {
    top: 38px;
    right: 6%;
  }
  
  .hero-map-pin.pin-two {
    top: 240px;
    left: 3%;
    width: 34px;
    animation-delay: -1.3s;
  }
  
  .hero-map-pin.pin-three {
    top: 370px;
    right: 1%;
    width: 32px;
    animation-delay: -2.5s;
  }
  
  /* =========================================================
     11. HERO AMAZON REWARD
     ========================================================= */
  
  .hero-amazon-reward {
  position: relative;
  z-index: 11;
  display: grid;
  grid-template-columns:
    minmax(180px, 0.76fr)
    minmax(290px, 1.24fr);
  align-items: center;
  gap: 10px;
  min-height: 220px;
  margin-top: 22px;
    padding: 20px 24px;
    overflow: hidden;
    background:
      radial-gradient(
        circle at 85% 40%,
        rgba(249, 171, 0, 0.14),
        transparent 43%
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98),
        rgba(253, 251, 247, 0.98)
      );
    border: 1px solid var(--line-strong);
    border-radius: 25px;
    box-shadow: var(--shadow-md);
  }
  
 .hero-amazon-copy {
  position: relative;
  z-index: 4;

  transform: translateY(22px);
}
  
  .hero-amazon-label {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 4px 12px;
    color: var(--green-strong);
    background: var(--green-soft);
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  
  .hero-amazon-copy h2 {
    margin-top: 10px;
    color: var(--ink);
    font-size: clamp(1.8rem, 2.6vw, 2.65rem);
    font-weight: 880;
    line-height: 0.98;
  }
  
  .hero-amazon-copy p {
    margin-top: 10px;
    color: #76511e;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
  }
  
  .hero-amazon-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 175px;
  }
  
  .hero-amazon-card {
    position: relative;
    z-index: 4;
    width: min(100%, 390px);
    max-height: 185px;
    object-fit: contain;
    filter:
      drop-shadow(0 22px 22px rgba(44, 33, 13, 0.18));
    animation: giftCardFloat 5.8s ease-in-out infinite;
  }
  
  .hero-amazon-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.72;
    animation: giftGlow 4s ease-in-out infinite;
  }
  
  .hero-amazon-stars {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: starFieldDrift 14s linear infinite;
  }
  
  .hero-amazon-star {
    position: absolute;
    z-index: 6;
    width: 18px;
    animation:
      sectionStarFloat 4.6s ease-in-out infinite,
      starGlow 2.7s ease-in-out infinite;
  }
  
  .reward-star-one {
    top: 8%;
    left: 9%;
  }
  
  .reward-star-two {
    right: 8%;
    bottom: 16%;
    width: 24px;
    animation-delay: -1.7s;
  }
  
  .reward-star-three {
    top: 14%;
    right: 22%;
    width: 20px;
    animation-delay: -3s;
  }
  
  /* =========================================================
     12. VERSION 2.6 LIVE CHARACTER JOURNEY
     ========================================================= */
  
  .hero-journey-v26 {
    position: relative;
    z-index: 5;
    min-height: 390px;
    margin-top: clamp(36px, 4vw, 56px);
    overflow: hidden;
    background:
      radial-gradient(
        circle at 50% 48%,
        rgba(26, 115, 232, 0.055),
        transparent 48%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(247, 251, 255, 0.98)
      );
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    box-shadow: var(--shadow-sm);
  }
  
  .hero-journey-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  .journey-route-svg {
    position: absolute;
    right: 2%;
    bottom: 66px;
    left: 2%;
    width: 96%;
    height: 250px;
    overflow: visible;
  }
  
  .journey-route-mobile {
    display: none;
  }
  
  .journey-path-shadow {
    fill: none;
    stroke: rgba(26, 115, 232, 0.11);
    stroke-width: 16;
    stroke-linecap: round;
  }
  
  .journey-path-base {
    fill: none;
    stroke: #89b8fa;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 13 13;
  }
  
  .journey-path-progress {
    fill: none;
    stroke: url("#journey-route-gradient");
    stroke-width: 6;
    stroke-linecap: round;
    filter: url("#journey-route-glow");
    transition: stroke-dashoffset 100ms linear;
  }
  
  .journey-motion-path {
    fill: none;
    stroke: transparent;
    stroke-width: 1;
  }
  
  .hero-journey-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    animation: particlesDrift 12s linear infinite;
  }
  
  .journey-route-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #8cb8f6;
    border-radius: 50%;
    animation: routeDotPulse 2.8s ease-in-out infinite;
  }
  
  .journey-route-dot-one {
    top: 62%;
    left: 23%;
  }
  
  .journey-route-dot-two {
    top: 48%;
    left: 43%;
    animation-delay: -0.8s;
  }
  
  .journey-route-dot-three {
    top: 64%;
    left: 67%;
    animation-delay: -1.6s;
  }
  
  .journey-route-dot-four {
    top: 51%;
    right: 12%;
    animation-delay: -2.2s;
  }
  
  .hero-journey-stage {
    position: relative;
    z-index: 2;
    min-height: 330px;
  }
  
  .journey-discover-stage {
    position: absolute;
    top: 58px;
    left: 2%;
    z-index: 5;
    width: 260px;
    min-height: 195px;
  }
  
  .journey-start-pin {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    object-fit: contain;
    filter:
      drop-shadow(0 10px 12px rgba(26, 115, 232, 0.2));
    animation:
      mapPinFloat 4.2s ease-in-out infinite,
      pinPulse 2.8s ease-in-out infinite;
  }
  
  .journey-discover-bubble {
    position: absolute;
    top: 0;
    left: 67px;
    width: 210px;
    object-fit: contain;
    filter:
      drop-shadow(0 10px 18px rgba(20, 55, 100, 0.12));
    animation: journeyMessagePulse 5.5s ease-in-out infinite;
  }
  
  .journey-start-pulse {
    position: absolute;
    bottom: 10px;
    left: 18px;
    width: 38px;
    height: 18px;
    background: rgba(26, 115, 232, 0.17);
    border-radius: 50%;
    filter: blur(2px);
    animation: startGroundPulse 2.6s ease-in-out infinite;
  }
  
  .journey-character-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
  }
  
  .journey-character {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(84px, 7.8vw, 125px);
    max-height: 180px;
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    visibility: hidden;
    filter:
      drop-shadow(0 12px 12px rgba(20, 55, 100, 0.18));
    transform:
      translate3d(
        calc(var(--journey-x) - 50%),
        calc(var(--journey-y) - 92%),
        0
      )
      scale(var(--journey-scale));
    transform-origin: center bottom;
    transition:
      opacity 220ms ease,
      visibility 220ms ease;
    will-change: transform;
  }
  
  .journey-character.is-active {
    opacity: 1;
    visibility: visible;
  }
  
  .journey-character[hidden] {
    display: none;
  }
  
  .journey-character-walking.is-active {
    animation: walkingCharacterBounce 580ms ease-in-out infinite;
  }
  
  .journey-character-standing.is-active {
    animation: standingCharacterPulse 2.4s ease-in-out infinite;
  }
  
  .journey-character-reward.is-active {
    width: clamp(100px, 8.8vw, 145px);
    animation: rewardCharacterCelebrate 1.3s ease-in-out infinite;
  }
  
  .journey-business {
    position: absolute;
    top: 70px;
    left: 50%;
    z-index: 6;
    width: clamp(180px, 17vw, 265px);
    margin: 0;
    transform: translateX(-50%);
  }
  
  .journey-business-image {
    position: relative;
    z-index: 4;
    width: 100%;
    object-fit: contain;
    filter:
      drop-shadow(0 16px 18px rgba(20, 55, 100, 0.15));
  }
  
  .journey-business-ground {
    position: absolute;
    right: 12%;
    bottom: -5px;
    left: 12%;
    z-index: 1;
    height: 20px;
    background: rgba(34, 82, 143, 0.11);
    border-radius: 50%;
    filter: blur(2px);
  }
  
  .journey-business-pulse {
    position: absolute;
    inset: 12% 5%;
    z-index: 0;
    opacity: 0;
    background:
      radial-gradient(
        circle,
        rgba(126, 42, 195, 0.16),
        transparent 67%
      );
    border-radius: 50%;
    transition: opacity 300ms ease;
    animation: businessArrivalPulse 2.4s ease-in-out infinite;
  }
  
  .hero-journey-v26.is-stage-review .journey-business-pulse,
  .hero-journey-v26.is-reviewing .journey-business-pulse,
  .hero-journey-v26.is-review-submitted .journey-business-pulse {
    opacity: 1;
  }
  
  .journey-review-sequence {
    position: absolute;
    top: -28px;
    left: 50%;
    z-index: 10;
    width: 225px;
    min-height: 140px;
    opacity: 0;
    visibility: hidden;
    transform:
      translateX(-50%)
      translateY(12px)
      scale(0.94);
    transition:
      opacity 300ms ease,
      visibility 300ms ease,
      transform 380ms var(--ease-spring);
  }
  
  .hero-journey-v26.is-reviewing .journey-review-sequence,
  .hero-journey-v26.is-review-submitted .journey-review-sequence {
    opacity: 1;
    visibility: visible;
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }
  
.journey-review-rating-bubble {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 3;
  width: 220px;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 20px rgba(20, 55, 100, 0.14));
  transform: translateX(-50%);
}
  
  .journey-rating-stars-window {
    position: absolute;
    top: 49px;
    left: 50%;
    z-index: 6;
    width: 126px;
    height: 29px;
    overflow: hidden;
    clip-path:
      inset(
        0
        calc(100% - var(--star-fill))
        0
        0
      );
    transform: translateX(-50%);
    transition:
      clip-path 250ms var(--ease-standard);
  }
  
  .journey-five-stars {
    width: 126px;
    height: 29px;
    max-width: none;
    object-fit: contain;
  }
  
  .journey-review-submit-success {
    position: absolute;
    top: 67px;
    left: 50%;
    z-index: 7;
    width: 190px;
    opacity: 0;
    object-fit: contain;
    transform:
      translateX(-50%)
      translateY(8px)
      scale(0.93);
    transition:
      opacity 280ms ease,
      transform 340ms var(--ease-spring);
  }
  
  .hero-journey-v26.is-review-submitted
  .journey-review-submit-success {
    opacity: 1;
    transform:
      translateX(-50%)
      translateY(0)
      scale(1);
  }
  
  .journey-review-glow {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 1;
    width: 170px;
    height: 100px;
    opacity: 0;
    background:
      radial-gradient(
        circle,
        rgba(249, 171, 0, 0.2),
        transparent 70%
      );
    border-radius: 50%;
    transform: translateX(-50%);
    transition: opacity 260ms ease;
  }
  
  .hero-journey-v26.is-reviewing .journey-review-glow,
  .hero-journey-v26.is-review-submitted .journey-review-glow {
    opacity: 1;
    animation: reviewGlowPulse 1.8s ease-in-out infinite;
  }
  
  .journey-reward {
    position: absolute;
    top: 58px;
    right: 1.5%;
    z-index: 7;
    width: 255px;
    min-height: 210px;
    margin: 0;
  }
  
  .journey-end-pin {
    position: absolute;
    right: 8px;
    bottom: 0;
    z-index: 3;
    width: 70px;
    object-fit: contain;
    filter:
      drop-shadow(0 10px 12px rgba(52, 168, 83, 0.2));
    animation:
      mapPinFloat 4.4s ease-in-out infinite,
      pinPulseGreen 2.8s ease-in-out infinite;
  }
  
  .journey-reward-copy {
    position: absolute;
    top: 10px;
    right: 20px;
    left: 0;
    z-index: 5;
    padding: 14px 17px;
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: var(--shadow-xs);
    transform: translateY(8px);
    transition:
      opacity 360ms ease,
      transform 360ms var(--ease-standard),
      box-shadow 360ms ease;
  }
  
  .hero-journey-v26.is-stage-reward .journey-reward-copy,
  .hero-journey-v26.is-rewarded .journey-reward-copy {
    opacity: 1;
    box-shadow: var(--shadow-md);
    transform: translateY(0);
  }
  
  .journey-reward-copy span,
  .journey-reward-copy strong,
  .journey-reward-copy small {
    display: block;
  }
  
  .journey-reward-copy span {
    color: var(--green-strong);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  
  .journey-reward-copy strong {
    margin-top: 4px;
    font-size: 0.93rem;
  }
  
  .journey-reward-copy small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.68rem;
  }
  
  .journey-reward-celebration {
    position: absolute;
    inset: -20px -10px;
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 260ms ease,
      visibility 260ms ease;
  }
  
  .hero-journey-v26.is-rewarded
  .journey-reward-celebration {
    opacity: 1;
    visibility: visible;
  }
  
  .journey-celebration-star {
    position: absolute;
    width: 22px;
    animation:
      celebrationStarBurst 1.4s ease-in-out infinite,
      starGlow 2.2s ease-in-out infinite;
  }
  
  .celebration-star-one {
    top: 0;
    left: 14%;
  }
  
  .celebration-star-two {
    top: 12%;
    right: 7%;
    width: 29px;
    animation-delay: -0.3s;
  }
  
  .celebration-star-three {
    right: 34%;
    bottom: 3%;
    width: 25px;
    animation-delay: -0.65s;
  }
  
  .celebration-star-four {
    bottom: 16%;
    left: 2%;
    width: 20px;
    animation-delay: -0.95s;
  }
  
  .journey-confetti {
    position: absolute;
    width: 7px;
    height: 20px;
    border-radius: 5px;
    animation: confettiFall 1.9s ease-in-out infinite;
  }
  
  .confetti-one {
    top: 0;
    left: 25%;
    background: var(--blue);
  }
  
  .confetti-two {
    top: 3%;
    left: 48%;
    background: var(--yellow);
    animation-delay: -0.35s;
  }
  
  .confetti-three {
    top: 6%;
    right: 23%;
    background: var(--green);
    animation-delay: -0.7s;
  }
  
  .confetti-four {
    top: 2%;
    right: 5%;
    background: var(--red);
    animation-delay: -1s;
  }
  
  .confetti-five {
    top: 8%;
    left: 7%;
    background: var(--purple);
    animation-delay: -1.25s;
  }
  
  .confetti-six {
    top: 5%;
    right: 40%;
    background: var(--orange);
    animation-delay: -1.55s;
  }
  
  .journey-stage-label {
    position: absolute;
    bottom: 8px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 55px;
    padding: 8px 12px;
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.91);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: var(--shadow-xs);
    transform: translateY(4px);
    transition:
      opacity 300ms ease,
      transform 300ms ease,
      border-color 300ms ease,
      box-shadow 300ms ease;
  }
  
  .journey-stage-label.is-active {
    opacity: 1;
    border-color: rgba(26, 115, 232, 0.34);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
  }
  
  .journey-stage-label > span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    color: #ffffff;
    background: var(--blue);
    border-radius: 50%;
    font-size: 0.73rem;
    font-weight: 900;
  }
  
  .journey-stage-label strong,
  .journey-stage-label small {
    display: block;
  }
  
  .journey-stage-label strong {
    font-size: 0.77rem;
    line-height: 1.2;
  }
  
  .journey-stage-label small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.63rem;
    line-height: 1.25;
  }
  
  .journey-stage-label-discover {
    left: 3%;
  }
  
  .journey-stage-label-contribute {
    left: 50%;
    transform:
      translateX(-50%)
      translateY(4px);
  }
  
  .journey-stage-label-contribute.is-active {
    transform:
      translateX(-50%)
      translateY(0);
  }
  
  .journey-stage-label-contribute > span {
    background: var(--purple);
  }
  
  .journey-stage-label-reward {
    right: 3%;
  }
  
  .journey-stage-label-reward > span {
    background: var(--green);
  }
  
  .journey-live-status {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 13px;
    color: var(--blue-strong);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(26, 115, 232, 0.2);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    font-size: 0.72rem;
    transform: translateX(-50%);
  }
  
  .journey-live-status strong {
    color: inherit;
  }
  
  .journey-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    background: var(--green);
    border-radius: 50%;
    box-shadow:
      0 0 0 0 rgba(52, 168, 83, 0.34);
    animation: liveStatusPulse 1.7s ease-in-out infinite;
  }
  
  /* =========================================================
     13. HERO IMPACT CARDS
     ========================================================= */
  
  .impact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  
  .hero-impact-row {
    position: relative;
    z-index: 5;
    margin-top: 18px;
  }
  
  .impact-strip article {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    padding: 17px 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
  }
  
  .impact-strip article:hover {
    border-color: rgba(26, 115, 232, 0.34);
    box-shadow: var(--shadow-sm);
  }
  
  .impact-icon {
    width: 51px;
    height: 51px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  
  .impact-rating-icon {
    width: 56px;
    height: 56px;
  }
  
  .impact-strip strong,
  .impact-strip span {
    display: block;
  }
  
  .impact-strip strong {
    font-size: 0.91rem;
    line-height: 1.28;
  }
  
  .impact-strip span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  
  /* =========================================================
     14. REWARD STORY
     ========================================================= */
  
  .reward-live-decoration .section-star-one {
    top: 8%;
    left: 6%;
  }
  
  .reward-live-decoration .section-star-two {
    top: 13%;
    right: 8%;
    animation-delay: -2.4s;
  }
  
  .reward-live-decoration .section-star-three {
    right: 4%;
    bottom: 26%;
    width: 18px;
    animation-delay: -4.1s;
  }
  
  .reward-live-decoration .section-route-decoration {
    right: -50px;
    bottom: 8%;
  }
  
  .reward-story-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(360px, 0.95fr);
    align-items: stretch;
    gap: clamp(24px, 4vw, 52px);
  }
  
  .journey-panel {
    display: grid;
    gap: 16px;
  }
  
  .eligibility-note {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 13px 16px;
    background:
      linear-gradient(
        135deg,
        #ffffff,
        #f7fbff
      );
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
  }
  
  .eligibility-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  
  .eligibility-note strong,
  .eligibility-note small {
    display: block;
  }
  
  .eligibility-note strong {
    font-size: 0.94rem;
  }
  
  .eligibility-note small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.77rem;
  }
  
  .eligibility-level {
    width: 58px;
    max-height: 32px;
    object-fit: contain;
  }
  
  .reward-steps {
    display: grid;
    gap: 13px;
    list-style: none;
  }
  
  .reward-steps li {
    position: relative;
    display: grid;
    grid-template-columns:
      auto
      auto
      minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 116px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-xs);
  }
  
  .reward-steps li:hover {
    border-color: rgba(26, 115, 232, 0.34);
    box-shadow: var(--shadow-sm);
  }
  
  .reward-step-number {
    color: #b4ccf5;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.05em;
  }
  
  .reward-step-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
  }
  
  .reward-steps h3 {
    font-size: 1.04rem;
  }
  
  .reward-steps p {
    margin-top: 7px;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.55;
  }
  
  .gift-card-visual {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 100%;
    overflow: hidden;
    background:
      radial-gradient(
        circle at 50% 40%,
        rgba(249, 171, 0, 0.15),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        #ffffff,
        #fffdf9
      );
    border: 1px solid var(--line-strong);
    border-radius: 26px;
    box-shadow: var(--shadow-md);
  }
  
  .gift-image-shell {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 390px;
    overflow: hidden;
  }
  
  .gift-reward-stage {
    position: relative;
    z-index: 4;
    width: min(88%, 470px);
    max-height: 310px;
    object-fit: contain;
    filter:
      drop-shadow(0 30px 28px rgba(55, 36, 9, 0.18));
    animation: giftCardFloat 6s ease-in-out infinite;
  }
  
  .gift-reward-glow {
    position: absolute;
    inset: 5%;
    z-index: 1;
    width: 90%;
    height: 90%;
    object-fit: contain;
    opacity: 0.8;
    animation: giftGlow 4.8s ease-in-out infinite;
  }
  
  .gift-reward-star-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: starFieldDrift 18s linear infinite;
  }
  
  .gift-spark {
    position: absolute;
    z-index: 5;
    width: 22px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.8s ease-in-out infinite;
  }
  
  .gift-spark-one {
    top: 14%;
    left: 11%;
  }
  
  .gift-spark-two {
    right: 11%;
    bottom: 18%;
    width: 28px;
    animation-delay: -2s;
  }
  
  .gift-spark-three {
    top: 21%;
    right: 18%;
    width: 20px;
    animation-delay: -3.8s;
  }
  
  .gift-card-visual figcaption {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 88px;
    padding: 17px 20px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
  }
  
  .approval-tick {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  
  .gift-card-visual figcaption strong,
  .gift-card-visual figcaption small {
    display: block;
  }
  
  .gift-card-visual figcaption strong {
    font-size: 1rem;
  }
  
  .gift-card-visual figcaption small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.79rem;
    line-height: 1.45;
  }
  
  .win-win-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      150px
      minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin-top: clamp(34px, 5vw, 62px);
  }
  
  .outcome-card {
    min-height: 330px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
  }
  
  .guide-outcome {
    background:
      radial-gradient(
        circle at 10% 0%,
        rgba(255, 122, 0, 0.1),
        transparent 38%
      ),
      #ffffff;
  }
  
  .business-outcome {
    background:
      radial-gradient(
        circle at 90% 0%,
        rgba(26, 115, 232, 0.1),
        transparent 38%
      ),
      #ffffff;
  }
  
  .outcome-tag {
    display: inline-flex;
    padding: 6px 12px;
    color: var(--blue-strong);
    background: var(--blue-soft);
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  
  .outcome-card h3 {
    margin-top: 17px;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.2;
  }
  
  .outcome-card > p {
    margin-top: 17px;
    color: var(--text);
    font-size: 0.93rem;
    line-height: 1.65;
  }
  
  .check-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    list-style: none;
  }
  
  .check-list li {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: start;
    gap: 9px;
    color: var(--text);
    font-size: 0.87rem;
    line-height: 1.5;
  }
  
  .check-list img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  
  .mapply-bridge {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--blue-strong);
    text-align: center;
    font-size: 0.74rem;
    font-weight: 850;
  }
  
  .mapply-bridge > span {
    width: 2px;
    height: 52px;
    background:
      linear-gradient(
        var(--blue),
        var(--green)
      );
    border-radius: var(--radius-pill);
  }
  
  .bridge-logo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    animation: bridgePulse 4s ease-in-out infinite;
  }
  
  .bridge-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  
  .ranking-preview {
    margin-top: 22px;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 17px;
  }
  
  .ranking-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: var(--muted);
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    font-size: 0.8rem;
  }
  
  .ranking-search img {
    width: 27px;
    height: 27px;
    object-fit: contain;
  }
  
  .ranking-result {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 11px;
    padding: 15px;
  }
  
  .ranking-pin {
    width: 34px;
  }
  
  .ranking-result small,
  .ranking-result strong {
    display: block;
  }
  
  .ranking-result small {
    color: var(--muted);
    font-size: 0.7rem;
  }
  
  .ranking-result strong {
    margin-top: 3px;
    font-size: 0.84rem;
    line-height: 1.35;
  }
  
  .ranking-arrow {
    width: 42px;
  }
  
  /* =========================================================
     15. APP EXPERIENCE
     ========================================================= */
  
  .app-live-decoration .app-star-one {
    top: 8%;
    left: 5%;
  }
  
  .app-live-decoration .app-star-two {
    top: 13%;
    right: 8%;
    animation-delay: -2.2s;
  }
  
  .app-live-decoration .app-star-three {
    right: 4%;
    bottom: 16%;
    width: 17px;
    animation-delay: -4s;
  }
  
  .app-live-decoration .section-route-decoration {
    bottom: 6%;
    left: -50px;
  }
  
  .screen-gallery {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;
    align-items: center;
    gap: 14px;
  }
  
  .screen-track {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 26px);
    padding:
      32px
      max(4vw, 38px)
      38px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  
  .screen-track::-webkit-scrollbar {
    display: none;
  }
  
  .app-screen-card {
    flex: 0 0 clamp(214px, 19vw, 286px);
    scroll-snap-align: center;
    opacity: 0.72;
    transform: scale(0.94);
    transition:
      opacity 340ms ease,
      transform 340ms var(--ease-standard),
      filter 340ms ease;
  }
  
  .app-screen-card.is-center {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform:
      translateY(-7px)
      scale(1);
  }
  
  .device-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
    padding: 4px;
    background: #121923;
    border: 1px solid rgba(0, 0, 0, 0.9);
    border-radius: 34px;
    box-shadow:
      0 25px 42px rgba(12, 32, 63, 0.22),
      0 7px 18px rgba(12, 32, 63, 0.13);
  }
  
  .device-frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 29px;
  }
  
  .device-speaker {
    position: absolute;
    top: 11px;
    left: 50%;
    z-index: 5;
    width: 28%;
    height: 7px;
    background: #101720;
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
  }
  
  .device-camera {
    position: absolute;
    top: 11px;
    right: 21%;
    z-index: 5;
    width: 7px;
    height: 7px;
    background: #101720;
    border-radius: 50%;
  }
  
  .device-glass {
    position: absolute;
    inset: 4px;
    z-index: 4;
    pointer-events: none;
    background:
      linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.22),
        transparent 24%,
        transparent 78%,
        rgba(255, 255, 255, 0.06)
      );
    border-radius: 29px;
  }
  
  .gallery-arrow,
  .testimonial-arrow {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--blue);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      background 220ms ease;
  }
  
  .gallery-arrow:hover,
  .testimonial-arrow:hover {
    background: var(--blue-soft);
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
  }
  
  .gallery-arrow img,
  .testimonial-arrow img {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }
  
  .gallery-progress {
    position: relative;
    z-index: 2;
    width: min(520px, 72%);
    height: 6px;
    margin: 18px auto 0;
    overflow: hidden;
    background: #e4edf8;
    border-radius: var(--radius-pill);
  }
  
  .gallery-progress span {
    display: block;
    width: 5%;
    height: 100%;
    background:
      linear-gradient(
        90deg,
        var(--blue),
        var(--green)
      );
    border-radius: inherit;
    transition: width 320ms ease;
  }
  
  .gallery-status {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.82rem;
  }
  
  .gallery-status strong {
    color: var(--blue);
    font-size: 0.88rem;
  }
  
  /* =========================================================
     16. LOCAL GUIDES
     ========================================================= */
  
  .guide-live-decoration .guide-section-star {
    top: 8%;
    right: 9%;
  }
  
  .guide-live-decoration .guide-section-star-two {
    top: 26%;
    left: 4%;
    width: 17px;
    animation-delay: -2s;
  }
  
  .guide-live-decoration .guide-section-star-three {
    right: 4%;
    bottom: 12%;
    width: 20px;
    animation-delay: -4s;
  }
  
  .guide-live-decoration .section-route-decoration {
    bottom: 3%;
    left: -40px;
  }
  
  .guide-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
  }
  
  .guide-profile {
    position: relative;
    display: grid;
    grid-template-columns:
      92px
      minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 132px;
    padding: 20px 28px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 21px;
    box-shadow: var(--shadow-xs);
    animation: guideCardFloat 7s ease-in-out infinite;
    animation-delay:
      calc(var(--float-delay, 0) * 1ms);
  }
  
  .guide-profile:nth-child(2n) {
    animation-duration: 8.2s;
  }
  
  .guide-profile:nth-child(3n) {
    animation-duration: 7.6s;
  }
  
  .guide-profile:hover {
    z-index: 3;
    border-color: rgba(255, 122, 0, 0.35);
    box-shadow:
      0 18px 38px rgba(20, 55, 100, 0.13);
    animation-play-state: paused;
  }
  
  .guide-number {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #c1d7f7;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.05em;
  }
  
  .guide-avatar-wrap {
    position: relative;
    display: block;
    width: 92px;
    height: 92px;
    min-width: 92px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
  }
  
  .guide-avatar-wrap > img:first-child {
    position: relative;
    z-index: 1;
    display: block;
    width: 92px;
    height: 92px;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 3px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
    box-shadow:
      0 8px 20px rgba(32, 68, 125, 0.16),
      0 0 0 1px rgba(201, 219, 242, 0.9);
  }
  
  .guide-avatar-wrap .guide-local-badge {
    position: absolute;
    right: -7px;
    bottom: -7px;
    z-index: 5;
    display: block;
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    margin: 0;
    padding: 0;
    border: 3px solid #ffffff;
    border-radius: 50%;
    object-fit: contain;
    background: transparent;
    box-shadow:
      0 5px 12px rgba(26, 46, 85, 0.22),
      0 0 0 1px rgba(255, 122, 0, 0.15);
    animation: badgePulse 4s ease-in-out infinite;
  }
  
  .guide-profile-copy {
    min-width: 0;
  }
  
  .guide-profile-copy h3 {
    margin: 0 0 5px;
    font-size: 1.02rem;
  }
  
  .guide-profile-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
  }
  
  .guide-community-note {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 15px;
    min-height: 90px;
    margin-top: 22px;
    padding: 16px 22px;
    background:
      linear-gradient(
        135deg,
        rgba(238, 246, 255, 0.98),
        rgba(255, 255, 255, 0.98)
      );
    border: 1px solid rgba(26, 115, 232, 0.22);
    border-radius: 20px;
    box-shadow: var(--shadow-xs);
  }
  
  .community-note-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
  }
  
  .guide-community-note strong,
  .guide-community-note span {
    display: block;
  }
  
  .guide-community-note strong {
    font-size: 0.96rem;
  }
  
  .guide-community-note span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.8rem;
  }
  
  .community-stars {
    width: 140px;
    height: 42px;
    object-fit: contain;
  }
  
  .community-stars-large {
    width: 176px;
    height: 50px;
  }
  
  /* =========================================================
     17. BUSINESS BENEFITS
     ========================================================= */
  
  .benefits-live-decoration .benefits-star-one {
    top: 6%;
    left: 5%;
  }
  
  .benefits-live-decoration .benefits-star-two {
    top: 13%;
    right: 7%;
    width: 27px;
    animation-delay: -2s;
  }
  
  .benefits-live-decoration .benefits-star-three {
    left: 3%;
    bottom: 19%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .benefits-live-decoration .benefits-star-four {
    right: 4%;
    bottom: 8%;
    width: 19px;
    animation-delay: -1s;
  }
  
  .benefits-live-decoration .section-route-decoration {
    right: -60px;
    bottom: 26%;
  }
  
  .benefit-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  
  .benefit-card {
    --accent: var(--blue);
    --accent-soft: var(--blue-soft);
  
    position: relative;
    min-height: 310px;
    padding: 24px;
    overflow: hidden;
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(26, 115, 232, 0.1),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        #ffffff,
        var(--accent-soft)
      );
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
  }
  
  .benefit-card::before {
    position: absolute;
    top: -35px;
    right: -35px;
    width: 112px;
    height: 112px;
    content: "";
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.18),
        transparent 70%
      );
    border-radius: 50%;
    animation: benefitGlow 5s ease-in-out infinite;
  }
  
  .benefit-card::after {
    position: absolute;
    right: 18px;
    bottom: 18px;
    content: "★";
    color: var(--accent);
    font-size: 15px;
    opacity: 0.62;
    animation:
      sectionStarFloat 4.8s ease-in-out infinite,
      starGlow 2.6s ease-in-out infinite;
  }
  
  .benefit-card:hover {
    border-color: rgba(26, 115, 232, 0.38);
    box-shadow: var(--shadow-md);
  }
  
  .benefit-blue {
    --accent: var(--blue);
    --accent-soft: #f1f7ff;
  }
  
  .benefit-green {
    --accent: var(--green);
    --accent-soft: #f0faf3;
  }
  
  .benefit-yellow {
    --accent: var(--yellow);
    --accent-soft: #fffaf0;
  }
  
  .benefit-red {
    --accent: var(--red);
    --accent-soft: #fff5f3;
  }
  
  .benefit-purple {
    --accent: var(--purple);
    --accent-soft: #faf5ff;
  }
  
  .benefit-teal {
    --accent: var(--teal);
    --accent-soft: #f0fbfa;
  }
  
  .benefit-indigo {
    --accent: var(--indigo);
    --accent-soft: #f5f5ff;
  }
  
  .benefit-growth {
    --accent: var(--orange);
    --accent-soft: #fff8f1;
  }
  
  .benefit-card .number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(26, 115, 232, 0.2);
    font-size: 2.05rem;
    font-weight: 900;
    letter-spacing: -0.07em;
  }
  
  .benefit-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    object-fit: contain;
  }
  
  .benefit-card h3 {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    font-size: 1.22rem;
    line-height: 1.2;
  }
  
  .benefit-card p {
    position: relative;
    z-index: 2;
    margin-top: 13px;
    color: var(--text);
    font-size: 0.87rem;
    line-height: 1.6;
  }
  
  .benefit-highlight {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-top: 18px;
    padding: 7px 11px;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 820;
  }
  
  /* =========================================================
     18. FEATURES
     ========================================================= */
  
  .features-live-decoration .features-star-one {
    top: 9%;
    left: 6%;
  }
  
  .features-live-decoration .features-star-two {
    top: 17%;
    right: 7%;
    animation-delay: -2.3s;
  }
  
  .features-live-decoration .features-star-three {
    right: 5%;
    bottom: 12%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .features-live-decoration .section-route-decoration {
    left: -45px;
    bottom: 5%;
  }
  
  .features-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.88fr)
      minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }
  
  .feature-column {
    display: grid;
    gap: 18px;
  }
  
  .feature-item {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    min-height: 160px;
    padding: 21px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-xs);
  }
  
  .feature-item:hover {
    border-color: rgba(26, 115, 232, 0.33);
    box-shadow: var(--shadow-sm);
  }
  
  .feature-image-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    object-fit: contain;
  }
  
  .feature-item h3 {
    font-size: 1.08rem;
  }
  
  .feature-item p {
    margin-top: 9px;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.58;
  }
  
  .features-phone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 540px;
  }
  
  .features-phone > img:last-child {
    position: relative;
    z-index: 4;
    width: min(100%, 330px);
    max-height: 530px;
    object-fit: contain;
    filter:
      drop-shadow(0 28px 30px rgba(14, 39, 75, 0.2));
    animation: phoneFeatureFloat 6s ease-in-out infinite;
  }
  
  .features-phone-glow {
    position: absolute;
    inset: 11%;
    z-index: 1;
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.21),
        rgba(26, 115, 232, 0)
      );
    border-radius: 50%;
    filter: blur(12px);
    animation: featureGlow 5s ease-in-out infinite;
  }
  
  .features-floating-star {
    position: absolute;
    z-index: 5;
    width: 24px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.8s ease-in-out infinite;
  }
  
  .feature-star-one {
    top: 12%;
    left: 8%;
  }
  
  .feature-star-two {
    right: 7%;
    bottom: 22%;
    width: 28px;
    animation-delay: -2.5s;
  }
  
  .feature-star-three {
    top: 33%;
    right: 3%;
    width: 17px;
    animation-delay: -4s;
  }
  
  /* =========================================================
     19. ABOUT MAPPLY
     ========================================================= */
  
  .about {
    display: grid;
    grid-template-columns:
      minmax(380px, 0.96fr)
      minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(34px, 5vw, 72px);
  }
  
  .about-live-decoration .about-star-one {
    top: 8%;
    right: 7%;
  }
  
  .about-live-decoration .about-star-two {
    left: 4%;
    bottom: 8%;
    width: 19px;
    animation-delay: -3s;
  }
  
  .about-live-decoration .section-route-decoration {
    right: -40px;
    bottom: 4%;
  }
  
  .about-visual {
    position: relative;
    min-height: 600px;
  }
  
  .about-glow {
    position: absolute;
    inset: 8%;
    z-index: 0;
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.19),
        transparent 67%
      );
    border-radius: 50%;
    filter: blur(12px);
    animation: featureGlow 5.5s ease-in-out infinite;
  }
  
  .about-frame,
  .about-screen {
    position: absolute;
    object-fit: contain;
  }
  
  .about-frame {
    top: 3%;
    left: 3%;
    z-index: 2;
    width: 72%;
    max-height: 560px;
    filter:
      drop-shadow(0 30px 32px rgba(14, 39, 75, 0.2));
    animation: phoneFeatureFloat 6.8s ease-in-out infinite;
  }
  
  .about-screen {
    right: 2%;
    bottom: 4%;
    z-index: 3;
    width: 62%;
    max-height: 430px;
    filter:
      drop-shadow(0 24px 28px rgba(14, 39, 75, 0.18));
    animation: phoneFeatureFloat 6.2s ease-in-out infinite reverse;
  }
  
  .about-floating-rating {
    position: absolute;
    top: 13%;
    right: 3%;
    z-index: 6;
    width: 150px;
    height: 48px;
    padding: 8px 12px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    animation: guideCardFloat 6s ease-in-out infinite;
  }
  
  .about-floating-pin {
    position: absolute;
    bottom: 22%;
    left: 2%;
    z-index: 6;
    width: 50px;
    animation:
      mapPinFloat 4.5s ease-in-out infinite,
      pinPulse 2.8s ease-in-out infinite;
  }
  
  .about-copy {
    position: relative;
    z-index: 2;
  }
  
  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 25px 0;
  }
  
  .about-stats article {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 98px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
  }
  
  .about-stats article > img {
    width: 52px;
    height: 52px;
    object-fit: contain;
  }
  
  .about-stats strong,
  .about-stats span {
    display: block;
  }
  
  .about-stats strong {
    font-size: 0.98rem;
  }
  
  .about-stats span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
  }
  
  /* =========================================================
     20. VERIFIED CONTRIBUTIONS
     ========================================================= */
  
  .contributions-live-decoration .contributions-star-one {
    top: 9%;
    left: 5%;
  }
  
  .contributions-live-decoration .contributions-star-two {
    top: 14%;
    right: 7%;
    width: 19px;
    animation-delay: -2s;
  }
  
  .contributions-live-decoration .contributions-star-three {
    right: 3%;
    bottom: 10%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .contributions-live-decoration .section-route-decoration {
    left: -55px;
    bottom: 2%;
  }
  
  .verified-contributions {
    display: grid;
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(440px, 1.05fr);
    align-items: center;
    gap: clamp(34px, 5vw, 72px);
  }
  
  .contribution-copy,
  .contribution-visual {
    position: relative;
    z-index: 2;
  }
  
  .contribution-points {
    display: grid;
    gap: 13px;
    margin-top: 24px;
  }
  
  .contribution-points article {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 19px;
    box-shadow: var(--shadow-xs);
  }
  
  .point-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
  }
  
  .contribution-points h3 {
    font-size: 1.02rem;
  }
  
  .contribution-points p {
    margin-top: 7px;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.55;
  }
  
  .contribution-visual {
    min-height: 610px;
  }
  
  .modern-main {
    position: absolute;
    top: 1%;
    left: 3%;
    z-index: 3;
    width: 68%;
    max-height: 580px;
    object-fit: contain;
    filter:
      drop-shadow(0 28px 32px rgba(14, 39, 75, 0.2));
    animation: phoneFeatureFloat 6.4s ease-in-out infinite;
  }
  
  .modern-side {
    position: absolute;
    top: 19%;
    right: 1%;
    z-index: 4;
    display: grid;
    gap: 14px;
    width: 40%;
  }
  
  .modern-side img {
    width: 100%;
    max-height: 170px;
    object-fit: contain;
    filter:
      drop-shadow(0 15px 18px rgba(14, 39, 75, 0.13));
  }
  
  .modern-side img:first-child {
    width: 74px;
    justify-self: end;
  }
  
  .contribution-live-chip {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 15px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-size: 0.78rem;
    font-weight: 800;
  }
  
  .contribution-live-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  
  .contribution-live-chip-lower {
    right: 7%;
    bottom: 8%;
  }
  
  .contribution-floating-star {
    position: absolute;
    top: 11%;
    right: 11%;
    z-index: 7;
    width: 26px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.8s ease-in-out infinite;
  }
  
  /* =========================================================
     21. THREE STEPS
     ========================================================= */
  
  .three-steps-v26 {
    min-height: 1180px;
  }
  
  .process-live-decoration .process-star-one {
    top: 5%;
    left: 5%;
  }
  
  .process-live-decoration .process-star-two {
    top: 9%;
    right: 7%;
    width: 27px;
    animation-delay: -2s;
  }
  
  .process-live-decoration .process-star-three {
    right: 3%;
    bottom: 18%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .process-live-decoration .process-star-four {
    left: 4%;
    bottom: 7%;
    width: 18px;
    animation-delay: -1s;
  }
  
  .process-route-layer {
    position: absolute;
    top: 270px;
    right: 8%;
    bottom: 60px;
    left: 8%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }
  
  .process-route-line {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 820px;
    max-width: 78%;
    opacity: 0.11;
    transform: translateX(-50%) rotate(90deg);
  }
  
  .process-route-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.17;
    animation: particlesDrift 12s linear infinite;
  }
  
  .process-route-traveller,
  .process-route-business,
  .process-route-contribution,
  .process-route-reward {
    position: absolute;
    z-index: 2;
    object-fit: contain;
    opacity: 0.14;
  }
  
  .process-route-traveller {
    top: 2%;
    right: 5%;
    width: 115px;
    animation: processTravellerMove 12s ease-in-out infinite;
  }
  
  .process-route-business {
    top: 40%;
    left: 4%;
    width: 180px;
    animation: processBusinessPulse 6s ease-in-out infinite;
  }
  
  .process-route-contribution {
    top: 46%;
    left: 21%;
    width: 115px;
    animation:
      contributionPop 5s ease-in-out infinite,
      starGlow 3s ease-in-out infinite;
  }
  
  .process-route-reward {
    right: 3%;
    bottom: 1%;
    width: 150px;
    animation: giftBounce 5s ease-in-out infinite;
  }
  
  .step-showcase {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 20px;
  }
  
  .showcase-step {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.82fr);
    align-items: center;
    gap: 38px;
    min-height: 270px;
    padding: 28px 34px;
    overflow: hidden;
    background:
      radial-gradient(
        circle at 90% 10%,
        rgba(26, 115, 232, 0.08),
        transparent 37%
      ),
      rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
  }
  
  .showcase-step::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    opacity: 0.18;
    background-image:
      radial-gradient(
        rgba(26, 115, 232, 0.24) 1px,
        transparent 1px
      );
    background-size: 26px 26px;
    mask-image:
      linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.65),
        transparent
      );
  }
  
  .showcase-reverse {
    grid-template-columns:
      minmax(280px, 0.82fr)
      minmax(0, 1fr);
  }
  
  .showcase-reverse .showcase-copy {
    grid-column: 2;
    grid-row: 1;
  }
  
  .showcase-reverse figure {
    grid-column: 1;
    grid-row: 1;
  }
  
  .showcase-copy,
  .showcase-step figure {
    position: relative;
    z-index: 2;
  }
  
  .showcase-copy > span {
    display: inline-flex;
    padding: 7px 12px;
    color: var(--blue);
    background: var(--blue-soft);
    border-radius: var(--radius-pill);
    font-size: 0.79rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .showcase-copy h3 {
    margin-top: 16px;
    font-size: clamp(1.55rem, 2.4vw, 2.3rem);
  }
  
  .showcase-copy p {
    margin-top: 13px;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.66;
  }
  
  .showcase-step figure {
    display: grid;
    place-items: center;
  }
  
  .showcase-step figure img {
    width: min(100%, 350px);
    max-height: 220px;
    object-fit: contain;
    filter:
      drop-shadow(0 18px 18px rgba(14, 39, 75, 0.12));
    animation: processImageFloat 6s ease-in-out infinite;
  }
  
  .showcase-reverse figure img {
    animation-delay: -3s;
  }
  
  .step-floating-star {
    position: absolute;
    z-index: 5;
    width: 20px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.6s ease-in-out infinite;
  }
  
  .step-floating-star-one {
    top: 22px;
    right: 22px;
  }
  
  .step-floating-star-two {
    top: 24px;
    left: 22px;
    width: 25px;
    animation-delay: -2s;
  }
  
  .step-floating-star-three {
    right: 24px;
    bottom: 20px;
    width: 23px;
    animation-delay: -4s;
  }
  
  /* =========================================================
     22. TESTIMONIALS
     ========================================================= */
  
  .testimonial-live-decoration .testimonial-star-one {
    top: 8%;
    left: 5%;
  }
  
  .testimonial-live-decoration .testimonial-star-two {
    top: 13%;
    right: 7%;
    animation-delay: -2s;
  }
  
  .testimonial-live-decoration .testimonial-star-three {
    right: 3%;
    bottom: 12%;
    width: 19px;
    animation-delay: -4s;
  }
  
  .testimonial-live-decoration .section-route-decoration {
    left: -45px;
    bottom: 4%;
  }
  
  .testimonial-slider {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;
    align-items: center;
    gap: 20px;
    width: min(980px, 100%);
    margin: 0 auto;
  }
  
  .testimonial-track {
    position: relative;
    min-height: 330px;
  }
  
  .testimonial-card {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    min-height: 330px;
    padding: clamp(28px, 4vw, 52px);
    opacity: 0;
    visibility: hidden;
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(26, 115, 232, 0.07),
        transparent 36%
      ),
      #ffffff;
    border: 1px solid var(--line);
    border-radius: 25px;
    box-shadow: var(--shadow-sm);
    transform: translateX(24px) scale(0.98);
    transition:
      opacity 420ms ease,
      visibility 420ms ease,
      transform 420ms var(--ease-standard);
  }
  
  .testimonial-card.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
  }
  
  .testimonial-stars {
    width: 110px;
    height: 34px;
    object-fit: contain;
  }
  
  .testimonial-card blockquote {
    margin-top: 22px;
    color: var(--ink);
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: -0.018em;
  }
  
  .testimonial-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 27px;
  }
  
  .testimonial-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
  }
  
  .testimonial-avatar-image {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
      0 8px 18px rgba(20, 55, 100, 0.17);
  }
  
  .testimonial-avatar-badge {
    position: absolute;
    right: -4px;
    bottom: -3px;
    z-index: 3;
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter:
      drop-shadow(0 3px 4px rgba(65, 39, 10, 0.22));
  }
  
  .testimonial-person strong,
  .testimonial-person span {
    display: block;
  }
  
  .testimonial-person strong {
    font-size: 0.98rem;
  }
  
  .testimonial-person span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
  }
  
  .testimonial-summary {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 22px;
    width: min(880px, 100%);
    min-height: 112px;
    margin: 23px auto 0;
    padding: 17px 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 21px;
    box-shadow: var(--shadow-xs);
  }
  
  .summary-community-avatars {
    display: flex;
    align-items: center;
    padding-left: 12px;
  }
  
  .summary-community-avatars span {
    width: 46px;
    height: 46px;
    margin-left: -12px;
    overflow: hidden;
    background: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow:
      0 5px 12px rgba(20, 55, 100, 0.14);
  }
  
  .summary-community-avatars span:first-child {
    margin-left: 0;
  }
  
  .summary-community-avatars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .testimonial-summary-rating {
    border-right: 1px solid var(--line);
  }
  
  .summary-stars {
    width: 102px;
    height: 31px;
    object-fit: contain;
  }
  
  .testimonial-summary-rating strong,
  .testimonial-summary-rating small {
    display: block;
  }
  
  .testimonial-summary-rating strong {
    margin-top: 5px;
    font-size: 1rem;
  }
  
  .testimonial-summary-rating small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.77rem;
  }
  
  .summary-count {
    min-width: 190px;
  }
  
  .summary-count strong,
  .summary-count small {
    display: block;
  }
  
  .summary-count strong {
    color: var(--blue);
    font-size: 1.7rem;
    line-height: 1;
  }
  
  .summary-count small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.77rem;
  }
  
  /* =========================================================
     23. MAPPLY BENEFITS
     ========================================================= */
  
  .plans-live-decoration .plans-star-one {
    top: 7%;
    left: 5%;
  }
  
  .plans-live-decoration .plans-star-two {
    top: 11%;
    right: 7%;
    width: 27px;
    animation-delay: -2s;
  }
  
  .plans-live-decoration .plans-star-three {
    left: 3%;
    bottom: 12%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .plans-live-decoration .plans-star-four {
    right: 4%;
    bottom: 7%;
    width: 18px;
    animation-delay: -1s;
  }
  
  .plans-live-decoration .section-route-decoration {
    right: -50px;
    bottom: 13%;
  }
  
  .benefit-plan-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
  }
  
  .benefit-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 530px;
    padding: 28px;
    overflow: hidden;
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.99),
        rgba(248, 252, 255, 0.99)
      );
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-sm);
  }
  
  .benefit-plan::before {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 210px;
    height: 210px;
    content: "";
    background:
      radial-gradient(
        circle,
        rgba(26, 115, 232, 0.12),
        transparent 68%
      );
    border-radius: 50%;
    animation: benefitGlow 5s ease-in-out infinite;
  }
  
  .benefit-plan-business {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(26, 115, 232, 0.1),
        transparent 36%
      ),
      #ffffff;
  }
  
  .benefit-plan-reward {
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(249, 171, 0, 0.12),
        transparent 38%
      ),
      #ffffff;
  }
  
  .benefit-plan-featured {
    color: #ffffff;
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(255, 255, 255, 0.2),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        #1166ed 0%,
        #3153e8 55%,
        #5930d8 100%
      );
    border-color: rgba(255, 255, 255, 0.33);
    box-shadow:
      0 28px 60px rgba(48, 69, 213, 0.28);
    transform:
      perspective(900px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translateY(calc(var(--card-lift) - 12px));
  }
  
  .benefit-plan-featured h3,
  .benefit-plan-featured p,
  .benefit-plan-featured li {
    color: #ffffff;
  }
  
  .benefit-plan-featured p,
  .benefit-plan-featured li {
    color: rgba(255, 255, 255, 0.87);
  }
  
  .benefit-plan-icon {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    object-fit: contain;
  }
  
  .plan-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-self: flex-start;
    margin-top: 20px;
    padding: 7px 12px;
    color: var(--blue);
    background: var(--blue-soft);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 880;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .benefit-plan-featured .plan-label {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
  }
  
  .featured-label {
    position: absolute;
    top: 20px;
    right: 18px;
    z-index: 4;
    padding: 7px 12px;
    color: #725000;
    background: #ffd245;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  
  .benefit-plan h3 {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    font-size: 1.52rem;
  }
  
  .benefit-plan > p {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.62;
  }
  
  .benefit-plan ul {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 11px;
    margin: 24px 0;
    list-style: none;
  }
  
  .benefit-plan li {
    display: grid;
    grid-template-columns:
      24px
      minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.45;
  }
  
  .benefit-plan li img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  
  .benefit-plan > a {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    margin-top: auto;
    color: var(--blue);
    background: var(--blue-soft);
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 820;
    transition:
      transform 200ms ease,
      background 200ms ease;
  }
  
  .benefit-plan > a:hover {
    transform: translateY(-2px);
    background: #deecff;
  }
  
  .benefit-plan > a svg {
    width: 22px;
    height: 22px;
  }
  
  .benefit-plan-featured > a {
    color: var(--blue);
    background: #ffffff;
  }
  
  .benefit-plan-featured > a:hover {
    background: #f0f6ff;
  }
  
  /* =========================================================
     24. FAQ
     ========================================================= */
  
  .faq-live-decoration .faq-star-one {
    top: 8%;
    left: 5%;
  }
  
  .faq-live-decoration .faq-star-two {
    top: 13%;
    right: 7%;
    animation-delay: -2.6s;
  }
  
  .faq-live-decoration .section-route-decoration {
    right: -50px;
    bottom: 4%;
  }
  
  .faq-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 13px;
    width: min(990px, 100%);
    margin: 0 auto;
  }
  
  .faq-item {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    transition:
      border-color 220ms ease,
      box-shadow 220ms ease;
  }
  
  .faq-item.is-open {
    border-color: rgba(26, 115, 232, 0.34);
    box-shadow: var(--shadow-sm);
  }
  
  .faq-item h3 {
    line-height: 1.4;
    letter-spacing: 0;
  }
  
  .faq-item button {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 70px;
    padding: 17px 20px;
    color: var(--ink);
    background: transparent;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }
  
  .faq-item button svg {
    width: 24px;
    height: 24px;
    color: var(--blue);
    transition: transform 260ms ease;
  }
  
  .faq-item.is-open button svg {
    transform: rotate(180deg);
  }
  
  .faq-panel {
    padding:
      0
      20px
      20px;
  }
  
  .faq-panel p {
    color: var(--text);
    font-size: 0.91rem;
    line-height: 1.65;
  }
  
  /* =========================================================
     25. GET STARTED
     ========================================================= */
  
  .get-started {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, 0.9fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    min-height: 540px;
    margin-bottom: 24px;
    padding: var(--card-padding);
    overflow: hidden;
    border-radius: var(--radius-xl);
  }
  
  .get-started-light {
    color: var(--text);
    background:
      radial-gradient(
        circle at 88% 10%,
        rgba(26, 115, 232, 0.14),
        transparent 34%
      ),
      radial-gradient(
        circle at 5% 90%,
        rgba(52, 168, 83, 0.09),
        transparent 30%
      ),
      linear-gradient(
        135deg,
        #f7fbff 0%,
        #ffffff 48%,
        #f3f7ff 100%
      );
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-md);
  }
  
  .get-started-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .get-started-decoration > span {
    position: absolute;
    border: 1px solid rgba(26, 115, 232, 0.14);
    border-radius: 50%;
  }
  
  .get-started-decoration > span:nth-child(1) {
    top: -100px;
    right: 19%;
    width: 220px;
    height: 220px;
  }
  
  .get-started-decoration > span:nth-child(2) {
    right: -90px;
    bottom: 8%;
    width: 270px;
    height: 270px;
  }
  
  .get-started-decoration > span:nth-child(3) {
    bottom: -130px;
    left: 8%;
    width: 260px;
    height: 260px;
  }
  
  .get-started-route {
    position: absolute;
    right: -30px;
    bottom: 0;
    width: 51%;
    opacity: 0.11;
    animation: routeDecorationFloat 11s ease-in-out infinite;
  }
  
  .get-started-route-secondary {
    position: absolute;
    bottom: 4%;
    left: -60px;
    width: 330px;
    opacity: 0.1;
    animation: routeDecorationFloat 13s ease-in-out infinite reverse;
  }
  
  .cta-star {
    position: absolute;
    width: 24px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.8s ease-in-out infinite;
  }
  
  .cta-star-one {
    top: 14%;
    left: 45%;
  }
  
  .cta-star-two {
    top: 18%;
    right: 5%;
    animation-delay: -2s;
  }
  
  .cta-star-three {
    bottom: 13%;
    left: 4%;
    width: 18px;
    animation-delay: -4s;
  }
  
  .cta-star-four {
    right: 33%;
    bottom: 10%;
    width: 18px;
    animation-delay: -1s;
  }
  
  .get-started-copy,
  .get-started-visual {
    position: relative;
    z-index: 2;
  }
  
  .get-started-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 14px;
    color: var(--blue-strong);
    background: rgba(235, 244, 255, 0.96);
    border: 1px solid rgba(26, 115, 232, 0.24);
    border-radius: var(--radius-pill);
    font-size: 0.79rem;
    font-weight: 860;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  
  .get-started-label img {
    width: 25px;
    height: 25px;
    object-fit: contain;
  }
  
  .get-started h2 {
    margin-top: 20px;
    color: var(--ink);
    font-size: clamp(2.35rem, 4vw, 4.1rem);
    font-weight: 880;
  }
  
  .get-started h2 strong {
    display: block;
    color: var(--blue);
  }
  
  .get-started-copy > p {
    max-width: 650px;
    margin-top: 20px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .get-started-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
  }
  
  .button-light {
    color: #ffffff;
    background:
      linear-gradient(
        135deg,
        var(--blue),
        #347fff
      );
    box-shadow: var(--shadow-blue);
  }
  
  .button-light svg {
    color: #ffffff;
  }
  
  .button-glass {
    color: var(--blue);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(26, 115, 232, 0.25);
    box-shadow: var(--shadow-xs);
  }
  
  .get-started-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }
  
  .get-started-badges img {
    width: auto;
    height: 32px;
    padding: 5px 9px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
  }
  
  .get-started-visual {
    min-height: 440px;
  }
  
  .download-screen-back,
  .download-screen-front {
    position: absolute;
    max-height: 420px;
    object-fit: contain;
    filter:
      drop-shadow(0 28px 32px rgba(14, 39, 75, 0.2));
  }
  
  .download-screen-back {
    top: 8%;
    left: 2%;
    z-index: 2;
    width: 52%;
    transform: rotate(-5deg);
    animation: phoneFeatureFloat 6.5s ease-in-out infinite;
  }
  
  .download-screen-front {
    top: 0;
    right: 9%;
    z-index: 3;
    width: 52%;
    transform: rotate(4deg);
    animation: phoneFeatureFloat 6.1s ease-in-out infinite reverse;
  }
  
  .download-live-card {
    position: absolute;
    right: 0;
    bottom: 12%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 230px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    animation: guideCardFloat 6s ease-in-out infinite;
  }
  
  .download-live-card > img {
    width: 23px;
    height: 23px;
    object-fit: contain;
  }
  
  .download-live-card strong,
  .download-live-card small {
    display: block;
  }
  
  .download-live-card strong {
    font-size: 0.86rem;
  }
  
  .download-live-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.74rem;
  }
  
  /* =========================================================
     26. NEWSLETTER
     ========================================================= */
  
  .newsletter {
    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      minmax(380px, 0.9fr);
    align-items: center;
    gap: 22px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .newsletter-floating-star {
    position: absolute;
    top: 16px;
    right: 26px;
    width: 18px;
    animation:
      sectionStarFloat 4.6s ease-in-out infinite,
      starGlow 2.5s ease-in-out infinite;
  }
  
  .newsletter-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  
  .newsletter-copy > span {
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 880;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  .newsletter-copy h2 {
    margin-top: 4px;
    font-size: 1.35rem;
  }
  
  .newsletter-copy p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.82rem;
  }
  
  .newsletter-form {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      auto;
    gap: 10px;
  }
  
  .newsletter-form input {
    width: 100%;
    min-height: 53px;
    padding: 0 17px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: none;
    transition:
      border-color 200ms ease,
      box-shadow 200ms ease;
  }
  
  .newsletter-form input:focus {
    border-color: rgba(26, 115, 232, 0.55);
    box-shadow:
      0 0 0 4px rgba(26, 115, 232, 0.1);
  }
  
  .newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 53px;
    padding: 0 19px;
    color: #ffffff;
    background: var(--blue);
    border-radius: 14px;
    font-weight: 820;
    cursor: pointer;
    transition:
      transform 200ms ease,
      background 200ms ease;
  }
  
  .newsletter-form button:hover {
    background: var(--blue-strong);
    transform: translateY(-2px);
  }
  
  .newsletter-form button svg {
    width: 21px;
    height: 21px;
  }
  
  .form-message {
    grid-column: 1 / -1;
    min-height: 20px;
    color: var(--green-strong);
    font-size: 0.76rem;
  }
  
  .form-message.is-error {
    color: var(--red);
  }
  
  /* =========================================================
     27. LIGHT FOOTER
     ========================================================= */
  
  .site-footer {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-top: 24px;
    border-radius: var(--radius-xl);
  }
  
  .site-footer-light {
    color: var(--text);
    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(26, 115, 232, 0.1),
        transparent 34%
      ),
      radial-gradient(
        circle at 0% 100%,
        rgba(52, 168, 83, 0.06),
        transparent 30%
      ),
      linear-gradient(
        145deg,
        #ffffff,
        #f5f9ff
      );
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-md);
  }
  
  .footer-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .footer-route {
    position: absolute;
    right: -30px;
    bottom: 10%;
    width: 340px;
    opacity: 0.09;
    animation: routeDecorationFloat 13s ease-in-out infinite;
  }
  
  .footer-star {
    position: absolute;
    width: 20px;
    animation:
      sectionStarFloat 5s ease-in-out infinite,
      starGlow 2.8s ease-in-out infinite;
  }
  
  .footer-star-one {
    top: 14%;
    left: 4%;
  }
  
  .footer-star-two {
    top: 18%;
    right: 5%;
    width: 25px;
    animation-delay: -2s;
  }
  
  .footer-star-three {
    bottom: 18%;
    left: 46%;
    width: 17px;
    animation-delay: -4s;
  }
  
  .footer-star-four {
    right: 22%;
    bottom: 9%;
    width: 17px;
    animation-delay: -1s;
  }
  
  .footer-color-line {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 5px;
  }
  
  .footer-color-line span:nth-child(1) {
    background: var(--blue);
  }
  
  .footer-color-line span:nth-child(2) {
    background: var(--red);
  }
  
  .footer-color-line span:nth-child(3) {
    background: var(--yellow);
  }
  
  .footer-color-line span:nth-child(4) {
    background: var(--green);
  }
  
  .footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      1.3fr
      0.65fr
      0.65fr
      1fr;
    gap: clamp(26px, 4vw, 58px);
    padding:
      clamp(34px, 5vw, 64px);
  }
  
  .footer-about > img {
    width: 160px;
    max-height: 52px;
    object-fit: contain;
    object-position: left center;
  }
  
  .footer-about > p {
    max-width: 390px;
    margin-top: 18px;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.62;
  }
  
  .footer-about > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: var(--blue-strong);
    font-size: 0.88rem;
    font-weight: 800;
  }
  
  .footer-about > a img {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }
  
  .footer-links h2,
  .footer-download h2 {
    font-size: 1rem;
    letter-spacing: -0.01em;
  }
  
  .footer-links {
    display: grid;
    align-content: start;
    gap: 11px;
  }
  
  .footer-links h2 {
    margin-bottom: 5px;
  }
  
  .footer-links a {
    color: var(--text);
    font-size: 0.84rem;
    transition:
      color 180ms ease,
      transform 180ms ease;
  }
  
  .footer-links a:hover {
    color: var(--blue);
    transform: translateX(3px);
  }
  
  .footer-download > p {
    margin-top: 13px;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.55;
  }
  
  .footer-platform-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px;
  }
  
  .footer-platform-logos img {
    width: auto;
    height: 31px;
    padding: 4px 8px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 9px;
  }
  
  .footer-store-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
  }
  
  .footer-store-links img {
    width: auto;
    height: 38px;
    object-fit: contain;
  }
  
  .footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
    padding: 16px clamp(34px, 5vw, 64px);
    color: var(--muted);
    background: rgba(242, 247, 255, 0.78);
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
  }
  
  /* =========================================================
     28. BACK TO TOP
     ========================================================= */
  
  .go-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transform: translateY(18px);
    transition:
      opacity 220ms ease,
      visibility 220ms ease,
      transform 220ms ease;
  }
  
  .go-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .go-top:hover {
    transform: translateY(-4px);
  }
  
  .go-top img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }
  
  [data-live-dot] {
    animation: liveDotPulse 1.7s ease-in-out infinite;
  }
  
  /* =========================================================
     29. KEYFRAMES
     ========================================================= */
  
  @keyframes backgroundOrbFloat {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        scale(1);
    }
  
    50% {
      transform:
        translate3d(22px, -18px, 0)
        scale(1.04);
    }
  }
  
  @keyframes starFieldDrift {
    0% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg);
    }
  
    50% {
      transform:
        translate3d(10px, -14px, 0)
        rotate(2deg);
    }
  
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg);
    }
  }
  
  @keyframes cloudDrift {
    0%,
    100% {
      transform: translateX(0);
    }
  
    50% {
      transform: translateX(32px);
    }
  }
  
  @keyframes routeBackgroundDrift {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(-2deg);
    }
  
    50% {
      transform:
        translate3d(18px, -8px, 0)
        rotate(2deg);
    }
  }
  
  @keyframes globalStarFloat {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg);
    }
  
    50% {
      transform:
        translate3d(6px, -15px, 0)
        rotate(14deg);
    }
  }
  
  @keyframes starGlow {
    0%,
    100% {
      opacity: 0.56;
      filter:
        drop-shadow(0 0 0 rgba(249, 171, 0, 0));
    }
  
    50% {
      opacity: 1;
      filter:
        drop-shadow(0 0 8px rgba(249, 171, 0, 0.42));
    }
  }
  
  @keyframes heroStarFloat {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);
    }
  
    50% {
      transform:
        translate3d(6px, -13px, 0)
        rotate(18deg)
        scale(1.08);
    }
  }
  
  @keyframes mapPinFloat {
    0%,
    100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-11px);
    }
  }
  
  @keyframes pinPulse {
    0%,
    100% {
      filter:
        drop-shadow(0 0 0 rgba(26, 115, 232, 0));
    }
  
    50% {
      filter:
        drop-shadow(0 8px 10px rgba(26, 115, 232, 0.24));
    }
  }
  
  @keyframes pinPulseGreen {
    0%,
    100% {
      filter:
        drop-shadow(0 0 0 rgba(52, 168, 83, 0));
    }
  
    50% {
      filter:
        drop-shadow(0 8px 11px rgba(52, 168, 83, 0.28));
    }
  }
  
  @keyframes giftCardFloat {
    0%,
    100% {
      transform:
        translateY(0)
        rotate(-0.5deg);
    }
  
    50% {
      transform:
        translateY(-10px)
        rotate(0.7deg);
    }
  }
  
  @keyframes giftGlow {
    0%,
    100% {
      opacity: 0.44;
      transform: scale(0.96);
    }
  
    50% {
      opacity: 0.86;
      transform: scale(1.04);
    }
  }
  
  @keyframes particlesDrift {
    0% {
      transform: translateX(-8px);
    }
  
    50% {
      transform: translateX(8px);
    }
  
    100% {
      transform: translateX(-8px);
    }
  }
  
  @keyframes routeDotPulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.78);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.22);
    }
  }
  
  @keyframes walkingCharacterBounce {
    0%,
    100% {
      margin-top: 0;
      rotate: -1deg;
    }
  
    50% {
      margin-top: -5px;
      rotate: 1deg;
    }
  }
  
  @keyframes standingCharacterPulse {
    0%,
    100% {
      margin-top: 0;
    }
  
    50% {
      margin-top: -4px;
    }
  }
  
  @keyframes rewardCharacterCelebrate {
    0%,
    100% {
      margin-top: 0;
      rotate: -1deg;
    }
  
    50% {
      margin-top: -9px;
      rotate: 2deg;
    }
  }
  
  @keyframes startGroundPulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.85);
    }
  
    50% {
      opacity: 0.8;
      transform: scale(1.12);
    }
  }
  
  @keyframes businessArrivalPulse {
    0%,
    100% {
      transform: scale(0.94);
    }
  
    50% {
      transform: scale(1.06);
    }
  }
  
  @keyframes reviewGlowPulse {
    0%,
    100% {
      transform:
        translateX(-50%)
        scale(0.92);
    }
  
    50% {
      transform:
        translateX(-50%)
        scale(1.12);
    }
  }
  
  @keyframes celebrationStarBurst {
    0%,
    100% {
      transform:
        translateY(0)
        rotate(0deg)
        scale(0.88);
    }
  
    50% {
      transform:
        translateY(-10px)
        rotate(18deg)
        scale(1.15);
    }
  }
  
  @keyframes confettiFall {
    0% {
      opacity: 0;
      transform:
        translateY(-6px)
        rotate(0deg);
    }
  
    20% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      transform:
        translateY(95px)
        rotate(260deg);
    }
  }
  
  @keyframes liveStatusPulse {
    0%,
    100% {
      box-shadow:
        0 0 0 0 rgba(52, 168, 83, 0.35);
    }
  
    50% {
      box-shadow:
        0 0 0 7px rgba(52, 168, 83, 0);
    }
  }
  
  @keyframes journeyMessagePulse {
    0%,
    100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-5px);
    }
  }
  
  @keyframes sectionStarFloat {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(0deg);
    }
  
    50% {
      transform:
        translate3d(5px, -12px, 0)
        rotate(14deg);
    }
  }
  
  @keyframes routeDecorationFloat {
    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        rotate(-2deg);
    }
  
    50% {
      transform:
        translate3d(12px, -7px, 0)
        rotate(2deg);
    }
  }
  
  @keyframes bridgePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: var(--shadow-md);
    }
  
    50% {
      transform: scale(1.05);
      box-shadow: var(--shadow-blue);
    }
  }
  
  @keyframes guideCardFloat {
    0%,
    100% {
      transform:
        perspective(900px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(var(--card-lift));
    }
  
    50% {
      transform:
        perspective(900px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(calc(var(--card-lift) - 4px));
    }
  }
  
  @keyframes badgePulse {
    0%,
    100% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.08);
    }
  }
  
  @keyframes benefitGlow {
    0%,
    100% {
      opacity: 0.65;
      transform: scale(0.96);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.06);
    }
  }
  
  @keyframes phoneFeatureFloat {
    0%,
    100% {
      translate: 0 0;
    }
  
    50% {
      translate: 0 -11px;
    }
  }
  
  @keyframes featureGlow {
    0%,
    100% {
      opacity: 0.65;
      transform: scale(0.96);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }
  
  @keyframes processTravellerMove {
    0%,
    100% {
      top: 2%;
      right: 5%;
      transform: rotate(3deg);
    }
  
    50% {
      top: 73%;
      right: 78%;
      transform: rotate(-4deg);
    }
  }
  
  @keyframes processBusinessPulse {
    0%,
    100% {
      opacity: 0.11;
      transform: scale(0.96);
    }
  
    50% {
      opacity: 0.19;
      transform: scale(1.03);
    }
  }
  
  @keyframes contributionPop {
    0%,
    100% {
      opacity: 0.72;
      transform: scale(0.9);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }
  
  @keyframes giftBounce {
    0%,
    100% {
      transform:
        translateY(0)
        scale(1);
    }
  
    50% {
      transform:
        translateY(-9px)
        scale(1.03);
    }
  }
  
  @keyframes processImageFloat {
    0%,
    100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-8px);
    }
  }
  
  @keyframes liveDotPulse {
    0%,
    100% {
      opacity: 0.64;
      transform: scale(0.94);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }
  
  /* =========================================================
     30. RESPONSIVE — 1280PX
     ========================================================= */
  
  @media (max-width: 1280px) {
    :root {
      --page-width: 1220px;
    }
  
    .header-inner {
      grid-template-columns:
        minmax(210px, 1fr)
        auto
        minmax(160px, 1fr);
    }
  
    .primary-navigation {
      gap: 20px;
    }
  
    .hero-top-layout {
      grid-template-columns:
        minmax(0, 0.9fr)
        minmax(520px, 1.1fr);
      gap: 34px;
    }
  
    .hero-phone-stage {
      height: 590px;
    }
  
    .hero-phone-left {
      left: 4%;
    }
  
    .hero-phone-right {
      right: 1%;
    }
  
    .hero-amazon-reward {
      grid-template-columns:
        minmax(160px, 0.72fr)
        minmax(250px, 1.28fr);
    }
  
    .journey-discover-stage {
      width: 225px;
    }
  
    .journey-discover-bubble {
      width: 180px;
    }
  
    .journey-reward {
      width: 220px;
    }
  
    .journey-stage-label {
      max-width: 245px;
    }
  
    .benefit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .benefit-card {
      min-height: 280px;
    }
  
    .footer-main {
      grid-template-columns:
        1.2fr
        0.65fr
        0.65fr
        0.9fr;
    }
  }
  
  /* =========================================================
     31. RESPONSIVE — 1100PX
     ========================================================= */
  
  @media (max-width: 1100px) {
    :root {
      --header-height: 76px;
    }
  
    .page-shell {
      padding-top: calc(var(--header-height) + 36px);
    }
  
    .site-header {
      top: 10px;
    }
  
    .header-inner {
      grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;
      min-height: 76px;
    }
  
    .primary-navigation {
      position: fixed;
      top: 98px;
      right: 17px;
      left: 17px;
      display: grid;
      gap: 4px;
      padding: 17px;
      opacity: 0;
      visibility: hidden;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow-lg);
      transform: translateY(-15px);
      transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease;
    }
  
    .primary-navigation.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  
    .primary-navigation a {
      padding: 12px 13px;
      border-radius: 12px;
    }
  
    .primary-navigation a:hover {
      background: var(--blue-soft);
      transform: none;
    }
  
    .primary-navigation a::after {
      display: none;
    }
  
    .nav-toggle {
      display: grid;
      justify-self: end;
    }
  
    .header-cta {
      min-height: 46px;
      padding: 0 17px;
    }
  
    .hero-top-layout {
      grid-template-columns: 1fr;
    }
  
    .hero-copy {
      width: min(780px, 100%);
    }
  
    .hero-lead {
      max-width: 760px;
    }
  
    .hero-visual {
      width: min(780px, 100%);
      margin: 0 auto;
    }
  
    .hero-phone-stage {
      height: 640px;
    }
  
    .hero-phone-main {
      width: 285px;
    }
  
    .hero-phone-left,
    .hero-phone-right {
      width: 235px;
    }
  
    .hero-phone-left {
      left: 7%;
    }
  
    .hero-phone-right {
      right: 5%;
    }
  
    .hero-amazon-reward {
      margin-top: -5px;
    }
  
    .impact-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .hero-journey-v26 {
      min-height: 430px;
    }
  
    .hero-journey-stage {
      min-height: 365px;
    }
  
    .journey-discover-stage {
      top: 72px;
    }
  
    .journey-business {
      top: 88px;
    }
  
    .journey-reward {
      top: 72px;
    }
  
    .journey-stage-label {
      bottom: 12px;
      max-width: 230px;
    }
  
    .reward-story-grid,
    .about,
    .verified-contributions,
    .get-started {
      grid-template-columns: 1fr;
    }
  
    .gift-card-visual {
      min-height: 520px;
    }
  
    .gift-image-shell {
      min-height: 420px;
    }
  
    .win-win-panel {
      grid-template-columns: 1fr;
    }
  
    .mapply-bridge {
      grid-template-columns:
        1fr
        auto
        auto
        1fr;
      align-items: center;
    }
  
    .mapply-bridge > span {
      width: 100%;
      height: 2px;
    }
  
    .outcome-card {
      min-height: auto;
    }
  
    .guide-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .features-layout {
      grid-template-columns: 1fr;
    }
  
    .feature-column {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .features-phone {
      grid-row: 2;
      min-height: 500px;
    }
  
    .about-visual,
    .contribution-visual {
      width: min(690px, 100%);
      margin: 0 auto;
    }
  
    .benefit-plan-grid {
      grid-template-columns: 1fr;
    }
  
    .benefit-plan {
      min-height: 420px;
    }
  
    .benefit-plan-featured {
      transform:
        perspective(900px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(var(--card-lift));
    }
  
    .get-started-visual {
      width: min(660px, 100%);
      margin: 0 auto;
    }
  
    .newsletter {
      grid-template-columns:
        auto
        minmax(0, 1fr);
    }
  
    .newsletter-form {
      grid-column: 1 / -1;
    }
  
    .footer-main {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  /* =========================================================
     32. RESPONSIVE — 820PX
     ========================================================= */
  
  @media (max-width: 820px) {
    :root {
      --card-padding: 26px;
    }
  
    .page-shell,
    .site-header {
      width: min(calc(100% - 20px), var(--page-width));
    }
  
    .brand-logo {
      width: 39px;
    }
  
    .brand-copy strong {
      font-size: 1.08rem;
    }
  
    .brand-copy small {
      font-size: 0.66rem;
    }
  
    .header-cta span {
      display: none;
    }
  
    .header-cta {
      width: 48px;
      min-width: 48px;
      padding: 0;
    }
  
    .hero {
      padding: 26px 20px;
    }
  
    .hero-eyebrow {
      font-size: 0.74rem;
    }
  
    .eyebrow-level {
      width: 49px;
    }
  
    .hero-stars {
      align-items: flex-start;
      flex-direction: column;
      gap: 7px;
    }
  
    .hero-phone-stage {
      height: 535px;
    }
  
    .hero-phone-main {
      width: 225px;
    }
  
    .hero-phone-left,
    .hero-phone-right {
      top: 58px;
      width: 178px;
    }
  
    .hero-phone-left {
      left: 1%;
    }
  
    .hero-phone-right {
      right: 0;
    }
  
    .hero-amazon-reward {
      grid-template-columns: 1fr;
      margin-top: 0;
      text-align: center;
    }
  
    .hero-amazon-label {
      justify-content: center;
    }
  
    .hero-amazon-copy p {
      max-width: 340px;
      margin-right: auto;
      margin-left: auto;
    }
  
    .hero-journey-v26 {
      min-height: 830px;
    }
  
    .hero-journey-stage {
      min-height: 760px;
    }
  
    .journey-route-desktop {
      display: none;
    }
  
    .journey-route-mobile {
      display: block;
      top: 25px;
      right: auto;
      bottom: auto;
      left: 0;
      width: 145px;
      height: 710px;
    }
  
    .journey-discover-stage {
      top: 45px;
      right: 20px;
      left: 20px;
      width: auto;
      min-height: 170px;
    }
  
    .journey-start-pin {
      bottom: auto;
      top: 10px;
      left: 2px;
      width: 61px;
    }
  
    .journey-discover-bubble {
      top: 6px;
      right: 0;
      left: 76px;
      width: min(235px, calc(100% - 85px));
    }
  
    .journey-start-pulse {
      top: 72px;
      bottom: auto;
      left: 13px;
    }
  
    .journey-character {
      width: 92px;
    }
  
    .journey-character-reward.is-active {
      width: 112px;
    }
  
    .journey-business {
      top: 286px;
      right: 24px;
      left: auto;
      width: 210px;
      transform: none;
    }
  
    .journey-review-sequence {
      top: -67px;
      width: 205px;
    }
  
    .journey-review-rating-bubble {
      width: 200px;
    }
  
    .journey-rating-stars-window {
      top: 46px;
      width: 115px;
      height: 27px;
    }
  
    .journey-five-stars {
      width: 115px;
      height: 27px;
    }
  
    .journey-review-submit-success {
      top: 63px;
      width: 175px;
    }
  
    .journey-reward {
      top: 555px;
      right: 20px;
      width: 225px;
    }
  
    .journey-stage-label {
      right: 20px;
      bottom: auto;
      left: 118px;
      max-width: none;
      min-height: 58px;
    }
  
    .journey-stage-label-discover {
      top: 174px;
    }
  
    .journey-stage-label-contribute {
      top: 465px;
      transform: none;
    }
  
    .journey-stage-label-contribute.is-active {
      transform: none;
    }
  
    .journey-stage-label-reward {
      top: 699px;
    }
  
    .journey-live-status {
      top: auto;
      right: 18px;
      bottom: 12px;
      left: 18px;
      justify-content: center;
      transform: none;
    }
  
    .impact-strip {
      grid-template-columns: 1fr;
    }
  
    .screen-gallery {
      grid-template-columns:
        46px
        minmax(0, 1fr)
        46px;
      gap: 6px;
    }
  
    .gallery-arrow {
      width: 43px;
      height: 43px;
    }
  
    .screen-track {
      padding-right: 22px;
      padding-left: 22px;
    }
  
    .app-screen-card {
      flex-basis: 220px;
    }
  
    .guide-grid {
      grid-template-columns: 1fr;
    }
  
    .guide-community-note {
      grid-template-columns:
        auto
        minmax(0, 1fr);
    }
  
    .community-stars {
      grid-column: 1 / -1;
      justify-self: center;
    }
  
    .benefit-grid {
      grid-template-columns: 1fr;
    }
  
    .feature-column {
      grid-template-columns: 1fr;
    }
  
    .features-phone {
      min-height: 440px;
    }
  
    .about-visual {
      min-height: 520px;
    }
  
    .contribution-visual {
      min-height: 530px;
    }
  
    .showcase-step,
    .showcase-reverse {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .showcase-reverse .showcase-copy,
    .showcase-reverse figure {
      grid-column: auto;
      grid-row: auto;
    }
  
    .showcase-step figure,
    .showcase-reverse figure {
      order: -1;
    }
  
    .process-route-layer {
      display: none;
    }
  
    .three-steps-v26 {
      min-height: auto;
    }
  
    .testimonial-slider {
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 8px;
    }
  
    .testimonial-arrow {
      width: 42px;
      height: 42px;
    }
  
    .testimonial-summary {
      grid-template-columns:
        auto
        minmax(0, 1fr);
    }
  
    .summary-count {
      grid-column: 1 / -1;
      min-width: 0;
      padding-top: 15px;
      border-top: 1px solid var(--line);
    }
  
    .testimonial-summary-rating {
      border-right: 0;
    }
  
    .get-started {
      min-height: auto;
    }
  
    .get-started-visual {
      min-height: 420px;
    }
  
    .newsletter {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    .newsletter-icon {
      justify-self: center;
    }
  
    .newsletter-form {
      grid-column: auto;
    }
  
    .footer-main {
      grid-template-columns: 1fr;
    }
  
    .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
      gap: 5px;
    }
  }
  
  /* =========================================================
     33. RESPONSIVE — 600PX
     ========================================================= */
  
  @media (max-width: 600px) {
    :root {
      --header-height: 68px;
      --card-padding: 22px;
    }
  
    body {
      font-size: 15px;
    }
  
    .page-shell {
      padding-top: calc(var(--header-height) + 30px);
    }
  
    .header-inner {
      min-height: 68px;
      padding: 8px 10px;
      border-radius: 21px;
    }
  
    .site-header.is-scrolled .header-inner {
      min-height: 64px;
    }
  
    .brand {
      gap: 7px;
    }
  
    .brand-logo {
      width: 34px;
    }
  
    .brand-copy strong {
      font-size: 1rem;
    }
  
    .brand-copy small {
      max-width: 150px;
    }
  
    .nav-toggle {
      width: 43px;
      height: 43px;
    }
  
    .header-cta {
      width: 43px;
      min-width: 43px;
      min-height: 43px;
    }
  
    .header-cta img {
      width: 19px;
      height: 19px;
    }
  
    .primary-navigation {
      top: 84px;
      right: 10px;
      left: 10px;
    }
  
    .card,
    .get-started,
    .site-footer {
      border-radius: 25px;
    }
  
    .section-heading {
      margin-bottom: 34px;
    }
  
    .section-kicker {
      min-height: 34px;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
    }
  
    .hero {
      padding: 23px 18px;
    }
  
    .hero-eyebrow {
      display: grid;
      grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
      width: 100%;
      gap: 7px;
      padding: 6px 9px;
    }
  
    .hero-stars > img {
      width: 105px;
    }
  
    .hero h1 {
      margin-top: 18px;
      font-size: clamp(2.3rem, 13vw, 3.75rem);
    }
  
    .hero-lead {
      margin-top: 20px;
      font-size: 0.94rem;
    }
  
    .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
    }
  
    .hero-actions .button {
      width: 100%;
    }
  
    .hero-platform-badges {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .hero-platform-badges span {
      padding: 7px 9px;
    }
  
    .hero-platform-badges img {
      max-width: 100%;
      height: 23px;
    }
  
    .hero-phone-stage {
      height: 445px;
    }
  
    .hero-phone-main {
      width: 182px;
      border-width: 3px;
      border-radius: 29px;
    }
  
    .hero-phone-left,
    .hero-phone-right {
      top: 51px;
      width: 141px;
      border-width: 3px;
      border-radius: 25px;
    }
  
    .hero-phone-left {
      left: -1%;
    }
  
    .hero-phone-right {
      right: -1%;
    }
  
    .phone-speaker {
      top: 8px;
      height: 5px;
    }
  
    .phone-camera {
      top: 8px;
      width: 5px;
      height: 5px;
    }
  
    .hero-map-pin {
      width: 28px;
    }
  
    .hero-map-pin.pin-two {
      top: 184px;
    }
  
    .hero-map-pin.pin-three {
      top: 288px;
    }
  
    .hero-amazon-reward {
      padding: 18px;
    }
  
    .hero-amazon-visual {
      min-height: 150px;
    }
  
    .hero-amazon-card {
      max-height: 150px;
    }
  
    .hero-journey-v26 {
      min-height: 840px;
    }
  
    .hero-journey-stage {
      min-height: 775px;
    }
  
    .journey-discover-stage {
      right: 12px;
      left: 12px;
    }
  
    .journey-route-mobile {
      width: 126px;
    }
  
    .journey-discover-bubble {
      left: 68px;
    }
  
    .journey-character {
      width: 82px;
    }
  
    .journey-character-reward.is-active {
      width: 102px;
    }
  
    .journey-business {
      top: 294px;
      right: 12px;
      width: 195px;
    }
  
    .journey-review-sequence {
      top: -65px;
      width: 190px;
    }
  
    .journey-review-rating-bubble {
      width: 185px;
    }
  
    .journey-rating-stars-window {
      top: 43px;
      width: 107px;
      height: 25px;
    }
  
    .journey-five-stars {
      width: 107px;
      height: 25px;
    }
  
    .journey-review-submit-success {
      top: 59px;
      width: 162px;
    }
  
    .journey-reward {
      top: 565px;
      right: 12px;
      width: 205px;
    }
  
    .journey-stage-label {
      right: 12px;
      left: 104px;
      padding: 7px 9px;
    }
  
    .journey-stage-label-discover {
      top: 178px;
    }
  
    .journey-stage-label-contribute {
      top: 472px;
    }
  
    .journey-stage-label-reward {
      top: 710px;
    }
  
    .journey-stage-label strong {
      font-size: 0.71rem;
    }
  
    .journey-stage-label small {
      font-size: 0.59rem;
    }
  
    .impact-strip article {
      min-height: 84px;
    }
  
    .impact-icon {
      width: 46px;
      height: 46px;
    }
  
    .eligibility-note {
      grid-template-columns:
        auto
        minmax(0, 1fr);
    }
  
    .eligibility-level {
      grid-column: 1 / -1;
      justify-self: center;
    }
  
    .reward-steps li {
      grid-template-columns:
        auto
        minmax(0, 1fr);
      align-items: start;
    }
  
    .reward-step-number {
      position: absolute;
      top: 13px;
      right: 15px;
      font-size: 1.3rem;
    }
  
    .gift-image-shell {
      min-height: 310px;
    }
  
    .gift-card-visual {
      min-height: 410px;
    }
  
    .gift-card-visual figcaption {
      align-items: flex-start;
    }
  
    .guide-profile {
      grid-template-columns:
        76px
        minmax(0, 1fr);
      gap: 16px;
      min-height: 112px;
      padding: 17px 18px;
    }
  
    .guide-avatar-wrap {
      width: 76px;
      height: 76px;
      min-width: 76px;
    }
  
    .guide-avatar-wrap > img:first-child {
      width: 76px;
      height: 76px;
    }
  
    .guide-avatar-wrap .guide-local-badge {
      right: -5px;
      bottom: -5px;
      width: 32px;
      height: 32px;
      min-width: 32px;
      max-width: 32px;
    }
  
    .benefit-card {
      min-height: 270px;
      padding: 21px;
    }
  
    .benefit-icon {
      width: 60px;
      height: 60px;
    }
  
    .about-stats {
      grid-template-columns: 1fr;
    }
  
    .about-visual {
      min-height: 430px;
    }
  
    .about-frame {
      width: 75%;
    }
  
    .about-screen {
      width: 67%;
    }
  
    .about-floating-rating {
      width: 125px;
    }
  
    .contribution-visual {
      min-height: 450px;
    }
  
    .modern-main {
      width: 70%;
    }
  
    .modern-side {
      width: 42%;
    }
  
    .contribution-live-chip-lower {
      right: 2%;
      bottom: 5%;
    }
  
    .showcase-step {
      min-height: auto;
      padding: 22px;
    }
  
    .testimonial-slider {
      grid-template-columns: 1fr;
    }
  
    .testimonial-arrow {
      position: absolute;
      top: 50%;
      z-index: 9;
      transform: translateY(-50%);
    }
  
    .testimonial-prev {
      left: -12px;
    }
  
    .testimonial-next {
      right: -12px;
    }
  
    .testimonial-card {
      min-height: 390px;
      padding: 26px 32px;
    }
  
    .testimonial-card blockquote {
      font-size: 1.12rem;
    }
  
    .testimonial-summary {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    .summary-community-avatars {
      justify-content: center;
      padding-left: 0;
    }
  
    .testimonial-summary-rating {
      border-right: 0;
    }
  
    .summary-stars {
      margin: 0 auto;
    }
  
    .benefit-plan {
      min-height: auto;
      padding: 23px;
    }
  
    .featured-label {
      position: static;
      align-self: flex-start;
      margin-bottom: 14px;
    }
  
    .get-started {
      padding: 26px 21px;
    }
  
    .get-started h2 {
      font-size: 2.4rem;
    }
  
    .get-started-actions {
      display: grid;
      grid-template-columns: 1fr;
    }
  
    .get-started-actions .button {
      width: 100%;
    }
  
    .get-started-badges {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .get-started-badges img {
      width: 100%;
      height: 34px;
    }
  
    .get-started-visual {
      min-height: 340px;
    }
  
    .download-screen-back,
    .download-screen-front {
      width: 56%;
    }
  
    .download-live-card {
      right: 50%;
      bottom: 0;
      min-width: 220px;
      transform: translateX(50%);
    }
  
    .newsletter-form {
      grid-template-columns: 1fr;
    }
  
    .newsletter-form button {
      width: 100%;
    }
  
    .footer-main {
      padding: 32px 23px;
    }
  
    .footer-bottom {
      padding: 16px 23px;
    }
  
    .go-top {
      right: 14px;
      bottom: 14px;
      width: 49px;
      height: 49px;
    }
  }
  
  /* =========================================================
     34. RESPONSIVE — 410PX
     ========================================================= */
  
  @media (max-width: 410px) {
    .brand-copy small {
      display: none;
    }
  
    .hero-eyebrow span {
      font-size: 0.66rem;
    }
  
    .hero-phone-stage {
      height: 405px;
    }
  
    .hero-phone-main {
      width: 160px;
    }
  
    .hero-phone-left,
    .hero-phone-right {
      top: 48px;
      width: 122px;
    }
  
    .hero-amazon-copy h2 {
      font-size: 1.8rem;
    }
  
    .screen-gallery {
      grid-template-columns: 1fr;
    }
  
    .gallery-arrow {
      position: absolute;
      top: 50%;
      z-index: 10;
      transform: translateY(-50%);
    }
  
    .gallery-prev {
      left: -6px;
    }
  
    .gallery-next {
      right: -6px;
    }
  
    .screen-track {
      padding-right: 38px;
      padding-left: 38px;
    }
  
    .app-screen-card {
      flex-basis: 200px;
    }
  
    .gallery-status {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }
  
    .hero-journey-v26 {
      min-height: 865px;
    }
  
    .hero-journey-stage {
      min-height: 800px;
    }
  
    .journey-discover-bubble {
      top: 10px;
      left: 61px;
      width: calc(100% - 68px);
    }
  
    .journey-start-pin {
      width: 55px;
    }
  
    .journey-business {
      top: 310px;
      width: 177px;
    }
  
    .journey-review-sequence {
      top: -60px;
      width: 172px;
    }
  
    .journey-review-rating-bubble {
      width: 170px;
    }
  
    .journey-rating-stars-window {
      top: 40px;
      width: 99px;
      height: 23px;
    }
  
    .journey-five-stars {
      width: 99px;
      height: 23px;
    }
  
    .journey-review-submit-success {
      top: 55px;
      width: 150px;
    }
  
    .journey-reward {
      top: 592px;
      width: 190px;
    }
  
    .journey-stage-label {
      left: 92px;
    }
  
    .journey-stage-label-discover {
      top: 182px;
    }
  
    .journey-stage-label-contribute {
      top: 493px;
    }
  
    .journey-stage-label-reward {
      top: 743px;
    }
  
    .guide-community-note {
      padding: 14px;
    }
  
    .community-stars-large {
      width: 150px;
    }
  
    .about-visual {
      min-height: 370px;
    }
  
    .contribution-visual {
      min-height: 400px;
    }
  
    .download-live-card {
      min-width: 200px;
    }
  }
  
  /* =========================================================
     35. REDUCED MOTION
     ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  
    .js .reveal {
      opacity: 1;
      transform: none;
    }
  
    .journey-character {
      transition: none;
    }
  
    .hero-journey-v26 {
      --star-fill: 100%;
    }
  
    .journey-review-sequence,
    .journey-review-submit-success,
    .journey-reward-celebration {
      transition: none;
    }
  }

/* =========================================================
   VERSION 2.6 — STEP 2 REVIEW ASSETS RIGHT-SIDE FIX
   Business remains centred.
   Rating and submission assets appear on its right.
========================================================= */

.journey-business-clean {
  position: absolute;
  z-index: 25 !important;
  overflow: visible !important;
  isolation: isolate;
}

.journey-business-clean .journey-business-image {
  position: relative;
  z-index: 4;
}

/* Review animation container */

.journey-business-clean .journey-review-sequence-clean {
  position: absolute !important;
  top: 8px !important;
  left: calc(100% + 28px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;

  display: block;
  width: 285px !important;
  height: 190px !important;

  overflow: visible !important;
  pointer-events: none;

  transform: none !important;
}

/* Contribution bubble */

.journey-business-clean
.journey-review-sequence-clean
.journey-review-rating-bubble {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;

  display: block;
  width: 230px !important;
  height: auto !important;
  max-width: none !important;

  object-fit: contain;
  transform: none !important;

  filter:
    drop-shadow(0 10px 18px rgba(49, 78, 132, 0.16));
}

/* Five-star rating position */

.journey-business-clean
.journey-review-sequence-clean
.journey-rating-stars-window {
  position: absolute !important;
  top: 64px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;

  display: block;
  width: 205px !important;
  height: 53px !important;

  overflow: hidden !important;
  transform: none !important;
}

.journey-business-clean
.journey-review-sequence-clean
.journey-five-stars {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  display: block;
  width: 195px !important;
  height: auto !important;
  max-width: none !important;

  object-fit: contain;

  transform: translateY(-50%) !important;

  filter:
    drop-shadow(0 6px 9px rgba(249, 171, 0, 0.28));
}

/* Submitted lines and green tick */

.journey-business-clean
.journey-review-sequence-clean
.journey-submit-success-window {
  position: absolute !important;
  top: 112px !important;
  left: 17px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 9 !important;

  display: block;
  width: 190px !important;
  height: 70px !important;

  overflow: visible !important;
  transform: none !important;
}

.journey-business-clean
.journey-review-sequence-clean
.journey-review-submit-success {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  display: block;
  width: 178px !important;
  height: auto !important;
  max-width: none !important;

  object-fit: contain;

  transform: translateY(-50%) !important;

  filter:
    drop-shadow(0 7px 12px rgba(52, 168, 83, 0.2));
}

/* Soft glow behind the review sequence */

.journey-business-clean
.journey-review-sequence-clean
.journey-review-glow {
  position: absolute !important;
  top: 37px !important;
  left: -10px !important;
  z-index: 1 !important;

  width: 250px !important;
  height: 145px !important;

  opacity: 0.65;

  background:
    radial-gradient(
      circle,
      rgba(249, 171, 0, 0.14),
      rgba(249, 171, 0, 0) 70%
    );

  border-radius: 50%;
  filter: blur(10px);
  transform: none !important;
}

/* Ensure surrounding elements do not cover the assets */

.hero-journey-stage,
.journey-route-stage,
.journey-animation-stage {
  overflow: visible;
}

.journey-step-card[data-journey-step="contribute"],
.journey-stage-step[data-journey-step="contribute"] {
  z-index: 8;
}

/* Medium screens */

@media (max-width: 1100px) {
  .journey-business-clean
  .journey-review-sequence-clean {
    top: 5px !important;
    left: calc(100% + 18px) !important;
    width: 235px !important;
    height: 170px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-rating-bubble {
    width: 200px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-rating-stars-window {
    top: 57px !important;
    left: 8px !important;
    width: 180px !important;
    height: 46px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-five-stars {
    width: 170px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-submit-success-window {
    top: 101px !important;
    left: 12px !important;
    width: 165px !important;
    height: 60px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-submit-success {
    width: 155px !important;
  }
}

/* Tablet: move closer to the business */

@media (max-width: 820px) {
  .journey-business-clean
  .journey-review-sequence-clean {
    top: 14px !important;
    left: calc(100% + 8px) !important;
    width: 205px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-rating-bubble {
    width: 175px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-rating-stars-window {
    top: 51px !important;
    width: 157px !important;
    height: 42px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-five-stars {
    width: 150px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-submit-success-window {
    top: 92px !important;
    width: 145px !important;
    height: 56px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-submit-success {
    width: 138px !important;
  }
}

/* Mobile: display beneath the business */

@media (max-width: 600px) {
  .journey-business-clean
  .journey-review-sequence-clean {
    top: calc(100% + 12px) !important;
    left: 50% !important;

    width: 220px !important;
    height: 180px !important;

    transform: translateX(-50%) !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-rating-bubble {
    left: 50% !important;
    width: 190px !important;
    transform: translateX(-50%) !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-rating-stars-window {
    top: 57px !important;
    left: 50% !important;
    width: 168px !important;
    height: 44px !important;
    transform: translateX(-50%) !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-five-stars {
    width: 160px !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-submit-success-window {
    top: 103px !important;
    left: 50% !important;
    width: 155px !important;
    height: 60px !important;
    transform: translateX(-50%) !important;
  }

  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-submit-success {
    width: 148px !important;
  }
}

/* =========================================================
   MAPPLY — COMPACT HEADER
   SAFE FIX — NO HERO OVERLAP
   ========================================================= */

/*
   Original header = 86px.
   New compact header = 68px.
*/

:root {
  --header-height: 68px;
}


/* HEADER POSITION */

.site-header {
  top: 10px !important;
}


/* HEADER CONTAINER */

.header-inner {
  min-height: 68px !important;

  padding:
    7px
    16px !important;

  border-radius: 24px !important;
}


/* SCROLLED HEADER */

.site-header.is-scrolled .header-inner {
  min-height: 64px !important;
}


/* LOGO */

.brand-logo {
  width: 38px !important;
  max-height: 40px !important;
}


/* BRAND TEXT */

.brand {
  gap: 10px !important;
}

.brand-copy {
  gap: 0 !important;
}

.brand-copy strong {
  font-size: 1.16rem !important;
  line-height: 1.05 !important;
}

.brand-copy small {
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}


/* NAVIGATION */

.primary-navigation {
  gap: clamp(17px, 2vw, 30px) !important;
}

.primary-navigation a {
  padding: 0 !important;

  font-size: 0.9rem !important;
}


/* DOWNLOAD BUTTON */

.header-cta {
  min-height: 44px !important;

  padding:
    0
    22px !important;
}


/* =========================================================
   IMPORTANT:
   RESERVE SPACE FOR FIXED HEADER

   Header:
   top = 10px
   height = 68px
   bottom = 78px

   Hero begins around 88px.
   Result = approximately 10px gap.
   ========================================================= */

.page-shell {
  padding-top:
    calc(var(--header-height) + 5px) !important;
}


/* Do not create extra margin above hero */

.hero {
  margin-top: 0 !important;
}


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

@media (max-width: 1100px) {

  :root {
    --header-height: 64px;
  }

  .site-header {
    top: 0px !important;
  }

  .header-inner {
    min-height: 64px !important;

    padding:
      6px
      14px !important;
  }

  .site-header.is-scrolled .header-inner {
    min-height: 60px !important;
  }

  .page-shell {
    padding-top:
      calc(var(--header-height) + 10px) !important;
  }

}

/* =========================================================
   JOURNEY — FINAL REVIEW SPACING
   Rating bubble higher + clear gap before five stars
   Desktop only
   ========================================================= */

@media (min-width: 821px) {

  /* Move route-review-rating-bubble.png upward */

  .hero-journey-v26
  .journey-business
  .journey-review-sequence
  .journey-review-rating-bubble,

  .hero-journey-v26
  .journey-business-clean
  .journey-review-sequence-clean
  .journey-review-rating-bubble {
    top: -38px !important;
  }


  /* Move route-five-stars.png slightly lower */

  .hero-journey-v26
  .journey-business
  .journey-review-sequence
  .journey-rating-stars-window,

  .hero-journey-v26
  .journey-business-clean
  .journey-review-sequence-clean
  .journey-rating-stars-window {
    top: 72px !important;
  }

}

/* =========================================================
   FINAL HEADER — FLUSH TO TOP
   MUST REMAIN LAST IN styles.css
   ========================================================= */

html body .site-header[data-site-header] {
  top: 0 !important;
  margin-top: 0 !important;
}

/* Remove the rounded opening at the top edge */
html body .site-header[data-site-header] .header-inner {
  border-radius: 0 0 24px 24px !important;
}

@media (max-width: 1100px) {
  html body .site-header[data-site-header] {
    top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 820px) {
  html body .site-header[data-site-header] {
    top: 0 !important;
    margin-top: 0 !important;
  }
}