:root {
    --bg: #a9c3f2;
    --card: #10172a;
    --ink: #e6eefc;
    --ink-dim: #b8c2d9;
    --ink-light: #e6eefc;
    --brand: #4cc9f0;
    --accent: #80ffdb;
    --muted: #18213a;
    --ok: #22c55e;
    --warn: #f59e0b;
    --shadow: 0 10px 25px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
    line-height: 1.5
}

a {
    color: var(--brand);
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }


.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(135deg,var(--brand),#72efdd);
    color: #06111f;
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 700;
    box-shadow: var(--shadow);
    transition: .2s transform
}

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn.secondary {
        background: transparent;
        border: 1px solid #2b3656;
        color: var(--ink)
    }

.badge {
    display: inline-block;
    background: #132242;
    border: 1px solid #24335a;
    color: var(--ink-dim);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .8rem
}


.glass {
    background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: var(--shadow)
}



.toast {
    position: absolute;
    right: 18px;
    top: 18px;
    width: min(360px,94%);
    background: linear-gradient(180deg,#0f1c38,#0b1328);
    border: 1px solid #22335c;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start
}

    .toast .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--ok);
        margin-top: 6px;
        box-shadow: 0 0 0 4px rgba(34,197,94,.15)
    }

    .toast h3 {
        margin: 0;
        font-size: 1rem
    }

    .toast p {
        margin: .2rem 0 0;
        color: var(--ink-dim);
        font-size: .92rem
    }

.logos {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--ink-dim)
}

    .logos img {
        height: 28px;
        opacity: .85;
        filter: grayscale(100%)
    }

section {
    padding: 36px 0
}

h2 {
    font-size: 1.8rem;
    margin: 0 0 10px
}

.sub {
    color: var(--ink);
    margin: 0 0 18px
}

.grid {
    display: grid;
    gap: 18px
}

    .grid.features {
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr))
    }

.card {
    background: var(--card);
    border: 1px solid #1b2748;
    border-radius: 16px;
    padding: 18px
}

    .card h2 {
        margin: .2rem 0 .4rem;
        font-size: 1.5rem;
        color: var(--ink-light)
    }
    .card h3 {
        margin: .2rem 0 .4rem;
        font-size: 1.1rem
    }

    .card p {
        margin: 0;
        color: var(--ink)
    }

    .card .kpi {
        font-weight: 800;
        font-size: 1.8rem
    }

.how {
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr))
}

.step {
    position: relative;
    padding-left: 14px
}

    .step:before {
        content: attr(data-step);
        position: absolute;
        left: -4px;
        top: -6px;
        font-weight: 800;
        color: var(--accent)
    }

.cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

    .cta small {
        color: var(--ink-dim)
    }

.video {
    aspect-ratio: 16/9;
    background: #0a0f20;
    border: 1px dashed #26355f;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7dab
}

footer {
    border-top: 1px solid #1b2748;
    color: var(--ink-dim);
    padding: 28px 0;
    margin-top: 36px
}

.faq-details {
    background: var(--card);
    border: 1px solid #1b2748;
    border-radius: 14px;
    padding: 14px
}

@media (max-width: 920px) {
    .hero-grid {
        grid-template-columns: 1fr
    }
}