/* Красная Звезда — сайт-визитка.
   Тихая роскошь: тёмно-синяя гамма, красный акцент, немного золота,
   левое выравнивание, шахматная вёрстка, абстрактная графика. */

:root{
  --ink:#0A1220;
  --ink-2:#0C1524;
  --ink-3:#101B2C;
  --paper:#EDEFF3;
  --paper-dim:#8D97A8;
  --paper-faint:#5A6478;
  --red:#B0122B;
  --gold:#C0A265;
  --line:rgba(237,239,243,.09);
  --line-2:rgba(237,239,243,.16);
  --maxw:1280px;
  --serif:"Times New Roman",Times,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.frame{max-width:var(--maxw); margin:0 auto; padding:0 48px}

/* ═══ Заглавный блок ═══ */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:linear-gradient(155deg,#0A1220 0%,#0E1A2C 62%,#0A1220 100%);
}
.hero-art{
  position:absolute; inset:0; pointer-events:none;
  opacity:.55;
}
.hero-art svg{width:100%; height:100%}
.hero-art .ring circle{fill:none; stroke:rgba(237,239,243,.09); stroke-width:1}
.hero-art .hatch path{stroke:rgba(192,162,101,.16); stroke-width:1; fill:none}
.hero-art .dot-gold{fill:var(--gold)}

.hero-frame{
  position:relative; z-index:1;
  min-height:88vh; display:flex; flex-direction:column;
  padding-top:38px; padding-bottom:38px;
}
.hero-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12vh;
}
.hero-logo{display:flex; align-items:center; gap:14px}
.star{width:34px; height:34px; fill:var(--red); flex:0 0 auto}
/* Знак в два ряда: «ЗВЕЗДА» встаёт ровно под «КРАСНАЯ».
   Слова разной длины, поэтому ширину выравниваем разрядкой — значения
   подобраны под Times/Georgia и проверены замером, расхождение < 0.5px.
   Правите шрифт или кегль — перепроверьте, иначе ряды разъедутся. */
.hero-wordmark{
  display:inline-flex; flex-direction:column; gap:3px;
  font-family:var(--serif); font-size:13px; line-height:1;
  text-transform:uppercase; color:var(--paper);
}
.hero-wordmark b,
.hero-wordmark i{
  display:block; font-weight:400; font-style:normal;
  /* разрядка добавляется и после последней буквы — гасим отступом справа */
  margin-right:calc(-1 * var(--ls));
}
.hero-wordmark b{--ls:.34em; letter-spacing:var(--ls)}
.hero-wordmark i{--ls:.5901em; letter-spacing:var(--ls)}
.hero-meta{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-faint);
}

.hero-mid{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center}
.hero-kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:30px;
}
.offer{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,4.6vw,60px); line-height:1.16; letter-spacing:-.015em;
  max-width:16em;
}
.offer em{font-style:normal; color:var(--gold)}
.hero-rule{display:flex; align-items:center; gap:0; margin:38px 0 26px}
.hero-rule i{display:block; width:96px; height:2px; background:var(--red)}
.hero-rule::after{content:''; flex:1; height:1px; background:var(--line)}
.hero-descr{color:var(--paper-dim); font-size:17px; max-width:600px}

.hero-index{
  display:flex; gap:52px; flex-wrap:wrap;
  padding-top:10vh; border-top:1px solid var(--line); margin-top:10vh;
}
.hero-index a{
  display:flex; align-items:baseline; gap:12px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); transition:color .25s;
}
.hero-index a span{
  font-family:var(--serif); font-size:12px; letter-spacing:.1em; color:var(--gold);
}
.hero-index a:hover{color:var(--gold)}
.hero-index a:hover span{color:var(--paper)}

/* ═══ Манифест ═══ */
.manifest{padding:104px 48px 96px}
.lede{
  margin:0 0 52px; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.6vw,42px); line-height:1.28; letter-spacing:-.01em;
  max-width:900px;
}
.manifest-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:52px;
  padding-top:36px; border-top:1px solid var(--line);
}
.manifest-cols p{margin:0; color:var(--paper-dim)}
.closing{
  margin:56px 0 0; padding-left:26px; border-left:2px solid var(--red);
  font-family:var(--serif); font-size:21px; line-height:1.6; color:var(--paper);
}

/* ═══ Направления — шахматная вёрстка ═══ */
.areas{
  max-width:var(--maxw); margin:0 auto; padding:0 48px;
  border-top:1px solid var(--line);
}
.area{
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line);
}
.area:nth-child(even){background:var(--ink-2)}
.area-text{padding:80px 48px 80px 0}
.area-rev .area-text{order:2; padding:80px 0 80px 48px}
.area-rev .area-art{order:1; border-left:0; border-right:1px solid var(--line)}
.area-idx{
  font-family:var(--serif); font-size:13px; letter-spacing:.28em;
  color:var(--gold); margin-bottom:18px;
}
.area h2{
  margin:0 0 20px; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.2vw,38px); letter-spacing:-.01em;
}
.area p{margin:0; color:var(--paper-dim)}
.area-meta{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:28px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-faint);
}
.area-art{
  border-left:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  padding:48px; min-height:380px;
}
.area-art svg{width:100%; max-width:380px; height:auto}
.area-art .ring circle,
.area-art .lattice polygon,
.area-art .grid path{fill:none; stroke:rgba(237,239,243,.13); stroke-width:1}
.area-art .wave path{fill:none; stroke:rgba(176,18,43,.42); stroke-width:1.2}
.area-art .link path{fill:none; stroke:rgba(176,18,43,.55); stroke-width:1.4}
.area-art .grid path{stroke:rgba(237,239,243,.13)}
.area-art .node circle{fill:rgba(237,239,243,.62)}
.area-art .drop{fill:none; stroke:var(--gold); stroke-width:1.2}
.area-art .dot-gold{fill:var(--gold)}
.area-art .dot-gold[fill="none"]{stroke:var(--gold); stroke-width:1.2}

/* ═══ Факты — шахматная сетка ═══ */
.facts{
  max-width:var(--maxw); margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:56px;
  border-bottom:1px solid var(--line);
}
.fact{padding:60px 0}
.fact b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:34px; letter-spacing:-.01em; color:var(--paper);
}
.fact b::after{
  content:''; display:block; width:34px; height:1px;
  background:var(--gold); margin:16px 0 14px;
}
.fact span{display:block; font-size:13px; line-height:1.65; color:var(--paper-faint)}

/* ═══ Принципы ═══ */
.creed{padding:96px 48px 104px}
.creed-line{
  display:flex; align-items:baseline; gap:24px;
  font-family:var(--serif); font-size:22px; line-height:1.55;
  color:var(--paper-dim); padding:22px 0;
}
.creed-line + .creed-line{border-top:1px solid var(--line)}
.creed-line i{
  font-style:normal; font-family:var(--sans); font-size:11px;
  letter-spacing:.2em; color:var(--gold); flex:0 0 auto;
}

/* ═══ Контакт ═══ */
.contact{border-top:1px solid var(--line); background:var(--ink-2)}
.contact-frame{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:48px; flex-wrap:wrap; padding-top:72px; padding-bottom:72px;
}
.contact-label{
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.contact-mail{
  font-family:var(--serif); font-size:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line-2); padding-bottom:6px;
  transition:border-color .25s, color .25s;
}
.contact-mail:hover{border-bottom-color:var(--gold); color:var(--gold)}
.contact-legal{
  font-size:12px; line-height:1.9; color:var(--paper-faint); text-align:right;
}

/* ═══ Адаптив ═══ */
@media (max-width:900px){
  .frame{padding:0 26px}
  .hero-frame{min-height:auto; padding-top:28px; padding-bottom:56px}
  .hero-top{padding-bottom:64px}
  .hero-index{gap:26px; flex-direction:column; padding-top:48px; margin-top:56px}
  .manifest{padding:72px 26px 64px}
  .manifest-cols{grid-template-columns:1fr; gap:26px}
  .closing{font-size:19px}
  .area{grid-template-columns:1fr}
  .areas{padding:0 26px}
  .area-text,
  .area-rev .area-text{order:1; padding:52px 0 36px}
  .area-art,
  .area-rev .area-art{
    order:2; border:0; border-top:1px solid var(--line);
    padding:32px 0 52px; min-height:auto;
  }
  .area-art svg{max-width:260px}
  .facts{grid-template-columns:repeat(2,1fr); padding:0 26px; gap:32px; max-width:none}
  .fact{padding:40px 0}
  .creed{padding:72px 26px 80px}
  .creed-line{font-size:19px; gap:16px}
  .contact-frame{flex-direction:column; align-items:flex-start; padding:56px 26px}
  .contact-legal{text-align:left}
}

/* ═══════════ Движение ═══════════
   Сдержанное: длинные плавные кривые, без прыжков.
   Уважает системную настройку «уменьшить движение». */

/* Появление блоков при скролле */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.16,.8,.24,1) var(--d,0ms),
             transform 1s cubic-bezier(.16,.8,.24,1) var(--d,0ms);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none}

/* Появление графики: плавно, целиком — без хрупких трюков с обводкой */
.area-art svg{
  transition:opacity 1.2s ease .18s,
             transform 1.2s cubic-bezier(.16,.8,.24,1) .18s;
}
.reveal .area-art svg{opacity:0; transform:scale(.98)}
.reveal.in .area-art svg{opacity:1; transform:none}

/* Ячейки таблицы в графике цифрового контура */
.area-art .cells rect{fill:rgba(192,162,101,.13); stroke:rgba(192,162,101,.45); stroke-width:1}

/* Вход шапки при загрузке */
@keyframes riseIn{
  from{opacity:0; transform:translateY(22px)}
  to{opacity:1; transform:none}
}
@keyframes lineIn{
  from{opacity:0; transform:scaleX(0)}
  to{opacity:1; transform:none}
}
.hero-top,
.hero-kicker,
.offer,
.hero-descr,
.hero-index{
  animation:riseIn 1.1s cubic-bezier(.16,.8,.24,1) both;
}
.hero-top{animation-delay:.05s}
.hero-kicker{animation-delay:.20s}
.offer{animation-delay:.32s}
.hero-rule{transform-origin:left center; animation:lineIn 1.2s cubic-bezier(.16,.8,.24,1) .52s both}
.hero-descr{animation-delay:.62s}
.hero-index{animation-delay:.76s}

/* Кольца в шапке — очень медленное дыхание */
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-14px,10px,0) scale(1.035)}
}
.hero-art{animation:drift 26s ease-in-out infinite alternate}

/* Плавность мелких состояний */
.fact b::after{transition:width .8s cubic-bezier(.16,.8,.24,1) .25s}
.reveal .fact b::after{width:0}
.reveal.in .fact b::after{width:34px}
.creed-line{transition:color .4s ease}
.creed-line:hover{color:var(--paper)}
.creed-line:hover i{color:var(--red)}
.area-meta span{transition:color .4s ease}
.area:hover .area-meta span{color:var(--paper-dim)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{opacity:1; transform:none; transition:none}
  .hero-top,.hero-kicker,.offer,.hero-descr,.hero-index,.hero-rule{animation:none; opacity:1; transform:none}
  .hero-art{animation:none}
  .area-art svg{opacity:1 !important; transform:none !important}
}