/* ============================================================
   ВАРІАНТ 1 — «ПРИЛАД»
   Логіка планки Platoon: один реальний об'єкт у студійній
   порожнечі, технічна графіка поверх, нуль декору.
   Дисплейна антиква — Cormorant Garamond Light, широка,
   з ДОДАТНІМ трекінгом.
   ============================================================ */

.v1 { --serif: var(--serif-thin); }

/* ---------- прелоадер ---------- */
.pre {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--void);
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.pre.is-out { opacity: 0; visibility: hidden; }
.pre__inner { display: grid; justify-items: center; gap: 1.5rem; }
.pre__star { width: 26px; height: 26px; fill: var(--sky); animation: spin 9s linear infinite; }
.pre__word {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300;
  letter-spacing: .42em; text-indent: .42em; color: var(--cream-64);
}
.pre__bar { display: block; width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.pre__bar i { display: block; height: 100%; background: var(--sky); transform-origin: left; animation: fill 2.2s var(--ease-out) forwards; }
@keyframes fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- шапка ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 1.6rem 0;
  transition: transform .6s var(--ease-out), background-color .6s, padding .6s;
}
.hdr.is-solid { background: rgba(10, 8, 32, .82); backdrop-filter: blur(14px); padding: 1.05rem 0; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}
.hdr__lang { font-size: var(--t-small); letter-spacing: .1em; color: var(--cream-44); }
.hdr__lang span { opacity: .4; margin: 0 .25em; }
.hdr__lang em { font-style: normal; color: var(--cream); }
.hdr__mark { justify-self: center; text-align: center; }
.hdr__word {
  display: block; font-family: var(--serif); font-size: 1.32rem; font-weight: 400;
  letter-spacing: .44em; text-indent: .44em; line-height: 1;
}
.hdr__sub {
  display: block; margin-top: .42rem; font-size: .5625rem; font-weight: 300;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--cream-44);
}
.hdr__btn { justify-self: end; display: grid; gap: 5px; width: 30px; padding: 8px 0; }
.hdr__btn span { display: block; height: 1px; background: var(--cream); transition: transform .4s var(--ease-out); }
.hdr__btn[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.hdr__btn[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- меню ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--void);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-in-out);
  display: grid; place-items: center;
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__in { width: 100%; max-width: var(--maxw); padding-inline: var(--gutter); }
.menu__list li + li { border-top: 1px solid var(--line-soft); }
.menu__list a {
  display: flex; align-items: baseline; gap: 1.5rem; padding: clamp(.9rem, 2vw, 1.4rem) 0;
  font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: 300;
  letter-spacing: var(--tr-display); transition: color .4s, padding-left .5s var(--ease-out);
}
.menu__list a:hover { color: var(--sky); padding-left: 1.2rem; }
.menu__list i { font-family: var(--sans); font-size: .6875rem; font-style: normal; letter-spacing: .2em; color: var(--cream-26); }
.menu__meta { margin-top: 3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--cream-44); font-size: var(--t-small); }

/* ============================================================
   01 · HERO
   ============================================================ */

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  transform: scale(1.06);
  animation: heroIn 2.6s var(--ease-out) .25s forwards;
}
@keyframes heroIn { to { transform: scale(1) } }
/* Верх кадру тримаємо темним: небо не має бути найяскравішим на екрані */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 88% at 46% 52%, rgba(10,8,32,0) 26%, rgba(10,8,32,.78) 100%),
    linear-gradient(to bottom, rgba(10,8,32,.86) 0%, rgba(10,8,32,.30) 22%, rgba(10,8,32,.06) 38%, rgba(10,8,32,.55) 62%, rgba(10,8,32,.93) 84%, rgba(10,8,32,.97) 100%);
}

/* технічна графіка */
.hero__tech { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__tech .tech-lines line, .hero__tech .tech-lines circle {
  stroke: var(--line-sky); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke;
}
.hero__tech .tech-lines line {
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
  animation: draw 2.4s var(--ease-out) 1.1s forwards;
}
.hero__tech .tech-lines .tick { animation-duration: .8s; }
.hero__tech .dot { fill: var(--sky); stroke: none; opacity: 0; animation: fade .8s ease 2.4s forwards; }
.hero__tech text {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: .18em; fill: var(--sky); opacity: 0;
  animation: fade 1s ease 2.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes fade { to { opacity: .85 } }

/* Композиція першого екрана після другого вердикту:
   очко → заголовок → смуга можливостей у темній зоні перону.
   Нічого не лежить на освітленому борту. */
.hero__grid { position: relative; z-index: 2; }
/* Локальна підкладка під текстовою колонкою: критик показав, що очко
   світло-блакитним по освітленому фюзеляжу падає нижче межі читабельності. */
.hero__grid::before {
  content: ''; position: absolute; inset: -3rem -100vw -6rem -100vw; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,8,32,0) 0%, rgba(10,8,32,.55) 34%, rgba(10,8,32,.8) 100%);
  pointer-events: none;
}
.hero__grid > .eyebrow { margin-bottom: clamp(1rem, 2vw, 1.6rem); color: var(--cream-64); }

.hero__band {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: clamp(.8rem, 1.6vw, 1.2rem);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.hero__route {
  font-size: .625rem; letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--sky); white-space: nowrap;
}
/* Cormorant на 300 має нерівний фіт у великому кеглі — критик це побачив.
   На дисплейному розмірі беремо 400 і трохи щільніший трекінг. */
.hero__h1 {
  font-family: var(--serif); font-size: var(--t-hero); font-weight: 400;
  line-height: 0.96; letter-spacing: .004em; color: var(--cream);
  text-wrap: balance;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}
.hero__h1 .ln { display: block; }

.hero__cols { display: flex; align-items: center; }
.hero__cols li {
  font-size: .6875rem; font-weight: 400; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--cream-64);
  padding-inline: clamp(.55rem, 1.8vw, 1.5rem); white-space: nowrap;
}
.hero__cols li:first-child { padding-left: 0; }
.hero__cols li:last-child { padding-right: 0; }
.hero__cols li + li { border-left: 1px solid var(--line-soft); }

/* ============================================================
   02 · ІНСТРУМЕНТ
   ============================================================ */

.inst { position: relative; z-index: 3; padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec-y-sm); }
.inst__bar {
  display: grid; grid-template-columns: repeat(3, 1fr) auto;
  background: rgba(22, 18, 64, .78);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
}
.inst__f { padding: clamp(1.1rem, 2vw, 1.7rem) clamp(1.1rem, 2vw, 1.9rem); border-right: 1px solid var(--line-soft); }
.inst__f label {
  display: block; font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--sky); margin-bottom: .55rem;
}
.inst__f select, .inst__f input {
  width: 100%; background: none; border: 0; padding: 0; color: var(--cream);
  font-family: var(--serif); font-size: clamp(1.0625rem, 1.5vw, 1.35rem); font-weight: 400;
  letter-spacing: .015em; appearance: none; outline: none;
}
.inst__f select option { background: var(--navy); color: var(--cream); font-family: var(--sans); }
.inst__f input::placeholder { color: var(--cream-26); }
.inst__f:focus-within label { color: var(--cream); }

.inst__go {
  display: flex; align-items: center; gap: .85rem;
  padding-inline: clamp(1.4rem, 2.6vw, 2.4rem);
  font-size: .75rem; letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--navy); background: var(--cream);
  transition: background-color .4s, color .4s;
}
.inst__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.inst__go:hover { background: var(--sky); }
.inst__note { margin-top: 1.1rem; font-size: var(--t-small); color: var(--cream-44); }
.inst__scroll { display: block; width: 15px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.inst__scroll svg { width: 15px; height: 15px; fill: var(--sky); animation: spin 22s linear infinite; }

/* ============================================================
   03 · ПОЗИЦІЯ
   ============================================================ */

.pos { padding-block: var(--sec-y); }
.pos__grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pos__side .rule { display: block; margin-top: 1rem; }

.pos__h2 {
  font-family: var(--serif); font-size: var(--t-h2); font-weight: 300;
  line-height: 1.06; letter-spacing: var(--tr-display); text-wrap: balance;
}
.pos__h2 .ln { display: block; }
.pos__cols {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem);
}
.pos__cols p { color: var(--cream-64); max-width: 32em; }

.pos__facts { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.pos__facts li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem;
  padding-block: clamp(.9rem, 1.8vw, 1.35rem); border-bottom: 1px solid var(--line-soft);
}
.pos__facts b {
  font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--sky);
}
.pos__facts span { color: var(--cream-64); font-size: var(--t-small); line-height: 1.6; }

.pos__fig { position: relative; }
.pos__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pos__fig figcaption {
  margin-top: .9rem; font-size: var(--t-small); color: var(--cream-44);
  padding-left: 1.1rem; border-left: 1px solid var(--line-sky);
}

/* ============================================================
   04 · ІНДЕКС ПОСЛУГ
   ============================================================ */

.idx { padding-block: var(--sec-y) var(--sec-y); border-top: 1px solid var(--line-soft); }
.idx__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.idx__h2 {
  margin-top: 1rem; font-family: var(--serif); font-size: var(--t-h2);
  font-weight: 300; line-height: 1.05; letter-spacing: var(--tr-display);
}
.idx__grid { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.idx__list { border-top: 1px solid var(--line-soft); }
.idx__list li { border-bottom: 1px solid var(--line-soft); }
.idx__list a {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto 1.4rem;
  align-items: baseline; gap: clamp(.8rem, 2vw, 1.8rem);
  padding-block: clamp(1.05rem, 2.1vw, 1.6rem);
  transition: padding-left .55s var(--ease-out), color .4s;
}
.idx__list a:hover, .idx__list a:focus-visible { padding-left: .9rem; }
.idx__list i {
  font-family: var(--sans); font-style: normal; font-size: var(--t-eyebrow);
  letter-spacing: .16em; color: var(--cream-26); transition: color .4s;
}
.idx__list span {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.95rem);
  font-weight: 300; letter-spacing: .014em; line-height: 1.1;
}
.idx__list em {
  font-style: normal; font-size: var(--t-small); color: var(--cream-44);
  text-align: right; max-width: 22em;
}
.idx__list svg { width: 16px; height: 16px; fill: none; stroke: var(--cream-26); stroke-width: 1.1; transition: stroke .4s, transform .5s var(--ease-out); }
.idx__list .is-active i { color: var(--sky); }
.idx__list .is-active svg { stroke: var(--sky); transform: translateX(4px); }
li.is-active a { color: var(--cream); }

.idx__stage { position: sticky; top: 22vh; aspect-ratio: 4 / 5; overflow: hidden; }
.idx__stage figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.idx__stage figure.is-on { opacity: 1; }
.idx__stage img { width: 100%; height: 100%; object-fit: cover; }
.idx__stageline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-sky); }

/* ---------- футер-заглушка ---------- */
.ft { padding-block: var(--sec-y-sm); border-top: 1px solid var(--line-soft); }
.ft__in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.ft__note { font-size: var(--t-small); color: var(--cream-26); }

/* ============================================================
   МОБІЛЬНА ПАРТИТУРА — не стиснутий десктоп
   ============================================================ */

@media (max-width: 1080px) {
  .pos__grid { grid-template-columns: minmax(0, 1fr) 18rem; }
  .pos__side { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; }
  .pos__side .rule { flex: 1; margin-top: 0; }
  .idx__grid { grid-template-columns: minmax(0, 1fr) 20rem; }
}

@media (max-width: 860px) {
  /* Шапка на 390: мова і бургер в один рядок, слово по центру не тисне */
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .hdr__lang { white-space: nowrap; font-size: .75rem; }
  .hdr__word { font-size: 1.05rem; letter-spacing: .34em; text-indent: .34em; }
  .hdr__sub { display: none; }
  .only-wide { display: none; }

  .hero { min-height: 100svh; padding-bottom: clamp(3.5rem, 9vw, 5rem); }
  .hero__media img { object-position: 50% 42%; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; gap: clamp(1.6rem, 5vw, 2.4rem); }
  /* Розділювачі-зірочки на мобільному критик назвав елементом, якого немає
     на жодному іншому брейкпоінті. Замість них — тонкі хейрлайни. */
  /* Один рядок, що не ламається. Маршрутна мітка на 390 зайва. */
  .hero__band { flex-wrap: nowrap; }
  .hero__cols { width: 100%; justify-content: space-between; }
  .hero__cols li { font-size: .625rem; letter-spacing: .1em; padding-inline: 0; }
  .hero__cols li + li { border-left: 0; }
  .hero__route { display: none; }
  .hero__scroll { left: auto; right: var(--gutter); transform: none; justify-items: end; }
  .hero__scroll span { display: none; }

  .inst { margin-top: 0; padding-top: var(--sec-y-sm); }
  .inst__bar { grid-template-columns: 1fr; }
  .inst__f { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .inst__go { justify-content: space-between; padding: 1.15rem clamp(1.1rem, 4vw, 1.5rem); }

  .pos__grid { grid-template-columns: 1fr; }
  .pos__cols { grid-template-columns: 1fr; }
  .pos__facts li { grid-template-columns: 1fr; gap: .35rem; }
  .pos__fig { order: -1; }
  .pos__fig img { aspect-ratio: 4 / 3; }

  .idx__grid { grid-template-columns: 1fr; }
  .idx__stage { display: none; }
  .idx__list a { grid-template-columns: 2.6rem minmax(0, 1fr) 1.1rem; row-gap: .3rem; }
  .idx__list em { grid-column: 2 / 3; text-align: left; font-size: .8125rem; }
  .idx__list svg { grid-column: 3 / 4; grid-row: 1 / 2; align-self: center; }
}