/* Проход 2 — варианты «своего красивого» поверх копии Piazza. Включаются ?fx=1,2,3,4,5 или ?fx=all (классы html.fx1…fx5).
   1 знак «26» антиквой · 2 синий из планировок + охра · 3 антиква для чисел · 4 движение · 5 табы и карусель с подписями */
.hero__sign { display: none; }
:root { --serif: 'Noto Serif Display', 'Noto Serif Georgian', 'Noto Serif Hebrew', Georgia, serif; }

/* 1 — знак */
.fx1 .hero h1 { display: none; }
.fx1 .hero__sign { display: block; font: 300 clamp(180px, 22vw, 340px)/.8 var(--serif); letter-spacing: -.05em; margin: 0 0 12px -.04em; }
.fx1 .hero__sign span { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .7); }
.fx1 .hero__sign small { display: block; font: 600 13px/1 var(--font); letter-spacing: .5em; margin: 18px 0 0 .3em; }
html.fx1[dir="rtl"] .hero__sign { direction: ltr; text-align: right; }

/* 2 — синий из планировок, охра акцентом */
.fx2 { --d0: #12243A; --d1: #182E46; --d2: #20395A; --d3: #2A4769; --w1: #F3EFE8; --t0: #182E46; --t1: #2E3F52; --cta: #B9842F; --line: rgba(24, 46, 70, .14); }
.fx2 .hdr { background: rgba(18, 36, 58, .97); }
.fx2 .hb--dark, .fx2 .lang__dd, .fx2 .burger { background: #20395A; }
.fx2 .tabs button[aria-selected="true"]::after { background: #B9842F; height: 2px; }
.fx2 .bars i { background: rgba(243, 239, 232, .55); }
.fx2 .kpi__l { color: rgba(243, 239, 232, .62); }
.fx2 .pill--fill { background: #182E46; border-color: #182E46; }
.fx2 .sticky a { background: #B9842F; }
.fx2 .fld input[type=range] { accent-color: #182E46; }
.fx2 .hero::after { background: linear-gradient(180deg, rgba(18,36,58,.2) 0%, rgba(18,36,58,.35) 45%, rgba(18,36,58,.85) 100%), linear-gradient(90deg, rgba(18,36,58,.55) 0%, rgba(18,36,58,0) 60%); }

/* 3 — антиква для чисел */
.fx3 .kpi__v, .fx3 .card__n, .fx3 .out__n, .fx3 .rows dd.big, .fx3 .tile b, .fx3 .sticky b, .fx3 .col__p, .fx3 .step__n { font-family: var(--serif); font-weight: 300; letter-spacing: 0; }
.fx3 .kpi__v { font-size: 30px; line-height: 40px; }
.fx3 .card__n { font-size: 64px; }
.fx3 .out__n { font-size: 96px; }
.fx3 .rows dd.big { font-size: 30px; }
.fx3 .tile b { font-size: 20px; line-height: 24px; }
.fx3 .step__n { font-size: 34px; line-height: 1; color: inherit; letter-spacing: 0; }
.fx3 .sticky b { font-size: 26px; letter-spacing: 0; }
.fx3 .col__n { font: 300 34px/1 var(--serif); letter-spacing: 0; }

/* 4 — движение: проявление блоков и медленный наезд на рендер */
.fx4 .hero__img { animation: fxkb 16s ease-out both; transform-origin: 50% 30%; }
@keyframes fxkb { from { transform: scale(1.1); } to { transform: scale(1); } }
.fx4 .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.fx4 .rv.is-in { opacity: 1; transform: none; }
.fx4 .hero__in > * { animation: fxup .9s ease both; }
.fx4 .hero__in > *:nth-child(2) { animation-delay: .1s; } .fx4 .hero__in > *:nth-child(3) { animation-delay: .2s; }
.fx4 .hero__in > *:nth-child(4) { animation-delay: .3s; } .fx4 .hero__in > *:nth-child(5) { animation-delay: .4s; }
@keyframes fxup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx4 .hero__img, .fx4 .hero__in > * { animation: none; } .fx4 .rv { opacity: 1; transform: none; } }

/* 5 — табы с плавной сменой плана, карусель с подписями и точками */
.fx5 .type { animation: fxfade .5s ease both; }
@keyframes fxfade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.car__cap { display: none; }
.fx5 .car__cap { display: block; inset-inline: 0; bottom: 0; padding: 40px 20px 16px; font-size: 14px; background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0)); text-shadow: none; }
.car__dots { display: none; }
.fx5 .car__dots { display: flex; gap: 6px; position: absolute; z-index: 3; inset-inline-end: 20px; bottom: 18px; }
.fx5 .car__dots i { width: 22px; height: 2px; background: rgba(255, 255, 255, .45); }
.fx5 .car__dots i.is-on { background: #fff; }
.fx5 .tabs button { transition: color .3s; }
.fx5 .tabs button::after { content: ''; position: absolute; inset-inline: 50%; bottom: -1px; height: 1px; background: currentColor; transition: inset .35s ease; }
.fx5 .tabs button[aria-selected="true"]::after { inset-inline: 0; }

/* 1 — первый экран по 111 W 57 (Лев 01.10): синий фон, знак «26» слева, дом справа, без текста и кнопок.
   Подзаголовок, слоган и кнопки — во вступлении под первым экраном. */
.intro { display: none; }
.tbar { display: none; }
.hero__down { display: none; }
.fx1 .hero { background: var(--d1); height: 100vh; height: 100svh; max-height: none; min-height: 620px; }
.fx1 .hero__img { inset-inline-start: auto; inset-inline-end: 0; width: 56%; object-position: 50% 16%; }
.fx1 .hero::after { background: linear-gradient(90deg, var(--d1) 0%, var(--d1) 44%, rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%); }
html.fx1[dir="rtl"] .hero::after { background: linear-gradient(270deg, var(--d1) 0%, var(--d1) 44%, rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%); }
.fx1 .hero__in > :not(.hero__sign) { display: none; }
.fx1 .hero__in.c { max-width: none; margin: 0; justify-content: center; padding: 0 0 0 max(40px, calc((100vw - 1200px) / 2)); }
html.fx1[dir="rtl"] .hero__in.c { padding: 0 max(40px, calc((100vw - 1200px) / 2)) 0 0; }
.fx1 .hero__sign { display: block; font: 300 clamp(220px, 27vw, 480px)/.78 var(--serif); letter-spacing: -.05em; margin: 0; }
.fx1 .hero__sign small { margin-top: 26px; font-size: 14px; letter-spacing: .6em; }
html.fx1[dir="rtl"] .hero__sign { direction: ltr; text-align: right; }
.fx1 .hero__cap { inset-inline-start: auto; inset-inline-end: 20px; }
.fx1 .hero__down { display: grid; place-items: center; position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); width: 40px; height: 40px; color: #fff; opacity: .8; }
.fx1 .hero__down:hover { opacity: 1; }
/* шапка первого экрана: только «Меню» и одна контурная кнопка */
.fx1 .tbar { display: flex; position: fixed; inset: 0 0 auto; z-index: 51; justify-content: space-between; align-items: center; padding: 22px max(20px, 1.4vw); color: #fff; pointer-events: none; opacity: 0; transition: opacity .3s; }
.fx1.at-top .tbar { opacity: 1; pointer-events: auto; }
.fx1.at-top .hdr { opacity: 0; pointer-events: none; }
.fx1 .hdr { transition: opacity .3s; }
.tbar__menu { display: flex; align-items: center; gap: 16px; background: none; border: 0; cursor: pointer; color: #fff; font: 500 14px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.tbar__cta { display: inline-flex; align-items: center; gap: 30px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .7); color: #fff; text-decoration: none; font: 500 14px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.tbar__cta:hover { background: rgba(255, 255, 255, .1); }
html[dir="rtl"] .tbar__cta svg { transform: scaleX(-1); }
.fx1 .drawer { inset: 0; padding-top: 90px; z-index: 52; }
.fx1.at-top .drawer.is-open ~ * .tbar { opacity: 1; }
/* вступление */
.fx1 .intro { display: block; background: #fff; padding: 80px 0 72px; }
.intro__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.intro__k { font: 500 13px/16px var(--font); text-transform: uppercase; letter-spacing: 1.5px; color: var(--t2); margin: 0 0 12px; }
.intro__h { font: 300 40px/52px var(--font); margin: 0 0 8px; color: var(--t0); max-width: 760px; }
.intro__s { font: 300 20px/28px var(--font); margin: 0; color: var(--t1); }
.intro__b { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .fx1 .hero { height: 100svh; min-height: 560px; }
  .fx1 .hero__img { width: 100%; height: 100%; object-position: 62% 20%; }
  .fx1 .hero::after, html.fx1[dir="rtl"] .hero::after { background: linear-gradient(0deg, var(--d1) 0%, rgba(24,46,70,.75) 28%, rgba(24,46,70,0) 55%); }
  .fx1 .hero__in.c, html.fx1[dir="rtl"] .hero__in.c { justify-content: flex-end; padding: 0 20px 84px; }
  .fx1 .hero__sign { font-size: 46vw; }
  .tbar__cta { gap: 12px; font-size: 12px; }
  .tbar__cta span { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx1 .intro { padding: 48px 0; }
  .intro__h { font-size: 28px; line-height: 38px; }
  .intro__b { width: 100%; } .intro__b .pill { flex: 1; padding: 0 16px; }
}
.fx1.at-top .fab { opacity: 0; pointer-events: none; }
.fab { transition: opacity .3s; }