/* =========================================================
   ЦВЕТА И ШРИФТЫ САЙТА
   Хотите поменять цвет — меняйте значения здесь, и он
   изменится на всём сайте сразу.
   ========================================================= */
:root{
  --bg:#EEF4F5;        /* светлый «лёд» — фон страницы */
  --surface:#FFFFFF;   /* фон карточек */
  --water:#123E4E;     /* глубокая байкальская вода — главный цвет */
  --water-soft:#1D5568;
  --venge:#3A2B24;     /* цвет венге — как сами изделия */
  --sand:#D9CDB7;      /* песок — вторая часть композита */
  --ice:#8CCFDC;       /* акцент: прозрачный байкальский лёд */
  --text:#16252B;
  --muted:#5A6B71;
  --line:#D3DFE2;
  --font-head:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Тёмная тема (включается сама, если на телефоне/компьютере тёмный режим) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1F26; --surface:#14303A; --water:#0A2A35; --water-soft:#1D5568;
    --sand:#BFAF94; --ice:#8CCFDC; --text:#E6EFF1; --muted:#9DB2B8; --line:#24434E;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1F26; --surface:#14303A; --water:#0A2A35; --water-soft:#1D5568;
  --sand:#BFAF94; --ice:#8CCFDC; --text:#E6EFF1; --muted:#9DB2B8; --line:#24434E;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ice);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.15;margin:0}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:.6em}
h3{font-size:1.05rem;font-weight:500}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.lead{font-size:1.2rem;color:var(--muted);max-width:60ch}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:999px;border:2px solid transparent;font:600 1rem var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-main{background:var(--ice);color:#0A2A35}
.btn-main:hover{background:#B4E2EB}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-ghost:hover{background:rgba(140,207,220,.15)}

/* ---------- Шапка ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--water) 92%,transparent);backdrop-filter:blur(10px);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff}
.logo svg{width:36px;height:36px}
.logo b{font-family:var(--font-head);font-weight:700;font-size:1.25rem;letter-spacing:.01em}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:500;opacity:.85}
.nav a:hover{opacity:1}
.nav .tel{opacity:1;font-weight:600;white-space:nowrap}
.nav-links{display:flex;gap:1.6rem}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.35);border-radius:10px;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.top.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.open .menu-btn span:nth-child(2){opacity:0}
.top.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .menu-btn{display:flex}
  .nav{gap:.8rem}
  .nav .tel{font-size:.95rem}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--water);padding:.5rem 1.25rem 1rem;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.1rem}
  .top.open .nav-links{display:flex}
}
@media (max-width:400px){.nav .tel{display:none}}

/* ---------- Первый экран ---------- */
.hero{background:var(--water);color:#fff;padding:clamp(2.5rem,6vw,5rem) 0 clamp(4.5rem,9vw,7.5rem);overflow:hidden;position:relative}
.wave-edge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(28px,4vw,60px);fill:var(--bg);display:block}
.custom{position:relative}
.custom .wave-edge{fill:var(--bg)}
.custom .wave-top{top:-1px;bottom:auto;transform:scaleY(-1)}
.compare + .custom .wave-top, #objects + .custom .wave-top{fill:var(--surface)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-count{font-family:var(--font-head);font-weight:700;font-size:clamp(3.2rem,9vw,6.4rem);line-height:1;color:var(--ice);font-variant-numeric:tabular-nums;display:block;margin:.12em 0 .1em}
.hero h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500}
.hero p{color:#C9DEE4;max-width:46ch;margin-top:1.2rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero figure{margin:0;position:relative}
.hero figure .hex{position:relative;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);aspect-ratio:100/115}
.hero figure .hex img{width:100%;height:100%;object-fit:cover}
.hex-waves{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--water)}
.hex-waves path{vector-effect:non-scaling-stroke;stroke-width:20px}
@media (max-width:860px){.hex-waves path{stroke-width:12px}}
.hero figcaption{font-size:.9rem;color:#9FC0C9;margin-top:.8rem;text-align:center}
.cities{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.2rem;font-size:.95rem;color:#C9DEE4}
.cities span{border:1px solid rgba(140,207,220,.45);border-radius:999px;padding:.3em .9em}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero figure{max-width:460px}}

/* ---------- Как это сделано (процесс) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s;margin-top:2.5rem}
.step{padding-top:.2rem}
:root[data-theme="dark"] .step{border-top-color:var(--sand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step{border-top-color:var(--sand)}}
.step::before{counter-increment:s;content:counter(s);font-family:var(--font-head);font-size:1.25rem;color:#fff;background:var(--water-soft);width:52px;height:60px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);margin-bottom:.9rem}
.step p{color:var(--muted);margin:.4rem 0 0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Сравнение с деревом и бетоном ---------- */
.compare{background:var(--surface);border-block:1px solid var(--line)}
.compare-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:start}
.table-box{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:1rem}
th,td{text-align:left;padding:.75rem .6rem;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--muted)}
td:nth-child(2){font-weight:600}
.yes{color:#2E8A5C}.no{color:#B0483A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .yes{color:#6FD1A0}:root:not([data-theme="light"]) .no{color:#F0907F}}
:root[data-theme="dark"] .yes{color:#6FD1A0}:root[data-theme="dark"] .no{color:#F0907F}
@media (max-width:860px){.compare-grid{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- Каталог ---------- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0 1.8rem}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:.5em 1.05em;font:500 .95rem var(--font-body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--water);border-color:var(--water);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;text-align:left;cursor:pointer;font:inherit;color:inherit}
.card:hover{border-color:var(--water-soft)}
.card .pic{background:#F4F6F6;border-radius:10px;aspect-ratio:4/3;display:grid;place-items:center;padding:.8rem;margin-bottom:.9rem}
.card .pic img{max-height:100%;object-fit:contain}
.card h3{font-family:var(--font-body);font-weight:600;font-size:1.02rem;line-height:1.35}
.card .art{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.card .bags{margin-top:auto;padding-top:.8rem;font-size:.9rem;color:var(--water-soft);font-weight:600;display:flex;gap:.45rem;align-items:center}
.card .bags::before{content:"";flex:none;width:12px;height:14px;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card .bags{color:var(--ice)}}
:root[data-theme="dark"] .card .bags{color:var(--ice)}

/* ---------- Окно с подробностями товара ---------- */
dialog{border:none;border-radius:18px;padding:0;width:min(860px,100% - 2rem);max-height:calc(100% - 2rem);background:var(--surface);color:var(--text)}
dialog::backdrop{background:rgba(6,22,28,.6)}
.dlg{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.6rem}
.dlg .pic{background:#F4F6F6;border-radius:12px;display:grid;place-items:center;padding:1rem;min-height:260px}
.dlg h3{font-family:var(--font-head);font-size:1.35rem;font-weight:500;margin-bottom:.3rem}
.dlg dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1rem 0;font-size:.95rem}
.dlg dt{color:var(--muted)}.dlg dd{margin:0}
.close{position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;border-radius:50%;border:none;background:var(--bg);color:var(--text);font-size:1.4rem;cursor:pointer}
@media (max-width:700px){.dlg{grid-template-columns:1fr}}

/* ---------- Под заказ ---------- */
.custom{background:var(--venge);color:#F2EBE2;padding-block:clamp(5rem,10vw,8rem)}
.custom .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.custom p{color:#D9CDB7}
.custom ul{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.custom li{position:relative;padding-left:2rem}
.custom li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:16px;background:var(--sand);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.custom li b{display:block;color:#fff}
@media (max-width:860px){.custom .wrap{grid-template-columns:1fr}}

/* ---------- Контакты и заявка ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-list{display:grid;gap:1.1rem;margin-top:1.5rem}
.contact-list a{text-decoration:none;font-size:1.25rem;font-weight:600}
.contact-list small{display:block;color:var(--muted);font-size:.9rem;font-weight:400}
form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.6rem;display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:500;font-size:.95rem}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:.7em .85em;width:100%}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:.88rem;color:var(--muted);margin:0}
.form-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.form-btns .btn-ghost{color:var(--text)}
.form-ok{color:#2E8A5C;font-weight:600;margin:0}
.err{color:#B0483A;font-size:.9rem;margin:0;min-height:1.2em}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}

/* ---------- Плитки категорий ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:2rem}
.cat{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:1.2rem;border-radius:18px;border:none;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;overflow:hidden;font:inherit;box-shadow:0 1px 0 var(--line)}
.cat:hover{outline:2px solid var(--water-soft)}
.cat h3{font-family:var(--font-head);font-size:1.15rem;font-weight:500;position:relative;z-index:1}
.cat small{color:var(--muted);font-size:.9rem;position:relative;z-index:1}
.cat img{position:absolute;right:-6%;bottom:-4%;width:72%;max-height:78%;object-fit:contain}
.cat::before{content:"";position:absolute;right:-20px;bottom:-30px;width:190px;height:220px;background:var(--bg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* ---------- Вопросы ---------- */
.faq{max-width:820px;display:grid;gap:.7rem;margin-top:2rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 3.4rem 1.1rem 1.3rem;font-weight:600;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.2rem;top:50%;width:22px;height:25px;margin-top:-12.5px;background:var(--water-soft);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .25s}
.faq summary::before{content:"+";position:absolute;right:1.2rem;top:50%;width:22px;text-align:center;margin-top:-.75em;color:#fff;font-weight:700;z-index:1;transition:transform .25s}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.2rem;margin:0;color:var(--muted)}
footer{background:var(--water);color:#9FC0C9;padding:2rem 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-logo{display:flex;align-items:center;gap:.7rem}.foot-logo svg{width:28px;height:28px;flex:none}

/* =========================================================
   БАЙКАЛИТ КОМПОЗИТ / концепция визуального обновления
   ========================================================= */
:root{--bg:#f3f6f8;--surface:#fff;--water:#092a3e;--water-soft:#155c82;--venge:#173348;--sand:#d5e5ec;--ice:#67cde6;--text:#112737;--muted:#58707d;--line:#dce6eb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1d29;--surface:#142a38;--text:#e7f2f6;--muted:#a8c0cb;--line:#244252}}
:root[data-theme="dark"]{--bg:#0a1d29;--surface:#142a38;--text:#e7f2f6;--muted:#a8c0cb;--line:#244252}
.top{background:rgba(9,36,55,.97);border-bottom:1px solid rgba(255,255,255,.12)}
.top .wrap{height:76px}.logo img{width:42px;height:42px;flex:none}
.brand-word{display:flex;flex-direction:column;line-height:1.12;font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:.04em}
.brand-word small{font:.66rem var(--font-body);letter-spacing:.29em;color:#86d7e9;margin-top:5px}
.hero{background:linear-gradient(133deg,#09283d 3%,#114966 70%,#0c3047 100%);padding:clamp(4rem,8vw,7rem) 0 clamp(5rem,9vw,8rem)}
.hero .wrap{grid-template-columns:1.05fr .95fr}
.hero-kicker,.section-kicker{font:600 .76rem var(--font-body);letter-spacing:.19em;text-transform:uppercase}
.hero-kicker{color:#9de0f0;margin:0 0 1.6rem}
.hero h1{font-size:clamp(2.5rem,5.35vw,5.3rem);font-weight:700;line-height:1.12;letter-spacing:-.045em;max-width:12.8ch}
.hero h1 em{font-style:normal;color:#80d5e8}
.hero p.hero-description{font-size:clamp(1.05rem,1.55vw,1.22rem);line-height:1.75;max-width:51ch}
.hero .hex{border-radius:24px;clip-path:none!important;aspect-ratio:1 / 1.05!important;overflow:hidden;box-shadow:0 25px 90px rgba(0,0,0,.23)}
.hex-waves{display:none}.hero figure .hex img{filter:saturate(.83)}
.hero figcaption{color:#b6d9e3}.btn-main{background:#8de0ef;color:#082b3f}
.btn{font-weight:700;min-height:50px;justify-content:center}
.cities span{font-size:.84rem}
.wave-edge{height:clamp(18px,3vw,40px)}
.section-kicker{color:var(--water-soft)}
.advantage-list{display:grid;gap:1.4rem}
.advantage-list>div{display:grid;grid-template-columns:48px 1fr;gap:1.1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.advantage-list span{font:700 1.1rem var(--font-head);color:var(--water-soft)}
.advantage-list b{font-size:1.1rem;display:block;margin-bottom:.35rem}
.advantage-list p{color:var(--muted);margin:0}
.verification-note{font-size:.9rem;color:var(--muted);border-left:3px solid var(--ice);padding-left:1rem;margin-top:1.5rem}
.card,.cat,form,.faq details{box-shadow:0 7px 25px rgba(7,34,48,.035)}
.card{transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(7,34,48,.10)}
.card .bags{display:none} /* original catalogue counts not validated by the company */
.custom{background:linear-gradient(135deg,#102b40,#20475b)}
.custom p{color:#d9e7ed}
.custom li::before{background:#74cfe6}
.contact a:hover,.foot-logo a:hover{text-decoration:underline}
.consent{display:flex;flex-direction:row;align-items:flex-start;gap:.75rem;font-size:.83rem;line-height:1.45;color:var(--muted);font-weight:400}
.consent input{width:19px;height:19px;flex:none;margin-top:.12rem;accent-color:var(--water-soft)}
.consent a{color:var(--water-soft);text-underline-offset:3px}
.form-btns button[disabled]{opacity:.62;cursor:wait}
.form-ok{color:#16835b}
.foot-logo img{width:32px;height:32px;flex:none}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero h1{max-width:18ch}.hero figure{max-width:570px}}
@media(max-width:520px){.wrap{width:min(100% - 1.6rem,1180px)}.top .wrap{height:68px}.brand-word{font-size:.84rem}.brand-word small{font-size:.58rem}.logo img{width:34px;height:34px}.hero h1{font-size:clamp(2.1rem,10vw,3.2rem)}.hero .actions{flex-direction:column;align-items:stretch}.hero .actions .btn{width:100%}form{padding:1.1rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.card{padding:.7rem}.card h3{font-size:.85rem}.card .art{font-size:.75rem}.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.cat{min-height:180px;padding:.85rem}.cat h3{font-size:.84rem}.cat small{font-size:.77rem}.contact-list a{font-size:1.05rem}}
@media(max-width:360px){.grid,.cats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.card,.btn{transition:none}.card:hover{transform:none}}

/* ========= БАЙКАЛИТ КОМПОЗИТ — V2: коммерческие инструменты ========= */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
.top .wrap{gap:1.25rem}
.top .nav{gap:1rem}
.nav-links{gap:1.15rem}
.quote-nav{white-space:nowrap;display:flex;align-items:center;gap:.6rem;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(140,207,220,.35);border-radius:50px;padding:.52rem .84rem;font:600 .88rem var(--font-body);cursor:pointer;transition:background .2s}
.quote-nav:hover{background:rgba(255,255,255,.2)}
.quote-nav span{min-width:1.45rem;height:1.45rem;border-radius:50%;background:#90deea;display:inline-grid;place-items:center;color:#0b3042;font-weight:700;font-size:.8rem}
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 98% 6%,rgba(102,207,230,.16),transparent 36%),linear-gradient(135deg,transparent 45%,rgba(255,255,255,.025) 45.3%,transparent 47%);z-index:-1;pointer-events:none}
.hero-footnote{font-size:.78rem!important;opacity:.65;margin-top:1rem!important}
.hero figure .hex img{object-position:50% 50%;transition:transform .5s}
.hero figure:hover .hex img{transform:scale(1.035)}
.process-section{background:var(--bg)}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:2rem 0 0}
.catalog-search{display:flex;align-items:center;flex:1;max-width:550px;position:relative;font-weight:normal}
.catalog-search span{position:absolute;left:1rem;font-size:1.8rem;color:#49768a;pointer-events:none;line-height:1;top:50%;transform:translateY(-55%)}
.catalog-search input{width:100%;border-radius:14px;background:var(--surface);padding:.85rem 1rem .85rem 2.9rem;border-color:var(--line);font-size:1rem}
.catalog-search input:focus{border-color:#4c9ab1}
.catalog-count{font-size:.88rem;color:var(--muted);white-space:nowrap;margin:0}
.catalog-empty{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:2rem;text-align:center}
.catalog-empty .btn{color:var(--text)}
.product-card{display:flex;min-width:0;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 5px 22px rgba(7,34,48,.045);transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(7,34,48,.12)}
.product-card .card{flex:1;box-shadow:none;transform:none;border:0;border-radius:0;width:100%;padding:1rem;min-height:0}
.product-card .card:hover{box-shadow:none;transform:none;border:0}
.product-card .pic{width:100%;overflow:hidden}
.product-card .pic img{transition:transform .25s}
.product-card:hover .pic img{transform:scale(1.04)}
.card-more{margin-top:auto;padding-top:.8rem;display:flex;justify-content:space-between;color:var(--water-soft);font-size:.82rem;font-weight:600}
.add-to-quote{border:0;border-top:1px solid var(--line);padding:.85rem 1rem;width:100%;background:color-mix(in srgb,var(--bg) 50%,var(--surface));color:var(--water-soft);cursor:pointer;text-align:center;font:600 .89rem var(--font-body);transition:background .2s}
.add-to-quote:hover{background:#deeff4;color:#0b3b50}
.add-to-quote.selected{background:#e4f5ef;color:#1e7052}
.flow-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.2rem;align-items:center}
.request-flow{padding-block:clamp(3rem,7vw,5.5rem);background:var(--bg)}
.request-flow h2{max-width:19ch}
.flow-steps{display:grid;gap:.2rem}
.flow-steps>div{display:flex;gap:1.3rem;align-items:center;border-bottom:1px solid var(--line);padding:1.1rem 0}
.flow-steps>div:first-child{border-top:1px solid var(--line)}
.flow-steps span{font:700 1.3rem var(--font-head);color:#2483a6}
.flow-steps p{margin:0;display:grid;gap:.15rem}
.flow-steps strong{font-size:1.02rem}
.flow-steps small{color:var(--muted);font-size:.87rem}
.form-title{font:700 1.27rem var(--font-head);margin:0}
.form-subtitle{margin:-.65rem 0 .25rem;color:var(--muted);font-size:.86rem}
.modal-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn-outline{border:1px solid var(--line);color:var(--text);background:var(--surface)}
.btn-outline:hover{border-color:var(--water-soft)}
.quote-dialog{width:min(690px,100% - 1.2rem)}
.quote-content{padding:2.2rem}
.quote-description{color:var(--muted);font-size:.97rem}
.quote-list{display:grid;gap:.5rem;max-height:48vh;overflow:auto;margin:1.5rem 0}
.quote-item{display:grid;grid-template-columns:60px minmax(0,1fr) 80px 32px;gap:.7rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:12px}
.quote-item img{height:54px;width:60px;object-fit:contain;background:#f6f8fa;border-radius:8px}
.quote-item strong{font-size:.88rem;line-height:1.3;display:block}
.quote-item small{font-size:.72rem;color:var(--muted)}
.quote-item label{font-size:.68rem;color:var(--muted);gap:.1rem}
.quote-item input{padding:.35rem;width:100%;font-size:.9rem}
.quote-item button{border:0;background:transparent;cursor:pointer;font-size:1.5rem;color:var(--muted)}
.quote-summary{font-size:.89rem;color:var(--muted)}
.quote-content>.btn{width:100%}
.quote-content>.btn:disabled{opacity:.5;cursor:not-allowed}
.quote-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);z-index:50;background:#0b2d42;color:#fff;box-shadow:0 8px 35px rgba(0,0,0,.2);padding:.7rem 1.15rem;border-radius:100px;font:500 .87rem var(--font-body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.quote-toast.visible{opacity:1;transform:translate(-50%,0)}
.empty-quote{padding:1rem;background:var(--bg);border-radius:12px;color:var(--muted);font-size:.93rem}
@media(max-width:1000px){.nav-links{gap:.6rem}.top .nav{gap:.7rem}.nav-links a{font-size:.85rem}}
@media(max-width:820px){.nav-links{gap:0}.nav-links a{font-size:1.05rem}.quote-nav{padding:.45rem .65rem}}
@media(max-width:700px){.flow-layout{grid-template-columns:1fr;gap:.5rem}.catalog-toolbar{align-items:stretch;flex-direction:column}.catalog-count{align-self:flex-end}.quote-content{padding:1.25rem}.quote-item{grid-template-columns:47px minmax(0,1fr) 60px 23px;gap:.35rem;padding:.45rem}.quote-item img{width:45px;height:52px}.quote-item strong{font-size:.77rem}}
@media(max-width:520px){.hero{padding-top:3.2rem}.quote-nav{font-size:0;gap:.3rem}.quote-nav span{font-size:.8rem}.product-card .card{padding:.7rem}.card-more{font-size:.75rem}.add-to-quote{font-size:.75rem;padding:.75rem .3rem}}
@media(prefers-reduced-motion:reduce){.product-card,.product-card .pic img,.hero figure .hex img,.quote-toast{transition:none}.product-card:hover{transform:none}}

.load-more-wrap{display:flex;justify-content:center;padding:2.2rem 0 0}
.load-more{min-width:240px;color:var(--water-soft);background:var(--surface);border:1px solid var(--line)}
.load-more:hover{background:#e4f3f8}