:root{
  --ink-bg-dark: #0a0a0a;
  --ink-text: #f9f9fb;
  --ink-muted: #a8acb3;
  --ink-accent: #ffd24a;       /* gold accent to match the logo */
  --ink-accent-2: #8ad9ff;     /* cool cyan for subtle highlights */
  --radius: 16px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink-text);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  
  /* MULTI-BG: overlay + graffiti wall image (root path) */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.65)),
    url('./graffiti-wall.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed; /* nice parallax feel */
}

/* Layout */
.top{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{
  font-weight:800; letter-spacing:.06em;
  font-size:22px;
}

.nav a{
  color:var(--ink-text);
  text-decoration:none;
  margin-left:18px;
  opacity:.9;
}
.nav a:hover{ opacity:1; }

.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
}
.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--ink-accent), #ff9f1a);
  color:#121212;
  font-weight:700;
}

.hero{
  min-height: 78vh;
  display:grid; place-items:center;
  text-align:center;
  padding: 10vh 18px 6vh;
}
.hero-inner{
  max-width: 780px;
}
.hero h1{
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  margin:0 0 14px 0;
}
.hero p{
  color: var(--ink-muted);
  margin:0 0 22px 0;
}

/* Panels (on semi-opaque cards) */
.panel{
  max-width: 920px;
  margin: 28px auto;
  padding: 26px 20px;
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}
.panel h2{
  margin:0 0 8px 0;
  font-size: clamp(24px, 3.5vw, 34px);
}

/* Form */
.form{
  display:grid; gap:12px;
  max-width: 560px;
}
.form input, .form textarea, .form button{
  width:100%;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f0f10;
  color:var(--ink-text);
  padding:12px 14px;
}
.form textarea{ resize: vertical; }
.tiny{ color: var(--ink-muted); font-size: 13px; }

/* Footer */
.footer{
  margin: 40px 0 20px;
  text-align:center;
  color: var(--ink-muted);
}
.socials{
  margin-top:10px;
  display:flex; gap:16px; justify-content:center;
}
.socials a{
  color: var(--ink-text);
  opacity:.9;
}
.socials a:hover{ color: var(--ink-accent); }