@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/Inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/Inter-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(fonts/Inter-800.woff2) format("woff2"); }
:root { color-scheme: dark; --bg: #0e0f11; --surface: #18191c; --text: #f4f4f5; --dim: #a9adb5; --gold: #c9cdd3; --olive: #e0313b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, system-ui, sans-serif; }
main { max-width: 920px; margin: auto; padding: 48px 24px; }
a { color: var(--olive); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.brand, .eyebrow { color: var(--gold); font-weight: 800; letter-spacing: .12em; }
h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.15; margin: 24px 0; }
h2 { font-size: 22px; line-height: 1.3; }
p { max-width: 64ch; }
.lead { color: var(--dim); font-size: 20px; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 28px 0; }
.button { display: inline-block; padding: 12px 22px; border-radius: 28px; background: #d91e2a; color: #fff; font-weight: 700; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 40px 0; }
.card { background: var(--surface); border-radius: 24px; padding: 24px; }
.card h2 { margin-top: 0; }
footer { color: var(--dim); padding-top: 24px; font-size: 14px; }
.error { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
.error main { max-width: 600px; padding: 32px 24px; }
.error h1 { font-size: clamp(28px, 6vw, 40px); }
.error picture img { display: block; width: min(240px, 100%); height: auto; margin: 0 auto; }
.error .actions { justify-content: center; }
.error p { color: var(--dim); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.provider { display: flex; gap: 12px; align-items: center; margin: 24px 0; text-decoration: none; color: var(--dim); font-size: 13px; }
.provider img, .provider-panel img { object-fit: contain; }
.provider-panel { border: 1px solid #00ffff40; border-radius: 24px; padding: 24px; margin-top: 32px; }
.aracle-motto { color: #00ffff; font-size: 24px; font-weight: 800; }