:root {
    --pri: #6f3aff;
    --pri-2: #4b2ad1;
    --acc: #f9b233;
    --ink: #0f1020;
    --ink-2: #1a1c2e;
    --mut: #a5a9c8;
    --bg: #f7f6fb;
    --ok: #19ad7a;
    --warn: #ff7a59
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.6
}

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

a {
    color: var(--pri);
    text-decoration: none;
    transition: opacity .2s
}

a:hover {
    opacity: .75
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px
}

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

.grid-2 {
    grid-template-columns:1fr
}

.grid-3 {
    grid-template-columns:1fr
}

.center {
    text-align: center
}

h1, h2, h3 {
    margin: 0 0 12px;
    font-weight: 800;
    line-height: 1.15
}

h1 {
    font-size: clamp(36px, 5.5vw, 64px)
}

h2 {
    font-size: clamp(24px, 3vw, 38px)
}

h3 {
    font-size: clamp(18px, 2.2vw, 24px)
}

.lead {
    font-size: clamp(16px, 1.6vw, 18px);
    color: var(--ink);
    opacity: .92
}

.hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 50%, #0b0c18 100%);
    color: #fff;
    border-bottom: 6px solid var(--acc)
}

.hero .wrap {
    padding: 72px 0
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0, .4);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px
}

.hero h1 {
    color: #fff
}

.hero .lead {
    color: #e7e9ff
}

.kpi {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px
}

.kpi .item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 14px 16px;
    border-radius: 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 800
}

.btn-primary {
    background: var(--acc);
    color: #1d1200
}

.btn-dark {
    background: #111425;
    color: #fff
}

.btn-ghost {
    background: transparent;
    border: 1px solid #292c43;
    color: #d9dbff
}

.card {
    background: #fff;
    border: 1px solid #e6e7f2;
    border-radius: 16px;
    padding: 22px;
    color: #1a1a1a;
}

.card.dark {
    background: #12142a;
    color: #e8e9ff;
    border-color: #2a2c50
}

.figure {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .12)
}

.bi {
    font-size: 22px;
    vertical-align: -3px
}

.ribbon {
    position: absolute;
    inset: auto 16px -22px auto;
    background: linear-gradient(90deg, var(--acc), #ffd58f);
    color: #1d1200;
    padding: 10px 14px;
    border-radius: 14px 14px 0 0;
    font-weight: 800
}

.section {
    padding: 64px 0
}

.tight {
    padding: 42px 0
}

.accent {
    color: var(--pri)
}

.ink {
    color: var(--ink)
}

.muted {
    color: var(--mut)
}

.form label {
    display: block;
    margin: 0 0 6px;
    font-weight: 700
}

.input, textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #dfe1f3;
    background: #fff;
    font: inherit
}

.input:focus, textarea:focus {
    outline: 0;
    border-color: var(--pri);
    box-shadow: 0 0 0 3px rgba(111, 58, 255, .15)
}

textarea {
    min-height: 140px;
    resize: vertical
}

.row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

footer {
    background: #0d0f1c;
    color: #aeb2df;
    border-top: 6px solid var(--acc)
}

footer a {
    color: #cfd2ff
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1efff;
    border: 1px dashed var(--pri);
    color: #2b246b;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700
}

.figure-gradient {
    position: relative
}

.figure-gradient::after {
    content: "";
    position: absolute;
    inset: -40px -80px auto auto;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(111, 58, 255, .5), transparent 60%);
    z-index: -1;
    filter: blur(12px)
}

.list {
    display: grid;
    gap: 14px
}

.badgelist {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.note {
    background: #fff8eb;
    border: 1px solid #ffe3b5;
    color: #3a2800;
    padding: 14px 16px;
    border-radius: 12px
}

.cta {
    background: linear-gradient(135deg, #2b2e51 0%, #15172b 100%);
    color: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #323662
}

.icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center
}

.icon.pri {
    background: #efeaff;
    color: var(--pri)
}

.icon.ok {
    background: #e9fbf5;
    color: var(--ok)
}

.icon.warn {
    background: #fff2ec;
    color: var(--warn)
}

.small {
    font-size: 14px
}

@media (min-width: 860px) {
    .grid-2 {
        grid-template-columns:1.2fr 1fr
    }

    .grid-3 {
        grid-template-columns:repeat(3, 1fr)
    }

    .hero .wrap {
        padding: 92px 0
    }
}