* {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }


 .section-heading {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 65px;
 }

 .section-heading h2 {
     font-family: var(--heading-bold-font-family);
     font-size: clamp(24px, 4vw, 32px);
     font-weight: var(--font-700);
     color: var(--text-primary);
     margin: 0;
 }

 .section-heading p {
     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: 0;
 }

 body.apb-page {
     margin: 0;
     color: var(--ink);
     background: #fff;
     font-family: var(--heading-font-family);
     -webkit-font-smoothing: antialiased
 }

 .apb-page a {
     text-decoration: none
 }

 .apb-wrap {
     width: min(var(--page), calc(100% - (var(--gutter)*2)));
     margin: 0 auto
 }

 .apb-section {
     padding: 85px 0;
     /* background: var(--bg-light); */
 }

 .apb-head {
     max-width: 1050px;
     margin: 0 0 65px;
     text-align: left
 }

 .apb-tag {
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .09em;
     padding-left: 32px;
     color: var(--primary-color);
 }

 .apb-tag::before {
     content: '';
     display: inline-block;
     width: 24px;
     height: 2px;
     border-radius: 999px;
     background: var(--primary-color);
     position: relative;
     top: -1px;
     left: -17px
 }

 .apb-head h2 {
     margin: 6px 0;
     color: var(--ink);
     font-size: clamp(24px, 2.8vw, 32px);
     line-height: 1.15;
     font-family: var(--heading-bold-font-family);
 }

 .apb-head p {
     /* max-width: 870px; */
     margin: 0;
     color: var(--text-primary);
     font-size: 18px;
     line-height: 1.75;
 }

 .apb-hero {
     padding: 46px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
     height: calc(100vh - 77px);
     background: var(--bg-light);
 }

 .apb-hero-grid {
     display: grid;
     grid-template-columns: 1fr .9fr;
     gap: 40px;
     align-items: center
 }

 .apb-hero-grid .right img {
     scale: 1.1;
 }

 .apb-breadcrumb {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 10px;
     margin-bottom: 18px;
     border: 1px solid rgba(49, 86, 181, .12);
     border-radius: 999px;
     background: rgba(255, 255, 255, .72);
     font-size: 12px
 }

 .apb-breadcrumb a {
     color: #61707d
 }

 .apb-breadcrumb span {
     color: #9aa4ad
 }

 .apb-breadcrumb strong {
     color: #35414d
 }

 .apb-hero-copy h1 {
     margin: 0;
      font-family: var(--heading-bold-font-family);
     font-size: clamp(44px, 4vw, 60px);
     line-height: 1;
 }

 .apb-hero-copy h2 {
     max-width: 760px;
     margin: 12px 0 14px;
     color: var(--text-primary);
     font-size: clamp(20px, 1.5vw, 31px);
     line-height: 1.23;
     /* letter-spacing: -.025em; */
 }

 .apb-lead {
     max-width: 760px;
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-support {
     max-width: 720px;
     margin: 12px 0 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 25px
 }

 .apb-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 43px;
     padding: 0 18px;
     border-radius: 4px;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 5%;
 }

 .apb-btn.primary {
     color: #fff;
     background: var(--primary-color);
     border: 1px solid var(--primary-color)
 }

 .apb-btn.secondary {
     color: var(--primary-color);
     background: #fff;
     border: 1px solid rgba(49, 86, 181, .22)
 }

 .apb-proof {
     display: flex;
     align-items: center;
     gap: 9px;
     max-width: 700px;
     margin-top: 22px;
     color: #5b6874;
     font-size: 12.5px;
     font-weight: 650
 }

 .apb-proof i {
     flex: 1;
     height: 1px;
     background: #d5dce2
 }

 .apb-hero-visual {
     display: grid;
     grid-template-columns: 1fr 88px 1fr;
     gap: 10px;
     align-items: center
 }

 .apb-doc,
 .apb-entry {
     border: 1px solid rgba(49, 86, 181, .13);
     border-radius: 14px;
     background: #fff;
     box-shadow: 0 14px 36px rgba(23, 37, 55, .07);
     overflow: hidden
 }

 .apb-panel-head {
     display: flex;
     justify-content: space-between;
     gap: 8px;
     padding: 13px 14px;
     border-bottom: 1px solid var(--line);
     background: #f4f7f9
 }

 .apb-panel-head span {
     color: var(--muted);
     font-size: 9.5px;
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-panel-head strong {
     color: var(--accent);
     font-size: 9.5px;
 }

 .apb-paper {
     margin: 18px;
     padding: 18px;
     min-height: 280px;
     border: 1px solid #e3e7eb;
     border-radius: 7px;
     background: #fff
 }

 .apb-paper>b {
     display: block;
     width: 42%;
     height: 10px;
     border-radius: 3px;
     background: #d7deea;
     margin-bottom: 25px
 }

 .apb-paper>i {
     display: block;
     width: 72%;
     height: 7px;
     margin: 9px 0;
     border-radius: 3px;
     background: #e7ebef
 }

 .apb-paper>i.w {
     width: 92%
 }

 .apb-paper>i.s {
     width: 55%
 }

 .apb-lines {
     display: grid;
     gap: 7px;
     margin-top: 25px;
     padding-top: 15px;
     border-top: 1px solid #e7ebef
 }

 .apb-lines span {
     height: 7px;
     border-radius: 3px;
     background: #edf0f3
 }

 .apb-paper>em {
     display: block;
     width: 42%;
     height: 10px;
     margin: 28px 0 0 auto;
     border-radius: 3px;
     background: #d8e4e1
 }

 .apb-ai-step {
     text-align: center;
     color: var(--primary)
 }

 .apb-ai-step span {
     display: block;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-ai-step strong {
     display: block;
     margin-top: 6px;
     padding: 8px 7px;
     border-radius: 999px;
     background: var(--blue-soft);
     font-size: 9px
 }

 .apb-entry-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
     padding: 16px
 }

 .apb-entry-grid div {
     padding: 12px;
     border: 1px solid var(--line);
     border-radius: 8px;
     background: #fbfcfd
 }

 .apb-entry-grid span {
     display: block;
     color: var(--muted);
     font-size: 9.5px
 }

 .apb-entry-grid strong {
     display: block;
     margin-top: 5px;
     font-size: 12.5px
 }

 .apb-entry-status {
     display: grid;
     gap: 7px;
     padding: 0 16px 16px
 }

 .apb-entry-status span {
     padding: 8px 10px;
     border-radius: 7px;
     background: var(--mint-soft);
     color: var(--accent-dark);
     font-size: 10px;
     font-weight: 700
 }

 .apb-chain {
     display: grid;
     grid-template-columns: .72fr 1.28fr;
     gap: 18px
 }

 .apb-chain-origin {
     min-height: 335px;
     display: inline-block;
     /* flex-direction: column; */
     justify-content: center;
     align-items: center;
     padding: 30px;
     border-radius: 14px;
     background: var(--primary-color);
 }

 .apb-chain-origin img {
     margin-top: 32px;
     margin-bottom: -32px;
     width: 100%;
     max-width: 300px;
 }

 .apb-chain-origin span {
     color: #dbe3ff;
     font-size: 12px;
     padding: 12px;
     display: inline;
     border-radius: 4px;
     background: #91bfff6e;
     font-weight: 800;
     letter-spacing: .09em
 }

 .apb-chain-origin h3 {
     margin: 32px 0 8px;
     color: #fff;
     font-size: 32px;
 }

 .apb-chain-origin p {
     margin: 0;
     color: #e5eaf8;
     font-size: 20px;
     line-height: 1.75;
 }

 .apb-chain-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     border-top: 1px solid var(--line);
     border-left: 1px solid var(--line)
 }

 .apb-chain-grid article {
     min-height: 160px;
     padding: 20px;
     border-top: 1px solid #ababab6e;
     border-right: 1px solid #ababab6e;
     border-left: 1px solid #ababab6e;
     border-bottom: 1px solid #ababab6e;
 }

 .apb-chain-grid article:last-child {
     background: #f2f2f2;
 }

 .apb-chain-grid article>span {
     color: var(--text-primary);
     font-size: 24px;
     font-weight: 800
 }

 .apb-chain-grid small {
     display: block;
     margin-top: 18px;
     color: var(--muted);
     font-size: 12px;
     color: var(--primary-color);
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-chain-grid h3 {
     margin: 7px 0 6px;
     font-size: 20px;
     color: var(--text-primary);
 }

 .apb-chain-grid p {
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-workflow {
     background: var(--bg-light);
 }

 .apb-ribbon {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     overflow: hidden;
     border: 1px solid var(--line);
     border-radius: 13px;
     background: #fff
 }

 .apb-ribbon article {
     min-height: 190px;
     padding: 24px 12px;
     /* border-right: 1px solid var(--line); */
 }

 .apb-ribbon article:last-child {
     background: #dfdfdf8e;
     border: 3px solid white;
 }

 .apb-ribbon article>span {
     color: var(--accent);
     font-size: 24px;
     font-weight: 800
 }

 .apb-ribbon small {
     display: block;
     margin-top: 17px;
     color: var(--primary-color);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-ribbon h3 {
     margin: 7px 0;
     font-size: 18px;
 }

 .apb-ribbon p {
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-extract-layout {
     display: grid;
     grid-template-columns: 1.2fr .75fr;
     gap: 28px
 }

 .apb-extract-list {
     border-top: 1px solid var(--line)
 }

 .apb-extract-list article {
     display: grid;
     grid-template-columns: 190px 1fr;
     gap: 22px;
     padding: 18px 12px;
     border-bottom: 1px solid #ababab6e
 }

 .apb-extract-list strong {
     font-size: 20px;
 }

 .apb-extract-list p {
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-review {
     align-self: start;
     padding: 32px;
     border: 1px solid rgba(49, 86, 181, .15);
     border-radius: 14px;
     background: var(--bg-light);
 }

 .apb-review>span {
     color: var(--primary-color);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .09em
 }

 .apb-review h3 {
     margin: 20px 0 10px;
     font-size: 24px;
     line-height: 1.3
 }

 .apb-review>p {
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-review-status {
     margin-top: 25px;
     border-top: 1px solid rgba(49, 86, 181, .12)
 }

 .apb-review-status div {
     display: flex;
     justify-content: space-between;
     padding: 12px 0;
     border-bottom: 1px solid rgba(49, 86, 181, .12)
 }

 .apb-review-status span,
 .apb-review-status strong {
     font-size: 16px;
 }

 .apb-review-status strong {
     color: var(--text-primary);
 }

 .apb-master {
     background: var(--bg-light);
 }

 .apb-master-layout {
     display: grid;
     grid-template-columns: .72fr 1.28fr;
     gap: 18px
 }

 .apb-master-source {
     padding: 28px;
     border-radius: 13px;
     background: var(--primary-color);
     color: white;
 }


 .apb-master-source>span,
 .apb-master-actions span {
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .08em;
 }

 .apb-master-source h3 {
     margin: 22px 0 9px;
     font-size: 24px
 }

 .apb-master-source p {
     margin: 0;
     font-size: 16px;
     line-height: 1.65
 }

 .apb-master-actions {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px
 }

 .apb-master-actions article {
     padding: 20px;
     border-radius: 12px;
     background: #fff
 }

 .apb-master-actions h3 {
     margin: 22px 0 8px;
     font-size: 20px;
 }

 .apb-master-actions p {
     margin: 0;
     color: var(--text);
     font-size: 16px;
     line-height: 1.6
 }


 .apb-connected-layout {
     display: grid;
     grid-template-columns: .68fr 1.32fr;
     gap: 18px
 }

 .apb-connected-start {
     min-height: 330px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 32px;
     border-radius: 14px;
     background: #f2f2f2;
 }

 .apb-connected-start>span {
     color: var(--primary-color);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-connected-start h3 {
     margin: 20px 0 8px;
     font-size: 24px
 }

 .apb-connected-start p {
     margin: 0;
     color: var(--text-primary);
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-connected-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     border-top: 1px solid var(--line);
     border-left: 1px solid var(--line);
     background: #fff
 }

 .apb-connected-grid article {
     min-height: 150px;
     padding: 20px;
     border-right: 1px solid #ababab6e;
     border-bottom: 1px solid #ababab6e;
     border-left: 1px solid #ababab6e;
     border-top: 1px solid #ababab6e;
 }

 .apb-connected-grid article:last-child {
     background: var(--primary-color);
     color: white;
 }

 .apb-connected-grid span {
     color: var(--accent);
     font-size: 24px;
     font-weight: 800
 }

 .apb-connected-grid h3 {
     margin: 17px 0 7px;
     font-size: 20px;
 }

 .apb-connected-grid p {
     margin: 0;
     font-size: 16px;
     line-height: 1.75;
 }

 .apb-usecases {
     background: var(--bg-light);
 }

 .apb-usecase-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
 }

 .apb-usecase-grid article {
     min-height: 165px;
     padding: 20px;
     /* border-right: 1px solid #ababab6e; */
     /* border-top: 1px solid #ababab6e; */
     /* border-left: 1px solid #ababab6e; */
     /* border-bottom: 1px solid #ababab6e; */
 }

 .apb-usecase-grid article:first-child {
     background: var(--primary-color);
     color: white;

 }

 .apb-usecase-grid article:last-child {
     background: white;

 }

 .apb-usecase-grid>article>span {
     color: var(--accent);
     font-size: 24px;
     font-weight: 800
 }

 .apb-usecase-grid h3 {
     margin: 16px 0 7px;
     font-size: 20px;
 }

 .apb-usecase-grid p {
     margin: 0;
     font-size: 16px;
     line-height: 1.75;
 }


 .apb-control {
     background: #f2f2f2;
 }

 .apb-control-line {
     display: grid;
     grid-template-columns: 1fr 80px 1fr 80px 1fr;
     gap: 10px;
     align-items: center;
     padding: 24px;
     border: 1px solid var(--line);
     border-radius: 13px;
     background: #fff
 }

 .apb-control-line span {
     display: block;
     color: var(--primary);
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .08em
 }

 .apb-control-line strong {
     display: block;
     margin-top: 7px;
     font-size: 15px
 }

 .apb-control-line i {
     height: 1px;
     background: #cfd8df
 }

 .apb-faq-list {
     border-top: 1px solid var(--line)
 }

 .apb-faq-list details {
     border-bottom: 1px solid var(--line)
 }

 .apb-faq-list summary {
     cursor: pointer;
     padding: 18px 0;
     color: #24303b;
     font-size: 15.5px;
     font-weight: 750;
     line-height: 1.5
 }

 .apb-faq-list p {
     max-width: 900px;
     margin: -5px 0 18px;
     color: var(--text);
     font-size: 13.5px;
     line-height: 1.68
 }

 .apb-final {
     padding: 70px 0;
     background: var(--bg-light);
 }

 .apb-final-inner {
     display: flex;
     justify-content: space-between;
     gap: 40px;
     align-items: center
 }

 .apb-final h2 {
     font-family: var(--heading-bold-font-family);
     margin: 12px 0 10px;
     font-size: clamp(24px, 4vw, 32px);
     line-height: 1.15;
     letter-spacing: -.03em
 }

 .apb-final p {
     margin: 0;
     color: var(--text-primary);
     font-size: 18px;
     line-height: 1.75
 }

 .apb-final .apb-actions {
     margin-top: 0;
     flex-shrink: 0
 }

 @media(max-width:1120px) {

     .apb-hero-grid,
     .apb-chain,
     .apb-extract-layout,
     .apb-master-layout,
     .apb-connected-layout {
         grid-template-columns: 1fr
     }

     .apb-ribbon {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(max-width:820px) {
     .apb-hero {
         height: auto;
     }

     .apb-hero-visual {
         grid-template-columns: 1fr
     }

     .apb-chain-grid,
     .apb-connected-grid,
     .apb-usecase-grid,
     .apb-master-actions {
         grid-template-columns: 1fr 1fr
     }

     .apb-control-line {
         grid-template-columns: 1fr
     }

     .apb-control-line i {
         width: 1px;
         height: 16px;
         justify-self: center
     }

     .apb-final-inner {
         flex-direction: column;
         align-items: flex-start
     }
 }

 @media(max-width:580px) {

     .apb-chain-origin p {
         font-size: 16px;
     }

     .apb-master-source,
     .apb-connected-start,
     .apb-chain-origin h3,
     .apb-review {
         padding: 20px;
     }

     :root {
         --gutter: 18px
     }

     .apb-section {
         padding: 62px 0
     }

     .apb-hero {
         padding: 36px 0 44px
     }

     .apb-proof {
         flex-wrap: wrap
     }

     .apb-proof i {
         display: none
     }

     .apb-entry-grid,
     .apb-chain-grid,
     .apb-ribbon,
     .apb-master-actions,
     .apb-connected-grid,
     .apb-usecase-grid {
         grid-template-columns: 1fr
     }

     .apb-extract-list article {
         grid-template-columns: 1fr;
         gap: 7px
     }
 }






















 .ai-automation-section {
     padding: 85px 0;
     background: var(--bg-main);
 }

 .ai-automation-section .section-heading {
     max-width: 820px;
     margin-bottom: 68px;
 }


 /* Workflow */

 .ai-workflow {
     position: relative;
 }

 .ai-progress {
     position: relative;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 45px;
 }

 .ai-progress-line {
     position: absolute;
     top: 27px;
     left: 14%;
     right: 14%;
     height: 2px;
     background: linear-gradient(45deg, #0065f2, transparent);
 }

 .ai-progress-active {
     position: absolute;
     top: 27px;
     left: 3%;
     width: 36%;
     height: 2px;
     background: #0065F2;
 }


 /* Step */

 .ai-step {
     position: relative;
     z-index: 2;
 }

 .ai-step-marker {
     width: 64px;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 28px;
     border: 1px solid #DDE4ED;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 4px 15px rgba(20, 40, 80, .06);
 }

 .ai-step-marker span {
     font-size: 24px;
     font-weight: 700;
     color: #98A2B3;
 }

 .ai-step.active .ai-step-marker {
     border-color: #BFD4FF;
     background: #0065F2;
     box-shadow:
         0 0 0 7px rgba(0, 101, 242, .08),
         0 8px 22px rgba(0, 101, 242, .18);
 }

 .ai-step.active .ai-step-marker span {
     color: #fff;
 }


 /* Content */

 .ai-step-content {
     max-width: 300px;
 }

 .ai-step-label {
     display: inline-block;
     margin-bottom: 9px;
     color: #0065F2;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .12em;
 }

 .ai-step h3 {
     margin: 0 0 10px;
     font-family: var(--heading-font-family);
     font-size: 25px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--text-primary);
 }

 .ai-step p {
     margin: 0;
     color: var(--text-mid);
     font-size: 16px;
     line-height: 1.75;
 }





 /* Tablet */

 @media(max-width:800px) {

     .ai-progress {
         gap: 25px;
     }

     .ai-progress-line {
         left: 9%;
         right: 9%;
     }

     .ai-progress-active {
         left: 9%;
         width: 38%;
     }

     .ai-step h3 {
         font-size: 18px;
     }

 }


 /* Mobile */

 @media(max-width:600px) {

     .ai-automation-section {
         padding: 65px 0;
     }

     .ai-automation-section .section-heading {
         margin-bottom: 45px;
     }

     .ai-progress {
         display: block;
         padding-left: 28px;
     }

     .ai-progress-line {
         top: 27px;
         bottom: 27px;
         left: 54px;
         right: auto;
         width: 2px;
         height: auto;
     }

     .ai-progress-active {
         top: 27px;
         left: 54px;
         width: 2px;
         height: 145px;
     }

     .ai-step {
         display: grid;
         grid-template-columns: 54px 1fr;
         column-gap: 22px;
         margin-bottom: 42px;
     }

     .ai-step:last-child {
         margin-bottom: 0;
     }

     .ai-step-marker {
         grid-column: 1;
         grid-row: 1;
         margin: 0;
     }

     .ai-step-content {
         grid-column: 2;
         max-width: none;
         padding-top: 3px;
     }

     .ai-step h3 {
         font-size: 19px;
     }

     .ai-control-note {
         align-items: flex-start;
         margin-top: 40px;
         padding: 18px;
     }

 }





 .section-eyebrow {
     display: flex;
     align-items: center;
     gap: var(--space-12);
     /* margin-bottom: var(--space-16); */
     color: var(--primary-color);
 }

 .section-eyebrow__line {
     width: 28px;
     height: 1.5px;
     background-color: var(--primary-color);
 }

 .section-eyebrow__text {
     font-size: var(--p-size-12);
     font-weight: var(--font-600);
     color: var(--text-grey);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--primary-color);
 }

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


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

 .faq-header__left {
     flex: 1;
 }

 .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 ── */
 .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;
     margin-top: 12px;
 }

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

 .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, 20px);
     font-weight: var(--font-500);
     color: var(--text-primary);
     line-height: var(--leading-tight);
     letter-spacing: -0.38px;
 }

 .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;
 }

 .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;
 }

 .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;
 }

 #faq1:checked~.faq-label .faq-icon {
     transform: rotate(180deg);
 }

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

 
 @media (max-width: 767px) {
    


     .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;
     }

     .faq-header {
         flex-direction: column;
     }
 }