/* ==========================================================================
   YuSMP — usluga (service) detail pages
   Hero with themed floating gadgets on the right + shared gadget library.
   Ported from concept-a-studio hero so every service page can reuse it.
   ========================================================================== */

/* ---- hero layout ---- */
.usluga-hero{padding:26px 0 30px;position:relative;overflow:visible}
/* tighter transition into the first content block ("Что входит") */
.usluga-hero + section{padding-top:34px}
.uh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.uh-copy .eyebrow{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.uh-copy h1{font-size:clamp(32px,4.2vw,52px);font-weight:700;line-height:1.06;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.uh-copy .lead{font-size:19px;color:var(--ink-soft);max-width:48ch;margin:22px 0 18px}
/* описание в hero + воздух до кнопок (запрос Артура #461) */
.uh-copy .uh-desc{font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:52ch;margin:0 0 34px}
.uh-copy .hero-cta{margin-top:2px}
.uh-copy .uh-note{margin-top:22px;font-size:13.5px;color:var(--ink-soft)}
.uh-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.uh-tags li{font-size:13px;font-weight:500;color:var(--ink-soft);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px}

/* ---- open stage (frameless) ---- */
/* shorter стейдж → плашки-гаджеты кучнее и меньше пустоты под hero */
.hero-vis{position:relative;aspect-ratio:1/1;max-height:440px;margin:0 auto;cursor:default}
.hero-vis canvas{position:absolute;inset:-8%;width:116%;height:116%;display:block;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.hero-vis .breathe{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:-1;
  left:6%;top:8%;background:radial-gradient(circle,rgba(46,92,242,.22),transparent 70%);animation:uh-breathe 7s ease-in-out infinite}
.hero-vis .breathe.y{background:radial-gradient(circle,rgba(255,211,0,.26),transparent 70%);left:auto;right:0;bottom:6%;top:auto;width:52%;animation-delay:-3.2s}
@keyframes uh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

.orbit{position:absolute;inset:0;perspective:900px;pointer-events:none}
.hcard{position:absolute;pointer-events:auto;cursor:pointer;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .35s,filter .35s;will-change:transform}
@keyframes uh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hcard>:first-child{border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 40px -18px rgba(19,21,26,.5),0 2px 8px rgba(46,92,242,.06);overflow:hidden;
  animation:uh-float 8s ease-in-out infinite}
.hcard:nth-child(2)>:first-child{animation-delay:-2.6s}.hcard:nth-child(3)>:first-child{animation-delay:-5.2s}.hcard:nth-child(4)>:first-child{animation-delay:-7s}
.hcard:hover{filter:none;z-index:5}
.hcard:hover>:first-child{box-shadow:0 26px 60px -20px rgba(46,92,242,.55),0 0 0 1.5px rgba(46,92,242,.5),0 0 40px rgba(46,92,242,.28)}
.ptag{display:block;margin-top:9px;font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:999px;padding:5px 11px;width:max-content;max-width:210px;
  box-shadow:0 6px 16px -10px rgba(19,21,26,.5);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.hcard:hover .ptag{opacity:1;transform:none}

/* ============================ GADGET LIBRARY ============================ */
/* phone */
.g-phone .phone{width:120px;padding:8px}
.ph-notch{width:36px;height:5px;border-radius:3px;background:#c8d0e2;margin:1px auto 6px}
.ph-screen{border-radius:11px;background:linear-gradient(160deg,#1b3fc0,#2e5cf2);color:#fff;padding:11px 12px 12px}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;opacity:.85;font-weight:600}
.ph-dot{width:14px;height:5px;border-radius:3px;background:rgba(255,255,255,.5)}
.ph-bal{margin:9px 0 10px;font-size:10px;opacity:.85}.ph-bal b{font-family:"Manrope";font-size:17px;letter-spacing:-.02em}
.ph-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-bottom:11px}
.ph-bars i{flex:1;background:rgba(255,255,255,.42);border-radius:2px}.ph-bars i:nth-child(4){background:var(--yellow)}
.ph-btn{background:var(--yellow);color:var(--ink);text-align:center;font-size:10px;font-weight:700;padding:7px;border-radius:8px}

/* window / dashboard */
.g-dash .win{width:190px}
.win-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;background:#f3f5fa;border-bottom:1px solid var(--line);font-size:10px;color:var(--ink-soft)}
.win-bar i{width:8px;height:8px;border-radius:50%;background:#d3dae8}.win-bar i:first-child{background:#ff6058}.win-bar i:nth-child(2){background:#ffd300}.win-bar i:nth-child(3){background:#28c840}.win-bar span{margin-left:6px}
.win-body{padding:12px;position:relative;display:flex;flex-direction:column;gap:8px}
.chart{width:100%;height:52px;display:block}
.chart polyline{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;animation:uh-draw 2.4s ease-out .3s forwards}
.chart polygon{fill:rgba(46,92,242,.12)}
@keyframes uh-draw{to{stroke-dashoffset:0}}
.win-kpi{order:-1;align-self:flex-end;text-align:right;line-height:1.1}
.win-kpi span:first-child{font-family:"Manrope";font-weight:700;color:#0f9d58;font-size:15px}
.win-kpi span:last-child{display:block;font-size:9px;color:var(--ink-soft)}

/* code terminal */
.g-code .code{width:176px;background:#0f1420;padding:12px 13px;font-family:"JetBrains Mono","SFMono-Regular",monospace;font-size:10.5px;line-height:1.9}
.code .cl{color:#c9d4ee;white-space:nowrap}.code em{color:#6d8dff;font-style:normal;font-weight:700}
.code s{color:#ff9ec7;text-decoration:none}.code .ok{color:#5ee6a8}.code .cm{color:#5b6480}

/* figma / design canvas */
.g-figma .fig{width:132px;height:100px;position:relative;background:#fbfcff;padding:12px}
.fig span{position:absolute;border-radius:7px}
.fig-a{left:12px;top:12px;width:46px;height:30px;background:linear-gradient(135deg,#2e5cf2,#6d8dff)}
.fig-b{right:12px;top:12px;width:44px;height:44px;border-radius:50%;background:var(--yellow)}
.fig-c{left:12px;bottom:12px;right:12px;height:26px;background:#e4ebfb;border:1.5px dashed #b9c6ee}
.fig-cur{position:absolute;left:52%;top:48%;width:19px;height:19px;fill:var(--ink);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));animation:uh-cur 5s ease-in-out infinite}
@keyframes uh-cur{0%,100%{transform:translate(0,0)}30%{transform:translate(-14px,10px)}60%{transform:translate(10px,-8px)}}

/* push / toast notification */
.g-push .toast{width:186px;padding:11px 12px;display:flex;gap:10px;align-items:flex-start}
.toast .ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2e5cf2,#6d8dff);color:#fff;display:grid;place-items:center;font-size:15px;flex:none}
.toast .tx b{display:block;font-family:"Manrope";font-size:12px;color:var(--ink)}
.toast .tx span{font-size:10.5px;color:var(--ink-soft)}
.toast .tx em{font-style:normal;color:#f5a623}

/* color palette */
.g-palette .pal{width:150px;padding:12px}
.pal .sw{display:flex;gap:7px;margin-bottom:10px}
.pal .sw i{flex:1;height:34px;border-radius:8px}
.pal .sw i:nth-child(1){background:#2e5cf2}.pal .sw i:nth-child(2){background:#6d8dff}.pal .sw i:nth-child(3){background:var(--yellow)}.pal .sw i:nth-child(4){background:#13151a}
.pal .type{font-family:"Manrope";font-weight:700;font-size:20px;color:var(--ink);line-height:1}
.pal .type small{display:block;font-family:"Manrope";font-weight:400;font-size:10px;color:var(--ink-soft);margin-top:4px}

/* sprint / timeline */
.g-sprint .sprint{width:184px;padding:12px 13px}
.sprint b{font-family:"Manrope";font-size:11px;color:var(--ink);display:block;margin-bottom:9px}
.sprint .row{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:9.5px;color:var(--ink-soft)}
.sprint .row span{width:34px;flex:none}
.sprint .bar{height:8px;border-radius:4px;background:#e4ebfb;overflow:hidden}
.sprint .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#2e5cf2,#6d8dff)}
.sprint .row:nth-child(4) .bar i{background:var(--yellow)}

/* funnel */
.g-funnel .funnel{width:172px;padding:13px}
.funnel b{font-family:"Manrope";font-size:11px;color:var(--ink);display:block;margin-bottom:10px}
.funnel .fb{margin:0 auto 7px;height:20px;border-radius:6px;background:linear-gradient(90deg,#2e5cf2,#6d8dff);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:9px;font-weight:700}
.funnel .fb:nth-child(2){width:100%}.funnel .fb:nth-child(3){width:78%}.funnel .fb:nth-child(4){width:54%}.funnel .fb:nth-child(5){width:33%;background:var(--yellow);color:var(--ink)}

/* team / avatars */
.g-team .team{width:180px;padding:13px}
.team b{font-family:"Manrope";font-size:11px;color:var(--ink);display:block;margin-bottom:11px}
.team .av{display:flex;margin-bottom:11px}
.team .av span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-9px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;font-family:"Manrope"}
.team .av span:first-child{margin-left:0}
.team .av span:nth-child(1){background:#2e5cf2}.team .av span:nth-child(2){background:#6d8dff}.team .av span:nth-child(3){background:#f5a623}.team .av span:nth-child(4){background:#13151a}.team .av span:nth-child(5){background:#3aa76d}
.team .rl{font-size:9.5px;color:var(--ink-soft);line-height:1.7}

/* kanban */
.g-kanban .kan{width:184px;padding:12px;display:flex;gap:7px}
.kan .col{flex:1}
.kan .col b{font-size:8.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:6px}
.kan .t{height:16px;border-radius:5px;background:#e9eefb;margin-bottom:5px}
.kan .col:nth-child(2) .t{background:#dbe6ff}.kan .col:nth-child(3) .t:first-of-type{background:#d6f3e2}
.kan .t.y{background:var(--yellow);opacity:.55}

/* tests / checklist */
.g-tests .tests{width:180px;padding:12px 13px;font-size:10.5px}
.tests b{font-family:"Manrope";font-size:11px;color:var(--ink);display:flex;justify-content:space-between;margin-bottom:9px}
.tests b em{font-style:normal;color:#0f9d58}
.tests .li{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--ink-soft)}
.tests .li i{width:15px;height:15px;border-radius:50%;background:#0f9d58;color:#fff;display:grid;place-items:center;font-size:9px;flex:none}
.tests .li.run i{background:var(--yellow);color:var(--ink)}

/* uptime monitor */
.g-uptime .up{width:176px;padding:13px}
.up .h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.up .h b{font-family:"Manrope";font-size:22px;color:#0f9d58}
.up .h span{font-size:9.5px;color:var(--ink-soft)}
.up .spark{display:flex;align-items:flex-end;gap:3px;height:30px}
.up .spark i{flex:1;background:#cfe8d8;border-radius:2px}
.up .spark i.g{background:#0f9d58}.up .spark i.d{background:#ff6058;height:38%!important}

/* roadmap */
.g-roadmap .rm{width:180px;padding:13px}
.rm b{font-family:"Manrope";font-size:11px;color:var(--ink);display:block;margin-bottom:11px}
.rm .step{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:10px;color:var(--ink-soft);position:relative}
.rm .step i{width:12px;height:12px;border-radius:50%;border:2px solid #cdd8f0;background:#fff;flex:none}
.rm .step.done i{background:#2e5cf2;border-color:#2e5cf2}
.rm .step.now i{border-color:var(--yellow);background:var(--yellow)}

/* ==================== BESPOKE THEMATIC GADGETS ==================== */
/* каждый — узнаваемый «парящий» реквизит под конкретную услугу */

/* --- devices: iPhone / Android --- */
.g-dev .dv{width:116px;padding:7px 7px 9px;background:#0e1626}
.dv-island{display:block;width:34px;height:9px;border-radius:6px;background:#000;margin:0 auto 6px}
.dv-punch{display:block;width:7px;height:7px;border-radius:50%;background:#000;margin:2px auto 6px}
.dv-scr{border-radius:12px;background:linear-gradient(165deg,#eaf0ff,#fff);padding:9px;color:var(--ink)}
.dv-scr.mt{background:linear-gradient(165deg,#e8f7ee,#fff)}
.dv-row{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;font-weight:700;color:var(--ink-soft)}
.dv-ap{width:20px;height:6px;border-radius:3px;background:linear-gradient(90deg,#2e5cf2,#6d8dff)}
.dv-ap.g{background:linear-gradient(90deg,#1aa260,#3aca86)}
.dv-hi{font-family:"Manrope";font-weight:700;font-size:12px;margin:8px 0 6px}
.dv-tile{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 8px;font-size:8.5px;color:var(--ink-soft);margin-bottom:8px}
.dv-tile b{display:block;font-family:"Manrope";font-size:14px;color:var(--ink)}
.dv-chips{display:flex;gap:4px;margin:8px 0}
.dv-chips i{flex:1;height:14px;border-radius:5px;background:#e5edff}
.dv-chips i:nth-child(2){background:#dff3e8}
.dv-cta{text-align:center;font-size:9px;font-weight:700;padding:6px;border-radius:8px;color:#fff}
.dv-cta.blue{background:#000}
.dv-cta.green{background:#1aa260}

/* --- dual phones (cross-platform) --- */
.g-duo .duo{width:150px;height:124px;padding:10px;position:relative}
.duo-p{position:absolute;width:52px;height:92px;border-radius:12px;background:#0e1626;padding:5px}
.duo-p span{display:block;width:16px;height:4px;border-radius:2px;background:#33405e;margin:0 auto 5px}
.duo-p i{display:block;height:6px;border-radius:3px;background:#cdd8f0;margin:4px}
.duo-p i.b{background:var(--yellow)}
.duo-p.a{left:14px;top:6px;transform:rotate(-6deg);z-index:2}
.duo-p.b{left:64px;top:12px;transform:rotate(6deg);background:#14203a}
.duo-tag{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:"Manrope";font-size:9px;font-weight:700;color:var(--ink)}

/* --- app store badges --- */
.g-stores .stores{width:172px;padding:10px;display:flex;flex-direction:column;gap:8px}
.stores .st{display:flex;align-items:center;gap:9px;background:#0f1420;border-radius:10px;padding:8px 10px;color:#fff}
.stores .st-ic{width:20px;height:20px;flex:none;border-radius:5px;background:#fff}
.stores .st-ic.gp{background:linear-gradient(135deg,#00c6ff,#3aca86,#ffd300)}
.stores .st small{display:block;font-size:7px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.stores .st b{font-family:"Manrope";font-size:11px}

/* --- bank card --- */
.g-card .bcard{width:174px;height:104px;padding:14px;background:linear-gradient(135deg,#1b3fc0,#2e5cf2 55%,#6d8dff);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.bcard .bc-t{display:flex;justify-content:space-between;align-items:center}
.bcard .chip{width:26px;height:19px;border-radius:5px;background:linear-gradient(135deg,#ffe08a,#d9a441)}
.bcard .bc-nfc{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.bcard .bc-num{font-family:"Manrope";font-size:13px;letter-spacing:.06em}
.bcard .bc-b{display:flex;justify-content:space-between;align-items:center;font-size:9px}
.bcard .bc-brand{font-family:"Manrope";font-weight:700;font-size:14px;font-style:italic}

/* --- transactions feed --- */
.g-txn .txn{width:180px;padding:12px}
.txn>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:9px;color:var(--ink)}
.txn .tx-r{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:10px;color:var(--ink-soft)}
.txn .tx-i{width:9px;height:9px;border-radius:50%;flex:none}
.txn .tx-i.in{background:#0f9d58}.txn .tx-i.out{background:#ff6058}
.txn .tx-l{flex:1}
.txn b.in{color:#0f9d58;font-family:"Manrope";font-size:10.5px}
.txn b.out{color:#ff6058;font-family:"Manrope";font-size:10.5px}

/* --- wallet / portfolio --- */
.g-wallet .wal{width:176px;padding:12px}
.wal .wal-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.wal .wal-h span{font-size:9.5px;color:var(--ink-soft)}
.wal .wal-h b{font-family:"Manrope";font-size:15px;color:var(--ink)}
.wal .wal-r{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ink-soft);margin-bottom:7px}
.wal .wal-r i{width:9px;height:9px;border-radius:3px;flex:none}
.wal .wal-r em{margin-left:auto;font-style:normal;color:#0f9d58;font-family:"Manrope";font-size:10px}

/* --- investment bars --- */
.g-invest .inv{width:176px;padding:12px}
.inv .inv-h{margin-bottom:9px}
.inv .inv-h b{font-family:"Manrope";font-size:18px;color:#0f9d58}
.inv .inv-h span{display:block;font-size:9px;color:var(--ink-soft)}
.inv .inv-c{display:flex;align-items:flex-end;gap:5px;height:44px}
.inv .inv-c i{flex:1;border-radius:2px;background:#cfe8d8}
.inv .inv-c i.g{background:#0f9d58}.inv .inv-c i.r{background:#ff8f8a}

/* --- processing ledger --- */
.g-ledger .ldg{width:186px;padding:12px}
.ldg .ldg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.ldg .ldg-h span{font-family:"Manrope";font-size:11px;color:var(--ink)}
.ldg .ldg-h em{font-style:normal;font-size:9px;color:#0f9d58}
.ldg .ldg-r{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--ink-soft);margin-bottom:6px}
.ldg .ldg-r b{font-family:"Manrope";color:var(--ink);font-size:10px;margin-left:auto}
.ldg .ldg-r i{width:11px;height:11px;border-radius:50%;flex:none}
.ldg .ldg-r i.ok{background:#0f9d58}.ldg .ldg-r i.run{background:var(--yellow)}

/* --- ECG / heart rate --- */
.g-ecg .ecg{width:172px;padding:12px}
.ecg .ecg-h{margin-bottom:6px}
.ecg .ecg-h b{font-family:"Manrope";font-size:20px;color:#e5484d}
.ecg .ecg-h span{font-size:9px;color:var(--ink-soft);margin-left:4px}
.ecg svg{width:100%;height:40px;display:block}
.ecg polyline{fill:none;stroke:#e5484d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:uh-draw 2.6s ease-out .2s forwards}

/* --- telemedicine video --- */
.g-tmed .tmed{width:168px;padding:10px}
.tmed .tm-v{height:78px;border-radius:11px;background:linear-gradient(160deg,#1b3fc0,#2e5cf2);position:relative;overflow:hidden;margin-bottom:9px}
.tmed .tm-live{position:absolute;left:8px;top:8px;font-size:8px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);padding:3px 6px;border-radius:20px}
.tmed .tm-face{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#ffd9b8 0 42%,#e7eefc 43%)}
.tmed .tm-b{display:flex;align-items:center;gap:9px}
.tmed .tm-ava{width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,#2e5cf2,#6d8dff);flex:none}
.tmed .tm-b b{display:block;font-family:"Manrope";font-size:11px;color:var(--ink)}
.tmed .tm-b small{font-size:9px;color:var(--ink-soft)}

/* --- appointment slots --- */
.g-appt .appt{width:170px;padding:12px}
.appt>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.appt .ap-d{display:flex;gap:5px;margin-bottom:9px}
.appt .ap-d span{flex:1;text-align:center;font-size:9px;color:var(--ink-soft);padding:5px 0;border-radius:6px;background:#f1f4fb}
.appt .ap-d span.on{background:var(--blue);color:#fff;font-weight:700}
.appt .ap-s{display:flex;gap:6px}
.appt .ap-s span{font-size:9px;padding:5px 8px;border-radius:7px;border:1px solid var(--line);color:var(--ink-soft)}
.appt .ap-s span.on{border-color:var(--blue);color:var(--blue);font-weight:700;background:var(--tint)}

/* --- doctor card --- */
.g-doccard .doc{width:184px;padding:12px;display:flex;gap:11px;align-items:center}
.doc .doc-av{width:44px;height:44px;border-radius:12px;flex:none;background:linear-gradient(150deg,#dbe6ff,#c4d6ff)}
.doc .doc-i b{display:block;font-family:"Manrope";font-size:12px;color:var(--ink)}
.doc .doc-i small{display:block;font-size:9px;color:var(--ink-soft);margin:2px 0 4px}
.doc .doc-stars{font-size:9px;color:#f5a623;font-weight:700}

/* --- product / catalog grid --- */
.g-prod .prod{width:170px;padding:12px}
.prod .pr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px}
.prod .pr-g span{aspect-ratio:1;border-radius:7px;background:linear-gradient(150deg,#e7eefc,#d6e2fb)}
.prod .pr-g span:nth-child(2){background:linear-gradient(150deg,#fff2c9,#ffe79a)}
.prod .pr-g span:nth-child(5){background:linear-gradient(150deg,#d7f0e2,#bde8d0)}
.prod .pr-b{display:flex;justify-content:space-between;align-items:baseline}
.prod .pr-b span{font-size:9px;color:var(--ink-soft)}
.prod .pr-b b{font-family:"Manrope";font-size:12px;color:var(--ink)}

/* --- cart / checkout --- */
.g-cart .cart{width:176px;padding:12px}
.cart .cr-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cart .cr-ic{width:18px;height:18px;border-radius:5px;background:var(--blue);flex:none}
.cart .cr-h b{font-family:"Manrope";font-size:11px;color:var(--ink)}
.cart .cr-r{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cart .cr-r span{width:22px;height:22px;border-radius:6px;background:#e7eefc;flex:none}
.cart .cr-r em{margin-left:auto;font-style:normal;font-family:"Manrope";font-size:10px;color:var(--ink)}
.cart .cr-btn{margin-top:4px;text-align:center;font-size:9.5px;font-weight:700;color:var(--ink);background:var(--yellow);padding:7px;border-radius:8px}

/* --- loyalty card --- */
.g-loy .loy{width:176px;padding:14px;background:linear-gradient(135deg,#13151a,#2b3350);color:#fff}
.loy .loy-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.loy .loy-t span:first-child{font-size:9px;opacity:.8}
.loy .loy-qr{width:22px;height:22px;border-radius:5px;background:conic-gradient(#fff 0 25%,#8b93a8 0 50%,#fff 0 75%,#8b93a8 0);background-size:7px 7px}
.loy .loy-p{font-family:"Manrope";font-size:11px;margin-bottom:9px}
.loy .loy-p b{font-size:19px}
.loy .loy-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;margin-bottom:5px}
.loy .loy-bar i{display:block;height:100%;background:var(--yellow)}
.loy small{font-size:8.5px;opacity:.7}

/* --- orders list --- */
.g-ord .ord{width:172px;padding:12px}
.ord>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:9px;color:var(--ink)}
.ord .or-r{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:10px;color:var(--ink-soft)}
.ord .or-r em{font-style:normal;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px}
.ord .or-r em.st1{background:#e7eefc;color:var(--blue)}
.ord .or-r em.st2{background:#fff2c9;color:#a4790a}
.ord .or-r em.st3{background:#d7f0e2;color:#0f9d58}

/* --- food order --- */
.g-food .food{width:176px;padding:11px;display:flex;gap:11px;align-items:center}
.food .fd-img{width:48px;height:48px;border-radius:12px;flex:none;background:radial-gradient(circle at 50% 40%,#ffcf87 0 42%,#ffe6c2 43%)}
.food .fd-b{flex:1}
.food .fd-b b{font-family:"Manrope";font-size:11px;color:var(--ink)}
.food .fd-b small{display:block;font-size:9px;color:var(--ink-soft);margin:2px 0 6px}
.food .fd-bar{height:6px;border-radius:3px;background:#f0e2cf;overflow:hidden}
.food .fd-bar i{display:block;height:100%;background:#f5a623}

/* --- courier map --- */
.g-cour .cour{width:170px;padding:11px}
.cour .cr-map{height:70px;border-radius:11px;background:linear-gradient(160deg,#eef3fb,#e2ebfa);position:relative;overflow:hidden;margin-bottom:9px}
.cour .cr-route{position:absolute;left:16px;top:44px;width:120px;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 11px);transform:rotate(-18deg)}
.cour .cr-pin{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff}
.cour .cr-pin.a{left:12px;bottom:12px;background:var(--blue)}
.cour .cr-pin.b{right:14px;top:12px;background:var(--yellow)}
.cour .cr-eta{display:flex;align-items:baseline;gap:6px}
.cour .cr-eta b{font-family:"Manrope";font-size:15px;color:var(--ink)}
.cour .cr-eta span{font-size:9px;color:var(--ink-soft)}

/* --- restaurant menu --- */
.g-menu .menu{width:172px;padding:12px}
.menu>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.menu .mn-r{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:10px;color:var(--ink-soft);border-bottom:1px dashed var(--line);padding-bottom:6px}
.menu .mn-r em{font-style:normal;font-family:"Manrope";font-size:10px;color:var(--ink)}

/* --- table reservation --- */
.g-resv .resv{width:176px;padding:12px}
.resv>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.resv .rs-tables{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.resv .rs-tables i{aspect-ratio:1;border-radius:6px;background:#eef2fb;border:1px solid var(--line)}
.resv .rs-tables i.on{background:var(--blue);border-color:var(--blue)}
.resv .rs-b{font-size:9px;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px}
.resv .rs-ok{color:var(--blue);font-weight:700}

/* --- hotel room --- */
.g-room .room{width:176px;padding:11px}
.room .rm-img{height:66px;border-radius:11px;background:linear-gradient(160deg,#cbd8f2,#aec3ee);position:relative;margin-bottom:9px}
.room .rm-stars{position:absolute;left:9px;bottom:8px;font-size:9px;color:#fff;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.room .rm-b b{font-family:"Manrope";font-size:12px;color:var(--ink)}
.room .rm-p{display:flex;align-items:baseline;gap:5px;margin-top:3px}
.room .rm-p span:first-child{font-family:"Manrope";font-size:14px;color:var(--blue)}
.room .rm-n{font-size:9px;color:var(--ink-soft)}

/* --- booking calendar --- */
.g-cal .cal{width:172px;padding:12px}
.cal>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.cal .cl-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}
.cal .cl-g span{aspect-ratio:1;display:grid;place-items:center;font-size:9px;color:var(--ink-soft);border-radius:6px}
.cal .cl-g span.in,.cal .cl-g span.out{background:var(--blue);color:#fff;font-weight:700}
.cal .cl-g span.mid{background:var(--tint);color:var(--blue)}
.cal small{font-size:9px;color:var(--ink-soft)}

/* --- building / development --- */
.g-bld .bld{width:176px;padding:11px}
.bld .bl-sky{height:78px;border-radius:11px;background:linear-gradient(160deg,#eaf1fc,#dbe7f9);position:relative;overflow:hidden;margin-bottom:9px}
.bld .bl-t{position:absolute;bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#8ea6d8,#5f79b3)}
.bld .bl-t.a{left:18px;width:26px;height:40px}
.bld .bl-t.b{left:50px;width:30px;height:58px;background:linear-gradient(180deg,#6d8dff,#2e5cf2)}
.bld .bl-t.c{left:88px;width:26px;height:48px}
.bld .bl-crane{position:absolute;right:16px;top:8px;width:44px;height:2px;background:var(--yellow)}
.bld .bl-crane::before{content:"";position:absolute;right:0;top:0;width:2px;height:44px;background:var(--yellow)}
.bld .bl-crane::after{content:"";position:absolute;left:0;top:0;width:2px;height:16px;background:var(--yellow)}
.bld .bl-b{font-family:"Manrope";font-size:10px;color:var(--ink)}

/* --- gantt / construction progress --- */
.g-gantt .gantt{width:184px;padding:12px}
.gantt>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.gantt .gt-r{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:9px;color:var(--ink-soft)}
.gantt .gt-r span{width:52px;flex:none}
.gantt .gt-bar{flex:1;height:8px;border-radius:4px;background:#eef2fb;overflow:hidden}
.gantt .gt-bar i{display:block;height:100%;border-radius:4px;background:#cdd8f0}
.gantt .gt-bar.done i{background:#0f9d58}
.gantt .gt-bar.now i{background:var(--blue)}

/* --- blockchain --- */
.g-blk .blk{width:184px;padding:12px}
.blk>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:12px;color:var(--ink)}
.blk .bk-chain{display:flex;align-items:center;margin-bottom:9px}
.blk .bk-b{width:26px;height:26px;border-radius:7px;background:#e7eefc;border:1.5px solid #c4d6ff;display:grid;place-items:center;flex:none}
.blk .bk-b i{width:10px;height:10px;border-radius:3px;background:#8fabff}
.blk .bk-b.on{border-color:var(--blue);background:var(--tint)}
.blk .bk-b.on i{background:var(--blue)}
.blk .bk-l{flex:1;height:2px;background:repeating-linear-gradient(90deg,#c4d6ff 0 4px,transparent 4px 7px)}
.blk small{font-size:8.5px;color:var(--ink-soft)}

/* --- security shield --- */
.g-shl .shl{width:186px;padding:12px;display:flex;gap:11px}
.shl .sh-ic{width:30px;height:34px;flex:none;border-radius:8px 8px 14px 14px/8px 8px 22px 22px;background:linear-gradient(160deg,#3aa76d,#0f9d58);position:relative}
.shl .sh-ic::after{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-45deg);width:12px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff}
.shl .sh-b b{display:block;font-family:"Manrope";font-size:11px;color:var(--ink);margin-bottom:7px}
.shl .sh-r{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--ink-soft);margin-bottom:5px}
.shl .sh-r i{width:12px;height:12px;border-radius:50%;flex:none}
.shl .sh-r i.ok{background:#0f9d58}.shl .sh-r i.warn{background:var(--yellow)}

/* --- checklist --- */
.g-chk .chk{width:180px;padding:12px}
.chk>b{font-family:"Manrope";font-size:11px;display:block;margin-bottom:10px;color:var(--ink)}
.chk .ck-r{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--ink-soft);margin-bottom:8px}
.chk .ck-r i{width:15px;height:15px;border-radius:5px;border:1.5px solid #cdd8f0;flex:none;position:relative}
.chk .ck-r.done{color:var(--ink)}
.chk .ck-r.done i{background:var(--blue);border-color:var(--blue)}
.chk .ck-r.done i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* --- ТЗ document --- */
.g-tzdoc .tzdoc{width:166px;padding:13px}
.tzdoc .tz-h{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.tzdoc .tz-ic{width:20px;height:24px;border-radius:4px;background:var(--blue);flex:none}
.tzdoc .tz-h b{font-family:"Manrope";font-size:11px;color:var(--ink)}
.tzdoc .tz-l{height:7px;border-radius:4px;background:#e7eefc;margin-bottom:7px}
.tzdoc .tz-l.w2{width:80%}.tzdoc .tz-l.w1{width:56%}

/* --- sitemap tree --- */
.g-smap .smap{width:182px;padding:14px 12px}
.smap .sm-root{display:block;width:max-content;margin:0 auto 15px;font-family:"Manrope";font-size:10px;font-weight:700;color:#fff;background:var(--blue);padding:6px 12px;border-radius:8px;position:relative}
.smap .sm-root::after{content:"";position:absolute;left:50%;bottom:-11px;width:2px;height:11px;background:#c4d6ff}
.smap .sm-row{display:flex;gap:6px;justify-content:center}
.smap .sm-row span{flex:1;text-align:center;font-size:8.5px;color:var(--ink-soft);background:#eef2fb;border:1px solid var(--line);border-radius:7px;padding:6px 3px}

/* --- UX flow --- */
.g-flow .flow{width:186px;padding:13px 12px;display:flex;align-items:center;gap:6px}
.flow .fl-n{font-size:9px;font-weight:700;color:var(--ink-soft);background:#eef2fb;border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center;flex:1}
.flow .fl-n.on{background:var(--tint);border-color:var(--blue);color:var(--blue)}
.flow .fl-a{flex:none;width:12px;height:2px;background:var(--blue);position:relative}
.flow .fl-a::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-width:4px 0 4px 6px;border-style:solid;border-color:transparent transparent transparent var(--blue)}

/* --- Tilda blocks --- */
.g-tilda .tld{width:170px;padding:12px}
.tld .tl-blk{border-radius:7px;background:#eef2fb;border:1px solid var(--line);font-size:9px;color:var(--ink-soft);padding:8px 10px;margin-bottom:6px;font-family:"Manrope"}
.tld .tl-blk.cover{background:linear-gradient(135deg,#2e5cf2,#6d8dff);color:#fff;border-color:transparent;padding:14px 10px}
.tld .tl-pub{margin-top:8px;font-size:9px;font-weight:700;color:#0f9d58;text-align:center}

/* ---- responsive ---- */
@media(max-width:900px){
  .uh-grid{grid-template-columns:1fr;gap:30px}
  .hero-vis{display:none}
  .usluga-hero{padding:14px 0 26px}
}
@media(prefers-reduced-motion:reduce){
  .hcard>:first-child,.breathe,.chart polyline,.fig-cur{animation:none}
  .chart polyline{stroke-dashoffset:0}
}

/* ============================ SEO CONTENT BLOCKS ============================ */
/* Функции и возможности — 2-колоночный чек-лист */
.feat-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px 44px}
.feat-list li{position:relative;padding-left:32px;font-size:15.5px;color:var(--ink);line-height:1.5}
.feat-list li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:7px;
  background:var(--tint);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center}
@media(max-width:680px){.feat-list{grid-template-columns:1fr}}

/* Технологии — карточки-группы с чипами */
.tech-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.tech-grp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.tech-grp h4{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.tech-grp ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tech-grp li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 9px;transition:border-color .2s,background .2s}
.tech-grp li:hover{border-color:var(--blue);background:var(--card)}
.tech-grp li img,.tech-grp li svg{width:18px;height:18px;flex:none;display:block}
.tech-grp li svg{color:var(--ink-soft)}
/* кликабельные чипы стека → страницы технологий */
.tech-grp li:has(.tech-chip-link){padding:0}
.tech-grp li .tech-chip-link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;padding:6px 12px 6px 9px;border-radius:999px}
.tech-grp li:has(.tech-chip-link):hover{border-color:var(--blue);background:var(--card)}
.tech-grp li .tech-chip-link .tech-go{width:auto;height:auto;font-size:13px;color:var(--blue);opacity:0;transform:translateX(-3px);transition:opacity .2s,transform .2s}
.tech-grp li:hover .tech-chip-link .tech-go{opacity:1;transform:none}

/* Стоимость и сроки — 3 тарифа */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.price-grid>*{min-width:0}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
/* Сброс flex-раскладки .pcard из site.css (там justify-content:flex-end для bento),
   иначе короткие тарифы прижимаются к низу растянутой ячейки грида. */
.price-grid .pcard{display:block}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .25s,border-color .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
.pc-name{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue)}
.pc-price{font-family:"Manrope";font-size:26px;font-weight:700;letter-spacing:-.02em;margin:10px 0 4px}
.pc-term{font-size:14px;color:var(--ink-soft);margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pcard li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-soft)}
.pcard li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
.price-note{margin-top:22px;font-size:14px;color:var(--ink-soft)}

/* Наши проекты — bento-мозаика как на главной (scoped под .proj, чтобы не конфликтовать
   с .pcard тарифов выше). Светлая тема: картинка сбоку + текстовая панель. */
.proj{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:20px}
.proj .pcard{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:row;min-height:300px;isolation:isolate;text-decoration:none;color:var(--ink);padding:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.proj .pcard:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 28px 54px -28px rgba(46,92,242,.35)}
.proj .pcard .ph{position:relative;flex:0 0 44%;width:44%;align-self:stretch;overflow:hidden;background:var(--d-bg)}
.proj .pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.proj .pcard:hover .ph img{transform:scale(1.05)}
.proj .pcard .body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:22px 24px;color:var(--ink)}
.proj .pcard .tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--blue-ink);
  background:var(--tint);border:1px solid rgba(46,92,242,.16);padding:5px 12px;border-radius:100px;margin-bottom:13px;align-self:flex-start}
.proj .pcard h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:7px;line-height:1.2}
.proj .pcard p{color:var(--ink-soft);font-size:14px;line-height:1.5}
.proj .pcard .m{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}
.proj .pcard .m .n{font-family:"Manrope";font-size:19px;font-weight:600;color:var(--ink)}
.proj .pcard .m .l{font-size:12px;color:var(--ink-soft)}
.proj .pcard .go{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:.35s cubic-bezier(.16,1,.3,1)}
.proj .pcard .go svg{width:16px;height:16px}
.proj .pcard:hover .go{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translate(2px,-2px) rotate(-8deg)}
.proj .pcard.feat{grid-column:1/-1;min-height:340px}
.proj .pcard.feat .ph{flex:0 0 50%;width:50%}
.proj .pcard.feat h3{font-size:27px}.proj .pcard.feat p{font-size:15px}
.proj .pcard.tall{grid-column:auto;flex-direction:row}
.proj .pcard.tall .ph{flex:0 0 44%;width:44%}
.proj .pcard.tall .body{justify-content:center}
.proj .pcard.wide{grid-column:auto}
@media(max-width:820px){.proj{grid-template-columns:1fr;grid-auto-rows:auto}
  .proj .pcard,.proj .pcard.feat,.proj .pcard.tall{grid-column:1/-1!important;grid-row:auto!important;min-height:auto;flex-direction:column}
  .proj .pcard .ph,.proj .pcard.feat .ph,.proj .pcard.tall .ph{flex:0 0 210px;width:100%}}

/* Почему это выгодно — 2-колоночная журнальная проза (правило «no walls of text») */
.why-prose{columns:2;column-gap:48px}
.why-prose p{font-size:16.5px;line-height:1.62;color:var(--ink-soft);break-inside:avoid;margin-bottom:16px}
.why-prose p:last-child{margin-bottom:0}
@media(max-width:820px){.why-prose{columns:1}}

/* Смежные услуги — перелинковка */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.rel-grid{grid-template-columns:1fr}}
.rel-card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
  text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.rel-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
.rel-card h3{font-size:17px;font-weight:600}
.rel-card span{font-size:14px;font-weight:600;color:var(--blue)}

/* Вводный SEO-лид под hero — журнальная 2-колонка (правило «no walls of text») */
.s-intro{padding-top:14px}
.seo-intro{columns:2;column-gap:52px}
.seo-intro p{font-size:16.5px;line-height:1.66;color:var(--ink-soft);break-inside:avoid;margin-bottom:17px}
.seo-intro p:first-child{font-size:20px;line-height:1.5;color:var(--ink);font-weight:500}
.seo-intro p:last-child{margin-bottom:0}
@media(max-width:820px){.seo-intro{columns:1}.seo-intro p:first-child{font-size:18px}}

/* Функции с описанием (title + пояснение) */
.feat-list--desc{grid-template-columns:1fr 1fr;gap:22px 44px}
.feat-list--desc li{padding-left:0}
.feat-list--desc li::before{display:none}
.feat-list--desc li b{position:relative;display:block;padding-left:30px;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.feat-list--desc li b::before{content:"✓";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:7px;
  background:var(--tint);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center}
.feat-list--desc li span{display:block;padding-left:30px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:680px){.feat-list--desc{grid-template-columns:1fr}}

/* Кому подходит */
.aud-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.aud-list li{position:relative;padding:15px 18px 15px 44px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;font-size:15px;line-height:1.5;color:var(--ink)}
.aud-list li::before{content:"→";position:absolute;left:18px;top:15px;color:var(--blue);font-weight:700}
@media(max-width:680px){.aud-list{grid-template-columns:1fr}}

/* ===== mobile hardening (2026-07-07) — услуги/tech: убираем горизонтальный обрез ===== */
@media(max-width:900px){
  .uh-grid>*{min-width:0}
  .uh-copy h1{overflow-wrap:break-word}
}
@media(max-width:820px){
  .feat-list>*,.feat-list--desc>*,.tech-groups>*,.price-grid>*,.rel-grid>*,
  .aud-list>*,.prod .pr-g>*{min-width:0}
}

/* SEO-паритет: чеклист-список (плоские пункты из живого сайта), 2 колонки */
ul.tick{list-style:none;padding:0;margin:0;columns:2;column-gap:44px}
ul.tick li{position:relative;padding-left:28px;margin-bottom:13px;font-size:16px;line-height:1.55;color:var(--ink-soft);break-inside:avoid}
ul.tick li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
.why-prose ul.tick{margin-top:8px}
@media(max-width:820px){ul.tick{columns:1}}

/* ============================================================================
   Ассоциативные hero-гаджеты по отрасли (запрос Артура #461, 2026-07-14)
   Стеклянная карточка (.hcard>:first-child уже даёт стекло/тень/float) с
   SVG-сценой + подпись. Сцены живут в build/hero_gadgets.py.
   ========================================================================== */
.gcard{padding:11px 12px 10px}
.gc-a .gcard{width:162px}
.gc-b .gcard{width:140px}
.gc-c .gcard{width:168px}
.gcard .scene{width:100%;height:auto;display:block;border-radius:11px}
.gcard .glabel{margin-top:9px;line-height:1.24}
.gcard .glabel b{font-family:"Manrope";font-weight:700;font-size:12px;color:var(--ink);display:block;letter-spacing:-.01em}
.gcard .glabel span{font-size:10px;color:var(--ink-soft)}

/* иконка-пиктограмма в карточках «Наши преимущества» — визуально завершают блок */
.adv-grid .fcard{display:flex;flex-direction:column}
.adv-grid .fcard .ai{width:46px;height:46px;border-radius:13px;background:var(--tint);color:var(--blue);
  display:grid;place-items:center;margin-bottom:16px;flex:none}
.adv-grid .fcard .ai svg{width:24px;height:24px;display:block}
.adv-grid .fcard p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}

/* ==========================================================================
   Тарифы «Стоимость» — единый стиль «точь-в-точь» с блоком тарифов на
   /services/ai-content (.ac-tier). Запрос Артура 2026-07-16 (#516):
   один шаблон-карточка тарифа на все услуги, где есть .price-grid.
   Повышенная специфичность (div.pc-*) — чтобы бить инлайновые правила в <head>.
   ========================================================================== */
.price-grid .pcard{display:flex;flex-direction:column;background:var(--card,#fff);
  border:1px solid var(--line,#e7ebf3);border-radius:20px;padding:28px 24px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  /* base .pcard (site.css) = overflow:hidden → срезал бы бейдж «Рекомендуем» (top:-12px) */
  overflow:visible}
/* base .pcard::after = курсор-глоу (mix-blend + opacity:0→1 на :hover). Из-за него
   прежний бейдж на ::after проявлялся ТОЛЬКО при наведении и обрезался — «что с ховером».
   Гасим глоу, а бейдж переносим на ::before (как .ac-tier.feat::before на ai-content). */
.price-grid .pcard::after{content:none;display:none}
.price-grid .pcard:hover{transform:translateY(-4px);border-color:#2e5cf2;
  box-shadow:0 28px 56px -34px rgba(31,52,120,.5)}
/* ⚠️ base .pcard.feat (site.css bento) = grid-column:span 4 + grid-row:span 2 →
   рекомендованный тариф раздувался во всю ширину и ломал ряд (карточки сыпались
   в столбик). Сбрасываем — в ряду тарифов feat = обычная колонка. */
.price-grid .pcard.feat{grid-column:auto;grid-row:auto}
.price-grid .pcard.feat{position:relative;border-color:#2e5cf2;
  box-shadow:0 28px 60px -32px rgba(46,92,242,.5)}
.price-grid .pcard.feat::before{content:"Рекомендуем";position:absolute;top:-12px;left:50%;
  transform:translateX(-50%);background:#ffd300;color:#13151a;font-size:11.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  white-space:nowrap;z-index:3;opacity:1;pointer-events:none}
/* название тарифа → .ac-tier .tn */
.price-grid .pcard div.pc-name{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.01em;text-transform:none;color:var(--ink,#13151a);margin:0 0 4px}
/* подзаголовок → .ac-tier .tv */
.price-grid .pcard div.pc-sub{font-size:13.5px;line-height:1.4;color:var(--ink-soft,#5a6478);
  margin:0 0 6px;min-height:2.6em}
/* цена → .ac-tier .tprice */
.price-grid .pcard div.pc-price{font-family:'Manrope',sans-serif;font-size:30px;font-weight:800;
  letter-spacing:0;color:var(--ink,#13151a);margin:14px 0 2px;line-height:1}
.price-grid .pcard div.pc-price small{font-size:14px;font-weight:600;color:var(--ink-soft,#5a6478)}
/* срок → .ac-tier .tsplit (убираем «тяжёлый» разделитель-бордер) */
.price-grid .pcard div.pc-term{font-size:12.5px;color:var(--ink-soft,#5a6478);margin:0;padding:0;border:0}
/* платформа/стек → светлая пилюля как .ac-tier .tfirst */
.price-grid .pcard div.pc-plat{display:inline-block;align-self:flex-start;font-size:12.5px;
  font-weight:700;color:#1b3aa8;background:#f5f7fd;border-radius:11px;padding:8px 12px;margin:12px 0 2px}
/* список → .ac-tier ul: зелёные круглые галочки */
.price-grid .pcard ul{list-style:none;padding:0;margin:18px 0 4px;display:grid;gap:10px}
.price-grid .pcard li{position:relative;padding-left:26px;font-size:14px;color:var(--ink,#13151a);
  line-height:1.45}
.price-grid .pcard li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  border-radius:50%;font-weight:400;
  background:#e7f7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2312996b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
/* «Результат» тарифа (страницы технологий Swift/Kotlin) → футер карточки в стиле .ac-tier,
   прижат к низу (pcard = flex-column), инертен на страницах без .pc-res. #748 (2026-07-24) */
.price-grid .pcard .pc-res{margin-top:auto;padding-top:16px;border-top:1px solid var(--line,#e7e9ef);
  font-size:13px;color:var(--ink,#13151a);line-height:1.5}
.price-grid .pcard .pc-res b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft,#5a6478);margin-bottom:6px}

/* ==========================================================================
   Тарифы — 4 в один ряд + кнопка «Выбрать тариф» + бейдж «Рекомендуем».
   Запрос Артура 2026-07-16 (#517): как на /services/ai-content (.ac-tiers).
   Ряд из 4 тарифов раскладываем в 4 колонки (ровно 4 карточки — не 3/5);
   кнопку и класс .feat навешивает shared usluga.js (переживает пересборку).
   ========================================================================== */
.price-grid:has(.pcard:nth-child(4)):not(:has(.pcard:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}
/* 2 тарифа → 2 равные колонки (не растягивать на всю ширину) */
.price-grid:has(.pcard:nth-child(2)):not(:has(.pcard:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){
  .price-grid:has(.pcard:nth-child(4)):not(:has(.pcard:nth-child(5))){grid-template-columns:1fr 1fr}}
/* margin для бейджа «Рекомендуем» (::after у .feat), чтобы не обрезался верхом ряда */
.price-grid{margin-top:14px}
/* кнопка выбора тарифа → как .ac-tier .btn: прижата к низу карточки, во всю ширину */
.price-grid .pcard ul{margin-bottom:18px}
.price-grid .pcard .btn.js-tier{margin-top:auto;width:100%;justify-content:center}
/* read-only поле «Выбранный тариф» в модалке — как .ac-tier-field на ai-content */
.ac-tier-field input{font-weight:800;color:#1b3aa8;
  background:linear-gradient(150deg,rgba(46,92,242,.09),rgba(46,92,242,.02));
  border-color:rgba(46,92,242,.4)!important;cursor:default}

/* ==========================================================================
   DARK THEME LAYER для service/usluga-страниц — marker usluga-dark-20260723
   Запрос Артура #719: «все страницы тёмными в технологиях и о компании».
   Инертен без data-theme="dark" на <html> (351 светлая услуга не тронута);
   применяется только к страницам с флагом (Технологии-дропдаун + О компании).
   Даркит хардкод-светлые поверхности hero-визуалов/виджетов, которые
   не покрывает токенный слой site.css (device-мокапы = мини-«скриншоты»).
   ========================================================================== */
html[data-theme="dark"] .hcard>:first-child{background:rgba(15,20,32,.94);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .ptag{background:rgba(15,20,32,.9);border-color:var(--line);color:var(--ink-soft)}
html[data-theme="dark"] .win-bar{background:#0b1020;color:var(--ink-soft)}
html[data-theme="dark"] .g-figma .fig{background:#0e1424}
html[data-theme="dark"] .fig-c{background:#16203c;border-color:#2a3a63}
html[data-theme="dark"] .ph-notch{background:#2a3450}
/* мелкие светлые «плитки/полосы» внутри виджетов → тёмные токены */
html[data-theme="dark"] .sprint .bar,
html[data-theme="dark"] .kan .t,
html[data-theme="dark"] .cart .cr-r span,
html[data-theme="dark"] .appt .ap-d span,
html[data-theme="dark"] .resv .rs-tables i,
html[data-theme="dark"] .gantt .gt-bar,
html[data-theme="dark"] .tzdoc .tz-l,
html[data-theme="dark"] .smap .sm-row span,
html[data-theme="dark"] .flow .fl-n,
html[data-theme="dark"] .tld .tl-blk,
html[data-theme="dark"] .blk .bk-b{background:#16203c;border-color:#2a3a63;color:var(--ink-soft)}
html[data-theme="dark"] .ord .or-r em.st1{background:rgba(46,92,242,.22);color:#7ea2ff}
html[data-theme="dark"] .rm .step i{background:#16203c;border-color:#2a3a63}
html[data-theme="dark"] .dv-scr{background:linear-gradient(165deg,#0e1424,#111a2e);color:var(--ink)}
html[data-theme="dark"] .dv-scr.mt{background:linear-gradient(165deg,#0d1a14,#111a2e)}
html[data-theme="dark"] .dv-tile{background:#111a2e;border-color:#2a3a63;color:var(--ink-soft)}
/* read-only поле выбранного тарифа — под тёмную тему */
html[data-theme="dark"] .ac-tier-field input{color:#cfe0ff;background:linear-gradient(150deg,rgba(46,92,242,.18),rgba(46,92,242,.05))}

/* ===== 3D technology logo hero (task #743) ===== */
.hero-vis:has(.tech3d){width:100%;height:min(440px,42vw);aspect-ratio:auto;max-height:none}
.tech3d{position:relative;width:100%;height:100%;max-width:520px;margin:0 auto;display:grid;place-items:center;perspective:1000px}
.t3d-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 60%,transparent),transparent 72%);filter:blur(24px);opacity:.7;animation:t3dPulse 6s ease-in-out infinite;z-index:0}
.t3d-grid{position:absolute;inset:0;border-radius:26px;background:linear-gradient(transparent 96%,color-mix(in srgb,var(--brand) 26%,transparent) 0) 0 0/36px 36px,linear-gradient(90deg,transparent 96%,color-mix(in srgb,var(--brand) 26%,transparent) 0) 0 0/36px 36px;-webkit-mask:radial-gradient(closest-side,#000,transparent 76%);mask:radial-gradient(closest-side,#000,transparent 76%);opacity:.4;transform:translateZ(-70px);z-index:0}
.t3d-ring{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;border:1px dashed color-mix(in srgb,var(--brand) 55%,transparent);transform:rotateX(74deg);animation:t3dOrbit 16s linear infinite;opacity:.5;z-index:1}
.t3d-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand);box-shadow:0 0 16px 3px color-mix(in srgb,var(--brand) 80%,transparent)}
.t3d-stage{position:relative;width:60%;aspect-ratio:1/1;transform-style:preserve-3d;z-index:2}
.t3d-obj{position:absolute;inset:0;transform-style:preserve-3d;animation:t3dSpin 9s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.t3d-lay{position:absolute;inset:0;transform:translateZ(calc(var(--k) * -1.5px));fill:var(--brand);filter:brightness(calc(1 - var(--k)*0.055))}
.t3d-lay[style*="--k:0"]{filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--brand) 50%,transparent))}
.t3d-def{position:absolute;width:0;height:0;overflow:hidden}
.t3d-badge{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);text-align:center;z-index:3}
.t3d-badge b{display:block;font-size:1.1rem;letter-spacing:.02em;color:var(--ink)}
.t3d-badge span{font-size:.7rem;opacity:.68;letter-spacing:.16em;text-transform:uppercase}
@keyframes t3dSpin{0%,100%{transform:rotateY(-34deg) rotateX(7deg)}50%{transform:rotateY(34deg) rotateX(-5deg)}}
@keyframes t3dPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:.82;transform:scale(1.05)}}
@keyframes t3dOrbit{to{transform:rotateX(74deg) rotateZ(360deg)}}
@media (max-width:720px){.tech3d{max-width:340px}.t3d-stage{width:58%}}
@media (prefers-reduced-motion:reduce){.t3d-obj,.t3d-ring,.t3d-glow{animation:none}.t3d-obj{transform:rotateY(-18deg) rotateX(7deg)}}

/* tech pages: keep the 3D logo visible on mobile (scoped via :has, task #743) */
@media(max-width:900px){
  .hero-vis:has(.tech3d){display:block;width:100%;height:min(340px,86vw);max-height:none;margin-top:6px}
  .hero-vis:has(.tech3d) .tech3d{max-width:300px}
}

/* stories: centered 2-card layout when a tech has only two real cases (task #743) */
.story-grid.story-grid--duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
@media(max-width:760px){.story-grid.story-grid--duo{grid-template-columns:1fr;max-width:420px}}