/* Fonts (Cormorant Garamond 400-600, Inter 300-600) are linked from the page
   head, right after the preconnects, so they start loading before this file. */
/* AKVORA theme — final synthesis of the design panel (base: theme A "Editorial
   luxury", grafts from D/B). Display serif (Cormorant Garamond) for headlines
   and numerals, Inter for UI and body. Hairlines instead of boxes, warm
   off-white light sections, deep navy dark sections, one restrained accent
   blue. Loaded last; scroll geometry (.pool-story, .pool-stage, .scene-fit,
   hotspot positions and leader-line geometry) is left to the engine/base. */

/* ---------- Tokens ---------- */
:root{
 --navy-950:#061325;--navy-900:#0a1a30;--navy-800:#122750;
 --cream:#f7f4ee;--cream-2:#edeae2;--cream-3:#e3dfd5;
 --text:#111f36;--text-2:#56637a;--text-3:#5f6a7c;
 --blue:#1d63d6;--blue-soft:#8ab8ff;
 --line-dark:rgba(255,255,255,.16);--line-light:rgba(17,31,54,.15);
 --w80:rgba(255,255,255,.82);--w60:rgba(255,255,255,.62);--w45:rgba(255,255,255,.46);
 --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
 --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --focus:#8ab8ff;
 /* engine variables, re-pointed to the theme palette */
 --ink:#0a1a30;--paper:#fff;--muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.16);
}
body{font-family:var(--sans);font-size:16px;background:var(--navy-900);color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
#panel-title:focus-visible,#systems-title:focus-visible,#services-title:focus-visible{outline:none}
.skip-link{top:12px;left:16px;padding:12px 18px;background:#fff;color:var(--navy-900);border-radius:2px;font-size:13px;font-weight:500}
.noscript{margin:0;padding:20px;text-align:center;background:var(--cream);color:var(--text);font-size:15px}
.noscript a{text-decoration:underline;text-underline-offset:4px}

/* ---------- Header: transparent over the scene, solid navy once scrolled ---------- */
.site-header{padding:0 4%;gap:32px;background:transparent;border-bottom:1px solid transparent;color:#fff;transition:background .3s,border-color .3s}
.site-header.is-scrolled{background:var(--navy-950);border-bottom-color:var(--line-dark)}
.wordmark{font-family:var(--sans);font-size:23px;font-weight:600;letter-spacing:.26em;padding-bottom:14px;color:#fff}
.wordmark span{color:var(--blue-soft)}
.wordmark small{left:0;right:.26em;width:auto;font-size:7.5px;font-weight:500;letter-spacing:.34em;color:var(--w60)}
.desktop-nav{gap:30px;margin-left:auto;margin-right:3%}
.desktop-nav button{font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--w80);padding:14px 0;transition:color .2s}
.desktop-nav button:hover{color:#fff}
.desktop-nav button::after{bottom:9px;height:1px;background:#fff;transition:right .25s}
.header-tools{gap:8px}
.icon-button{width:44px;height:44px;border-radius:2px;color:#fff;transition:background .2s}
.icon-button svg{width:20px;height:20px}
.icon-button:hover{background:rgba(255,255,255,.1)}
.header-cta{min-height:42px;padding:0 20px;margin-left:8px;border:1px solid rgba(255,255,255,.5);border-radius:2px;font-size:13px;font-weight:500;letter-spacing:.03em;color:#fff;transition:background .2s,color .2s,border-color .2s}
.header-cta:hover{background:#fff;border-color:#fff;color:var(--navy-900)}

/* ---------- Scene overlays ---------- */
.edge-shade{background:linear-gradient(180deg,rgba(6,19,37,.55) 0%,rgba(6,19,37,0) 24%,rgba(6,19,37,0) 68%,var(--navy-900) 96%),linear-gradient(90deg,rgba(6,19,37,.45),rgba(6,19,37,0) 52%)}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.4}
.intro-copy .eyebrow,.chapter-copy .eyebrow{display:inline-flex;align-items:center;gap:14px;color:var(--w80);font-size:11px;letter-spacing:.3em}
.intro-copy .eyebrow::before,.chapter-copy .eyebrow::before{content:"";flex:none;width:34px;height:1px;background:currentColor;opacity:.7}
.intro-copy h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.3vw,80px);line-height:1.02;letter-spacing:-.01em;margin:22px 0 0;color:#fff;text-shadow:0 2px 30px rgba(6,19,37,.5)}
.intro-copy p{font-size:16px;line-height:1.6;color:var(--w80);margin:24px 0 0;max-width:460px;letter-spacing:0}
.intro-actions{gap:12px;margin-top:34px}
.intro-cta,.intro-secondary{min-height:50px;padding:0 24px;gap:14px;border-radius:2px;font-size:13.5px;font-weight:500;letter-spacing:.03em;box-shadow:none;transition:background .2s,color .2s,border-color .2s}
.intro-cta{background:#fff;border:1px solid #fff;color:var(--navy-900)}
.intro-cta:hover{background:var(--cream);border-color:var(--cream)}
.intro-secondary{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.intro-secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}
.intro-cta span,.intro-secondary span{font-size:16px;line-height:1}
.chapter-copy{text-shadow:0 2px 24px rgba(6,19,37,.7)}
.chapter-copy h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.2vw,50px);line-height:1.05;letter-spacing:0;margin:16px 0 0;color:#fff;max-width:9.2em;text-wrap:balance}
.chapter-copy p{font-size:15px;line-height:1.6;color:var(--w80);margin-top:14px;max-width:400px}

/* Bottom controls: hint, chapters, scrub */
.story-meta{font-size:12px;color:var(--w60);letter-spacing:.02em}
.scroll-hint{gap:14px}.scroll-hint>span{font-size:16px}
#load-status{color:var(--w45);font-size:12px}
#play-motion{font-size:12px;color:#fff;gap:10px;padding:0;font-weight:500}
#play-motion span{font-size:16px}
#retry-motion{border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:0 16px;min-height:40px;font-size:12px;font-weight:500;letter-spacing:.03em;color:#fff;transition:background .2s}
#retry-motion:hover{background:rgba(255,255,255,.1)}
.chapters button{border-top:1px solid rgba(255,255,255,.28);color:var(--w60);font-size:12px;font-weight:500;letter-spacing:.02em;transition:color .25s,border-color .25s}
.chapters button:hover{color:#fff}
.chapters button[aria-current=step]{border-top-color:#fff;color:#fff}
.chapters button span{font-family:var(--display);font-size:13px;font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}
.chapters button[aria-current=step] span{color:var(--blue-soft);opacity:1}
/* Hairline track drawn inside a 24px-tall input, so the slider stays easy to grab. */
.scrub-label{height:24px;margin-top:4px}
.scrub-label input{-webkit-appearance:none;appearance:none;height:24px;background:none;border-radius:0;outline-offset:2px}
.scrub-label input::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.3)}
.scrub-label input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7.5px;border-radius:50%;border:1px solid #fff;background:#fff;cursor:ew-resize}
.scrub-label input::-moz-range-track{height:1px;background:rgba(255,255,255,.3)}
.scrub-label input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid #fff;background:#fff;cursor:ew-resize}
.scrub-label output{font-size:11px;color:var(--w60);width:34px;letter-spacing:.04em}

/* Hotspots: a 44px tap target drawing a 28px hairline ring with a "+"; the
   anchor stays at the box centre, so engine positions are unaffected. Labels
   are sentence case and sit inboard, so the "Нагрев" marker at 91% never clips. */
.hotspot{width:44px;height:44px;border:0;border-radius:50%;background:radial-gradient(circle,rgba(10,26,48,.55) 0 13px,rgba(255,255,255,.95) 13.5px 14.5px,transparent 15.5px);box-shadow:none;color:#fff;font-family:var(--sans);font-weight:300;font-size:19px;line-height:1;animation:none;transition:color .2s,opacity .25s}
.hotspot:hover,.hotspot:focus-visible{background:radial-gradient(circle,#fff 0 14px,transparent 15px);color:var(--navy-900)}
.hotspot:focus-visible{outline-offset:-2px}
.hotspot span{bottom:calc(100% - 4px);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none;color:#fff;text-shadow:0 1px 2px rgba(6,19,37,.9),0 1px 14px rgba(6,19,37,.8)}
.hotspot-contextual span{bottom:auto;top:50%;left:auto;right:calc(100% - 2px);transform:translateY(-50%)}
.hotspot-detached[data-category=pumps] span,.hotspot-detached[data-category=robots] span{bottom:auto;top:calc(100% - 4px)}
.hotspot-detached::before{background:rgba(255,255,255,.75)}
.hotspot-detached::after{border-color:#fff;background:var(--navy-900)}

/* ---------- Shared section pieces ---------- */
.systems,.services,.process,.water-band{scroll-margin-top:78px}
.section-kicker{gap:14px;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.4;color:var(--blue)}
.section-kicker::before{content:"";flex:none;width:34px;height:1px;background:currentColor;opacity:.7}
.section-title{font-size:clamp(40px,4.2vw,62px);line-height:1.02;margin:22px 0 0}
.section-lead{font-size:16px;line-height:1.6;color:var(--text-2);margin:24px 0 0;max-width:520px}
.btn{min-height:52px;padding:0 26px;gap:12px;border-radius:2px;font-size:13.5px;font-weight:500;letter-spacing:.03em;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px}
.btn-light{background:#fff;border:1px solid #fff;color:var(--navy-900)}
.btn-light:hover{background:var(--cream);border-color:var(--cream)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-primary{background:var(--navy-900);border:1px solid var(--navy-900);color:#fff}
.btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800)}

/* ---------- Catalog (warm off-white) ---------- */
.systems{padding:112px 4% 96px;background:#fff;color:var(--text);--focus:var(--blue)}
/* Heading grid: kicker left and "all catalog" link right on the first row, the
   serif title and its lead below, on one left edge. */
.systems .section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;row-gap:0;align-items:start;margin-bottom:56px}
.systems .section-heading-copy{display:contents}
.systems .section-kicker{grid-column:1;grid-row:1;align-self:center}
.systems .section-heading h2{grid-column:1;grid-row:2;font-family:var(--display);font-weight:500;font-size:clamp(40px,4.2vw,62px);line-height:1.02;letter-spacing:0;margin:22px 0 0;color:var(--text)}
.systems .section-heading .section-lead{grid-column:1;grid-row:3;font-size:16px;line-height:1.6;color:var(--text-2);margin:24px 0 0;max-width:560px}
.systems .section-heading .text-button{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;padding:0;min-height:0;gap:10px;font-size:14px;font-weight:500;line-height:1.4;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:rgba(17,31,54,.35);transition:color .2s,text-decoration-color .2s}
.systems .text-button:hover{color:var(--blue);text-decoration-color:currentColor}
.systems .text-button svg{width:16px;height:16px;transition:transform .25s}
.systems .text-button:hover svg{transform:translateX(4px)}
.systems .system-grid{gap:48px 28px}
.systems .system-card{cursor:pointer}
.systems .system-card:hover{background:none;border-color:transparent;box-shadow:none}
/* No tiles: products stand directly on the white section (their own white backgrounds blend in). */
.category-image{background:transparent;padding:4%}
/* The photos sit on near-white (#f5-#fa); lift that to pure white so no square shows. */
.systems .category-image img{filter:brightness(1.05) contrast(1.04)}
.category-image img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

.system-card:hover .category-image img{transform:scale(1.04)}
.category-copy{padding-top:20px;flex:1}
.card-title{font-family:var(--display);font-size:26px;font-weight:500;line-height:1.1;color:var(--text);transition:color .2s}
.system-card:hover .card-title{color:var(--blue)}
.category-note{font-size:14px;line-height:1.5;color:var(--text-2);margin:6px 0 16px}
/* Pinned to the card bottom, so hairlines align across a row even when a note wraps. */
.card-meta{margin-top:auto;padding-top:0;border-top:0;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.card-arrow{width:24px;height:24px;color:var(--text)}
.card-arrow svg{width:18px;height:18px;transition:transform .25s}
.system-card:hover .card-arrow svg{transform:translateX(4px)}
.catalog-help{margin-top:64px;padding:26px 0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);font-size:15px;line-height:1.5;color:var(--text-2)}
.catalog-help strong{color:var(--text);font-weight:500}
.catalog-help button{padding:0;font-size:14px;font-weight:500;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:rgba(17,31,54,.35);transition:color .2s,text-decoration-color .2s}
.catalog-help button:hover{color:var(--blue);text-decoration-color:currentColor}
.catalog-help button svg{width:16px;height:16px;transition:transform .25s}
.catalog-help button:hover svg{transform:translateX(4px)}

/* ---------- Services (deep navy, hairline columns) ---------- */
.services{padding:120px 4%;background:var(--navy-900);color:#fff}
.services .section-kicker{color:var(--blue-soft)}
.services-head .section-lead{margin:0 0 6px;max-width:440px;color:var(--w60)}
.service-grid{gap:0;margin-top:72px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.service-card{padding:36px 32px 40px 0;border-right:1px solid var(--line-dark)}
.service-card+.service-card{padding-left:32px}
.service-card:last-child{border-right:0;padding-right:0}
.service-index{font-family:var(--display);font-size:40px;font-weight:400;line-height:1;color:var(--blue-soft)}
.service-icon{display:none}
.service-card h3{font-size:32px;line-height:1.1;margin-top:28px;color:#fff}
.service-card p{flex:1;font-size:15.5px;line-height:1.6;color:var(--w60);margin-top:14px;max-width:360px}
.service-tags{margin-top:22px;gap:6px 0}
.service-tags li{font-size:12px;color:var(--w45);letter-spacing:.01em;white-space:nowrap}
/* The separator belongs to the following tag, so a wrapped line never ends in a lone dot. */
.service-tags li+li::before{content:"·";margin:0 7px;opacity:.6}
.service-link{margin-top:auto;padding:36px 0 0;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;transition:color .2s}
.service-link:hover{color:var(--blue-soft)}
.service-link svg{width:16px;height:16px;transition:transform .25s}
.service-link:hover svg{transform:translateX(4px)}

/* ---------- Process (warm off-white) ---------- */
.process{padding:120px 4%;background:var(--cream);color:var(--text);color-scheme:light;--focus:var(--blue)}
.process-steps{margin-top:64px;gap:48px 32px}
.process-steps li{padding-top:24px;border-top:1px solid var(--line-light)}
.step-num{font-family:var(--display);font-size:40px;font-weight:400;line-height:1;color:var(--blue)}
.process-steps h3{font-size:28px;line-height:1.1;margin-top:26px}
.process-steps p{font-size:15px;line-height:1.6;color:var(--text-2);margin-top:12px;max-width:300px}

/* ---------- Water band: live pool floor on the left, copy on the right ---------- */
.water-band{min-height:620px;padding:120px 4%;color:#fff;--focus:#fff}
/* A 1 KB blurred thumbnail of the crop shows until the texture arrives, so the band is never flat navy. */
.water-media{background:#061a33 url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA8KCw0LCQ8NDA0REA8RFiUYFhQUFi0gIhslNS84NzQvNDM7QlVIOz9QPzM0SmRLUFdaX2BfOUdob2dcblVdX1v/2wBDARARERYTFisYGCtbPTQ9W1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1v/wAARCAANADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDPtjb2iBIYwo6/Wq11deZcH5RheKnW0+QuZM4XOMe1VI4N8bybsY5xjrW9NdTmryeyHpKOw59hVpZo5o9khcj0zis9c+tODbGU92OK2auckZu5fuPs0KIIw7fXt+fWqBaGaYM4kwGzhXIA+gq/CNy4bkVdttMt5WAZfxHWsXSi9zdV5R2Z/9k=") center/cover no-repeat}
.water-shade{background:linear-gradient(90deg,rgba(6,19,37,0) 28%,rgba(6,19,37,.45) 56%,rgba(6,19,37,.82) 100%),linear-gradient(180deg,rgba(6,19,37,.2) 0%,rgba(6,19,37,0) 18%,rgba(6,19,37,0) 80%,rgba(6,19,37,.3) 100%),radial-gradient(60% 65% at 100% 0%,rgba(6,19,37,.75) 0%,rgba(6,19,37,0) 70%)}
.water-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:40px}
.water-copy>*{grid-column:2;min-width:0}
.water-copy .section-kicker{color:var(--w80)}
.water-copy h2{font-size:clamp(44px,5vw,76px);line-height:1;margin-top:22px;color:#fff}
.water-copy p{font-size:17px;line-height:1.6;color:var(--w80);margin-top:22px;max-width:500px}
.cta-actions{margin-top:40px;gap:14px}

/* ---------- Footer ---------- */
.site-footer{padding:80px 4% 32px;background:var(--navy-950);border-top:1px solid var(--line-dark);color:#fff}
.site-footer .wordmark{font-size:22px;letter-spacing:.26em;display:inline-block;padding-bottom:14px}
.site-footer .wordmark small{font-size:7px}
.footer-about{font-size:14.5px;line-height:1.6;color:var(--w60);margin-top:22px;max-width:300px}
.footer-col h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--w45);margin:8px 0 20px}
.footer-col ul{gap:12px}
.footer-col button{font-size:14.5px;color:var(--w80);transition:color .2s}
.footer-col button:hover{color:#fff}
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:12.5px;color:var(--w45)}
.footer-bottom nav{line-height:1.7}
.footer-bottom a{color:var(--w60);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.25);transition:color .2s}
.footer-bottom a:hover{color:#fff}

/* ---------- Drawer panel (light paper page) ---------- */
.panel{width:min(600px,100%);padding:28px clamp(24px,4vw,48px) 56px;background:var(--cream);color:var(--text);border-left:0;box-shadow:-24px 0 60px rgba(6,19,37,.35);color-scheme:light;font-family:var(--sans);--focus:var(--blue)}
.panel[open]{animation:panel-in .28s ease-out}
@keyframes panel-in{from{opacity:0}to{opacity:1}}
.panel::backdrop{background:rgba(6,19,37,.62)}
.panel-top{min-height:44px}
.panel .eyebrow{color:var(--blue)}
.panel .icon-button{color:var(--text);margin-right:-10px}
.panel .icon-button:hover{background:rgba(17,31,54,.07)}
.panel h2{font-size:clamp(36px,4vw,46px);line-height:1.05;margin:28px 0 0;color:var(--text)}
.panel p{color:var(--text-2);font-size:15.5px;line-height:1.6}
.panel .lead{font-size:16.5px;margin:16px 0 28px}
.category-panel-image{display:block;height:230px;background:var(--cream-2);padding:24px;margin:24px 0 0}
.category-panel-image img{display:block;width:100%;height:100%;object-fit:contain}
.plain-list{margin:28px 0 32px;border-top:1px solid var(--line-light);counter-reset:item}
.plain-list li{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-light);font-size:15.5px;line-height:1.4;color:var(--text);counter-increment:item}
.plain-list li::before{content:counter(item,decimal-leading-zero);font-family:var(--display);font-size:17px;line-height:1;min-width:28px;color:var(--blue)}
.panel-actions{gap:12px 28px;align-items:center}
.back-button{display:inline-flex;align-items:center;gap:10px;margin:0;padding:12px 0;font-size:14px;font-weight:500;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(17,31,54,.35);transition:color .2s,text-decoration-color .2s}
.back-button::before{content:"←";font-size:15px;line-height:1}
.back-button:hover{color:var(--blue);text-decoration-color:currentColor}
.panel-list{margin-top:24px;border-top:1px solid var(--line-light)}
.panel-list li{border-bottom:1px solid var(--line-light)}
.panel-list button{padding:18px 0;min-height:56px;gap:18px;font-size:16px;font-weight:500;color:var(--text);transition:color .2s}
.panel-list button small{font-size:13px;font-weight:400;line-height:1.5;color:var(--text-2);margin-top:4px}
.panel-list button svg{width:16px;height:16px;color:var(--text-3);margin-left:auto;transition:transform .25s,color .2s}
.panel-list button:hover{color:var(--blue)}
.panel-list button:hover svg{transform:translateX(3px);color:var(--blue)}
.catalog-thumb{flex:0 0 60px;width:60px;height:60px;display:grid;place-items:center;padding:8px;background:var(--cream-2)}
.catalog-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.catalog-thumb--fallback{padding:6px;background:var(--navy-900);color:#fff;font-size:9px;font-weight:500;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;text-align:center}
.catalog-list-copy{display:flex;flex-direction:column;flex:1;min-width:0}
.search-field{gap:14px;padding:14px 0;margin:28px 0 8px;border-bottom:1px solid var(--line-light);transition:border-color .2s}
.search-field svg{width:20px;height:20px;color:var(--text-3)}
.search-field input{color:var(--text);font-size:17px}
.search-field input::placeholder{color:var(--text-3)}
.search-field:focus-within{border-bottom-color:var(--navy-900);box-shadow:0 1px var(--navy-900)}
/* !important only to beat the engine's own !important on .search-count */
.search-count{font-size:12px!important;color:var(--text-3)!important;letter-spacing:.14em;text-transform:uppercase;margin:16px 0 0}
.request-form{display:grid;margin-top:28px;gap:18px}
.request-form label{display:grid;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.request-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.request-form input,.request-form textarea,.request-form select{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--line-light);border-radius:2px;background:#fff;color:var(--text);font-family:var(--sans);font-size:15.5px;font-weight:400;letter-spacing:0;text-transform:none;outline:none;transition:border-color .2s,box-shadow .2s}
.request-form textarea{min-height:128px}
.request-form select{-webkit-appearance:none;appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356637a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.request-form input:focus,.request-form textarea:focus,.request-form select:focus{border-color:var(--navy-900);box-shadow:0 0 0 1px var(--navy-900)}
.request-form .btn{margin-top:6px;justify-self:start}
.panel .form-note{font-size:12.5px;line-height:1.5;color:var(--text-2);margin:0}
.panel .form-status{padding:14px 16px;border:1px solid rgba(29,99,214,.4);background:rgba(29,99,214,.06);color:var(--text);font-size:14px;line-height:1.5;margin:0}
.panel .form-status[hidden]{display:none}

/* ---------- Desktop / tablet scene geometry for the copy blocks ---------- */
@media(min-width:701px) and (min-height:681px){
 .intro-copy{top:21%;max-width:min(760px,62%)}
 .chapter-copy{top:120px;max-width:520px}
 /* Controls breathe at the bottom the way the side gutters do. */
 .story-bottom{padding-bottom:36px}
 .story-meta{margin-bottom:18px}
}
/* Portrait tablets: the scene is a letterboxed band low on the screen (see the
   base), so the copy sits above it instead of straddling its top edge. */
@media(min-width:701px) and (max-aspect-ratio:1/1){
 .intro-copy,.chapter-copy{top:112px;left:4%;right:4%;max-width:none}
 .intro-copy h1{font-size:clamp(40px,5.3vw,56px)}
 .chapter-copy h2{font-size:clamp(30px,4vw,40px)}
}
/* Touch devices get no hover-only motion; keyboard users get the same cue on focus. */
@media(hover:none){
 .system-card:hover .category-image img,.system-card:hover .card-arrow svg,.systems .text-button:hover svg,.catalog-help button:hover svg,.service-link:hover svg,.panel-list button:hover svg{transform:none}
}
.system-card:focus-visible .card-title{color:var(--blue)}
.system-card:focus-visible .card-arrow svg{transform:translateX(4px)}

/* ---------- Tablet ---------- */
@media(max-width:1150px){
 .desktop-nav{gap:22px;margin-right:0}
 .desktop-nav button{font-size:12.5px}
 .wordmark{font-size:21px}
 .systems .system-grid{gap:40px 24px}
 .service-card{padding:32px 24px 36px 0}
 .service-card+.service-card{padding-left:24px}
}
@media(max-width:900px){
 .desktop-nav{gap:16px}
 .intro-copy h1{font-size:clamp(40px,6vw,56px)}
 .chapter-copy h2{font-size:32px}
 .service-card,.service-card+.service-card{padding:28px 0 32px;border-right:0;border-bottom:1px solid var(--line-dark)}
 .service-card:last-child{border-bottom:0}
 .service-card p{max-width:520px}
 .service-link{padding-top:28px}
}

/* ---------- Phones: sections (matches the base breakpoint) ---------- */
@media(max-width:760px){
 .systems{padding:72px 20px 64px}
 .systems .section-heading{column-gap:24px;margin-bottom:36px}
 .systems .section-heading h2{font-size:40px;margin-top:16px}
 .systems .section-heading .section-lead{font-size:15px;margin-top:16px}
 .section-title{font-size:40px;margin-top:16px}
 .section-lead{font-size:15px;margin-top:14px}
 .systems .system-grid{gap:32px 16px}
 .category-image{padding:9%}
 .category-copy{padding-top:14px}
 .card-title{font-size:22px}
 .category-note{font-size:13.5px}
 .card-meta{padding-top:10px;font-size:10px}
 .category-note{margin-bottom:12px}
 .request-form .form-row{grid-template-columns:1fr}
 .request-form .btn{width:100%}
 .catalog-help{margin-top:48px;padding:22px 0;gap:14px}
 .services,.process{padding:80px 20px}
 .services-head .section-lead{margin-bottom:0}
 .service-grid{margin-top:44px}
 .service-index{font-size:34px}
 .service-card h3{font-size:28px;margin-top:22px}
 .service-tags li{white-space:normal}
 .process-steps{margin-top:44px;gap:32px}
 .step-num{font-size:34px}
 .process-steps h3{font-size:26px;margin-top:20px}
 /* A lower band on phones keeps the 300px-tall mosaic crop from being upscaled too far. */
 .water-band{min-height:520px;padding:56px 20px;align-items:end}
 .water-copy{grid-template-columns:minmax(0,1fr);column-gap:0}
 .water-copy>*{grid-column:1}
 .water-shade{background:linear-gradient(180deg,rgba(6,19,37,.35) 0%,rgba(6,19,37,0) 22%,rgba(6,19,37,.15) 42%,rgba(6,19,37,.85) 68%,rgba(6,19,37,.94) 100%)}
 .water-copy h2{font-size:42px;margin-top:16px}
 .water-copy p{font-size:15px;margin-top:16px}
 .cta-actions{margin-top:28px;gap:10px}
 .btn{min-height:48px;padding:0 20px}
 .site-footer{padding:56px 20px 24px}
 .footer-bottom{margin-top:40px}
 .panel h2{font-size:34px;margin-top:22px}
 .panel .lead{margin-bottom:22px}
 .category-panel-image{height:200px;padding:20px;margin-top:22px}
 .panel-list button{padding:16px 0;font-size:15.5px}
}

/* ---------- Phones: header and scene (matches the engine breakpoint) ---------- */
@media(max-width:700px){
 .site-header{padding:0 20px;gap:12px;background:transparent}
 .site-header.is-scrolled{background:var(--navy-950)}
 .wordmark{font-size:20px;letter-spacing:.24em;padding-bottom:13px}
 .wordmark small{font-size:6.5px;letter-spacing:.3em;right:.24em}
 .icon-button,.header-tools .icon-button{width:40px;height:40px}
 .header-tools{gap:4px}
 .systems,.services,.process,.water-band{scroll-margin-top:72px}
 /* One hero action on phones: the chapter rail under the scene already leads into the story. */
 .intro-secondary{display:none}
 .edge-shade{background:linear-gradient(180deg,rgba(6,19,37,.5),rgba(6,19,37,0) 30%,rgba(6,19,37,0) 62%,var(--navy-900) 92%),linear-gradient(90deg,rgba(6,19,37,.35),rgba(6,19,37,0) 60%)}
 .intro-copy .eyebrow,.chapter-copy .eyebrow{font-size:10px;letter-spacing:.26em}
 /* "Бассейн, продуманный" is about 8.7em wide at this tracking; sizing the
    headline from the copy width keeps it on two lines from 320px up (the
    scene sits below the copy on phones, so a third line would crowd it). */
 .intro-copy h1{font-size:clamp(26px,calc((100vw - 48px) / 9.4),36px);line-height:1.05;margin-top:14px;letter-spacing:-.02em}
 .intro-copy p{font-size:14px;line-height:1.55;margin-top:14px;max-width:300px}
 .intro-actions{margin-top:20px;gap:10px}
 .intro-cta,.intro-secondary{min-height:44px;padding:0 16px;gap:10px;font-size:12.5px}
 .chapter-copy h2{font-size:30px;margin-top:12px}
 .chapter-copy p{font-size:13px;margin-top:10px;max-width:310px}
 .story-meta,#load-status,#play-motion,.scroll-hint{font-size:11px}
 .chapters button{font-size:11px}
 .chapters button span{font-size:11px}
 .scrub-label output{font-size:10px}
 .hotspot{font-size:18px}
 .hotspot span{font-size:12px}
 /* The engine's phone offsets were tuned for a 26px marker; keep labels 4px from the 28px ring. */
 .hotspot[data-category=pumps] span{bottom:auto;top:calc(100% - 4px)}
 .hotspot[data-category=finishes] span{bottom:auto;top:50%;left:calc(100% - 2px);transform:translateY(-50%)}
 .skip-link{left:12px}
}
@media(max-width:420px){
 .intro-cta,.intro-secondary{padding:0 13px;gap:8px;font-size:12px}
 .chapter-copy h2{font-size:27px}
 .story-meta .scroll-hint{font-size:11px;max-width:170px}
 .hotspot span{font-size:11px}
 .systems .section-heading{grid-template-columns:1fr}
 .systems .section-heading .text-button{grid-column:1;grid-row:4;justify-self:start;margin-top:20px}
}

/* ---------- Short viewports: keep the copy compact (engine sizes re-asserted) ---------- */
@media(max-height:680px){.systems,.services,.process,.water-band{scroll-margin-top:62px}}
/* Short desktop windows only: phones size the headline from their own width above. */
@media(min-width:701px) and (max-height:680px){
 .intro-copy h1{font-size:clamp(32px,4vw,46px);margin-top:10px}
 .intro-copy p{font-size:13px;margin-top:12px}
 .intro-actions{margin-top:16px}
 .intro-cta,.intro-secondary{min-height:40px;font-size:12px;padding:0 16px}
 .chapter-copy h2{font-size:28px;margin-top:8px}
 .chapter-copy p{font-size:13px;margin-top:8px}
}
@media(max-height:500px) and (min-aspect-ratio:7/5){
 /* Six labels cannot fit on a 400px-wide scene: show a label only for the marker in use. */
 .hotspot span{display:none}
 .hotspot:hover span,.hotspot:focus-visible span{display:block}
 .hotspot[data-category=finishes] span{bottom:auto;top:50%;left:calc(100% - 2px);transform:translateY(-50%)}
 .intro-copy h1{font-size:clamp(24px,3.2vw,30px);line-height:1.06;margin-top:8px}
 .intro-copy p{font-size:11px;margin-top:10px}
 .intro-actions{gap:6px;margin-top:12px}
 .intro-cta,.intro-secondary{min-height:32px;padding:0 10px;font-size:10px;gap:6px}
 .chapter-copy h2{font-size:24px;line-height:1.1}
 .chapter-copy p{font-size:11px}
 .intro-copy .eyebrow,.chapter-copy .eyebrow{font-size:9px}
 .hotspot span{font-size:10px}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
 .system-card:hover .category-image img,.systems .text-button:hover svg,.catalog-help button:hover svg,.service-link:hover svg,.system-card:hover .card-arrow svg,.panel-list button:hover svg{transform:none}
}

/* Catalog, clean version: product + name only. No counters, arrows, kicker or small notes. */
.systems .card-meta,.systems .category-note,.systems .section-kicker,.systems .text-button svg,.systems .catalog-help button svg{display:none}
.systems .section-heading h2{margin-top:0}
.systems .category-copy{padding-top:14px;align-items:center;text-align:center}
.systems .card-title{font-size:24px}
.systems .system-grid{row-gap:56px}@media(max-width:760px){.systems .system-grid{row-gap:28px}.systems .card-title{font-size:20px}.systems .category-copy{padding-top:8px}}

/* Catalog drawers, clean version: no chevrons, no small descriptions, no numbering, no arrows. */
.panel-list button>svg,.panel-list button small,.panel .btn svg,.panel .back-button::before{display:none}
.panel .plain-list li::before{content:none}
.panel .plain-list li{gap:0}
/* Water band, composition D (chosen by the client): copy on the left over a
   navy fade, the AKVORA mosaic open on the right, tracked uppercase buttons. */
@media(min-width:761px){
 .water-shade{background:linear-gradient(90deg,rgba(6,18,37,.97) 0%,rgba(6,18,37,.82) 34%,rgba(6,18,37,.3) 58%,rgba(6,18,37,0) 76%),linear-gradient(180deg,rgba(6,18,37,.5) 0%,rgba(6,18,37,0) 22%,rgba(6,18,37,0) 80%,rgba(6,18,37,.35) 100%)}
 .water-copy{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
 .water-copy>*{grid-column:1}
}
.water-band .btn{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.water-band .btn svg{width:16px;height:16px}

/* Scroll scene bottom: only the centred hint with a thin, long arrow. */
.story-bottom .chapters,.story-bottom .scrub-label,#load-status,#play-motion,#retry-motion{display:none!important}
.story-bottom{left:0;right:0;margin:0;padding:0 0 28px;display:flex;justify-content:center;pointer-events:none}
.story-meta{margin:0;min-height:0;justify-content:center}
.story-meta .scroll-hint{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:none;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.scroll-hint>span{display:none}
.scroll-hint::after{content:"";width:9px;height:64px;background:linear-gradient(currentColor,currentColor) center top/1px 100% no-repeat;-webkit-mask:linear-gradient(#000,#000) center top/1px calc(100% - 4px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M.5.5 4.5 5l4-4.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center bottom/9px 6px no-repeat;mask:linear-gradient(#000,#000) center top/1px calc(100% - 4px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M.5.5 4.5 5l4-4.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center bottom/9px 6px no-repeat;animation:scroll-cue 2.4s ease-in-out infinite}
@keyframes scroll-cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}
@media(max-width:700px){.story-bottom{padding-bottom:20px}.story-meta .scroll-hint{font-size:10px;letter-spacing:.22em}.scroll-hint::after{height:48px}}
@media(prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}}/* Arrow drawn as one SVG: hairline shaft with a fine open tip. */
.scroll-hint::after{width:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 64' preserveAspectRatio='none'%3E%3Cpath d='M5.5 0v63M.6 57.5l4.9 5.6 4.9-5.6' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;-webkit-mask:none;mask:none}
/* Keep the hint visible on phones while frames load (engine hid it). */
.pool-story[aria-busy=true] .story-meta .scroll-hint{display:flex}
.pool-stage[data-load-error] .story-meta .scroll-hint{display:none}/* Hint: Cormorant italic, softer text, translucent arrow, sitting lower. */
.story-bottom{padding-bottom:10px}
.story-meta .scroll-hint{gap:10px;font-family:var(--display);font-style:italic;font-size:19px;font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.72)}
.scroll-hint::after{opacity:.45}
@keyframes scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:700px){.story-bottom{padding-bottom:8px}.story-meta .scroll-hint{font-size:17px;letter-spacing:.02em}}/* Hint sits right at the bottom edge, with a shorter arrow; fades out once scrolling starts. */
.story-bottom,.pool-stage[data-load-error] .story-bottom{bottom:0;padding-bottom:0}
.story-meta .scroll-hint{gap:8px;transition:opacity .6s ease,transform .6s ease}
.scroll-hint::after{height:40px;width:9px}
.pool-stage.hint-hidden .scroll-hint{opacity:0;transform:translateY(10px);pointer-events:none}
@media(max-width:700px){.story-bottom{bottom:0;padding-bottom:0}.scroll-hint::after{height:32px}}
.story-bottom,.pool-stage[data-load-error] .story-bottom{padding-bottom:18px}
@media(max-width:700px){.story-bottom{padding-bottom:14px}}
/* Desktop: a hairline mouse outline with a wheel that rolls down. Touch screens keep the arrow. */
@media(hover:hover) and (pointer:fine){
 .story-meta .scroll-hint{gap:12px}
 .scroll-hint::after{width:22px;height:34px;border:1px solid currentColor;border-radius:11px;background:none;opacity:.6;animation:none;position:relative}
 .scroll-hint::before{content:"";position:absolute;bottom:0;left:50%;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:currentColor;opacity:.9;animation:wheel 2.2s ease-in-out infinite}
 .story-meta .scroll-hint{position:relative}
}
@keyframes wheel{0%{transform:translateY(-27px);opacity:0}20%{opacity:.9}70%{transform:translateY(-14px);opacity:.9}100%{transform:translateY(-10px);opacity:0}}
@media(prefers-reduced-motion:reduce){.scroll-hint::before{animation:none;transform:translateY(-24px)}}/* The wheel stays put near the top of the mouse; a stripe scrolling inside it shows the rotation. */
@media(hover:hover) and (pointer:fine){
 .scroll-hint::before{top:7px;bottom:auto;width:3px;height:9px;margin-left:-1.5px;border-radius:2px;opacity:.9;background:repeating-linear-gradient(180deg,currentColor 0 1.5px,transparent 1.5px 4.5px);background-size:3px 4.5px;transform:none;animation:wheel-roll 1.1s linear infinite}
}
@keyframes wheel-roll{from{background-position:0 0}to{background-position:0 4.5px}}
@media(prefers-reduced-motion:reduce){.scroll-hint::before{animation:none;transform:none}}/* Fix: the wheel is anchored to the mouse outline, not to the hint block. */
@media(hover:hover) and (pointer:fine){
 .story-meta .scroll-hint{position:static}
 .scroll-hint::after{position:relative;top:auto;overflow:hidden}
 .scroll-hint::before{position:absolute;left:50%;bottom:19px;top:auto;margin-left:-1.5px}
 .story-meta{position:relative}
}/* Mouse hint, illustrated version: an SVG with body shading, glow and ridges rolling inside the wheel. */
@media(hover:hover) and (pointer:fine){
 .scroll-hint::before{display:none}
 .scroll-hint::after{width:34px;height:52px;border:0;border-radius:0;opacity:.85;overflow:visible;background:url("assets/ui/mouse-hint.svg?v=1") center/contain no-repeat;animation:mouse-float 3s ease-in-out infinite}
}
@keyframes mouse-float{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}}/* Inline hint graphics (a background SVG cannot animate). Mouse on pointer devices, arrow on touch. */
.scroll-hint::after,.scroll-hint::before{content:none!important;display:none!important}
.scroll-hint>span{display:block}
.hint-mouse,.hint-arrow{display:none;flex:none;stroke-width:1;fill:none;overflow:visible}
.hint-arrow{width:11px;height:40px;opacity:.45;animation:scroll-cue 2.4s ease-in-out infinite}
.hint-mouse{width:34px;height:52px;opacity:.85;animation:mouse-float 3s ease-in-out infinite}
.hint-ridges{animation:ridges 1.4s linear infinite}
@keyframes ridges{from{transform:translateY(0)}to{transform:translateY(3px)}}
@media(hover:hover) and (pointer:fine){.hint-mouse{display:block}}
@media not all and (hover:hover) and (pointer:fine){.hint-arrow{display:block}}
@media(max-width:700px){.hint-arrow{height:32px}}
@media(prefers-reduced-motion:reduce){.hint-mouse,.hint-arrow,.hint-ridges{animation:none}}/* Wheel rotation made obvious: bigger mouse, faster crawl, crisper ridges. */
.hint-mouse{width:42px;height:64px;opacity:.9}
.hint-mouse .hint-ridges{stroke-width:1.3;animation:ridges .55s linear infinite}
.hint-mouse{width:32px;height:49px}

/* Hero buttons: rounded; the transparent one is frosted glass with a fine grain. */
.intro-cta,.intro-secondary,.header-cta{border-radius:999px}
.intro-cta{padding:0 26px}
.intro-secondary,.header-cta{position:relative;overflow:hidden;isolation:isolate;padding:0 26px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(3,12,28,.25)}
.intro-secondary::before,.header-cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
.intro-secondary:hover,.header-cta:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:#fff}
.header-cta{min-height:42px;padding:0 20px}
/* ---- Polish pass: glass header, calmer primary button, softer catalog entry ---- */
/* Header: blurred glass strip from the start; solid-ish once scrolled over light sections. */
.site-header{background:linear-gradient(180deg,rgba(4,12,26,.55),rgba(4,12,26,.25));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header.is-scrolled{background:rgba(5,14,30,.78);border-bottom-color:rgba(255,255,255,.08)}
/* Glass button in the header stays clearer than the hero one. */
.header-cta{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.header-cta::before{opacity:.25}
/* Primary button: warm ivory instead of flat white, with a soft lift. */
.intro-cta,.btn-light{background:linear-gradient(180deg,#fbf8f2,#efe9dd);border-color:transparent;color:#0a1a30;box-shadow:0 10px 30px rgba(3,12,28,.35),inset 0 1px 0 rgba(255,255,255,.9)}
.intro-cta:hover,.btn-light:hover{background:linear-gradient(180deg,#fff,#f3eee4);box-shadow:0 14px 34px rgba(3,12,28,.4),inset 0 1px 0 #fff}
.intro-secondary{color:#fff}
/* Catalog: warm off-white instead of pure white, and a long navy-to-cream fade so the eye adapts. */
.systems{background:#f3f0ea;padding-top:0}
.systems::before{content:"";display:block;height:200px;margin:0 -4% 56px;background:linear-gradient(180deg,#0a1a30 0%,#2a3447 30%,#9c9a95 70%,#f3f0ea 100%)}
.systems .catalog-container{margin-top:0}
.systems .section-heading{margin-top:0}
.systems .category-image img{filter:brightness(1.0) contrast(1.02);mix-blend-mode:multiply}
.systems .catalog-help{border-color:rgba(17,31,54,.12)}
.process{background:#f3f0ea}
.process-steps li{border-top-color:rgba(17,31,54,.12)}
.panel{background:#f3f0ea}
@media(max-width:700px){.systems::before{height:120px;margin:0 -20px 32px}}/* Transition into the catalog: navy dissolves straight into cream (no grey midtones). */
.systems::before{height:160px;background:linear-gradient(180deg,#0a1a30 0%,rgba(10,26,48,.6) 35%,rgba(243,240,234,0) 100%),#f3f0ea}
.systems .category-image img{filter:none;mix-blend-mode:multiply}
@media(max-width:700px){.systems::before{height:100px}}
.systems .category-image img{filter:brightness(1.06) contrast(1.03);mix-blend-mode:multiply}
/* Scene -> catalog transition, reworked. Two layers: the scene's own bottom
   shade deepens to the page navy, then the catalog opens with a long fade
   that travels through muted blue-greys and warm stone tones instead of a
   straight navy-to-cream mix (which produced a dirty grey band). A faint
   noise layer breaks up gradient banding. */
.edge-shade{background:linear-gradient(180deg,rgba(6,19,37,.55) 0%,rgba(6,19,37,0) 24%,rgba(6,19,37,0) 60%,rgba(8,22,42,.55) 82%,#0a1a30 100%),linear-gradient(90deg,rgba(6,19,37,.45),rgba(6,19,37,0) 52%)}
.systems{position:relative;padding-top:0}
.systems::before{position:relative;height:280px;margin:0 -4% 40px;background:
 linear-gradient(180deg,#0a1a30 0%,#13243c 18%,#2b3a4f 36%,#58616d 52%,#8d8f8e 66%,#bdb8ae 80%,#e2ddd3 92%,#f3f0ea 100%)}
.systems::before{-webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000)}
.systems::after{content:"";position:absolute;left:0;right:0;top:0;height:280px;pointer-events:none;opacity:.06;mix-blend-mode:soft-light;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
@media(max-width:700px){.systems::before{height:180px;margin:0 -20px 24px}.systems::after{height:180px}}/* The catalog now overlaps the end of the scene: its fade starts transparent over
   the image, deepens through navy, then warms up into cream. No flat band. */
.systems{position:relative;z-index:5;margin-top:-340px}
.systems::before{position:relative;height:340px;margin:0 -4% 24px;mask:none;-webkit-mask:none;background:linear-gradient(180deg,rgba(10,26,48,0) 0%,rgba(10,26,48,.45) 22%,rgba(12,27,47,.9) 40%,#1d2838 52%,#4a4f58 63%,#8a8884 74%,#c3beb3 86%,#f3f0ea 100%)}
.systems::after{height:340px;opacity:.05}
@media(max-width:700px){.systems{margin-top:-220px}.systems::before{height:220px;margin:0 -20px 16px}.systems::after{height:220px}}/* The section is transparent for the overlap strip, so the fade lies on the scene itself. */
.systems{background:linear-gradient(180deg,transparent 0,transparent 340px,#f3f0ea 340px)}
.systems::before{background:linear-gradient(180deg,rgba(10,26,48,0) 0%,rgba(10,26,48,.5) 30%,rgba(10,26,48,.92) 50%,#2a3140 62%,#6d6c6c 73%,#b4afa5 85%,#f3f0ea 100%)}
@media(max-width:700px){.systems{background:linear-gradient(180deg,transparent 0,transparent 220px,#f3f0ea 220px)}}/* Join between scene and catalog, final pass.
   1) The scene image itself dissolves into the stage navy over its last 28%,
      so there is never a hard edge, even when a tall window letterboxes it.
   2) The stage shade stops forcing a solid navy block at the bottom.
   3) One continuous overlay carries image -> navy -> stone -> cream. */
.scene-fit canvas,.scene-poster{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.edge-shade{background:linear-gradient(180deg,rgba(6,19,37,.55) 0%,rgba(6,19,37,0) 24%,rgba(6,19,37,0) 70%,rgba(10,26,48,.35) 100%),linear-gradient(90deg,rgba(6,19,37,.45),rgba(6,19,37,0) 52%)}
.systems{margin-top:-360px;background:linear-gradient(180deg,transparent 0,transparent 360px,#f3f0ea 360px)}
.systems::before{height:360px;background:linear-gradient(180deg,rgba(10,26,48,0) 0%,rgba(10,26,48,.4) 24%,rgba(10,26,48,.85) 42%,#121d31 52%,#2f3645 61%,#64666a 71%,#a6a39c 82%,#d8d3c9 91%,#f3f0ea 100%)}
.systems::after{height:360px}
@media(max-width:700px){.scene-fit canvas,.scene-poster{-webkit-mask-image:none;mask-image:none}.systems{margin-top:-220px;background:linear-gradient(180deg,transparent 0,transparent 220px,#f3f0ea 220px)}.systems::before{height:220px}.systems::after{height:220px}}/* Primary button in the wordmark's V blue. */
.intro-cta,.btn-light{background:linear-gradient(180deg,#9ac3ff,#7fb0f7);border-color:transparent;color:#07162c;box-shadow:0 10px 30px rgba(20,80,180,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.intro-cta:hover,.btn-light:hover{background:linear-gradient(180deg,#a9ceff,#8cbaf9);box-shadow:0 14px 34px rgba(20,80,180,.45),inset 0 1px 0 rgba(255,255,255,.7)}/* Liquid-glass buttons: no grain; deep blur, bright top highlight, inner glow for volume. */
.intro-secondary::before,.header-cta::before{content:none;display:none}
.intro-secondary,.header-cta{background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.1) 100%);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.08);backdrop-filter:blur(22px) saturate(1.6) brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 18px rgba(255,255,255,.14),0 10px 30px rgba(3,12,28,.35);color:#fff;transition:background .25s,box-shadow .25s,transform .25s}
.intro-secondary::after,.header-cta::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 50% -20%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%)}
.intro-secondary:hover,.header-cta:hover{background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.14) 100%);border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 22px rgba(255,255,255,.2),0 14px 34px rgba(3,12,28,.4);transform:translateY(-1px)}
.intro-secondary:active,.header-cta:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 12px rgba(255,255,255,.1),0 6px 18px rgba(3,12,28,.3)}/* Matching line arrows in both hero buttons. */
.btn-arrow{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.intro-cta:hover .btn-arrow{transform:translateX(3px)}
.intro-secondary:hover .btn-arrow{transform:translateY(3px)}
/* Deeper glass: lens edge (light top, dark bottom), two-layer sheen, heavier blur. */
.intro-secondary,.header-cta{background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.16) 100%);border:1px solid transparent;background-clip:padding-box;-webkit-backdrop-filter:blur(28px) saturate(1.8) brightness(1.1);backdrop-filter:blur(28px) saturate(1.8) brightness(1.1);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(0,20,50,.35),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(255,255,255,.35),inset 0 0 24px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.25),0 12px 34px rgba(3,12,28,.45)}
.intro-secondary::before,.header-cta::before{content:"";display:block;position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.15) 50%,rgba(255,255,255,.4));pointer-events:none;opacity:1;mix-blend-mode:normal}
.intro-secondary::after,.header-cta::after{inset:2px 3px auto 3px;height:46%;border-radius:999px 999px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0))}
.intro-secondary:hover,.header-cta:hover{background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.12) 40%,rgba(255,255,255,.07) 60%,rgba(255,255,255,.2) 100%)}/* Clear, concave glass: almost no fill, blur does the work; inner shadow at the top, light at the bottom. */
.intro-secondary,.header-cta{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.22);background-clip:border-box;-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -10px rgba(255,255,255,.25),0 8px 24px rgba(3,12,28,.25)}
.intro-secondary::before,.header-cta::before,.intro-secondary::after,.header-cta::after{content:none;display:none}
.intro-secondary:hover,.header-cta:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 -8px 16px -10px rgba(255,255,255,.3),0 10px 28px rgba(3,12,28,.3);transform:none}
.intro-secondary:active,.header-cta:active{box-shadow:inset 0 12px 20px -8px rgba(0,12,30,.65),inset 0 -1px 0 rgba(255,255,255,.3),0 6px 18px rgba(3,12,28,.25)}
/* Mouse hint in the same concave clear-glass language. */
.hint-mouse{opacity:1;filter:drop-shadow(0 6px 14px rgba(3,12,28,.35))}
.hint-mouse .hint-ridges{stroke-width:1.2}
/* Wordmark lock-up: the tagline is tracked to span exactly the width of AKVORA. */
.wordmark small{left:0;right:.26em;width:auto;text-align:center;letter-spacing:.455em;font-size:7.5px;padding-left:.455em}
@media(max-width:1150px){.wordmark small{letter-spacing:.45em}}
@media(max-width:700px){.wordmark small{font-size:6.5px;letter-spacing:.455em;right:.24em;padding-left:.455em}}
.wordmark small{letter-spacing:.43em;padding-left:.43em}
@media(max-width:700px){.wordmark small{letter-spacing:.4em;padding-left:.4em}}
/* Wordmark lock-up, exact: the word is an inline block; the tagline is a flex
   row of single letters spread edge to edge across the word's visual width
   (the word's trailing letter-spacing is excluded via the right offset). */
.wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;padding-bottom:0;line-height:1}
.wm-word{display:block;font-weight:inherit;margin-right:-.26em}
.wordmark small{position:static;display:flex;justify-content:space-between;width:calc(100% - .26em);margin-top:5px;padding:0;letter-spacing:0;text-align:left;white-space:nowrap;font-size:7.5px;font-weight:500;color:rgba(255,255,255,.7)}
.wordmark small i{font-style:normal;flex:none}
.wordmark small .sp{width:.6em}
.site-footer .wordmark small{font-size:7px}
@media(max-width:700px){.wordmark small{font-size:6.5px;margin-top:4px;width:calc(100% - .24em)}.wm-word{margin-right:-.24em}}
.wordmark small{margin-top:7px}
@media(max-width:700px){.wordmark small{margin-top:6px}}
/* Hotspots as concave clear-glass discs, matching the hero buttons. The 44px
   button keeps the tap target and the engine's anchor; the glass is an inner
   .hotspot-glass element added by akvora-ui-v30.js (the ::before/::after slots
   belong to the engine's leader lines). */
.hotspot{background:none;color:#fff;font-weight:300;font-size:20px}
.hotspot-glass{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 7px 12px -6px rgba(0,12,30,.6),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 -6px 10px -7px rgba(255,255,255,.3),0 6px 16px rgba(3,12,28,.3);pointer-events:none;transition:background .25s,border-color .25s,box-shadow .25s}
.hotspot-plus{position:relative;z-index:1}
.hotspot:hover,.hotspot:focus-visible{background:none;color:#fff}
.hotspot:hover .hotspot-glass,.hotspot:focus-visible .hotspot-glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);box-shadow:inset 0 7px 12px -6px rgba(0,12,30,.6),inset 0 -1px 0 rgba(255,255,255,.5),inset 0 -6px 10px -7px rgba(255,255,255,.4),0 8px 20px rgba(3,12,28,.35)}
.hotspot:focus-visible{outline-offset:-4px}/* The "+" drawn as two hairlines, centred on the glass disc. */
.hotspot-plus{display:block;width:12px;height:12px;margin:auto;font-size:0;color:transparent;background:linear-gradient(#fff,#fff) center/12px 1.2px no-repeat,linear-gradient(#fff,#fff) center/1.2px 12px no-repeat}
/* ---- Audit pass: less text, no numbering, equal cards, one button language ---- */
.services{padding-top:72px}
#services.services--visual .service-tags{display:none}
#services.services--visual .service-card p{min-height:calc(2 * 1.7em)}
#services.services--visual .service-link{padding-top:18px}
.process .section-heading-copy .section-title{margin-bottom:0}
.process-steps{margin-top:48px}
.process-steps h3{margin-top:0}
.water-copy h2{margin-top:0}
/* Water band buttons match the hero: rounded V-blue primary, concave glass secondary. */
.water-band .btn{border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:.03em;text-transform:none;padding:0 26px}
.water-band .btn-ghost{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -10px rgba(255,255,255,.25),0 8px 24px rgba(3,12,28,.25)}
.water-band .btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35)}/* Kickers removed: titles start the sections. Dev links hidden unless ?dev=1. */
.section-title,.systems .section-heading h2,.process .section-title{margin-top:0}
.systems .section-heading .text-button{grid-row:2;align-self:center}
.services-head,.systems .section-heading{align-items:center}
.dev-links{display:none}
html[data-dev] .dev-links{display:block}/* Nine categories (robots added): 3 x 3 on desktop and tablet, 2 columns on phones (last one centred). */
.systems .system-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin-inline:auto;column-gap:48px}
@media(max-width:760px){.systems .system-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.systems .system-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:50%}}
/* Scene -> catalog: no gradient. The catalog is a cream sheet with rounded top
   corners that slides up over the end of the scene, casting a soft shadow
   upward; the scene image stays intact underneath. */
.scene-fit canvas,.scene-poster{-webkit-mask-image:none;mask-image:none}
.systems::before,.systems::after{content:none;display:none}
.systems{position:relative;z-index:5;margin-top:-72px;padding-top:96px;background:#f3f0ea;border-radius:40px 40px 0 0;box-shadow:0 -24px 60px rgba(2,8,20,.45),0 -1px 0 rgba(255,255,255,.35)}
@media(max-width:700px){.systems{margin-top:-40px;padding-top:56px;border-radius:24px 24px 0 0}}/* Scroll-driven entry: the sheet rises and its corners tighten as it comes in. */
@supports (animation-timeline: view()){
 @media(prefers-reduced-motion:no-preference){
  .systems{animation:sheet-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes sheet-rise{from{transform:translateY(80px);border-radius:72px 72px 0 0;box-shadow:0 -10px 30px rgba(2,8,20,.25)}to{transform:none;border-radius:40px 40px 0 0;box-shadow:0 -24px 60px rgba(2,8,20,.45),0 -1px 0 rgba(255,255,255,.35)}}
 }
}
@media(max-width:700px){@supports (animation-timeline: view()){@keyframes sheet-rise{from{transform:translateY(40px);border-radius:40px 40px 0 0}to{transform:none;border-radius:24px 24px 0 0}}}}/* Primary buttons become the same concave clear glass as their neighbours,
   with only a faint tint of the wordmark V blue to keep them first in line. */
.intro-cta,.btn-light{color:#fff;background:rgba(138,184,255,.10);border:1px solid rgba(160,200,255,.38);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -10px rgba(255,255,255,.25),0 8px 24px rgba(3,12,28,.25)}
.intro-cta:hover,.btn-light:hover{background:rgba(138,184,255,.17);border-color:rgba(170,210,255,.55);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 -8px 16px -10px rgba(255,255,255,.3),0 10px 28px rgba(3,12,28,.3)}
.intro-cta:active,.btn-light:active{box-shadow:inset 0 12px 20px -8px rgba(0,12,30,.65),inset 0 -1px 0 rgba(255,255,255,.3),0 6px 18px rgba(3,12,28,.25)}/* Primary buttons: the original lilac-blue, now as tinted glass. */
.intro-cta,.btn-light{color:#07162c;background:linear-gradient(180deg,rgba(160,198,255,.72),rgba(127,176,247,.62));border:1px solid rgba(190,215,255,.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 10px 16px -8px rgba(20,50,110,.45),inset 0 -1px 0 rgba(255,255,255,.55),inset 0 -8px 14px -10px rgba(255,255,255,.45),0 10px 28px rgba(20,80,180,.3)}
.intro-cta:hover,.btn-light:hover{background:linear-gradient(180deg,rgba(172,206,255,.8),rgba(140,186,249,.7));border-color:rgba(210,228,255,.75);box-shadow:inset 0 10px 16px -8px rgba(20,50,110,.45),inset 0 -1px 0 rgba(255,255,255,.65),inset 0 -8px 14px -10px rgba(255,255,255,.5),0 14px 32px rgba(20,80,180,.38)}
.intro-cta:active,.btn-light:active{box-shadow:inset 0 12px 18px -8px rgba(20,50,110,.55),inset 0 -1px 0 rgba(255,255,255,.45),0 6px 18px rgba(20,80,180,.25)}
/* Card-on-card: when the scroll animation reaches its last frame, the whole
   story pins (sticky with a negative top set by akvora-ui-v30.js), and the
   catalog slides over it as the next card. Everything after it stacks above. */
.pool-story{position:sticky;z-index:0}
main>section:not(.pool-story){position:relative;z-index:2}
.systems{margin-top:0;animation:none;transform:none}
/* ---- Catalog as a bento showcase ----
   White rounded tiles on the cream sheet (product photos have white
   backgrounds, so they sit seamlessly). Pumps is the hero tile (2x2); the
   name lives inside each tile; the product lifts on hover. */
.systems .system-grid{max-width:1360px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:16px;row-gap:16px;column-gap:16px}
.systems .system-card{position:relative;display:block;aspect-ratio:1/1;border-radius:28px;background:#fff;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.systems .system-card:first-child{grid-column:span 2;grid-row:span 2}
.systems .system-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(10,26,48,.35)}
.systems .category-image{position:absolute;inset:0;aspect-ratio:auto;padding:16% 14% 24%;background:radial-gradient(90% 70% at 50% 42%,#fff 0%,#fff 55%,#f7f5f0 100%)}
.systems .system-card:first-child .category-image{padding:12% 12% 18%}
.systems .category-image img{width:100%;height:100%;object-fit:contain;filter:brightness(1.06) contrast(1.03);mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.systems .system-card:hover .category-image img{transform:translateY(-6px) scale(1.04)}
.systems .category-copy{position:absolute;left:24px;right:24px;bottom:20px;padding:0;align-items:flex-start;text-align:left}
.systems .card-title{font-size:22px;line-height:1.15;color:var(--text)}
.systems .system-card:first-child .card-title{font-size:34px}
.systems .system-card:first-child .category-copy{left:36px;bottom:32px}
.systems .system-card:last-child:nth-child(odd){width:auto;justify-self:stretch;grid-column:auto}
@media(max-width:1100px){.systems .system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.systems .system-card:first-child{grid-column:span 2;grid-row:span 2}}
@media(max-width:760px){
 .systems .system-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .systems .system-card{border-radius:20px}
 .systems .system-card:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
 .systems .system-card:first-child .category-image{padding:8% 24% 22%}
 .systems .card-title{font-size:17px}
 .systems .system-card:first-child .card-title{font-size:26px}
 .systems .category-copy,.systems .system-card:first-child .category-copy{left:16px;right:16px;bottom:14px}
 .systems .system-card:last-child:nth-child(odd){grid-column:auto;width:auto}
}@media(max-width:760px){
 .systems .system-grid{grid-auto-rows:auto;row-gap:10px}
 .systems .category-image{padding:12% 14% 30%}
 .systems .section-heading{grid-template-columns:1fr}
 .systems .section-heading .text-button{grid-column:1;grid-row:auto;justify-self:start;margin-top:16px}
}@media(max-width:760px){.systems .section-heading h2{grid-row:1}.systems .section-heading .text-button{grid-row:2}}

/* Catalog v2 photography: each image is a full studio shot (white -> periwinkle),
   so tiles show it edge to edge; no blending, no padding. */
.systems .system-card{background:#e6eeff}
.systems .category-image,.systems .system-card:first-child .category-image{padding:0;background:none}
.systems .category-image img{object-fit:cover;mix-blend-mode:normal;filter:none}
.systems .system-card:hover .category-image img{transform:scale(1.04)}
.systems .category-copy{bottom:22px}
.panel .category-panel-image{padding:0;background:#e6eeff;overflow:hidden}
.panel .category-panel-image img,.catalog-thumb img{object-fit:cover;mix-blend-mode:normal;filter:none}
.catalog-thumb{padding:0;overflow:hidden;background:#e6eeff}/* Keep the product clear of the name: frame the shot slightly smaller and higher,
   and lay a soft white haze under the title. */
.systems .system-card:not(:first-child) .category-image img{transform:scale(.86) translateY(-7%);transform-origin:50% 40%}
.systems .system-card:not(:first-child):hover .category-image img{transform:scale(.9) translateY(-8%)}
.systems .system-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(230,238,255,0),rgba(236,242,255,.92) 70%);pointer-events:none}
.systems .category-copy{z-index:1}/* Reframe: no shrinking (it exposed the photo edges). The photo is taller than the
   tile and shifted up, cropping empty sky so the product sits above the title. */
.systems .system-card:not(:first-child) .category-image img,.systems .system-card:not(:first-child):hover .category-image img{transform:none}
.systems .system-card:not(:first-child) .category-image img{position:absolute;left:0;top:-16%;width:100%;height:116%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.systems .system-card:not(:first-child):hover .category-image img{transform:scale(1.04)}/* Final framing for small tiles: photo fills the upper part, the title sits on a
   calm strip below in the photo's own floor colour, so they never overlap. */
.systems .system-card:not(:first-child){background:#e3ecff}
.systems .system-card:not(:first-child) .category-image{inset:0 0 21% 0}
.systems .system-card:not(:first-child) .category-image img{position:static;top:auto;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:none}
.systems .system-card:not(:first-child):hover .category-image img{transform:scale(1.04)}
.systems .system-card:not(:first-child)::after{top:auto;height:34%;background:linear-gradient(180deg,rgba(227,236,255,0) 0%,#e3ecff 40%)}
.systems .system-card:not(:first-child) .category-copy{bottom:18px}
@media(max-width:760px){
 .systems .system-card:first-child .category-image{inset:0 0 18% 0}
 .systems .system-card:first-child .category-image img{object-fit:cover;object-position:50% 55%}
 .systems .system-card:first-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(227,236,255,0),#e3ecff 45%)}
 .systems .system-card:first-child{background:#e3ecff}
 .systems .system-card:not(:first-child) .category-image{inset:0 0 26% 0}
 .systems .system-card:not(:first-child)::after{height:40%}
 .systems .card-title{font-size:15px}
}/* Catalog in the pool's azure (hue ~195, sampled from the scene water). */
.systems .system-card,.systems .system-card:not(:first-child),.panel .category-panel-image,.catalog-thumb{background:#d9f2fb}
.systems .system-card::after,.systems .system-card:not(:first-child)::after{background:linear-gradient(180deg,rgba(217,242,251,0) 0%,#d9f2fb 40%)}
@media(max-width:760px){.systems .system-card:first-child{background:#d9f2fb}.systems .system-card:first-child::after{background:linear-gradient(180deg,rgba(217,242,251,0),#d9f2fb 45%)}}@media(min-width:761px){.systems .system-card:first-child::after{content:none}}

/* ---- Night catalog: continues the scroll's blue hour ----
   Twilight navy sheet, glass tiles, night pool photography edge to edge,
   white titles over a navy fade. */
.systems{background:#0b1a33;color:#fff;box-shadow:0 -24px 60px rgba(2,8,20,.5),0 -1px 0 rgba(255,255,255,.08)}
.systems .section-heading h2{color:#fff}
.systems .section-lead{color:rgba(255,255,255,.6)}
.systems .section-heading .text-button,.systems .catalog-help button{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.systems .text-button:hover,.systems .catalog-help button:hover{color:var(--blue-soft);text-decoration-color:currentColor}
.systems .catalog-help{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.12)}
.systems .catalog-help strong{color:#fff}
.systems{--focus:#8ab8ff}
.systems .system-card,.systems .system-card:not(:first-child){background:#0e2242;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.systems .system-card:hover{box-shadow:0 24px 60px -24px rgba(47,182,216,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.systems .system-card:not(:first-child) .category-image{inset:0}
.systems .system-card:not(:first-child) .category-image img{object-position:50% 50%}
.systems .system-card::after,.systems .system-card:not(:first-child)::after,.systems .system-card:first-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(8,20,40,0) 0%,rgba(8,20,40,.82) 75%);pointer-events:none}
.systems .card-title,.systems .system-card:hover .card-title{color:#fff}
.panel .category-panel-image,.catalog-thumb{background:#0e2242}
@media(max-width:760px){.systems .system-card:first-child .category-image,.systems .system-card:not(:first-child) .category-image{inset:0}.systems .system-card:first-child{background:#0e2242}}
/* ---- Catalog lineup panorama ---- */
.systems .system-grid[hidden]{display:none}
.lineup{position:relative;margin:0 auto;max-width:1360px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(47,182,216,.35)}
.lineup-track{position:relative;width:100%;aspect-ratio:1792/768}
.lineup-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Each spot covers a product from the water line down to the stone face. */
.lineup-spot{position:absolute;left:calc(var(--x) - var(--w)/2);width:var(--w);top:42%;bottom:6%;padding:0;border:0;border-radius:18px;background:none;cursor:pointer;transition:background .3s,box-shadow .3s}
.lineup-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 55% at 50% 50%,rgba(120,220,255,.22),rgba(120,220,255,0) 70%);opacity:0;transition:opacity .35s}
.lineup-spot:hover::before,.lineup-spot:focus-visible::before{opacity:1}
.lineup-name{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-size:clamp(13px,1.35vw,19px);font-weight:500;color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(0,8,20,.8);transition:color .25s}
.lineup-spot:hover .lineup-name,.lineup-spot:focus-visible .lineup-name{color:#fff}
.lineup-spot:focus-visible{outline:2px solid var(--blue-soft);outline-offset:-2px}
/* Hint that the panorama is interactive. */
.lineup::after{content:"Нажмите на оборудование";position:absolute;top:18px;right:22px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.7);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}
/* Phones: keep the panorama tall enough to read; swipe sideways. */
@media(max-width:760px){
 .lineup{border-radius:20px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
 .lineup::-webkit-scrollbar{display:none}
 .lineup-track{width:auto;height:340px;aspect-ratio:1792/768}
 .lineup-spot{scroll-snap-align:center}
 .lineup-name{font-size:14px}
 .lineup::after{content:"Листайте →";position:sticky;float:right;top:12px;right:12px;margin:12px 12px 0 0}
}/* Lineup: the outer box holds the hint, the inner box scrolls on phones. */
.lineup-scroll{position:relative}
@media(max-width:760px){
 .lineup{overflow:hidden}
 .lineup-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
 .lineup-scroll::-webkit-scrollbar{display:none}
 .lineup::after{content:"Листайте →";position:absolute;float:none;top:12px;right:12px;margin:0;z-index:2}
}
/* ---- Lineup as separate cards ----
   --W is the width the whole panorama is drawn at; every card is a window
   onto its own slice (start --a, share --f), so the gaps between cards cut
   one continuous scene into nine individual pieces. */
.lineup{display:none}
.lineup-wrap{max-width:1360px;margin:0 auto}
.lineup-cards{--gap:10px;--W:calc(100cqw - 8 * var(--gap));container-type:inline-size;display:flex;gap:var(--gap);padding:12px 0 18px}
.lineup-card{position:relative;flex:none;width:calc(var(--f) * var(--W));height:calc(var(--W) * 768 / 1792);padding:0;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;cursor:pointer;
 background:url("assets/catalog-night/lineup.jpg") no-repeat;background-size:var(--W) auto;background-position:calc(var(--a) * var(--W) * -1) 0;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -18px rgba(0,8,20,.8);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.lineup-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,40,0) 70%,rgba(8,20,40,.55));pointer-events:none}
.lineup-card:hover,.lineup-card:focus-visible{transform:translateY(-10px);border-color:rgba(140,220,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 50px -20px rgba(47,182,216,.55)}
.lineup-card .lineup-name{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:1;white-space:nowrap;font-family:var(--display);font-size:clamp(12px,1.3vw,18px);font-weight:500;color:rgba(255,255,255,.9);text-shadow:0 2px 10px rgba(0,8,20,.85)}
.lineup-card:hover .lineup-name{color:#fff}
.lineup-card:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lineup-card{transition:none}.lineup-card:hover{transform:none}}
/* Phones: fixed card height, swipe sideways through the row. */
@media(max-width:760px){
 .lineup-wrap{margin:0 -20px}
 .lineup-cards{--W:760px;overflow-x:auto;padding:12px 20px 18px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .lineup-cards::-webkit-scrollbar{display:none}
 .lineup-card{scroll-snap-align:center;border-radius:14px}
 .lineup-card .lineup-name{font-size:14px}
}
/* ---- Lineup v3: equal cards, one per product photo ---- */
.lineup-cards{display:none}
.lineup-wrap{position:relative;max-width:1360px;margin:0 auto}
.lineup-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 2px 22px;-webkit-overflow-scrolling:touch}
.lineup-row::-webkit-scrollbar{display:none}
.lineup-row .lineup-card{position:relative;flex:0 0 clamp(220px,21vw,290px);aspect-ratio:4/5;height:auto;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;cursor:pointer;background:#0e2242;scroll-snap-align:start;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 34px -20px rgba(0,8,20,.85);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.lineup-row .lineup-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lineup-row .lineup-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(8,20,40,0),rgba(8,20,40,.85) 80%);pointer-events:none}
.lineup-row .lineup-card:hover,.lineup-row .lineup-card:focus-visible{transform:translateY(-8px);border-color:rgba(140,220,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 50px -20px rgba(47,182,216,.55)}
.lineup-row .lineup-card:hover img{transform:scale(1.05)}
.lineup-row .lineup-name{position:absolute;left:20px;right:20px;bottom:18px;transform:none;z-index:1;text-align:left;white-space:normal;font-family:var(--display);font-size:clamp(18px,1.6vw,22px);font-weight:500;line-height:1.15;color:#fff;text-shadow:0 2px 10px rgba(0,8,20,.7)}
/* Glass arrows, matching the hero buttons. */
.lineup-arrow{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 8px 14px -8px rgba(0,12,30,.6),inset 0 -1px 0 rgba(255,255,255,.3),0 8px 22px rgba(3,12,28,.35);cursor:pointer;transition:opacity .25s,background .25s}
.lineup-arrow:hover{background:rgba(255,255,255,.14)}
.lineup-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lineup-prev{left:-20px}.lineup-next{right:-20px}
.lineup-wrap.at-start .lineup-prev,.lineup-wrap.at-end .lineup-next{opacity:0;pointer-events:none}
@media(max-width:760px){
 .lineup-wrap{margin:0 -20px}
 .lineup-row{padding:12px 20px 18px;gap:12px;scroll-padding-left:20px}
 .lineup-row .lineup-card{flex-basis:62vw;border-radius:18px}
 .lineup-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){.lineup-row .lineup-card,.lineup-row .lineup-card img{transition:none}.lineup-row .lineup-card:hover{transform:none}}
/* ---- Lineup v4: equal cards over one continuous pool ---- */
.lineup-pool .lineup-card{background-image:url("assets/catalog-row/bg.jpg");background-repeat:no-repeat;background-color:#0e2242}
.lineup-pool .lineup-card::after{height:26%;background:linear-gradient(180deg,rgba(8,20,40,0),rgba(8,20,40,.7) 85%)}
.lineup-pool .lineup-card:hover img.lineup-product{transform:translateX(-50%) translateY(-4px) scale(1.04)}
.lineup-product{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:auto;height:auto;max-width:82%;max-height:50%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,8,20,.55));transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:1}
/* Soft contact shadow on the stone under each product. */
.lineup-pool .lineup-card::before{content:"";position:absolute;left:18%;right:18%;bottom:calc(20% - 7px);height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,6,16,.75),rgba(0,6,16,0));z-index:1;pointer-events:none}
.lineup-pool .lineup-name{z-index:2;bottom:16px}
.lineup-pool .lineup-row .lineup-card img.lineup-product{position:absolute;inset:auto;left:50%;bottom:20%;width:auto;height:auto;object-fit:contain}/* Real-world proportions between products; feet just on the stone top. */
.lineup-pool .lineup-row .lineup-card img.lineup-product{bottom:19%;max-width:84%}
.lineup-pool [data-category=pumps] img.lineup-product{max-height:42%}
.lineup-pool [data-category=filters] img.lineup-product{max-height:54%}
.lineup-pool [data-category=heating] img.lineup-product{max-height:46%}
.lineup-pool [data-category=lighting] img.lineup-product{max-height:30%}
.lineup-pool [data-category=automation] img.lineup-product{max-height:40%}
.lineup-pool [data-category=chemistry] img.lineup-product{max-height:40%}
.lineup-pool [data-category=accessories] img.lineup-product{max-height:44%}
.lineup-pool [data-category=finishes] img.lineup-product{max-height:46%}
.lineup-pool [data-category=robots] img.lineup-product{max-height:34%}/* Fixes: the contact shadow belonged at the feet, not the top edge; products
   stand on the stone top (just below the water line), not on the water. */
.lineup-pool .lineup-card::before{top:auto;left:16%;right:16%;bottom:calc(17.5% - 5px);height:16px;inset:auto 16% calc(17.5% - 5px) 16%;background:radial-gradient(closest-side,rgba(0,6,16,.85),rgba(0,6,16,0))}
.lineup-pool .lineup-row .lineup-card img.lineup-product{bottom:17.5%}
.lineup-pool .lineup-card:hover img.lineup-product{transform:translateX(-50%) translateY(-3px) scale(1.03)}/* Soft fade where the row continues, instead of a hard cut through a card. */
@media(min-width:761px){
 .lineup-pool .lineup-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 0,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 0,#000 calc(100% - 120px),transparent 100%)}
 .lineup-pool:not(.at-start) .lineup-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%)}
 .lineup-pool.at-end .lineup-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 120px,#000 100%)}
 .lineup-prev{left:-24px}.lineup-next{right:-24px}
}
/* Panorama doubled with its mirror image: wide enough for the whole row, seamless in the middle. */
.lineup-pool .lineup-card{background-image:url('assets/catalog-row/bg.jpg')}

/* Panorama bg2: taller, narrower cards so each shows mountains, water and the
   marble deck; products stand on the deck (24% up from the card bottom) with
   a grounded contact shadow; names sit on the deck below them. */
.lineup-pool .lineup-card{background-image:url('assets/catalog-row/bg2.jpg')}
.lineup-pool .lineup-row .lineup-card{flex-basis:clamp(190px,16.5vw,240px);aspect-ratio:3/5}
.lineup-pool .lineup-row .lineup-card img.lineup-product{bottom:24%;max-width:88%}
.lineup-pool .lineup-card::before{inset:auto 14% calc(24% - 6px) 14%;height:14px;background:radial-gradient(closest-side,rgba(0,4,12,.9),rgba(0,4,12,0))}
.lineup-pool .lineup-card::after{height:22%;background:linear-gradient(180deg,rgba(8,20,40,0),rgba(8,20,40,.55))}
.lineup-pool .lineup-name{bottom:18px;font-size:clamp(16px,1.35vw,19px)}
.lineup-pool [data-category=pumps] img.lineup-product{max-height:28%}
.lineup-pool [data-category=filters] img.lineup-product{max-height:38%}
.lineup-pool [data-category=heating] img.lineup-product{max-height:28%}
.lineup-pool [data-category=lighting] img.lineup-product{max-height:20%}
.lineup-pool [data-category=automation] img.lineup-product{max-height:27%}
.lineup-pool [data-category=chemistry] img.lineup-product{max-height:27%}
.lineup-pool [data-category=accessories] img.lineup-product{max-height:30%}
.lineup-pool [data-category=finishes] img.lineup-product{max-height:31%}
.lineup-pool [data-category=robots] img.lineup-product{max-height:22%}
@media(max-width:760px){.lineup-pool .lineup-row .lineup-card{flex-basis:46vw}}.lineup-pool [data-category=pumps] img.lineup-product{max-height:35%}
.lineup-pool [data-category=filters] img.lineup-product{max-height:47%}
.lineup-pool [data-category=heating] img.lineup-product{max-height:35%}
.lineup-pool [data-category=lighting] img.lineup-product{max-height:25%}
.lineup-pool [data-category=automation] img.lineup-product{max-height:34%}
.lineup-pool [data-category=chemistry] img.lineup-product{max-height:34%}
.lineup-pool [data-category=accessories] img.lineup-product{max-height:38%}
.lineup-pool [data-category=finishes] img.lineup-product{max-height:39%}
.lineup-pool [data-category=robots] img.lineup-product{max-height:28%}
.lineup-pool .lineup-row .lineup-card img.lineup-product{max-width:94%}
/* ---- Process blueprints: frameless line drawings that draw themselves on scroll ---- */
.blueprint{display:block;width:100%;height:auto;margin-top:28px;overflow:visible}
.blueprint .ln *{fill:none;stroke:#22385a;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.blueprint .acc{stroke:#2f8fd8}
.blueprint .flow{stroke:#2f8fd8;stroke-width:1.4}
.blueprint .dim,.blueprint .hatch{stroke:#7d8aa0;stroke-width:.8}
.blueprint .axis{stroke:#9aa6b8;stroke-width:.7;stroke-dasharray:8 3 1.5 3}
.blueprint .dots circle{fill:#2f8fd8;stroke:none}
.blueprint .tx text{font-family:var(--sans);font-size:9px;letter-spacing:.06em;fill:#5f6a7c;text-anchor:middle;stroke:none}
/* Drawing: each shape has pathLength=1, so a dash of 1 hides/reveals it fully. */
.blueprint .d:not(.axis){stroke-dasharray:1;stroke-dashoffset:1}
.blueprint .axis{opacity:0}
.blueprint .tx,.blueprint .dots{opacity:0}
@supports (animation-timeline: view()){
 @media(prefers-reduced-motion:no-preference){
  .blueprint .d:not(.axis){animation:bp-draw linear both;animation-timeline:view()}
  .blueprint .d1{animation-range:entry 0% cover 30%}
  .blueprint .d2{animation-range:entry 30% cover 40%}
  .blueprint .d3{animation-range:entry 60% cover 50%}
  .blueprint .axis,.blueprint .tx,.blueprint .dots{animation:bp-fade linear both;animation-timeline:view();animation-range:cover 30% cover 50%}
 }
}
@keyframes bp-draw{to{stroke-dashoffset:0}}
@keyframes bp-fade{to{opacity:1}}
/* Fallback (no scroll timelines): draw once when it comes into view. */
.blueprint.is-drawn .d:not(.axis){transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.blueprint.is-drawn .d2{transition-delay:.35s}.blueprint.is-drawn .d3{transition-delay:.7s}
.blueprint.is-drawn .axis,.blueprint.is-drawn .tx,.blueprint.is-drawn .dots{transition:opacity .8s 1.2s;opacity:1}
@media(prefers-reduced-motion:reduce){.blueprint .d:not(.axis){stroke-dashoffset:0;animation:none}.blueprint .axis,.blueprint .tx,.blueprint .dots{opacity:1;animation:none}}.blueprint .tx text{font-size:10px}

/* Pencil look: graphite strokes with grain and a slight hand tremor (SVG filter
   #pencil), a second offset pass like a re-traced line, faint construction
   lines running past the edges, and handwritten notes. */
.blueprint .ln,.blueprint .ln2,.blueprint .guides{filter:url(#pencil)}
.blueprint .ln *{stroke:#3b4250;stroke-width:1.35}
.blueprint .acc,.blueprint .flow{stroke:#3d7fc7}
.blueprint .dim,.blueprint .hatch{stroke:#6d7685;stroke-width:.95}
.blueprint .ln2{opacity:.4;transform:translate(.7px,-.5px)}
.blueprint .guides line{stroke:#8d95a3;stroke-width:.6;opacity:.55}
.blueprint .guides{opacity:0}
.blueprint .tx text{font-family:"Caveat",var(--sans);font-size:15px;letter-spacing:0;fill:#4a5262}
.blueprint .dots circle{fill:#3d7fc7}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.blueprint .guides{animation:bp-fade linear both;animation-timeline:view();animation-range:entry 0% cover 25%}}}
.blueprint.is-drawn .guides{transition:opacity .8s;opacity:1}
@media(prefers-reduced-motion:reduce){.blueprint .guides{opacity:1}}
/* ---- Catalog grid (replaces the ribbon): all nine categories at once ----
   3 x 3 on desktop, 2 columns on tablets and phones (last card full width). */
.lineup-pool .lineup-arrow{display:none}
.lineup-pool .lineup-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible;padding:0;scroll-snap-type:none;-webkit-mask-image:none!important;mask-image:none!important}
.lineup-pool .lineup-row .lineup-card{flex:none;width:auto;aspect-ratio:4/3}
.lineup-pool .lineup-row .lineup-card img.lineup-product{bottom:22%}
.lineup-pool .lineup-card::before{inset:auto 22% calc(22% - 6px) 22%}
.lineup-pool [data-category=pumps] img.lineup-product{max-height:50%}
.lineup-pool [data-category=filters] img.lineup-product{max-height:64%}
.lineup-pool [data-category=heating] img.lineup-product{max-height:52%}
.lineup-pool [data-category=lighting] img.lineup-product{max-height:36%}
.lineup-pool [data-category=automation] img.lineup-product{max-height:50%}
.lineup-pool [data-category=chemistry] img.lineup-product{max-height:50%}
.lineup-pool [data-category=accessories] img.lineup-product{max-height:54%}
.lineup-pool [data-category=finishes] img.lineup-product{max-height:56%}
.lineup-pool [data-category=robots] img.lineup-product{max-height:40%}
.lineup-pool .lineup-row .lineup-card img.lineup-product{max-width:62%}
.lineup-pool .lineup-name{font-size:clamp(18px,1.5vw,22px);left:22px;bottom:16px}
@media(max-width:900px){.lineup-pool .lineup-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lineup-pool .lineup-row .lineup-card:last-child{grid-column:1/-1;aspect-ratio:2/1}}
@media(max-width:760px){.lineup-wrap.lineup-pool{margin:0}.lineup-pool .lineup-row{padding:0}.lineup-pool .lineup-row .lineup-card{flex-basis:auto;aspect-ratio:1/1}.lineup-pool .lineup-row .lineup-card:last-child{aspect-ratio:2/1}.lineup-pool .lineup-name{font-size:15px;left:14px;bottom:12px}.lineup-pool .lineup-row .lineup-card img.lineup-product{max-width:76%}}@media(max-width:760px){.lineup-pool .lineup-name .full{display:none}.lineup-pool .lineup-name::after{content:attr(data-short)}}

/* ---- Catalog, laconic: no scenery. Deep navy card, a soft turquoise glow
   rising from below like pool light, a hairline floor, the product with a
   faint reflection. ---- */
.lineup-pool .lineup-row .lineup-card{background:radial-gradient(70% 55% at 50% 100%,rgba(47,182,216,.28),rgba(47,182,216,0) 70%),linear-gradient(180deg,#0d1f3c 0%,#0a1830 100%)!important;background-size:auto!important;background-position:0 0!important;border-color:rgba(255,255,255,.08)}
.lineup-pool .lineup-row .lineup-card:hover{background:radial-gradient(75% 60% at 50% 100%,rgba(47,182,216,.4),rgba(47,182,216,0) 72%),linear-gradient(180deg,#0f2342 0%,#0a1830 100%)!important}
/* Floor line where products stand. */
.lineup-pool .lineup-card::after{top:auto;bottom:22%;height:1px;background:linear-gradient(90deg,rgba(140,220,255,0),rgba(140,220,255,.35) 50%,rgba(140,220,255,0))}
/* Contact shadow becomes a soft glow pool on the floor. */
.lineup-pool .lineup-card::before{inset:auto 18% calc(22% - 9px) 18%;height:18px;background:radial-gradient(closest-side,rgba(0,4,12,.85),rgba(0,4,12,0))}
.lineup-pool .lineup-row .lineup-card img.lineup-product{-webkit-box-reflect:below 2px linear-gradient(transparent 62%,rgba(255,255,255,.14));filter:drop-shadow(0 6px 12px rgba(0,8,20,.5))}
.lineup-pool .lineup-name{bottom:16px;color:rgba(255,255,255,.92);text-shadow:none}
/* ---- Night drawer: the side panel matches the catalog (navy, turquoise glow, glass) ---- */
.panel{background:linear-gradient(180deg,#0d1f3c 0%,#0a1830 100%);color:#fff;color-scheme:dark;border-left:1px solid rgba(255,255,255,.08);box-shadow:-30px 0 80px rgba(0,6,16,.6);--focus:#8ab8ff}
.panel::backdrop{background:rgba(3,10,22,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.panel .eyebrow{color:var(--blue-soft)}
.panel .icon-button{color:#fff}
.panel .icon-button:hover{background:rgba(255,255,255,.08)}
.panel h2{color:#fff}
.panel p,.panel .lead{color:rgba(255,255,255,.72)}
.panel .back-button{color:rgba(255,255,255,.85);text-decoration-color:rgba(255,255,255,.3)}
.panel .back-button:hover{color:#fff}
/* Hero: product on the turquoise glow. */
.cat-hero{position:relative;height:250px;margin:22px 0 6px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(70% 60% at 50% 100%,rgba(47,182,216,.32),rgba(47,182,216,0) 70%),#0b1a33;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;overflow:hidden}
.cat-hero::after{content:"";position:absolute;left:10%;right:10%;bottom:30px;height:1px;background:linear-gradient(90deg,rgba(140,220,255,0),rgba(140,220,255,.4),rgba(140,220,255,0))}
.cat-hero img{position:relative;z-index:1;max-width:62%;max-height:78%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,6,16,.6));-webkit-box-reflect:below 1px linear-gradient(transparent 70%,rgba(255,255,255,.12))}
.cat-sub{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-soft);margin:30px 0 14px}
/* Subcategories: glass tiles; click opens the request form with that topic. */
.cat-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat-items button{display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:16px 18px;text-align:left;border-radius:16px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 8px 14px -10px rgba(0,8,20,.7),inset 0 -1px 0 rgba(255,255,255,.1);cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.cat-items button:hover{background:rgba(120,210,255,.08);border-color:rgba(140,220,255,.4);transform:translateY(-2px)}
.cat-item-name{font-family:var(--display);font-size:19px;line-height:1.15}
.cat-item-note{font-size:13px;line-height:1.45;color:rgba(255,255,255,.6)}
/* Tips: numbered, thin rules. */
.cat-tips{list-style:none;margin:0 0 28px;padding:0;counter-reset:tip}
.cat-tips li{counter-increment:tip;display:flex;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.cat-tips li::before{content:counter(tip,decimal-leading-zero);font-family:var(--display);font-size:17px;color:var(--blue-soft);min-width:24px}
/* Neighbour categories. */
.cat-siblings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.cat-siblings button{display:flex;flex-direction:column;gap:4px;padding:10px 0;text-align:left;color:#fff;font-family:var(--display);font-size:18px;cursor:pointer}
.cat-siblings button:last-child{text-align:right;align-items:flex-end}
.cat-siblings span{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.cat-siblings button:hover{color:var(--blue-soft)}
/* "All categories" list and search in the same style. */
.panel .panel-list{border-top-color:rgba(255,255,255,.08)}
.panel .panel-list li{border-bottom-color:rgba(255,255,255,.08)}
.panel .panel-list button{color:#fff}
.panel .panel-list button:hover{color:var(--blue-soft)}
.panel .catalog-thumb{background:radial-gradient(70% 60% at 50% 100%,rgba(47,182,216,.3),rgba(47,182,216,0) 70%),#0b1a33;border-radius:12px;padding:6px}
.panel .catalog-thumb img{object-fit:contain}
.panel .search-field{border-bottom-color:rgba(255,255,255,.2)}
.panel .search-field input{color:#fff}
.panel .search-field input::placeholder,.panel .search-field svg{color:rgba(255,255,255,.45)}
.panel .search-count{color:rgba(255,255,255,.5)!important}
/* Request form on navy. */
.request-form label{color:rgba(255,255,255,.6)}
.request-form input,.request-form textarea,.request-form select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
.request-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.request-form select option{color:#0a1a30}
.request-form input:focus,.request-form textarea:focus,.request-form select:focus{border-color:var(--blue-soft);box-shadow:0 0 0 1px var(--blue-soft)}
.panel .form-note{color:rgba(255,255,255,.5)}
.panel .form-status{background:rgba(138,184,255,.1);border-color:rgba(138,184,255,.4);color:#fff}
.panel .btn-primary{background:linear-gradient(180deg,rgba(160,198,255,.72),rgba(127,176,247,.62));border:1px solid rgba(190,215,255,.6);color:#07162c}
@media(max-width:760px){.cat-items{grid-template-columns:1fr}.cat-hero{height:200px}}/* "All categories": a 3-column grid of mini tiles instead of a list. */
.panel .catalog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:0;margin-top:22px}
.panel .catalog-list li{border:0}
.panel .catalog-list button{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:14px 10px 14px;min-height:0;border-radius:16px;text-align:center;font-family:var(--display);font-size:16px;font-weight:500;line-height:1.15;color:#fff;background:radial-gradient(80% 55% at 50% 100%,rgba(47,182,216,.22),rgba(47,182,216,0) 70%),rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);transition:border-color .25s,transform .25s,background .25s}
.panel .catalog-list button:hover{border-color:rgba(140,220,255,.4);transform:translateY(-2px);color:#fff}
.panel .catalog-list .catalog-thumb{flex:none;width:100%;height:92px;padding:0;background:none;border-radius:0}
.panel .catalog-list .catalog-thumb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,6,16,.55))}
.panel .catalog-list-copy{flex:none}
.panel .catalog-list-copy small{display:none}
.panel .catalog-list button>svg{display:none}
@media(max-width:520px){.panel .catalog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Search results reuse the same tiles. */
.panel .btn,.panel .btn-primary{border-radius:999px}.panel .catalog-list .catalog-thumb{display:flex;align-items:flex-end;justify-content:center;overflow:visible;height:96px;padding:6px 8px 0}
.panel .catalog-list .catalog-thumb img{width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain!important}

/* ================= Audit fixes (spec-driven) ================= */
/* Rhythm: tighter, even spacing between sections. */
.systems{padding-bottom:72px}
.services{padding-top:72px;padding-bottom:96px}
.process{padding-top:96px;padding-bottom:104px}
@media(max-width:760px){.systems{padding-bottom:48px}.services{padding-top:48px;padding-bottom:64px}.process{padding-top:64px;padding-bottom:72px}}

/* Process: night blueprint ("синька") instead of the cream block. */
.process{background:#0b1a33;color:#fff;color-scheme:dark;--focus:#8ab8ff}
.process .section-title,.process-steps h3{color:#fff}
.process .section-lead,.process-steps p{color:rgba(255,255,255,.62)}
.process-steps li{border-top-color:rgba(255,255,255,.12)}
.process-steps li::before{background:var(--blue-soft)}
.blueprint .ln *{stroke:#c9d8ee}
.blueprint .acc,.blueprint .flow{stroke:#6fc3ff}
.blueprint .dim,.blueprint .hatch{stroke:#8ea3c2}
.blueprint .axis{stroke:#6d82a0}
.blueprint .guides line{stroke:#5d7090}
.blueprint .tx text{fill:#a9bdd8}
.blueprint .dots circle{fill:#6fc3ff}

/* One button language: glass pill primary (lilac-blue) and clear glass secondary. */
.btn{border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em;text-transform:none;min-height:50px;padding:0 24px}
.btn-glass,.water-band .btn-ghost{color:#fff;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -10px rgba(255,255,255,.25),0 8px 24px rgba(3,12,28,.25)}
.systems .section-heading .text-button{min-height:42px;padding:0 20px;border-radius:999px;text-decoration:none;color:#fff;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 8px 14px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.25);font-size:14px}
.systems .section-heading .text-button svg{display:inline-block!important}
.systems .section-heading .text-button:hover{background:rgba(255,255,255,.08);color:#fff}
#services.services--visual .service-link{letter-spacing:.01em;text-transform:none;font-size:14px;font-weight:500}

/* "Not sure where to start": a glass panel with a real button. */
.systems .catalog-help{margin-top:40px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:radial-gradient(60% 120% at 0% 100%,rgba(47,182,216,.16),rgba(47,182,216,0) 70%),rgba(255,255,255,.03)}
.help-copy{display:flex;flex-direction:column;gap:6px;max-width:640px}
.help-copy strong{font-family:var(--display);font-size:24px;font-weight:500;color:#fff}
.help-copy span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.65)}
.systems .catalog-help .btn{flex:none;text-decoration:none}
.systems .catalog-help .btn svg{display:inline-block!important}
@media(max-width:760px){.systems .catalog-help{flex-direction:column;align-items:stretch;padding:22px}.systems .catalog-help .btn{width:100%}}

/* Catalog cards: less empty space above the product; even product sizes. */
.lineup-pool .lineup-row .lineup-card{aspect-ratio:5/4}
.lineup-pool .lineup-row .lineup-card img.lineup-product{bottom:24%;max-width:66%}
.lineup-pool .lineup-card::after{bottom:24%}
.lineup-pool .lineup-card::before{bottom:calc(24% - 9px)}
.lineup-pool [data-category=lighting] img.lineup-product{max-height:46%}
.lineup-pool [data-category=robots] img.lineup-product{max-height:50%}
.lineup-pool [data-category=pumps] img.lineup-product,.lineup-pool [data-category=heating] img.lineup-product{max-height:56%}
@media(max-width:900px){.lineup-pool .lineup-row .lineup-card:last-child img.lineup-product{max-width:40%}}

/* Services head: lead aligned to the heading baseline. */
.services-head{align-items:flex-end}
.services-head .section-lead{margin-bottom:10px}
/* Services on tablets: one column of wide cards. */
@media(max-width:1000px){#services.services--visual .service-grid{grid-template-columns:1fr;gap:16px}#services.services--visual .service-card{min-height:340px}}

/* Tablet hero: copy sits above the scene, never on its edge. */
@media(min-width:701px) and (max-width:1000px){.intro-copy{top:96px}.intro-copy h1{font-size:44px}}

/* Footer: brand + CTA, then three columns. */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
.footer-cta{margin-top:22px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-col:last-child{grid-column:auto}}body .systems .catalog-help button.btn{padding:0 24px;min-height:50px;font-size:14px}
@media(max-width:1000px){body #services.services--visual .service-grid{grid-template-columns:1fr;gap:16px}body #services.services--visual .service-card{min-height:340px}}
@media(max-width:900px){.lineup-pool .lineup-row .lineup-card:last-child{aspect-ratio:2.4/1}}
#services.services--visual .service-link{font-size:14px}
/* Smart tools (ТЗ: calculators) + AI assistant. Night glass, same family as
   the hero buttons and the catalog-help panel. */
.tools{padding:96px 4% 24px;background:var(--navy-900);color:#fff}
.tools .section-wrap{max-width:1240px;margin:0 auto}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tool-card{position:relative;display:grid;align-content:start;gap:12px;min-height:240px;padding:30px 28px 26px;border:1px solid rgba(138,184,255,.16);border-radius:22px;background:radial-gradient(120% 90% at 20% 0%,rgba(47,182,216,.14),rgba(47,182,216,0) 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,8,22,.8);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,transform .3s,background .3s}
.tool-card:hover{border-color:rgba(138,184,255,.42);transform:translateY(-3px)}
.tool-card:focus-visible{outline:2px solid #8ab8ff;outline-offset:3px}
.tool-ico{width:44px;height:44px;fill:none;stroke:#8ab8ff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.tool-card strong{font-family:var(--serif,'Cormorant Garamond',serif);font-size:27px;font-weight:500;line-height:1.1}
.tool-card span{color:rgba(255,255,255,.62);font-size:14.5px;line-height:1.55}
.tool-card em{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#a6c8ff}
.tool-card em svg{width:16px;height:16px;transition:transform .3s}
.tool-card:hover em svg{transform:translateX(4px)}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}.tool-card{min-height:0}.tools{padding-top:72px}}

/* Tool forms inside the drawer */
.tool-form{display:grid;gap:14px;margin-top:8px}
.tool-form .cat-sub{margin:14px 0 0}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool-row:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
.tool-form label{display:grid;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.tool-form input[type=number]{width:100%;min-width:0;min-height:50px;padding:12px 16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:400 15.5px var(--sans);letter-spacing:0;outline:none;-moz-appearance:textfield}
.tool-form input::-webkit-inner-spin-button{opacity:.4}
.tool-form input:focus{border-color:#8ab8ff;box-shadow:0 0 0 1px #8ab8ff}
.tool-volume{margin:0;padding:14px 18px;border-radius:14px;background:rgba(47,182,216,.08);border:1px solid rgba(47,182,216,.2);color:rgba(255,255,255,.7);font-size:14px}
.tool-volume b{color:#fff;font-weight:500}
.tool-hint{margin:0;color:#a6c8ff;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex!important;cursor:pointer;letter-spacing:0!important;text-transform:none!important}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span,.chip-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);font:400 14px var(--sans);transition:border-color .2s,background .2s,color .2s}
.chip:hover span,.chip-btn:hover{border-color:rgba(138,184,255,.5)}
.chip input:checked+span{border-color:rgba(160,198,255,.8);background:linear-gradient(180deg,rgba(160,198,255,.32),rgba(127,176,247,.2));color:#fff}
.chip input:focus-visible+span{outline:2px solid #8ab8ff;outline-offset:2px}
.tool-form .btn{margin-top:14px;justify-self:start}
@media(max-width:560px){.tool-row{gap:8px}.tool-form input[type=number]{padding:10px 12px}}

/* Assistant chat */
.chat{display:grid;gap:12px}
.chat-log{display:grid;gap:12px}
.chat-msg{max-width:88%;padding:14px 18px;border-radius:18px;font-size:15px;line-height:1.55}
.chat-bot{justify-self:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:6px;color:rgba(255,255,255,.86)}
.chat-me{justify-self:end;background:linear-gradient(180deg,rgba(160,198,255,.72),rgba(127,176,247,.62));color:#0a1830;border-bottom-right-radius:6px}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{cursor:pointer}
.chat-link{display:inline;margin-left:4px;padding:0;border:0;background:none;color:#a6c8ff;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chat-input{display:flex;gap:10px;margin-top:20px}
.chat-input input{flex:1;min-width:0;min-height:50px;padding:0 20px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05);color:#fff;font:400 15px var(--sans);outline:none}
.chat-input input:focus{border-color:#8ab8ff}
.chat-input .icon-button{flex:none;width:50px;height:50px;border-radius:50%;border:0;background:linear-gradient(180deg,rgba(160,198,255,.85),rgba(127,176,247,.75));color:#0a1830;display:grid;place-items:center;cursor:pointer}
.chat-input .icon-button svg{width:18px;height:18px}

/* Floating assistant button: clear concave glass pill */
.assistant-fab{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(12,30,58,.42);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);box-shadow:inset 0 10px 18px -8px rgba(0,12,30,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 14px 34px -14px rgba(0,8,22,.8);color:#fff;font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,transform .3s}
.assistant-fab:hover{border-color:rgba(160,198,255,.6);transform:translateY(-2px)}
.assistant-fab svg{width:20px;height:20px;fill:none;stroke:#a6c8ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.modal-open .assistant-fab{opacity:0;pointer-events:none}
@media(max-width:600px){.assistant-fab{right:16px;bottom:16px;width:52px;padding:0;justify-content:center}.assistant-fab span{display:none}}/* Request form on night: the dark override's background shorthand reset the
   select arrow to repeat; one field radius for request and tool forms. */
.request-form select{background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.request-form input,.request-form textarea,.request-form select{border-radius:12px}
.chat{margin-top:22px}
.chat-input+.form-note{margin-top:12px}/* Construction/service lists were still using the light-theme text colour. */
.panel .plain-list{border-top-color:rgba(255,255,255,.12)}
.panel .plain-list li{color:rgba(255,255,255,.86);border-bottom-color:rgba(255,255,255,.12)}
/* Wide tool window: the calculators open centred and use the whole screen —
   fields in two columns on the left, a live brief + contacts on the right. */
.panel.panel--wide{inset:0;margin:auto;width:min(1180px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 48px);padding:26px 40px 34px;border:1px solid rgba(138,184,255,.16);border-radius:28px;box-shadow:0 40px 120px rgba(0,6,16,.7);animation:panel-pop .32s ease-out}
@keyframes panel-pop{from{opacity:0;transform:translateY(14px) scale(.985)}}
.panel--wide #panel-title{margin-bottom:8px}
.panel--wide .lead{max-width:680px;margin:0 0 26px}
.panel--wide .tool-form{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start;margin:0}
.tool-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.tool-col{display:grid;gap:22px;align-content:start}
.panel--wide .tool-form .cat-sub{margin:0 0 12px}
.panel--wide .tool-row{gap:10px}
.panel--wide .tool-form input[type=number]{min-height:46px;padding:10px 14px}
.panel--wide .chip span{min-height:38px;padding:0 15px;font-size:13.5px}
.tool-summary{position:sticky;top:0;display:grid;gap:14px;padding:24px;border:1px solid rgba(47,182,216,.22);border-radius:22px;background:radial-gradient(120% 80% at 80% 0%,rgba(47,182,216,.16),rgba(47,182,216,0) 60%),rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tool-summary-label{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#8ab8ff}
.tool-big{display:grid;gap:2px;margin:0}
.tool-big b{font-family:var(--display,'Cormorant Garamond',serif);font-size:46px;font-weight:500;line-height:1;color:#fff}
.tool-big small{font-size:13.5px;color:rgba(255,255,255,.55)}
.tool-brief{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.1)}
.tool-brief li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;line-height:1.4}
.tool-brief span{flex:none;color:rgba(255,255,255,.5)}
.tool-brief b{font-weight:400;color:#fff;text-align:right}
.tool-summary .tool-hint{font-size:13.5px}
.tool-contact{display:grid;gap:10px}
.tool-contact[hidden]{display:none}
.tool-contact label{gap:6px}
.tool-contact input{width:100%;min-width:0;min-height:46px;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:400 15px var(--sans);letter-spacing:0;text-transform:none;outline:none}
.tool-contact input:focus{border-color:#8ab8ff;box-shadow:0 0 0 1px #8ab8ff}
.panel--wide .tool-summary .btn{width:100%;justify-content:center;margin:2px 0 0;justify-self:stretch}
.tool-summary .form-status{margin:0;font-size:13.5px;color:#a6c8ff}
.tool-summary .form-note{margin:0;font-size:12.5px;color:rgba(255,255,255,.45)}
@media(max-width:1020px){.panel--wide .tool-form{grid-template-columns:1fr}.tool-summary{position:static}}
@media(max-width:700px){
 .panel.panel--wide{width:100%;max-height:100%;height:100%;border-radius:0;border:0;padding:24px 20px 32px}
 .tool-fields{grid-template-columns:1fr}.tool-col+.tool-col{margin-top:22px}
}.panel.panel--wide{height:fit-content;padding-top:22px}
.panel--wide h2#panel-title{margin:6px 0 8px;font-size:clamp(34px,3.4vw,42px)}
.panel--wide .lead{max-width:none;margin-bottom:24px}
.tool-big b span{font-size:.5em;letter-spacing:.02em;color:rgba(255,255,255,.75)}
/* ---- Window choreography (replaces the right-hand drawer) ----------------
   Default: a centred glass card that surfaces from a soft blur. Category: a
   wide spread with the product on the left. Chat: a popover growing out of
   the assistant button. Phones: a bottom sheet. Content rises in a stagger. */
.panel{inset:0;margin:auto;width:min(760px,calc(100vw - 48px));height:fit-content;max-height:calc(100dvh - 48px);padding:24px 44px 40px;border:1px solid rgba(138,184,255,.16);border-radius:28px;box-shadow:0 40px 120px rgba(0,6,16,.7),inset 0 1px 0 rgba(255,255,255,.06);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(138,184,255,.25) transparent}
.panel h2{margin-top:10px}
.panel[open]{animation:panel-surface .55s cubic-bezier(.16,1,.3,1) both}
.panel[open]::backdrop{animation:backdrop-in .45s ease-out both}
.panel.is-closing{animation:panel-sink .28s cubic-bezier(.4,0,1,1) both}
.panel.is-closing::backdrop{animation:backdrop-out .28s ease-in both}
@keyframes panel-surface{from{opacity:0;transform:translateY(22px) scale(.965);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes panel-sink{to{opacity:0;transform:translateY(12px) scale(.975);filter:blur(6px)}}
@keyframes backdrop-in{from{background:rgba(3,10,22,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes backdrop-out{to{background:rgba(3,10,22,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
/* Stagger: title, then each block of the content. */
.panel[open]:not(.is-closing) h2,.panel[open]:not(.is-closing) #panel-content>*{animation:panel-rise .6s cubic-bezier(.16,1,.3,1) both}
.panel[open] h2{animation-delay:.06s!important}
#panel-content>:nth-child(1){animation-delay:.1s!important}#panel-content>:nth-child(2){animation-delay:.14s!important}#panel-content>:nth-child(3){animation-delay:.18s!important}#panel-content>:nth-child(4){animation-delay:.22s!important}#panel-content>:nth-child(5){animation-delay:.26s!important}#panel-content>:nth-child(n+6){animation-delay:.3s!important}
@keyframes panel-rise{from{opacity:0;transform:translateY(14px)}}

/* Tools keep their own wide card */
.panel.panel--wide{width:min(1180px,calc(100vw - 48px))}

/* Category spread */
.panel.panel--cat{width:min(1080px,calc(100vw - 48px))}
.panel--cat #panel-content{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:44px;align-items:start}
.panel--cat #panel-content>*{grid-column:2}
.panel--cat #panel-content>.cat-hero{grid-column:1;grid-row:1/span 12;position:sticky;top:0;height:min(460px,calc(100dvh - 220px));margin:18px 0 0}
.panel--cat .cat-hero img{max-width:72%}
.panel--cat .lead{margin-top:18px}
.panel--cat .cat-items{grid-template-columns:1fr}

/* Chat popover */
.panel.panel--chat{inset:auto 24px 24px auto;margin:0;width:min(420px,calc(100vw - 32px));height:min(680px,calc(100dvh - 48px));max-height:none;padding:20px 26px 22px;transform-origin:100% 100%;display:flex;flex-direction:column}
.panel--chat:not([open]){display:none}
.panel--chat h2{font-size:30px;margin-top:6px}
.panel--chat #panel-content{flex:1;display:flex;flex-direction:column;min-height:0}
.panel--chat .chat{flex:1;align-content:start;overflow:auto;margin-top:18px}
.panel--chat .chat-msg{font-size:14.5px}
.panel.panel--chat[open]{animation:chat-grow .5s cubic-bezier(.16,1,.3,1) both}
.panel.panel--chat.is-closing{animation:chat-shrink .26s cubic-bezier(.4,0,1,1) both}
.panel--chat[open]::backdrop{background:rgba(3,10,22,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes chat-grow{from{opacity:0;transform:scale(.6);border-radius:40px;filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes chat-shrink{to{opacity:0;transform:scale(.7);filter:blur(4px)}}

@media(max-width:900px){
 .panel--cat #panel-content{grid-template-columns:1fr}
 .panel--cat #panel-content>*,.panel--cat #panel-content>.cat-hero{grid-column:1;grid-row:auto;position:static;height:240px}
 .panel--cat #panel-content>:not(.cat-hero){height:auto}
}
/* Phones: every window is a bottom sheet */
@media(max-width:700px){
 .panel,.panel.panel--wide,.panel.panel--cat,.panel.panel--chat{inset:auto 0 0 0;margin:0;width:100%;max-width:100%;height:auto;max-height:92dvh;padding:18px 20px 28px;border-width:1px 0 0;border-radius:24px 24px 0 0}
 .panel.panel--chat{height:86dvh}
 .panel[open],.panel.panel--chat[open]{animation:sheet-up .5s cubic-bezier(.16,1,.3,1) both}
 .panel.is-closing,.panel.panel--chat.is-closing{animation:sheet-down .28s cubic-bezier(.4,0,1,1) both}
 .panel::before{content:"";display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:2px;background:rgba(255,255,255,.22)}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.panel[open],.panel[open]::backdrop,.panel[open] h2,#panel-content>*{animation:none!important}}
/* ---- Open catalog: product stage on top, subsections listed below ---- */
.systems .section-heading{align-items:flex-end;gap:32px}
.systems .section-heading .section-lead{max-width:420px;margin:0;color:rgba(255,255,255,.62);font-size:15.5px;line-height:1.55;text-align:right}
.lineup-pool .lineup-row{align-items:stretch}
.cat-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#0d1f3c 0%,#0a1830 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -26px rgba(0,8,20,.9);transition:border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cat-card:hover{border-color:rgba(140,220,255,.28);transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -24px rgba(47,182,216,.45)}
.cat-stage{position:relative;display:block;width:100%;height:230px;padding:0;border:0;background:radial-gradient(70% 75% at 50% 100%,rgba(47,182,216,.3),rgba(47,182,216,0) 70%);cursor:pointer}
.cat-stage::after{content:"";position:absolute;left:8%;right:8%;bottom:40px;height:1px;background:linear-gradient(90deg,rgba(140,220,255,0),rgba(140,220,255,.35) 50%,rgba(140,220,255,0))}
.cat-stage::before{content:"";position:absolute;left:24%;right:24%;bottom:31px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,4,12,.85),rgba(0,4,12,0))}
.cat-stage img{position:absolute;left:50%;bottom:40px;z-index:1;max-width:62%;max-height:var(--h,56%);transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,8,20,.5));-webkit-box-reflect:below 2px linear-gradient(transparent 62%,rgba(255,255,255,.14));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.cat-card:hover .cat-stage img{transform:translateX(-50%) translateY(-4px) scale(1.04)}
.cat-stage:focus-visible{outline:2px solid #8ab8ff;outline-offset:-4px;border-radius:22px}
.cat-body{display:grid;gap:10px;padding:4px 24px 20px}
.cat-body h3{margin:0}
.cat-body h3 button{padding:0;border:0;background:none;color:#fff;font:500 25px/1.15 var(--display,'Cormorant Garamond',serif);cursor:pointer;text-align:left}
.cat-body h3 button:hover{color:#bfe3ff}
.cat-subs{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.08)}
.cat-subs li{border-bottom:1px solid rgba(255,255,255,.08)}
.cat-subs li:last-child{border-bottom:0}
.cat-subs button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:8px 0;border:0;background:none;color:rgba(255,255,255,.7);font:400 14.5px/1.35 var(--sans);text-align:left;cursor:pointer;transition:color .2s}
.cat-subs button svg{flex:none;width:15px;height:15px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;color:#8ab8ff}
.cat-subs button:hover,.cat-subs button:focus-visible{color:#fff}
.cat-subs button:hover svg,.cat-subs button:focus-visible svg{opacity:1;transform:none}
@media(max-width:900px){
 .systems .section-heading{flex-direction:column;align-items:flex-start;gap:12px}
 .systems .section-heading .section-lead{text-align:left}
 .cat-card:last-child{grid-column:1/-1;flex-direction:row}
 .cat-card:last-child .cat-stage{flex:0 0 46%;height:auto;min-height:230px}
 .cat-card:last-child .cat-body{flex:1;align-content:center;padding:20px 24px}
}
@media(max-width:560px){
 .lineup-pool .lineup-row{grid-template-columns:1fr}
 .cat-card:last-child{flex-direction:column}
 .cat-card:last-child .cat-stage{flex:none;min-height:0;height:200px}
 .cat-stage{height:200px}
 .cat-subs button svg{opacity:.6;transform:none}
}
@media(prefers-reduced-motion:reduce){.cat-card,.cat-stage img{transition:none}.cat-card:hover{transform:none}}.systems .section-heading{display:flex;justify-content:space-between}
.cat-body{align-content:start;flex:1}
.cat-more{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:2px;padding:0;border:0;background:none;color:#8ab8ff;font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.cat-more svg{width:14px;height:14px;transition:transform .25s}
.cat-more:hover svg{transform:translateX(4px)}
@media(max-width:900px){.systems .section-heading{display:flex}}/* Even rhythm across cards: one-line rows, a fixed four-row list area and the
   "Весь раздел" link pinned to the same baseline in every card. */
.cat-body{display:flex;flex-direction:column;gap:10px;padding:4px 24px 22px}
.cat-body h3 button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cat-subs{min-height:calc(4 * 43px)}
.cat-subs li{border-bottom:1px solid rgba(255,255,255,.08)}
.cat-subs li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.cat-subs button{height:42px;min-height:0;padding:0}
.cat-subs button span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-more{margin-top:auto;padding-top:12px}/* Three rows + a quiet "+ Ещё N" that unfolds the rest in place. */
.cat-subs{min-height:calc(3 * 43px)}
.cat-extra{display:grid;grid-template-rows:0fr;margin-top:-10px;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.cat-extra>.cat-subs{min-height:0;overflow:hidden;border-top:0}
.cat-extra li{opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.cat-card.is-open .cat-extra{grid-template-rows:1fr}
.cat-card.is-open .cat-extra li{opacity:1;transform:none}
.cat-card.is-open .cat-extra li:nth-child(2){transition-delay:.05s}.cat-card.is-open .cat-extra li:nth-child(3){transition-delay:.1s}.cat-card.is-open .cat-extra li:nth-child(n+4){transition-delay:.15s}
.cat-more{display:inline-flex;align-items:center;gap:10px;min-height:24px;margin-top:auto;padding:12px 0 0;border:0;background:none;color:rgba(255,255,255,.55);font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .25s}
span.cat-more{visibility:hidden}
.cat-more:hover,.cat-more[aria-expanded=true]{color:#bfe3ff}
.cat-more i{position:relative;flex:none;width:11px;height:11px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cat-more i::before,.cat-more i::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:currentColor}
.cat-more i::after{transform:rotate(90deg)}
.cat-more[aria-expanded=true] i{transform:rotate(45deg)}
.cat-more svg{display:none}
@media(prefers-reduced-motion:reduce){.cat-extra,.cat-extra li,.cat-more i{transition:none}}/* Expand control: a sign only — small clear-glass circle, plus turns into ×. */
.cat-more{align-self:center;justify-content:center;width:34px;height:34px;min-height:0;margin-top:auto;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.04);box-shadow:inset 0 6px 10px -6px rgba(0,12,30,.6),inset 0 -1px 0 rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:border-color .3s,background .3s,color .3s}
.cat-body>.cat-more{margin-top:auto}
.cat-body>.cat-more{margin-top:auto;transform:translateY(4px)}
.cat-more:hover{border-color:rgba(160,198,255,.55);background:rgba(160,198,255,.1);color:#fff}
.cat-more[aria-expanded=true]{border-color:rgba(160,198,255,.5);color:#bfe3ff}
.cat-more:focus-visible{outline:2px solid #8ab8ff;outline-offset:3px}
.cat-more i{width:12px;height:12px}
.cat-more i::before,.cat-more i::after{top:5.5px;width:12px}
span.cat-more{visibility:hidden;border:0}/* No dividers: an airy list. Expand control = a thin glowing chevron. */
.cat-subs,.cat-subs li,.cat-subs li:last-child,.cat-extra>.cat-subs{border:0!important}
.cat-subs{min-height:calc(3 * 36px)}
.cat-subs button{height:36px}
.cat-body h3{margin-bottom:4px}
.cat-extra{margin-top:-10px}
.cat-more{width:44px;height:28px;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;color:#7fd8f5}
.cat-more i{width:18px;height:10px;transform:none;filter:drop-shadow(0 0 4px rgba(90,210,250,.9)) drop-shadow(0 0 10px rgba(47,182,216,.55));transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.cat-more i::before,.cat-more i::after{top:4px;width:11px;height:1.5px;border-radius:1px;background:currentColor}
.cat-more i::before{left:0;transform:rotate(35deg)}
.cat-more i::after{left:7px;transform:rotate(-35deg)}
.cat-more:hover i{filter:drop-shadow(0 0 5px rgba(120,225,255,1)) drop-shadow(0 0 14px rgba(47,182,216,.8))}
.cat-more[aria-expanded=true] i{transform:rotate(180deg)}
.cat-more[aria-expanded=false] i{animation:chev-breathe 2.8s ease-in-out infinite}
@keyframes chev-breathe{0%,100%{opacity:.65;translate:0 0}50%{opacity:1;translate:0 2px}}
@media(prefers-reduced-motion:reduce){.cat-more i{animation:none!important}}.cat-more svg{display:block!important;width:20px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 4px rgba(90,210,250,.9)) drop-shadow(0 0 10px rgba(47,182,216,.55));transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.cat-more:hover svg{filter:drop-shadow(0 0 5px rgba(120,225,255,1)) drop-shadow(0 0 14px rgba(47,182,216,.8))}
.cat-more[aria-expanded=true] svg{transform:rotate(180deg)}
.cat-more[aria-expanded=false] svg{animation:chev-breathe 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cat-more svg{animation:none!important}}
/* ---- Catalog shelf: one centred axis ------------------------------------ */
.systems .section-heading{flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.systems .section-heading .section-lead{max-width:520px;text-align:center}
.shelf-wrap{max-width:1240px;margin:0 auto}
.shelf{position:relative;padding:44px 24px 0;border:1px solid rgba(138,184,255,.14);border-radius:32px;background:radial-gradient(55% 70% at 50% 100%,rgba(47,182,216,.16),rgba(47,182,216,0) 72%),linear-gradient(180deg,#0f2446 0%,#0a1830 62%,#081426 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -44px rgba(0,8,20,.95);overflow:hidden}
/* the pool edge every product stands on */
.shelf::after{content:"";position:absolute;left:3%;right:3%;bottom:66px;height:1px;background:linear-gradient(90deg,rgba(127,216,245,0),rgba(127,216,245,.55) 20%,rgba(127,216,245,.55) 80%,rgba(127,216,245,0));box-shadow:0 0 12px rgba(47,182,216,.55);pointer-events:none}
.shelf-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr))}
.shelf-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:0;border:0;background:none;color:rgba(255,255,255,.55);cursor:pointer}
.shelf-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:180px}
/* spotlight from below the water line, like a pool lamp */
.shelf-stage::before{content:"";position:absolute;left:50%;bottom:-40px;width:150%;height:200px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 70%,rgba(60,200,245,.32),rgba(60,200,245,0) 70%);opacity:0;transition:opacity .5s;pointer-events:none}
.shelf-stage img{position:relative;z-index:1;display:block;width:auto;height:var(--h);max-width:88%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,6,16,.55)) brightness(.86) saturate(.9);-webkit-box-reflect:below 1px linear-gradient(transparent 70%,rgba(255,255,255,.12));transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s}
.shelf-name{display:flex;align-items:center;justify-content:center;height:66px;max-width:100%;padding:0 4px;font:500 17px/1.1 var(--display,'Cormorant Garamond',serif);white-space:nowrap;transition:color .3s}
.shelf-name::after{content:"";position:absolute;left:50%;bottom:14px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#7fd8f5;box-shadow:0 0 8px 2px rgba(60,200,245,.7);opacity:0;transition:opacity .3s}
.shelf-item:hover{color:rgba(255,255,255,.85)}
.shelf-item:hover .shelf-stage img{transform:translateY(-6px);filter:drop-shadow(0 14px 14px rgba(0,6,16,.5)) brightness(.96)}
.shelf-item[aria-selected=true]{color:#fff}
.shelf-item[aria-selected=true] .shelf-stage::before{opacity:1}
.shelf-item[aria-selected=true] .shelf-stage img{transform:translateY(-8px);filter:drop-shadow(0 16px 16px rgba(0,6,16,.5)) brightness(1.05) saturate(1.05)}
.shelf-item[aria-selected=true] .shelf-name::after{opacity:1}
.shelf-item:focus-visible{outline:none}
.shelf-item:focus-visible .shelf-name{outline:2px solid #8ab8ff;outline-offset:-10px;border-radius:12px}

/* Selected category, centred under the shelf */
.shelf-detail{min-height:236px;margin:40px auto 0;transition:opacity .18s ease,transform .18s ease}
.shelf-detail.is-swapping{opacity:0;transform:translateY(6px)}
.shelf-detail-inner{display:flex;flex-direction:column;align-items:center;max-width:860px;margin:0 auto;text-align:center;animation:panel-rise .5s cubic-bezier(.16,1,.3,1) both}
.shelf-detail h3{margin:0;font:500 clamp(30px,3vw,40px)/1.1 var(--display,'Cormorant Garamond',serif);color:#fff}
.shelf-detail p{max-width:560px;margin:12px 0 24px;color:rgba(255,255,255,.6);font-size:15.5px;line-height:1.6}
.shelf-subs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.shelf-subs button{min-height:42px;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 6px 10px -7px rgba(0,12,30,.6);color:rgba(255,255,255,.82);font:400 14px var(--sans);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.shelf-subs button:hover,.shelf-subs button:focus-visible{border-color:rgba(127,216,245,.55);background:rgba(47,182,216,.1);color:#fff}
.shelf-more{min-height:48px}

@media(max-width:1100px){.shelf-name{font-size:15px}}
@media(max-width:900px){
 .shelf{padding:32px 0 0;border-radius:24px}
 .shelf-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 12px}
 .shelf-row::-webkit-scrollbar{display:none}
 .shelf-item{flex:0 0 26%;scroll-snap-align:center}
 .shelf-stage{height:160px}
 .shelf-stage img{height:calc(var(--h) * .86)}
}
@media(max-width:560px){
 .shelf-item{flex-basis:36%}
 .shelf-stage{height:140px}
 .shelf-stage img{height:calc(var(--h) * .72)}
 .shelf-detail{margin-top:28px}
 .shelf-subs button{min-height:40px;padding:0 14px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.shelf-stage img,.shelf-detail,.shelf-detail-inner{transition:none;animation:none}}/* Help panel on the same centre axis as the shelf */
body .systems .catalog-help{flex-direction:column;align-items:center;justify-content:center;gap:20px;max-width:1240px;margin-left:auto;margin-right:auto;text-align:center}
body .systems .catalog-help .help-copy{align-items:center;max-width:620px}/* Blueprints finish while still in the lower third of the screen, so the
   finished drawing stays in view for the rest of the scroll. */
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){
 .blueprint .guides{animation-range:entry 0% entry 70%}
 .blueprint .d1{animation-range:entry 0% entry 90%}
 .blueprint .d2{animation-range:entry 25% cover 9%}
 .blueprint .d3{animation-range:entry 50% cover 15%}
 .blueprint .axis,.blueprint .tx,.blueprint .dots{animation-range:cover 4% cover 17%}
}}/* Services and the blueprint steps share the same night background, so their
   paddings read as one gap: keep it to one comfortable beat. */
body #services{padding-bottom:36px}
body .process{padding-top:44px}
@media(max-width:760px){body #services{padding-bottom:24px}body .process{padding-top:32px}}/* The base rule ".blueprint .d:not(.axis){animation:...}" is more specific and
   its shorthand resets animation-range, so the stroke ranges need this weight. */
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){
 .blueprint .d.d1:not(.axis){animation-range:entry 0% entry 90%}
 .blueprint .d.d2:not(.axis){animation-range:entry 25% cover 9%}
 .blueprint .d.d3:not(.axis){animation-range:entry 50% cover 15%}
}}
/* ---- Products: porcelain photo tiles on the night page ------------------ */
.shelf-detail-inner{max-width:1240px}
.shelf-products{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;margin:4px 0 30px}
.shelf-products-label{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.product-row{display:flex;justify-content:safe center;gap:14px;width:100%;margin:0;padding:4px 2px 12px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.product-row::-webkit-scrollbar{display:none}
.product-row>li{flex:none}
.product-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:184px;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.product-card:hover{transform:translateY(-4px)}
.product-card:focus-visible{outline:2px solid #8ab8ff;outline-offset:4px;border-radius:18px}
.product-photo{position:relative;display:block;width:100%;aspect-ratio:1;margin-bottom:6px;border-radius:18px;background:linear-gradient(180deg,#f3f6fa 0%,#e3eaf2 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 18px 30px -20px rgba(0,8,20,.9);overflow:hidden}
.product-photo img{display:block;width:100%;height:100%;padding:14px;object-fit:contain;mix-blend-mode:multiply;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-photo img{transform:scale(1.05)}
.product-badge{position:absolute;top:10px;left:10px;z-index:1;padding:4px 9px;border-radius:999px;background:#0b1a33;color:#ffd58a;font:500 10px var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.product-brand{font:500 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8ab8ff}
.product-name{display:-webkit-box;min-height:2.7em;overflow:hidden;font:500 14px/1.35 var(--sans);color:rgba(255,255,255,.9);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.product-stock{display:inline-flex;align-items:center;gap:7px;font:400 12.5px var(--sans);color:rgba(255,255,255,.55)}
.product-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:#4fd1a5;box-shadow:0 0 8px rgba(79,209,165,.8)}
.product-stock.is-low::before{background:#f3c969;box-shadow:0 0 8px rgba(243,201,105,.7)}
.product-stock.is-order::before{background:#8ab8ff;box-shadow:0 0 8px rgba(138,184,255,.7)}
/* inside drawers: a wrapping grid instead of one row */
.product-row--panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px;overflow:visible;margin:14px 0 26px}
.product-row--panel .product-card{width:100%}

/* Product window: gallery left, details right */
.panel.panel--product{width:min(1080px,calc(100vw - 48px))}
.panel--product #panel-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;margin-top:22px}
.pd-gallery{position:sticky;top:0;display:grid;gap:12px}
.pd-main{position:relative;aspect-ratio:1;border-radius:24px;background:linear-gradient(180deg,#f4f7fb 0%,#e2e9f2 100%);overflow:hidden}
.pd-main img{width:100%;height:100%;padding:28px;object-fit:contain;mix-blend-mode:multiply}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.pd-thumbs button{width:64px;height:64px;padding:0;border:1px solid transparent;border-radius:14px;background:linear-gradient(180deg,#f4f7fb,#e2e9f2);overflow:hidden;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.pd-thumbs button img{width:100%;height:100%;padding:6px;object-fit:contain;mix-blend-mode:multiply}
.pd-thumbs button:hover,.pd-thumbs button[aria-current]{opacity:1;border-color:#8ab8ff}
.pd-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pd-meta{display:flex;gap:16px;align-items:baseline;margin:0;font-size:13px;color:rgba(255,255,255,.45)!important}
.panel--product .pd-info .lead{margin:6px 0 4px;font-size:15.5px}
.pd-specs{width:100%;margin:8px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.pd-specs>div{display:grid;grid-template-columns:42% 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.45}
.pd-specs dt{color:rgba(255,255,255,.5)}
.pd-specs dd{margin:0;color:#fff}
.pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:14px}
.pd-price{font:500 22px var(--display,'Cormorant Garamond',serif);color:#fff}
@media(max-width:900px){.panel--product #panel-content{grid-template-columns:1fr;gap:24px}.pd-gallery{position:static}}
@media(max-width:560px){.product-card{width:150px}.pd-specs>div{grid-template-columns:1fr;gap:2px}}@media(max-width:700px){.panel.panel--product{width:100%;max-width:100%}.panel--product #panel-content{margin-top:14px}.pd-thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pd-thumbs button{flex:none;width:56px;height:56px}.pd-main img{padding:18px}}
.footer-col a{color:inherit;text-decoration:none;opacity:.75}.footer-col a:hover{opacity:1}
/* Real assortment: five categories on the shelf */
.shelf-row{grid-template-columns:repeat(5,minmax(0,1fr))}
.shelf-wrap{max-width:1080px}
.shelf{padding-left:40px;padding-right:40px}
.shelf-stage{height:200px}
.shelf-stage img{max-width:80%;filter:drop-shadow(0 10px 12px rgba(0,6,16,.6)) brightness(.92)}
.shelf-name{font-size:19px}@media(max-width:900px){.shelf{padding-left:0;padding-right:0}.shelf-name{font-size:16px}.shelf-item{flex-basis:34%}.shelf-stage{height:170px}}
@media(max-width:560px){.shelf-item{flex-basis:44%}.shelf-name{font-size:15px}}
/* Branded category art is already lit for the night scene. */
.shelf-stage img{filter:drop-shadow(0 10px 12px rgba(0,6,16,.6))}
.shelf-item:hover .shelf-stage img,.shelf-item[aria-current] .shelf-stage img{filter:drop-shadow(0 14px 16px rgba(0,6,16,.55)) brightness(1.06)}
/* ---- Product window: everything on one screen, no page scroll ---------- */
@media(min-width:901px){
 .panel.panel--product{width:min(1160px,calc(100vw - 48px));height:calc(100dvh - 48px);max-height:760px;display:flex;flex-direction:column;overflow:hidden;padding:20px 36px 28px}
 .panel--product h2#panel-title{flex:none;margin:4px 0 0;font-size:clamp(26px,2.4vw,34px);line-height:1.1;max-width:85%}
 .panel--product #panel-content{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:36px;margin-top:18px;align-items:stretch}
 .panel--product #panel-content>*{animation:none}
 .pd-gallery{position:static;display:flex;flex-direction:column;gap:10px;min-height:0}
 .pd-main{flex:1;min-height:0;aspect-ratio:auto}
 .pd-thumbs{flex:none;flex-wrap:nowrap}
 .pd-thumbs button{width:56px;height:56px}
 .pd-info{min-height:0;gap:10px;overflow:hidden}
 .pd-meta{font-size:12.5px}
 .pd-desc{min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
 .panel--product .pd-info .lead{margin:2px 0 0;font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
 .pd-desc.is-open{flex:1;overflow:auto;scrollbar-width:thin}
 .pd-desc.is-open .lead{display:block;-webkit-line-clamp:unset}
 .pd-desc-more{padding:0;border:0;background:none;color:#8ab8ff;font:500 13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
 .pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 0;border:0}
 .pd-specs>div{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);font-size:13.5px;line-height:1.35}
 .pd-specs dt{font-size:11.5px;letter-spacing:.02em}
 .pd-info:has(.pd-desc.is-open) .pd-specs{display:none}
 .pd-buy{margin-top:auto;padding-top:14px;width:100%;border-top:1px solid rgba(255,255,255,.08)}
 .panel--product .back-button{display:none}
}
/* "Подобрать оборудование": one lilac glass button everywhere — side padding and dark label */
body .catalog-help .btn{min-height:50px;padding:0 26px;gap:10px;color:#07162c}
body .catalog-help .btn svg{width:16px;height:16px}
body .catalog-help .btn{font-weight:600}

/* ---- Live blueprint drawing (JS-timed, replaces the scroll-linked one) ---- */
.blueprint.bp-live,.blueprint.bp-live *{animation:none!important}
.blueprint.bp-live .tx,.blueprint.bp-live .dots{opacity:1}
.blueprint.bp-live .axis{opacity:1}
.blueprint.bp-live .guides{opacity:.55}
.bp-tip{opacity:0;transition:opacity .25s;pointer-events:none}
.bp-tip-glow{fill:rgba(111,195,255,.35);filter:blur(2.5px)}
.bp-tip-core{fill:#e6f6ff}
.bp-stamp{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;padding:8px 2px 0;border-top:1px dashed rgba(169,189,216,.25);font:400 17px/1 "Caveat",var(--sans);color:rgba(169,189,216,.7)}
.bp-stamp b{font-weight:500;color:rgba(169,189,216,.55);transition:color .4s}
.bp-stamp.is-done b{color:#6fc3ff}
/* No glowing graphite tip: the line just draws itself. */
.bp-tip{display:none}

/* ---- Audit fixes ---- */
/* one label weight for every pill button (lilac ones were regular, glass ones semibold) */
body .btn{font-weight:600;letter-spacing:.01em}
/* the help button inherited an old underline on the catalog page */
body .catalog-help .btn{text-decoration:none}
/* footer: links and buttons share one size */
.footer-col li>a,.footer-col li>button{font-size:15px;line-height:1.4}
/* tools section on the same left edge as the sections below */
.tools .section-wrap{max-width:none}
/* product names: keep the distinguishing tail (capacity, size) visible on phones */
@media(max-width:760px){.product-name{-webkit-line-clamp:3;min-height:4.05em;font-size:13.5px}}
/* tool cards: action link pinned to the bottom in every card */
.tool-card{display:flex;flex-direction:column;align-items:flex-start}.tool-card em{margin-top:auto}

/* Phones: tools as compact rows — icon, title + one line, chevron; whole row is the button. */
@media(max-width:700px){
 .tool-grid{gap:10px;margin-top:24px}
 .tool-card{display:grid!important;grid-template-columns:40px 1fr 18px;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;min-height:0;padding:16px 18px;border-radius:18px}
 .tool-card .tool-ico{grid-row:1/3;width:34px;height:34px;margin:0}
 .tool-card strong{grid-column:2;font-size:21px}
 .tool-card span{grid-column:2;font-size:13.5px;line-height:1.4}
 .tool-card em{grid-column:3;grid-row:1/3;margin:0;padding:0;font-size:0;letter-spacing:0}
 .tool-card em svg{width:18px;height:18px}
}
/* catalog -> tools: one beat after the help block was removed */
body .tools{padding-top:40px}@media(max-width:700px){body .tools{padding-top:28px}}

/* ---- Every window fits one screen on desktop ---------------------------- */
@media(min-width:901px){
 /* category: two columns, no page scroll */
 .panel.panel--cat{width:min(1120px,calc(100vw - 48px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;padding:20px 36px 28px}
 .panel--cat h2#panel-title{flex:none;margin:4px 0 0;font-size:clamp(30px,2.8vw,40px)}
 .panel--cat #panel-content{flex:1;min-height:0;display:grid!important;grid-template-columns:minmax(0,380px) minmax(0,1fr);column-gap:40px;margin-top:16px}
 .panel--cat #panel-content>*{grid-column:auto!important;grid-row:auto!important}
 .cw-side{display:flex;flex-direction:column;gap:14px;min-height:0}
 .panel--cat .cw-side .cat-hero{position:static;flex:1;min-height:150px;max-height:300px;height:auto;margin:0}
 .panel--cat .cw-side .cat-hero img{max-height:80%}
 .panel--cat .cw-side .lead{margin:0;font-size:15px;line-height:1.55}
 .cw-actions{display:flex;flex-wrap:wrap;gap:10px}
 .cw-actions .btn{min-height:46px;padding:0 20px;text-decoration:none}
 .panel--cat .cat-siblings{display:flex;justify-content:space-between;gap:10px;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
 .panel--cat .cat-siblings button{display:inline-flex;gap:8px;align-items:center;padding:0;border:0;background:none;color:rgba(255,255,255,.65);font:500 13.5px var(--sans);cursor:pointer}
 .panel--cat .cat-siblings button:hover{color:#fff}
 .panel--cat .cat-siblings span{color:#8ab8ff;font-size:15px;margin:0}
 .cw-main{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(138,184,255,.25) transparent;padding-right:4px}
 .cw-main .cat-sub{margin:0 0 10px}
 .cw-main .cat-sub~.cat-sub{margin-top:20px}
 .cw-products{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
 .cw-products button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
 .cw-products button:hover{border-color:rgba(138,184,255,.45);background:rgba(138,184,255,.06)}
 .cw-thumb{flex:none;width:52px;height:52px;border-radius:10px;background:linear-gradient(180deg,#f3f6fa,#e3eaf2);overflow:hidden}
 .cw-thumb img{width:100%;height:100%;padding:5px;object-fit:contain;mix-blend-mode:multiply}
 .cw-text{display:flex;flex-direction:column;gap:3px;min-width:0}
 .cw-text b{display:-webkit-box;overflow:hidden;font:500 13.5px/1.3 var(--sans);-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .cw-text .product-stock{font-size:11.5px}
 .cw-subs{justify-content:flex-start;margin:0}
 .cw-subs button{min-height:36px;padding:0 14px;font-size:13.5px}
 .cw-main .cat-tips{margin:0}
 .cw-main .cat-tips li{padding:8px 0;font-size:14px}

 /* request form: tighter rhythm so it fits 720px screens */
 .panel .request-form{gap:12px}
 .panel .request-form textarea{min-height:84px;height:84px;resize:vertical}
 .panel .request-form input,.panel .request-form select{min-height:46px}
 .panel:not(.panel--wide):not(.panel--cat):not(.panel--product):not(.panel--chat) .lead{margin:10px 0 18px}
 /* construction calculator: a few px tighter */
 .panel--wide .tool-col{gap:16px}
}
@media(min-width:901px) and (max-height:760px){
 .panel{padding-top:16px;padding-bottom:22px}
 .panel h2#panel-title{font-size:30px}
}@media(min-width:901px){
 .panel--cat .cat-siblings{display:flex!important;grid-template-columns:none!important;align-items:center}
 .panel--cat .cat-siblings button{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;width:auto!important;min-height:0!important;padding:4px 0!important;border:0!important;background:none!important;white-space:nowrap;text-align:left}
 .panel--cat .cat-siblings button span{display:inline!important;margin:0!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important}
 .panel--cat .cw-side .cat-hero{display:flex;align-items:center;justify-content:center;padding:14px}
 .panel--cat .cw-side .cat-hero img{position:static;width:auto!important;height:auto!important;max-width:72%!important;max-height:100%!important;object-fit:contain}
}
@media(min-width:901px){.panel--cat .cw-side .cat-hero{flex:none!important;height:clamp(150px,calc(100dvh - 480px),300px)!important;min-height:0!important;max-height:none!important}}

/* "Как мы работаем": the same pencil sheets, five smaller steps */
body .process--work{padding-top:24px}
.process-steps--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 24px}
.process-steps--5 h3{font-size:24px}
.process-steps--5 p{font-size:14px}
.process-steps--5 .blueprint{margin-top:20px}
@media(max-width:1100px){.process-steps--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.process-steps--5{grid-template-columns:1fr}}/* New order: catalog → services → construction sheets → tools → work sheets → CTA */
body #services{padding-top:56px}
body .tools{padding-top:8px;padding-bottom:40px}
body .process--work{padding-top:72px}
@media(max-width:700px){body #services{padding-top:40px}body .tools{padding-top:0}body .process--work{padding-top:48px}}
/* ---- "Как мы работаем": pinned stage, one step per stretch of scroll ---- */
.process--work.is-staged{height:calc(100vh + 5 * 70vh);padding-top:0;padding-bottom:0}
.process--work.is-staged .section-wrap{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:78px;box-sizing:border-box}
.work-stage{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:center;margin-top:40px}
.work-nav{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.work-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:12px 0;border:0;background:none;color:rgba(255,255,255,.38);text-align:left;cursor:pointer;transition:color .35s}
.work-nav b{font:500 24px/1.1 var(--display,'Cormorant Garamond',serif)}
.work-nav-bar{position:relative;display:block;width:100%;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.work-nav-bar i{position:absolute;inset:0;background:#8ab8ff;transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
.work-nav li.is-past button{color:rgba(255,255,255,.62)}
.work-nav li.is-active button{color:#fff}
.work-nav button:hover{color:rgba(255,255,255,.85)}
.work-nav button:focus-visible{outline:2px solid #8ab8ff;outline-offset:4px;border-radius:4px}
.process--work.is-staged .process-steps{position:relative;display:block;margin:0;min-height:440px}
.process--work.is-staged .process-steps>li{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0;border:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.process--work.is-staged .process-steps>li.is-active{opacity:1;transform:none;pointer-events:auto}
.process--work.is-staged .process-steps>li h3{display:none}
.process--work.is-staged .process-steps>li p{max-width:520px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.72)}
.process--work.is-staged .blueprint{width:100%;max-width:640px;height:auto;margin-top:22px}
.process--work.is-staged .bp-stamp{max-width:640px}
@media(max-width:900px){
 .process--work.is-staged{height:calc(100svh + 5 * 60svh)}
 .process--work.is-staged .section-wrap{height:100svh;padding-top:70px}
 .work-stage{grid-template-columns:1fr;gap:18px;margin-top:20px}
 .work-nav{flex-direction:row;gap:8px}
 .work-nav li{flex:1;min-width:0}
 .work-nav button{gap:8px;padding:4px 0}
 .work-nav b{display:none}
 .work-nav-bar{height:3px;border-radius:2px}
 .process--work.is-staged .process-steps{min-height:min(440px,58svh)}
 .process--work.is-staged .process-steps>li h3{display:block;font-size:26px;margin:0 0 6px}
 .process--work.is-staged .process-steps>li p{font-size:15px}
}.process--work .work-nav li button{color:rgba(255,255,255,.38)}
.process--work .work-nav li.is-past button{color:rgba(255,255,255,.6)}
.process--work .work-nav li.is-active button{color:#fff}
.process--work .work-nav li.is-active b{font-weight:600}
@media(min-width:901px){
 .process--work.is-staged .process-steps>li h3{display:block;margin:0 0 8px;font-size:clamp(34px,3.2vw,46px);line-height:1.05;color:#fff}
}.process--work .work-nav li b{color:rgba(255,255,255,.38);transition:color .35s}
.process--work .work-nav li.is-past b{color:rgba(255,255,255,.62)!important}
.process--work .work-nav li.is-active b{color:#fff!important}
.process--work.is-staged .work-stage{align-items:start}
.process--work.is-staged .process-steps{min-height:540px}
.process--work.is-staged .process-steps>li{justify-content:flex-start}
.process--work.is-staged .work-nav{padding-top:8px}
@media(max-height:820px) and (min-width:901px){.process--work.is-staged .blueprint{max-width:520px}.process--work.is-staged .process-steps{min-height:460px}}
.process--work .work-nav button[data-state=now] b{font-weight:600}
/* Step list: one hairline with a glowing marker instead of bars */
.process--work .work-nav{position:relative;gap:0;padding:0 0 0 26px}
.process--work .work-nav::before{content:"";position:absolute;left:4px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,rgba(138,184,255,0),rgba(138,184,255,.28) 12%,rgba(138,184,255,.28) 88%,rgba(138,184,255,0))}
.process--work .work-nav::after{content:"";position:absolute;left:1px;top:var(--work-y,30px);width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#bfe3ff;box-shadow:0 0 0 4px rgba(111,195,255,.15),0 0 14px 2px rgba(111,195,255,.75)}
.process--work .work-nav button{padding:14px 0;gap:0}
.process--work .work-nav b{font-size:24px;letter-spacing:.005em}
.process--work .work-nav button[data-state=now] b{font-weight:500}
.work-nav-bar{display:none}
@media(max-width:900px){
 .process--work .work-nav{flex-direction:row;justify-content:space-between;padding:0;height:20px}
 .process--work .work-nav::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(138,184,255,.1),rgba(138,184,255,.3),rgba(138,184,255,.1))}
 .process--work .work-nav::after{top:50%;left:var(--work-x,0px)}
 .process--work .work-nav li{flex:none}
 .process--work .work-nav button{width:auto;padding:0;height:20px}
 .process--work .work-nav button::before{content:"";display:block;width:5px;height:5px;margin:7.5px;border-radius:50%;background:rgba(138,184,255,.35)}
}
/* Construction pencil drawing the current stroke */
.bp-pencil{opacity:0;transition:opacity .2s;pointer-events:none;filter:drop-shadow(1.5px 2.5px 1.5px rgba(0,6,16,.55))}
.bp-pencil.is-on{opacity:1}
.bp-pencil .pc-lead{fill:#2a2f38}
.bp-pencil .pc-wood{fill:#e9c896}
.bp-pencil .pc-body{fill:#f2b632}
.bp-pencil .pc-edge{stroke:rgba(120,72,0,.35);stroke-width:.6;fill:none}
.bp-pencil .pc-band{fill:#c9ced6}
.bp-pencil .pc-cap{fill:#e46a5d}

/* Work stage: smaller sheet with air around it */
@media(min-width:901px){
 .process--work.is-staged .work-stage{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:72px}
 .process--work.is-staged .blueprint{max-width:480px;margin:30px 0 0 24px;overflow:visible}
 .process--work.is-staged .bp-stamp{max-width:504px;margin-top:22px}
 .process--work.is-staged .process-steps{min-height:520px}
}
@media(min-width:901px) and (max-height:820px){.process--work.is-staged .blueprint{max-width:400px;margin-top:20px}.process--work.is-staged .process-steps{min-height:440px}}
@media(max-width:900px){.process--work.is-staged .blueprint{width:88%;margin:18px auto 0;display:block;overflow:visible}}
/* pencil removed at the client's request */
.bp-pencil{display:none!important}

/* each step gets a full screen of scroll */
.process--work.is-staged{height:calc(100vh + 5 * 95vh)}@media(max-width:900px){.process--work.is-staged{height:calc(100svh + 5 * 80svh)}}

/* Dash drawing uses pathLength=1, which breaks with non-scaling strokes on
   enlarged sheets (only part of each line got drawn). Use normal scaling and
   compensate the width per sheet size. */
.blueprint .ln *,.blueprint .guides line{vector-effect:none!important}
.blueprint .ln *{stroke-width:1.2}
.blueprint .dim,.blueprint .hatch{stroke-width:.85}
.blueprint .axis{stroke-width:.7}
.blueprint .flow{stroke-width:1.3}
.process--work.is-staged .blueprint .ln *{stroke-width:.9}
.process--work.is-staged .blueprint .dim,.process--work.is-staged .blueprint .hatch{stroke-width:.65}
.process--work.is-staged .blueprint .axis{stroke-width:.55}
/* No side list of steps on desktop: the stage is one centred column */
@media(min-width:901px){
 .process--work.is-staged .work-nav{display:none}
 .process--work.is-staged .work-stage{display:block;max-width:640px;margin:36px auto 0}
 .process--work.is-staged .section-heading-copy{text-align:center}
 .process--work.is-staged .process-steps>li{align-items:center;text-align:center}
 .process--work.is-staged .process-steps>li p{margin-left:auto;margin-right:auto}
 .process--work.is-staged .blueprint{margin:28px auto 0}
 .process--work.is-staged .bp-stamp{width:100%;max-width:504px;margin-left:auto;margin-right:auto}
}
@media(min-width:901px){.process--work.is-staged .work-stage{width:100%;align-self:center}.process--work.is-staged .process-steps{width:100%}}

/* One headline at a time: section name becomes a small eyebrow, the step is
   the headline; text on the left, drawing on the right. */
@media(min-width:901px){
 .process--work.is-staged .section-wrap{max-width:1180px;margin:0 auto}
 .process--work.is-staged .section-heading-copy{text-align:left;width:100%}
 .process--work.is-staged .section-title{margin:0;font:500 11px/1 var(--sans)!important;letter-spacing:.24em;text-transform:uppercase;color:#8ab8ff!important}
 .process--work.is-staged .work-stage{max-width:none;margin:18px 0 0}
 .process--work.is-staged .process-steps{min-height:440px}
 .process--work.is-staged .process-steps>li{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-rows:auto auto 1fr;column-gap:72px;align-content:center;align-items:start;text-align:left}
 .process--work.is-staged .process-steps>li h3{grid-column:1;grid-row:1;align-self:end;margin:0;font-size:clamp(44px,4.4vw,64px)!important;line-height:1.02}
 .process--work.is-staged .process-steps>li>p:not(.bp-stamp){grid-column:1;grid-row:2;margin:18px 0 0!important;max-width:420px;font-size:17px}
 .process--work.is-staged .blueprint{grid-column:2;grid-row:1/3;max-width:520px;margin:0!important;align-self:center}
 .process--work.is-staged .bp-stamp{grid-column:2;grid-row:3;max-width:none!important;margin:16px 0 0!important}
}
@media(min-width:901px) and (max-height:820px){.process--work.is-staged .blueprint{max-width:440px}.process--work.is-staged .process-steps>li{grid-template-columns:minmax(0,1fr) minmax(0,440px)}}
@media(min-width:901px){.process--work.is-staged .work-stage{margin-top:0}.process--work.is-staged .process-steps>li{align-content:start}.process--work.is-staged .process-steps>li h3{align-self:start;margin-top:20px!important}.process--work.is-staged .process-steps{min-height:420px}}

@media(min-width:901px){.process--work.is-staged .process-steps>li{grid-template-rows:auto auto 1fr auto!important}.process--work.is-staged .blueprint{grid-row:1/4!important;align-self:start!important}.process--work.is-staged .bp-stamp{grid-row:4!important}}

@media(min-width:901px){.process--work.is-staged .process-steps>li{grid-template-rows:auto auto auto 1fr!important}.process--work.is-staged .bp-stamp{align-self:start}}

@media(max-width:900px){.process--work.is-staged .section-title{margin:0;font:500 11px/1 var(--sans)!important;letter-spacing:.24em;text-transform:uppercase;color:#8ab8ff!important}.process--work.is-staged .process-steps>li h3{font-size:34px!important;margin-top:6px}}

/* Pink pencil for the flamingo and swimwear */
.blueprint .ln .pink,.blueprint .ln2 .pink{stroke:#f59bc4}
/* Drawing board: the staged sheets lie on graph paper */
.process--work.is-staged .blueprint{box-sizing:border-box;padding:18px 20px;border:1px solid rgba(138,184,255,.18);border-radius:6px;background-color:rgba(10,26,52,.6);background-image:linear-gradient(rgba(138,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.07) 1px,transparent 1px),linear-gradient(rgba(138,184,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.035) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px;box-shadow:0 30px 60px -30px rgba(0,6,16,.9),inset 0 0 0 4px rgba(10,24,48,.4)}
/* ---- The family scene comes alive once it is drawn ---- */
.bp-family .fig{transform-box:fill-box}
.bp-family.is-alive .fig-jump{animation:fam-jump 3.4s cubic-bezier(.45,0,.55,1) infinite}
.bp-family.is-alive .fig-splash{transform-origin:50% 100%;animation:fam-splash 3.4s ease-out infinite}
.bp-family.is-alive .fig-swim{animation:fam-swim 9s ease-in-out infinite}
.bp-family.is-alive .fig-stroke{transform-origin:0% 50%;animation:fam-stroke 1.1s ease-in-out infinite}
.bp-family.is-alive .fig-float{transform-origin:50% 90%;animation:fam-float 3.2s ease-in-out infinite}
.bp-family.is-alive .fig-umbrella{transform-origin:50% 100%;animation:fam-sway 4.5s ease-in-out infinite}
.bp-family.is-alive .fig-wave{animation:fam-wave 2.8s ease-in-out infinite}
.bp-family.is-alive .fig-sun{transform-origin:50% 50%;animation:fam-spin 24s linear infinite}
.bp-family.is-alive .fig-arm{transform-origin:0% 100%;animation:fam-wave-hand 2.6s ease-in-out infinite}
@keyframes fam-jump{0%{transform:translate(-44px,36px);opacity:0}6%{opacity:1}12%{transform:translate(-40px,30px)}48%{transform:translate(0,0)}80%{transform:translate(6px,54px);opacity:1}86%{transform:translate(7px,62px);opacity:0}100%{transform:translate(-44px,36px);opacity:0}}
@keyframes fam-splash{0%,76%{opacity:0;transform:scale(.3)}82%{opacity:1;transform:scale(1.15)}96%,100%{opacity:0;transform:scale(1.3)}}
@keyframes fam-swim{0%,100%{transform:translateX(0)}50%{transform:translateX(-58px)}}
@keyframes fam-stroke{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
@keyframes fam-float{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-2.5px) rotate(-2.5deg)}70%{transform:translateY(1.5px) rotate(2deg)}}
@keyframes fam-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes fam-wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-12px)}}
@keyframes fam-spin{to{transform:rotate(360deg)}}
@keyframes fam-wave-hand{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-18deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-14deg)}}
@media(prefers-reduced-motion:reduce){.bp-family .fig{animation:none!important}}
/* override the blanket 'animation:none' on live sheets */
.blueprint.bp-live.bp-family.is-alive .fig-jump{animation:fam-jump 3.4s cubic-bezier(.45,0,.55,1) infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-splash{animation:fam-splash 3.4s ease-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-swim{animation:fam-swim 9s ease-in-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-stroke{animation:fam-stroke 1.1s ease-in-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-float{animation:fam-float 3.2s ease-in-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-umbrella{animation:fam-sway 4.5s ease-in-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-wave{animation:fam-wave 2.8s ease-in-out infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-sun{animation:fam-spin 24s linear infinite!important}
.blueprint.bp-live.bp-family.is-alive .fig-arm{animation:fam-wave-hand 2.6s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){.blueprint.bp-live.bp-family.is-alive .fig{animation:none!important}}

/* ---- "Как мы работаем": engineer's desk ---------------------------------- */
.process--work.is-staged .section-wrap{justify-content:center;padding-top:72px;padding-bottom:16px}
.desk{position:relative;width:100%;height:min(76vh,700px);margin-top:16px;border-radius:22px;overflow:hidden;
 background:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 9px),radial-gradient(120% 90% at 30% 20%,#13233b 0%,#0b1626 55%,#08111e 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 140px rgba(0,0,0,.55),0 50px 90px -50px #000}
.desk-sheet{position:absolute;left:6%;right:13%;top:10%;bottom:7%;transform:rotate(-.35deg);
 background-color:#0f2547;background-image:linear-gradient(rgba(138,184,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.09) 1px,transparent 1px),linear-gradient(rgba(138,184,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.04) 1px,transparent 1px);
 background-size:50px 50px,50px 50px,10px 10px,10px 10px;border:1px solid rgba(138,184,255,.22);box-shadow:0 36px 60px -24px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.04)}
.desk-sheet::before{content:"";position:absolute;inset:14px;border:1px solid rgba(169,200,240,.28);pointer-events:none}
.tape{position:absolute;width:86px;height:24px;background:linear-gradient(180deg,rgba(236,226,196,.22),rgba(236,226,196,.14));box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:3}
.tape-a{top:-10px;left:-24px;transform:rotate(-34deg)}.tape-b{top:-10px;right:-26px;transform:rotate(32deg)}.tape-c{bottom:-10px;left:-22px;transform:rotate(30deg)}
.desk-ruler{position:absolute;top:2.6%;left:9%;width:66%;height:30px;transform:rotate(-.8deg);border-radius:3px;
 background:linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px) 0 0/50px 12px repeat-x,linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px) 0 0/10px 7px repeat-x,linear-gradient(180deg,rgba(190,220,255,.16),rgba(150,190,240,.08));
 border:1px solid rgba(190,220,255,.3);box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.desk-square{position:absolute;right:1.5%;bottom:5%;width:min(210px,16vw);transform:rotate(-8deg)}
.desk-square path:nth-child(-n+2){fill:rgba(140,200,255,.06);stroke:rgba(170,215,255,.38);stroke-width:1.2}
.desk-square path:nth-child(3){fill:none;stroke:rgba(170,215,255,.45);stroke-width:1}
.desk-eraser{position:absolute;right:4%;top:15%;width:74px;height:28px;border-radius:5px;transform:rotate(16deg);background:linear-gradient(90deg,#f1e7e2 0 58%,#3e78c9 58% 100%);box-shadow:0 8px 12px -6px rgba(0,0,0,.6);opacity:.85}
.desk-clip{position:absolute;left:calc(6% + 70px);top:5.2%;width:22px;transform:rotate(8deg);z-index:4}
.desk-clip path{fill:none;stroke:#b9c6d6;stroke-width:3;stroke-linecap:round}

/* the stage lives on the sheet now */
.process--work.is-staged .desk .work-stage{position:absolute;inset:0;margin:0!important;max-width:none!important;width:auto!important;display:block!important}
.process--work.is-staged .desk .process-steps{position:absolute!important;inset:0;min-height:0!important;width:auto!important}
.process--work.is-staged .desk .process-steps>li{position:absolute!important;inset:40px 40px 34px 44px!important;display:grid!important;grid-template-columns:minmax(0,30%) minmax(0,1fr)!important;grid-template-rows:1fr!important;column-gap:28px!important;align-items:center!important;text-align:left!important}
.process--work.is-staged .desk .process-steps>li h3{display:none!important}
.process--work.is-staged .desk .desk-note{grid-column:1;grid-row:1;align-self:center;max-width:none!important;margin:0 0 70px!important;font:500 clamp(22px,2vw,30px)/1.25 "Caveat",var(--sans)!important;color:#bcd6f5!important;transform:rotate(-2deg)}
.process--work.is-staged .desk .desk-note::after{content:"";display:block;width:120px;height:46px;margin:10px 0 0 40%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' fill='none' stroke='%23bcd6f5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8 C30 40 70 42 110 26'/%3E%3Cpath d='M98 18 L111 26 L97 33'/%3E%3C/svg%3E");opacity:.8}
.process--work.is-staged .desk .blueprint{grid-column:2;grid-row:1;width:100%!important;max-width:none!important;max-height:calc(100% - 20px);margin:0 0 40px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;align-self:center!important}
.process--work.is-staged .desk .bp-stamp{position:absolute;left:0;bottom:0;margin:0!important;padding:0;border:0;max-width:none!important;width:auto!important}
.process--work.is-staged .desk .bp-stamp span{display:none}
.process--work.is-staged .desk .bp-stamp b{font-size:20px}
.title-block{position:absolute;right:-26px;bottom:-20px;display:grid;grid-template-columns:repeat(3,auto);width:min(340px,40%);border:1px solid rgba(169,200,240,.5);background:rgba(15,37,71,.94);font-family:var(--sans);color:#d6e6fb;z-index:2}
.title-block>*{padding:6px 10px;border-right:1px solid rgba(169,200,240,.35);border-bottom:1px solid rgba(169,200,240,.35)}
.title-block .tb-brand{grid-column:1/-1;font:600 13px/1 var(--sans);letter-spacing:.32em;color:#fff}
.title-block .tb-brand span{color:#8ab8ff}
.title-block .tb-name{grid-column:1/-1;font:500 22px/1.1 var(--display,'Cormorant Garamond',serif);color:#fff}
.title-block small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(169,200,240,.7)}
.title-block b{font-weight:500;font-size:13px}
.title-block .tb-wide{grid-column:1/-1;border-bottom:0}
@media(max-width:900px){
 .desk{height:min(72svh,640px);margin-top:12px;border-radius:16px}
 .desk-sheet{left:3.5%;right:3.5%;top:9%;bottom:4%;transform:none}
 .desk-ruler{left:5%;width:84%;height:22px;top:2.4%}
 .desk-square,.desk-eraser,.desk-clip{display:none}
 .process--work.is-staged .desk .process-steps>li{inset:26px 22px 20px 22px!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr auto!important;row-gap:8px}
 .process--work.is-staged .desk .desk-note{grid-row:1;margin:0!important;font-size:22px!important}
 .process--work.is-staged .desk .desk-note::after{display:none}
 .process--work.is-staged .desk .blueprint{grid-column:1;grid-row:2;margin:0!important}
 .title-block{position:static;grid-row:3;width:100%;grid-template-columns:repeat(3,1fr)}
 .title-block .tb-name{font-size:18px}
 .process--work.is-staged .desk .bp-stamp{position:absolute;left:auto;right:0;top:0;bottom:auto}
}.process--work.is-staged .desk .work-stage,.process--work.is-staged .desk .process-steps{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;height:auto!important;min-height:0!important;margin:0!important;transform:none!important}
.process--work.is-staged .desk .blueprint{grid-row:1!important;grid-column:2!important;align-self:center!important;height:auto!important}
@media(max-width:900px){.process--work.is-staged .desk .blueprint{grid-row:2!important;grid-column:1!important}}
/* abspos boxes honour align-self/justify-self in modern engines: stretch them */
.process--work.is-staged .desk .work-stage,.process--work.is-staged .desk .process-steps,.process--work.is-staged .desk .process-steps>li{align-self:stretch!important;justify-self:stretch!important}
/* desk layout v2: note top-left, drawing in the free area, a strip reserved for the title block */
.process--work.is-staged .desk .process-steps>li{grid-template-rows:minmax(0,1fr) 128px!important;align-items:start!important}
.process--work.is-staged .desk .desk-note{grid-row:1!important;align-self:start!important;margin:18px 0 0!important}
.process--work.is-staged .desk .desk-note::after{margin:12px 0 0 30%}
.process--work.is-staged .desk .blueprint{grid-row:1!important;align-self:center!important;max-height:100%!important;margin:0!important}
.process--work.is-staged .desk .bp-stamp,.process--work.is-staged .desk .work-nav{display:none!important}
.title-block{right:-24px;bottom:-14px}
@media(max-width:900px){
 .process--work.is-staged .desk .process-steps>li{grid-template-rows:auto minmax(0,1fr) auto!important}
 .process--work.is-staged .desk .desk-note{margin:0!important}
 .process--work.is-staged .desk .blueprint{grid-row:2!important}
}/* desk without its own dark surface: the sheet lies straight on the page background; no eraser, no tape */
.desk{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.desk-eraser,.tape{display:none!important}
.desk-sheet{left:4%;right:9%;top:9%;bottom:4%}
.desk-ruler{left:7%}
.desk-square{right:0;bottom:2%}
@media(max-width:900px){.desk-sheet{left:0;right:0;top:8%;bottom:0}.desk-ruler{left:3%;width:88%}}/* no title block; the small handwritten "Лист N из 6 · готово" line returns at the bottom of the sheet */
.title-block,.desk-square{display:none!important}
.process--work.is-staged .desk .process-steps>li{grid-template-rows:minmax(0,1fr) 44px!important}
.process--work.is-staged .desk .bp-stamp{display:flex!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;margin:0!important;padding-top:8px!important;border-top:1px dashed rgba(169,189,216,.25)!important}
.process--work.is-staged .desk .bp-stamp span{display:inline!important}
.process--work.is-staged .desk .bp-stamp b{font-size:17px}
@media(max-width:900px){.process--work.is-staged .desk .process-steps>li{grid-template-rows:auto minmax(0,1fr) 40px!important}}/* readability pass */
.nw{white-space:nowrap}
.product-brand{font-size:11.5px}
.bp-stamp b{color:rgba(169,189,216,.78)}
.bp-stamp span{color:rgba(169,189,216,.8)}
/* ---- Comfort & clarity pass ---- */
/* small caps labels: a touch larger, calmer tracking */
.service-link,.tool-card em,.cat-more,.shelf-products-label,.cp-count,.process--work.is-staged .section-title,.eyebrow,.panel .eyebrow,.footer-col h3,.tool-summary-label{font-size:12px!important;letter-spacing:.16em!important}
/* category names on the shelf: clearer, still quiet */
.shelf-item{color:rgba(255,255,255,.78)}
.shelf-item:hover,.shelf-item[aria-current]{color:#fff}
/* phones: the shelf visibly continues */
@media(max-width:900px){
 .shelf,.cp-shelf{position:relative}
 .shelf-row{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)}
 .shelf::before{content:"листайте →";position:absolute;right:14px;top:12px;z-index:2;font:400 16px/1 "Caveat",var(--sans);color:rgba(169,200,240,.75);pointer-events:none}
}
/* product cards: an obvious next step */
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.product-cta{font:500 12.5px var(--sans);color:#a6c8ff;white-space:nowrap;opacity:.85;transition:opacity .2s,transform .2s}
.product-card:hover .product-cta,.product-card:focus-visible .product-cta{opacity:1;transform:translateX(2px)}
@media(max-width:560px){.product-foot{flex-direction:column;align-items:flex-start;gap:4px}}
/* reassurance under the request button */
.form-assure{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}
.desk-ruler,.desk-clip{display:none!important}

/* ---- Desk v3: centred sheet drawing, family doodles around it ---- */
.desk-doodles{position:absolute;inset:0;pointer-events:none;z-index:1}
.doodle{position:absolute;overflow:visible}
.doodle path,.doodle circle{fill:none;stroke:#c9d8ee;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}
.doodle .acc{stroke:#6fc3ff}.doodle .pink{stroke:#f59bc4}.doodle .dim{stroke:#8ea3c2;stroke-dasharray:3 3}
.doodle-sun{top:5%;right:4%;width:6%}
.doodle-beach{left:3%;bottom:9%;width:17%}
.doodle-pool{right:2.5%;bottom:9%;width:33%}
@media(prefers-reduced-motion:reduce){.doodle .fig{animation:none!important}}
@media(min-width:901px){
 .process--work.is-staged .desk .process-steps>li{display:block!important}
 .process--work.is-staged .desk .desk-note{position:absolute;left:0;top:8px;width:26%;margin:0!important;font-size:clamp(20px,1.7vw,26px)!important}
 .process--work.is-staged .desk .desk-note::after{margin:10px 0 0 34%}
 .process--work.is-staged .desk .blueprint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(46%,520px)!important;max-height:68%!important}
}
@media(max-width:900px){
 .doodle-sun{width:12%;top:3%;right:4%}
 .doodle-beach{width:30%;left:2%;bottom:8%}
 .doodle-pool{width:58%;right:1%;bottom:8%}
 .process--work.is-staged .desk .process-steps>li{grid-template-rows:auto minmax(0,1fr) 120px 30px!important}
}.desk-doodles .doodle{height:auto!important;max-width:none!important}
.desk-doodles .doodle-sun{width:6%!important}.desk-doodles .doodle-beach{width:17%!important}.desk-doodles .doodle-pool{width:33%!important}
.doodle path,.doodle circle{stroke-width:1.4}
@media(min-width:901px){.process--work.is-staged .desk .blueprint{width:min(52%,600px)!important}}
@media(max-width:900px){.desk-doodles .doodle-sun{width:12%!important}.desk-doodles .doodle-beach{width:30%!important}.desk-doodles .doodle-pool{width:58%!important}}/* filter per element drops zero-width strokes (poles, deck lines): filter the whole doodle */
.doodle path,.doodle circle{filter:none!important}
.desk-doodles .doodle{filter:url(#pencil)}
.desk-doodles .doodle-beach,.desk-doodles .doodle-pool{bottom:13%}
@media(max-width:900px){.desk-doodles .doodle-beach,.desk-doodles .doodle-pool{bottom:11%}}
@media(min-width:901px){.desk-doodles .doodle-pool{width:29%!important;bottom:11%}.desk-doodles .doodle-beach{bottom:11%}.process--work.is-staged .desk .blueprint{top:41%;max-height:62%!important}}

.desk-doodles .fig-jump,.desk-doodles .fig-splash,.desk-doodles .fig-trail{display:none!important}
/* swimmer stays in place and splashes */
.desk-doodles .fig-swim{animation:none!important}
.desk-doodles .fig-stroke{animation:fam-splash-arm 1.4s ease-in-out infinite!important;transform-origin:0% 50%}
.desk-doodles .fig-drops{transform-box:fill-box;transform-origin:50% 100%;animation:fam-drops 1.4s ease-out infinite}
@keyframes fam-splash-arm{0%,100%{transform:rotate(0)}40%{transform:rotate(-34deg)}60%{transform:rotate(-10deg)}}
@keyframes fam-drops{0%,30%{opacity:0;transform:translateY(3px) scale(.6)}50%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-4px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.desk-doodles .fig-stroke,.desk-doodles .fig-drops{animation:none!important}}
.desk-doodles .fig-swim{transform:translateX(-52px)}

.desk-doodles .fig-swim{display:none!important}
.desk-doodles .fig-float{translate:-70px 0}

.bp-stamp span{display:none!important}.bp-stamp{justify-content:flex-end}

@media(min-width:901px){.process--work.is-staged .desk .blueprint{width:min(60%,720px)!important;max-height:70%!important;left:57%;top:43%}}
@media(max-width:900px){.process--work.is-staged .desk .blueprint{width:100%!important}}

.process--work.is-staged .desk .bp-stamp span,.process .bp-stamp span{display:none!important}.process--work.is-staged .desk .bp-stamp{justify-content:flex-end!important}

@media(min-width:901px){.process--work.is-staged .desk .blueprint{width:min(70%,860px)!important;max-height:74%!important;left:50%;top:47%}}

/* ---- "От идеи до первого заплыва": symmetric zig-zag along a water pipe ---- */
.process--zig .zig-head{text-align:center;max-width:760px;margin:0 auto}
.process--zig .zig-head .section-lead{margin:16px auto 0;max-width:560px;color:rgba(255,255,255,.62);font-size:16px;line-height:1.6}
.process--zig .process-steps{position:relative;display:grid!important;grid-template-columns:1fr!important;row-gap:clamp(56px,8vh,96px)!important;max-width:1120px;margin:64px auto 0!important;padding:0}
.zig-pipe{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:rgba(138,184,255,.12);overflow:hidden}
.zig-water{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--fill,0));background:linear-gradient(180deg,#2fb6d8,#6fc3ff);box-shadow:0 0 14px rgba(47,182,216,.7)}
.process--zig .process-steps>li{position:relative;display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;column-gap:120px;align-items:start;padding:0!important;border:0!important;opacity:.35;transform:translateY(24px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.process--zig .process-steps>li.is-on{opacity:1;transform:none}
.process--zig .process-steps>li::before{display:none!important}
.zig-node{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#0b1a33;border:2px solid rgba(138,184,255,.35);transition:border-color .4s,box-shadow .4s,background .4s;z-index:1}
.process--zig li.is-on .zig-node{border-color:#6fc3ff;background:#123257;box-shadow:0 0 0 6px rgba(47,182,216,.12),0 0 18px rgba(47,182,216,.6)}
.process--zig .process-steps>li h3{grid-column:1;grid-row:2;align-self:end;margin:0!important;font-size:clamp(30px,3vw,42px)!important;text-align:right}
.process--zig .process-steps>li>p:not(.bp-stamp){grid-column:1;grid-row:3;margin:14px 0 0 auto!important;max-width:360px!important;font-size:16px!important;text-align:right}
.process--zig .process-steps>li .blueprint{grid-column:2;grid-row:1/5;margin:0!important;padding:16px 18px;box-sizing:border-box;border:1px solid rgba(138,184,255,.2);border-radius:6px;background-color:rgba(15,37,71,.7);background-image:linear-gradient(rgba(138,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.07) 1px,transparent 1px);background-size:32px 32px;box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.process--zig .process-steps>li .bp-stamp{grid-column:1;grid-row:4;justify-content:flex-end;border:0;margin-top:10px}
.process--zig .process-steps>li:nth-child(odd of li) h3,.process--zig .process-steps>li:nth-child(odd of li)>p:not(.bp-stamp){grid-column:2;text-align:left;margin-left:0!important}
.process--zig .process-steps>li:nth-child(odd of li) .blueprint{grid-column:1}
.process--zig .process-steps>li:nth-child(odd of li) .bp-stamp{grid-column:2;justify-content:flex-start}
@media(max-width:900px){
 .process--zig .process-steps{margin-top:40px!important;row-gap:48px!important}
 .zig-pipe{left:9px}
 .zig-node{left:9px;top:8px}
 .process--zig .process-steps>li{grid-template-columns:1fr;grid-template-rows:none;column-gap:0;padding-left:36px!important}
 .process--zig .process-steps>li h3,.process--zig .process-steps>li>p:not(.bp-stamp),.process--zig .process-steps>li .blueprint,.process--zig .process-steps>li .bp-stamp{grid-column:1!important;grid-row:auto!important;text-align:left!important;margin-left:0!important}
 .process--zig .process-steps>li h3{font-size:28px!important}
 .process--zig .process-steps>li .blueprint{margin-top:16px!important}
 .process--zig .process-steps>li .bp-stamp{justify-content:flex-end!important}
}
@media(min-width:901px){.process--zig .process-steps>li{grid-template-rows:1fr auto auto 1fr}}
.process--zig .process-steps>li .bp-stamp{display:none!important}

body .tools{padding-top:56px}@media(max-width:700px){body .tools{padding-top:36px}}

/* Step number: big outlined numeral with a handwritten "этап" */
.step-num{display:flex;align-items:flex-end;gap:10px;line-height:1;pointer-events:none}
.step-num small{order:0;align-self:flex-start;margin-top:6px;font:500 22px/1 "Caveat",var(--sans);color:#8ab8ff;transform:rotate(-8deg)}
.step-num b{font:500 clamp(64px,6vw,92px)/.8 var(--display,'Cormorant Garamond',serif);color:transparent;-webkit-text-stroke:1.3px rgba(201,216,238,.85);letter-spacing:.02em;position:relative}
.step-num b::after{content:"";position:absolute;left:-6px;right:-8px;bottom:-6px;height:10px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none' fill='none' stroke='%236fc3ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 6 C25 2 50 9 98 4'/%3E%3C/svg%3E")}
.step-num i{font:400 18px/1 "Caveat",var(--sans);font-style:normal;color:rgba(169,200,240,.6);margin-bottom:4px}
@media(min-width:901px){
 .process--work.is-staged .desk .step-num{position:absolute;left:0;top:4px}
 .process--work.is-staged .desk .desk-note{top:clamp(96px,10vh,120px)!important}
}
@media(max-width:900px){
 .process--work.is-staged .desk .step-num{grid-row:1;margin-bottom:6px}
 .process--work.is-staged .desk .process-steps>li{grid-template-rows:auto auto minmax(0,1fr) 120px 30px!important}
 .process--work.is-staged .desk .desk-note{grid-row:2!important}
 .process--work.is-staged .desk .blueprint{grid-row:3!important}
 .step-num b{font-size:56px}
}
@media(min-width:901px){.process--work.is-staged .desk .desk-note{width:21%!important;font-size:clamp(19px,1.5vw,24px)!important}.process--work.is-staged .desk .blueprint{left:56%!important;width:min(64%,800px)!important}}

/* Variant for comparison (?desk=open): grid straight on the page, no sheet frame */
.desk-sheet{transform:none;border:0;box-shadow:none;background-color:transparent;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 55%,transparent 100%)}
.desk-sheet::before{display:none}.desk-sheet{-webkit-mask-image:none!important;mask-image:none!important;background:none!important}
.desk-sheet::after{content:"";position:absolute;inset:-4%;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(138,184,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.09) 1px,transparent 1px),linear-gradient(rgba(138,184,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(138,184,255,.04) 1px,transparent 1px);background-size:50px 50px,50px 50px,10px 10px,10px 10px;-webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 50%,transparent 100%)}
.desk-sheet>*{position:relative;z-index:1}
.desk-sheet>.work-stage,.desk-sheet>.desk-doodles{position:absolute}
/* ---- Fewer boxes: open shelf, open tools ---- */
.shelf{border:0!important;box-shadow:none!important;background:radial-gradient(55% 60% at 50% 100%,rgba(47,182,216,.14),rgba(47,182,216,0) 72%)!important;border-radius:0!important}
.tool-grid{gap:0!important}
.tool-card{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;padding:8px 40px 8px!important;min-height:0!important}
.tool-card+.tool-card{border-left:1px solid rgba(138,184,255,.16)!important}
.tool-card:first-child{padding-left:0!important}
.tool-card:hover{transform:none!important}
.tool-card:hover strong{color:#bfe3ff}
@media(max-width:900px){
 .tool-card,.tool-card:first-child{padding:18px 0!important}
 .tool-card+.tool-card{border-left:0!important;border-top:1px solid rgba(138,184,255,.16)!important}
}
@media(max-width:700px){.tool-card em{font-size:0!important;letter-spacing:0!important}}
.shelf{overflow:visible!important}

/* ---- One heading system: left, big title, lead underneath ---- */
.systems .section-heading{align-items:flex-start!important;text-align:left!important;flex-direction:column!important;gap:14px!important}
.systems .section-heading .section-lead,.systems .section-heading p{text-align:left!important;margin:0!important;max-width:560px}
.systems h2,#systems-title{text-align:left!important}
body .services-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
body .services-head .section-lead{text-align:left!important;margin:0!important;max-width:560px}
.process--work.is-staged .section-title{font:500 clamp(40px,4.4vw,64px)/1.05 var(--display,'Cormorant Garamond',serif)!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important}
.process--work.is-staged .section-wrap{padding-top:96px}
.process--work.is-staged .desk{margin-top:8px}
/* catalog link instead of a lonely pill */
.shelf-all{justify-content:flex-start!important;margin-top:18px!important}
.shelf-all-link{display:inline-flex;align-items:center;gap:10px;color:#a6c8ff;font:500 15px var(--sans);text-decoration:none;border-bottom:1px solid rgba(166,200,255,.35);padding-bottom:4px;transition:color .2s,border-color .2s}
.shelf-all-link span{transition:transform .25s}
.shelf-all-link:hover{color:#fff;border-color:#fff}
.shelf-all-link:hover span{transform:translateX(4px)}
/* assistant steps aside while scrolling */
.assistant-fab{transition:opacity .3s,transform .3s,border-color .3s}
.assistant-fab.is-away{opacity:0;transform:translateY(12px);pointer-events:none}
/* shelf aligned to the same content edge as the headings */
.systems .shelf-wrap{max-width:none!important;margin:0!important}
.systems .shelf{padding:12px 0 0!important}
.systems .shelf-all{padding-left:0!important}

.systems .shelf{background:radial-gradient(50% 45% at 50% 70%,rgba(47,182,216,.13),rgba(47,182,216,0) 100%)!important}
/* footer: three columns now, no empty fourth */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr!important}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr!important}}
/* lilac buttons: same semibold label as the glass ones */
.intro-cta,.btn-light,.footer-cta,.cta-actions .btn{font-weight:600!important}
/* hero lead readable over the palms */
.hero-copy p,.intro p,.pool-intro p{text-shadow:0 1px 14px rgba(3,10,22,.85),0 0 2px rgba(3,10,22,.6)}
.intro-copy p{text-shadow:0 1px 14px rgba(3,10,22,.85),0 0 2px rgba(3,10,22,.6)}
/* phones: "Узнать цену" always reachable in the product sheet */
@media(max-width:900px){
 .panel--product .pd-buy{position:sticky;bottom:-28px;z-index:3;margin:16px -20px -28px!important;padding:14px 20px 18px!important;width:auto!important;background:linear-gradient(180deg,rgba(10,24,48,.85),#0a1830 40%);border-top:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between}
 .panel--product .pd-buy .btn{flex:1;justify-content:center}
 .panel--product .pd-price{font-size:18px}
}
@media(max-width:900px){.panel--product .pd-buy{background:#0b1a33!important;box-shadow:0 -18px 22px -6px #0b1a33;left:0;right:0}}

.tool-big{gap:6px!important}.tool-big b{line-height:1!important}.tool-big b span{font-size:.42em!important;margin-left:4px;vertical-align:.9em}
.tool-form input[type=number]{-moz-appearance:textfield}.tool-form input::-webkit-inner-spin-button,.tool-form input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.tool-big b span{vertical-align:baseline!important;font-size:.5em!important;color:rgba(255,255,255,.8)}
/* prices */
.product-price{font:600 17px/1.2 var(--sans);color:#fff;letter-spacing:.01em}
.product-row--grid .product-price{font-size:18px}
.pd-price{font:600 26px var(--sans)!important;color:#fff}
.cw-text .product-price{font-size:13.5px}
.cw-meta{display:flex;gap:12px;align-items:center}

.shelf-from{display:block;margin-top:-14px;font:400 12.5px var(--sans);color:rgba(169,200,240,.7);text-align:center}.cp-shelf .shelf-from{display:none}
.cp-group-head h2 small{font:400 15px var(--sans);color:rgba(169,200,240,.7);margin-left:10px}

/* ---- Desk layout, final (overrides all earlier attempts) ---- */
@media(min-width:901px){
 html body .process--work.is-staged .desk .process-steps>li{display:block!important}
 html body .process--work.is-staged .desk .step-num{position:absolute!important;left:0;top:0;margin:0}
 html body .process--work.is-staged .desk .desk-note{position:absolute!important;left:0!important;top:110px!important;width:19%!important;max-width:none!important;margin:0!important;font-size:clamp(18px,1.45vw,23px)!important;transform:rotate(-2deg)}
 html body .process--work.is-staged .desk .desk-note::after{margin:10px 0 0 30%!important;width:96px;height:38px}
 html body .process--work.is-staged .desk .blueprint{position:absolute!important;left:50%!important;top:46%!important;transform:translate(-50%,-50%)!important;width:56%!important;max-width:none!important;height:auto!important;max-height:72%!important;margin:0!important}
}
html body .process--work.is-staged .section-wrap{max-width:1360px!important;margin:0 auto!important}
/* bigger centred drawing */
@media(min-width:901px){
 html body .process--work.is-staged .section-wrap{padding-top:84px!important}
 html body .process--work.is-staged .desk{height:calc(100vh - 190px)!important;max-height:820px}
 html body .process--work.is-staged .desk .desk-note{width:16%!important;font-size:clamp(17px,1.3vw,22px)!important}
 html body .process--work.is-staged .desk .blueprint{width:64%!important;max-height:84%!important;top:47%!important}
 html body .desk-doodles .doodle-pool{width:22%!important}
 html body .desk-doodles .doodle-beach{width:14%!important}
}/* keep the handwritten note clear of the beach doodle on any height */
@media(min-width:901px){
 html body .process--work.is-staged .desk .step-num b{font-size:min(5.4vw,8.5vh)!important}
 html body .process--work.is-staged .desk .desk-note{top:min(100px,13vh)!important;font-size:min(1.3vw,2.5vh)!important;line-height:1.3!important}
 html body .process--work.is-staged .desk .desk-note::after{height:min(38px,4.5vh)!important;margin-top:6px!important}
 html body .desk-doodles .doodle-beach{width:12%!important;bottom:9%!important}
}
/* ---- One link style + even section rhythm ---- */
.tool-card em{font:500 15px var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:#a6c8ff!important;border-bottom:1px solid rgba(166,200,255,.35);padding-bottom:3px!important;width:max-content}
.tool-card:hover em{color:#fff!important;border-color:#fff}
@media(max-width:700px){.tool-card em{border:0;font-size:0!important}}
@media(min-width:901px){
 body .systems{padding-bottom:40px!important}
 body #services{padding-top:96px!important;padding-bottom:40px!important}
 body .tools{padding-top:96px!important;padding-bottom:24px!important}
}@media(min-width:901px){
 html body section.systems{padding-bottom:24px!important}
 html body section#services{padding-top:88px!important;padding-bottom:24px!important}
 html body section.tools{padding-top:88px!important}
}
html body #services .service-link{font:500 15px var(--sans)!important;letter-spacing:0!important;text-transform:none!important}/* note sits right next to the drawing, facing it */
@media(min-width:901px){
 html body .process--work.is-staged .desk .desk-note{left:auto!important;right:calc(82% + 18px)!important;top:47%!important;width:15%!important;transform:translateY(-50%) rotate(-2deg)!important;text-align:right!important}
 html body .process--work.is-staged .desk .desk-note::after{margin:8px 0 0 auto!important}
 html body .process--work.is-staged .desk .step-num{left:auto!important;right:calc(82% + 18px)!important;top:calc(47% - 150px)!important;justify-content:flex-end}
}/* number + note travel together, right next to the drawing */
@media(min-width:901px){
 html body .process--work.is-staged .desk .desk-side{position:absolute;right:calc(82% + 18px);top:47%;transform:translateY(-50%);width:16%;display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
 html body .process--work.is-staged .desk .desk-side .step-num,html body .process--work.is-staged .desk .desk-side .desk-note{position:static!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important}
 html body .process--work.is-staged .desk .desk-side .desk-note{transform:rotate(-2deg)!important}
}
@media(max-width:900px){.process--work.is-staged .desk .desk-side{grid-row:1;display:flex;flex-direction:column;gap:6px}.process--work.is-staged .desk .process-steps>li{grid-template-rows:auto minmax(0,1fr) 120px 30px!important}.process--work.is-staged .desk .blueprint{grid-row:2!important}}/* what happens after the request */
.cta-steps{display:flex;flex-direction:column;gap:12px;margin:22px 0 30px;padding:0;list-style:none;max-width:460px}
.cta-steps li{display:flex;align-items:center;gap:14px;font-size:15.5px;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(3,10,22,.7)}
.cta-steps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(166,200,255,.5);background:rgba(10,24,48,.55);font:600 13px var(--sans);color:#bfe3ff}
/* ---- Placeholders until real data arrives ---- */
.header-phone{margin-right:6px;color:#fff;font:500 14px var(--sans);text-decoration:none;white-space:nowrap}
.header-phone:hover{color:#bfe3ff}
.header-tg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
@media(max-width:1100px){.header-phone{display:none}}
.proof{padding:96px 4% 24px;background:var(--navy-900);color:#fff}
.proof .section-wrap{max-width:1360px;margin:0 auto}
.proof .section-title{font:500 clamp(40px,4.4vw,64px)/1.05 var(--display,'Cormorant Garamond',serif);margin:0}
.proof .section-lead{margin:14px 0 0;color:rgba(255,255,255,.62)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.proof-card{margin:0}
.proof-photo{display:grid;place-items:center;aspect-ratio:4/3;border-radius:20px;border:1px dashed rgba(138,184,255,.35);background:rgba(255,255,255,.03)}
.proof-photo span{font:400 20px "Caveat",var(--sans);color:rgba(169,200,240,.6)}
.proof-card figcaption{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.proof-card b{font:500 22px var(--display,'Cormorant Garamond',serif)}
.proof-card figcaption span{font-size:14px;color:rgba(255,255,255,.55)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.review-card{margin:0;padding:24px 28px;border-left:2px solid rgba(138,184,255,.4);background:rgba(255,255,255,.02)}
.review-card p{margin:0 0 16px;font:400 italic 20px/1.45 var(--display,'Cormorant Garamond',serif);color:rgba(255,255,255,.75)}
.review-card footer{display:flex;flex-direction:column;gap:2px;font-size:14px}
.review-card footer span{color:rgba(255,255,255,.5)}
@media(max-width:900px){.proof-grid,.review-grid{grid-template-columns:1fr}.proof{padding-top:64px}}
.pd-terms{width:100%;margin:6px 0 0!important;font-size:13px!important;color:rgba(255,255,255,.55)!important}
.proof-photo{border:0!important;overflow:hidden;background:#0e2242!important}.proof-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.proof-card:hover .proof-photo img{transform:scale(1.04)}
.proof-cta{margin-top:28px}.proof-cta .shelf-all-link{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;padding:0 0 4px}

/* skip the 3D story */
.story-skip{position:absolute;right:4%;bottom:28px;z-index:5;color:rgba(255,255,255,.7);font:500 13.5px var(--sans);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.story-skip:hover{color:#fff;border-color:#fff}
/* phone action bar */
.mobile-cta{display:none}
@media(max-width:700px){
 .mobile-cta{position:fixed;left:12px;right:76px;bottom:16px;z-index:39;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;transform:translateY(120%);opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s}
 .mobile-cta.is-on{transform:none;opacity:1}
 .mobile-cta a,.mobile-cta button{display:grid;place-items:center;height:52px;border-radius:999px;font:600 14.5px var(--sans);text-decoration:none;cursor:pointer}
 .mobile-cta a{border:1px solid rgba(255,255,255,.22);background:rgba(12,30,58,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff}
 .mobile-cta button{border:1px solid rgba(190,215,255,.6);background:linear-gradient(180deg,rgba(160,198,255,.92),rgba(127,176,247,.88));color:#07162c}
 body.modal-open .mobile-cta{opacity:0;pointer-events:none}
 /* the fixed bar must not cover the last footer lines (privacy link, copyright) */
 html body .site-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 .mobile-cta{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 .story-skip{bottom:18px;right:16px}
}
.story-skip{right:auto!important;left:4%!important}@media(min-width:1440px){.story-skip{left:57px!important}}
/* cross-sell in the product window */
.pd-also{width:100%;margin-top:6px}
.pd-also-label{display:block;margin-bottom:8px;font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8ab8ff}
.pd-also-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pd-also-row button{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);color:#fff;text-align:left;cursor:pointer;min-width:0;transition:border-color .2s}
.pd-also-row button:hover{border-color:rgba(138,184,255,.45)}
.pd-also-row .cw-thumb{width:40px;height:40px;flex:none;border-radius:8px;background:linear-gradient(180deg,#f3f6fa,#e3eaf2);overflow:hidden}
.pd-also-row .cw-thumb img{width:100%;height:100%;padding:3px;object-fit:contain;mix-blend-mode:multiply}
.pd-also-row b{display:-webkit-box;overflow:hidden;font:500 12px/1.25 var(--sans);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pd-also-row i{display:block;margin-top:2px;font:600 12.5px var(--sans);font-style:normal;color:#bfe3ff}
@media(max-width:700px){.pd-also-row{grid-template-columns:1fr}}
.search-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media(min-width:901px){.pd-desc{flex:none!important;min-height:4.8em}.pd-also-row{grid-template-columns:repeat(3,minmax(0,1fr))}.panel--product .pd-info{overflow-y:auto!important;scrollbar-width:thin}}

@media(min-width:901px){.panel--product .pd-buy{position:sticky;bottom:0;z-index:2;margin-top:auto;background:#0c1d3a;box-shadow:0 -16px 18px -4px #0c1d3a;padding-top:12px!important;padding-bottom:2px}.panel--product .pd-specs>div{padding:7px 12px}}

@media(min-width:901px){.panel--product .pd-buy{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;row-gap:0;flex-wrap:nowrap}.panel--product .pd-buy .pd-terms{margin:0!important;font-size:12.5px!important;line-height:1.35;width:auto}.panel--product .pd-buy .btn{margin:0!important}.panel--product .pd-price{font-size:24px!important;white-space:nowrap}}

.pd-also-row b{-webkit-line-clamp:3!important;font-size:11.5px!important}

@media(max-width:900px){.panel--product .pd-buy{display:grid!important;grid-template-columns:auto 1fr;grid-template-areas:'price btn' 'terms terms';align-items:center;column-gap:14px;row-gap:4px;padding:10px 20px 14px!important}.panel--product .pd-price{grid-area:price;font-size:22px!important}.panel--product .pd-buy .btn{grid-area:btn;min-height:46px;margin:0!important}.panel--product .pd-terms{grid-area:terms;margin:0!important;font-size:11.5px!important}}

@media(max-width:900px){.panel--product .pd-buy{width:calc(100% + 40px)!important;margin:12px -20px -28px!important;box-sizing:border-box}}

.menu-list a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;color:#fff;font:500 17px var(--sans);text-decoration:none}.menu-list svg{width:16px;height:16px;fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.6;display:block!important}
.menu-contact{display:flex;flex-direction:column;gap:14px;margin-top:22px}.menu-contact .btn{justify-content:center;text-decoration:none}.menu-phone{color:#fff;font:600 20px var(--sans);text-decoration:none}.menu-tg{color:#a6c8ff;font:500 15px var(--sans);text-decoration:none}

.form-consent{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5)}.form-consent a{color:rgba(166,200,255,.85)}.footer-bottom a{color:inherit}

.panel .form-consent{font-size:12.5px!important;color:rgba(255,255,255,.5)!important}

.pd-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.pd-share{padding:0;border:0;background:none;color:#a6c8ff;font:500 13.5px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media(min-width:901px){.panel--product .back-button{display:inline-flex!important}}

/* Order form: the item being bought */
html body .order-item{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"pic name name" "pic qty total";gap:6px 14px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);margin-bottom:6px}
html body .order-item .cw-thumb{grid-area:pic;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#eef2f7;display:grid;place-items:center}
html body .order-item .cw-thumb img{width:100%;height:100%;object-fit:contain}
.order-name{grid-area:name;display:flex;gap:12px;align-items:baseline;justify-content:space-between;min-width:0}
.order-name b{font:500 14.5px/1.3 var(--sans);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-name .pd-share{flex:none;font-size:12.5px}
.order-qty{grid-area:qty;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.18);border-radius:999px;width:max-content}
.order-qty button{width:34px;height:32px;border:0;background:none;color:#fff;font-size:18px;cursor:pointer;border-radius:999px}
.order-qty button:hover{background:rgba(255,255,255,.08)}
html body .order-qty input{width:34px;height:32px;padding:0;border:0;background:none;color:#fff;text-align:center;font:500 15px var(--sans);-moz-appearance:textfield;box-shadow:none}
.order-qty input::-webkit-inner-spin-button,.order-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.order-total{grid-area:total;justify-self:end;font:600 18px var(--sans);color:#fff;white-space:nowrap}html body .order-qty input,html body .order-qty button{min-height:0!important;height:40px}
html body .order-qty button{width:40px}
.order-name b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Service / construction panels: every line is a tappable topic, not dead text */
html body .info-list li{padding:0}
html body .info-list button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:14px 4px;border:0;background:none;color:#fff;text-align:left;cursor:pointer;transition:background .2s,padding .25s}
.info-list button span{display:grid;gap:3px;min-width:0}
.info-list button b{font:500 15.5px/1.3 var(--sans)}
.info-list button small{font:400 13px/1.4 var(--sans);color:rgba(255,255,255,.6)}
.info-list button svg{flex:none;width:18px;height:18px;color:#a6c8ff;transition:transform .25s}
.info-list button:hover{background:rgba(255,255,255,.04);padding-inline:10px}
.info-list button:hover svg{transform:translateX(3px)}
/* Forms: bot trap, error marks, sent confirmation */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
html body [aria-invalid="true"]{border-color:#ff9b8f!important;box-shadow:0 0 0 3px rgba(255,155,143,.18)!important}
html body .form-status{color:#ffc2b8}
.form-done{display:grid;justify-items:center;gap:12px;text-align:center;padding:28px 8px 8px}
.form-done-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(127,176,247,.14);border:1px solid rgba(166,200,255,.45)}
.form-done-mark svg{width:30px;height:30px;fill:none;stroke:#a6c8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:done-tick .6s .15s ease-out forwards}
@keyframes done-tick{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.form-done-mark svg{animation:none;stroke-dashoffset:0}}
.form-done h3{margin:6px 0 0;font:500 30px/1.15 var(--serif,"Cormorant Garamond",serif);color:#fff}
.form-done p{margin:0;max-width:34ch;color:rgba(255,255,255,.75)}
.form-done .form-done-item{color:#fff;font-weight:500}
.form-done .btn{margin-top:10px;min-width:160px}
/* ---- Device pass 2026-10-12: no sideways page scroll, finger-sized links ---- */
/* The scene is cover-cropped wider than the viewport on purpose; clip never creates a
   scroll container, so the sticky scroll stage keeps working. */
html,body{overflow-x:clip;max-width:100%}
img,video,canvas,svg{max-width:100%}
.scene-fit img,.scene-fit canvas{max-width:none}
@media (pointer:coarse){
 footer li>a,footer li>button,.cp-crumbs a,.cp-group-head a,.story-skip,.shelf-all-link,
 li>button,label a,.consent a{display:inline-flex;align-items:center;min-height:44px}
}
/* Bottom quick-action bar: columns may shrink below the label width on 360-430px phones */
.mobile-cta{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
.mobile-cta a,.mobile-cta button{min-width:0;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:440px){.mobile-cta a,.mobile-cta button{font-size:13.5px;padding:0 8px}}
@media (max-width:380px){.mobile-cta{left:10px;right:70px;gap:6px}.mobile-cta a,.mobile-cta button{font-size:13px}}
/* Scrolled header: content passing underneath must not show through the logo and links */
.site-header.is-scrolled{background-color:rgba(5,14,30,.95)}
/* Logo: the V is the hero letter — larger than the rest, same baseline, no change to line height */
.wm-word span{font-size:1.32em;line-height:0;display:inline-block;vertical-align:-.02em;margin:0 .02em}

/* Smart search bar (akvora-api-v1.js): text + photo + link, shared by the search panel and the catalog page */
.smart-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin:20px 0 8px}
.smart-search-field{display:flex;align-items:center;gap:12px;min-width:0;height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.06);transition:border-color .2s,background .2s}
.smart-search-field:focus-within{border-color:rgba(160,198,255,.85);background:rgba(255,255,255,.09)}
.smart-search-field svg{flex:none;width:20px;height:20px;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.8}
.smart-search-field input{flex:1;min-width:0;border:0;background:none;color:#fff;font:400 16px var(--sans);outline:none}
.smart-search-field input::placeholder{color:rgba(255,255,255,.45)}
.smart-search-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font:500 14px var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.smart-search-btn:hover,.smart-search-btn:focus-within,.smart-search-btn:focus-visible{border-color:rgba(160,198,255,.85);background:rgba(160,198,255,.14);color:#fff}
.smart-search-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.smart-search-link{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.smart-search-link[hidden]{display:none}
.smart-search-link input{min-width:0;height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font:400 15px var(--sans)}
@media (max-width:560px){.smart-search-btn span{display:none}.smart-search-btn{padding:0 12px}}

/* Styled dropdown (enhanceSelect in akvora-ui-v30.js) — replaces the system <select> menu */
.nice-select{position:relative;width:100%;text-transform:none;letter-spacing:normal;font-weight:400;color:#fff} /* сбрасываем то, что наследуется от подписи поля (.request-form label: заглавные, разрядка) */
.nice-select-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:12px 16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:16px;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.nice-select-btn:hover{border-color:rgba(160,198,255,.5);background:rgba(255,255,255,.08)}
.nice-select-btn:focus-visible,.nice-select-btn[aria-expanded=true]{outline:none;border-color:var(--blue-soft,#8ab8ff);box-shadow:0 0 0 1px var(--blue-soft,#8ab8ff)}
.nice-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nice-select-btn svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .25s}
.nice-select-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.nice-select-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);max-height:300px;margin:0;padding:6px;overflow:auto;list-style:none;border:1px solid rgba(138,184,255,.22);border-radius:16px;background:rgba(10,24,48,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,6,16,.6),inset 0 1px 0 rgba(255,255,255,.06);scrollbar-width:thin;scrollbar-color:rgba(138,184,255,.3) transparent;outline:none;animation:nice-select-in .18s cubic-bezier(.16,1,.3,1)}
.nice-select.is-up .nice-select-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}
.nice-select-list li{position:relative;padding:10px 14px 10px 36px;border-radius:10px;color:rgba(255,255,255,.82);font:400 15px/1.35 var(--sans);cursor:pointer;transition:background .12s,color .12s}
.nice-select-list li.is-active{background:rgba(160,198,255,.14);color:#fff}
.nice-select-list li[aria-selected=true]{color:#fff;font-weight:500}
.nice-select-list li[aria-selected=true]::before{content:"";position:absolute;left:14px;top:50%;width:11px;height:6px;margin-top:-5px;border:solid var(--blue-soft,#8ab8ff);border-width:0 0 2px 2px;transform:rotate(-45deg)}
@keyframes nice-select-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.nice-select.is-up .nice-select-list{animation-name:nice-select-in-up}
@keyframes nice-select-in-up{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nice-select-list{animation:none}.nice-select-btn svg{transition:none}}
/* compact pill for the catalog sort */
.nice-select--chip{width:auto}
.nice-select--chip .nice-select-btn{min-height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.04);font-size:13.5px}
.nice-select--chip .nice-select-list{right:auto;left:0;min-width:220px}
.nice-select--chip .nice-select-list li{font-size:14px}
.panel .request-form .nice-select-btn{min-height:46px}

.cp-sort .nice-select-value{display:block} /* .cp-sort span{display:none} прятал подпись «Сортировка» — но не текст кнопки */

/* Закрытое окно не показываем никогда: вариант .panel--product задаёт display:flex, и без этого правила
   закрытый <dialog> оставался видимым под каталогом (свой display перебивает правило браузера). */
.panel:not([open]){display:none!important}

/* Photos with the white studio background cut out (backend/scripts/make-thumbs.py): the product stands on a dark
   glass tile with a soft pool-light glow, like the brand shelf art — no white squares on the night palette. */
.product-photo.is-cutout,.pd-main.is-cutout,.pd-thumbs .is-cutout,.cw-thumb.is-cutout{background:radial-gradient(ellipse 72% 52% at 50% 74%,rgba(86,160,235,.32),rgba(86,160,235,0) 70%),linear-gradient(180deg,#183454 0%,#0e2340 100%);box-shadow:inset 0 0 0 1px rgba(138,184,255,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.product-photo.is-cutout img,.pd-main.is-cutout img,.pd-thumbs .is-cutout img,.cw-thumb.is-cutout img{mix-blend-mode:normal;filter:drop-shadow(0 16px 18px rgba(0,6,16,.55)) drop-shadow(0 2px 3px rgba(0,6,16,.35))}
.product-card:hover .product-photo.is-cutout{background:radial-gradient(ellipse 72% 52% at 50% 74%,rgba(110,180,245,.42),rgba(110,180,245,0) 70%),linear-gradient(180deg,#1b3a5e 0%,#102645 100%)}
/* remaining light tiles (drawings, material swatches, non-white shots) — muted instead of glaring white */
.product-photo:not(.is-cutout),.pd-main:not(.is-cutout),.pd-thumbs button:not(.is-cutout){background:linear-gradient(180deg,#e3e9f0 0%,#cdd7e2 100%)}
/* ---- Корзина (akvora-cart-v1.js): значок в шапке, «В корзину» в окне товара, окно корзины и оформление */
.header-cart{position:relative}
.header-cart svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#2f7cf6;color:#fff;font:600 11px/18px var(--sans);text-align:center;box-shadow:0 0 0 2px rgba(6,19,37,.85);animation:cart-bump .35s ease-out}
.cart-count[hidden]{display:none}
@keyframes cart-bump{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cart-count{animation:none}}
/* окно товара: цена · условия · количество · «В корзину»; пометка «под заказ» и статус — строкой ниже */
@media(min-width:901px){html body .panel--product .pd-buy{grid-template-columns:auto 1fr auto auto;grid-template-areas:'price terms qty btn' 'note note note note' 'status status status status'}
 html body .panel--product .pd-buy .pd-price{grid-area:price}html body .panel--product .pd-buy .pd-terms{grid-area:terms}html body .panel--product .pd-buy .btn{grid-area:btn}}
@media(max-width:900px){html body .panel--product .pd-buy{grid-template-columns:auto 1fr;grid-template-areas:'price price' 'qty btn' 'terms terms' 'note note' 'status status'}}
.pd-qty{grid-area:qty}.pd-order-note{grid-area:note;margin:6px 0 0!important;font-size:12.5px!important;color:#f3c26b!important}
.pd-cart-status{grid-area:status;margin:6px 0 0!important;font-size:13px!important;color:#9fd3a8!important}.pd-cart-status[hidden]{display:none}
/* окно корзины */
.panel.panel--cart{width:min(640px,calc(100vw - 32px))}
.cart-lines{display:grid;gap:8px;margin:18px 0 0}
html body .cart-line{grid-template-columns:56px minmax(0,1fr) auto 36px;grid-template-areas:'pic name name rm' 'pic note note rm' 'pic qty total rm';margin:0}
html body .order-item .cw-thumb.is-cutout{background:radial-gradient(ellipse 72% 52% at 50% 74%,rgba(86,160,235,.32),rgba(86,160,235,0) 70%),linear-gradient(180deg,#183454 0%,#0e2340 100%)}
.cart-line-note{grid-area:note;font-size:12.5px;color:#f3c26b}
.cart-remove{grid-area:rm;align-self:start;width:36px;height:36px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.55);cursor:pointer;display:grid;place-items:center}
.cart-remove:hover{background:rgba(255,255,255,.08);color:#fff}
.cart-remove svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cart-line .order-qty button:disabled,.cart-line input:disabled{opacity:.45;cursor:default}
.cart-sum{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:20px 0 6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:15px}
.cart-total{font:600 26px var(--sans);color:#fff;white-space:nowrap}
.cart .form-assure{margin:0 0 16px}
.cart-go{width:100%;justify-content:center}
.cart-status{margin-top:10px!important}
.checkout-form .back-button{margin-top:4px}
@media(max-width:560px){html body .cart-line{grid-template-columns:48px minmax(0,1fr) auto 32px}html body .cart-line .cw-thumb{width:48px;height:48px}.cart-total{font-size:22px}}
.cart-lines{padding:0;list-style:none}
/* окно товара с количеством: «доставка и оплата» — строкой под ценой, а не узкой колонкой */
@media(min-width:901px){html body .panel--product .pd-buy{grid-template-columns:auto 1fr auto auto;grid-template-areas:'price . qty btn' 'terms terms terms terms' 'note note note note' 'status status status status'}html body .panel--product .pd-buy .pd-terms{margin-top:6px!important}}
@media(max-width:700px){.panel.panel--cart{width:100%;max-width:100%}}
@media(max-width:560px){.cart-line .order-name{flex-direction:column;align-items:flex-start;gap:2px}.cart-line .order-name b{-webkit-line-clamp:3}}
/* ---- Кабинет покупателя (akvora-account-v1.js) */
.header-account svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.header-account.is-in::after{content:'';position:absolute;top:9px;right:8px;width:8px;height:8px;border-radius:50%;background:#5fd38d;box-shadow:0 0 0 2px rgba(6,19,37,.85)}
.header-account{position:relative}
.account-tabs{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px}
.account-tabs button{padding:8px 18px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.7);font:500 14px var(--sans);cursor:pointer}
.account-tabs button[aria-selected=true]{background:rgba(255,255,255,.12);color:#fff}
.account .lead{margin:14px 0 18px}
.account-orders{display:grid;gap:8px;margin:12px 0 22px;padding:0;list-style:none}
.account-orders li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04)}
.account-order-no{font:600 15px var(--sans);color:#fff}.account-order-sum{justify-self:end;font:600 16px var(--sans);color:#fff;white-space:nowrap}
.account-order-date,.account-order-status{font-size:13px;color:rgba(255,255,255,.6)}.account-order-status{justify-self:end;text-align:right}
.account-orders .account-empty,.account-orders .account-loading{display:block;color:rgba(255,255,255,.65);font-size:14.5px}