:root { --bg: #0b0b0c; --fg: #e8e8ea; --muted:#8b8b94; --accent:#74c0fc; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a { color: var(--accent); text-decoration: none; }
nav { display:flex; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid #222; align-items:center; }
nav .brand { font-weight:700; letter-spacing:.3px; }
.container { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
.card { background:#121214; border:1px solid #1f1f23; border-radius: 14px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn { display:inline-block; padding:.7rem 1rem; border-radius:10px; background:#1a1a1e; border:1px solid #2a2a30; color:var(--fg); cursor:pointer; }
.btn:hover { border-color:#3a3a44; }
.input { width:100%; padding:.75rem 1rem; border-radius:10px; border:1px solid #2a2a30; background:#0f0f12; color:var(--fg); }
.center { text-align:center; }
.meme { position: relative; }
.meme img { width:100%; border-radius:14px; border:1px solid #1f1f23; }
.meme .text { position:absolute; left:50%; transform:translateX(-50%); text-align:center; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.meme .line1 { top:12%; font-size: clamp(20px, 5vw, 44px); font-weight:800; }
.meme .line2 { top:22%; font-size: clamp(14px, 3.5vw, 24px); color: var(--accent); }
.hero { position:relative; overflow:hidden; border-radius:14px; }
.hero::before {
  content:""; position:absolute; inset:0;
  background: url("/assets/images/stabu81.jpg") center/cover no-repeat;
  filter: blur(4px) brightness(.5);
  transform: scale(1.05);
}
.hero .inner { position:relative; padding: 5rem 1.5rem; }
h1, h2 { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.grid { display:grid; gap:1rem; }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
.alert { color:#ff6b6b; text-align:center; }
#map { height: 480px; width: 100%; }

/* Hero two-column layout with image on the right */
.hero .inner { position: relative; padding: 3.5rem 1.5rem; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr min(40vw, 420px);
  align-items: center;
  gap: 2rem;
}
.hero-copy { z-index: 1; }
.hero-img { z-index: 1; justify-self: end; }
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;       /* keeps it neat; change if you like */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #1f1f23;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: block;
}

/* Stack on smaller screens */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-img { justify-self: start; margin-top: 1rem; }
}