/* =========================================================
   PUZZLE SERVICES
   A different experience from the other pages
   ========================================================= */

.pz-services {
    --blue: #0563df;
    --blue-dark: #031b36;
    --blue-deep: #020d1c;
    --cyan: #4cb5ff;
    --gold: #f5c842;
    --white: #ffffff;
    --muted: rgba(255, 255, 255, .62);
    --line: rgba(255, 255, 255, .09);
    background: #f5f8fc;
    color: #102238;
    overflow: hidden;
}

/* =========================================================
   HERO
   ========================================================= */

.pz-services-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(5, 99, 223, .28), transparent 28%),
        radial-gradient(circle at 85% 70%, rgba(76, 181, 255, .13), transparent 25%),
        linear-gradient(135deg, #020d1c 0%, #061a31 55%, #082b4b 100%);
    color: #fff;
    isolation: isolate;
}

.pz-services-grid {
    position: absolute;
    inset: 0;
    opacity: .055;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
}

.pz-services-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1250px;
    width: 100%;
    margin: auto;
    padding: 100px 24px;
}

.pz-services-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: #f5c842;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.pz-services-kicker::before {
    content: "";
    width: 35px;
    height: 1px;
    background: #f5c842;
}

.pz-services-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -4px;
}

.pz-services-hero h1 span {
    display: block;
    color: #4cb5ff;
}

.pz-services-hero-description {
    max-width: 650px;
    margin-top: 35px;
    color: rgba(255, 255, 255, .68);
    font-size: 1.15rem;
    line-height: 2;
}

.pz-services-actions {
    display: flex;
    gap: 14px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pz-services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    transition: .3s ease;
}

.pz-services-btn-primary {
    background: #f5c842;
    color: #07172a;
    box-shadow: 0 15px 45px rgba(245, 200, 66, .18);
}

.pz-services-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 55px rgba(245, 200, 66, .28);
    color: #07172a;
}

.pz-services-btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
}

.pz-services-btn-ghost:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

/* =========================================================
   FLOATING PUZZLE VISUAL
   ========================================================= */

.pz-services-visual {
    position: absolute;
    left: 7%;
    bottom: 80px;
    width: 330px;
    height: 330px;
    opacity: .95;
}

.pz-services-piece {
    position: absolute;
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(145deg, rgba(76, 181, 255, .16), rgba(5, 99, 223, .06));
    backdrop-filter: blur(8px);
}

.pz-piece-1 {
    top: 0;
    right: 90px;
    border-radius: 25px 45px 25px 45px;
    transform: rotate(12deg);
}

.pz-piece-2 {
    top: 95px;
    right: 5px;
    border-radius: 45px 25px 45px 25px;
    transform: rotate(-9deg);
}

.pz-piece-3 {
    top: 110px;
    left: 45px;
    border-radius: 25px 45px 25px 45px;
    transform: rotate(18deg);
}

.pz-piece-4 {
    bottom: 15px;
    right: 105px;
    border-radius: 45px 25px 45px 25px;
    transform: rotate(-16deg);
}

.pz-services-visual::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(245, 200, 66, .18);
    top: 65px;
    left: 65px;
}

/* =========================================================
   PROBLEM / MARKET VOID
   ========================================================= */

.pz-services-problem {
    padding: 120px 24px;
    background: #fff;
}

.pz-services-problem-inner {
    max-width: 1150px;
    margin: auto;
}

.pz-section-label {
    color: var(--blue);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.pz-services-problem h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 1.15;
    font-weight: 900;
    color: #071b31;
    letter-spacing: -2px;
}

.pz-services-problem h2 span {
    color: var(--blue);
}

.pz-problem-text {
    max-width: 760px;
    margin-top: 30px;
    color: #607086;
    font-size: 1.08rem;
    line-height: 2.1;
}

.pz-problem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 60px;
}

.pz-problem-card {
    padding: 32px;
    border: 1px solid #e6ebf2;
    border-radius: 22px;
    background: #f8fafc;
    transition: .3s ease;
}

.pz-problem-card:hover {
    transform: translateY(-7px);
    border-color: rgba(5, 99, 223, .25);
    box-shadow: 0 20px 50px rgba(20, 45, 75, .08);
}

.pz-problem-number {
    font-size: .75rem;
    font-weight: 900;
    color: var(--blue);
    letter-spacing: 1px;
}

.pz-problem-card h3 {
    margin: 25px 0 12px;
    font-size: 1.25rem;
    color: #0a1d32;
}

.pz-problem-card p {
    margin: 0;
    color: #718095;
    line-height: 1.9;
}

/* =========================================================
   SOLUTION STATEMENT
   ========================================================= */

.pz-services-solution {
    padding: 130px 24px;
    background:
        radial-gradient(circle at 80% 20%, rgba(76, 181, 255, .18), transparent 30%),
        linear-gradient(135deg, #041323, #082746);
    color: #fff;
    position: relative;
}

.pz-solution-inner {
    max-width: 1150px;
    margin: auto;
}

.pz-solution-small {
    color: #f5c842;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.pz-services-solution h2 {
    max-width: 950px;
    margin: 25px 0;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -2px;
}

.pz-services-solution h2 span {
    color: #4cb5ff;
}

.pz-solution-description {
    max-width: 720px;
    color: rgba(255, 255, 255, .62);
    line-height: 2;
    font-size: 1.08rem;
}

/* =========================================================
   SERVICES
   ========================================================= */

.pz-services-list {
    padding: 120px 24px;
    background: #f5f8fc;
}

.pz-services-list-inner {
    max-width: 1200px;
    margin: auto;
}

.pz-services-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 55px;
}

.pz-services-heading h2 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1;
    font-weight: 900;
    color: #071b31;
}

.pz-services-heading p {
    max-width: 430px;
    margin: 0;
    color: #718095;
    line-height: 1.9;
}

.pz-service-item {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 35px;
    align-items: center;
    padding: 38px 10px;
    border-top: 1px solid #dce3eb;
    text-decoration: none;
    color: inherit;
    transition: .3s ease;
}

.pz-service-item:last-child {
    border-bottom: 1px solid #dce3eb;
}

.pz-service-item:hover {
    padding-right: 25px;
    padding-left: 25px;
    background: #fff;
}

.pz-service-index {
    font-size: .8rem;
    font-weight: 900;
    color: #94a2b4;
}

.pz-service-content h3 {
    margin: 0 0 10px;
    font-size: 1.65rem;
    font-weight: 900;
    color: #0a1d32;
}

.pz-service-content p {
    max-width: 650px;
    margin: 0;
    color: #748196;
    line-height: 1.9;
}

.pz-service-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce3eb;
    color: var(--blue);
    font-size: 1.3rem;
    transition: .3s ease;
}

.pz-service-item:hover .pz-service-arrow {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateX(-5px);
}

/* =========================================================
   VALUE / POSITIONING
   ========================================================= */

.pz-services-value {
    padding: 120px 24px;
    background: #fff;
}

.pz-value-inner {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.pz-value-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.08;
    font-weight: 900;
    color: #071b31;
    margin: 0;
}

.pz-value-title span {
    color: var(--blue);
}

.pz-value-copy {
    color: #68788d;
    line-height: 2;
    font-size: 1.05rem;
}

.pz-value-points {
    margin-top: 35px;
    display: grid;
    gap: 15px;
}

.pz-value-point {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    color: #17304b;
}

.pz-value-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 7px rgba(5, 99, 223, .08);
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.pz-services-final {
    padding: 110px 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(76, 181, 255, .2), transparent 35%),
        #041221;
    text-align: center;
    color: #fff;
}

.pz-services-final-inner {
    max-width: 900px;
    margin: auto;
}

.pz-services-final h2 {
    margin: 0;
    font-size: clamp(2.7rem, 6vw, 6rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -3px;
}

.pz-services-final p {
    max-width: 650px;
    margin: 30px auto 40px;
    color: rgba(255, 255, 255, .62);
    line-height: 2;
}

.pz-services-final .pz-services-btn {
    min-width: 190px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .pz-services-hero {
        min-height: 650px;
    }

    .pz-services-visual {
        opacity: .22;
        left: -40px;
    }

    .pz-problem-cards {
        grid-template-columns: 1fr;
    }

    .pz-value-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pz-services-heading {
        display: block;
    }

    .pz-services-heading p {
        margin-top: 20px;
    }
}

@media (max-width: 700px) {

    .pz-services-hero-inner {
        padding: 80px 20px;
    }

    .pz-services-hero h1 {
        font-size: 3.5rem;
        letter-spacing: -2px;
    }

    .pz-services-hero-description {
        font-size: .98rem;
    }

    .pz-services-visual {
        width: 240px;
        height: 240px;
        bottom: 25px;
        left: -70px;
    }

    .pz-services-piece {
        width: 75px;
        height: 75px;
    }

    .pz-services-problem,
    .pz-services-solution,
    .pz-services-list,
    .pz-services-value {
        padding: 80px 20px;
    }

    .pz-services-solution h2 {
        font-size: 2.8rem;
    }

    .pz-service-item {
        grid-template-columns: 45px 1fr;
        gap: 18px;
        padding: 30px 5px;
    }

    .pz-service-arrow {
        display: none;
    }

    .pz-service-content h3 {
        font-size: 1.3rem;
    }

    .pz-services-final {
        padding: 80px 20px;
    }

    .pz-services-final h2 {
        font-size: 3rem;
        letter-spacing: -1px;
    }
}

@media (max-width: 400px) {

    .pz-services-hero h1 {
        font-size: 2.9rem;
    }

    .pz-services-btn {
        width: 100%;
    }
}