:root {
  --ink: #f7f5f4;
  --muted: #bbb9c0;
  --quiet: #9997a3;
  --bg: #0c0c11;
  --panel: #121218;
  --panel-alt: #1a1922;
  --line: #35343f;
  --accent: #ff3366;
  --font-body: 'Space Grotesk', Arial, sans-serif;
  --font-label: 'Space Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body.lightbox-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.container { width: min(100% - 64px, 1360px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 500; top: -70px; left: 16px; padding: 12px 18px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--muted); font: 400 11px/1.6 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-rule { width: 30px; height: 1px; flex: none; background: var(--accent); }

/* Navigation */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 76px; background: linear-gradient(180deg, rgba(8,8,14,.82), rgba(8,8,14,.12)); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.site-header.scrolled { background: rgba(12,12,17,.94); border-bottom-color: rgba(255,255,255,.09); box-shadow: 0 12px 38px rgba(0,0,0,.22); }
.header-inner { width: min(100% - 64px, 1360px); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 156px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.site-nav a { position: relative; padding: 10px 0; color: #d4d2d7; font: 400 11px/1.4 var(--font-label); letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--accent); transition: right .5s var(--ease); }
.site-nav a:hover { color: white; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }

/* Full-width first impression */
.hero { position: sticky; top: 0; z-index: 0; isolation: isolate; height: 100svh; min-height: 700px; overflow: hidden; background: #090b18; }
.hero-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #090b18; }
.hero-photo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,12,.5) 0%, rgba(5,5,12,.12) 36%, rgba(5,5,12,.18) 56%, rgba(5,5,12,.77) 100%), url('hero.jpg') center 43% / cover no-repeat; animation: photo-arrive 2s var(--ease) both; }
.hero-copy { position: relative; z-index: 1; height: 100%; }
.hero-copy-inner { position: relative; width: 100%; height: 100%; }
.hero-logo { position: absolute; top: 28.5%; left: 0; right: 0; width: clamp(390px, 49vw, 700px); height: auto; margin-inline: auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,.75)); animation: rise-in 1s var(--ease) both; }
.hero-message { position: absolute; left: 50%; bottom: 114px; width: min(calc(100% - 48px), 840px); text-align: center; transform: translateX(-50%); }
.hero h1 { max-width: 820px; margin: 0 auto; color: #fff; font-size: clamp(28px, 2.65vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.75); animation: rise-in 1.1s .12s var(--ease) both; }
.hero h1 span { color: #f0ecf1; }
.hero h1 .plus { color: var(--accent); }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); margin-top: 26px; animation: rise-in 1.1s .25s var(--ease) both; }
.hero-action { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; padding: 8px 2px; color: var(--ink); border-bottom: 1px solid rgba(247,245,244,.52); font: 400 11px/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.7); transition: color .3s ease, border-color .3s ease, transform .5s var(--ease); }
.hero-action:last-child { color: #d5d2da; border-bottom-color: rgba(247,245,244,.35); }
.hero-action:hover { color: white; border-color: var(--accent); transform: translateY(-2px); }
.hero-action span { font-size: 14px; transition: transform .5s var(--ease); }
.hero-action:hover span { transform: translate(2px,-2px); }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 34px; padding: 12px 22px; border: 1px solid transparent; cursor: pointer; font: 400 11px/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .5s var(--ease); }
.button:hover { transform: translateY(-3px); }
/* Sections and gallery */
.section { padding: clamp(84px, 9vw, 152px) 0; }
.gallery-section { position: relative; z-index: 2; margin-top: -56px; padding-top: clamp(96px, 10vw, 144px); border-radius: 24px 24px 0 0; background: var(--panel); box-shadow: 0 -22px 70px rgba(0,0,0,.28); }
.gallery-section::before { content: ''; position: absolute; top: 23px; left: 50%; width: 42px; height: 2px; background: var(--accent); transform: translateX(-50%); }
.signup-section, .connect-section, .site-footer { position: relative; z-index: 2; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 42px; }
.section h2 { margin: 18px 0 0; font-size: clamp(2.55rem, 5vw, 5.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.section-intro { margin: 0 0 4px; color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.gallery-item { position: relative; grid-column: span 3; overflow: hidden; aspect-ratio: 1; padding: 0; border: 0; background: #24232b; cursor: zoom-in; }
.gallery-item:nth-child(6n + 1), .gallery-item:nth-child(6n + 6) { grid-column: span 6; aspect-ratio: 2.02; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s ease; }
.gallery-item::after { content: 'VIEW ↗'; position: absolute; inset: auto 0 0; padding: 34px 18px 16px; color: white; background: linear-gradient(transparent, rgba(0,0,0,.62)); opacity: 0; transform: translateY(7px); font: 400 10px var(--font-label); letter-spacing: .14em; text-align: left; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.045); filter: brightness(.8); }
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; transform: translateY(0); }
.gallery-grid.is-collapsed .gallery-item:nth-child(n + 7) { display: none; }
.gallery-action { margin-top: 36px; text-align: center; }
.button-outline { min-width: 220px; color: var(--ink); border-color: #898691; background: transparent; }
.button-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Updates */
.signup-section { background: var(--panel-alt); border-block: 1px solid var(--line); }
.signup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 7vw, 112px); }
.signup-copy h2 { max-width: 560px; }
.signup-copy > p:last-child { margin: 26px 0 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 21px); }
.signup-embed { width: 100%; max-width: 600px; min-height: 290px; margin-inline: auto; }
.signup-embed iframe { border: 0; }

/* Connect and footer */
.connect-section { background: var(--bg); }
.connect-layout { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.connect-layout h2 { margin-bottom: 0; }
.connect-links { width: min(100%, 420px); }
.connect-links a { display: flex; align-items: center; justify-content: space-between; min-height: 62px; border-bottom: 1px solid var(--line); font-size: 17px; transition: color .3s ease, padding .5s var(--ease); }
.connect-links a:first-child { border-top: 1px solid var(--line); }
.connect-links a:hover { color: var(--accent); padding-inline: 8px; }
.connect-links a span { font: 14px var(--font-label); }
.site-footer { padding: 34px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-inner img { width: 150px; height: auto; opacity: .88; }
.footer-inner p, .footer-inner a { margin: 0; color: var(--muted); font: 400 10px/1.5 var(--font-label); letter-spacing: .05em; }
.footer-inner a { transition: color .3s ease; }
.footer-inner a:hover { color: var(--accent); }

/* Viewer */
.lightbox { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 72px 24px 24px; background: rgba(4,4,8,.96); animation: fade-in .35s ease both; }
.lightbox-image { max-width: 100%; max-height: calc(100svh - 96px); object-fit: contain; }
.lightbox-close { position: absolute; top: 12px; right: 22px; width: 48px; height: 48px; color: white; border: 0; background: transparent; cursor: pointer; font-size: 36px; line-height: 1; }

/* Motion stays quiet and never hides content without script support. */
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes photo-arrive { from { opacity: .45; transform: scale(1.055); } to { opacity: 1; transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.will-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .hero-logo { width: clamp(390px, 56vw, 610px); }
  .hero h1 { font-size: clamp(28px, 3.3vw, 36px); }
}
@media (max-width: 800px) {
  .hero { min-height: 700px; }
  .hero-logo { top: 34%; width: min(72vw, 540px); }
  .hero-message { bottom: 100px; width: min(calc(100% - 48px), 680px); }
  .hero h1 { font-size: clamp(28px, 4.3vw, 34px); }
  .gallery-item { grid-column: span 6; }
  .gallery-item:nth-child(6n + 1), .gallery-item:nth-child(6n + 6) { grid-column: span 12; aspect-ratio: 1.8; }
  .signup-layout { grid-template-columns: 1fr; gap: 36px; }
  .signup-embed { margin-inline: 0; }
  .connect-layout { align-items: start; flex-direction: column; }
}
@media (max-width: 560px) {
  html { scroll-padding-top: 64px; }
  .container, .header-inner { width: min(100% - 36px, 1360px); }
  .site-header { height: 64px; }
  .brand img { width: 112px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 9px; letter-spacing: .03em; }
  .hero { min-height: 680px; }
  .hero-photo { background: linear-gradient(180deg, rgba(5,5,12,.56) 0%, rgba(5,5,12,.1) 34%, rgba(5,5,12,.24) 52%, rgba(5,5,12,.86) 100%), url('hero.jpg') center center / cover no-repeat; }
  .hero-logo { top: 36%; width: min(87vw, 420px); }
  .hero-message { bottom: clamp(74px, 14svh, 118px); width: calc(100% - 40px); }
  .hero h1 { font-size: clamp(25px, 7.3vw, 32px); line-height: 1.17; }
  .hero-actions { gap: 20px; margin-top: 22px; }
  .hero-action { gap: 8px; font-size: 10px; }
  .button { min-height: 48px; gap: 18px; padding-inline: 16px; font-size: 10px; }
  .gallery-section { margin-top: -38px; padding-top: 90px; border-radius: 18px 18px 0 0; }
  .gallery-section::before { top: 17px; width: 34px; }
  .section { padding-block: 74px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section h2 { margin-top: 14px; }
  .section-intro { margin-top: 20px; }
  .gallery-grid { gap: 8px; }
  .gallery-item, .gallery-item:nth-child(6n + 1), .gallery-item:nth-child(6n + 6) { grid-column: span 6; aspect-ratio: .88; }
  .signup-embed { min-height: 300px; }
  .connect-layout { gap: 32px; }
  .footer-inner { flex-wrap: wrap; }
  .footer-inner img { width: 130px; }
  .footer-inner p { order: 3; width: 100%; }
}
@media (max-width: 360px) {
  .brand img { width: 96px; }
  .site-nav { gap: 9px; }
  .site-nav a { font-size: 8px; }
  .hero h1 { font-size: 24px; }
  .hero-actions { gap: 12px; }
  .hero-action { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}