@font-face{font-family:'Inter';src:url('/assets/inter-symbols-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+20A0-20CF}
/* hero: общая система для главной и второстепенных страниц justudio.ru */
.hero-eyebrow{font-size:.75rem;letter-spacing:3px;text-transform:uppercase;color:#22D3EE;font-weight:600;margin-bottom:1.25rem}
.hero-title{display:block;letter-spacing:-.025em}
.ht-1{display:block;font-size:clamp(1.6rem,2.9vw,2.6rem);font-weight:600;line-height:1.12;color:#F5F5F7}
.ht-2{display:block;font-size:clamp(2.3rem,5vw,3.85rem);font-weight:800;line-height:1;margin-top:.14em;letter-spacing:-.035em;background:linear-gradient(92deg,#22D3EE 0%,#7DE9F7 55%,#0EA5B7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#22D3EE}@media(max-width:380px){.ht-2{font-size:2.05rem}}
.ht-3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45em;font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:500;color:#86868B;margin-top:.95em;line-height:1.35}
.ht-3 b{color:#F5F5F7;font-weight:700}
.ht-3 i{color:#3F3F46;font-style:normal}
.ht-4{display:block;font-size:clamp(.9rem,1.25vw,1.02rem);color:#86868B;margin-top:.5em;line-height:1.5}
.hero-lead{font-size:clamp(1rem,1.35vw,1.1rem);color:#A1A1AA;line-height:1.65;margin-top:1.6rem;max-width:34rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.1rem 2.25rem;margin-top:2.4rem}
.hs-n{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800;line-height:1;white-space:nowrap}
.hs-n .accent{color:#22D3EE}
.hs-n .cur{font-size:.5em;font-weight:700;position:relative;top:-.12em;margin-left:.08em;color:#C7C7CC}
.hs-l{font-size:.8rem;color:#86868B;margin-top:.45rem}
.hero-work{position:relative}
.hw-frame{position:relative;border:1px solid #2A2A2E;box-shadow:0 0 0 1px rgba(34,211,238,.08),0 24px 60px rgba(0,0,0,.55);border-radius:.75rem;background:#121214;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.hw-bar{display:flex;align-items:center;gap:.375rem;padding:.6rem .9rem;background:#1E1E21;border-bottom:1px solid #2A2A2E;border-radius:.75rem .75rem 0 0}
.hw-dot{width:.6rem;height:.6rem;border-radius:50%;background:#3F3F46}
.hw-dot:nth-child(1){background:#EF4444}.hw-dot:nth-child(2){background:#EAB308}.hw-dot:nth-child(3){background:#22C55E}
.hw-url{margin-left:.6rem;font-size:.68rem;color:#86868B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-shot{display:block;line-height:0;overflow:hidden;border-radius:0 0 .75rem .75rem}
.hw-shot img{width:100%;height:auto;display:block}
.hw-cap{margin-top:2.75rem}
.hw-cap-t{font-size:.95rem;font-weight:600}
.hw-cap-s{font-size:.82rem;color:#86868B;margin-top:.3rem;line-height:1.5}
.hw-cap-s a{color:#22D3EE;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.hw-cap-s a:hover{text-decoration:underline}
.hw-facts-wrap{display:grid;margin-top:1rem}
.hw-facts-wrap>.hw-facts{grid-area:1/1;display:flex;flex-wrap:wrap;gap:.5rem;opacity:0;pointer-events:none;transition:opacity .28s ease}
.hw-facts-wrap>.hw-facts.is-active{opacity:1;pointer-events:auto}
.hw-facts span{font-size:.75rem;color:#86868B;background:#121214;border:1px solid #1E1E21;border-radius:.45rem;padding:.42rem .7rem;white-space:nowrap}
.hw-facts b{color:#F5F5F7;font-weight:600}
.hw-top{display:flex;align-items:center;justify-content:flex-end;gap:1rem;height:2.75rem;margin-bottom:.5rem;padding-right:1.25rem}
.hw-count{font-size:.75rem;color:#86868B;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.hw-count b{color:#F5F5F7;font-weight:600}
.hw-btns{display:flex;gap:.4rem}
.hw-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;background:transparent;border:1px solid #26262B;border-radius:50%;color:#86868B;cursor:pointer;transition:color .2s,border-color .2s,opacity .2s}
.hw-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw-btn:hover:not(:disabled){color:#22D3EE;border-color:rgba(34,211,238,.4)}
.hw-btn:focus-visible{outline:2px solid #22D3EE;outline-offset:2px}
.hw-btn:disabled{opacity:.3;cursor:default}
.hw-slides{position:relative;aspect-ratio:16/10;background:#0E0E10;overflow:hidden;border-radius:0 0 .75rem .75rem}
.hw-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .32s ease}
.hw-slide.is-active{opacity:1;pointer-events:auto}
.hw-slide img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hw-slide video.hw-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;opacity:0;transition:opacity .35s ease;pointer-events:none;background:#0E0E10}
.hw-slide video.hw-vid.is-on{opacity:1}
.hw-caption{position:relative;margin-top:2.6rem;display:grid}
.hw-caption>.hw-info{grid-area:1/1}
.hw-info{opacity:0;pointer-events:none;transition:opacity .28s ease}
.hw-info.is-active{opacity:1;pointer-events:auto}
.hw-cap-d{font-size:.82rem;color:#86868B;margin-top:.35rem;line-height:1.55;max-width:32rem;min-height:4.65em}
.hw-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem}
.hw-tags span{font-size:.7rem;color:#D4D4D8;background:#121214;border:1px solid #26262B;border-radius:.4rem;padding:.24rem .5rem;white-space:nowrap}
.hw-open{display:inline-flex;align-items:center;min-height:44px;margin-top:.2rem;font-size:.82rem;color:#22D3EE;text-decoration:none}
.hw-open:hover{text-decoration:underline}
@media(max-width:1023px){
.hw-top{justify-content:space-between;padding-right:0}
.hw-caption{margin-top:2.4rem}
}
@media(max-width:640px){
.hw-top{height:2.5rem;margin-bottom:.35rem}
.hw-btn{width:40px;height:40px}
.hw-caption{margin-top:2rem}
.hw-cap-t{font-size:.9rem}
.hw-cap-d{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-tags{margin-top:.55rem}
.hw-tags span{font-size:.66rem;padding:.22rem .45rem}
.hw-tags span:nth-child(n+4){display:none}
}

/* header: общая адаптивная система (перенесено из инлайна главной) */
@media (max-width:1180px){header nav#hdrNav{gap:1.25rem}}
@media (max-width:1000px){header nav#hdrNav{gap:1rem}header #hdrCta{margin-left:20px !important}}
@media (max-width:880px){header #hdrCta{margin-left:14px !important}header #hdrNav{font-size:.8125rem}}

/* общий фон-градиент героя: одинаковый на главной и второстепенных (световое пятно под хиро) */
.blob{position:absolute;width:600px;height:600px;border-radius:50%;background:#22D3EE;filter:blur(120px);opacity:.12;pointer-events:none;z-index:-10}

/* герой: текст начинается на одной высоте на всех страницах — не центрируется по высоте картинки
   (раньше items-center поднимал/опускал колонку в зависимости от числа строк lead → «прыгал») */
@media (min-width:1024px){
  .hero-grid{align-items:start}
  .hero-copy{padding-top:5rem}
}