.service-hero { isolation: isolate; background: #fafafa; }

.service-hero__title {
    text-wrap: balance;
    max-width: 14ch;
}
@media (min-width: 1024px) {
    .service-hero__title { max-width: 16ch; }
}

/* Soft mesh-gradient background */
.service-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 85% 18%, rgba(232,52,122,0.18) 0%, transparent 60%),
        radial-gradient(40% 50% at 12% 85%, rgba(99,102,241,0.10) 0%, transparent 65%),
        radial-gradient(30% 30% at 70% 90%, rgba(245,158,11,0.10) 0%, transparent 70%),
        linear-gradient(180deg, #fdfcfa 0%, #ffffff 50%, #fafaf7 100%);
}

/* Diagonal soft light beam */
.service-hero__beam {
    position: absolute;
    top: -40%;
    right: -25%;
    width: 80%;
    height: 180%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255,255,255,0.55) 48%,
        rgba(255,255,255,0.85) 52%,
        rgba(255,255,255,0.55) 56%,
        transparent 70%);
    transform: rotate(8deg);
    filter: blur(40px);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: serviceHeroBeam 12s ease-in-out infinite alternate;
}

/* Floating glowing orbs */
.service-hero__orb {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
    will-change: transform;
}
.service-hero__orb--a {
    top: -10%;
    right: -5%;
    width: 480px; height: 480px;
    background: radial-gradient(closest-side, var(--service-accent-color, #ec4899) 0%, transparent 70%);
    opacity: 0.42;
    animation: serviceHeroOrbFloat 14s ease-in-out infinite alternate;
}
.service-hero__orb--b {
    top: 35%;
    right: 22%;
    width: 320px; height: 320px;
    background: radial-gradient(closest-side, rgba(99,102,241,0.55) 0%, transparent 70%);
    opacity: 0.30;
    animation: serviceHeroOrbFloat 18s ease-in-out -4s infinite alternate-reverse;
}
.service-hero__orb--c {
    bottom: -15%;
    left: -8%;
    width: 400px; height: 400px;
    background: radial-gradient(closest-side, rgba(244,114,182,0.45) 0%, transparent 70%);
    opacity: 0.28;
    animation: serviceHeroOrbFloat 16s ease-in-out -8s infinite alternate;
}

/* Subtle dot pattern for texture */
.service-hero__dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(15,23,42,0.10) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 25%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 80% 25%, #000 0%, transparent 75%);
    opacity: 0.45;
}

/* Tiny grain noise — adds premium tactile feel */
.service-hero__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Animated shine arc on top-right corner */
.service-hero__shine {
    position: absolute;
    top: -160px;
    right: -160px;
    width: 540px; height: 540px;
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(from 220deg at 50% 50%,
        transparent 0deg,
        rgba(232,52,122,0.18) 80deg,
        rgba(255,255,255,0.95) 110deg,
        rgba(232,52,122,0.18) 140deg,
        transparent 220deg);
    filter: blur(20px);
    animation: serviceHeroShine 16s linear infinite;
    opacity: 0.55;
}

@keyframes serviceHeroOrbFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-26px, 28px, 0) scale(1.08); }
}
@keyframes serviceHeroBeam {
    0%   { transform: rotate(8deg) translateX(0); opacity: 0.4; }
    100% { transform: rotate(12deg) translateX(-30px); opacity: 0.6; }
}
@keyframes serviceHeroShine {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Premium hero image treatment */
.service-hero img.w-full {
    box-shadow:
        0 60px 120px -40px rgba(15,23,42,0.30),
        0 30px 60px -30px rgba(232,52,122,0.20),
        0 0 0 1px rgba(255,255,255,0.6) inset;
    border-radius: 24px;
    background: #fff;
}

@media (max-width: 768px) {
    .service-hero__orb--a { width: 320px; height: 320px; opacity: 0.35; }
    .service-hero__orb--b { display: none; }
    .service-hero__orb--c { width: 260px; height: 260px; opacity: 0.20; }
    .service-hero__beam { display: none; }
    .service-hero__shine { width: 320px; height: 320px; top: -100px; right: -100px; }
    .service-hero__dots { background-size: 18px 18px; opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__orb,
    .service-hero__beam,
    .service-hero__shine { animation: none !important; }
}