* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    background: #07090d;

    color: #e0e3eb;

    font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
}

button,
a,
input,
textarea,
select {
    font: inherit;
}

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

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

.matrix-background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

    mask-image: radial-gradient(
            ellipse 75% 65% at center,
            black 0%,
            black 55%,
            transparent 100%
    );
}

.matrix {
    position: absolute;

    top: 50%;
    left: 50%;

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    width: 1500px;
    height: 1500px;

    transform:
            translate(-50%, -50%)
            rotate(-8deg);

    opacity: 0.34;
}

.matrix-cell {
    display: flex;

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

    border: 1px solid rgba(75, 125, 130, 0.22);

    color: rgba(110, 180, 185, 0.50);

    font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            monospace;

    font-size: 20px;
    font-weight: 400;

    transition:
            color 700ms ease,
            background-color 700ms ease,
            border-color 700ms ease,
            box-shadow 700ms ease;

    user-select: none;
}

.matrix-cell.active {
    color: rgba(120, 220, 215, 0.90);

    background: rgba(70, 130, 135, 0.12);

    border-color: rgba(95, 175, 175, 0.45);

    box-shadow:
            inset 0 0 30px rgba(70, 150, 150, 0.08),
            0 0 20px rgba(70, 150, 150, 0.05);
}

main {
    position: relative;

    z-index: 1;
}

.hero {
    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;
    padding: 120px 0 100px;

    text-align: center;
}

.hero-content {
    max-width: 760px;

    margin: 0 auto;
}

.hero-brand,
.hero h1,
.hero-description {
    position: relative;
}

.hero h1::before,
.hero-description::before {
    content: "";

    position: absolute;

    top: -5px;
    right: -9px;
    bottom: -5px;
    left: -9px;

    background: rgba(7, 9, 13, 0.06);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border-radius: 1px;

    pointer-events: none;

    z-index: -1;
}

.hero h1::before {
    top: -6px;
    right: -12px;
    bottom: -6px;
    left: -12px;

    background: rgba(7, 9, 13, 0.07);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-radius: 1px;
}

.hero-brand {
    margin: 0 0 24px;

    color: #6bc7c2;

    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.hero h1 {
    margin: 0;

    color: #e9ebf0;

    font-size: clamp(42px, 6vw, 72px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hero h1 span {
    display: block;

    color: #6bc7c2;
}

.hero-description {
    max-width: 640px;

    margin: 28px auto 0;

    color: #9aa1ad;

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

.hero-actions {
    display: flex;
    justify-content: center;

    margin-top: 36px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 24px;

    border: 1px solid transparent;
    border-radius: 6px;

    font-size: 15px;
    font-weight: 500;

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

.button-primary {
    background: #30363a;

    border-color: #495155;

    color: #e4e7eb;
}

.button-primary:hover {
    background: #393f43;

    border-color: #596267;

    transform: translateY(-1px);
}

.hero-screenshot {
    margin-top: 80px;
}

.screenshot-frame {
    overflow: hidden;

    border: 1px solid #202a2e;
    border-radius: 10px;

    background: #0b0f13;

    box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.35);
}

.screenshot-frame img {
    width: 100%;
    height: auto;
}

.download-section {
    min-height: 300px;
}

@media (max-width: 700px) {

    .matrix {
        width: 900px;
        height: 900px;
    }

    .matrix-cell {
        font-size: 14px;
    }

    .hero {
        width: min(100% - 32px, 1180px);

        padding: 80px 0 64px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-screenshot {
        margin-top: 56px;
    }

}