/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #0f172a; background: #ffffff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }

:root{
  --ink:#0f172a;
  --muted:#475569;
  --brand:#0ea5e9;
  --bg:#ffffff;
  --card:#f8fafc;
  --ring: rgba(14,165,233,.25);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

.container{ width: min(1100px, 92%); margin-inline: auto; }

button, .btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(2,6,23,.1);
  background:#0ea5e9; color:white; padding:.9rem 1.1rem; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow);
}
.btn.secondary{ background:#ffffff; color:var(--ink); }
.btn:hover{ filter: brightness(.95); }

/* HERO */
.hero{
  position:relative; isolation:isolate; min-height: 64svh; display:grid; place-items:end;
  background: #000;
}
.hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; filter: saturate(105%) contrast(105%); }
.hero::after{content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(2,6,23,.7), transparent 60%);}
.hero .content{ position:relative; z-index:2; padding: 3rem 0; width:100%; }
.hero .card{
  display:grid; gap:.8rem; background: rgba(255,255,255,.96); border:1px solid rgba(2,6,23,.06);
  backdrop-filter: blur(6px); border-radius: var(--radius); padding: 1.2rem 1.4rem; width: fit-content;
  box-shadow: var(--shadow);
}
.hero .topline{ color:#0369a1; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
.hero h1{ margin:0; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height:1.1; }
.meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; color: var(--muted); font-size:.95rem; }
.meta strong{ color: var(--ink); }

.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.6rem; }

/* SECTIONS */
.section{ padding: 3.5rem 0; }
.section h2{ margin:0 0 1.2rem; font-size: clamp(1.4rem, 3.2vw, 2rem); }
.card{ background: var(--card); border-radius: var(--radius); padding: 1.2rem; border:1px solid rgba(2,6,23,.06); box-shadow: var(--shadow); }

/* GALLERY GRID */
.gallery{ display:grid; grid-template-columns: repeat(12, 1fr); gap: .6rem; }
.gallery a{ position:relative; overflow:hidden; border-radius: 14px; }
.gallery a img{ transition: transform .4s ease; }
.gallery a:hover img{ transform: scale(1.03); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.92); opacity:0; pointer-events:none; transition: opacity .25s ease; display:grid; place-items:center; z-index:50; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width: 92vw; max-height: 86vh; border-radius: 12px; }
.lightbox .close, .lightbox .prev, .lightbox .next{
  position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:white; width:48px; height:48px; display:grid; place-items:center; border-radius: 999px; cursor:pointer;
}
.lightbox .close{ top: 6%; right: 3%; transform: none; }
.lightbox .prev{ left: 3%; }
.lightbox .next{ right: 3%; }

/* FEATURES GRID */
.features{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.8rem; }
.feature{ background: var(--card); border-radius: 14px; padding: .9rem 1rem; border:1px solid rgba(2,6,23,.06); }

/* INFO LIST */
.info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.info .item{ background: var(--card); border-radius: 14px; padding: .9rem 1rem; border:1px solid rgba(2,6,23,.06); }
.info .item .label{ color: var(--muted); font-size:.85rem; }
.info .item .value{ font-weight:700; font-size:1.05rem; }

/* FOOTER */
.footer{ padding: 2.5rem 0; color: var(--muted); border-top:1px solid #e2e8f0; }
.footer a{ color:#0369a1; text-decoration: underline; }

/* Responsive tweaks */
@media (max-width: 680px){
  .hero .card{ width: 100%; }
}