:root {
--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--size-1: 0.875rem;
--size-2: 1rem;
--size-3: 1.5rem;
--size-4: 2.5rem;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--accent: #CE422B;
--accent-light: #E8765F;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: var(--font);
font-size: var(--size-2);
line-height: 1.6;
}

.hero {
background: linear-gradient(135deg, #0B1B2B 0%, #12293F 60%, #1A3A57 100%);
color: #F4F7FA;
}

.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
max-width: 68rem;
margin: 0 auto;
padding: var(--space-12) var(--space-6);
}

.eyebrow {
margin: 0 0 var(--space-2);
font-size: var(--size-1);
letter-spacing: 0.08em;
text-transform: uppercase;
color: #C4D3E0;
}

.hero h1 {
margin: 0 0 var(--space-4);
font-size: var(--size-4);
line-height: 1.15;
}

.summary {
margin: 0 0 var(--space-6);
max-width: 34rem;
font-size: var(--size-3);
line-height: 1.45;
color: #DCE6EF;
}

.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-6);
padding: 0;
list-style: none;
}

.chips li {
padding: var(--space-1) var(--space-3);
border: 1px solid #3D5A73;
border-radius: 999px;
font-size: var(--size-1);
color: #C4D3E0;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-6);
}

.button {
display: inline-block;
padding: var(--space-3) var(--space-6);
border-radius: 6px;
background: var(--accent);
color: #FFFFFF;
font-weight: 600;
text-decoration: none;
}

.quiet {
color: #F4F7FA;
text-decoration: underline;
}

.hero-art {
display: block;
width: 100%;
max-width: 26rem;
height: auto;
justify-self: center;
}

.inside {
max-width: 68rem;
margin: 0 auto;
padding: var(--space-12) var(--space-6) var(--space-8);
}

.inside h2 {
margin: 0 0 var(--space-6);
font-size: var(--size-3);
}

.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}

.cards a {
display: block;
height: 100%;
padding: var(--space-4);
border: 1px solid var(--card-border);
border-radius: 8px;
text-decoration: none;
transition: transform 150ms ease, box-shadow 150ms ease;
}

.cards a:hover {
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
color: var(--accent);
}

.cards h3 {
margin: 0 0 var(--space-2);
font-size: var(--size-2);
}

.cards p {
margin: 0;
color: var(--text-muted);
}

.agents {
max-width: 68rem;
margin: 0 auto;
padding: var(--space-8) var(--space-6) var(--space-12);
}

.agents h2 {
margin: 0 0 var(--space-4);
font-size: var(--size-3);
}

.agents p {
margin: 0;
max-width: 44rem;
}

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

footer p {
max-width: 68rem;
margin: 0 auto;
padding: var(--space-6);
font-size: var(--size-1);
color: var(--text-muted);
}

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

.hero a:focus-visible {
outline-color: #F4F7FA;
}

@media (prefers-color-scheme: dark) {
body {
background: #0B1B2B;
color: #E6EDF4;
--text-muted: #A9BACB;
--card-border: #3D5A73;
}
.inside a,
.agents a,
footer a {
color: var(--accent-light);
}
.cards a:hover {
color: var(--accent-light);
}
}

@media (prefers-color-scheme: light) {
body {
background: #FFFFFF;
color: #1A2430;
--text-muted: #4A5A68;
--card-border: #C9D3DC;
}
.inside a,
.agents a,
footer a {
color: var(--accent);
}
}

@media (max-width: 720px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
}
.hero-art {
}
.cards {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 340px) {
.hero-inner,
.inside,
.agents,
footer p {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
}

@media (prefers-reduced-motion: reduce) {
.cards a {
transition: none;
}
}