/* Headora.ai — первый экран: живая стена видео (работы моделей и тренды) + строка запроса по центру, как у ChatGPT/Runway.
   Стену заполняет showcase.js, строку запроса — main.js. Ровно один экран на десктопе. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:calc(100vh - 69px);min-height:calc(100svh - 69px);
  padding-block:clamp(32px,6vh,72px);overflow:clip;background:var(--bg)}

/* ---------- Стена видео ---------- */
.hero-wall{--gap:14px;position:absolute;inset:-60px -24px;z-index:-2;display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:var(--gap);
  opacity:0;transition:opacity 1.4s ease}
.hero-wall.on{opacity:1}
.hw-col{min-width:0}
.hw-col:nth-child(even){margin-top:-38%}
.hw-track{display:grid;gap:var(--gap);padding-bottom:var(--gap);will-change:transform;animation:hw-up var(--dur,90s) linear infinite;animation-delay:var(--delay,0s)}
.hw-col:nth-child(even) .hw-track{animation-name:hw-down}
.hero.is-off .hw-track{animation-play-state:paused}
@keyframes hw-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes hw-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.hw-tile{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#15151B}
.hw-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Затемнение: центр почти чёрный (текст читается), края — видео видно; сверху и снизу — растворение в фон */
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 52% 58% at 50% 50%,rgba(10,10,13,.94) 0%,rgba(10,10,13,.86) 45%,rgba(10,10,13,.5) 78%,rgba(10,10,13,.38) 100%),
  radial-gradient(ellipse 40% 30% at 50% 58%,rgba(59,130,246,.16),transparent 70%),
  linear-gradient(180deg,var(--bg) 0%,rgba(10,10,13,.25) 16%,rgba(10,10,13,.25) 76%,var(--bg) 100%)}

/* ---------- Содержимое ---------- */
.hero-in{position:relative;display:grid;justify-items:center;gap:clamp(16px,2.4vh,24px);max-width:1040px;text-align:center}
.hero-pill{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:6px 16px 6px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(19,19,24,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:500 12px/1.2 var(--f-mono);letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero-pill > i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(59,130,246,.6);animation:hp-pulse 2.4s ease-out infinite}
.hero-pill .hp-sep{color:var(--dim)}
@keyframes hp-pulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.55)}70%,100%{box-shadow:0 0 0 8px rgba(59,130,246,0)}}

.hero h1{font-size:clamp(40px,5.4vw,80px);line-height:.98;letter-spacing:-.045em;max-width:19ch;overflow-wrap:normal;word-break:normal;hyphens:manual;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
html:is([lang="kk"],[lang="uz"],[lang="ky"],[lang="tg"],[lang="tk"]) .hero h1{font-size:clamp(34px,4.6vw,68px);max-width:21ch}
.hero-sub{max-width:58ch;text-wrap:balance;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:rgba(255,255,255,.72)}

/* ---------- Строка запроса ---------- */
.ask{width:min(720px,100%);margin-top:clamp(4px,1vh,10px);display:grid;gap:8px;padding:16px 14px 12px 20px;border-radius:26px;text-align:left;
  background:linear-gradient(180deg,rgba(28,28,36,.82),rgba(18,18,24,.82));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.6),0 0 80px rgba(59,130,246,.14);transition:border-color .25s,box-shadow .25s}
.ask:focus-within{border-color:rgba(59,130,246,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.6),0 0 0 4px rgba(59,130,246,.16),0 0 90px rgba(59,130,246,.22)}
.ask textarea{display:block;width:100%;min-height:58px;max-height:200px;padding:4px 6px 0 0;border:0;background:transparent;resize:none;color:var(--text);
  font:500 clamp(16px,1.3vw,18px)/1.55 var(--f-body);caret-color:var(--accent);scrollbar-width:thin}
.ask textarea:focus,.ask textarea:focus-visible{outline:none}
.ask textarea::placeholder{color:rgba(255,255,255,.46);opacity:1}
.ask-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ask-auto{display:inline-flex;white-space:nowrap;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);font:600 13px/1 var(--f-body);color:rgba(255,255,255,.8);cursor:default}
.ask-auto svg{width:15px;height:15px;color:var(--accent)}
.ask-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 6px 22px rgba(59,130,246,.45);transition:transform .2s,background .2s,box-shadow .2s}
.ask-send svg{width:20px;height:20px}
.ask-send:hover{background:#2F74EA;box-shadow:0 8px 30px rgba(59,130,246,.6);transform:translateY(-1px)}
.ask-send:active{transform:scale(.95)}

/* ---------- Чипы возможностей ---------- */
.hero-caps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:940px}
.cap{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 13px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(19,19,24,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,.84);
  font:500 14px/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.cap svg{flex:none;width:16px;height:16px;color:var(--accent)}
.cap:hover{border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.12);color:#fff}

/* ---------- Цифры: главный акцент первого экрана ---------- */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(900px,100%);margin-top:clamp(2px,.8vh,8px);border-radius:22px;
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(24,24,31,.62),rgba(14,14,19,.62));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 60px rgba(0,0,0,.45)}
.hstat{position:relative;display:grid;justify-items:center;align-content:center;gap:8px;padding:clamp(12px,1.8vh,20px) 12px;text-decoration:none;color:inherit;
  border-radius:inherit;transition:background .25s}
.hstat + .hstat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.hstat:hover{background:rgba(59,130,246,.07)}
.hstat:hover .hstat-l{color:#fff}
.hstat-n{display:inline-flex;align-items:baseline;font:700 clamp(44px,4.4vw,68px)/.95 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:linear-gradient(115deg,#3B82F6 0%,#8FB8FF 45%,#FFFFFF 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(59,130,246,.38))}
.hstat-n i{font-style:normal;font-size:.62em;margin-left:.04em;transform:translateY(-.12em)}
.hstat-l{font:500 11.5px/1.25 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;transition:color .25s}

/* ---------- Доверие и магазины ---------- */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:clamp(2px,1vh,10px)}
.hero-stores{display:flex;gap:8px}
@media (min-width:861px) and (max-height:979px){.hero-trust{display:none}}
.hero-stores .store{height:46px;gap:10px;padding-inline:14px 16px;border-radius:12px;color:var(--text);background:rgba(10,10,13,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-stores .store svg{width:20px;height:20px}
.hero-stores .store small{font-size:10px;line-height:1.1}
.hero-stores .store b{font-size:14.5px;line-height:1.2}

/* ---------- Адаптив ---------- */
@media (max-height:760px) and (min-width:861px){
  .hero h1{font-size:clamp(38px,5vw,66px)}
  .ask textarea{min-height:48px}
}
@media (max-width:860px){
  .hero{padding-block:40px 48px}
  .hero-wall{--gap:10px;inset:-40px -30px}
  .hw-tile{border-radius:12px}
}
@media (max-width:600px){
  .hero{padding-block:28px 40px}
  .hero-in{gap:16px}
  .hero-pill{font-size:10.5px;gap:7px;padding:6px 12px 6px 11px;letter-spacing:.04em}
  .hero h1,html:is([lang="kk"],[lang="uz"],[lang="ky"],[lang="tg"],[lang="tk"]) .hero h1{font-size:clamp(30px,9.4vw,40px);max-width:none}
  html:is([lang="uz"],[lang="ky"],[lang="tg"],[lang="tk"]) .hero h1{font-size:clamp(26px,8vw,34px)}
  .hero-sub{font-size:15.5px}
  .ask{padding:14px 10px 10px 16px;border-radius:22px}
  .ask textarea{min-height:52px;font-size:16px}
  /* Чипы — одна строка с горизонтальной прокруткой до краёв экрана */
  .hero-caps{flex-wrap:nowrap;justify-content:flex-start;max-width:none;width:calc(100% + 32px);margin-inline:-16px;padding-inline:16px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:16px}
  .hero-caps::-webkit-scrollbar{display:none}
  .cap{height:36px;font-size:13.5px}
  .hero-trust{gap:14px;width:100%}
  /* Цифры — сетка 2×2, по-прежнему крупно */
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px;overflow:hidden}
  .hstat{padding:16px 8px;border-radius:0}
  .hstat-n{font-size:clamp(36px,11vw,44px)}
  .hstat-l{font-size:10.5px;letter-spacing:.1em}
  .hstat + .hstat::before{display:none}
  .hstat:nth-child(even){box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
  .hstat:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .hstat:nth-child(4){box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.1)}
  .hero-veil{background:
    radial-gradient(ellipse 90% 60% at 50% 50%,rgba(10,10,13,.9) 0%,rgba(10,10,13,.8) 55%,rgba(10,10,13,.55) 100%),
    radial-gradient(ellipse 60% 30% at 50% 60%,rgba(59,130,246,.16),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,rgba(10,10,13,.3) 14%,rgba(10,10,13,.3) 80%,var(--bg) 100%)}
  .hero-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  /* Иконка над подписью — три кнопки помещаются в ряд без обрезки текста */
  .hero-stores .store{flex-direction:column;justify-content:center;height:auto;min-height:60px;padding:9px 6px;gap:5px;min-width:0}
  .hero-stores .store small{display:none}
  .hero-stores .store span{min-width:0;text-align:center}
  .hero-stores .store b{font-size:12.5px;white-space:nowrap}
  .hero-stores .store svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .hw-track{animation:none}
  .hero-pill > i{animation:none}
}