/* ============================================================
   BOT SECTION
   ============================================================ */

.bot-section {
    position: relative;

    padding:
        var(--ds-space-24)
        var(--ds-space-6);

    background: var(--ds-muted);

    border-top:
        1px solid
        var(--ds-border);

    border-bottom:
        1px solid
        var(--ds-border);

    overflow: hidden;
}


.bot-section__inner {
    max-width: var(--ds-content-max-width);

    margin-inline: auto;
}


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

.bot-section__heading {
    max-width: 700px;

    margin-inline: auto;

    text-align: center;

    margin-bottom: var(--ds-space-16);
}


.bot-section__eyebrow {
    display: inline-block;

    margin-bottom: var(--ds-space-4);

    color: var(--ds-primary);

    font-size: 0.75rem;
    font-weight: 650;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.bot-section__title {
    margin: 0 0 var(--ds-space-5);

    color: var(--ds-foreground);

    font-family: var(--ds-font-heading);

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;

    letter-spacing: -0.025em;

    font-weight: 700;
}


.bot-section__subtitle {
    max-width: 60ch;

    margin: 0 auto;

    color: var(--ds-muted-foreground);

    font-size: 1.05rem;
    line-height: 1.65;
}


/* ============================================================
   FLOW
   ============================================================ */

.bot-flow {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: var(--ds-space-6);
}


/* ============================================================
   ITEM
   ============================================================ */

.bot-flow__item {
    position: relative;

    min-width: 0;

    padding:
        var(--ds-space-8)
        var(--ds-space-6);

    background: var(--ds-card);

    border: 2px solid transparent;

    border-radius: var(--ds-radius-xl);

    box-shadow: var(--ds-shadow-sm);

    transition:
        transform var(--ds-duration-normal) var(--ds-ease-standard),
        border-color var(--ds-duration-normal) var(--ds-ease-standard),
        box-shadow var(--ds-duration-normal) var(--ds-ease-standard);
}


.bot-flow__item:hover {
    transform: translateY(-5px);

    border-color: var(--ds-primary);

    box-shadow:
        0 10px 30px
        color-mix(
            in oklch,
            var(--ds-primary) 18%,
            transparent
        );
}

.bot-flow__item:hover .bot-flow__number {
    color:
        color-mix(
            in oklch,
            var(--ds-primary) 14%,
            transparent
        );
}


/* ============================================================
   NUMBER
   ============================================================ */

.bot-flow__number {
    position: absolute;

    top: -8px;
    right: 14px;

    margin: 0;

    color:
        color-mix(
            in oklch,
            var(--ds-primary) 8%,
            transparent
        );

    font-family: var(--ds-font-heading);

    font-size: 6rem;

    font-weight: 750;

    line-height: 1;

    letter-spacing: -0.07em;

    user-select: none;

    pointer-events: none;

    z-index: 0;

    background: linear-gradient(
        135deg,
        color-mix(in oklch, var(--ds-primary) 12%, transparent),
        transparent
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ============================================================
   ICON
   ============================================================ */

.bot-flow__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: var(--ds-space-6);

    background:
        color-mix(
            in oklch,
            var(--ds-primary) 10%,
            var(--ds-card)
        );

    color: var(--ds-primary);

    border:
        1px solid
        color-mix(
            in oklch,
            var(--ds-primary) 20%,
            var(--ds-border)
        );

    border-radius: var(--ds-radius-lg);
}

.bot-flow__icon svg {
    width: 22px;
    height: 22px;

    stroke-width: 1.8;
}


/* ============================================================
   TITLE
   ============================================================ */

.bot-flow__title {
    margin: 0 0 var(--ds-space-3);

    color: var(--ds-foreground);

    font-family: var(--ds-font-heading);

    font-size: 1.25rem;
    line-height: 1.25;

    font-weight: 650;
}


/* ============================================================
   TEXT
   ============================================================ */

.bot-flow__text {
    margin: 0;

    color: var(--ds-muted-foreground);

    font-size: 0.95rem;

    line-height: 1.6;
}


/* ============================================================
   CONNECTOR
   ============================================================ */

.bot-flow__connector {
    width: 48px;
    height: 1px;

    background: var(--ds-border);
}


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

@media (max-width: 900px) {

    .bot-flow {
        grid-template-columns: 1fr;
        gap: var(--ds-space-4);
    }


    .bot-flow__connector {
        width: 1px;
        height: 32px;

        margin-inline: auto;
    }
}


@media (max-width: 640px) {

    .bot-section {
        padding:
            var(--ds-space-16)
            var(--ds-space-4);
    }


    .bot-section__heading {
        margin-bottom: var(--ds-space-10);
    }


    .bot-section__title {
        font-size: clamp(1.9rem, 9vw, 2.5rem);
    }


    .bot-section__subtitle {
        font-size: 1rem;
    }


    .bot-flow__item {
        padding:
            var(--ds-space-6)
            var(--ds-space-5);
    }

    .bot-flow__number {
        top: -4px;
        right: 10px;
        font-size: 5rem;
    }
}