/* Shared styles for every page except the homepage: design tokens, base, primary menu, footer, buttons.
   Page-specific layout stays in each page's own <style>. Keep the homepage menu (index.html) visually in step by hand. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #070D1A; --surface: #0C1528; --card: #0F1B30; --border: #1A2E4A; --border-hi: #254060;
  --text: #EEF2FF; --text-2: #7B8DB8; --text-3: #7387B0; --blue: #3B82F6; --blue-hi: #60A5FA; --cyan: #22D3EE;
  --radius: 12px; --max-w: 1100px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--card); color: var(--text); border: 1px solid var(--border-hi); border-radius: 6px; padding: 10px 16px; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Primary menu */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 40px; height: 68px; display: flex; align-items: center; justify-content: space-between; background: rgba(7,13,26,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav-wordmark-top { font-size: 15px; font-weight: 700; color: var(--text); }
.nav-wordmark-sub { font-size: 9px; font-weight: 400; letter-spacing: 0.22em; color: var(--cyan); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-cta { font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 8px 20px; border: 1px solid var(--border); border-radius: 6px; }
.nav-cta:hover { color: var(--text); border-color: var(--border-hi); background: var(--card); }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; width: 36px; height: 36px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-2); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
nav.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(7,13,26,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 16px 24px 24px; flex-direction: column; z-index: 99; }
.nav-mobile-menu a { font-size: 16px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--border); }
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover, .nav-mobile-menu a[aria-current] { color: var(--text); }
nav.menu-open .nav-mobile-menu { display: flex; }
@media (max-width: 900px) { nav { padding: 0 24px; } .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } }

/* Buttons */
.btn-primary { display: inline-block; padding: 12px 26px; background: #2563EB; color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px; text-decoration: none; }
.btn-primary:hover { background: #1D4ED8; }
.btn-secondary { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.btn-secondary:hover { color: var(--text); }
.btn-secondary::after { content: '\2192'; transition: transform .2s; }
.btn-secondary:hover::after { transform: translateX(3px); }

/* Footer */
footer { padding: 28px 40px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-left, .footer-right { font-size: 12px; color: var(--text-3); }
.footer-right { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-right a { color: var(--text-3); text-decoration: none; }
.footer-right a:hover { color: var(--text-2); }
@media (max-width: 900px) { footer { padding: 24px; } }