:root {
         /* Style like your references */
         --bg: #08382f;
         /* warm light */
         --surface: #FFFFFF;
         --ink: #0B1B14;
         --muted: rgba(11, 27, 20, .72);

         --green: #0E3B2E;
         /* dark green primary */
         --green2: #0B2F25;
         --accent: #015a49;
         /* button green */
         --accent2: #08382f   ;

         --border: rgba(11, 27, 20, .10);
         --shadow: 0 18px 55px rgba(10, 20, 14, .16);

         --r12: 12px;
         --r16: 16px;
         --r24: 24px;
         --r32: 32px;

         --container: 1180px;
         --pad: 22px;

         --h1: clamp(2.3rem, 5vw, 4.7rem);
         --h2: clamp(1.45rem, 2.6vw, 2.2rem);
         --p: clamp(1.02rem, 1.15vw, 1.15rem);
      }

      * {
         box-sizing: border-box;
      }

      html {
         scroll-behavior: smooth;
         color: #47562e !important;
      }

      body {
         margin: 0;
         font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
         color: var(--ink);
         background: var(--bg);
         line-height: 1.45;
      }

      a,h1,h2,h3,p,li {
         color: rgb(191 176 95) !important;
         text-decoration: none;
      }

      img {
         width: 100%;
         display: block;
      }

      .container {
         width: min(var(--container), calc(100% - 2*var(--pad)));
         margin: 0 auto;
      }

      /* ============== Header (transparent on hero) ============== */
      .header {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         z-index: 100;
         padding: 16px 0;
         transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, padding .18s ease;
         background: transparent;
         border-bottom: 1px solid transparent;
         height: 85px;
      }

      .header.scrolled {
         background: rgba(255, 255, 255, 0.82);
         backdrop-filter: blur(14px);
         border-bottom: 1px solid var(--border);
         box-shadow: 0 10px 30px rgba(10, 20, 14, .10);
         padding: 12px 0;
      }

      .header-inner {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
      }

      .brand {
         display: flex;
         align-items: center;
         gap: 12px;
         min-width: 240px;
      }

      .logo {
         width: 70px;
         height: 70px;
         /* border-radius: 16px; */
         /* background: linear-gradient(135deg, var(--green), var(--green2)); */
         /* box-shadow: 0 16px 34px rgba(14, 59, 46, .25); */
         position: relative;
         /* overflow: hidden; */
      }
      .logo img{
         width: 60px;
      }
/* 
      .logo::after {
         content: "";
         position: absolute;
         inset: 11px;
         background: linear-gradient(135deg, rgba(68, 176, 91, .98), rgba(47, 158, 68, .65));
         border-radius: 12px;
         clip-path: polygon(0 15%, 70% 15%, 70% 0, 100% 50%, 70% 100%, 70% 85%, 0 85%);
         opacity: .95;
      } */

      .brand-title {
         display: flex;
         flex-direction: column;
         line-height: 1.05;
      }

      .brand-title strong {
         font-size: 1.06rem;
         letter-spacing: .2px;
         color: #fff;
         text-shadow: 0 10px 24px rgba(0, 0, 0, .25);
      }

      .header.scrolled .brand-title strong {
         color: var(--ink);
         text-shadow: none;
      }

      .brand-title span {
         font-size: .88rem;
         color: rgba(255, 255, 255, .82);
      }

      .header.scrolled .brand-title span {
         color: var(--muted);
      }

      .nav {
         display: flex;
         gap: 6px;
         align-items: center;
      }

      .nav a {
         padding: 10px 12px;
         border-radius: 999px;
         font-weight: 700;
         font-size: .95rem;
         color: rgba(255, 255, 255, .90);
         transition: background .15s ease, color .15s ease;
      }

      .nav a:hover {
         background: rgba(255, 255, 255, .10);
      }

      .header.scrolled .nav a {
         color: rgba(11, 27, 20, .82);
      }

      .header.scrolled .nav a:hover {
         background: rgba(11, 27, 20, .06);
      }

      .cta {
         display: flex;
         align-items: center;
         gap: 10px;
      }

      .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         padding: 12px 16px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .22);
         background: rgba(255, 255, 255, .12);
         color: rgba(255, 255, 255, .92);
         font-weight: 800;
         font-size: .95rem;
         cursor: pointer;
         transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
         white-space: nowrap;
      }

      .btn:hover {
         transform: translateY(-1px);
      }

      .btn-primary {
         background: linear-gradient(135deg, var(--accent), var(--accent2));
         border-color: rgba(255, 255, 255, .12);
         color: #053e30;
         box-shadow: 0 18px 44px rgba(68, 176, 91, .25);
      }

      .btn-ghost {
         background: rgba(255, 255, 255, .14);
      }

      /* burger */
      .menu-btn {
         display: none;
         width: 46px;
         height: 46px;
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, .22);
         background: rgba(255, 255, 255, .12);
         cursor: pointer;
      }

      .header.scrolled .menu-btn {
         border-color: var(--border);
         background: rgba(255, 255, 255, .75);
      }

      .menu-icon {
         width: 18px;
         height: 12px;
         margin: 0 auto;
         position: relative;
      }

      .menu-icon span {
         position: absolute;
         left: 0;
         right: 0;
         height: 2px;
         background: rgba(255, 255, 255, .92);
         border-radius: 2px;
      }

      .header.scrolled .menu-icon span {
         background: rgba(11, 27, 20, .76);
      }

      .menu-icon span:nth-child(1) {
         top: 0;
      }

      .menu-icon span:nth-child(2) {
         top: 5px;
      }

      .menu-icon span:nth-child(3) {
         top: 10px;
      }

      /* Drawer */
      .overlay {
         position: fixed;
         inset: 0;
         background: rgba(8, 16, 12, .45);
         backdrop-filter: blur(3px);
         z-index: 200;
         display: none;
      }

      .drawer {
         position: fixed;
         top: 0;
         right: 0;
         height: 100%;
         width: min(92vw, 390px);
         background: rgba(245, 245, 239, .94);
         backdrop-filter: blur(14px);
         border-left: 1px solid var(--border);
         box-shadow: -20px 0 60px rgba(10, 20, 14, .20);
         z-index: 220;
         transform: translateX(110%);
         transition: transform .2s ease;
         padding: 18px;
         display: flex;
         flex-direction: column;
         gap: 10px;
      }

      .overlay.open {
         display: block;
      }

      .drawer.open {
         transform: translateX(0%);
      }

      .drawer-top {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         padding-bottom: 10px;
         border-bottom: 1px solid var(--border);
      }

      .drawer-top b {
         font-size: 1.05rem;
      }

      .drawer a {
         padding: 12px 12px;
         border-radius: 16px;
         font-weight: 800;
         color: rgba(11, 27, 20, .86);
         background: rgba(255, 255, 255);
         border: 1px solid rgba(11, 27, 20, .08);
      }

      .drawer a:hover {
         background: rgba(255, 255, 255, .92);
      }

      .drawer .drawer-cta {
         margin-top: 6px;
         display: grid;
         gap: 10px;
      }

      .drawer .drawer-cta .btn {
         border-color: var(--border);
         background: rgba(255, 255, 255, .85);
         color: rgba(11, 27, 20, .88);
         box-shadow: 0 10px 24px rgba(10, 20, 14, .08);
      }

      .drawer .drawer-cta .btn-primary {
         background: linear-gradient(135deg, var(--accent), var(--accent2));
         color: #053e30;
         border-color: rgba(68, 176, 91, .25);
      }

      /* ============== Hero like examples ============== */
      .hero {
         min-height: 92vh;
         display: flex;
         align-items: stretch;
         position: relative;
         overflow: hidden;
         border-bottom-left-radius: var(--r32);
         border-bottom-right-radius: var(--r32);
         
      }

      .hero-bg {
         position: absolute;
         inset: 0;
         background-image:
            linear-gradient(90deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .24) 100%),
            url("../img/bgbg.png");
         background-size: cover;
         background-position: center;
         transform: scale(1.02);
         filter: saturate(1.05) contrast(1.05);
      }

      @media (max-width:767px) {
           .hero-bg {
         position: absolute;
         inset: 0;
         background-image:
            linear-gradient(90deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .24) 100%),
            url("../img/bgbg2.png");
         background-size: cover;
         background-position: center;
         transform: scale(1.02);
         filter: saturate(1.05) contrast(1.05);
      }
      }

      .hero-inner {
         position: relative;
         width: 100%;
         padding-top: 92px;
         /* for fixed header */
         padding-bottom: 42px;
      }

      .hero-grid {
         display: grid;
         grid-template-columns: 1.1fr .9fr;
         gap: 22px;
         align-items: end;
         padding: 44px;
         min-height: calc(92vh - 92px);
      }

      .hero-copy {
         color: rgba(255, 255, 255, .92);
         padding-bottom: 18px;
      }

      .kicker {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 10px 12px;
         border-radius: 999px;
         background: rgba(255, 255, 255, .12);
         border: 1px solid rgba(255, 255, 255, .18);
         font-weight: 800;
         letter-spacing: .2px;
         margin-bottom: 14px;
      }

      .kicker .dot {
         width: 10px;
         height: 10px;
         border-radius: 99px;
         background: var(--accent);
         box-shadow: 0 0 0 5px rgba(68, 176, 91, .18);
      }

      h1 {
         margin: 0;
         font-size: var(--h1);
         line-height: 1.02;
         letter-spacing: -1px;
         max-width: 14ch;
      }

      .highlight {
         color: var(--accent);
      }

      .hero-copy p {
         margin: 14px 0 0;
         font-size: var(--p);
         color: rgba(255, 255, 255, .82);
         max-width: 62ch;
      }

      .hero-actions {
         margin-top: 22px;
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         align-items: center;
      }

      .trust-row {
         margin-top: 14px;
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         color: rgba(255, 255, 255, .78);
         font-weight: 700;
         font-size: .95rem;
      }

      .trust-pill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         background: rgba(255, 255, 255, .10);
         border: 1px solid rgba(255, 255, 255, .14);
      }

      /* Right side: "floating cards" like templates */
      .hero-side {
         display: flex;
         justify-content: flex-end;
         padding-bottom: 18px;
      }

      .float-card {
         width: min(420px, 100%);
         border-radius: var(--r24);
         background: rgba(245, 245, 239, .92);
         border: 1px solid rgba(255, 255, 255, .18);
         box-shadow: var(--shadow);
         padding: 16px;
      }

      .float-top {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 10px;
      }

      .float-top b {
         font-size: 1.02rem;
      }

      .float-top span {
         font-weight: 800;
         font-size: .92rem;
         color: rgba(11, 27, 20, .70);
      }

      .float-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
      }

      .mini {
         border-radius: 16px;
         background: rgba(255, 255, 255, .85);
         border: 1px solid rgba(11, 27, 20, .10);
         padding: 12px;
      }

      .mini strong {
         display: block;
         font-size: 1.12rem;
         letter-spacing: -0.3px;
      }

      .mini span {
         display: block;
         margin-top: 2px;
         color: rgba(11, 27, 20, .68);
         font-weight: 700;
         font-size: .9rem;
      }

      .float-note {
         margin-top: 10px;
         color: rgba(11, 27, 20, .72);
         font-size: .95rem;
      }

      /* ============== Below hero: stats + logos (like your screenshots) ============== */
      .below-hero {
         margin-top: -30px;
         padding-bottom: 22px;
         position: relative;
         z-index: 5;
      }

      .bar {
         border-radius: var(--r32);
         /* background: rgba(255, 255, 255, .92); */
         border: 1px solid var(--border);
         box-shadow: 0 16px 44px rgba(10, 20, 14, .12);
         padding: 18px;
         overflow: hidden;
      }

      .bar-grid {
         display: flex;
         grid-template-columns: 1.1fr .9fr;
         flex-direction: column;
         gap: 16px;
         justify-content: space-around;
         align-items: center;
      }

      .stats {
         width: 100%;
         gap: 10px;
         display: flex;
         justify-content: space-around;
         margin-top: -17px;
      }

      .stat {
         border-radius: 18px;
         background: rgba(245, 245, 239, .7);
         border: 1px solid rgba(11, 27, 20, .08);
         padding: 50px;
      }

      .stat strong {
         display: block;
         font-size: 1.5rem;
         letter-spacing: -0.5px;
         color: var(--green);
      }

      .stat span {
         display: block;
         margin-top: 3px;
         color: rgba(11, 27, 20, .70);
         font-weight: 750;
         font-size: .92rem;
      }

      .logos {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         justify-content: flex-end;
         align-items: center;
         color: rgba(11, 27, 20, .52);
         font-weight: 800;
      }

      .logo-pill {
         padding: 10px 12px;
         border-radius: 999px;
         background: rgba(245, 245, 239, .7);
         border: 1px solid rgba(11, 27, 20, .08);
         font-size: .92rem;
      }

      /* ============== Section cards (like template lower part) ============== */
      .section {
         padding: 44px 0;
      }

      .section-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 12px;
         margin-bottom: 14px;
      }

      h2 {
         margin: 0;
         font-size: var(--h2);
         letter-spacing: -0.4px;
      }

      .section-head p {
         margin: 6px 0 0;
         color: var(--muted);
         max-width: 70ch;
         font-size: 1.02rem;
      }

      .cards {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 14px;
         margin-top: 14px;
      }

      .card {
         border-radius: var(--r24);
         background: rgba(255, 255, 255, .92);
         border: 1px solid var(--border);
         box-shadow: 0 16px 44px rgba(10, 20, 14, .10);
         padding: 18px;
      }

      .card b {
         display: block;
         font-size: 1.06rem;
      }

      .card p {
         margin: 8px 0 0;
         color: rgba(11, 27, 20, .70);
      }

      /* ============== Mobile responsiveness ============== */
      @media (max-width: 980px) {
         .nav {
            display: none;
         }

         .menu-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
         }

         .hero {
            min-height: 92vh;
            border-radius: 0;
         }

         .hero-grid {
            grid-template-columns: 1fr;
            padding-top: 26px;
         }

         h1 {
            max-width: 18ch;
         }

         .hero-side {
            justify-content: flex-start;
         }

         .bar-grid {
            grid-template-columns: 1fr;
         }

         .logos {
            justify-content: flex-start;
         }

         .stats {
            grid-template-columns: 1fr 1fr;
         }

         .cards {
            grid-template-columns: 1fr;
         }
      }

      @media (max-width: 420px) {
         .brand-title span {
            display: none;
         }

         .btn {
            padding: 12px 14px;
         }

         .stats {
            grid-template-columns: 1fr;
         }
      }

      /* ===== Block 2: Proof / Why Us ===== */
      /* =========================
   BLOCK 2 (Art / Photo Proof)
   ========================= */
      .art-proof {
         position: relative;
      }

      .art-proof .wrap {
         position: relative;
         border-radius: var(--r32);
         border: 1px solid var(--border);
         background:
        radial-gradient(1200px 700px at 15% 20%, rgba(73,166,90,.22), transparent 55%),
        radial-gradient(900px 560px at 85% 30%, rgba(73,166,90,.18), transparent 50%),
        radial-gradient(900px 700px at 50% 110%, rgba(255,255,255,.07), transparent 55%),
        linear-gradient(160deg, var(--bg1), var(--bg2));
         box-shadow: 0 18px 55px rgba(10, 20, 14, .10);
         overflow: hidden;
         padding: 100px;
      }

      /* subtle “art” grain */
      .art-proof .wrap::after {
         content: "";
         position: absolute;
         inset: 0;
         background:
            repeating-linear-gradient(45deg,
               rgba(11, 27, 20, .03) 0px,
               rgba(11, 27, 20, .03) 1px,
               transparent 2px,
               transparent 6px);
         opacity: .22;
         pointer-events: none;
         mix-blend-mode: multiply;
      }

      .art-proof .top {
         position: relative;
         z-index: 1;
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 18px;
      }

      .art-proof h2 {
         margin: 0;
         font-size: clamp(1.7rem, 2.9vw, 2.55rem);
         letter-spacing: -0.6px;
      }

      .art-proof .sub {
         margin: 10px 0 0;
         color: var(--muted);
         max-width: 78ch;
         font-size: 1.03rem;
      }

      .art-proof .actions {
         display: flex;
         gap: 10px;
         align-items: center;
         flex-wrap: wrap;
      }

      .art-proof .grid {
         position: relative;
         z-index: 1;
         display: grid;
         gap: 16px;
         margin-top: 16px;
      }

      /* left: story + trust cards */
      .art-proof .left {
         display: flex;
         flex-direction: column;
         gap: 12px;
      }

      .art-proof .story {
         border-radius: 26px;
         border: 1px solid var(--border);
         background: rgba(255, 255, 255, .74);
         box-shadow: 0 16px 44px rgba(10, 20, 14, .08);
         padding: 18px;
      }

      .art-proof .story b {
         display: block;
         color: var(--green);
         font-size: 1.05rem;
         letter-spacing: -0.2px;
      }

      .art-proof .story p {
         margin: 8px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 650;
         line-height: 1.55;
      }

      /* metric pills */
      .art-proof .mini {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         margin-top: 12px;
      }

      .art-proof .pill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         background: rgba(14, 59, 46, .06);
         border: 1px solid rgba(14, 59, 46, .10);
         color: rgba(11, 27, 20, .78);
         font-weight: 900;
         font-size: .93rem;
      }

      /* trust cards row */
      .art-proof .trust-row {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 12px;
      }

      .art-proof .tcard {
         border-radius: 24px;
         border: 1px solid var(--border);
         background: rgba(255, 255, 255, .82);
         box-shadow: 0 16px 44px rgba(10, 20, 14, .08);
         padding: 16px;
         min-height: 132px;
      }

      .art-proof .tcard b {
         display: block;
         color: var(--green);
         font-size: 1.02rem;
         letter-spacing: -0.2px;
      }

      .art-proof .tcard p {
         margin: 8px 0 0;
         color: rgba(11, 27, 20, .70);
         font-weight: 650;
      }

      /* right: artistic collage + sliders + gallery */
      .art-proof .right {
         display: flex;
         flex-direction: column;
         gap: 12px;
      }

      /* image comparison sliders */
      .compare-wrap {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
     
         gap: 12px;
      }

      .compare {
         position: relative;
         border-radius: 26px;
         overflow: hidden;
         border: 1px solid rgba(11, 27, 20, .10);
         box-shadow: 0 18px 52px rgba(10, 20, 14, .10);
          background:
        radial-gradient(1200px 700px at 15% 20%, rgba(73,166,90,.22), transparent 55%),
        radial-gradient(900px 560px at 85% 30%, rgba(73,166,90,.18), transparent 50%),
        radial-gradient(900px 700px at 50% 110%, rgba(255,255,255,.07), transparent 55%),
        linear-gradient(160deg, var(--bg1), var(--bg2));
         min-height: 350px;
      }

      .compare .img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
      }

      .compare .after {
         clip-path: inset(0 0 0 50%);
      }

      .compare .label {
         position: absolute;
         top: 12px;
         z-index: 3;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         background: rgba(245, 245, 239, .86);
         border: 1px solid rgba(11, 27, 20, .10);
         color: rgba(11, 27, 20, .78);
         font-weight: 950;
         font-size: .86rem;
      }

      .compare .label.before {
         left: 12px;
      }

      .compare .label.after {
         right: 12px;
      }

      .compare input[type="range"] {
         position: absolute;
         left: 10px;
         right: 10px;
         bottom: 12px;
         z-index: 4;
         width: calc(100% - 20px);
         accent-color: var(--accent);
      }

      .compare .divider {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         width: 2px;
         background: rgba(255, 255, 255, .85);
         z-index: 3;
         box-shadow: 0 0 0 1px rgba(11, 27, 20, .15);
      }

      .compare .knob {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 46px;
         height: 46px;
         border-radius: 999px;
         background: rgba(245, 245, 239, .92);
         border: 1px solid rgba(11, 27, 20, .12);
         z-index: 4;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 18px 40px rgba(10, 20, 14, .12);
      }

      .compare .knob::before {
         content: "↔";
         font-weight: 1000;
         color: rgba(11, 27, 20, .75);
         font-size: 1.05rem;
      }

      /* gallery filters */
      .gallery-head {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         margin-top: 2px;
      }

      .filters {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
      }

      .fbtn {
         border: 1px solid rgba(14, 59, 46, .12);
         background: rgba(255, 255, 255, .70);
         padding: 10px 12px;
         border-radius: 999px;
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
         cursor: pointer;
         transition: transform .15s ease, background .15s ease, border-color .15s ease;
      }

      .fbtn:hover {
         transform: translateY(-1px);
      }

      .fbtn.active {
         border-color: rgba(68, 176, 91, .35);
         background: rgba(68, 176, 91, .16);
      }

      /* photo grid */


      .photo {
         position: relative;
         border-radius: 22px;
         overflow: hidden;
         border: 1px solid rgba(11, 27, 20, .10);
         background: #fff;
         box-shadow: 0 14px 34px rgba(10, 20, 14, .08);
         cursor: pointer;
         min-height: 232px;
      }

      .photo .pimg {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transition: transform .25s ease;
      }

      .photo:hover .pimg {
         transform: scale(1.05);
      }

      .photo .ptag {
         position: absolute;
         left: 10px;
         bottom: 10px;
         padding: 8px 10px;
         border-radius: 999px;
         background: rgba(245, 245, 239, .86);
         border: 1px solid rgba(11, 27, 20, .10);
         color: rgba(11, 27, 20, .78);
         font-weight: 950;
         font-size: .84rem;
      }

      /* lightbox */
      .lightbox {
         position: fixed;
         inset: 0;
         z-index: 500;
         display: none;
         background: rgba(8, 16, 12, .72);
         backdrop-filter: blur(6px);
      }

      .lightbox.open {
         display: flex;
      }

      .lightbox .inner {
         margin: auto;
         width: min(980px, calc(100% - 30px));
         border-radius: 26px;
         overflow: hidden;
         border: 1px solid rgba(255, 255, 255, .18);
         box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
         position: relative;
         background: #111;
      }

      .lightbox img {
         width: 100%;
         height: auto;
         display: block;
      }

      .lightbox .close {
         position: absolute;
         top: 10px;
         right: 10px;
         width: 44px;
         height: 44px;
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, .18);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .90);
         font-weight: 950;
         cursor: pointer;
      }

      /* responsive */
      @media (max-width: 980px) {
         .art-proof {
            padding: 76px 0 58px;
         }

         .art-proof .wrap {
            padding: 20px;
         }

         .art-proof .top {
            flex-direction: column;
            align-items: flex-start;
         }

         .art-proof .grid {
            grid-template-columns: 1fr;
         }

         .art-proof .trust-row {
            grid-template-columns: 1fr;
         }

         .compare-wrap {
            grid-template-columns: 1fr;
         }

         .gallery {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }
      }

      @media (max-width: 520px) {
         .gallery {
            grid-template-columns: 1fr;
         }
      }

      /* =========================
   BLOCK 3: Results / Visual Proof (Premium, photo-heavy)
   ========================= */

      .results {
         position: relative;
         padding: 96px 0 86px;
         overflow: hidden;
      }

      .results::before {
         content: "";
         position: absolute;
         inset: 0;
         background:
            linear-gradient(180deg, rgba(8, 16, 12, .72), rgba(8, 16, 12, .52)),
            radial-gradient(circle at 18% 18%, rgba(68, 176, 91, .22), transparent 55%),
            url("https://images.unsplash.com/photo-1527515862127-a4fc05baf7a5?auto=format&fit=crop&w=2400&q=70");
         background-size: cover;
         background-position: center;
         filter: saturate(1.05) contrast(1.05);
         transform: scale(1.02);
      }

      .results::after {
         content: "";
         position: absolute;
         inset: -60px;
         background:
            repeating-linear-gradient(45deg,
               rgba(255, 255, 255, .05) 0px,
               rgba(255, 255, 255, .05) 1px,
               transparent 2px,
               transparent 7px);
         opacity: .13;
         pointer-events: none;
         mix-blend-mode: overlay;
      }

      .results .container {
         position: relative;
         z-index: 2;
      }

      /* header row */
      .results-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 18px;
         margin-bottom: 18px;
      }

      .results-title {
         max-width: 72ch;
      }

      .results-title h2 {
         margin: 0;
         color: rgba(255, 255, 255, .96);
         font-size: clamp(1.85rem, 3.2vw, 2.85rem);
         letter-spacing: -0.8px;
      }

      .results-title p {
         margin: 10px 0 0;
         color: rgba(255, 255, 255, .74);
         font-weight: 650;
      }

      .results-actions {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .results-actions .btn {
         border-color: rgba(255, 255, 255, .16);
         background: rgba(255, 255, 255, .08);
         color: rgba(255, 255, 255, .92);
      }

      .results-actions .btn:hover {
         background: rgba(255, 255, 255, .12);
      }

      /* floating stat cards */
      .stat-row {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 12px;
         margin: 20px 0 18px;
      }

      .stat {
         border-radius: 26px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .08);
         backdrop-filter: blur(10px);
         box-shadow: 0 18px 70px rgba(0, 0, 0, .35);
         padding: 16px 16px 14px;
         position: relative;
         overflow: hidden;
      }

      .stat::before {
         content: "";
         position: absolute;
         top: -80px;
         right: -80px;
         width: 180px;
         height: 180px;
         background: radial-gradient(circle at 30% 30%, rgba(68, 176, 91, .35), transparent 60%);
         opacity: .65;
      }

      .stat .kpi {
         display: flex;
         align-items: baseline;
         gap: 10px;
      }

      .stat .num {
         font-size: 2.0rem;
         font-weight: 1100;
         letter-spacing: -0.6px;
         color: rgba(0, 0, 0, 0.98);
      }

      .stat .unit {
         font-size: 1rem;
         font-weight: 900;
         color: rgba(0, 0, 0, 0.7);
      }

      .stat .label {
         margin-top: 6px;
         color: rgba(0, 0, 0, 0.72);
         font-weight: 750;
      }

      /* visual strips */
      .visual-grid {
         display: grid;
         grid-template-columns: 1.15fr .85fr;
         gap: 14px;
         margin-top: 14px;
      }

      .hero-visual {
         border-radius: 30px;
         overflow: hidden;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .06);
         box-shadow: 0 22px 85px rgba(0, 0, 0, .40);
         position: relative;
         min-height: 420px;
      }

      .hero-visual .img {
         position: absolute;
         inset: 0;
         background:
            linear-gradient(90deg, rgba(8, 16, 12, .70), rgba(8, 16, 12, .18)),
            url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=2400&q=70");
         background-size: cover;
         background-position: center;
         transform: scale(1.02);
      }

      .hero-visual .overlay-badges {
         position: absolute;
         left: 18px;
         bottom: 18px;
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
      }

      .badge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .90);
         font-weight: 950;
         font-size: .92rem;
         backdrop-filter: blur(10px);
      }

      .badge .dot {
         width: 10px;
         height: 10px;
         border-radius: 999px;
         background: rgba(68, 176, 91, .95);
         box-shadow: 0 0 0 5px rgba(68, 176, 91, .18);
      }

      /* right column: stacked images + auto-scroller */
      .side-visual {
         display: flex;
         flex-direction: column;
         gap: 12px;
      }

      .stack {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
      }

      .card-img {
         border-radius: 26px;
         overflow: hidden;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .06);
         box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
         min-height: 200px;
         position: relative;
      }

      .card-img .img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         filter: saturate(1.05) contrast(1.05);
         transform: scale(1.02);
      }

      .card-img .cap {
         position: absolute;
         left: 12px;
         bottom: 12px;
         padding: 9px 10px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .92);
         font-weight: 950;
         font-size: .86rem;
         backdrop-filter: blur(10px);
      }

      /* horizontal gallery scroller */
      .hscroll {
         border-radius: 30px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .07);
         box-shadow: 0 22px 85px rgba(0, 0, 0, .40);
         overflow: hidden;
         position: relative;
      }

      .htrack {
         display: flex;
         gap: 10px;
         padding: 12px;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
         scrollbar-width: none;
      }

      .htrack::-webkit-scrollbar {
         display: none;
      }

  
      .hitem {
         flex: 0 0 260px;
         border-radius: 24px;
         overflow: hidden;
         border: 1px solid rgba(255, 255, 255, .14);
         scroll-snap-align: start;
         position: relative;
         height: 170px;
         background: rgba(255, 255, 255, .06);
      }

      .hitem .img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transition: transform .35s ease;
      }

      .hitem:hover .img {
         transform: scale(1.06);
      }

      .hitem .tag {
         position: absolute;
         left: 10px;
         bottom: 10px;
         padding: 8px 10px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(8, 16, 12, .28);
         color: rgba(255, 255, 255, .92);
         font-weight: 950;
         font-size: .84rem;
         backdrop-filter: blur(10px);
      }

      /* animations: subtle float + reveal */
      @keyframes floaty {
         0% {
            transform: translateY(0);
         }

         50% {
            transform: translateY(-6px);
         }

         100% {
            transform: translateY(0);
         }
      }

      .stat {
         animation: floaty 6.5s ease-in-out infinite;
      }

      .stat:nth-child(2) {
         animation-delay: .8s;
      }

      .stat:nth-child(3) {
         animation-delay: 1.6s;
      }

      .reveal {
         opacity: 0;
         transform: translateY(14px);
         transition: opacity .6s ease, transform .6s ease;
      }

      .reveal.on {
         opacity: 1;
         transform: translateY(0);
         width: 100%;
      }

      @media (max-width: 980px) {
         .results {
            padding: 76px 0 64px;
         }

         .results-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .stat-row {
            grid-template-columns: 1fr;
         }

         .visual-grid {
            grid-template-columns: 1fr;
         }

         .hero-visual {
            min-height: 360px;
         }

         .stack {
            grid-template-columns: 1fr;
         }

         .hitem {
            flex-basis: 240px;
         }
      }


      /* =========================
   BLOCK 2: HOW IT WORKS (3 Steps)
   Premium / photo-heavy / minimal text
   ========================= */

      .howitworks {
         padding: 86px 0 70px;
         position: relative;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
         border-bottom: 1px solid var(--border);
      }

      /* soft background “art” image */
      .howitworks::before {
         content: "";
         position: absolute;
         inset: -40px;
         /* background:
            linear-gradient(180deg, rgba(245, 245, 239, .92), rgba(245, 245, 239, .58)),
            url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=2200&q=70"); */
         background-size: cover;
         background-position: center;
         opacity: .16;
         transform: scale(1.02);
         pointer-events: none;
      }

      .howitworks .head {
         position: relative;
         z-index: 2;
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .howitworks h2 {
         margin: 0;
         font-size: clamp(1.7rem, 3vw, 2.55rem);
         letter-spacing: -0.7px;
         color: rgba(11, 27, 20, .92);
      }

      .howitworks .sub {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 74ch;
      }

      .howitworks .head-actions {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .howitworks .mini-btn {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 12px 14px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         color: rgba(11, 27, 20, .84);
         font-weight: 950;
         box-shadow: 0 14px 35px rgba(10, 20, 14, .08);
         transition: transform .15s ease, background .15s ease, border-color .15s ease;
      }

      .howitworks .mini-btn:hover {
         transform: translateY(-1px);
         background: rgba(255, 255, 255, .86);
      }

      .howitworks .mini-btn .ic {
         background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      /* Steps grid */
      .steps {
         position: relative;
         z-index: 2;
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 14px;
         margin-top: 18px;
      }

      /* connecting line */
      .steps::before {
         content: "";
         position: absolute;
         left: 7%;
         right: 7%;
         top: 46px;
         height: 2px;
         background: linear-gradient(90deg, rgba(14, 59, 46, .10), rgba(68, 176, 91, .35), rgba(14, 59, 46, .10));
         border-radius: 999px;
         z-index: 1;
      }

      /* Step card */
      .step {
         position: relative;
         z-index: 2;
         border-radius: 30px;
         border: 1px solid rgba(14, 59, 46, .14);
         background:
            radial-gradient(circle at 20% 20%, rgba(68, 176, 91, .14), transparent 45%),
            rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
         min-height: 320px;
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease;
      }

      .step.on {
         opacity: 1;
         transform: translateY(0);
      }

      .step .media {
         height: 168px;
         position: relative;
         overflow: hidden;
      }

      .step .media::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(44 44 44 / 86%));
      }

      .step .media .img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transform: scale(1.03);
         filter: saturate(1.04) contrast(1.06);
      }

      .step .content {
         padding: 18px 18px 16px;
      }

      .step .toprow {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 10px;
      }

      .step .badge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         background: rgba(14, 59, 46, .08);
         border: 1px solid rgba(14, 59, 46, .14);
         font-weight: 1000;
         color: rgba(11, 27, 20, .84);
         font-size: .92rem;
      }

      .step .num {
         width: 44px;
         height: 44px;
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(68, 176, 91, .18);
         border: 1px solid rgba(68, 176, 91, .25);
         color: rgba(11, 27, 20, .90);
         font-weight: 1100;
         box-shadow: 0 16px 35px rgba(10, 20, 14, .10);
      }

      .step h3 {
         margin: 0;
         font-size: 1.22rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
      }

      .step p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         line-height: 1.55;
      }

      /* Quick actions inside step 2 */
      .step-actions {
         margin-top: 12px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
      }

      .step-actions a {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 11px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .75);
         color: rgba(11, 27, 20, .86);
         font-weight: 950;
         transition: transform .15s ease, background .15s ease;
      }

      .step-actions a:hover {
         transform: translateY(-1px);
         background: rgba(255, 255, 255, .88);
      }

      .step-actions a .dot {
         width: 10px;
         height: 10px;
         border-radius: 999px;
         background: rgba(68, 176, 91, .95);
         box-shadow: 0 0 0 5px rgba(68, 176, 91, .16);
      }

      /* small bottom strip */
      .hiw-strip {
         position: relative;
         z-index: 2;
         margin-top: 16px;
         border-radius: 26px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
      }

      .hiw-strip .left {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         align-items: center;
         color: rgba(11, 27, 20, .72);
         font-weight: 850;
      }

      .hiw-chip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
      }

      .hiw-strip .right {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      /* Responsive */
      @media (max-width: 980px) {
         .howitworks {
            padding: 72px 0 56px;
         }

         .howitworks .head {
            flex-direction: column;
            align-items: flex-start;
         }

         .steps {
            grid-template-columns: 1fr;
         }

         .steps::before {
            display: none;
         }

         .step {
            min-height: 0;
         }

         .hiw-strip {
            flex-direction: column;
            align-items: flex-start;
         }
      }

      /* =========================
   BLOCK 3: Problem -> Solution (Why we're better)
   ========================= */

      .ps {
         position: relative;
         padding: 92px 0 74px;
         overflow: hidden;
         background:
            radial-gradient(circle at 12% 18%, rgba(68, 176, 91, .12), transparent 50%),
            radial-gradient(circle at 90% 25%, rgba(14, 59, 46, .14), transparent 55%),
            linear-gradient(180deg, rgba(245, 245, 239, .86), rgba(245, 245, 239, .70));
         border-top: 1px solid var(--border);
      }

      .ps::before {
         content: "";
         position: absolute;
         inset: -40px;
         background:
            linear-gradient(180deg, rgba(245, 245, 239, .92), rgba(245, 245, 239, .56)),
            url("https://images.unsplash.com/photo-1600566753151-384129cf4e3e?auto=format&fit=crop&w=2400&q=70");
         background-size: cover;
         background-position: center;
         opacity: .18;
         transform: scale(1.03);
         pointer-events: none;
      }

      .ps .inner {
         position: relative;
         z-index: 2;
      }

      .ps-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 18px;
      }

      .ps-head h2 {
         margin: 0;
         font-size: clamp(1.75rem, 3vw, 2.6rem);
         letter-spacing: -0.7px;
         color: rgba(11, 27, 20, .92);
      }

      .ps-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 78ch;
      }

      .ps-actions {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .ps-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px;
         margin-top: 14px;
      }

      /* Panels */
      .panel {
         border-radius: 32px;
         border: 1px solid rgba(14, 59, 46, .14);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
         position: relative;
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease;
      }

      .panel.on {
         opacity: 1;
         transform: translateY(0);
      }

      .panel.problem {
         background: rgba(255, 255, 255, .76);
      }

      .panel.solution {
         background:
            radial-gradient(circle at 20% 20%, rgba(68, 176, 91, .18), transparent 55%),
            linear-gradient(180deg, rgba(14, 59, 46, .92), rgba(11, 47, 37, .92));
         border-color: rgba(255, 255, 255, .12);
      }

      /* Top strips with image */
      .panel .top {
         height: 140px;
         position: relative;
         overflow: hidden;
      }

      .panel .top .img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transform: scale(1.02);
         filter: saturate(1.05) contrast(1.05);
      }

      .panel.problem .top::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(245, 245, 239, .92));
      }

      .panel.solution .top::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(14, 59, 46, .92));
      }

      /* Content */
      .panel .body {
         padding: 18px;
      }

      .panel .label {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 10px 12px;
         border-radius: 999px;
         font-weight: 1000;
         letter-spacing: .2px;
         margin-bottom: 12px;
      }

      .panel.problem .label {
         background: rgba(14, 59, 46, .06);
         border: 1px solid rgba(14, 59, 46, .14);
         color: rgba(11, 27, 20, .84);
      }

      .panel.solution .label {
         background: rgba(255, 255, 255, .10);
         border: 1px solid rgba(255, 255, 255, .14);
         color: rgba(255, 255, 255, .92);
         backdrop-filter: blur(10px);
      }

      .panel h3 {
         margin: 0;
         font-size: 1.25rem;
         letter-spacing: -0.3px;
      }

      .panel.problem h3 {
         color: rgba(11, 27, 20, .92);
      }

      .panel.solution h3 {
         color: rgba(255, 255, 255, .96);
      }

      .panel .hint {
         margin: 8px 0 0;
         font-weight: 650;
         color: rgba(11, 27, 20, .68);
      }

      .panel.solution .hint {
         color: rgba(255, 255, 255);
      }

      .bullets {
         margin-top: 14px;
         display: grid;
         gap: 10px;
      }

      .bullet {
         display: flex;
         gap: 12px;
         align-items: flex-start;
         padding: 12px 12px;
         border-radius: 22px;
         border: 1px solid rgba(11, 27, 20, .10);
         background: rgba(255, 255, 255, .78);
      }

      .panel.solution .bullet {
         border-color: rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         backdrop-filter: blur(10px);
      }

      .bullet .icon {
         width: 42px;
         height: 42px;
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 1100;
         flex: 0 0 auto;
      }

      .panel.problem .bullet .icon {
         background: rgba(235, 70, 70, .12);
         border: 1px solid rgba(235, 70, 70, .18);
         color: rgba(120, 20, 20, .88);
      }

      .panel.solution .bullet .icon {
         background: rgba(68, 176, 91, .18);
         border: 1px solid rgba(68, 176, 91, .22);
         color: rgba(255, 255, 255, .92);
      }

      .bullet b {
         display: block;
         font-weight: 1000;
         color: rgba(11, 27, 20, .88);
      }

      .panel.solution .bullet b {
         color: rgba(255, 255, 255, .95);
      }

      .ps-footer {
         margin-top: 14px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .ps-footer .promise {
         font-weight: 900;
         color: rgba(11, 27, 20, .80);
         display: flex;
         gap: 10px;
         align-items: center;
         flex-wrap: wrap;
      }

      .ps-footer .promise .chip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
      }

      @media (max-width: 980px) {
         .ps {
            padding: 76px 0 60px;
         }

         .ps-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .ps-grid {
            grid-template-columns: 1fr;
         }
      }

      /* =========================
   BLOCK 4: Bundles / Sets (Main commercial block)
   ========================= */

      .bundles {
         position: relative;
         padding: 96px 0 78px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .bundles::before {
         content: "";
         position: absolute;
         inset: -60px;
         
         background-size: cover;
         background-position: center;
         opacity: .16;
         transform: scale(1.02);
         pointer-events: none;
      }

      .bundles .inner {
         position: relative;
         z-index: 2;
      }

      .bundles-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 18px;
      }

      .bundles-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.75rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .bundles-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 78ch;
      }

      .bundles-actions {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .bundles-grid {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 14px;
         margin-top: 16px;
      }

      /* Card */
      .bundle {
         position: relative;
         border-radius: 34px;
         overflow: hidden;
         border: 1px solid rgba(14, 59, 46, .14);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .12);
         background: rgba(255, 255, 255, .74);
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
      }

      .bundle.on {
         opacity: 1;
         transform: translateY(0);
      }

      .bundle:hover {
         box-shadow: 0 26px 95px rgba(10, 20, 14, .16);
      }

      /* Background image layer */
      .bundle .bg {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transform: scale(1.03);
         filter: saturate(1.04) contrast(1.06);
         opacity: .92;
      }

      .bundle .shade {
         position: absolute;
         inset: 0;
         background:
            linear-gradient(180deg, rgba(245, 245, 239, .86), rgba(245, 245, 239, .74)),
            radial-gradient(circle at 20% 20%, rgba(68, 176, 91, .12), transparent 55%);
      }

      /* Dark “popular” variant */
      .bundle.popular {
         border-color: rgba(68, 176, 91, .28);
      }

      .bundle.popular .shade {
         background:
            linear-gradient(180deg, rgba(10, 26, 18, .70), rgba(10, 26, 18, .86)),
            radial-gradient(circle at 25% 20%, rgba(68, 176, 91, .18), transparent 60%);
      }

      .bundle.popular .content,
      .bundle.popular .small,
      .bundle.popular .save,
      .bundle.popular .bul li {
         color: rgba(255, 255, 255, .90);
      }

      .bundle.popular .title,
      .bundle.popular .price {
         color: rgba(255, 255, 255, .96);
      }

      .bundle.popular .chip {
         border-color: rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .92);
      }

      /* Content */
      .bundle .content {
         position: relative;
         z-index: 2;
         padding: 20px 20px 18px;
         color: rgba(11, 27, 20, .88);
      }

      .bundle .toprow {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         margin-bottom: 12px;
      }

      .bundle .title {
         font-weight: 1100;
         letter-spacing: -0.4px;
         font-size: 1.25rem;
         margin: 0;
         color: rgba(11, 27, 20, .92);
      }

      .bundle .chip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 1000;
         color: rgba(11, 27, 20, .84);
         font-size: .86rem;
         white-space: nowrap;
      }

      .bundle .price {
         display: flex;
         align-items: baseline;
         gap: 10px;
         margin-top: 10px;
      }

      .bundle .price .from {
         font-weight: 950;
         color: rgba(11, 27, 20, .72);
      }

      .bundle .price .amt {
         font-size: 2.05rem;
         font-weight: 1150;
         letter-spacing: -0.8px;
      }

      .bundle .price .note {
         font-weight: 900;
         color: rgba(11, 27, 20, .68);
      }

      .bundle.popular .price .from,
      .bundle.popular .price .note {
         color: rgba(255, 255, 255, .75);
      }

      .bundle .bul {
         margin: 14px 0 0;
         padding: 0;
         list-style: none;
         display: grid;
         gap: 10px;
      }

      .bundle .bul li {
         display: flex;
         gap: 10px;
         align-items: flex-start;
         font-weight: 750;
         color: rgba(11, 27, 20, .76);
         line-height: 1.35;
      }

      .bundle .tick {
        background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      .bundle.popular .tick {
         background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      .bundle .save {
         margin-top: 14px;
         border-radius: 22px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .62);
         padding: 12px 12px;
         font-weight: 950;
         color: rgba(11, 27, 20, .84);
      }

      .bundle.popular .save {
         background: rgba(255, 255, 255, .10);
         border-color: rgba(255, 255, 255, .14);
      }

      .bundle .small {
         margin-top: 10px;
         font-size: .92rem;
         font-weight: 750;
         color: rgba(11, 27, 20, .66);
      }

      .bundle.popular .small {
         color: rgba(255, 255, 255, .75);
      }

      .bundle .cta {
         margin-top: 14px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .bundle .cta .btn {
         flex: 1 1 180px;
         justify-content: center;
         border-color: rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .78);
         color: rgba(11, 27, 20, .88);
      }

      .bundle .cta .btn:hover {
         background: rgba(255, 255, 255, .90);
      }

      .bundle .cta .btn-primary {
         background: linear-gradient(135deg, var(--accent), var(--accent2));
         color: #053e30;
         border-color: rgba(68, 176, 91, .25);
      }

      .bundle.popular .cta .btn {
         border-color: rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .92);
      }

      .bundle.popular .cta .btn:hover {
         background: rgba(255, 255, 255, .14);
      }

      .bundle.popular .cta .btn-primary {
         background: linear-gradient(135deg, rgba(68, 176, 91, .95), rgba(68, 176, 91, .65));
         color: #053e30;
         border-color: rgba(68, 176, 91, .30);
      }

      /* Note under cards */
      .bundle-note {
         margin-top: 14px;
         border-radius: 26px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         color: rgba(11, 27, 20, .72);
         font-weight: 800;
      }

      .bundle-note b {
         color: rgba(11, 27, 20, .88);
      }

      /* Responsive */
      @media (max-width: 980px) {
         .bundles {
            padding: 76px 0 60px;
         }

         .bundles-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .bundles-grid {
            grid-template-columns: 1fr;
         }
      }




      /* Base (если у тебя уже есть — оставь, главное VIP блок ниже) */
.setCard{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  padding: 18px 18px 16px;
}

/* =========================
   VIP CARD
   ========================= */
.setCard.vip{
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(8,16,12,.55), rgba(8,16,12,.72)),
    url("../img/tuxedo.jpg") center/cover no-repeat;
  box-shadow: 0 24px 85px rgba(0,0,0,.40);
  transform: translateZ(0);
}

/* dark glass overlay */
.setCard.vip::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 18% 18%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(900px 420px at 80% 10%, rgba(46,204,113,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  pointer-events:none;
}

/* shiny moving “glass” */
.setCard.vip::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 70%;
  height: 180%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.00) 32%,
    rgba(255,255,255,.25) 48%,
    rgba(255,255,255,.00) 62%,
    transparent 100%
  );
  transform: rotate(12deg);
  filter: blur(0.2px);
  opacity: .55;
  animation: vipShine 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes vipShine{
  0%   { transform: translateX(-30%) rotate(12deg); opacity:.15; }
  30%  { opacity:.55; }
  60%  { opacity:.35; }
  100% { transform: translateX(220%) rotate(12deg); opacity:.12; }
}

/* VIP badge */
.vipBadge{
  position:absolute;
  top:14px; right:14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .78rem;
  background: rgba(46,204,113,.16);
  border: 1px solid rgba(46,204,113,.35);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.vipTag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 750;
  font-size: .86rem;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
}

/* content */
.setCard.vip .setTop h3{
  margin: 6px 0 6px;
  font-size: 1.25rem;
  z-index: 2;
  position: relative;
}
.setCard.vip .starting{
  font-weight: 700;
  opacity: .92;
  z-index: 2;
  position: relative;
}
.setCard.vip .starting span{
  font-size: 1.35rem;
  font-weight: 950;
}

.setCard.vip .setList{
  list-style:none;
  padding: 12px 0 10px;
  margin: 0;
  display: grid;
  gap: 8px;
  z-index: 2;
  position: relative;
}
.setCard.vip .setList li{
  position: relative;
  padding-left: 24px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}
.setCard.vip .setList li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  width: 18px; height: 18px;
  display:grid;
  place-items:center;
  border-radius: 6px;
  background: rgba(46,204,113,.18);
  border: 1px solid rgba(46,204,113,.30);
  font-weight: 900;
  color: rgba(255,255,255,.95);
}

.setCard.vip .saveLine{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  z-index: 2;
  position: relative;
}
.setCard.vip .fineLine{
  margin-top: 10px;
  font-size: .9rem;
  opacity: .90;
  z-index: 2;
  position: relative;
}

/* buttons */
.setActions{
  display:flex;
  gap:10px;
  margin-top: 12px;
  flex-wrap: wrap;
  z-index: 2;
  position: relative;
}
.btnVipPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration:none;
  color: rgba(7,14,10,.96);
  background: rgba(46,204,113,.95);
  border: 1px solid rgba(46,204,113,.65);
  box-shadow: 0 12px 30px rgba(46,204,113,.25);
}
.btnVipGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 850;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

/* small hover luxury feel */
.setCard.vip:hover{
  transform: translateY(-2px);
}


      /* =========================
   BLOCK 5: Instant Quote Calculator (Lead Magnet)
   ========================= */

      .quote {
         position: relative;
         padding: 96px 0 78px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .quote::before {
         content: "";
         position: absolute;
         inset: -60px;
         background-size: cover;
         background-position: center;
         opacity: .14;
         transform: scale(1.02);
         pointer-events: none;
      }

      .quote .inner {
         position: relative;
         z-index: 2;
      }

      .quote-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .quote-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.75rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .quote-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 78ch;
      }

      .quote-head .micro {
         margin-top: 8px;
         font-size: .95rem;
         font-weight: 800;
         color: rgba(11, 27, 20, .64);
      }

      .quote-shell {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 14px;
         margin-top: 16px;
      }

      /* Form card */
      .qform {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .76);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .12);
         overflow: hidden;
      }

      .qform .pad {
         padding: 18px;
      }

      .qgrid {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
      }

      .qfield {
         display: flex;
         flex-direction: column;
         gap: 8px;
      }

      .qfield.full {
         grid-column: 1 / -1;
         
      }

      .qlabel {
         font-weight: 950;
         color: rgba(11, 27, 20, .82);
         font-size: .92rem;
         
      }

      .qinput,
      .qselect,
      .qtextarea {
         width: 100%;
         border-radius: 16px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(245, 245, 239, .72);
         padding: 12px 12px;
         font-weight: 800;
         color: rgba(11, 27, 20, .86);
         outline: none;
         transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
      }

      .qtextarea {
         min-height: 44px;
         resize: vertical;
      }

      .qinput:focus,
      .qselect:focus,
      .qtextarea:focus {
         background: rgba(255, 255, 255, .86);
         box-shadow: 0 0 0 4px rgba(68, 176, 91, .18);
      }

      .checkrow {
         grid-column: 1 / -1;
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
      }

      .chk {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .70);
         font-weight: 900;
         color: rgba(11, 27, 20, .78);
         cursor: pointer;
         user-select: none;
      }

      .chk input {
         accent-color: var(--accent);
      }

      .qbar {
         border-top: 1px solid rgba(14, 59, 46, .12);
         padding: 14px 18px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
         background: rgba(255, 255, 255, .64);
      }

      .qbar .help {
         font-weight: 850;
         color: rgba(11, 27, 20, .70);
         font-size: .95rem;
         display: flex;
         gap: 10px;
         align-items: center;
         flex-wrap: wrap;
      }

      .qpill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
      }

      .qbtn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         padding: 12px 14px;
         border-radius: 16px;
         border: 1px solid rgba(68, 176, 91, .25);
         background: linear-gradient(135deg, var(--accent), var(--accent2));
         color: rgb(191 176 95);
         font-weight: 1100;
         cursor: pointer;
         box-shadow: 0 18px 50px rgba(68, 176, 91, .18);
      }

      .qbtn:disabled {
         opacity: .55;
         cursor: not-allowed;
         box-shadow: none;
      }

      /* Results card */
      .qresult {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background:
            radial-gradient(circle at 22% 18%, rgba(68, 176, 91, .16), transparent 55%),
            linear-gradient(180deg, rgba(14, 59, 46, .92), rgba(11, 47, 37, .92));
         box-shadow: 0 22px 90px rgba(10, 20, 14, .14);
         overflow: hidden;
         color: rgba(255, 255, 255, .92);
         position: sticky;
         top: 18px;
         align-self: start;
      }

      .qresult .pad {
         padding: 18px;
      }

      .qresult h3 {
         margin: 0;
         font-size: 1.25rem;
         letter-spacing: -0.3px;
         color: rgba(255, 255, 255, .96);
      }

      .qresult .sub {
         margin: 8px 0 0;
         color: rgba(255, 255, 255);
         font-weight: 700;
      }

      .range {
         margin-top: 14px;
         border-radius: 26px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         padding: 14px;
         display: flex;
         align-items: baseline;
         justify-content: space-between;
         gap: 12px;
      }

      .range .label {
         font-weight: 950;
         color: rgba(255, 255, 255, .78);
      }

      .range .val {
         font-size: 2.1rem;
         font-weight: 1200;
         letter-spacing: -0.8px;
         color: rgba(255, 255, 255, .98);
      }

      .rec {
         margin-top: 12px;
         border-radius: 26px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         padding: 14px;
      }

      .rec b {
         color: rgba(255, 255, 255, .96);
      }

      .rec .pill {
         display: inline-flex;
         margin-top: 10px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         font-weight: 1000;
      }

      .qresult .fine {
         margin-top: 12px;
         color: rgba(255, 255, 255);
         font-weight: 750;
         font-size: .95rem;
      }

      .qresult .cta {
         margin-top: 14px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
      }

      .qresult .cta .btn {
         border-color: rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .92);
      }

      .qresult .cta .btn:hover {
         background: rgba(255, 255, 255, .14);
      }

      .qresult .cta .btn-primary {
         background: linear-gradient(135deg, rgba(68, 176, 91, .95), rgba(68, 176, 91, .65));
         color: #053e30;
         border-color: rgba(68, 176, 91, .30);
      }

      /* File input */
      .filebox {
         border-radius: 18px;
         border: 1px dashed rgba(14, 59, 46, .20);
         background: rgba(255, 255, 255, .62);
         padding: 12px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
      }

      .filebox small {
         color: rgba(11, 27, 20, .68);
         font-weight: 800;
      }

      .filebox input[type="file"] {
         width: 100%;
      }

      /* Responsive */
      @media (max-width: 980px) {
         .quote {
            padding: 76px 0 60px;
         }

         .quote-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .quote-shell {
            grid-template-columns: 1fr;
         }

         .qgrid {
            grid-template-columns: 1fr;
         }

         .qresult {
            position: relative;
            top: auto;
         }
      }

      /* =========================
   BLOCK 6: Services Breakdown (4 cards)
   ========================= */

      .services {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .services .inner {
         position: relative;
         z-index: 2;
      }

      .services-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .services-head h2 {
         margin: 0;
         font-size: clamp(1.85rem, 3vw, 2.55rem);
         letter-spacing: -0.7px;
         color: rgba(11, 27, 20, .92);
      }

      .services-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 78ch;
      }

      .services-grid {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 12px;
         margin-top: 14px;
      }

      .svc {
         border-radius: 30px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
      }

      .svc.on {
         opacity: 1;
         transform: translateY(0);
      }

      .svc:hover {
         box-shadow: 0 24px 90px rgba(10, 20, 14, .14);
      }

      .svc .top {
         padding: 16px 16px 12px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 10px;
      }

      .svc .icon {
         width: 48px;
         height: 48px;
         border-radius: 18px;
         background: rgba(68, 176, 91, .18);
         border: 1px solid rgba(68, 176, 91, .24);
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 18px 45px rgba(68, 176, 91, .12);
      }

      .svc .icon svg {
         width: 22px;
         height: 22px;
      }

      .svc h3 {
         margin: 0;
         font-size: 1.14rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
         font-weight: 1100;
      }

      .svc .tag {
         margin-top: 8px;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         color: rgba(11, 27, 20, .78);
         font-weight: 950;
         font-size: .86rem;
      }

      .svc .body {
         padding: 0 16px 14px;
      }

      .svc .best {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 800;
         line-height: 1.45;
      }

      .svc .best b {
         color: rgba(11, 27, 20, .88);
      }

      .svc ul {
         margin: 12px 0 0;
         padding: 0;
         list-style: none;
         display: grid;
         gap: 10px;
      }

      .svc li {
         display: flex;
         gap: 10px;
         align-items: flex-start;
         color: rgba(11, 27, 20, .74);
         font-weight: 750;
         line-height: 1.35;
      }

      .svc .tick {
          background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      .svc .foot {
         border-top: 1px solid rgba(14, 59, 46, .12);
         padding: 12px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         background: rgba(255, 255, 255, .64);
      }

      .svc .link {
         font-weight: 1000;
         color: rgba(14, 59, 46, .92);
         text-decoration: none;
      }

      .svc .link:hover {
         text-decoration: underline;
      }

      .svc .mini {
         font-weight: 900;
         color: rgba(11, 27, 20, .62);
         font-size: .92rem;
      }

      @media (max-width: 1100px) {
         .services-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }
      }

      @media (max-width: 640px) {
         .services {
            padding: 74px 0 56px;
         }

         .services-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .services-grid {
            grid-template-columns: 1fr;
         }
      }

      /* =========================
   BLOCK 7: Transparent Pricing (tables + cards)
   ========================= */

      .pricing {
         position: relative;
         padding: 96px 0 78px;
         overflow: hidden;
         background:
            radial-gradient(circle at 12% 18%, rgba(68, 176, 91, .10), transparent 55%),
            radial-gradient(circle at 88% 22%, rgba(14, 59, 46, .12), transparent 55%),
            linear-gradient(180deg, rgba(245, 245, 239, .88), rgba(245, 245, 239, .72));
         border-top: 1px solid var(--border);
      }

      .pricing .inner {
         position: relative;
         z-index: 2;
      }

      .pricing-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .pricing-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.75rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .pricing-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 82ch;
      }

      .pricing-rules {
         margin-top: 12px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .pricing-rules .left {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         align-items: center;
      }

      .rulechip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
      }

      .pricing-rules .right {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      /* Sections grid */
      .price-grid {
         margin-top: 14px;
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 14px;
      }

      /* Pricing card */
      .pcard {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .76);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .12);
         overflow: hidden;
      }

      .pcard .top {
         padding: 16px 16px 12px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         border-bottom: 1px solid rgba(14, 59, 46, .12);
         background:
            radial-gradient(circle at 15% 20%, rgba(68, 176, 91, .12), transparent 55%),
            rgba(255, 255, 255, .70);
      }

      .pcard h3 {
         margin: 0;
         font-size: 1.18rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
         font-weight: 1100;
      }

      .pcard .sub {
         margin: 8px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 750;
      }

      .pbadge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 1000;
         color: rgba(11, 27, 20, .80);
         white-space: nowrap;
      }

      /* Table */
      .ptable {
         width: 100%;
         border-collapse: collapse;
      }

      .ptable th,
      .ptable td {
         padding: 12px 14px;
         text-align: left;
         border-bottom: 1px solid rgba(14, 59, 46, .10);
         color: rgba(11, 27, 20, .82);
         font-weight: 800;
      }

      .ptable th {
         font-size: .92rem;
         color: rgba(11, 27, 20, .62);
         font-weight: 950;
         background: rgba(245, 245, 239, .60);
      }

      .ptable tr:last-child td {
         border-bottom: none;
      }

      .money {
         font-weight: 1100;
         color: rgba(11, 27, 20, .92);
         letter-spacing: -0.2px;
      }

      .smallnote {
         padding: 12px 16px 16px;
         color: rgba(11, 27, 20, .66);
         font-weight: 750;
         line-height: 1.45;
      }

      /* Details accordion (mobile-friendly) */
      .pdetails {
         display: none;
         padding: 0 14px 14px;
      }

      .pdetails details {
         border-radius: 22px;
         border: 1px solid rgba(14, 59, 46, .12);
         background: rgba(255, 255, 255);
         overflow: hidden;
         margin-top: 10px;
      }

      .pdetails summary {
         cursor: pointer;
         list-style: none;
         padding: 12px 12px;
         font-weight: 1050;
         color: rgba(11, 27, 20, .88);
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
      }

      .pdetails summary::-webkit-details-marker {
         display: none;
      }

      .pdetails .content {
         padding: 0 12px 12px;
         color: rgba(11, 27, 20, .72);
         font-weight: 800;
         line-height: 1.45;
      }

      .pdetails .content .row {
         display: flex;
         justify-content: space-between;
         gap: 12px;
         padding: 10px 0;
         border-top: 1px solid rgba(14, 59, 46, .10);
      }

      .pdetails .content .row:first-child {
         border-top: none;
      }

      .pdetails .content .row b {
         color: rgba(11, 27, 20, .92);
      }

      @media (max-width: 980px) {
         .pricing {
            padding: 76px 0 60px;
         }

         .pricing-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .price-grid {
            grid-template-columns: 1fr;
         }
      }

      /* On small screens: hide tables, show accordions */
      @media (max-width: 720px) {
         .ptable {
            display: none;
         }

         .pdetails {
            display: block;
         }
      }


      /* =========================
   BLOCK 8: Limited-Time Offers / Discounts
   ========================= */

      .offers {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .offers .inner {
         position: relative;
         z-index: 2;
      }

      .offers-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .offers-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.65rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .offers-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 80ch;
      }

      .offer-grid {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 12px;
         margin-top: 14px;
      }

      .offer {
         position: relative;
         border-radius: 32px;
         overflow: hidden;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
      }

      .offer.on {
         opacity: 1;
         transform: translateY(0);
      }

      .offer:hover {
         box-shadow: 0 24px 90px rgba(10, 20, 14, .14);
      }

      .offer .pad {
         padding: 16px;
      }

      .offer .badge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 1000;
         color: rgba(11, 27, 20, .80);
         font-size: .86rem;
      }

      .offer .value {
         margin-top: 12px;
         font-size: 2.2rem;
         font-weight: 1200;
         letter-spacing: -0.9px;
         color: rgba(11, 27, 20, .92);
      }

      .offer .title {
         margin: 6px 0 0;
         font-weight: 1100;
         color: rgba(11, 27, 20, .90);
         letter-spacing: -0.3px;
         font-size: 1.08rem;
      }

      .offer .desc {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .70);
         font-weight: 750;
         line-height: 1.45;
      }

      .offer ul {
         margin: 12px 0 0;
         padding: 0;
         list-style: none;
         display: grid;
         gap: 10px;
      }

      .offer li {
         display: flex;
         gap: 10px;
         align-items: flex-start;
         color: rgba(11, 27, 20, .74);
         font-weight: 750;
         line-height: 1.35;
      }

      .offer .tick {
          background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      .offer .foot {
         margin-top: 14px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .offer .mini {
         font-weight: 850;
         color: rgba(11, 27, 20, .60);
         font-size: .92rem;
      }

      /* Highlight card */
      .offer.hot {
         background:
            radial-gradient(circle at 22% 18%, rgba(68, 176, 91, .16), transparent 55%),
            linear-gradient(180deg, rgba(14, 59, 46, .92), rgba(11, 47, 37, .92));
         border-color: rgba(68, 176, 91, .28);
      }

      .offer.hot .badge {
         border-color: rgba(255, 255, 255, .14);
         background: rgba(255, 255, 255, .10);
         color: rgba(255, 255, 255, .92);
      }

      .offer.hot .value,
      .offer.hot .title {
         color: rgba(255, 255, 255, .96);
      }

      .offer.hot .desc,
      .offer.hot li {
         color: rgba(255, 255, 255, .78);
      }

      .offer.hot .tick {
           background-image: url(../img/tick.png);
             background-size: cover;
         width: 18px;
         height: 18px;
         display: inline-block;
      }

      .offer.hot .mini {
         color: rgba(255, 255, 255, .74);
      }

      /* CTA bar */
      .offer-cta {
         margin-top: 14px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .offer-cta b {
         color: rgba(11, 27, 20, .88);
      }

      .offer-cta .txt {
         color: rgba(11, 27, 20, .72);
         font-weight: 850;
         line-height: 1.45;
      }

      @media (max-width: 1100px) {
         .offer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }
      }

      @media (max-width: 640px) {
         .offers {
            padding: 74px 0 56px;
         }

         .offers-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .offer-grid {
            grid-template-columns: 1fr;
         }
      }

      /* =========================
   BLOCK 9: Why Choose Us (Trust Differentiators)
   ========================= */

      .why {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background: #0f4e42;
         border-top: 1px solid var(--border);
         margin-top: 3%;
      }

      .why .inner {
         position: relative;
         z-index: 2;
      }

      .why-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .why-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.65rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .why-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 82ch;
      }

      .why-grid {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 12px;
         margin-top: 14px;
      }

      .wcard {
         border-radius: 32px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
      }

      .wcard.on {
         opacity: 1;
         transform: translateY(0);
      }

      .wcard:hover {
         box-shadow: 0 24px 90px rgba(10, 20, 14, .14);
      }

      .wcard .pad {
         padding: 16px;
      }

      .wtop {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
      }

      .wicon {
         width: 48px;
         height: 48px;
         border-radius: 18px;
         background: rgba(68, 176, 91, .18);
         border: 1px solid rgba(68, 176, 91, .24);
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 18px 45px rgba(68, 176, 91, .12);
         flex: 0 0 auto;
      }

      .wicon svg {
         width: 22px;
         height: 22px;
      }

      .wcard h3 {
         margin: 0;
         font-size: 1.08rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
         font-weight: 1150;
      }

      .wdesc {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 750;
         line-height: 1.45;
      }

      .wfoot {
         margin-top: 12px;
         display: flex;
         align-items: center;
         gap: 10px;
         flex-wrap: wrap;
      }

      .wpill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
         font-size: .86rem;
      }

      /* CTA bar */
      .why-cta {
         margin-top: 14px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .why-cta b {
         color: rgba(11, 27, 20, .88);
      }

      .why-cta .txt {
         color: rgba(11, 27, 20, .72);
         font-weight: 850;
         line-height: 1.45;
      }

      @media (max-width: 1100px) {
         .why-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }
      }

      @media (max-width: 640px) {
         .why {
            padding: 74px 0 56px;
         }

         .why-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .why-grid {
            grid-template-columns: 1fr;
         }
      }

      /* =========================
   BLOCK 10: Before/After Gallery (sliders)
   ========================= */

      .gallery {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .gallery .inner {
         position: relative;
         z-index: 2;
      }

      .gallery-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .gallery-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.65rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .gallery-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 82ch;
      }

      .ggrid {
         margin-top: 14px;
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 12px;
      }

      .gcard {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
         transform: translateY(14px);
         opacity: 0;
         transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
      }

      .gcard.on {
         opacity: 1;
         transform: translateY(0);
      }

      .gcard:hover {
         box-shadow: 0 24px 90px rgba(10, 20, 14, .14);
      }

      .ba {
         position: relative;
         height: 260px;
         overflow: hidden;
         background: rgba(14, 59, 46, .08);
      }

      .ba img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         user-select: none;
         -webkit-user-drag: none;
      }

      .ba .after {
         clip-path: inset(0 50% 0 0);
      }

      .ba .handle {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         width: 2px;
         background: rgba(255, 255, 255, .82);
         box-shadow: 0 0 0 1px rgba(14, 59, 46, .22);
      }

      .ba .knob {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 54px;
         height: 54px;
         border-radius: 18px;
         border: 1px solid rgba(255, 255, 255, .28);
         background: rgba(14, 59, 46, .78);
         box-shadow: 0 20px 60px rgba(10, 20, 14, .18);
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
         color: rgba(255, 255, 255, .92);
         font-weight: 1200;
         pointer-events: none;
      }

      .ba .knob svg {
         width: 18px;
         height: 18px;
         opacity: .95;
      }

      .ba .labels {
         position: absolute;
         left: 12px;
         right: 12px;
         top: 12px;
         display: flex;
         justify-content: space-between;
         gap: 10px;
         pointer-events: none;
         z-index: 22;
      }

      .ba .tag {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(255, 255, 255, .16);
         background: rgba(0, 0, 0, .28);
         color: rgba(255, 255, 255, .92);
         font-weight: 1000;
         font-size: .86rem;
         backdrop-filter: blur(8px);
      }



.ba[data-ba]{
  position: relative;
  overflow: hidden;
  touch-action: pan-y;         /* вертикальный скролл страницы по умолчанию */
  user-select: none;
  -webkit-user-select: none;
}

.ba[data-ba] img{
  pointer-events: none;
  -webkit-user-drag: none;
}

.ba[data-ba].is-dragging{
  cursor: ew-resize;
}



      .gfoot {
         padding: 14px 16px 16px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
      }

      .gtitle {
         margin: 0;
         font-weight: 1150;
         color: rgba(11, 27, 20, .92);
         letter-spacing: -0.3px;
         font-size: 1.02rem;
      }

      .gsub {
         margin: 8px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 750;
      }

      .gpill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 1000;
         color: rgba(11, 27, 20, .80);
         white-space: nowrap;
      }

      /* CTA strip */
      .gallery-cta {
         margin-top: 14px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .gallery-cta .txt {
         color: rgba(11, 27, 20, .72);
         font-weight: 850;
         line-height: 1.45;
      }

      .gallery-cta b {
         color: rgba(11, 27, 20, .88);
      }

      @media (max-width: 1100px) {
         .ggrid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
         }
      }

      @media (max-width: 640px) {
         .gallery {
            padding: 74px 0 56px;
         }

         .gallery-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .ggrid {
            grid-template-columns: 1fr;
         }

         .ba {
            height: 240px;
         }
      }

      /* =========================
   BLOCK 11 (NEW): Reviews Slider
   ========================= */

      .reviews {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background: #08382f;
         border-top: 1px solid var(--border);
      }

      .reviews .inner {
         position: relative;
         z-index: 2;
      }

      .rev-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .rev-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.65rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .rev-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 82ch;
      }

      /* Rating bar (reuse from before if you want) */
      .ratingbar {
         margin-top: 12px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .rate-left {
         display: flex;
         align-items: center;
         gap: 12px;
         flex-wrap: wrap;
      }

      .bigscore {
         font-weight: 1250;
         letter-spacing: -0.7px;
         font-size: 1.65rem;
         color: rgba(11, 27, 20, .92);
      }

      .stars {
         display: inline-flex;
         gap: 4px;
      }

      .star {
         width: 18px;
         height: 18px;
         color: rgba(68, 176, 91, .95);
      }

      .rate-meta {
         color: rgba(11, 27, 20, .68);
         font-weight: 850;
      }

      .platforms {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
      }

      .pchip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
         font-size: .86rem;
      }

      /* Slider shell */
      .rev-slider {
         --gap: 12px;
         --perview: 3;
         /* desktop default */
         margin-top: 14px;
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .58);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .10);
         overflow: hidden;
      }

      .rev-topbar {
         padding: 12px 12px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         border-bottom: 1px solid rgba(14, 59, 46, .12);
         background:
            radial-gradient(circle at 15% 20%, rgba(68, 176, 91, .10), transparent 55%),
            rgba(255, 255, 255, .70);
      }

      .rev-topbar .hint {
         color: rgba(11, 27, 20, .66);
         font-weight: 500;
      }

      .rev-controls {
         display: flex;
         gap: 8px;
         align-items: center;
         flex-wrap: wrap;
      }

      .sbtn {
         width: 44px;
         height: 44px;
         border-radius: 16px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .84);
         color: rgba(11, 27, 20, .86);
         box-shadow: 0 14px 45px rgba(10, 20, 14, .08);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: transform .15s ease, box-shadow .2s ease;
      }

      .sbtn:hover {
         transform: translateY(-1px);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .12);
      }

      .sbtn:disabled {
         opacity: .45;
         cursor: not-allowed;
         transform: none;
      }

      .rev-viewport {
         overflow: hidden;
         padding: 12px;
         touch-action: pan-y;
      }

      .rev-track {
         display: flex;
         gap: var(--gap);
         will-change: transform;
         transform: translateX(0px);
      }

      .rev-slide {
         flex: 0 0 calc((100% - (var(--gap) * (var(--perview) - 1))) / var(--perview));
         border-radius: 32px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .78);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .10);
         overflow: hidden;
      }

      .rev-slide.hot {
         background:
            radial-gradient(circle at 18% 14%, rgba(68, 176, 91, .14), transparent 55%),
            rgba(255, 255, 255, .82);
      }

      .rpad {
         padding: 16px;
      }

      .rtop {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
      }

      .avatar {
         width: 60px;
         height: 60px;
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 1200;
         color: rgba(11, 27, 20, .90);
         flex: 0 0 auto;
      }
      .avatar img{
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: top;
         border-radius: 50%;
      } 
      .rname {
         font-weight: 1150;
         color: rgba(11, 27, 20, .92);
         letter-spacing: -0.2px;
      }

      .rsub {
         margin-top: 6px;
         color: rgba(11, 27, 20, .66);
         font-weight: 800;
         font-size: .92rem;
      }

      .rstars {
         margin-top: 10px;
         display: flex;
         gap: 4px;
      }

      .rtext {
         margin: 12px 0 0;
         color: rgba(11, 27, 20, .74);
         font-weight: 780;
         line-height: 1.55;
      }

      .rbadge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .78);
         font-size: .86rem;
         white-space: nowrap;
      }

      /* dots */
      .rev-dots {
         padding: 12px 12px 14px;
         display: flex;
         justify-content: center;
         gap: 8px;
         border-top: 1px solid rgba(14, 59, 46, .12);
         background: rgba(255, 255, 255, .70);
      }

      .dot {
         width: 10px;
         height: 10px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .20);
         background: rgba(14, 59, 46, .10);
         cursor: pointer;
      }

      .dot.on {
         width: 22px;
         background: rgba(14, 59, 46, .78);
         border-color: rgba(14, 59, 46, .26);
      }

      /* CTA strip */
      .rev-cta {
         margin-top: 14px;
         border-radius: 28px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 60px rgba(10, 20, 14, .08);
         padding: 14px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
      }

      .rev-cta .txt {
         color: rgba(11, 27, 20, .72);
         font-weight: 850;
         line-height: 1.45;
      }

      .rev-cta b {
         color: rgba(11, 27, 20, .88);
      }

      /* responsive per view */
      @media (max-width: 1100px) {
         .rev-slider {
            --perview: 2;
         }
      }

      @media (max-width: 640px) {
         .reviews {
            padding: 74px 0 56px;
         }

         .rev-head {
            flex-direction: column;
            align-items: flex-start;
         }

         .rev-slider {
            --perview: 1;
         }
      }

      /* =========================
   BLOCK 12: FAQ (Accordion)
   ========================= */

      .faq {
         position: relative;
         padding: 92px 0 72px;
         overflow: hidden;
         background:
            radial-gradient(circle at 12% 18%, rgba(68, 176, 91, .10), transparent 55%),
            radial-gradient(circle at 88% 22%, rgba(14, 59, 46, .12), transparent 55%),
            linear-gradient(180deg, rgba(245, 245, 239, .88), rgba(245, 245, 239, .72));
         border-top: 1px solid var(--border);
      }

      .faq .inner {
         position: relative;
         z-index: 2;
      }

      .faq-head {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px;
         margin-bottom: 16px;
      }

      .faq-head h2 {
         margin: 0;
         font-size: clamp(1.9rem, 3.1vw, 2.65rem);
         letter-spacing: -0.8px;
         color: rgba(11, 27, 20, .92);
      }

      .faq-head p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .68);
         font-weight: 650;
         max-width: 86ch;
      }

      /* layout */
      .faq-wrap {
         margin-top: 14px;
         display: grid;
         grid-template-columns: 1.1fr .9fr;
         gap: 12px;
      }

      /* accordion container */
      .faq-list {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .68);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .10);
         overflow: hidden;
      }

      /* item */
      .faq-item {
         border-top: 1px solid rgba(14, 59, 46, .12);
      }

      .faq-item:first-child {
         border-top: none;
      }

      .faq-q {
         width: 100%;
         padding: 16px 16px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         background: transparent;
         border: none;
         cursor: pointer;
         text-align: left;
      }

      .faq-q .qtext {
         font-weight: 1100;
         color: rgba(11, 27, 20, .90);
         letter-spacing: -0.2px;
         line-height: 1.25;
      }

      .faq-q .icon {
         width: 44px;
         height: 44px;
         border-radius: 16px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(11, 27, 20, .82);
         flex: 0 0 auto;
         transition: transform .25s ease;
      }

      .faq-item.open .faq-q .icon {
         transform: rotate(45deg);
      }

      .faq-a {
         height: 0;
         overflow: hidden;
         transition: height .28s cubic-bezier(.2, .9, .2, 1);
      }

      .faq-a .apad {
         padding: 0 16px 16px;
         color: rgba(11, 27, 20, .74);
         font-weight: 780;
         line-height: 1.6;
      }

      .faq-a ul {
         margin: 10px 0 0 18px;
      }

      .faq-a li {
         margin: 6px 0;
      }

      /* right column card */
      .faq-side {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .76);
         box-shadow: 0 22px 80px rgba(10, 20, 14, .10);
         padding: 16px;
         height: fit-content;
      }

      .faq-side h3 {
         margin: 0;
         font-size: 1.2rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
      }

      .faq-side p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 780;
         line-height: 1.55;
      }

      .faq-mini {
         margin-top: 12px;
         display: grid;
         gap: 10px;
      }

      .faq-chip {
         border-radius: 20px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         padding: 12px;
         font-weight: 900;
         color: rgba(11, 27, 20, .82);
      }

      .faq-chip span {
         display: block;
         margin-top: 6px;
         font-weight: 780;
         color: rgba(11, 27, 20, .70);
      }

      @media (max-width: 980px) {
         .faq-wrap {
            grid-template-columns: 1fr;
         }
      }
/* 
      .hero-inner {
         background: #00000096;
      } */

      @media (max-width: 640px) {
         .faq {
            padding: 74px 0 56px;
         }

         .faq-head {
            flex-direction: column;
            align-items: flex-start;
         }


         .brand {
            display: contents;
            align-items: center;
            gap: 12px;
            min-width: 240px;
         }

         .brand-title {
            display: none;
         }

         .stats {
            margin-top: -10px;
         }

      }


      /* =========================
   BLOCK 13: Final CTA (Conversion)
   ========================= */

      .finalcta {
         position: relative;
         padding: 92px 0 86px;
         overflow: hidden;
         border-top: 1px solid var(--border);
         background:
            radial-gradient(circle at 14% 18%, rgba(68, 176, 91, .14), transparent 55%),
            radial-gradient(circle at 86% 28%, rgba(14, 59, 46, .18), transparent 55%),
            linear-gradient(180deg, rgba(245, 245, 239, .88), rgba(245, 245, 239, .70));
      }

      .finalcta .inner {
         position: relative;
         z-index: 2;
      }

      .final-shell {
         border-radius: 40px;
         border: 1px solid rgba(14, 59, 46, .16);
         background:
            radial-gradient(circle at 16% 18%, rgba(68, 176, 91, .14), transparent 60%),
            rgba(255, 255, 255, .78);
         box-shadow: 0 30px 110px rgba(10, 20, 14, .16);
         overflow: hidden;
      }

      .final-top {
         padding: 18px 18px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 14px;
         border-bottom: 1px solid rgba(14, 59, 46, .12);
         background:
            radial-gradient(circle at 18% 22%, rgba(68, 176, 91, .12), transparent 60%),
            rgba(255, 255, 255, .78);
      }

      .final-title {
         margin: 0;
         font-size: clamp(2.0rem, 3.4vw, 3.0rem);
         letter-spacing: -1px;
         color: rgba(11, 27, 20, .92);
         line-height: 1.05;
      }

      .final-sub {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .70);
         font-weight: 780;
         max-width: 78ch;
         line-height: 1.5;
      }

      .final-badges {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
         justify-content: flex-end;
      }

      .fbadge {
         padding: 10px 12px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .16);
         background: rgba(14, 59, 46, .06);
         font-weight: 950;
         color: rgba(11, 27, 20, .80);
         font-size: .86rem;
         white-space: nowrap;
      }

      /* body */
      .final-body {
         padding: 18px;
         display: grid;
         grid-template-columns: 1.1fr .9fr;
         gap: 12px;
      }

      .final-form {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .78);
         box-shadow: 0 18px 70px rgba(10, 20, 14, .10);
         padding: 14px;
      }

      .ff-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
      }

      .ff-field {
         display: flex;
         flex-direction: column;
         gap: 6px;
      }

      .ff-field label {
         font-weight: 950;
         color: rgba(11, 27, 20, .82);
         font-size: .92rem;
      }

      .ff-field input,
      .ff-field select {
         padding: 12px 12px;
         border-radius: 16px;
         border: 1px solid rgba(14, 59, 46, .16);
         background: rgba(245, 245, 239, .72);
         color: rgba(11, 27, 20, .88);
         /* font-weight: 850; */
         outline: none;
      }

      .ff-field input:focus,
      .ff-field select:focus {
         border-color: rgba(68, 176, 91, .55);
         box-shadow: 0 0 0 6px rgba(68, 176, 91, .14);
         background: rgba(255, 255, 255, .85);
      }

      .ff-full {
         grid-column: span 2;
      }

      .final-actions {
         margin-top: 12px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         align-items: center;
      }

      .final-micro {
         margin-top: 10px;
         color: rgba(11, 27, 20, .68);
         font-weight: 800;
         line-height: 1.45;
      }

      .final-micro b {
         color: rgba(11, 27, 20, .86);
      }

      /* right card */
      .final-side {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255, .76);
         box-shadow: 0 18px 70px rgba(10, 20, 14, .10);
         padding: 14px;
         height: fit-content;
      }

      .final-side h3 {
         margin: 0;
         font-size: 1.15rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
      }

      .final-side p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 780;
         line-height: 1.55;
      }

      .textbox {
         margin-top: 12px;
         border-radius: 26px;
         border: 1px solid rgba(14, 59, 46, .14);
         background:
            radial-gradient(circle at 18% 20%, rgba(68, 176, 91, .12), transparent 60%),
            rgba(14, 59, 46, .06);
         padding: 12px;
      }

      .textbox .line {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 10px;
      }

      .textbox .big {
         font-weight: 1100;
         color: rgba(11, 27, 20, .90);
      }

      .textbox .small {
         margin-top: 8px;
         color: rgba(11, 27, 20, .70);
         font-weight: 780;
         line-height: 1.45;
      }

      .ksteps {
         margin-top: 12px;
         display: grid;
         gap: 10px;
      }

      .kstep {
         border-radius: 22px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         padding: 12px;
         font-weight: 900;
         color: rgba(11, 27, 20, .84);
      }

      .kstep span {
         display: block;
         margin-top: 6px;
         font-weight: 780;
         color: rgba(11, 27, 20, .70);
      }

      .final-note {
         padding: 14px 18px 18px;
         border-top: 1px solid rgba(14, 59, 46, .12);
         background: rgba(255, 255, 255);
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
         color: rgba(11, 27, 20, .70);
         font-weight: 850;
      }

      .final-note b {
         color: rgba(11, 27, 20, .88);
      }

      @media (max-width: 980px) {
         .final-body {
            grid-template-columns: 1fr;
         }
      }

      @media (max-width: 640px) {
         .finalcta {
            padding: 74px 0 66px;
         }

         .final-top {
            flex-direction: column;
         }

         .final-badges {
            justify-content: flex-start;
         }

         .ff-grid {
            grid-template-columns: 1fr;
         }

         .ff-full {
            grid-column: span 1;
         }
      }

      /* =========================
   BLOCK 15: Footer (Trust + Policies)
   ========================= */

      .footer {
         position: relative;
         padding: 54px 0 34px;
         border-top: 1px solid rgba(14, 59, 46, .18);
         background: #08382f;
         overflow: hidden;
      }

      .foot-shell {
         /* border-radius: 40px; */
         border: 1px solid rgba(14, 59, 46, .16);
         background: rgba(255, 255, 255, .78);
         box-shadow: 0 26px 90px rgba(10, 20, 14, .12);
         overflow: hidden;
      }

      .foot-top {
         padding: 18px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 14px;
         border-bottom: 1px solid rgba(14, 59, 46, .12);
         background: #08382f;
      }

      .foot-brand {
         display: flex;
         gap: 12px;
         align-items: flex-start;
      }

      .foot-mark {
         width: 44px;
         height: 44px;
         border-radius: 18px;
         background: rgba(14, 59, 46, .10);
         border: 1px solid rgba(14, 59, 46, .16);
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(11, 27, 20, .90);
         font-weight: 1250;
         letter-spacing: -0.4px;
      }

      .foot-title {
         margin: 0;
         font-weight: 1250;
         letter-spacing: -0.5px;
         color: rgba(11, 27, 20, .92);
         font-size: 1.15rem;
      }

      .foot-desc {
         margin: 6px 0 0;
         color: rgba(11, 27, 20, .70);
         font-weight: 780;
         line-height: 1.5;
         max-width: 70ch;
      }

      .foot-cta {
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
         justify-content: flex-end;
      }

      /* grid */
      .foot-grid {
         padding: 18px;
         display: grid;
         grid-template-columns: 1.25fr .75fr .75fr .75fr;
         gap: 12px;
         background: #08382f;

      }

      .foot-card {
         border-radius: 34px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(255, 255, 255);
         box-shadow: 0 18px 70px rgba(10, 20, 14, .08);
         padding: 14px;
         overflow: hidden;
      }

      .foot-card h4 {
         margin: 0;
         font-size: 1.02rem;
         letter-spacing: -0.3px;
         color: rgba(11, 27, 20, .92);
      }

      .foot-card p {
         margin: 10px 0 0;
         color: rgba(11, 27, 20, .72);
         font-weight: 780;
         line-height: 1.55;
      }

      .area-list {
         margin-top: 10px;
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
      }

      .area {
         padding: 9px 11px;
         border-radius: 999px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(14, 59, 46, .06);
         font-weight: 900;
         color: rgba(11, 27, 20, .82);
         font-size: .86rem;
         white-space: nowrap;
      }

      .foot-links {
         margin-top: 10px;
         display: grid;
         gap: 8px;
      }

      .foot-links a {
         display: inline-flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         padding: 10px 12px;
         border-radius: 18px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(245, 245, 239, .68);
         color: rgba(11, 27, 20, .84);
         font-weight: 950;
         text-decoration: none;
      }

      .foot-links a:hover {
         background: rgba(255, 255, 255, .86);
         border-color: rgba(68, 176, 91, .35);
      }

      .foot-links .arrow {
         width: 18px;
         height: 18px;
         opacity: .75;
      }

      .contact-list {
         margin-top: 10px;
         display: grid;
         gap: 8px;
      }

      .contact-item {
         padding: 10px 12px;
         border-radius: 18px;
         border: 1px solid rgba(14, 59, 46, .14);
         background: rgba(245, 245, 239, .68);
         color: rgba(11, 27, 20, .84);
         font-weight: 900;
         text-decoration: none;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
      }

      .contact-item:hover {
         background: rgba(255, 255, 255, .86);
         border-color: rgba(68, 176, 91, .35);
      }

      .contact-item small {
         display: block;
         font-weight: 800;
         color: rgba(11, 27, 20, .66);
      }

      .foot-bottom {
         padding: 14px 18px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         flex-wrap: wrap;
         border-top: 1px solid rgba(14, 59, 46, .12);
         background: #08382f;
         color: rgb(191 176 95);
         font-weight: 850;
      }

      .foot-bottom a {
         color: rgba(11, 27, 20, .78);
         text-decoration: none;
         font-weight: 900;
      }

      .foot-bottom a:hover {
         text-decoration: underline;
      }

      @media (max-width: 1100px) {
         .foot-grid {
            grid-template-columns: 1fr 1fr;
         }
      }

      @media (max-width: 640px) {
         .footer {
            padding: 44px 0 28px;
         }

         .foot-top {
            flex-direction: column;
         }

         .foot-cta {
            justify-content: flex-start;
         }

         .foot-grid {
            grid-template-columns: 1fr;
         }

         .trust-row {
            justify-content: center;
         }

         .stat .kpi {
            display: flex;
            /* flex-direction: column; */
            text-align: center;
            align-items: baseline;
            justify-content: center;
            align-items: center;
            gap: 10px;
         }

         .stat .label {
            text-align: center;
         }

         .stat .num {
            font-size: 66px;
            font-weight: 1100;
            letter-spacing: -0.6px;
            color: rgba(0, 0, 0, 0.98);
         }

         .btn {
            font-size: 12px;
         }

         .btn-ghost {
            background: rgb(255 255 255);
            color: #000;
         }

         .ps-footer {
            display: none;
         }

         .why {
            padding: 10px 0 56px;
         }

         .offer.hot .mini {
            color: rgb(0 0 0);
         }

         .offer .mini {
            color: rgb(11 27 20);
         }

         .pricing-rules {
            display: none;
         }

         .foot-mark {

            display: none;
         }
      }




      /* ----------------------------------scrollToTopBtn */

 #scrollToTopBtn {
         display: none;
         position: fixed;
         bottom: 20px;
         right: 20px;
         z-index: 99;
         font-size: 24px;
         background-color: #2F9E44;
         color: #fff;
         border: none;
         border-radius: 50%;
         width: 50px;
         height: 50px;
         cursor: pointer;
         text-align: center;
         box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }

      #scrollToTopBtn:hover {
         background-color: #2F9E44;
      }
    




      
  .whyus{
    position:relative;
    padding: clamp(42px, 5vw, 72px) 0;
    isolation:isolate;
  }
  .whyus__container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  /* background */
  .whyus__bg{
    position:absolute; inset:0;
    overflow:hidden;
    border-radius: 0;
    z-index:0;
  }
  .whyus__bgImg{
    position:absolute; inset:-10%;
    width:120%; height:120%;
    object-fit:cover;
    filter:saturate(0.9) contrast(1.05);
    transform: translate3d(0,0,0) scale(1.02);
    opacity:.55;
  }
  .whyus__bgOverlay{
    position:absolute; inset:0;
    background:#08382f;
    /* backdrop-filter: blur(6px); */
  }
  .whyus__glow{
    position:absolute;
    width: 520px; height: 520px;
    border-radius: 999px;
    filter: blur(45px);
    opacity:.30;
    animation: floaty 10s ease-in-out infinite;
  }
  .whyus__glow--a{ left:-120px; top:120px; background: rgba(68,176,91,.45); }
  .whyus__glow--b{ right:-160px; bottom:-80px; background: rgba(14,59,46,.42); animation-duration: 12s; }

  @keyframes floaty{
    0%,100%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(0,-18px,0); }
  }

  /* typography */
  .whyus__kicker{
    margin:0 0 8px;
    font-weight: 900;
    letter-spacing:.12em;
    text-transform: uppercase;
    font-size: .82rem;
    color: rgba(14,59,46,.75);
  }
  .whyus__title{
    margin:0;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.9px;
    line-height: 1.06;
    color: rgba(9,20,14,.92);
  }
  .whyus__sub{
    margin: 10px 0 0;
    max-width: 70ch;
    color: rgba(9,20,14,.72);
    font-weight: 750;
    line-height: 1.6;
    font-size: 1.02rem;
  }
  .accent{
    color: rgba(14,59,46,.92);
    background: linear-gradient(90deg, rgba(68,176,91,.22), transparent 70%);
    padding: 2px 10px 6px;
    border-radius: 14px;
  }
  .accent2{ color: rgba(68,176,91,.95); }

  /* top layout */
  .whyus__top{
    display:grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 18px;
    align-items:start;
    margin-bottom: 16px;
  }
  .whyus__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 14px;
  }

  /* buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(14,59,46,.16);
    /* background: rgba(255,255,255,.82); */
    color: rgba(9,20,14,.88);
    font-weight: 950;
    text-decoration:none;
    box-shadow: 0 14px 50px rgba(10,20,14,.10);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    white-space: nowrap;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 72px rgba(10,20,14,.14); background: rgba(255,255,255,.92); }
  .btn--primary{
    border-color: rgba(68,176,91,.35);
    background: linear-gradient(180deg, rgba(68,176,91,.92), rgba(46,148,85,.92));
    color: rgba(255,255,255,.92);
  }
  .btn--ghost{
    background: rgba(255,255,255);
  }
  .btn--soft{
    background: rgba(14,59,46,.08);
  }
  .btn--ghostOnDark{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
  }
  .btn--ghostOnDark:hover{ background: rgba(255,255,255,.14); }

  /* stats */
  .whyus__stats{
    display:grid;
    gap: 10px;
  }
  .stat{
    border-radius: 22px;
    border: 1px solid rgba(14,59,46,.14);
    background: rgba(255,255,255,.72);
    padding: 14px 14px;
    box-shadow: 0 16px 60px rgba(10,20,14,.10);
  }
  .stat__num{
    font-size: 30px;
    letter-spacing: -0.8px;
    font-weight: 1050;
    color: rgba(9,20,14,.92);
    display:flex;
    align-items:baseline;
    gap: 2px;
  }
  .stat__plus{ color: rgba(14,59,46,.92); font-weight: 1100; }
  .stat__label{
    margin-top: 4px;
    color: rgba(9,20,14,.62);
    font-weight: 850;
  }

  /* main grid */
  .whyus__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* panels */
  .panel{
    border-radius: 34px;
    overflow:hidden;
    border: 1px solid rgba(14,59,46,.14);
    box-shadow: 0 26px 90px rgba(10,20,14,.14);
    background: rgba(255,255,255,.82);
    position:relative;
  }
  .panel--dark{
    background:
      radial-gradient(circle at 14% 22%, rgba(68,176,91,.18), transparent 60%),
      rgba(10,26,18,.86);
    border-color: rgba(255,255,255,.12);
  }
  .panel__media{
    height: 500px;
    position:relative;
    overflow:hidden;
  }
  .panel__media img{
    width:100%; height:100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: contrast(1.05) saturate(1.02);
  }
  .panel__mediaShade{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(245,245,239,.10), rgba(245,245,239,.86));
  }
  .panel__mediaShade--dark{
    background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(10,26,18,.92));
  }

  .panel__content{
    padding: 16px 16px 18px;
  }
  .panel__title{
    margin: 10px 0 0;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: rgba(9,20,14,.92);
  }
  .panel__title--dark{ color: rgba(255,255,255,.94); }
  .panel__desc{
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-weight: 780;
    line-height: 1.6;
  }

  /* pill */
  .pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    font-weight: 950;
    font-size: .92rem;
    border: 1px solid rgba(14,59,46,.14);
    background: rgba(14,59,46,.06);
    color: rgba(9,20,14,.86);
  }
  .pill--dark{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }
  .pill__dot{
    width:10px; height:10px;
    border-radius: 999px;
  }
  .pill__dot--red{ background: rgba(230,60,60,.85); box-shadow: 0 0 0 5px rgba(230,60,60,.12); }
  .pill__dot--green{ background: rgba(68,176,91,.95); box-shadow: 0 0 0 5px rgba(68,176,91,.14); }

  /* lists */
  .list{
    list-style:none;
    padding:0;
    margin: 12px 0 0;
    display:grid;
    gap: 10px;
  }
  .list__item{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(14,59,46,.12);
    background: rgba(255,255,255,.70);
    font-weight: 900;
    color: rgba(9,20,14,.86);
  }
  .panel--dark .list__item{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.90);
  }

  .icon{
    width: 36px; height: 36px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
  }
  .icon svg{ width: 18px; height: 18px; }
  .icon--x{
    background: rgba(230,60,60,.10);
    color: rgba(230,60,60,.92);
    border: 1px solid rgba(230,60,60,.16);
  }
  .icon--check{
    background: rgba(68,176,91,.14);
    color: rgba(68,176,91,.98);
    border: 1px solid rgba(68,176,91,.20);
  }

  .micro{
    margin-top: 12px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    align-items:center;
  }
  .micro__badge{
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(14,59,46,.14);
    background: rgba(14,59,46,.06);
    font-weight: 950;
  }
  .micro__text{
    color: rgba(9,20,14,.66);
    font-weight: 850;
  }

  .panel__ctaRow{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    margin-top: 14px;
  }

  /* highlights */
  .whyus__highlights{
    margin-top: 14px;
    border-radius: 34px;
    border: 1px solid rgba(14,59,46,.14);
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 70px rgba(10,20,14,.10);
    overflow:hidden;
  }
  .hl__track{
    display:grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 10px;
    padding: 14px;
  }
  .hl{
    border-radius: 22px;
    border: 1px solid rgba(14,59,46,.12);
    background: rgba(245,245,239,.66);
    padding: 14px;
    display:flex;
    gap: 12px;
    align-items:flex-start;
    transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
  }
  .hl:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.84);
    box-shadow: 0 18px 70px rgba(10,20,14,.14);
  }
  .hl__icon{
    width: 42px; height: 42px;
    border-radius: 16px;
    background: rgba(14,59,46,.08);
    border: 1px solid rgba(14,59,46,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(14,59,46,.88);
    flex: 0 0 auto;
  }
  .hl__icon svg{ width: 22px; height: 22px; }
  .hl__text b{
    display:block;
    font-weight: 1050;
    letter-spacing: -.3px;
    color: rgba(9,20,14,.92);
  }
  .hl__text span{
    display:block;
    margin-top: 4px;
    color: rgba(9,20,14,.68);
    font-weight: 820;
    line-height: 1.5;
  }

  .whyus__bottomCta{
    display:flex;
    justify-content:space-between;
    gap: 10px;
    align-items:center;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(14,59,46,.12);
    background: rgba(255,255,255,.64);
  }
  .whyus__bottomText{
    color: rgba(9,20,14,.74);
    font-weight: 880;
  }
  .whyus__bottomBtns{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  /* reveal animation */
  .reveal{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .65s ease, transform .65s ease;
    will-change: transform, opacity;
  }
  .reveal.is-in{
    opacity:1;
    transform: translateY(0);
  }

  /* responsive */
  @media (max-width: 980px){
    .whyus__top{ grid-template-columns: 1fr; }
    .whyus__stats{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 860px){
    .whyus__grid{ grid-template-columns: 1fr; }
    .hl__track{
      grid-template-columns: repeat(4, minmax(240px, 1fr));
      overflow:auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .hl{
      scroll-snap-align: start;
    }
  }
  @media (max-width: 640px){
    .whyus__container{ width:min(1180px, calc(100% - 28px)); }
    .whyus__stats{ grid-template-columns: 1fr; }
    .panel__media{ height: 225px; }
    .whyus__bottomCta{ align-items:flex-start; flex-direction:column; }
    .whyus__bottomBtns{ width:100%; justify-content:flex-start; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .whyus__glow{ animation:none; }
    .reveal{ transition:none; transform:none; opacity:1; }
    .btn{ transition:none; }
    .hl{ transition:none; }
  }

  /* VIP glass label (calculator) */
.vip-glass{
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;
  cursor: pointer;

  /* dark + gold vibe */
  background: rgba(6, 10, 8, .92);
  color: rgba(197, 163, 62, .95);

  border: 1px solid rgba(197, 163, 62, .26);
  box-shadow:
    0 18px 45px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.06);

  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}

.vip-glass input{
  transform: scale(1.05);
  accent-color: #C5A33E;
}

.vip-glass .vip-text{
  line-height: 1.2;
  font-weight: 750;
}

/* subtle “glass” overlay */
.vip-glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 220px at 20% 10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(700px 240px at 85% 0%, rgba(197,163,62,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}

/* moving shine */
.vip-glass::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.22) 48%,
    rgba(255,255,255,0) 62%,
    transparent 100%
  );
  transform: rotate(10deg);
  opacity: .55;
  animation: vipShine 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes vipShine{
  0%   { transform: translateX(-35%) rotate(10deg); opacity:.12; }
  30%  { opacity:.55; }
  65%  { opacity:.30; }
  100% { transform: translateX(230%) rotate(10deg); opacity:.12; }
}

/* extra tiny sparkle layer (optional) */
.vip-glass .vip-spark{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 35%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 28% 70%, rgba(197,163,62,.22), transparent 60%),
    radial-gradient(2px 2px at 66% 22%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 82% 55%, rgba(197,163,62,.20), transparent 60%);
  opacity: .65;
  pointer-events:none;
  animation: vipSpark 5.8s ease-in-out infinite;
}

@keyframes vipSpark{
  0%,100% { opacity:.35; filter: blur(0px); }
  50%     { opacity:.70; filter: blur(.2px); }
}

/* checked = a bit brighter */
.vip-glass:has(#qVip:checked){
  border-color: rgba(197,163,62,.55);
  box-shadow:
    0 22px 60px rgba(0,0,0,.28),
    0 0 0 3px rgba(197,163,62,.12);
}

/* accessibility */
.vip-glass:focus-within{
  outline: none;
  box-shadow:
    0 22px 60px rgba(0,0,0,.28),
    0 0 0 3px rgba(197,163,62,.20);
}

/* small helper */
.vip-mini{
  opacity: .85;
  font-weight: 800;
  margin-left: 6px;
}