:root{
  /* near-vantablack base blended with deep navy/blue accents */
  --vantablack: #030306; /* extremely dark base */
  --dark-blue: #07132e;  /* deep blue tone */
  --accent: #7c3aed;
  --muted: #94a3b8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;color:#e6eef8}
body{
  /* Layer a near-vantablack base with dark blue accents and subtle radial highlights */
  background-color: var(--vantablack);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(17,36,78,0.42), transparent 14%),
    radial-gradient(circle at 88% 82%, rgba(10,24,48,0.28), transparent 12%),
    linear-gradient(180deg, var(--vantablack) 0%, var(--dark-blue) 60%);
  background-blend-mode: overlay, screen, normal;
  -webkit-font-smoothing:antialiased;
}
.site{min-height:100vh;display:flex;flex-direction:column}
.hero{position:relative;display:flex;align-items:center;justify-content:center;padding:80px 20px 40px;background:linear-gradient(120deg,rgba(124,58,237,0.12),rgba(2,6,23,0.08));overflow:hidden}
.hero-inner{text-align:center;z-index:2;max-width:900px}
.title{font-size:clamp(32px,6vw,72px);margin:0 0 12px;letter-spacing:-1px}
.subtitle{color:var(--muted);margin:0 0 18px}
.cta{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--accent);color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 20px rgba(18,12,36,0.4)}
.hero-overlay{position:absolute;inset:0;opacity:0.12;background-image:radial-gradient(circle at 10% 20%, rgba(124,58,237,0.3), transparent 8%), radial-gradient(circle at 90% 80%, rgba(59,130,246,0.18), transparent 10%);filter:blur(40px)}

.gallery-section{padding:40px 20px 80px;width:100%;max-width:1100px;margin:0 auto}
.section-title{color:#cfe8ff;margin:0 0 16px;font-size:20px}
.gallery-grid{
  /* Masonry-like layout using CSS columns: tiles flow vertically into columns, preserving each image's natural height */
  column-width: 240px;
  column-gap: 12px;
  width: 100%;
}
.gallery-grid .gallery-tile{
  display: inline-block; /* required for column layout */
  width: 100%;
  margin: 0 0 12px; /* gutter between tiles vertically */
  break-inside: avoid;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.gallery-grid img{width:100%;height:auto;display:block}
.gallery-hint{text-align:center;color:var(--muted);margin-top:12px}

.footer{padding:18px 12px;text-align:center;color:var(--muted);font-size:13px;margin-top:auto}

@media(min-width:900px){.hero{padding:120px 20px}.hero-inner{padding:20px}}