:root {
        --navy: #023f68;
        --navy-d: #012d4e;
        --blue: #0274be;
        --blue-l: #0d8de8;
        --white: #fbfdff;
        --off: #f4f7fb;
        --off2: #edf1f7;
        --text: #0f1f2e;
        --body: #3d5a72;
        --muted: #6b8699;
        --ghost: #a0b8c8;
        --line: rgba(2, 63, 104, 0.09);
        --line2: rgba(2, 63, 104, 0.15);
        --b08: rgba(2, 116, 190, 0.08);
        --b15: rgba(2, 116, 190, 0.15);
        --n06: rgba(2, 63, 104, 0.06);
        --green: #059669;
        --amber: #d97706;
        --sh: 0 2px 16px rgba(2, 63, 104, 0.08), 0 8px 32px rgba(2, 63, 104, 0.06);
        --sh-lg: 0 8px 40px rgba(2, 63, 104, 0.12), 0 24px 64px rgba(2, 63, 104, 0.08);
        --nh: 68px;
        --e: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
      }
         *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
      }
      body {
        font-family: "DM Sans", sans-serif;
        background: var(--white);
        color: var(--text);
        overflow-x: hidden;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      ul {
        list-style: none;
      }
      ::-webkit-scrollbar {
        width: 4px;
      }
      ::-webkit-scrollbar-thumb {
        background: var(--blue);
        border-radius: 2px;
      }
      .wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 clamp(1.25rem, 5vw, 2.5rem);
        width:100%;
      }

      /* Reveal */
      .rv {
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .rv.on {
        opacity: 1;
        transform: none;
      }
      .d1 {
        transition-delay: 0.08s;
      }
      .d2 {
        transition-delay: 0.16s;
      }
      .d3 {
        transition-delay: 0.24s;
      }
      .d4 {
        transition-delay: 0.32s;
      }
      .d5 {
        transition-delay: 0.4s;
      }

      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "DM Sans", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 12px 24px;
        border-radius: 9px;
        border: none;
        cursor: pointer;
        transition: all var(--e);
        white-space: nowrap;
      }
      .btn svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
      }
      .btn-p {
        background: var(--blue);
        color: #fff;
        box-shadow: 0 2px 12px rgba(2, 116, 190, 0.28);
      }
      .btn-p:hover {
        background: #0265a8;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(2, 116, 190, 0.4);
      }
      .btn-s {
        background: var(--white);
        color: var(--navy);
        border: 1.5px solid var(--line2);
      }
      .btn-s:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--b08);
        transform: translateY(-2px);
      }
      .btn-n {
        background: var(--navy);
        color: #fff;
      }
      .btn-n:hover {
        background: var(--navy-d);
        transform: translateY(-2px);
      }
      .btn-w {
        background: var(--white);
        color: var(--navy);
        font-weight: 700;
      }
      .btn-w:hover {
        background: #e8f0f8;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
      }
      .btn-ow {
        background: transparent;
        color: rgba(251, 253, 255, 0.9);
        border: 1.5px solid rgba(251, 253, 255, 0.28);
      }
      .btn-ow:hover {
        border-color: rgba(251, 253, 255, 0.65);
        background: rgba(251, 253, 255, 0.08);
        transform: translateY(-2px);
      }
      .btn-lg {
        font-size: 0.95rem;
        padding: 13px 28px;
        border-radius: 10px;
      }
      .btn-sm {
        font-size: 0.8rem;
        padding: 8px 18px;
        border-radius: 8px;
      }
      .eyebrow {
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
      }
      .eyebrow::before,
      .eyebrow::after {
        content: "";
        width: 16px;
        height: 1.5px;
        background: var(--blue);
      }
      
              /* ═══════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════ */
      
         nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 300;
        height: var(--nh);
        display: flex;
        align-items: center;
        background: rgba(251, 253, 255, 0.88);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid transparent;
        transition: all 0.3s;
      }
      nav.sc {
        border-color: var(--line);
        box-shadow: var(--sh);
        background: rgba(251, 253, 255, 0.97);
      }
      .nav-i {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .logo-m {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: linear-gradient(145deg, var(--navy-d), var(--navy));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(2, 63, 104, 0.28);
      }
      .logo-m svg {
        width: 17px;
        height: 17px;
      }
      .logo-n {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1.18rem;
        letter-spacing: -0.018em;
        color: var(--navy);
      }
      .logo-n b {
        color: var(--blue);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 1px;
        list-style: none;
      }
      .nav-links li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .nav-links a {
        font-size: 0.87rem;
        font-weight: 500;
        color: var(--muted);
        padding: 7px 13px;
        border-radius: 7px;
        transition: all var(--e);
      }
      .nav-links a:hover,
      .nav-links a.active {
        color: var(--navy);
        background: var(--n06);
      }
      .nav-links a.active {
        font-weight: 600;
      }
      .nav-r {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nav-login {
        font-size: 0.87rem;
        font-weight: 500;
        color: var(--muted);
        padding: 7px 13px;
        border-radius: 7px;
        transition: all var(--e);
      }
      .nav-login:hover {
        color: var(--navy);
        background: var(--n06);
      }
      .hbg {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 7px;
        border-radius: 8px;
      }
      .hbg span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--navy);
        border-radius: 2px;
        transition: all 0.3s;
      }
      .hbg.op span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hbg.op span:nth-child(2) {
        opacity: 0;
      }
      .hbg.op span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }
      .mob-nav {
        display: none;
        position: fixed;
        top: var(--nh);
        left: 0;
        right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        padding: 1.25rem;
        flex-direction: column;
        gap: 4px;
        z-index: 299;
        box-shadow: var(--sh);
      }
      .mob-nav.op {
        display: flex;
      }
      .mob-nav a {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--muted);
        padding: 10px 14px;
        border-radius: 9px;
        transition: all var(--e);
      }
      .mob-nav a:hover {
        color: var(--navy);
        background: var(--n06);
      }
      .mob-div {
        height: 1px;
        background: var(--line);
        margin: 1rem 0;
      }
      
                    /* ═══════════════════════════════════════════════════
   Footer
═══════════════════════════════════════════════════ */


 footer {
        background: var(--white);
        border-top: 1px solid var(--line);
        padding: 4rem 0 2rem;
      }
      .foot-g {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 2.5rem;
        margin-bottom: 2.5rem;
      }
      .foot-brand {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .foot-tag {
        font-size: 0.84rem;
        color: var(--body);
        line-height: 1.7;
        max-width: 220px;
      }
      .foot-email {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.82rem;
        color: var(--blue);
        font-weight: 500;
        transition: opacity var(--e);
      }
      .foot-email:hover {
        opacity: 0.72;
      }
      .foot-email svg {
        width: 13px;
        height: 13px;
      }
      .foot-col {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .foot-col-h {
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 0.72rem;
        color: var(--navy);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.25rem;
      }
      .foot-col a {
        font-size: 0.84rem;
        color: var(--body);
        transition: color var(--e);
      }
      .foot-col a:hover {
        color: var(--blue);
      }
      .foot-bot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1.5rem;
        border-top: 1px solid var(--line);
        flex-wrap: wrap;
        gap: 0.75rem;
      }
      .foot-copy {
        font-size: 0.76rem;
        color: var(--ghost);
      }
      .foot-ls {
        display: flex;
        gap: 1.5rem;
      }
      .foot-ls a {
        font-size: 0.76rem;
        color: var(--ghost);
        transition: color var(--e);
      }
      .foot-ls a:hover {
        color: var(--navy);
      }

                    /* ═══════════════════════════════════════════════════
   Home HERO
═══════════════════════════════════════════════════ */

      .hero {
        padding: calc(var(--nh) + 5rem) 0 0;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(2, 116, 190, 0.07), transparent 65%);
        pointer-events: none;
      }
      .hero > .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.75rem;
      }
      .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 14px;
        border-radius: 100px;
        background: var(--b08);
        border: 1px solid var(--b15);
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .kicker-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        animation: blink 2s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .hero-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.8rem, 6.5vw, 5rem);
        line-height: 1.04;
        letter-spacing: -0.035em;
        color: var(--navy);
        max-width: 780px;
      }
      .hero-h .ac {
        color: var(--blue);
      }
      .hero-h .strike {
        position: relative;
        display: inline-block;
        color: var(--ghost);
      }
      .hero-h .strike::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 52%;
        height: 3px;
        background: var(--blue);
        border-radius: 2px;
        transform: rotate(-1deg);
      }
      .hero-sub {
        font-size: 1.1rem;
        color: var(--body);
        line-height: 1.75;
        max-width: 500px;
      }
      .hero-sub strong {
        color: var(--navy);
        font-weight: 600;
      }
      .hero-acts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .hero-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 0px;
      }
      .ht {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--ghost);
      }
      .ht svg {
        width: 12px;
        height: 12px;
        color: var(--blue);
      }

      /* ── HERO IMAGE BLOCK ── */
      .hero-img-wrap {
        width: 100%;
        margin-top: 3.5rem;
        position: relative;
        padding: 0 clamp(0.5rem, 3vw, 2rem);
      }
      /* Browser chrome wrapper */
      .browser-frame {
        background: var(--white);
        border: 1.5px solid var(--line2);
        border-radius: 16px 16px 0 0;
        overflow: hidden;
        box-shadow:
          0 -4px 60px rgba(2, 63, 104, 0.12),
          0 0 0 1px rgba(2, 63, 104, 0.05);
        position: relative;
        z-index: 1;
      }
      /* Fade at the bottom so it bleeds into next section */
      .browser-frame::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 35%;
        background: linear-gradient(to bottom, transparent, var(--white));
        pointer-events: none;
        z-index: 2;
      }
      .browser-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 18px;
        background: linear-gradient(135deg, var(--navy-d), var(--navy));
      }
      .bb-dots {
        display: flex;
        gap: 5px;
      }
      .bb-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      .bb-dot:nth-child(1) {
        background: #ef4444;
      }
      .bb-dot:nth-child(2) {
        background: #f59e0b;
      }
      .bb-dot:nth-child(3) {
        background: #22c55e;
      }
      .bb-url {
        flex: 1;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        padding: 5px 12px;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        font-family: "DM Sans", sans-serif;
      }
      .bb-nav {
        display: flex;
        gap: 8px;
      }
      .bb-tab {
        font-size: 0.62rem;
        padding: 4px 12px;
        border-radius: 5px;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
      }
      .bb-tab.on {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.9);
      }
      .bb-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(2, 116, 190, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Outfit", sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
      }
      /* Dashboard SVG screenshot */
      .dash-svg-wrap {
        background: var(--off);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      /* Floating notification cards on hero */
      .hero-float {
        position: absolute;
        z-index: 5;
        animation: floatY 4s ease-in-out infinite alternate;
      }
      @keyframes floatY {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-8px);
        }
      }
      .hero-float.left {
        left: -20px;
        bottom: 80px;
        animation-delay: -2s;
      }
      .hero-float.right {
        right: -20px;
        top: 40px;
      }
      .float-card {
        background: var(--white);
        border: 1px solid var(--line2);
        border-radius: 12px;
        padding: 10px 14px;
        box-shadow: var(--sh-lg);
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 200px;
        max-width: 240px;
      }
      .fc-ico {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .fc-ico svg {
        width: 15px;
        height: 15px;
      }
      .fc-title {
        font-family: "Outfit", sans-serif;
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--navy);
      }
      .fc-sub {
        font-size: 0.64rem;
        color: var(--muted);
        margin-top: 2px;
      }


                    /* ═══════════════════════════════════════════════════
   PROOF STRIP
═══════════════════════════════════════════════════ */

 /* ══ PROOF STRIP ══ */
      .proof {
        padding: 1.75rem 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .proof-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        flex-wrap: wrap;
      }
      .proof-txt {
        font-size: 0.78rem;
        color: var(--ghost);
        font-weight: 500;
      }
      .proof-sep {
        width: 1px;
        height: 16px;
        background: var(--line);
        flex-shrink: 0;
      }
      .proof-logos {
        display: flex;
        align-items: center;
        gap: 2.25rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .proof-logo {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
        color: #c5d4df;
      }
      .proof-rating {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .pr-stars {
        color: #f59e0b;
        font-size: 0.84rem;
      }
      .pr-txt {
        font-size: 0.78rem;
        color: var(--muted);
      }
      .pr-txt strong {
        color: var(--navy);
      }

                    /* ═══════════════════════════════════════════════════
  PAIN SECTION
═══════════════════════════════════════════════════ */

      .pain-sec {
        padding: 6rem 0;
        background: var(--off);
        border-bottom: 1px solid var(--line);
      }
      .pain-hdr {
        text-align: center;
        margin-bottom: 0.5rem;
      }
      .pain-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
      }
      .pain-intro {
        font-size: 1rem;
        color: var(--body);
        text-align: center;
        max-width: 460px;
        margin: 0.75rem auto 3rem;
        line-height: 1.72;
      }
      /* IMAGE-STYLE pain cards with illustration backgrounds */
      .pain-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .pain-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        transition: all var(--e);
        box-shadow: var(--sh);
      }
      .pain-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
        border-color: var(--line2);
      }
      /* Illustration area */
      .pain-illus {
        height: 180px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pain-illus-bg {
        position: absolute;
        inset: 0;
      }
      .pain-content {
        padding: 1.5rem 1.75rem;
      }
      .pain-icon-badge {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.85rem;
      }
      .pain-icon-badge svg {
        width: 18px;
        height: 18px;
      }
      .pain-title {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: var(--navy);
        letter-spacing: -0.01em;
        line-height: 1.25;
        margin-bottom: 0.5rem;
      }
      .pain-body {
        font-size: 0.87rem;
        color: var(--body);
        line-height: 1.72;
      }
      .pain-solve {
        text-align: center;
        margin-top: 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }
      .ps-arrow {
        font-size: 1.75rem;
        color: var(--blue);
      }
      .ps-text {
        font-size: 1rem;
        color: var(--body);
        font-style: italic;
      }
      .ps-text strong {
        color: var(--navy);
        font-style: normal;
      }


                    /* ═══════════════════════════════════════════════════
STATS BAND 
═══════════════════════════════════════════════════ */

      .stats-band {
        padding: 4rem 0;
        background: var(--navy);
        position: relative;
        overflow: hidden;
      }
      .stats-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 70% at 50% -10%, rgba(2, 116, 190, 0.22), transparent 65%);
        pointer-events: none;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
        z-index: 1;
      }
      .stat-item {
        padding: 1.75rem 2rem;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }
      .stat-item:first-child {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
      }
      .stat-n {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 2.6rem;
        color: var(--white);
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .stat-n em {
        color: #7dd3fc;
        font-style: normal;
      }
      .stat-l {
        font-size: 0.82rem;
        color: rgba(251, 253, 255, 0.5);
        margin-top: 0.5rem;
        font-weight: 500;
        line-height: 1.4;
      }


                    /* ═══════════════════════════════════════════════════
PLATFORM TABS
═══════════════════════════════════════════════════ */

      .platform-sec {
        padding: 7rem 0;
      }
      .platform-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .platform-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
      }
      .platform-hdr p {
        font-size: 0.98rem;
        color: var(--body);
        line-height: 1.72;
        max-width: 440px;
        margin: 0.75rem auto 0;
      }
      .tab-pills {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 3rem;
        flex-wrap: wrap;
      }
      .tp {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0.65rem 1.4rem;
        border-radius: 100px;
        font-family: "DM Sans", sans-serif;
        font-size: 0.88rem;
        font-weight: 500;
        border: 1.5px solid var(--line);
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: all var(--e);
      }
      .tp svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
      }
      .tp:hover {
        border-color: var(--blue);
        color: var(--navy);
        background: var(--b08);
      }
      .tp.on {
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
        box-shadow: 0 3px 12px rgba(2, 116, 190, 0.28);
        font-weight: 600;
      }
      .tab-panels {
        position: relative;
      }
      .tab-panel {
        display: none;
      }
      .tab-panel.on {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
        animation: fadeUp 0.4s ease forwards;
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .tp-copy {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
      .tp-tag {
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .tp-tag::before {
        content: "";
        width: 14px;
        height: 1.5px;
        background: var(--blue);
      }
      .tp-h {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        line-height: 1.14;
        letter-spacing: -0.022em;
        color: var(--navy);
      }
      .tp-sub {
        font-size: 0.9rem;
        color: var(--body);
        line-height: 1.74;
      }
      .tp-points {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .tpp {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.88rem;
        color: var(--body);
        line-height: 1.58;
      }
      .tpp-ck {
        width: 19px;
        height: 19px;
        border-radius: 5px;
        background: var(--b08);
        border: 1px solid var(--b15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .tpp-ck svg {
        width: 9px;
        height: 9px;
        color: var(--blue);
      }
      .tp-outcome {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0.75rem 1rem;
        background: rgba(5, 150, 105, 0.06);
        border: 1px solid rgba(5, 150, 105, 0.18);
        border-radius: 9px;
        font-size: 0.84rem;
        color: var(--green);
        font-weight: 500;
      }
      .tp-outcome svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
      }
      .tp-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--blue);
        transition: gap var(--e);
        width: fit-content;
      }
      .tp-link:hover {
        gap: 11px;
      }
      .tp-link svg {
        width: 14px;
        height: 14px;
      }
      /* Image screenshot container */
      .tab-img-wrap {
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--sh-lg);
        border: 1.5px solid var(--line2);
        position: relative;
      }
      .tab-img-wrap::before {
        content: "";
        display: block;
        height: 3px;
        background: linear-gradient(90deg, var(--navy-d), var(--blue));
      }
      .tab-scr-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 14px;
        background: var(--off);
        border-bottom: 1px solid var(--line);
      }
      .tsb-dots {
        display: flex;
        gap: 4px;
      }
      .tsb-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .tsb-dot:nth-child(1) {
        background: #ef4444;
      }
      .tsb-dot:nth-child(2) {
        background: #f59e0b;
      }
      .tsb-dot:nth-child(3) {
        background: #22c55e;
      }
      .tsb-title {
        font-family: "Outfit", sans-serif;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--muted);
      }
      .tsb-live {
        font-size: 0.6rem;
        color: var(--green);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 3px;
      }
      .tsb-live::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--green);
        animation: blink 2s infinite;
      }
      .tab-scr-body {
        background: var(--off);
        padding: 14px;
      }


                              /* ═══════════════════════════════════════════════════
COMPARISON
═══════════════════════════════════════════════════ */

            .compare-sec {
        padding: 7rem 0;
        background: var(--off);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .compare-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .compare-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
      }
      .compare-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0;
        align-items: stretch;
      }
      .compare-col {
        display: flex;
        flex-direction: column;
      }
      .compare-col.before .col-hdr {
        background: rgba(239, 68, 68, 0.06);
        border: 1px solid rgba(239, 68, 68, 0.18);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 1.25rem 1.5rem;
        text-align: center;
      }
      .compare-col.after .col-hdr {
        background: rgba(2, 116, 190, 0.07);
        border: 1px solid rgba(2, 116, 190, 0.2);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 1.25rem 1.5rem;
        text-align: center;
      }
      .col-hdr-tag {
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 0.35rem;
      }
      .before .col-hdr-tag {
        color: #ef4444;
      }
      .after .col-hdr-tag {
        color: var(--blue);
      }
      .col-hdr-title {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--navy);
      }
      .compare-rows {
        flex: 1;
      }
      .before .compare-rows {
        border: 1px solid rgba(239, 68, 68, 0.18);
        border-radius: 0 0 12px 12px;
        overflow: hidden;
      }
      .after .compare-rows {
        border: 1px solid rgba(2, 116, 190, 0.2);
        border-radius: 0 0 12px 12px;
        overflow: hidden;
      }
      .cmp-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.9rem 1.25rem;
        border-bottom: 1px solid;
        font-size: 0.86rem;
        line-height: 1.5;
      }
      .before .cmp-row {
        border-color: rgba(239, 68, 68, 0.1);
        background: var(--white);
      }
      .after .cmp-row {
        border-color: rgba(2, 116, 190, 0.1);
        background: var(--white);
      }
      .cmp-row:last-child {
        border-bottom: none;
      }
      .cmp-icon {
        font-size: 0.9rem;
        flex-shrink: 0;
        width: 20px;
        text-align: center;
      }
      .before .cmp-icon {
        color: #ef4444;
      }
      .after .cmp-icon {
        color: var(--green);
      }
      .before .cmp-row {
        color: var(--body);
      }
      .after .cmp-row {
        color: var(--body);
      }
      .vs-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1.5rem;
        align-self: center;
      }
      .vs-badge {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 0.85rem;
        color: var(--white);
        background: var(--navy);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(2, 63, 104, 0.28);
        flex-shrink: 0;
      }
      
                                    /* ═══════════════════════════════════════════════════
HOW IT WORKS
═══════════════════════════════════════════════════ */
      
            .how-sec {
        padding: 7rem 0;
        background: var(--navy);
        position: relative;
        overflow: hidden;
      }
      .how-sec::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 65% 65% at 50% -10%, rgba(2, 116, 190, 0.22), transparent 65%);
        pointer-events: none;
      }
      .how-inner {
        position: relative;
        z-index: 1;
      }
      .how-hdr {
        text-align: center;
        margin-bottom: 4rem;
      }
      .how-tag {
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: rgba(2, 116, 190, 0.75);
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
        margin-bottom: 0.85rem;
      }
      .how-tag::before,
      .how-tag::after {
        content: "";
        width: 16px;
        height: 1.5px;
        background: rgba(2, 116, 190, 0.75);
      }
      .how-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--white);
      }
      .how-sub {
        font-size: 0.98rem;
        color: rgba(251, 253, 255, 0.52);
        line-height: 1.75;
        max-width: 400px;
        margin: 0.75rem auto 0;
      }
      .how-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .how-step {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        overflow: hidden;
        transition: background var(--e);
      }
      .how-step:hover {
        background: rgba(255, 255, 255, 0.07);
      }
      /* Step illustration */
      .hs-illus {
        height: 140px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }
      .hs-body-wrap {
        padding: 1.5rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .hs-n {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 2.5rem;
        line-height: 1;
        color: rgba(2, 116, 190, 0.28);
        letter-spacing: -0.03em;
      }
      .hs-title {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--white);
        letter-spacing: -0.01em;
      }
      .hs-body {
        font-size: 0.88rem;
        color: rgba(251, 253, 255, 0.5);
        line-height: 1.72;
      }
      .hs-time {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: rgba(2, 116, 190, 0.7);
        font-weight: 600;
      }
      .hs-time svg {
        width: 13px;
        height: 13px;
      }
      
      
                                    /* ═══════════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════════ */
      
            .proof-sec {
        padding: 7rem 0;
        border-bottom: 1px solid var(--line);
      }
      .proof-hdr {
        text-align: center;
        margin-bottom: 3.5rem;
      }
      .proof-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
      }
      .tc-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .tc {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: var(--sh);
        transition: all var(--e);
      }
      .tc:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
        border-color: var(--line2);
      }
      /* Photo banner at top of testimonial */
      .tc-photo {
        height: 100px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tc-body {
        padding: 1.5rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1;
        position: relative;
        overflow: hidden;
      }
      .tc-body::after {
        content: "\201C";
        position: absolute;
        bottom: -20px;
        right: 14px;
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 8rem;
        color: rgba(2, 63, 104, 0.04);
        line-height: 1;
        pointer-events: none;
      }
      .tc-outcome {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--green);
        background: rgba(5, 150, 105, 0.07);
        border: 1px solid rgba(5, 150, 105, 0.18);
        padding: 5px 10px;
        border-radius: 6px;
        width: fit-content;
      }
      .tc-outcome svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
      }
      .tc-stars {
        color: #f59e0b;
        font-size: 0.84rem;
      }
      .tc-q {
        font-size: 0.9rem;
        color: var(--body);
        line-height: 1.78;
        position: relative;
        z-index: 1;
        flex: 1;
      }
      .tc-auth {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 0.9rem;
        border-top: 1px solid var(--line);
      }
      .tc-av {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 0.78rem;
        color: #fff;
        flex-shrink: 0;
        overflow: hidden;
      }
      .tc-name {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--navy);
      }
      .tc-role {
        font-size: 0.72rem;
        color: var(--ghost);
        margin-top: 1px;
      }
      
      
                                    /* ═══════════════════════════════════════════════════
 Pricing
═══════════════════════════════════════════════════ */
      
            .pricing-sec {
        padding: 7rem 0;
        background: var(--off);
        border-top: 1px solid var(--line);
      }
      .pricing-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .pricing-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
      }
      .pricing-hdr p {
        font-size: 0.95rem;
        color: var(--body);
        margin-top: 0.6rem;
      }
      .price-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--sh);
      }
      .pc {
        background: var(--white);
        padding: 1.75rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        position: relative;
        transition: background var(--e);
      }
      .pc:hover:not(.pc-hot) {
        background: rgba(2, 116, 190, 0.018);
      }
      .pc-hot {
        background: var(--navy);
        position: relative;
      }
      .pc-hot::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--blue), #0d8de8);
      }
      .pc-badge {
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--blue);
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 0.6rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 0 0 8px 8px;
        white-space: nowrap;
      }
      .pc-name {
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .pc-hot .pc-name {
        color: rgba(251, 253, 255, 0.45);
      }
      .pc-price-row {
        display: flex;
        align-items: baseline;
        gap: 2px;
      }
      .pc-sym {
        font-family: "Outfit", sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--muted);
      }
      .pc-hot .pc-sym {
        color: rgba(251, 253, 255, 0.45);
      }
      .pc-num {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 2.6rem;
        color: var(--navy);
        line-height: 1;
      }
      .pc-hot .pc-num {
        color: var(--white);
      }
      .pc-per {
        font-size: 0.75rem;
        color: var(--muted);
      }
      .pc-hot .pc-per {
        color: rgba(251, 253, 255, 0.4);
      }
      .pc-min {
        font-size: 0.72rem;
        color: var(--ghost);
      }
      .pc-hot .pc-min {
        color: rgba(251, 253, 255, 0.3);
      }
      .pc-div {
        height: 1px;
        background: var(--line);
      }
      .pc-hot .pc-div {
        background: rgba(255, 255, 255, 0.1);
      }
      .pc-feats {
        display: flex;
        flex-direction: column;
        gap: 7px;
        flex: 1;
      }
      .pcf {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.84rem;
        color: var(--body);
      }
      .pc-hot .pcf {
        color: rgba(251, 253, 255, 0.72);
      }
      .pcf.dim {
        opacity: 0.3;
      }
      .pcf-ck {
        width: 15px;
        height: 15px;
        border-radius: 4px;
        background: var(--b08);
        border: 1px solid var(--b15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .pcf-ck svg {
        width: 8px;
        height: 8px;
        color: var(--blue);
      }
      .pc-hot .pcf-ck {
        background: rgba(2, 116, 190, 0.25);
        border-color: rgba(2, 116, 190, 0.4);
      }
      .pc-hot .pcf-ck svg {
        color: #7dd3fc;
      }
      .pcf.dim .pcf-ck {
        background: var(--n06);
        border-color: var(--line);
      }
      .pcf.dim .pcf-ck svg {
        color: var(--ghost);
      }
      .pc-cta {
        margin-top: auto;
      }
      .pc-cta .btn {
        width: 100%;
        justify-content: center;
      }
      
      
                                    /* ═══════════════════════════════════════════════════
Risk strip
═══════════════════════════════════════════════════ */
      
         .risk-strip {
        padding: 2.5rem 0;
        border-top: 1px solid var(--line);
        background: var(--off);
      }
      .risk-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        flex-wrap: wrap;
      }
      .risk-item {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .ri-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: rgba(5, 150, 105, 0.1);
        border: 1px solid rgba(5, 150, 105, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ri-icon svg {
        width: 16px;
        height: 16px;
        color: var(--green);
      }
      .ri-title {
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 0.86rem;
        color: var(--navy);
      }
      .ri-sub {
        font-size: 0.74rem;
        color: var(--muted);
        margin-top: 1px;
      }
      
      
                                    /* ═══════════════════════════════════════════════════
 CTA
═══════════════════════════════════════════════════ */

 .cta-band {
        padding: 8rem 0;
        position: relative;
        overflow: hidden;
      }
      .cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--navy-d), var(--navy));
      }
      .cta-band::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(2, 116, 190, 0.3), transparent 65%);
      }
      .cta-grid-bg {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(251, 253, 255, 0.05) 1px, transparent 1px);
        background-size: 26px 26px;
        pointer-events: none;
      }
      .cta-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
      }
      .cta-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.06;
        letter-spacing: -0.032em;
        color: var(--white);
        max-width: 640px;
      }
      .cta-sub {
        font-size: 1rem;
        color: rgba(251, 253, 255, 0.58);
        max-width: 420px;
        line-height: 1.75;
      }
      .cta-acts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .cta-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .ct {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: rgba(251, 253, 255, 0.42);
      }
      .ct svg {
        width: 12px;
        height: 12px;
        color: rgba(2, 116, 190, 0.7);
      }

      
                                    /* ═══════════════════════════════════════════════════
Feature Hero
═══════════════════════════════════════════════════ */
      .feature-hero {
        padding: calc(var(--nh) + 4.5rem) 0 4rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .feature-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(2, 116, 190, 0.07), transparent 65%);
        pointer-events: none;
      }
      .feature-hero > .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }
      .feature-hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 14px;
        border-radius: 100px;
        background: var(--b08);
        border: 1px solid var(--b15);
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .kicker-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        animation: blink 2s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .feature-hero-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.4rem, 5.5vw, 4rem);
        line-height: 1.06;
        letter-spacing: -0.032em;
        color: var(--navy);
        max-width: 720px;
      }
      .feature-hero-h .ac {
        color: var(--blue);
      }
      .feature-hero-sub {
        font-size: 1.05rem;
        color: var(--body);
        line-height: 1.75;
        max-width: 520px;
      }
      .feature-hero-acts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .feature-hero-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .feature-ht {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--ghost);
      }
      .feature-ht svg {
        width: 12px;
        height: 12px;
        color: var(--blue);
      }
      
                                    /* ═══════════════════════════════════════════════════
   Pillars
═══════════════════════════════════════════════════ */
      
            .pillars {
        padding: 3.5rem 0;
        border-bottom: 1px solid var(--line);
      }
      .pillars-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
      .pillar-card {
        background: var(--white);
        border: 1.5px solid var(--line);
        border-radius: 16px;
        padding: 0;
        overflow: hidden;
        cursor: pointer;
        transition: all var(--e);
        text-decoration: none;
        display: block;
      }
      .pillar-card:hover {
        border-color: var(--blue);
        box-shadow: var(--sh-lg);
        transform: translateY(-3px);
      }
      .pillar-illus {
        height: 140px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pillar-body {
        padding: 1.5rem 1.75rem 1.75rem;
      }
      .pillar-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.85rem;
      }
      .pillar-icon svg {
        width: 20px;
        height: 20px;
      }
      .pillar-title {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--navy);
        letter-spacing: -0.015em;
        margin-bottom: 0.4rem;
      }
      .pillar-desc {
        font-size: 0.87rem;
        color: var(--body);
        line-height: 1.7;
      }
      .pillar-count {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 0.85rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--blue);
      }
      .pillar-count svg {
        width: 12px;
        height: 12px;
      }
      
                          /* ═══════════════════════════════════════════════════
Feature Stats
═══════════════════════════════════════════════════ */
      
      .feature-stat-strip {
        padding: 3rem 0;
        background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 100%);
      }
      .feature-stat-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4rem;
        flex-direction: row;
      }
      .feature-stat-item {
        text-align: center;
      }
      .feature-stat-val {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 2.2rem;
        color: #fff;
        line-height: 1;
        letter-spacing: -0.02em;
      }
      .feature-stat-lbl {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 500;
      }
      .feature-stat-sep {
        width: 1px;
        height: 48px;
        background: rgba(255, 255, 255, 0.12);
      }
      
                                                      /* ═══════════════════════════════════════════════════
   Features
═══════════════════════════════════════════════════ */
      
        .feat-sec {
        padding: 5.5rem 0;
      }
      .feat-sec.alt {
        background: var(--off);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      /* Feature cards grid — same pattern as pain cards in home */
      .feat-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .feat-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin-top: 1.25rem;
      }

      .feat-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        transition: all var(--e);
        box-shadow: var(--sh);
      }
      .feat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
        border-color: var(--line2);
      }
      .feat-illus {
        height: 164px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .feat-body {
        padding: 1.4rem 1.75rem 1.75rem;
      }
      .feat-badge {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.8rem;
      }
      .feat-badge svg {
        width: 17px;
        height: 17px;
      }
      .feat-title {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 0.98rem;
        color: var(--navy);
        letter-spacing: -0.01em;
        line-height: 1.25;
        margin-bottom: 0.45rem;
      }
      .feat-desc {
        font-size: 0.855rem;
        color: var(--body);
        line-height: 1.72;
      }
      .feat-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 0.9rem;
      }
      .feat-tag {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 100px;
        background: var(--b08);
        color: var(--blue);
        border: 1px solid var(--b15);
      }

      /* Wide feature card (spans 2 cols) */
      .feat-card-wide {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        transition: all var(--e);
        box-shadow: var(--sh);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
      }
      .feat-card-wide:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
        border-color: var(--line2);
      }
      .feat-card-wide .feat-illus {
        height: auto;
        min-height: 180px;
      }
      .feat-card-wide .feat-body {
        padding: 2rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .feat-card-wide .feat-title {
        font-size: 1.05rem;
      }
           .sec-anchor {
        scroll-margin-top: calc(var(--nh) + 1.5rem);
      }
      
            .sec-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .sec-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.8rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }
      .sec-hdr p {
        font-size: 0.97rem;
        color: var(--body);
        max-width: 480px;
        margin: 0.75rem auto 0;
        line-height: 1.75;
      }
      
                                          /* ═══════════════════════════════════════════════════
 Features CTA
═══════════════════════════════════════════════════ */
      
       .feature-cta-band {
        padding: 6rem 0;
        background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 60%, #024d80 100%);
        position: relative;
        overflow: hidden;
        text-align: center;
      }
      .feature-cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 60% 80% at 80% 50%, rgba(2, 116, 190, 0.3), transparent 60%),
          radial-gradient(ellipse 50% 70% at 10% 50%, rgba(13, 141, 232, 0.2), transparent 60%);
        pointer-events: none;
      }
      .feature-cta-band > .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }
      .feature-cta-band h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: #fff;
        max-width: 560px;
      }
      .feature-cta-band p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.68);
        line-height: 1.72;
        max-width: 440px;
      }
      .feature-cta-acts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .feature-cta-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .feature-ct {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.5);
      }
      .feature-ct svg {
        width: 12px;
        height: 12px;
        stroke: var(--green);
      }
      
              
                                                /* ═══════════════════════════════════════════════════
   Pricing HERO
═══════════════════════════════════════════════════ */
      
        .pricing-hero {
        padding: calc(var(--nh) + 4.5rem) 0 4.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .pricing-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(2, 116, 190, 0.07), transparent 65%);
        pointer-events: none;
      }
      .pricing-hero > .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }
      .pricing-hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 14px;
        border-radius: 100px;
        background: var(--b08);
        border: 1px solid var(--b15);
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .pricing-kicker-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        animation: blink 2s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .pricing-hero-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.4rem, 5.5vw, 4rem);
        line-height: 1.06;
        letter-spacing: -0.032em;
        color: var(--navy);
        max-width: 680px;
      }
      .pricing-hero-h .ac {
        color: var(--blue);
      }
      .pricing-hero-sub {
        font-size: 1.05rem;
        color: var(--body);
        line-height: 1.75;
        max-width: 500px;
      }
      .pricing-hero-sub strong {
        color: var(--navy);
        font-weight: 600;
      }
      .pricing-hero-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .pricing-ht {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--ghost);
      }
      .pricing-ht svg {
        width: 12px;
        height: 12px;
        color: var(--blue);
      }

      /* ══ BILLING TOGGLE ══ */
      .billing-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
      }
      .billing-tog {
        display: inline-flex;
        align-items: center;
        background: var(--off2);
        border: 1px solid var(--line2);
        border-radius: 100px;
        padding: 4px;
        gap: 2px;
      }
      .tog-opt {
        font-family: "DM Sans", sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--muted);
        padding: 7px 20px;
        border-radius: 100px;
        cursor: pointer;
        transition: all var(--e);
        user-select: none;
      }
      .tog-opt.on {
        background: var(--white);
        color: var(--navy);
        box-shadow: 0 1px 6px rgba(2, 63, 104, 0.1);
      }
      .tog-save {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--green);
        background: rgba(5, 150, 105, 0.08);
        border: 1px solid rgba(5, 150, 105, 0.18);
        padding: 2px 9px;
        border-radius: 100px;
      }

                                                     /* ═══════════════════════════════════════════════════
   Pricing CARDS
═══════════════════════════════════════════════════ */
      
      .price-section {
        padding: 2.5rem 0 5rem;
      }
      .price-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--sh);
        margin-top: 2.5rem;
      }
      /* Illustration area on each card */
      .pc-illus {
        height: 148px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pc {
        background: var(--white);
        display: flex;
        flex-direction: column;
        position: relative;
        transition: background var(--e);
      }
      .pc:hover:not(.pc-hot) {
        background: rgba(2, 116, 190, 0.018);
      }
      .pc-body {
        padding: 1.75rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        flex: 1;
      }
      .pc-hot {
        background: var(--navy);
        position: relative;
      }
      .pc-hot::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--blue), #0d8de8);
        z-index: 2;
      }
      .pc-badge {
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--blue);
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 0.6rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 0 0 8px 8px;
        white-space: nowrap;
        z-index: 3;
      }
      .pc-name {
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .pc-hot .pc-name {
        color: rgba(251, 253, 255, 0.45);
      }
      .pc-price-row {
        display: flex;
        align-items: baseline;
        gap: 2px;
      }
      .pc-sym {
        font-family: "Outfit", sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--muted);
      }
      .pc-hot .pc-sym {
        color: rgba(251, 253, 255, 0.45);
      }
      .pc-num {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 2.6rem;
        color: var(--navy);
        line-height: 1;
        transition: all 0.3s ease;
      }
      .pc-hot .pc-num {
        color: var(--white);
      }
      .pc-per {
        font-size: 0.75rem;
        color: var(--muted);
      }
      .pc-hot .pc-per {
        color: rgba(251, 253, 255, 0.4);
      }
      .pc-min {
        font-size: 0.72rem;
        color: var(--ghost);
      }
      .pc-hot .pc-min {
        color: rgba(251, 253, 255, 0.3);
      }
      .pc-div {
        height: 1px;
        background: var(--line);
      }
      .pc-hot .pc-div {
        background: rgba(255, 255, 255, 0.1);
      }
      .pc-feats {
        display: flex;
        flex-direction: column;
        gap: 7px;
        flex: 1;
      }
      .pcf {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.84rem;
        color: var(--body);
      }
      .pc-hot .pcf {
        color: rgba(251, 253, 255, 0.72);
      }
      .pcf.dim {
        opacity: 0.3;
      }
      .pcf-ck {
        width: 15px;
        height: 15px;
        border-radius: 4px;
        background: var(--b08);
        border: 1px solid var(--b15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .pcf-ck svg {
        width: 8px;
        height: 8px;
        color: var(--blue);
      }
      .pc-hot .pcf-ck {
        background: rgba(2, 116, 190, 0.25);
        border-color: rgba(2, 116, 190, 0.4);
      }
      .pc-hot .pcf-ck svg {
        color: #7dd3fc;
      }
      .pcf.dim .pcf-ck {
        background: var(--n06);
        border-color: var(--line);
      }
      .pcf.dim .pcf-ck svg {
        color: var(--ghost);
      }
      .pc-cta {
        margin-top: auto;
      }
      .pc-cta .btn {
        width: 100%;
        justify-content: center;
      }
      .price-note {
        text-align: center;
        font-size: 0.78rem;
        color: var(--ghost);
        margin-top: 1.25rem;
      }
      .price-note a {
        color: var(--blue);
      }
      
      
                                                     /* ═══════════════════════════════════════════════════
   Pricing ADD ONS
═══════════════════════════════════════════════════ */
      
            .addon-sec {
        padding: 6rem 0;
      }
      .addon-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--sh);
        display: grid;
        grid-template-columns: 1fr 400px;
        transition: border-color var(--e);
      }
      .addon-card:hover {
        border-color: var(--line2);
        box-shadow: var(--sh-lg);
      }
      .addon-info {
        padding: 3.5rem 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .addon-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
        background: var(--b08);
        border: 1px solid var(--b15);
        padding: 4px 12px;
        border-radius: 100px;
        margin-bottom: 1.25rem;
        width: fit-content;
      }
      .addon-tag-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
      }
      .addon-info h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        line-height: 1.1;
        letter-spacing: -0.022em;
        color: var(--navy);
        margin-bottom: 0.75rem;
      }
      .addon-info p {
        font-size: 0.92rem;
        color: var(--body);
        line-height: 1.75;
        margin-bottom: 1.75rem;
        max-width: 380px;
      }
      .addon-price {
        display: flex;
        align-items: baseline;
        gap: 3px;
        margin-bottom: 0.4rem;
      }
      .addon-price .pc-sym {
        font-size: 1.1rem;
      }
      .addon-price .pc-num {
        font-size: 2.8rem;
      }
      .addon-price-note {
        font-size: 0.75rem;
        color: var(--ghost);
        margin-bottom: 2rem;
      }
      .addon-feats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 1.5rem;
        margin-bottom: 2rem;
      }
      .addon-feat {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.83rem;
        color: var(--body);
      }
      .addon-feat svg {
        width: 14px;
        height: 14px;
        color: var(--green);
        flex-shrink: 0;
      }
      .addon-acts {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .addon-vis {
        background: linear-gradient(145deg, var(--navy-d) 0%, var(--navy) 60%, #024d80 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .addon-vis::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 60% at 30% 60%, rgba(2, 116, 190, 0.4), transparent 60%);
      }
      
                                                      /* ═══════════════════════════════════════════════════
  Pricing calculator
═══════════════════════════════════════════════════ */
      
        .calc-sec {
        padding: 6rem 0;
        background: var(--off);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .calc-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .calc-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        line-height: 1.1;
        letter-spacing: -0.024em;
        color: var(--navy);
        margin-top: 0.85rem;
      }
      .calc-hdr p {
        font-size: 0.95rem;
        color: var(--body);
        margin-top: 0.6rem;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75;
      }
      .calc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
      }
      .calc-panel {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 2rem 2rem;
        box-shadow: var(--sh);
      }
      .calc-label {
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 0.65rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .calc-val {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: var(--blue);
        background: var(--b08);
        border: 1px solid var(--b15);
        padding: 2px 10px;
        border-radius: 6px;
      }
      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 5px;
        border-radius: 3px;
        background: var(--off2);
        outline: none;
        margin: 0.85rem 0 0.4rem;
        cursor: pointer;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 2px 8px rgba(2, 116, 190, 0.4);
        cursor: pointer;
        transition: transform 0.15s;
      }
      input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }
      .range-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.72rem;
        color: var(--ghost);
      }
      .calc-sep {
        height: 1px;
        background: var(--line);
        margin: 1.25rem 0;
      }
      .calc-tog-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--off);
        cursor: pointer;
        transition: border-color var(--e);
      }
      .calc-tog-row:hover {
        border-color: var(--blue);
      }
      .calc-tog-label {
        font-size: 0.87rem;
        font-weight: 600;
        color: var(--navy);
      }
      .calc-tog-note {
        font-size: 0.73rem;
        color: var(--muted);
        margin-top: 1px;
      }
      .sw {
        width: 40px;
        height: 22px;
        background: var(--line2);
        border-radius: 100px;
        position: relative;
        transition: background var(--e);
        flex-shrink: 0;
      }
      .sw.on {
        background: var(--blue);
      }
      .sw::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        top: 3px;
        left: 3px;
        transition: transform var(--e);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      }
      .sw.on::after {
        transform: translateX(18px);
      }
      /* Results panel */
      .calc-results {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .calc-row {
        background: var(--white);
        border: 1.5px solid var(--line);
        border-radius: 10px;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: all var(--e);
      }
      .calc-row:hover {
        border-color: var(--line2);
      }
      .calc-row.rec {
        border-color: var(--blue);
        background: rgba(2, 116, 190, 0.03);
      }
      .cr-name {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .cr-rec {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        background: var(--blue);
        color: #fff;
        padding: 2px 7px;
        border-radius: 4px;
      }
      .cr-sub {
        font-size: 0.72rem;
        color: var(--muted);
        margin-top: 2px;
      }
      .cr-total .val {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: 1.4rem;
        color: var(--navy);
      }
      .cr-total .lbl {
        font-size: 0.7rem;
        color: var(--ghost);
        text-align: right;
        margin-top: 1px;
      }
      .calc-note {
        font-size: 0.75rem;
        color: var(--ghost);
        text-align: center;
        margin-top: 0.5rem;
      }
      
              
                                                /* ═══════════════════════════════════════════════════
   Pricing Table
═══════════════════════════════════════════════════ */
      
          .table-sec {
        padding: 6rem 0;
      }
      .table-hdr {
        text-align: center;
        margin-bottom: 3rem;
      }
      .table-hdr h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        line-height: 1.1;
        letter-spacing: -0.024em;
        color: var(--navy);
        margin-top: 0.85rem;
      }
      .table-hdr p {
        font-size: 0.95rem;
        color: var(--body);
        margin-top: 0.6rem;
      }
      /* Tab bar */
      .tab-bar {
        display: flex;
        gap: 4px;
        background: var(--off2);
        border: 1px solid var(--line2);
        border-radius: 9px;
        padding: 4px;
        margin-bottom: 2rem;
      }
      .tb {
        flex: 1;
        text-align: center;
        font-family: "Outfit", sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 9px 16px;
        border-radius: 7px;
        cursor: pointer;
        color: var(--muted);
        transition: all var(--e);
      }
      .tb.on {
        background: var(--white);
        color: var(--navy);
        box-shadow: 0 1px 6px rgba(2, 63, 104, 0.1);
      }
      .tbl-panel {
        display: none;
      }
      .tbl-panel.on {
        display: block;
      }
      .tbl-wrap {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--sh);
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
      }
      thead tr {
        background: var(--off);
        border-bottom: 2px solid var(--line);
      }
      th {
        padding: 16px 18px;
        text-align: center;
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 0.78rem;
        color: var(--navy);
        letter-spacing: 0.02em;
      }
      th:first-child {
        text-align: left;
      }
      th.hl {
        background: rgba(2, 116, 190, 0.05);
        color: var(--blue);
      }
      td {
        padding: 13px 18px;
        text-align: center;
        border-bottom: 1px solid var(--line);
        color: var(--body);
      }
      td:first-child {
        text-align: left;
        font-weight: 500;
        color: var(--navy);
        font-size: 0.87rem;
      }
      td.hl {
        background: rgba(2, 116, 190, 0.03);
      }
      tr:last-child td {
        border-bottom: none;
      }
      tr:hover td {
        background: var(--off);
      }
      tr:hover td.hl {
        background: rgba(2, 116, 190, 0.06);
      }
      tbody tr:nth-child(even) {
        background: rgba(2, 63, 104, 0.012);
      }
      tbody tr:nth-child(even) td.hl {
        background: rgba(2, 116, 190, 0.04);
      }
      tr.cat-row td {
        background: var(--off2);
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 9px 18px;
        border-bottom: 1px solid var(--line);
      }
      .tck {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(5, 150, 105, 0.1);
        border: 1px solid rgba(5, 150, 105, 0.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tck svg {
        width: 11px;
        height: 11px;
        stroke: var(--green);
      }
      .tdash {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--off2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tdash svg {
        width: 11px;
        height: 11px;
        stroke: var(--ghost);
      }
      
                                                      /* ═══════════════════════════════════════════════════
   Pricing FAQ
═══════════════════════════════════════════════════ */
      
          .faq-sec {
        padding: 6rem 0;
        background: var(--off);
        border-top: 1px solid var(--line);
      }
      .faq-grid {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 5rem;
        align-items: flex-start;
      }
      .faq-left h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.8rem, 3.5vw, 2.4rem);
        line-height: 1.1;
        letter-spacing: -0.024em;
        color: var(--navy);
        margin-top: 0.85rem;
        margin-bottom: 0.75rem;
      }
      .faq-left p {
        font-size: 0.92rem;
        color: var(--body);
        line-height: 1.75;
        margin-bottom: 1.5rem;
      }
      .faq-contact {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--blue);
        padding: 9px 18px;
        border: 1.5px solid var(--b15);
        border-radius: 8px;
        background: var(--b08);
        transition: all var(--e);
      }
      .faq-contact:hover {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
      }
      .faq-contact svg {
        width: 14px;
        height: 14px;
      }
      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .faq-item {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        transition: border-color var(--e);
      }
      .faq-item.open {
        border-color: var(--line2);
      }
      .faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.4rem;
        cursor: pointer;
        gap: 1rem;
      }
      .faq-q-text {
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--navy);
      }
      .faq-ico {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--off2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--e);
      }
      .faq-item.open .faq-ico {
        background: var(--blue);
        transform: rotate(45deg);
      }
      .faq-item.open .faq-ico svg {
        stroke: #fff;
      }
      .faq-ico svg {
        width: 12px;
        height: 12px;
        stroke: var(--muted);
        transition: stroke var(--e);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
      }
      .faq-item.open .faq-a {
        max-height: 200px;
      }
      .faq-a p {
        padding: 0 1.4rem 1.25rem;
        font-size: 0.87rem;
        color: var(--body);
        line-height: 1.78;
      }
      
                                    /* ═══════════════════════════════════════════════════
   Contact US PAGE
═══════════════════════════════════════════════════ */
      
         .contact-hero {
        padding: calc(var(--nh) + 4rem) 0 4rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .contact-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(2, 116, 190, 0.07), transparent 65%);
        pointer-events: none;
      }
      .contact-hero > .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
      }
      .contact-hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 14px;
        border-radius: 100px;
        background: var(--b08);
        border: 1px solid var(--b15);
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .contact-kicker-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        animation: blink 2s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .contact-hero-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.2rem, 5vw, 3.6rem);
        line-height: 1.06;
        letter-spacing: -0.032em;
        color: var(--navy);
        max-width: 600px;
      }
      .contact-hero-h .ac {
        color: var(--blue);
      }
      .contact-hero-sub {
        font-size: 1.05rem;
        color: var(--body);
        line-height: 1.75;
        max-width: 480px;
      }
      .contact-hero-sub strong {
        color: var(--navy);
        font-weight: 600;
      }

      /* Response time chips */
      .contact-hero-chips {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .contact-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 100px;
        background: var(--off);
        border: 1px solid var(--line2);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--body);
      }
      .contact-chip svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
      }
      .contact-chip-g {
        background: rgba(5, 150, 105, 0.07);
        border-color: rgba(5, 150, 105, 0.2);
        color: var(--green);
      }
      .contact-chip-g svg {
        color: var(--green);
      }

                              /* ═══════════════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════════════ */

      .contact-sec {
        padding: 3rem 0 6rem;
      }
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 3rem;
        align-items: flex-start;
      }
      
        .form-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: var(--sh);
      }
      .form-card h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 1.5rem;
        letter-spacing: -0.018em;
        color: var(--navy);
        margin-bottom: 0.4rem;
      }
      .form-card .sub {
        font-size: 0.88rem;
        color: var(--muted);
        margin-bottom: 2rem;
        line-height: 1.6;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .form-field {
        margin-bottom: 1.1rem;
      }
      .form-field label {
        display: block;
        font-family: "Outfit", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 0.5rem;
      }
      .form-field input,
      .form-field select,
      .form-field textarea {
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-size: 0.9rem;
        color: var(--text);
        background: var(--off);
        border: 1.5px solid var(--line2);
        border-radius: 9px;
        padding: 11px 14px;
        outline: none;
        transition:
          border-color var(--e),
          box-shadow var(--e),
          background var(--e);
        -webkit-appearance: none;
        appearance: none;
      }
      .form-field input:focus,
      .form-field select:focus,
      .form-field textarea:focus {
        border-color: var(--blue);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(2, 116, 190, 0.1);
      }
      .form-field input::placeholder,
      .form-field textarea::placeholder {
        color: var(--ghost);
      }
      .form-field textarea {
        resize: vertical;
        min-height: 140px;
        line-height: 1.65;
      }
      .form-field select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b8699' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 38px;
        cursor: pointer;
      }
      .form-field select option {
        background: var(--white);
      }

       /* Enquiry type buttons */
      .type-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .type-btn {
        font-family: "DM Sans", sans-serif;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--body);
        padding: 7px 15px;
        border-radius: 100px;
        border: 1.5px solid var(--line2);
        background: var(--off);
        cursor: pointer;
        transition: all var(--e);
      }
      .type-btn:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--b08);
      }
      .type-btn.on {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--b08);
        font-weight: 600;
      }

      /* Submit state */
      .form-submit-wrap {
        margin-top: 1.5rem;
      }
      .form-note {
        font-size: 0.75rem;
        color: var(--ghost);
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .form-note svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        color: var(--green);
      }
      /* Success message */
      .form-success {
        display: none;
        text-align: center;
        padding: 2rem;
      }
      .form-success .success-ico {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(5, 150, 105, 0.1);
        border: 1.5px solid rgba(5, 150, 105, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
      }
      .form-success .success-ico svg {
        width: 22px;
        height: 22px;
        stroke: var(--green);
      }
      .form-success h3 {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 1.15rem;
        color: var(--navy);
        margin-bottom: 0.5rem;
      }
      .form-success p {
        font-size: 0.87rem;
        color: var(--body);
        line-height: 1.7;
      }

      /* ══ SIDEBAR ══ */
      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }

      /* Contact method cards */
      .contact-card {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.5rem 1.75rem;
        box-shadow: var(--sh);
        transition: all var(--e);
        display: block;
      }
      .contact-card:hover {
        border-color: var(--line2);
        box-shadow: var(--sh-lg);
        transform: translateY(-2px);
      }
      .cc-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
      }
      .cc-icon svg {
        width: 18px;
        height: 18px;
      }
      .cc-label {
        font-family: "Outfit", sans-serif;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 0.3rem;
      }
      .cc-value {
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: var(--navy);
        margin-bottom: 0.3rem;
        letter-spacing: -0.01em;
      }
      .cc-note {
        font-size: 0.8rem;
        color: var(--body);
        line-height: 1.6;
      }
      .cc-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 0.65rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--blue);
        transition: opacity var(--e);
      }
      .cc-link:hover {
        opacity: 0.72;
      }
      .cc-link svg {
        width: 12px;
        height: 12px;
      }

      /* Response time card */
      .resp-card {
        background: linear-gradient(135deg, var(--navy-d), var(--navy));
        border-radius: 14px;
        padding: 1.75rem;
        position: relative;
        overflow: hidden;
      }
      .resp-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 0% 100%, rgba(2, 116, 190, 0.35), transparent 60%);
      }
      .resp-card > * {
        position: relative;
        z-index: 1;
      }
      .resp-card h3 {
        font-family: "Outfit", sans-serif;
        font-weight: 800;
        font-size: 0.95rem;
        color: #fff;
        margin-bottom: 0.5rem;
      }
      .resp-card p {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.58);
        line-height: 1.7;
        margin-bottom: 1.25rem;
      }
      .resp-items {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }
      .resp-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
      }
      .resp-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .resp-dot.g {
        background: #22c55e;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
      }
      .resp-dot.b {
        background: var(--blue-l);
        box-shadow: 0 0 6px rgba(13, 141, 232, 0.4);
      }
      .resp-dot.y {
        background: #f59e0b;
      }

      /* Location card */
      .loc-card {
        background: var(--off);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
      }
      .loc-map {
        height: 130px;
        background: linear-gradient(135deg, #e8f4fb, #d0e8f5);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .loc-body {
        padding: 1.25rem 1.5rem;
      }
      .loc-body .cc-label {
        margin-bottom: 0.4rem;
      }
      .loc-body .cc-value {
        font-size: 0.95rem;
      }
      .loc-body .cc-note {
        font-size: 0.78rem;
      }
      
                                    /* ═══════════════════════════════════════════════════
  CONATCT FAQ
═══════════════════════════════════════════════════ */
   
    .contact-faq-sec {
        padding: 6rem 0;
        background: var(--off);
        border-top: 1px solid var(--line);
      }
      .contact-faq-top {
        text-align: center;
        margin-bottom: 3.5rem;
      }
      .contact-faq-top h2 {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(1.9rem, 4vw, 2.8rem);
        line-height: 1.1;
        letter-spacing: -0.026em;
        color: var(--navy);
        margin-top: 0.85rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
      }
      .contact-faq-top p {
        font-size: 0.95rem;
        color: var(--body);
        margin-top: 0.65rem;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75;
      }
      .contact-faq-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: start;
      }
      .contact-faq-item {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        transition: border-color var(--e);
      }
      .contact-faq-item.open {
        border-color: var(--line2);
      }
      .contact-faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.4rem;
        cursor: pointer;
        gap: 1rem;
      }
      .contact-faq-q-text {
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--navy);
        line-height: 1.35;
      }
      .contact-faq-ico {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--off2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--e);
      }
      .contact-faq-item.open .contact-faq-ico {
        background: var(--blue);
        transform: rotate(45deg);
      }
      .contact-faq-item.open .contact-faq-ico svg {
        stroke: #fff;
      }
      .contact-faq-ico svg {
        width: 12px;
        height: 12px;
        stroke: var(--muted);
        transition: stroke var(--e);
      }
      .contact-faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
      }
      .contact-faq-item.open .contact-faq-a {
        max-height: 250px;
      }
      .contact-faq-a p {
        padding: 0 1.4rem 1.25rem;
        font-size: 0.85rem;
        color: var(--body);
        line-height: 1.78;
      }
      .contact-faq-cta {
        text-align: center;
        margin-top: 2.5rem;
      }
      .contact-faq-cta p {
        font-size: 0.88rem;
        color: var(--muted);
        margin-bottom: 0.85rem;
      }
   
                                 /* ═══════════════════════════════════════════════════
        CONTACT CTA
═══════════════════════════════════════════════════ */
   
   .contact-cta-band {
        padding: 8rem 0;
        position: relative;
        overflow: hidden;
      }
      .contact-cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--navy-d), var(--navy));
      }
      .contact-cta-band::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(2, 116, 190, 0.3), transparent 65%);
      }
      .contact-cta-grid-bg {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(251, 253, 255, 0.05) 1px, transparent 1px);
        background-size: 26px 26px;
        pointer-events: none;
      }
      .contact-cta-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
      }
      .contact-cta-h {
        font-family: "Outfit", sans-serif;
        font-weight: 900;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.06;
        letter-spacing: -0.032em;
        color: var(--white);
        max-width: 640px;
      }
      .contact-cta-sub {
        font-size: 1rem;
        color: rgba(251, 253, 255, 0.58);
        max-width: 420px;
        line-height: 1.75;
      }
      .contact-cta-acts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .contact-cta-trust {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .contact-ct {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: rgba(251, 253, 255, 0.42);
      }
      .contact-ct svg {
        width: 12px;
        height: 12px;
        color: rgba(2, 116, 190, 0.7);
      }
   
      
      @media(max-width: 1024px) {
          
                              /* ═══════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════ */
          
            .tab-panel.on {
          grid-template-columns: 1fr;
          gap: 2.5rem;
        }
        .pain-cards,
        .tc-grid {
          grid-template-columns: 1fr;
        }
        .how-steps {
          grid-template-columns: 1fr;
        }
        .price-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .stat-item:nth-child(2) {
          border-right: none;
        }
        .compare-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }
        .vs-divider {
          padding: 0;
        }
        .foot-g {
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
        }
        .hero-float {
          display: none;
        }
          
                                        /* ═══════════════════════════════════════════════════
   Pricing PAGE
═══════════════════════════════════════════════════ */
           .price-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .addon-card {
          grid-template-columns: 1fr;
        }
        .addon-vis {
          min-height: 240px;
        }
        .calc-grid {
          grid-template-columns: 1fr;
        }
        .faq-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
          
      }
      
    @media( max-width:900px){
        
                                                /* ═══════════════════════════════════════════════════
   Features PAGE
═══════════════════════════════════════════════════ */
        
              .pillars-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        .pillar-illus {
          height: 120px;
        }
             .feature-stat-row {
          gap: 2.5rem;
        }
        .feature-stat-sep {
          display: none;
        }
        
          .feat-grid-3 {
          grid-template-columns: 1fr 1fr;
        }
        .feat-grid-2 {
          grid-template-columns: 1fr;
        }
        .feat-card-wide {
          grid-template-columns: 1fr;
        }
        .feat-card-wide .feat-illus {
          min-height: 160px;
        }
        
                                      /* ═══════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════ */
        
          .contact-grid {
          grid-template-columns: 1fr;
        }
        
                .sidebar {
          flex-direction: row;
          flex-wrap: wrap;
        }
        
           .contact-card,
        .resp-card,
        .loc-card {
          flex: 1;
          min-width: 240px;
        }
        
            .contact-faq-cols {
          grid-template-columns: 1fr;
        }
        
    }
      
      @media (max-width:768px){
          
                                        /* ═══════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════ */
          
        .nav-links,
        .nav-r {
          display: none;
        }
        .hbg {
          display: flex;
        }
          
          .hero-img-wrap {
              display: none;
          }
          
          .hero-trust {
              margin-bottom: 20px;
          }
          
             .pain-cards,
        .tc-grid {
          grid-template-columns: 1fr;
        }
        .price-grid {
          grid-template-columns: 1fr;
        }
        .foot-g {
          grid-template-columns: 1fr;
        }
        .foot-bot {
          flex-direction: column;
          text-align: center;
        }
        .risk-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 1.25rem;
        }
        .stats-grid {
          grid-template-columns: 1fr 1fr;
        }
          

          
                                                  /* ═══════════════════════════════════════════════════
   Pricing PAGE
═══════════════════════════════════════════════════ */

  .price-grid {
          grid-template-columns: 1fr;
        }
        .addon-feats {
          grid-template-columns: 1fr;
        }
        .tab-bar {
          flex-wrap: wrap;
        }
          
           th,
        td {
          padding: 11px 10px;
          font-size: 0.78rem;
        }
         
          
      }
      
      
            @media (max-width:640px){
          
                                                  /* ═══════════════════════════════════════════════════
   Features PAGE
═══════════════════════════════════════════════════ */
            .feature-hero-acts {
          flex-direction: column;
          align-items: center;
        }
          
                  .pillars-grid {
          grid-template-columns: 1fr;
        }
          
                 .feat-grid-3,
        .feat-grid-2 {
          grid-template-columns: 1fr;
        }
        
        .feature-stat-row{
            flex-direction: column;
        }
        
                                              /* ═══════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════ */
           .form-row {
          grid-template-columns: 1fr;
        }
        .sidebar {
          flex-direction: column;
        }
        
             .contact-hero-chips {
          flex-direction: column;
          align-items: center;
        }
          
      }
      
        @media (max-width: 480px) {
        .addon-info {
          padding: 2.5rem 1.75rem;
        }
      }