:root {
    color-scheme: light;
    --font-sans: "Manrope", "Segoe UI", sans-serif;
    --font-display: "Syne", "Segoe UI", sans-serif;
    --ink: #121a22;
    --ink-soft: #3a4a58;
    --muted: #677887;
    --paper: #e8eef2;
    --surface: #f7fafb;
    --border: #cfd8df;
    --primary: #1a5f4a;
    --primary-hover: #144c3b;
    --focus: #2a8f70;
    --radius: 14px;
    --shadow: 0 1px 0 rgba(20, 33, 43, 0.04),
        0 18px 40px rgba(20, 33, 43, 0.08);
    font-family: var(--font-sans);
    line-height: 1.55;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(
            165deg,
            rgba(26, 95, 74, 0.12) 0%,
            transparent 42%
        ),
        radial-gradient(
            ellipse 70% 55% at 85% 15%,
            rgba(20, 33, 43, 0.07),
            transparent 60%
        ),
        var(--paper);
}

a {
    color: var(--primary);
}

.shell {
    width: min(720px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: clamp(64px, 14vh, 120px) 72px;
}

.landing {
    padding: clamp(32px, 5vw, 48px);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    animation: rise 0.55s ease both;
}

.brand {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    animation: rise 0.6s ease 0.05s both;
}

.lead {
    max-width: 34ch;
    margin: 0 0 36px;
    color: var(--ink-soft);
    font-size: 1.05rem;
    animation: rise 0.6s ease 0.12s both;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: rise 0.6s ease 0.2s both;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    background: var(--primary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.button-ghost {
    border-color: var(--border);
    color: var(--ink);
    background: transparent;
}

.button-ghost:hover {
    background: rgba(20, 33, 43, 0.04);
}

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

.footer-note {
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    animation: rise 0.6s ease 0.28s both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing,
    .brand,
    .lead,
    .actions,
    .footer-note {
        animation: none;
    }

    .button:hover {
        transform: none;
    }
}