.srp-project-overview { color: #fff; background: radial-gradient(circle at 84% 10%,rgba(140,114,255,.13),transparent 27%),#11101a; }
.srp-project-overview .srp-case-label { color: #b9aeff; }
.srp-project-overview .srp-section-head--project-list > p:last-child { color: rgba(255,255,255,.6); }
.srp-featured-card { min-height: 34rem; grid-template-columns: 1fr; border-color: rgba(255,255,255,.1); color: #fff; background: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.srp-featured-card:hover { border-color: rgba(174,182,255,.32); box-shadow: 0 2rem 5rem rgba(0,0,0,.27); }
.srp-featured-card__media { position: relative; min-height: clamp(19rem,28vw,27rem); overflow: hidden; background: radial-gradient(circle at 50% 44%,rgba(140,114,255,.18),transparent 39%),#090810; }
.srp-featured-card__mockup { width: 100%!important; height: 100%!important; object-fit: contain!important; object-position: center!important; transform: scale(1.03); transition: transform 650ms cubic-bezier(.2,.7,.2,1); }
.srp-featured-card__body { min-height: 15rem; justify-content: flex-start; padding: clamp(1.4rem,2.5vw,2.4rem); border-top: 1px solid rgba(255,255,255,.08); }
.srp-featured-card__number { color: #b9aeff; }
.srp-featured-card__theme-icon { display: grid; width: 5rem; height: 5rem; place-items: center; padding: .32rem; border-radius: 1rem; background: #f5f2ef; background-image: none; }
.srp-featured-card h3 { margin: 1.25rem 0 0; color: #fff; font-size: clamp(1.7rem,1.2rem + 1.2vw,2.8rem); }
.srp-featured-card__body > span:last-child { color: rgba(255,255,255,.6); }
.srp-overview-devices { position: absolute; inset: 0; display: block; }
.srp-overview-devices img { position: absolute; height: auto!important; object-fit: contain!important; border: .45rem solid #181620; border-radius: .75rem; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.36); }
.srp-overview-devices img:nth-child(1) { top: 12%; left: 8%; width: 72%; transform: rotate(-2deg); }
.srp-overview-devices img:nth-child(2) { right: 5%; bottom: 8%; width: 55%; transform: rotate(2deg); }
.srp-overview-devices img:nth-child(3) { right: 8%; top: 12%; z-index: 2; width: 16%; border-width: .3rem; border-radius: 1rem; }
.srp-overview-code { position: absolute; inset: clamp(1rem,3vw,2.5rem); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; background: #11101a; box-shadow: 0 1.7rem 3.8rem rgba(0,0,0,.3); }
.srp-overview-code > i { display: flex; align-items: center; gap: .38rem; padding: .7rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.srp-overview-code > i b { width: .48rem; height: .48rem; border-radius: 50%; background: #665f71; }
.srp-overview-code > i em { margin-left: .5rem; color: rgba(255,255,255,.45); font-size: .65rem; font-style: normal; }
.srp-overview-code code { align-self: center; padding: clamp(1rem,3vw,2.4rem); color: #f4f0ff; font-size: clamp(.72rem,1.15vw,1rem); line-height: 1.9; }
.srp-overview-code code span { color: #b9aeff; }.srp-overview-code code mark { color: #ffd9b1; background: transparent; }
.srp-overview-code > strong { display: flex; gap: .6rem; padding: 0 1rem 1rem; }
.srp-overview-code .srp-icon { width: 2.6rem; height: 2.6rem; padding: .55rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; color: #c9c0ff; }
.srp-overview-lab { position: absolute; inset: 10% 10%; display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; perspective: 1000px; transform: rotateX(10deg) rotateZ(-4deg); }
.srp-overview-lab img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: radial-gradient(circle,#252031,#0e0c15); box-shadow: 0 1rem 2rem rgba(0,0,0,.28); filter: brightness(1.28) saturate(1.08); }
@media (hover:hover) { .srp-featured-card--sites:hover .srp-featured-card__mockup { transform: scale(1.065); } }
@media (max-width:63.9375rem) { .srp-featured-card { min-height: 30rem; } }
@media (max-width:39.9375rem) { .srp-featured-card__media { min-height: 18rem; } .srp-featured-card__body { min-height: 0; } .srp-featured-card__theme-icon { width: 4.2rem; height: 4.2rem; } }