/* UPSA — Ukrainian Private Space Agency.
   Scrolling page: full-width photo slider, news, about.
   Theme is dark only. The subject is space and the supplied logo is a
   dark-navy mark used here in reverse; a light mode would have nothing to say.
   One accent for the whole page: --flag-y, the yellow of the Ukrainian flag,
   used on the status tick, the active slider dot and link hovers, nowhere else.
   Shape rule: everything is square. */

:root{
  --space:    #050A16;
  --space-2:  #070E1F;
  --navy:     #0B2050;
  --navy-2:   #14306B;
  --pale:     #E8EEFA;
  --pale-70:  rgba(232,238,250,.70);
  --pale-42:  rgba(232,238,250,.42);
  --rule:     rgba(232,238,250,.16);
  --flag-b:   #3B7DD8;
  --flag-y:   #FFD400;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --f-sans: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --top-h: 4.25rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; background:var(--space);
  scrollbar-color:rgba(232,238,250,.28) var(--space);   /* Firefox + Chromium 121+ */
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--space); }
::-webkit-scrollbar-thumb{
  background:rgba(232,238,250,.28); border:3px solid var(--space); border-radius:0;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(232,238,250,.55); }
::-webkit-scrollbar-corner{ background:var(--space); }
body{
  margin:0; background:var(--space); color:var(--pale);
  font:400 1rem/1.55 var(--f-sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--pale); outline-offset:3px; }
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ max-width:74rem; margin-inline:auto; padding-inline:var(--pad); }

/* ---------- header ---------- */
.top{
  position:fixed; z-index:10; top:0; left:0; right:0;
  min-height:var(--top-h);
  display:flex; align-items:center; gap:1.2rem;
  padding:.55rem var(--pad);
  background:rgba(5,10,22,.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.brand{
  display:flex; align-items:center; gap:.8rem;
  color:var(--pale); text-decoration:none; min-width:0;
}
.brand__mark{ width:2.4rem; height:auto; flex:none; }
.brand__t{ display:flex; flex-direction:column; line-height:1.16; min-width:0; }
.brand__t b{ font:600 1.02rem/1.1 var(--f-sans); letter-spacing:.14em; }
.brand__t i{
  font-style:normal; color:var(--pale-70);
  font-size:.74rem; letter-spacing:.01em;
}
.nav{ display:flex; gap:1.3rem; margin-left:auto; }
.nav a{
  color:var(--pale-70); text-decoration:none;
  font:500 .74rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem 0; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav a:hover{ color:var(--pale); border-color:var(--flag-y); }

/* ---------- language ---------- */
.langs{ display:flex; gap:.4rem; flex:none; }
.lang{
  background:none; color:var(--pale-42); cursor:pointer; border-radius:0;
  border:1px solid transparent; padding:.44rem .62rem;
  font:500 .72rem/1 var(--f-mono); letter-spacing:.12em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.lang:hover{ color:var(--pale); }
.lang.is-on{ color:var(--pale); border-color:var(--rule); }
.lang:active{ transform:translateY(1px); }

/* ---------- hero slider ---------- */
.hero{
  position:relative; height:100svh; min-height:34rem;
  overflow:hidden; background:var(--space);
}
.hero__slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1s var(--ease);
  pointer-events:none;
}
.slide.is-on{ opacity:1; pointer-events:auto; }
.slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.05); transition:transform 8s linear;
}
.slide.is-on img{ transform:scale(1); }
/* per-slide darkening; the content sits above it */
.slide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(5,10,22,.86) 0%, rgba(5,10,22,.58) 30%, rgba(5,10,22,.14) 58%, transparent 75%),
    linear-gradient(to bottom, rgba(5,10,22,.6) 0%, transparent 26%, transparent 56%, rgba(5,10,22,.86) 100%);
}
.slide__credit{
  position:absolute; z-index:2; right:var(--pad); top:calc(var(--top-h) + 1rem);
  font:400 .68rem/1.5 var(--f-mono); letter-spacing:.08em;
  color:var(--pale-42);
}
/* news content on the slide */
.slide__body{
  position:absolute; z-index:2;
  left:var(--pad); right:var(--pad);
  bottom:calc(var(--pad) + 7.6rem);
  max-width:min(46rem, 86vw);
}
.slide__meta{ display:flex; align-items:center; gap:.9rem; margin:0 0 1.1rem; }
.slide__h{
  margin:0;
  font:600 clamp(1.8rem, 3.8vw, 3.1rem)/1.08 var(--f-sans);
  letter-spacing:-.025em; max-width:24ch;
}
.slide__h a{ color:var(--pale); text-decoration:none; }
.slide__h a:hover{
  text-decoration:underline; text-decoration-color:var(--flag-y);
  text-decoration-thickness:3px; text-underline-offset:.18em;
}
.slide__p{
  margin-top:1rem; max-width:54ch; color:var(--pale-70);
  font-size:clamp(.95rem, 1.15vw, 1.08rem);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.slide__go{ margin-top:1.3rem; display:inline-block; }
.hero__status{
  margin-top:clamp(1.2rem, 3vh, 2rem);
  display:inline-block;
  font:500 .78rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--pale);
  border:1px solid var(--rule); padding:.72rem 1.1rem;
}
.hero__status::before{
  content:""; display:inline-block; width:.5em; height:.5em;
  background:var(--flag-y); margin-right:.7em;
}

/* slider controls */
.ctl{
  width:2.6rem; height:2.6rem; cursor:pointer; border-radius:0; flex:none;
  background:rgba(5,10,22,.5); color:var(--pale);
  border:1px solid var(--rule); font:400 1rem/1 var(--f-mono);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.ctl:hover{ border-color:var(--pale-42); background:rgba(5,10,22,.8); }
.ctl:active{ transform:translateY(1px); }

/* play / pause */
.ctl--play .ctl__icon{ position:relative; display:block; width:10px; height:12px; margin:0 auto; }
.ctl--play .ctl__icon::before,
.ctl--play .ctl__icon::after{
  content:""; position:absolute; top:0; bottom:0; width:3px; background:currentColor;
}
.ctl--play .ctl__icon::before{ left:0; }
.ctl--play .ctl__icon::after{ right:0; }
.hero.is-user-paused .ctl--play .ctl__icon::before{
  width:0; background:none; top:0; bottom:0; left:1px;
  border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.hero.is-user-paused .ctl--play .ctl__icon::after{ display:none; }

/* bottom strip: all three stories as columns */
.hero__strip{
  position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:var(--pad);
  display:grid; grid-template-columns:1fr 1fr 1fr auto;
  gap:clamp(1rem, 2.5vw, 2.4rem); align-items:stretch;
}
.strip__i{
  position:relative; min-width:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  background:none; border:none; border-radius:0; padding:1rem 0 0;
  text-align:left; color:var(--pale); font:inherit;
}
.strip__k{ margin-bottom:0; }
.ctl--play{ align-self:end; }
.strip__bar{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(232,238,250,.28); display:block;
}
.strip__bar b{
  position:absolute; inset:0; background:var(--flag-y);
  transform:scaleX(0); transform-origin:left; display:block;
}
.strip__i.is-on .strip__bar b{ animation:slidebar 7s linear forwards; }
.hero.is-paused .strip__i.is-on .strip__bar b{ animation-play-state:paused; }
@keyframes slidebar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.strip__k{
  display:block; font:500 .64rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--pale-70); margin-bottom:.5rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.strip__t{
  display:block; font:600 1.02rem/1.32 var(--f-sans); letter-spacing:-.01em;
  color:var(--pale-70); transition:color .25s var(--ease);
}
.strip__t::after{
  content:"→"; display:inline-block; margin-left:.5rem;
  width:1.2rem; height:1.2rem; line-height:1.2rem; text-align:center;
  background:var(--flag-y); color:var(--space); font-size:.78rem; vertical-align:.05em;
}
.strip__i.is-on .strip__t,
.strip__i:hover .strip__t{ color:var(--pale); }

/* ---------- sections ---------- */
.sec{ padding-block:clamp(3.5rem, 9vh, 6.5rem); scroll-margin-top:var(--top-h); }
.sec + .sec{ padding-top:0; }
.sec__head{
  display:flex; align-items:baseline; gap:1.1rem;
  border-top:1px solid var(--rule); padding-top:1.1rem;
  margin-bottom:clamp(1.8rem, 4vh, 3rem);
}
.sec__no{ font:500 .78rem/1 var(--f-mono); color:var(--pale-42); letter-spacing:.14em; }
.sec__head h2{
  font:600 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--f-sans); letter-spacing:-.02em;
}

/* news: hairline grid of square cards */
.news{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.news__item{
  background:var(--space); padding:1.6rem 1.5rem 1.8rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.news__date{
  font:500 .72rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale-42);
}
.news__t{ font:600 1.18rem/1.3 var(--f-sans); letter-spacing:-.01em; }
.news__p{ color:var(--pale-70); font-size:.95rem; flex:1; }
.news__a{
  color:var(--pale); text-decoration:none; align-self:flex-start;
  font:500 .74rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--rule);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.news__a::after{ content:" →"; }
.news__a:hover{ border-color:var(--flag-y); }

/* about */
.about{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(1.6rem, 4vw, 4rem); align-items:start;
}
.about__text p{ max-width:62ch; color:var(--pale-70); }
.about__text p + p{ margin-top:1.1rem; }
.about__text p:first-child{ color:var(--pale); font-size:1.08rem; }
.about__card{
  border:1px solid var(--rule); background:var(--space-2);
  padding:2rem 1.8rem; display:flex; flex-direction:column; gap:.55rem;
}
.about__mark{ width:5.4rem; margin-bottom:1rem; }
.about__card b{ font:600 1.15rem/1.1 var(--f-sans); letter-spacing:.14em; }
.about__card i{ font-style:normal; color:var(--pale-70); font-size:.92rem; }
.about__founded{
  font:500 .72rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale-42); margin-top:.5rem;
}
.about__card .hero__status{ margin-top:1.1rem; }
.about__card .news__a{ margin-top:1.2rem; }

/* ---------- subpages ---------- */
.page{
  padding-top:calc(var(--top-h) + clamp(2.2rem, 7vh, 4.5rem));
  padding-bottom:clamp(3.5rem, 9vh, 6.5rem);
  min-height:70svh;
}
.page__head{ border-top:1px solid var(--rule); padding-top:1.1rem; margin-bottom:clamp(1.6rem, 4vh, 2.6rem); }
.page__h{
  font:600 clamp(1.9rem, 3.4vw, 2.9rem)/1.12 var(--f-sans); letter-spacing:-.02em;
  max-width:26ch;
}
.page__lead{ margin-top:1rem; max-width:56ch; color:var(--pale-70); font-size:1.08rem; }

.tag{
  display:inline-block; font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale-70); border:1px solid var(--rule); padding:.4rem .6rem; text-decoration:none;
}
a.tag{ transition:color .25s var(--ease), border-color .25s var(--ease); }
a.tag:hover{ color:var(--pale); border-color:var(--flag-y); }

/* article */
.art__meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.art{ max-width:62ch; margin-top:1.4rem; }
.art p{ color:var(--pale-70); }
.art p + p{ margin-top:1.1rem; }
.art p:first-child{ color:var(--pale); font-size:1.08rem; }
.art__links{ margin-top:2.2rem; display:flex; gap:2rem; flex-wrap:wrap; }
.art__fig{
  margin:1.8rem 0 0; max-width:56rem;
  border:1px solid var(--rule); background:var(--space-2);
}
.art__fig img{ width:100%; }
.art__fig figcaption{
  font:400 .68rem/1.5 var(--f-mono); letter-spacing:.08em; color:var(--pale-42);
  padding:.55rem .8rem; border-top:1px solid var(--rule);
}

/* news index list */
.newsl{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.newsl__row{
  display:grid; grid-template-columns:10rem 7.5rem 1fr; gap:1.4rem; align-items:start;
  padding:1.5rem 0; border-bottom:1px solid var(--rule);
  color:var(--pale); text-decoration:none;
}
.newsl__row .tag{ justify-self:start; }
.newsl__b{ min-width:0; }
.newsl__b b{ display:block; font:600 1.18rem/1.3 var(--f-sans); letter-spacing:-.01em; margin-bottom:.4rem; }
.newsl__b span{ display:block; color:var(--pale-70); font-size:.95rem; max-width:62ch; }
.newsl__row:hover b{ text-decoration:underline; text-decoration-color:var(--flag-y); text-underline-offset:.25em; }

/* section head with a trailing link */
.sec__all{ margin-left:auto; align-self:center; }

/* services grid (about page) */
.svc{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  max-width:56rem;
}

/* directions list (about page) */
.dirs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  max-width:56rem;
}
.dirs li{ background:var(--space); padding:1.4rem 1.5rem; }
.dirs b{ display:block; font:600 1.05rem/1.3 var(--f-sans); margin-bottom:.45rem; }
.dirs p{ color:var(--pale-70); font-size:.95rem; }

@media (max-width:860px){
  .newsl__row{ grid-template-columns:1fr; gap:.6rem; padding:1.2rem 0; }
  .svc, .dirs{ grid-template-columns:1fr; }
}

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--rule); padding-block:1.6rem; }
.foot__row{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  color:var(--pale-42); font-size:.85rem;
}
.foot a{
  color:var(--pale-70); text-decoration:none; border-bottom:1px solid var(--rule);
  transition:border-color .25s var(--ease);
}
.foot a:hover{ border-color:var(--flag-y); color:var(--pale); }
.foot a.foot__dev{
  display:inline-flex; align-items:center; gap:.55rem;
  border-bottom:none; text-decoration:none;
}
.foot a.foot__dev:hover{ border-bottom:none; }
.foot__dev span{
  font:500 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale-42);
}
.foot__dev img{ height:.85rem; width:auto; opacity:.72; transition:opacity .25s var(--ease); }
.foot__dev:hover img{ opacity:1; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .news{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__card{ max-width:26rem; }
}
@media (max-width:760px){
  .top{ flex-wrap:wrap; row-gap:.15rem; }
  .nav{ order:3; width:100%; gap:1.6rem; padding-top:.2rem; }
  .brand__t i{ font-size:.68rem; }
  .slide__credit{ display:none; }
  .hero{ height:88svh; }
  .slide__p{ -webkit-line-clamp:2; }
  .slide__body{ bottom:calc(var(--pad) + 4.2rem); }
  .strip__k, .strip__t{ display:none; }
  .strip__i{ padding-top:.8rem; }
}

/* ---------- smooth arrivals ---------- */
@media (prefers-reduced-motion:no-preference){
  body{ animation:page-in .45s var(--ease) both; }
  body.is-leaving{ opacity:0; transition:opacity .2s ease; }
  .rev{
    opacity:0; transform:translateY(14px);
    transition:opacity .65s var(--ease), transform .65s var(--ease);
    transition-delay:var(--rd, 0s);
  }
  .rev.in{ opacity:1; transform:none; }
  img.imgfade{ opacity:0; transition:opacity .5s var(--ease); }
  img.imgfade.ld{ opacity:1; }
}
@keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .strip__i.is-on .strip__bar b{ animation:none; transform:scaleX(1); }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .slide img{ transform:none; }
}