/* ==============================================================
   WEBZYLON SERVICE VARIATIONS
   Page-specific art direction layered on the shared service system.
   ============================================================== */

.wz-service-page[data-service="ecommerce"] .wz-svc-hero {
  background: radial-gradient(circle at 72% 42%, rgba(204,11,11,.20), transparent 23%), radial-gradient(circle at 82% 70%, rgba(255,255,255,.035), transparent 20%), #000;
}
.wz-service-page[data-service="webapp"] .wz-svc-hero {
  background: radial-gradient(circle at 72% 42%, rgba(204,11,11,.15), transparent 20%), linear-gradient(115deg, transparent 45%, rgba(204,11,11,.035) 45.2%, transparent 45.5%), #000;
}
.wz-service-page[data-service="mobile"] .wz-svc-hero {
  background: radial-gradient(ellipse at 73% 45%, rgba(204,11,11,.18), transparent 22%), radial-gradient(circle at 62% 70%, rgba(255,255,255,.025), transparent 18%), #000;
}
.wz-service-page[data-service="social"] .wz-svc-hero {
  background: radial-gradient(circle at 74% 45%, rgba(204,11,11,.17), transparent 23%), radial-gradient(circle at 87% 25%, rgba(204,11,11,.07), transparent 14%), #000;
}
.wz-service-page[data-service="creative"] .wz-svc-hero {
  background: radial-gradient(circle at 72% 43%, rgba(204,11,11,.22), transparent 25%), radial-gradient(circle at 90% 65%, rgba(255,255,255,.04), transparent 16%), #000;
}

/* Give each service a subtle section signature without changing brand colors. */
.wz-service-page[data-service="ecommerce"] .wz-browser-card__visual { border-radius: 22px; transform: rotate(-7deg); background:linear-gradient(135deg,rgba(204,11,11,.22),transparent 52%),#0b0b0b; }
.wz-service-page[data-service="ecommerce"] .wz-browser-card__visual::before { inset:26px 70px 70px 26px; border-radius:15px; }
.wz-service-page[data-service="ecommerce"] .wz-browser-card__visual::after { inset:105px 28px 28px; border-radius:10px; }

.wz-service-page[data-service="webapp"] .wz-browser-card__visual { border-radius:18px; transform:rotate(-4deg); background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px),radial-gradient(circle at 32% 40%,rgba(204,11,11,.28),transparent 34%),#090909; }
.wz-service-page[data-service="webapp"] .wz-browser-card__visual::before { inset:24px 24px 110px; border-radius:10px; }
.wz-service-page[data-service="webapp"] .wz-browser-card__visual::after { inset:130px 24px 24px; border-radius:10px; }

.wz-service-page[data-service="mobile"] .wz-browser-card__visual { width:180px; height:285px; right:20px; bottom:-90px; border-radius:34px; transform:rotate(10deg); background:radial-gradient(circle at 50% 24%,rgba(204,11,11,.30),transparent 30%),#0a0a0a; }
.wz-service-page[data-service="mobile"] .wz-browser-card__visual::before { inset:14px; border-radius:25px; }
.wz-service-page[data-service="mobile"] .wz-browser-card__visual::after { inset:30px 58px 232px; border-radius:999px; }

.wz-service-page[data-service="social"] .wz-browser-card__visual { border-radius:24px; transform:rotate(6deg); background:linear-gradient(160deg,rgba(204,11,11,.28),transparent 48%),#090909; }
.wz-service-page[data-service="social"] .wz-browser-card__visual::before { inset:24px 24px 98px; border-radius:18px; }
.wz-service-page[data-service="social"] .wz-browser-card__visual::after { inset:140px 28px 28px; border-radius:999px; }

.wz-service-page[data-service="creative"] .wz-browser-card__visual { border-radius:50%; transform:rotate(-10deg); background:conic-gradient(from 210deg,rgba(204,11,11,.36),#070707 30%,rgba(255,255,255,.07) 55%,#070707 72%,rgba(204,11,11,.22)); }
.wz-service-page[data-service="creative"] .wz-browser-card__visual::before { inset:34px; border-radius:50%; }
.wz-service-page[data-service="creative"] .wz-browser-card__visual::after { inset:74px; border-radius:50%; border-color:rgba(255,255,255,.16); }

/* Per-service bento hover signatures. */
.wz-service-page[data-service="ecommerce"] .wz-cap-card:hover .wz-cap-icon { border-radius:13px; transform:rotate(-4deg) scale(1.05); }
.wz-service-page[data-service="webapp"] .wz-cap-card:hover .wz-cap-icon { transform:translateY(-4px); box-shadow:0 0 0 7px rgba(204,11,11,.07); }
.wz-service-page[data-service="mobile"] .wz-cap-card:hover .wz-cap-icon { border-radius:15px 15px 22px 22px; transform:translateY(-4px); }
.wz-service-page[data-service="social"] .wz-cap-card:hover .wz-cap-icon { transform:rotate(6deg) scale(1.06); }
.wz-service-page[data-service="creative"] .wz-cap-card:hover .wz-cap-icon { transform:rotate(-10deg) scale(1.08); }

.wz-cap-icon { transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-radius .4s ease; }

/* The orbit labels shift slightly per experience for less template-like composition. */
.wz-service-page[data-service="ecommerce"] .wz-orbit-label--1 { left:7%; top:15%; }
.wz-service-page[data-service="ecommerce"] .wz-orbit-label--2 { right:2%; top:28%; }
.wz-service-page[data-service="ecommerce"] .wz-orbit-label--3 { left:3%; bottom:19%; }
.wz-service-page[data-service="ecommerce"] .wz-orbit-label--4 { right:4%; bottom:13%; }
.wz-service-page[data-service="webapp"] .wz-orbit-label--1 { left:0; top:25%; }
.wz-service-page[data-service="webapp"] .wz-orbit-label--2 { right:1%; top:18%; }
.wz-service-page[data-service="webapp"] .wz-orbit-label--3 { left:8%; bottom:12%; }
.wz-service-page[data-service="webapp"] .wz-orbit-label--4 { right:0; bottom:25%; }
.wz-service-page[data-service="mobile"] .wz-orbit-label--1 { left:4%; top:18%; }
.wz-service-page[data-service="mobile"] .wz-orbit-label--2 { right:0; top:40%; }
.wz-service-page[data-service="mobile"] .wz-orbit-label--3 { left:10%; bottom:18%; }
.wz-service-page[data-service="mobile"] .wz-orbit-label--4 { right:10%; bottom:9%; }
.wz-service-page[data-service="social"] .wz-orbit-label--1 { left:0; top:21%; }
.wz-service-page[data-service="social"] .wz-orbit-label--2 { right:2%; top:27%; }
.wz-service-page[data-service="social"] .wz-orbit-label--3 { left:11%; bottom:14%; }
.wz-service-page[data-service="social"] .wz-orbit-label--4 { right:2%; bottom:18%; }
.wz-service-page[data-service="creative"] .wz-orbit-label--1 { left:8%; top:12%; }
.wz-service-page[data-service="creative"] .wz-orbit-label--2 { right:0; top:32%; }
.wz-service-page[data-service="creative"] .wz-orbit-label--3 { left:3%; bottom:22%; }
.wz-service-page[data-service="creative"] .wz-orbit-label--4 { right:12%; bottom:8%; }

@media (max-width:767px) {
  .wz-service-page[data-service="mobile"] .wz-browser-card__visual { right:-18px; opacity:.48; }
  .wz-service-page .wz-orbit-label { max-width:145px; }
}