@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#0a0a0b; --panel:#121214; --line:#29292d; --muted:#9b9ba3; --violet:#a78bfa; --emerald:#34d399; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:#f5f5f5; font-family:'Manrope',sans-serif; }
::selection { background:#a78bfa; color:#0a0a0b; }
.font-mono { font-family:'DM Mono',monospace; }
.grid-lines { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:48px 48px; }
.glow { box-shadow:0 0 80px rgba(167,139,250,.12); }
.card { background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.1); transition:.35s ease; }
.card:hover { transform:translateY(-5px); border-color:rgba(167,139,250,.7); box-shadow:0 18px 45px rgba(0,0,0,.28); }
.placeholder { position:relative; overflow:hidden; background:linear-gradient(135deg,#222127,#111114); }
.placeholder:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 72% 26%,rgba(167,139,250,.35),transparent 1%),radial-gradient(circle at 20% 80%,rgba(52,211,153,.18),transparent 1%); }
.placeholder:after { content:'VISUAL PLACEHOLDER'; position:absolute; left:1rem; bottom:1rem; font:11px 'DM Mono',monospace; letter-spacing:.15em; color:rgba(255,255,255,.01); }
.project-mark { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(3rem,8vw,8rem); font-weight:800; letter-spacing:-.1em; color:rgba(255,255,255,.84); mix-blend-mode:screen; }
.project-mark span { color:var(--violet); }
.nav-link { color:#a5a5ad; transition:color .2s; }
.nav-link:hover,.nav-link.active { color:#fff; }
.eyebrow { color:var(--emerald); letter-spacing:.16em; text-transform:uppercase; font:11px 'DM Mono',monospace; }
input,textarea { outline:none; }
input:focus,textarea:focus { border-color:var(--violet)!important; box-shadow:0 0 0 3px rgba(167,139,250,.14); }
.reveal { animation:reveal .8s both; }
@keyframes reveal { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (max-width:640px){ .grid-lines{background-size:32px 32px} }