/* =========================================================
   PrintQly Services — Centre Welcome Page
   Design-only refresh. Scoped to services.php.
   No global styles, structure, database or navigation changes.
   ========================================================= */

.pq-service-center {
    --pq-bg: #030405;
    --pq-yellow: #ffd400;
    --pq-ink: #101116;
    width: 100%;
    min-height: 1px;
    box-sizing: border-box;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.045), transparent 32%),
        linear-gradient(180deg, #050607 0%, #020202 100%);
    padding: 38px 0 68px;
    overflow: hidden;
}

.pq-service-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------- Premium welcome / printed-paper card ---------- */

.pq-service-welcome {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.72), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(157,132,190,.18), transparent 34%),
        linear-gradient(135deg, #f5f0fb 0%, #ebe7f5 48%, #f7f2fb 100%);
    color: var(--pq-ink);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 28px;
    padding: clamp(38px, 5vw, 62px) clamp(25px, 7vw, 82px);
    text-align: center;
    box-shadow:
        0 28px 65px rgba(0,0,0,.52),
        0 8px 24px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.08);
}

.pq-service-welcome::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    left: -90px;
    top: -105px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    filter: blur(3px);
}

.pq-service-welcome::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
        repeating-linear-gradient(0deg, rgba(40,35,55,.08) 0, rgba(40,35,55,.08) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: multiply;
}

.pq-service-welcome-label {
    display: inline-block;
    color: #806900;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .24em;
    margin-bottom: 16px;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.pq-service-welcome h1 {
    margin: 0 0 19px;
    color: #0b0c10;
    font-size: clamp(31px, 5vw, 55px);
    line-height: 1.04;
    font-weight: 850;
    letter-spacing: -.045em;
    text-shadow: 0 2px 0 rgba(255,255,255,.72), 0 7px 20px rgba(0,0,0,.10);
}

/* A subtle printer-style reveal: the text appears as if it is being printed. */
.pq-service-welcome p {
    position: relative;
    max-width: 910px;
    margin: 0 auto;
    color: #202027;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.78;
    font-weight: 550;
    letter-spacing: .002em;
    text-shadow: 0 .5px 0 rgba(255,255,255,.6);
    animation: pq-print-reveal 1.65s steps(18, end) both;
}

.pq-service-welcome p::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    border-radius: 99px;
    background: rgba(55,45,70,.42);
    box-shadow: 0 0 10px rgba(55,45,70,.18);
    animation: pq-print-cursor 1.65s steps(18, end) both;
    pointer-events: none;
}

@keyframes pq-print-reveal {
    0% { opacity: .15; filter: blur(1.8px); clip-path: inset(0 100% 0 0); }
    35% { opacity: .82; filter: blur(.35px); }
    100% { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); }
}

@keyframes pq-print-cursor {
    0% { transform: translateX(0); opacity: .9; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* ---------- Four glossy service cards ---------- */

.pq-service-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
}

.pq-service-card {
    position: relative;
    min-height: 270px;
    padding: 34px 28px 30px;
    border-radius: 27px;
    border: 1px solid rgba(255,255,255,.48);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
    box-shadow:
        0 25px 48px rgba(0,0,0,.46),
        0 7px 16px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -1px 0 rgba(0,0,0,.12);
}

/* Moving glass sheen */
.pq-service-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -35% -55%;
    background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.42) 49%, rgba(255,255,255,.12) 54%, transparent 64%);
    transform: translateX(-75%) rotate(7deg);
    animation: pq-card-shine 6.5s ease-in-out infinite;
    pointer-events: none;
}

/* Soft glass highlight + depth */
.pq-service-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 4%, rgba(255,255,255,.42), transparent 32%),
        linear-gradient(150deg, rgba(255,255,255,.18), transparent 42%, rgba(0,0,0,.08));
    mix-blend-mode: soft-light;
}

@keyframes pq-card-shine {
    0%, 55%, 100% { transform: translateX(-75%) rotate(7deg); opacity: 0; }
    63% { opacity: .85; }
    76% { transform: translateX(75%) rotate(7deg); opacity: .12; }
}

.pq-service-card:hover {
    transform: translateY(-8px) scale(1.012);
    filter: saturate(1.08) brightness(1.025);
    box-shadow:
        0 32px 58px rgba(0,0,0,.56),
        0 9px 20px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.pq-service-card:active {
    transform: translateY(-2px) scale(.995);
}

.pq-service-card:focus-visible {
    outline: 4px solid var(--pq-yellow);
    outline-offset: 5px;
}

.pq-service-card-icon,
.pq-service-card-title {
    position: relative;
    z-index: 2;
}

.pq-service-card-icon {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.17);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        0 10px 24px rgba(0,0,0,.12);
    animation: pq-icon-float 3.8s ease-in-out infinite, pq-icon-rotate 12s linear infinite;
    transform-origin: center;
}

.pq-service-card-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.34);
    opacity: .8;
}

.pq-service-card-icon svg {
    width: 60px;
    height: 60px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.10));
}

@keyframes pq-icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes pq-icon-rotate {
    0%, 72% { rotate: 0deg; }
    82% { rotate: 8deg; }
    92% { rotate: -5deg; }
    100% { rotate: 0deg; }
}

.pq-service-card-title {
    max-width: 96%;
    font-size: clamp(22px, 3vw, 31px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -.035em;
    text-shadow: 0 2px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.10);
}

/* Agreed colours — retained, with premium gradient depth */
.pq-service-card-public {
    background: linear-gradient(145deg, #a5daf7 0%, #8ec7ee 48%, #7eb8df 100%);
    color: #123f5c;
}

.pq-service-card-shop {
    background: linear-gradient(145deg, #f8c5d8 0%, #f2b2c9 48%, #e7a3bd 100%);
    color: #5b2039;
}

.pq-service-card-company {
    background: linear-gradient(145deg, #bce6bc 0%, #a8d6a8 48%, #99c99a 100%);
    color: #214d2a;
}

.pq-service-card-women {
    background: linear-gradient(145deg, #fff8c9 0%, #fff2ae 48%, #f7e99a 100%);
    color: #66520b;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .pq-service-center {
        padding: 26px 0 96px;
    }

    .pq-service-container {
        width: calc(100% - 28px);
    }

    .pq-service-welcome {
        border-radius: 24px;
        padding: 34px 18px 36px;
        box-shadow:
            0 22px 45px rgba(0,0,0,.46),
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(0,0,0,.08);
    }

    .pq-service-welcome-label {
        font-size: 10px;
        letter-spacing: .19em;
        margin-bottom: 13px;
    }

    .pq-service-welcome h1 {
        font-size: 30px;
        line-height: 1.08;
        margin-bottom: 15px;
    }

    .pq-service-welcome p {
        font-size: 14px;
        line-height: 1.72;
    }

    .pq-service-cards {
        gap: 15px;
        margin-top: 28px;
    }

    .pq-service-card {
        min-height: 196px;
        padding: 22px 8px 20px;
        border-radius: 22px;
        box-shadow:
            0 19px 34px rgba(0,0,0,.42),
            0 5px 12px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.72);
    }

    .pq-service-card-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 15px;
    }

    .pq-service-card-icon svg {
        width: 48px;
        height: 48px;
        stroke-width: 3.8;
    }

    .pq-service-card-title {
        font-size: 19px;
        line-height: 1.14;
    }
}

@media (max-width: 380px) {
    .pq-service-container {
        width: calc(100% - 20px);
    }

    .pq-service-welcome {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pq-service-cards {
        gap: 11px;
    }

    .pq-service-card {
        min-height: 178px;
    }

    .pq-service-card-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }

    .pq-service-card-icon svg {
        width: 43px;
        height: 43px;
    }

    .pq-service-card-title {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pq-service-welcome p,
    .pq-service-welcome p::after,
    .pq-service-card::before,
    .pq-service-card-icon {
        animation: none;
    }

    .pq-service-card {
        transition: none;
    }
}