/* ============================================================
   ВАРІАНТ 3 — «ДЕПЕША»
   Гравюра цінного паперу: гільйош, зірка як печатка,
   титул набором, стрічка-патерн із логобука (стор. 19),
   послуги як друкований зміст із крапковими лідерами.
   Дисплей — Prata, з додатнім трекінгом.
   ============================================================ */

.v3 {
  --serif: var(--serif-warm);
  background: var(--navy);
}

/* ---------- прелоадер ---------- */
.pre { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--navy); transition: opacity .8s var(--ease-out), visibility .8s; }
.pre.is-out { opacity: 0; visibility: hidden; }
.pre__inner { display: grid; justify-items: center; gap: 1.3rem; }
.pre__seal svg { width: 34px; height: 34px; fill: var(--cream); animation: seal 2.4s var(--ease-out) forwards; }
@keyframes seal { 0% { opacity: 0; transform: scale(.4) rotate(-70deg) } 55% { opacity: 1; transform: scale(1) rotate(0) } 100% { opacity: 1; transform: scale(1) rotate(0) } }
.pre__word { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .46em; text-indent: .46em; color: var(--cream-64); }

/* ---------- шапка ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 1.4rem 0; transition: transform .6s var(--ease-out), background-color .6s, padding .6s; }
.hdr.is-solid { background: rgba(22,18,64,.9); backdrop-filter: blur(14px); padding: .95rem 0; border-bottom: 1px solid var(--line-soft); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hdr__mark { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .42em; text-indent: .42em; }
/* Було майже невидимо на тлі — критик назвав це провалом контрасту, не стриманістю */
.hdr__stamp { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-64); }
.hdr__right { display: flex; align-items: center; gap: 1.4rem; }
.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__btn { display: grid; gap: 5px; width: 28px; 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(--navy); 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(.85rem,2vw,1.3rem) 0; font-family: var(--serif); font-size: clamp(1.6rem,4.4vw,3rem); letter-spacing: .015em; 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 · ТИТУЛ
   ============================================================ */

.plate {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(7rem, 14vw, 10rem) clamp(12rem, 22vw, 17rem);
}
.plate__engrave {
  position: absolute; left: 50%; top: 46%;
  width: min(115vh, 108vw); height: auto; max-width: none;
  transform: translate(-50%, -50%);
  opacity: .38; pointer-events: none;
  animation: turn 260s linear infinite;
  /* гравюра гасне під заголовком, щоб набір лишався чистим */
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 34%, #000 62%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 34%, #000 62%);
}
@keyframes turn { to { transform: translate(-50%, -50%) rotate(360deg) } }

.plate__rule { position: absolute; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.plate__rule--top { top: clamp(5.2rem, 9vw, 6.6rem); }
.plate__stamp { position: absolute; top: calc(clamp(5.2rem, 9vw, 6.6rem) + .9rem); font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-26); }
.plate__stamp--l { left: var(--gutter); }
.plate__stamp--r { right: var(--gutter); }

.plate__in { position: relative; z-index: 2; text-align: center; }
.plate__in .eyebrow { margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }

.plate__h1 {
  font-family: var(--serif); font-size: var(--t-hero); font-weight: 400;
  line-height: 1.02; letter-spacing: .02em; text-wrap: balance;
}
.plate__h1 .ln { display: block; }

.plate__lead {
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0; max-width: 30ch;
  font-size: var(--t-lead); line-height: 1.55; color: var(--cream-64); text-wrap: balance;
}
.plate__stamp { color: var(--cream-44); }

.plate__foot {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(-9rem, -13vw, -7rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
/* Зірочки між словами критик назвав елементом, що тягне B2B-адвайзера
   в бік бутикових весіль. Замінено на хейрлайн і чистий простір. */
.plate__words { display: flex; align-items: center; }
.plate__words li { font-family: var(--serif); font-size: clamp(.9375rem, 1.35vw, 1.15rem); color: var(--cream-64); letter-spacing: .02em; padding-right: clamp(1rem, 2.4vw, 1.9rem); }
.plate__words li + li { padding-left: clamp(1rem, 2.4vw, 1.9rem); border-left: 1px solid var(--line-soft); }

.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .95rem clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line-sky);
  font-size: .6875rem; letter-spacing: var(--tr-caps); text-transform: uppercase;
  transition: background-color .45s var(--ease-out), color .45s, border-color .45s;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.btn:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* Була жорстка смуга з видимим швом — читалось як помилка. Тепер кадр
   вищий і розчиняється у полі довгим градієнтом, як горизонт. */
.plate__strip { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(9rem, 20vw, 16rem); overflow: hidden; }
.plate__strip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--navy) 0%, rgba(22,18,64,.82) 34%, rgba(22,18,64,.42) 72%, rgba(22,18,64,.58) 100%);
}
.plate__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: brightness(1.35) contrast(1.08); }

/* ============================================================
   02 · СТРІЧКА
   ============================================================ */

.band { border-block: 1px solid var(--line-soft); padding-block: clamp(1.1rem, 2.2vw, 1.7rem); overflow: hidden; }
.band__row { display: flex; width: max-content; }
.band__row--b { margin-top: clamp(.5rem, 1.2vw, .9rem); }
.band__t { display: flex; align-items: center; flex: none; animation: marq 46s linear infinite; }
.band__row--b .band__t { animation: marq-r 62s linear infinite; }
.band__t span { font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 3rem); letter-spacing: .16em; color: var(--cream-26); padding-inline: clamp(.7rem, 1.6vw, 1.3rem); }
.band__t i { display: block; width: 9px; height: 9px; flex: none; background: var(--sky); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.band__t--sm span { font-family: var(--sans); font-size: clamp(.6875rem, 1vw, .8125rem); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-44); }
.band__t--sm i { width: 5px; height: 5px; }
@keyframes marq { to { transform: translateX(-100%) } }
@keyframes marq-r { from { transform: translateX(-100%) } to { transform: translateX(0) } }

/* ============================================================
   03 · ДОСЬЄ
   ============================================================ */

.dos { padding-block: var(--sec-y); }
.dos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 16rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dos__label {
  font-size: var(--t-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--sky); padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft);
}
.dos__h2 { font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; letter-spacing: .015em; margin-bottom: 1.1rem; }
.dos__col p { color: var(--cream-64); max-width: 34em; }
.dos__col p + p { margin-top: 1rem; }

.seal { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.seal__engrave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; animation: spin3 200s linear infinite; }
@keyframes spin3 { to { transform: rotate(-360deg) } }
.seal__star { position: relative; width: 26%; fill: var(--cream); }
.seal__cap { margin-top: 1rem; font-size: var(--t-small); line-height: 1.55; color: var(--cream-44); text-align: center; }

/* ============================================================
   04 · ЗМІСТ
   ============================================================ */

.toc { padding-block: var(--sec-y); border-top: 1px solid var(--line-soft); }
.toc__head { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.toc__h2 { margin-top: 1rem; font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; line-height: 1.06; letter-spacing: .018em; }

.toc__list { border-top: 1px solid var(--line-soft); }
.toc__list li { border-bottom: 1px solid var(--line-soft); }
.toc__list a {
  display: grid; grid-template-columns: 3.2rem auto minmax(2rem, 1fr) auto;
  align-items: baseline; gap: clamp(.7rem, 1.6vw, 1.3rem);
  padding: clamp(1rem, 2.1vw, 1.55rem) clamp(.6rem, 1.4vw, 1.1rem);
  transition: background-color .45s var(--ease-out), color .45s;
}
.toc__list i { font-family: var(--sans); font-style: normal; font-size: var(--t-eyebrow); letter-spacing: .16em; color: var(--cream-26); transition: color .45s; }
.toc__list span { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.85rem); letter-spacing: .015em; line-height: 1.1; }
.toc__list b {
  height: 1px; align-self: center; background-image: radial-gradient(circle, var(--cream-26) 1px, transparent 1px);
  background-size: 7px 1px; background-repeat: repeat-x; background-position: 0 0; transition: background-image .45s;
}
.toc__list em { font-style: normal; font-size: var(--t-small); color: var(--cream-44); text-align: right; transition: color .45s; }

/* «відбиток фарби»: рядок перевертається в кремовий */
.toc__list a:hover, .toc__list a:focus-visible { background: var(--cream); color: var(--navy); }
.toc__list a:hover i, .toc__list a:hover em { color: rgba(22, 18, 64, .62); }
.toc__list a:hover b { background-image: radial-gradient(circle, rgba(22,18,64,.4) 1px, transparent 1px); }

/* ---------- футер ---------- */
.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) {
  .dos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos__seal { grid-column: 1 / -1; display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
  .seal__cap { text-align: left; margin-top: 0; }
}

@media (max-width: 860px) {
  .only-wide { display: none; }
  .hdr__stamp { display: none; }

  .plate { padding-block: clamp(6.5rem, 20vw, 8rem) clamp(11rem, 34vw, 14rem); text-align: left; }
  .plate__in { text-align: left; }
  .plate__engrave { opacity: .34; width: 155vw; top: 40%; }
  .plate__lead { margin-inline: 0; }
  .plate__foot { bottom: clamp(-8.5rem, -26vw, -6.5rem); flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .plate__words { flex-wrap: wrap; }
  .plate__words li { padding-right: .85rem; }
  .plate__words li + li { padding-left: .85rem; }
  .btn { width: 100%; justify-content: space-between; }

  .dos__grid { grid-template-columns: 1fr; }
  .dos__seal { grid-template-columns: 8.5rem minmax(0, 1fr); }

  .toc__list a { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: .25rem; padding-inline: 0; }
  .toc__list b { display: none; }
  .toc__list em { grid-column: 2 / 3; text-align: left; }
  .toc__list a:hover { background: none; color: inherit; }
  .toc__list a:hover i, .toc__list a:hover em { color: var(--cream-26); }
}