:root {
    --background: #071426;
    --surface: #0e213a;
    --surface-muted: #142d4b;
    --text: #edf5ff;
    --muted-text: #9cb2c9;
    --primary: #4cc9f0;
    --primary-dark: #1d8db7;
    --accent: #ffb86b;
    --border: #3f668b;
    --card-border: #527fa8;
    --shadow: 0 18px 45px rgb(0 0 0 / 30%);
    --radius: 18px;
    --content-width: 1180px;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--text);
    background: var(--background);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { position: relative; margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 85% 0%, #12365a 0, transparent 32rem), var(--background); }
body::before { position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: 0.3; background-image: linear-gradient(rgb(76 201 240 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(76 201 240 / 7%) 1px, transparent 1px); background-size: 56px 56px; animation: drift-grid 24s linear infinite; content: ''; }
body::after { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: none; content: ''; }
.ambient-circle { position: fixed; z-index: 0; width: 22rem; height: 22rem; pointer-events: none; border-radius: 50%; filter: blur(86px); opacity: 0.22; }
.ambient-circle--one { top: 5%; left: 5%; background: #1675c4; animation: float-glow-one 26s ease-in-out infinite alternate; }
.ambient-circle--two { right: 8%; bottom: 4%; width: 17rem; height: 17rem; background: #2754d7; opacity: 0.18; animation: float-glow-two 31s ease-in-out infinite alternate; }
header, main { position: relative; z-index: 1; }
a { color: inherit; transition: color 180ms ease, opacity 180ms ease; }
.page-shell { width: min(100% - 2rem, var(--content-width)); margin: 0 auto; padding: 5rem 0; }
.page-intro, .placeholder-page { max-width: 700px; }
.eyebrow { margin: 0 0 1rem; color: var(--primary); font: 700 0.78rem/1.2 Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 1.25rem; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 0.98; font-weight: 500; }
.lead { max-width: 620px; margin-bottom: 2rem; color: var(--muted-text); font-size: 1.25rem; line-height: 1.6; }
.button { display: inline-block; padding: 0.8rem 1.15rem; border-radius: 999px; color: #03111f; background: var(--primary); font: 700 0.9rem/1.2 Arial, sans-serif; text-decoration: none; transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.button { box-shadow: 0 8px 20px rgb(76 201 240 / 12%); }
.button:hover, .button:focus-visible { background: var(--primary-dark); box-shadow: 0 12px 28px rgb(76 201 240 / 25%); transform: translateY(-3px) scale(1.03); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.status-message { display: grid; gap: 1rem; justify-items: center; padding: 2rem; border: 1px dashed var(--border); color: var(--muted-text); text-align: center; }
.status-message::before { width: 1.3rem; height: 1.3rem; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 800ms linear infinite; content: ''; }
.status-message--error::before { display: none; }
.status-message--error { border-color: #d67575; color: #ffb0b0; }
.reveal-card { animation: rise-in 500ms both; }
.reveal-card:nth-child(2) { animation-delay: 70ms; }
.reveal-card:nth-child(3) { animation-delay: 140ms; }
.reveal-card:nth-child(4) { animation-delay: 210ms; }
.reveal-section { animation: rise-in 650ms both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift-grid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 56px, 0); } }
@keyframes float-glow-one { from { transform: scale(0.9); } to { transform: scale(1.05); } }
@keyframes float-glow-two { from { transform: scale(0.85); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media (max-width: 600px) { .page-shell { padding: 3.5rem 0; } h1 { font-size: 3.2rem; } .lead { font-size: 1.1rem; } }