:root{
  --pink:#ff4dc4;
  --orange:#ff9a3c;
  --coral:#ff5e62;
  --logo-box:#23272f;
  --logo-ink:#f3f4f7;
}

/* Base text + background */
html, body { height:100%; margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
body{ background:#0b0b0f; color:#fff; }

/* Utility: visually hidden */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Swirl background canvas (home only) */
#fx{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; }

/* Sticky header */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(10,12,16,0.55); border-bottom:1px solid rgba(255,255,255,0.08); backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px); }
.nav-wrap{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }
.brand{ font-weight:800; letter-spacing:.03em; color:#f5f7fb; text-decoration:none; }
.nav-links a{ color:#f5f7fb; text-decoration:none; margin-left:18px; font-weight:600; opacity:.92 }
.nav-links a:hover{ opacity:1 }
.nav-links a:focus-visible{ outline:2px solid #FFC83D; outline-offset:2px; border-radius:8px }
.nav-links a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }

/* Subtle top fade for contrast */
.top-fade{ position:fixed; left:0; top:0; width:100%; height:140px; background:linear-gradient(180deg,rgba(10,12,16,0.6) 0%,rgba(10,12,16,0.3) 45%,rgba(10,12,16,0) 100%); z-index:10; pointer-events:none; }

/* Generic main container */
main{ max-width:1200px; margin:0 auto; padding:24px 16px; position:relative; z-index:30; }

/* Content links (keep readable on dark bg) */
main a{ color:#9fd1ff; }
main a:hover{ color:#d2e9ff; text-decoration:underline; }
/* Fallback for pages without <main> */
body > a{ color:#9fd1ff; }
body > a:hover{ color:#d2e9ff; text-decoration:underline; }

/* Hero (home) */
.hero{ position:relative; z-index:30; display:grid; place-items:start center; min-height:72vh; padding-top:6vh; padding-bottom:16vh; }
#logo{ display:block; width:min(78vw,900px); max-width:900px; height:auto; margin:10vh auto 1.25vh; z-index:35; pointer-events:none; }
.hero-copy{ text-align:center; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.hero-copy h1{ margin:6px 0 10px; font-weight:700; letter-spacing:.02em; font-size:clamp(22px,4.2vw,36px); }
.hero-copy p{ margin:0 auto 10px; max-width:760px; font-size:clamp(15px,2.4vw,20px); }
.btn-cta{ display:inline-block; padding:10px 16px; border-radius:10px; background:rgba(255,255,255,0.12); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.btn-cta:hover{ background:rgba(255,255,255,0.18); }
.btn-cta:focus-visible{ outline:2px solid #FFC83D; outline-offset:2px; }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,0.08); background:rgba(10,12,16,0.55); backdrop-filter:saturate(120%) blur(8px); }
.footer-wrap{ max-width:1200px; margin:0 auto; padding:16px; color:#cfd3dc; font-size:14px; display:flex; align-items:center; justify-content:space-between; }

/* Mobile header handling */
@media (max-width:720px){
  .nav-wrap{ padding:8px 12px; }
  .brand{ font-size:14px; }
  .nav-links{ display:flex; gap:14px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:14px; white-space:nowrap; }
}

/* Reduced motion: hide swirl */
@media (prefers-reduced-motion: reduce){
  #fx{ display:none !important; }
}