.elementor-30896 .elementor-element.elementor-element-c55d160{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}body.elementor-page-30896:not(.elementor-motion-effects-element-type-background), body.elementor-page-30896 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F9FC;}@media(min-width:768px){.elementor-30896 .elementor-element.elementor-element-c55d160{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-92c9cea *//*:root {*/
        --rich: #8fb821; /* primary brand voice */
        --rich-deep: #5e8f1f; /* hover / pressed / small-text green */
        --rich-tint: #eef6d6; /* faint wash for chips & fills */
        --lime: #c3eb42; /* accent — dark UI only */
      /*  --lime-deep: #a9d52f;*/
        --ink: #171717; /* type + structure */
      /*  --ink-soft: #3a3b3c;*/
        --graphite: #1a1a1a; /* dark surface */
        --cream: #faf9f4; /* warm editorial base (the 60) */
        --paper: #ffffff; /* pure surface */
        --muted: #6b7280; /* supporting text (the 30) */
        --line: #e7e5dd; /* hairline on cream */
        --line-paper: #ecebe6; /* hairline on paper */
      /*  --font:*/
      /*    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,*/
      /*    system-ui, sans-serif;*/
      /*  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;*/

        /* Layout grid: one container + gutter so every section shares the same edges */
        --container: 1152px; /* 18 × 64px grid columns */
      /*  --gutter: clamp(20px, 5vw, 64px);*/
      /*  --edge: max(*/
      /*    var(--gutter),*/
      /*    calc((100vw - var(--container)) / 2)*/
        ); /* content/grid inset */

        /* CTA buttons — one sleek system */
        --btn-pad: 13px 24px; /* section CTAs ≈ 44px tall */
        --btn-pad-sm: 10px 18px; /* nav CTAs ≈ 38px tall */
      /*  --btn-radius: 999px;*/
      /*  --btn-shadow-rich: 0 12px 26px -14px rgba(94, 143, 31, 0.45);*/
      /*  --btn-shadow-lime: 0 12px 28px -14px rgba(195, 235, 66, 0.4);*/

        /* Background grid texture — keeps the page feeling "alive" without shouting.
       Lines are faint; sections add a same-colour vignette so the grid glows
       in the centre and dissolves toward the edges (the hero's "essence"). */
      /*  --grid-cell: 64px;*/
      /*  --grid-light:*/
      /*    linear-gradient(rgba(23, 23, 23, 0.025) 1px, transparent 1px),*/
      /*    linear-gradient(90deg, rgba(23, 23, 23, 0.025) 1px, transparent 1px);*/
      /*  --grid-dark:*/
      /*    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),*/
      /*    linear-gradient(*/
      /*      90deg,*/
      /*      rgba(255, 255, 255, 0.035) 1px,*/
      /*      transparent 1px*/
      /*    );*/
      /*  --tex-size:*/
      /*    100% 100%, var(--grid-cell) var(--grid-cell),*/
      /*    var(--grid-cell) var(--grid-cell);*/
      /*  --tex-repeat: no-repeat, repeat, repeat;*/
      /*  --tex-cream:*/
      /*    radial-gradient(135% 115% at 50% 38%, transparent 38%, #faf9f4 92%),*/
      /*    var(--grid-light);*/
      /*  --tex-paper:*/
      /*    radial-gradient(135% 115% at 50% 38%, transparent 38%, #ffffff 92%),*/
      /*    var(--grid-light);*/
      /*  --tex-warm:*/
      /*    radial-gradient(135% 115% at 50% 38%, transparent 38%, #edebe3 92%),*/
      /*    var(--grid-light);*/
      /*  --tex-dark:*/
      /*    radial-gradient(135% 115% at 50% 38%, transparent 38%, #1a1a1a 92%),*/
      /*    var(--grid-dark);*/
      /*}*/

 

      /* Eyebrows render in Geist Mono per the type system */
      .eyebrow,
      .sol__eyebrow,
      .hiw__eyebrow,
      .feat__eyebrow,
      .cstudy__eyebrow,
      .nl__eyebrow {
        font-family: var(--mono) !important;
        text-transform: uppercase;
      }

      ::selection {
        background: var(--rich);
        color: var(--ink);
      }


/* Platforms section: static 3-up grid, no scroll/slide animation */
      .pf__scroller {
        height: auto !important;
      }
      .pf__sticky {
        position: static !important;
        height: auto !important;
        padding: clamp(56px, 8vw, 100px) 0 !important;
      }
      .pf__viewport {
        overflow: visible !important;
        -webkit-mask: none !important;
        mask: none !important;
        width: auto !important;
      }
      .pf__track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(16px, 2vw, 28px);
        width: auto !important;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 var(--gutter) !important;
        box-sizing: border-box;
        transform: none !important;
        will-change: auto;
      }
      .pf-card--img {
        width: auto !important;
      }
      @media (max-width: 760px) {
        .pf__track {
          grid-template-columns: 1fr;
          max-width: 460px;
        }
      }
  
.hero {
        position: relative;
        min-height: calc(100vh - 72px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(28px, 4vh, 56px) var(--edge) clamp(24px, 4vh, 44px);
        overflow: hidden;
        background: var(--cream);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
      }

      /* ---- brand wash + faint book-grid (on-brand cream surface) ---- */
      .hero__wash {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(
            56% 44% at 50% -6%,
            rgba(143, 184, 33, 0.12),
            transparent 62%
          ),
          radial-gradient(
            40% 30% at 86% 6%,
            rgba(195, 235, 66, 0.14),
            transparent 70%
          ),
          radial-gradient(
            50% 40% at 12% 30%,
            rgba(143, 184, 33, 0.06),
            transparent 72%
          );
      }
      .hero__grid {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: var(--grid-light);
        background-size: var(--grid-cell) var(--grid-cell);
        background-position: center top;
        -webkit-mask-image: radial-gradient(
          125% 105% at 50% 34%,
          #000 52%,
          transparent 100%
        );
        mask-image: radial-gradient(
          125% 105% at 50% 34%,
          #000 52%,
          transparent 100%
        );
      }



      /* ---- hero text ---- */
      .hero__content {
        position: relative;
        z-index: 20;
        text-align: center;
        padding: 0;
      }
      .hero__eyebrow {
        margin: 0 0 16px;
        font-size: 12px;
        letter-spacing: 0.22em;
        color: var(--rich-deep);
      }
      .hero__title {
        margin: 0 auto;
        max-width: 18ch;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.04;
        font-size: clamp(30px, 4.8vw, 58px);
        color: var(--ink);
      }
      .t-accent {
        color: var(--rich);
      }
      .hero__sub {
        margin: 16px auto 0;
        max-width: 600px;
        font-size: clamp(14px, 1.1vw, 16px);
        line-height: 1.55;
        color: var(--muted);
      }
      .hero__btns {
        position: relative;
        z-index: 25;
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: clamp(24px, 3.5vh, 40px);
        flex-wrap: wrap;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        padding: var(--btn-pad);
        border-radius: var(--btn-radius);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }
      .btn:hover {
        transform: translateY(-1px);
      }
      .btn--ghost {
        background: var(--paper);
        color: var(--ink);
        border: 1px solid var(--line);
      }
      .btn--ghost:hover {
        border-color: var(--ink);
        box-shadow: 0 12px 26px -16px rgba(20, 30, 15, 0.3);
      }
      .btn--rich {
        background: var(--rich);
        color: var(--ink);
        padding-right: 6px;
      }
      .btn--rich:hover {
        background: var(--rich-deep);
        box-shadow: var(--btn-shadow-rich);
      }
      .btn__arrow {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--rich);
        transition: transform 0.2s ease;
      }
      .btn__arrow svg {
        width: 12px;
        height: 12px;
      }
      .btn--rich:hover .btn__arrow {
        transform: translateX(2px);
      }

      /* ---- 3D card ring (finalised hero) ---- */
      .carousel {
        position: relative;
        z-index: 10;
        width: 100%;
        height: clamp(162px, 21vh, 240px);
        margin: clamp(44px, 8vh, 80px) auto 0;
        perspective: 2200px;
        perspective-origin: 50% 52%;
      }
      .ring-tilt {
        position: absolute;
        inset: 0;
        transform: rotateX(4deg);
        transform-style: preserve-3d;
      }
      .ring {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        --r:352px;
         transform-style: preserve-3d;
        animation: ffRingSpin 60s linear infinite;
      }
      .carousel:hover .ring {
        animation-play-state: paused;
      }
 
      .slot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 152px;
        margin-left: -60px;
        margin-top: -76px;
        transform: rotateY(var(--a)) translateZ(var( --r));
        backface-visibility: hidden;
      }
      .slot .c {
        transition:
          transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.35s ease;
      }
      .slot:hover {
        z-index: 6;
      }
      .slot:hover .c {
        transform: translateZ(48px) scale(1.07);
        box-shadow: 0 34px 64px -22px rgba(20, 30, 15, 0.5);
      }
      @keyframes ffRingSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}
  


      /* ---- card base + designs ---- */
      .c {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        color: #0e1116;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 10px;
        line-height: 1.25;
        box-shadow: 0 18px 38px -18px rgba(8, 20, 55, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.6);
      }
      .c-title {
        font-weight: 700;
        font-size: 10.5px;
        line-height: 1.2;
      }
      .c-tag {
        font-size: 8px;
        font-weight: 600;
        color: #fff;
        background: #15171c;
        padding: 4px 8px;
        border-radius: 999px;
      }
      .c-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .c-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rich);
      }
      .c-big {
        font-size: 25px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .c-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: auto;
      }
      .c-cell {
        background: #f3f5f7;
        border-radius: 8px;
        padding: 8px 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .c-cell span {
        color: #8a8f98;
        font-size: 9px;
      }
      .c-cell b {
        font-size: 13px;
      }
      .c-spark {
        height: 24px;
        border-radius: 8px;
        background: linear-gradient(
          180deg,
          rgba(143, 184, 33, 0.26),
          rgba(143, 184, 33, 0.02)
        );
      }

      .c-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 100%;
        margin-top: auto;
      }
      .c-bars span {
        flex: 1;
        background: #e6e7e1;
        border-radius: 4px 4px 4px 4px;
      }
      .c-bars span.hi {
        background: linear-gradient(180deg, #5e8f1f, #8fb821);
      }

      .c-goalhead b {
        font-size: 17px;
      }
      .c-goalhead span {
        color: #8a8f98;
        font-size: 11px;
      }
      .c-prog {
        height: 8px;
        border-radius: 999px;
        background: #ecede7;
        overflow: hidden;
      }
      .c-prog i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #5e8f1f, #8fb821);
        border-radius: 999px;
      }
      .c-list {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .c-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        color: #5b616b;
      }
      .c-list b {
        margin-left: auto;
        color: #0e1116;
      }
      .c-av {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(145deg, #4a4b4c, #1d1d1d);
        flex: none;
      }

      .c-line {
        width: 100%;
        height: 100%;
        margin-top: auto;
      }
      .c-line path {
        stroke: #8fb821;
        stroke-width: 2.5;
      }
      .c-line .area {
        fill: rgba(143, 184, 33, 0.14);
        stroke: none;
      }

      .c-avs {
        display: flex;
        margin-top: 4px;
      }
      .c-avs span {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: -8px;
        border: 2px solid #fff;
        background: linear-gradient(145deg, #6b6c6d, #2a2a2a);
      }
      .c-avs span:first-child {
        margin-left: 0;
      }
      .c-avs span:nth-child(2) {
        background: linear-gradient(145deg, #8f9091, #3a3b3c);
      }
      .c-avs span:nth-child(3) {
        background: linear-gradient(145deg, #5e8f1f, #3c5e14);
      }
      .c-avs span:nth-child(4) {
        background: linear-gradient(145deg, #7a7b7c, #2f3030);
      }
      .c-avs .more {
        background: var(--ink);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        display: grid;
        place-items: center;
      }
      .c-sub {
        font-size: 10px;
        color: #8a8f98;
        margin-top: auto;
      }

      /* image / photo cards */
      .c-img,
      .c-earn {
        padding: 0;
        position: relative;
      }
      .c-photo {
        position: absolute;
        inset: 0;
      }
      .c-photo-green {
        background:
          radial-gradient(120% 80% at 30% 20%, #c3eb42, transparent 60%),
          linear-gradient(150deg, #8fb821, #3c5e14);
      }
      .c-photo-warm {
        background:
          radial-gradient(
            110% 80% at 68% 18%,
            rgba(195, 235, 66, 0.35),
            transparent 55%
          ),
          linear-gradient(150deg, #3a3b3c, #171717);
      }
      .c-chip {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.95);
        color: #0e1116;
        font-size: 9px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 999px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
      }
      .c-chip i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rich);
      }
      .c-chip-1 {
        top: 16px;
        left: 12px;
      }
      .c-chip-2 {
        bottom: 16px;
        right: 12px;
      }
      .c-earnbar {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        display: flex;
        gap: 8px;
        background: rgba(13, 14, 18, 0.82);
        border-radius: 12px;
        padding: 8px 12px;
        color: #fff;
        backdrop-filter: blur(4px);
      }
      .c-earnbar div {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .c-earnbar span {
        font-size: 8.5px;
        color: rgba(255, 255, 255, 0.6);
      }
      .c-earnbar b {
        font-size: 13px;
      }

      /* dark statement card */
      .c-dark {
        background: #0f1014;
        color: #eef0f2;
        justify-content: space-between;
      }
      .c-dark p {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.35;
        font-weight: 500;
      }
      .c-dark p b {
        font-weight: 700;
      }
      .c-spark-ic {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: linear-gradient(145deg, #8fb821, var(--lime));
        flex: none;
      }

  


      @media (max-width: 860px) {
        .carousel {
          perspective: none;
          height: auto;
          width: 100%;
          margin: clamp(28px, 5vh, 44px) auto 0;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: none;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -webkit-mask: none;
          mask: none;
        }
        .carousel::-webkit-scrollbar {
          display: none;
        }
        .ring-tilt {
          position: static;
          inset: auto;
          transform: none;
          transform-style: flat;
        }
        .ring {
          position: static;
          left: auto;
          top: auto;
          width: max-content;
          height: auto;
          transform: none !important;
          animation: none !important;
          transform-style: flat;
          display: flex;
          gap: 14px;
          /*padding: 6px 20px;*/
        }
        .slot {
          position: relative;
          left: auto;
          top: auto;
          margin: 0;
          transform: none !important;
          width: clamp(150px, 44vw, 184px);
          height: auto;
          aspect-ratio: 3 / 4;
          flex: 0 0 auto;
          scroll-snap-align: center;
        }
        /* marquee shows all 16 (8 unique x2) for a seamless loop */
        .slot:hover {
          z-index: auto;
        }
        .slot:hover .c {
          transform: none;
          box-shadow: 0 18px 40px -24px rgba(20, 30, 15, 0.4);
        }
        .c {
          padding: 0;
          border-radius: 16px;
        }
        .c-big {
          font-size: 20px;
        }
        .c-title {
          font-size: 9px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .ring {
          animation: none;
        }
      }

.c-shot {
        padding: 0;
        background: #fff;
      }
      .c-shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.pf {
        background-color: var(--paper);
        background-image: var(--tex-paper);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
      }
      /* Pinned horizontal scroll: cards slide right → left, tied 1:1 to scroll. Height set by JS. */
      .pf__scroller {
        position: relative;
      }
      .pf__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(32px, 5vh, 56px);
        overflow: hidden;
        padding: clamp(64px, 9vh, 104px) 0 clamp(40px, 6vh, 72px);
      }
      .pf__head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .pf__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.06;
        font-size: clamp(32px, 5vw, 56px);
      }
      .pf__t1 {
        color: #b8b6ad;
      }
      .pf__t2 {
        color: var(--rich-deep);
      }
      .pf__sub {
        margin: 16px auto 0;
        max-width: 500px;
        color: var(--muted);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }

      .pf__viewport {
        width: 100%;
        overflow: hidden;
        -webkit-mask: linear-gradient(
          90deg,
          transparent 0,
          #000 5%,
          #000 95%,
          transparent 100%
        );
        mask: linear-gradient(
          90deg,
          transparent 0,
          #000 5%,
          #000 95%,
          transparent 100%
        );
      }
      .pf__track {
        display: flex;
        gap: clamp(16px, 1.6vw, 24px);
        padding: clamp(20px, 3vh, 32px) 0;
        width: max-content;
        will-change: transform;
      }

      .pf-card {
        flex: 0 0 auto;
        width: clamp(300px, 30vw, 408px);
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 24px;
        padding: 24px;
        text-decoration: none;
        transition:
          transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.3s ease;
        color: var(--fg, #0c1a14);
      }
      .pf-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 56px -26px rgba(20, 30, 15, 0.32);
      }
      .pf-card__title {
        margin: 0;
        font-size: clamp(21px, 1.9vw, 26px);
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .pf-card__desc {
        margin: 12px 0 0;
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--fg, var(--ink));
        opacity: 0.74;
        max-width: 280px;
      }
      .pf-card__foot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 24px;
      }
      .pf-card__num {
        font-family: var(--mono);
        font-size: clamp(34px, 3.4vw, 46px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
        opacity: 0.92;
      }
      .pf-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: var(--ictile, var(--rich));
        color: var(--ic, var(--ink));
      }

      /* Domino: dark ↔ light, accent green kept to the icon tile only */
      .pf-blue {
        background: var(--graphite);
        --fg: #ffffff;
        --ic: var(--ink);
        --ictile: var(--lime);
      } /* dark */
      .pf-mint {
        background: var(--cream);
        border: 1px solid var(--line);
        --fg: var(--ink);
        --ic: var(--ink);
        --ictile: var(--rich);
      } /* light */
      .pf-lime {
        background: var(--graphite);
        --fg: #ffffff;
        --ic: var(--ink);
        --ictile: var(--lime);
      } /* dark */
      .pf-coral {
        background: var(--cream);
        border: 1px solid var(--line);
        --fg: var(--ink);
        --ic: var(--ink);
        --ictile: var(--rich);
      } /* light */

      /* mobile / reduced-motion: no pin — native horizontal swipe */
      @media (max-width: 760px) {
        .pf__scroller {
          height: auto !important;
        }
        .pf__sticky {
          position: static;
          height: auto;
          padding: clamp(64px, 9vw, 104px) 0;
          gap: clamp(32px, 6vw, 48px);
        }
        .pf__viewport {
          overflow-x: auto;
          scroll-snap-type: none;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -webkit-mask: none;
          mask: none;
        }
        .pf__viewport::-webkit-scrollbar {
          display: none;
        }
        .pf__track {
          transform: none !important;
          padding: 8px 20px;
        }
        .pf-card {
          width: 78vw;
          max-width: 340px;
          scroll-snap-align: start;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .pf__scroller {
          height: auto !important;
        }
        .pf__sticky {
          position: static;
          height: auto;
          padding: clamp(72px, 9vw, 116px) 0;
        }
        .pf__track {
          transform: none !important;
        }
      }

.pf-card--img {
        display: block;
        width: clamp(200px, 22vw, 300px);
        aspect-ratio: 1 / 1;
        min-height: 0;
        padding: 0;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--cream);
        box-shadow: 0 14px 40px -24px rgba(20, 30, 15, 0.42);
      }
      .pf-card--img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.sol {
        --lime: var(--rich);
        --lime-deep: var(--rich-deep);
        background-color: var(--cream);
        background-image: var(--tex-cream);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 64px);
      }

      /* head */
      .sol__head {
        text-align: center;
        max-width: 700px;
        margin: 0 auto clamp(40px, 5vw, 64px);
      }
      .sol__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: 0.2em;
        color: var(--rich-deep);
        margin-bottom: 20px;
      }
      .sol__eyebrow i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rich);
        box-shadow: 0 0 0 4px rgba(143, 184, 33, 0.22);
      }
      .sol__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        font-size: clamp(30px, 4.6vw, 52px);
        color: var(--ink);
      }
      .sol__sub {
        margin: 16px auto 0;
        max-width: 600px;
        color: var(--muted);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }

      /* grid */
      .sol__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(16px, 1.6vw, 24px);
        max-width: var(--container);
        margin: 0 auto;
      }

      .sol-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-decoration: none;
        color: inherit;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px)
          clamp(24px, 2.6vw, 32px);
        position: relative;
        overflow: hidden;
        transition:
          transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.32s ease,
          border-color 0.32s ease,
          background 0.32s ease;
      }
      .sol-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        pointer-events: none;
        background: radial-gradient(
          120% 60% at 50% 0%,
          rgba(143, 184, 33, 0.12),
          transparent 60%
        );
        opacity: 0;
        transition: opacity 0.32s ease;
      }
      .sol-card:hover {
        transform: translateY(-6px);
        background: var(--paper);
        border-color: var(--rich);
        box-shadow: 0 28px 54px -26px rgba(20, 30, 15, 0.22);
      }
      .sol-card:hover::after {
        opacity: 1;
      }
      .sol-card:focus-visible {
        outline: 2px solid var(--lime-deep);
        outline-offset: 3px;
      }

      .sol-viz {
        position: relative;
        width: 100%;
        height: clamp(300px, 22vw, 260px);
        margin-bottom: 24px;
        transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      
      .sol-card__title {
        margin: 0;
        font-size: clamp(19px, 1.7vw, 22px);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .sol-card__desc {
        margin: 8px 0 0;
        max-width: 384px;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.5;
      }
      .sol-card__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        font-size: 14px;
        font-weight: 600;
        color: #111317;
        transition: color 0.3s ease;
      }
      .sol-card__cta svg {
        transition: transform 0.3s ease;
      }
      .sol-card:hover .sol-card__cta {
        color: var(--lime-deep);
      }
      .sol-card:hover .sol-card__cta svg {
        transform: translateX(4px);
      }

      /* mockup base */
      .m {
        position: absolute;
        border-radius: 12px;
        padding: 12px 12px;
        box-shadow: 0 16px 32px -16px rgba(15, 25, 55, 0.28);
        transform: rotate(var(--rot, 0deg));
        animation: floatA 6.5s ease-in-out infinite;
      }
      @keyframes floatA {
        0%,
        100% {
          transform: rotate(var(--rot, 0deg)) translateY(0);
        }
        50% {
          transform: rotate(var(--rot, 0deg)) translateY(-7px);
        }
      }
      .m-dark {
        background: #111317;
        color: #fff;
      }
      .m-light {
        background: #fff;
        color: #0d0f12;
        border: 1px solid #eef0f2;
      }
      .mh {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        font-size: 9.5px;
        color: rgba(255, 255, 255, 0.72);
      }
      .mh-ic {
        color: var(--lime);
      }
      .m-big {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-top: 4px;
      }
      .m-cap {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.55);
      }
      .m-cap2 {
        font-size: 9.5px;
        color: #8a8f98;
      }
      .m-amt {
        font-size: 14px;
        font-weight: 700;
        margin-top: 4px;
      }
      .m-amt span {
        color: #9aa0a8;
        font-weight: 500;
        font-size: 10px;
      }
      .m-prog {
        height: 4px;
        border-radius: 999px;
        background: #eef0f2;
        overflow: hidden;
        margin: 8px 0;
      }
      .m-prog i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #8fb821, var(--lime));
      }
      .m-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .m-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 9px;
        color: #6b7280;
      }
      .m-list b {
        margin-left: auto;
        color: #0d0f12;
      }
      .m-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: linear-gradient(145deg, #2a2c31, #46484e);
        flex: none;
      }

      .m-minibars {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 40px;
        margin-top: 8px;
      }
      .m-minibars span {
        width: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.22);
      }
      .m-minibars span:nth-child(1) {
        height: 40%;
      }
      .m-minibars span:nth-child(2) {
        height: 66%;
      }
      .m-minibars span:nth-child(4) {
        height: 54%;
      }
      .m-minibars span:nth-child(5) {
        height: 78%;
      }
      .m-minibars span.hi {
        height: 100%;
        background: var(--lime);
      }

      .m-h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 9.5px;
        color: #8a8f98;
      }
      .m-big2 {
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-top: 4px;
      }
      .m-up {
        font-size: 9px;
        font-weight: 600;
        color: #5a9216;
        background: #eef7d6;
        padding: 4px 8px;
        border-radius: 999px;
        vertical-align: middle;
      }
      .m-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
      }
      .m-chips span {
        font-size: 9px;
        color: #4b5563;
        background: #f1f3f5;
        border: 1px solid #e7e9ec;
        padding: 4px 8px;
        border-radius: 999px;
      }

      .m-quote {
        margin: 0;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 500;
        color: #eef0f2;
      }
      .m-quote b {
        color: var(--lime);
        font-weight: 700;
      }

      .m-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 64px;
      }
      .m-bars span {
        flex: 1;
        background: #e8eaed;
        border-radius: 4px 4px 4px 4px;
      }
      .m-bars span.hi {
        background: linear-gradient(180deg, #8fb821, var(--lime));
      }
      .m-axis {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 8px;
        color: #aeb3ba;
      }

      /* mockup placement */
      .v1a {
        width: 132px;
        left: 16%;
        top: 16%;
        z-index: 1;
      }
      .v1b {
        width: 160px;
        left: 40%;
        top: 34%;
        z-index: 2;
      }
      .v2a {
        width: 120px;
        left: 18%;
        top: 14%;
        z-index: 1;
      }
      .v2b {
        width: 160px;
        left: 38%;
        top: 32%;
        z-index: 2;
      }
      .v3a {
        width: 128px;
        left: 14%;
        top: 46%;
        z-index: 2;
      }
      .v3b {
        width: 168px;
        left: 36%;
        top: 16%;
        z-index: 1;
      }

      /* agency network viz */
      .v4 {
        position: absolute;
        inset: 0;
      }
      .sol-ring {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        border: 1px solid #e6e8eb;
        border-radius: 50%;
      }
      .sol-ring-1 {
        width: 88px;
        height: 88px;
      }
      .sol-ring-2 {
        width: 156px;
        height: 156px;
      }
      .sol-ring-3 {
        width: 224px;
        height: 224px;
        border-style: dashed;
      }
      .v4-core {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: #111317;
        box-shadow: 0 14px 28px -12px rgba(15, 25, 55, 0.4);
      }
      .v4-chip {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #eef0f2;
        border-radius: 999px;
        padding: 4px 8px 4px 4px;
        font-size: 9.5px;
        font-weight: 600;
        color: #0d0f12;
        white-space: nowrap;
        box-shadow: 0 10px 22px -10px rgba(15, 25, 55, 0.28);
        animation: floatA 6.5s ease-in-out infinite;
      }
      .v4-chip b {
        color: #5a9216;
      }
      .v4-chip .av {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        flex: none;
      }
      .av-1 {
        background: linear-gradient(145deg, #8f9091, #3a3b3c);
      }
      .av-2 {
        background: linear-gradient(145deg, #5e8f1f, #3c5e14);
      }
      .av-3 {
        background: linear-gradient(145deg, #6b6c6d, #2a2a2a);
      }
      .c1 {
        left: 54%;
        top: 16%;
      }
      .c2 {
        left: 8%;
        top: 44%;
      }
      .c3 {
        left: 46%;
        top: 74%;
      }

      /* hover: nudge the mockups */
      .sol-card:hover .m,
      .sol-card:hover .v4-chip {
        animation-play-state: paused;
      }
      .sol-card:hover .sol-viz {
        transform: scale(1.03);
        transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      /* responsive */
      @media (max-width: 760px) {
        .sol__grid {
          grid-template-columns: 1fr;
          max-width: 460px;
        }
        .sol-viz {
          height: 300px;
        }
        
      }

      @media (prefers-reduced-motion: reduce) {
        .m,
        .v4-chip {
          animation: none;
        }
      }

.hiw {
        --lime: var(--rich);
        --lime-deep: var(--rich-deep);
        background-color: var(--paper);
        background-image: var(--tex-paper);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(72px, 9vw, 116px) clamp(20px, 5vw, 64px)
          clamp(56px, 7vw, 96px);
        overflow: hidden;
      }
      .hiw__head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto clamp(40px, 5vw, 64px);
      }
      .hiw__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: 0.2em;
        color: var(--rich-deep);
        margin-bottom: 16px;
      }
      .hiw__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        font-size: clamp(30px, 4.6vw, 52px);
        color: var(--ink);
      }
      .hiw__sub {
        margin: 16px auto 0;
        max-width: 520px;
        color: var(--muted);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }
      .hiw__btn {
        display:inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        background: var(--rich);
        color: var(--ink);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        padding: var(--btn-pad);
        border-radius: var(--btn-radius);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease;
        margin: 20 auto;
      }
      .hiw__btn:hover {
        transform: translateY(-1px);
        background: var(--rich-deep);
        box-shadow: var(--btn-shadow-rich);
      }

      /* stage + tilt */
      .hiw__stage {
        max-width: var(--container);
        margin: 0 auto;
        perspective: 1500px;
      }
      .hiw__deck {
        position: relative;
        transform-origin: 50% 88%;
        transform: rotateX(var(--rx, 44deg));
        will-change: transform;
      }
      .hiw__glow {
        position: absolute;
        inset: -4px;
        border-radius: 24px;
        z-index: 0;
        background: linear-gradient(
          135deg,
          #c3eb42 0%,
          #8fb821 52%,
          #5e8f1f 100%
        );
        filter: blur(9px);
        opacity: 0.9;
      }

      /* dashboard poster */
      .dash {
        position: relative;
        z-index: 2;
        grid-template-columns: 168px 1fr;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 40px 90px -40px rgba(15, 25, 55, 0.5);
        font-size: 11px;
        color: #0c0e11;
        min-height: 420px;
      }
      
      
      .dash_img{
      display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
   
    
      /* play button */
      .hiw__play {
        position: absolute;
        z-index: 5;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: rgba(255,255,255, 0.86);
        display: grid;
        place-items: center;
        padding-left: 4px;
        box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
        transition:
          transform 0.25s ease,
          background 0.25s ease;
      }
      .hiw__play:hover {
        transform: translate(-50%, -50%) scale(1.08);
        background: #0c0e11;
      }
      .hiw__play-ring {
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.55);
        animation: hiwpulse 2.4s ease-out infinite;
      }
      @keyframes hiwpulse {
        0% {
          transform: scale(1);
          opacity: 0.7;
        }
        100% {
          transform: scale(1.4);
          opacity: 0;
        }
      }

      /* video overlay */
      .hiw__video {
        position: absolute;
        z-index: 6;
        inset: 0;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      .hiw__video iframe,
      .hiw__video video {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
      }
      .hiw__deck.playing .dash,
      .hiw__deck.playing .hiw__play {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      .hiw__deck.playing .hiw__video {
        opacity: 1;
        pointer-events: auto;
      }

      /* ===== CTA banner ===== */
      .cta-band {
        background-color: var(--graphite);
        color: #fff;
        background-image: var(--tex-dark);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 64px);
      }
      .cta-band__inner {
        position: relative;
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
      }
      .cta-band__glow {
        position: absolute;
        left: 50%;
        top: -40%;
        transform: translateX(-50%);
        width: min(520px, 92vw);
        height: 320px;
        background: radial-gradient(
          ellipse at center,
          rgba(195, 235, 66, 0.22),
          transparent 66%
        );
        filter: blur(12px);
        pointer-events: none;
      }
      .cta-band__title {
        position: relative;
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        font-size: clamp(30px, 4.6vw, 50px);
      }
      .cta-band__sub {
        position: relative;
        margin: 16px auto 0;
        max-width: 480px;
        color: rgba(255, 255, 255, 0.66);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }
      .cta-band__btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 28px;
        background: var(--lime);
        color: var(--ink);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        padding: var(--btn-pad);
        border-radius: var(--btn-radius);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease;
        box-shadow: var(--btn-shadow-lime);
      }
      .cta-band__btn:hover {
        transform: translateY(-1px);
        background: var(--lime-deep);
        box-shadow: 0 16px 34px -14px rgba(195, 235, 66, 0.5);
      }

      /* responsive */
      @media (max-width: 720px) {
        .dash {
          grid-template-columns: 1fr;
          min-height: 0;
        }
        .dash__side {
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          gap: 8px;
          border-right: none;
          border-bottom: 1px solid #eef0f2;
        }
        .dash__cap,
        .dash__nav,
        .dash__user {
          display: none;
        }
        .dash__grid {
          grid-template-columns: 1fr;
        }
        .hiw__stage {
          perspective: 1100px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hiw__play-ring {
          animation: none;
        }
        .hiw__deck {
          transform: rotateX(8deg);
        }
      }

.feat {
        --lime: var(--rich);
        --lime-deep: var(--rich-deep);
        background-color: var(--cream);
        background-image: var(--tex-cream);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 64px);
      }

      .feat__head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto clamp(40px, 5vw, 64px);
      }
      .feat__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: 0.2em;
        color: var(--rich-deep);
        margin-bottom: 16px;
      }
      .feat__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        font-size: clamp(30px, 4.6vw, 52px);
        color: var(--ink);
      }
      .feat__sub {
        margin: 16px auto 0;
        max-width: 520px;
        color: var(--muted);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }

      .feat__grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: clamp(16px, 1.5vw, 20px);
        max-width: var(--container);
        margin: 0 auto;
      }
      .card-a,
      .card-b {
        grid-column: span 3;
      }
      .card-c,
      .card-d,
      .card-e,
      .card-f,
      .card-g,
      .card-h {
        grid-column: span 2;
      }

      .feat-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: clamp(24px, 2.4vw, 32px);
        position: relative;
        overflow: hidden;
        transition:
          transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.32s ease,
          border-color 0.32s ease;
      }
      .feat-card:hover {
        transform: translateY(-6px);
        border-color: var(--lime);
        box-shadow: 0 26px 52px -26px rgba(20, 30, 60, 0.22);
      }
      .feat-card:focus-visible {
        outline: 2px solid var(--lime-deep);
        outline-offset: 3px;
      }

      .fc-head {
        position: relative;
        z-index: 2;
      }
      .fc-title {
        margin: 0;
        font-size: clamp(19px, 1.7vw, 23px);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .fc-desc {
        margin: 8px 0 0;
        max-width: 328px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }
      .fc-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        transition: color 0.3s ease;
      }
      .fc-cta svg {
        transition: transform 0.3s ease;
      }
      .feat-card:hover .fc-cta {
        color: var(--lime-deep);
      }
      .feat-card:hover .fc-cta svg {
        transform: translateX(4px);
      }

      .fc-viz {
        position: relative;
        margin-top: 24px;
        flex: 1;
        min-height: 152px;
      }

      /* A: line chart */
      .fv-line {
        min-height: 196px;
      }
      .fv-line svg {
        width: 100%;
        height: 196px;
        display: block;
      }
      .fv-line__grid line {
        stroke: #eef0f1;
        stroke-width: 1;
      }
      .fv-line .ln {
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 520;
        stroke-dashoffset: 520;
        transition: stroke-dashoffset 1.6s ease;
      }
      .fv-line.in .ln {
        stroke-dashoffset: 0;
      }
      .ln-1 {
        stroke: #8fb821;
      }
      .ln-2 {
        stroke: #5e8f1f;
      }
      .ln-3 {
        stroke: #cfcdc4;
      }
      .fv-yax {
        position: absolute;
        left: 0;
        top: 16px;
        bottom: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .fv-yax b {
        font-size: 9px;
        font-weight: 500;
        color: #aeb3ba;
      }
      .fv-pill {
        position: absolute;
        font-size: 10px;
        font-weight: 500;
        color: #5b616b;
        background: #f4f5f6;
        border: 1px solid #e8eaec;
        padding: 4px 8px;
        border-radius: 999px;
      }
      .fv-pill.p1 {
        right: 4%;
        top: 22%;
      }
      .fv-pill.p2 {
        right: 4%;
        top: 45%;
      }
      .fv-pill.p3 {
        right: 4%;
        top: 64%;
      }

      /* B: gauge */
      .fv-gauge {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 196px;
      }
      .fv-gauge__wrap {
        position: relative;
        width: min(280px, 80%);
      }
      .fv-gauge svg {
        width: 100%;
        display: block;
        overflow: visible;
      }
      .fv-gauge__track {
        fill: none;
        stroke: #ebedef;
        stroke-width: 14;
        stroke-linecap: round;
      }
      .fv-gauge__arc {
        fill: none;
        stroke: url(#featGaugeGrad);
        stroke-width: 14;
        stroke-linecap: round;
        stroke-dasharray: 258;
        stroke-dashoffset: 258;
        transition: stroke-dashoffset 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .fv-gauge.in .fv-gauge__arc {
        stroke-dashoffset: 38;
      }
      .fv-gauge__center {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        text-align: center;
      }
      .fv-gauge__num {
        display: block;
        font-family: var(--mono);
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .fv-gauge__label {
        font-size: 12px;
        color: #8a8f98;
      }
      .fv-legend {
        list-style: none;
        margin: 16px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 100%;
      }
      .fv-legend li {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 11px;
      }
      .fv-ld {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .fv-ll {
        color: #8a8f98;
        font-size: 10px;
      }
      .fv-legend b {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 500;
        color: var(--ink);
      }

      /* C: integration */
      .fv-int {
        min-height: 152px;
      }
      .fv-tile {
        position: absolute;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #ebedef;
        box-shadow: 0 12px 26px -12px rgba(15, 25, 55, 0.22);
        animation: fvfloat 6s ease-in-out infinite;
      }
      .t-core {
        width: 56px;
        height: 56px;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        background: var(--ink);
        border-color: var(--ink);
        box-shadow: 0 16px 30px -12px rgba(20, 30, 15, 0.4);
        z-index: 2;
        animation: none;
      }
      .t1 {
        width: 40px;
        height: 40px;
        left: 12%;
        top: 18%;
      }
      .t2 {
        width: 40px;
        height: 40px;
        right: 12%;
        top: 14%;
        left: auto;
      }
      .t3 {
        width: 40px;
        height: 40px;
        left: 16%;
        bottom: 8%;
        top: auto;
      }
      .t4 {
        width: 40px;
        height: 40px;
        right: 14%;
        bottom: 6%;
        left: auto;
        top: auto;
      }
      .fv-tile i {
        width: 16px;
        height: 16px;
        display: block;
      }
      .g-circle {
        border-radius: 50%;
        background: linear-gradient(145deg, #c3eb42, #8fb821);
      }
      .g-square {
        border-radius: 4px;
        background: linear-gradient(145deg, #9ace2f, #6f8f1f);
      }
      .g-tri {
        width: 0 !important;
        height: 0 !important;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 16px solid #5e8f1f;
      }
      .g-spark {
        background: linear-gradient(145deg, #8f9091, #2a2a2a);
        clip-path: polygon(
          50% 0,
          61% 39%,
          100% 50%,
          61% 61%,
          50% 100%,
          39% 61%,
          0 50%,
          39% 39%
        );
      }
      @keyframes fvfloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }

      /* D: spend insight */
      .fv-spend {
        min-height: 152px;
      }
      .fv-spend__row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
      }
      .fv-spend__k {
        display: block;
        font-size: 11px;
        color: #8a8f98;
      }
      .fv-spend__v {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .fv-up {
        color: var(--rich-deep);
      }
      .fv-spend__chart {
        width: 100%;
        height: 72px;
        margin-top: 16px;
        display: block;
      }
      .fv-spend__chart .area {
        fill: rgba(143, 184, 33, 0.14);
        stroke: none;
      }
      .fv-spend__chart .stroke {
        fill: none;
        stroke: #8fb821;
        stroke-width: 2.5;
        stroke-linecap: round;
      }

      /* E: automation */
      .fv-auto {
        min-height: 152px;
        display: flex;
        align-items: flex-end;
      }
      .fv-auto__card {
        width: 100%;
        background: #fafbfc;
        border: 1px solid #ececef;
        border-radius: 16px;
        padding: 16px;
      }
      .fv-auto__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
        color: #0a0c0f;
      }
      .fv-auto__dots {
        color: #b6bbc2;
        letter-spacing: 1px;
      }
      .fv-auto__field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 12px 0;
        padding: 12px 12px;
        border: 1px solid #ebedef;
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: #4b5563;
      }
      .fv-auto__tag {
        font-size: 10px;
        font-weight: 600;
        color: #4bbf6b;
        background: #eaf6e1;
        padding: 4px 8px;
        border-radius: 999px;
      }
      .fv-auto__btn {
        width: 100%;
        border: none;
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--ink);
        background: var(--lime);
        padding: 12px;
        border-radius: var(--btn-radius);
        transition: background 0.2s ease;
      }
      .feat-card:hover .fv-auto__btn {
        background: var(--rich-deep);
      }

      /* responsive */
      @media (max-width: 940px) {
        .card-a,
        .card-b {
          grid-column: span 6;
        }
        .card-c,
        .card-d,
        .card-e,
        .card-f,
        .card-g,
        .card-h {
          grid-column: span 3;
        }
      }
      @media (max-width: 680px) {
        .feat__grid {
          grid-template-columns: 1fr;
          max-width: 460px;
        }
        .card-a,
        .card-b,
        .card-c,
        .card-d,
        .card-e,
        .card-f,
        .card-g,
        .card-h {
          grid-column: auto;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .fv-tile {
          animation: none;
        }
        .fv-line .ln,
        .fv-gauge__arc {
          transition: none;
        }
      }

      .dm {
        --ink: #111114;
        --cyan: #c3eb42;
        --cyan-bright: #c3eb42;
        --cyan-deep: #8fb821;
        --green: #a9d52f;
        --text: #f6f7f8;
        --muted: #8b8c94;
        --edge: rgba(255, 255, 255, 0.08);
        --bubble: rgba(255, 255, 255, 0.055);

        position: relative;
        min-height: 100vh; /* scroll length for the pinned sequence */
        background: var(--ink);
        color: var(--text);
        font-family:
          "Geist",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Inter,
          system-ui,
          sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      .dm__sticky {
        position: sticky;
        top: 0;
        height: 120vh;
        overflow: hidden;
      }
      /* faint column guides + glow live inside the pinned frame */
      .dm__sticky::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(100% / 6 - 1px),
          rgba(255, 255, 255, 0.022) calc(100% / 6 - 1px),
          rgba(255, 255, 255, 0.022) calc(100% / 6)
        );
        -webkit-mask-image: linear-gradient(
          180deg,
          transparent,
          #000 14%,
          #000 82%,
          transparent
        );
        mask-image: linear-gradient(
          180deg,
          transparent,
          #000 14%,
          #000 82%,
          transparent
        );
        pointer-events: none;
      }
      .dm__sticky::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 58%;
        width: min(880px, 92vw);
        height: 520px;
        transform: translate(-50%, -50%);
        background: radial-gradient(
          ellipse at center,
          rgba(195, 235, 66, 0.18),
          rgba(195, 235, 66, 0.05) 46%,
          transparent 70%
        );
        filter: blur(16px);
        pointer-events: none;
      }

      /* heading */
      .dm__head {
        position: absolute;
        left: 0;
        right: 0;
        top: clamp(40px, 7vh, 88px);
        z-index: 50;
        text-align: center;
        padding: 0 24px;
      }
      .eyebrow {
        margin: 0 0 16px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--cyan-bright);
        transition: opacity 0.35s ease;
      }
      .dm__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.04;
        font-size: clamp(32px, 5.4vw, 62px);
        white-space: nowrap;
        color: var(--text);
      }
      .grad {
        background: linear-gradient(
          100deg,
          #c3eb42 0%,
          #a9d52f 50%,
          #8fb821 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* deck + cards */
      .deck {
        position: absolute;
        inset: 0;
      }
      .card {
        position: absolute;
        left: 50%;
        top: 56%;
        width: min(620px, 86vw);
        transform: translate(-50%, -50%) translateY(var(--ty, 0))
          scale(var(--sc, 1));
        opacity: var(--op, 1);
        will-change: transform, opacity;
        border-radius: 24px;
        border: 1px solid var(--edge);
        box-shadow:
          0 50px 100px -36px rgba(0, 0, 0, 0.85),
          0 2px 0 rgba(255, 255, 255, 0.03) inset;
        overflow: hidden;
      }

      /* ---- card 1: chat ---- */
      .card--chat {
        padding: 24px 24px 32px;
        background: linear-gradient(
          138deg,
          rgba(86, 98, 106, 0.3) 0%,
          rgba(28, 30, 36, 0.78) 46%,
          rgba(13, 14, 18, 0.92) 100%
        );
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: visible; /* let chips spill over the corners */
      }
      .card--chat::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        background:
          linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.02) 40%,
            transparent 60%
          ),
          radial-gradient(
            120% 85% at 16% 94%,
            rgba(195, 235, 66, 0.07),
            transparent 55%
          );
        pointer-events: none;
      }
      .msg {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .msg--out {
        align-items: flex-end;
      }
      .msg__meta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding-right: 4px;
      }
      .msg__name {
        font-size: 12.5px;
        font-weight: 600;
        color: #d8d9dd;
      }
      .msg__name--in {
        color: var(--muted);
        font-weight: 500;
        padding-left: 40px;
      }
      .tick {
        color: var(--cyan);
      }
      .msg__row {
        display: flex;
        align-items: flex-end;
        gap: 8px;
      }
      .msg__row--out {
        justify-content: flex-end;
      }
      .bubble {
        margin: 0;
        max-width: 400px;
        padding: 8px 16px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 1.4;
        color: #e8e9ec;
        background: var(--bubble);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .bubble--out {
        border-bottom-right-radius: 4px;
      }
      .msg--in .bubble {
        border-bottom-left-radius: 4px;
      }

      .avatar {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        border: 1.5px solid rgba(0, 0, 0, 0.45);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      }
      .avatar--paige {
        background: linear-gradient(145deg, #9ace2f, #5e8f1f);
      }
      .avatar--lina {
        background: linear-gradient(145deg, #8f9091, #3a3b3c);
      }
      .avatar--prince {
        background: linear-gradient(145deg, #6b6c6d, #2a2a2a);
      }
      .avatar--s1 {
        background: linear-gradient(145deg, #7a7b7c, #2f3030);
      }
      .avatar--s2 {
        background: linear-gradient(145deg, #5e8f1f, #3c5e14);
      }
      .avatar--s3 {
        background: linear-gradient(145deg, #b8b6ad, #6b6c6d);
      }
      .avatar--s4 {
        background: linear-gradient(145deg, #8f9091, #3a3b3c);
      }
      .avatar--more {
        background: #1a1c22;
        color: var(--cyan);
        font-size: 16px;
        font-weight: 500;
      }

      .locked {
        position: relative;
        z-index: 1;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(9, 11, 15, 0.66);
        overflow: hidden;
      }
      .locked__banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 8px 8px 0;
        border-radius: 12px;
        padding: 12px;
        color: var(--lime);
        font-size: 13px;
        font-weight: 600;
        background: linear-gradient(
          180deg,
          rgba(195, 235, 66, 0.1),
          rgba(195, 235, 66, 0.03)
        );
        border: 1px solid rgba(195, 235, 66, 0.22);
      }
      .locked__body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 16px;
      }
      .locked__title {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #eef0f2;
      }
      .locked__sub {
        margin: 4px 0 0;
        font-size: 12.5px;
        color: var(--muted);
      }
      .btn-unlock {
        flex: none;
        border: none;
        cursor: pointer;
        padding: 9px 18px;
        border-radius: var(--btn-radius);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--ink);
        background: var(--lime);
        transition:
          transform 0.18s ease,
          background 0.18s ease;
      }
      .btn-unlock:hover {
        transform: translateY(-1px);
        background: var(--lime-deep);
      }
      .btn-unlock:focus-visible {
        outline: 2px solid var(--lime);
        outline-offset: 2px;
      }

      .chip {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px 12px 12px;
        border-radius: 16px;
        background: rgba(17, 18, 23, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.8);
      }
      .chip--header {
        top: -24px;
        left: -28px;
      }
      .chip__avatar {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid var(--cyan);
        box-shadow: 0 0 0 2px rgba(195, 235, 66, 0.25);
      }
      .chip__badge {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(160deg, #8fb821, #5e8f1f);
        border: 2px solid #14151a;
        display: grid;
        place-items: center;
        color: #fff;
      }
      .chip__title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
      }
      .chip__handle {
        font-size: 13px;
        font-weight: 500;
        color: var(--muted);
      }
      .chip__sub {
        margin: 4px 0 0;
        font-size: 12.5px;
        color: var(--muted);
      }

      .stack-wrap {
        position: absolute;
        z-index: 4;
        right: -40px;
        bottom: -16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .tooltip {
        position: relative;
        padding: 8px 16px;
        border-radius: 12px;
        background: rgba(20, 21, 26, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 14px;
        font-style: italic;
        font-weight: 600;
        color: #eef0f2;
        box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.8);
      }
      .tooltip::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -4px;
        width: 12px;
        height: 12px;
        transform: translateX(-50%) rotate(45deg);
        background: rgba(20, 21, 26, 0.95);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .stack {
        display: flex;
        padding: 8px;
        border-radius: 999px;
        background: rgba(14, 15, 19, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.8);
      }
      .stack .avatar {
        width: 40px;
        height: 40px;
        margin-left: -12px;
        border: 2.5px solid #0e0f13;
      }
      .stack .avatar:first-child {
        margin-left: 0;
      }

      .reactions {
        position: absolute;
        z-index: 5;
        right: -16px;
        top: 26%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .react {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--cyan-bright);
        background: rgba(14, 16, 21, 0.86);
        border: 1px solid rgba(195, 235, 66, 0.45);
        box-shadow: 0 0 22px rgba(195, 235, 66, 0.4);
        animation: floatUp 3.4s ease-in-out infinite;
      }
      .react--b {
        animation-delay: 1.1s;
        transform: scale(0.82);
      }
      .react--c {
        animation-delay: 2.2s;
        transform: scale(0.9);
      }
      @keyframes floatUp {
        0% {
          transform: translateY(8px) scale(0.9);
          opacity: 0;
        }
        25% {
          opacity: 1;
        }
        70% {
          opacity: 1;
        }
        100% {
          transform: translateY(-16px) scale(1);
          opacity: 0;
        }
      }

      /* ---- card 2: live network ---- */
      .card--live {
        height: 392px;
        background: linear-gradient(
          160deg,
          rgba(26, 28, 34, 0.96),
          rgba(13, 14, 18, 0.97)
        );
        overflow: visible;
      }
      .net {
        position: absolute;
        inset: 0;
        border-radius: 24px;
        overflow: hidden;
        background-color: rgba(11, 12, 16, 0.6);
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.1) 1.1px,
          transparent 1.2px
        );
        background-size: 17px 17px;
      }
      .net__lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .net__line {
        fill: none;
        stroke: rgba(195, 235, 66, 0.4);
        stroke-width: 1.4;
        stroke-dasharray: 3 6;
      }
      .node {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .node--a {
        left: 22%;
        top: 30%;
        transform: translate(-50%, -50%);
      }
      .node--b {
        left: 52%;
        top: 30%;
        transform: translate(-50%, -50%);
      }
      .node--c {
        left: 30%;
        top: 70%;
        transform: translate(-50%, -50%);
      }
      .node--d {
        left: 77%;
        top: 72%;
        transform: translate(-50%, -50%);
      }
      .node__bubble {
        padding: 8px 12px;
        border-radius: 12px;
        font-size: 13px;
        color: #e9eaec;
        background: rgba(22, 23, 28, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.07);
        white-space: nowrap;
      }
      .node__av {
        width: 56px;
        height: 56px;
        border: 3px solid #11131a;
        box-shadow:
          0 0 0 2px var(--cyan),
          0 0 18px 2px rgba(195, 235, 66, 0.5);
      }
      .emoji {
        position: absolute;
        font-size: 22px;
        line-height: 1;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
        animation: bob 3s ease-in-out infinite;
      }
      .emoji--heart {
        left: 45%;
        top: 50%;
      }
      .emoji--fire {
        left: 60%;
        top: 58%;
        animation-delay: 1.2s;
      }
      @keyframes bob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
      }

      .live-badge {
        position: absolute;
        z-index: 6;
        top: -16px;
        left: -16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--lime);
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.04em;
        box-shadow: 0 16px 34px -14px rgba(195, 235, 66, 0.55);
      }
      .live-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        animation: pulse 1.6s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.35;
        }
      }

      .stat {
        position: absolute;
        z-index: 6;
        right: -24px;
        bottom: -24px;
        padding: 16px 20px;
        border-radius: 16px;
        background: rgba(17, 18, 23, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.85);
      }
      .stat__label {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .stat__value {
        margin: 4px 0 0;
        font-size: 26px;
        font-weight: 700;
        color: #fff;
      }
      .stat__delta {
        font-size: 14px;
        font-weight: 600;
        color: var(--green);
        margin-left: 4px;
      }

      /* ---- card 3: earnings ---- */
      .card--earn {
        height: 400px;
        background: #14151a;
        overflow: visible;
      }
      .media {
        position: absolute;
        inset: 0;
        border-radius: 24px;
        overflow: hidden;
        background:
          radial-gradient(
            120% 90% at 70% 12%,
            rgba(195, 235, 66, 0.3),
            transparent 55%
          ),
          linear-gradient(150deg, #3a3b3c 0%, #232323 52%, #141414 100%);
      }
      .media__glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(
          80% 60% at 28% 78%,
          rgba(0, 0, 0, 0.32),
          transparent 60%
        );
      }
      .quote {
        position: absolute;
        z-index: 5;
        right: 24px;
        bottom: 24px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        max-width: 78%;
      }
      .quote__text {
        margin: 0;
        padding: 12px 16px;
        border-radius: 16px;
        border-bottom-right-radius: 4px;
        font-size: 14px;
        line-height: 1.4;
        color: #eceef0;
        background: rgba(18, 19, 24, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
      }
      .quote__av {
        width: 36px;
        height: 36px;
        border: 2px solid rgba(255, 255, 255, 0.85);
      }
      .earn-badge {
        position: absolute;
        z-index: 6;
        top: -16px;
        left: -16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 16px;
        background: rgba(17, 18, 23, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 14px;
        font-weight: 600;
        color: #eef0f2;
        box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
      }
      /* mobile: keep DM corner badges inside the card so they aren't clipped at the viewport edge */
      @media (max-width: 600px) {
        .dm--static .chip--header {
          left: 8px;
          top: -16px;
        }
        .dm--static .stat {
          right: 8px;
        }
        .dm--static .live-badge,
        .dm--static .earn-badge {
          left: 8px;
        }
      }
      .earn-badge__delta {
        color: var(--green);
        font-weight: 700;
      }

      /* progress rail */
      .rail {
        position: absolute;
        z-index: 50;
        right: clamp(16px, 3vw, 40px);
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .rail__dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        transition: all 0.3s ease;
      }
      .rail__dot.is-on {
        background: var(--cyan-bright);
        height: 24px;
        box-shadow: 0 0 12px rgba(210, 242, 94, 0.6);
      }

      /* ===== static fallback: mobile + reduced motion ===== */
      .dm--static {
        min-height: 0;
      }
      .dm--static .dm__sticky {
        position: static;
        height: auto;
        overflow-x: clip;
        overflow-y: visible;
        padding: clamp(56px, 9vw, 112px) 24px clamp(72px, 11vw, 140px);
      }
      .dm--static .dm__sticky::before,
      .dm--static .dm__sticky::after {
        display: none;
      }
      .dm--static .dm__head {
        position: static;
        margin: 0 auto clamp(40px, 7vw, 72px);
        max-width: 1100px;
      }
      .dm--static .dm__title {
        white-space: normal;
      }
      .dm--static .deck {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(56px, 10vw, 88px);
      }
      .dm--static .card {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        opacity: 1;
        margin: 0 auto;
        width: min(560px, 92vw);
      }
      .dm--static .card--live,
      .dm--static .card--earn {
        height: 360px;
      }
      .dm--static .rail {
        display: none;
      }
      /* reveal-on-scroll for static cards */
      .dm--static .card {
        opacity: 0;
        transform: translateY(26px);
        transition:
          opacity 0.7s ease,
          transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .dm--static .card.in {
        opacity: 1;
        transform: translateY(0);
      }

      @media (max-width: 600px) {
        .dm--static .chip__sub,
        .dm--static .chip__handle {
          display: none;
        }
        .dm--static .reactions {
          display: none;
        }
        .dm--static .tooltip {
          display: none;
        }
        .dm--static .stack-wrap {
          right: 8px;
          bottom: -24px;
        }
        .dm--static .node__bubble {
          font-size: 11px;
          padding: 4px 8px;
        }
        .dm--static .node__av {
          width: 44px;
          height: 44px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .react,
        .emoji,
        .live-dot {
          animation: none;
        }
        .dm--static .card {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

.cstudy {
        --lime: var(--rich);
        --lime-deep: var(--rich-deep);
        background-color: var(--paper);
        background-image: var(--tex-paper);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(72px, 9vw, 116px) clamp(20px, 5vw, 64px);
      }
      .cstudy__head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto clamp(36px, 4.5vw, 56px);
      }
      .cstudy__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: 0.2em;
        color: var(--rich-deep);
        margin-bottom: 16px;
      }
      .cstudy__eyebrow i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--lime);
      }
      .cstudy__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        font-size: clamp(30px, 4.6vw, 52px);
        color: var(--ink);
      }
      .cstudy__sub {
        margin: 16px auto 0;
        max-width: 520px;
        color: var(--muted);
        font-size: clamp(15px, 1.3vw, 17px);
        line-height: 1.55;
      }

      .cst-card,
      .cst-feat {
        text-decoration: none;
        color: inherit;
        transition:
          transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.32s ease,
          border-color 0.32s ease;
      }

      /* featured */
      .cst-feat {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: clamp(20px, 3vw, 48px);
        max-width: var(--container);
        margin: 0 auto 24px;
        padding: clamp(28px, 3.4vw, 48px);
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: 24px;
      }
      .cst-feat:hover {
        transform: translateY(-5px);
        border-color: var(--rich);
        box-shadow: 0 30px 60px -30px rgba(20, 30, 15, 0.2);
        background: var(--paper);
      }
      .cst-tag {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--lime-deep);
        background: #eef7d6;
        padding: 4px 12px;
        border-radius: 999px;
      }
      .cst-brand {
        display: block;
        margin: 16px 0 8px;
        font-size: 14px;
        font-weight: 700;
        color: #5b616b;
        letter-spacing: 0.02em;
      }
      .cst-feat__title {
        margin: 0;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.14;
        font-size: clamp(22px, 2.4vw, 32px);
        color: var(--ink);
      }
      .cst-feat__desc {
        margin: 16px 0 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.55;
        max-width: 440px;
      }
      .cst-stats {
        display: flex;
        gap: clamp(16px, 2.4vw, 36px);
        margin: 24px 0;
      }
      .cst-stat b {
        display: block;
        font-size: clamp(22px, 2.4vw, 30px);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #0a0c0f;
      }
      .cst-stat span {
        font-size: 11.5px;
        color: #8a8f98;
      }
      .cst-readcta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #0a0c0f;
        transition: color 0.3s ease;
      }
      .cst-readcta svg {
        transition: transform 0.3s ease;
      }
      .cst-feat:hover .cst-readcta {
        color: var(--lime-deep);
      }
      .cst-feat:hover .cst-readcta svg {
        transform: translateX(4px);
      }

      .cst-feat__viz {
        position: relative;
        height: clamp(260px, 26vw, 320px);
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(160deg, #fbfdf3, #f1f5e2);
        border: 1px solid #ecefe0;
      }
      .cst-dots {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, #8fb821 42%, transparent 46%);
        background-size: 32px 32px;
        opacity: 0.85;
      }
      .cst-blob {
        position: absolute;
        right: -12%;
        top: -18%;
        width: 60%;
        height: 70%;
        background: radial-gradient(
          circle at 40% 40%,
          rgba(143, 184, 33, 0.5),
          transparent 62%
        );
        filter: blur(8px);
      }
      .cst-fcard {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        background: #fff;
        border-radius: 16px;
        padding: 16px 16px;
        box-shadow: 0 24px 50px -22px rgba(20, 40, 20, 0.35);
        border: 1px solid #eef0f2;
      }
      .cst-fcard__h {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        color: #8a8f98;
      }
      .cst-trend {
        color: var(--rich-deep);
        font-weight: 700;
      }
      .cst-fcard__v {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 4px 0 8px;
      }
      .cst-spark {
        width: 100%;
        height: 44px;
        display: block;
      }
      .cst-spark .area {
        fill: rgba(143, 184, 33, 0.16);
        stroke: none;
      }
      .cst-spark .line {
        fill: none;
        stroke: #8fb821;
        stroke-width: 2.5;
        stroke-linecap: round;
      }
      .cst-chip {
        position: absolute;
        background: #fff;
        border: 1px solid #eef0f2;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 11px;
        font-weight: 600;
        box-shadow: 0 10px 22px -10px rgba(20, 40, 20, 0.3);
      }
      .cst-chip-1 {
        top: 13%;
        left: 8%;
      }
      .cst-chip-2 {
        bottom: 13%;
        right: 8%;
      }

      /* grid */
      .cst-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 1.8vw, 24px);
        max-width: var(--container);
        margin: 0 auto;
      }
      .cst-card {
        display: flex;
        flex-direction: column;
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: clamp(16px, 2vw, 24px);
      }
      .cst-card:hover {
        transform: translateY(-6px);
        border-color: var(--rich);
        box-shadow: 0 26px 52px -26px rgba(20, 30, 15, 0.2);
        background: var(--paper);
      }
      .cst-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 16px;
      }
      .cst-card__brand {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
      }
      .cst-plat {
        font-size: 11px;
        color: #9aa0a8;
        font-weight: 500;
      }

      .cst-viz {
        position: relative;
          height: clamp(167px, 30vw, 260px);
        border-radius: 16px;
        overflow: hidden;
      }
  
      .cst-orb {
        position: absolute;
        width: 120px;
        height: 120px;
        right: -24px;
        bottom: -32px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 35%,
          rgba(255, 255, 255, 0.55),
          rgba(255, 255, 255, 0.05) 60%
        );
      }
      .cst-viz::after {
        content: "";
        position: absolute;
        left: -20px;
        top: -24px;
        width: 88px;
        height: 88px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.12);
        transform: rotate(18deg);
      }
      .cst-badge {
        position: absolute;
        left: 16px;
        top: 16px;
        z-index: 2;
        background: #c3eb42;
        color: var(--ink);
        font-size: 13px;
        font-weight: 700;
        padding: 8px 12px;
        border-radius: 999px;
        box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.3);
      }

      .cst-title {
        margin: 16px 0 0;
        font-size: clamp(15px, 1.3vw, 17px);
        font-weight: 700;
        line-height: 1.32;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .cst-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 16px;
        font-size: 13px;
        font-weight: 600;
        color: #0a0c0f;
        transition: color 0.3s ease;
      }
      .cst-cta svg {
        transition: transform 0.3s ease;
      }
      .cst-card:hover .cst-cta {
        color: var(--lime-deep);
      }
      .cst-card:hover .cst-cta svg {
        transform: translateX(4px);
      }

      /* responsive */
      @media (max-width: 920px) {
        .cst-feat {
          grid-template-columns: 1fr;
        }
        .cst-feat__viz {
          order: -1;
        }
        .cst-grid {
          grid-template-columns: 1fr;
          max-width: 460px;
        }
      }

.nl {
        --lime: #c3eb42;
        background-color: var(--cream);
        background-image: var(--tex-cream);
        background-size: var(--tex-size);
        background-position: center top;
        background-repeat: var(--tex-repeat);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
        padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
      }
      .nl__eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: var(--container);
        margin: 0 auto 16px;
        font-size: 13px;
        letter-spacing: 0.2em;
        color: var(--rich-deep);
      }
      .nl__eyebrow i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rich);
      }

      .nl__card {
        position: relative;
        max-width: var(--container);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.08fr;
        align-items: center;
        gap: 24px;
        border-radius: 28px;
        overflow: hidden;
        /*padding: clamp(36px, 4.4vw, 64px);*/
        background: linear-gradient(
          122deg,
          #232323 0%,
          #1c1c1c 52%,
          #141414 100%
        );
        box-shadow: 0 40px 90px -44px rgba(15, 20, 10, 0.5);
        min-height: 380px;
      }
      .nl__stripes {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(
          90deg,
          transparent 0 46px,
          rgba(255, 255, 255, 0.025) 46px 47px
        );
      }
      .nl__shine {
        position: absolute;
        top: -40%;
        left: -10%;
        width: 60%;
        height: 120%;
        pointer-events: none;
        background: radial-gradient(
          ellipse at center,
          rgba(195, 235, 66, 0.16),
          transparent 62%
        );
        filter: blur(10px);
      }

      .nl__left {
        position: relative;
        z-index: 2;
        max-width: 420px;
        padding-left:36px;
      }
      .nl__title {
        margin: 0;
        color: #fff;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
        font-size: clamp(28px, 3.4vw, 42px);
      }
      .nl__sub {
        margin: 16px 0 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(14px, 1.1vw, 16px);
        line-height: 1.55;
        max-width: 380px;
      }

      .nl__form {
        display: flex;
        gap: 8px;
        margin-top: 24px;
        max-width: 420px;
      }
      .nl__input {
        flex: 1;
        min-width: 0;
        font: inherit;
        font-size: 14px;
        color: #0c0e11;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        padding: 12px 16px;
        outline: none;
        transition: box-shadow 0.2s ease;
      }
      .nl__input::placeholder {
        color: #9aa0a8;
      }
      .nl__input:focus {
        box-shadow: 0 0 0 3px rgba(195, 235, 66, 0.5);
      }
      .nl__btn {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--ink);
        background: var(--lime);
        border: none;
        padding: var(--btn-pad);
        border-radius: var(--btn-radius);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease;
      }
      .nl__btn:hover {
        transform: translateY(-1px);
        background: var(--lime-deep);
        box-shadow: var(--btn-shadow-lime);
      }
      .nl__note {
        margin: 12px 0 0;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.6);
      }
      .nl__note.ok {
        color: var(--lime);
        font-weight: 600;
      }

      /* right: tilting dashboard */
      .nl__right {
        position: relative;
        z-index: 1;
      }
      .nl-stage {
        perspective: 1500px;
      }
      .nl-deck {
        transform-origin: 50% 60%;
        transform: rotateY(-9deg) rotateX(var(--rx, 16deg));
        will-change: transform;
      }
    
 
  .nl-deck {
  transform-origin: 0% 50%;
  transform: rotateY(-14deg) rotateX(4deg);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.nl__card:hover .nl-deck {
  transform: rotateY(-10deg) rotateX(2deg);
}
.nd-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: transparent;              /* no white wrapper */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}


/* Responsive */
@media (max-width: 880px) {
  .nl__right { min-height: 0; }
  .nl-stage {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 8px;
  }
  .nl-deck { transform: rotateY(-6deg) rotateX(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-deck { transform: rotateY(-8deg); }
}
  
   
      .nd__head b {
        font-size: 12px;
      }
      .nd__head span {
        display: block;
        font-size: 8.5px;
        color: #9aa0a8;
        margin-top: 4px;
      }
      .nd__head .nd__cta {
        display: inline-block;
        margin-top: 0;
        font-size: 9px;
        font-weight: 600;
        color: #fff;
        background: #5e8f1f;
        padding: 8px 12px;
        border-radius: 8px;
      }
      .nd__metrics {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
      .nd__metric {
        background: #f7f8f9;
        border: 1px solid #eef0f2;
        border-radius: 8px;
        padding: 8px;
      }
      .nd__mk {
        display: block;
        font-size: 8px;
        color: #9aa0a8;
        margin-bottom: 4px;
      }
      .nd__metric b {
        font-size: 12.5px;
        letter-spacing: -0.01em;
      }
      .nd__up {
        font-size: 8px;
        font-weight: 600;
        color: #5e8f1f;
        margin-left: 4px;
      }
      .nd__dn {
        font-size: 8px;
        font-weight: 600;
        color: #9aa0a8;
        margin-left: 4px;
      }
      .nd__chartcard {
        background: #f7f8f9;
        border: 1px solid #eef0f2;
        border-radius: 12px;
        padding: 8px 12px;
      }
      .nd__chart-h {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }
      .nd__chart-h b {
        font-size: 14px;
      }
      .nd__legend {
        display: flex;
        gap: 8px;
        font-size: 8px;
        color: #9aa0a8;
      }
      .nd__legend i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: middle;
      }
      .lg-r {
        background: #8fb821;
      }
      .lg-s {
        background: #b8b6ad;
      }
      .nd__chartwrap {
        position: relative;
        margin-top: 8px;
      }
      .nd__chart {
        width: 100%;
        height: 88px;
        display: block;
      }
      .nd-area {
        fill: rgba(143, 184, 33, 0.12);
        stroke: none;
      }
      .nd-line {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
      }
      .nd-rev {
        stroke: #8fb821;
      }
      .nd-spend {
        stroke: #b8b6ad;
      }
      .nd-dot {
        fill: #8fb821;
        stroke: #fff;
        stroke-width: 2;
      }
      .nd__tip {
        position: absolute;
        left: 46%;
        top: 6%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid #eceef0;
        border-radius: 8px;
        padding: 4px 8px;
        font-size: 9px;
        font-weight: 700;
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.2);
      }
      .nd__tip small {
        display: block;
        font-size: 7px;
        font-weight: 500;
        color: #9aa0a8;
      }
      .nd__deals {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .nd__deal {
        background: #f7f8f9;
        border: 1px solid #eef0f2;
        border-radius: 8px;
        padding: 8px;
      }
      .nd__dk {
        display: block;
        font-size: 8px;
        color: #9aa0a8;
        margin-bottom: 8px;
      }
      .nd__person {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nd__person b {
        font-size: 9px;
      }
      .nd__person span {
        display: block;
        font-size: 7.5px;
        color: #9aa0a8;
      }
      .nd__av {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        flex: none;
      }
      .a1 {
        background: linear-gradient(145deg, #8f9091, #3a3b3c);
      }
      .a2 {
        background: linear-gradient(145deg, #5e8f1f, #3c5e14);
      }
      .a3 {
        background: linear-gradient(145deg, #6b6c6d, #2a2a2a);
      }

      /* responsive */
      @media (max-width: 880px) {
        .nl__card {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .nl__left {
          max-width: none;
        }
        .nl__right {
          overflow: hidden;
        }
        .nl__left{
            padding:40px !important;
        }
        
        .nd {
          margin: 0 auto;
          width: min(560px, 100%);
        }
        .nl-deck {
          transform: rotateX(6deg);
        }
      }
      @media (max-width: 520px) {
        .nl__form {
          flex-direction: column;
        }
        .nl__btn {
          justify-content: center;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .nl-deck {
          transform: rotateY(-9deg) rotateX(6deg);
        }
      }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c55d160 */.padding-0{
    padding:0 !important;
}/* End custom CSS */