/* Techtrim V37 — unified hero-to-page atmosphere + symmetrical side depth. */
.techtrim-home .tt-light-zone{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  margin-top:0!important;
  background:#fff!important;
}

/* Keep the approved top image, but let its lower edge dissolve into the page. */
.techtrim-home .tt-hero{
  position:relative!important;
  overflow:visible!important;
  background:#fff!important;
}
.techtrim-home .tt-hero>img{
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,#000 57%,
    rgba(0,0,0,.98) 64%,
    rgba(0,0,0,.92) 70%,
    rgba(0,0,0,.82) 76%,
    rgba(0,0,0,.67) 82%,
    rgba(0,0,0,.50) 87%,
    rgba(0,0,0,.34) 91%,
    rgba(0,0,0,.20) 95%,
    rgba(0,0,0,.09) 98%,
    transparent 100%)!important;
  mask-image:linear-gradient(to bottom,
    #000 0%,#000 57%,
    rgba(0,0,0,.98) 64%,
    rgba(0,0,0,.92) 70%,
    rgba(0,0,0,.82) 76%,
    rgba(0,0,0,.67) 82%,
    rgba(0,0,0,.50) 87%,
    rgba(0,0,0,.34) 91%,
    rgba(0,0,0,.20) 95%,
    rgba(0,0,0,.09) 98%,
    transparent 100%)!important;
}
.techtrim-home .tt-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  left:0!important;right:0!important;
  bottom:-92px!important;
  height:72%!important;
  pointer-events:none!important;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.015) 12%,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.24) 50%,
    rgba(255,255,255,.41) 63%,
    rgba(255,255,255,.60) 74%,
    rgba(255,255,255,.76) 84%,
    rgba(255,255,255,.89) 92%,
    rgba(255,255,255,.97) 97%,
    #fff 100%)!important;
}

/* Services keep a small overlap with the soft end of the hero fade. */
.techtrim-home #services{
  position:relative!important;
  z-index:4!important;
  margin-top:-24px!important;
}

/* One continuous atmosphere over the whole content zone:
   deep Techtrim blue at both outer sides -> white in the middle. */
.techtrim-home .tt-light-zone::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  height:auto!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(5,18,29,.72) 0%,
      rgba(8,32,49,.54) 4%,
      rgba(17,62,90,.35) 9%,
      rgba(54,123,161,.20) 15%,
      rgba(135,191,222,.10) 21%,
      rgba(231,245,253,.035) 29%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 60%,
      rgba(231,245,253,.035) 71%,
      rgba(135,191,222,.10) 79%,
      rgba(54,123,161,.20) 85%,
      rgba(17,62,90,.35) 91%,
      rgba(8,32,49,.54) 96%,
      rgba(5,18,29,.72) 100%)!important;
}

/* The lower part mirrors the hero: white around the middle of the page,
   then a long, smooth return to the same navy/blue family toward the footer. */
.techtrim-home .tt-light-zone::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:0!important;right:0!important;
  top:46%!important;
  bottom:0!important;
  height:auto!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 62% 44% at 50% 0%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 31%,
      rgba(247,252,255,.93) 48%,
      rgba(224,241,251,.67) 64%,
      rgba(164,207,231,.35) 78%,
      rgba(76,143,180,.13) 90%,
      rgba(11,39,58,0) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(247,252,255,.06) 9%,
      rgba(231,244,252,.15) 18%,
      rgba(202,228,243,.27) 29%,
      rgba(159,204,229,.42) 42%,
      rgba(105,165,199,.58) 56%,
      rgba(61,121,157,.72) 69%,
      rgba(27,78,108,.84) 81%,
      rgba(10,42,62,.93) 91%,
      #061724 100%),
    linear-gradient(90deg,
      #061724 0%,
      rgba(10,42,62,.95) 6%,
      rgba(28,82,113,.78) 14%,
      rgba(82,146,181,.48) 23%,
      rgba(191,224,241,.17) 34%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0) 55%,
      rgba(191,224,241,.17) 66%,
      rgba(82,146,181,.48) 77%,
      rgba(28,82,113,.78) 86%,
      rgba(10,42,62,.95) 94%,
      #061724 100%)!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.025) 5%,
    rgba(0,0,0,.08) 12%,
    rgba(0,0,0,.18) 21%,
    rgba(0,0,0,.34) 32%,
    rgba(0,0,0,.54) 45%,
    rgba(0,0,0,.74) 59%,
    rgba(0,0,0,.90) 73%,
    #000 87%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.025) 5%,
    rgba(0,0,0,.08) 12%,
    rgba(0,0,0,.18) 21%,
    rgba(0,0,0,.34) 32%,
    rgba(0,0,0,.54) 45%,
    rgba(0,0,0,.74) 59%,
    rgba(0,0,0,.90) 73%,
    #000 87%,#000 100%)!important;
}
.techtrim-home .tt-light-zone>*{position:relative!important;z-index:1!important}

/* Keep cards clean and readable while the surrounding page gains depth. */
.techtrim-home .tt-service-card,
.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,.95)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
.techtrim-home .tt-footer{
  background:linear-gradient(180deg,#061724 0%,#030b12 100%)!important;
  border-top:1px solid rgba(102,190,241,.20)!important;
}

@media(max-width:900px){
  .techtrim-home .tt-light-zone::after{top:43%!important}
  .techtrim-home .tt-hero::after{bottom:-56px!important;height:66%!important}
  .techtrim-home #services{margin-top:-14px!important}
}
@media(max-width:640px){
  .techtrim-home .tt-light-zone::before{
    background:linear-gradient(90deg,
      rgba(5,18,29,.46) 0%,rgba(69,137,174,.12) 12%,rgba(255,255,255,0) 30%,
      rgba(255,255,255,0) 70%,rgba(69,137,174,.12) 88%,rgba(5,18,29,.46) 100%)!important;
  }
  .techtrim-home .tt-light-zone::after{top:40%!important}
  .techtrim-home .tt-hero::after{bottom:-38px!important;height:61%!important}
  .techtrim-home #services{margin-top:-6px!important}
}