/* =====================================================================
   BACKSPACE — clean rebuild. Block 1 (HERO).
   Desktop frame: Figma 42:1004 (1440x793). Mobile frame: 42:1083 (390x741).
   Pixel-exact: absolute positioning at exact Figma coords, scaled to viewport.
   ===================================================================== */
:root {
  /* ---- color system (single source of truth) ---- */
  --ink: #0a0a0b;            /* brand black — all dark surfaces/text */
  --ink-soft: #1a1a1c;       /* slightly lifted dark (cards on dark) */
  --paper: #ffffff;          /* pure white cards */
  --paper-soft: #f8f8f8;     /* off-white sections */
  --muted: #6b6b6b;          /* muted text on light */
  --muted-2: #9a9a9a;        /* placeholder / faint */
  --line: #ececec;           /* hairline on light */
  --line-2: #2c2c2c;         /* hairline on dark */
  --on-dark: rgba(255,255,255,0.92);
  --on-dark-muted: rgba(255,255,255,0.6);
  --accent: #ff1c00;         /* brand accent */
  --gold: #ffb300;           /* stars */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; background: #0a0a0b; }
body {
  background: #fff;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

.dfx, .mfx { display: none; }

/* ---------- DESKTOP frame (>=768px) ---------- */
@media (min-width: 768px) {
  .dfx {
    display: block; max-width: 1440px; margin: 0 auto;
    position: relative; width: 100%; overflow: hidden;
    height: calc(759px * var(--dscale, 1));
  }
  .dfx__frame {
    position: absolute; top: 0; left: 0; width: 1440px; height: 793px;
    transform-origin: top left; transform: scale(var(--dscale, 1));
  }
  .dfx__frame * { box-sizing: border-box; }
}

/* ---------- MOBILE frame (<=767px) ---------- */
@media (max-width: 767px) {
  .mfx {
    display: block; position: relative; width: 100%; overflow: hidden;
    height: calc(753px * var(--mscale, 0.96));
  }
  .mfx__frame {
    position: absolute; top: 0; left: 0; width: 390px; height: 753px;
    transform-origin: top left; transform: scale(var(--mscale, 0.96));
  }
  .mfx__frame * { box-sizing: border-box; }
}

/* ---------- BLOCK 2 — "О нас" (light section #f8f8f8) — BENTO recompose ---------- */
.dfx2, .mfx2 { display: none; }
@media (min-width: 768px) {
  .dfx2 {
    display: block; max-width: 1440px; margin: 0 auto;
    position: relative; width: 100%; overflow: hidden; background: #ffffff;
    height: calc(760px * var(--dscale, 1));
  }
  .dfx2__frame {
    position: absolute; top: 0; left: 0; width: 1440px; height: 760px; background: #ffffff;
    transform-origin: top left; transform: scale(var(--dscale, 1));
  }
  .dfx2__frame * { box-sizing: border-box; }
}
@media (max-width: 767px) {
  .mfx2 {
    display: block; position: relative; width: 100%; overflow: hidden; background: #ffffff;
    height: calc(1000px * var(--mscale, 1));
  }
  .mfx2__frame {
    position: absolute; top: 0; left: 0; width: 390px; height: 1000px; background: #ffffff;
    transform-origin: top left; transform: scale(var(--mscale, 1));
  }
  .mfx2__frame * { box-sizing: border-box; }
}

/* ===== About bento — shared component styles ===== */
.ab-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: #ff1c00; }
.ab-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 100px; background: #ff1c00; flex: 0 0 auto; }
.ab-card { background: #fff; border: 1px solid #ececec; border-radius: 24px; box-shadow: 0 16px 44px rgba(10,10,11,0.05); overflow: hidden; }
.ab-num { font-family: 'Unbounded', sans-serif; font-weight: 800; color: #0a0a0b; line-height: 0.95; letter-spacing: -1.5px; }
.ab-num-line { height: 3px; border-radius: 100px; background: #ff1c00; }
.ab-label { font-weight: 600; color: #6b6b6b; }
.ab-photo { position: relative; border-radius: 28px; overflow: hidden; }
.ab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.ab-photo:hover img { transform: scale(1.045); }
.ab-imgcard { position: relative; border-radius: 24px; overflow: hidden; }
.ab-imgcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.ab-imgcard:hover img { transform: scale(1.05); }
.ab-imgcard__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.62) 100%); }
.ab-cta { display: flex; background: #0a0a0b; border-radius: 24px; overflow: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.ab-cta:hover { transform: translateY(-3px); }
.ab-cta__arrow { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff1c00; flex: 0 0 auto; transition: transform .4s cubic-bezier(.34,1.3,.4,1); }
.ab-cta:hover .ab-cta__arrow { transform: rotate(-45deg); }
.ab-globe { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f4f4f5; flex: 0 0 auto; }

/* staggered entrance — driven by .is-in toggled on the block by bindReveal().
   Neutralise the block-level reveal so the bento children own the entrance
   (and the block can never end up hidden if .is-in never fires). */
.dfx2.reveal, .mfx2.reveal { opacity: 1 !important; transform: none !important; }
.dfx2 .ab-r, .mfx2 .ab-r { opacity: 1; transform: none; }
.dfx2.is-in .ab-r, .mfx2.is-in .ab-r { animation: abReveal .72s cubic-bezier(.22,.61,.36,1) both; }
@keyframes abReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.ab-r.d1 { animation-delay: .04s; } .ab-r.d2 { animation-delay: .10s; } .ab-r.d3 { animation-delay: .16s; }
.ab-r.d4 { animation-delay: .22s; } .ab-r.d5 { animation-delay: .28s; } .ab-r.d6 { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) { .dfx2.is-in .ab-r, .mfx2.is-in .ab-r { animation: none; } }

/* ---------- BLOCK 3 — "Наши кейсы" (responsive grid + glass filter) ---------- */
.cases { background: var(--paper-soft); padding: 36px 50px; }
.cases__wrap { max-width: 1400px; margin: 0 auto; }
.cases__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.cases__title { font-weight: 600; font-size: 44px; line-height: 1.12; letter-spacing: -0.5px; color: var(--ink); margin: 0; white-space: nowrap; }
.cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ink); }
.case img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case:hover img { transform: scale(1.04); }
.case.is-hidden { display: none; }

/* glass filter — liquid-glass sliding indicator (like hero nav) */
.cfilter { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 100px; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 22px rgba(0,0,0,0.06); max-width: 100%; vertical-align: middle; }
.cfilter__ind {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: 100px; opacity: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.72));
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 1.5px #fff, inset 0 -2px 6px rgba(255,255,255,0.7), 0 6px 16px rgba(0,0,0,0.14);
  transition: left .5s cubic-bezier(.34,1.3,.4,1), width .5s cubic-bezier(.34,1.3,.4,1), opacity .3s ease;
}
.cfilter__tab { position: relative; z-index: 1; flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 11px 20px; border-radius: 100px; font-weight: 700; font-size: 15px; white-space: nowrap; color: #3a3a3a; transition: color .25s ease; }
.cfilter__tab.is-active { color: #3a3a3a; } /* same as others — glass marks active, no dark flip */
@media (max-width: 767px) {
  .cases { padding: 20px 20px; }
  .cases__title { font-size: 28px; white-space: normal; }
  .cases__head { display: block; margin-bottom: 22px; }
  .cases__title { margin-bottom: 18px; }
  .cases__grid { grid-template-columns: 1fr; gap: 16px; }
  .case { aspect-ratio: 3 / 2; }
  .cfilter { display: flex; width: 100%; gap: 0; padding: 4px; }
  .cfilter__tab { font-size: 12px; padding: 9px 4px; flex: 1 1 0; text-align: center; }
}

/* ---------- BLOCK 4 — "Наши услуги" (accordion) ---------- */
.dfx4, .mfx4 { display: none; }
@media (min-width: 768px) {
  .dfx4 { display:block; max-width:1440px; margin:0 auto; position:relative; width:100%; overflow:hidden; background:#fff; height:calc(1446px*var(--dscale,1)); }
  .dfx4__frame { position:absolute; top:calc(-14px*var(--dscale,1)); left:0; width:1440px; height:1474px; transform-origin:top left; transform:scale(var(--dscale,1)); }
  .dfx4__frame * { box-sizing:border-box; }
  .dfx4__frame .svc { background:rgba(13,13,13,0.9); border:1px solid #2C2C2C; border-radius:40px; }
}
@media (max-width: 767px) {
  .mfx4 { display:block; position:relative; width:100%; overflow:hidden; background:#fff; height:calc(816px*var(--mscale,1)); }
  .mfx4__frame { position:absolute; top:0; left:0; width:390px; height:816px; transform-origin:top left; transform:scale(var(--mscale,1)); }
  .mfx4__frame * { box-sizing:border-box; }
  .mfx4__frame .svc { background:rgba(13,13,13,0.95); border:1px solid #161616; border-radius:15px; }
}
.svc { position:absolute; left:0; width:100%; overflow:hidden; transition:top .45s cubic-bezier(.4,1,.4,1), height .45s cubic-bezier(.4,1,.4,1); }
.svc__head { position:absolute; left:0; top:0; width:100%; display:flex; align-items:center; background:none; border:none; padding:0; cursor:pointer; color:#fff; }
.svc__body { opacity:0; visibility:hidden; transition:opacity .3s ease; }
.svc.is-open .svc__body { opacity:1; visibility:visible; }
.svc__pm { position:relative; display:block; flex:0 0 auto; }
.svc__pm::before, .svc__pm::after { content:""; position:absolute; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%); }
.svc__pm::before { width:18px; height:2px; }
.svc__pm::after { width:2px; height:18px; transition:transform .3s ease, opacity .3s ease; }
.svc.is-open .svc__pm::after { transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.svc-chip { display:inline-flex; align-items:center; border-radius:100px; color:#fff; white-space:nowrap; }
.svc-btn { display:inline-flex; align-items:center; border-radius:100px; font-weight:700; white-space:nowrap; text-decoration:none; transition:transform .3s ease; }
.svc-btn:hover { transform:translateY(-2px); }
.svc-circle { display:flex; align-items:center; justify-content:center; border-radius:50%; flex:0 0 auto; }

/* ---------- BLOCK 5 — "Нам доверяют" (reviews carousel) ---------- */
.dfx5, .mfx5 { display:none; }
@media (min-width:768px) {
  .dfx5 { display:block; max-width:1440px; margin:0 auto; position:relative; width:100%; overflow:hidden; border-radius:30px 30px 0 0; background:#f8f8f8; height:calc(814px*var(--dscale,1)); }
  .dfx5__frame { position:absolute; top:calc(-19px*var(--dscale,1)); left:0; width:1440px; height:847px; transform-origin:top left; transform:scale(var(--dscale,1)); }
  .dfx5__frame * { box-sizing:border-box; }
}
@media (max-width:767px) {
  .mfx5 { display:block; position:relative; width:100%; overflow:hidden; border-radius:30px 30px 0 0; background:#f8f8f8; height:calc(768px*var(--mscale,1)); }
  .mfx5__frame { position:absolute; top:calc(2px*var(--mscale,1)); left:0; width:390px; height:766px; transform-origin:top left; transform:scale(var(--mscale,1)); }
  .mfx5__frame * { box-sizing:border-box; }
  .mfx5 .rev { touch-action:pan-y; }
}
.rev { position:absolute; left:0; top:0; width:100%; height:100%; }
.rev-large, .rev-small, .rev-quote { transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease; will-change:transform, opacity; }
.rev-large, .rev-small { transform-origin:0 0; }
.rev-prev, .rev-next { cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; border:none; padding:0; transition:transform .25s ease; }
.rev-prev:hover, .rev-next:hover { transform:scale(1.08); }

/* ---------- BLOCK 6 — "Есть идея?" (contact form, dark) ---------- */
.dfx6, .mfx6 { display:none; }
@media (min-width:768px) {
  .dfx6 { display:block; max-width:1440px; margin:0 auto; position:relative; width:100%; overflow:hidden; background:#0a0a0b; border-radius:30px; height:calc(773px*var(--dscale,1)); }
  .dfx6__frame { position:absolute; top:calc(-12px*var(--dscale,1)); left:0; width:1440px; height:800px; background:#0a0a0b; transform-origin:top left; transform:scale(var(--dscale,1)); }
  .dfx6__frame * { box-sizing:border-box; }
}
@media (max-width:767px) {
  .mfx6 { display:block; position:relative; width:100%; overflow:hidden; background:#0a0a0b; border-radius:30px; height:calc(776px*var(--mscale,1)); }
  .mfx6__frame { position:absolute; top:calc(-10px*var(--mscale,1)); left:0; width:390px; height:766px; background:#0a0a0b; transform-origin:top left; transform:scale(var(--mscale,1)); }
  .mfx6__frame * { box-sizing:border-box; }
}
.cf-input { background:none; border:none; border-bottom:1px solid rgba(0,0,0,0.5); outline:none; color:#0a0a0b; font-family:inherit; width:100%; padding:0 0 8px; }
.cf-input::placeholder { color:#9a9a9a; }
.cf-input:focus { border-bottom-color:#0a0a0b; }
select.cf-input { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0a0b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; }
.bpill { display:inline-flex; align-items:center; justify-content:center; border-radius:100px; background:#F8F8F8; color:#0a0a0b; cursor:pointer; position:relative; overflow:hidden; transition:background .2s ease, color .2s ease; }
.bpill input { position:absolute; opacity:0; pointer-events:none; }
.bpill:has(input:checked) { background:#0a0a0b; color:#fff; }
.cf-soc { display:flex; align-items:center; justify-content:center; border:2px solid #DCDCDC; border-radius:50%; transition:background .25s ease, border-color .25s ease; }
.cf-soc:hover { background:#fff; border-color:#fff; }
.cf-soc:hover svg { stroke:#0a0a0b; }
.cf-submit { cursor:pointer; border:none; transition:opacity .25s ease, transform .25s ease; }
.cf-submit:hover { transform:translateY(-2px); }
.cf-submit:disabled { opacity:0.65; cursor:default; transform:none; }

/* ---------- LEAD bottom-sheet (iOS-style swipe-up modal) ---------- */
.lsheet { position: fixed; inset: 0; z-index: 1000; display: none; }
.lsheet.is-open { display: block; }
.lsheet__bd { position: absolute; inset: 0; background: rgba(10,10,11,0); transition: background .4s ease; }
.lsheet.is-shown .lsheet__bd { background: rgba(10,10,11,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lsheet__panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 600px; max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border-radius: 26px 26px 0 0; padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateY(100%); transition: transform .44s cubic-bezier(.32,.72,0,1); box-shadow: 0 -10px 44px rgba(0,0,0,0.22); touch-action: pan-y; overscroll-behavior: contain; }
.lsheet.is-shown .lsheet__panel { transform: translateY(0); }
.lsheet__grab { width: 44px; height: 5px; border-radius: 100px; background: #dcdcdc; margin: 4px auto 18px; cursor: grab; }
.lsheet__x { position: absolute; top: 18px; right: 22px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #f1f1f1; color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.lsheet__x:hover { background: #e6e6e6; }
.lsheet__title { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); margin: 0 0 5px; }
.lsheet__sub { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.45; }
.lsheet__form { display: flex; flex-direction: column; gap: 13px; }
.lsheet__form > label { display: block; font-weight: 700; font-size: 14px; color: var(--ink); }
.ls-pills .bpill { display: inline-flex; align-items: center; justify-content: center; }
.ls-in { display: block; width: 100%; margin-top: 6px; padding: 0 0 8px; border: none; border-bottom: 1px solid rgba(0,0,0,0.45); background: none; outline: none; font-family: inherit; font-size: 16px; color: var(--ink); }
.ls-in::placeholder { color: var(--muted-2); }
.ls-in:focus { border-bottom-color: var(--ink); }
select.ls-in { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0a0b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.ls-bud .ls-budlabel { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 9px; }
.ls-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-pills .bpill { height: 40px; padding: 0 15px; font-size: 13.5px; font-weight: 600; }
.ls-submit { width: 100%; height: 52px; border-radius: 100px; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; margin-top: 2px; }
@media (max-width: 767px) {
  .lsheet__panel { padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .lsheet__title { font-size: 21px; }
}

/* ---------- BLOCK 7 — FAQ (two-column: sticky intro + CTA left, hairline accordion right) ---------- */
.faq { background:#fff; padding:90px 50px; }
.faq__wrap { max-width:1340px; margin:0 auto; display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:80px; align-items:start; }
.faq__aside { position:sticky; top:96px; }
.faq__title { font-weight:600; font-size:44px; color:#0a0a0b; margin:0 0 16px; letter-spacing:-0.8px; line-height:1.08; }
.faq__sub { font-size:18px; color:#6b6b6b; margin:0 0 30px; line-height:1.55; }
.faq__cta { display:inline-flex; align-items:center; gap:10px; background:#ff1c00; color:#fff; font-weight:700; font-size:16px; padding:16px 30px; border-radius:100px; transition:background .25s ease, transform .25s ease, box-shadow .25s ease; }
.faq__cta svg { width:18px; height:18px; flex:0 0 auto; }
.faq__cta:hover { background:#0a0a0b; transform:translateY(-2px); box-shadow:0 14px 34px rgba(10,10,11,0.16); }
.faq__list { display:block; }
.faq__item { background:none; border:0; border-bottom:1px solid #e0e0e0; border-radius:0; margin:0; overflow:hidden; }
.faq__list .faq__item:first-child { border-top:1px solid #e0e0e0; }
.faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; font-weight:600; font-size:20px; color:#0a0a0b; letter-spacing:-0.2px; transition:color .2s ease; }
@media (hover:hover) { .faq__q:hover { color:#ff1c00; } }
.faq__q::-webkit-details-marker { display:none; }
.faq__pm { position:relative; flex:0 0 auto; width:22px; height:22px; }
.faq__pm::before, .faq__pm::after { content:""; position:absolute; left:50%; top:50%; background:#0a0a0b; transform:translate(-50%,-50%); transition:background .2s ease; }
.faq__pm::before { width:16px; height:2px; }
.faq__pm::after { width:2px; height:16px; transition:transform .3s ease, opacity .3s ease; }
.faq__item[open] .faq__pm::after { transform:translate(-50%,-50%) scaleY(0); opacity:0; }
@media (hover:hover) { .faq__q:hover .faq__pm::before, .faq__q:hover .faq__pm::after { background:#ff1c00; } }
.faq__a { padding:0 0 26px; font-size:16.5px; line-height:1.6; color:#5a5a5a; max-width:60ch; }
.faq__a a { color:#0a0a0b; text-decoration:underline; }
@media (max-width:980px) {
  .faq__wrap { grid-template-columns:1fr; gap:34px; }
  .faq__aside { position:static; }
}

/* ---------- FOOTER (responsive, dark, brand style) ---------- */
.ftr { background:#0a0a0b; color:#fff; border-radius:40px 40px 0 0; padding:36px 20px 32px; }
.ftr__wrap { max-width:1340px; margin:0 auto; }
.ftr__top { display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between; }
.ftr__brand { max-width:330px; }
.ftr__logo { font-family:'Unbounded',sans-serif; font-weight:700; font-size:26px; letter-spacing:1px; color:#fff; display:inline-block; margin-bottom:18px; }
.ftr__tag { color:rgba(255,255,255,0.55); font-size:15px; line-height:1.6; margin:0 0 22px; }
.ftr__soc { display:flex; gap:12px; }
.ftr__soc a { width:44px; height:44px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease; }
.ftr__soc a:hover { background:#fff; border-color:#fff; }
.ftr__soc a:hover svg { stroke:#0a0a0b; }
.ftr__col h3 { font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,0.4); margin:0 0 18px; font-weight:700; }
.ftr__col a, .ftr__col p { display:block; color:rgba(255,255,255,0.78); font-size:15px; line-height:1.3; margin-bottom:13px; text-decoration:none; transition:color .2s ease; }
.ftr__col a:hover { color:#ff1c00; }
.ftr__col p { color:rgba(255,255,255,0.55); }
.ftr__seo { margin:50px 0 0; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); font-size:13px; line-height:1.7; max-width:1060px; }
.ftr__seo strong { color:rgba(255,255,255,0.6); font-weight:600; }
.ftr__bottom { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:26px; color:rgba(255,255,255,0.45); font-size:14px; }
.ftr__lang a { color:rgba(255,255,255,0.55); text-decoration:none; margin-left:16px; transition:color .2s ease; }
.ftr__lang a:hover, .ftr__lang a.is-cur { color:#fff; }
@media (max-width:767px) {
  .faq { padding:48px 22px; }
  .faq__title { font-size:28px; letter-spacing:-0.5px; }
  .faq__sub { font-size:15px; margin-bottom:22px; }
  .faq__cta { font-size:15px; padding:14px 26px; }
  .faq__q { padding:20px 0; font-size:17px; }
  .faq__a { padding:0 0 20px; font-size:15px; }
  .ftr { border-radius:30px 30px 0 0; padding:20px 20px 24px; }
  .ftr__top { gap:30px; }
  .ftr__brand { max-width:100%; }
}

/* swipeable portfolio carousel */
.pf { scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-left: 20px; }
.pf::-webkit-scrollbar { display: none; }

/* =====================================================================
   INTERACTIVE — desktop hero (liquid glass + hover + swipe carousel)
   ===================================================================== */

/* ---- liquid-glass mixin look ---- */
.lg {
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.75),
              inset 0 -2px 6px rgba(255,255,255,0.18),
              0 8px 22px rgba(0,0,0,0.28);
}

/* ---- nav: sliding liquid-glass highlight ---- */
.dnav { z-index: 5; }
.dnav__bar {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid #2c2c2c; border-radius: 35px;
}
.dnav__hl {
  position: absolute; top: 10px; left: 0; width: 0; height: 40px;
  border-radius: 100px; opacity: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55),
              inset 0 -2px 6px rgba(255,255,255,0.15),
              0 8px 22px rgba(0,0,0,0.22);
  transition: left .45s cubic-bezier(.34,1.3,.4,1),
              width .45s cubic-bezier(.34,1.3,.4,1),
              opacity .3s ease;
}
.dnav.is-hover .dnav__hl { opacity: 1; }
.dnav__link {
  position: absolute; top: 10px; height: 40px; z-index: 2;
  display: flex; align-items: center; padding: 0 20px;
  border-radius: 100px; color: #fff; font-weight: 700; font-size: 15px;
  white-space: nowrap; transition: color .3s ease;
}
.dnav__link.is-active { color: #fff; } /* text stays light on the glass — no dark flip */

/* ---- phone / grid icon buttons: glass coating on hover ---- */
.dglass-btn { border-radius: 50%; transition: transform .35s cubic-bezier(.34,1.3,.4,1); }
.dglass-btn img { position: relative; z-index: 1; } /* glyph stays sharp, above glass */
.dglass-btn::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; z-index: 0; /* glass BEHIND the icon */
  opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 8px 22px rgba(0,0,0,0.35);
}
.dglass-btn:hover, .dglass-btn:active { transform: translateY(-2px); }
.dglass-btn:hover::before, .dglass-btn:active::before { opacity: 1; }

/* ---- CTA buttons: subtle fill change (hover on desktop, tap on mobile) ---- */
.dbtn { transition: transform .35s cubic-bezier(.34,1.3,.4,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.dbtn--dark:hover, .dbtn--dark:active {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.65) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}
/* light CTA: just a touch more transparent white — text & arrow stay put */
.dbtn--light:hover, .dbtn--light:active { background: rgba(255,255,255,0.82) !important; }

/* union white-card CTA */
.ucta { transition: transform .3s cubic-bezier(.34,1.3,.4,1); }
.ucta:hover { transform: translateY(-2px); }
.ucta svg { transition: transform .3s ease; }
.ucta:hover svg { transform: translateX(3px); }

/* ---- desktop portfolio: swipe carousel + animated progress ---- */
.dpf { scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; }
.dpf.is-drag { cursor: grabbing; scroll-behavior: auto; }
.dpf::-webkit-scrollbar { display: none; }
.dpf__card {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  transition: transform .4s cubic-bezier(.34,1.2,.4,1), box-shadow .4s ease;
}
.dpf__card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.dpf-thumb { transition: left .25s ease; }

/* mobile menu overlay */
.m-menu {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10,10,11,0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background .35s ease, backdrop-filter .35s ease;
}
.m-menu.is-open { display: block; }
.m-menu.is-shown { background: rgba(10,10,11,0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.m-menu__panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: #fff; border-radius: 0 0 30px 30px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px 14px;
  box-shadow: 0 24px 60px rgba(10,10,11,0.22);
  transform: translateY(-106%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  overscroll-behavior: contain; touch-action: pan-y;
}
.m-menu.is-shown .m-menu__panel { transform: translateY(0); }
.m-menu__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 18px;
  width: 38px; height: 38px; border-radius: 50%; background: #f1f1f1; border: none;
  color: #0a0a0b; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.m-menu__close:hover { background: #e6e6e6; }
.m-menu nav { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.m-menu nav a {
  color: #0a0a0b; font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  padding: 14px 4px; border-bottom: 1px solid #f0f0f0; transition: color .2s ease, padding-left .2s ease;
}
.m-menu nav a:last-child { border-bottom: none; }
.m-menu nav a:active { color: #ff1c00; padding-left: 10px; }
.m-menu__grab { width: 44px; height: 5px; border-radius: 100px; background: #dcdcdc; margin: 14px auto 2px; }

/* =====================================================================
   PARALLAX STACKING (iOS-style, MOBILE-ONLY) — bounded to the .pgroup
   intro group (hero -> about -> cases). Inside it the hero pins, the
   About card rides up over it, and the Cases card rides over About.
   Because the sticky context is the .pgroup wrapper, the cards RELEASE
   once you scroll past Cases — so Services / Reviews / Contact / FAQ /
   Footer scroll completely normally (no parallax). A slim header reveals
   after the hero; the Cases filter clones into a pinned nav under it.
   Desktop has NO sticky parallax. No transforms are added — the scale
   stays on the inner __frame, so the fixed header/nav resolve to the viewport.
   --------------------------------------------------------------------- */
:root { --hdr-h: 56px; }
@media (min-width: 768px) { :root { --hdr-h: 64px; } }

@media (max-width: 767px) {
  /* sticky stacking ONLY inside the intro group, ONLY on mobile.
     `top` is overwritten inline by measureStacks() for the bottom-pin. */
  .pgroup .mfx,
  .pgroup .mfx2,
  .pgroup .cases {
    position: relative;   /* parallax removed — normal flow (rounded "card" tops kept for style) */
  }
  .pgroup .mfx   { z-index: 1; }                                  /* hero = base layer (flat) */
  .pgroup .mfx2  { z-index: 2; border-radius: 30px 30px 0 0; }
  .pgroup .cases { z-index: 3; border-radius: 30px 30px 0 0; overflow: hidden; }
  /* фото1: shadows removed; separate blocks into cards with a 10px gutter */
  .mfx2, .cases, .mfx4, .proc, .mfx5, .mfx6, .faq, .ftr { margin-top: 10px; }
}
/* blocks AFTER the intro group are positioned so they always paint OVER the
   releasing sticky cards — otherwise they scroll 100% normally (no parallax) */
.mfx4, .dfx4 { position: relative; z-index: 4; }
.mfx5, .dfx5 { position: relative; z-index: 5; }
.mfx6, .dfx6 { position: relative; z-index: 6; }
.faq         { position: relative; z-index: 7; }
.ftr         { position: relative; z-index: 8; }
/* in-page anchor scrolling should clear the fixed reveal header */
.mfx2, .dfx2, .cases, .mfx4, .dfx4, .mfx6, .dfx6 { scroll-margin-top: calc(var(--hdr-h) + 8px); }
/* zero-height cross-page section anchors (/#about, /#services, …) */
.sec-anchor { display: block; height: 0; width: 0; overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* ---- slim reveal header (injected by JS, body-level fixed) ---- */
.shdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(10,10,11,0.06);
  transform: translateY(-100%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
body.is-scrolled .shdr { transform: translateY(0); }
.shdr__logo { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.4px; color: #0a0a0b; line-height: 1; }
.shdr__actions { display: flex; align-items: center; gap: 10px; }
.shdr__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(10,10,11,0.05); color: #0a0a0b; cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; }
.shdr__btn:hover { background: rgba(10,10,11,0.10); }
.shdr__btn:active { transform: scale(0.92); }
@media (min-width: 768px) {
  .shdr { padding: 0 40px; }
  .shdr__logo { font-size: 20px; }
  .shdr__btn { width: 44px; height: 44px; }
}

/* ---- cloned cases filter -> pinned horizontal nav under the header ---- */
.cnav {
  position: fixed; left: 0; right: 0; top: var(--hdr-h); z-index: 149;
  display: flex; gap: 0;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(10,10,11,0.07);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity;
  /* fully clear the viewport when hidden: own height + header offset + buffer
     (it sits at top:var(--hdr-h), so -100% alone would leave it peeking) */
  transform: translateY(calc(-100% - var(--hdr-h) - 8px));
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
.cnav::-webkit-scrollbar { display: none; }
body.cases-pinned .cnav { transform: translateY(0); }
.cnav__tab {
  flex: 0 0 auto; scroll-snap-align: center;
  border: none; background: none; cursor: pointer;
  padding: 14px 18px; font-weight: 700; font-size: 14px; white-space: nowrap;
  color: #6b6b6b; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cnav__tab.is-active { color: #0a0a0b; border-bottom-color: var(--accent); }
@media (min-width: 768px) {
  .cnav { justify-content: center; }
  .cnav__tab { flex: 0 1 auto; padding: 16px 26px; font-size: 15px; }
}
/* while the cloned nav is pinned, fade the in-flow glass filter so there's
   no double bar (the real .cfilter still drives filtering — layout intact) */
.cases .cfilter { transition: opacity .3s ease; }
body.cases-pinned .cases .cfilter { opacity: 0; pointer-events: none; }
/* respect reduced-motion: keep reveals instant, drop the slide */
@media (prefers-reduced-motion: reduce) {
  .shdr, .cnav { transition: none; }
}

/* ---- site-wide fade-in on scroll (added by JS to off-screen blocks only) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- question textarea inside the ask-a-question sheet ---- */
textarea.ls-in { border: 1px solid rgba(0,0,0,0.18); border-radius: 14px; padding: 12px 14px; min-height: 96px; line-height: 1.5; resize: vertical; margin-top: 8px; }
textarea.ls-in:focus { border-color: var(--ink); border-bottom-color: var(--ink); }

/* ---- unified section titles (every block EXCEPT Hero): Manrope 500 — 42px desktop / 28px mobile.
   !important overrides the per-frame inline font sizes/weights in one place, all locales. ---- */
[data-cms="services.title"],
[data-cms="testimonials.title"],
[data-cms="contact.title"],
[data-cms="about.title"],
[data-cms="portfolio.title"],
.cases__title, .proc__title, .faq__title {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  font-size: 42px !important;
}
@media (max-width: 767px) {
  [data-cms="services.title"],
  [data-cms="testimonials.title"],
  [data-cms="contact.title"],
  [data-cms="about.title"],
  [data-cms="portfolio.title"],
  .cases__title, .proc__title, .faq__title {
    font-size: 28px !important;
  }
}

/* =====================================================================
   PORTFOLIO cards (data-driven from admin) — image + title/category caption,
   tap opens the detail sheet.
   ===================================================================== */
.case { cursor: pointer; }
.case__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 30px 18px 21px;
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.82) 100%);
  pointer-events: none;
}
.case__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4px 11px; border-radius: 100px;
}
.case__title { font-size: 17px; font-weight: 500; line-height: 1.18; color: #fff; letter-spacing: -0.2px; }
@media (min-width: 768px) {
  .case__cap { padding: 36px 24px 25px; }
  .case__title { font-size: 21px; }
}

/* portfolio detail sheet (bottom-sheet on mobile, centered dialog on desktop) */
.cmodal { position: fixed; inset: 0; z-index: 1100; display: none; }
.cmodal.is-open { display: block; }
.cmodal__bd { position: absolute; inset: 0; background: rgba(10,10,11,0); transition: background .4s ease; }
.cmodal.is-shown .cmodal__bd { background: rgba(10,10,11,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmodal__panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper); border-radius: 26px 26px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateY(100%); transition: transform .44s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -10px 44px rgba(0,0,0,0.22); touch-action: pan-y;
}
.cmodal.is-shown .cmodal__panel { transform: translateY(0); }
.cmodal__grab { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; width: 44px; height: 5px; border-radius: 100px; background: rgba(255,255,255,0.75); }
.cmodal__x {
  position: absolute; top: 14px; right: 16px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(10,10,11,0.5); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cmodal__media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 26px 26px 0 0; background: #efefef; }
.cmodal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmodal__body { padding: 20px 22px 0; }
.cmodal__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cmodal__title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); margin: 0 0 10px; line-height: 1.2; }
.cmodal__desc { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.cmodal__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cmodal__tags span { font-size: 12.5px; font-weight: 600; color: var(--ink); background: #f2f2f2; padding: 6px 12px; border-radius: 100px; }
.cmodal__link { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 100px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; transition: transform .25s ease; }
.cmodal__link:active { transform: scale(0.97); }
@media (min-width: 768px) {
  .cmodal__panel {
    bottom: auto; top: 50%; left: 50%; right: auto; margin: 0;
    transform: translate(-50%, -46%) scale(0.97); opacity: 0; border-radius: 26px; max-height: 88vh;
    transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .3s ease;
  }
  .cmodal.is-shown .cmodal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .cmodal__grab { display: none; }
  .cmodal__body { padding: 24px 28px 0; }
  .cmodal__title { font-size: 26px; }
}

/* =====================================================================
   REVIEWS — initials avatar (admin has no client photos) + appearance anim.
   ===================================================================== */
.rev-ava { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #6366f1, rgba(10,10,11,0.92)); }
.rev-ava__txt { font-family: 'Unbounded', sans-serif; font-weight: 700; color: #fff; font-size: 104px; letter-spacing: 1px; opacity: 0.96; }
.rev-small .rev-ava__txt { font-size: 70px; }
@media (max-width: 767px) { .rev-ava__txt { font-size: 92px; } }
/* card appearance animation when the reviews block scrolls into view */
.rev { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.33,0,.2,1); }
.rev.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   PROCESS — "Как мы работаем"
   Minimalist redesign. Editorial numbered list: a single
   reading column, hairline rules, generous air. Light-weight
   outline-grey numbers (tabular, so 01–06 align). Monochrome —
   the red accent appears exactly once, as the badge eyebrow.
   CSS-only restyle; markup & selectors unchanged.
   ============================================================ */

.proc {
  background: #fff;
  padding: 96px 50px;
  position: relative;   /* KEEP — parallax stacking layer */
  z-index: 5;           /* KEEP — parallax stacking layer */
}

/* Comfortable single reading column, left-aligned */
.proc__wrap {
  max-width: 760px;
  margin: 0 auto;
}

.proc__head {
  max-width: 100%;
  margin: 0 0 16px;
}

/* The only colour in the whole block — a quiet red eyebrow */
.proc__badge {
  display: inline-block;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin: 0 0 18px;
}

.proc__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.8px;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.proc__sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}

/* The list: a single column of hairline-separated rows.
   A top hairline closes the head off from the first row. */
.proc__grid {
  display: block;
  margin-top: 40px;
  border-top: 1px solid rgba(10, 10, 11, 0.10);
}

/* Each step = a row: outline number left, title + copy right.
   No fill, no card, no shadow, no radius — restraint over decoration.
   align-items:baseline sits the big number on the title's baseline. */
.proc__step {
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 34px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 11, 0.10);
  border-radius: 0;
  transition: border-color .3s ease;
}

/* Whisper-quiet hover: the number firms to ink, nothing moves.
   No transform / shadow that could fight the sticky parent. */
.proc__step:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(10, 10, 11, 0.18);
}

/* Large, LIGHT-weight, muted-grey number — editorial, not a badge.
   Tabular figures keep 01–06 perfectly aligned down the column. */
.proc__num {
  grid-column: 1;
  grid-row: 1 / span 2;   /* number holds column 1; title+copy stack in column 2 */
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: #cccccc;
  font-variant-numeric: tabular-nums;
  display: block;
  margin: 0;
  transition: color .3s ease;
}

.proc__step:hover .proc__num {
  color: var(--ink);
}

.proc__step-t {
  grid-column: 2;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.proc__step-d {
  grid-column: 2;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* ---- Tablet / small desktop: keep the single editorial column ---- */
@media (max-width: 1024px) {
  .proc {
    padding: 80px 40px;
  }
  .proc__grid {
    grid-template-columns: none; /* neutralise any inherited multi-col */
  }
}

/* ---- Mobile (≤767px) — primary client view, ~390px ---- */
@media (max-width: 767px) {
  .proc {
    padding: 56px 22px;
  }
  .proc__head {
    margin-bottom: 8px;
  }
  .proc__badge {
    letter-spacing: 2px;
    margin-bottom: 14px;
  }
  .proc__title {
    font-size: 29px;
    letter-spacing: -0.5px;
  }
  .proc__sub {
    font-size: 15px;
  }
  .proc__grid {
    margin-top: 30px;
  }
  /* Narrower number column, tighter gutter, smaller inline number */
  .proc__step {
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    padding: 24px 0;
  }
  .proc__num {
    font-size: 22px;
  }
  /* No hover state on touch — number stays muted, nothing shifts */
  .proc__step:hover {
    border-color: rgba(10, 10, 11, 0.10);
  }
  .proc__step:hover .proc__num {
    color: #cccccc;
  }
  .proc__step-t {
    font-size: 18px;
  }
  .proc__step-d {
    font-size: 14.5px;
    line-height: 1.55;
  }
}

/* footer -> SMS Admin Panel button */
.ftr__admin { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid rgba(255,255,255,0.25); border-radius:100px; color:rgba(255,255,255,0.7); font-size:13px; font-weight:600; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.ftr__admin:hover { background:#fff; color:#0a0a0b; border-color:#fff; }