/* =====================================================================
   HPGroup Professional · Slide-deck v5 · дизайн-система сайта
   Grid из строк: HEADER · BODY (safe-zone) · FOOTER. БЕЗ ОБВОДОК —
   карточки на мягких тенях (как сайт). ink/cream/copper, Manrope+Mono.
   ===================================================================== */

@font-face { font-family:'Manrope'; font-weight:400; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Manrope'; font-weight:500; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/cyrillic-500-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:500; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Manrope'; font-weight:600; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/cyrillic-600-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:600; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/cyrillic-700-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Manrope'; font-weight:800; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/cyrillic-800-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:800; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/manrope@latest/latin-800-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/cyrillic-500-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/cyrillic-700-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212; }

:root{
  --ink:#0F1011; --cream:#F5F2EC; --paper:#FBF9F5; --sand:#EFEAE0; --cine:#0d0a07;
  --copper:#B8763C; --copper-dark:#9C6230; --copper-soft:rgba(184,118,60,0.10);
  --g900:#1A1A1A; --g700:#3B3835; --g500:#6E6962; --g300:#A8A199; --g200:#D9D3C9; --g100:#EAE6DD;
  --shadow:0 6px 30px -14px rgba(15,16,17,0.16);
  --shadow-lg:0 26px 60px -30px rgba(15,16,17,0.40);
  --font-sans:'Manrope',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --mx:72px; --mt:52px; --mb:44px;
  --row-head:88px; --row-foot:32px; --gap-hb:24px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{background:#e8e3da}
body{ font-family:var(--font-sans); color:var(--ink); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }

.deck{scroll-snap-type:y mandatory; height:100vh; overflow-y:scroll}
.slide-wrap{scroll-snap-align:center; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px}
.slide{ position:relative; width:1280px; height:720px; max-width:100%; background:var(--cream);
  border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -55px rgba(15,16,17,0.45);
  display:grid;
  grid-template-columns:var(--mx) 1fr var(--mx);
  grid-template-rows:var(--mt) var(--row-head) var(--gap-hb) 1fr var(--row-foot) var(--mb);
  grid-template-areas:". . ." ". head ." ". div ." ". body ." ". foot ." ". . .";
}
@media (max-width:1360px){ .slide{ width:min(1280px,calc(100vw - 56px)); height:auto; aspect-ratio:16/9 } }

.s-head{ grid-area:head; display:flex; flex-direction:column; justify-content:flex-start; min-height:0 }
.s-logo{ position:absolute; top:44px; right:var(--mx); height:26px; width:auto; z-index:5 }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--copper); letter-spacing:0.16em; text-transform:uppercase; margin-bottom:14px }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--copper); flex:none }
h2.head{ font-size:37px; font-weight:800; letter-spacing:-0.025em; line-height:1.05; color:var(--ink); white-space:nowrap }
h2.head em{ font-style:normal; color:var(--copper) }

.s-div{ grid-area:div; align-self:start; height:1px; background:var(--g100); width:100% }
.s-body{ grid-area:body; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start }
.s-body.center{ justify-content:center }

.s-foot{ grid-area:foot; display:flex; align-items:center; justify-content:space-between; align-self:end }
.pg{ font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--g300); letter-spacing:0.1em }
.pg b{ color:var(--copper); font-weight:700 }
.foot-note{ font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--g300); letter-spacing:0.06em }

.ico{ width:44px; height:44px; border-radius:12px; background:var(--copper-soft); display:flex; align-items:center; justify-content:center; color:var(--copper); flex:none }
.ico svg{ width:23px; height:23px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round }

/* ── VLIST ── */
.vlist{ flex:1; display:flex; flex-direction:column; justify-content:space-between; min-height:0 }
.vrow{ display:flex; gap:18px; align-items:flex-start }
.vrow .tx b{ display:block; font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; margin-bottom:3px }
.vrow .tx span{ display:block; font-size:14px; color:var(--g500); line-height:1.45 }

/* ── CARDS g3 (без обводок, тень) ── */
.g3{ flex:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:0 }
.g3.dir{ flex:1; min-height:0 }
.card{ background:var(--paper); border-radius:16px; box-shadow:var(--shadow); padding:28px; display:flex; flex-direction:column; min-height:0 }
.card .c-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.card .num-badge{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--copper); letter-spacing:0.06em }
.card .chk{ width:26px; height:26px; border-radius:50%; background:var(--copper); display:flex; align-items:center; justify-content:center; flex:none }
.card .chk svg{ width:14px; height:14px; stroke:#fff; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round }
.card h3{ font-size:20px; font-weight:700; letter-spacing:-0.015em; line-height:1.18; color:var(--ink); margin-bottom:10px }
.card p{ font-size:14px; color:var(--g500); line-height:1.5 }

/* care cards (сл.8) — заполняют высоту + графика-watermark */
.g3.care{ flex:1 }
.g3.care .card{ position:relative; overflow:hidden }
.g3.care .card .wm{ position:absolute; left:28px; bottom:28px; width:92px; height:92px; color:var(--copper); opacity:0.10; z-index:0; pointer-events:none }
.g3.care .card .wm svg{ width:100%; height:100%; stroke:currentColor; stroke-width:1.3; fill:none; stroke-linecap:round; stroke-linejoin:round }
.g3.care .card > *:not(.wm){ position:relative; z-index:1 }

/* trust cards (сл.5) — иконка + баланс */
.g3.trust .card{ justify-content:center; padding:34px 28px }
.g3.trust .card .ico{ width:52px; height:52px; border-radius:14px; margin-bottom:20px }
.g3.trust .card .ico svg{ width:27px; height:27px }
.g3.trust .card .t-no{ position:absolute; top:26px; right:28px; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--g300); letter-spacing:0.06em }
.g3.trust .card{ position:relative }

/* directions (сл.3) — фон + градиент + белый текст */
.g3.dir{ gap:20px }
.g3.dir .card{ position:relative; overflow:hidden; padding:0; justify-content:flex-end; box-shadow:var(--shadow) }
.g3.dir .card .bg{ position:absolute; inset:0; z-index:0 }
.g3.dir .card .bg img{ width:100%; height:100%; object-fit:cover; display:block }
.g3.dir .card .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,10,7,0.92) 0%,rgba(13,10,7,0.45) 42%,rgba(13,10,7,0.08) 100%) }
.g3.dir .card .dc{ position:relative; z-index:1; padding:30px 28px 28px }
.g3.dir .card .d-ico{ width:46px; height:46px; border-radius:12px; background:rgba(184,118,60,0.9); display:flex; align-items:center; justify-content:center; margin-bottom:14px }
.g3.dir .card .d-ico svg{ width:24px; height:24px; stroke:#fff; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round }
.g3.dir .card h3{ font-size:26px; font-weight:800; color:#fff; margin-bottom:8px }
.g3.dir .card p{ font-size:14px; color:rgba(245,242,236,0.88); line-height:1.45 }

/* ── PRICES ── */
.prices{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,1fr) auto; gap:10px 24px; min-height:0 }
.prow{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--paper); border-radius:12px; box-shadow:var(--shadow); padding:0 22px }
.prow .role{ font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-0.01em }
.prow .rate{ flex:none; font-family:var(--font-mono); font-size:13px; font-weight:700; color:#fff; background:var(--copper); border-radius:8px; padding:6px 12px; letter-spacing:-0.02em; white-space:nowrap }
.prow .rate span{ font-weight:500; opacity:0.85; font-size:11px }
/* Разнорабочие — тёмная плашка */
.price-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--ink); border-radius:12px; padding:15px 24px; box-shadow:var(--shadow) }
.price-foot .role{ font-size:16px; font-weight:800; color:var(--cream) }
.price-foot .note{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:#E9A567; letter-spacing:-0.01em }

/* ── NUMBERS (сл.7) — КАК НА САЙТЕ: крупные mono-цифры, линия сверху, шахматка ── */
/* ступенька: 10 внизу слева → 24/7 вверху справа */
.exp{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; align-items:start; min-height:0 }
.estat{ padding-top:22px; border-top:2px solid var(--ink); display:flex; flex-direction:column }
.estat:nth-child(1){ transform:translateY(300px) }
.estat:nth-child(2){ transform:translateY(200px) }
.estat:nth-child(3){ transform:translateY(100px) }
.estat:nth-child(4){ transform:translateY(0) }
.estat .en{ font-family:var(--font-mono); font-size:74px; font-weight:700; line-height:1; letter-spacing:-0.04em; color:var(--ink) }
.estat .en sub{ font-size:23px; vertical-align:baseline; bottom:0; color:var(--copper) }
.estat .el{ font-size:14.5px; color:var(--g500); margin-top:18px; line-height:1.45; min-height:2.9em }

/* ── RECOMMENDATIONS (сл.9) — КАК НА САЙТЕ: фото-кейсы, featured=тёмная ── */
.cases{ flex:1; display:grid; grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:18px; min-height:0 }
.kase{ background:var(--paper); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); min-height:0 }
.kase.featured{ grid-column:1; grid-row:1 / 3; background:var(--ink); color:var(--cream) }
.kase .k-img{ flex:1; min-height:0; overflow:hidden }
.kase .k-img img{ width:100%; height:100%; object-fit:cover; display:block }
/* единая высота подложки под текст у всех карточек */
.kase .k-body{ flex:none; height:104px; padding:0 20px; display:flex; flex-direction:column; justify-content:center; gap:6px }
.kase .k-group{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--copper) }
.kase .k-name{ font-size:20px; font-weight:800; letter-spacing:-0.01em; line-height:1.15; color:var(--ink) }
.kase.featured .k-name{ font-size:22px; color:#fff }
.kase .k-desc{ font-size:12.5px; color:var(--g500); line-height:1.4 }
.kase.featured .k-desc{ color:rgba(245,242,236,0.72) }

/* ── CONTACTS ── */
.contacts{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:0 }
.contact{ background:var(--ink); color:var(--cream); border-radius:16px; padding:32px 32px 34px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); position:relative; overflow:hidden }
/* иконка — крупный чип в верхнем левом углу */
.contact .ic{ width:56px; height:56px; border-radius:14px; background:rgba(245,242,236,0.09); display:flex; align-items:center; justify-content:center; color:var(--copper); position:relative; z-index:1 }
.contact .ic svg{ width:28px; height:28px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round }
.contact .cwm{ display:none }
.contact .c-bottom{ position:relative; z-index:1; display:flex; flex-direction:column; gap:11px }
.contact .lbl{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--g300) }
.contact .val{ font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.4; min-height:2.8em }
.contact .val b{ color:var(--copper) }

/* ═══════════ ОБЛОЖКА — карточки-резюме (свайп/найм) ═══════════ */
.slide.cover{ display:block; background:linear-gradient(155deg,#FBF9F5 0%,#F0EADF 58%,#E7DFD1 100%); padding:0 }
.cover .cov-logo{ position:absolute; top:44px; left:76px; height:28px; z-index:6 }
.cover .cov-body{ position:absolute; left:76px; top:150px; width:470px; z-index:4 }
.cover .cov-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--copper); letter-spacing:0.16em; text-transform:uppercase; margin-bottom:24px }
.cover .cov-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--copper) }
.cover h1{ font-size:72px; font-weight:800; letter-spacing:-0.03em; line-height:0.98; color:var(--ink) }
.cover h1 em{ font-style:normal; color:var(--copper) }
.cover .cov-lead{ font-size:18px; line-height:1.55; color:var(--g700); max-width:40ch; margin-top:24px }
.cover .cov-stats{ display:flex; gap:36px; margin-top:44px }
.cover .cov-stats .s .v{ font-size:30px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.cover .cov-stats .s .v em{ font-style:normal; color:var(--copper) }
.cover .cov-stats .s .l{ font-size:12.5px; color:var(--g500); margin-top:5px; max-width:15ch; line-height:1.35 }
.cover .cov-pg{ position:absolute; bottom:38px; left:76px; z-index:6; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--g300); letter-spacing:0.1em }
.cover .cov-pg b{ color:var(--copper); font-weight:700 }
/* ── тайловая стена карточек-резюме (выходит за края слайда) ── */
.coverwall{ position:absolute; top:0; bottom:0; right:0; width:660px; z-index:1; display:flex; align-items:center; overflow:hidden }
.cwgrid{ display:grid; grid-template-columns:repeat(3,212px); gap:18px; transform:rotate(-7deg); margin:-40px -30px -40px 40px }
.tcard{ width:212px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; position:relative }
.tcard .tph{ height:138px; overflow:hidden; background:var(--sand) }
.tcard .tph img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.tcard .tinfo{ padding:12px 15px 15px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px }
.tcard .tl{ min-width:0 }
.tcard .tnm{ font-size:15.5px; font-weight:800; letter-spacing:-0.01em; color:var(--ink) }
.tcard .trl{ font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--g500); text-transform:uppercase; letter-spacing:0.05em; margin-top:3px }
.tcard .tst{ margin-top:9px; display:flex; align-items:center; gap:6px }
.tcard .tst .s{ color:var(--copper); font-size:12px; letter-spacing:1px }
.tcard .tst .r{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink) }
.tcard .tprice{ flex:none; text-align:right; line-height:1 }
.tcard .tprice .p{ font-family:var(--font-mono); font-size:15px; font-weight:800; color:var(--copper); white-space:nowrap; letter-spacing:-0.02em }
.tcard .tprice .u{ display:block; font-family:var(--font-mono); font-size:8.5px; font-weight:500; color:var(--g500); text-transform:uppercase; letter-spacing:0.04em; margin-top:3px }
.tcard .tbadge{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:#2E9E5B; color:#fff; font-size:10px; font-weight:800; padding:5px 9px; border-radius:8px; box-shadow:0 6px 16px -6px rgba(46,158,91,0.6) }
.tcard .tbadge svg{ width:11px; height:11px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round }
/* парящие «лайки» (пальцы вверх) — лежат НА плитке в разных слоях,
   в фокусе — резкие, крупнее/мельче фокуса — блюр (глубина резкости) */
.cover .like{ position:absolute; z-index:5; color:var(--copper) }
.cover .like svg{ fill:currentColor; display:block; width:100%; height:100% }
.cover .like.focus{ filter:drop-shadow(0 8px 16px rgba(184,118,60,0.4)) }
.cover .like.bl-l{ filter:blur(3px) drop-shadow(0 10px 20px rgba(184,118,60,0.3)); z-index:6 }
.cover .like.bl-s{ filter:blur(1.4px); z-index:5; opacity:0.85 }
.cover .like.grn{ color:#2E9E5B }
/* в фокусе (~38px, резкие) */
.cover .like.k1{ width:38px; top:20%; right:34% }
.cover .like.k2{ width:36px; top:62%; right:20% }
.cover .like.k3{ width:40px; top:40%; right:6% }
/* крупные, размытые (передний план) */
.cover .like.k4{ width:64px; top:8%; right:16% }
.cover .like.k5{ width:58px; bottom:6%; right:30% }
.cover .like.k6{ width:60px; top:50%; right:40% }
/* мелкие, размытые (задний план) */
.cover .like.k7{ width:22px; top:32%; right:26% }
.cover .like.k8{ width:20px; top:74%; right:9% }
.cover .like.k9{ width:24px; top:14%; right:44% }

@media print{
  @page{ size:1280px 720px; margin:0 }
  html,body{ background:#fff }
  .deck{ height:auto; overflow:visible; scroll-snap-type:none }
  .slide-wrap{ min-height:0; padding:0; display:block; page-break-after:always; break-after:page }
  .slide{ width:1280px; height:720px; max-width:none; border-radius:0; box-shadow:none }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
}