/* ===== Obsidian Tower synthwave theme ===== */
:root {
--bg: #0a0014; /* almost black purple */
--panel: #140028; /* deep violet */
--text: #eae6ff; /* soft lavender */
--muted: #9a8fc0; /* muted purple-gray */
--accent: #6a4cff; /* electric violet */
--accent-2: #33d4ff; /* neon cyan */
--accent-3: #ffb347; /* glowing orange */
--accent-4: #ffe066; /* bright synth yellow */
--border: #2a1b40;
--shadow: 0 12px 40px rgba(0,0,0,.6);
--radius: 18px;
--container: 1120px;
}


body {
margin: 0;
font-family: 'Inter', 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
line-height: 1.6;
color: var(--text);
background: radial-gradient(1000px 600px at 80% -10%, rgba(106,76,255,.25), transparent 70%),
radial-gradient(800px 500px at 20% -15%, rgba(51,212,255,.2), transparent 70%),
linear-gradient(180deg, #0a0014, #1a0033 70%);
}


/* Links */
a { color: var(--accent-2); }
a:hover { color: var(--accent-3); }


/* Header */
.site-header { position: sticky; top: 0; backdrop-filter: blur(10px); background: rgba(10,0,20,.75); border-bottom: 1px solid var(--border); z-index: 50; box-shadow: var(--shadow); }
.brand { font-weight: 700; font-family: 'Orbitron', sans-serif; color: var(--accent-4); text-transform: uppercase; letter-spacing: 1px; }


.nav a { color: var(--muted); text-decoration: none; padding: 10px 14px; border-radius: 12px; transition: all .25s ease; }
.nav a:hover { color: var(--accent-2); background: rgba(106,76,255,.15); }
.nav a.active { color: var(--accent-3); background: linear-gradient(90deg, rgba(106,76,255,.25), rgba(51,212,255,.2)); border-color: rgba(106,76,255,.4); }


/* Hero */
.hero { position: relative; padding: 80px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); line-height: 1.1; margin: 0 0 16px; text-shadow: 0 0 12px rgba(106,76,255,.9), 0 0 24px rgba(51,212,255,.7); }
.hero .lead { color: var(--muted); font-size: 1.15rem; }
.hero-art img { filter: brightness(.6) contrast(1.2) saturate(1.4) hue-rotate(-10deg); opacity: .35; }
.hero-art .scrim { background: linear-gradient(180deg, rgba(10,0,20,.4), var(--bg) 80%); }


/* Buttons */
.btn { border-radius: 14px; padding: 10px 16px; border: 1px solid var(--border); font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text); box-shadow: 0 0 12px rgba(106,76,255,.5); transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 16px rgba(255,179,71,.7); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.6); }
.btn.ghost { background: transparent; color: var(--accent-4); border-color: var(--accent-4); }


/* Cards */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 0 20px rgba(255,224,102,.4); }
.card h2, .card h3 { color: var(--accent-3); text-shadow: 0 0 6px rgba(255,179,71,.5); }
.tag { background: rgba(255,224,102,.1); color: var(--accent-4); border: 1px solid rgba(255,224,102,.5); }


/* Gallery */
.tile img { transition: transform .3s ease, filter .3s ease; }
.tile:hover img { transform: scale(1.08); filter: brightness(1.2) contrast(1.2); }


/* Lightbox */
.lightbox { background: rgba(10,0,20,.9); }
.lightbox img { border: 2px solid var(--accent-2); box-shadow: 0 0 24px rgba(106,76,255,.7); }


/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 64px; padding: 32px 0; color: var(--muted); text-align: center; background: rgba(20,0,40,.6); box-shadow: inset 0 0 24px rgba(106,76,255,.2); }