/* ============================================================
   Service Page — Section 1: Hero Banner
   Deep plum → magenta ramp · copy left · orbit visual right
   · stats band across the bottom. Built to the design reference.
   ============================================================ */

.svc-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(3rem, 5.5vw, 5.5rem) clamp(2.5rem, 4vw, 4rem);
    /* Ramp sampled from the reference: near-black indigo → plum → magenta */
    background: var(--gradient-hero, linear-gradient(105deg, #010027 0%, #180235 30%, #5A0858 62%, #B01A5C 88%, #E02261 100%));
    color: #fff;
}

/* Dotted texture over the ramp */
.svc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 88% 12%, #000 5%, transparent 70%);
    mask-image: radial-gradient(ellipse 75% 65% at 88% 12%, #000 5%, transparent 70%);
    pointer-events: none;
}

/* Soft colour blooms */
.svc-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
}
.svc-hero__glow--1 {
    width: 620px; height: 620px;
    top: -220px; right: -160px;
    background: radial-gradient(circle, rgba(224, 34, 97, 0.55), transparent 68%);
}
.svc-hero__glow--2 {
    width: 480px; height: 480px;
    bottom: -200px; left: -140px;
    background: radial-gradient(circle, rgba(146, 52, 247, 0.4), transparent 68%);
}

.svc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

/* ── Content ──────────────────────────────────────────────── */
.svc-hero__content { max-width: 640px; }

.svc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem 1.1rem 0.55rem 0.55rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}
.svc-hero__badge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF4D8D, #9234F7);
    color: #fff;
}
.svc-hero__badge-mark svg { width: 13px; height: 13px; }

.svc-hero__title {
    font-size: clamp(2.3rem, 4.9vw, 3.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: var(--space-5);
    text-wrap: balance;
}
/* On the dark ramp the highlight runs magenta → violet, as in the reference */
.svc-hero__title .gradient-text {
    background: linear-gradient(100deg, #FF4DA6 0%, #B478FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.svc-hero__desc {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.76);
    margin-bottom: var(--space-8);
    max-width: 34em;
}

/* ── Feature row — divided, as in the reference ───────────── */
/* A grid (not a wrapping flex row) so the dividers never dangle
   at the end of a wrapped line. */
.svc-hero__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    align-items: center;
    margin: 0 0 var(--space-8);
    padding: 0;
    list-style: none;
}
.svc-hero__feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.2rem clamp(0.75rem, 1.6vw, 1.3rem);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
}
.svc-hero__feature + .svc-hero__feature {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.svc-hero__features .svc-hero__feature:first-child { padding-left: 0; }

.svc-hero__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #FF7AB8;
}
.svc-hero__check svg { width: 13px; height: 13px; }

/* ── CTAs — chip-in-pill, matching the reference ──────────── */
.svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.svc-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.6rem 0.6rem 1.6rem;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.svc-hero__cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}
.svc-hero__cta-chip svg { width: 16px; height: 16px; }

.svc-hero__cta--primary {
    background: linear-gradient(100deg, #9234F7 0%, #DB3EC0 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(180, 40, 200, 0.35);
}
.svc-hero__cta--primary .svc-hero__cta-chip {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.svc-hero__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(180, 40, 200, 0.5);
    color: #fff;
}
.svc-hero__cta--primary:hover .svc-hero__cta-chip { transform: translateX(3px); }

.svc-hero__cta--ghost {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
}
.svc-hero__cta--ghost .svc-hero__cta-chip {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.svc-hero__cta--ghost:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: #fff;
    color: var(--color-dark);
}
.svc-hero__cta--ghost:hover .svc-hero__cta-chip {
    background: rgba(40, 0, 113, 0.1);
    color: var(--color-dark);
}

/* ── Trusted by ───────────────────────────────────────────── */
.svc-hero__trust-text {
    margin: 0 0 var(--space-4);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}
.svc-hero__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.svc-hero__logo img {
    display: block;
    max-height: 26px;
    width: auto;
    opacity: 0.72;
    filter: brightness(0) invert(1);
    transition: opacity var(--transition);
}
.svc-hero__logo img:hover { opacity: 1; }

/* ── Visual — orbit ───────────────────────────────────────── */
.svc-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.svc-hero__orbit {
    position: relative;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 1 / 1;
}

.svc-hero__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
}
.svc-hero__ring--outer {
    width: 92%;
    height: 92%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 62%);
}
.svc-hero__ring--inner {
    width: 68%;
    height: 68%;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Nodes */
.svc-hero__nodes {
    position: absolute;
    inset: 4%;   /* node centres ride this circle — see the ring below */
    margin: 0;
    padding: 0;
    list-style: none;
}
.svc-hero__node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 104px;
    text-align: center;
}
.svc-hero__node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: var(--radius-xl);
    background: linear-gradient(140deg, #EF2B83, #9234F7);
    color: #fff;
    box-shadow: 0 14px 30px rgba(20, 0, 45, 0.45);
}
.svc-hero__node:nth-child(even) .svc-hero__node-icon {
    background: linear-gradient(140deg, #9234F7, #DB3EC0);
}
.svc-hero__node-icon svg { width: 26px; height: 26px; }
.svc-hero__node-icon img { width: 26px; height: 26px; object-fit: contain; }

.svc-hero__node-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(10, 0, 35, 0.7);
}

/* Floating drift (staggered via inline --float-dur/--float-delay).
   translate(-50%,-50%) is kept inside the keyframes so positioning holds. */
.svc-hero__node.svc-hero__float {
    animation: nodeFloat var(--float-dur, 7s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
@keyframes nodeFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 10px)); }
}

/* ── Centre stack (card + offer strip) ────────────────────── */
.svc-hero__centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52%;
    z-index: 2;
}
.svc-hero__centre.svc-hero__float {
    animation: centreFloat var(--float-dur, 8s) ease-in-out infinite;
}
@keyframes centreFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 12px)); }
}

.svc-hero__card {
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 34px 70px rgba(10, 0, 40, 0.5);
    overflow: hidden;
}
.svc-hero__card-img { display: block; width: 100%; height: auto; }

/* CSS app mockup */
.svc-mock {
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #ffffff 0%, #FBF5FF 100%);
}
.svc-mock__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(90deg, #DB3EC0, #9234F7);
}
.svc-mock__dots { display: inline-flex; gap: 4px; }
.svc-mock__dots i {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}
.svc-mock__url {
    flex: 1;
    height: 7px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.35);
}

.svc-mock__body {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 0.8rem;
    padding: 0.9rem;
}
.svc-mock__col { display: flex; flex-direction: column; gap: 0.45rem; }
.svc-mock__title {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
}
.svc-mock__line {
    height: 6px;
    border-radius: var(--radius-full);
    background: #E7DAF5;
}
.svc-mock__line--md { width: 78%; }
.svc-mock__line--sm { width: 58%; }
.svc-mock__btn {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(100deg, #9234F7, #DB3EC0);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
}
.svc-mock__art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, #FFD3E8 0%, #F58BC3 55%, #C264E8 100%);
    color: rgba(255, 255, 255, 0.95);
}
.svc-mock__art svg { width: 30px; height: 30px; }

.svc-mock__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0 0.9rem 0.9rem;
}
.svc-mock__card {
    height: 26px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #EFE6F8;
    box-shadow: 0 2px 8px rgba(40, 0, 113, 0.06);
}

/* ── Offer strip ──────────────────────────────────────────── */
.svc-hero__offer {
    position: absolute;
    left: 50%;
    top: 63%;
    transform: translateX(-50%);
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    width: min(64%, 380px);   /* overlaps the lower half of the card, as in the design */
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 22px 46px rgba(10, 0, 40, 0.35);
}
.svc-hero__offer::before {
    content: "";
    grid-column: 2;
    align-self: stretch;
    background: #EFE6F8;
}
.svc-hero__offer-title {
    grid-column: 1;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-dark);
    white-space: nowrap;
}
.svc-hero__offer-text {
    grid-column: 3;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ── Stats band ───────────────────────────────────────────── */
.svc-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: center;
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    list-style: none;
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.svc-hero__stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 0.5rem clamp(0.75rem, 1.6vw, 1.4rem);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.svc-hero__stats .svc-hero__stat:last-child { border-right: 0; }

.svc-hero__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(239, 43, 131, 0.9), rgba(146, 52, 247, 0.9));
    color: #fff;
    box-shadow: 0 8px 20px rgba(20, 0, 45, 0.35);
}
.svc-hero__stat-icon svg { width: 23px; height: 23px; }

.svc-hero__stat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-hero__stat-value {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}
.svc-hero__stat-label {
    font-style: normal;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.3;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .svc-hero__node { width: 96px; }
    .svc-hero__node-icon { width: 50px; height: 50px; }
    .svc-hero__node-icon svg { width: 22px; height: 22px; }
    .svc-hero__node-label { font-size: 0.72rem; }
}

@media (max-width: 980px) {
    /* Single column, but the copy stays LEFT-aligned like the desktop. */
    .svc-hero__inner {
        grid-template-columns: 1fr;
    }
    .svc-hero__content { max-width: 100%; }
    .svc-hero__desc { margin-inline: 0; }
    .svc-hero__visual { width: 100%; }
    .svc-hero__orbit { max-width: 520px; }
}

/* Phones — the orbit stays a real circle: icon-only nodes ring the card,
   and the "Services we offer" strip drops full-width below the circle. */
@media (max-width: 720px) {
    /* Visual stacks: circle on top, offer card underneath. */
    .svc-hero__visual { flex-direction: column; gap: var(--space-5); }

    .svc-hero__orbit {
        width: min(90vw, 360px);
        max-width: 360px;
        margin-inline: auto;
    }

    /* Keep the node ring wide so icons clear the central card. */
    .svc-hero__nodes { inset: 5%; }
    .svc-hero__node {
        width: auto;
        gap: 0;
    }
    .svc-hero__node.svc-hero__float { animation: none; }
    .svc-hero__node-label { display: none; }   /* labels can't fit the small ring */
    .svc-hero__node-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); }
    .svc-hero__node-icon svg { width: 19px; height: 19px; }

    .svc-hero__centre { width: 54%; }
    .svc-hero__centre.svc-hero__float { animation: none; }

    /* Offer strip becomes a plain full-width card below the circle. */
    .svc-hero__offer {
        position: static;
        transform: none;
        width: 100%;
        margin: 0;
        grid-template-columns: 1fr;
        gap: 0.3rem;
        text-align: left;
    }
    .svc-hero__offer::before { display: none; }
    .svc-hero__offer-title { grid-column: 1; white-space: normal; }
    .svc-hero__offer-text  { grid-column: 1; }

    /* Stats — tidy two-up chips instead of a divided row. */
    .svc-hero__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .svc-hero__stat {
        justify-content: flex-start;
        gap: var(--space-3);
        padding: 0.65rem 0.75rem;
        border-right: 0;
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.06);
    }
    /* A lone final stat spans the full width and centres. */
    .svc-hero__stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .svc-hero__stat-icon { width: 42px; height: 42px; }
    .svc-hero__stat-icon svg { width: 19px; height: 19px; }
    .svc-hero__stat-value { font-size: 1.25rem; }
    .svc-hero__stat-label { font-size: 0.72rem; }
}

@media (max-width: 560px) {
    .svc-hero__features {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .svc-hero__feature,
    .svc-hero__feature + .svc-hero__feature {
        border-left: 0;
        padding: 0;
        justify-content: flex-start;   /* left-aligned feature rows */
    }

    /* CTAs stay side by side on phones instead of stacking. The icon chip
       is dropped so each label keeps to a single line at narrow widths. */
    .svc-hero__actions { flex-wrap: nowrap; gap: var(--space-3); }
    .svc-hero__cta {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 0.7rem 0.8rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    .svc-hero__cta-chip { display: none; }
}

/* Smallest phones — shrink the circle a touch more. */
@media (max-width: 400px) {
    .svc-hero__orbit { width: min(94vw, 340px); }
    .svc-hero__nodes { inset: 4%; }
    .svc-hero__node-icon { width: 40px; height: 40px; }
    .svc-hero__node-icon svg { width: 18px; height: 18px; }
    .svc-hero__centre { width: 52%; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-hero__float,
    .svc-hero__node.svc-hero__float,
    .svc-hero__centre.svc-hero__float { animation: none; }
    .svc-hero__cta,
    .svc-hero__cta-chip { transition: none; }
}