:root{
  --bg:#0f172a;
  --accent:#06b6d4;
  --card:#0b1220;
  --muted:#94a3b8;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background-image: url('/assets/background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; color:#e6eef6}
.site-overlay{background:rgba(2,6,23,0.55);min-height:100vh}
.container{max-width:1000px;margin:0 auto;padding:24px}
.site-header{background:#071933}
.site-header .container{display:flex;align-items:center;justify-content:space-between;position:relative;padding:33px 29px;padding-left:84px}
.logo{position:fixed;left:16px;top:12px;height:44px;z-index:60}
.nav{position:fixed;right:16px;top:12px;height:44px;z-index:70;display:flex;gap:16px;align-items:center;justify-content:flex-end}
.brand{position:fixed;left:84px;top:12px;font-weight:700;letter-spacing:0.2px;font-size:26px;height:44px;line-height:44px;z-index:61}
.brand-silverwing{color:#cbd5e1}
.brand-arts{color:#7dd3fc;margin-left:6px}
.nav a{color:#cfeff6;margin:0;text-decoration:none;padding:6px 8px;display:flex;align-items:center;height:100%}
.hero{background:linear-gradient(90deg,var(--accent),#7c3aed);padding:36px;border-radius:8px;margin-top:18px;color:#022; color: #041122}
.hero h1{margin:0;font-size:28px}
.card-grid{background:var(--card);padding:18px;border-radius:8px;margin-top:18px}
.card-grid h2{margin:0 0 8px 0}
.contact{background:var(--card);padding:18px;border-radius:8px;margin-top:18px}
.contact form{display:grid;gap:12px}
.contact label{display:flex;flex-direction:column}
.contact input,.contact textarea{padding:8px;border-radius:6px;border:1px solid #123}
.contact button{background:var(--accent);border:none;padding:10px 14px;border-radius:6px;color:#001}
#site-footer{margin-top:28px;padding:18px;text-align:center;color:var(--muted)}
.site-footer{margin-top:28px;padding:18px;text-align:center;color:#ffffff}
#year{color:#ffffff;font-weight:600}
@media(min-width:700px){
  .card-grid{display:flex;gap:18px}
  .card-grid > *{flex:1}
}

@media(max-width:699px){
  .site-header .container{padding:25px 21px;padding-left:64px}
  .logo{left:12px;top:10px;height:40px}
  .brand{left:72px;top:10px;font-size:18px;height:40px;line-height:40px}
  /* Pin nav to top on small screens and match mobile brand height */
  .nav{position:fixed;right:12px;top:12px;height:40px;transform:none}
}