:root {
    --bg: #0f1021;
    --fg: #f6f7fb;
    --muted: #cdd3e8;
    --brand: #7a5cff;
    --brand2: #00d4ff;
    --ink: #1c2033;
    --card: #141633;
    --line: #262a4a;
    --accent: #ffd166
}

* {
    box-sizing: border-box
}

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

body {
    font-family: 'Manrope', sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.65
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

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

a:hover {
    opacity: .9
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 18px
}

.section {
    padding: 64px 0
}

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

.h1 {
    font-size: clamp(32px, 6vw, 56px);
    line-height: 1.15;
    font-weight: 800
}

.h2 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800
}

.h3 {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700
}

.lead {
    font-size: clamp(16px, 2.6vw, 20px);
    color: var(--muted)
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 800
}

.btn-ghost {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    padding: 12px 18px;
    border-radius: 12px
}

.wrap {
    background: radial-gradient(1200px 400px at 10% -10%, rgba(122, 92, 255, .24), transparent 60%),
    radial-gradient(1200px 400px at 110% 10%, rgba(0, 212, 255, .2), transparent 60%)
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
}

.light {
    background: #f7f9fd;
    color: #101323
}

.light .muted {
    color: #4b5167
}

.light .btn {
    background: linear-gradient(135deg, #111, #333)
}

.split {
    grid-template-columns:1.1fr .9fr
}

.kbd {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: rgba(255, 255, 255, .06);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--line)
}

.hero {
    padding: 96px 0;
    background: linear-gradient(135deg, rgba(122, 92, 255, .18), rgba(0, 212, 255, .12));
    color: #1a1a1a;
}

.hero .lead{
    color: #1a1a1a;
    opacity: .5;
}


footer{color: #1a1a1a}

.hero .brandmark {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: saturate(140%) blur(6px)
}

.hero figure {
    position: relative;
    isolation: isolate
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 209, 102, .12);
    color: var(--accent);
    border: 1px dashed var(--accent);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800
}

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

.mega {
    font-size: 46px;
    font-weight: 900
}

.bi {
    font-size: 20px;
    vertical-align: -2px
}

.input, textarea, select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--fg)
}

label {
    font-weight: 700;
    margin-bottom: 8px;
    display: block
}

.form {
    display: grid;
    gap: 16px
}

footer {
    border-top: 1px solid var(--line);
    padding: 28px 0
}

.small {
    font-size: 14px
}

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

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

@media (min-width: 880px) {
    .hero .split {
        grid-template-columns:1.1fr .9fr
    }

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

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

@media (max-width: 879.98px) {
    .split, .row3, .row2 {
        grid-template-columns:1fr
    }
}

.logo {
    font-weight: 900;
    letter-spacing: .4px
}

.tag {
    display: inline-block;
    border: 1px solid var(--line);
    padding: 6px 10px;
    border-radius: 10px
}

.hr {
    height: 1px;
    background: var(--line);
    margin: 24px 0
}

.notice {
    background: linear-gradient(135deg, rgba(255, 209, 102, .16), rgba(122, 92, 255, .12));
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: 14px
}

.badge2 {
    background: rgba(122, 92, 255, .14);
    border: 1px solid var(--line);
    padding: 8px 10px;
    border-radius: 999px
}

.light a {
    color: #0e62ff
}

.figure {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line)
}