/* Конструктор — робочий стіл із напрямами, картками та живим підсумком. */
.constructor-page { background:radial-gradient(ellipse at 46% 270px,#112b491f,transparent 60%),#07101e; }
.constructor-main { width:min(1320px,calc(100% - 64px)); margin:0 auto; padding:38px 0 80px; }
.constructor-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:32px; }
.constructor-heading .eyebrow { font-size:12px; margin-bottom:14px; }
.constructor-heading h1 { font-size:clamp(34px,3.9vw,52px); line-height:1.08; letter-spacing:-.05em; }
.constructor-heading h1 br { display:none; }.constructor-heading h1 em { margin-left:9px; color:#719ac3; }
.constructor-heading p { margin:17px 0 0; font-size:14px; color:#8da5bf; }
.constructor-help { flex-shrink:0; font-size:13px; color:#acc5df; padding-bottom:5px; line-height:1.8; }.constructor-help > span { display:block; color:#6192bc; font-size:12px; }.constructor-help:hover > span { color:#7ed8ff; }
.constructor-workspace { display:grid; grid-template-columns:180px minmax(0,1fr) 298px; min-height:665px; gap:18px; align-items:start; }
.category-rail { display:flex; flex-direction:column; padding:22px 0; align-self:stretch; }
.rail-label { text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:#58718d; padding:0 15px 16px; }
.category-tabs { display:flex; flex-direction:column; gap:8px; }
.category-tab { display:flex; align-items:center; gap:11px; min-height:60px; padding:13px 11px; width:100%; position:relative; border:1px solid transparent; border-radius:13px; text-align:left; font-size:13px; line-height:1.4; color:#91aac4; background:transparent; transition:background .25s,border-color .25s,color .25s; }
.category-tab > svg { width:21px; height:21px; flex-shrink:0; stroke-width:1.5; }.category-tab > span:first-of-type { flex:1; }.category-tab:hover { background:#12304b55; color:#d1eaff; }.category-tab[aria-selected="true"] { background:linear-gradient(100deg,#16466e73,#0e263c4a); border-color:#32628e71; color:#c7e8ff; }.category-tab[aria-selected="true"]::before { content:""; position:absolute; left:-1px; top:17px; bottom:17px; width:2px; border-radius:3px; background:#45c3ff; box-shadow:0 0 10px #2fb7ff; }.category-tab[aria-selected="true"] > svg { color:#73d2ff; }.category-badge { font-size:10px; color:#85c8ff; background:#163d64; border-radius:99px; padding:2px 6px; min-width:20px; text-align:center; }.category-badge:empty { visibility:hidden; }
.rail-bottom { margin-top:auto; padding:45px 15px 0; }.small-blue-rule { display:block; width:27px; height:2px; background:#177bc0; }.rail-bottom p { margin:15px 0 0; font-size:12px; line-height:1.9; color:#4e6d8d; }
.service-workbench { padding:27px; border:1px solid #4172964d; border-radius:25px; position:relative; background:radial-gradient(ellipse at top left,#163a5a5e,transparent 60%),linear-gradient(145deg,#0d1d31e3,#091321ed); overflow:hidden; box-shadow:0 25px 80px #0002; min-height:665px; }
.service-workbench::before { content:""; position:absolute; top:-1px; left:13%; right:39%; height:1px; background:linear-gradient(90deg,transparent,#8dbbdd8c,transparent); }
.workbench-heading { display:flex; justify-content:space-between; gap:15px; padding-bottom:26px; border-bottom:1px solid #6589aa26; margin-bottom:24px; }.workbench-kicker { font-size:11px; letter-spacing:.13em; color:#4a83b1; }.workbench-heading h2 { font-size:29px; letter-spacing:-.04em; margin:10px 0 12px; }.workbench-heading p { margin:0; max-width:360px; font-size:13px; line-height:1.75; color:#7d99b5; }.workbench-icon { width:50px; height:50px; flex-shrink:0; margin-top:9px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#214367,#0b192e); border:1px solid #5c8aac48; color:#8fcbfb; box-shadow:inset 0 1px 0 #a9dfff16; }.workbench-icon > svg { width:26px; height:26px; }
.builder-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; min-height:305px; align-items:stretch; }
.builder-service { appearance:none; display:flex; position:relative; flex-direction:column; text-align:left; padding:22px 18px 19px; border:1px solid #3f608050; border-radius:17px; background:radial-gradient(circle at var(--x,50%) var(--y,0%),#2e629536,transparent 65%),linear-gradient(145deg,#15273b90,#0b192ca1); color:#d9e9f9; transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s; min-height:206px; overflow:hidden; }
.builder-service:hover { transform:translateY(-3px); border-color:#66b5ff80; background-color:#183b5e44; box-shadow:0 10px 25px #0002; }
.builder-service[aria-pressed="true"] { border-color:#359beacc; background:radial-gradient(ellipse at top left,#087abb42,transparent 80%),linear-gradient(150deg,#153553,#0e2440); box-shadow:inset 0 1px 0 #71dbff33,0 0 22px #0876dd0d; }
.builder-service[aria-pressed="true"]::after { content:""; height:2px; background:linear-gradient(90deg,transparent,#29bcff,transparent); position:absolute; left:18%; right:18%; bottom:0; }
.builder-service-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }.builder-service-top > svg { width:27px; height:27px; stroke-width:1.4; color:#86b8df; }.selection-mark { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; border:1px solid #557c9b66; background:#0b1727; color:#6b93b5; transition:transform .25s,background .25s; }.selection-mark > svg { width:15px; height:15px; }.builder-service[aria-pressed="true"] .selection-mark { background:#0878d5; border-color:#61c4ff; color:#eaffff; transform:rotate(360deg); }.builder-service-title { display:block; font-size:16px; font-weight:600; line-height:1.4; letter-spacing:-.025em; margin-bottom:10px; }.builder-service-text { display:block; color:#86a0bc; font-size:12px; line-height:1.85; font-weight:400; }.builder-service[aria-pressed="true"] .builder-service-text { color:#a0bbd5; }
.workbench-footer { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:23px; padding-top:20px; border-top:1px solid #5476972e; }.workbench-footer > p { margin:0; font-size:11px; line-height:1.8; color:#567896; max-width:210px; }.next-category { padding:0; color:#81b5df; font-size:12px; border:0; background:none; display:flex; align-items:center; gap:12px; text-align:right; }.next-category > span { font-size:22px; }.next-category:hover { color:#b4e4ff; }
.plan-panel { position:sticky; top:115px; padding:25px 22px 20px; border:1px solid #7093b54d; border-radius:24px; background:linear-gradient(150deg,#203a5273,#101e3099 45%,#0a1426d9); box-shadow:inset 0 1px 0 #c6e7ff13,0 24px 60px #0002; backdrop-filter:blur(16px); }
.plan-panel::before { content:""; position:absolute; z-index:-1; inset:9px -7px -8px 7px; border:1px solid #31557755; border-radius:24px; background:#10213829; pointer-events:none; }.plan-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.plan-top .eyebrow { font-size:10px; color:#698fab; letter-spacing:.08em; margin-bottom:8px; }.plan-top h2 { font-size:25px; margin:0; letter-spacing:-.04em; }.selection-counter { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; border:1px solid #4c8fc480; background:linear-gradient(135deg,#173e67,#10263e); font-size:17px; color:#92d5ff; font-variant-numeric:tabular-nums; }
.plan-map { margin:20px 0; }.plan-map > svg { width:100%; height:auto; overflow:visible; }.map-line { fill:none; stroke:#264762; stroke-width:1; }.map-node > circle { fill:#0a1a2b; stroke:#35536f; stroke-width:1; transition:fill .4s,stroke .4s; }.map-node > text { text-anchor:middle; font-size:10px; fill:#567792; stroke:none; font-family:var(--font); transition:fill .3s; }.map-node.is-active > circle { fill:#103e69; stroke:#34bdff; filter:drop-shadow(0 0 4px #1681e766); }.map-node.is-active > text { fill:#a7e6ff; }.plan-map.has-selection .map-line { stroke:url(#map-blue); stroke-dasharray:4 5; animation:map-flow 1.8s linear infinite; }.map-business { fill:#102a43; stroke:#3b78a1; stroke-width:1; }.map-business-text { font-size:11px; text-anchor:middle; fill:#83badf; stroke:none; font-family:var(--font); }
.plan-empty { text-align:center; padding:11px 5px 28px; border-bottom:1px solid #53739237; }.plan-empty > span { display:block; font-size:25px; color:#4d80a5; line-height:1; margin-bottom:15px; }.plan-empty h3 { font-size:15px; margin:0 0 12px; font-weight:500; color:#abc4dd; letter-spacing:-.02em; }.plan-empty p { font-size:12px; line-height:1.9; color:#6584a1; margin:0; }
.plan-items { display:grid; gap:8px; max-height:300px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#315675 transparent; }.plan-item { display:flex; align-items:center; gap:9px; border:1px solid #3d5f7b4a; background:#17314a63; border-radius:9px; padding:10px; font-size:12px; line-height:1.5; color:#b1cbe1; animation:chip-in .32s var(--ease); }.plan-item > svg { width:16px; height:16px; flex-shrink:0; color:#659fc8; }.plan-item > span { flex:1; }.plan-item > button { display:grid; place-items:center; border:0; background:#11273b; color:#7b9cba; height:26px; width:26px; flex-shrink:0; padding:0; border-radius:6px; font-size:20px; line-height:1; }.plan-item > button:hover { color:#fff; background:#244868; }
.plan-price-note { padding:22px 0 18px; }.plan-price-note > span { display:block; font-size:10px; color:#597b9a; margin-bottom:6px; }.plan-price-note strong { display:block; color:#bdd7ee; font-size:14px; font-weight:600; }.plan-price-note p { font-size:11px; line-height:1.8; color:#6a88a5; margin:8px 0 0; }.plan-submit { width:100%; font-size:13px; padding:13px 14px; gap:12px; min-height:46px; }.plan-submit > span { font-size:20px; line-height:1; }.plan-utilities { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:15px; }.plan-utilities button { color:#7498b8; font-size:11px; padding:3px 0; border:0; background:none; }.plan-utilities button:hover:not(:disabled) { color:#c2e5ff; }
.builder-bottom-bar { display:none; }.plan-dialog [data-mobile-plan-items] { display:grid; gap:9px; max-height:48dvh; overflow:auto; }.plan-dialog .plan-item { font-size:13px; }.plan-dialog .plan-item > button { width:34px; height:34px; }
.flying-selection { position:fixed; z-index:200; pointer-events:none; width:25px; height:25px; border-radius:8px; display:grid; place-items:center; background:#4abaff; color:#052542; border:1px solid #bdefff; box-shadow:0 0 25px #28a5ff77; font-size:15px; }
@keyframes map-flow { to { stroke-dashoffset:-18; } }@keyframes chip-in { from { opacity:0; transform:translateX(9px); } to { opacity:1; transform:translateX(0); } }
@media(min-width:1500px) { .constructor-main { width:min(1430px,calc(100% - 100px)); }.constructor-workspace { grid-template-columns:200px minmax(0,1fr) 320px; gap:25px; }.builder-service { min-height:214px; padding:25px; }.builder-service-text { font-size:13px; }.builder-service-title { font-size:17px; } }
@media(max-width:1180px) { .constructor-main { width:calc(100% - 44px); }.constructor-workspace { grid-template-columns:150px minmax(0,1fr) 268px; gap:13px; }.category-tab { gap:9px; padding:12px 8px; font-size:12px; }.category-tab > svg { width:18px; height:18px; }.service-workbench { padding:23px 19px; }.builder-service-grid { gap:10px; }.builder-service { padding:18px 14px; }.builder-service-title { font-size:14px; }.builder-service-text { font-size:12px; line-height:1.75; }.workbench-heading h2 { font-size:26px; }.plan-panel { padding:22px 18px; }.constructor-heading h1 { font-size:40px; }.constructor-heading h1 br { display:block; }.constructor-heading h1 em { margin-left:0; }.constructor-help { max-width:185px; }.workbench-footer { flex-direction:column; align-items:flex-start; gap:12px; }.workbench-footer > p { max-width:none; }.next-category { text-align:left; } }
@media(max-width:980px) { .constructor-workspace { grid-template-columns:minmax(0,1fr) 280px; gap:19px; }.category-rail { grid-column:1/-1; display:block; padding:0; }.rail-label,.rail-bottom { display:none; }.category-tabs { flex-direction:row; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }.category-tabs::-webkit-scrollbar { display:none; }.category-tab { flex:1; min-width:136px; width:auto; padding:12px; min-height:62px; font-size:12px; }.category-tab > svg { width:21px; height:21px; }.category-tab[aria-selected="true"]::before { top:auto; bottom:0; left:20px; right:20px; height:2px; width:auto; }.plan-panel { top:102px; }.service-workbench { min-height:600px; }.constructor-heading { margin-bottom:23px; }.builder-service { min-height:207px; } }
@media(max-width:700px) {
 .constructor-main { width:calc(100% - 32px); padding:28px 0 55px; }.constructor-heading { align-items:flex-start; gap:15px; }.constructor-heading h1 { font-size:37px; }.constructor-heading .eyebrow { font-size:11px; margin-bottom:14px; }.constructor-heading p { font-size:13px; line-height:1.75; max-width:330px; margin-top:17px; }.constructor-help { display:none; }.constructor-workspace { grid-template-columns:1fr; gap:15px; }.category-rail { position:sticky; top:80px; z-index:15; padding:11px 0 10px; margin-top:-11px; background:linear-gradient(#07101ef5 84%,#07101e00); }.category-tabs { gap:8px; }.category-tab { min-width:147px; min-height:58px; padding:10px 12px; font-size:12px; background:#112136b5; }.category-tab > span:first-of-type { flex:1; }.category-tab[aria-selected="true"] { background:linear-gradient(100deg,#134268e8,#12324dbf); }.plan-panel { display:none; }.service-workbench { min-height:0; padding:24px 20px 21px; border-radius:21px; }.workbench-heading { margin-bottom:20px; padding-bottom:20px; }.workbench-heading h2 { font-size:27px; margin-top:8px; }.workbench-heading p { font-size:13px; line-height:1.7; max-width:290px; }.workbench-icon { width:43px; height:43px; border-radius:13px; }.workbench-icon > svg { width:23px; height:23px; }.builder-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.builder-service { min-height:228px; padding:18px 14px; }.builder-service-title { font-size:15px; line-height:1.35; }.builder-service-text { font-size:12px; }.builder-service-top { margin-bottom:18px; gap:10px; }.builder-service-top > svg { width:25px; height:25px; }.selection-mark { width:27px; height:27px; flex-shrink:0; }.workbench-footer > p { font-size:11px; }.next-category { font-size:13px; }.builder-bottom-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; position:fixed; z-index:45; bottom:12px; left:12px; right:12px; border:1px solid #6d9bb873; border-radius:19px; padding:13px 14px; background:linear-gradient(110deg,#152c42f5,#0b1b30f5); backdrop-filter:blur(20px); box-shadow:0 10px 60px #0009; }.mobile-plan-count { display:flex; flex-direction:column; gap:3px; text-align:left; padding:0; background:none; border:0; color:#b1d1ec; }.mobile-plan-count > span { font-size:15px; font-weight:600; }.mobile-plan-count > small { font-size:10px; color:#678cae; }.builder-bottom-bar > .button { min-height:43px; min-width:137px; font-size:13px; padding:10px 17px; gap:16px; }.builder-bottom-bar > .button > span { font-size:19px; }.constructor-page .site-footer { margin-bottom:20px; }.constructor-page .footer-bottom { padding-bottom:90px; }
}
@media(max-width:370px) { .constructor-heading h1 { font-size:33px; }.constructor-main { width:calc(100% - 28px); }.service-workbench { padding:21px 16px; }.builder-service-grid { grid-template-columns:1fr; }.builder-service { min-height:180px; }.builder-service-top { margin-bottom:14px; }.builder-service-title { font-size:17px; }.builder-service-text { font-size:13px; }.builder-bottom-bar { gap:12px; padding:12px; }.builder-bottom-bar > .button { min-width:126px; }.mobile-plan-count > small { font-size:9px; }.workbench-icon { display:none; } }
@media(prefers-reduced-motion:reduce) { .plan-map.has-selection .map-line { animation:none; }.builder-service:hover { transform:none; }.flying-selection { display:none; } }

/* Readable service explanations at every viewport. */
.builder-service-text { font-size:14px; line-height:1.7; }.workbench-heading p { font-size:14px; }.builder-service-title { font-size:16px; }.category-badge:empty { display:none; }
@media(max-width:420px) { .builder-service-grid { grid-template-columns:1fr; }.builder-service { min-height:183px; }.builder-service-top { margin-bottom:16px; }.builder-service-title { font-size:18px; }.builder-service-text { font-size:14px; } }