:root{
    --bg:#050816;
    --border:rgba(255,255,255,0.10);
    --text:#f5f7fb;
    --muted:#9ea8bc;
    --accent:#2f80ff;
    --accent-2:#36d17c;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    font-family:
        Inter,
        Manrope,
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(47,128,255,0.22),
            transparent 34%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(54,209,124,0.14),
            transparent 30%
        ),

        var(--bg);

    color:var(--text);

    overflow-x:hidden;
}

.page{
    width:min(1120px, calc(100% - 40px));

    min-height:100dvh;

    margin:0 auto;

    padding:28px 0 18px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

header{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:16px;

    margin-bottom:68px;
}

.logo img{
    width:min(270px, 70vw);

    height:auto;

    display:block;
}

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

    color:var(--muted);

    padding:10px 20px;

    border-radius:999px;

    font-size:15px;

    letter-spacing:0.01em;

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

    backdrop-filter:blur(10px);
}

.hero{
    max-width:980px;
}

h1{
    font-size:clamp(34px, 5vw, 72px);

    font-weight:700;

    line-height:1.02;

    letter-spacing:-0.05em;

    margin:0 0 24px;
}

.gradient{
    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.subtitle{
    font-size:clamp(18px, 2vw, 24px);

    font-weight:400;

    line-height:1.45;

    color:var(--muted);

    max-width:860px;

    margin:0 auto 32px;
}

.actions{
    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:52px;
}

.button{
    display:inline-flex;

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

    min-height:54px;

    padding:0 28px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    font-size:16px;

    color:white;

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

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

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

.button.primary{
    background:
        linear-gradient(
            90deg,
            var(--accent),
            #1f66d8
        );

    border:none;

    box-shadow:
        0 10px 28px rgba(47,128,255,0.22);
}

.button.secondary{
    background:rgba(255,255,255,0.04);

    color:var(--text);
}

.button.secondary:hover{
    background:rgba(255,255,255,0.07);
}

footer{
    width:100%;

    margin-top:auto;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,0.08);

    color:rgba(255,255,255,0.46);

    font-size:13px;

    display:flex;

    justify-content:space-between;

    gap:18px;

    flex-wrap:wrap;
}

footer a{
    color:rgba(255,255,255,0.46);

    text-decoration:none;

    transition:color 0.18s ease;
}

footer a:hover{
    color:rgba(255,255,255,0.78);
}

.footer-links{
    display:flex;
    gap:12px;
}

@media (max-width:760px){

    .page{
    	width:min(100% - 28px, 1120px);

    	min-height:auto;

    	padding-top:20px;
	}

    header{
        margin-bottom:52px;
    }

    .logo img{
        width:min(220px, 68vw);
    }

    h1{
        font-size:clamp(34px, 11vw, 52px);

        line-height:1.04;
    }

    .subtitle{
        font-size:20px;

        line-height:1.45;
    }

    .actions{
        gap:14px;
    }

    footer{
        justify-content:center;

        text-align:center;
    }
}