/* Load design tokens once so the page remains easy to theme later. */
:root {
    --color-ink: #03070d;
    --color-surface: #07111e;
    --color-cyan: #16a9ff;
    --color-cyan-bright: #5fcaff;
    --color-gold: #ffb83f;
    --color-cream: #f9f6ed;
    --color-muted: #9eabb9;
    --line: rgba(150, 211, 255, .22);
    --font-display: 'Orbitron', Arial, sans-serif;
    --font-body: 'Barlow', Arial, sans-serif;
    --shadow-neon: 0 0 0 1px rgba(73, 186, 255, .55), 0 0 20px rgba(0, 157, 255, .44), inset 0 0 13px rgba(21, 159, 255, .18);
    --container: min(1120px, calc(100% - 48px));
}

/* Remove browser inconsistencies before component-specific styles are applied. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--color-ink); background: var(--color-cream); font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Keep screen-reader-only text available without showing it on the canvas. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; transform: translateY(-160%); padding: 10px 14px; color: #000; background: #fff; border-radius: 4px; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

/* Build the reusable CTA variants used by navigation, hero and modal actions. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border: 1px solid transparent; border-radius: 5px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, .navigation__link:focus-visible, .modal__close:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
.button--primary { color: #fff; background: linear-gradient(135deg, #0078df, #00a8ff); box-shadow: var(--shadow-neon); }
.button--primary:hover { background: linear-gradient(135deg, #0089fa, #36b8ff); }
.button--outline { color: #fff; background: rgba(4, 12, 22, .55); border-color: rgba(255, 184, 63, .7); }
.button--outline:hover { border-color: var(--color-gold); background: rgba(255, 184, 63, .12); }
.button--large { min-height: 48px; padding-inline: 22px; font-size: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #303b46; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color .2s ease, transform .2s ease; }
.text-link:hover { color: #008fe7; transform: translateX(3px); }
.text-link--light { color: #fff; }
.eyebrow { display: inline-block; color: #b8780e; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .2em; line-height: 1.4; background-color: #fff1de; padding: 5px; border-radius: 7px; }
.eyebrow--light { color: var(--color-gold); background: none; padding: 0 }
.eyebrow--dark { color: black; background: var(--color-gold); padding: 5px; border-radius: 7px; }
.section-heading { max-width: 670px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: 9px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 29px); font-weight: 700; letter-spacing: .025em; line-height: 1.3; }
.section-heading > p:last-child { max-width: 560px; margin-top: 12px; color: #60707e; font-size: 17px; }
.section-heading--center > p:last-child { margin-inline: auto; }

/* Respect operating-system reduced-motion preferences without removing content. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tighten global spacing on phones before page-specific adaptations apply. */
@media (max-width: 600px) {
    :root { --container: min(100% - 36px, 1120px); }
    .button--large { width: 100%; }
}