/* ============================================================
   AZAT.TEAM — детальная страница кейса
   Вся вёрстка скоуплена под .azcase (внутри workarea Битрикса).
   Шрифт Steppe уже подключён в шаблоне сайта (styles/app.css);
   ============================================================ */


.azcase{
  /* палитра кейса */
  --c-red:#D70000;
  --c-red-deep:#8F0000;
  --c-black:#0C0C0C;
  --c-panel:#161616;
  --c-ink:#1B242E;
  --c-grey:#8A9096;
  --c-font:'Steppe',Arial,sans-serif;

  font-family:var(--c-font);
  background:var(--c-black);
  color:#fff;
  font-size:16px;
  line-height:1.6;
  
}
.azcase *,.azcase *::before,.azcase *::after{margin:0;padding:0;box-sizing:border-box}
.azcase img{display:block;max-width:100%;height:auto}
.azcase a{color:inherit;text-decoration:none}
.azcase ul,.azcase ol{list-style:none}
/* color:inherit / line-height обязательны: на боевом сайте app.css красит
   h1-h5{color:#1b242e} и p{line-height:1.5} прямыми селекторами — они бьют
   наследование от .azcase, заголовки на тёмном фоне ушли бы в невидимость,
   а типографика уплотнилась бы. Скоуп-специфичность (0,1,1) перебивает. */
.azcase h1,.azcase h2,.azcase h3{font-weight:800;text-transform:uppercase;line-height:1.06;color:inherit}
.azcase p{line-height:1.6}
.azcase .accent{color:var(--c-red)}
.azcase .cwrap{max-width:1240px;margin:0 auto;padding:0 40px}
/* full-bleed: страница внутри .container сайта (max 1420), полосы — на всю ширину вьюпорта */
.azcase>.waves,.azcase>.on-light,.azcase>.marquee{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* full-bleed через 100vw шире вьюпорта на ширину скроллбара — клипаем на контентном контейнере (хедер сайта — сосед, не заденет) */
.page-container{overflow-x:clip}

/* ---- прогресс-бар чтения ---- */
.azcase-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#D70000,#ff4b4b);width:0;z-index:100;box-shadow:0 0 12px rgba(215,0,0,.8)}

/* ---- reveal-анимации ---- */
.azcase .rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.azcase .rv.in{opacity:1;transform:none}
.azcase .rv-l{opacity:0;transform:translateX(-46px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.azcase .rv-r{opacity:0;transform:translateX(46px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.azcase .rv-l.in,.azcase .rv-r.in{opacity:1;transform:none}
.azcase .d1{transition-delay:.08s}.azcase .d2{transition-delay:.16s}.azcase .d3{transition-delay:.24s}.azcase .d4{transition-delay:.32s}.azcase .d5{transition-delay:.4s}
/* no-JS фолбэк: класс azc-no-js снимается первой строкой case.js.
   Если скрипт не выполнился (ошибка/404/конфликт в объединённом бандле Битрикса) —
   контент остаётся видимым, а не opacity:0 на пустой чёрной странице. */
.azcase.azc-no-js .rv,.azcase.azc-no-js .rv-l,.azcase.azc-no-js .rv-r{opacity:1;transform:none}

/* ---- лейбл секции ---- */
.azcase .sec-label{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#999;margin-bottom:34px}
.azcase .sec-label::before{content:'';flex:0 0 46px;width:46px;height:2px;background:var(--c-red)}
.azcase .on-light .sec-label{color:#777}
.azcase .sec-title{font-size:40px;margin-bottom:30px}

/* ---- живые красные волны (тёмные секции) ---- */
.azcase .waves{position:relative;overflow:hidden;background:#000}
.azcase .blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;opacity:.75}
.azcase .blob.b1{width:640px;height:640px;background:radial-gradient(circle at 35% 35%,rgba(215,0,0,.6),transparent 70%);top:-200px;left:-160px;animation:azc-drift1 16s ease-in-out infinite alternate}
.azcase .blob.b2{width:760px;height:760px;background:radial-gradient(circle at 60% 40%,rgba(143,0,0,.55),transparent 72%);right:-240px;top:10%;animation:azc-drift2 20s ease-in-out infinite alternate}
.azcase .blob.b3{width:560px;height:560px;background:radial-gradient(circle at 50% 55%,rgba(215,0,0,.4),transparent 70%);bottom:-200px;left:28%;animation:azc-drift3 18s ease-in-out infinite alternate}
@keyframes azc-drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,60px) scale(1.12)}}
@keyframes azc-drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-110px,70px) scale(.94)}}
@keyframes azc-drift3{from{transform:translate(0,0)}to{transform:translate(70px,-60px) scale(1.08)}}
.azcase .strands{position:absolute;inset:0;z-index:1;opacity:.55;width:100%;height:100%}
.azcase .strands path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:azc-draw 5s ease forwards}
.azcase .strands path:nth-child(2){animation-delay:.5s}
.azcase .strands path:nth-child(3){animation-delay:1s}
.azcase .strands path:nth-child(4){animation-delay:1.4s}
@keyframes azc-draw{to{stroke-dashoffset:0}}
.azcase .waves>.cwrap,.azcase .waves>section,.azcase .waves>div:not(.blob){position:relative;z-index:2}

/* параллакс-элементы */
.azcase [data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.azcase .wm{position:absolute;top:50%;right:-10px;z-index:1;font-weight:800;font-size:130px;letter-spacing:8px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);text-transform:uppercase;writing-mode:vertical-rl;line-height:1;user-select:none;pointer-events:none;transform:translateY(-50%)}
.azcase .wm[data-parallax]{transform:translate3d(0,calc(-50% + var(--py,0px)),0)}

/* ---- кнопки ---- */
.azcase .cbtn{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-transform:uppercase;font-family:var(--c-font);font-size:14px;letter-spacing:.6px;padding:15px 30px;border-radius:44px;cursor:pointer;transition:.25s;border:none;position:relative;overflow:hidden}
.azcase .cbtn .arr{transition:.25s;font-style:normal}
.azcase .cbtn:hover .arr{transform:translate(3px,-3px)}
.azcase .cbtn--red{background:var(--c-red);color:#fff}
.azcase .cbtn--red::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-120%);transition:.5s}
.azcase .cbtn--red:hover::before{transform:translateX(120%)}
.azcase .cbtn--red:hover{background:#b00000;box-shadow:0 8px 30px rgba(215,0,0,.45)}
.azcase .cbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============ HERO ============ */
/* только вертикальные лонгхенды: горизонтальные отступы даёт .cwrap
   (в прототипе шортхенд случайно обнулял бок — hero уезжал с общей оси) */
.azcase .hero{padding-top:150px;padding-bottom:60px}
.azcase .crumbs{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#888;margin-bottom:30px}
.azcase .crumbs a{transition:color .25s}
.azcase .crumbs a:hover{color:#fff}
.azcase .hero h1{font-size:54px;max-width:900px;margin-bottom:26px}
.azcase .hero .lead{font-size:18px;color:#ccc;max-width:640px;margin-bottom:36px}
.azcase .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.azcase .chip{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:8px 18px;color:#ddd;transition:.25s}
.azcase .chip:hover{border-color:var(--c-red);color:#fff;transform:translateY(-2px)}
.azcase .chip--red{border-color:var(--c-red);background:rgba(215,0,0,.22)}

/* браузерная рамка */
.azcase .browser{background:#101010;border:1px solid #2a2a2a;border-radius:14px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.75),0 0 90px rgba(215,0,0,.25);transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
.azcase .browser-bar{display:flex;align-items:center;gap:6px;background:#191919;padding:11px 16px}
.azcase .dot{width:10px;height:10px;border-radius:50%;background:#333;flex:0 0 auto}
.azcase .dot:first-child{background:var(--c-red)}
.azcase .browser-url{margin-left:14px;font-size:11px;color:#777;background:#0a0a0a;border-radius:20px;padding:4px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.azcase .hero-shot{margin-top:10px;padding-bottom:90px;perspective:1200px}

/* ============ БЕГУЩАЯ СТРОКА ============ */
.azcase .marquee{background:#F5F5F5;overflow:hidden;padding:22px 0;position:relative;z-index:5;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}
/* трейлинг-отступ на каждом span (а не gap на треке): при дублировании набора
   translateX(-50%) попадает точно на стык, без рывка на gap/2 раз в цикл */
.azcase .marquee-track{display:flex;white-space:nowrap;animation:azc-mq 60s linear infinite;width:max-content}
.azcase .marquee:hover .marquee-track{animation-play-state:paused}
.azcase .marquee span{font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:2.5px;color:#9aa0a6;display:flex;align-items:center;gap:64px;margin-right:64px;transition:color .3s}
.azcase .marquee span:hover{color:#4a4f55}
.azcase .marquee span::after{content:'\2726';font-size:12px;color:var(--c-red);opacity:.55}
@keyframes azc-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ СВЕТЛЫЕ СЕКЦИИ ============ */
.azcase .on-light{background:#fff;color:var(--c-ink)}
.azcase section{padding:90px 0}
.azcase .prose p{margin-bottom:18px;font-size:17px;max-width:760px}
.azcase .on-light .prose p{color:#3a3f45}

/* О проекте */
.azcase .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.azcase .float-shots{position:relative;min-height:430px}
.azcase .float-shots .s1{position:absolute;top:0;left:0;width:78%;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.28);border:1px solid #e5e5e5;transition:transform .4s}
.azcase .float-shots .s2{position:absolute;bottom:0;right:0;width:62%;border-radius:10px;box-shadow:0 30px 70px rgba(215,0,0,.22);border:1px solid #eee;transition:transform .4s}
.azcase .float-shots:hover .s1{transform:translate(-8px,-8px) rotate(-1deg)}
.azcase .float-shots:hover .s2{transform:translate(8px,8px) rotate(1deg)}
.azcase .stat-row{display:flex;gap:44px;margin-top:34px;flex-wrap:wrap}
.azcase .stat b{display:block;font-size:40px;font-weight:800;color:var(--c-red);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.azcase .stat span{font-size:14px;color:#666}

/* Цели */
.azcase .goals{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:20px}
.azcase .goal{background:var(--c-black);color:#fff;border-radius:12px;padding:26px 20px;min-height:210px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.azcase .goal::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--c-red);transform:scaleX(0);transform-origin:left;transition:.35s}
.azcase .goal:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(215,0,0,.28)}
.azcase .goal:hover::after{transform:scaleX(1)}
.azcase .goal:nth-child(even){margin-top:26px}
.azcase .goal .num{font-size:34px;font-weight:800;color:var(--c-red);display:block;margin-bottom:14px}
.azcase .goal p{font-size:14px;color:#c9c9c9}

/* Шаги решения */
.azcase .steps{margin-top:10px;max-width:820px}
.azcase .step{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid #e8e8e8;align-items:flex-start}
.azcase .step:last-child{border-bottom:none}
.azcase .step .n{flex:0 0 52px;height:52px;border-radius:50%;background:var(--c-black);color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;transition:.3s}
.azcase .step:hover .n{background:var(--c-red);transform:scale(1.1);box-shadow:0 8px 22px rgba(215,0,0,.4)}
.azcase .step b{display:block;font-size:18px;margin-bottom:6px}
.azcase .step p{color:#4a4f55;font-size:15.5px}

/* ============ ТЕХНОЛОГИИ ============ */
.azcase .tech{padding:70px 0}
.azcase .tech-row{display:flex;flex-wrap:wrap;gap:16px}
.azcase .tech-tag{border:1.5px solid rgba(255,255,255,.35);border-radius:40px;padding:13px 30px;font-weight:700;font-size:17px;letter-spacing:.5px;transition:.3s;cursor:default}
.azcase .tech-tag:hover{background:var(--c-red);border-color:var(--c-red);transform:translateY(-3px);box-shadow:0 10px 26px rgba(215,0,0,.4)}
.azcase .tech-tag em{font-style:normal;color:var(--c-red);margin-right:8px;transition:.3s}
.azcase .tech-tag:hover em{color:#fff}
.azcase .tech-text{color:#bbb;max-width:700px;margin-top:26px}

/* ============ МОКАПЫ ============ */
.azcase .laptop-wrap{padding:100px 0 120px}
.azcase .laptop{max-width:880px;margin:0 auto;position:relative;will-change:transform}
.azcase .laptop .screen{background:#000;border:2px solid #2b2b2b;border-bottom:none;border-radius:18px 18px 0 0;padding:14px 14px 0;box-shadow:0 60px 140px rgba(0,0,0,.8),0 0 110px rgba(215,0,0,.3)}
.azcase .laptop .screen .view{border-radius:8px 8px 0 0;overflow:hidden;max-height:520px}
.azcase .laptop .base{height:20px;background:linear-gradient(#3a3a3a,#151515);border-radius:0 0 22px 22px;position:relative}
.azcase .laptop .base::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:120px;height:7px;background:#0a0a0a;border-radius:0 0 8px 8px}
.azcase .phone{width:210px;background:#0a0a0a;border:2px solid #2b2b2b;border-radius:32px;padding:10px;box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 70px rgba(215,0,0,.28);flex:0 0 auto}
.azcase .phone .p-screen{border-radius:22px;overflow:hidden;height:420px}
.azcase .phone .p-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.azcase .devices{display:flex;justify-content:center;align-items:flex-end}
.azcase .devices .phone{margin-left:-90px;margin-bottom:-14px;z-index:3;position:relative}

/* ============ КОМАНДА ============ */
.azcase .team-sec{overflow:visible}
.azcase .team-list{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:14px}
.azcase .tcard{position:relative;border-radius:14px;cursor:pointer}
.azcase .tcard .ph{border-radius:14px;overflow:hidden;aspect-ratio:1/1;position:relative}
.azcase .tcard .ph::after{content:'';position:absolute;inset:0;border-radius:14px;border:2px solid transparent;transition:.3s}
.azcase .tcard .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(70%);transition:filter .4s,transform .5s}
.azcase .tcard:hover .ph img,.azcase .tcard:focus-within .ph img{filter:grayscale(0);transform:scale(1.06)}
.azcase .tcard:hover .ph::after,.azcase .tcard:focus-within .ph::after{border-color:var(--c-red);box-shadow:0 14px 38px rgba(215,0,0,.35)}
.azcase .tcard .who{margin-top:10px}
.azcase .tcard .who b{display:block;font-size:14px;color:var(--c-ink);line-height:1.25}
.azcase .tcard .who span{font-size:12px;color:var(--c-red);text-transform:uppercase;letter-spacing:1px;font-weight:700}
/* попап участника. Без pointer-events:none: закрытое состояние и так не кликается
   (visibility:hidden), а открытый попап должен быть наводимым (WCAG 1.4.13 hoverable) */
.azcase .tpopup{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(8px);width:330px;background:#111;color:#fff;border-radius:16px;padding:24px 26px;z-index:30;opacity:0;visibility:hidden;transition:.3s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px #222}
.azcase .tcard:hover .tpopup,.azcase .tcard:focus-within .tpopup{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Escape закрывает попап, не уводя фокус (WCAG 1.4.13 dismissable) */
.azcase .tcard.azc-mute .tpopup{opacity:0;visibility:hidden}
/* невидимый мост через 14px зазор — курсор доходит до попапа, ховер не рвётся */
.azcase .tpopup::before{content:'';position:absolute;top:100%;left:0;right:0;height:18px}
.azcase .tpopup::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:9px solid transparent;border-top-color:#111}
.azcase .tpopup h3{font-size:19px;font-weight:800;text-transform:uppercase;margin-bottom:2px}
.azcase .tpopup .role{color:var(--c-red);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.azcase .tpopup .lbl{color:#8a8a8a;font-size:12.5px;margin-top:10px}
.azcase .tpopup .val{font-size:13.5px;line-height:1.5;color:#e6e6e6}
/* крайние попапы не вылезают за контейнер */
.azcase .team-list .tcard:first-child .tpopup,.azcase .team-list .tcard:nth-child(2) .tpopup{left:0;transform:translateX(0) translateY(8px)}
.azcase .team-list .tcard:first-child:hover .tpopup,.azcase .team-list .tcard:nth-child(2):hover .tpopup{transform:translateX(0) translateY(0)}
.azcase .team-list .tcard:last-child .tpopup,.azcase .team-list .tcard:nth-child(5) .tpopup{left:auto;right:0;transform:translateX(0) translateY(8px)}
.azcase .team-list .tcard:last-child:hover .tpopup,.azcase .team-list .tcard:nth-child(5):hover .tpopup{transform:translateX(0) translateY(0)}

/* ============ КЛЮЧЕВЫЕ МОМЕНТЫ ============ */
.azcase .keys{max-width:860px}
.azcase .keyitem{display:grid;grid-template-columns:86px 1fr;gap:22px;padding:30px 0;border-bottom:1px solid #232323;align-items:start}
.azcase .keyitem:last-child{border:none}
.azcase .keyitem .kn{font-size:44px;font-weight:800;color:transparent;-webkit-text-stroke:1.6px var(--c-red);line-height:1;transition:.3s}
.azcase .keyitem:hover .kn{color:var(--c-red)}
.azcase .keyitem b{display:block;font-size:19px;margin-bottom:8px}
.azcase .keyitem p{color:#b5b5b5;font-size:15.5px;max-width:640px}

/* ============ ГАЛЕРЕЯ-ВИТРИНА ============ */
.azcase .gallery-sec{padding:90px 0 100px;overflow:hidden}
.azcase .g-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:6px}
.azcase .g-title{font-size:34px;font-weight:800;text-transform:uppercase;line-height:1.05;transition:opacity .25s,transform .25s;min-height:1.1em}
.azcase .g-title.fade{opacity:0;transform:translateY(12px)}
.azcase .g-ctrl{display:flex;align-items:center;gap:14px}
.azcase .g-count{font-size:60px;font-weight:800;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.3);margin-right:18px}
.azcase .g-count b{color:var(--c-red);-webkit-text-stroke:0}
.azcase .g-btn{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:19px;cursor:pointer;transition:.25s;font-family:inherit;display:flex;align-items:center;justify-content:center}
.azcase .g-btn:hover{background:var(--c-red);border-color:var(--c-red);box-shadow:0 8px 26px rgba(215,0,0,.4);transform:translateY(-2px)}
.azcase .g-btn:active{transform:translateY(0) scale(.95)}
.azcase .g-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.azcase #gallery.swiper{overflow:visible;padding:44px 0 10px}
.azcase #gallery .swiper-slide{width:780px;max-width:80vw;filter:grayscale(85%) brightness(.4);transition:filter .6s;user-select:none}
.azcase #gallery .swiper-slide .browser{box-shadow:0 40px 100px rgba(0,0,0,.7);transition:box-shadow .6s}
.azcase #gallery .swiper-slide img{width:100%;height:460px;object-fit:cover;object-position:top;-webkit-user-drag:none;user-select:none;pointer-events:none}
.azcase #gallery .swiper-slide-active{filter:none}
.azcase #gallery .swiper-slide-active .browser{box-shadow:0 60px 140px rgba(0,0,0,.85),0 0 130px rgba(215,0,0,.45);border-color:rgba(215,0,0,.5)}
.azcase #gallery .cap{padding:14px 18px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#999;border-top:1px solid #222;background:#101010}
.azcase .g-progress{height:3px;background:#242424;border-radius:2px;margin-top:40px;overflow:hidden}
.azcase .g-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--c-red),#ff4b4b);width:0}
.azcase #gallery{cursor:grab}
.azcase #gallery:active{cursor:grabbing}
/* fallback без Swiper: обычная горизонтальная лента */
.azcase #gallery.no-swiper{overflow-x:auto;cursor:grab;scroll-snap-type:x mandatory;scrollbar-width:none;padding:44px 0 10px}
.azcase #gallery.no-swiper::-webkit-scrollbar{display:none}
.azcase #gallery.no-swiper .swiper-wrapper{display:flex;gap:28px;padding:0 40px}
.azcase #gallery.no-swiper .swiper-slide{flex:0 0 auto;filter:none;scroll-snap-align:center}

/* ============ ПОЛНЫЙ СКРИН ============ */
.azcase .fullshot .scrolly{max-width:1000px;margin:0 auto;height:640px;overflow-y:auto;border-radius:14px;border:1px solid #2a2a2a;box-shadow:0 50px 120px rgba(0,0,0,.7)}
.azcase .fullshot .scrolly::-webkit-scrollbar{width:9px}
.azcase .fullshot .scrolly::-webkit-scrollbar-thumb{background:var(--c-red);border-radius:5px}
.azcase .hint{color:#888;font-size:13px;text-align:center;margin-top:16px;text-transform:uppercase;letter-spacing:2px}

/* ============ ДРУГИЕ КЕЙСЫ ============ */
.azcase .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.azcase .case-card{border-radius:14px;overflow:hidden;background:var(--c-panel);border:1px solid #242424;transition:.3s;position:relative;display:block}
.azcase .case-card .thumb{overflow:hidden;height:185px}
.azcase .case-card img{height:185px;width:100%;object-fit:cover;object-position:top;transition:transform .5s}
.azcase .case-card:hover img{transform:scale(1.07)}
.azcase .case-card:hover{transform:translateY(-6px);border-color:var(--c-red);box-shadow:0 24px 50px rgba(215,0,0,.2)}
.azcase .cc-body{padding:20px 22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.azcase .cc-tags{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#8a8a8a;margin-bottom:8px}
.azcase .case-card b{font-size:18px}
.azcase .cc-arr{color:var(--c-red);font-size:22px;transition:.3s}
.azcase .case-card:hover .cc-arr{transform:translate(4px,-4px)}
/* глобальный a:hover из app.css красит ссылку-карточку в тёмный → заголовок (inherit) уходил в невидимость. Держим светлым. */
.azcase .case-card,.azcase .case-card:hover,.azcase .case-card:hover b{color:#fff}

/* ============ CTA ============ */
.azcase .cta{text-align:center;padding:130px 0}
.azcase .cta h2{font-size:46px;max-width:820px;margin:0 auto 20px}
.azcase .cta p{color:#bbb;margin-bottom:40px}

/* ============ АДАПТИВ ============ */
@media (max-width:1259px){
  .azcase .hero h1{font-size:46px}
  .azcase .sec-title{font-size:34px}
  .azcase .goals{grid-template-columns:repeat(3,1fr)}
  .azcase .goal:nth-child(even){margin-top:0}
  .azcase .team-list{grid-template-columns:repeat(4,1fr)}
  .azcase .wm{font-size:100px}
}
@media (max-width:1020px){
  .azcase .hero{padding-top:110px;padding-bottom:40px}
  .azcase .hero h1{font-size:36px}
  .azcase section{padding:70px 0}
  .azcase .intro-grid{grid-template-columns:1fr}
  .azcase .float-shots{min-height:0;height:0;padding-bottom:72%}
  .azcase .goals{grid-template-columns:repeat(2,1fr)}
  .azcase .team-list{grid-template-columns:repeat(3,1fr)}
  .azcase .cards{grid-template-columns:1fr}
  .azcase .wm{display:none}
  .azcase .devices .phone{margin-left:-40px}
  .azcase .tpopup{display:none}
  .azcase .g-count{display:none}
  .azcase .g-title{font-size:24px}
  .azcase .laptop-wrap{padding:70px 0 80px}
  .azcase .cta{padding:90px 0}
  .azcase .cta h2{font-size:34px}
  .azcase .fullshot .scrolly{height:480px}
  /* .tech/.gallery-sec заданы (0,2,0) и не ловятся общим .azcase section — сжимаем явно */
  .azcase .gallery-sec{padding:70px 0 80px}
}
@media (max-width:640px){
  .azcase .cwrap{padding-left:20px;padding-right:20px}
  .azcase .hero h1{font-size:28px}
  .azcase .hero .lead{font-size:16px}
  .azcase .sec-title{font-size:26px}
  .azcase section{padding:56px 0}
  .azcase .goals{grid-template-columns:1fr}
  .azcase .goal{min-height:0}
  .azcase .stat-row{gap:28px}
  .azcase .stat b{font-size:32px}
  .azcase .step{gap:16px;padding:20px 0}
  .azcase .step .n{flex:0 0 42px;height:42px;font-size:16px}
  .azcase .keyitem{grid-template-columns:56px 1fr;gap:14px;padding:22px 0}
  .azcase .keyitem .kn{font-size:32px}
  .azcase .team-list{grid-template-columns:repeat(2,1fr)}
  .azcase .tech-tag{padding:10px 20px;font-size:15px}
  .azcase .devices{flex-direction:column;align-items:center;gap:30px}
  .azcase .devices .phone{margin:0}
  .azcase .phone{width:180px}
  .azcase .phone .p-screen{height:360px}
  .azcase #gallery .swiper-slide{max-width:88vw}
  .azcase #gallery .swiper-slide img{height:300px}
  .azcase .g-head{flex-direction:column;align-items:flex-start;gap:18px}
  .azcase .fullshot .scrolly{height:380px}
  .azcase .cta h2{font-size:26px}
  .azcase .tech{padding:56px 0}
  .azcase .gallery-sec{padding:56px 0 64px}
  .azcase .marquee span{font-size:13px;gap:40px;margin-right:40px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .azcase .rv,.azcase .rv-l,.azcase .rv-r{opacity:1;transform:none;transition:none}
  .azcase .blob,.azcase .strands path{animation:none}
  .azcase .strands path{stroke-dashoffset:0}
  .azcase .marquee-track{animation:none}
  .azcase [data-parallax]{transform:none}
  .azcase .browser{transition:none}
}