/* =========================================================
   KNOWLEDGE BASE PRODUCT PAGE
   FAZASAZ
========================================================= */


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

.knowledge-base-page {

    --kb-blue:
        #0b63ce;

    --kb-blue-dark:
        #063d86;

    --kb-blue-deep:
        #042b61;

    --kb-blue-light:
        #e8f3ff;

    --kb-green:
        #10b981;

    --kb-green-light:
        #d9fff1;

    --kb-text:
        #17324d;

    --kb-muted:
        #6f8295;

    --kb-border:
        rgba(9, 99, 206, .12);

    background:
        #f3f9ff;

    color:
        var(--kb-text);

    overflow-x:
        hidden;

}


/* =========================================================
   GENERAL
========================================================= */

.knowledge-base-page *,
.knowledge-base-page *::before,
.knowledge-base-page *::after {

    box-sizing:
        border-box;

}


.knowledge-base-page main {

    overflow:
        hidden;

}


.section-space {

    padding:
        120px 0;

}


.container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        auto;

}


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

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 16px;

    border-radius:
        100px;

    background:
        rgba(11, 99, 206, .09);

    border:
        1px solid rgba(11, 99, 206, .12);

    color:
        var(--kb-blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .4px;

    margin-bottom:
        20px;

}


.section-label.light {

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

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

    color:
        #ffffff;

}


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

.section-heading {



    margin:
        0 auto 65px;

}


.section-heading.center {

    text-align:
        center;

}


.section-heading h2 {

    font-size:
        clamp(32px, 4vw, 52px);

    line-height:
        1.5;

    margin:
        0 0 18px;

    color:
        var(--kb-blue-deep);

}


.section-heading h2 span {

    color:
        var(--kb-green);

}


.section-heading p {

    color:
        var(--kb-muted);

    font-size:
        17px;

    line-height:
        2;

}


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

.kb-hero {

    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    padding:
        150px 0 100px;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(16, 185, 129, .18),
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 25%,
            rgba(11, 99, 206, .20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #eaf5ff,
            #f2fbff 55%,
            #e4fff5
        );

}


.kb-hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .4;

    background-image:

        linear-gradient(
            rgba(11, 99, 206, .05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(11, 99, 206, .05) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    pointer-events:
        none;

}


.kb-hero .container {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        80px;

}


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

.kb-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 18px;

    border-radius:
        100px;

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

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(11, 99, 206, .14);

    color:
        var(--kb-blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1px;

    margin-bottom:
        25px;

}


.kb-badge-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--kb-green);

    box-shadow:
        0 0 0 6px rgba(16, 185, 129, .13);

}


.kb-hero h1 {

    margin:
        0;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height:
        1.3;

    color:
        var(--kb-blue-deep);

    letter-spacing:
        -1px;

}


.kb-hero h1 span {

    display:
        block;

    color:
        var(--kb-blue);

    position:
        relative;

}


.kb-hero h1 span::after {

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        8px;

    right:
        5px;

    bottom:
        -6px;

    border-radius:
        20px;

    background:
        var(--kb-green);

    opacity:
        .85;

}


.kb-hero-description {

    max-width:
        620px;

    margin:
        35px 0;

    color:
        var(--kb-muted);

    font-size:
        18px;

    line-height:
        2.1;

}


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

.kb-hero-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    flex-wrap:
        wrap;

}


.kb-primary-button,
.kb-secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    text-decoration:
        none;

    border-radius:
        14px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.kb-primary-button {

    padding:
        16px 25px;

    background:

        linear-gradient(
            135deg,
            var(--kb-blue),
            #1479e8
        );

    color:
        white;

    box-shadow:
        0 18px 35px rgba(11, 99, 206, .25);

}


.kb-primary-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 25px 45px rgba(11, 99, 206, .32);

}


.kb-secondary-button {

    padding:
        15px 23px;

    border:
        1px solid rgba(11, 99, 206, .18);

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

    color:
        var(--kb-blue);

}


.kb-secondary-button:hover {

    background:
        white;

    transform:
        translateY(-3px);

}


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

.kb-hero-stats {

    display:
        flex;

    gap:
        30px;

    margin-top:
        40px;

    flex-wrap:
        wrap;

}


.kb-stat {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.kb-stat strong {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        white;

    color:
        var(--kb-green);

    box-shadow:
        0 12px 30px rgba(4, 65, 140, .08);

}


.kb-stat div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.kb-stat span {

    color:
        var(--kb-muted);

    font-size:
        12px;

}


.kb-stat b {

    color:
        var(--kb-blue-deep);

    font-size:
        14px;

}


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

.kb-hero-visual {

    position:
        relative;

}


.kb-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(70px);

    pointer-events:
        none;

}


.kb-glow-one {

    width:
        220px;

    height:
        220px;

    background:
        rgba(16, 185, 129, .35);

    left:
        -70px;

    bottom:
        -40px;

}


.kb-glow-two {

    width:
        260px;

    height:
        260px;

    background:
        rgba(11, 99, 206, .25);

    right:
        -70px;

    top:
        -50px;

}


.kb-dashboard {

    position:
        relative;

    z-index:
        2;

    padding:
        22px;

    border-radius:
        28px;

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

    backdrop-filter:
        blur(22px);

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

    box-shadow:
        0 40px 100px rgba(5, 67, 143, .18);

}


/* DASHBOARD TOP */

.kb-dashboard-top {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        22px;

}


.kb-dashboard-logo {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            var(--kb-blue),
            var(--kb-green)
        );

}


.kb-dashboard-title {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.kb-dashboard-title strong {

    font-size:
        14px;

    color:
        var(--kb-blue-deep);

}


.kb-dashboard-title span {

    font-size:
        11px;

    color:
        var(--kb-muted);

}


.kb-dashboard-status {

    margin-right:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    font-size:
        10px;

    color:
        var(--kb-green);

    font-weight:
        800;

}


.kb-dashboard-status span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--kb-green);

}


/* SEARCH */

.kb-search-preview {

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 15px;

    background:
        #f1f7fc;

    border-radius:
        12px;

    color:
        #91a4b5;

    font-size:
        12px;

}


.kb-search-preview kbd {

    margin-right:
        auto;

    padding:
        4px 7px;

    border-radius:
        5px;

    background:
        white;

    font-size:
        9px;

}


/* DASHBOARD CONTENT */

.kb-preview-content {

    display:
        flex;

    gap:
        15px;

    margin-top:
        20px;

}


.kb-preview-sidebar {

    width:
        58px;

    padding:
        10px;

    border-radius:
        14px;

    background:
        #eef6fc;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

}


.kb-preview-menu {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    color:
        #7890a4;

}


.kb-preview-menu.active {

    background:
        var(--kb-blue);

    color:
        white;

}


.kb-preview-documents {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.kb-document {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px;

    border-radius:
        13px;

    background:
        #f8fbfd;

    transition:
        .3s ease;

}


.kb-document:hover {

    transform:
        translateX(-5px);

    background:
        white;

    box-shadow:
        0 10px 25px rgba(4, 65, 140, .07);

}


.kb-document-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

}


.kb-document-icon.blue {

    color:
        var(--kb-blue);

    background:
        #e4f1ff;

}


.kb-document-icon.green {

    color:
        var(--kb-green);

    background:
        #dffbf0;

}


.kb-document-icon.purple {

    color:
        #7c5ce6;

    background:
        #eee9ff;

}


.kb-document div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.kb-document strong {

    font-size:
        12px;

    color:
        var(--kb-blue-deep);

}


.kb-document span {

    font-size:
        10px;

    color:
        var(--kb-muted);

}


/* FLOATING CARD */

.kb-floating-card {

    position:
        absolute;

    z-index:
        5;

    left:
        -40px;

    bottom:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px;

    border-radius:
        17px;

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

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 20px 50px rgba(4, 65, 140, .17);

}


.kb-floating-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--kb-green-light);

    color:
        var(--kb-green);

}


.kb-floating-card div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.kb-floating-card span {

    font-size:
        10px;

    color:
        var(--kb-muted);

}


.kb-floating-card strong {

    font-size:
        12px;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.kb-intro {

    background:
        #ffffff;

}


.kb-intro-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        100px;

    align-items:
        center;

}


/* VISUAL */

.kb-intro-visual {

    position:
        relative;

    min-height:
        460px;

    display:
        grid;

    place-items:
        center;

}


.kb-orbit {

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    border:
        2px dashed rgba(11, 99, 206, .15);

    animation:
        kbRotate 30s linear infinite;

}


@keyframes kbRotate {

    to {

        transform:
            rotate(360deg);

    }

}


.kb-central-node {

    position:
        relative;

    z-index:
        2;

    width:
        120px;

    height:
        120px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        35px;

    background:

        linear-gradient(
            135deg,
            var(--kb-blue),
            var(--kb-green)
        );

    color:
        white;

    font-size:
        40px;

    box-shadow:
        0 30px 70px rgba(11, 99, 206, .25);

}


.kb-orbit-card {

    position:
        absolute;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        13px 17px;

    border-radius:
        14px;

    background:
        white;

    box-shadow:
        0 15px 40px rgba(4, 65, 140, .1);

    font-size:
        12px;

    font-weight:
        700;

    color:
        var(--kb-blue-deep);

}


.kb-orbit-card i {

    color:
        var(--kb-green);

}


.card-one {

    top:
        45px;

    right:
        20px;

}


.card-two {

    bottom:
        60px;

    right:
        10px;

}


.card-three {

    top:
        80px;

    left:
        0;

}


.card-four {

    bottom:
        40px;

    left:
        35px;

}


/* INTRO CONTENT */

.kb-intro-content h2 {

    font-size:
        clamp(30px, 3.5vw, 48px);

    line-height:
        1.6;

    margin:
        0 0 25px;

    color:
        var(--kb-blue-deep);

}


.kb-intro-content h2 span {

    color:
        var(--kb-blue);

}


.kb-intro-content p {

    color:
        var(--kb-muted);

    line-height:
        2.1;

    margin:
        0 0 18px;

}


.kb-problem-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

    margin-top:
        30px;

}


.kb-problem-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px;

    border-radius:
        12px;

    background:
        #f5faff;

    color:
        var(--kb-blue-deep);

    font-size:
        13px;

    font-weight:
        700;

}


.kb-problem-list i {

    color:
        var(--kb-green);

}


/* =========================================================
   FEATURES
========================================================= */

.kb-features {

    background:

        linear-gradient(
            180deg,
            #eef8ff,
            #f8fcff
        );

}


.kb-feature-grid {

    display:
        grid;

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

    gap:
        24px;

}


.kb-feature-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        35px;

    min-height:
        270px;

    border-radius:
        25px;

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

    border:
        1px solid rgba(11, 99, 206, .08);

    transition:
        .35s ease;

}


.kb-feature-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 60px rgba(4, 65, 140, .12);

}


.kb-feature-icon {

    width:
        62px;

    height:
        62px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        19px;

    font-size:
        23px;

    margin-bottom:
        25px;

}


.icon-blue {

    color:
        var(--kb-blue);

    background:
        #e5f2ff;

}


.icon-green {

    color:
        var(--kb-green);

    background:
        #dffbf0;

}


.icon-purple {

    color:
        #7956d9;

    background:
        #eee9ff;

}


.icon-cyan {

    color:
        #0a9db6;

    background:
        #ddf8fc;

}


.icon-orange {

    color:
        #e88720;

    background:
        #fff2df;

}


.kb-feature-card h3 {

    margin:
        0 0 12px;

    color:
        var(--kb-blue-deep);

    font-size:
        20px;

}


.kb-feature-card p {

    margin:
        0;

    color:
        var(--kb-muted);

    font-size:
        14px;

    line-height:
        2;

}


.kb-card-line {

    position:
        absolute;

    bottom:
        0;

    right:
        0;

    width:
        0;

    height:
        4px;

    background:

        linear-gradient(
            90deg,
            var(--kb-blue),
            var(--kb-green)
        );

    transition:
        .4s ease;

}


.kb-feature-card:hover .kb-card-line {

    width:
        100%;

}


/* =========================================================
   USE CASES
========================================================= */

.kb-usecases {

    background:
        white;

}


.kb-usecases-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        50px;

    margin-bottom:
        60px;

}


.kb-usecases-header h2 {

    max-width:
        650px;

    margin:
        0;

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

    line-height:
        1.6;

    color:
        var(--kb-blue-deep);

}


.kb-usecases-header h2 span {

    color:
        var(--kb-green);

}


.kb-usecases-header p {

    max-width:
        390px;

    margin:
        0;

    color:
        var(--kb-muted);

    line-height:
        2;

}


.kb-usecases-grid {

    display:
        grid;

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

    gap:
        20px;

}


.kb-usecase-card {

    position:
        relative;

    padding:
        35px 25px;

    border-radius:
        22px;

    background:
        #f4faff;

    transition:
        .35s ease;

    overflow:
        hidden;

}


.kb-usecase-card:hover {

    background:
        var(--kb-blue);

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 50px rgba(11, 99, 206, .2);

}


.kb-usecase-number {

    position:
        absolute;

    left:
        18px;

    top:
        15px;

    color:
        rgba(11, 99, 206, .12);

    font-size:
        45px;

    font-weight:
        900;

    transition:
        .3s ease;

}


.kb-usecase-card:hover .kb-usecase-number {

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

}


.kb-usecase-card > i {

    position:
        relative;

    z-index:
        2;

    font-size:
        30px;

    color:
        var(--kb-green);

    margin-bottom:
        25px;

}


.kb-usecase-card h3 {

    position:
        relative;

    z-index:
        2;

    color:
        var(--kb-blue-deep);

    margin:
        0 0 12px;

}


.kb-usecase-card p {

    position:
        relative;

    z-index:
        2;

    margin:
        0;

    color:
        var(--kb-muted);

    font-size:
        13px;

    line-height:
        2;

}


.kb-usecase-card:hover h3,
.kb-usecase-card:hover p {

    color:
        white;

}


/* =========================================================
   SMALL BUSINESS
========================================================= */

.kb-small-business {

    background:
        #edf8ff;

}


.kb-small-business-box {

    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        50px;

    align-items:
        center;

    padding:
        70px;

    border-radius:
        35px;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(16, 185, 129, .25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #063d86,
            #075cb9
        );

    color:
        white;

}


.kb-small-business-content {

    position:
        relative;

    z-index:
        2;

}


.kb-company-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 15px;

    border-radius:
        100px;

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

    font-size:
        12px;

    margin-bottom:
        20px;

}


.kb-company-badge i {

    color:
        var(--kb-green);

}



.kb-small-business h2 {

    margin:
        0 0 20px;

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

    line-height:
        1.55;
    color:white;

}


.kb-small-business h2 span {

    display:
        block;

    color:
        #6df0c5;

}


.kb-small-business p {

    max-width:
        650px;

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

    line-height:
        2;

}


.kb-company-points {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        28px;

}


.kb-company-points span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        13px;

}


.kb-company-points i {

    color:
        #6df0c5;

}


/* COMPANY VISUAL */

.kb-small-business-visual {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.kb-company-circle {

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

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

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

    box-shadow:
        inset 0 0 50px rgba(255, 255, 255, .05);

}


.kb-company-circle span {

    font-size:
        55px;

    font-weight:
        900;

    color:
        #6df0c5;

}


.kb-company-circle small {

    font-size:
        15px;

    opacity:
        .6;

}


.kb-small-business-visual > strong {

    margin-top:
        20px;

}


.kb-company-line {

    width:
        70px;

    height:
        3px;

    margin-top:
        15px;

    border-radius:
        20px;

    background:
        var(--kb-green);

}


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

.kb-benefits {

    background:
        white;

}


.kb-benefit-grid {

    display:
        grid;

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

    gap:
        20px;

}


.kb-benefit-item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    padding:
        30px 20px;

    border-radius:
        20px;

    border:
        1px solid var(--kb-border);

    background:
        #fbfdff;

    transition:
        .3s ease;

}


.kb-benefit-item:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 45px rgba(4, 65, 140, .1);

}


.kb-benefit-item div {

    width:
        60px;

    height:
        60px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    border-radius:
        18px;

    background:

        linear-gradient(
            135deg,
            #e5f2ff,
            #ddfff1
        );

    color:
        var(--kb-blue);

    font-size:
        22px;

}


.kb-benefit-item span {

    font-size:
        14px;

    font-weight:
        800;

    color:
        var(--kb-blue-deep);

}


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

.kb-final-cta {

    padding:
        50px 0 120px;

    background:
        white;

}


.kb-final-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        85px 40px;

    border-radius:
        35px;

    text-align:
        center;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(16, 185, 129, .35),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(20, 121, 232, .4),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #042b61,
            #075fc0
        );

}


.kb-final-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .15;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, .3) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, .3) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

}


.kb-final-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        750px;

    margin:
        auto;

    color:
        white;

}
.kb-final-content h2 {
    color:white;
}


.kb-final-icon {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 25px;

    border-radius:
        22px;

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

    font-size:
        27px;

    color:
        #6df0c5;

}


.kb-final-content h2 {

    font-size:
        clamp(32px, 4vw, 55px);

    line-height:
        1.55;

    margin:
        0 0 20px;

}


.kb-final-content h2 span {

    color:
        #6df0c5;

}


.kb-final-content p {

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

    font-size:
        16px;

    line-height:
        2;

}


.kb-final-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        25px;

    padding:
        17px 27px;

    border-radius:
        14px;

    text-decoration:
        none;

    background:
        var(--kb-green);

    color:
        white;

    font-weight:
        800;

    transition:
        .3s ease;

    box-shadow:
        0 15px 35px rgba(16, 185, 129, .25);

}


.kb-final-button:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px rgba(16, 185, 129, .35);

}


/* DECORATION */

.kb-final-decoration {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


.kb-final-decoration div {

    position:
        absolute;

    border-radius:
        50%;

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

}


.kb-final-decoration div:nth-child(1) {

    width:
        400px;

    height:
        400px;

    right:
        -250px;

    top:
        -120px;

}


.kb-final-decoration div:nth-child(2) {

    width:
        250px;

    height:
        250px;

    left:
        -150px;

    bottom:
        -100px;

}


.kb-final-decoration div:nth-child(3) {

    width:
        100px;

    height:
        100px;

    left:
        15%;

    top:
        -50px;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:

        opacity .7s ease,
        transform .7s ease;

}


.reveal.show {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1050px) {


    .kb-hero {

        padding:
            120px 0 80px;

    }


    .kb-hero .container {

        grid-template-columns:
            1fr;

        gap:
            70px;

    }


    .kb-hero-content {

        text-align:
            center;

    }


    .kb-hero-description {

        margin-right:
            auto;

        margin-left:
            auto;

    }


    .kb-hero-actions,
    .kb-hero-stats {

        justify-content:
            center;

    }


    .kb-hero-visual {

        max-width:
            650px;

        width:
            100%;

        margin:
            auto;

    }


    .kb-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .kb-intro-content {

        text-align:
            center;

    }


    .kb-problem-list {

        max-width:
            700px;

        margin-right:
            auto;

        margin-left:
            auto;

        text-align:
            right;

    }


    .kb-feature-grid {

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

    }


    .kb-usecases-grid {

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

    }


    .kb-usecases-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .kb-small-business-box {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .kb-company-points {

        justify-content:
            center;

    }


    .kb-benefit-grid {

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

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {


    .container {

        width:
            min(100% - 30px, 1180px);

    }


    .section-space {

        padding:
            80px 0;

    }


    .kb-hero {

        min-height:
            auto;

        padding:
            110px 0 70px;

    }


    .kb-hero h1 {

        font-size:
            40px;

    }


    .kb-hero-description {

        font-size:
            15px;

        line-height:
            2;

    }


    .kb-dashboard {

        padding:
            15px;

        border-radius:
            20px;

    }


    .kb-floating-card {

        position:
            relative;

        left:
            auto;

        bottom:
            auto;

        margin:
            20px auto 0;

        width:
            fit-content;

    }


    .kb-preview-sidebar {

        width:
            45px;

        padding:
            6px;

    }


    .kb-preview-menu {

        width:
            32px;

        height:
            32px;

        font-size:
            12px;

    }


    .kb-document {

        padding:
            10px;

    }


    .kb-document strong {

        font-size:
            10px;

    }


    .kb-document span {

        font-size:
            8px;

    }


    .kb-document-icon {

        width:
            35px;

        height:
            35px;

    }


    .kb-intro-visual {

        min-height:
            400px;

    }


    .kb-orbit {

        width:
            270px;

        height:
            270px;

    }


    .kb-orbit-card {

        padding:
            10px 12px;

        font-size:
            10px;

    }


    .card-one {

        right:
            0;

    }


    .card-two {

        right:
            0;

    }


    .card-three {

        left:
            -5px;

    }


    .card-four {

        left:
            0;

    }


    .kb-problem-list {

        grid-template-columns:
            1fr;

    }


    .kb-feature-grid {

        grid-template-columns:
            1fr;

    }


    .kb-feature-card {

        min-height:
            auto;

    }


    .kb-usecases-grid {

        grid-template-columns:
            1fr;

    }


    .kb-usecases-header {

        margin-bottom:
            40px;

    }


    .kb-small-business-box {

        padding:
            45px 25px;

        border-radius:
            25px;

    }


    .kb-company-circle {

        width:
            190px;

        height:
            190px;

    }


    .kb-company-circle span {

        font-size:
            45px;

    }


    .kb-benefit-grid {

        grid-template-columns:
            1fr;

    }


    .kb-final-box {

        padding:
            65px 20px;

        border-radius:
            25px;

    }


    .kb-hero-stats {

        flex-direction:
            column;

        align-items:
            center;

    }


    .kb-hero-actions {

        flex-direction:
            column;

    }


    .kb-primary-button,
    .kb-secondary-button {

        width:
            100%;

        max-width:
            320px;

    }

}


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

@media (max-width: 420px) {


    .kb-hero h1 {

        font-size:
            34px;

    }


    .kb-dashboard-status {

        display:
            none;

    }


    .kb-dashboard-title strong {

        font-size:
            12px;

    }


    .kb-preview-sidebar {

        display:
            none;

    }


    .kb-document {

        gap:
            8px;

    }

}