/* Главная (вход) — перенос макета screen-home_v5 без изменений вида.
   Значения — только из tokens.css; здесь конструктив экрана. */

/* фон: четыре кадра-референса основателя, крестфейд. ТЕСТ, не для публикации:
   снимки чужие (Maxalto и др.), для публикации нужны свои или лицензированные. */
body{
  min-height:100vh;display:flex;flex-direction:column;color:#F4EFE6;
  position:relative;background:#2A211B;
}

.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg i{
  position:absolute;inset:0;display:block;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;animation:bgfade 40s infinite;
}
.bg i:nth-child(1){background-image:url("bg-1.jpg")}
.bg i:nth-child(2){background-image:url("bg-2.jpg");animation-delay:10s}
.bg i:nth-child(3){background-image:url("bg-3.jpg");animation-delay:20s}
.bg i:nth-child(4){background-image:url("bg-4.jpg");animation-delay:30s}

/* четыре кадра по 10 с: 2 с проявление, 8 с показ, 2 с уход */
@keyframes bgfade{
  0%{opacity:0} 5%{opacity:1} 22%{opacity:1} 27%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .bg i{animation:none}
  .bg i:nth-child(1){opacity:1}
}

/* затемнение поверх снимков — текст читается на любом кадре */
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(22,16,12,.68) 0%, rgba(22,16,12,.26) 68%, transparent 100%),
    linear-gradient(180deg, rgba(26,20,16,.78) 0%, rgba(26,20,16,.42) 32%, rgba(26,20,16,.86) 100%);
}

/* ── шапка ── */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--px);border-bottom:1px solid rgba(244,239,230,.16);
  backdrop-filter:saturate(140%) blur(6px);
}
.bar-l{display:flex;align-items:center;gap:11px}
/* знак на фотофоне — цветом бумаги, как и вся шапка */
.bar-l .mk{width:15px;height:15px;flex:none;color:rgba(244,239,230,.92)}
.bar .lab{color:rgba(244,239,230,.72);letter-spacing:.18em}
.bar-r{display:flex;align-items:center;gap:18px;font-size:13px;color:rgba(244,239,230,.9)}
.bar-r a{border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;
  font-size:12px;font-weight:500;letter-spacing:.18em}   /* PRO-метка */
.bar-r a:hover{border-bottom-color:rgba(244,239,230,.5)}
.bar .pill{border-color:rgba(244,239,230,.4);color:#F4EFE6}
.bar .pill:hover{background:#F4EFE6;border-color:#F4EFE6;color:var(--dark)}

/* ── центр ── */
.mid{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(28px,5vw,64px) var(--px) clamp(36px,7vw,88px);
}
.name{
  font-size:clamp(34px,8.4vw,124px);font-weight:500;letter-spacing:.02em;line-height:.98;
  color:#F7F3EB;margin:0 0 clamp(46px,7vw,94px);   /* имя выше строки запроса */
  text-shadow:0 2px 40px rgba(20,15,11,.35);
}

/* строка запроса */
.field{
  display:flex;align-items:stretch;width:100%;max-width:780px;margin:0 auto;text-align:left;
  background:rgba(251,250,247,.94);border:1px solid rgba(251,250,247,.5);
  transition:border-color .2s, background .2s;
}
.field:focus-within{background:#FBFAF7;border-color:#FBFAF7}
.field input{flex:1;min-width:0;padding:0 24px;min-height:66px;color:var(--ink);
  font-size:clamp(15px,1.3vw,17px)}
.field input::placeholder{color:var(--mut)}
.clip{display:flex;align-items:center;justify-content:center;width:56px;flex-shrink:0;
  border-left:1px solid var(--line);color:var(--mut);transition:.2s}
.clip:hover{color:var(--brown)}
.clip svg{width:17px;height:17px}
.send{display:flex;align-items:center;gap:10px;background:var(--dark);color:#F4EFE6;
  padding:0 clamp(20px,2.4vw,32px);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;transition:background .2s}
.send:hover{background:#120D0A}

/* приписка к скрепке: загрузки фото ещё нет */
.clip-note{display:none;margin-top:10px;font-size:12px;color:rgba(244,239,230,.72);
  max-width:52ch}
.clip-note.on{display:block}

/* что делаем — под строкой */
.what{
  margin-top:clamp(22px,2.6vw,32px);font-size:clamp(14px,1.3vw,16.5px);line-height:1.55;
  color:rgba(244,239,230,.86);max-width:780px;   /* ширина строки запроса — фраза с ней в одну колонку */
}
.what b{font-weight:500;color:#F7F3EB}
.what,.ex button{text-shadow:0 1px 14px rgba(18,13,9,.5)}

/* живые цифры базы: сколько лежит и когда обновляли */
.stat{margin-top:12px;font-size:12.5px;line-height:1.55;color:rgba(244,239,230,.66);
  max-width:52ch;text-shadow:0 1px 14px rgba(18,13,9,.5)}

.ex{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.ex button{font-size:13.5px;color:rgba(244,239,230,.88);border:1px solid rgba(244,239,230,.32);
  padding:8px 15px;background:rgba(26,20,16,.18);transition:.2s}
.ex button:hover{border-color:#F4EFE6;color:#F7F3EB}

/* ── лента поставщиков ── */
.strip{
  border-top:1px solid rgba(244,239,230,.16);background:rgba(20,15,11,.55);
  backdrop-filter:blur(6px);padding:16px 0;overflow:hidden;
}
.strip .lab{display:block;text-align:center;color:rgba(244,239,230,.5);
  letter-spacing:.2em;margin-bottom:12px;font-size:10.5px}
.track{display:flex;width:max-content;animation:slide 38s linear infinite}
.track:hover{animation-play-state:paused}
.track span{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-size:clamp(13px,1.3vw,15px);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,239,230,.82);white-space:nowrap;
}
.track i{font-style:normal;color:rgba(244,239,230,.3)}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .track{animation:none} }

@media (max-width:560px){
  body{background-attachment:scroll}
  .field{flex-wrap:wrap}
  .field input{flex:1 0 100%;min-height:58px;border-bottom:1px solid var(--line)}
  .clip{border-left:0;width:54px}
  .send{flex:1;justify-content:center;padding:17px}
  .bar .lab{display:none}  /* знак .mk остаётся */
}
.clip.on{color:var(--warn)}