:root { color-scheme: light; --bg: #f4efe7; --panel: #fffaf2; --text: #1f1f1f; --muted: #71685f; --accent: #c06a2f; --line: rgba(31,31,31,.12); }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, sans-serif; background: linear-gradient(180deg, #f7f0e7, #efe7dc); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:28px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--muted); margin: 0 0 8px; }
h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); }
.nav { display:flex; gap:16px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.card { background: rgba(255,255,255,.65); border: 1px solid var(--line); backdrop-filter: blur(12px); border-radius: 18px; padding: 18px 20px; box-shadow: 0 12px 36px rgba(0,0,0,.06); }
.card span { display:block; font-size:.78rem; color: var(--muted); margin-bottom: 6px; }
.card strong { font-size:1rem; word-break: break-word; }
.block { margin-top: 18px; }
.muted { color: var(--muted); }
.table .row { display:flex; gap:16px; justify-content:space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .shell { width: min(100% - 20px, 1120px); } }