* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 /* HERO SECTION */
 .hero-sec {
   background: linear-gradient(135deg, var(--bg-main) 50%, #d8e2ff 100%);
   position: relative;
   padding: var(--space-64) 0;
 }

 .hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 500px;
   overflow: hidden;
   gap: var(--space-32);

 }

 .hero::before {
   content: '';
   position: absolute;
   width: 500px;
   height: 500px;
   background:#bed7fb;
   border-radius: 50%;
   right: -100px;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.3;
 }

 .hero-content {
   max-width: 600px;
   z-index: 2;
 }

 .hero-content h1 {
   font-family: var(--heading-bold-font-family);
   font-size: clamp(var(--h2-size-40), 4vw, 2.9rem);
   font-weight: var(--font-700);
   color: var(--text-primary);
   margin-bottom: var(--space-20);
   line-height: var(--leading-tight);
 }

 .hero-content p {
   font-size: var(--p-size-18);
   color: var(--text-primary);
   margin-bottom: var(--space-32);
   line-height: var(--leading-relaxed);
 }

 .btn-group {
   display: flex;
   gap: var(--space-16);
 }


 .hero-content .hero-badge {
   margin-top: var(--space-24);
   font-size: var(--p-size-12);
   color: var(--text-grey);
 }

 .right-card {
   max-width: 548px;
   background: linear-gradient(213.03deg, rgba(0, 101, 242, 0.95) -113.8%, rgba(255, 255, 255, 0.95) 26.24%);
   border-radius: 30px;
   padding: 28px;
   position: relative;
   z-index: 2;
   border: 2px solid #fff;
   box-shadow: 0 3px 33px 4px #0C0C0D14;
   overflow: hidden;
 }



 .card-title {
   font-size: 28px;
   font-weight: 700;
   line-height: 120%;
   letter-spacing: 2%;
   color: var(--text-primary);
   margin-bottom: var(--space-16);
   position: relative;
   z-index: 2;
 }

 .step-card {
   background: var(--bg-light);
   border: 1px solid #E2E2E2;
   border-radius: 16px;
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
   position: relative;
   z-index: 2;
   box-shadow: 0px 5px 14px 0px #080F340A;

 }

 .step-left {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }

 .step-number {
   width: 46px;
   height: 48px;
   background: var(--text-primary);
   color: #fff;
   border-radius: 8px;
   padding: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 600;
   line-height: 120%;
   flex-shrink: 0;
 }

 .step-content h3 {
   font-size: 16px;
   font-weight: 600;
   line-height: 110.00000000000001%;
   margin-bottom: 8px;
   color: var(--text-primary);
 }

 .step-content p {
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 120%;
   max-width: 318px;
 }

 .open-link {
   display: flex;
   gap: 2px;
   color: var(--primary-color);
   font-size: 14px;
   font-weight: 600;
   line-height: 110.00000000000001%;
   text-decoration: none;
   white-space: nowrap;
 }


 @media (max-width: 1024px) {
   .hero {
     flex-direction: column;
     padding: var(--space-48) var(--space-24);
   }

   .hero-features {
     position: static;
     width: 100%;
     margin-top: var(--space-32);
     transform: none;
   }

   .hero-content h1 {
     font-size: var(--h2-size-40);
   }


 }

 @media (max-width: 768px) {


   .hero-content h1 {
     font-size: var(--h2-size-32);
   }

   .section {
     padding: var(--space-48) var(--space-16);
   }

   .section h2 {
     font-size: var(--h2-size-32);
   }

 }



 /* ── OUTER SECTION ── */
 .why-section {
   padding: var(--space-85) 0;
   background: var(--bg-light);
 }

 /* ── SECTION HEADER ── */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-64);
    gap: var(--space-48);
}

.section-header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.section-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--para-font-family);
    font-size: var(--p-size-14);
    font-weight: var(--font-600);
    color: var(--primary-color);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-eyebrow .dash {
    width: 18px;
    height: 2px;
    background: var(--primary-color);
    border-radius: var(--radius-6);
    display: inline-block;
}

.section-title {
    font-family: var(--heading-bold-font-family);
    font-size: clamp(var(--h2-size-28), 5vw, var(--h2-size-40));
    font-weight: var(--font-700);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

.section-header span {
    color: var(--primary-color);
}

.section-desc {
    font-family: var(--para-font-family);
    font-size: var(--p-size-18);
    font-weight: var(--font-400);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    margin-top: 2px;
}


@media (max-width: 900px) {
    .section-header {
        flex-direction: column;
        gap: var(--space-16);
    }
}
 /* ── MAIN CARD: dark left + white right ── */
 .why-card {
   display: grid;
   grid-template-columns: 430px 1fr;
   /* border-radius: var(--radius-24); */
   overflow: hidden;
   /* box-shadow: var(--shadow-panel); */
   /* border: 1.5px solid var(--color-border); */
 }

 /* LEFT DARK PANEL */
 .why-left {
   background: var(--bg-dark);
   padding: var(--space-32);
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }

 .why-left__title {
   font-family: var(--heading-bold-font-family);
   font-size: var(--p-size-16);
   font-weight: var(--font-600);
   color: #ffffff;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: var(--space-12);
 }

 /* Tab buttons on the left */
 .tab-btn {
   display: flex;
   align-items: center;
   gap: var(--space-12);
   padding: 14px var(--space-16);
   border-radius: var(--radius-12);
   border: none;
   background: transparent;
   cursor: pointer;
   text-align: left;
   transition: background 0.2s;
   width: 100%;
 }

 .tab-btn:hover {
   background: rgba(255, 255, 255, 0.06);
 }

 .tab-btn.active {
   background: rgba(0, 101, 242, 0.2);
 }

 .tab-btn__icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-8);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.08);
   transition: background 0.2s;
 }

 .tab-btn.active .tab-btn__icon {
   background: var(--primary-color);
 }

 .tab-btn__icon svg {
   width: 28px;
   height: 28px;
   stroke: #9ca3af;
   fill: none;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: stroke 0.2s;
 }

 .tab-btn.active .tab-btn__icon svg {
   stroke: #fff;
 }

 .tab-btn__text {
   font-size: var(--p-size-16);
   font-weight: var(--font-500);
   color: #d0d5dd;
   line-height: var(--leading-normal);
   transition: color 0.2s;
   letter-spacing: 0.388px;
 }

 .tab-btn.active .tab-btn__text {
   color: #fff;
   font-weight: var(--font-600);
 }

 /* Progress bar indicator */
 .tab-btn__bar {
   margin-left: auto;
   width: 3px;
   height: 100%;
   border-radius: 2px;
   background: transparent;
   transition: background 0.2s;
   flex-shrink: 0;
   align-self: stretch;
 }

 .tab-btn.active .tab-btn__bar {
   background: var(--primary-color);
 }

 /* Divider inside left panel */
 .why-left__divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
   margin: var(--space-8) 0;
 }

 /* Bottom stat inside dark panel */
 .why-left__stat {
   margin-top: auto;
   padding-top: var(--space-24);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .why-left__stat-number {
   font-family: var(--heading-bold-font-family);
   font-size: 40px;
   font-weight: var(--font-800);
   color: var(--primary-color);
   line-height: 1;
   letter-spacing: -0.03em;
 }

 .why-left__stat-label {
   font-size: var(--p-size-12);
   color: #6b7280;
   margin-top: 4px;
   line-height: var(--leading-normal);
 }

 /* RIGHT CONTENT PANEL */
 .why-right {
   /* background: var(--bg-main); */
   padding: var(--space-48) 0 var(--space-48) var(--space-85);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 /* Tab content panels */
 .tab-panel {
   display: none;
 }

 .tab-panel.active {
   display: block;
 }

 .tab-panel__tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #ecf3ec;
   border: 1px solid #b6d9bb;
   border-radius: var(--radius-9999);
   padding: 4px 12px;
   font-size: var(--p-size-12);
   font-weight: var(--font-600);
   color: var(--success-color);
   margin-bottom: var(--space-20);
 }

 .tab-panel__heading {
   font-family: var(--heading-bold-font-family);
   font-size: var(--h3-size-24);
   font-weight: var(--font-800);
   color: var(--text-nav);
   line-height: var(--leading-tight);
   letter-spacing: -0.01em;
   margin-bottom: var(--space-12);
 }

 .tab-panel__desc {
   font-size: var(--p-size-16);
   color: var(--text-primary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-32);
   /* max-width: 480px; */
 }

 /* Feature grid inside right panel */
 .feature-grid {
   /* display: grid; */
   grid-template-columns: 1fr 1fr;
   gap: var(--space-12);
   margin-bottom: var(--space-32);
 }

 .feature-chip {
   display: flex;
   align-items: center;
   gap: var(--space-10, 10px);
   padding: var(--space-12) var(--space-16);
   /* background: var(--bg-light); */
   /* border: 1px solid var(--color-border); */
   /* border-radius: var(--radius-12); */
   font-size: var(--p-size-16);
   font-weight: var(--font-500);
   color: var(--text-nav);
   line-height: var(--leading-normal);
 }

 .feature-chip__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--success-color);
   flex-shrink: 0;
 }

 /* CTA row */
 .tab-panel__cta {
   display: flex;
   align-items: center;
   gap: var(--space-16);
   flex-wrap: wrap;
 }

 .btn-primary {
   align-items: center;
   gap: var(--space-8);
   /* padding: 12px var(--space-24); */
   background: var(--primary-color);
   color: #fff;
   font-family: var(--para-font-family);
   font-size: var(--p-size-14);
   font-weight: var(--font-600);
   border-radius: var(--radius-8);
   text-decoration: none;
   border: none;
   cursor: pointer;
   box-shadow: var(--shadow-button);
   transition: background 0.2s, transform 0.15s;
 }

 .btn-primary:hover {
   background: var(--primary-dark);
   transform: translateY(-1px);
 }

 .learn-link {
   font-size: var(--p-size-14);
   font-weight: var(--font-600);
   color: var(--primary-color);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   transition: gap 0.2s;
 }

 .learn-link:hover {
   gap: 8px;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 1023px) {
   .why-card {
     grid-template-columns: 280px 1fr;
   }

   .why-heading {
     font-size: var(--h2-size-32);
   }
 }

 @media (max-width: 767px) {

   .why-heading {
     font-size: var(--h2-size-28);
   }

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

   .why-left {
     /* flex-direction: row; */
     flex-wrap: wrap;
     gap: var(--space-8);
   }

   .why-left__title {
     width: 100%;
   }

   .why-left__stat {
     display: none;
   }

   .tab-btn {
     width: auto;
     flex: 1;
     min-width: 120px;
     padding: 10px 12px;
   }

   .tab-btn__bar {
     display: none;
   }

   .why-right {
     padding: var(--space-32) var(--space-24);
   }

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




 /* ── SECTION ── */
 .benefit-section {
   max-width: var(--container-width);
   margin: 0 auto;
   padding: var(--space-85) 0;
 }

 .section-heading {
   font-family: var(--heading-bold-font-family);
   font-size: var(--h2-size-40);
   font-weight: var(--font-800);
   color: var(--text-nav);
   line-height: var(--leading-tight);
   letter-spacing: -0.02em;
 }

 .benefit-header__right {
   font-size: var(--p-size-16);
   color: var(--text-primary);
   line-height: var(--leading-relaxed);
   max-width: 420px;
   text-align: left;
 }

 /* ── CARDS GRID ── */
 .benefit-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-16);
 }

 /* ── SINGLE CARD ── */
 .benefit-card {
   background: var(--bg-main);
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-16);
   padding: var(--space-32) var(--space-24);
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
   position: relative;
   overflow: hidden;
   transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
   cursor: default;
 }

 .benefit-card:hover {
   box-shadow: var(--shadow-panel);
   /* transform: translateY(-4px); */
   border-color: transparent;
 }

 /* Colored top bar per card */
 .benefit-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   border-radius: var(--radius-16) var(--radius-16) 0 0;
   opacity: 0;
   transition: opacity 0.25s;
 }

 .benefit-card:hover::before {
   opacity: 1;
 }

 .benefit-card--blue::before {
   background: var(--primary-color);
 }

 .benefit-card--green::before {
   background: var(--success-color);
 }

 .benefit-card--purple::before {
   background: var(--purple-color);
 }

 .benefit-card--orange::before {
   background: var(--danger-color);
 }

 /* Icon box */
 .benefit-card__icon {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-12);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .benefit-card__icon svg {
   width: 26px;
   height: 26px;
   fill: none;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 /* Icon colors per type */
 .icon--blue {
   background: var(--color-active-bg);
 }

 .icon--blue svg {
   stroke: var(--primary-color);
 }

 .icon--green {
   background: #ecf3ec;
 }

 .icon--green svg {
   stroke: var(--success-color);
 }

 .icon--purple {
   background: #f0eaff;
 }

 .icon--purple svg {
   stroke: var(--purple-color);
 }

 .icon--orange {
   background: #fff0e8;
 }

 .icon--orange svg {
   stroke: var(--danger-color);
 }

 /* Card body */
 .benefit-card__body {
   flex: 1;
 }

 .benefit-card__title {
   font-family: var(--heading-bold-font-family);
   font-size: var(--h3-size-24);
   font-weight: var(--font-800);
   color: var(--text-nav);
   letter-spacing: -0.01em;
   margin-bottom: var(--space-8);
 }

 .benefit-card__desc {
   font-size: var(--p-size-14);
   color: var(--text-primary);
   line-height: var(--leading-relaxed);
 }

 /* Bottom tag pill */
 .benefit-card__tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border-radius: var(--radius-9999);
   font-size: var(--p-size-12);
   font-weight: var(--font-600);
   width: fit-content;
   border: 1.5px solid;
 }

 .tag--blue {
   background: var(--color-active-bg);
   color: var(--primary-color);
   border-color: #c5d8fc;
 }

 .tag--green {
   background: #ecf3ec;
   color: var(--success-color);
   border-color: #b6d9bb;
 }

 .tag--purple {
   background: #f0eaff;
   color: var(--purple-color);
   border-color: #d4b8fc;
 }

 .tag--orange {
   background: #fff0e8;
   color: var(--danger-color);
   border-color: #fbc9a8;
 }

 .benefit-card__tag svg {
   width: 12px;
   height: 12px;
   fill: none;
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 /* ── BOTTOM BANNER ── */
 .benefit-banner {
   margin-top: var(--space-64);
   background: var(--bg-dark);
   border-radius: var(--radius-16);
   padding: var(--space-32) var(--space-48);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-24);
   flex-wrap: wrap;
 }

 .benefit-banner__text {}

 .benefit-banner__title {
   font-family: var(--heading-bold-font-family);
   font-size: var(--h3-size-24);
   font-weight: var(--font-800);
   color: #fff;
   letter-spacing: -0.01em;
   margin-bottom: 6px;
 }

 .benefit-banner__sub {
   font-size: var(--p-size-14);
   color: #b6b7ba;
   line-height: var(--leading-normal);
 }

 .benefit-banner__actions {
   display: flex;
   align-items: center;
   gap: var(--space-12);
   flex-shrink: 0;
   flex-wrap: wrap;
 }


 .btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: var(--space-8);
   padding: 12px var(--space-24);
   background: transparent;
   color: #fff;
   font-family: var(--para-font-family);
   font-size: var(--p-size-14);
   font-weight: var(--font-600);
   border-radius: var(--radius-8);
   text-decoration: none;
   border: 1.5px solid rgba(255, 255, 255, 0.2);
   cursor: pointer;
   transition: border-color 0.2s, background 0.2s;
   white-space: nowrap;
 }

 .btn-ghost:hover {
   border-color: rgba(255, 255, 255, 0.4);
   background: rgba(255, 255, 255, 0.06);
 }

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

   .section-heading {
     font-size: var(--h2-size-32);
   }

   .benefit-header__right {
     text-align: left;
     max-width: 100%;
   }
 }

 @media (max-width: 767px) {
  
   .section-heading {
     font-size: var(--h2-size-28);
   }

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

   .benefit-banner {
     padding: var(--space-24);
     flex-direction: column;
     align-items: flex-start;
   }

   .benefit-banner__actions {
     width: 100%;
   }

   .btn-primary,
   .btn-ghost {
     flex: 1;
     justify-content: center;
   }
 }


 

/* ── FAQ SECTION ── */
.faq-section {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-85) 0;
}


.faq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-24);
    margin-bottom: var(--space-48);
    flex-wrap: wrap;
}

.faq-header__left {
    flex: 1;
}


.section-heading {
    font-family: var(--heading-bold-font-family);
    font-size: var(--h2-size-40);
    font-weight: var(--font-800);
    color: var(--text-nav);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-8);
}

/* .section-subheading {
      font-size: var(--p-size-14);
      color: var(--text-grey);
      line-height: var(--leading-relaxed);
    } */

/* ── COLLAPSE ALL BUTTON ── */

/* #master-toggle {
    display: none;
  } */

.collapse-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
    color: var(--primary-color);
    font-family: var(--para-font-family);
    font-size: var(--p-size-14);
    font-weight: var(--font-600);
    padding: 8px 14px;
    border-radius: var(--radius-9999);
    border: 1.5px solid var(--color-border);
    background: var(--bg-main);
    user-select: none;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-top: 6px;
}

.collapse-all-btn:hover {
    background: #eaf0ff;
}

.collapse-all-btn .btn-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    font-weight: var(--font-700);
}

/* ── FAQ LIST ── */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* ── EACH FAQ ITEM ── */
/* Hidden checkbox drives open/close state */
.faq-item input[type="checkbox"] {
    display: none;
}

.faq-item {
    background: var(--bg-main);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-12);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: 0 4px 20px rgba(0, 101, 242, 0.08);
}

/* Label = clickable question row */
.faq-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-20) var(--space-24);
    cursor: pointer;
    user-select: none;
}

.faq-question {
    font-family: var(--para-font-family);
    font-size: clamp(var(--p-size-18), 2.5vw, 22px);
    font-weight: var(--font-500);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: -0.38px;
}

/* Chevron icon */
.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-grey);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
}

/* Answer panel — hidden by default */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 var(--space-24);
}

.faq-answer p {
    font-size: var(--p-size-16);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    padding-bottom: var(--space-20);
    max-width: 1000px;

}

/* ── OPEN STATE (individual checkbox checked) ── */
.faq-item input[type="checkbox"]:checked~.faq-label .faq-icon {
    transform: rotate(180deg);
}

.faq-item input[type="checkbox"]:checked~.faq-label .faq-icon svg {
    stroke: var(--primary-color);
}

.faq-item input[type="checkbox"]:checked~.faq-answer {
    max-height: 300px;
    padding-top: 0;
}

/* First item open by default */
#faq1:checked~.faq-label .faq-icon {
    transform: rotate(180deg);
}

#faq1:checked~.faq-answer {
    max-height: 300px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1023px) {
    .section-heading {
        font-size: var(--h2-size-32);
    }
}

@media (max-width: 767px) {

    .section-heading {
        font-size: var(--h2-size-28);
    }

    .faq-label {
        padding: var(--space-16);
        gap: var(--space-12);
    }

    .faq-answer {
        padding: 0 var(--space-16);
    }

    .faq-item input[type="checkbox"]:checked~.faq-answer {
        padding-top: 0;
    }
}

@media (max-width:480px) {
    .faq-question {
        letter-spacing: 0;
    }

    .faq-answer p {
        padding-right: 10px;
    }

    .collapse-all-btn {
        width: 100%;
        justify-content: center;
    }

}