/* DreamCodeV premium service cards. Isolated from hero/orbit geometry. */
#services .service-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
#services .service-card{
  --card-accent:#b65cff;
  --card-accent-rgb:182,92,255;
  position:relative!important;
  min-height:300px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  padding:28px 22px 26px!important;
  border:1px solid rgba(var(--card-accent-rgb),.42)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 50% -8%,rgba(var(--card-accent-rgb),.20),transparent 37%),
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.05) 0 1px,transparent 1.5px),
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.045) 0 1px,transparent 1.5px),
    linear-gradient(155deg,rgba(18,8,28,.97),rgba(6,3,10,.985) 68%,rgba(10,4,16,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 40px rgba(0,0,0,.24)!important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
#services .service-card:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:-1!important;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.025) 47%,transparent 70%)!important;
  transform:translateX(-36%)!important;
  transition:transform .55s ease!important;
}
#services .service-card:after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--card-accent),transparent)!important;
  box-shadow:0 0 18px rgba(var(--card-accent-rgb),.72)!important;
  opacity:.9!important;
}
#services .service-card:hover,
#services .service-card:focus-within{
  transform:translateY(-5px)!important;
  border-color:rgba(var(--card-accent-rgb),.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 54px rgba(0,0,0,.38),0 0 30px rgba(var(--card-accent-rgb),.10)!important;
}
#services .service-card:hover:before{transform:translateX(36%)!important}

/* Use the clean centered approved Concept D icon sheet. */
#services .service-icon{
  width:112px!important;
  height:112px!important;
  min-width:112px!important;
  margin:2px auto 22px!important;
  border-radius:50%!important;
  font-size:0!important;
  color:transparent!important;
  text-shadow:none!important;
  background-image:url("assets/orbit-concept-d-clean.webp?v=1")!important;
  background-size:400% 200%!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 0 8px rgba(255,255,255,.22),0 0 25px rgba(var(--card-accent-rgb),.48),inset 0 0 18px rgba(255,255,255,.05)!important;
  filter:saturate(1.08) brightness(1.08)!important;
  transform:translateZ(0)!important;
  transition:transform .24s ease,filter .24s ease,box-shadow .24s ease!important;
}
#services #branding .service-icon{background-position:0% 0%!important}
#services #design .service-icon{background-position:33.333% 0%!important}
#services #media .service-icon{background-position:66.667% 0%!important}
#services #marketing .service-icon{background-position:100% 0%!important}
#services #web .service-icon{background-position:0% 100%!important}
#services #audio .service-icon{background-position:33.333% 100%!important}
#services #video .service-icon{background-position:66.667% 100%!important}
#services .service-card:hover .service-icon{
  transform:translateY(-2px) scale(1.035)!important;
  filter:saturate(1.16) brightness(1.14)!important;
  box-shadow:0 0 10px rgba(255,255,255,.30),0 0 34px rgba(var(--card-accent-rgb),.62)!important;
}
#services .service-card h3{
  margin:0 0 12px!important;
  font:600 19px "Space Grotesk",sans-serif!important;
  letter-spacing:-.025em!important;
  color:#fbf8ff!important;
}
#services .service-card p{
  max-width:245px!important;
  margin:0 auto!important;
  color:#bdb4c5!important;
  font-size:12.5px!important;
  line-height:1.66!important;
}
#services #branding{--card-accent:#d96cff;--card-accent-rgb:217,108,255}
#services #design{--card-accent:#a967ff;--card-accent-rgb:169,103,255}
#services #media{--card-accent:#48d9ff;--card-accent-rgb:72,217,255}
#services #marketing{--card-accent:#ff6aa8;--card-accent-rgb:255,106,168}
#services #web{--card-accent:#40e4ff;--card-accent-rgb:64,228,255}
#services #audio{--card-accent:#e45cff;--card-accent-rgb:228,92,255}
#services #video{--card-accent:#5f9dff;--card-accent-rgb:95,157,255}

@media(max-width:1150px){
  #services .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  #services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  #services .service-card{min-height:294px!important;padding:20px 12px 21px!important;border-radius:18px!important}
  #services .service-icon{width:84px!important;height:84px!important;min-width:84px!important;margin:4px auto 19px!important}
  #services .service-card h3{font-size:16px!important;margin-bottom:10px!important}
  #services .service-card p{font-size:11.2px!important;line-height:1.58!important;max-width:180px!important}
}
@media(max-width:390px){
  #services .service-grid{gap:9px!important}
  #services .service-card{min-height:278px!important;padding:18px 9px!important}
  #services .service-icon{width:76px!important;height:76px!important;min-width:76px!important}
  #services .service-card h3{font-size:15px!important}
  #services .service-card p{font-size:10.6px!important}
}
@media(prefers-reduced-motion:reduce){
  #services .service-card,#services .service-card:before,#services .service-icon{transition:none!important}
}