:root {
    color-scheme: light;

    font-family:
        Inter,
        "PingFang SC",
        "Microsoft YaHei",
        system-ui,
        -apple-system,
        sans-serif;

    --bg: #f7f8fc;
    --surface: #ffffff;
    --surface-soft: #f1f3f8;
    --text: #15171c;
    --muted: #687080;
    --muted-2: #9298a5;
    --border: #e4e7ee;
    --border-strong: #d7dbe5;
    --accent: #635bff;
    --accent-hover: #554de8;
    --accent-soft: #eeecff;

    background: var(--bg);
    color: var(--text);
}


* {
    box-sizing: border-box;
}


html {
    background: var(--bg);
}


body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 78% 17%,
            rgba(99, 91, 255, 0.12),
            transparent 31rem
        ),
        radial-gradient(
            circle at 22% 6%,
            rgba(77, 171, 247, 0.08),
            transparent 24rem
        ),
        var(--bg);

    color: var(--text);
}


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


.topbar {
    max-width: 1240px;
    height: 78px;

    margin: 0 auto;
    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(21, 23, 28, 0.07);
}


.brand {
    color: #171923;

    font-size: 19px;
    font-weight: 850;
    letter-spacing: 0.22em;
}


.nav-login {
    padding: 10px 18px;

    border: 1px solid var(--border-strong);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.72);

    color: #30343c;

    font-size: 14px;
    font-weight: 650;

    box-shadow: 0 1px 2px rgba(23, 25, 35, 0.04);
}


.nav-login:hover {
    border-color: #c8cdd9;
    background: #ffffff;
}


main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}


.hero {
    min-height: 630px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, 0.94fr);

    align-items: center;
    gap: 72px;

    padding: 72px 0 88px;
}


.eyebrow {
    margin: 0 0 20px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}


h1 {
    max-width: 690px;

    margin: 0;

    color: #111318;

    font-size:
        clamp(
            56px,
            6.5vw,
            90px
        );

    line-height: 0.99;
    letter-spacing: -0.055em;
}


.lead {
    max-width: 570px;

    margin: 30px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.78;
}


.actions {
    margin-top: 36px;

    display: flex;
    align-items: center;
    gap: 20px;
}


.primary,
.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 0 24px;

    border-radius: 12px;

    font-weight: 700;

    transition:
        transform 140ms ease,
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}


.primary {
    border: 1px solid var(--accent);

    background: var(--accent);
    color: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(99, 91, 255, 0.2);
}


.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);

    transform: translateY(-1px);
}


.preview-note {
    color: var(--muted-2);

    font-size: 13px;
}


.visual {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.orb {
    position: absolute;

    border-radius: 999px;

    filter: blur(12px);
}


.orb-one {
    width: 290px;
    height: 290px;

    background: rgba(99, 91, 255, 0.15);

    transform: translate(95px, -88px);
}


.orb-two {
    width: 235px;
    height: 235px;

    background: rgba(58, 160, 255, 0.11);

    transform: translate(-105px, 125px);
}


.preview-card {
    position: relative;
    z-index: 1;

    width: min(100%, 470px);

    padding: 18px;

    border: 1px solid rgba(197, 202, 216, 0.9);
    border-radius: 23px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 28px 75px
        rgba(45, 49, 65, 0.15);

    backdrop-filter: blur(16px);
}


.preview-bar {
    display: flex;
    gap: 7px;

    padding-bottom: 15px;
}


.preview-bar span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c5c9d4;
}


.preview-screen {
    aspect-ratio: 16 / 10;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid #272a34;
    border-radius: 15px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(99, 91, 255, 0.18),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #181a21,
            #0d0f14
        );
}


.play-mark {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 4px;

    border: 1px solid #535866;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    color: #dadde5;
}


.preview-lines {
    padding-top: 17px;
}


.preview-lines i {
    display: block;

    height: 8px;
    margin: 9px 0;

    border-radius: 8px;

    background: #e6e8ee;
}


.preview-lines i:nth-child(1) {
    width: 72%;
}


.preview-lines i:nth-child(2) {
    width: 46%;
}


.preview-lines i:nth-child(3) {
    width: 58%;
}


.features {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 12px 38px
        rgba(50, 55, 72, 0.05);
}


.features article {
    min-height: 220px;

    padding: 34px;
}


.features article + article {
    border-left: 1px solid var(--border);
}


.number {
    color: var(--accent);

    font-size: 12px;
    font-weight: 750;
}


.features h2 {
    margin: 52px 0 12px;

    color: #191b20;

    font-size: 20px;
}


.features p {
    max-width: 300px;

    margin: 0;

    color: var(--muted);

    line-height: 1.68;
}


.access {
    min-height: 300px;

    margin-top: 28px;
    padding: 68px 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(99, 91, 255, 0.08),
            rgba(255, 255, 255, 0.82) 46%,
            rgba(70, 161, 255, 0.06)
        );
}


.access h2 {
    margin: 0 0 14px;

    color: #17191f;

    font-size:
        clamp(
            28px,
            4vw,
            44px
        );

    letter-spacing: -0.035em;
}


.access p:not(.eyebrow) {
    margin: 0;

    color: var(--muted);
}


.secondary {
    flex: 0 0 auto;

    border: 1px solid var(--border-strong);

    background: #ffffff;

    color: #2d3038;
}


.secondary:hover {
    border-color: #c7ccd8;

    box-shadow:
        0 7px 20px
        rgba(50, 55, 72, 0.08);

    transform: translateY(-1px);
}


footer {
    max-width: 1240px;

    margin: 38px auto 0;
    padding: 30px 32px 42px;

    display: flex;
    justify-content: space-between;

    border-top: 1px solid var(--border);

    color: var(--muted-2);

    font-size: 12px;
}


a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


@media (max-width: 820px) {

    .topbar,
    main,
    footer {
        padding-left: 20px;
        padding-right: 20px;
    }


    .hero {
        grid-template-columns: 1fr;

        padding-top: 58px;

        gap: 18px;
    }


    .visual {
        min-height: 390px;
    }


    .features {
        grid-template-columns: 1fr;
    }


    .features article + article {
        border-left: 0;
        border-top: 1px solid var(--border);
    }


    .access {
        padding: 46px 28px;

        align-items: flex-start;
        flex-direction: column;
    }


    footer {
        gap: 10px;
        flex-direction: column;
    }

}