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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;

    font-family:
        Inter,
        sans-serif;

    background:#f8fafc;

    color:#0f172a;

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

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

.km-home-hero{

    position:relative;

    overflow:hidden;

    padding:
        28px
        24px
        100px;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 50%,
            #2563eb 100%
        );

    color:#fff;

}

/* glow */

.km-hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.4;

}

.km-hero-glow.one{

    width:340px;
    height:340px;

    background:#3b82f6;

    top:-120px;
    right:-100px;

}

.km-hero-glow.two{

    width:300px;
    height:300px;

    background:#14b8a6;

    bottom:-120px;
    left:-100px;

}

/* =========================
   TOPBAR
========================= */

.km-home-topbar{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

/* logo */

.km-home-logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.km-home-logo img{

    width:auto;
    height:50px;

    border-radius:16px;

    background:#fff;

    padding:8px;

}

.km-home-logo-title{

    font-size:16px;

    font-weight:600;

}

.km-home-logo-sub{

    font-size:13px;

    opacity:.7;

    margin-top:2px;

}

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

.km-btn-login,
.km-btn-primary,
.km-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

    cursor:pointer;

}

/* login */

.km-btn-login{

    height:44px;

    padding:0 22px;

    border-radius:14px;

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

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

    font-weight:700;

    backdrop-filter:
        blur(10px);

}

/* primary */

.km-btn-primary{

    height:56px;

    padding:0 28px;

    border-radius:18px;

    background:#f59e0b;

    color:#fff;

    font-weight:800;

    box-shadow:
        0 18px 40px
        rgba(245,158,11,.28);

}

/* secondary */

.km-btn-secondary{

    height:56px;

    padding:0 28px;

    border-radius:18px;

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

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

    font-weight:700;

    color:#fff;

    backdrop-filter:
        blur(12px);

}

/* hover */

.km-btn-primary:hover,
.km-btn-secondary:hover,
.km-btn-login:hover{

    transform:
        translateY(-2px);

}

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

.km-home-hero-inner{

    position:relative;

    z-index:2;

    max-width:920px;

    margin:90px auto 0;

    text-align:center;

}

/* badge */

.km-home-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:42px;

    padding:0 18px;

    border-radius:999px;

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

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

    font-size:14px;

    font-weight:700;

    margin-bottom:28px;

    backdrop-filter:
        blur(10px);

}

/* title */

.km-home-title {
    font-size: 21px;
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 26px;
    text-wrap: balance;
    font-family: inherit;

}

/* desc */

.km-home-desc{

    max-width:760px;

    margin:0 auto;

    font-size:15px;

    line-height:1.3;

}

/* buttons */

.km-home-buttons{

    margin-top:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

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

.km-stats-section{

    max-width:1200px;

    margin:-60px auto 0;

    padding:0 24px;

    position:relative;

    z-index:5;

}

/* grid */

.km-stats-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:18px;

}

/* card */

.km-stat-card{

    background:#fff;

    border-radius:28px;

    padding:28px;

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

    border:
        1px solid #eef2f7;

    text-align:center;

}

/* icon */

.km-stat-icon{

    font-size:34px;

    margin-bottom:18px;

}

/* value */

.km-stat-value{

    font-size:34px;

    font-weight:900;

    color:#2563eb;

    margin-bottom:8px;

}

/* label */

.km-stat-label{

    color:#64748b;

    font-size:14px;

    font-weight:600;

}

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

.km-feature-section{

    max-width:1200px;

    margin:90px auto;

    padding:0 24px;

}

/* heading */

.km-section-heading{

    text-align:center;

    font-size:38px;

    font-weight:900;

    margin-bottom:50px;

    letter-spacing:-1px;

}

/* grid */

.km-feature-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:24px;

}

/* card */

.km-feature-card{

    background:#fff;

    border-radius:28px;

    padding:32px;

    border:
        1px solid #edf2f7;

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

    transition:.25s;

}

.km-feature-card:hover{

    transform:
        translateY(-6px);

}

/* icon */

.km-feature-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:24px;

}

/* title */

.km-feature-title{

    font-size:20px;

    font-weight:800;

    margin-bottom:14px;

}

/* desc */

.km-feature-desc{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}

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

.km-home-cta{

    padding:
        0 24px
        100px;

}

.km-home-cta-box{

    max-width:1100px;

    margin:0 auto;

    border-radius:40px;

    padding:70px 40px;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color:#fff;

    text-align:center;

    overflow:hidden;

    position:relative;

}

/* title */

.km-home-cta-title{

    font-size:44px;

    font-weight:900;

    margin-bottom:18px;

}

/* desc */

.km-home-cta-desc{

    max-width:680px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    opacity:.86;

}

/* buttons */

.km-home-cta-buttons{

    margin-top:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

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

@media(max-width:768px){

    .km-home-topbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .km-home-hero{

        padding:
            24px
            20px
            80px;

    }

    .km-home-hero-inner{

        margin-top:28px;

    }

    .km-home-desc{

        font-size:16px;

    }

    .km-section-heading{

        font-size:30px;

    }

    .km-home-cta-box{

        padding:50px 24px;

        border-radius:30px;

    }

    .km-home-cta-title{

        font-size:34px;

    }

}