/* ============================================================
   Trinity Software Systems — Brand polish layer (2026 banner)
   Loaded AFTER style.css + page-extras.css (via includes/header.php)
   so it refines every page without touching page markup.
   Colour tokens come from :root in style.css.
   ============================================================ */

/* Signature gradient bar pinned above the top bar, site-wide */
.header::before{
  content:""; display:block; height:3px;
  background:var(--brand-gradient);
}

/* ---------- Section headers: gradient accent underline ---------- */
.section-header{position:relative;}
.section-header h2{position:relative; display:inline-block; padding-bottom:.5rem;}
.section-header h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:66px; height:4px; border-radius:4px; background:var(--brand-gradient);
}
/* left-aligned section headers keep the accent on the left */
.section-header:not(.text-center) h2::after{left:0; transform:none;}

/* ---------- Buttons: hover shifts blue → teal ---------- */
.btn-primary:hover{
  background-color:var(--brand-teal); border-color:var(--brand-teal); color:#fff;
  transform:translateY(-1px);
}
.btn-outline:hover{background-color:var(--brand-blue); border-color:var(--brand-blue);}
.btn{transition:all .2s ease;}

/* ---------- Cards: gradient top-border reveal + lift ---------- */
.value-card,.service-card,.industry-card,.insight-card{
  position:relative; overflow:hidden;
}
.value-card::before,.service-card::before,.industry-card::before,.insight-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--brand-gradient); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.value-card:hover::before,.service-card:hover::before,
.industry-card:hover::before,.insight-card:hover::before{transform:scaleX(1);}
.service-card:hover,.industry-card:hover,.insight-card:hover,.value-card:hover{
  transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(0,17,41,.30);
}

/* Service / industry icon tiles: soft brand tint */
.service-icon,.industry-icon{
  background:linear-gradient(135deg,rgba(0,167,143,.14),rgba(10,120,224,.14)) !important;
}
.service-icon i,.industry-icon i{color:var(--brand-blue);}

/* Two-column mega menus (Services, Technologies) */
.mega-menu.mega-menu--2{
  grid-template-columns:repeat(2,1fr);
  min-width:520px;
}

/* ---------- Navigation ---------- */
.nav-menu > li > a:hover,
.nav-menu > li > a.active{color:var(--brand-blue);}
.nav-menu > li > a.active{position:relative;}
.mega-menu-col h4{color:var(--brand-blue);}
.mega-menu-col a:hover{color:var(--brand-teal);}

/* ---------- Footer: pure-black → brand navy, teal hovers ---------- */
.footer{background-color:var(--brand-navy) !important;}
.footer a:hover,.contact-list a:hover{color:var(--brand-teal);}
.social-links a:hover{background-color:var(--brand-teal); border-color:var(--brand-teal);}
.footer-col h4{position:relative; padding-bottom:8px;}
.footer-col h4::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:3px;
  border-radius:3px; background:var(--brand-gradient);
}

/* ---------- Featured case / CTA: keep gradient legible ---------- */
.featured-case .stat-card h3,.case-stats h3{
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .btn,.value-card,.service-card,.industry-card,.insight-card,
  .value-card::before,.service-card::before,.industry-card::before,.insight-card::before{
    transition:none !important;
  }
}