/* Ровные оптические поверхности: глубина создаётся кромкой и тенью, без поворота текста и изображений. */
:root {
  --optical-blue: #1039e8;
  --optical-ink: #14234e;
  --optical-rim: linear-gradient(135deg, #fff 5%, #afc9ff 28%, #527af5 47%, #eaf5ff 62%, #7499ff 85%, #f5faff);
  --optical-face: linear-gradient(150deg, #fff 42%, #f0f5ff);
  --optical-solid: linear-gradient(120deg, #345dff, #103be9 46%, #0828c6 76%, #1f4dfb);
}

/* Одна поверхность вместо двадцати сечений: кромка остаётся гладкой при любом масштабе экрана. */
:is(.pricing-service, .format-card, .showcase-window, .work-window, .pricing-summary)[data-optical-surface] {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid #8da9ed;
  border-radius: 22px;
  background: var(--optical-face);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #bed0ff,
    0 2px 0 #c7d9ff, 0 5px 0 #4169ed, 0 7px 0 #15369e,
    0 8px 0 #b4ccff, 0 22px 32px -22px #1747cb85;
  transition: border-color .2s ease, box-shadow .2s ease;
}
[data-optical-surface]::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  padding: 1px;
  background: var(--optical-rim);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Блик следует за указателем, но сама карточка и её содержимое остаются неподвижными. */
[data-optical-surface]::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(ellipse 70% 45% at var(--shine-x, 85%) 0%, #c5d8ff99, transparent 75%),
    linear-gradient(125deg, transparent 57%, #cfddff33 58%, #f5f9ff99 70%, transparent 71%);
  pointer-events: none;
}
[data-optical-surface]:focus-visible { outline: 3px solid #122dcc; outline-offset: 6px; }

/* Рекомендованный формат выделяем цветом, сохраняя ту же ровную геометрию. */
.pricing-list { gap: 28px; padding: 8px 0 28px; }
.pricing-service[data-optical-surface] { padding: 30px 28px; min-height: 450px; color: var(--optical-ink); }
.pricing-service[data-optical-surface]:hover {
  background: var(--optical-face);
  border-color: #446dee;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #bed0ff,
    0 2px 0 #c7d9ff, 0 5px 0 #4169ed, 0 7px 0 #15369e,
    0 8px 0 #b4ccff, 0 26px 36px -20px #1747cb80;
}
.pricing-service-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.pricing-service-top .pricing-service-badge { margin: 0; margin-left: auto; }
.pricing-service h2 { color: #153bbd; }
.pricing-service-description p { color: #485777; }
.pricing-service-cost>strong { color: #1236bc; font-size: 34px; }
.pricing-service-cost>.pricing-service-link { margin-top: 18px; }
.pricing-service.is-pinned[data-optical-surface],
.pricing-service.is-pinned[data-optical-surface]:hover {
  color: #fff;
  border-color: #3157eb;
  background: radial-gradient(ellipse at 95% 0%, #638bff, transparent 60%), linear-gradient(145deg, #2857f8, #1234b6 65%, #10277e);
  box-shadow: inset 0 1px 0 #b4ceff, inset 0 -1px 0 #08288f,
    0 2px 0 #7b9dff, 0 5px 0 #244bd5, 0 7px 0 #0a216c,
    0 8px 0 #9cbaff, 0 24px 34px -20px #183fba99;
}
.pricing-service.is-pinned::before { opacity: .8; }
.pricing-service.is-pinned::after { opacity: .35; }
.pricing-service.is-pinned h2, .pricing-service.is-pinned .pricing-service-cost>strong { color: #fff; }
.pricing-service.is-pinned .pricing-service-description p,
.pricing-service.is-pinned .pricing-service-goal,
.pricing-service.is-pinned .pricing-service-cost>span:not(.pricing-service-link),
.pricing-service.is-pinned .pricing-service-cost>small { color: #edf2ff; }
.pricing-service.is-pinned .pricing-service-badge {
  color: #fff;
  border-color: #ffffff4d;
  background: #1638b380;
  box-shadow: inset 0 1px 0 #ffffff1a;
}
.service-pricing .pricing-summary[data-optical-surface] { position: sticky; padding: 30px 26px; }
.service-pricing .price-total { color: #143ac8; }
.format-grid { gap: 28px; padding: 8px 0 28px; }
.format-card[data-optical-surface] { padding: 28px 26px; min-height: 430px; }
.format-price { color: #1236bc; font-size: 29px; }
/* Рельефная пиктограмма связывает спокойную лицевую панель с насыщенной синей кромкой. */
.format-heading>.service-icon, .pricing-service-top>.service-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 13px;
  color: #fff;
  background: linear-gradient(135deg, #84a9ff 0%, #3260f5 35%, #133bbf 80%, #4778ff);
  border: 1px solid #4b77e7;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 #dcecff, inset 1px 0 0 #abcaff,
    inset 0 -1px 0 #17399b, 0 2px 0 #7c9ff1, 0 4px 0 #2549b0, 0 9px 14px -6px #1d49c780;
}
.format-heading>.service-icon { margin-bottom: 22px; }
.pricing-service.is-pinned .service-icon { color: #1c44cf; background: linear-gradient(135deg, #fff, #d2e2ff 65%, #9bbcff); border-color: #a9c4ff; }

/* Витрина: чертёжная сетка, прозрачная кромка и смещённая синяя грань без наклона экрана. */
.welcome-showcase, .work-stage, .customer-case .case-stage {
  position: relative;
  background: radial-gradient(ellipse at 80% 90%, #b9ceff99, transparent 70%),
    radial-gradient(#7295ed40 .75px, transparent 1px) 0 0 / 16px 16px, #f4f7ff;
  border: 1px solid #dce5fb;
  border-radius: 26px;
  padding: 28px 26px 40px;
}
.showcase-window[data-optical-surface], .work-window[data-optical-surface] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  border-radius: 22px;
  border-color: #527aed;
  background: linear-gradient(135deg, #f6fbff 0%, #b5d0ff 15%, #4c7dff 42%, #ddeaff 62%, #5c87f7 82%, #adc9ff);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #e5f2ff, inset 0 -1px 0 #204cb9,
    1px 2px 0 #7ea5ff, 3px 4px 0 #315cdd, 5px 6px 0 #1b43bd,
    7px 8px 0 #10319a, 8px 9px 0 #86acff, 14px 22px 28px -16px #153e9d99;
}
.showcase-window[data-optical-surface]::before, .work-window[data-optical-surface]::before { inset: 1px; padding: 2px; }
.showcase-window[data-optical-surface]::after, .work-window[data-optical-surface]::after {
  z-index: 1;
  inset: 1px;
  padding: 9px;
  background: radial-gradient(ellipse 45% 60% at var(--shine-x, 25%) 0%, #fff, transparent 80%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.work-toolbar {
  height: 36px;
  background: linear-gradient(100deg, #163bc0, #2859e4 65%, #3b6def);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #133caf;
  color: #f1f6ff;
  font-size: 10px;
  box-shadow: inset 0 1px 0 #a9c7ff;
}
.work-window-dots { gap: 5px; }
.work-window-dots>i { width: 6px; height: 6px; background: #9ebdff; box-shadow: inset 0 1px 0 #ddebff; }
.work-window-dots>i:first-child { background: #eff6ff; }
.work-window-mark { display: none; }
.showcase-screen, .work-window .work-screen { border-radius: 0 0 12px 12px; background: #fff; }
.showcase-caption { position: relative; display: table; margin: 22px auto 0; border: 0; padding: 0; background: none; color: #606a7d; }
.work-card:not(:focus-visible) .work-screen>* { filter: none; }
.work-card { padding-block: 42px; }
.work-stage { padding: 28px 28px 40px; }
.work-open {
  border-color: #93aff3;
  background: linear-gradient(135deg, #fff, #e3edff);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b9cef8, 0 3px 0 #7799e4;
}
.work-card:is(:hover, :focus-visible) .work-open { background: #dce8ff; border-color: #577de0; }
.case-facts section, .case-contact, .welcome-next {
  border: 1px solid #c5d2ec;
  background: linear-gradient(135deg, #fafcff, #eef3fd);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d8e2f6, 0 12px 24px -20px #294a9655;
}
.project-slides { border: 1px solid #aabde7; border-radius: 20px; background: #f7faff; box-shadow: inset 0 0 0 3px #e7eefb, 0 3px 0 #b5c7ec, 0 18px 26px -20px #234cd366; }
.service-example-section .estimate-example { border-color: #a1b9f0; box-shadow: 0 3px 0 #d8e2f6, 0 14px 24px -18px #204ad966; }

/* Кнопки оформлены как небольшие синие или прозрачные элементы с видимыми боковыми гранями. */
:is(.customer-page, .estimate-page, .customer-case, .assembly-header, .request-dialog, .portfolio-library) .button,
.pricing-service .pricing-service-link, .service-disclosure-action {
  position: relative;
  border-radius: 11px;
  border: 1px solid #153ad3;
  background: var(--optical-solid);
  color: white;
  box-shadow: inset 0 1px 1px #ffffffb3, inset 1px 0 1px #adc9ff, inset 0 -1px 1px #183ec5, 0 2px 0 #446cf8, 0 4px 0 #0623a0, 0 5px 0 #a2bfff, 0 10px 15px -6px #1642cc85;
  text-shadow: 0 1px 1px #032094;
  transition: transform .18s ease, box-shadow .18s ease;
}
:is(.customer-page, .estimate-page, .customer-case, .assembly-header, .request-dialog, .portfolio-library) .button::after,
.pricing-service-link::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(ellipse 20% 3% at 75% 0, #fff, transparent), linear-gradient(115deg, transparent 35%, #ffffff26 44%, transparent 50%);
  pointer-events: none;
}
:is(.customer-page, .estimate-page, .customer-case, .portfolio-library) .button-outline,
.pricing-service:not(.is-pinned) .pricing-service-link {
  border-color: #6a8fea;
  color: #173cbe;
  background: linear-gradient(130deg, #f5faff, #d0e0ff 55%, #eff5ff);
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #aecaff, 0 2px 0 #7c9ded, 0 4px 0 #3257c3, 0 5px 0 #bad5ff, 0 10px 15px -7px #1c45b866;
  text-shadow: 0 1px 0 #fff;
}
:is(.customer-page, .estimate-page, .customer-case, .assembly-header, .request-dialog, .portfolio-library) .button:hover,
.pricing-service:hover .pricing-service-link { transform: translateY(-1px); }
:is(.customer-page, .estimate-page, .customer-case, .assembly-header, .request-dialog, .portfolio-library) .button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 1px #ffffff8c, 0 1px 0 #1031aa, 0 2px 0 #a2bfff, 0 4px 7px -3px #1a42bf66;
}
.pricing-service:hover .pricing-service-link { color: white; background: var(--optical-solid); }
.pricing-service.is-pinned .pricing-service-link,
.pricing-service.is-pinned:hover .pricing-service-link {
  color: #1235ac;
  border-color: #c7dcff;
  background: linear-gradient(125deg, #fff, #dae7ff 65%, #f2f8ff);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 #adc9ff, 0 2px 0 #88a9f1, 0 4px 0 #061c76, 0 5px 0 #7596ea, 0 10px 15px -6px #00155e99;
  text-shadow: 0 1px 0 #fff;
}

.assembly-header { border-bottom-color: #dbe4fa; }
/* Два текстовых фрагмента используют графитовый и синий цвета оформления. */
.wordmark>.wordmark-name, .wordmark>.wordmark-domain {
  display: inline-block;
  line-height: 1.1;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark>.wordmark-name {
  background-image: linear-gradient(148deg, transparent 28%, #e5ecf666 33%, transparent 38%, transparent 68%, #f1f5ff73 73%, transparent 77%), linear-gradient(180deg, #758091 0%, #303743 25%, #242b36 57%, #525c6e 80%, #242a35 100%);
  -webkit-text-stroke: .18px #343b48;
  filter: drop-shadow(.35px .85px 0 #202632);
}
.wordmark>.wordmark-domain {
  background-image: linear-gradient(148deg, transparent 18%, #e3f1ff99 25%, transparent 32%, transparent 65%, #a7cbff80 72%, transparent 78%), linear-gradient(180deg, #6c9aff 0%, #1248ff 25%, #0432d9 61%, #2154f4 81%, #0827a3 100%);
  -webkit-text-stroke: .18px #1037bf;
  filter: drop-shadow(.35px .85px 0 #082478);
}
.service-addons { border: 1px solid #9cb4ee; border-radius: 20px; background: #fbfcff; box-shadow: inset 0 0 0 2px #fff, 1px 3px 0 #b6caff, 2px 5px 0 #6687d2, 3px 6px 0 #d2e4ff, 4px 15px 22px -17px #1e4ad580; }
.service-addons-heading { background: linear-gradient(125deg, #d8e5ff, #f8fcff 44%, #c4d6ff 90%); border-bottom: 3px solid #a1bbf5; box-shadow: inset 0 2px 1px #fff, inset 0 -1px 0 #fff; }
.service-pricing .service-explanation { border: 1px solid #86a4ee; border-top: 6px solid #2754ec; background: linear-gradient(120deg, #dfeaff, #f7fbff 48%, #d0e0ff); box-shadow: inset 0 2px 0 #e7f3ff, 1px 3px 0 #9fbafa, 2px 5px 0 #3a60c6, 3px 6px 0 #c2d9ff, 4px 16px 25px -20px #1b41ca99; }
.service-pricing .is-selected .option-check { background: var(--optical-solid); box-shadow: inset 0 1px 2px #06239a80, 0 1px 0 #fff; }
.service-pricing .quote-launch-notes { border-color: #c1cfee; background: #f9fbff; }

@media (max-width: 1100px) {
  .service-pricing .pricing-summary[data-optical-surface] { position: static; }
  .welcome-showcase { max-width: 650px; }
}
@media (max-width: 760px) {
  .pricing-service[data-optical-surface] { min-height: 0; padding: 28px 25px; }
  /* На узком экране карточке нужна полная ширина, чтобы описание не превращалось в длинный столбец. */
  .pricing-list { grid-template-columns: minmax(0, 1fr); }
  .pricing-list, .format-grid { gap: 30px; padding-inline: 3px; }
  .format-card[data-optical-surface] { padding: 26px 24px; min-height: 0; }
  .welcome-showcase, .customer-case .case-stage { padding: 20px 18px 30px; border-radius: 20px; }
  .work-stage { padding: 22px 20px 32px; border-radius: 20px; }
  .work-card { padding-block: 30px; }
  .showcase-window[data-optical-surface], .work-window[data-optical-surface] { padding: 7px; border-radius: 18px; }
  .showcase-window[data-optical-surface]::before, .work-window[data-optical-surface]::before { padding: 1px; }
  .showcase-window[data-optical-surface]::after, .work-window[data-optical-surface]::after { padding: 6px; }
  .work-toolbar { height: 30px; border-radius: 12px 12px 0 0; }
  .showcase-screen, .work-window .work-screen { border-radius: 0 0 12px 12px; }
  .work-window-dots>i { width: 5px; height: 5px; }
  .showcase-caption { margin-top: 24px; }
  .format-price { font-size: 27px; }
  .pricing-service-cost>strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-optical-surface], .button, .pricing-service-link { transition: none !important; }
}
@media (forced-colors: active) {
  [data-optical-surface]::before, [data-optical-surface]::after,
  .welcome-showcase::after, .work-stage::after, .case-stage::after, .button::after { display: none !important; }
  [data-optical-surface], .button { transform: none !important; box-shadow: none !important; }
  .pricing-service[data-optical-surface], .pricing-summary[data-optical-surface] { border: 2px solid CanvasText; }
  .pricing-service.is-pinned[data-optical-surface] { border: 3px solid Highlight; }
  .wordmark>.wordmark-name, .wordmark>.wordmark-domain { background: none; color: LinkText; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; filter: none; }
}