:root
{
    --background: #0b0d10;
    --background-light: #12161b;
    --panel: #171c22;
    --border: #2a313a;

    --text: #f3f5f7;
    --text-muted: #9ca6b2;

    --accent: #e8ff57;
    --accent-dark: #bed51e;

    --page-width: 1200px;
}

*
{
    box-sizing: border-box;
}

html
{
    scroll-behavior: smooth;
}

body
{
    margin: 0;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(232, 255, 87, 0.08),
            transparent 30%
        ),
        var(--background);

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}

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

.site-header
{
    width: min(calc(100% - 40px), var(--page-width));
    min-height: 88px;

    margin: 0 auto;

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

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

.logo
{
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.navigation
{
    display: flex;
    gap: 32px;
}

.navigation a
{
    color: var(--text-muted);
    font-size: 0.95rem;
}

.navigation a:hover
{
    color: var(--text);
}

main
{
    width: min(calc(100% - 40px), var(--page-width));
    margin: 0 auto;
}

.hero
{
    min-height: 720px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 60px;
}

.hero-content
{
    max-width: 680px;
}

.eyebrow
{
    margin: 0 0 18px;

    color: var(--accent);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p
{
    margin-top: 0;
}

h1
{
    margin-bottom: 28px;

    font-size: clamp(3.8rem, 8vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
}

h1 span
{
    display: block;
    color: var(--accent);
}

h2
{
    max-width: 850px;

    margin-bottom: 30px;

    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

h3
{
    margin-bottom: 14px;

    font-size: 1.4rem;
    letter-spacing: -0.02em;
}

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

    color: var(--text-muted);

    font-size: 1.15rem;
}

.hero-actions
{
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.button
{
    min-height: 52px;
    padding: 0 24px;

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

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

    font-weight: 700;
}

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

    background: var(--accent);
    color: #0b0d10;
}

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

.button-secondary
{
    background: transparent;
}

.button-secondary:hover
{
    background: var(--background-light);
}

.hero-graphic
{
    position: relative;

    min-height: 500px;

    overflow: hidden;

    border: 1px solid var(--border);
    background: var(--background-light);
}

.grid
{
    position: absolute;
    inset: 0;

    opacity: 0.32;

    background-image:
        linear-gradient(
            var(--border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--border) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}

.structure
{
    position: absolute;
    inset: 50% auto auto 50%;

    width: 90%;
    height: 90%;

    transform: translate(-50%, -50%);
}

.structure line
{
    stroke: var(--text-muted);
    stroke-width: 3;
}

.structure circle
{
    fill: var(--accent);
    stroke: var(--background);
    stroke-width: 4;
}

.section
{
    padding: 120px 0;

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

.section-heading
{
    margin-bottom: 60px;
}

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

.about-grid p
{
    color: var(--text-muted);
    font-size: 1.1rem;
}

.about-grid .large-text
{
    color: var(--text);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
}

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

.feature-card
{
    min-height: 300px;
    padding: 30px;

    border: 1px solid var(--border);
    background: var(--panel);
}

.feature-number
{
    display: block;

    margin-bottom: 80px;

    color: var(--accent);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.9rem;
}

.feature-card p
{
    color: var(--text-muted);
}

.development-section
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.status-panel
{
    border-top: 1px solid var(--border);
}

.status-row
{
    padding: 22px 0;

    display: flex;
    justify-content: space-between;
    gap: 30px;

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

.status-row span
{
    color: var(--text-muted);
}

.status-row strong
{
    text-align: right;
}

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

    margin: 0 auto;
    padding: 40px 0;

    display: flex;
    justify-content: space-between;
    gap: 30px;

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

    color: var(--text-muted);
    font-size: 0.9rem;
}

.site-footer p
{
    margin: 0;
}

@media (max-width: 850px)
{
    .navigation
    {
        display: none;
    }

    .hero
    {
        min-height: auto;
        padding: 100px 0;

        grid-template-columns: 1fr;
    }

    .hero-graphic
    {
        min-height: 400px;
    }

    .about-grid,
    .development-section
    {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .feature-card
    {
        min-height: auto;
    }

    .feature-number
    {
        margin-bottom: 40px;
    }
}

@media (max-width: 550px)
{
    .site-header,
    main,
    .site-footer
    {
        width: min(calc(100% - 28px), var(--page-width));
    }

    h1
    {
        font-size: 3.8rem;
    }

    .hero
    {
        padding: 75px 0;
    }

    .section
    {
        padding: 80px 0;
    }

    .hero-graphic
    {
        min-height: 320px;
    }

    .hero-actions
    {
        flex-direction: column;
    }

    .button
    {
        width: 100%;
    }

    .site-footer
    {
        flex-direction: column;
    }
}