:root{
  --bg:#0b0b0b; --text:#f7f7f7; --muted:#cfcfcf;
  --card:#141414; --accent:#ffd200; --brand:#ff2d55;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}

/* Top bar */
.nav{
  position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.brand{font-weight:900;letter-spacing:.4px}
.brand span{color:var(--brand)}
.nav ul{list-style:none;display:flex;gap:8px}
.nav a{padding:8px 12px;border-radius:999px;color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}

/* Hero */
.hero{
  min-height:60vh;display:grid;place-items:center;text-align:center;padding:80px 18px 30px;
  background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.6)),
   url('https://th.bing.com/th/id/OIP.HimWSoZASQHKlaSxefTRBwHaEL?w=285&h=180&c=7&r=0&o=7&cb=12&dpr=1.3&pid=1.7&rm=3');
  background-size:cover;background-position:center
}
.hero h1{font-size:clamp(2rem,6vw,3.3rem);font-weight:900;line-height:1.05}
.hero p{margin-top:10px;color:var(--muted)}
.pill{margin-top:14px;display:inline-block;background:rgba(255,255,255,.12);
  padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px}

/* Section shell */
.wrap{max-width:1100px;margin:0 auto;padding:26px 18px}

/* Gallery */
.heading{text-align:center;margin-top:10px}
.heading h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:8px}
.heading p{color:var(--muted)}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:18px
}
.gallery-item{position:relative;overflow:hidden;border-radius:14px;background:var(--card);
  border:1px solid rgba(255,255,255,.08)}
.gallery-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.04)}
.caption{
  position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.5);
  padding:4px 8px;border-radius:999px;font-size:.85rem
}

/* About + Contact cards */
.cards{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.card h3{margin-bottom:6px}
.contact a{color:#fff;text-decoration:underline}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{background:#222;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:.85rem}

/* Modal */
.modal{
  display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);
  padding:80px 16px 16px
}
.modal.open{display:block}
.modal-content{display:block;margin:0 auto;max-width:min(1100px,92vw);max-height:78vh;object-fit:contain;border-radius:10px}
.close{
  position:fixed;top:14px;right:18px;font-size:40px;color:#f1f1f1;font-weight:800;cursor:pointer;line-height:1
}
.meta{text-align:center;color:var(--muted);margin-top:10px;font-size:.95rem}

footer{text-align:center;color:var(--muted);padding:30px 18px;border-top:1px solid rgba(255,255,255,.08);margin-top:24px}

@media (max-width:900px){.cards{grid-template-columns:1fr}}