.cs-mtag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #f4fbcf;
      color: #5a7300;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
    }

    .cs-hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      max-width: 880px;
      margin: 44px auto 0;
    }

    .module-card h6 {
      font-weight: 600;
      margin-bottom: 6px;
    }

    @media (max-width: 575px) {
      .cs-hero-stats {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .cs-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0.45rem 1rem 0.45rem 0.5rem;
      border-radius: 999px;
      border: 2px solid var(--brand-lime, #cddb37);
      background: #fff;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #5a6112;
    }

    .cs-eyebrow .dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--brand-orange, #eb5017);
      display: inline-flex;
    }

    .cs-section-title {
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.01em;
      color: var(--ink, #1d1b1a);
    }

    .cs-hero {
      background: radial-gradient(120% 120% at 85% 0%, #fff4ee 0%, #fff 55%);
      padding: 110px 0 70px;
    }

    .cs-client-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }

    .cs-client-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px 8px 8px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(235, 80, 23, 0.1);
      font-weight: 700;
      color: var(--ink, #1d1b1a);
    }

    .cs-client-mark {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--brand-orange, #eb5017), #ff7a45);
      color: #fff;
      font-weight: 800;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.04em;
    }

    .cs-tag {
      font-size: 0.78rem;
      font-weight: 600;
      color: #8a8581;
    }

    .cs-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .cs-stat {
      background: #fff;
      border: 1px solid #f1e3db;
      border-radius: 18px;
      padding: 26px 24px;
      box-shadow: 0 18px 40px rgba(235, 80, 23, 0.07);
    }

    .cs-stat .num {
      font-size: 40px;
      font-weight: 700;
      color: var(--brand-orange, #eb5017);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .cs-stat .lbl {
      margin-top: 10px;
      font-size: 0.9rem;
      color: #6b6560;
      font-weight: 500;
    }

    .cs-card {
      background: #fff;
      border: 1px solid #efe6e0;
      border-radius: 18px;
      padding: 28px;
      height: 100%;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .cs-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 46px rgba(235, 80, 23, 0.1);
    }

    .cs-ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      margin-bottom: 18px;
    }

    .cs-ico.warn {
      background: #fff0ea;
      color: var(--brand-orange, #eb5017);
    }

    .cs-ico.lime {
      background: #f4fbcf;
      color: #6b7510;
    }

    .cs-card h5 {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 8px;
      color: var(--ink, #1d1b1a);
    }

    .cs-card p {
      color: #6b6560;
      font-size: 0.95rem;
      margin: 0;
    }

    .cs-overview {
      background: #fdeee7;
      border-radius: 26px;
      padding: 48px;
    }

    .cs-fact {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .cs-fact i {
      color: var(--brand-orange, #eb5017);
      font-size: 1.15rem;
      margin-top: 2px;
    }

    .cs-fact .t {
      font-weight: 700;
      color: var(--ink, #1d1b1a);
      font-size: 0.98rem;
    }

    .cs-fact .d {
      color: #6b6560;
      font-size: 0.9rem;
    }

    .cs-module {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 20px;
      padding: 26px 28px;
      background: #fff;
      border: 1px solid #efe6e0;
      border-radius: 18px;
      height: 100%;
    }

    .cs-module .m-ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, #fff0ea, #ffe2d5);
      color: var(--brand-orange, #eb5017);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }

    .cs-module h6 {
      font-weight: 700;
      font-size: 1.02rem;
      margin-bottom: 10px;
      color: var(--ink, #1d1b1a);
    }

    .cs-module .m-line {
      font-size: 0.9rem;
      color: #6b6560;
      margin-bottom: 6px;
      display: flex;
      gap: 8px;
    }

    .cs-module .m-line b {
      color: #b54b22;
      font-weight: 700;
      white-space: nowrap;
      font-size: 0.74rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding-top: 2px;
    }

    .cs-module .m-line.value b {
      color: #6b7510;
    }

    .cs-timeline {
      position: relative;
      display: grid;
      gap: 8px;
    }

    .cs-step {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 20px;
      align-items: start;
      position: relative;
      padding-bottom: 28px;
    }

    .cs-step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 31px;
      top: 56px;
      bottom: -4px;
      width: 2px;
      background: #f0d9cd;
    }

    .cs-step .n {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--brand-orange, #eb5017);
      color: var(--brand-orange, #eb5017);
      font-weight: 800;
      font-size: 1.15rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .cs-step h6 {
      font-weight: 700;
      margin: 14px 0 6px;
      color: var(--ink, #1d1b1a);
    }

    .cs-step p {
      color: #6b6560;
      font-size: 0.95rem;
      margin: 0;
    }

    .cs-results {
      background: var(--ink, #1d1b1a);
      border-radius: 26px;
      padding: 56px 48px;
      color: #fff;
    }

    .cs-metric .num {
      font-size: 40px;
      font-weight: 700;
      color: var(--brand-lime, #cddb37);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .cs-metric .lbl {
      margin-top: 12px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.92rem;
      font-weight: 500;
    }

    .cs-sap {
      background: linear-gradient(135deg, #eb5017 0%, #ff7a45 100%);
      border-radius: 26px;
      padding: 52px 48px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .cs-sap .sap-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      padding: 7px 16px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .cs-sap-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .cs-sap-item i {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1px;
    }

    .cs-sap-item span {
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.98rem;
      font-weight: 500;
    }

    .cs-quote {
      background: #fff;
      border: 1px solid #efe6e0;
      border-radius: 26px;
      padding: 56px;
      position: relative;
    }

    .cs-quote .mark {
      font-size: 4rem;
      line-height: 0.6;
      color: var(--brand-lime, #cddb37);
      font-family: Georgia, serif;
    }

    .cs-quote blockquote {
      font-size: clamp(1.25rem, 2.2vw, 1.7rem);
      font-weight: 500;
      line-height: 1.45;
      color: var(--ink, #1d1b1a);
      margin: 18px 0 28px;
      letter-spacing: -0.01em;
    }

    .cs-quote .who {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .cs-quote .avatar {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--brand-orange, #eb5017), #ff7a45);
      color: #fff;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
    }

    .cs-quote .who .name {
      font-weight: 700;
      color: var(--ink, #1d1b1a);
    }

    .cs-quote .who .role {
      font-size: 0.88rem;
      color: #8a8581;
    }

    .cs-benefit {
      background: #fff;
      border: 1px solid #efe6e0;
      border-radius: 18px;
      padding: 26px;
      height: 100%;
      text-align: center;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .cs-benefit:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 44px rgba(235, 80, 23, 0.1);
    }

    .cs-benefit i {
      font-size: 1.8rem;
      color: var(--brand-orange, #eb5017);
    }

    .cs-benefit h6 {
      font-weight: 700;
      margin: 14px 0 6px;
      color: var(--ink, #1d1b1a);
    }

    .cs-benefit p {
      font-size: 0.88rem;
      color: #6b6560;
      margin: 0;
    }

    .cs-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #efe6e0;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--ink, #1d1b1a);
    }

    .cs-chip i {
      color: var(--brand-orange, #eb5017);
    }

    /* ===== Implementation: circular stepper ===== */
    .cs-journey {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 44px 8px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .cs-jstep {
      position: relative;
      text-align: center;
      padding: 0 6px;
    }

    .cs-jstep::after {
      content: "";
      position: absolute;
      top: 37px;
      left: calc(50% + 40px);
      width: calc(100% - 80px + 8px);
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--brand-orange) 0 7px, transparent 7px 14px);
      opacity: 0.45;
      z-index: 0;
    }

    .cs-jnode {
      position: relative;
      z-index: 1;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      margin: 0 auto 18px;
      background: #fff;
      border: 2px solid var(--brand-orange, #eb5017);
      display: grid;
      place-items: center;
      color: var(--brand-orange, #eb5017);
      font-size: 1.6rem;
      transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease,
        color 0.28s ease;
    }

    .cs-jbadge {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      background: var(--brand-lime, #cddb37);
      color: #3a4112;
      font-size: 0.78rem;
      font-weight: 800;
      display: grid;
      place-items: center;
      border: 3px solid #fff6f1;
      z-index: 2;
    }

    .cs-jstep:hover .cs-jnode {
      background: linear-gradient(135deg, var(--brand-orange, #eb5017), #ff7a45);
      color: #fff;
      transform: translateY(-5px) scale(1.04);
      box-shadow: 0 16px 34px rgba(235, 80, 23, 0.28);
    }

    .cs-jstep h6 {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 5px;
      color: var(--ink, #1d1b1a);
    }

    .cs-jstep p {
      font-size: 0.85rem;
      line-height: 1.4;
      color: #6b6560;
      margin: 0;
    }

    @media (max-width: 991px) {
      .cs-journey {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 8px;
      }

      .cs-jstep:nth-child(2n)::after {
        display: none;
      }
    }

    @media (min-width: 992px) {
      .cs-jstep:nth-child(4n)::after {
        display: none;
      }
    }

    .cs-jstep:last-child::after {
      display: none;
    }

    @media (max-width: 575px) {
      .cs-journey {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .cs-jstep::after {
        display: none;
      }
    }

    /* ===== About TRACKK: module cards + image frame ===== */
    .cs-mods {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .cs-mod {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid #efe6e0;
      cursor: default;
      transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
    }

    .cs-mod .m-ic {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      background: #fff0ea;
      color: var(--brand-orange, #eb5017);
      font-size: 1.15rem;
      transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
    }

    .cs-mod .m-nm {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--ink, #1d1b1a);
      transition: color 0.22s ease;
    }

    .cs-mod:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 30px rgba(235, 80, 23, 0.13);
      border-color: var(--brand-orange, #eb5017);
    }

    .cs-mod:hover .m-ic {
      background: linear-gradient(135deg, var(--brand-orange, #eb5017), #ff7a45);
      color: #fff;
      transform: rotate(-6deg) scale(1.06);
    }

    .cs-mod:hover .m-nm {
      color: var(--brand-orange, #eb5017);
    }

    .cs-shot {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid #efe6e0;
      background: #fff;
      box-shadow: 0 26px 60px rgba(235, 80, 23, 0.12);
    }

    .cs-shot-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 13px 16px;
      background: #fff6f1;
      border-bottom: 1px solid #f0ddd2;
    }

    .cs-shot-bar i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
    }

    .cs-shot-ph {
      aspect-ratio: 16 / 10;
      display: grid;
      place-items: center;
      text-align: center;
      background-color: #fdf1ec;
      background-image: repeating-linear-gradient(45deg, rgba(235, 80, 23, 0.08) 0 1px, transparent 1px 12px);
    }

    .cs-shot-ph .ph-ic {
      font-size: 2.4rem;
      color: var(--brand-orange, #eb5017);
    }

    .cs-shot-ph .ph-t {
      font-weight: 700;
      color: var(--brand-orange, #eb5017);
      margin-top: 8px;
    }

    .cs-shot-ph .ph-s {
      font-size: 0.82rem;
      color: #9a8f88;
    }

    /* ===== Client Overview: spec panel + stats ===== */
    .cs-ov-stats {
      display: flex;
      gap: 38px;
      margin-top: 28px;
    }

    .cs-ov-stat .n {
      font-size: 2.3rem;
      font-weight: 800;
      line-height: 1;
      color: var(--brand-orange, #eb5017);
      letter-spacing: -0.02em;
    }

    .cs-ov-stat .l {
      font-size: 0.84rem;
      color: #6b6560;
      margin-top: 6px;
    }

    .cs-spec {
      background: #fff;
      border: 1px solid #efe6e0;
      border-radius: 20px;
      padding: 6px 30px;
      box-shadow: 0 20px 50px rgba(235, 80, 23, 0.08);
    }

    .cs-spec-row {
      display: flex;
      gap: 18px;
      align-items: center;
      padding: 22px 0;
    }

    .cs-spec-row:not(:last-child) {
      border-bottom: 1px solid #f2e7e0;
    }

    .cs-spec-ic {
      flex: 0 0 auto;
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: #fff0ea;
      color: var(--brand-orange, #eb5017);
      display: grid;
      place-items: center;
      font-size: 1.4rem;
    }

    .cs-spec-row h6 {
      font-weight: 600;
      margin: 0 0 3px;
      color: var(--ink, #1d1b1a);
    }

    .cs-spec-row p {
      margin: 0;
      color: #6b6560;
      font-size: 0.92rem;
    }

    /* ===== Challenge: numbered pain cards ===== */
    .cs-pain {
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(235, 80, 23, 0.14);
      border-radius: 18px;
      padding: 30px 26px;
      height: 100%;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    }

    .cs-pain:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 38px rgba(235, 80, 23, 0.1);
      border-color: rgba(235, 80, 23, 0.4);
    }

    .cs-pain .pnum {
      position: absolute;
      top: 6px;
      right: 18px;
      font-size: 58px;
      font-weight: 800;
      color: rgba(235, 80, 23, 0.09);
      letter-spacing: -2px;
      line-height: 1;
    }

    .cs-pain .pic {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: #fdeee7;
      color: var(--brand-orange, #eb5017);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 16px;
      position: relative;
    }

    .cs-pain h6 {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 6px;
      color: var(--ink, #1d1b1a);
      position: relative;
    }

    .cs-pain p {
      margin: 0;
      color: #6b6560;
      font-size: 0.93rem;
      position: relative;
    }

    /* ===== Why TRACKK: dark section ===== */
    .section-bg-dark {
      background: #141519;
    }

    .cs-dark-head .section-title,
    .cs-dark-head .section-sub {
      color: #ffffff;
    }

    .cs-dark-tile {
      display: flex;
      gap: 16px;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      padding: 22px;
      height: 100%;
      transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
    }

    .cs-dark-tile:hover {
      transform: translateY(-4px);
      border-color: var(--brand-orange, #eb5017);
      background: rgba(235, 80, 23, 0.1);
    }

    .cs-dark-tile .dt-ic {
      flex: 0 0 auto;
      width: 50px;
      height: 50px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--brand-orange, #eb5017), #ff7a45);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 1.3rem;
    }

    .cs-dark-tile .dt-tx {
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }

    /* ===== Key Benefits: lime-accent icon-left rows ===== */
    .cs-ben {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid #efe6e0;
      border-left: 4px solid var(--brand-lime, #cddb37);
      border-radius: 14px;
      padding: 22px;
      height: 100%;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .cs-ben:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px rgba(235, 80, 23, 0.1);
    }

    .cs-ben .bn-ic {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f4fbcf;
      color: #5a7300;
      display: grid;
      place-items: center;
      font-size: 1.3rem;
    }

    .cs-ben h6 {
      font-weight: 600;
      margin: 0 0 4px;
      color: var(--ink, #1d1b1a);
    }

    .cs-ben p {
      margin: 0;
      color: #6b6560;
      font-size: 0.9rem;
    }

    @media (max-width: 575px) {

      .cs-overview,
      .cs-results,
      .cs-sap,
      .cs-quote {
        padding: 32px 22px;
      }

      .cs-stat-grid {
        gap: 12px;
      }
    }

    .bw-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-weight: 600;
      font-size: 0.98rem;
      padding: 13px 26px;
      border-radius: 12px;
      text-decoration: none;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    .bw-btn-primary {
      background: var(--bw-olive);
      color: #fff;
      box-shadow: 0 14px 30px rgba(235, 80, 23, 0.28);
    }

    .bw-btn-primary:hover {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(235, 80, 23, 0.36);
    }

    .bw-btn-ghost {
      background: #fff;
      color: var(--bw-ink);
      border: 1.5px solid var(--bw-line);
    }

    .bw-btn-ghost:hover {
      border-color: var(--bw-olive);
      color: var(--bw-olive);
      transform: translateY(-2px);
    }

    .cs-hero-grid {
      display: flex;
      align-items: center;
      gap: 52px;
    }

    .cs-hero-grid .cs-hero-text {
      flex: 0 1 60%;
      min-width: 0;
      text-align: left;
    }

    .cs-hero-grid .cs-hero-media {
      flex: 0 1 40%;
      min-width: 0;
    }

    .cs-stat:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 48px rgba(235, 80, 23, 0.12);
      border-color: #f3cbb8;
    }

    @media (max-width: 860px) {
      .cs-hero-grid .cs-hero-text {
        flex: 1 1 auto;
        width: 100%;
        text-align: center;
      }

      .cs-hero-grid .cs-hero-media {
        flex: 1 1 auto;
        width: 100%;
        max-width: 420px;
      }

      .cs-hero-grid {
        flex-direction: column;
        gap: 36px;
      }
    }