/* ═══════════════ LIVELY SERVICES PAGE ═══════════════ */

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 101;
    background: linear-gradient(90deg, var(--orange), #ffb066); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* ── Page header ── */
.svc-live .page-hero { min-height: 62vh; padding: 150px 5% 90px; justify-content: center; text-align: center; }
.svc-live .page-hero-inner { max-width: 820px; margin: 0 auto; }
.svc-live .page-hero-bg { animation: phDots 30s linear infinite; }
@keyframes phDots { to { background-position: 280px 280px; } }
.ph-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: phBlob 16s ease-in-out infinite; }
.ph-blob.b1 { width: 420px; height: 420px; top: -160px; left: -80px; background: rgba(255,122,0,.35); }
.ph-blob.b2 { width: 360px; height: 360px; bottom: -160px; right: -60px; background: rgba(80,140,255,.22); animation-direction: reverse; animation-duration: 19s; }
@keyframes phBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.15); } }

.svc-live .page-hero .section-label {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(255,122,0,.14); border: 1px solid rgba(255,122,0,.35); padding: .4rem 1.1rem; border-radius: 50px;
}
.svc-live .page-hero .section-label::before, .svc-live .service-detail-text .section-label::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: svDot 1.8s ease-out infinite;
}
@keyframes svDot { 0% { box-shadow: 0 0 0 0 rgba(255,122,0,.6); } 100% { box-shadow: 0 0 0 9px rgba(255,122,0,0); } }
.svc-live .page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.1; }
.svc-live .page-hero h1 .shim {
    background: linear-gradient(90deg, var(--orange), #ffd29e, var(--orange)); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: svShim 4s linear infinite;
}
@keyframes svShim { to { background-position: 200% center; } }

.ph-in { opacity: 0; transform: translateY(24px); animation: phIn .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes phIn { to { opacity: 1; transform: none; } }

/* Quick-jump chips */
.svc-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.svc-jump a {
    display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
    font: 600 .82rem 'Poppins', sans-serif; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    padding: .5rem 1rem; border-radius: 50px; backdrop-filter: blur(6px);
    opacity: 0; animation: phIn .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.7s + var(--i) * 80ms);
    transition: background .25s, border-color .25s, transform .25s;
}
.svc-jump a span { color: var(--orange); font-weight: 700; }
.svc-jump a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
.svc-jump a:hover span { color: #fff; }

.ph-scroll { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; width: 26px; height: 42px; border-radius: 20px;
    border: 2px solid rgba(255,255,255,.35); z-index: 1; }
.ph-scroll::after { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px;
    background: var(--orange); animation: phWheel 1.8s ease-in-out infinite; }
@keyframes phWheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ── Service blocks ── */
.svc-live .service-detail-section { position: relative; overflow: hidden; scroll-margin-top: 70px; }
.svc-live .service-detail-section::before {
    content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(80px);
    background: rgba(255,122,0,.10); top: 10%; left: -140px; pointer-events: none; animation: phBlob 18s ease-in-out infinite;
}
.svc-live .service-detail-section:nth-child(odd)::before { left: auto; right: -140px; }
.svc-live .service-detail-inner { position: relative; z-index: 1; }

.sd-media { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.sd-media::before {   /* offset accent frame */
    content: ''; position: absolute; inset: 0; border-radius: var(--radius); border: 2px solid var(--orange);
    transform: translate(18px, 18px); opacity: .55; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.reverse .sd-media::before { transform: translate(-18px, 18px); }
.sd-media::after {    /* glow */
    content: ''; position: absolute; inset: 15%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(255,122,0,.35), transparent 70%); filter: blur(30px);
    animation: sdGlow 5s ease-in-out infinite;
}
@keyframes sdGlow { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } }
.sd-frame { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    animation: sdFloat 7s ease-in-out infinite; }
.svc-live .sd-frame .service-detail-visual { display: block; width: 100%; max-width: none; object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sd-media:hover .service-detail-visual { transform: scale(1.07); }
.sd-media:hover::before { transform: translate(0, 0); }
.sd-frame::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); pointer-events: none; }
.sd-media:hover .sd-frame::after { animation: sdShine .9s ease; }
@keyframes sdShine { to { left: 140%; } }
@keyframes sdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.sd-num {
    position: absolute; top: -28px; left: -18px; z-index: 2;
    font: 900 4.5rem/1 'Poppins', sans-serif; color: transparent; -webkit-text-stroke: 2px var(--orange);
    text-shadow: 0 0 30px rgba(255,122,0,.25); pointer-events: none;
}
.reverse .sd-num { left: auto; right: -18px; }
.sd-badge {
    position: absolute; bottom: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(10,37,64,.85); color: #fff; backdrop-filter: blur(6px);
    font: 600 .75rem 'Poppins', sans-serif; padding: .4rem .9rem; border-radius: 50px; animation: sdFloat 5s ease-in-out -2s infinite;
}
.sd-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,.3); }

.svc-live .service-detail-text .section-label {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(255,122,0,.1); border: 1px solid rgba(255,122,0,.28); padding: .35rem 1rem; border-radius: 50px;
}

/* Feature list */
.svc-live .service-features li { transition: padding-left .25s, color .25s; }
.svc-live .service-features li::before {
    content: '✓'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,122,0,.12); font-size: .72rem;
}
.svc-live .service-features li:hover { padding-left: .4rem; color: var(--orange); }

/* Button */
.svc-live .service-detail-text .btn { position: relative; overflow: hidden; }
.svc-live .service-detail-text .btn::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg);
    animation: sdBtn 4.5s ease-in-out 1.5s infinite; pointer-events: none;
}
@keyframes sdBtn { 0% { left: -80%; } 22%, 100% { left: 140%; } }

/* ── Scroll reveals ── */
.sv-reveal .sd-media { opacity: 0; transform: translateX(-60px) rotate(-3deg); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.sv-reveal.reverse .sd-media { transform: translateX(60px) rotate(3deg); }
.sv-reveal .service-detail-text > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.sv-reveal .service-detail-text > :nth-child(1) { transition-delay: .15s; }
.sv-reveal .service-detail-text > :nth-child(2) { transition-delay: .25s; }
.sv-reveal .service-detail-text > :nth-child(3) { transition-delay: .35s; }
.sv-reveal .service-detail-text > :nth-child(4) { transition-delay: .45s; }
.sv-reveal .service-detail-text > :nth-child(5) { transition-delay: .9s; }
.sv-reveal .service-features li { opacity: 0; transform: translateX(-16px); transition: opacity .5s ease, transform .5s ease, padding-left .25s, color .25s;
    transition-delay: calc(.5s + var(--li) * 80ms), calc(.5s + var(--li) * 80ms), 0s, 0s; }
.sv-reveal.in .sd-media, .sv-reveal.in .service-detail-text > *, .sv-reveal.in .service-features li { opacity: 1; transform: none; }

/* ── Mobile ── */
@media (max-width: 900px) {
    .svc-live .page-hero { min-height: auto; padding: 120px 6% 80px; }
    .sd-num { font-size: 3.2rem; top: -20px; left: -6px; }
    .reverse .sd-num { right: -6px; }
    .sd-media::before, .reverse .sd-media::before { transform: translate(10px, 10px); }
    .sv-reveal .sd-media, .sv-reveal.reverse .sd-media { transform: translateY(40px); }
    .ph-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-live *, .svc-live *::before, .svc-live *::after { animation: none !important; transition: none !important; }
    .ph-in, .svc-jump a, .sv-reveal .sd-media, .sv-reveal .service-detail-text > *, .sv-reveal .service-features li { opacity: 1 !important; transform: none !important; }
}