/* HL3C v54 - Keep approved Hero, add color rhythm from Use Cases onward, align featured cards */

/* Start from Use Cases: light but more lively, with stronger accent colors */
.brand-v4-scenarios{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,198,84,.30), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(89,130,255,.22), transparent 34%),
    radial-gradient(circle at 70% 88%, rgba(44,205,190,.18), transparent 30%),
    linear-gradient(135deg,#fff7e8 0%,#f4fbff 48%,#fff1f6 100%)!important;
  border-top:1px solid rgba(17,24,39,.08)!important;
}
.brand-v4-scenarios::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.48;
  background-image:
    linear-gradient(120deg, transparent 0 47%, rgba(34,197,185,.16) 47.1%, transparent 47.45%),
    linear-gradient(25deg, transparent 0 63%, rgba(76,125,255,.12) 63.1%, transparent 63.45%);
}
.brand-v4-scenarios .brand-v4-section-head,
.brand-v4-scenarios .brand-v4-scenario-grid{
  position:relative!important;
  z-index:1!important;
}
.brand-v4-scenarios .brand-v4-section-head span{
  color:#0f9f9a!important;
}
.brand-v4-scenarios .brand-v4-section-head h2{
  color:#111827!important;
}
.brand-v4-scenarios .brand-v4-section-head p{
  color:#475569!important;
}
.brand-v4-scenario-grid{
  align-items:stretch!important;
}
.brand-v4-scenario-card{
  position:relative!important;
  min-height:176px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(17,24,39,.10)!important;
  box-shadow:0 20px 52px rgba(31,41,55,.12)!important;
}
.brand-v4-scenario-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,#21c4bb,#4c7dff,#ffb84d,#ff6b8a);
  opacity:.92;
}
.brand-v4-scenario-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-42px;
  width:135px;
  height:135px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(76,125,255,.16),rgba(31,166,160,.14));
  pointer-events:none;
}
.brand-v4-scenario-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(76,125,255,.26)!important;
  box-shadow:0 28px 66px rgba(31,41,55,.16)!important;
}
.brand-v4-scenario-card h3{
  position:relative!important;
  z-index:1!important;
  color:#111827!important;
}
.brand-v4-scenario-card > div{
  position:relative!important;
  z-index:1!important;
}
.brand-v4-scenario-card a{
  background:#fff!important;
  color:#263244!important;
  border:1px solid rgba(17,24,39,.10)!important;
  box-shadow:0 8px 18px rgba(31,41,55,.06)!important;
}
.brand-v4-scenario-card a:nth-child(3n+1){
  background:linear-gradient(135deg,#e9fffb,#ffffff)!important;
  color:#0f766e!important;
}
.brand-v4-scenario-card a:nth-child(3n+2){
  background:linear-gradient(135deg,#eef3ff,#ffffff)!important;
  color:#3157d8!important;
}
.brand-v4-scenario-card a:nth-child(3n){
  background:linear-gradient(135deg,#fff5df,#ffffff)!important;
  color:#9a5b00!important;
}

/* Featured products: same card height and aligned buttons */
.brand-v4-featured{
  background:
    radial-gradient(circle at 12% 10%, rgba(76,125,255,.12), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(255,184,77,.18), transparent 30%),
    linear-gradient(180deg,#fff1f6 0%,#f5fbff 52%,#fff8ec 100%)!important;
}
.brand-v4-product-grid{
  align-items:stretch!important;
}
.brand-v4-product-card{
  height:100%!important;
  min-height:520px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(17,24,39,.10)!important;
  box-shadow:0 22px 56px rgba(31,41,55,.12)!important;
}
.brand-v4-product-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(76,125,255,.24)!important;
  box-shadow:0 30px 70px rgba(31,41,55,.17)!important;
}
.brand-v4-product-img{
  flex:0 0 245px!important;
  height:245px!important;
  min-height:245px!important;
  display:block!important;
  overflow:hidden!important;
  background:#e5e7eb!important;
}
.brand-v4-product-img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.brand-v4-product-body{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  padding:26px 28px 28px!important;
}
.brand-v4-product-body small{
  min-height:1.2em!important;
  color:#2563eb!important;
  font-weight:900!important;
}
.brand-v4-product-body h3{
  min-height:2.3em!important;
  color:#111827!important;
  line-height:1.15!important;
  margin-bottom:10px!important;
}
.brand-v4-product-body p{
  color:#4b5563!important;
  line-height:1.72!important;
  min-height:5.1em!important;
  margin-bottom:16px!important;
}
.brand-v4-spec{
  margin-top:0!important;
  margin-bottom:18px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
}
.brand-v4-product-body .btn{
  margin-top:auto!important;
  align-self:flex-start!important;
  min-width:128px!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#111827,#263244)!important;
  color:#fff!important;
}

/* The following light sections get a small color rhythm without returning to dark theme */
.brand-v4-trust{
  background:
    radial-gradient(circle at 18% 16%, rgba(31,166,160,.16), transparent 32%),
    radial-gradient(circle at 82% 28%, rgba(76,125,255,.14), transparent 34%),
    linear-gradient(180deg,#fff8ec 0%,#eefaff 100%)!important;
}
.brand-v4-trust-grid div:nth-child(1){border-top:5px solid #21c4bb!important;}
.brand-v4-trust-grid div:nth-child(2){border-top:5px solid #4c7dff!important;}
.brand-v4-trust-grid div:nth-child(3){border-top:5px solid #ffb84d!important;}
.brand-v4-trust-grid div:nth-child(4){border-top:5px solid #ff6b8a!important;}
.brand-v4-cta{
  background:linear-gradient(135deg,#111827 0%,#16344a 52%,#0f766e 100%)!important;
  color:#fff!important;
}
.brand-v4-cta h2{color:#fff!important;}
.brand-v4-cta p{color:rgba(255,255,255,.78)!important;}
.brand-v4-cta .btn{
  background:#fff!important;
  color:#111827!important;
}

@media (max-width:760px){
  .brand-v4-product-card{min-height:0!important;}
  .brand-v4-product-img{flex-basis:210px!important;height:210px!important;min-height:210px!important;}
  .brand-v4-product-body h3,
  .brand-v4-product-body p,
  .brand-v4-spec{min-height:0!important;}
}

/* v55: Service Area turns into a compact Why HL3C support block; sections above remain unchanged */
.brand-v4-trust-card{
  padding:clamp(34px,4.2vw,58px)!important;
}
.brand-v4-trust-card h2{
  max-width:980px!important;
  font-size:clamp(34px,3.3vw,58px)!important;
  line-height:1.16!important;
  letter-spacing:-.04em!important;
}
.brand-v4-trust-card > p{
  max-width:900px!important;
  margin-top:18px!important;
  font-size:clamp(16px,1.2vw,21px)!important;
  line-height:1.8!important;
}
.brand-v4-trust-grid{
  margin-top:34px!important;
  gap:20px!important;
}
.brand-v4-trust-grid div{
  min-height:158px!important;
  padding:24px 26px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
.brand-v4-trust-grid strong{
  font-size:32px!important;
  line-height:1!important;
  margin-bottom:14px!important;
}
.brand-v4-trust-grid span{
  display:block!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.35!important;
  color:#111827!important;
}
.brand-v4-trust-grid p{
  margin:10px 0 0!important;
  color:#4b5563!important;
  font-size:15px!important;
  line-height:1.7!important;
  font-weight:650!important;
  text-shadow:none!important;
}
@media (max-width:760px){
  .brand-v4-trust-grid div{min-height:0!important;}
}