/* ============================================================
     RESET & VARIABLES
  ============================================================ */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 :root {
   --gold: #C89B3C;
   --gold-l: #E8B84B;
   --gold-d: #9A7320;
   --charcoal: #2D3748;
   --charcoal-dk: #1A202C;
   --slate: #4A5568;
   --white: #FFFFFF;
   --off-white: #F8F7F4;
   --light: #EDF2F7;
   --border-g: rgba(200, 155, 60, .22);
   --sh-gold: 0 8px 32px rgba(200, 155, 60, .28);
   --sh-md: 0 12px 40px rgba(0, 0, 0, .14);
 }

 html {
   scroll-behavior: smooth;
   overflow-x: hidden;
 }

 body {
   font-family: 'Montserrat', sans-serif;
   color: var(--charcoal);
   background: #fff;
   overflow-x: hidden;
   overflow-y: auto;

   h1,
   h2,
   h3,
   h4,
   h5 {
     font-family: 'Roboto', sans-serif;
   }

   a {
     text-decoration: none;
     color: inherit;
   }

   img {
     max-width: 100%;
     display: block;
   }

   ::-webkit-scrollbar {
     width: 5px;
   }

   ::-webkit-scrollbar-track {
     background: #0d1018;
   }

   ::-webkit-scrollbar-thumb {
     background: var(--gold);
     border-radius: 3px;
   }
 }

 /* ============================================================ UTILITIES */
 .container {
   max-width: 1366px;
   margin: 0 auto;
   padding: 0 48px;
 }

 .section-tag {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 3.5px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 14px;
 }

 .section-tag::before {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
   flex-shrink: 0;
 }

 .section-title {
   font-size: clamp(26px, 3.8vw, 44px);
   font-weight: 900;
   line-height: 1.12;
   color: var(--charcoal-dk);
 }

 .section-title span {
   color: var(--gold);
 }

 .gold-bar {
   width: 50px;
   height: 3px;
   background: var(--gold);
   border-radius: 2px;
   margin: 14px 0 20px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 28px;
   border-radius: 3px;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   cursor: pointer;
   border: none;
   transition: all .3s ease;
 }

 .btn-gold {
   background: var(--gold);
   color: #fff;
 }

 .btn-gold:hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 .btn-outline {
   background: transparent;
   color: var(--gold-l);
   border: 1px solid var(--gold);
 }

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

 .btn-dark {
   background: var(--charcoal-dk);
   color: #fff;
 }

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

 /* ============================================================ HEADER */
 #header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   transition: all .4s ease;
 }

 .hdr-top {
   background: var(--gold);
   padding: 7px 0;
   font-size: 11.5px;
   font-weight: 600;
   color: var(--charcoal-dk);
   overflow: hidden;
   transition: max-height .35s ease, opacity .35s ease, padding .35s ease;
   max-height: 40px;
 }

 .hdr-top .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .hdr-top a {
   color: var(--charcoal-dk);
   font-weight: 700;
 }

 .hdr-top a:hover {
   opacity: .7;
 }

 .hdr-top-links {
   display: flex;
   gap: 22px;
 }

 #header.scrolled .hdr-top {
   max-height: 0;
   opacity: 0;
   padding: 0;
 }

 .hdr-main {
   background: rgba(12, 16, 28, .52);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(255, 255, 255, .07);
   transition: background .4s ease, box-shadow .4s ease;
 }

 #header.scrolled .hdr-main {
   background: rgba(12, 16, 28, .93);
   box-shadow: 0 4px 32px rgba(0, 0, 0, .4);
 }

 .hdr-main .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 11px;
 }

 .logo img {
   height: 50px;
   width: auto;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
 }

 .logo-name {
   font-family: 'Roboto', sans-serif;
   font-weight: 900;
   font-size: 17px;
   color: #fff;
   letter-spacing: 1px;
   line-height: 1;
 }

 .logo-name em {
   color: var(--gold);
   font-style: normal;
 }

 .logo-sub {
   font-size: 8px;
   letter-spacing: 4.5px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-top: 3px;
   display: block;
 }

 .main-nav {
   display: flex;
   align-items: center;
   gap: 1px;
 }

 .main-nav a {
   padding: 7px 11px;
   font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, .78);
   border-radius: 3px;
   transition: color .2s;
   position: relative;
 }

 .main-nav a::after {
   content: '';
   position: absolute;
   bottom: 3px;
   left: 11px;
   right: 11px;
   height: 1.5px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .25s ease;
 }

 .main-nav a:hover {
   color: #fff;
 }

 .main-nav a:hover::after,
 .main-nav a.active::after {
   transform: scaleX(1);
 }

 .main-nav a.active {
   color: var(--gold);
 }

 .hdr-right {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 #hdrBtn {
   display: none;
 }

 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 6px;
 }

 .hamburger span {
   display: block;
   width: 22px;
   height: 2px;
   background: #fff;
   transition: all .3s;
 }

 @media(max-width:1100px) {
   .main-nav a {
     padding: 7px 8px;
     font-size: 11px;
   }
 }

 @media(max-width:960px) {
   .main-nav {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   #hdrBtn {
     display: none !important;
   }

   .hdr-top .container {
     flex-direction: column;
     gap: 3px;
     text-align: center;
     font-size: 10.5px;
   }

   .hdr-top-links {
     gap: 12px;
     justify-content: center;
   }
 }

 /* MOBILE MENU */
 .mob-menu {
   display: none;
   position: fixed;
   inset: 0;
   background: var(--charcoal-dk);
   z-index: 1100;
   flex-direction: column;
   padding: 88px 32px 40px;
   gap: 4px;
   overflow-y: auto;
 }

 .mob-menu.open {
   display: flex;
 }

 .mob-menu a {
   font-size: 20px;
   font-weight: 800;
   color: rgba(255, 255, 255, .85);
   padding: 13px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
   font-family: 'Roboto', sans-serif;
   transition: color .2s;
 }

 .mob-menu a:hover {
   color: var(--gold);
 }

 .mob-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(255, 255, 255, .08);
   border: none;
   cursor: pointer;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   color: #fff;
   font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ============================================================ HERO */
 #hero {
   position: relative;
   height: 100svh;
   min-height: 560px;
   overflow: hidden;
 }

 .slide-track {
   position: absolute;
   inset: 0;
   display: flex;
   transition: transform .9s cubic-bezier(.77, 0, .175, 1);
 }

 .slide {
   min-width: 100%;
   height: 100%;
   position: relative;
   flex-shrink: 0;
   overflow: hidden;
 }

 .s-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   transform: scale(1.07);
   transition: transform 8s ease;
 }

 .slide.active .s-bg {
   transform: scale(1);
 }

 .s-dark {
   position: absolute;
   inset: 0;
   background: rgba(5, 10, 20, .52);
 }

 .s-grad {
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg, rgba(5, 10, 20, .93) 0%, rgba(5, 10, 20, .6) 18%, rgba(5, 10, 20, .1) 40%);
 }

 .s-gold {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 78% 65%, rgba(200, 155, 60, .12) 0%, transparent 55%);
 }

 .s-body {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
 }

 .s-body .container {
   width: 100%;
 }

 .s-eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10.5px;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-bottom: 20px;
 }

 .s-eyebrow::before {
   content: '';
   width: 36px;
   height: 1.5px;
   background: var(--gold);
   flex-shrink: 0;
 }

 .s-h1 {
   font-size: clamp(30px, 5vw, 64px);
   font-weight: 900;
   color: #fff;
   line-height: 1.07;
   margin-bottom: 18px;
   max-width: 680px;
   text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
 }

 .s-h1 .gc {
   color: var(--gold);
 }

 .s-p {
   font-size: 14.5px;
   color: rgba(255, 255, 255, .7);
   max-width: 460px;
   line-height: 1.82;
   margin-bottom: 30px;
   font-weight: 300;
 }

 .s-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .s-stats {
   display: flex;
   margin-top: 48px;
   padding-top: 28px;
   border-top: 1px solid rgba(255, 255, 255, .12);
 }

 .s-stat {
   padding-right: 30px;
   margin-right: 30px;
   border-right: 1px solid rgba(255, 255, 255, .12);
 }

 .s-stat:last-child {
   border: none;
   margin: 0;
   padding: 0;
 }

 .s-num {
   font-family: 'Roboto', sans-serif;
   font-size: 28px;
   font-weight: 900;
   color: var(--gold);
   line-height: 1;
 }

 .s-lbl {
   font-size: 9.5px;
   color: rgba(255, 255, 255, .5);
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-top: 5px;
 }

 .slide-dots {
   position: absolute;
   bottom: 28px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 10;
 }

 .sdot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .3);
   cursor: pointer;
   transition: all .3s;
 }

 .sdot.on {
   background: var(--gold);
   width: 26px;
   border-radius: 4px;
 }

 .slide-arrows {
   position: absolute;
   bottom: 20px;
   right: 40px;
   display: flex;
   gap: 8px;
   z-index: 10;
 }

 .sarrow {
   width: 42px;
   height: 42px;
   border-radius: 3px;
   border: 1.5px solid rgba(255, 255, 255, .2);
   background: transparent;
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   transition: all .3s;
 }

 .sarrow:hover {
   background: var(--gold);
   border-color: var(--gold);
 }

 .scroll-cue {
   position: absolute;
   bottom: 28px;
   left: 40px;
   z-index: 10;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 10px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .35);
 }

 .sc-line {
   width: 36px;
   height: 1px;
   background: rgba(255, 255, 255, .2);
   position: relative;
   overflow: hidden;
 }

 .sc-line::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 0;
   height: 100%;
   background: var(--gold);
   /* default no animation; active class controls one-pass progress */
 }

 .sc-line.active::after {
   animation: sline var(--sline-duration, 5.8s) linear forwards;
 }

 @keyframes sline {
   0% {
     width: 0;
   }

   100% {
     width: 100%;
   }
 }

 @media(max-width:768px) {
   .container {
     padding: 0 20px;
   }

   .s-h1 {
     font-size: clamp(26px, 8vw, 40px);
     max-width: 100%;
   }

   .s-p {
     font-size: 13px;
     max-width: 100%;
     margin-bottom: 22px;
   }

   .s-stats {
     flex-wrap: wrap;
     margin-top: 28px;
     padding-top: 20px;
   }

   .s-stat {
     padding-right: 18px;
     margin-right: 18px;
     margin-bottom: 6px;
   }

   .s-num {
     font-size: 22px;
   }

   .slide-arrows,
   .scroll-cue {
     display: none;
   }

   .slide-dots {
     bottom: 18px;
   }

   .s-eyebrow {
     font-size: 9.5px;
     letter-spacing: 2.5px;
     margin-top: 100px;
   }

   #hero {
     height: calc(100svh - 70px);
     min-height: 500px;
   }
 }

 @media(max-width:480px) {
   .btn-outline {
     display: none;
   }

   .s-h1 {
     font-size: clamp(23px, 7.5vw, 34px);
   }
 }

 /* ============================================================ ACTIVITY */
 #activity {
   padding: 110px 0;
   background: var(--charcoal-dk);
   position: relative;
   overflow: hidden;
 }

 #activity::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .act-wm {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: 'Roboto', sans-serif;
   font-size: clamp(100px, 16vw, 220px);
   font-weight: 900;
   color: rgba(255, 255, 255, .022);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
 }

 .act-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
   position: relative;
 }

 .act-left .section-tag {
   color: var(--gold-l);
 }

 .act-left .section-title {
   color: #fff;
 }

 .act-desc {
   font-size: 14px;
   line-height: 1.88;
   color: rgba(255, 255, 255, .52);
   margin: 0 0 32px;
   font-weight: 300;
 }

 .steps {
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .step {
   display: flex;
   gap: 15px;
   align-items: flex-start;
   padding: 8px 16px;
   border-radius: 8px;
   border: 1px solid transparent;
   transition: border-color .3s, background .3s;
 }

 .step:hover {
   background: rgba(200, 155, 60, .06);
   border-color: rgba(200, 155, 60, .2);
 }

 .step-n {
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border-radius: 4px;
   background: rgba(200, 155, 60, .14);
   border: 1px solid rgba(200, 155, 60, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   font-weight: 900;
   color: var(--gold);
 }

 .step-info h4 {
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 3px;
 }

 .step-info p {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .45);
   line-height: 1.65;
   font-weight: 300;
 }

 /* Ship card */
 .ship-card {
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
 }

 .ship-banner {
   height: 350px;
   overflow: hidden;
   position: relative;
 }

 .ship-banner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(.75);
 }

 .ship-banner::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 35%, rgba(12, 18, 30, .92));
 }

 .ship-banner-info {
   position: absolute;
   bottom: 14px;
   left: 18px;
   right: 18px;
   z-index: 2;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
 }

 .ship-title {
   font-size: 15px;
   font-weight: 800;
   color: #fff;
 }

 .ship-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .5);
   margin-top: 2px;
 }

 .live-badge {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 10px;
   font-weight: 700;
   color: #4ade80;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 .live-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #4ade80;
   animation: blink 1.8s infinite;
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1
   }

   50% {
     opacity: .3
   }
 }

 .ship-body {
   padding: 22px 24px;
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .c-lbl {
   font-size: 9.5px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 7px;
 }

 .c-row {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 5px;
 }

 .cb {
   height: 32px;
   border-radius: 2px;
   position: relative;
   overflow: hidden;
   transition: transform .2s;
 }

 .cb:hover {
   transform: scaleY(1.12);
 }

 .cb::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 40%;
   background: rgba(255, 255, 255, .14);
 }

 .cb-g {
   background: #C89B3C
 }

 .cb-b {
   background: #3B82F6
 }

 .cb-r {
   background: #EF4444
 }

 .cb-s {
   background: #64748B
 }

 .cb-n {
   background: #22C55E
 }

 .cb-e {
   background: transparent;
   border: 1px dashed rgba(255, 255, 255, .1)
 }

 .ship-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
 }

 .ss {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 8px;
   padding: 12px;
   text-align: center;
 }

 .ss .v {
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   font-weight: 900;
   color: var(--gold);
 }

 .ss .l {
   font-size: 9.5px;
   color: rgba(255, 255, 255, .4);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 3px;
 }

 .route-strip {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 8px;
   padding: 12px 16px;
 }

 .rc {
   font-size: 12.5px;
   font-weight: 800;
   color: #fff;
 }

 .rc small {
   display: block;
   font-size: 9.5px;
   color: rgba(255, 255, 255, .35);
   font-weight: 400;
 }

 .rline {
   flex: 1;
   height: 2px;
   background: rgba(255, 255, 255, .08);
   position: relative;
 }

 .rdot {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 9px;
   height: 9px;
   background: var(--gold);
   border-radius: 50%;
   animation: travel 3.5s ease-in-out infinite;
 }

 @keyframes travel {
   0% {
     left: 0
   }

   100% {
     left: 95%
   }
 }

 @media(max-width:900px) {
   .act-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }
 }

 @media(max-width:600px) {
   #activity {
     padding: 80px 0;
   }
 }

 /* ============================================================ CARS */
 #cars {
   padding: 110px 0;
   background: var(--off-white);
 }

 .cars-hdr {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 46px;
   flex-wrap: wrap;
   gap: 16px;
 }

 .car-filters {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
 }

 .fil {
   padding: 7px 16px;
   border-radius: 30px;
   font-size: 11.5px;
   font-weight: 700;
   border: 1.5px solid var(--border-g);
   background: transparent;
   color: var(--slate);
   cursor: pointer;
   transition: all .25s;
   font-family: 'Montserrat', sans-serif;
 }

 .fil.on,
 .fil:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
 }

 .cars-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
 }

 /* --- CARD --- */
 .car-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 18px rgba(0, 0, 0, .07);
   transition: transform .35s, box-shadow .35s;
   position: relative;
 }

 .car-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 56px rgba(0, 0, 0, .13);
 }

 .cbadge {
   position: absolute;
   top: 13px;
   left: 13px;
   z-index: 5;
   padding: 3px 11px;
   border-radius: 30px;
   font-size: 9.5px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
 }

 .b-new {
   background: var(--gold);
   color: #fff
 }

 .b-hot {
   background: #EF4444;
   color: #fff
 }

 .b-sale {
   background: #22C55E;
   color: #fff
 }

 /* Card image slider */
 .cimg-wrap {
   position: relative;
   height: 270px;
   background: #1a202c;
   overflow: hidden;
   cursor: grab;
   touch-action: pan-y;
   -webkit-touch-callout: none;
   -webkit-user-drag: none;
 }

 .cimg-track {
   will-change: transform;
   transition: transform .35s ease;
   display: flex;
   height: 100%;
   transition: transform .45s cubic-bezier(.77, 0, .175, 1);
 }

 .cimg-slide {
   min-width: 100%;
   height: 100%;
   flex-shrink: 0;
   overflow: hidden;
 }

 .cimg-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
   min-width: 100%;
   min-height: 100%;
   pointer-events: none;
   display: block;
 }

 /* arrow buttons */
 .ci-prev,
 .ci-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 6;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   border: none;
   cursor: pointer;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   opacity: 0;
   transition: opacity .25s;
 }

 .ci-prev {
   left: 10px;
 }

 .ci-next {
   right: 10px;
 }

 .cimg-wrap:hover .ci-prev,
 .cimg-wrap:hover .ci-next {
   opacity: 1;
 }

 .ci-prev:hover,
 .ci-next:hover {
   background: var(--gold);
 }

 /* dots */
 .ci-dots {
   position: absolute;
   bottom: 8px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 5px;
   z-index: 5;
 }

 .ci-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .4);
   transition: all .25s;
 }

 .ci-dot.on {
   background: var(--gold);
   width: 14px;
   border-radius: 3px;
 }

 .cbody {
   padding: 20px;
 }

 .c-make {
   font-size: 10.5px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-bottom: 3px;
 }

 .c-name {
   font-size: 19px;
   font-weight: 900;
   color: var(--charcoal-dk);
   margin-bottom: 3px;
 }

 .c-year {
   font-size: 12px;
   color: var(--slate);
 }

 .c-specs {
   display: flex;
   gap: 13px;
   margin: 13px 0;
   padding: 12px 0;
   border-top: 1px solid var(--light);
   border-bottom: 1px solid var(--light);
   flex-wrap: wrap;
 }

 .cspec {
   font-size: 11.5px;
   color: var(--slate);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .c-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 13px;
 }

 .c-price {
   font-family: 'Roboto', sans-serif;
   font-size: 20px;
   font-weight: 900;
   color: var(--charcoal-dk);
 }

 .c-price small {
   font-size: 11px;
   color: var(--slate);
   display: block;
   font-weight: 400;
   margin-top: 1px;
 }

 .c-btn {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--gold);
   border: none;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   cursor: pointer;
   transition: all .25s;
 }

 .c-btn:hover {
   background: var(--gold-d);
   transform: scale(1.1);
 }

 .cars-more {
   text-align: center;
   margin-top: 46px;
 }

 @media(max-width:1000px) {
   .cars-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:620px) {
   .cars-grid {
     grid-template-columns: 1fr;
   }
 }

 /* ============================================================ SERVICES */
 #services {
   padding: 110px 0;
   background: #fff;
   position: relative;
 }

 #services::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .svc-intro {
   text-align: center;
   max-width: 560px;
   margin: 0 auto 58px;
 }

 .svc-intro .section-tag {
   justify-content: center;
 }

 .svc-intro .section-tag::before {
   display: none;
 }

 .svc-intro .section-tag::after {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
 }

 .svc-intro p {
   font-size: 14px;
   color: var(--slate);
   line-height: 1.8;
   margin-top: 14px;
   font-weight: 300;
 }

 .svc-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .svc-card {
   padding: 30px 22px;
   border-radius: 10px;
   border: 1px solid var(--light);
   transition: all .35s;
   position: relative;
   overflow: hidden;
   background-color: var(--off-white);
 }

 .svc-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2.5px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .35s;
 }

 .svc-card:hover {
   border-color: var(--gold);
   transform: translateY(-5px);
   box-shadow: var(--sh-gold);
   background-color: var(--white);
 }

 .svc-card:hover::after {
   transform: scaleX(1);
 }

 .svc-card:hover .svc-ico {
   background: var(--light);
 }

 .svc-ico {
   width: 56px;
   height: 56px;
   border-radius: 10px;
   background: rgba(200, 155, 60, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   margin-bottom: 16px;
   transition: background .3s;
 }

 .svc-title {
   font-size: 15.5px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 9px;
 }

 .svc-text {
   font-size: 13px;
   color: var(--slate);
   line-height: 1.75;
   font-weight: 300;
 }

 @media(max-width:1100px) {
   .svc-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:600px) {
   .svc-grid {
     grid-template-columns: 1fr;
   }
 }



 /* ============================================================ ANIMATIONS */
 .reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal:nth-child(2) {
   transition-delay: .08s
 }

 .reveal:nth-child(3) {
   transition-delay: .16s
 }

 .reveal:nth-child(4) {
   transition-delay: .24s
 }

 .reveal:nth-child(5) {
   transition-delay: .30s
 }

 .reveal:nth-child(6) {
   transition-delay: .36s
 }

 .reveal:nth-child(7) {
   transition-delay: .42s
 }

 .reveal:nth-child(8) {
   transition-delay: .48s
 }


 /* ============================================================ PAGE BANNER */
 .page-banner {
   position: relative;
   height: 420px;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
 }

 .pb-bg {
   position: absolute;
   inset: 0;
   background-image: url('../img/page-banner.webp');
   background-size: cover;
   background-position: center 40%;
   transform: scale(1.04);
 }

 .pb-dark {
   position: absolute;
   inset: 0;
   background: rgba(5, 10, 20, .62);
 }

 .pb-grad {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(5, 10, 20, .25) 0%, rgba(5, 10, 20, .75) 100%);
 }

 .pb-gold {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 20% 80%, rgba(200, 155, 60, .14) 0%, transparent 55%);
 }

 .pb-accent {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--gold) 0%, var(--gold-l) 50%, var(--gold) 100%);
 }

 .pb-content {
   position: relative;
   z-index: 2;
   width: 100%;
   padding-bottom: 52px;
 }

 .breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 500;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 14px;
 }

 .breadcrumb a {
   color: rgba(255, 255, 255, .5);
   transition: color .2s;
 }

 .breadcrumb a:hover {
   color: var(--gold);
 }

 .breadcrumb .sep {
   color: rgba(255, 255, 255, .25);
   font-size: 10px;
 }

 .breadcrumb .current {
   color: var(--gold);
   font-weight: 700;
 }

 .pb-title {
   font-size: clamp(36px, 5vw, 62px);
   font-weight: 900;
   color: #fff;
   line-height: 1.06;
   text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
 }

 .pb-title span {
   color: var(--gold);
 }

 .pb-subtitle {
   font-size: 14.5px;
   color: rgba(255, 255, 255, .6);
   font-weight: 300;
   margin-top: 10px;
   max-width: 480px;
   line-height: 1.7;
 }

 @media(max-width:768px) {
   .page-banner {
     height: 300px;
   }

   .pb-content {
     padding-bottom: 32px;
   }

   .pb-subtitle {
     display: none;
   }
 }

 /* ============================================================ CARS SECTION */
 #cars {
   padding: 80px 0 100px;
   background: var(--off-white);
 }

 /* Filter + sort bar */
 .cars-controls {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   background: #fff;
   border: 1px solid var(--light);
   border-radius: 8px;
   padding: 16px 20px;
   margin-bottom: 32px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
 }

 .ctrl-label {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--slate);
   margin-right: 4px;
 }

 .car-filters {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   flex: 1;
 }

 .fil {
   padding: 7px 16px;
   border-radius: 30px;
   font-size: 11.5px;
   font-weight: 700;
   border: 1.5px solid var(--border-g);
   background: transparent;
   color: var(--slate);
   cursor: pointer;
   transition: all .25s;
   font-family: 'Montserrat', sans-serif;
   white-space: nowrap;
 }

 .fil.on,
 .fil:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
 }

 .ctrl-divider {
   width: 1px;
   height: 28px;
   background: var(--light);
   flex-shrink: 0;
 }

 .sort-sel {
   padding: 8px 14px;
   border-radius: 6px;
   border: 1.5px solid var(--border-g);
   background: #fff;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 600;
   color: var(--charcoal);
   outline: none;
   cursor: pointer;
   transition: border-color .25s;
 }

 .sort-sel:focus {
   border-color: var(--gold);
 }

 /* Grid */
 .cars-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
 }

 /* ---- CARD ---- */
 .car-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 18px rgba(0, 0, 0, .07);
   transition: transform .35s, box-shadow .35s;
   position: relative;
 }

 .car-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 56px rgba(0, 0, 0, .13);
 }

 .cbadge {
   position: absolute;
   top: 13px;
   left: 13px;
   z-index: 5;
   padding: 3px 11px;
   border-radius: 30px;
   font-size: 9.5px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
 }

 .b-new {
   background: var(--gold);
   color: #fff;
 }

 .b-hot {
   background: #EF4444;
   color: #fff;
 }

 .b-sale {
   background: #22C55E;
   color: #fff;
 }

 .b-pre {
   background: var(--charcoal-dk);
   color: #fff;
 }

 /* Card image slider */
 .cimg-wrap {
   position: relative;
   height: 250px;
   background: #1a202c;
   overflow: hidden;
   cursor: grab;
   touch-action: pan-y;
   -webkit-touch-callout: none;
   -webkit-user-drag: none;
 }

 .cimg-track {
   will-change: transform;
   transition: transform .35s ease;
   display: flex;
   height: 100%;
   transition: transform .45s cubic-bezier(.77, 0, .175, 1);
 }

 .cimg-slide {
   min-width: 100%;
   height: 100%;
   flex-shrink: 0;
   overflow: hidden;
 }

 .cimg-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
   min-width: 100%;
   min-height: 100%;
   pointer-events: none;
   display: block;
 }

 .ci-prev,
 .ci-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 6;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   border: none;
   cursor: pointer;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   opacity: 0;
   transition: opacity .25s;
 }

 .ci-prev {
   left: 10px;
 }

 .ci-next {
   right: 10px;
 }

 .cimg-wrap:hover .ci-prev,
 .cimg-wrap:hover .ci-next {
   opacity: 1;
 }

 .ci-prev:hover,
 .ci-next:hover {
   background: var(--gold);
 }

 .ci-dots {
   position: absolute;
   bottom: 8px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 5px;
   z-index: 5;
 }

 .ci-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .4);
   transition: all .25s;
 }

 .ci-dot.on {
   background: var(--gold);
   width: 14px;
   border-radius: 3px;
 }

 .cbody {
   padding: 20px;
 }

 .c-make {
   font-size: 10.5px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-bottom: 3px;
 }

 .c-name {
   font-size: 19px;
   font-weight: 900;
   color: var(--charcoal-dk);
   margin-bottom: 3px;
 }

 .c-year {
   font-size: 12px;
   color: var(--slate);
 }

 .c-specs {
   display: flex;
   gap: 13px;
   margin: 13px 0;
   padding: 12px 0;
   border-top: 1px solid var(--light);
   border-bottom: 1px solid var(--light);
   flex-wrap: wrap;
 }

 .cspec {
   font-size: 11.5px;
   color: var(--slate);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .c-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 13px;
 }

 .c-price {
   font-family: 'Roboto', sans-serif;
   font-size: 20px;
   font-weight: 900;
   color: var(--charcoal-dk);
 }

 .c-price small {
   font-size: 11px;
   color: var(--slate);
   display: block;
   font-weight: 400;
   margin-top: 1px;
 }

 .c-btn {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--gold);
   border: none;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   cursor: pointer;
   transition: all .25s;
 }

 .c-btn:hover {
   background: var(--gold-d);
   transform: scale(1.1);
 }

 /* Pagination */
 .pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 56px;
 }

 .pg-btn {
   width: 40px;
   height: 40px;
   border-radius: 6px;
   border: 1.5px solid var(--border-g);
   background: #fff;
   color: var(--charcoal);
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: all .25s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .pg-btn:hover {
   border-color: var(--gold);
   color: var(--gold);
 }

 .pg-btn.on {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
 }

 .pg-btn.arrow {
   font-size: 16px;
 }

 .pg-btn:disabled {
   opacity: .35;
   cursor: not-allowed;
 }

 @media(max-width:1000px) {
   .cars-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:620px) {
   .cars-grid {
     grid-template-columns: 1fr;
   }

   .cars-controls {
     flex-direction: column;
     align-items: flex-start;
   }

   .ctrl-divider {
     display: none;
   }

   .car-card {
     width: 100%;
     max-width: 100%;
   }

   .cimg-wrap {
     height: 200px;
   }

   .cimg-slide img {
     object-fit: cover;
     width: 100%;
     height: 100%;
   }

   .cbody {
     padding: 16px !important;
   }

   .c-make {
     font-size: 12px !important;
     margin-bottom: 2px !important;
   }

   .c-name {
     font-size: 16px !important;
     line-height: 1.3 !important;
     margin-bottom: 8px !important;
   }

   .c-specs {
     font-size: 14px !important;
     margin-bottom: 12px !important;
   }

   .c-foot {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
   }

   .c-price {
     font-size: 18px !important;
   }

   .c-price small {
     font-size: 12px !important;
     display: block !important;
   }

   .c-btn {
     width: 40px !important;
     height: 40px !important;
     font-size: 16px !important;
   }
 }

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

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal:nth-child(1) {
   transition-delay: 0s
 }

 .reveal:nth-child(2) {
   transition-delay: .07s
 }

 .reveal:nth-child(3) {
   transition-delay: .14s
 }

 .reveal:nth-child(4) {
   transition-delay: .21s
 }

 .reveal:nth-child(5) {
   transition-delay: .28s
 }

 .reveal:nth-child(6) {
   transition-delay: .35s
 }

 .reveal:nth-child(7) {
   transition-delay: .0s
 }

 .reveal:nth-child(8) {
   transition-delay: .07s
 }

 .reveal:nth-child(9) {
   transition-delay: .14s
 }

 .reveal:nth-child(10) {
   transition-delay: .21s
 }

 .reveal:nth-child(11) {
   transition-delay: .28s
 }

 .reveal:nth-child(12) {
   transition-delay: .35s
 }

 /* ============================================================
     REVEAL ANIMATION
  ============================================================ */
 .reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal:nth-child(2) {
   transition-delay: .08s
 }

 .reveal:nth-child(3) {
   transition-delay: .16s
 }

 .reveal:nth-child(4) {
   transition-delay: .24s
 }

 .reveal:nth-child(5) {
   transition-delay: .30s
 }

 .reveal:nth-child(6) {
   transition-delay: .36s
 }

 .reveal:nth-child(7) {
   transition-delay: .42s
 }

 .reveal:nth-child(8) {
   transition-delay: .48s
 }

 /* ============================================================
     ABOUT – INTRO
  ============================================================ */
 #about-intro {
   padding: 100px 0;
   background: #fff;
 }

 .intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .intro-text {
   font-size: 15px;
   color: var(--slate);
   line-height: 1.9;
   font-weight: 300;
   margin-bottom: 18px;
 }

 .intro-text strong {
   color: var(--charcoal-dk);
   font-weight: 700;
 }

 .intro-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 32px;
 }

 /* Signature card */
 .intro-right {
   position: relative;
 }

 .about-img-wrap {
   border-radius: 14px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
 }

 .about-img-wrap img {
   width: 100%;
   height: 400px;
   object-fit: cover;
   display: block;
 }

 .about-img-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(10, 15, 26, .7) 0%, transparent 55%);
 }

 .about-img-tag {
   position: absolute;
   bottom: 24px;
   left: 24px;
   right: 24px;
   background: rgba(200, 155, 60, .15);
   border: 1px solid rgba(200, 155, 60, .35);
   backdrop-filter: blur(10px);
   border-radius: 10px;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .ait-icon {
   font-size: 28px;
 }

 .ait-text h4 {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
 }

 .ait-text p {
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   margin-top: 2px;
   font-weight: 300;
 }

 /* Gold card floating top-right */
 .float-badge {
   position: absolute;
   top: -20px;
   right: -20px;
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold) 0%, var(--gold-l) 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 32px rgba(200, 155, 60, .45);
   z-index: 2;
 }

 .float-badge .num {
   font-family: 'Roboto', sans-serif;
   font-size: 28px;
   font-weight: 900;
   color: #fff;
   line-height: 1;
 }

 .float-badge .lbl {
   font-size: 9px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .85);
   font-weight: 700;
   margin-top: 4px;
   text-align: center;
 }

 @media(max-width:900px) {
   .intro-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .float-badge {
     top: -16px;
     right: 16px;
     width: 90px;
     height: 90px;
   }

   .float-badge .num {
     font-size: 22px;
   }
 }

 @media(max-width:600px) {
   #about-intro {
     padding: 72px 0;
   }
 }

 /* ============================================================
     NUMBERS / STATS
  ============================================================ */
 #stats {
   padding: 80px 0;
   background: var(--charcoal-dk);
   position: relative;
   overflow: hidden;
 }

 #stats::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 #stats::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .stats-wm {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: 'Roboto', sans-serif;
   font-size: clamp(80px, 14vw, 180px);
   font-weight: 900;
   color: rgba(255, 255, 255, .025);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
 }

 .stat-box {
   padding: 40px 32px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .07);
   position: relative;
 }

 .stat-box:last-child {
   border-right: none;
 }

 .stat-box::before {
   content: '';
   position: absolute;
   top: 43%;
   left: 0;
   width: 0;
   height: 1px;
   background: rgba(255, 255, 255, .07);
   transition: width .6s ease;
 }

 .stat-box.in::before {
   width: 100%;
 }

 .stat-ico {
   font-size: 32px;
   margin-bottom: 14px;
 }

 .stat-big {
   font-family: 'Roboto', sans-serif;
   font-size: clamp(36px, 4vw, 52px);
   font-weight: 900;
   color: rgb(245, 243, 243);
   line-height: 1;
   margin-bottom: 8px;
 }

 .stat-name {
   font-size: 12px;
   color: rgb(245, 243, 243);
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
 }

 @media(max-width:768px) {
   .stats-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .stat-box {
     border-bottom: 1px solid rgba(255, 255, 255, .07);
   }

   .stat-box:nth-child(even) {
     border-right: none;
   }

   .stat-box::before {
     display: none;
   }

   #stats {
     padding: 60px 0;
   }
 }

 @media(max-width:480px) {
   .stats-grid {
     grid-template-columns: 1fr;
   }

   .stat-box {
     border-right: none;
   }
 }

 /* ============================================================
     MISSION & VALUES
  ============================================================ */
 #mission {
   padding: 100px 0;
   background: var(--off-white);
   position: relative;
 }

 #mission::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .mission-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: start;
 }

 .mission-left .section-title {
   margin-bottom: 6px;
 }

 .mission-text {
   font-size: 14.5px;
   color: var(--slate);
   line-height: 1.88;
   font-weight: 300;
   margin-bottom: 16px;
 }

 /* Mission highlight box */
 .mission-quote {
   margin: 28px 0;
   padding: 24px 28px;
   background: var(--charcoal-dk);
   border-left: 4px solid var(--gold);
   border-radius: 0 8px 8px 0;
   position: relative;
   overflow: hidden;
 }

 .mission-quote::before {
   content: '"';
   position: absolute;
   top: -10px;
   right: 16px;
   font-size: 100px;
   font-family: 'Roboto', sans-serif;
   font-weight: 900;
   color: rgba(200, 155, 60, .12);
   line-height: 1;
   pointer-events: none;
 }

 .mission-quote p {
   font-size: 15px;
   color: #fff;
   font-weight: 500;
   line-height: 1.75;
   font-style: italic;
   position: relative;
   z-index: 1;
 }

 /* Values cards */
 .values-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .val-card {
   background: #fff;
   border-radius: 10px;
   padding: 24px 20px;
   border: 1px solid var(--light);
   transition: all .3s ease;
   position: relative;
   overflow: hidden;
 }

 .val-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2.5px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
 }

 .val-card:hover {
   border-color: var(--gold);
   transform: translateY(-4px);
   box-shadow: var(--sh-gold);
 }

 .val-card:hover::after {
   transform: scaleX(1);
 }

 .val-ico {
   font-size: 28px;
   margin-bottom: 12px;
 }

 .val-title {
   font-size: 15px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 7px;
 }

 .val-text {
   font-size: 12.5px;
   color: var(--slate);
   line-height: 1.7;
   font-weight: 300;
 }

 @media(max-width:900px) {
   .mission-grid {
     grid-template-columns: 1fr;
     gap: 52px;
   }
 }

 @media(max-width:600px) {
   #mission {
     padding: 72px 0;
   }

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

 /* ============================================================
     TEAM
  ============================================================ */
 #team {
   padding: 100px 0;
   padding-top: 30px;
   background: #fff;
 }

 .team-intro {
   text-align: center;
   max-width: 560px;
   margin: 0 auto 58px;
 }

 .team-intro .section-tag {
   justify-content: center;
 }

 .team-intro .section-tag::before {
   display: none;
 }

 .team-intro .section-tag::after {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
 }

 .team-intro p {
   font-size: 14px;
   color: var(--slate);
   line-height: 1.8;
   margin-top: 14px;
   font-weight: 300;
 }

 .team-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .team-card {
   text-align: center;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--light);
   transition: all .35s ease;
   position: relative;
 }

 .team-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, .10);
   border-color: var(--border-g);
 }

 .team-card:hover .tc-img img {
   transform: scale(1.06);
 }

 .tc-img {
   height: 450px;
   overflow: hidden;
   position: relative;
   background: var(--charcoal-dk);
 }

 .tc-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: bottom;
   transition: transform .5s ease;
 }

 .tc-img-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(10, 15, 26, .5) 0%, transparent 50%);
 }

 .tc-body {
   padding: 22px 18px 24px;
 }

 .tc-name {
   font-size: 16px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 4px;
 }

 .tc-role {
   font-size: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-bottom: 12px;
 }

 .tc-social {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 16px;
 }

 @media(max-width:1000px) {
   .team-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:560px) {
   .team-grid {
     grid-template-columns: 1fr;
     max-width: 380px;
     margin: 0 auto;
   }

   #team {
     padding: 72px 0;
   }
 }

 /* ============================================================
     WHY US (timeline style)
  ============================================================ */
 #why {
   padding: 100px 0;
   background: var(--charcoal-dk);
   position: relative;
   overflow: hidden;
 }

 #why.s-bg {
   overflow: hidden;
   transform: none !important;
   background-size: cover;
   background-position: center;
 }

 #why::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .why-wm {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: 'Roboto', sans-serif;
   font-size: clamp(80px, 14vw, 200px);
   font-weight: 900;
   color: rgba(255, 255, 255, .02);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
 }

 .why-header {
   text-align: center;
   max-width: 600px;
   margin: 0 auto 64px;
 }

 .why-header .section-tag {
   justify-content: center;
   color: var(--gold-l);
 }

 .why-header .section-tag::before {
   display: none;
 }

 .why-header .section-tag::after {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
 }

 .why-header .section-title {
   color: #fff;
 }

 .why-header p {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.8;
   margin-top: 14px;
   font-weight: 300;
 }

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

 .why-card {
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 12px;
   padding: 32px 26px;
   transition: all .35s ease;
   position: relative;
   overflow: hidden;
 }

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

 .why-card:hover {
   border-color: rgba(200, 155, 60, .3);
   transform: translateY(-5px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
 }

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

 .wc-num {
   font-family: 'Roboto', sans-serif;
   font-size: 48px;
   font-weight: 900;
   color: rgba(200, 155, 60, .18);
   line-height: 1;
   margin-bottom: 16px;
 }

 .wc-ico {
   font-size: 30px;
   margin-bottom: 14px;
 }

 .wc-title {
   font-size: 16px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
 }

 .wc-text {
   font-size: 13px;
   color: rgba(255, 255, 255, .48);
   line-height: 1.75;
   font-weight: 300;
 }

 @media(max-width:900px) {
   .why-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media(max-width:560px) {
   .why-grid {
     grid-template-columns: 1fr;
   }

   #why {
     padding: 72px 0;
   }
 }

 /* ============================================================
     CTA BANNER
  ============================================================ */
 #cta-bar {
   padding: 80px 0;
   background: linear-gradient(105deg, var(--charcoal-dk) 0%, #1a2235 60%, var(--charcoal-dk) 100%);
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(200, 155, 60, .15);
   border-bottom: 1px solid rgba(200, 155, 60, .15);
 }

 #cta-bar::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(200, 155, 60, .1) 0%, transparent 55%);
 }

 .cta-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
   position: relative;
 }

 .cta-text h2 {
   font-size: clamp(24px, 3.5vw, 38px);
   font-weight: 900;
   color: #fff;
   line-height: 1.15;
 }

 .cta-text h2 span {
   color: var(--gold);
 }

 .cta-text p {
   font-size: 14px;
   color: rgba(255, 255, 255, .55);
   margin-top: 10px;
   font-weight: 300;
   max-width: 520px;
   line-height: 1.75;
 }

 .cta-btns {
   display: flex;
   gap: 12px;
   flex-shrink: 0;
   flex-wrap: wrap;
 }

 @media(max-width:768px) {
   .cta-inner {
     flex-direction: column;
     text-align: center;
   }

   .cta-btns {
     justify-content: center;
   }

   #cta-bar {
     padding: 60px 0;
   }
 }

 /* Bütün ikonlara qızılı rəng və keçid effekti veririk */
 .fa-solid,
 .fa-brands,
 .fa-regular {
   color: var(--gold);
   transition: transform 0.3s ease;
 }

 /* Hover zamanı ikonun bir az böyüməsi premium hiss yaradır */
 .service-card:hover i {
   transform: scale(1.1);
   color: var(--gold-l);
 }


 /* Car detail */
 /* ============================================================ DETAIL LAYOUT */
 #detail {
   padding: 48px 0 100px;
   background: #fff;
 }

 .detail-grid {
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 52px;
   align-items: start;
 }

 /* ============================================================ GALLERY */
 .gallery-col {
   position: sticky;
   top: 90px;
 }

 /* ============================================================ BREADCRUMB BAR */
 .breadbar {
   background: var(--off-white);
   border-bottom: 1px solid var(--light);
   padding: 14px 0;
 }

 .breadbar-top {
   background: var(--charcoal-dk);
   height: 100px;
 }

 .breadbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
 }

 .car-detail-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 500;
   color: var(--slate);
 }

 .car-detail-breadcrumb a {
   color: var(--slate);
   transition: color .2s;
 }

 .car-detail-breadcrumb a:hover {
   color: var(--gold);
 }

 .car-detail-breadcrumb .sep {
   color: rgba(0, 0, 0, .2);
   font-size: 10px;
 }

 .car-detail-breadcrumb .current {
   color: var(--charcoal-dk);
   font-weight: 700;
 }

 .back-link {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   color: var(--slate);
   transition: color .2s;
 }

 .back-link:hover {
   color: var(--gold);
 }

 /* ============================================================ DETAIL LAYOUT */
 #detail {
   padding: 48px 0 100px;
   background: #fff;
 }

 .detail-grid {
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 52px;
   align-items: start;
 }

 /* Main image */
 .gallery-main {
   position: relative;
   border-radius: 14px;
   overflow: hidden;
   background: var(--charcoal-dk);
   aspect-ratio: 16/10;
   cursor: zoom-in;
   box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
 }

 .gallery-main img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform .4s ease;
   display: block;
 }

 .gallery-main:hover img {
   transform: scale(1.03);
 }

 /* Badge on main image */
 .gal-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 2;
   padding: 4px 13px;
   border-radius: 30px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
 }

 /* Slide arrows on main */
 .gal-prev,
 .gal-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   backdrop-filter: blur(6px);
   border: none;
   cursor: pointer;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   transition: all .25s;
   opacity: 0;
 }

 .gal-prev {
   left: 14px;
 }

 .gal-next {
   right: 14px;
 }

 .gallery-main:hover .gal-prev,
 .gallery-main:hover .gal-next {
   opacity: 1;
 }

 .gal-prev:hover,
 .gal-next:hover {
   background: var(--gold);
 }

 /* Counter */
 .gal-counter {
   position: absolute;
   bottom: 14px;
   left: 16px;
   background: rgba(0, 0, 0, .55);
   backdrop-filter: blur(6px);
   color: rgba(255, 255, 255, .85);
   border-radius: 6px;
   padding: 5px 11px;
   font-size: 11px;
   font-weight: 600;
 }

 /* Thumbnails */
 .gallery-thumbs {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   margin-top: 12px;
 }

 .gthumb {
   aspect-ratio: 4/3;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   border: 2px solid transparent;
   transition: border-color .22s, opacity .22s;
   opacity: .65;
   position: relative;
 }

 .gthumb.active {
   border-color: var(--gold);
   opacity: 1;
 }

 .gthumb:hover {
   opacity: 1;
   border-color: var(--border-g);
 }

 .gthumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
   background-color: #0d1018;
 }

 /* "View all" last thumb overlay */
 .gthumb-more {
   position: absolute;
   inset: 0;
   background: rgba(10, 15, 26, .72);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
   font-weight: 900;
   font-family: 'Roboto', sans-serif;
 }

 .gthumb-more span {
   font-size: 10px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   opacity: .7;
   margin-top: 3px;
 }

 /* ============================================================ INFO PANEL */

 /* Sticky CTA card at bottom */
 .info-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 6px;
 }

 .car-make-tag {
   font-size: 10.5px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
 }

 .car-title {
   font-size: clamp(26px, 3.5vw, 38px);
   font-weight: 900;
   color: var(--charcoal-dk);
   line-height: 1.1;
   margin: 4px 0 6px;
 }

 .car-subtitle {
   font-size: 13px;
   color: var(--slate);
   font-weight: 400;
 }

 /* Badges row */
 .info-badges {
   display: flex;
   gap: 8px;
   margin: 14px 0;
   flex-wrap: wrap;
 }

 .ibadge {
   padding: 4px 13px;
   border-radius: 30px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 .ibadge-gold {
   background: rgba(200, 155, 60, .12);
   color: var(--gold);
   border: 1px solid var(--border-g);
 }

 .ibadge-gray {
   background: var(--light);
   color: var(--slate);
   border: 1px solid transparent;
 }

 /* Price block */
 .price-block {
   background: var(--charcoal-dk);
   border-radius: 12px;
   padding: 22px 24px;
   margin: 20px 0;
   position: relative;
   overflow: hidden;
 }

 .price-block::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 90% 50%, rgba(200, 155, 60, .12), transparent 60%);
 }

 .price-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   position: relative;
 }

 .price-main {
   font-family: 'Roboto', sans-serif;
   font-size: 24px;
   font-weight: 900;
   color: var(--gold);
   line-height: 1;
 }

 .price-breakdown {
   display: flex;
   flex-direction: column;
   gap: 5px;
   position: relative;
 }

 .pb-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   font-size: 12px;
   color: rgba(255, 255, 255, .5);
 }

 .pb-row .v {
   font-weight: 700;
   color: rgba(255, 255, 255, .75);
 }

 .pb-divider {
   border: none;
   border-top: 1px solid rgba(255, 255, 255, .08);
   margin: 8px 0;
 }

 .pb-total {
   font-size: 13px;
   color: rgba(255, 255, 255, .55);
 }

 .pb-total .v {
   font-weight: 900;
   color: var(--gold);
   font-size: 15px;
 }

 /* CTA buttons */
 .cta-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 20px 0;
 }

 .cta-group .btn {
   width: 100%;
   justify-content: center;
   font-size: 13px;
   padding: 15px;
 }

 .btn-whatsapp {
   background: #25D366;
   color: #fff;
 }

 .btn-whatsapp:hover {
   background: #1ebe5d;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(37, 211, 102, .3);
 }

 /* Info note */
 .info-note {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   background: rgba(200, 155, 60, .07);
   border: 1px solid var(--border-g);
   border-radius: 8px;
   padding: 13px 16px;
   font-size: 12px;
   color: var(--slate);
   line-height: 1.65;
   font-weight: 300;
 }

 .info-note .ico {
   font-size: 16px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 /* ============================================================ TABS (Details) */
 #detail-tabs {
   padding: 0 0 80px;
   background: #fff;
 }

 .tabs-wrap {
   border-bottom: 2px solid var(--light);
   display: flex;
   gap: 0;
 }

 .tab-btn {
   padding: 14px 24px;
   font-size: 13px;
   font-weight: 700;
   color: var(--slate);
   cursor: pointer;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
   transition: color .22s, border-color .22s;
   font-family: 'Montserrat', sans-serif;
 }

 .tab-btn.on {
   color: var(--gold);
   border-color: var(--gold);
 }

 .tab-btn:hover {
   color: var(--charcoal-dk);
 }

 .tab-panel {
   display: none;
   padding: 40px 0;
 }

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

 /* Specs table */
 .specs-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
 }

 .spec-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px 16px;
   border-bottom: 1px solid var(--light);
   font-size: 13.5px;
 }

 .spec-row:hover {
   background: var(--off-white);
 }

 .spec-lbl {
   color: var(--slate);
   font-weight: 400;
 }

 .spec-val {
   color: var(--charcoal-dk);
   font-weight: 700;
   text-align: right;
 }

 /* Auction info */
 .auction-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-bottom: 32px;
 }

 .auction-card {
   background: var(--off-white);
   border-radius: 10px;
   padding: 20px;
   border: 1px solid var(--light);
   text-align: center;
 }

 .auction-card .ico {
   font-size: 26px;
   margin-bottom: 10px;
 }

 .auction-card .lbl {
   font-size: 10px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--slate);
   font-weight: 700;
   margin-bottom: 5px;
 }

 .auction-card .val {
   font-size: 16px;
   font-weight: 900;
   color: var(--charcoal-dk);
 }

 /* Description */
 .desc-text {
   font-size: 14.5px;
   color: var(--slate);
   line-height: 1.9;
   font-weight: 300;
 }

 .desc-text p {
   margin-bottom: 14px;
 }

 .desc-text strong {
   color: var(--charcoal-dk);
   font-weight: 700;
 }

 /* ============================================================ SIMILAR CARS */
 #similar {
   padding: 80px 0;
   background: var(--off-white);
 }

 .similar-hdr {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 36px;
   flex-wrap: wrap;
   gap: 12px;
 }

 .section-tag {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 3.5px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 10px;
 }

 .section-tag::before {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
   flex-shrink: 0;
 }

 .section-title {
   font-size: clamp(22px, 3vw, 34px);
   font-weight: 900;
   color: var(--charcoal-dk);
   line-height: 1.15;
 }

 .section-title span {
   color: var(--gold);
 }

 /* ============================================================ FOOTER */
 #footer {
   background: #0a0e16;
   padding: 80px 0 0;
   border-top: 1px solid rgba(200, 155, 60, .14);
 }

 .foot-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 44px;
   padding-bottom: 54px;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
 }

 .foot-logo {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
 }

 .foot-logo img {
   height: 55px;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
 }

 .foot-txt {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .45);
   line-height: 1.82;
   font-weight: 300;
   max-width: 275px;
   margin-bottom: 24px;
 }

 .socials {
   display: flex;
   gap: 8px;
 }

 .soc {
   width: 36px;
   height: 36px;
   border-radius: 7px;
   border: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .45);
   font-size: 13px;
   transition: all .25s;
 }

 .soc:hover {
   background: var(--off-white);
   border-color: var(--charcoal-dk);
   color: #fff;
 }

 .foot-col h4 {
   font-size: 12px;
   font-weight: 900;
   color: #fff;
   margin-bottom: 16px;
   letter-spacing: .5px;
   text-transform: uppercase;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(200, 155, 60, .18);
 }

 .foot-links {
   display: flex;
   flex-direction: column;
   gap: 9px;
 }

 .foot-links a {
   font-size: 13px;
   color: rgba(255, 255, 255, .42);
   font-weight: 300;
   transition: color .2s;
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .foot-links a::before {
   content: '›';
   color: var(--gold);
   font-size: 15px;
 }

 .foot-links a:hover {
   color: var(--gold);
 }

 .foot-contacts {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .fci {
   display: flex;
   gap: 11px;
   align-items: flex-start;
 }

 .fci-i {
   width: 32px;
   height: 32px;
   background: rgba(200, 155, 60, .12);
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .fci p {
   font-size: 11px;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 2px;
 }

 .fci span {
   font-size: 13px;
   color: rgba(255, 255, 255, .72);
 }

 .foot-bottom {
   padding: 22px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
 }

 .foot-bottom p {
   font-size: 12px;
   color: rgba(255, 255, 255, .28);
   font-weight: 300;
 }

 .foot-bottom a {
   color: var(--gold);
   font-weight: 600;
 }

 .foot-flags {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 11.5px;
   color: rgba(255, 255, 255, .28);
 }

 @media(max-width:1100px) {
   .foot-grid {
     grid-template-columns: 1fr 1fr;
     gap: 28px;
   }
 }

 @media(max-width:600px) {
   .foot-grid {
     grid-template-columns: 1fr;
     gap: 22px;
   }

   .foot-bottom {
     flex-direction: column;
     text-align: center;
   }
 }

 /* ============================================================ RESPONSIVE */
 @media(max-width:1024px) {
   .detail-grid {
     grid-template-columns: 1fr;
   }

   .gallery-col {
     position: static;
   }

   .gallery-thumbs {
     grid-template-columns: repeat(6, 1fr);
   }

   .quick-specs {
     grid-template-columns: repeat(4, 1fr);
   }

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

 @media(max-width:768px) {
   .gallery-thumbs {
     grid-template-columns: repeat(4, 1fr);
   }

   .quick-specs {
     grid-template-columns: repeat(2, 1fr);
   }

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

   .sim-grid {
     grid-template-columns: repeat(2, 1fr);
   }

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

   #detail {
     padding: 32px 0 72px;
   }

   .tabs-wrap {
     overflow-x: auto;
     white-space: nowrap;
   }
 }

 @media(max-width:500px) {
   .gallery-thumbs {
     grid-template-columns: repeat(3, 1fr);
   }

   .quick-specs {
     grid-template-columns: 1fr 1fr;
   }

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

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

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

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 /* ============================================================ CONTACT SECTION */
 #contact {
   padding: 96px 0 110px;
   background: #fff;
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 750px;
   gap: 64px;
   align-items: start;
 }

 /* ---- FORM SIDE ---- */

 .form-desc {
   font-size: 14.5px;
   color: var(--slate);
   line-height: 1.85;
   font-weight: 300;
   margin-bottom: 32px;
   max-width: 540px;
 }

 /* Form */
 .contact-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

 .f-row-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .f-grp {
   display: flex;
   flex-direction: column;
   gap: 7px;
 }

 .f-lbl {
   font-size: 10.5px;
   letter-spacing: 1.8px;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--charcoal-dk);
 }

 .f-inp,
 .f-sel,
 .f-tex {
   background: var(--off-white);
   border: 1.5px solid var(--light);
   border-radius: 8px;
   padding: 13px 16px;
   font-family: 'Montserrat', sans-serif;
   font-size: 13.5px;
   color: var(--gold);
   outline: none;
   transition: border-color .25s, box-shadow .25s;
   width: 100%;
 }

 .f-inp::placeholder,
 .f-tex::placeholder {
   color: rgba(74, 85, 104, .4);
 }

 .f-inp:focus,
 .f-sel:focus,
 .f-tex:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(200, 155, 60, .12);
   background: #fff;
 }

 .f-sel {
   appearance: none;
   cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   padding-right: 36px;
 }

 .f-tex {
   resize: vertical;
   min-height: 130px;
   line-height: 1.6;
 }

 /* Privacy checkbox */
 .f-check {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   cursor: pointer;
 }

 .f-check input[type=checkbox] {
   width: 18px;
   height: 18px;
   accent-color: var(--gold);
   margin-top: 1px;
   flex-shrink: 0;
   cursor: pointer;
 }

 .f-check span {
   font-size: 12.5px;
   color: var(--slate);
   line-height: 1.65;
   font-weight: 300;
 }

 .f-check span a {
   color: var(--gold);
   font-weight: 600;
 }

 /* Submit btn */
 .btn-submit {
   background: var(--gold);
   color: #fff;
   border: none;
   cursor: pointer;
   padding: 16px 36px;
   border-radius: 3px;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all .3s ease;
   align-self: flex-start;
 }

 .btn-submit:hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 .btn-submit svg {
   transition: transform .3s;
 }

 .btn-submit:hover svg {
   transform: translateX(4px);
 }

 /* Success message */
 .form-success {
   display: none;
   background: rgba(34, 197, 94, .08);
   border: 1px solid rgba(34, 197, 94, .3);
   border-radius: 10px;
   padding: 20px 24px;
   font-size: 14px;
   color: #16a34a;
   font-weight: 600;
   align-items: center;
   gap: 12px;
 }

 .form-success.show {
   display: flex;
 }

 /* ---- INFO SIDE ---- */
 .info-col {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 /* Contact cards */
 .contact-card {
   background: var(--off-white);
   border: 1px solid var(--light);
   border-radius: 12px;
   padding: 24px 26px;
   display: flex;
   align-items: flex-start;
   gap: 18px;
   transition: all .3s ease;
   position: relative;
   overflow: hidden;
 }

 .contact-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2.5px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
 }

 .contact-card:hover {
   border-color: var(--border-g);
   transform: translateY(-3px);
   box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
 }

 .contact-card:hover::after {
   transform: scaleX(1);
 }

 .cc-ico {
   width: 52px;
   height: 52px;
   border-radius: 10px;
   background: var(--charcoal-dk);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
 }

 .cc-label {
   font-size: 10px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 700;
   margin-bottom: 5px;
 }

 .cc-value {
   font-size: 16px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 4px;
 }

 .cc-sub {
   font-size: 12px;
   color: var(--slate);
   font-weight: 300;
   line-height: 1.5;
 }

 .cc-link {
   color: var(--gold);
   font-weight: 600;
   font-size: 13px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   margin-top: 5px;
   transition: gap .2s;
 }

 .cc-link:hover {
   gap: 9px;
 }

 /* WhatsApp card special */
 .contact-card.wa-card {
   background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
   border-color: transparent;
 }

 .contact-card.wa-card .cc-ico {
   background: rgba(255, 255, 255, .15);
 }

 .contact-card.wa-card .cc-label {
   color: rgba(255, 255, 255, .65);
 }

 .contact-card.wa-card .cc-value {
   color: #fff;
 }

 .contact-card.wa-card .cc-sub {
   color: rgba(255, 255, 255, .65);
 }

 .contact-card.wa-card .cc-link {
   color: #25D366;
 }

 .contact-card.wa-card::after {
   background: #25D366;
 }

 /* Working hours card */
 .hours-card {
   background: var(--charcoal-dk);
   border: 1px solid rgba(200, 155, 60, .15);
   border-radius: 12px;
   padding: 24px 26px;
   position: relative;
   overflow: hidden;
 }

 .hours-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 90% 10%, rgba(200, 155, 60, .1), transparent 55%);
 }

 .hours-title {
   font-size: 13px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
   position: relative;
 }

 .hours-grid {
   display: flex;
   flex-direction: column;
   gap: 8px;
   position: relative;
 }

 .hours-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12.5px;
 }

 .hours-row .day {
   color: rgba(255, 255, 255, .55);
   font-weight: 400;
 }

 .hours-row .time {
   color: rgba(255, 255, 255, .85);
   font-weight: 700;
 }

 .hours-row.today .day {
   color: var(--gold);
   font-weight: 700;
 }

 .hours-row.today .time {
   color: var(--gold);
 }

 .live-pill {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #4ade80;
   background: rgba(74, 222, 128, .1);
   border: 1px solid rgba(74, 222, 128, .25);
   border-radius: 20px;
   padding: 3px 10px;
   margin-left: 8px;
 }

 .live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #4ade80;
   animation: blink 1.8s infinite;
   flex-shrink: 0;
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1
   }

   50% {
     opacity: .25
   }
 }

 /* Socials strip */
 .socials-strip {
   display: flex;
   gap: 10px;
 }

 .social-btn {
   flex: 1;
   padding: 12px;
   border-radius: 8px;
   border: 1px solid var(--light);
   background: var(--off-white);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--slate);
   cursor: pointer;
   transition: all .25s;
   text-decoration: none;
 }

 .social-btn .sico {
   font-size: 20px;
 }

 .social-btn:hover {
   border-color: var(--gold);
   color: var(--gold);
   background: #fff;
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
 }

 /* ============================================================ MAP SECTION */
 #map-section {
   background: var(--charcoal-dk);
   position: relative;
 }

 #map-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
   z-index: 1;
 }

 .map-header {
   padding: 60px 0 36px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
 }

 .map-header .section-tag {
   color: var(--gold-l);
 }

 .map-header .section-tag::before {
   background: var(--gold-l);
 }

 .map-header .section-title {
   color: #fff;
 }

 .map-header p {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .5);
   margin-top: 8px;
   font-weight: 300;
 }

 /* Map iframe wrapper */
 .map-wrap {
   position: relative;
   width: 100%;
   height: 460px;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 12px 48px rgba(0, 0, 0, .4);
 }

 .map-wrap iframe {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
   filter: saturate(.85) contrast(1.05);
 }

 /* Map overlay card */
 .map-overlay-card {
   position: absolute;
   top: 24px;
   left: 24px;
   background: rgba(10, 14, 22, .92);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(200, 155, 60, .25);
   border-radius: 12px;
   padding: 18px 22px;
   min-width: 220px;
   z-index: 2;
 }

 .map-container {
   padding-bottom: 50px !important;
 }

 .moc-title {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .moc-row {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   margin-bottom: 7px;
   font-weight: 300;
   line-height: 1.5;
 }

 .moc-row .ico {
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .moc-row:last-child {
   margin-bottom: 0;
 }

 @media(max-width:768px) {
   .map-wrap {
     height: 320px;
   }

   .map-overlay-card {
     display: none;
   }
 }

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

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 /* ============================================================ RESPONSIVE */
 @media(max-width:1024px) {
   .contact-grid {
     grid-template-columns: 1fr;
   }

   .info-col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
   }

   .hours-card {
     grid-column: 1/-1;
   }

   .socials-strip {
     grid-column: 1/-1;
   }
 }

 @media(max-width:640px) {
   #contact {
     padding: 64px 0 80px;
   }

   .info-col {
     grid-template-columns: 1fr;
   }

   .hours-card {
     grid-column: auto;
   }

   .socials-strip {
     flex-wrap: wrap;
   }

   .f-row-2 {
     grid-template-columns: 1fr;
   }
 }


 /* ============================================================ CALCULATOR SECTION */
 #calc-section {
   padding: 88px 0 110px;
   background: var(--off-white);
   position: relative;
 }

 #calc-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .calc-layout {
   display: grid;
   grid-template-columns: 1fr 400px;
   gap: 40px;
   align-items: start;
 }

 /* ============================================================ FORM PANEL */
 .calc-panel {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 40px rgba(0, 0, 0, .08);
   border: 1px solid var(--light);
   overflow: hidden;
 }

 .calc-panel-header {
   background: var(--charcoal-dk);
   padding: 28px 32px;
   position: relative;
   overflow: hidden;
 }

 .calc-panel-header::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 90% 50%, rgba(200, 155, 60, .12), transparent 55%);
 }

 .calc-panel-header h3 {
   font-size: 20px;
   font-weight: 900;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 12px;
   position: relative;
 }

 .calc-panel-header h3 i {
   color: var(--gold);
 }

 .calc-panel-header p {
   font-size: 13px;
   color: rgba(255, 255, 255, .5);
   margin-top: 6px;
   font-weight: 300;
   position: relative;
 }

 .calc-form {
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 /* Step rows */
 .calc-step {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   padding-bottom: 28px;
   position: relative;
 }

 .calc-step:last-of-type {
   padding-bottom: 0;
 }

 /* Vertical connector line */
 .calc-step:not(:last-of-type)::before {
   content: '';
   position: absolute;
   left: 19px;
   top: 44px;
   bottom: 0;
   width: 2px;
   background: linear-gradient(to bottom, var(--border-g), transparent);
 }

 /* Step number circle */
 .step-num {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--gold);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: 900;
   color: #fff;
   box-shadow: 0 4px 14px rgba(200, 155, 60, .35);
   position: relative;
   z-index: 1;
   margin-top: 2px;
 }

 .step-num i {
   font-size: 14px;
 }

 .step-body {
   flex: 1;
 }

 .step-label {
   font-size: 10px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .step-label i {
   color: var(--gold);
   font-size: 12px;
 }

 /* Custom select wrapper */
 .sel-wrap {
   position: relative;
 }

 .sel-wrap i.sel-ico {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gold);
   font-size: 15px;
   pointer-events: none;
   z-index: 2;
 }

 .sel-wrap i.sel-arrow {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--slate);
   font-size: 12px;
   pointer-events: none;
   transition: transform .3s;
 }

 .sel-wrap:focus-within i.sel-arrow {
   transform: translateY(-50%) rotate(180deg);
 }

 .calc-sel {
   width: 100%;
   padding: 13px 40px 13px 42px;
   border: 1.5px solid var(--light);
   border-radius: 10px;
   font-family: 'Montserrat', sans-serif;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--charcoal-dk);
   background: #fff;
   appearance: none;
   cursor: pointer;
   outline: none;
   transition: border-color .25s, box-shadow .25s;
 }

 .calc-sel:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(200, 155, 60, .12);
 }

 .calc-sel option {
   font-weight: 600;
   color: var(--charcoal-dk);
 }

 /* Auto tag (shown under auto-populated fields) */
 .auto-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   margin-top: 7px;
   padding: 3px 10px;
   border-radius: 20px;
   background: rgba(200, 155, 60, .1);
   border: 1px solid var(--border-g);
   font-size: 10.5px;
   color: var(--gold);
   font-weight: 700;
 }

 .auto-tag i {
   font-size: 9px;
 }

 /* Auction price input */
 .price-inp-wrap {
   position: relative;
 }

 .price-inp-wrap i.inp-ico {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gold);
   font-size: 15px;
   pointer-events: none;
 }

 .price-inp-wrap span.inp-prefix {
   position: absolute;
   left: 42px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 14px;
   font-weight: 800;
   color: var(--slate);
   pointer-events: none;
 }

 .calc-inp {
   width: 100%;
   padding: 13px 16px 13px 62px;
   border: 1.5px solid var(--light);
   border-radius: 10px;
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   font-weight: 700;
   color: var(--charcoal-dk);
   background: #fff;
   outline: none;
   transition: border-color .25s, box-shadow .25s;
 }

 .calc-inp:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(200, 155, 60, .12);
 }

 .calc-inp::placeholder {
   color: rgba(74, 85, 104, .35);
   font-weight: 400;
 }

 /* Divider */
 .calc-divider {
   border: none;
   border-top: 1px solid var(--light);
   margin: 4px 0 28px;
 }

 /* Calculate btn */
 .calc-btn {
   width: 100%;
   padding: 17px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
   background: var(--gold);
   color: #fff;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all .3s ease;
   margin-top: 8px;
   box-shadow: 0 6px 24px rgba(200, 155, 60, .3);
 }

 .calc-btn:hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 .calc-btn i {
   font-size: 16px;
 }

 .calc-reset {
   width: 100%;
   padding: 12px;
   border-radius: 10px;
   border: 1.5px solid var(--light);
   background: transparent;
   color: var(--slate);
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: all .25s;
   margin-top: 10px;
 }

 .calc-reset:hover {
   border-color: var(--border-g);
   color: var(--charcoal-dk);
 }

 /* ============================================================ RESULT PANEL */
 .result-col {
   display: flex;
   flex-direction: column;
   gap: 20px;
   position: sticky;
   top: 90px;
 }

 /* Total card */
 .total-card {
   background: var(--charcoal-dk);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
   border: 1px solid rgba(200, 155, 60, .15);
   position: relative;
 }

 .total-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 10% 20%, rgba(200, 155, 60, .1), transparent 55%);
   pointer-events: none;
 }

 .total-header {
   padding: 24px 28px 18px;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   align-items: center;
   gap: 12px;
   position: relative;
 }

 .total-header .t-ico {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: var(--gold);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: #fff;
   box-shadow: 0 4px 16px rgba(200, 155, 60, .4);
 }

 .total-header h3 {
   font-size: 16px;
   font-weight: 900;
   color: #fff;
 }

 .total-header p {
   font-size: 11px;
   color: rgba(255, 255, 255, .4);
   margin-top: 2px;
   font-weight: 300;
 }

 /* Breakdown rows */
 .breakdown {
   padding: 20px 28px;
   display: flex;
   flex-direction: column;
   gap: 0;
   position: relative;
 }

 .br-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .05);
   font-size: 13px;
 }

 .br-row:last-child {
   border-bottom: none;
 }

 .br-left {
   display: flex;
   align-items: center;
   gap: 10px;
   color: rgba(255, 255, 255, .55);
   font-weight: 400;
 }

 .br-left i {
   width: 18px;
   text-align: center;
   color: var(--gold);
   opacity: .8;
 }

 .br-val {
   font-weight: 700;
   color: rgba(255, 255, 255, .8);
   font-size: 13px;
 }

 .br-val.placeholder {
   color: rgba(255, 255, 255, .25);
   font-style: italic;
   font-weight: 400;
 }

 /* Total row */
 .total-row {
   margin: 4px 28px 0;
   padding: 18px 20px;
   background: rgba(200, 155, 60, .1);
   border: 1px solid rgba(200, 155, 60, .28);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
 }

 .total-label {
   display: flex;
   align-items: center;
   gap: 10px;
   color: rgba(255, 255, 255, .7);
   font-size: 13px;
   font-weight: 700;
 }

 .total-label i {
   color: var(--gold);
 }

 .total-amount {
   font-family: 'Roboto', sans-serif;
   font-size: 30px;
   font-weight: 900;
   color: var(--gold);
   line-height: 1;
   letter-spacing: -0.5px;
   transition: all .4s ease;
 }

 .total-amount.updating {
   transform: scale(1.08);
 }

 .total-azn {
   text-align: right;
   font-size: 12px;
   color: rgba(255, 255, 255, .4);
   font-weight: 300;
   margin-top: 3px;
 }

 .total-right {
   text-align: right;
 }

 .total-note {
   padding: 14px 28px 20px;
   font-size: 11.5px;
   color: rgba(255, 255, 255, .3);
   line-height: 1.7;
   font-weight: 300;
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 8px;
 }

 .total-note i {
   color: var(--gold);
   opacity: .6;
   font-size: 13px;
   margin-top: 1px;
   flex-shrink: 0;
 }

 /* Progress indicator */
 .calc-progress {
   background: #fff;
   border-radius: 14px;
   padding: 22px 24px;
   border: 1px solid var(--light);
   box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
 }

 .cp-title {
   font-size: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .cp-title i {
   color: var(--gold);
 }

 .cp-steps {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .cp-step {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 12.5px;
   color: var(--slate);
   font-weight: 400;
   padding: 8px 12px;
   border-radius: 8px;
   transition: background .2s, color .2s;
 }

 .cp-step.done {
   background: rgba(200, 155, 60, .06);
   color: var(--charcoal-dk);
   font-weight: 600;
 }

 .cp-step .cp-ico {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   border: 1.5px solid var(--light);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   color: var(--slate);
   transition: all .25s;
   flex-shrink: 0;
 }

 .cp-step.done .cp-ico {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
 }

 /* Info card */
 .info-tip {
   background: #fff;
   border-radius: 14px;
   padding: 22px 24px;
   border: 1px solid var(--light);
   box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
 }

 .info-tip h4 {
   font-size: 13px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   gap: 9px;
 }

 .info-tip h4 i {
   color: var(--gold);
 }

 .tip-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .tip-row {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 12.5px;
   color: var(--slate);
   font-weight: 300;
   line-height: 1.6;
 }

 .tip-row i {
   color: var(--gold);
   font-size: 13px;
   margin-top: 2px;
   flex-shrink: 0;
   width: 16px;
   text-align: center;
 }

 /* CTA card */
 .cta-card {
   background: linear-gradient(135deg, var(--charcoal-dk) 0%, #1a2235 100%);
   border-radius: 14px;
   padding: 24px;
   border: 1px solid rgba(200, 155, 60, .15);
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .cta-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(200, 155, 60, .1), transparent 65%);
 }

 .cta-card i {
   font-size: 32px;
   color: var(--gold);
   margin-bottom: 12px;
   display: block;
   position: relative;
 }

 .cta-card h4 {
   font-size: 15px;
   font-weight: 900;
   color: #fff;
   margin-bottom: 8px;
   position: relative;
 }

 .cta-card p {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.65;
   font-weight: 300;
   margin-bottom: 18px;
   position: relative;
 }

 .cta-card-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   width: 100%;
   padding: 13px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   background: var(--gold);
   color: #fff;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: all .3s;
   position: relative;
 }

 .cta-card-btn:hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 /* ============================================================ HOW IT WORKS */
 #how {
   padding: 88px 0 100px;
   background: #fff;
 }

 .how-header {
   text-align: center;
   max-width: 560px;
   margin: 0 auto 56px;
 }

 .how-header .section-tag {
   justify-content: center;
 }

 .how-header .section-tag::before {
   display: none;
 }

 .how-header .section-tag::after {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
 }

 .how-header p {
   font-size: 14px;
   color: var(--slate);
   line-height: 1.8;
   margin-top: 14px;
   font-weight: 300;
 }

 .how-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 0;
   position: relative;
 }

 .how-grid::before {
   content: '';
   position: absolute;
   top: 36px;
   left: 10%;
   right: 10%;
   height: 2px;
   background: linear-gradient(90deg, var(--gold) 0%, var(--gold-l) 50%, var(--gold) 100%);
   opacity: .25;
   z-index: 0;
 }

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

 .how-ico {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   margin: 0 auto 18px;
   background: #fff;
   border: 2px solid var(--border-g);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   color: var(--gold);
   box-shadow: 0 4px 20px rgba(200, 155, 60, .15);
   transition: all .35s;
 }

 .how-step:hover .how-ico {
   background: var(--light);
   color: #fff;
   transform: translateY(-4px);
   box-shadow: var(--sh-gold);
 }

 .how-num {
   font-family: 'Roboto', sans-serif;
   font-size: 10px;
   font-weight: 900;
   color: var(--gold);
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .how-title {
   font-size: 14px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 7px;
 }

 .how-text {
   font-size: 12px;
   color: var(--slate);
   line-height: 1.7;
   font-weight: 300;
 }

 @media(max-width:900px) {
   .how-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }

   .how-grid::before {
     display: none;
   }
 }

 @media(max-width:560px) {
   .how-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

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

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 /* ============================================================ RESPONSIVE */
 @media(max-width:1080px) {
   .calc-layout {
     grid-template-columns: 1fr;
   }

   .result-col {
     position: static;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
   }

   .total-card {
     grid-column: 1/-1;
   }
 }

 @media(max-width:640px) {
   .result-col {
     grid-template-columns: 1fr;
   }

   #calc-section {
     padding: 64px 0 80px;
   }
 }


 /* ============================================================ VIN HERO */
 #vin-hero {
   background: var(--charcoal-dk);
   padding: 160px 0 0;
   position: relative;
   overflow: hidden;
 }

 .vin-hero-bg {
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse at 5% 50%, rgba(200, 155, 60, .09) 0%, transparent 50%),
     radial-gradient(ellipse at 95% 20%, rgba(200, 155, 60, .06) 0%, transparent 45%);
 }

 /* Subtle grid lines */
 .vin-hero-grid {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
   background-size: 64px 64px;
 }

 .vin-hero-inner {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: center;
   padding-bottom: 0;
 }

 .vin-hero-text {
   padding-bottom: 80px;
 }

 .vin-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(200, 155, 60, .12);
   border: 1px solid var(--border-g);
   border-radius: 30px;
   padding: 5px 14px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 22px;
 }

 .vin-hero-text h1 {
   font-size: clamp(36px, 5vw, 64px);
   font-weight: 900;
   color: #fff;
   line-height: 1.06;
   text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
   margin-bottom: 18px;
 }

 .vin-hero-text h1 span {
   color: var(--gold);
 }

 .vin-hero-text p {
   font-size: 15px;
   color: rgba(255, 255, 255, .55);
   line-height: 1.82;
   font-weight: 300;
   max-width: 460px;
   margin-bottom: 32px;
 }

 .vin-features {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .vin-feat {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 13px;
   color: rgba(255, 255, 255, .65);
   font-weight: 400;
 }

 .vin-feat i {
   color: var(--gold);
   font-size: 14px;
   width: 18px;
   text-align: center;
 }

 /* ===== VIN FORM CARD ===== */
 .vin-form-card {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 20px;
   backdrop-filter: blur(16px);
   padding: 36px 32px;
   position: relative;
   margin-bottom: 60px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .4);
 }

 .vin-form-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 32px;
   right: 32px;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--gold), transparent);
   border-radius: 0 0 2px 2px;
 }

 .vin-form-title {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .vin-form-title i {
   color: var(--gold);
 }

 .vin-form-sub {
   font-size: 12px;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 22px;
   font-weight: 300;
 }

 /* VIN input */
 .vin-input-wrap {
   position: relative;
   margin-bottom: 14px;
 }

 .vin-input {
   width: 100%;
   padding: 16px 120px 16px 50px;
   background: rgba(255, 255, 255, .07);
   border: 1.5px solid rgba(255, 255, 255, .12);
   border-radius: 10px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 17px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
   outline: none;
   transition: border-color .25s, background .25s, box-shadow .25s;
   caret-color: var(--gold);
 }

 .vin-input::placeholder {
   color: rgba(255, 255, 255, .2);
   letter-spacing: 1px;
   font-size: 14px;
   font-weight: 400;
 }

 .vin-input:focus {
   border-color: var(--gold);
   background: rgba(255, 255, 255, .1);
   box-shadow: 0 0 0 4px rgba(200, 155, 60, .12);
 }

 .vin-input.error {
   border-color: var(--red);
   box-shadow: 0 0 0 4px rgba(229, 62, 62, .12);
 }

 .vin-input.valid {
   border-color: var(--green);
 }

 .vin-input-ico {
   position: absolute;
   left: 17px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gold);
   font-size: 18px;
   pointer-events: none;
 }

 .vin-counter {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   font-family: 'JetBrains Mono', monospace;
   font-size: 13px;
   font-weight: 700;
   color: rgba(255, 255, 255, .35);
   background: rgba(255, 255, 255, .06);
   padding: 4px 10px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, .08);
   transition: color .2s;
   pointer-events: none;
 }

 .vin-counter.done {
   color: var(--green);
   border-color: rgba(56, 161, 105, .3);
 }

 /* Progress bar */
 .vin-progress-bar {
   height: 3px;
   background: rgba(255, 255, 255, .08);
   border-radius: 2px;
   margin-bottom: 6px;
   overflow: hidden;
 }

 .vin-progress-fill {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, var(--gold), var(--gold-l));
   border-radius: 2px;
   transition: width .2s ease;
 }

 .vin-chars {
   display: flex;
   gap: 4px;
   margin-bottom: 18px;
   flex-wrap: wrap;
 }

 .vin-char {
   width: 32px;
   height: 38px;
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, .1);
   background: rgba(255, 255, 255, .04);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'JetBrains Mono', monospace;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   transition: all .2s;
   position: relative;
 }

 .vin-char.filled {
   background: rgba(200, 155, 60, .12);
   border-color: rgba(200, 155, 60, .3);
   color: var(--gold-l);
 }

 .vin-char .char-label {
   position: absolute;
   bottom: -16px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 8px;
   color: rgba(255, 255, 255, .2);
   font-family: 'Montserrat', sans-serif;
   letter-spacing: 0;
   font-weight: 600;
 }

 .vin-submit {
   width: 100%;
   padding: 15px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
   background: var(--gold);
   color: #fff;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all .3s ease;
   box-shadow: 0 6px 24px rgba(200, 155, 60, .3);
   position: relative;
   overflow: hidden;
 }

 .vin-submit:disabled {
   opacity: .5;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none;
 }

 .vin-submit:not(:disabled):hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 .vin-submit-shine {
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .15) 50%, transparent 60%);
   transform: translateX(-100%);
   transition: transform .5s ease;
 }

 .vin-submit:not(:disabled):hover .vin-submit-shine {
   transform: translateX(100%);
 }

 .vin-error-msg {
   font-size: 11.5px;
   color: #FC8181;
   margin-top: 8px;
   display: none;
   align-items: center;
   gap: 6px;
 }

 .vin-error-msg.show {
   display: flex;
 }

 /* ============================================================ RESULT SECTION */
 #vin-result {
   padding: 120px 0 96px;
   background: var(--off-white);
   display: none;
   position: relative;
 }

 #vin-result.show {
   display: block;
 }

 #vin-result::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .result-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 36px;
   flex-wrap: wrap;
   gap: 16px;
 }

 .result-vin-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--charcoal-dk);
   border-radius: 8px;
   padding: 10px 18px;
   border: 1px solid rgba(200, 155, 60, .2);
 }

 .result-vin-badge i {
   color: var(--gold);
 }

 .result-vin-badge span {
   font-family: 'JetBrains Mono', monospace;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 2px;
 }

 .result-status {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
 }

 .result-status.ok {
   background: rgba(56, 161, 105, .1);
   color: var(--green);
   border: 1px solid rgba(56, 161, 105, .25);
 }

 .result-status.warn {
   background: rgba(229, 62, 62, .1);
   color: var(--red);
   border: 1px solid rgba(229, 62, 62, .25);
 }

 @media(max-width:900px) {
   .vin-hero-inner {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .vin-hero-text {
     padding-bottom: 0;
   }

   .vin-form-card {
     margin-bottom: 0;
   }

   #vin-hero {
     padding-bottom: 60px;
   }

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

   .result-card.full {
     grid-column: auto;
   }
 }


 /* ============================================================ FAQ SECTION */
 #faq {
   padding: 96px 0 112px;
   background: var(--off-white);
 }

 /* Intro */
 .faq-intro {
   text-align: center;
   max-width: 640px;
   margin: 0 auto 56px;
 }

 .faq-intro .section-tag {
   justify-content: center;
 }

 .faq-intro .section-tag::before {
   display: none;
 }

 .faq-intro .section-tag::after {
   content: '';
   width: 28px;
   height: 2px;
   background: var(--gold);
 }

 .faq-intro p {
   font-size: 14.5px;
   color: var(--slate);
   line-height: 1.85;
   font-weight: 300;
   margin-top: 14px;
 }

 /* Search bar */
 .faq-search-wrap {
   max-width: 520px;
   margin: 0 auto 52px;
   position: relative;
 }

 .faq-search {
   width: 100%;
   padding: 14px 20px 14px 50px;
   border: 0.5px solid var(--gold);
   border-radius: 50px;
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   color: var(--charcoal-dk);
   outline: none;
   background: var(--light);
   transition: border-color .25s, box-shadow .25s, background .25s;
 }

 .faq-search::placeholder {
   color: rgba(74, 85, 104, .45);
 }

 .faq-search:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 4px rgba(200, 155, 60, .1);
   background: #fff;
 }

 .faq-search-ico {
   position: absolute;
   left: 18px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 18px;
   pointer-events: none;
   opacity: .5;
 }

 .faq-search-clear {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(74, 85, 104, .15);
   border: none;
   border-radius: 50%;
   width: 26px;
   height: 26px;
   cursor: pointer;
   color: var(--slate);
   font-size: 13px;
   display: none;
   align-items: center;
   justify-content: center;
   transition: background .2s;
 }

 .faq-search-clear:hover {
   background: rgba(200, 155, 60, .2);
 }

 .faq-search-clear.show {
   display: flex;
 }

 /* Category tabs */
 .faq-cats {
   display: flex;
   gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 44px;
 }

 .faq-cat-btn {
   padding: 8px 20px;
   border-radius: 30px;
   font-size: 12px;
   font-weight: 700;
   border: 1.5px solid var(--light);
   background: #fff;
   color: var(--slate);
   cursor: pointer;
   transition: all .25s;
   font-family: 'Montserrat', sans-serif;
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .faq-cat-btn .cnt {
   font-size: 10px;
   background: var(--light);
   border-radius: 20px;
   padding: 1px 7px;
   font-weight: 700;
   transition: background .25s, color .25s;
 }

 .faq-cat-btn:hover {
   border-color: var(--border-g);
   color: var(--charcoal-dk);
 }

 .faq-cat-btn.on {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff;
 }

 .faq-cat-btn.on .cnt {
   background: rgba(255, 255, 255, .25);
   color: #fff;
 }

 /* 2-column accordion grid */
 .faq-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   align-items: start;
 }

 /* Accordion item */
 .faq-item {
   border: 1.5px solid var(--light);
   border-radius: 12px;
   overflow: hidden;
   transition: border-color .25s, box-shadow .25s;
   background: #fff;
 }

 .faq-item:hover {
   border-color: var(--border-g);
 }

 .faq-item.open {
   border-color: var(--gold);
   box-shadow: 0 8px 32px rgba(200, 155, 60, .12);
 }

 .faq-item.hidden {
   display: none;
 }

 .faq-q {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 20px 22px;
   cursor: pointer;
   user-select: none;
   background: #fff;
   transition: background .25s;
 }

 .faq-item.open .faq-q {
   background: var(--off-white);
 }

 .faq-q-left {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .faq-q-ico {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   flex-shrink: 0;
   background: rgba(200, 155, 60, .1);
   border: 1px solid var(--border-g);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
   transition: background .25s;
 }

 .faq-item.open .faq-q-ico {
   background: var(--white);
   border-color: var(--gold);
 }

 .faq-q-text {
   font-size: 14px;
   font-weight: 700;
   color: var(--charcoal-dk);
   line-height: 1.45;
 }

 .faq-item.open .faq-q-text {
   color: var(--charcoal-dk);
 }

 .faq-toggle {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--light);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .35s ease, background .25s;
 }

 .faq-toggle svg {
   width: 14px;
   height: 14px;
   stroke: var(--slate);
   stroke-width: 2.5;
   fill: none;
   transition: stroke .25s;
 }

 .faq-item.open .faq-toggle {
   background: var(--gold);
   transform: rotate(180deg);
 }

 .faq-item.open .faq-toggle svg {
   stroke: #fff;
 }

 .faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .42s cubic-bezier(.4, 0, .2, 1), padding .42s ease;
   padding: 0 22px;
 }

 .faq-item.open .faq-a {
   max-height: 600px;
   padding: 0 22px 20px;
 }

 .faq-a-inner {
   padding-top: 14px;
   border-top: 1px solid var(--light);
   font-size: 13.5px;
   color: var(--slate);
   line-height: 1.88;
   font-weight: 300;
 }

 .faq-a-inner a {
   color: var(--gold);
   font-weight: 600;
 }

 .faq-a-inner a:hover {
   text-decoration: underline;
 }

 .faq-a-inner ul {
   padding-left: 18px;
   margin-top: 8px;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 .faq-a-inner ul li {
   list-style: disc;
 }

 .faq-a-inner strong {
   color: var(--charcoal-dk);
   font-weight: 700;
 }

 /* No results */
 .faq-empty {
   display: none;
   text-align: center;
   padding: 60px 20px;
   color: var(--slate);
   font-size: 15px;
   font-weight: 300;
   grid-column: 1/-1;
 }

 .faq-empty .ico {
   font-size: 48px;
   margin-bottom: 16px;
   opacity: .5;
 }

 .faq-empty strong {
   display: block;
   font-size: 18px;
   font-weight: 800;
   color: var(--charcoal-dk);
   margin-bottom: 6px;
 }

 /* ============================================================ CTA BANNER */
 #faq-cta {
   padding: 80px 0;
   background: var(--charcoal-dk);
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(200, 155, 60, .15);
 }

 #faq-cta::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(200, 155, 60, .1) 0%, transparent 55%);
 }

 #faq-cta::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 .cta-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
   position: relative;
 }

 .cta-text h2 {
   font-size: clamp(22px, 3.2vw, 36px);
   font-weight: 900;
   color: #fff;
   line-height: 1.18;
 }

 .cta-text h2 span {
   color: var(--gold);
 }

 .cta-text p {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   margin-top: 10px;
   font-weight: 300;
   max-width: 500px;
   line-height: 1.75;
 }

 .cta-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   flex-shrink: 0;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 28px;
   border-radius: 3px;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   cursor: pointer;
   border: none;
   transition: all .3s ease;
 }

 .btn-gold {
   background: var(--gold);
   color: #fff;
 }

 .btn-gold:hover {
   background: var(--gold-l);
   transform: translateY(-2px);
   box-shadow: var(--sh-gold);
 }

 .btn-outline {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .3);
 }

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

 @media(max-width:768px) {
   .cta-inner {
     flex-direction: column;
     text-align: center;
   }

   .cta-btns {
     justify-content: center;
   }

   #faq-cta {
     padding: 60px 0;
   }
 }

 @media(max-width:860px) {
   .faq-grid {
     grid-template-columns: 1fr;
   }
 }

 @media(max-width:600px) {
   #faq {
     padding: 64px 0 80px;
   }
 }

 /* ============================================================ VIDEO GALLERY */
 /* Video Section */
 #video-section {
   padding: 60px 0;
   background: var(--off-white);
   min-height: 500px;
 }

 .video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 25px;
 }

 .video-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   cursor: pointer;
   transition: all 0.3s ease;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .video-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 35px rgba(200, 155, 60, 0.15);
   border-color: var(--gold);
 }

 .vc-thumb {
   aspect-ratio: 16/9;
   position: relative;
   background: #000;
 }

 .vc-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .vc-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.2);
   transition: 0.3s;
 }

 .play-icon {
   width: 50px;
   height: 50px;
   background: var(--off-white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 20px;
 }

 .vc-info {
   padding: 18px;
 }

 .vc-title {
   font-weight: 700;
   font-size: 15px;
   color: var(--charcoal-dk);
   height: 45px;
   overflow: hidden;
 }

 /* Modal */
 .modal-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.95);
   z-index: 2000;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .modal-overlay.open {
   display: flex;
 }

 .modal-inner {
   width: 100%;
   max-width: 900px;
   position: relative;
 }

 .iframe-wrap {
   aspect-ratio: 16/9;
   width: 100%;
   background: #000;
   border-radius: 10px;
   overflow: hidden;
 }

 .close-btn {
   position: absolute;
   top: -45px;
   right: 0;
   color: #fff;
   background: none;
   border: none;
   font-size: 35px;
   cursor: pointer;
 }

 /* Loading Skeletons */
 .skeleton {
   background: #e2e8f0;
   height: 250px;
   border-radius: 12px;
   animation: pulse 1.5s infinite;
 }

 @keyframes pulse {
   0% {
     opacity: 1;
   }

   50% {
     opacity: 0.5;
   }

   100% {
     opacity: 1;
   }
 }

 .load-more {
   text-align: center;
   margin-top: 40px;
 }

 .btn-load {
   padding: 12px 35px;
   background: var(--charcoal-dk);
   color: #fff;
   border: 2px solid var(--gold);
   border-radius: 6px;
   font-weight: 700;
   cursor: pointer;
 }


 /*================== Müştəri Rəyləri Section =====================*/
 #reviews-section {
   padding: 100px 0 110px;
   background: var(--charcoal-dk);
   position: relative;
   overflow: hidden;
 }

 /* Dekorativ arxa fon */
 #reviews-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse at 0% 50%, rgba(200, 155, 60, .08) 0%, transparent 60%),
     radial-gradient(ellipse at 100% 50%, rgba(200, 155, 60, .06) 0%, transparent 60%);
   pointer-events: none;
 }

 #reviews-section::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
 }

 /* ── BAŞLIQ ──────────────────────────────────────────────────── */
 .rv-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 52px;
   flex-wrap: wrap;
   gap: 24px;
 }

 .rv-header .section-title {
   color: #fff;
 }

 .rv-subtitle {
   font-size: 14px;
   color: rgba(255, 255, 255, .45);
   font-weight: 300;
   margin-top: 10px;
   line-height: 1.7;
 }

 /* Rating badge */
 .rv-header-right {
   display: flex;
   align-items: center;
   gap: 28px;
   flex-shrink: 0;
 }

 .rv-rating-badge {
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(200, 155, 60, .2);
   border-radius: 12px;
   padding: 14px 20px;
 }

 .rv-rating-num {
   font-size: 42px;
   font-weight: 900;
   font-family: 'Roboto', sans-serif;
   color: var(--gold);
   line-height: 1;
 }

 .rv-stars-big {
   color: var(--gold);
   font-size: 16px;
   letter-spacing: 2px;
   margin-bottom: 4px;
 }

 .rv-rating-label {
   font-size: 11px;
   color: rgba(255, 255, 255, .4);
   font-weight: 500;
 }

 /* Nav buttons */
 .rv-nav {
   display: flex;
   gap: 10px;
 }

 .rv-nav-btn {
   width: 46px;
   height: 46px;
   border-radius: 10px;
   border: 1px solid rgba(200, 155, 60, .3);
   background: rgba(255, 255, 255, .06);
   color: rgba(255, 255, 255, .7);
   font-size: 15px;
   cursor: pointer;
   transition: all .25s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .rv-nav-btn:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff !important;
 }

 .rv-nav-btn:hover i {
   color: #fff !important;
 }

 .rv-nav-btn:disabled {
   opacity: .25;
   cursor: not-allowed;
 }

 .rv-nav-btn:disabled:hover {
   background: rgba(255, 255, 255, .06);
   border-color: rgba(200, 155, 60, .3);
   color: rgba(255, 255, 255, .7);
 }

 /* ── CAROUSEL ────────────────────────────────────────────────── */
 .rv-carousel-wrap {
   overflow: hidden;
   /* mask: gənarlarda soluklaşma */
   -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
   mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
 }

 .rv-track {
   display: flex;
   gap: 24px;
   transition: transform .5s cubic-bezier(.25, .46, .45, .94);
   will-change: transform;
   cursor: grab;
   user-select: none;
 }

 .rv-track:active {
   cursor: grabbing;
 }

 /* ── KART ────────────────────────────────────────────────────── */
 .rv-card {
   flex-shrink: 0;
   width: calc((100% - 48px) / 3);
   /* 3 kart görünür */
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(200, 155, 60, .12);
   border-radius: 20px;
   padding: 32px 28px 28px;
   transition: border-color .3s, background .3s, transform .3s;
   position: relative;
   overflow: hidden;
 }

 /* Aktiv kart */
 .rv-card.active {
   background: rgba(200, 155, 60, .08);
   border-color: rgba(200, 155, 60, .35);
 }

 /* Dekorativ dırnaq işarəsi */
 .rv-card::before {
   content: '\201C';
   position: absolute;
   top: 16px;
   right: 22px;
   font-size: 80px;
   line-height: 1;
   font-family: Georgia, serif;
   color: rgba(200, 155, 60, .12);
   font-weight: 900;
 }

 .rv-stars {
   color: var(--gold);
   font-size: 13px;
   letter-spacing: 2px;
   margin-bottom: 18px;
 }

 .rv-text {
   font-size: 14px;
   color: rgba(255, 255, 255, .72);
   line-height: 1.8;
   font-weight: 300;
   margin-bottom: 28px;
   font-style: italic;
   min-height: 100px;
 }

 .rv-author {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .rv-avatar {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold), var(--gold-d));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
   font-weight: 900;
   color: #fff;
   font-family: 'Roboto', sans-serif;
   flex-shrink: 0;
   box-shadow: 0 4px 14px rgba(200, 155, 60, .35);
 }

 .rv-name {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   font-family: 'Roboto', sans-serif;
   margin-bottom: 3px;
 }

 .rv-meta {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .35);
   font-weight: 400;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .rv-meta i {
   color: var(--gold);
   font-size: 10px;
 }

 /* Verified badge */
 .rv-verified {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(52, 168, 83, .15);
   border: 1px solid rgba(52, 168, 83, .25);
   border-radius: 20px;
   padding: 3px 10px;
   font-size: 10px;
   font-weight: 700;
   color: #4ade80;
   margin-top: 8px;
 }

 .rv-verified i {
   font-size: 9px;
 }

 /* ── DOTS ────────────────────────────────────────────────────── */
 .rv-dots {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 40px;
 }

 .rv-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   cursor: pointer;
   transition: all .3s;
   border: none;
 }

 .rv-dot.active {
   background: var(--gold);
   width: 28px;
   border-radius: 4px;
 }

 /* ── RESPONSİV ───────────────────────────────────────────────── */
 @media(max-width:1100px) {
   .rv-card {
     width: calc((100% - 24px) / 2);
   }

   /* 2 kart */
 }

 @media(max-width:768px) {
   .rv-card {
     width: calc(100% - 40px);
   }

   /* 1 kart */
   .rv-rating-badge {
     display: none;
   }

   .rv-header {
     margin-bottom: 36px;
   }

   .rv-carousel-wrap {
     -webkit-mask-image: none;
     mask-image: none;
   }
 }

 /* ── VIN INQUIRY SECTION ───────────────────────────────────────────────── */
 #vinInquiryForm input[name="name"]::placeholder,
 #vinInquiryForm textarea::placeholder {
   color: rgba(74, 85, 104, .4) !important;
   font-family: 'Montserrat', sans-serif !important;
   font-size: 14px !important;
   text-transform: none !important;
   font-weight: 400 !important;
   letter-spacing: normal !important;
 }

 #vinInquiryForm input[name="vin"]::placeholder {
   color: var(--charcoal-dk) !important;
   opacity: 0.6 !important;
   font-family: 'Montserrat', sans-serif !important;
   font-size: 14px !important;
   text-transform: none !important;
 }

 #vinInquiryForm input[name="name"],
 #vinInquiryForm textarea {
   font-weight: 400 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
 }

 /* VIN Inquiry Responsive */
 @media (max-width: 768px) {
   .vin-inquiry-grid {
     grid-template-columns: 1fr !important;
     gap: 40px !important;
   }

   .vin-inquiry-content {
     text-align: center;
   }

   .vin-inquiry-features {
     display: grid !important;
     grid-template-columns: repeat(2, 1fr) !important;
     gap: 16px !important;
     align-items: start !important;
   }

   .inquiry-feat {
     flex-direction: column !important;
     text-align: center;
     gap: 8px !important;
     padding: 16px 12px !important;
     background: rgba(248, 250, 252, .5) !important;
     border: 1px solid rgba(226, 232, 240, .8) !important;
     border-radius: 12px !important;
     transition: all .3s ease !important;
   }

   .inquiry-feat:hover {
     background: rgba(200, 155, 60, .05) !important;
     border-color: rgba(200, 155, 60, .2) !important;
     transform: translateY(-2px) !important;
   }

   .inquiry-feat i {
     width: 48px !important;
     height: 48px !important;
     font-size: 20px !important;
   }

   .vin-form-card {
     padding: 24px !important;
     border-radius: 16px !important;
   }

   .vin-form-title {
     font-size: 16px !important;
     text-align: center;
     justify-content: center;
   }

   .vin-form-sub {
     font-size: 13px !important;
     text-align: center;
   }
 }

 @media (max-width: 480px) {
   #vin-inquiry {
     padding: 60px 0 !important;
   }

   .vin-inquiry-grid {
     gap: 30px !important;
   }

   .vin-form-card {
     padding: 20px !important;
   }

   .vin-input-wrap input,
   .vin-input-wrap textarea {
     font-size: 16px !important;
     /* iOS zoom prevention */
   }

   .vin-chars[id*="vinInquiryChars"] {
     gap: 3px !important;
     margin-bottom: 12px !important;
   }

   .vin-chars[id*="vinInquiryChars"] .vin-char {
     width: 28px !important;
     height: 32px !important;
     font-size: 12px !important;
   }
 }