:root {
    color-scheme: dark;
    --bg: #071017;
    --panel: #0d1a24;
    --panel2: #102431;
    --line: #1d3847;
    --text: #f4f7f8;
    --muted: #91a5af;
    --mint: #66e3b4;
    --blue: #76a9ff;
    --orange: #ffb35c
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(circle at 75% 5%, #123b48 0, transparent 32%), radial-gradient(circle at 10% 20%, #122b44 0, transparent 28%), var(--bg);
    color: var(--text);
    font: 15px/1.6 Inter, Segoe UI, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #1d3847;
    background: #09111cef;
    box-shadow: 0 8px 24px #0004;
    backdrop-filter: blur(12px)
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 36px));
    min-height: 50px;
    margin: 0 auto;
    gap: 24px
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 850;
    letter-spacing: -.02em;
    white-space: nowrap
}

.brand span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mint), #4c9fff);
    color: #061019;
    font-size: 13px
}

.brand b {
    font-size: 15px
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    min-width: 0
}

.site-header nav, .header-actions, .hero-actions, .site-footer div {
    display: flex;
    align-items: center;
    gap: 24px
}

.menu-toggle {
    display: none;
    width: 38px;
    height: 36px;
    padding: 8px;
    border: 1px solid #2d4659;
    border-radius: 9px;
    background: #111f2d
}

.menu-toggle i {
    display: block;
    width: 100%;
    height: 2px;
    margin: 3px 0;
    border-radius: 2px;
    background: #dceafb;
    transition: transform .18s ease, opacity .18s ease
}

.menu-toggle.open i:nth-child(1) {
    transform: translateY(5px) rotate(45deg)
}

.menu-toggle.open i:nth-child(2) {
    opacity: 0
}

.menu-toggle.open i:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg)
}

.site-header nav a, .text-link, .site-footer a {
    color: #b7c7ce
}

.site-header nav a:hover, .text-link:hover, .site-footer a:hover {
    color: #fff
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid var(--mint);
    border-radius: 11px;
    background: var(--mint);
    color: #06130f;
    font-weight: 850
}

.button:hover {
    filter: brightness(1.07)
}

.button.small {
    padding: 9px 14px
}

.site-header .button.small {
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px
}

.button.secondary {
    border-color: #2c4a5a;
    background: #10222d;
    color: #d7e4e9
}

main {
    width: min(1180px, calc(100% - 36px));
    margin: auto
}

.hero {
    display: grid;
    grid-template-columns:1.15fr .85fr;
    align-items: center;
    gap: 70px;
    min-height: 650px;
    padding: 70px 0 90px
}

.eyebrow {
    margin: 0;
    color: var(--mint);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .17em
}

.hero h1 {
    max-width: 760px;
    margin: 14px 0 20px;
    font-size: clamp(45px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: -.055em
}

.lead {
    max-width: 670px;
    margin: 0;
    color: #b8c8cf;
    font-size: 19px
}

.hero-actions {
    margin: 31px 0 17px
}

.micro {
    max-width: 600px;
    color: #718994;
    font-size: 12px
}

.hero-panel {
    position: relative;
    padding: 24px;
    border: 1px solid #2b5364;
    border-radius: 24px;
    background: linear-gradient(145deg, #102532, #09151e);
    box-shadow: 0 30px 100px #0008
}

.hero-panel:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(130deg, #66e3b455, transparent 40%);
    pointer-events: none
}

.panel-top, .metric, .flow {
    position: relative;
    display: flex;
    align-items: center
}

.panel-top {
    gap: 9px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.panel-top small {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #123727;
    color: var(--mint);
    font-weight: 800
}

.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 5px #66e3b420
}

.metric {
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid #18313e
}

.metric span {
    color: var(--muted)
}

.metric strong {
    font-size: 18px
}

.flow {
    justify-content: space-between;
    margin: 24px 0;
    color: #bad0d9;
    font-size: 12px;
    font-weight: 800
}

.flow span {
    padding: 8px 9px;
    border: 1px solid #2a4b5a;
    border-radius: 9px
}

.flow i {
    width: 18px;
    height: 1px;
    background: #416171
}

.panel-note {
    position: relative;
    padding: 13px;
    border-radius: 10px;
    background: #132934;
    color: #9eb5bf;
    font-size: 12px
}

.trust-strip {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border-block: 1px solid var(--line)
}

.trust-strip span {
    padding: 18px;
    text-align: center;
    color: #9db1ba;
    font-size: 12px;
    font-weight: 750
}

.section {
    padding: 110px 0
}

.section-heading {
    max-width: 720px;
    margin-bottom: 40px
}

.section h2 {
    margin: 10px 0 12px;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -.035em
}

.section-heading > p:last-child, .about > p, .contact p {
    color: var(--muted);
    font-size: 17px
}

.feature-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 14px
}

.feature-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, #0d1c26, #0a151d)
}

.feature-grid article > span {
    color: var(--mint);
    font-size: 12px;
    font-weight: 900
}

.feature-grid h3 {
    margin: 21px 0 8px;
    font-size: 22px
}

.feature-grid p {
    margin: 0;
    color: var(--muted)
}

.steps {
    padding-top: 40px
}

.step-list {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 14px
}

.step-list > div {
    display: flex;
    gap: 17px;
    padding: 24px;
    border-top: 1px solid #416171;
    background: #0b171f
}

.step-list b {
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    height: 37px;
    border-radius: 50%;
    background: #153347;
    color: var(--blue)
}

.step-list strong, .step-list small {
    display: block
}

.step-list small {
    margin-top: 5px;
    color: var(--muted)
}

.about {
    display: grid;
    grid-template-columns:.8fr 1.2fr;
    gap: 70px;
    border-top: 1px solid var(--line)
}

.about h2 {
    margin-top: 10px
}

.contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 90px;
    padding-inline: 45px;
    border: 1px solid #315868;
    border-radius: 24px;
    background: linear-gradient(120deg, #102a35, #0b1b25)
}

.contact h2 {
    margin-bottom: 7px
}

.contact p {
    margin: 0
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 30px max(24px, calc((100% - 1180px) / 2));
    border-top: 1px solid var(--line);
    background: #071018
}

.site-footer p {
    max-width: 490px;
    color: #728791;
    font-size: 12px
}

.site-footer div {
    gap: 18px;
    font-size: 13px
}

@media (max-width: 850px) {
    .site-header-inner {
        position: relative;
        width: calc(100% - 20px);
        min-height: 54px
    }

    .menu-toggle {
        display: block;
        flex: 0 0 38px
    }

    .header-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border: 1px solid #294357;
        border-top: 0;
        border-radius: 0 0 14px 14px;
        background: #09131ef7;
        box-shadow: 0 18px 38px #0008;
        backdrop-filter: blur(14px)
    }

    .header-menu.open {
        display: grid
    }

    .site-header nav {
        display: grid;
        gap: 3px
    }

    .site-header nav a {
        padding: 11px 12px;
        border-radius: 8px
    }

    .site-header nav a:hover {
        background: #142535
    }

    .header-actions {
        align-items: stretch;
        gap: 8px;
        padding-top: 9px;
        border-top: 1px solid var(--line)
    }

    .header-actions > * {
        flex: 1;
        text-align: center
    }

    .hero {
        grid-template-columns:1fr;
        min-height: auto;
        padding: 80px 0
    }

    .hero-panel {
        max-width: 600px
    }

    .trust-strip, .step-list {
        grid-template-columns:1fr 1fr
    }

    .about {
        grid-template-columns:1fr;
        gap: 20px
    }

    .contact, .site-footer {
        align-items: flex-start;
        flex-direction: column
    }

    .site-footer div {
        flex-wrap: wrap
    }
}

@media (max-width: 560px) {
    .brand b {
        font-size: 14px
    }

    .header-actions {
        display: grid;
        grid-template-columns:1fr
    }

    .header-actions .text-link {
        display: block;
        padding: 9px
    }

    .hero h1 {
        font-size: 43px
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column
    }

    .trust-strip, .feature-grid, .step-list {
        grid-template-columns:1fr
    }

    .section {
        padding: 75px 0
    }

    .contact {
        padding-inline: 22px
    }

    .contact .button {
        width: 100%;
        font-size: 13px
    }

    .site-footer {
        padding-inline: 20px
    }
}