/* ==========================================================================
   ZinCo Rooftop Hub — CWF v0.8 build
   Signature: "Доказ під ногами" — the roof is the proof, not a rendering.
   Palette named from the actual site materials (zinc railings, brick
   cladding, hydrangea, foliage) — not decoration, evidence.
   ========================================================================== */

:root{
  --zinc:        #3A3D3E;
  --zinc-deep:   #232526;
  --brick:       #8B4A34;
  --brick-deep:  #6E3A28;
  --hydrangea:   #E3AEB3;
  --moss:        #4B5A3D;
  --paper:       #F3F0E9;
  --paper-dim:   #E7E1D2;
  --ink:         #1B1C1A;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'Newsreader', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --gutter: 20px;
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (min-width: 900px){
  :root{ --gutter: 48px; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font-family: inherit; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--brick);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(27,28,26,.55), transparent);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(243,240,233,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(27,28,26,.08);
}
.site-header.is-scrolled .brand-word,
.site-header.is-scrolled .brand-sub{ color: var(--ink); }
.site-header.is-scrolled .burger span{ background: var(--ink); }
.site-header.is-scrolled .nav-link{ color: var(--ink); }
.site-header.is-scrolled .lang-btn{ color: var(--ink); border-color: rgba(27,28,26,.25); }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-mark{
  width:34px; height:34px;
  background: var(--zinc-deep);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size:19px;
  border: 1px solid rgba(255,255,255,.35);
  flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-word{ font-family: var(--font-display); font-weight:600; font-size:16px; color:#fff; letter-spacing:.02em; }
.brand-sub{ font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.75); }

.nav-desktop{ display:none; align-items:center; gap:28px; }
@media (min-width: 860px){ .nav-desktop{ display:flex; } }
.nav-link{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color:#fff;
  text-decoration:none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav-link:hover{ border-color: currentColor; }

.header-right{ display:flex; align-items:center; gap:14px; }

.lang-switch{ display:flex; gap:4px; }
.lang-btn{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.05em;
  background:none;
  border:1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
  padding: 4px 7px;
  cursor:pointer;
  transition: all .2s;
}
.lang-btn.is-active{ background:#fff; color: var(--ink); border-color:#fff; }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:30px; height:30px;
  background:none; border:none; cursor:pointer; padding:0;
}
@media (min-width: 860px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; background:#fff; transition: all .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.nav-mobile{
  position: fixed; inset:0;
  background: var(--ink);
  z-index: 99;
  display:flex; flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap: 22px;
  padding: 0 32px;
  transform: translateY(-100%);
  transition: transform .35s var(--ease);
}
.nav-mobile.is-open{ transform: translateY(0); }
.nav-mobile .nav-link{ font-size: 22px; text-transform:none; font-family: var(--font-display); color: var(--paper); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 62%;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(20,20,18,.82) 0%, rgba(20,20,18,.28) 46%, rgba(20,20,18,.15) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding: 0 var(--gutter) 64px;
  width:100%;
}
.hero-title{
  font-size: clamp(2.5rem, 9vw, 5.6rem);
  max-width: 14ch;
  margin-bottom: .28em;
}
.hero-sub{
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  max-width: 46ch;
  color: rgba(255,255,255,.92);
  margin: 0 0 1.6em;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap: 10px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,.75);
}
.hero-meta span{ display:flex; align-items:center; gap:8px; }
.hero-meta span::before{ content:""; width:6px; height:6px; background: var(--hydrangea); border-radius:50%; }

.scroll-cue{
  position:absolute; bottom: 22px; left: var(--gutter);
  z-index:2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color: rgba(255,255,255,.7);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .line{ width:26px; height:1px; background: rgba(255,255,255,.7); animation: pulse-w 2.2s ease-in-out infinite; }
@keyframes pulse-w{ 0%,100%{ width:26px; } 50%{ width:10px; } }

/* ---------- Fork ---------- */
.fork{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){ .fork{ grid-template-columns: 1fr 1fr; } }

.fork-intro{
  padding: 64px var(--gutter) 28px;
  text-align:center;
  background: var(--paper);
}
.fork-intro h2{ font-size: clamp(1.6rem, 4vw, 2.3rem); max-width: 22ch; margin: 0 auto .3em; }
.fork-intro p{ max-width: 46ch; margin: 0 auto; color: rgba(27,28,26,.7); }

.fork-card{
  position:relative;
  min-height: 62vh;
  display:flex;
  align-items:flex-end;
  padding: 40px 32px;
  color:#fff;
  text-decoration:none;
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.fork-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(15,15,14,.85), rgba(15,15,14,.15) 60%);
  transition: background .35s;
}
.fork-card:hover::after{ background: linear-gradient(to top, rgba(15,15,14,.92), rgba(15,15,14,.3) 60%); }
.fork-card-inner{ position:relative; z-index:2; }
.fork-tag{ font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--hydrangea); display:block; margin-bottom:10px; }
.fork-card h3{ font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom:.3em; }
.fork-card p{ font-family: var(--font-body); max-width: 34ch; color: rgba(255,255,255,.88); margin:0 0 18px; }
.fork-cta{
  font-family: var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.fork-cta::after{ content:"→"; transition: transform .2s; }
.fork-card:hover .fork-cta::after{ transform: translateX(4px); }

/* ---------- Proof / cross-section ---------- */
.proof{
  background: var(--zinc-deep);
  color: var(--paper);
  padding: 88px 0;
}
.proof .eyebrow{ color: var(--hydrangea); }
.proof h2{ font-size: clamp(1.8rem, 4.4vw, 2.8rem); max-width: 20ch; color:#fff; }
.proof-lede{ max-width: 56ch; color: rgba(243,240,233,.78); font-size: 1.05rem; margin-bottom: 2.2em; }

.proof-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items:center;
}
@media (min-width: 900px){
  .proof-grid{ grid-template-columns: 1.05fr .95fr; gap: 64px; }
}

.section-diagram{ width:100%; height:auto; }
.layer{ cursor:pointer; transition: opacity .2s; }
.layer:hover, .layer.is-active{ opacity: .85; }
.layer-label{
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--paper);
  letter-spacing:.03em;
}
.layer-num{ font-family: var(--font-mono); font-size:10px; fill: rgba(243,240,233,.55); }

.proof-photo{ position:relative; }
.proof-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.proof-caption{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.05em;
  color: rgba(243,240,233,.6); margin-top:10px;
}

/* ---------- Section shells ---------- */
.section{ padding: 88px 0; }
.section-head{ max-width: 62ch; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.9rem, 4.6vw, 3rem); }
.section-head p{ color: rgba(27,28,26,.72); font-size: 1.08rem; }

.section--dim{ background: var(--paper-dim); }

/* ---------- Systems ---------- */
.systems-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--ink);
  margin-bottom: 56px;
}
@media (min-width: 700px){ .systems-grid{ grid-template-columns: repeat(3,1fr); } }
.system-card{
  background: var(--paper);
  padding: 32px 26px;
}
.system-card .eyebrow{ display:block; margin-bottom:14px; }
.system-card h3{ font-size: 1.3rem; margin-bottom:.4em; }
.system-card p{ color: rgba(27,28,26,.72); font-size: .98rem; }

.gallery{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--gutter);
}
@media (min-width: 700px){ .gallery{ grid-template-columns: repeat(3,1fr); } }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio: 3/4; object-fit:cover; }
.gallery figcaption{
  font-family: var(--font-mono); font-size:11px; color: rgba(27,28,26,.55);
  margin-top:8px; letter-spacing:.02em;
}
.gallery .span-2{ grid-column: span 2; }
.gallery .span-2 img{ aspect-ratio: 16/10; }

.partner-line{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(27,28,26,.15);
  display:flex; flex-wrap:wrap; gap: 22px 40px; align-items:baseline;
}
.partner-line strong{ font-family: var(--font-display); font-size:1.1rem; }
.partner-line span{ color: rgba(27,28,26,.65); font-size:.95rem; }

/* ---------- Events ---------- */
.events{ background: var(--ink); color: var(--paper); }
.events .section-head p{ color: rgba(243,240,233,.72); }
.events .eyebrow{ color: var(--hydrangea); }

.formats{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px 28px;
  margin: 36px 0 52px;
  padding:0; list-style:none;
}
@media (min-width: 700px){ .formats{ grid-template-columns: repeat(3,1fr); } }
.formats li{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  padding: 14px 0; border-top: 1px solid rgba(243,240,233,.18);
}

.events .gallery figcaption{ color: rgba(243,240,233,.55); }

.spec-row{
  display:flex; flex-wrap:wrap; gap: 40px;
  margin-top: 48px; padding-top:32px; border-top: 1px solid rgba(243,240,233,.18);
}
.spec{ min-width: 140px; }
.spec-num{ font-family: var(--font-display); font-size: 2rem; display:block; }
.spec-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: rgba(243,240,233,.6); }

/* ---------- CTA buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding: 15px 26px;
  text-decoration:none;
  border: 1px solid currentColor;
  transition: background .2s, color .2s;
}
.btn--light{ color:#fff; }
.btn--light:hover{ background:#fff; color: var(--ink); }
.btn--dark{ color: var(--ink); }
.btn--dark:hover{ background: var(--ink); color:#fff; }
.btn::after{ content:"→"; }

/* ---------- Contact ---------- */
.contact{ padding: 88px 0 60px; }
.contact-grid{
  display:grid; grid-template-columns:1fr; gap: 48px;
}
@media (min-width: 860px){ .contact-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } }

.contact-block h2{ font-size: clamp(1.9rem,4.4vw,2.8rem); max-width: 16ch; }
.addr{
  font-family: var(--font-body); font-size: 1.15rem; margin: 20px 0 28px;
}
.addr strong{ display:block; font-family: var(--font-display); font-size:1rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.3em; }

.contact-list{ list-style:none; padding:0; margin: 0 0 30px; }
.contact-list li{
  display:flex; justify-content:space-between; gap: 20px;
  padding: 14px 0; border-top: 1px solid rgba(27,28,26,.15);
  font-family: var(--font-mono); font-size: 13.5px;
}
.contact-list li:last-child{ border-bottom: 1px solid rgba(27,28,26,.15); }
.contact-list a{ text-decoration:none; border-bottom: 1px solid currentColor; }

.note{
  font-family: var(--font-mono); font-size: 12px; color: rgba(27,28,26,.55);
  border-left: 2px solid var(--brick); padding-left: 14px; margin-top: 26px;
  max-width: 46ch;
}

.contact-photos{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-photos img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; }

/* ---------- Closing ---------- */
.closing{
  position:relative;
  min-height: 62vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  background-size: cover; background-position:center;
}
.closing::after{ content:""; position:absolute; inset:0; background: rgba(20,18,16,.45); }
.closing blockquote{
  position:relative; z-index:2;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.7rem, 4.6vw, 3.2rem);
  max-width: 20ch; margin: 0 auto; padding: 0 var(--gutter);
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--zinc-deep); color: rgba(243,240,233,.75);
  padding: 48px 0 28px;
}
.footer-top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 30px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(243,240,233,.15);
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 22px; }
.footer-nav a{ font-family: var(--font-mono); font-size:12px; text-decoration:none; letter-spacing:.05em; text-transform:uppercase; color: rgba(243,240,233,.75); }
.footer-social{ display:flex; gap: 18px; }
.footer-social a{ font-family: var(--font-mono); font-size:12px; text-decoration:none; border-bottom:1px solid rgba(243,240,233,.4); }

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 14px;
  padding-top: 22px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(243,240,233,.5);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}