/* Главная, вариант B «Колода на столе» (концепция Армана).
   Крем — «стол», секции — цветные плиты-карты из мини-аппа «Колода».
   Подключается вместе с home-a.css (переиспользуем .ha-faq, .ha-bridge, reveal). */

/* ——— Hero: веер карт + заголовок ——— */
.hb-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:84px 0 30px}
/* hyphens:none — каждая .line здесь заранее подобранная короткая фраза (не абзац),
   перенос слога сломал бы композицию (напр. «НОЧЬЮ» → «НО-» / «ЧЬЮ» на узких экранах) */
.hb-hero h1{position:relative;z-index:2;font-family:var(--display);font-weight:800;font-size:clamp(38px,min(7vw,11svh),104px);line-height:.98;letter-spacing:-.03em;margin:0;text-transform:uppercase;hyphens:none;overflow-wrap:normal}
.hb-hero h1 .line{display:block;overflow:hidden}
/* чёрный текст остаётся чёрным везде (как было и как понравилось). Лёгкое кремовое
   свечение вокруг букв невидимо на кремовом фоне и поднимает контраст ровно там,
   где под текстом оказывается тёмная/цветная карта — без угадывания, какая именно строка туда попадёт. */
.hb-hero h1 .line>span{display:inline-block;text-shadow:0 0 14px var(--bg),0 0 14px var(--bg),0 0 22px var(--bg),0 0 22px var(--bg);transform:translateY(112%);animation:hbRise .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:.4s}
.hb-hero h1 .line:nth-child(2)>span{animation-delay:.5s}
.hb-hero h1 .line:nth-child(3)>span{animation-delay:.6s}
@keyframes hbRise{to{transform:translateY(0)}}
.hb-hero .lead,.hb-hero .ha-dateline,.hb-hero .ha-hero-cta{position:relative;z-index:2}
.hb-hero .lead{margin-top:20px;font-size:clamp(16px,1.7vw,20px)}

/* веер из 5 карт */
.hb-fan{position:absolute;top:50%;right:clamp(-40px,2vw,80px);transform:translateY(-56%);z-index:1;pointer-events:none;width:clamp(280px,30vw,460px);aspect-ratio:1}
.hb-fcard{position:absolute;top:50%;left:50%;width:clamp(120px,13vw,200px);aspect-ratio:280/380;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;
  color:#f0ebe1;font-family:var(--display);font-weight:800;text-align:center;
  box-shadow:0 24px 50px -22px rgba(22,20,15,.5);
  transform:translate(-50%,-50%);opacity:0;
  animation:hbFan .8s cubic-bezier(.34,1.4,.64,1) forwards}
.hb-fcard b{font-size:clamp(18px,2vw,28px);line-height:1.05}
.hb-fcard span{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.hb-fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.hb-fcard:nth-child(1){background:#1A1714;color:#C9A227;--r:-16deg;--x:-120%;animation-delay:0s}
.hb-fcard:nth-child(2){background:#2549B0;--r:-8deg;--x:-60%;animation-delay:.07s}
.hb-fcard:nth-child(3){background:#DF4F27;--r:0deg;--x:0%;animation-delay:.14s}
.hb-fcard:nth-child(4){background:#1F5D4C;--r:8deg;--x:60%;animation-delay:.21s}
.hb-fcard:nth-child(5){background:#5B3FD4;--r:16deg;--x:120%;animation-delay:.28s}
@keyframes hbFan{
  from{transform:translate(-50%,-50%) rotate(0) translateX(0);opacity:0}
  to{transform:translate(-50%,-50%) rotate(var(--r)) translateX(var(--x));opacity:1}
}
@media(max-width:900px){
  .hb-fan{position:relative;top:auto;right:auto;transform:none;width:100%;height:190px;aspect-ratio:auto;margin-top:26px;order:3}
  .hb-fcard{top:40%;width:118px}
  .hb-fcard:nth-child(1),.hb-fcard:nth-child(5){display:none}
  .hb-fcard:nth-child(2){--x:-95%}.hb-fcard:nth-child(4){--x:95%}
}

/* ——— Marquee «лента из карт» ——— */
.hb-mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hb-mq .track{display:flex;gap:40px;width:max-content;padding:16px 0;animation:hbMq 34s linear infinite}
.hb-mq span{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,32px);white-space:nowrap}
.hb-mq .c1{color:#DF4F27}.hb-mq .c2{color:#2549B0}.hb-mq .c3{color:#5B3FD4}.hb-mq .c4{color:#1F5D4C}
.hb-mq:hover .track{animation-play-state:paused}
@keyframes hbMq{to{transform:translateX(-50%)}}

/* ——— Колода плит (sticky-стопка) ——— */
.hb-deck{position:relative}
.hb-plate{position:sticky;border-radius:26px;margin:0 clamp(8px,1.5vw,22px) 20px;padding:clamp(44px,6vw,84px) 0;color:#f0ebe1;overflow:hidden}
.hb-plate:nth-of-type(1){top:14px}
.hb-plate:nth-of-type(2){top:28px}
.hb-plate:nth-of-type(3){top:42px}
.hb-plate:nth-of-type(4){top:56px}
.hb-plate:nth-of-type(5){top:70px}
.hb-orange{background:#DF4F27}
.hb-blue{background:#2549B0}
.hb-violet{background:#5B3FD4}
.hb-green{background:#1F5D4C}
.hb-inkcard{background:#1A1714}
.hb-plate .idx{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.hb-plate h2{color:#f0ebe1;font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,60px);margin:12px 0 10px}
.hb-plate .sub{color:rgba(240,235,225,.85);max-width:60ch}
@media(max-width:768px){.hb-plate{position:relative;top:auto !important}}
@media (prefers-reduced-motion: reduce){.hb-plate{position:relative;top:auto !important}}

/* ——— Кейсы: горизонтальный ряд карт ——— */
.hb-cases-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 4px 10px;scrollbar-width:none}
.hb-cases-row::-webkit-scrollbar{display:none}
.hb-case{flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start;background:#faf6ee;color:#16140f;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.hb-case:hover{transform:translateY(-10px) rotate(1.2deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.45)}
.hb-case img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block}
.hb-case .cb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.hb-case .tag{color:#DF4F27;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hb-case h3{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;margin:0}
.hb-case p{color:#79715f;font-size:13.5px;line-height:1.45;margin:0}
.hb-case .note{font-size:11.5px;color:#9c9484;border:1px solid var(--line);border-radius:100px;padding:3px 10px;align-self:flex-start}
.hb-case .flag{margin-top:auto;font-weight:700;font-size:13.5px;color:#DF4F27}
.hb-swipe-hint{font-size:13px;color:rgba(240,235,225,.7);margin-top:12px}

/* ——— Услуги на синей плите ——— */
.hb-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.hb-svc .card{background:#faf6ee;color:#16140f;border:0;border-radius:18px;padding:24px;position:relative;overflow:hidden}
.hb-svc .card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px}
.hb-svc .card:nth-child(1)::before{background:#DF4F27}
.hb-svc .card:nth-child(2)::before{background:#5B3FD4}
.hb-svc .card:nth-child(3)::before{background:#1F5D4C}
.hb-svc .card:nth-child(4)::before{background:#1A1714}
.hb-svc h3{font-size:19px;margin:6px 0 8px}
.hb-svc p{color:#79715f;font-size:14.5px;line-height:1.5}
.hb-svc .go{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;color:#DF4F27}

/* ——— Цифры на фиолетовой ——— */
.hb-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-top:20px}
.hb-nums b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(44px,6.5vw,96px);line-height:1}
.hb-nums span{display:block;margin-top:8px;color:rgba(240,235,225,.75);font-size:14.5px}

/* ——— Процесс на зелёной: «сдали руку» ——— */
.hb-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:26px}
.hb-step{background:#faf6ee;color:#16140f;border-radius:18px;padding:22px;opacity:0;transform:translateY(40px) rotate(-2deg);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s}
.hb-step:nth-child(even){transform:translateY(40px) rotate(2deg)}
.hb-step.in{opacity:1;transform:none}
.hb-step:nth-child(2).in{transition-delay:.12s}
.hb-step:nth-child(3).in{transition-delay:.24s}
.hb-step:nth-child(4).in{transition-delay:.36s}
.hb-step .n{font-family:var(--display);font-weight:800;font-size:30px;color:#1F5D4C}
.hb-step h3{margin:8px 0 6px;font-size:18px}
.hb-step p{color:#79715f;font-size:14px;line-height:1.5}
.hb-paylegal{margin-top:26px;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,235,225,.8)}

/* ——— Манифест на чёрно-золотой ——— */
.hb-inkcard .kicker{color:#C9A227}
.hb-inkcard .kicker::before{background:#C9A227}
.hb-manifest p{font-size:clamp(17px,2vw,22px);line-height:1.6;color:rgba(240,235,225,.9);max-width:760px}

/* ——— Финальный CTA — оранжевая карта закрывает колоду ——— */
.hb-final{background:#DF4F27;border-radius:26px;margin:20px clamp(8px,1.5vw,22px) 40px;padding:clamp(56px,8vw,110px) 0;text-align:center;color:#f0ebe1;overflow:hidden;position:relative}
.hb-final .ghostline{position:absolute;top:50%;left:0;transform:translateY(-50%);font-family:var(--display);font-weight:800;font-size:15vw;white-space:nowrap;color:#f0ebe1;opacity:.07;pointer-events:none;animation:hbMq 60s linear infinite;width:max-content}
.hb-final h2{position:relative;color:#f0ebe1;font-size:clamp(36px,6.5vw,88px);font-weight:800}
.hb-final p{position:relative}
.hb-final .btns{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hb-final .btns .btn{font-size:clamp(16px,1.7vw,19px);padding:clamp(16px,2.2vw,24px) clamp(26px,3.2vw,42px);background:#f0ebe1;border-color:#f0ebe1;color:#16140f}
.hb-final .btns .btn:hover{background:#16140f;border-color:#16140f;color:#f0ebe1}
.hb-final .fast{margin-top:20px;color:rgba(240,235,225,.8);font-size:14px}

@media (prefers-reduced-motion: reduce){
  .hb-hero h1 .line>span{animation:none;transform:none}
  .hb-fcard{animation-duration:0s}
  .hb-mq .track,.hb-final .ghostline{animation:none}
  .hb-step{opacity:1;transform:none;transition:none}
}