/* Разработка приложений — посадочная, v2 (10.2026): строгая подача. Карта экранов из вайрфреймов,
   этапы с результатом, список типов, таблица технологий. Без нарисованных телефонов и цветных плиток. */

/* ---------- HERO ---------- */
.app-hero--map{min-height:auto;display:block;padding-bottom:72px}
.app-hero--map .hero-sub{max-width:520px;margin-top:0}
.ah-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 56px;align-items:end}
.ah-top .hero-h1{margin-bottom:0}
.ah-side{padding-bottom:8px}
.ah-side .hero-actions{margin-top:26px}
.app-stores{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.store-chip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--ink);color:#fff;border-radius:10px;padding:8px 16px 8px 12px;line-height:1.05}
.store-chip svg{width:22px;height:22px;flex-shrink:0}
.store-chip span{display:flex;flex-direction:column;font-weight:700;font-size:15px;letter-spacing:-.01em}
.store-chip small{font-size:10px;font-weight:500;letter-spacing:0;opacity:.75;margin-bottom:2px}
@media(max-width:980px){.ah-top{grid-template-columns:minmax(0,1fr)}}

/* ---------- карта экранов ---------- */
.amap{margin-top:36px;border:1px solid var(--line);border-radius:20px;background:#F6F7F8;overflow:hidden}
.amap-bar{display:flex;align-items:center;gap:20px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fff}
.amap-cap{font-size:13px;font-weight:700;color:var(--gray);white-space:nowrap}
.amap-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.amap-tabs::-webkit-scrollbar{display:none}
.amap-tab{flex-shrink:0;font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--ink);background:none;border:1px solid transparent;border-radius:8px;padding:9px 14px;cursor:pointer;transition:background .2s,border-color .2s}
.amap-tab:hover{background:var(--gray-bg)}
.amap-tab.is-on{border-color:var(--ink)}
.amap-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* холст: точечная сетка как в макетах */
.amap-canvas{position:relative;display:grid;padding:26px 28px 24px;background-image:radial-gradient(circle,#D5DDE4 1px,transparent 1.2px);background-size:18px 18px}
.amap-flow{grid-area:1/1;display:flex;align-items:center;justify-content:center;visibility:hidden}
.amap-flow.is-on{visibility:visible}
.amf{margin:0;flex:0 0 auto;width:clamp(108px,9vw,132px);opacity:0;transform:translateY(12px);transition:opacity .45s calc(var(--i) * 70ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i) * 70ms)}
.amap-flow.is-on .amf{opacity:1;transform:none}
.amf figcaption{font-size:12px;font-weight:600;color:var(--gray);margin:0 0 8px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.amf-scr{position:relative;aspect-ratio:9/18.5;background:#fff;border:1px solid #D3DBE2;border-radius:16px;padding:22px 11px 11px;display:flex;flex-direction:column;gap:7px;overflow:hidden;transition:border-color .3s}
.amf-scr::before{content:"";position:absolute;left:50%;top:8px;width:30px;height:5px;margin-left:-15px;border-radius:3px;background:#E3E8ED}
.amf.is-act figcaption{color:var(--ink)}
.amf.is-act .amf-scr{border-color:var(--ink)}
.amap-arr{flex:1 1 28px;max-width:60px;min-width:16px;align-self:center;margin-top:20px;color:#9AA8B4;opacity:0;transition:opacity .4s calc(var(--i) * 70ms + 120ms),color .3s}
.amap-flow.is-on .amap-arr{opacity:1}
.amap-arr svg{display:block;width:100%;height:10px;overflow:visible}
.amap-arr path{fill:none;stroke:currentColor;stroke-width:1.3;vector-effect:non-scaling-stroke}
.amap-arr.is-act{color:var(--ink)}
.amap-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line);background:#fff;font-size:13.5px}
.amap-stack{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--ink)}
.amap-stack b{font-weight:700;color:var(--gray)}
.amap-stack > span{display:inline-flex;align-items:center;gap:7px}
.amap-stack svg{width:17px;height:17px}
.amap-stack svg .du{fill:currentColor;opacity:.15}
.amap-note{color:var(--gray)}

/* вайрфреймы: примитивы */
.amf-scr .b{display:block;height:5px;border-radius:3px;background:#DFE5EA;flex-shrink:0}
.amf-scr .b.t{height:8px;background:#C9D2DA}
.amf-scr .b.c{margin:0 auto}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w90{width:90%}
.amf-scr em,.amf-scr b{font-style:normal}
.w-in{display:block;border:1px solid #D3DBE2;border-radius:7px;padding:7px 8px;font-size:9px;color:#8C99A5;flex-shrink:0}
.w-in--s{padding:6px 8px}
.w-code{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.w-code i{height:22px;border:1px solid #D3DBE2;border-radius:6px}
.w-btn{margin-top:auto;display:block;text-align:center;font-size:9.5px;font-weight:700;color:#fff;background:var(--ink);border-radius:8px;padding:8px 4px;flex-shrink:0}
.w-btn.acc{background:var(--blue)}
.w-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1}
.w-grid i{border-radius:8px;background:#F0F1F3}
.w-tab{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:6px;border-top:1px solid #E7ECF0}
.w-tab i{height:9px;border-radius:3px;background:#E3E8ED}.w-tab i.on{background:var(--ink)}
.w-row{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center}
.w-row .th{width:22px;height:22px;border-radius:6px;background:#F0F1F3}
.w-row em{font-size:8.5px;font-weight:700;color:var(--ink)}
.w-sum{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #E7ECF0;padding-top:8px;margin-top:2px}
.w-sum b{font-size:10.5px;font-weight:800;color:var(--ink)}
.w-map{position:relative;display:block;height:46%;flex-shrink:0;border-radius:9px;background:#F0F1F3;overflow:hidden}
.w-map--tall{height:62%}
.w-mapsvg{position:absolute;inset:0;width:100%;height:100%}
.w-mapsvg .st{fill:none;stroke:#fff;stroke-width:4;vector-effect:non-scaling-stroke}
.w-mapsvg .rt{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.w-map .pin{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ink);border:2px solid #fff}
.w-map .pin.a{left:14%;top:86%;margin:-5px 0 0 -5px}
.w-map .pin.b{left:88%;top:10%;margin:-5px 0 0 -5px;background:var(--blue)}
.w-map .pin.c{left:60%;top:52%;margin:-5px 0 0 -5px}
.w-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.w-prog i{height:3px;border-radius:2px;background:#DFE5EA}.w-prog i.on{background:var(--ink)}
.w-big{font:800 15px/1.1 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.w-big--s{font-size:10.5px;margin-top:auto;color:var(--blue)}
.w-time{font:300 30px/1 var(--font-h);text-align:center;color:var(--ink);margin-top:6px}
.w-note{display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:8px;border:1px solid #D3DBE2;border-radius:9px;background:#fff}
.w-note .ic{width:16px;height:16px;border-radius:5px;background:var(--ink);flex-shrink:0}
.w-note > span{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.w-note b{font-size:8.5px;font-weight:700;color:var(--ink);line-height:1.2}
.amf--push{background:#F4F6F8}
.w-li{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px;border:1px solid #E1E7EC;border-radius:7px}
.w-li em{font-size:10px;color:#9AA8B4;font-weight:700}
.w-li.on{border-color:var(--ink)}.w-li.on em{color:var(--ink)}
.w-days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.w-days i{height:24px;border:1px solid #D3DBE2;border-radius:6px}.w-days i.on{background:var(--ink);border-color:var(--ink)}
.w-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.w-slots i{height:16px;border-radius:5px;background:#F0F1F3}
.w-slots i.off{background:none;border:1px dashed #D3DBE2}
.w-slots i.on{background:var(--blue)}
.w-card{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:56px;flex-shrink:0;border-radius:9px;background:var(--ink);padding:9px}
.w-card .b{background:#3B5263}
.w-opt{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:600;color:var(--ink);padding:6px 7px;border:1px solid #E1E7EC;border-radius:7px}
.w-opt i{width:9px;height:9px;border-radius:50%;border:1.5px solid #B7C3CD}
.w-opt.on{border-color:var(--ink)}.w-opt.on i{border:3px solid var(--ink)}
.w-stars{width:70%;height:auto;margin:4px 0}
.w-stars path{fill:var(--ink)}.w-stars path.off{fill:#DFE5EA}
.w-area{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid #D3DBE2;border-radius:8px;flex:1;max-height:42%}
.w-img{display:block;height:40%;flex-shrink:0;border-radius:9px;background:#E6EBEF}
.w-img--s{height:24%}
.w-hi{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid #EFF0F2}
.w-hi > span{display:flex;flex-direction:column;gap:4px;flex:1}
.w-hi em{font-size:8px;font-weight:600;color:#8C99A5;white-space:nowrap}
.w-hi em.on{color:var(--ink);font-weight:800}
.w-qcard{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:10px;background:var(--ink)}
.w-qcard .b{background:#3B5263}
.w-qr{width:58%;aspect-ratio:1;background:#fff;border-radius:4px;background-image:linear-gradient(90deg,var(--ink) 50%,transparent 50%),linear-gradient(var(--ink) 50%,transparent 50%);background-size:12% 12%,12% 12%;background-blend-mode:difference;outline:3px solid #fff}
.w-lvl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:2px 0 4px}
.w-lvl i{height:6px;border-radius:3px;background:#DFE5EA}.w-lvl i.on{background:var(--ink)}
.w-chk{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #EFF0F2}
.w-chk > i:first-child{width:11px;height:11px;border:1.5px solid #B7C3CD;border-radius:3px;flex-shrink:0}
.w-chk.on > i:first-child{background:var(--ink);border-color:var(--ink)}
.w-chk.on .b{background:#F0F1F3}
.w-cam{position:relative;flex:1;margin:-22px -11px 0;background:#1B2A35}
.w-cam .cr{position:absolute;inset:22% 16%;border:1.5px solid rgba(255,255,255,.55);border-radius:6px}
.w-shot{align-self:center;width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);margin:4px 0 2px}
.amf--camera{gap:0}
.w-sig{display:block;height:34%;border-bottom:1px solid #C9D2DA;margin-top:8px}
.w-sig svg{width:100%;height:100%}
.w-sig path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.w-ok{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid #EFF0F2}
.w-ok::before{content:"";width:9px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translateY(-2px);flex-shrink:0}

@media(max-width:1180px){.amap-flow{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.amap-flow::-webkit-scrollbar{display:none}.amf{width:136px}}
@media(max-width:640px){
  .amap{margin:34px -6px 0}
  .amap-bar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px}
  .amap-tabs{max-width:100%}
  .amap-canvas{padding:24px 14px 20px}
  .amf{width:124px}
  .amap-foot{padding:12px}
  .amap-stack b{width:100%}
}

/* ---------- этапы ---------- */
.app-steps{padding:110px 0;background:#fff;border-top:1px solid var(--line)}
.as-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.as-list li{display:flex;flex-direction:column;gap:10px;padding:26px 28px 30px 0;border-bottom:1px solid var(--line)}
.as-list li:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.as-list b{font:800 20px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:-.01em}
.as-list p{color:var(--gray);font-size:15px;line-height:1.55}
.as-out{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:baseline}
.as-out::before{content:"";width:14px;height:1.5px;background:var(--blue);flex-shrink:0;transform:translateY(-4px)}
@media(max-width:900px){.as-list{grid-template-columns:1fr 1fr}.as-list li:not(:nth-child(3n+1)){padding-left:0;border-left:0}.as-list li:nth-child(2n){padding-left:22px;border-left:1px solid var(--line)}.app-steps{padding:76px 0}}
@media(max-width:560px){.as-list{grid-template-columns:1fr}.as-list li:nth-child(2n){padding-left:0;border-left:0}.as-list li{padding-right:0}}

/* ---------- типы приложений ---------- */
.app-kinds{padding:110px 0;background:var(--gray-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ak-list{list-style:none;border-top:1px solid var(--ink)}
.ak-list li{display:grid;grid-template-columns:44px minmax(0,.8fr) minmax(0,1.2fr);gap:8px 28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.ak-ic{align-self:center;color:var(--ink);display:flex}
.ak-ic svg{width:28px;height:28px}
.ak-ic svg .du{fill:currentColor;opacity:.12}
.ak-list h3{font:800 21px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:-.01em}
.ak-list p{color:var(--gray);font-size:15.5px;line-height:1.55}
@media(max-width:760px){.ak-list li{grid-template-columns:36px minmax(0,1fr)}.ak-list p{grid-column:2}.app-kinds{padding:76px 0}}

/* ---------- стек: таблица ---------- */
.app-stack{padding:110px 0;background:#fff}
.app-stack .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ast{width:100%;border-collapse:collapse;font-size:15px}
.ast th{text-align:left;font-size:12.5px;font-weight:700;color:var(--gray);padding:0 20px 12px 0;border-bottom:1px solid var(--ink)}
.ast td{padding:20px 20px 20px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--gray);line-height:1.55}
.ast td:first-child{width:22%}
.ast td:nth-child(2){width:36%}
.ast td b{color:var(--ink);font-size:16px}
.ast-l{display:inline-flex;align-items:center;gap:7px;margin:0 16px 6px 0;color:var(--ink);font-weight:600;white-space:nowrap}
.ast-l svg{width:18px;height:18px}
@media(max-width:760px){.ast td,.ast th{min-width:10rem}.app-stack{padding:76px 0}}

/* ---------- гарантии: фото-фон, строгая сетка ---------- */
.app-trust{padding:110px 0;background:#14222D url(../../img/apps/app-trust-bg.webp) center/cover no-repeat;color:#fff}
.app-trust h2{color:#fff;margin-bottom:44px}
.app-trust h2 em{color:#9CC3DD}
.app-trust-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.28)}
.app-trust-list li{display:flex;gap:16px;align-items:flex-start;padding:26px 26px 30px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.app-trust-list li:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid rgba(255,255,255,.14)}
.app-trust-list b{display:block;font-size:17px;margin-bottom:6px}
.app-trust-list li > div > span{color:#C3D1DC;font-size:15px;line-height:1.55}
.app-ti{flex-shrink:0;color:#fff;display:flex;padding-top:1px}
.app-ti svg{width:26px;height:26px}
.app-ti .du{fill:#fff;opacity:.16}
@media(max-width:1000px){.app-trust-list{grid-template-columns:1fr 1fr}.app-trust-list li:not(:nth-child(3n+1)){padding-left:0;border-left:0}.app-trust-list li:nth-child(2n){padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}}
@media(max-width:640px){.app-trust-list{grid-template-columns:1fr}.app-trust-list li:nth-child(2n){padding-left:0;border-left:0}.app-trust{padding:76px 0}}

/* ---------- кейсы ---------- */
.app-cases{padding:120px 0 40px;background:#fff}
.app-case{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px 56px;padding:34px 0;border-top:1px solid var(--line)}
.app-case:last-child{border-bottom:1px solid var(--line)}
.app-case-tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:10px}
.app-case h3{font:800 22px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:-.01em}
.app-case p{color:var(--gray);font-size:16px;line-height:1.6}
.app-case .logo-strip{grid-column:2}
@media(max-width:900px){.app-case{grid-template-columns:1fr}.app-case .logo-strip{grid-column:1}.app-cases{padding:76px 0 30px}}

/* ---------- цены: иконки без цветной плитки ---------- */
.appp .svc-plan .sp-ic{background:none;color:var(--ink);border:1px solid var(--line)}
.appp .svc-plan .sp-ic .du{fill:currentColor;opacity:.12}
.svc-plan .sp-price.sp-price--txt{font-size:clamp(22px,2.2vw,28px)}
.appp .svc-price-note a{color:var(--blue)}
@media(prefers-reduced-motion:reduce){.amf,.amap-arr{transition:none}}