/* =========================================================
   BUZZERBAIK
   INDEX PAGE
   Modern Gradient + Glassmorphism
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bb-primary: #2563eb;
    --bb-primary-dark: #1d4ed8;

    --bb-purple: #7c3aed;
    --bb-cyan: #06b6d4;

    --bb-dark: #0f172a;
    --bb-dark-2: #1e293b;

    --bb-text: #334155;
    --bb-muted: #64748b;

    --bb-light: #f8fafc;
    --bb-white: #ffffff;

    --bb-border: rgba(226, 232, 240, .75);

    --bb-gradient:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #7c3aed 55%,
            #06b6d4 100%
        );

    --bb-gradient-soft:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .10),
            rgba(124, 58, 237, .08),
            rgba(6, 182, 212, .08)
        );

    --bb-shadow:
        0 20px 60px
        rgba(15, 23, 42, .08);

    --bb-shadow-hover:
        0 25px 70px
        rgba(37, 99, 235, .14);

    --bb-radius: 22px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--bb-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        #ffffff;

    line-height: 1.7;

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.bb-container {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}

.bb-narrow {
    max-width: 850px;
}


/* =========================================================
   GLOBAL SECTION
   ========================================================= */

.bb-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.bb-section-label,
.bb-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 14px;

    color: var(--bb-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid
        rgba(37, 99, 235, .12);

    border-radius: 999px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, .05);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);
}

.bb-section-label::before,
.bb-label::before {
    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    background:
        var(--bb-gradient);

    border-radius: 50%;

    box-shadow:
        0 0 12px
        rgba(37, 99, 235, .45);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.bb-section-heading {
    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}

.bb-section-heading h2,
.bb-intro h2 {
    margin:
        16px 0;

    color: var(--bb-dark);

    font-size:
        clamp(30px, 4vw, 45px);

    line-height: 1.15;

    letter-spacing: -.04em;
}

.bb-section-heading p {
    max-width: 680px;

    margin:
        0 auto;

    color: var(--bb-muted);

    font-size: 15px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.bb-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        0 22px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* PRIMARY */

.bb-btn-primary {
    color: #ffffff;

    background:
        var(--bb-gradient);

    box-shadow:
        0 12px 30px
        rgba(37, 99, 235, .25);
}

.bb-btn-primary:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(37, 99, 235, .30);
}


/* OUTLINE */

.bb-btn-outline {
    color: var(--bb-dark);

    background:
        rgba(255, 255, 255, .65);

    border:
        1px solid
        rgba(148, 163, 184, .35);

    backdrop-filter:
        blur(15px);
}

.bb-btn-outline:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(37, 99, 235, .3);

    box-shadow:
        var(--bb-shadow);
}


/* =========================================================
   SECTION 1
   HERO
   ========================================================= */

.bb-hero {
    position: relative;

    padding:
        100px 0
        110px;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(37, 99, 235, .15),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(124, 58, 237, .15),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 100%,
            rgba(6, 182, 212, .12),
            transparent 32%
        ),
        #f8fafc;
}

.bb-hero::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: 120px;
    right: -180px;

    background:
        rgba(124, 58, 237, .12);

    border-radius: 50%;

    filter:
        blur(80px);
}

.bb-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -150px;
    left: -150px;

    background:
        rgba(6, 182, 212, .10);

    border-radius: 50%;

    filter:
        blur(80px);
}


/* HERO GRID */

.bb-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    align-items: center;

    gap: 65px;
}


/* HERO CONTENT */

.bb-hero-content h1 {
    max-width: 700px;

    margin:
        20px 0 24px;

    color: var(--bb-dark);

    font-size:
        clamp(40px, 5vw, 65px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -.055em;
}


/* GRADIENT WORD EFFECT */

.bb-hero-content h1 strong,
.bb-about-hero-content h1 strong {
    color: transparent;

    background: var(--bb-gradient);

    background-clip: text;

    -webkit-background-clip: text;
}


/* HERO PARAGRAPH */

.bb-hero-description,
.bb-hero-content > p:not(.bb-hero-description) {
    max-width: 650px;

    color: var(--bb-muted);

    font-size: 16px;

    line-height: 1.8;
}

.bb-hero-description {
    margin-bottom: 12px;
}


/* HERO BUTTONS */

.bb-hero-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


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

.bb-hero-trust {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    max-width: 620px;

    margin-top: 38px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(148, 163, 184, .2);

    gap: 20px;
}

.bb-hero-trust > div {
    padding-left: 15px;

    border-left:
        3px solid
        transparent;

    border-image:
        var(--bb-gradient) 1;
}

.bb-hero-trust strong {
    display: block;

    margin-bottom: 3px;

    color: var(--bb-dark);

    font-size: 13px;
}

.bb-hero-trust span {
    display: block;

    color: var(--bb-muted);

    font-size: 11px;
}


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

.bb-hero-image {
    position: relative;

    padding: 14px;

    background:
        rgba(255, 255, 255, .58);

    border:
        1px solid
        rgba(255, 255, 255, .9);

    border-radius: 28px;

    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, .13);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    transform:
        rotate(1deg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bb-hero-image::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: -25px;

    background:
        var(--bb-gradient);

    border-radius: 35px;

    opacity: .15;

    filter:
        blur(30px);
}

.bb-hero-image:hover {
    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 40px 90px
        rgba(37, 99, 235, .16);
}

.bb-hero-image img {
    display: block;

    width: 100%;

    border-radius: 18px;
}


/* =========================================================
   INTRO
   ========================================================= */

.bb-intro {
    text-align: center;

    background:
        #ffffff;
}

.bb-intro::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: 30px;
    left: -140px;

    background:
        rgba(37, 99, 235, .06);

    border-radius: 50%;

    filter: blur(60px);
}

.bb-intro p {
    color: var(--bb-muted);

    font-size: 15px;
}


/* =========================================================
   PLATFORM
   ========================================================= */

.bb-platform {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.bb-platform-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


/* PLATFORM CARD */

.bb-platform-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 270px;

    padding: 27px;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, .05);

    overflow: hidden;

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.bb-platform-card::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -70px;
    right: -60px;

    background:
        var(--bb-gradient);

    border-radius: 50%;

    opacity: .08;

    transition:
        transform .4s ease;
}

.bb-platform-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(37, 99, 235, .18);

    box-shadow:
        var(--bb-shadow-hover);
}

.bb-platform-card:hover::before {
    transform:
        scale(1.5);
}

.bb-platform-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    background:
        var(--bb-gradient);

    border-radius: 11px;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .2);
}

.bb-platform-card h3 {
    margin:
        0 0 9px;

    color: var(--bb-dark);

    font-size: 18px;

    line-height: 1.3;
}

.bb-platform-card p {
    margin:
        0;

    color: var(--bb-muted);

    font-size: 13px;

    line-height: 1.7;
}

.bb-read-more {
    margin-top: auto;

    padding-top: 20px;

    color: var(--bb-primary);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.bb-benefits {
    background:
        #ffffff;
}

.bb-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}

.bb-benefit-item {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 25px;

    background:
        var(--bb-gradient-soft);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        var(--bb-radius);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bb-benefit-item:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--bb-shadow);
}

.bb-benefit-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 45px;
    height: 45px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    background:
        var(--bb-gradient);

    border-radius: 13px;
}

.bb-benefit-item h3 {
    margin:
        0 0 7px;

    color: var(--bb-dark);

    font-size: 17px;
}

.bb-benefit-item p {
    margin: 0;

    color: var(--bb-muted);

    font-size: 13px;
}


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

.bb-services {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, .08),
            transparent 30%
        ),
        #f8fafc;
}

.bb-service-list {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.bb-service-box {
    position: relative;

    padding: 28px;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, .04);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bb-service-box::after {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    right: -35px;
    bottom: -35px;

    background:
        var(--bb-gradient);

    border-radius: 50%;

    opacity: .07;
}

.bb-service-box:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--bb-shadow-hover);
}

.bb-service-box h3 {
    margin:
        0 0 10px;

    color: var(--bb-dark);

    font-size: 18px;
}

.bb-service-box p {
    margin: 0;

    color: var(--bb-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   PRICING
   ========================================================= */

.bb-pricing {
    background:
        #ffffff;
}

.bb-pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    align-items: stretch;

    gap: 20px;
}


/* PRICE CARD */

.bb-price-card {
    position: relative;

    display: flex;

    flex-direction: column;

    padding: 32px;

    background:
        rgba(255, 255, 255, .78);

    border:
        1px solid
        rgba(226, 232, 240, .9);

    border-radius:
        25px;

    box-shadow:
        0 15px 40px
        rgba(15, 23, 42, .06);

    overflow: hidden;

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bb-price-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        var(--bb-shadow-hover);
}


/* FEATURED */

.bb-price-featured {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #1d4ed8,
            #6d28d9 55%,
            #0891b2
        );

    border-color:
        transparent;

    box-shadow:
        0 25px 65px
        rgba(37, 99, 235, .25);

    transform:
        translateY(-8px);
}

.bb-price-featured:hover {
    transform:
        translateY(-14px);
}


/* POPULAR */

.bb-popular {
    position: absolute;

    top: 18px;
    right: 18px;

    padding:
        5px 10px;

    color:
        var(--bb-primary);

    font-size: 9px;

    font-weight: 800;

    background:
        rgba(255, 255, 255, .9);

    border-radius:
        999px;
}


/* PRICE CONTENT */

.bb-price-label {
    color:
        var(--bb-primary);

    font-size: 11px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}

.bb-price-featured .bb-price-label {
    color:
        rgba(255, 255, 255, .75);
}

.bb-price-header h3 {
    margin:
        8px 0 8px;

    color:
        var(--bb-dark);

    font-size: 22px;
}

.bb-price-featured .bb-price-header h3 {
    color:
        #ffffff;
}

.bb-price-header p {
    min-height: 52px;

    margin: 0;

    color:
        var(--bb-muted);

    font-size: 12px;
}

.bb-price-featured .bb-price-header p {
    color:
        rgba(255, 255, 255, .72);
}


/* PRICE */

.bb-price {
    margin:
        25px 0;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(226, 232, 240, .8);
}

.bb-price small {
    display: block;

    color:
        var(--bb-muted);

    font-size: 11px;
}

.bb-price strong {
    display: block;

    margin-top: 3px;

    color:
        var(--bb-dark);

    font-size: 31px;

    letter-spacing:
        -.04em;
}

.bb-price-featured .bb-price {
    border-color:
        rgba(255, 255, 255, .18);
}

.bb-price-featured .bb-price small,
.bb-price-featured .bb-price strong {
    color:
        #ffffff;
}


/* PRICE LIST */

.bb-price-card ul {
    display: grid;

    gap: 11px;

    margin:
        0 0 28px;

    padding: 0;

    list-style: none;
}

.bb-price-card li {
    color:
        var(--bb-muted);

    font-size: 12px;
}

.bb-price-featured li {
    color:
        rgba(255, 255, 255, .8);
}


/* PRICE BUTTON */

.bb-price-button {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    margin-top: auto;

    color:
        var(--bb-dark);

    font-size: 13px;

    font-weight: 700;

    background:
        #ffffff;

    border-radius:
        12px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bb-price-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .12);
}

.bb-price-card:not(.bb-price-featured)
.bb-price-button {
    color:
        #ffffff;

    background:
        var(--bb-gradient);
}

.bb-price-note {
    margin:
        25px auto 0;

    text-align:
        center;

    color:
        var(--bb-muted);

    font-size: 11px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.bb-process {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.bb-process-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}

.bb-process-item {
    position: relative;

    padding: 28px;

    background:
        rgba(255, 255, 255, .75);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .04);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bb-process-item:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--bb-shadow);
}

.bb-process-item > span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    background:
        var(--bb-gradient);

    border-radius:
        12px;
}

.bb-process-item h3 {
    margin:
        0 0 8px;

    color:
        var(--bb-dark);

    font-size: 17px;
}

.bb-process-item p {
    margin: 0;

    color:
        var(--bb-muted);

    font-size: 12px;
}


/* =========================================================
   FAQ
   ========================================================= */

.bb-faq {
    background:
        #f8fafc;
}

.bb-faq-container {
    max-width:
        900px;
}

.bb-faq-list {
    display:
        grid;

    gap: 12px;
}

.bb-faq-list details {
    background:
        rgba(255, 255, 255, .78);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        16px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, .035);

    overflow:
        hidden;

    transition:
        box-shadow .25s ease;
}

.bb-faq-list details:hover {
    box-shadow:
        0 15px 35px
        rgba(15, 23, 42, .07);
}

.bb-faq-list summary {
    position:
        relative;

    padding:
        20px 50px 20px 22px;

    color:
        var(--bb-dark);

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    list-style:
        none;
}

.bb-faq-list summary::-webkit-details-marker {
    display:
        none;
}

.bb-faq-list summary::after {
    content:
        "+";

    position:
        absolute;

    top:
        50%;

    right:
        22px;

    color:
        var(--bb-primary);

    font-size:
        22px;

    font-weight:
        400;

    transform:
        translateY(-50%);

    transition:
        transform .25s ease;
}

.bb-faq-list details[open]
summary::after {
    transform:
        translateY(-50%)
        rotate(45deg);
}

.bb-faq-list details p {
    margin:
        0;

    padding:
        0 22px 20px;

    color:
        var(--bb-muted);

    font-size:
        13px;
}


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

.bb-cta {
    position:
        relative;

    padding:
        80px 0;

    background:
        #0f172a;

    overflow:
        hidden;
}

.bb-cta::before {
    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    top:
        -250px;

    right:
        -120px;

    background:
        rgba(124, 58, 237, .3);

    border-radius:
        50%;

    filter:
        blur(80px);
}

.bb-cta::after {
    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    bottom:
        -220px;

    left:
        -120px;

    background:
        rgba(6, 182, 212, .2);

    border-radius:
        50%;

    filter:
        blur(80px);
}

.bb-cta-inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        50px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .88),
            rgba(124, 58, 237, .88)
        );

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .25);

    backdrop-filter:
        blur(20px);
}

.bb-cta .bb-section-label {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .2);

    box-shadow:
        none;
}

.bb-cta h2 {
    max-width:
        680px;

    margin:
        16px 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(28px, 4vw, 43px);

    line-height:
        1.15;

    letter-spacing:
        -.04em;
}

.bb-cta p {
    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255, 255, 255, .75);

    font-size:
        14px;
}

.bb-cta-buttons {
    display:
        flex;

    flex-shrink:
        0;

    gap:
        10px;
}

.bb-btn-light {
    color:
        var(--bb-primary);

    background:
        #ffffff;
}

.bb-btn-light:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, .15);
}

.bb-btn-outline-light {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid
        rgba(255, 255, 255, .3);
}

.bb-btn-outline-light:hover {
    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, .15);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .bb-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .bb-hero-content {
        max-width:
            760px;

        margin:
            0 auto;

        text-align:
            center;
    }

    .bb-hero-content h1,
    .bb-hero-description,
    .bb-hero-content > p:not(.bb-hero-description) {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .bb-hero-buttons {
        justify-content:
            center;
    }

    .bb-hero-trust {
        margin-left:
            auto;

        margin-right:
            auto;

        text-align:
            left;
    }

    .bb-hero-image {
        width:
            min(100%, 700px);

        margin:
            0 auto;
    }

    .bb-platform-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .bb-service-list {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .bb-process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .bb-cta-inner {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .bb-container {
        width:
            calc(100% - 30px);
    }

    .bb-section {
        padding:
            70px 0;
    }

    .bb-hero {
        padding:
            70px 0 80px;
            overflow: hidden;
    }

    .bb-hero-content h1 {
        font-size:
            clamp(35px, 10vw, 48px);
    }

    .bb-hero-description,
    .bb-hero-content > p:not(.bb-hero-description) {
        font-size:
            14px;
    }

    .bb-hero-buttons {
        flex-direction:
            column;
    }

    .bb-hero-buttons .bb-btn {
        width:
            100%;
    }

    .bb-hero-trust {
        grid-template-columns:
            1fr;

        text-align:
            left;
    }

    .bb-hero-image {
        padding:
            8px;

        border-radius:
            20px;

        transform:
            none;
    }

    .bb-hero-image:hover {
        transform:
            translateY(-5px);
    }

    .bb-section-heading h2,
    .bb-intro h2 {
        font-size:
            30px;
    }

    .bb-platform-grid,
    .bb-service-list,
    .bb-benefit-grid,
    .bb-pricing-grid,
    .bb-process-grid {
        grid-template-columns:
            1fr;
    }

    .bb-platform-card {
        min-height:
            auto;
    }

    .bb-price-featured {
        transform:
            none;
    }

    .bb-price-featured:hover {
        transform:
            translateY(-7px);
    }

    .bb-cta-inner {
        padding:
            35px 25px;
    }

    .bb-cta-buttons {
        width:
            100%;

        flex-direction:
            column;
    }

    .bb-cta-buttons .bb-btn {
        width:
            100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    .bb-container {
        width:
            calc(100% - 24px);
    }

    .bb-hero-content h1 {
        font-size:
            34px;
    }

    .bb-section-heading h2,
    .bb-intro h2 {
        font-size:
            28px;
    }

    .bb-platform-card,
    .bb-benefit-item,
    .bb-service-box,
    .bb-price-card,
    .bb-process-item {
        padding:
            22px;
    }

    .bb-cta h2 {
        font-size:
            29px;
    }

}