:root {
    color-scheme: light;
    --ink: #172033;
    --muted: #687386;
    --line: #e7ebf1;
    --paper: #f7f9fc;
    --brand: #1769e0;
    --brand-dark: #0d4fb3;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

.page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.hero {
    width: min(760px, 100%);
    padding: 64px 0;
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(36px, 7vw, 68px);
    line-height: 1.08;
    letter-spacing: 0;
}

.intro {
    max-width: 560px;
    margin: 26px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.primary {
    color: var(--white);
    background: var(--brand);
}

.primary:hover {
    background: var(--brand-dark);
}

.secondary {
    color: var(--ink);
    border-color: var(--line);
    background: var(--white);
}