/* Techtrim V34 — one continuous atmosphere: hero blue -> white center -> blue lower zone,
   with subtle side vignettes converging into the white center. */

.techtrim-home .tt-light-zone{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  margin-top:0!important;
  background:
    linear-gradient(90deg,
      rgba(8,30,46,.12) 0%,
      rgba(62,137,181,.07) 8%,
      rgba(210,237,251,.04) 18%,
      rgba(255,255,255,0) 31%,
      rgba(255,255,255,0) 69%,
      rgba(210,237,251,.04) 82%,
      rgba(62,137,181,.07) 92%,
      rgba(8,30,46,.12) 100%),
    #fff!important;
}

/* Approved hero stays untouched; only its lower edge dissolves very gradually into white. */
.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 53%,
    rgba(0,0,0,.99) 59%,
    rgba(0,0,0,.95) 66%,
    rgba(0,0,0,.87) 72%,
    rgba(0,0,0,.75) 78%,
    rgba(0,0,0,.60) 83%,
    rgba(0,0,0,.44) 88%,
    rgba(0,0,0,.29) 92%,
    rgba(0,0,0,.16) 95%,
    rgba(0,0,0,.07) 98%,
    transparent 100%)!important;
  mask-image:linear-gradient(to bottom,
    #000 0%,#000 53%,
    rgba(0,0,0,.99) 59%,
    rgba(0,0,0,.95) 66%,
    rgba(0,0,0,.87) 72%,
    rgba(0,0,0,.75) 78%,
    rgba(0,0,0,.60) 83%,
    rgba(0,0,0,.44) 88%,
    rgba(0,0,0,.29) 92%,
    rgba(0,0,0,.16) 95%,
    rgba(0,0,0,.07) 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:-78px!important;
  height:70%!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(9,31,48,.10) 0%,
      rgba(80,153,196,.055) 11%,
      rgba(255,255,255,0) 29%,
      rgba(255,255,255,0) 71%,
      rgba(80,153,196,.055) 89%,
      rgba(9,31,48,.10) 100%),
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.012) 14%,
      rgba(255,255,255,.04) 27%,
      rgba(255,255,255,.10) 39%,
      rgba(255,255,255,.21) 51%,
      rgba(255,255,255,.38) 63%,
      rgba(255,255,255,.57) 73%,
      rgba(255,255,255,.73) 82%,
      rgba(255,255,255,.86) 89%,
      rgba(255,255,255,.94) 94%,
      rgba(255,255,255,.985) 98%,
      #fff 100%)!important;
}

/* Services slightly overlap the final light part of the hero transition. */
.techtrim-home #services{
  position:relative!important;
  z-index:9!important;
  margin-top:-28px!important;
}

/* Lower 25% climbs upward starting at the lower edge of Popular cars.
   It mirrors the hero: white -> pale cyan -> Techtrim navy, while the side edges
   become darker sooner and blend softly toward a white center. */
.techtrim-home .tt-light-zone::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:0!important;right:0!important;
  top:43%!important;
  bottom:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 64% 86% at 50% 26%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.92) 24%,
      rgba(246,251,255,.70) 43%,
      rgba(219,239,251,.35) 61%,
      rgba(120,181,216,.13) 76%,
      rgba(18,57,83,0) 100%),
    linear-gradient(90deg,
      rgba(7,23,36,.98) 0%,
      rgba(12,47,70,.82) 7%,
      rgba(42,104,143,.54) 15%,
      rgba(123,184,218,.26) 24%,
      rgba(224,241,251,.11) 34%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,0) 56%,
      rgba(224,241,251,.11) 66%,
      rgba(123,184,218,.26) 76%,
      rgba(42,104,143,.54) 85%,
      rgba(12,47,70,.82) 93%,
      rgba(7,23,36,.98) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(244,251,255,.10) 9%,
      rgba(225,242,252,.23) 19%,
      rgba(189,221,240,.40) 33%,
      rgba(126,183,216,.57) 50%,
      rgba(67,132,171,.72) 67%,
      rgba(23,75,109,.86) 83%,
      rgba(7,24,37,.98) 100%)!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.05) 4%,
    rgba(0,0,0,.14) 9%,
    rgba(0,0,0,.29) 16%,
    rgba(0,0,0,.50) 25%,
    rgba(0,0,0,.73) 38%,
    #000 55%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.05) 4%,
    rgba(0,0,0,.14) 9%,
    rgba(0,0,0,.29) 16%,
    rgba(0,0,0,.50) 25%,
    rgba(0,0,0,.73) 38%,
    #000 55%,#000 100%)!important;
}
.techtrim-home .tt-light-zone>*{position:relative!important;z-index:1!important}

/* Keep the lower controls in the same deep-blue family as the hero. */
.techtrim-home .tt-visit-contacts .tt-contact-buttons a,
.techtrim-home .tt-info-button{
  color:#fff!important;
  border:1px solid rgba(120,199,248,.40)!important;
  background:linear-gradient(135deg,#071c2b 0%,#0b324c 51%,#14577e 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 20px rgba(3,24,38,.13)!important;
}
.techtrim-home .tt-visit-contacts .tt-contact-buttons a:hover,
.techtrim-home a.tt-info-button:hover{
  color:#fff!important;
  border-color:rgba(164,222,255,.76)!important;
  background:linear-gradient(135deg,#0a2940 0%,#104768 52%,#1a6f9d 100%)!important;
}
.techtrim-home .tt-info-button b,
.techtrim-home .tt-info-button small,
.techtrim-home .tt-info-icon{color:#fff!important}
.techtrim-home .tt-info-button small{opacity:.80!important}

.techtrim-home .tt-visit-card,
.techtrim-home .tt-map-card,
.techtrim-home .tt-trust article{
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
.techtrim-home .tt-footer{
  background:linear-gradient(180deg,#071825 0%,#040c13 100%)!important;
  border-top:1px solid rgba(94,185,239,.22)!important;
}

@media(max-width:900px){
  .techtrim-home .tt-light-zone::after{top:41%!important}
  .techtrim-home .tt-hero::after{bottom:-50px!important;height:64%!important}
  .techtrim-home #services{margin-top:-16px!important}
}
@media(max-width:640px){
  .techtrim-home .tt-light-zone::after{top:39%!important}
  .techtrim-home .tt-hero::after{bottom:-36px!important;height:60%!important}
  .techtrim-home #services{margin-top:-7px!important}
}