:root
{
    --bg: #0b0f14;
    --fg: #f5f7fa;
    --accent: #53c7ff;
    --muted: #8a96a8;
}

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

body
{
    background:
        radial-gradient(circle at top right,
        rgba(83,199,255,.15),
        transparent 40%),
        linear-gradient(
        180deg,
        #0b0f14 0%,
        #111827 100%);

    color:var(--fg);

    font-family:
        Inter,
        Segoe UI,
        sans-serif;
}

.hero-container
{
    min-height:100vh;

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

    padding:2rem;
}

.brand-logo
{
    font-weight:300;
    line-height:1;

    letter-spacing:.05em;

    font-size:
        clamp(3rem,10vw,8rem);
}

.archi
{
    color:#d0d7de;
    font-weight:200;
}

.stack
{
    color:var(--accent);
    font-weight:800;
}

.stack sup
{
    font-size:.28em;
    top:-1.5em;
    position:relative;
    font-weight:300;
}

.labs
{
    margin-top:.3rem;

    font-size:
        clamp(1rem,2vw,1.5rem);

    letter-spacing:.8em;

    text-transform:uppercase;

    color:var(--muted);
}

.tagline
{
    color:var(--muted);

    font-size:
        clamp(.9rem,1.2vw,1.1rem);

    letter-spacing:.15em;
}