/* TechToTab V54 — service pages receive more distinct, premium hero sections.
   Keeps each service background, then adds a custom glass panel, dynamic accents,
   solution chips and stronger composition for a more polished end-user impression. */

.v54-service-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 76vh, 760px);
  padding: clamp(86px, 10vw, 132px) 0 clamp(68px, 7vw, 96px);
  background:
    linear-gradient(100deg, rgba(2,8,24,.96) 0%, rgba(4,12,36,.92) 32%, rgba(6,16,44,.78) 56%, rgba(8,16,42,.36) 100%),
    var(--v34-bg) center center / cover no-repeat;
}
.v54-service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 18%, var(--v54-accent-glow, rgba(72, 168, 255, 0.26)) 0, transparent 34%),
    radial-gradient(circle at 82% 22%, var(--v54-accent-soft, rgba(61, 101, 255, 0.24)) 0, transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 22%, transparent 78%, rgba(255,255,255,.08));
  opacity: .95;
  pointer-events: none;
}
.v54-service-hero::after {
  content: "";
  position: absolute;
  right: clamp(-120px, -5vw, -60px);
  top: 50%;
  width: min(40vw, 520px);
  height: min(40vw, 520px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--v54-accent-soft, rgba(61, 101, 255, .24)) 0%, rgba(255,255,255,0) 68%);
  filter: blur(8px);
  opacity: .6;
  pointer-events: none;
}
.v54-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, 430px);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.v54-service-hero .v34-content {
  max-width: 760px;
}
.v54-service-hero .v34-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.v54-service-hero .v34-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v54-accent, #5bb8ff);
  box-shadow: 0 0 0 6px rgba(255,255,255,.05), 0 0 22px var(--v54-accent-soft, rgba(91,184,255,.45));
}
.v54-service-hero h1 {
  max-width: 11ch;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.045em;
  margin-top: 1.25rem;
}
.v54-service-hero .v34-description {
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  color: rgba(242,245,252,.88);
  margin-top: 1.15rem;
}
.v54-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.5rem 0 2rem;
}
.v54-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem .96rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.1;
  color: #f6f8ff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.v54-pill i {
  color: var(--v54-accent, #5bb8ff);
}
.v54-service-hero .v34-cta {
  margin-top: 0;
}
.v54-service-hero .v34-tiny {
  margin-top: 2rem;
  letter-spacing: .18em;
  color: rgba(236,241,252,.72);
}
.v54-service-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(14,20,42,.68) 0%, rgba(8,12,28,.82) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.24);
  box-shadow: 0 25px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 28px;
  padding: clamp(22px, 2.5vw, 28px);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.v54-service-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v54-accent, #5bb8ff), rgba(255,255,255,.92));
  opacity: .95;
}
.v54-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.v54-panel-label {
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: rgba(234,240,255,.76);
}
.v54-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--v54-accent, #5bb8ff);
  font-size: 1.4rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.v54-panel-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.1;
  margin: 0 0 .65rem;
  color: #fff;
}
.v54-panel-copy {
  margin: 0;
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(240,243,252,.82);
}
.v54-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  margin: 1.15rem 0 1rem;
}
.v54-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.v54-panel-list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  color: rgba(248,250,255,.96);
  font-size: .96rem;
  line-height: 1.45;
}
.v54-panel-list i {
  color: var(--v54-accent, #5bb8ff);
  font-size: 1rem;
  margin-top: .15rem;
}
.v54-panel-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.2rem;
}
.v54-foot-card {
  padding: .9rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.v54-foot-card span {
  display: block;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(233,238,252,.7);
  margin-bottom: .25rem;
}
.v54-foot-card strong {
  display: block;
  font-size: .96rem;
  color: #fff;
  font-weight: 700;
}
@media (max-width: 1199.98px) {
  .v54-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .v54-service-panel {
    max-width: 620px;
  }
  .v54-service-hero h1 {
    max-width: 12ch;
  }
}
@media (max-width: 767.98px) {
  .v54-service-hero {
    min-height: auto;
    padding: 84px 0 54px;
  }
  .v54-service-hero h1 {
    font-size: clamp(2.3rem, 13vw, 3.4rem);
  }
  .v54-service-panel {
    border-radius: 22px;
  }
  .v54-panel-foot {
    grid-template-columns: 1fr;
  }
  .v54-pill-row {
    gap: .6rem;
  }
  .v54-pill {
    font-size: .84rem;
    padding: .65rem .82rem;
  }
}