/* =========================================================
   PROBOOKS • Base Design System Layer
========================================================= */

/* ---------- Section spacing ---------- */
.pro-section {
    padding: 4.5rem 0;
}

@media (max-width: 991.98px) {
    .pro-section {
        padding: 3.5rem 0;
    }
}

@media (max-width: 575.98px) {
    .pro-section {
        padding: 3rem 0;
    }
}

/* ---------- Typography System ---------- */
.pro-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--pro-text);
}

.pro-title-xl {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.pro-title-lg {
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}

.pro-title-md {
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
}

.pro-kicker {
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.pro-text {
    color: var(--pro-text);
    line-height: 1.7;
}

.pro-muted {
    color: var(--pro-muted);
}

/* ---------- Dark background modifier ---------- */
.pro-on-dark .pro-title,
.pro-on-dark .pro-text,
.pro-on-dark .pro-muted {
    color: #fff;
}

.pro-on-dark .pro-kicker {
    color: rgba(255,255,255,0.85);
}

/* ---------- Shared Card ---------- */
.pro-card {
    background: var(--pro-card);
    border-radius: var(--pro-radius);
    box-shadow: 0 20px 50px rgba(16,24,40,.08);
}

/* ---------- Pill Button ---------- */
.pro-btn-pill {
    border-radius: 999px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Utility */
.pro-max-52ch {
    max-width: 52ch;
}


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

.pro-hero {
    /* Desktop cut */
    background: linear-gradient( to bottom, var(--bs-secondary) 0px, var(--pro-secondary-dark) 820px, #ffffff 820px, #ffffff 100% );
}

/* Tablet cut */
@media (max-width: 991.98px) {
    .pro-hero {
        background: linear-gradient( to bottom, var(--bs-secondary) 0px, var(--pro-secondary-dark) 660px, #ffffff 660px, #ffffff 100% );
    }
}

/* Mobile cut */
@media (max-width: 575.98px) {
    .pro-hero {
        background: linear-gradient( to bottom, var(--bs-secondary) 0px, var(--pro-secondary-dark) 520px, #ffffff 520px, #ffffff 100% );
    }
}

/* =========================================================
   HERO • Mockup Image
========================================================= */

.pro-hero__mock {
    position: relative;
    margin-top: 2rem;
    border-radius: var(--pro-radius);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 40px 80px rgba(16,24,40,.18), 0 20px 40px rgba(16,24,40,.12);
    transform: translateY(0);
    transition: transform .4s ease, box-shadow .4s ease;
}

    .pro-hero__mock::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    }

/* Slight hover lift (desktop only) */
@media (min-width: 992px) {
    .pro-hero__mock:hover {
        transform: translateY(-6px);
        box-shadow: 0 50px 100px rgba(16,24,40,.22), 0 25px 50px rgba(16,24,40,.14);
    }
}

/* Image inside */
.pro-hero__mock img,
.pro-hero__mock-img {
    width: 100%;
    display: block;
    border-radius: inherit;
}


/* =========================================================
   KEY FEATURES • Component Layer
========================================================= */

.pro-features {
    background: var(--pro-card);
}

/* Media cards */
.pro-media-card {
    border-radius: var(--pro-radius);
    padding: 14px;
    box-shadow: 0 20px 50px rgba(16,24,40,.08);
}

.pro-media-card__inner {
    border-radius: calc(var(--pro-radius) - 4px);
    background: var(--pro-card);
}

/* Variants */
.pro-media-card--peach {
    /*background: linear-gradient(135deg, var(--pro-info-lighter), var(--pro-accent));*/
    background: linear-gradient(135deg,#d8c8ff 0%,#ffd6b0 55%,#ffb5d5 100%);
}

.pro-media-card--lilac {
    /*background: linear-gradient(135deg, var(--pro-info-lighter), var(--pro-accent));*/
    background: linear-gradient(135deg,#d8c8ff 0%,#ffd6b0 55%,#ffb5d5 100%);
}


/* =========================================================
   BUILT FOR EVERY TEAM • Component Layer
========================================================= */

.pro-teams {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, var(--bs-secondary) 0%, var(--pro-secondary-dark) 50%, var(--bs-secondary) 100% );
}

    .pro-teams::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 50% 20%, rgba(var(--bs-primary-rgb), .15), transparent 60% );
        pointer-events: none;
    }

/* Team cards */
.pro-team-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: var(--pro-radius);
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform .3s ease, background .3s ease;
}

    .pro-team-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,0.12);
    }

@media (max-width: 575.98px) {
    .pro-team-card {
        padding: 20px;
    }
}

.pro-team-card__icon {
    font-size: 28px;
    color: #fff;
}

/* (If you still have h5/p inside cards somewhere) */
.pro-team-card h5 {
    color: #fff;
    font-weight: 600;
}


/* =========================================================
   INTEGRATIONS • Component Layer
========================================================= */

.pro-integrations {
    background: var(--pro-primary-lighter);
    overflow: hidden;
}

/* Bubble cluster base */
.pro-bubbles {
    position: relative;
    width: min(520px, 100%);
    height: 320px;
}

/* Bubble */
.pro-bubble {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: var(--pro-card);
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px rgba(16,24,40,.10), 0 6px 14px rgba(16,24,40,.06);
    border: 1px solid rgba(0,0,0,.05);
}

    .pro-bubble img {
        width: 58%;
        height: 58%;
        object-fit: contain;
        display: block;
    }

/* Tablet: reduce bubble size + container height */
@media (max-width: 991.98px) {
    .pro-bubbles {
        height: 300px;
        margin-inline: auto;
    }

    .pro-bubble {
        width: 84px;
        height: 84px;
    }
}

/* Mobile: reduce more to avoid overflow */
@media (max-width: 575.98px) {
    .pro-bubbles {
        height: 270px;
    }

    .pro-bubble {
        width: 72px;
        height: 72px;
    }
}


/* =========================================================
   TESTIMONIALS • Component Layer
========================================================= */

.pro-testimonials {
    background: var(--pro-card);
}

/* Nav buttons */
.pro-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: var(--pro-card);
    color: var(--pro-text);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .pro-nav-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(16,24,40,.10);
    }

    .pro-nav-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* Rail: allow swipe on mobile */
.pro-testimonials__rail {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

    /* hide scrollbar (optional) */
    .pro-testimonials__rail::-webkit-scrollbar {
        height: 0;
    }

.pro-testimonials__rail {
    scrollbar-width: none;
}

/* Card */
.pro-t-card {
    flex: 0 0 auto;
    width: min(420px, 88vw);
    background: var(--pro-card);
    border-radius: var(--pro-radius);
    padding: 22px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 50px rgba(16,24,40,.08), 0 8px 18px rgba(16,24,40,.06);
    scroll-snap-align: start;
}

.pro-t-card__top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.pro-t-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 10px 18px rgba(16,24,40,.12);
}

/* Desktop width */
@media (min-width: 992px) {
    .pro-t-card {
        width: 410px;
    }
}