:root {
             --clr-base: #5b58e2;
             --clr-base-light: #eeeeff;
             --clr-dark: #1c1d24;
             --clr-mid: #6b7280;
             --clr-section-alt: #f4f7fc;
             --clr-dark-navy: #1c2340;
             --clr-border: #e5e7eb;
         }

         *,
         *::before,
         *::after {
             box-sizing: border-box;
         }

         body {
             font-family: 'DM Sans', sans-serif;
             font-size: 16px;
             color: var(--clr-mid);
             background: #fff;
             line-height: 1.75;
         }

         h1,
         h2,
         h3,
         h4,
         h5 {
             font-family: 'DM Sans', sans-serif;
             color: var(--clr-dark);
             font-weight: 700;
             line-height: 1.2;
             letter-spacing: -0.5px;
         }

         .pill-badge {
             display: inline-block;
             background: var(--clr-base-light);
             color: var(--clr-base);
             font-size: 12px;
             font-weight: 700;
             letter-spacing: 0.07em;
             text-transform: uppercase;
             padding: 6px 20px;
             border-radius: 100px;
             margin-bottom: 20px;
         }

         .sec-title {
             font-size: clamp(26px, 3.5vw, 40px);
             font-weight: 700;
         }

         .sec-body {
             font-size: 16px;
             color: var(--clr-mid);
             line-height: 1.8;
         }

         /* SECTION BACKGROUNDS */
         .bg-white {
             background: #ffffff;
         }

         .bg-alt {
             background: var(--clr-section-alt);
         }

         .sec-body {
             font-size: 16px;
             color: var(--clr-mid);
             line-height: 1.8;
         }

         /* BUTTONS */
         .btn-base {
             background: var(--clr-base);
             color: #fff;
             border-radius: 50px;
             padding: 13px 32px;
             font-size: 15px;
             font-weight: 600;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
             gap: 8px;
             border: none;
             transition: all 0.25s;
         }

         .btn-base:hover {
             background: var(--clr-dark-navy);
             color: #fff;
         }

         .btn-outline {
             background: transparent;
             color: var(--clr-dark);
             border: 1.5px solid var(--clr-border);
             border-radius: 50px;
             padding: 12px 30px;
             font-size: 15px;
             font-weight: 600;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
             gap: 8px;
             transition: all 0.25s;
         }

         .btn-outline:hover {
             border-color: var(--clr-base);
             color: var(--clr-base);
         }

         /* ═══ PAGE BANNER ═══ */
         .page-banner {
             background: var(--clr-dark-navy);
             padding: 160px 0 140px;
             text-align: center;
             position: relative;
             overflow: hidden;
         }

         .page-banner::before {
             content: '';
             position: absolute;
             inset: 0;
             background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(91, 88, 226, 0.2) 0%, transparent 65%);
         }

         .page-banner::after {
             content: 'AUTOMOTIVE';
             position: absolute;
             bottom: -20px;
             left: 50%;
             transform: translateX(-50%);
             font-size: clamp(40px, 9vw, 120px);
             font-weight: 800;
             color: rgba(255, 255, 255, 0.04);
             letter-spacing: 6px;
             white-space: nowrap;
             pointer-events: none;
         }

         .page-banner .breadcrumb-wrap {
             font-size: 12px;
             color: rgba(255, 255, 255, 0.4);
             letter-spacing: 0.06em;
             text-transform: uppercase;
             margin-bottom: 20px;
         }

         .page-banner .breadcrumb-wrap a {
             color: rgba(255, 255, 255, 0.4);
             text-decoration: none;
         }

         .page-banner .breadcrumb-wrap span {
             color: rgba(255, 255, 255, 0.7);
         }

         .page-banner h1 {
             font-size: clamp(1.8rem, 4.5vw, 3.2rem);
             font-weight: 700;
             color: #fff;
             line-height: 1.2;
             max-width: 780px;
             margin: 0 auto 20px;
             letter-spacing: -0.5px;
         }

         .page-banner p {
             font-size: 16px;
             color: rgba(255, 255, 255, 0.55);
             max-width: 680px;
             margin: 0 auto 36px;
             line-height: 1.8;
         }

         /* ═══ SECTION 1 — INTRO ═══ */
         .intro-section {
             padding: 100px 0;
         }

         .intro-visual {
             background: var(--clr-section-alt);
             border-radius: 16px;
             padding: 50px 36px;
             text-align: center;
         }

         .xr-badge {
             width: 120px;
             height: 120px;
             background: var(--clr-base);
             border-radius: 16px;
             display: inline-flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             color: #fff;
             margin-bottom: 20px;
         }

         .xr-badge .big {
             font-size: 2.8rem;
             font-weight: 800;
             line-height: 1;
         }

         .xr-badge .small {
             font-size: 12px;
             opacity: 0.8;
         }

         .intro-chip {
             display: flex;
             align-items: center;
             gap: 8px;
             background: #fff;
             border: 1px solid var(--clr-border);
             border-radius: 50px;
             padding: 10px 18px;
             font-size: 13px;
             color: var(--clr-mid);
             margin-top: 12px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         }

         .intro-chip i {
             color: var(--clr-base);
         }

         /* ═══ SECTION 2 — CAPABILITIES TAB ═══ */
         .cap-section {
             padding: 100px 0;
         }

         .cap-tab-nav {
             display: flex;
             flex-direction: column;
             gap: 4px;
         }

         .cap-tab-btn {
             display: flex;
             align-items: center;
             gap: 14px;
             padding: 16px 20px;
             border-radius: 10px;
             background: transparent !important;
             border: none !important;
             cursor: pointer;
             text-align: left;
             width: 100%;
             transition: all 0.25s;
             font-family: 'DM Sans', sans-serif;
         }

         .cap-tab-btn:hover {
             background: var(--clr-base-light) !important;
         }

         .cap-tab-btn.active {
             background: var(--clr-base-light) !important;
             border-left: 3px solid var(--clr-base) !important;
             border-radius: 10px !important;
         }

         /* icon stays white bg with purple icon on active */
         /* icon stays white bg with purple icon on hover */
         .cap-tab-btn .tab-icon {
             width: 42px;
             height: 42px;
             background: var(--clr-base-light);
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--clr-base) !important;
             font-size: 1.1rem;
             flex-shrink: 0;
         }

         .cap-tab-btn span {
             font-size: 15px;
             font-weight: 600;
             color: var(--clr-dark);
         }

         .cap-tab-content {
             background: #fff;
             border-radius: 14px;
             padding: 40px;
             height: 100%;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
         }

         .cap-tab-content h4 {
             font-size: 22px;
             margin-bottom: 14px;
         }

         .cap-tab-content p {
             font-size: 15px;
             color: var(--clr-mid);
             margin-bottom: 16px;
             line-height: 1.8;
         }

         .cap-panel {
             display: none;
         }

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

         .op-advantage {
             display: flex;
             align-items: flex-start;
             gap: 12px;
             background: var(--clr-base-light);
             border-left: 3px solid var(--clr-base);
             border-radius: 8px;
             padding: 14px 18px;
             font-size: 14px;
             color: var(--clr-dark);
             margin-top: 20px;
         }

         .op-advantage i {
             color: var(--clr-base);
             flex-shrink: 0;
             font-size: 1rem;
             margin-top: 2px;
         }

         /* CHECK LIST */
         .check-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }

         .check-list li {
             display: flex;
             align-items: flex-start;
             gap: 10px;
             font-size: 15px;
             color: var(--clr-dark);
             font-weight: 500;
             margin-bottom: 12px;
         }

         .check-list li i {
             color: var(--clr-base);
             margin-top: 3px;
             flex-shrink: 0;
         }

         /* ═══ SECTION 3 — WHY ═══ */
         .why-section {
             padding: 100px 0;
         }

         .why-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }

         .why-list li {
             display: flex;
             align-items: center;
             gap: 16px;
             padding: 18px 0;
             border-bottom: 1px solid var(--clr-border);
             font-size: 16px;
             font-weight: 500;
             color: var(--clr-dark);
         }

         .why-list li:last-child {
             border-bottom: none;
         }

         .why-list li .why-icon {
             width: 40px;
             height: 40px;
             min-width: 40px;
             background: var(--clr-base-light);
             border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--clr-base);
             font-size: 1rem;
         }

         /* ═══ SECTION 4 — CTA ═══ */
         .cta-bar {
             background: var(--clr-dark-navy);
             padding: 100px 0;
             text-align: center;
         }

         .cta-bar h2 {
             font-size: clamp(1.8rem, 3.5vw, 2.8rem);
             font-weight: 700;
             color: #fff;
             margin: 0 0 16px;
             line-height: 1.3;
         }

         .cta-bar p {
             font-size: 16px;
             color: rgba(255, 255, 255, 0.5);
             max-width: 500px;
             margin: 0 auto 36px;
             line-height: 1.8;
         }

         /* REVEAL */
         .reveal {
             opacity: 0;
             transform: translateY(28px);
             transition: opacity 0.6s ease, transform 0.6s ease;
         }

         .reveal.show {
             opacity: 1;
             transform: none;
         }

         @media (max-width: 767px) {
             .page-banner {
                 padding: 120px 0 100px;
             }

             .cap-tab-content {
                 padding: 24px;
             }
         }