:root {
     --primary-color: #185ca5;
     --secondary-color: #ffffff;
     --accent-color: #f0f0f0;
     --white: white;
     --black: black;
     --background-color: #ffffff;
     --muted-color: #595c5f;
     --small-font-size: 14px;
     --desc-font-size: 15px;
     --title-font-size: 32px;
     --border-radius-lg: 20px;
     --border-radius-xl: 25px;
     --border-radius-pill: 50px;
     --main-transition: all 0.4s ease;
     --fast-transition: 0.3s ease;
     --card-shadow: 0 10px 30px rgba(71, 51, 201, 0.08);
     --hover-shadow: 0 25px 50px rgba(71, 51, 201, 0.25);
 }

 .pp4 {
     padding: 4px;
 }

 .about-img {
     width: 130%;
 }

 .hero-main-img {
     margin-left: 90px;
     width: 75%;
 }

 .card-title {
     color: var(--primary-color) !important;
     margin-bottom: 8px !important;
 }

 .hero-content p {
     font-size: 15px;
     opacity: 0.85;
     margin: 0;
 }

 .breadcrumb-wrap {
     font-size: 13px;
     opacity: 0.65;
     margin-bottom: 6px;
 }

 /* ── FILTER TABS ── */
 .filter-bar {
     display: flex;
     justify-content: center;
     gap: 10px;
     padding: 40px 0 20px;
     flex-wrap: wrap;
 }

 .filter-btn {
     padding: 8px 24px;
     border-radius: 0px;
     border: 1.5px solid var(--primary-color);
     background: transparent;
     color: var(--primary-color);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
     font-family: 'Poppins', sans-serif;
 }

 .filter-btn:hover,
 .filter-btn.active {
     background: var(--primary-color);
     color: #fff;
 }

 /* ── FEATURED PRODUCT ── */
 .featured-section {
     background: linear-gradient(135deg, #28beff47 0%, #3e80d540 50%, #3e80d569 100%);
     padding: 30px 150px;
     margin-bottom: 35px;
     border: 1px solid rgba(24, 92, 165, 0.2);
     position: relative;
     overflow: hidden;
 }

 .featured-section::after {
     content: 'FEATURED';
     position: absolute;
     top: 22px;
     right: 30px;
     font-family: 'Arial', sans-serif;
     font-size: 11px;
     letter-spacing: 3px;
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
     padding: 4px 10px;
     border-radius: 3px;
 }

 .featured-badge {
     display: inline-block;
     background: var(--primary-color);
     color: #ffffff;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 3px 17px;
     margin-bottom: 18px;

 }

 .featured-title {
     font-family: 'Arial', sans-serif;
     font-size: 35px;
     letter-spacing: -1px;
     color: var(--primary-color);
     margin-bottom: 14px;
     line-height: 1;
     font-weight: 600;
 }

 .fea-card {
     padding: 15px 50px;
     background-color: var(--primary-color);
     color: white;
     justify-content: start;
 }

 .featured-desc {
     color: #555;
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 20px;
     max-width: 520px;
 }

 .featured-stats {
     display: flex;
     gap: 40px;
     margin-bottom: 32px;
     border: 1px solid #1969ba;
     padding: 20px;

 }

 .stat-item .stat-num {
     font-family: 'Arial', sans-serif;
     font-size: 30px;
     color: var(--primary-color);
     line-height: 1;
 }

 .stat-item .stat-label {
     font-size: 11px;
     color: #777;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .btn-primary-custom {
     background: var(--primary-color);
     color: #fff;
     border: none;
     padding: 13px 34px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s;
     margin-right: 14px;
     font-family: 'Arial', sans-serif;
 }

 .btn-primary-custom:hover {
     background: var(--primary-color);
     transform: translateY(-2px);
 }

 .btn-outline-custom {
     background: transparent;
     color: var(--primary-color);
     border: 1.5px solid var(--primary-color);
     padding: 13px 34px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s;
     font-family: 'Arial', sans-serif;
 }

 .btn-outline-custom:hover {
     background: var(--primary-color);
     color: #fff;
 }

 .featured-visual {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .pro-grid {
     padding: 20px 60px 80px;
 }

 .pro-card {
     background: var(--white);
     border-radius: 0;
     padding: 25px 25px;
     text-align: left;
     transition: var(--main-transition);
     border: 1px solid rgb(25 107 189 / 52%);
     height: 100%;
     box-shadow: var(--card-shadow);
     position: relative;
     overflow: hidden;
 }

 .pro-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--primary-color);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
 }

 .pro-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--hover-shadow);
 }

 .pro-card:hover::before {
     transform: scaleX(1);
 }

 .pro-icon {
     width: 35px;
     height: 35px;
     border-radius: 0px;
     background: linear-gradient(135deg, #28beff47 0%, #3e80d540 100%);
     border: 1px solid rgba(24, 92, 165, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19px;
     margin-bottom: 10px;
 }

 .pro-card h5 {
     font-weight: 700;
     color: var(--primary-color);
     font-size: 18px;
     margin-bottom: 5px;
 }

 .pro-card p {
     font-size: 14px;
     color: #666;
     line-height: 1.75;
     margin-bottom: 20px;
 }

 .pro-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 22px;
 }

 .pro-tag {
     font-size: 10px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 10px;
     border: 1px solid var(--primary-color);
     color: #555;
     border-radius: 2px;
 }

 .pro-link {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     font-weight: 600;
     color: var(--primary-color);
     text-decoration: none;
     transition: gap 0.3s;
 }

 .pro-link:hover {
     gap: 14px;
     color: var(--primary-hover);
 }

 .pro-card.highlight {
     background: linear-gradient(135deg, #185ca5 0%, #1a6ec2 100%);
     color: #fff;
 }

 .pro-card.highlight h5 {
     color: #fff;
 }

 .pro-card.highlight p {
     color: rgba(255, 255, 255, 0.8);
 }

 .pro-card.highlight .pro-tag {
     border-color: rgba(255, 255, 255, 0.4);
     color: rgba(255, 255, 255, 0.8);
 }

 .pro-card.highlight .pro-link {
     color: #fff;
 }

 .pro-card.highlight .pro-icon {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.2);
 }

 /* ── INTEGRATIONS BAND ── */
 .integrations-band {
     background: #f8f9fc;
     padding: 45px 35px;
     text-align: center;
 }

 .integrations-band h4 {
     font-size: 14px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #999;
     margin-bottom: 15px;
     font-weight: 500;
 }

 .integration-logos {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
 }

 .integration-logo {
     width: 100px;
     height: 40px;
     background: #fff;
     border: 1px solid #e5e7eb;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Arial', sans-serif;
     font-size: 14px;
     letter-spacing: 1px;
     color: #999;
     transition: all 0.3s;
 }

 .integration-logo:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
 }

 /* ── CTA ── */
 .products-cta {
     background: #fff;
     padding: 25px 20px;
     text-align: center;
     color: #fff;
     position: relative;
     overflow: hidden;
 }


 .products-cta h2 {
     font-family: 'Arial', sans-serif;
     font-size: 32px;
     letter-spacing: -1px;
     margin-bottom: 8px;
     color: var(--primary-color);
 }

 .products-cta p {
     font-size: 16px;
     opacity: 0.85;
     margin-bottom: 15px;
     color: var(--primary-color);
 }

 .cta-btn-white {
     background: #185ca5;
     color: #ffffff;
     border: none;
     padding: 10px 15px;
     /* border-radius: 50px; */
     font-weight: 450;
     font-size: 15px;
     cursor: pointer;
     transition: all 0.3s;
     font-family: 'Arial', sans-serif;

 }

 .cta-btn-white:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 @media (max-width: 991px) {
     nav {
         padding: 16px 24px;
     }

     .nav-links {
         display: none;
     }

     .featured-section {
         margin: 20px;
         padding: 36px 28px;
     }

     .products-grid {
         padding: 20px 20px 60px;
     }

     .integrations-band {
         padding: 40px 20px;
     }

     .products-cta {
         padding: 60px 20px;
     }
 }

 /* ── HERO ── */
 .careers-hero {
     background: var(--primary-color);
     padding: 20px 20px 20px;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .careers-hero::before {
     content: '';
     position: absolute;
     width: 500px;
     height: 500px;
     background: rgba(255, 255, 255, 0.04);
     border-radius: 50%;
     top: -200px;
     right: -150px;
 }

 .careers-hero::after {
     content: '';
     position: absolute;
     width: 250px;
     height: 250px;
     background: rgba(255, 255, 255, 0.03);
     bottom: -80px;
     left: 60px;
 }

 .hero-eyebrow {
     font-size: 11px;
     letter-spacing: 3px;
     text-transform: uppercase;
     opacity: 0.65;
     margin-bottom: 10px;
 }

 .careers-hero h1 {
     font-family: 'Arial', sans-serif;
     font-size: 44px;
     letter-spacing: 3px;
     line-height: 1;
     margin-bottom: 8px;
 }

 .careers-hero h1 span {
     opacity: 0.4;
 }

 .careers-hero p {
     font-size: 17px;
     opacity: 0.85;
     line-height: 1.75;
     margin-bottom: 10px;
 }

 .hero-actions {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .btn-white {
     background: #fff;
     color: var(--primary-color);
     border: none;
     padding: 13px 22px;
     font-weight: 700;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s;
     font-family: 'Arial', sans-serif;
 }

 .btn-white:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }

 .btn-ghost {
     background: transparent;
     color: #fff;
     border: 1.5px solid rgba(255, 255, 255, 0.5);
     padding: 13px 22px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s;
     font-family: 'Poppins', sans-serif;
 }

 .btn-ghost:hover {
     border-color: #fff;
     background: rgba(255, 255, 255, 0.08);
 }

 .hero-numbers {
     display: flex;
     gap: 50px;
     margin-top: 20px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .hero-stat .num {
     font-family: 'Poppins', sans-serif;
     font-size: 30px;
     letter-spacing: 1px;
     line-height: 1;
 }

 .hero-stat .label {
     font-size: 12px;
     opacity: 0.6;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-top: 4px;
 }

 .section-header {
     font-size: 36px;
     font-weight: 700;
     color: #2d3748;
     line-height: 1.4;
     margin-bottom: 10px;
 }

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

 .section-header-modern {
     color: #575e5b;
     font-size: 15px;
     line-height: 1.8;
     text-align: justify;
     max-width: 600px;
 }

 .section-header-subtitle {
     color: #575e5b;
     font-size: 17px;
     line-height: 1.4;
     text-align: center;
     font-weight: 450;
 }

 /* ── WHY US ── */
 .why-section {
     background: #fff;
     padding: 35px 100px;
 }

 .section-eyebrow {
     font-size: 12px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--primary-color);
     font-weight: 600;
     margin-bottom: 5px;
 }

 .section-eyebrrow {
     font-size: 12px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #fff;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .section-title-main {
     font-family: 'Poppins', sans-serif;
     font-size: 35px;
     letter-spacing: 1px;
     color: var(--primary-color);
     margin-bottom: 5px;
 }

 .section-sub {
     font-size: 15px;
     color: #666;
     max-width: 520px;
     line-height: 1.75;
 }

 .perk-card {
     background: #fff;
     padding: 25px 20px;
     border: 1px solid rgb(24 92 165 / 30%);
     box-shadow: var(--card-shadow);
     transition: var(--main-transition);
     height: 100%;
 }

 .perk-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--hover-shadow);
 }

 .perk-icon {
     width: 30px;
     height: 30px;
     background: linear-gradient(135deg, #28beff47 0%, #3e80d540 100%);
     border: 1px solid rgba(24, 92, 165, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     margin-bottom: 10px;
 }

 .perk-card h5 {
     font-weight: 700;
     color: var(--primary-color);
     font-size: 17px;
     margin-bottom: 10px;
 }

 .perk-card p {
     font-size: 14px;
     color: #666;
     line-height: 1.75;
     margin: 0;
 }

 /* ── CULTURE STRIP ── */
 .culture-strip {
     padding: 20px 20px;
     background: linear-gradient(135deg, #28beff47 0%, #3e80d540 50%, #3e80d569 100%);
 }

 .culture-strip .row {
     align-items: center;
 }

 .culture-img-mosaic {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 180px 180px;
     gap: 12px;
 }

 .mosaic-cell {
     background: linear-gradient(135deg, #28beff47 0%, #3e80d540 50%, #3e80d569 100%);
     border: 1px solid rgba(24, 92, 165, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 36px;
 }

 .mosaic-cell.tall {
     grid-row: span 2;
     font-size: 48px;
 }

 .culture-values {
     list-style: none;
     padding: 0;
     margin-top: 20px;
 }

 .culture-values li {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 8px 0;
     border-bottom: 1px solid #82bfd6;
     font-size: 14px;
     color: #444;
     line-height: 1.6;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;
     width: 670px;
 }

 .culture-values li:last-child {
     border-bottom: none;
 }


 /* ── PROCESS ── */
 .process-section {
     background: #fff;
     padding: 40px 70px;
 }

 .process-steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     margin-top: 50px;
     position: relative;
 }

 .process-steps::before {
     content: '';
     position: absolute;
     top: 26px;
     left: 12.5%;
     right: 12.5%;
     height: 1px;
     background: linear-gradient(90deg, var(--primary-color) 0%, rgba(24, 92, 165, 0.2) 100%);
     z-index: 0;
 }

 .process-step {
     text-align: center;
     padding: 0 20px;
     position: relative;
     z-index: 1;
 }

 .step-num {
     width: 52px;
     height: 52px;
     background: var(--primary-color);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Poppins', sans-serif;
     font-size: 20px;
     letter-spacing: 1px;
     margin: 0 auto 20px;
     position: relative;
     z-index: 2;
 }

 .process-step h5 {
     font-size: 15px;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 8px;
 }

 .process-step p {
     font-size: 13px;
     color: #888;
     line-height: 1.65;
 }

 /* ── CTA ── */
 .careers-cta {
     background: linear-gradient(135deg, #185ca5 0%, #1a6ec2 100%);
     padding: 90px 60px;
     text-align: center;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .careers-cta::before {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     background: rgba(255, 255, 255, 0.04);
     bottom: -150px;
     right: -100px;
 }

 .careers-cta h2 {
     font-family: 'Arial', sans-serif;
     font-size: 52px;
     letter-spacing: 3px;
     margin-bottom: 16px;
 }

 .careers-cta p {
     font-size: 16px;
     opacity: 0.85;
     max-width: 500px;
     margin: 0 auto 36px;
     line-height: 1.7;
 }



 @media (max-width: 991px) {
     nav {
         padding: 16px 24px;
     }

     .nav-links {
         display: none;
     }

     .careers-hero {
         padding: 60px 24px 70px;
     }

     .careers-hero h1 {
         font-size: 48px;
     }

     .why-section,
     .culture-strip,

     .process-section {
         padding: 60px 24px;
     }

     .process-steps {
         grid-template-columns: 1fr 1fr;
         gap: 40px;
     }

     .process-steps::before {
         display: none;
     }

     .careers-cta {
         padding: 70px 24px;
     }


 }


 /* ── INTRO STRIP ── */
 .sp-intro-strip {
     background: linear-gradient(135deg, #28beff18 0%, #3e80d520 50%, #3e80d530 100%);
     border-bottom: 1px solid rgba(24, 92, 165, 0.1);
     padding: 40px 0;
 }

 .sp-intro-strip h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 2rem;
     color: var(--primary-color);
     margin-bottom: 10px;
     font-weight: 650;
 }

 .sp-intro-strip p {
     color: var(--muted-color);
     font-size: 15px;
     max-width: 680px;
     line-height: 1.8;
     margin: 0;
 }

 /* ── SECTION LABEL ── */
 .sp-section-label {
     font-family: 'Poppins', sans-serif;
     font-size: 12px;
     letter-spacing: 0.25em;
     color: #ffff;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 6px;
 }

 .sp-section-label::before {
     content: '';
     width: 30px;
     height: 2px;
     background: #ffff;
     flex-shrink: 0;
 }

 .spp-section-label {
     font-family: 'Poppins', sans-serif;
     font-size: 12px;
     letter-spacing: 0.2rem;
     color: var(--primary-color);
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 6px;
 }

 .spp-section-label::before {
     content: '';
     width: 30px;
     height: 2px;
     background: var(--primary-color);
     flex-shrink: 0;
 }

 /* ── CARDS SECTION ── */
 .sp-card-section {
     padding: 60px 0 60px;
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
 }

 /* ── SERVICE CARD ── */
 .sp-service-card {
     background: #fff;
     padding: 30px 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     height: 100%;
     border: 1px solid rgb(147 186 228 / 59%);
 }

 .sp-service-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), #60a5fa);
 }

 .sp-service-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 /*  .sp-card-num {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 13px;
            letter-spacing: 0.2em;
            color: #acacac;
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
        }

        .sp-card-num::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--primary-color);
        }
*/
 .sp-card-icon {
     width: 45px;
     height: 45px;
     background: linear-gradient(135deg, #e8f1fb, #daeeff);
     border: 1px solid rgba(24, 92, 165, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     color: var(--primary-color);
     margin-bottom: 18px;
     transition: 0.3s ease;
 }

 .sp-service-card:hover .sp-card-icon {
     background: var(--primary-color);
     color: #fff;
 }

 .sp-card-heading {
     font-family: 'Poppins', sans-serif;
     font-size: 1.7rem;
     line-height: 1.05;
     color: var(--primary-color);
     margin-bottom: 12px;
     font-weight: 500;
 }

 .sp-card-body-text {
     font-size: 14.5px;
     line-height: 1.75;
     color: #585858;
     text-align: justify;
     margin-bottom: 22px;
 }

 .sp-expertise-label {
     font-family: 'Poppins', sans-serif;
     font-size: 11px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--primary-color);
     margin-bottom: 10px;
 }

 .sp-tag-group {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 22px;
 }

 .sp-tag-item {
     font-size: 10px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 5px 11px;
     border: 1px solid var(--primary-color);
     color: #575757;
     border-radius: 2px;
     transition: all 0.3s;
     font-weight: 500;
 }

 .sp-service-card:hover .sp-tag-item {
     background: rgba(24, 92, 165, 0.06);
 }

 .sp-why-block {
     border-top: 1px solid rgba(24, 92, 165, 0.2);
     padding-top: 14px;
     display: flex;
     gap: 14px;
     align-items: flex-start;
 }

 .sp-why-badge {
     flex-shrink: 0;
     font-size: 10px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #ffffff;
     margin-top: 3px;
     background-color: var(--primary-color);
     padding: 4px 7px;
     line-height: 1.4;
 }

 .sp-why-desc {
     font-size: 13px;
     line-height: 1.7;
     color: #646464;
     font-style: italic;
 }

 /* ── STATS STRIP ── */
 .sp-stats-strip {
     background: var(--primary-color);
     padding: 50px 0;
     color: #fff;
 }

 .sp-stat-item {
     text-align: center;
 }

 .sp-stat-number {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 3.2rem;
     letter-spacing: 0.05em;
     line-height: 1;
     color: #fff;
 }

 .sp-stat-label {
     font-size: 13px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     opacity: 0.7;
     margin-top: 4px;
 }

 .sp-stat-divider {
     width: 1px;
     height: 60px;
     background: rgba(255, 255, 255, 0.2);
     margin: auto;
 }

 /* ── CTA SECTION ── */
 .sp-cta-section {
     padding: 80px 0;
     background: #ffff;
 }

 .sp-cta-box {
     background: var(--primary-color);
     padding: 35px 30px;
     box-shadow: 0 20px 60px rgba(24, 92, 165, 0.1);
     border: 1px solid rgba(24, 92, 165, 0.12);
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .sp-cta-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), #60a5fa);
 }

 .sp-cta-box h2 {
     font-size: 1.97rem;
     color: #fff;
     margin-bottom: 14px;
 }

 .sp-cta-box p {
     color: #ffffff;
     font-size: 15px;
     max-width: 520px;
     margin: 0 auto 30px;
     line-height: 1.8;
 }

 .sp-btn-primary {
     background: #fff;
     color: var(--primary-color);
     border: none;
     padding: 13px 15px;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     transition: all 0.4s ease;
     text-decoration: none;
     display: inline-block;
 }

 .sp-btn-primary:hover {
     background: var(--primary-color);
     color: #fff;
     transform: translateY(-3px);
     box-shadow: 0 15px 35px rgba(24, 92, 165, 0.3);
 }

 .sp-btn-outline {
     background: transparent;
     color: #fff;
     border: 2px solid #fff;
     padding: 13px 15px;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     transition: all 0.4s ease;
     text-decoration: none;
     display: inline-block;
 }

 .sp-btn-outline:hover {
     background: #fff;
     color: var(--primary-color);
     transform: translateY(-3px);
 }

 .legal-sub {
     font-size: 20px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 10px;
 }

 @media (max-width: 768px) {
     .sp-hero-content h1 {
         font-size: 36px;
     }

     .sp-cta-box {
         padding: 40px 24px;
     }

     .sp-stat-divider {
         display: none;
     }
 }