:root {
  --bg: #070b12;
  --bg-soft: rgba(255, 255, 255, 0.04);
  --panel: rgba(255, 255, 255, 0.06);
  --text: #f5f7fb;
  --muted: rgba(245, 247, 251, 0.72);
  --line: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --container: 1320px;
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0;font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;background: radial-gradient(circle at top, rgba(56, 83, 145, 0.22), transparent 30%), linear-gradient(180deg, #05070d 0%, #070b12 40%, #05070d 100%);color: var(--text);min-height: 100vh;overflow-x: hidden;}


#brand img{width: 250px;margin: -10px 0 0 0;float: left;}
img {display: block;max-width: 100%;}
a {color: inherit;text-decoration: none;}
.bg-orb {position: fixed;border-radius: 999px;filter: blur(80px);opacity: 0.22;pointer-events: none;z-index: 0;}
.orb-1 {width: 300px;height: 300px;background: #3f5fff;top: 8%;left: -80px;}
.orb-2 {width: 260px;height: 260px;background: #9c4dff;bottom: 10%;right: -70px;}
.hero {position: relative;z-index: 1;padding: 82px 22px 36px;}
.hero__inner {max-width: 920px;margin: 0 auto;text-align: center;}
.eyebrow {margin: 0 0 16px;font-size: 12px;letter-spacing: 0.26em;text-transform: uppercase;color: var(--muted);}
.hero h1 {margin: 0;font-size: clamp(2.7rem, 7vw, 5.6rem);line-height: 0.95;letter-spacing: -0.04em;}
.subtitle {max-width: 760px;margin: 18px auto 0;font-size: clamp(1rem, 2vw, 1.15rem);line-height: 1.7;color: var(--muted);}
.container {position: relative;z-index: 1;width: min(100% - 28px, var(--container));margin: 0 auto 70px;}
.gallery-section {background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));border: 1px solid var(--line);box-shadow: var(--shadow);backdrop-filter: blur(10px);border-radius: var(--radius-xl);padding: 18px;}
.gallery {column-count: 4;column-gap: 18px;}
.card {break-inside: avoid;margin: 0 0 18px;}
.card__link {display: block;position: relative;border-radius: var(--radius-lg);overflow: hidden;background: var(--panel);border: 1px solid rgba(255,255,255,0.06);box-shadow: 0 8px 25px rgba(0,0,0,0.18);transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;}
.card__link:hover {transform: translateY(-4px);box-shadow: 0 16px 34px rgba(0,0,0,0.28);border-color: rgba(255,255,255,0.12);}
.card__media-wrap {position: relative;}
.card__img {width: 100%;height: auto;object-fit: cover;background: rgba(255,255,255,0.03);}
.card__overlay {position: absolute;inset: 0;display: flex;align-items: end;justify-content: start;padding: 16px;background: linear-gradient(180deg, transparent 30%, rgba(4, 7, 14, 0.6) 100%);opacity: 0;transition: opacity 220ms ease;}
.card__overlay span {padding: 8px 12px;border-radius: 999px;font-size: 12px;letter-spacing: 0.08em;text-transform: uppercase;background: rgba(255,255,255,0.1);backdrop-filter: blur(8px);}


.card__link:hover .card__overlay {opacity: 1;}
.loading,
.end-message {display: flex;align-items: center;justify-content: center;gap: 12px;padding: 26px 16px 12px;color: var(--muted);}
.loading--hidden,
.end-message--hidden {display: none;}
.spinner {width: 18px;height: 18px;border-radius: 999px;border: 2px solid rgba(255,255,255,0.18);border-top-color: rgba(255,255,255,0.86);animation: spin 0.9s linear infinite;}
.sentinel {width: 100%;height: 2px;}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1180px) {
  body .gallery {column-count: 3;}
}

@media (max-width: 820px) {

  body .hero {padding-top: 64px;}
  body .gallery-section {padding: 14px;border-radius: 24px;}
  body .gallery {column-count: 2;column-gap: 14px;}
  body .card {margin-bottom: 14px;}

}

@media (max-width: 560px) {
  body .gallery {column-count: 1;}
  body .subtitle {line-height: 1.55;}
  body #brand img{display:block;margin: 0 auto;float: none;}
}