/* Techlit V36 — brighter ambient lighting + clean mobile backgrounds */

/* Slightly lift the global black level without changing the brand palette */
html,body{background:#07131d!important}
body{color:#f2f9fc!important}

/* Brighter, softer ambient background across the site */
.hero,
.section,
.clients-strip,
.site-footer,
.service-page,
.detail-section,
.companion,
.detail-contact,
.faq-page,
.blog-page,
.article-page,
.about-page,
.legal-page,
.simple-page,
.techlit-contact-section{
  background-image:
    radial-gradient(circle at 84% 14%,rgba(84,222,255,.18),transparent 34%),
    radial-gradient(circle at 8% 78%,rgba(42,129,255,.12),transparent 34%),
    linear-gradient(135deg,#081722 0%,#0d2332 52%,#081722 100%)!important;
}

/* Keep services slightly deeper so cards retain contrast */
.services{
  background-image:
    radial-gradient(circle at 10% 32%,rgba(65,218,255,.19),transparent 38%),
    radial-gradient(circle at 91% 70%,rgba(34,112,255,.13),transparent 34%),
    linear-gradient(145deg,#081722,#0c2130 56%,#081722)!important;
}

/* Hero gets a little more front light */
.hero{
  background-image:
    radial-gradient(circle at 18% 30%,rgba(76,219,255,.17),transparent 28%),
    radial-gradient(circle at 79% 20%,rgba(35,130,255,.14),transparent 34%),
    linear-gradient(135deg,#091925 0%,#10283a 55%,#091925 100%)!important;
}

/* Service detail hero */
.service-page .detail-hero{
  background:
    radial-gradient(circle at 14% 44%,rgba(72,218,255,.23),transparent 28%),
    radial-gradient(circle at 87% 22%,rgba(42,126,255,.15),transparent 25%),
    linear-gradient(135deg,#0a1a26,#10283a 62%,#091824)!important;
}

/* Header brighter and more separated from the page */
.site-header{
  background:rgba(10,27,40,.88)!important;
  border-bottom:1px solid rgba(104,225,255,.22)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.17),0 0 24px rgba(67,207,255,.06)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header nav a{color:#c9d9e3!important}
.site-header nav a:hover{color:#f0fbff!important}
.header-cta{background:rgba(11,30,44,.52)!important;border-color:rgba(118,213,239,.42)!important}

/* Improve legibility of secondary copy without making it white */
.hero-content>p,
.section-heading>p,
.section-heading>div+P,
.final-cta p,
.detail-hero p,
.detail-body>p,
.detail-about aside div,
.benefit-grid p,
.service-card p,
.faq-hero p,
.faq-intro-card p,
.article-hero p,
.article-content,
.techlit-contact-copy p,
.site-footer p,
.site-footer a{
  color:#c5d5de!important;
}
.eyebrow,.stats span,.benefit-grid span,.card-top b{color:#9fb5c4!important}

/* Ambient glows are visible but restrained */
.hero:after,.section:after,.clients-strip:after,.site-footer:after{opacity:.56!important}
.section-glow{opacity:.82!important}
.orb-one{opacity:1!important}.orb-two{opacity:1!important}

/* MOBILE: remove the visible square/grid/stripe texture entirely */
@media(max-width:900px){
  .grid-bg{display:none!important;background:none!important;background-image:none!important;opacity:0!important}

  .hero,
  .section,
  .clients-strip,
  .site-footer,
  .service-page,
  .detail-section,
  .companion,
  .detail-contact,
  .faq-page,
  .blog-page,
  .article-page,
  .about-page,
  .legal-page,
  .simple-page,
  .techlit-contact-section{
    background-image:
      radial-gradient(circle at 85% 10%,rgba(74,216,255,.14),transparent 32%),
      radial-gradient(circle at 8% 88%,rgba(45,122,255,.09),transparent 30%),
      linear-gradient(180deg,#091924 0%,#0c202e 52%,#091824 100%)!important;
    background-size:auto!important;
  }

  .services{
    background-image:
      radial-gradient(circle at 12% 18%,rgba(68,215,255,.13),transparent 31%),
      linear-gradient(180deg,#091824 0%,#0b1f2d 55%,#091824 100%)!important;
  }

  .service-page .detail-hero{
    background:
      radial-gradient(circle at 82% 12%,rgba(76,219,255,.15),transparent 30%),
      linear-gradient(180deg,#0a1b27 0%,#0d2332 58%,#091924 100%)!important;
  }

  /* Remove any extra decorative grid-like overlay on small screens */
  .hero:before,.section:before,.detail-hero:before{background-image:none!important}
  .hero:after,.section:after,.clients-strip:after,.site-footer:after{opacity:.34!important}

  .site-header{background:rgba(10,26,39,.94)!important}
}

@media(max-width:620px){
  .section-glow{opacity:.48!important;filter:blur(120px)!important}
}