/* Витрина pavos.ru — фирменный стиль: глубокий зелёный, латунь, медь; Unbounded + Manrope */
:root {
  --green: #13261E; --green-deep: #0E1D16; --green-up: #1B3429; --line: #2C4A3C;
  --brass: #CFAE62; --copper: #C4733F; --cream: #EFE6D2; --sage: #A9B8A8; --dim: #6F8176;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(207, 174, 98, .10), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(196, 115, 63, .07), transparent 60%),
    var(--green);
  color: var(--cream); font: 16px/1.6 Manrope, system-ui, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.i { width: 18px; height: 18px; flex: none; }

/* шапка */
.bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px;
  max-width: 1120px; width: 100%; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-word { font: 700 1.3rem/1 Unbounded, sans-serif; letter-spacing: -.04em; color: var(--brass); }
.logo-tld { font: 500 .8rem/1 Unbounded, sans-serif; color: var(--copper); margin-left: -6px; align-self: flex-end; padding-bottom: 3px; }
.enter { display: inline-flex; align-items: center; gap: 8px; color: var(--sage); text-decoration: none; font-weight: 600;
  border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; transition: .15s; }
.enter:hover { color: var(--brass); border-color: var(--brass); }

main { flex: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 16px; }

/* первый экран */
.hero { min-height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 3vh 0 6vh; }
.hero-mark { margin-bottom: 4vh; }
.mark.big { width: clamp(96px, 14vw, 150px); height: auto; overflow: visible; }
.mark .node { transition: r .25s, fill .25s, filter .25s; transform-box: fill-box; transform-origin: center; }
.mark .node.lit { fill: var(--cream); filter: drop-shadow(0 0 8px rgba(239, 230, 210, .8)); }
.mark .node-top.lit { fill: var(--copper); filter: drop-shadow(0 0 10px rgba(196, 115, 63, .9)); }

/* анимация появления знака: грани рисуются, узлы загораются по очереди P-A-V-O-S */
.mark-anim .mark-edge { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.4s .1s ease forwards; }
.mark-anim .mark-ray { stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw .6s 1.3s ease forwards; }
.mark-anim .node { opacity: 0; animation: pop .35s ease forwards; }
.mark-anim .node[data-node="0"] { animation-delay: .2s; }
.mark-anim .node[data-node="1"] { animation-delay: .45s; }
.mark-anim .node[data-node="2"] { animation-delay: .7s; }
.mark-anim .node[data-node="3"] { animation-delay: .95s; }
.mark-anim .node[data-node="4"] { animation-delay: 1.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mark-anim .mark-edge, .mark-anim .mark-ray, .mark-anim .node { animation: none; opacity: 1; stroke-dashoffset: 0; }
}

.acro { display: grid; grid-template-columns: repeat(5, minmax(0, 12rem)); gap: 8px; justify-content: center; width: 100%; }
.acro-item { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 4px; border-radius: 16px;
  transition: background .2s; cursor: default; }
.acro-item.lit { background: rgba(207, 174, 98, .07); }
.letter { font: 700 clamp(3rem, 9.5vw, 7.5rem)/1 Unbounded, sans-serif; color: var(--brass); letter-spacing: -.03em; }
.acro-item:first-child .letter { color: var(--copper); }
.word { margin-top: 14px; font-size: clamp(.8rem, 1.5vw, 1.05rem); font-weight: 600; color: var(--cream); overflow-wrap: anywhere; }
.word-en { margin-top: 2px; font-size: clamp(.72rem, 1.2vw, .9rem); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }

/* «pavos», который распадается на английские слова */
.fly { display: flex; justify-content: center; margin-top: 4vh; font: 700 clamp(1.6rem, 3.4vw, 2.4rem)/1 Unbounded, sans-serif;
  letter-spacing: -.04em; color: var(--brass); position: relative; z-index: 2; pointer-events: none; }
.fly-w { position: relative; display: inline-block; will-change: transform;
  transition: transform 1.6s cubic-bezier(.55, 0, .2, 1); }
.fly.drift .fly-w { transition: none; }
.fly-w:first-child .fly-l { color: var(--copper); }
/* хвост слова вне потока: раскрывается, не сдвигая соседние буквы */
.fly-r { position: absolute; left: 100%; top: 0; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0;
  font-weight: 500; letter-spacing: -.02em; color: var(--cream);
  transition: max-width 1s ease, opacity .8s ease; }
.fly.out .fly-r { max-width: 12em; opacity: .92; }
.fly.out .fly-w { text-shadow: 0 2px 18px rgba(14, 29, 22, .9); }
/* без анимации (reduced motion): просто строка слов */
.fly.static { gap: .6em; flex-wrap: wrap; font-size: 1rem; letter-spacing: 0; }
.fly.static .fly-r { position: static; max-width: none; opacity: 1; }

.welcome { max-width: 580px; margin-top: 6vh; padding: 22px 28px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(14, 29, 22, .55); color: var(--sage); font-size: 1.02rem; }
.welcome p { margin: 0 0 .5em; }
.welcome p:last-child { margin: 0; }
.welcome p:first-child { color: var(--cream); font-size: 1.15rem; font-weight: 600; }

/* разделы ниже */
.section-title { display: flex; align-items: center; gap: 10px; font: 600 1.15rem Unbounded, sans-serif; color: var(--brass); margin: 0 0 18px; }
.about { max-width: 700px; font-size: 1.08rem; padding-bottom: 6vh; }
.about p { margin: 0 0 1em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: block; background: var(--green-deep); border: 1px solid var(--line); border-radius: 20px; padding: 20px;
  text-decoration: none; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--brass); transform: translateY(-2px); }
.tile { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--brass);
  color: var(--brass); background: var(--green); }
.tile .i { width: 24px; height: 24px; }
.tile .emoji { font-size: 1.4rem; width: auto; height: auto; }
.card .kind { float: right; font-size: .7rem; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.card h3 { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: 1.05rem; color: var(--cream); }
.card p { margin: 0; color: var(--sage); font-size: .95rem; }
.card .arrow { width: 15px; height: 15px; color: var(--copper); }

.links { display: flex; flex-wrap: wrap; gap: 10px; padding: 6vh 0 2vh; }
.links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 16px; text-decoration: none; color: var(--cream); }
.links a .i { width: 14px; height: 14px; color: var(--copper); }
.links a:hover { border-color: var(--brass); }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1120px; width: 100%;
  margin: 0 auto; padding: 28px 16px; color: var(--dim); font-size: .85rem; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }

/* телефон: буквы столбиком — буква слева, слова справа */
@media (max-width: 640px) {
  .hero { padding-top: 2vh; }
  .acro { grid-template-columns: auto; justify-content: center; gap: 0; }
  .acro-item { display: grid; grid-template-columns: 3.4rem auto; column-gap: 14px; align-items: center; padding: 4px 8px; text-align: left; }
  .letter { font-size: 2.6rem; grid-row: span 2; }
  .word { margin: 0; font-size: 1.05rem; }
  .word-en { margin: 0; font-size: .72rem; }
  .welcome { padding: 18px; }
  .enter span { display: none; }
}