/* ============================================
       CSS CUSTOM PROPERTIES
    ============================================ */
    :root {
      --dark:          #13544E;
      --heading:       #095D40;
      --accent:        #6C9A40;
      --cta:           #008060;
      --lime:          #D3E162;
      --lime-light:    #E4F577;
      --bg:            #FBF7ED;
      --bg-alt:        #E0EDD4;
      --navy:          #212B36;
      --muted:         #637381;
      --white:         #FFFFFF;
      --red:           #FF6B6B;
      --shadow-sm:     0 2px 12px rgba(0,0,0,0.07);
      --shadow-md:     0 8px 32px rgba(0,0,0,0.11);
      --shadow-lg:     0 20px 60px rgba(0,0,0,0.15);
      --r-sm:          8px;
      --r-md:          16px;
      --r-lg:          24px;
      --r-xl:          32px;
      --font-body:     'Inter', sans-serif;
      --font-display:  'Nunito', sans-serif;
      --ease:          all 0.3s cubic-bezier(0.4,0,0.2,1);
    }

/* ============================================
   ANNOUNCEMENT BAR
============================================ */
.announcement-bar {
  background: var(--lime);
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* must be ABOVE .nav which is z-index:1000 */
  transition: var(--ease);
}
.announcement-bar.hidden {
  transform: translateY(-100%);
  pointer-events: none;
}
.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 36px 6px 8px;
  position: relative;
}
.announcement-bar__text {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.4;
}
.announcement-bar__text i {
  color: var(--heading);
  font-size: 12px;
  flex-shrink: 0;
}
.announcement-bar__text a {
  color: var(--heading);
  text-decoration: underline;
  font-weight: 700;
  transition: var(--ease);
}
.announcement-bar__text a:hover {
  color: var(--dark);
}
.announcement-bar__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--heading);
  cursor: pointer;
  border: none;
  transition: var(--ease);
}
.announcement-bar__close:hover {
  background: rgba(0,0,0,0.2);
}


/* ── Announcement bar — mobile ── */
@media (max-width: 600px) {
  .announcement-bar {
    font-size: 11.5px;
  }
  .announcement-bar__inner {
    min-height: 36px;
    padding: 5px 36px 5px 8px;
  }
  .announcement-bar__text {
    gap: 4px;
    font-size: 11.5px;
  }
  /* Hide the bolt icon on very small screens to save space */
  .announcement-bar__text > i:first-child {
    display: none;
  }
}

@media (max-width: 375px) {
  .announcement-bar {
    font-size: 11px;
  }
  .announcement-bar__text {
    gap: 3px;
  }
  /* Shorten the "Claim Now →" link text on tiny screens */
  .announcement-bar__text strong:last-of-type {
    display: none;
  }
}

/* ── Adjust hero padding to account for bar + nav ── */

.hero {
  padding-top: 130px; /* 40px bar + 75px nav + 15px breathing room */
}

/* Also add a reduced padding for when the bar is hidden */
.nav.bar-hidden ~ * .hero,
body.bar-hidden .hero {
  padding-top: 175px;
}

    /* ============================================
       RESET & BASE
    ============================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--font-body); background: var(--bg); color: var(--navy); line-height: 1.6; overflow-x: hidden; }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ============================================
       UTILITIES
    ============================================ */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px; border-radius: var(--r-sm);
      font-weight: 700; font-size: 15px; transition: var(--ease); white-space: nowrap;
    }
    .btn--primary { background: var(--cta); color: var(--white); }
    .btn--primary:hover { background: var(--heading); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,128,96,0.35); }
    .btn--secondary { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); }
    .btn--secondary:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
    .btn--outline { background: transparent; color: var(--cta); border: 2px solid var(--cta); }
    .btn--outline:hover { background: var(--cta); color: var(--white); transform: translateY(-2px); }
    .btn--lime { background: var(--lime); color: var(--heading); }
    .btn--lime:hover { background: var(--lime-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(211,225,98,0.4); }
    .btn--lg { padding: 18px 36px; font-size: 17px; }
    .btn--sm { padding: 10px 20px; font-size: 13px; }
    .btn--full { width: 100%; justify-content: center; }

    .section-label {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--bg-alt); color: var(--heading);
      font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 6px 14px; border-radius: 100px; margin-bottom: 16px;
    }
    .section-label--light { background: rgba(255,255,255,0.15); color: var(--lime); }
    .section-label i { font-size: 10px; }

    .section-title {
      font-family: var(--font-display); font-size: clamp(28px,4vw,48px);
      font-weight: 900; line-height: 1.15; color: var(--heading); margin-bottom: 16px;
    }
    .section-title--white { color: var(--white); }
    .section-title span { color: var(--cta); }
    .section-title span.lime { color: var(--lime); }

    .section-sub { font-size: 18px; color: var(--muted); max-width: 600px; line-height: 1.7; }
    .section-sub--white { color: rgba(255,255,255,0.8); }

    .section-header { text-align: center; margin-bottom: 40px; }
    .section-header .section-sub { margin: 0 auto; }

    /* ============================================
       NAVIGATION
    ============================================ */
    .nav {
      position: fixed; top: 40px; left: 0; right: 0; z-index: 1000;
      background: var(--white); box-shadow: var(--shadow-sm); transition: var(--ease);
    }
    .nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.12); }
    .nav__inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 75px; gap: 32px;
    }
    .nav__logo { flex-shrink: 0; }
    .nav__logo img { width: 190px; height: auto; }

    .nav__menu { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; list-style: none; padding: 0; margin: 0; }
    .nav__item { position: relative; }
    .nav__link {
      display: flex; align-items: center; gap: 4px; padding: 8px 14px;
      font-size: 15px; font-weight: 600; color: var(--navy);
      border-radius: var(--r-sm); transition: var(--ease);
    }
    .nav__link:hover, .nav__link.active { color: var(--cta); background: var(--bg-alt); }
    .nav__link i { font-size: 11px; transition: var(--ease); }
    .nav__item:hover .nav__link i { transform: rotate(180deg); }

    /* Dropdown */
    .nav__dropdown {
      position: absolute; top: calc(100% + 12px); left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
      padding: 28px; opacity: 0; visibility: hidden; transition: var(--ease);
      min-width: 580px; border: 1px solid var(--bg-alt);
    }
    .nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .nav__dropdown--sm { min-width: 320px; }

    .dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .dropdown__col-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
    }
    .dropdown__link {
      display: flex; align-items: center; gap: 10px; padding: 9px 10px;
      border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
      color: var(--navy); transition: var(--ease); margin-bottom: 2px;
    }
    .dropdown__link:hover { background: var(--bg-alt); color: var(--cta); transform: translateX(4px); }
    .dropdown__link i {
      width: 32px; height: 32px; background: var(--bg-alt); border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center; font-size: 13px;
      color: var(--cta); flex-shrink: 0; transition: var(--ease);
    }
    .dropdown__link:hover i { background: var(--cta); color: var(--white); }
    .dropdown__footer {
      border-top: 1px solid var(--bg-alt); margin-top: 20px; padding-top: 16px;
      display: flex; gap: 12px;
    }
    .dropdown__footer a {
      font-size: 13px; font-weight: 600; color: var(--cta);
      display: flex; align-items: center; gap: 4px; transition: var(--ease);
    }
    .dropdown__footer a:hover { color: var(--heading); gap: 8px; }
    .dropdown__featured { background: var(--bg-alt); border-radius: var(--r-sm); padding: 14px; margin-top: 16px; }
    .dropdown__featured-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
    .dropdown__featured-title { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
    .dropdown__featured a { font-size: 12px; font-weight: 700; color: var(--cta); display: flex; align-items: center; gap: 4px; }

    .nav__cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

    /* Mobile toggle */
    .nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
    .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--ease); }

    /* Mobile Nav */
    .nav__mobile {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--white); z-index: 1002; overflow-y: auto;
      padding: 80px 24px 40px; transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .nav__mobile.open { transform: translateX(0); }
    .mobile-nav__item { border-bottom: 1px solid var(--bg-alt); }
    .mobile-nav__link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0; font-size: 16px; font-weight: 600; color: var(--navy);
    }
    .mobile-nav__sub { padding-bottom: 12px; display: none; }
    .mobile-nav__sub.open { display: block; }
    .mobile-nav__sub a {
      display: block; padding: 10px 0 10px 16px; font-size: 14px; color: var(--muted);
      border-left: 2px solid var(--bg-alt); margin-bottom: 4px; transition: var(--ease);
    }
    .mobile-nav__sub a:hover { color: var(--cta); border-color: var(--cta); }
    .mobile-nav__ctas { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
    .mobile-nav__ctas .btn { justify-content: center; width: 100%; }

    /* Mobile close button */
    .nav__mobile-close {
      position: absolute; top: 20px; right: 20px;
      width: 36px; height: 36px; background: var(--bg-alt); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--navy); cursor: pointer;
    }

    /* ============================================
       HERO SECTION
    ============================================ */
    .hero {
  background: var(--dark); padding: 140px 0 70px;
  position: relative; overflow: hidden; min-height: auto; display: flex; align-items: center;
}
    .hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; }
    .hero__blob--1 {
      width: 600px; height: 600px; background: var(--lime);
      top: -200px; right: -100px; animation: blobFloat 8s ease-in-out infinite;
    }
    .hero__blob--2 {
      width: 400px; height: 400px; background: var(--accent);
      bottom: -100px; left: -100px; animation: blobFloat 10s ease-in-out infinite reverse;
    }
    .hero__grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(211,225,98,0.04) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(211,225,98,0.04) 1px,transparent 1px);
      background-size: 60px 60px;
    }
    @keyframes blobFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }

    .hero__inner {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
      align-items: center; position: relative; z-index: 1;
    }
    .hero__badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(211,225,98,0.15); border: 1px solid rgba(211,225,98,0.3);
      color: var(--lime); font-size: 13px; font-weight: 700;
      padding: 8px 16px; border-radius: 100px; margin-bottom: 24px;
    }
    .hero__badge-dot {
      width: 8px; height: 8px; background: var(--lime); border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }

    .hero__title {
      font-family: var(--font-display); font-size: clamp(26px,3.5vw,46px);
      font-weight: 900; line-height: 1.1; color: var(--white);
      margin-bottom: 24px; letter-spacing: -1px;
    }
    .hero__title .highlight {
      color: var(--lime); position: relative; display: inline-block;
    }
    .hero__title .highlight::after {
      content: ''; position: absolute; bottom: 4px; left: 0; right: 0;
      height: 3px; background: var(--lime); border-radius: 2px; opacity: 0.4;
    }
    .hero__sub { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.75; margin-bottom: 40px; max-width: 520px; }
    .hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

    .hero__trust { display: flex; gap: 32px; flex-wrap: wrap; }
    .hero__trust-item { display: flex; flex-direction: column; }
    .hero__trust-number { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--lime); line-height: 1; }
    .hero__trust-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }

    /* Hero Mockup */
    .hero__visual { position: relative; }
    .hero__mockup {
      background: var(--white); border-radius: var(--r-lg);
      box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1);
      overflow: hidden; animation: floatUp 6s ease-in-out infinite;
    }
    @keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .mockup__bar {
      background: #F4F4F4; height: 40px; display: flex; align-items: center;
      padding: 0 16px; gap: 6px; border-bottom: 1px solid #eee;
    }
    .mockup__dot { width: 12px; height: 12px; border-radius: 50%; }
    .mockup__dot--r { background: #FF5F57; }
    .mockup__dot--y { background: #FEBC2E; }
    .mockup__dot--g { background: #28C840; }
    .mockup__url {
      flex: 1; background: var(--white); border-radius: 4px; height: 24px;
      margin-left: 8px; display: flex; align-items: center; padding: 0 10px;
      font-size: 11px; color: var(--muted);
    }
    .mockup__content { padding: 24px; background: var(--bg); }
    .mockup__nav {
      background: var(--dark); border-radius: var(--r-sm); height: 44px;
      margin-bottom: 12px; display: flex; align-items: center; padding: 0 16px; gap: 8px;
    }
    .mockup__nav-logo { width: 100px; height: 12px; background: rgba(255,255,255,0.35); border-radius: 3px; }
    .mockup__nav-links { display: flex; gap: 6px; margin-left: 16px; flex: 1; }
    .mockup__nav-link { width: 36px; height: 8px; background: rgba(255,255,255,0.18); border-radius: 3px; }
    .mockup__nav-btn { width: 60px; height: 20px; background: var(--cta); border-radius: 4px; margin-left: auto; }
    .mockup__hero-block {
      background: var(--white); border-radius: var(--r-sm); padding: 18px; margin-bottom: 12px;
    }
    .mockup__h-title { height: 14px; background: var(--heading); border-radius: 3px; margin-bottom: 8px; width: 75%; }
    .mockup__h-line { height: 8px; background: var(--bg-alt); border-radius: 3px; margin-bottom: 5px; }
    .mockup__h-line.s60 { width: 60%; }
    .mockup__h-line.s80 { width: 80%; }
    .mockup__cta-row { display: flex; gap: 8px; margin-top: 14px; }
    .mockup__btn { height: 28px; border-radius: 5px; flex: 1; }
    .mockup__btn--g { background: var(--cta); }
    .mockup__btn--o { background: transparent; border: 2px solid var(--bg-alt); }
    .mockup__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .mockup__stat { background: var(--white); border-radius: var(--r-sm); padding: 10px; text-align: center; }
    .mockup__stat-n { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--cta); }
    .mockup__stat-l { font-size: 8px; color: var(--muted); margin-top: 2px; }

    /* Floating badges */
    .hero__float {
      position: absolute; background: var(--white); border-radius: var(--r-md);
      padding: 12px 16px; box-shadow: var(--shadow-md);
      display: flex; align-items: center; gap: 10px;
      animation: floatBadge 4s ease-in-out infinite;
    }
    .hero__float--1 { top: -20px; right: -30px; animation-delay: 0s; }
    .hero__float--2 { bottom: 40px; left: -40px; animation-delay: 2s; }
    @keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .hero__float-icon {
      width: 36px; height: 36px; border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .hero__float-icon--g { background: var(--bg-alt); color: var(--cta); }
    .hero__float-icon--l { background: var(--lime); color: var(--heading); }
    .hero__float-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--navy); }
    .hero__float-text span { font-size: 11px; color: var(--muted); }

    /* ============================================
       SOCIAL PROOF BAR
    ============================================ */
    .proof-bar { background: var(--white); padding: 40px 0; border-bottom: 1px solid var(--bg-alt); }
    .proof-bar__inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
    .proof-bar__label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
    .proof-bar__divider { width: 1px; height: 40px; background: var(--bg-alt); flex-shrink: 0; }
    .proof-bar__logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
    .brand-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border: 1.5px solid var(--bg-alt); border-radius: 100px;
      font-size: 13px; font-weight: 600; color: var(--muted); transition: var(--ease);
    }
    .brand-pill:hover { border-color: var(--cta); color: var(--cta); }
    .proof-bar__stats { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
    .proof-stat { text-align: center; }
    .proof-stat__n { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--heading); line-height: 1; }
    .proof-stat__l { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .stars { color: #FBBF24; font-size: 14px; letter-spacing: 1px; }

    /* ============================================
       SERVICES SECTION
    ============================================ */
    .services { padding: 64px 0; background: var(--bg); }
    .services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .service-card {
      background: var(--white); border-radius: var(--r-md); padding: 32px;
      border: 1.5px solid transparent; transition: var(--ease);
      position: relative; overflow: hidden; display: flex; flex-direction: column;
    }
    .service-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--cta), var(--lime));
      transform: scaleX(0); transform-origin: left; transition: var(--ease);
    }
    .service-card:hover { border-color: var(--bg-alt); box-shadow: var(--shadow-md); transform: translateY(-4px); }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card__icon {
      width: 52px; height: 52px; background: var(--bg-alt); border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: var(--cta); margin-bottom: 20px; transition: var(--ease);
    }
    .service-card:hover .service-card__icon { background: var(--cta); color: var(--white); }
    .service-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--heading); margin-bottom: 10px; }
    .service-card__desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; flex: 1; }
    .service-card__link { font-size: 13px; font-weight: 700; color: var(--cta); display: inline-flex; align-items: center; gap: 6px; transition: var(--ease); margin-top: auto; }
    .service-card__link:hover { gap: 10px; color: var(--heading); }
    .service-card__tag {
      position: absolute; top: 16px; right: 16px; background: var(--lime); color: var(--heading);
      font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 100px;
    }

/* ============================================
   TOGGLE SWITCH — PAIN vs SOLUTION SECTION
============================================ */
.toggle-section { padding: 64px 0; background: var(--dark); }

.toggle-section__intro {
  text-align: center;
  margin-bottom: 48px;
}
.toggle-section__intro .section-sub { margin: 0 auto; }

/* Toggle control */
.toggle-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}
.toggle-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--ease);
}
.toggle-label--pain  { color: #FF8A80; }
.toggle-label--fix   { color: var(--lime); }
.toggle-label.inactive { opacity: 0.4; }

.toggle-track {
  width: 64px;
  height: 32px;
  background: rgba(255,107,107,0.3);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: background 0.4s ease;
  border: 1.5px solid rgba(255,107,107,0.4);
  flex-shrink: 0;
}
.toggle-track.active {
  background: rgba(211,225,98,0.25);
  border-color: rgba(211,225,98,0.5);
}
.toggle-thumb {
  width: 24px;
  height: 24px;
  background: #FF8A80;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.toggle-track.active .toggle-thumb {
  transform: translateX(32px);
  background: var(--lime);
}

/* Panels */
.toggle-panels { position: relative; min-height: 380px; }

.toggle-panel {
  display: none;
  animation: fadeInUp 0.4s ease;
}
.toggle-panel.active { display: block; }

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

/* Pain panel header */
.tp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding: 20px 28px;
  border-radius: var(--r-md);
}
.tp-header--pain {
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.2);
}
.tp-header--fix {
  background: rgba(211,225,98,0.08);
  border: 1px solid rgba(211,225,98,0.2);
}
.tp-header-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tp-header-icon--pain { background: rgba(255,107,107,0.15); color: #FF8A80; }
.tp-header-icon--fix  { background: rgba(211,225,98,0.15);  color: var(--lime); }
.tp-header-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
}
.tp-header-text h3.pain-title { color: #FF8A80; }
.tp-header-text h3.fix-title  { color: var(--lime); }
.tp-header-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* Stats strip inside panels */
.tp-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.tp-stat {
  text-align: center;
  padding: 18px 12px;
  border-radius: var(--r-md);
}
.tp-stat--pain {
  background: rgba(255,107,107,0.07);
  border: 1px solid rgba(255,107,107,0.15);
}
.tp-stat--fix {
  background: rgba(211,225,98,0.07);
  border: 1px solid rgba(211,225,98,0.15);
}
.tp-stat-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.tp-stat-num--pain { color: #FF8A80; }
.tp-stat-num--fix  { color: var(--lime); }
.tp-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
  line-height: 1.4;
}

/* Item rows */
.tp-items {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}
.tp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-md);
}
.tp-item--pain {
  background: rgba(255,107,107,0.05);
  border: 1px solid rgba(255,107,107,0.12);
}
.tp-item--fix {
  background: rgba(211,225,98,0.05);
  border: 1px solid rgba(211,225,98,0.12);
}
.tp-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.tp-item-icon--pain { background: rgba(255,107,107,0.15); color: #FF8A80; }
.tp-item-icon--fix  { background: rgba(211,225,98,0.15);  color: var(--lime); }
.tp-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.tp-item-title--pain { color: rgba(255,255,255,0.85); }
.tp-item-title--fix  { color: var(--white); }
.tp-item-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
  line-height: 1.5;
}

/* ============================================
   SCORE CARD CTA — OPTION 4
============================================ */
.scorecard { padding: 56px 0 64px; background: var(--dark); }

.scorecard__wrap {
  background: var(--bg);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.scorecard__wrap::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: var(--lime);
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}

.scorecard__left {}
.scorecard__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); color: var(--heading);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 20px;
}
.scorecard__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  color: var(--heading);
  line-height: 1.15;
  margin-bottom: 16px;
}
.scorecard__title span { color: var(--cta); }
.scorecard__sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 420px;
}
.scorecard__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.scorecard__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
}
.scorecard__check i {
  width: 22px; height: 22px;
  background: var(--bg-alt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: var(--cta);
  flex-shrink: 0;
}
.scorecard__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Right — mock score card visual */
.scorecard__right {}
.score-card-visual {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--bg-alt);
}
.scv__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.scv__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--heading);
}
.scv__badge {
  background: var(--lime);
  color: var(--heading);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

/* Big score dial */
.scv__dial {
  text-align: center;
  margin-bottom: 24px;
}
.scv__dial-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: conic-gradient(var(--cta) 0% 34%, var(--bg-alt) 34% 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  position: relative;
}
.scv__dial-ring::before {
  content: '';
  width: 78px; height: 78px;
  background: var(--white);
  border-radius: 50%;
  position: absolute;
}
.scv__dial-score {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--heading);
  position: relative;
  z-index: 1;
  line-height: 1;
}
.scv__dial-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* Score row items */
.scv__rows { display: flex; flex-direction: column; gap: 10px; }
.scv__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scv__row-label {
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
  width: 130px;
  flex-shrink: 0;
}
.scv__bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-alt);
  border-radius: 100px;
  overflow: hidden;
}
.scv__bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--cta);
}
.scv__bar-fill--warn { background: #FBBF24; }
.scv__bar-fill--danger { background: var(--red); }
.scv__row-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.scv__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-alt);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.scv__footer strong { color: var(--cta); }

/* Responsive */
@media (max-width: 900px) {
  .scorecard__wrap { grid-template-columns: 1fr; gap: 40px; padding: 40px 28px; }
  .tp-items { grid-template-columns: 1fr; }
  .tp-stats { grid-template-columns: repeat(3,1fr); }
  .toggle-section { padding: 52px 0; }
}
@media (max-width: 600px) {
  .tp-stats { grid-template-columns: 1fr; }
  .toggle-control { gap: 12px; }
}

/* ============================================
   OUR PROCESS — HORIZONTAL TIMELINE
============================================ */
.process {
  padding: 100px 0;
  background: var(--bg);
  overflow: hidden;
}

/* ── Timeline wrapper ── */
.process__timeline {
  position: relative;
  margin-top: 60px;
}

/* ── Track (the connecting line) ── */
.process__track {
  position: absolute;
  top: 44px; /* aligns with centre of node circles */
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 3px;
  background: var(--bg-alt);
  border-radius: 3px;
  z-index: 0;
  overflow: hidden;
}
.process__track-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cta), var(--lime));
  border-radius: 3px;
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.process__track-fill.animated {
  width: 100%;
}

/* ── Steps grid ── */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* ── Individual Step ── */
.process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ── Node (numbered circle) ── */
.process__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.process__node-ring {
  position: absolute;
  top: -6px; left: -6px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--bg-alt);
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.process__step:hover .process__node-ring,
.process__step.in-view .process__node-ring {
  border-color: var(--cta);
  transform: scale(1.15);
}
.process__node-inner {
  width: 40px; height: 40px;
  background: var(--white);
  border: 2px solid var(--bg-alt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--cta);
  transition: var(--ease);
  z-index: 1;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.process__step:hover .process__node-inner,
.process__step.in-view .process__node-inner {
  background: var(--cta);
  color: var(--white);
  border-color: var(--cta);
  box-shadow: 0 0 0 6px rgba(0,128,96,0.12);
}
.process__node-inner--lime {
  background: var(--lime) !important;
  color: var(--heading) !important;
  border-color: var(--lime) !important;
}
.process__step:hover .process__node-inner--lime,
.process__step.in-view .process__node-inner--lime {
  background: var(--lime-light) !important;
  box-shadow: 0 0 0 6px rgba(211,225,98,0.2) !important;
}
.process__node-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 1px;
  transition: color 0.3s ease;
}
.process__step:hover .process__node-num,
.process__step.in-view .process__node-num {
  color: var(--cta);
}

/* ── Card ── */
.process__card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 24px;
  border: 1.5px solid var(--bg-alt);
  width: 100%;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
}
.process__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cta), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.process__step:hover .process__card,
.process__step.in-view .process__card {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.process__step:hover .process__card::before,
.process__step.in-view .process__card::before {
  transform: scaleX(1);
}

/* Step 4 — lime card */
.process__card--lime {
  background: var(--dark);
  border-color: rgba(211,225,98,0.25);
}
.process__card--lime::before {
  background: linear-gradient(90deg, var(--lime), var(--lime-light));
}
.process__step:hover .process__card--lime,
.process__step.in-view .process__card--lime {
  border-color: rgba(211,225,98,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* ── Card Tag ── */
.process__card-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-alt);
  color: var(--heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.process__card-tag--dark {
  background: rgba(211,225,98,0.15);
  color: var(--lime);
}

/* ── Card Title ── */
.process__card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 10px;
  line-height: 1.3;
}
.process__card--lime .process__card-title {
  color: var(--white);
}

/* ── Card Description ── */
.process__card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}
.process__card--lime .process__card-desc {
  color: rgba(255,255,255,0.65);
}

/* ── Card List ── */
.process__card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.process__card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
}
.process__card-list li i {
  color: var(--cta);
  font-size: 11px;
  flex-shrink: 0;
}
.process__card-list--dark li {
  color: rgba(255,255,255,0.8);
}
.process__card-list--dark li i {
  color: var(--lime);
}

/* ── Card Result Badge ── */
.process__card-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.process__card-result--dark {
  background: rgba(211,225,98,0.08);
  border: 1px solid rgba(211,225,98,0.2);
}
.process__card-result-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.process__card-result--dark .process__card-result-label {
  color: rgba(255,255,255,0.5);
}
.process__card-result-value {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--cta);
}
.process__card-result--dark .process__card-result-value {
  color: var(--lime);
}

/* ── Bottom CTA ── */
.process__cta {
  margin-top: 60px;
}
.process__cta-inner {
  background: var(--dark);
  border-radius: var(--r-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.process__cta-inner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: var(--lime);
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
}
.process__cta-text h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 8px;
}
.process__cta-text p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .process__track {
    display: none; /* hide horizontal line on 2-col layout */
  }
}
@media (max-width: 640px) {
  .process__steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .process__cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .process__cta-inner .btn {
    width: 100%;
    justify-content: center;
  }
}    


    /* ============================================
       PORTFOLIO
    ============================================ */
    .portfolio { padding: 64px 0; background: var(--dark); }
    .portfolio__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 60px; }
    .case-card {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-md); overflow: hidden; transition: var(--ease);
    }
    .case-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
    .case-card__img {
      height: 200px; position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .case-card__img--fashion { background: linear-gradient(135deg, var(--heading), var(--accent)); }
    .case-card__img--beauty  { background: linear-gradient(135deg, #4A1C40, #8B3A6B); }
    .case-card__img--health  { background: linear-gradient(135deg, #1A3A4A, #2E6B8A); }
    .case-card__store {
      width: 85%; background: var(--white); border-radius: var(--r-sm) var(--r-sm) 0 0;
      padding: 12px; position: absolute; bottom: 0;
    }
    .store__bar { height: 8px; background: var(--heading); border-radius: 4px; margin-bottom: 8px; }
    .store__line { height: 6px; background: var(--bg-alt); border-radius: 4px; margin-bottom: 6px; }
    .store__line.s { width: 60%; }
    .store__btn { height: 20px; width: 80px; background: var(--cta); border-radius: 4px; margin-top: 10px; }
    .case-card__badge { background: var(--lime); color: var(--heading); font-size: 11px; font-weight: 700; padding: 4px 12px; }
    .case-card__body { padding: 24px; }
    .case-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
    .case-card__desc { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 20px; line-height: 1.6; }
    .case-card__metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
    .metric { background: rgba(255,255,255,0.08); border-radius: var(--r-sm); padding: 10px 8px; text-align: center; }
    .metric__n { font-family: var(--font-display); font-size: 17px; font-weight: 900; color: var(--lime); line-height: 1; }
    .metric__l { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 4px; }
    .case-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lime); transition: var(--ease); }
    .case-card__link:hover { gap: 10px; }

    /* ============================================
   CLIENT STORIES — COMBINED (Option 1 + 2 + 3)
============================================ */
.stories { padding: 64px 0; background: var(--bg); }

/* ── Section Header ── */
.stories__header {
  text-align: center;
  margin-bottom: 64px;
}
.stories__header .section-sub { margin: 0 auto; }


/* ══════════════════════════════════════════
   <!-- ══ PART 1: Tabbed by Service ══ -->
══════════════════════════════════════════ */

/* ============================================
   CLIENT STORIES — Tabbed by Service
============================================ */
.stories {
  padding: 100px 0;
  background: var(--bg);
}

/* ── Tabs ── */
.stories-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}

.stories-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--white);
  border: 1.5px solid var(--bg-alt);
  cursor: pointer;
  transition: var(--ease);
  letter-spacing: 0.3px;
}

.stories-tab i {
  font-size: 12px;
}

.stories-tab:hover {
  border-color: var(--cta);
  color: var(--cta);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stories-tab.active {
  background: var(--cta);
  color: var(--white);
  border-color: var(--cta);
  box-shadow: 0 4px 16px rgba(0,128,96,0.3);
}

/* ── Stories Grid ── */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* ── Story Card ── */
.story-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 28px;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cta), var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--ease);
}

.story-card:hover {
  border-color: var(--bg-alt);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.story-card:hover::before {
  transform: scaleX(1);
}

/* hide/show via filter */
.story-card.hidden {
  display: none;
}

/* ── Card Top ── */
.story-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Service Tag ── */
.story-card__service-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-alt);
  color: var(--heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.story-card__service-tag i { font-size: 10px; }

.story-card__service-tag--cro     { background: rgba(99,115,229,0.12); color: #5B67E8; }
.story-card__service-tag--seo     { background: rgba(0,128,96,0.12);   color: var(--cta); }
.story-card__service-tag--redesign{ background: rgba(108,154,64,0.12); color: var(--accent); }
.story-card__service-tag--speed   { background: rgba(251,191,36,0.15); color: #D97706; }
.story-card__service-tag--app     { background: rgba(19,84,78,0.12);   color: var(--dark); }

/* ── Metric ── */
.story-card__metrics {
  flex-shrink: 0;
}

.story-metric {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: column;
  text-align: right;
}

.story-metric__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  line-height: 1;
}

.story-metric__num--green {
  color: var(--cta);
  font-size: 15px;
}

.story-metric__arrow {
  font-size: 12px;
  color: var(--lime);
  font-weight: 900;
}

.story-metric {
  flex-direction: row;
  align-items: center;
}

.story-metric__label {
  display: none; /* shown in result bar instead */
}

/* ── Quote ── */
.story-card__quote {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  font-style: italic;
  position: relative;
  padding-left: 16px;
  border-left: 3px solid var(--lime);
  margin: 0;
  flex: 1;
}

/* ── Author ── */
.story-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-card__avatar {
  width: 40px;
  height: 40px;
  background: var(--dark);
  color: var(--lime);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.story-card__avatar--cro      { background: #5B67E8; color: var(--white); }
.story-card__avatar--seo      { background: var(--cta); color: var(--white); }
.story-card__avatar--redesign { background: var(--accent); color: var(--white); }
.story-card__avatar--speed    { background: #D97706; color: var(--white); }
.story-card__avatar--app      { background: var(--heading); color: var(--lime); }

.story-card__info {
  flex: 1;
}

.story-card__info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.story-card__info span {
  font-size: 12px;
  color: var(--muted);
}

.story-card__stars {
  color: #FBBF24;
  font-size: 13px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ── Result Bar ── */
.story-card__result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  margin-top: auto;
}

.story-card__result-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.story-card__result-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--cta);
}

/* Service-coloured result bars */
.story-card__result-bar--cro      .story-card__result-value { color: #5B67E8; }
.story-card__result-bar--seo      .story-card__result-value { color: var(--cta); }
.story-card__result-bar--redesign .story-card__result-value { color: var(--accent); }
.story-card__result-bar--speed    .story-card__result-value { color: #D97706; }
.story-card__result-bar--app      .story-card__result-value { color: var(--heading); }

/* ── Stats Bar ── */
.stories__stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  background: var(--dark);
  border-radius: var(--r-md);
  padding: 32px 40px;
  margin-bottom: 56px;
}

.stories__stat {
  text-align: center;
}

.stories__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
}

.stories__stat-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}

.stories__stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}


/* ── Empty State ── */
.stories-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  display: none;
}

.stories-empty.visible {
  display: block;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .stories { padding: 64px 0; }
  .stories-grid { grid-template-columns: 1fr; }
  .stories-tabs { gap: 6px; }
  .stories-tab { font-size: 12px; padding: 8px 14px; }
  .stories__stats-bar { padding: 24px 20px; gap: 20px; }
  .stories__stat-divider { display: none; }
  .stories__bottom { padding: 40px 24px; }
  .stories__bottom-ctas { flex-direction: column; align-items: stretch; }
  .stories__bottom-ctas .btn { justify-content: center; }
}

/* ══════════════════════════════════════════
   PART 2 — SCROLLABLE CASE STUDY ROW (Option 3)
   Horizontal scroll strip of case study pills
══════════════════════════════════════════ */
.stories__cases-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.stories__cases-label span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.stories__cases-label::before,
.stories__cases-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg-alt);
}

.stories__scroll-wrap {
  position: relative;

}
.stories__scroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-alt) transparent;
  -webkit-overflow-scrolling: touch;
}
.stories__scroll-track::-webkit-scrollbar { height: 4px; }
.stories__scroll-track::-webkit-scrollbar-track { background: transparent; }
.stories__scroll-track::-webkit-scrollbar-thumb { background: var(--bg-alt); border-radius: 4px; }

.case-pill {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 320px; 
  background: var(--white);
  border-radius: var(--r-md);
  border: 1.5px solid var(--bg-alt);
  overflow: hidden;
  transition: var(--ease);
Box-shadow: var(--shadow-sm);
}
.case-pill:hover {
  border-color: var(--cta);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.case-pill__header {
  height: 120px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}
.case-pill__header--fashion { background: linear-gradient(135deg, var(--heading), var(--accent)); }
.case-pill__header--beauty  { background: linear-gradient(135deg, #4A1C40, #8B3A6B); }
.case-pill__header--health  { background: linear-gradient(135deg, #1A3A4A, #2E6B8A); }
.case-pill__header--home    { background: linear-gradient(135deg, #3A2D1A, #8A6C3A); }
.case-pill__header--sports  { background: linear-gradient(135deg, #1A2D4A, #3A6C8A); }
.case-pill__header--food    { background: linear-gradient(135deg, #2D1A1A, #8A3A3A); }

.case-pill__header-tag {
  background: var(--lime);
  color: var(--heading);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  position: absolute;
  top: 12px;
  left: 14px;
}
.case-pill__header-metric {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: var(--r-sm);
}
.case-pill__header-metric span {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-weight: 400;
  display: block;
  line-height: 1;
  margin-top: -2px;
}

.case-pill__body {
  padding: 18px;
}
.case-pill__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 6px;
}
.case-pill__desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.case-pill__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.case-pill__stat {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  text-align: center;
}
.case-pill__stat-n {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--cta);
  line-height: 1;
}
.case-pill__stat-l {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.case-pill__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--cta);
  transition: var(--ease);
  padding-top: 12px;
  border-top: 1px solid var(--bg-alt);
}
.case-pill__link:hover { color: var(--heading); }
.case-pill__link i { font-size: 10px; transition: var(--ease); }
.case-pill__link:hover i { transform: translateX(4px); }

/* ============================================
   CLIENT STORIES — Bottom CTA Strip Fix
============================================ */

.stories__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--heading);
  border-radius: var(--r-lg);
  padding: 40px 48px;
  margin-top: 60px;

}

.stories__bottom-left {
  flex: 1;
  min-width: 260px;
}

.stories__bottom-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 12px;
}

.stories__bottom-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
}

.stories__bottom-title span {
  color: var(--lime);
}

.stories__bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.stories__bottom-trust {
  text-align: right;
}

.stories__bottom-trust .stars {
  font-size: 16px;
  color: #FBBF24;
  letter-spacing: 2px;
}

.stories__bottom-trust p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 640px) {
  .stories__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
  }

  .stories__bottom-left {
    text-align: center;
  }

  .stories__bottom-right {
    align-items: center;
  }

  .stories__bottom-trust {
    text-align: center;
  }
}
/* ── Responsive ── */
@media (max-width: 1024px) {
  .stories__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stories__featured { grid-template-columns: 1fr; }
  .stories__featured-right { min-height: 260px; }
  .stories__cards { grid-template-columns: 1fr; }
  .stories__bottom { flex-direction: column; text-align: center; }
  .stories__bottom-right { justify-content: center; }
  .stories__bottom-trust { text-align: center; }
  .case-pill { width: 280px; }
}
    /* ============================================
       PRICING
    ============================================ */
    .pricing { padding: 64px 0; background: var(--bg); }
    .pricing__tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; }
    .pricing__tab {
      padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 600;
      color: var(--muted); background: var(--white); border: 1.5px solid var(--bg-alt);
      cursor: pointer; transition: var(--ease);
    }
    .pricing__tab.active, .pricing__tab:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }
    .pricing__panel { display: none; }
    .pricing__panel.active { display: block; }
    .pricing__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }
    .price-card {
      background: var(--white); border-radius: var(--r-md); padding: 36px;
      border: 2px solid transparent; transition: var(--ease); position: relative;
    }
    .price-card:hover { border-color: var(--bg-alt); box-shadow: var(--shadow-md); }
    .price-card--pop { border-color: var(--cta); background: var(--dark); transform: scale(1.04); }
    .price-card--pop:hover { transform: scale(1.04) translateY(-4px); }
    .price-card__badge {
      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
      background: var(--lime); color: var(--heading); font-size: 11px; font-weight: 700;
      letter-spacing: 1px; padding: 4px 16px; border-radius: 100px; white-space: nowrap;
    }
    .price-card__tier { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .price-card--pop .price-card__tier { color: rgba(255,255,255,0.6); }
    .price-card__name { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--heading); margin-bottom: 8px; }
    .price-card--pop .price-card__name { color: var(--lime); }
    .price-card__price { font-family: var(--font-display); font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 4px; }
    .price-card--pop .price-card__price { color: var(--white); }
    .price-card__price sup { font-size: 20px; font-weight: 700; vertical-align: super; }
    .price-card__period { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
    .price-card--pop .price-card__period { color: rgba(255,255,255,0.6); }
    .price-card__divider { height: 1px; background: var(--bg-alt); margin-bottom: 24px; }
    .price-card--pop .price-card__divider { background: rgba(255,255,255,0.1); }
    .price-card__feature { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--navy); }
    .price-card--pop .price-card__feature { color: rgba(255,255,255,0.85); }
    .price-card__feature i { color: var(--cta); margin-top: 2px; flex-shrink: 0; }
    .price-card--pop .price-card__feature i { color: var(--lime); }
    .price-card__cta { margin-top: 28px; text-align: center; }
    .price-card__cta .btn { width: 100%; justify-content: center; }
    .price-card__more {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--cta); transition: var(--ease);
    }
    .price-card--pop .price-card__more { color: rgba(255,255,255,0.6); }
    .price-card__more:hover { gap: 8px; }
    .pricing__service-link { text-align: center; margin-top: 32px; }
    .pricing__service-link a { font-size: 14px; font-weight: 600; color: var(--cta); display: inline-flex; align-items: center; gap: 6px; transition: var(--ease); }
    .pricing__service-link a:hover { gap: 10px; color: var(--heading); }

    /* Hide swipe hint on desktop */
    .pricing__swipe-hint { display: none; }

    /* ============================================
       LEAD MAGNET
    ============================================ */
    .lead { padding: 64px 0; background: var(--heading); position: relative; overflow: hidden; }
    .lead__bg {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 20% 50%, rgba(211,225,98,0.1) 0%,transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(108,154,64,0.15) 0%,transparent 50%);
    }
    .lead__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
    .lead__offer {
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--r-md); padding: 32px;
    }
    .lead__offer-label { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
    .lead__offer-title { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 20px; }
    .lead__offer-title span { color: var(--lime); }
    .value-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; color: rgba(255,255,255,0.8); }
    .value-item:last-child { border-bottom: none; }
    .value-item i { color: var(--lime); font-size: 13px; }
    .lead__form-wrap {}
    .lead__form-title { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--white); margin-bottom: 8px; }
    .lead__form-title span { color: var(--lime); }
    .lead__form-sub { color: rgba(255,255,255,0.7); margin-bottom: 28px; font-size: 15px; }
    .audit-form { display: flex; flex-direction: column; gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
    .form-input {
      padding: 14px 16px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: var(--r-sm); color: var(--white); font-size: 15px; font-family: var(--font-body);
      transition: var(--ease); outline: none;
    }
    .form-input::placeholder { color: rgba(255,255,255,0.4); }
    .form-input:focus { border-color: var(--lime); background: rgba(255,255,255,0.15); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-trust { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 8px; }
    .form-trust i { font-size: 11px; }

    /* ============================================
       FAQ
    ============================================ */
    .faq { padding: 64px 0; background: var(--bg); }
    .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 60px; }
    .faq-item { background: var(--white); border-radius: var(--r-md); border: 1.5px solid var(--bg-alt); overflow: hidden; transition: var(--ease); }
    .faq-item.open { border-color: var(--cta); }
    .faq-item__q { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; gap: 16px; }
    .faq-item__q-text { font-size: 15px; font-weight: 600; color: var(--navy); flex: 1; }
    .faq-item.open .faq-item__q-text { color: var(--heading); }
    .faq-item__icon {
      width: 28px; height: 28px; background: var(--bg-alt); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--cta); flex-shrink: 0; transition: var(--ease);
    }
    .faq-item.open .faq-item__icon { background: var(--cta); color: var(--white); transform: rotate(45deg); }
    .faq-item__a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
    .faq-item.open .faq-item__a { max-height: 300px; padding: 0 24px 20px; }
    .faq-item__a p { font-size: 14px; color: var(--muted); line-height: 1.75; }

    /* ============================================
       FINAL CTA
    ============================================ */
    .final-cta { padding: 64px 0; background: var(--dark); text-align: center; position: relative; overflow: hidden; }
    .final-cta__bg {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 30% 50%, rgba(211,225,98,0.08) 0%,transparent 50%),
                        radial-gradient(circle at 70% 50%, rgba(108,154,64,0.12) 0%,transparent 50%);
    }
    .final-cta__inner { position: relative; z-index: 1; }
    .final-cta__title { font-family: var(--font-display); font-size: clamp(32px,5vw,56px); font-weight: 900; color: var(--white); margin-bottom: 16px; line-height: 1.15; }
    .final-cta__title span { color: var(--lime); }
    .final-cta__sub { font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 40px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7; }
    .final-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
    .final-cta__trust { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; opacity: 0.75; }
    .final-cta__trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.8); }
    .final-cta__trust-item i { color: var(--lime); }

    /* ============================================
   FOOTER
============================================ */

/* ── Pre-footer CTA Band ── */
.footer-cta-band {
  background: var(--heading);
  padding: 60px 0;
  border-top: 4px solid var(--lime);
}
.footer-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-cta-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(211,225,98,0.15);
  border: 1px solid rgba(211,225,98,0.3);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.footer-cta-dot {
  width: 8px; height: 8px;
  background: var(--lime);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.footer-cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 10px;
}
.footer-cta-band__title span { color: var(--lime); }
.footer-cta-band__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  max-width: 480px;
  line-height: 1.6;
}
.footer-cta-band__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.footer-cta-band__trust {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-cta-band__trust .stars { font-size: 15px; }
.footer-cta-band__trust span {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* ── Footer Body ── */
.footer__body {
  background: var(--dark);
  padding: 72px 0 48px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.footer__logo img { width: 170px; margin-bottom: 16px; }
.footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Lead capture */
.footer__lead { margin-bottom: 24px; }
.footer__lead-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__lead-form {
  display: flex;
  gap: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.footer__lead-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: none;
  outline: none;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--white);
  font-family: var(--font-body);
}
.footer__lead-input::placeholder { color: rgba(255,255,255,0.35); }
.footer__lead-btn {
  background: var(--lime);
  color: var(--heading);
  border: none;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--ease);
}
.footer__lead-btn:hover { background: var(--lime-light); }
.footer__lead-note {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 7px;
}

/* Social links */
.footer__social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer__social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  transition: var(--ease);
}
.footer__social-link:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--heading);
  transform: translateY(-2px);
}

/* Column titles */
.footer__col-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 18px;
}

/* Links */
.footer__links { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.footer__links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  padding: 5px 0;
  transition: var(--ease);
  border-radius: 4px;
}
.footer__links li a i {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: var(--ease);
}
.footer__links li a:hover {
  color: var(--white);
  padding-left: 4px;
}
.footer__links li a:hover i { color: var(--lime); }
.footer__link--cta {
  color: var(--lime) !important;
  font-weight: 700 !important;
}
.footer__link--cta i { color: var(--lime) !important; }
.footer__links--contact li a { gap: 10px; }

/* Stats grid */
.footer__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.footer__stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  padding: 12px;
  text-align: center;
}
.footer__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
}
.footer__stat-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 5px;
  line-height: 1.4;
}

/* Badges */
.footer__badges { display: flex; flex-direction: column; gap: 10px; }
.footer__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(211,225,98,0.07);
  border: 1px solid rgba(211,225,98,0.15);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.footer__badge > i {
  font-size: 20px;
  color: var(--lime);
  flex-shrink: 0;
}
.footer__badge strong {
  display: block;
  font-size: 13px;
  color: var(--white);
  font-weight: 700;
}
.footer__badge span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
}

/* ── Bottom Bar ── */

.footer__bottom {
  background: rgb(251,247,237);
  border-top: none;
  padding: 12px 0;
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__copyright {
  font-size: 13px;
  color: rgb(0,0,0);
  font-weight: 600;
}
.footer__legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__legal li a {
  font-size: 12px;
  color: rgb(0,0,0);
  transition: var(--ease);
  font-weight: 600;
}
.footer__legal li a:hover { color: #0D3F3A; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer-cta-band__right { align-items: flex-start; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer-cta-band__inner { flex-direction: column; }
  .footer-cta-band__right { align-items: flex-start; width: 100%; }
  .footer__bottom-inner { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; text-align: center; }
  .footer__legal { justify-content: center; flex-wrap: nowrap; gap: 12px; }
  .footer__copyright { font-size: 11px; }
  .footer__legal li a { font-size: 11px; }
}

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 1024px) {
      .hero__inner { grid-template-columns: 1fr; gap: 48px; }
      .hero__visual { display: none; }
      .hero { min-height: auto; padding: 140px 0 80px; }
      .services__grid { grid-template-columns: repeat(2,1fr); }
      .portfolio__grid { grid-template-columns: repeat(2,1fr); }
      .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
      .footer__grid > :first-child { grid-column: span 2; }
    }

    @media (max-width: 1100px) {
      .nav__menu, .nav__cta { display: none; }
      .nav__toggle { display: flex; }
      .nav__mobile { display: block; }

      .hero__title { font-size: 36px; }
      .hero__ctas { flex-direction: column; }
      .hero__trust { gap: 20px; }

      .proof-bar__inner { flex-direction: column; gap: 20px; text-align: center; }
      .proof-bar__divider { display: none; }

      .services__grid { grid-template-columns: 1fr; }
      .ps__grid { grid-template-columns: 1fr; gap: 32px; }
      .steps { grid-template-columns: 1fr; }
      .steps::before { display: none; }
      .portfolio__grid { grid-template-columns: 1fr; }
      .testi__grid { grid-template-columns: 1fr; }
      .testi-card--featured { grid-column: span 1; }

      /* ── Pricing slider on mobile ── */
      .pricing__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 4px 0 20px;
        /* hide scrollbar visually but keep scroll */
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .pricing__grid::-webkit-scrollbar { display: none; }
      .price-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        max-width: 82%;
      }
      .price-card--pop { transform: scale(1); }

      /* Swipe hint pill */
      .pricing__swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        background: rgba(0,0,0,0.05);
        border-radius: 20px;
        padding: 6px 14px;
        width: fit-content;
        margin-inline: auto;
        animation: swipe-bounce 1.8s ease-in-out 0.6s 3;
      }
      @keyframes swipe-bounce {
        0%,100% { transform: translateX(0); }
        30%      { transform: translateX(-5px); }
        60%      { transform: translateX(5px); }
      }

      .faq__grid { grid-template-columns: 1fr; }
      .lead__inner { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__grid > :first-child { grid-column: span 1; }
      .footer__newsletter-inner { flex-direction: column; }
      .footer__newsletter-form { width: 100%; }
      .footer__bottom-inner { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; text-align: center; }
    }
  
/* ── Portal Login Dropdown ─────────────────────────────────── */
.nav__login { position: relative; }
.nav__login-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid var(--bg-alt, #E0EDD4);
  color: var(--navy, #212B36);
  padding: 14px 20px; border-radius: 8px;
  font-size: 15px; font-family: inherit; font-weight: 600;
  cursor: pointer; transition: all 0.25s ease;
  white-space: nowrap; line-height: 1;
}
.nav__login-btn:hover {
  background: var(--bg-alt, #E0EDD4);
  color: var(--cta, #1a7a4a);
  border-color: var(--bg-alt, #E0EDD4);
}
.nav__login-chevron { font-size: 0.65rem; transition: transform 0.25s ease; }
.nav__login.open .nav__login-chevron { transform: rotate(180deg); }
.nav__login-menu {
  visibility: hidden; opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(9,93,64,0.14);
  border: 1px solid var(--bg-alt, #E0EDD4);
  padding: 6px;
  z-index: 9999;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav__login.open .nav__login-menu {
  visibility: visible; opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav__login-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--navy, #212B36); text-decoration: none;
  transition: all 0.25s ease;
}
.nav__login-item:hover {
  background: var(--bg-alt, #E0EDD4);
  color: var(--cta, #1a7a4a);
  transform: translateX(4px);
}
.nav__login-item > i {
  width: 26px; height: 26px;
  background: var(--bg-alt, #E0EDD4); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--cta, #1a7a4a);
  flex-shrink: 0; transition: all 0.25s ease;
}
.nav__login-item:hover > i { background: var(--cta, #1a7a4a); color: #fff; }
.nav__login-item span { font-size: 14px; font-weight: 600; color: inherit; }

/* Mobile portal links */
.mobile-nav__portals {
  display: flex; gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--bg-alt, #E0EDD4);
  margin-top: 8px;
}
.mobile-nav__portal-link {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 12px;
  background: var(--bg-alt, #E0EDD4);
  border: 1.5px solid var(--bg-alt, #E0EDD4);
  border-radius: 8px;
  color: var(--navy, #212B36);
  font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all 0.25s ease;
}
.mobile-nav__portal-link:hover { background: var(--cta, #1a7a4a); border-color: var(--cta, #1a7a4a); color: #fff; }
.mobile-nav__portal-link i { color: var(--cta, #1a7a4a); transition: color 0.25s ease; }
.mobile-nav__portal-link:hover i { color: #fff; }


/* =======================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   Breakpoints:
     ≤768px  — tablet portrait
     ≤480px  — large phone
     ≤375px  — standard phone / small phone
======================================================= */

/* ── Tablet Portrait ≤768px ─────────────────────────── */
@media (max-width: 768px) {

  /* --- Section vertical spacing --- */
  .services,
  .process,
  .portfolio,
  .stories,
  .pricing,
  .lead,
  .faq,
  .final-cta       { padding: 52px 0; }
  .toggle-section  { padding: 52px 0; }
  .scorecard       { padding: 44px 0 52px; }
  .proof-bar       { padding: 28px 0; }
  .section-header  { margin-bottom: 32px; }
  .section-sub     { font-size: 16px; }

  /* --- Hero --- */
  .hero { padding-bottom: 60px; }
  .hero__sub  { font-size: 16px; margin-bottom: 28px; }
  .hero__trust { gap: 20px; }
  .hero__trust-number { font-size: 23px; }
  .hero__trust-label  { font-size: 12px; }
  .hero__ctas { gap: 12px; }

  /* --- Proof bar --- */
  .proof-stat__n { font-size: 22px; }
  .proof-bar__stats { gap: 24px; }

  /* --- Services: 2-col on tablet --- */
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card   { padding: 24px; }

  /* --- Toggle section --- */
  .tp-header { padding: 16px 20px; gap: 12px; }
  .tp-header-text h3 { font-size: 18px; }

  /* --- Scorecard --- */
  .scorecard__wrap { padding: 36px 28px; }

  /* --- Portfolio: 2-col on tablet --- */
  .portfolio__grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .case-card__img   { height: 160px; }
  .case-card__body  { padding: 18px; }
  .case-card__metrics { gap: 6px; }

  /* --- Stories tabs: horizontal scroll strip --- */
  .stories-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stories-tabs::-webkit-scrollbar { display: none; }
  .stories-tab { flex-shrink: 0; }
  .stories__stats-bar { padding: 24px 20px; gap: 20px; }
  .stories__stat-divider { display: none; }

  /* --- Pricing tabs: horizontal scroll strip --- */
  .pricing__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pricing__tabs::-webkit-scrollbar { display: none; }
  .pricing__tab { flex-shrink: 0; }
  .price-card    { padding: 28px 24px; }
  .price-card__price { font-size: 36px; }

  /* --- Lead section --- */
  .lead__form-title { font-size: 26px; }

  /* --- FAQ --- */
  .faq-item__q   { padding: 16px 20px; }
  .faq-item.open .faq-item__a { padding: 0 20px 16px; }
  .faq__grid     { gap: 12px; }

  /* --- Final CTA --- */
  .final-cta__trust { gap: 20px; }
  .final-cta__btns  { gap: 12px; }

  /* --- Footer pre-band --- */
  .footer-cta-band { padding: 48px 0; }
  .footer-cta-band__inner { flex-direction: column; gap: 28px; }
  .footer-cta-band__right { align-items: flex-start; width: 100%; }
  .footer-cta-band__right .btn { width: 100%; justify-content: center; }
}


/* ── Large Phone ≤480px ──────────────────────────────── */
@media (max-width: 480px) {

  /* --- Section vertical spacing --- */
  .services,
  .process,
  .portfolio,
  .stories,
  .pricing,
  .lead,
  .faq,
  .final-cta      { padding: 44px 0; }
  .toggle-section { padding: 44px 0; }
  .scorecard      { padding: 36px 0 44px; }
  .section-header { margin-bottom: 24px; }
  .section-sub    { font-size: 15px; max-width: 100%; }

  /* --- Hero --- */
  .hero { padding-bottom: 52px; }
  .hero__badge {
    font-size: 11px;
    padding: 6px 12px;
    white-space: normal;
    text-align: center;
    justify-content: center;
    border-radius: var(--r-md);
    line-height: 1.5;
  }
  .hero__title  { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -0.5px; margin-bottom: 16px; }
  .hero__sub    { font-size: 15px; margin-bottom: 24px; }
  .hero__ctas   { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15px; }

  /* Trust bar — 2×2 grid */
  .hero__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero__trust-item {
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    padding: 12px 10px;
    align-items: center;
  }
  .hero__trust-number { font-size: 20px; }
  .hero__trust-label  { font-size: 11px; }

  /* --- Proof bar --- */
  .brand-pill     { font-size: 12px; padding: 5px 10px; }
  .proof-stat__n  { font-size: 20px; }
  .proof-stat__l  { font-size: 11px; }
  .proof-bar__stats { gap: 16px; }

  /* --- Services: 1-col on phone (overrides 1100px rule gap) --- */
  .services__grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card   { padding: 20px; }
  .service-card__title { font-size: 16px; }

  /* --- Toggle section --- */
  .tp-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
  .tp-header-icon { display: none; }
  .tp-header-text h3 { font-size: 17px; }
  .tp-header-text p  { font-size: 13px; }
  .tp-stat  { padding: 12px 8px; }
  .tp-stat-num { font-size: 20px; }
  .tp-item  { padding: 12px; }

  /* --- Scorecard --- */
  .scorecard__wrap { padding: 28px 20px; }
  .scv__row-label  { width: 100px; font-size: 12px; }
  .scorecard__ctas { flex-direction: column; align-items: stretch; }
  .scorecard__ctas .btn { width: 100%; justify-content: center; }

  /* --- Process CTA --- */
  .process__cta-inner { padding: 28px 20px; }
  .process__cta { margin-top: 36px; }

  /* --- Portfolio: 1-col on phone --- */
  .portfolio__grid { grid-template-columns: 1fr; gap: 16px; }
  .case-card__img  { height: 180px; }
  .metric__n       { font-size: 15px; }

  /* --- Stories --- */
  .stories__stats-bar { padding: 20px 16px; gap: 14px; }
  .stories__stat-num  { font-size: 26px; }
  .story-card  { padding: 20px; }
  .stories__bottom { padding: 28px 20px; }
  .case-pill   { width: 270px; }

  /* --- Pricing --- */
  .pricing__tabs  { margin-bottom: 32px; }
  .price-card     { padding: 24px 20px; }
  .price-card__price { font-size: 32px; }
  .price-card__name  { font-size: 20px; }
  .pricing__grid  { gap: 16px; }

  /* --- Lead --- */
  .lead__offer     { padding: 24px 20px; }
  .lead__form-title { font-size: 22px; }
  .lead__form-sub   { font-size: 14px; }

  /* --- FAQ --- */
  .faq-item__q    { padding: 14px 16px; gap: 12px; }
  .faq-item__q-text { font-size: 14px; }
  .faq-item.open .faq-item__a { padding: 0 16px 14px; }
  .faq-item__a p  { font-size: 13px; }

  /* --- Final CTA --- */
  .final-cta__title { font-size: clamp(26px, 7vw, 40px); }
  .final-cta__sub   { font-size: 15px; }
  .final-cta__btns  { flex-direction: column; align-items: stretch; }
  .final-cta__btns .btn { width: 100%; justify-content: center; }
  .final-cta__trust { gap: 14px; }
  .final-cta__trust-item { font-size: 12px; }

  /* --- Footer --- */
  .footer-cta-band { padding: 40px 0; }
  .footer-cta-band__title { font-size: clamp(20px, 5vw, 28px); }
  .footer__body   { padding: 48px 0 36px; }
  .footer__grid   { gap: 28px; }
  .footer__stats  { grid-template-columns: 1fr 1fr; }
}


/* ── Standard / Small Phone ≤375px ──────────────────── */
@media (max-width: 375px) {

  /* --- Hero --- */
  .hero { padding-bottom: 48px; }
  .hero__title { font-size: 26px; }
  .hero__badge { font-size: 10px; padding: 5px 10px; }
  .hero__sub   { font-size: 14px; }

  /* --- Section titles — hard cap --- */
  .section-title { font-size: 24px !important; line-height: 1.2 !important; }

  /* --- Toggle stats: 1-col on very small screens --- */
  .tp-stats { grid-template-columns: 1fr; gap: 8px; }

  /* --- Score card --- */
  .scv__dial-ring { width: 90px; height: 90px; }
  .scv__dial-ring::before { width: 64px; height: 64px; }
  .scv__dial-score { font-size: 22px; }

  /* --- Pricing --- */
  .price-card { padding: 20px 16px; }
  .price-card__price { font-size: 30px; }

  /* --- Final CTA trust: stack on very small --- */
  .final-cta__trust { flex-direction: column; align-items: center; gap: 10px; }

  /* --- Footer band --- */
  .footer-cta-band__title { font-size: 20px; }
  .footer-cta-band__sub   { font-size: 14px; }

  /* --- Footer bottom bar --- */
  .footer__bottom-inner { gap: 4px; padding: 10px 0; }
  .footer__legal { gap: 10px; flex-wrap: nowrap; }
  .footer__copyright { font-size: 10px; }
  .footer__legal li a { font-size: 10px; }
}