/* Techtrim V39 — lower atmosphere starts at the middle of Popular cars.
   Palette is sampled from the approved hero: near-black navy -> cobalt navy,
   with a white center and matching blue side depth. */

.techtrim-home .tt-light-zone{
  --tt-lower-start: 760px;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#fff!important;
}

/* Replace the older lower wash. Its top is positioned by JS at the middle
   of the Popular cars cards, so the color arrives exactly there on any zoom/width. */
.techtrim-home .tt-light-zone::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:0!important;
  right:0!important;
  top:var(--tt-lower-start)!important;
  bottom:0!important;
  height:auto!important;
  pointer-events:none!important;
  background:
    /* keep the central corridor light while both side walls inherit hero blue */
    radial-gradient(ellipse 58% 34% at 50% 4%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 30%,
      rgba(244,250,255,.94) 48%,
      rgba(211,230,248,.70) 65%,
      rgba(91,139,191,.24) 82%,
      rgba(7,27,70,0) 100%),
    linear-gradient(90deg,
      rgba(1,9,28,.98) 0%,
      rgba(2,15,46,.94) 5%,
      rgba(3,25,72,.78) 12%,
      rgba(7,46,105,.52) 20%,
      rgba(72,121,172,.25) 29%,
      rgba(205,226,246,.09) 39%,
      rgba(255,255,255,0) 46%,
      rgba(255,255,255,0) 54%,
      rgba(205,226,246,.09) 61%,
      rgba(72,121,172,.25) 71%,
      rgba(7,46,105,.52) 80%,
      rgba(3,25,72,.78) 88%,
      rgba(2,15,46,.94) 95%,
      rgba(1,9,28,.98) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(248,252,255,.04) 5%,
      rgba(229,240,252,.10) 11%,
      rgba(190,215,241,.20) 19%,
      rgba(124,164,208,.33) 30%,
      rgba(61,107,164,.49) 43%,
      rgba(20,64,126,.66) 58%,
      rgba(7,38,96,.80) 72%,
      rgba(3,23,65,.91) 86%,
      #01091c 100%)!important;
  -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.05) 5%,
      rgba(0,0,0,.14) 10%,
      rgba(0,0,0,.28) 17%,
      rgba(0,0,0,.48) 26%,
      rgba(0,0,0,.70) 38%,
      rgba(0,0,0,.88) 52%,
      #000 68%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.05) 5%,
      rgba(0,0,0,.14) 10%,
      rgba(0,0,0,.28) 17%,
      rgba(0,0,0,.48) 26%,
      rgba(0,0,0,.70) 38%,
      rgba(0,0,0,.88) 52%,
      #000 68%,#000 100%)!important;
}

/* Keep all content above the atmosphere. */
.techtrim-home .tt-light-zone>*{
  position:relative!important;
  z-index:1!important;
}

/* The cards themselves stay clean/readable while their surroundings gain color. */
.techtrim-home .tt-approved-car,
.techtrim-home .tt-more-car,
.techtrim-home .tt-trust article,
.techtrim-home .tt-visit-card,
.techtrim-home .tt-map-card{
  background-color:rgba(255,255,255,.955)!important;
}

/* Footer continues the exact same navy family instead of the previous greenish cast. */
.techtrim-home .tt-footer{
  background:linear-gradient(180deg,#01091c 0%,#000611 100%)!important;
  border-top:1px solid rgba(80,138,205,.28)!important;
}

@media(max-width:640px){
  .techtrim-home .tt-light-zone::after{
    background:
      radial-gradient(ellipse 72% 30% at 50% 2%,rgba(255,255,255,1) 0%,rgba(242,249,255,.90) 48%,rgba(58,108,164,.18) 77%,rgba(1,9,28,0) 100%),
      linear-gradient(90deg,rgba(1,9,28,.90) 0%,rgba(7,46,105,.35) 14%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(7,46,105,.35) 86%,rgba(1,9,28,.90) 100%),
      linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(155,190,224,.18) 24%,rgba(31,78,137,.58) 55%,#01091c 100%)!important;
  }
}