:root {
  --bg: #0f1115;
  --fg: #e7e7ea;
  --muted: #a6a7ad;
  --accent: #86e1ff;
  --cta: #7df9a2;
  --card: #171923;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }

.container { width: min(1100px, 92%); margin-inline: auto; }

.site-header { background: rgba(23,25,35,0.8); position: sticky; top: 0; backdrop-filter: blur(8px); border-bottom: 1px solid #222532; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { text-decoration: none; color: var(--fg); font-weight: 700; font-size: 1.2rem; letter-spacing: .3px; }
.menu a { color: var(--fg); text-decoration: none; margin-left: 18px; }
.menu .cta { padding: 8px 14px; background: var(--cta); color: #0b0d12; border-radius: 10px; font-weight: 700; }
.brand-logo { height: 1.75em; width: auto; vertical-align: -0.5em; margin-right: 8px; }

main.container { padding: 28px 0 56px; }

h1, h2 { line-height: 1.15; }
h1 { font-size: 2.25rem; margin-top: 0; }
h2 { font-size: 1.6rem; }

.card { background: var(--card); border: 1px solid #222532; border-radius: 14px; padding: 18px; box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.hero { display: grid; gap: 18px; padding: 38px; border-radius: 18px; background: linear-gradient(180deg, #141725, #10121a); border: 1px solid #202334; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-block; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; border: 1px solid #2a2e42; }
.button.primary { background: var(--accent); color: #0b0d12; }
.button.secondary { color: var(--fg); }

a { color: var(--accent); }
p { color: var(--muted); line-height: 1.6; }

.site-footer { border-top: 1px solid #222532; padding: 26px 0; color: var(--muted); }

/* --- Responsive Nav --- */
.menu { display: flex; gap: 18px; }
.nav-toggle { display: none; background: none; border: none; color: var(--fg); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 768px) { .menu { display: none; flex-direction: column; background: var(--card); position: absolute; top: 100%; right: 0; left: 0; padding: 18px; border-top: 1px solid #222532; } .menu.open { display: flex; } .nav-toggle { display: block; } }

/* --- Hero Animations --- */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #141725, #10121a); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--accent), var(--cta), var(--accent)); background-size: 600% 600%; animation: gradientMove 15s ease infinite; opacity: 0.08; z-index: 0; }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero > * { position: relative; z-index: 1; animation: fadeUp 1s ease forwards; opacity: 0; }
.hero h1 { animation-delay: 0.1s; }
.hero p { animation-delay: 0.3s; }
.hero .cta-row { animation-delay: 0.5s; }
@keyframes fadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Cards --- */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.35); border-color: var(--accent); }

/* --- Buttons --- */
.button { transition: background 0.3s ease, transform 0.2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary:hover { background: linear-gradient(90deg, var(--accent), var(--cta)); }

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

#spider-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9999; }
#spider-canvas { width: 100%; height: 100%; display: block; }

@keyframes overlayFadeOut { to { opacity: 0; visibility: hidden; } }

/* Respect users who reduce motion */
@media (prefers-reduced-motion: reduce) { #spider-overlay { animation: none; } }