/* «Ціни» і сторінки послуг (pricing.js). Світ — «мідь, латунь і малахіт»: перегінна мідь,
   латунні бирки, крафт-папір у точкову сітку, плитки прошивки стіною під малахітовим
   серпанком. Rubik — заголовки й ціни (табличні цифри), Manrope — текст. Смуги:
   малахіт → папір → кована мідь → крафт → папір → малахіт, стики — хвилями.
   Токени — на контейнері .pr-page, не в :root (правило репо п.2). Рух — js/pricing-motion.js
   ставить .pr-motion на <html>; без нього (і з reduced-motion) усе видно одразу. */

.pr-page {
  --pr-ink: #22170F; --pr-mute: #6A5B4E; --pr-paper: #F7F0E4; --pr-card: #FFFCF6; --pr-kraft: #E8D6B6; --pr-kraft-d: #C9AE84;
  --pr-copper: #B4572A; --pr-copper-d: #8E3F1B; --pr-brass: #D9A441; --pr-brass-l: #F1D48E;
  --pr-mal: #1B4D3E; --pr-deep: #10261F; --pr-cream: #F6EBD6; --pr-sage: #5F7167; --pr-espresso: #2A1D15;
  --pr-display: 'Rubik', var(--font-display); --pr-text: 'Manrope', var(--font);
  --pr-gut: max(16px, 4vw); --pr-top: 64px; --pr-ease: cubic-bezier(.16, 1, .3, 1);
  /* Зерно: SVG-шум одним data-URI — фактура без картинок і запитів. */
  --pr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding: 0; font-family: var(--pr-text); color: var(--pr-ink); background: var(--pr-paper);
  overflow-x: clip; caret-color: var(--pr-copper); accent-color: var(--pr-copper);
}
.pr-page ::selection { background: var(--pr-brass-l); color: var(--pr-ink); }
.pr-page [id] { scroll-margin-top: calc(var(--pr-top) + 64px); }
.pr-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 var(--pr-gut); box-sizing: border-box; }
.pr-page h1, .pr-page h2, .pr-page h3 { font-family: var(--pr-display); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.pr-page a { text-underline-offset: 3px; }
.pr-page a:focus-visible, .pr-page summary:focus-visible, .pr-switch input:focus-visible + label { outline: 2px solid var(--pr-brass); outline-offset: 3px; border-radius: 10px; }
.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── смуги й фактури ───────────────────────────────────────────────────── */
.pr-deep, .pr-copper, .pr-paper, .pr-kraft { position: relative; isolation: isolate; }
.pr-deep { background: radial-gradient(70% 90% at 100% 0%, rgba(180, 87, 42, .28), transparent 60%), var(--pr-deep); color: var(--pr-cream); overflow: hidden; }
.pr-paper { background: radial-gradient(rgba(34, 23, 15, .1) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--pr-paper); }
/* Кована мідь: градієнт металу й кола «карбування» латунною лінією. */
.pr-copper {
  color: var(--pr-cream);
  background:
    repeating-radial-gradient(circle at 85% 15%, rgba(241, 212, 142, .09) 0 1px, transparent 1.5px 26px),
    radial-gradient(60% 80% at 15% 0%, rgba(241, 160, 100, .35), transparent 65%),
    linear-gradient(165deg, #B85E30, #7C3416 70%, #5E260F);
}
.pr-kraft { background: var(--pr-kraft); }
.pr-deep::before, .pr-copper::before, .pr-paper::before, .pr-kraft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--pr-grain);
}
.pr-deep::before, .pr-copper::before { opacity: .1; mix-blend-mode: overlay; }
.pr-paper::before, .pr-kraft::before { opacity: .2; mix-blend-mode: multiply; filter: invert(1); }
.pr-ch { padding: clamp(64px, 9vw, 120px) 0; }

.pr-wave { position: relative; z-index: 2; height: clamp(36px, 5vw, 80px); margin: -1px 0; line-height: 0; }
.pr-wave svg { width: 100%; height: 100%; display: block; }
.pr-wave-flip svg { transform: scaleX(-1); }
.pr-to-copper { background: var(--pr-paper); fill: #B85E30; }
.pr-to-kraft { background: #5E260F; fill: var(--pr-kraft); }
.pr-to-deep { background: var(--pr-paper); fill: var(--pr-deep); }

/* Стіна плиток прошивки — справжній інтерфейс під серпанком, нахилена й повільна. */
.pr-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pr-wall-in {
  position: absolute; right: -6%; top: -18%; width: 78%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  transform: rotate(-10deg) skewX(-4deg); opacity: .34; filter: saturate(.75) sepia(.15);
}
.pr-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
.pr-wall::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--pr-deep) 30%, rgba(16, 38, 31, .55) 62%, rgba(16, 38, 31, .2)),
              linear-gradient(0deg, var(--pr-deep), transparent 30%);
}

/* ── хіро ──────────────────────────────────────────────────────────────── */
.pr-hero { padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 104px); }
.pr-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.pr-hero h1 { margin: 0; font-size: clamp(56px, 8.5vw, 96px); line-height: .92; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.pr-tagline { margin: 22px 0 0; max-width: 22ch; font: 600 clamp(21px, 2.2vw, 30px)/1.25 var(--pr-display); letter-spacing: -.015em; color: var(--pr-brass); }
.pr-intro { margin: 18px 0 0; max-width: 54ch; font-size: 1.05rem; line-height: 1.65; color: rgba(246, 235, 214, .86); text-wrap: pretty; }
.pr-lang { display: inline-block; margin-top: 22px; padding: 6px 0; font-size: .9rem; color: var(--pr-cream); text-decoration-color: rgba(246, 235, 214, .45); }

/* Сходи тарифів: від простішого до повнішого — кожна сходинка вища. */
.pr-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.pr-ladder li { --tone: var(--pr-sage); }
.pr-ladder li:nth-child(2) { --tone: var(--pr-copper); }
.pr-ladder li:nth-child(3) { --tone: var(--pr-mal); }
.pr-ladder li:nth-child(4) { --tone: var(--pr-espresso); }
.pr-ladder a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; box-sizing: border-box;
  min-height: calc(150px + var(--k) * 52px); padding: 16px 14px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 82%, #fff), var(--tone)); color: #fff; text-decoration: none;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .4s var(--pr-ease), box-shadow .4s var(--pr-ease);
}
.pr-ladder .pr-hot a { box-shadow: 0 0 0 2px var(--pr-brass), 0 22px 36px -18px rgba(0, 0, 0, .7); }
@media (hover: hover) { .pr-ladder a:hover { transform: translateY(-6px); } }
.pr-step-n { font: 600 .92rem/1.2 var(--pr-display); }
.pr-ladder b { font: 800 clamp(26px, 2.6vw, 36px)/1 var(--pr-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-ladder b.pr-quote { font-size: 1rem; line-height: 1.2; letter-spacing: 0; }
.pr-step-f { font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.pr-hot .pr-step-n::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--pr-brass); vertical-align: middle; }

/* ── покажчик розділів ─────────────────────────────────────────────────── */
.pr-nav { position: sticky; top: var(--pr-top); z-index: 50; background: rgba(16, 38, 31, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pr-nav-in { display: flex; gap: 2px; max-width: 1240px; margin: 0 auto; padding: 0 var(--pr-gut); overflow-x: auto; }
.pr-nav a {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 50px; padding: 0 14px;
  font-size: .92rem; font-weight: 600; color: rgba(246, 235, 214, .7); text-decoration: none; white-space: nowrap; transition: color .25s;
}
.pr-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--pr-brass); transform: scaleX(0); transition: transform .35s var(--pr-ease); }
.pr-nav a:hover, .pr-nav a.on { color: #fff; }
.pr-nav a.on::after { transform: scaleX(1); }
.pr-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--pr-copper), var(--pr-brass)); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ── голова розділу ────────────────────────────────────────────────────── */
.pr-ch-h { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.pr-ch-h h2 { margin: 0; font-size: clamp(36px, 4.8vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.035em; color: var(--pr-ink); }
.pr-deep .pr-ch-h h2, .pr-copper .pr-ch-h h2 { color: #fff; }
.pr-lead { margin: 16px 0 0; max-width: 62ch; font-size: 1.06rem; line-height: 1.6; color: var(--pr-mute); text-wrap: pretty; }
.pr-deep .pr-lead, .pr-copper .pr-lead { color: rgba(246, 235, 214, .85); }
.pr-more { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 1rem; color: var(--pr-mute); }
.pr-more a { color: var(--pr-copper-d); font-weight: 700; }

.pr-btn {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--col, var(--pr-copper)); border-radius: 999px; color: var(--col, var(--pr-copper)); background: transparent;
  font: 700 .92rem/1.2 var(--pr-text); text-decoration: none; text-align: center;
  transition: background-color .25s, color .25s, transform .25s var(--pr-ease);
}
.pr-btn:hover { background: var(--col, var(--pr-copper)); color: #fff; text-decoration: none; }
.pr-btn:active { transform: scale(.97); }
.pr-hot .pr-btn, .pr-btn-hot { background: var(--col, var(--pr-copper)); color: #fff; }
.pr-btn-hot { --col: var(--pr-copper); display: inline-flex; margin-top: 26px; padding: 0 26px; min-height: 50px; }

/* ── таблиця тарифів ───────────────────────────────────────────────────── */
/* Кольори стовпців — на всьому блоці: ними фарбується й перемикач тарифу на телефоні. */
.pr-cmp { --c-free: #5F7167; --c-base: #B4572A; --c-pro: #1B4D3E; --c-corporate: #2A1D15; }
.pr-table {
  width: calc(100% + 16px); margin: 0 -8px; border-collapse: separate; border-spacing: 8px 0; table-layout: fixed; }
.pr-col-free { --col: var(--c-free); } .pr-col-base { --col: var(--c-base); }
.pr-col-pro { --col: var(--c-pro); } .pr-col-corporate { --col: var(--c-corporate); }
.pr-table th, .pr-table td { padding: 0; }
.pr-corner { width: 32%; }
.pr-table thead th { vertical-align: top; background: var(--pr-card); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 30px -22px rgba(34, 23, 15, .5); }
.pr-band { display: block; padding: 13px 10px; border-radius: 20px 20px 0 0; background: var(--col); color: #fff; font: 700 1.02rem/1.2 var(--pr-display); text-align: center; }
.pr-hot .pr-band { box-shadow: inset 0 3px 0 var(--pr-brass); }
.pr-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 18px; text-align: center; }
.pr-price { margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 6px; }
.pr-price b { font: 800 clamp(30px, 2.8vw, 42px)/1 var(--pr-display); letter-spacing: -.035em; color: var(--col, var(--pr-ink)); font-variant-numeric: tabular-nums; }
.pr-price span { font-size: .86rem; color: var(--pr-mute); }
.pr-price b.pr-quote, .pr-quote { font-size: 1.05rem; line-height: 1.25; letter-spacing: 0; }
.pr-fit { min-height: 3.9em; font-size: .86rem; line-height: 1.4; color: var(--pr-mute); text-wrap: pretty; }
.pr-hd .pr-btn { width: 100%; }
.pr-ribbon { margin: 2px -12px -18px; align-self: stretch; padding: 7px 8px; background: var(--pr-brass); color: var(--pr-ink); font: 700 .78rem/1.2 var(--pr-text); letter-spacing: .02em; }
.pr-grp th { padding: 26px 6px 8px !important; text-align: left; font: 700 .82rem/1.2 var(--pr-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pr-copper-d); border-bottom: 2px solid var(--pr-kraft-d); }
.pr-table tbody th[scope="row"] { padding: 13px 10px 13px 6px; text-align: left; font: 500 .95rem/1.4 var(--pr-text); color: var(--pr-ink); border-bottom: 1px solid rgba(34, 23, 15, .09); }
.pr-table tbody td {
  height: 52px; padding: 0 6px; text-align: center; vertical-align: middle;
  background: color-mix(in srgb, var(--col) 8%, var(--pr-card)); border-bottom: 1px solid color-mix(in srgb, var(--col) 16%, transparent);
  transition: background-color .25s;
}
.pr-table tbody .pr-grp + tr td { box-shadow: inset 0 2px 0 var(--pr-kraft-d); }
.pr-table tbody td.pr-hot, .pr-table tbody .pr-col-pro { background: color-mix(in srgb, var(--col) 12%, var(--pr-card)); }
.pr-yes, .pr-no { display: inline-block; width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 50%; vertical-align: middle; }
.pr-yes { background: var(--col); color: #fff; }
.pr-no { background: rgba(34, 23, 15, .07); color: rgba(34, 23, 15, .38); }
.pr-val { font: 700 1.12rem/1.1 var(--pr-display); color: var(--col); font-variant-numeric: tabular-nums; }
.pr-txt { font-size: .82rem; line-height: 1.3; color: var(--pr-mute); }
/* Однакове для всіх тарифів — одна клітинка на всю ширину: таблиця показує лише різницю. */
.pr-table tbody td.pr-all { background: rgba(217, 164, 65, .14); border-bottom-color: rgba(138, 100, 20, .18); border-radius: 12px; }
.pr-all .pr-txt { font-size: .9rem; font-weight: 600; color: #6B4A1E; }
.pr-foot td { padding: 16px 12px 18px; background: color-mix(in srgb, var(--col) 8%, var(--pr-card)); border-radius: 0 0 20px 20px; }
.pr-foot td:first-child { background: none; }
@media (hover: hover) {
  .pr-table:has(.pr-col-free:hover) tbody .pr-col-free, .pr-table:has(.pr-col-base:hover) tbody .pr-col-base,
  .pr-table:has(.pr-col-pro:hover) tbody .pr-col-pro, .pr-table:has(.pr-col-corporate:hover) tbody .pr-col-corporate {
    background: color-mix(in srgb, var(--col) 18%, var(--pr-card)); }
}
.pr-switch { display: none; }

/* ── супровід: латунні бирки на мідній смузі ───────────────────────────── */
.pr-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; filter: drop-shadow(0 18px 22px rgba(40, 12, 2, .45)); }
.pr-tag {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 52px 26px 24px;
  background: linear-gradient(170deg, #F6DD9C, var(--pr-brass) 75%, #C48E2E); color: var(--pr-ink);
  clip-path: polygon(16% 0, 84% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  transform-origin: 50% 0;
}
/* Отвір бирки з латунним вічком. */
.pr-tag::before {
  content: ""; position: absolute; left: 50%; top: 16px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #6E2D12; box-shadow: 0 0 0 4px #E9C26A, 0 0 0 5px rgba(40, 12, 2, .25);
}
.pr-tag h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--pr-espresso); }
.pr-tag .pr-price { justify-content: flex-start; }
.pr-tag .pr-price b { color: var(--pr-copper-d); font-size: clamp(36px, 3.4vw, 48px); }
.pr-tag .pr-price span { color: #6B4A1E; }
.pr-tag-t { margin: 0; font-size: .95rem; line-height: 1.55; color: #3E2A16; text-wrap: pretty; }
.pr-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; margin-top: auto; font-weight: 700; color: var(--pr-espresso); text-decoration: none; }
.pr-link .pr-go { transform: rotate(-90deg); transition: transform .25s var(--pr-ease); }
.pr-link:hover .pr-go { transform: rotate(-90deg) translateY(4px); }
.pr-years { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 2px 0; }
.pr-years i { position: relative; height: 30px; border-radius: 8px; background: rgba(42, 29, 21, .14); overflow: hidden; }
.pr-years i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pr-copper-d), var(--pr-copper)); transform-origin: left; }
.pr-years span { position: relative; display: grid; place-items: center; height: 100%; font: 700 .8rem var(--pr-display); color: #fff; }

/* ── послуги: смуга плиток і дороги з віхами ──────────────────────────── */
.pr-strip-h { margin: 0 0 12px; font: 700 .82rem/1 var(--pr-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pr-copper-d); }
.pr-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; margin: 0 -2px; }
/* Плитка — як плитки прошивки: кремова, заокруглена, значок у кутку, підпис і значення. */
.pr-tile {
  flex: 0 0 clamp(220px, 24%, 280px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  min-height: 200px; padding: 18px; border-radius: 22px; background: var(--pr-card); color: var(--pr-ink); text-decoration: none;
  border: 1px solid rgba(34, 23, 15, .1); box-shadow: 0 1px 0 #fff inset, 0 12px 26px -20px rgba(34, 23, 15, .55);
  transition: transform .35s var(--pr-ease), box-shadow .35s var(--pr-ease), border-color .35s;
}
.pr-tile:hover { transform: translateY(-4px); border-color: var(--pr-copper); box-shadow: 0 22px 36px -24px rgba(34, 23, 15, .6); text-decoration: none; }
.pr-tile-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(180, 87, 42, .12); color: var(--pr-copper-d); flex: none; }
.pr-tile-ico svg { width: 24px; height: 24px; }
.pr-tile-n { font: 700 1.05rem/1.25 var(--pr-display); }
.pr-tile-p { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(217, 164, 65, .22); color: #6B4A1E; font-size: .82rem; font-weight: 700; }
.pr-tile-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--pr-copper-d); }
.pr-tile .pr-go { transform: rotate(-90deg); }

.pr-routes-h { margin: clamp(44px, 6vw, 72px) 0 0; color: var(--pr-ink); font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; }
.pr-roads { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.pr-road { padding: 22px 24px 26px; border-radius: 24px; background: rgba(255, 252, 246, .72); border: 1px solid rgba(34, 23, 15, .08); }
.pr-road-h { display: inline-flex; align-items: center; gap: 12px; font: 700 1.12rem/1.2 var(--pr-display); color: var(--pr-ink); text-decoration: none; }
.pr-road-h:hover { color: var(--pr-copper-d); }
.pr-miles { --road: 12px; position: relative; list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
/* Дорога: темна смуга з розміткою, на ній віхи-шпильки. */
.pr-miles::before {
  content: ""; position: absolute; left: 22px; right: calc((100% - 14px * (var(--n) - 1)) / var(--n) - 22px); top: calc(22px - var(--road) / 2); height: var(--road); border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(246, 235, 214, .85) 0 14px, transparent 14px 28px) center / 100% 2px no-repeat, #4A3727;
  transform-origin: left;
}
.pr-miles li { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-miles i {
  --pin: var(--pr-copper); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 1rem var(--pr-display); font-style: normal;
  color: #fff; background: var(--pin); box-shadow: 0 0 0 5px var(--pr-card), 0 10px 18px -8px rgba(34, 23, 15, .6);
}
.pr-miles li:nth-child(5n + 2) i { --pin: var(--pr-brass); color: var(--pr-ink); }
.pr-miles li:nth-child(5n + 3) i { --pin: var(--pr-mal); }
.pr-miles li:nth-child(5n + 4) i { --pin: var(--pr-sage); }
.pr-miles li:nth-child(5n + 5) i { --pin: var(--pr-espresso); }
.pr-miles span { font-size: .93rem; line-height: 1.45; color: var(--pr-ink); text-wrap: pretty; }
.pr-roads-one .pr-road { background: rgba(255, 252, 246, .82); }

/* ── питання ───────────────────────────────────────────────────────────── */
.pr-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.pr-faq-grid .pr-ch-h { position: sticky; top: calc(var(--pr-top) + 80px); }
.pr-faq { border-top: 1px solid rgba(34, 23, 15, .16); }
.pr-faq details { border-bottom: 1px solid rgba(34, 23, 15, .16); interpolate-size: allow-keywords; }
.pr-faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--pr-ease), content-visibility .4s allow-discrete; }
.pr-faq details[open]::details-content { height: auto; }
.pr-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; padding: 10px 4px; font: 600 1.06rem/1.35 var(--pr-text); cursor: pointer; list-style: none; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(180, 87, 42, .12); transition: background-color .25s; }
.pr-plus::before, .pr-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--pr-copper-d); transform: translate(-50%, -50%); }
.pr-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--pr-ease); }
.pr-faq details[open] .pr-plus { background: var(--pr-copper); }
.pr-faq details[open] .pr-plus::before, .pr-faq details[open] .pr-plus::after { background: #fff; }
.pr-faq details[open] .pr-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.pr-faq p { margin: 0 4px 20px; max-width: 64ch; line-height: 1.65; color: var(--pr-mute); text-wrap: pretty; }

/* ── зв'язок ───────────────────────────────────────────────────────────── */
.pr-final { padding-bottom: clamp(80px, 10vw, 140px); }
.pr-final .pr-ch-h { max-width: 900px; }
.pr-final .pr-ch-h h2 { font-size: clamp(40px, 6.4vw, 84px); }
.pr-reach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-reach a {
  display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 14px 18px; box-sizing: border-box; border-radius: 20px;
  background: rgba(246, 235, 214, .06); border: 1px solid rgba(217, 164, 65, .3); color: var(--pr-cream); text-decoration: none;
  transition: transform .3s var(--pr-ease), border-color .3s, background-color .3s;
}
.pr-reach a:hover { transform: translateY(-3px); border-color: var(--pr-brass); background: rgba(217, 164, 65, .1); text-decoration: none; }
.pr-reach b { display: block; font-weight: 700; color: #fff; }
.pr-reach-v { display: block; font-size: .9rem; color: rgba(246, 235, 214, .72); overflow-wrap: anywhere; }
.pr-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pr-copper); color: #fff; }
.pr-dot svg { width: 22px; height: 22px; }
.pr-reach-wa .pr-dot { background: #25A35A; }
body:has(.pr-page) .app-footer { margin-top: 0; }

/* ── сторінка послуги ──────────────────────────────────────────────────── */
.pr-svc-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.pr-svc-hero .pr-hero-t { max-width: 760px; }
.pr-svc-hero .pr-lang { display: block; width: max-content; }
.pr-svc-ico { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 22px; background: rgba(217, 164, 65, .18); color: var(--pr-brass); }
.pr-svc-ico svg { width: 34px; height: 34px; }
.pr-svc-hero h1 { font-size: clamp(40px, 6vw, 76px); }
.pr-svc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 26px 0 0; }
.pr-svc-price span { font-size: .9rem; color: rgba(246, 235, 214, .7); }
.pr-svc-price b { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--pr-display); color: #fff; }

/* ── рух: лише коли скрипт увімкнув його (html.pr-motion) ──────────────── */
@keyframes pr-drift { from { transform: rotate(-10deg) skewX(-4deg) translateY(0); } to { transform: rotate(-10deg) skewX(-4deg) translateY(-8%); } }
@keyframes pr-rise { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pr-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pr-motion .pr-wall-in { animation: pr-drift 40s ease-in-out infinite alternate; }
/* Авторський момент хіро: сходи тарифів виростають знизу одна за одною. */
.pr-motion .pr-ladder a { transform-origin: 50% 100%; animation: pr-rise .9s var(--pr-ease) both; animation-delay: calc(.25s + var(--k) * .14s); }
.pr-motion .pr-hero-t > * { animation: pr-fade .8s var(--pr-ease) both; }
.pr-motion .pr-hero-t > :nth-child(2) { animation-delay: .07s; }
.pr-motion .pr-hero-t > :nth-child(3) { animation-delay: .14s; }
/* Решта — тиха поява при вході в кадр. */
.pr-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--pr-ease), transform .7s var(--pr-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.pr-motion [data-reveal].in { opacity: 1; transform: none; }
.pr-motion [data-reveal].in.pr-done { transition-delay: 0s; }
/* Таблиця заповнюється: голови стовпців опускаються, рядки йдуть згори вниз, значки «клацають». */
.pr-motion .pr-cmp thead th { opacity: 0; transform: translateY(-16px); transition: opacity .6s var(--pr-ease), transform .6s var(--pr-ease); transition-delay: calc(.1s + var(--c, 0) * .1s); }
.pr-motion .pr-cmp tbody tr { opacity: 0; transition: opacity .5s var(--pr-ease); transition-delay: calc(.45s + var(--r, 0) * .05s); }
.pr-motion .pr-cmp.in thead th, .pr-motion .pr-cmp.in tbody tr { opacity: 1; transform: none; }
.pr-motion .pr-cmp .pr-yes { transform: scale(.3); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.6s + var(--r, 0) * .05s); }
.pr-motion .pr-cmp.in .pr-yes { transform: none; }
/* Бирки гойднулись на вічку. */
.pr-motion .pr-tag[data-reveal] { transform: rotate(-5deg) translateY(10px); }
.pr-motion .pr-tag[data-reveal].in { transform: none; transition: opacity .7s var(--pr-ease), transform 1.1s cubic-bezier(.3, 1.5, .45, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.pr-motion .pr-years i::before { transform: scaleX(0); transition: transform .7s var(--pr-ease); transition-delay: calc(.5s + var(--n) * .3s); }
.pr-motion .pr-patches.in .pr-years i::before { transform: scaleX(1); }
/* Авторський момент послуг: дорога малюється, віхи з'являються по черзі. */
.pr-motion .pr-road .pr-miles::before { transform: scaleX(0); transition: transform 1.3s var(--pr-ease) .2s; }
.pr-motion .pr-road.in .pr-miles::before { transform: scaleX(1); }
.pr-motion .pr-road .pr-miles li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--pr-ease), transform .5s var(--pr-ease); transition-delay: calc(.35s + var(--k) * .22s); }
.pr-motion .pr-road.in .pr-miles li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pr-page *, .pr-page *::before, .pr-page *::after { animation: none !important; transition: none !important; }
  .pr-page [data-reveal], .pr-page [data-reveal] *, .pr-page .pr-miles::before { opacity: 1 !important; transform: none !important; }
}

/* ── планшет ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pr-hero-in { grid-template-columns: minmax(0, 1fr); }
  .pr-wall-in { width: 120%; right: -30%; }
  .pr-tags { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .pr-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-faq-grid .pr-ch-h { position: static; }
  .pr-reach { grid-template-columns: minmax(0, 1fr); }
  /* Дорога вертикально: віхи одна під одною. */
  .pr-miles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pr-miles::before { left: calc(22px - var(--road) / 2); right: auto; top: 22px; bottom: 22px; width: var(--road); height: auto;
    background: repeating-linear-gradient(180deg, rgba(246, 235, 214, .85) 0 14px, transparent 14px 28px) center / 2px 100% no-repeat, #4A3727; transform-origin: top; }
  .pr-motion .pr-road .pr-miles::before { transform: scaleY(0); }
  .pr-motion .pr-road.in .pr-miles::before { transform: scaleY(1); }
  .pr-miles li { flex-direction: row; align-items: center; gap: 16px; }
  .pr-miles i { flex: none; }
}

/* ── телефон і вузький планшет: таблиця — перемикач тарифу й один стовпець ── */
@media (max-width: 720px) {
  .pr-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 6px; border: 0; border-radius: 16px; background: var(--pr-kraft); position: sticky; top: calc(var(--pr-top) + 50px); z-index: 3; }
  .pr-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .pr-switch label { display: grid; place-items: center; min-height: 44px; padding: 4px; border-radius: 11px; font: 700 .8rem/1.15 var(--pr-text); text-align: center; color: var(--pr-ink); cursor: pointer; transition: background-color .25s, color .25s; }
  .pr-switch input:checked + label { background: var(--col); color: #fff; }
  .pr-table, .pr-table thead, .pr-table tbody, .pr-table tfoot { display: block; width: auto; margin: 0; }
  .pr-table tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pr-table th, .pr-table td { display: block; }
  .pr-table .pr-corner, .pr-table [class*="pr-col-"], .pr-foot td:first-child { display: none; }
  .pr-cmp:has(#pr-p-free:checked) .pr-table .pr-col-free, .pr-cmp:has(#pr-p-base:checked) .pr-table .pr-col-base,
  .pr-cmp:has(#pr-p-pro:checked) .pr-table .pr-col-pro, .pr-cmp:has(#pr-p-corporate:checked) .pr-table .pr-col-corporate { display: flex; }
  .pr-table thead tr, .pr-foot { grid-template-columns: minmax(0, 1fr); }
  .pr-table thead th { flex-direction: column; border-radius: 20px; }
  .pr-hd .pr-btn { max-width: 320px; }
  .pr-grp th { grid-column: 1 / -1; padding: 22px 2px 8px !important; }
  .pr-table tbody th[scope="row"] { font-size: .9rem; padding: 12px 8px 12px 2px; }
  .pr-table tbody td { height: auto; min-height: 50px; align-items: center; justify-content: center; border-radius: 0; }
  .pr-table tbody td.pr-all { display: flex; border-radius: 0; }
  .pr-foot td { border-radius: 0 0 20px 20px; }
}
@media (max-width: 560px) {
  .pr-ch { padding: 56px 0; }
  .pr-hero { padding: 36px 0 56px; }
  .pr-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-ladder a { min-height: calc(118px + (var(--k) % 2) * 24px); }
  .pr-wall-in { opacity: .22; }
  .pr-tile { flex-basis: 74%; }
  .pr-road { padding: 18px 16px 22px; }
}