/* ============ Base ============ */
:root{
  --bg: #0b0f17;
  --bg2:#0d1422;
  --card:#0f1a2c;
  --text:#e9eefc;
  --muted:#a7b2cc;
  --line: rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --brand1:#7c3aed;
  --brand2:#06b6d4;

  --r: 18px;
  --r2: 26px;
  --container: 1160px;

  --blur: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="light"]{
  --bg: #f4f7fd;
  --bg2:#eaf1ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#52607a;
  --line: rgba(15,23,42,.10);
  --shadow: 0 20px 55px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(124,58,237,.25), transparent 50%),
    radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,.22), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}


:root[data-theme="light"] body{
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(124,58,237,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg, #f7f9ff, #edf3ff 45%, #e7effd);
}

:root[data-theme="light"] .header{box-shadow: 0 10px 28px rgba(15,23,42,.05)}
:root[data-theme="light"] .nav__link:hover,
:root[data-theme="light"] .mobile__link:hover,
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .search__clear:hover{background: rgba(15,23,42,.05)}
:root[data-theme="light"] .glassCard,
:root[data-theme="light"] .card,
:root[data-theme="light"] .product,
:root[data-theme="light"] .leadBox,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .whyCard,
:root[data-theme="light"] .ctaBar,
:root[data-theme="light"] .note,
:root[data-theme="light"] .search,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .trust__item{
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
:root[data-theme="light"] .btn--ghost{background: rgba(255,255,255,.72)}
:root[data-theme="light"] .product:hover{background: rgba(255,255,255,.92)}
:root[data-theme="light"] .heroCard__overlay{background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.58))}


a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.h1{font-size: clamp(34px, 5vw, 56px); line-height:1.04; margin:14px 0 10px; letter-spacing:-.02em}
.h2{font-size: clamp(24px, 3vw, 34px); line-height:1.12; margin:0 0 8px; letter-spacing:-.01em}
.h3{font-size: 18px; line-height:1.2; margin:0 0 8px}
.lead{font-size: 16px; line-height:1.7; color:var(--muted); margin:0 0 18px}
.muted{color:var(--muted); line-height:1.7}
.section{padding: 84px 0}
.section--alt{background: linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent)}
@media (max-width:900px){ .section{padding: 64px 0} }

.scrollbar{
  position:fixed; inset:0 0 auto 0;
  height: 3px;
  transform-origin:left;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  transform: scaleX(0);
  z-index: 999;
}

.header{
  position:sticky; top:0;
  z-index: 100;
  background: rgba(10,14,22,.55);
  backdrop-filter: blur(var(--blur));
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .header{ background: rgba(255,255,255,.65); }

.header__row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 14px 0;
}

/* Prevent header overlap on mobile: allow brand text to shrink/truncate */
.brand{min-width:0; flex: 1 1 auto}
.brand__text{min-width:0}
.brand__name,.brand__tag{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 46vw}
.header__actions{flex: 0 0 auto}

.brand{display:flex; align-items:center; gap:12px}
.brand__logo{width:34px; height:34px}
.brand__name{font-weight:800; letter-spacing:-.02em}
.brand__tag{font-size:12px; color:var(--muted); margin-top:-2px}

.nav{display:flex; gap: 16px; align-items:center}
.nav__link{font-size: 14px; color: var(--muted); padding: 12px 12px; min-height: 44px; display:inline-flex; align-items:center; border-radius: 12px; transition:.2s var(--ease)}
.nav__link:hover{color:var(--text); background: rgba(255,255,255,.06)}

.header__actions{display:flex; gap:10px; align-items:center}
@media (max-width: 560px){
  .header__actions{gap:8px}
}
@media (max-width: 420px){
  #themeToggle{display:none}
  .btn--cta{display:none}
}

.burger{display:none; width:44px; height:44px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.04); cursor:pointer}
.burger span{display:block; height:2px; width:18px; background: var(--text); margin: 5px auto; border-radius: 99px}
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:block}
}

.mobile{border-top:1px solid var(--line)}
.mobile__panel{padding: 12px 0 18px}
.mobile__link{display:flex; align-items:center; min-height:48px; padding: 14px 14px; font-size:15px; font-weight:700; border-radius: 14px; color: var(--muted)}
.mobile__link:hover{background: rgba(255,255,255,.06); color: var(--text)}
.mobile__cta{display:grid; gap:10px; margin-top:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:700;
  font-size: 13px;
  cursor:pointer;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.btn:active{transform: translateY(0px)}
.btn--primary{
  border: 0;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 14px 34px rgba(124,58,237,.24);
}
.btn--ghost{background: rgba(255,255,255,.04)}
.btn--full{width:100%}
.icon{font-size:16px; opacity:.9}

/* Header "Почему myPRO?" button */
.btn--why{
  position:relative;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(6,182,212,.10));
}
.btn--why:hover{background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(6,182,212,.16))}

@media (max-width: 560px){
  .brand__tag{display:none}
  .brand__name{max-width: 52vw}
  .btn--why{display:none}
}

.hero{padding: 70px 0 40px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:18px}
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.pill__dot{width:8px; height:8px; border-radius:99px; background: linear-gradient(135deg, var(--brand1), var(--brand2))}

.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 12px}

.trust{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top: 16px;
}
.trust__item{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  min-width: 160px;
}
.trust__num{font-weight:900; font-size:18px}
.trust__label{font-size:12px; color: var(--muted); margin-top:4px}

.hero__visual{position:relative}
.glassCard{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroCard{transform: translateZ(0)}
.heroCard__img{aspect-ratio: 4/3; object-fit:cover}
.heroCard__overlay{
  position:absolute; inset:auto 0 0 0;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.heroCard__kicker{font-size:12px; color: rgba(255,255,255,.8)}
.heroCard__title{font-weight:900; letter-spacing:-.01em}

.floating{
  position:absolute;
  width: 240px; height: 240px;
  border-radius: 999px;
  opacity:.35;
  pointer-events:none;
}
.floating--a{left:-60px; top:-40px; background: radial-gradient(circle at 30% 30%, var(--brand1), transparent 60%); animation: floatA 9s var(--ease) infinite}
.floating--b{right:-70px; bottom:-60px; background: radial-gradient(circle at 30% 30%, var(--brand2), transparent 60%); animation: floatB 10s var(--ease) infinite}
@keyframes floatA{50%{transform: translate(20px, 18px) scale(1.05)}}
@keyframes floatB{50%{transform: translate(-16px, -20px) scale(1.04)}}

.sectionHead{margin-bottom: 20px}
.sectionHead--split{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
@media (max-width: 900px){ .sectionHead--split{flex-direction:column; align-items:flex-start} }

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

.card{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.card__icon{font-size:22px; margin-bottom:12px}

.filters{display:flex; gap:10px; flex-wrap:wrap}

.catalogControls{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap}
@media (max-width: 980px){ .catalogControls{justify-content:flex-start} }

.search{position:relative; display:flex; align-items:center; gap:8px; padding: 10px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.04); min-width: 280px}
@media (max-width: 520px){ .search{width:100%; min-width: unset} }
.search__icon{opacity:.75}
.search__input{border:0; outline:0; background: transparent; color: var(--text); width:100%; font-weight:700; font-size:13px}
.search__input::placeholder{color: rgba(255,255,255,.45)}
.search__clear{border:0; background: transparent; color: var(--muted); cursor:pointer; font-size:14px; padding: 4px 6px; border-radius: 10px}
.search__clear:hover{background: rgba(255,255,255,.06); color: var(--text)}

.catalogMeta{margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700}

/* Premium catalog card layout */
.product{transition: transform .28s ease, border-color .28s ease, background .28s ease}
.product:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06)}
.product__body{display:flex; flex-direction:column; gap:10px}
.product__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.product__sub{color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .02em}
.product__desc{margin:0; color: var(--muted); font-size: 13.5px; line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden}

.product__toggles{display:flex; gap:8px; flex-wrap:wrap; margin-top: 2px}
.toggleBtn{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); cursor:pointer; font-weight:900; font-size:12px}
.toggleBtn:hover{background: rgba(255,255,255,.06); color: var(--text)}
.toggleBtn[aria-expanded="true"]{background: rgba(255,255,255,.08); color: var(--text)}

.product__details{margin-top: 12px; display:grid; gap:12px}
.detailPanel{border-radius: 18px; border:1px solid var(--line); background: rgba(0,0,0,.12); overflow:hidden}
.detailPanel__head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 13px 14px; cursor:pointer; user-select:none}
.detailPanel__title{font-weight: 900; font-size: 12px; color: var(--text); letter-spacing:.02em; text-transform: uppercase}
.detailPanel__chev{opacity:.75; transition: transform .22s ease}
.detailPanel[aria-expanded="true"] .detailPanel__chev{transform: rotate(180deg)}
.detailPanel__body{height: 0; overflow:hidden; transition: height .28s ease}
.detailPanel__inner{padding: 10px 14px 16px}
.detailPanel__inner p{margin: 0; color: var(--muted); font-size: 14px; line-height:1.65}
.detailPanel__inner ul{margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height:1.65}
.detailPanel__inner h4{margin: 12px 0 6px; font-size: 12px; letter-spacing:.08em; text-transform: uppercase; color: rgba(255,255,255,.88)}

.specTable{width:100%; border-collapse:collapse; margin-top:10px; overflow:hidden; border-radius:14px}
.specTable tr{border-bottom:1px solid rgba(255,255,255,.08)}
.specTable tr:last-child{border-bottom:0}
.specTable td{padding:10px; font-size:13.5px; line-height:1.5}
.specTable td:first-child{color: rgba(255,255,255,.68)}
.specTable td:last-child{text-align:right; color: rgba(255,255,255,.92); font-weight:800}

/* Sticky controls on mobile */
@media (max-width: 980px){
  #products .sectionHead--split{position: sticky; top: 64px; z-index: 9; background: rgba(0,0,0,.55); backdrop-filter: blur(12px); border-radius: 18px; padding: 10px; border:1px solid rgba(255,255,255,.10)}
}
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.chip.is-active{color: var(--text); background: rgba(255,255,255,.08)}

.productGrid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}
@media (max-width: 980px){ .productGrid{grid-template-columns:1fr} }

.product{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 240px;
}
@media (max-width: 720px){ .product{grid-template-columns:1fr} }

.product__media{position:relative; display:flex; align-items:center; justify-content:center}
.product__media img{width:100%; height:100%; object-fit:cover}
.product__badge{
  position:absolute; left:12px; top:12px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;
  font-size:12px;
}
.product__body{padding: 16px}
.specs{list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px}
.specs li{display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding-bottom:8px}
.specs span{color:var(--muted); font-size:13px}
.product__cta{display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap}

.split{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; align-items:stretch;
}
@media (max-width: 900px){ .split{grid-template-columns:1fr} }
.cover{width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3}

.stack{display:grid; gap:14px}

.featureList{display:grid; gap:10px}
.feature{
  display:flex; gap:12px;
  padding: 14px;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.feature__icon{width:34px; height:34px; display:grid; place-items:center; border-radius: 12px; background: rgba(255,255,255,.06)}

.ctaBar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 16px;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(6,182,212,.18));
}
@media (max-width: 720px){ .ctaBar{flex-direction:column; align-items:flex-start} }
.ctaBar__title{font-weight:900}

.placeholderBox{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  padding: 18px;
  color: var(--muted);
  min-height: 160px;
}

.leadBox{
  border-radius: 34px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}
@media (max-width: 980px){ .leadBox{grid-template-columns:1fr} }

.leadBox__mini{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top: 14px}
@media (max-width: 720px){ .leadBox__mini{grid-template-columns:1fr} }
.mini{padding: 12px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,.04)}
.mini__k{font-size:12px; color:var(--muted)}
.mini__v{font-weight:900; margin-top:4px}

.form{border-radius: 26px; border:1px solid var(--line); background: rgba(255,255,255,.04); padding: 14px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form__row--end{grid-template-columns: 1fr auto; align-items:center}
@media (max-width: 720px){
  .form__row, .form__row--end{grid-template-columns:1fr}
}
.field{display:grid; gap:6px}
.field__label{font-size:12px; color:var(--muted); font-weight:800}
.input{
  width:100%;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
:root[data-theme="light"] .input{background: rgba(15,23,42,.04)}
.input:focus{border-color: rgba(6,182,212,.55); box-shadow: 0 0 0 4px rgba(6,182,212,.15)}
.input:focus-visible{outline:0}
.input--area{resize: vertical; min-height: 120px}

.check{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:12px}
.form__hint{margin-top:10px}

.contactList{display:grid; gap:12px; margin-top: 8px}
.contactItem{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding-bottom:10px}
.contactItem__k{color:var(--muted); font-size:13px}
.contactItem__v{font-weight:900}

.map{min-height: 260px}

.footer{padding: 28px 0; border-top:1px solid var(--line)}
.footer__row{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.footer__brand{font-weight:900}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}
.footer__link{color:var(--muted)}
.footer__link:hover{color:var(--text)}

.modal{position:fixed; inset:0; display:none; z-index: 200}
.modal.is-open{display:block}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.modal__panel{
  position:relative;
  width: min(920px, calc(100% - 24px));
  margin: 60px auto;
  border-radius: 26px;
  border:1px solid var(--line);
  background: rgba(10,14,22,.85);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  padding: 16px;
}
:root[data-theme="light"] .modal__panel{background: rgba(255,255,255,.88)}
.modal__close{
  position:absolute; right: 12px; top: 12px;
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  color: var(--text);
}
.modal__content{margin-top: 12px}

.bullets{margin:10px 0 0; padding-left:18px}
.bullets li{margin:6px 0; color: var(--muted); line-height:1.6}



/* ============ Smooth scroll + anchor offset ============ */
html{ scroll-behavior: smooth; }
:target{ scroll-margin-top: 92px; } /* fallback when JS disabled */

/* ============ Cleaner background (no seams / banding) ============ */
body{
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(700px 500px at 60% 90%, rgba(124,58,237,.12), transparent 60%);
  filter: blur(10px);
  opacity:.9;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity:.18;
  z-index:-1;
}

/* Make alt sections a smooth layer without visible borders */
.section--alt{ position:relative; background: transparent; }
.section--alt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.035), rgba(255,255,255,.02));
}

/* ============ Header polish ============ */
.brand__text{display:flex; flex-direction:column; gap:2px}
.brand__name{line-height:1.05}
.brand__tag{line-height:1.2; max-width: 420px}
@media (max-width: 520px){
  .brand__tag{display:none}
  .brand__name{font-size: 14px}
}

/* ============ CTA glow + sheen ============ */
.btn--primary{
  position:relative;
  overflow:hidden;
  will-change: transform, filter;
}
.btn--primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0), rgba(255,255,255,.18));
  transform: translateX(-120%) rotate(12deg);
  transition: transform .7s var(--ease);
  pointer-events:none;
  mix-blend-mode: overlay;
}
.btn--primary:hover::before{ transform: translateX(120%) rotate(12deg); }

.btn--primary::after{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.55), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(6,182,212,.45), transparent 55%);
  opacity:0;
  transition: opacity .25s var(--ease);
  filter: blur(10px);
  pointer-events:none;
}
.btn--primary:hover::after{ opacity:.55; }

.btn--primary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(6,182,212,.18), 0 0 0 1px rgba(6,182,212,.55) inset;
}

/* ===== Button loading state ===== */
.btn[disabled]{
  cursor:not-allowed;
  opacity:.85;
}
.btn.is-loading{
  position:relative;
  pointer-events:none;
}
.btn.is-loading::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  display:inline-block;
  margin-right:10px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.btn--cta .icon{margin-left:8px; transform: translateY(1px); transition: transform .2s var(--ease); }
.btn--cta:hover .icon{ transform: translate(2px, 1px); }

/* ============ Product images aligned ============ */
.product{ align-items:stretch; }
.product__media{ min-height: 260px; }
.product__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px){ .product__media{ min-height: 205px; } }

/* ============ Reveal animations (modern feel) ============ */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn{transition:none}
}

/* ============ Mobile tap comfort ============ */
@media (max-width: 420px){
  .container{ width: calc(100% - 28px); }
  .hero{ padding: 56px 0 30px; }
  .trust__item{ min-width: 140px; }
  .btn{ height: 46px; border-radius: 16px; }
}

/* ============ Why section ============ */
.whyGrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.whyCard{border-radius: 26px; border:1px solid var(--line); background: rgba(255,255,255,.04); padding: 18px; box-shadow: var(--shadow); position:relative; overflow:hidden}
.whyCard::before{content:""; position:absolute; inset:-2px; background: radial-gradient(600px 240px at 20% 10%, rgba(124,58,237,.18), transparent 60%), radial-gradient(600px 240px at 80% 30%, rgba(6,182,212,.14), transparent 60%); opacity:.85}
.whyCard>*{position:relative}
.whyCard__icon{width:46px; height:46px; display:grid; place-items:center; border-radius: 16px; background: rgba(255,255,255,.06); border:1px solid var(--line); margin-bottom: 10px; font-size:20px}
.whyCard:hover{transform: translateY(-2px); transition: transform .18s var(--ease)}

.whyBar{margin-top: 18px; display:flex; gap:14px; align-items:center; justify-content:space-between; padding: 16px 18px; border-radius: 26px; border:1px solid var(--line); background: rgba(255,255,255,.04)}
.whyBar__title{font-weight: 800; letter-spacing:-.02em}

/* ============ Disabled product cards (for models without PDS yet) ============ */
.product.is-disabled{opacity:.70}
.product.is-disabled .product__badge{background: rgba(255,255,255,.08)}
.product.is-disabled:hover{transform:none}

/* ============ Responsive improvements (B2B mobile) ============ */
@media (max-width: 960px){
  .whyGrid{grid-template-columns: 1fr}
  .whyBar{flex-direction:column; align-items:stretch}
}

/* ============ Subtle 3D tilt (modern feel) ============ */
.tilt{transform-style:preserve-3d; will-change: transform}
.tilt::after{content:""; position:absolute; inset:0; background: radial-gradient(700px 240px at var(--mx,50%) var(--my,20%), rgba(255,255,255,.10), transparent 60%); opacity:0; transition: opacity .18s var(--ease); pointer-events:none}
.tilt:hover::after{opacity:1}



/* ============ Animated seamless background (premium) ============ */
body::before{
  animation: bgDrift 18s var(--ease) infinite alternate;
  transform: translate3d(0,0,0);
}
@keyframes bgDrift{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%{ transform: translate3d(1.2%, .8%, 0) scale(1.03); }
  100%{ transform: translate3d(-.6%, 1.2%, 0) scale(1.025); }
}

/* ============ Language switcher ============ */
.lang{ position:relative; }
.lang__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.lang__btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.lang__globe{ opacity:.9 }
.lang__code{ font-weight:900; letter-spacing:.04em; font-size:12px; }
.lang__chev{ opacity:.7; transform: translateY(-1px) }
.lang__menu{
  position:absolute;
  right:0; top: calc(100% + 10px);
  min-width: 180px;
  padding: 8px;
  border-radius: 18px;
  border:1px solid var(--line);
  background: rgba(10,14,22,.82);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  z-index: 150;
}
:root[data-theme="light"] .lang__menu{ background: rgba(255,255,255,.88); }
.lang__item{
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:800;
}
.lang__item:hover{ background: rgba(255,255,255,.07); }
.lang__item.is-active{
  background: rgba(255,255,255,.09);
  border-color: rgba(6,182,212,.35);
}

/* ============ Compare section ============ */
.compareGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:stretch;
}
@media (max-width: 980px){
  .compareGrid{ grid-template-columns: 1fr; }
}
.compareCard{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.compareCard--pro{
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.14));
}
.compareCard::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 60%);
  opacity:.65;
  filter: blur(12px);
  pointer-events:none;
}
.compareCard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 12px; position:relative; }
.pill--small{ padding: 8px 10px; font-size:12px; }
.pill--muted{ color: var(--muted); }
.compareCard__badge{
  font-size:12px;
  font-weight:900;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
}
.compareCard__badge--muted{ background: rgba(255,255,255,.05); color: var(--muted); }
.compareList{
  list-style:none; padding:0; margin: 0;
  display:grid; gap:10px;
  position:relative;
}
.compareList li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:10px;
  border-bottom: 1px dashed var(--line);
}
.compareList span{ color: var(--muted); font-size:13px; }
.compareList b{ font-weight:900; max-width: 58%; text-align:right; }
@media (max-width: 520px){
  .compareList li{ flex-direction:column; }
  .compareList b{ max-width:100%; text-align:left; }
}
.compareCard__cta{ margin-top: 14px; position:relative; }
.compareHint{ margin-top: 14px; position:relative; }
.compareNote{ margin-top: 14px; }


/* ===== Catalog upgrades (prices + better media) ===== */
.productGrid--catalog{
  grid-template-columns: repeat(12, 1fr);
}
.productGrid--catalog .product{
  grid-column: span 4;
  grid-template-columns: 1fr;
  min-height: unset;
}
.productGrid--catalog .product__body{
  padding: 14px 14px 16px;
}
.productGrid--catalog .product__media{
  height: 220px;
  min-height: 220px;
}
@media (max-width: 1100px){
  .productGrid--catalog .product{ grid-column: span 6; }
}
@media (max-width: 900px){
  .productGrid--catalog .product{ grid-column: span 12; }
  .productGrid--catalog .product__media{ height: 210px; min-height: 210px; }
}

.product__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.price{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  white-space:nowrap;
}
.price__cur{ opacity:.8; font-weight:700; }
.price__val{ font-weight:800; letter-spacing:.2px; }

.product__media--soft{
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 100%);
}
.product__media--soft img{
  object-fit: contain;
  width:100%;
  height:100%;
  padding:14px;
  transform: translateZ(0);
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.35));
}
.product__media--xl img{
  padding:8px 10px 16px;
}
.specs--grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 14px;
}
@media (max-width: 520px){
  .specs--grid{ grid-template-columns:1fr; }
}

/* Better product media height */
.product__media{
  min-height: 230px;
}



/* ===== HERO STATS (premium spec strip) ===== */
.heroStats{
  margin-top: 14px;
  padding: 10px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  overflow: hidden;
}
/* desktop: keep 2 columns until very wide screens to avoid cramped text */
@media (min-width: 980px){
  .heroStats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1240px){
  .heroStats{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px){
  /* on phones: horizontal scroll, looks like premium “spec rail” */
  .heroStats{
    display:flex;
    gap: 0;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 10px 10px;
  }
  .heroStats::-webkit-scrollbar{ height: 6px; }
  .heroStats::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
}

.statCard{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 18px;
  min-height: unset;
}
@media (min-width: 721px){
  .statCard:not(:nth-child(2n)){ border-right: 1px solid var(--line); }
  .statCard:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
}
@media (min-width: 1240px){
  .statCard{ padding: 14px 16px; }
  .statCard:not(:last-child){ border-right: 1px solid var(--line); }
  .statCard{ border-bottom: 0 !important; }
}
@media (max-width: 720px){
  .statCard{
    flex: 0 0 78%;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    margin-right: 10px;
  }
  .statCard:last-child{ margin-right: 0; }
}

.statCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 200px at 18% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(420px 200px at 90% 20%, rgba(6,182,212,.14), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.statCard>*{ position:relative; }

.statCard__body{ min-width: 0; }

.statCard__icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex: 0 0 36px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: 1;
}
.statCard[data-icon="dry"] .statCard__icon::before{ content:"⟐"; }
.statCard[data-icon="wash"] .statCard__icon::before{ content:"◍"; }
.statCard[data-icon="g"] .statCard__icon::before{ content:"G"; }
.statCard[data-icon="cycle"] .statCard__icon::before{ content:"∞"; }

.statCard__k{
  color: rgba(255,255,255,.70);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.statCard__v{
  margin-top: 6px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.96);
  display:block;
  overflow: visible;
}

/* keep the “premium clamp” only on mobile rail */
@media (max-width: 720px){
  .statCard__k{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .statCard__v{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
}

@media (max-width: 520px){
  .statCard{ flex-basis: 88%; }
  .statCard__v{ 
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* stack CTAs nicely on small screens */
@media (max-width: 520px){
  .hero__cta{ flex-direction: column; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}


/* ===== Map iframe ===== */
.map{ overflow:hidden; }
.map iframe{ display:block; width:100%; height:100%; min-height: 260px; border:0; }

/* ------------------------------------------------------------
   HERO SPEC PANEL (premium 2×2)
   ------------------------------------------------------------ */
.specPanel{
  --panel-bg: rgba(255,255,255,.06);
  --panel-bd: rgba(255,255,255,.10);
  --divider: rgba(255,255,255,.08);

  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(130,110,255,.20), transparent 55%),
    radial-gradient(120% 140% at 90% 100%, rgba(40,170,255,.14), transparent 55%),
    var(--panel-bg);
  border: 1px solid var(--panel-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);

  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  overflow: hidden;
}

.specItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 16px 18px;
  min-width: 0;
  position: relative;
}

.specItem:nth-child(1),
.specItem:nth-child(2){
  border-bottom: 1px solid var(--divider);
}
.specItem:nth-child(1),
.specItem:nth-child(3){
  border-right: 1px solid var(--divider);
}

.specIcon{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 25px rgba(0,0,0,.25);

  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1;
}

.specText{ min-width: 0; }

.specLabel{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-top: 2px;
}

.specValue{
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.25;
  color: rgba(255,255,255,.93);

  overflow: hidden;
  text-wrap: pretty;
  word-break: normal;
}

@media (hover:hover){
  .specItem{
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .specItem:hover{
    background: rgba(255,255,255,.03);
  }
}

@media (max-width: 780px){
  .specPanel{
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 16px;
  }
  .specItem{
    padding: 14px 14px;
  }
  .specItem:nth-child(1),
  .specItem:nth-child(3){
    border-right: none;
  }
  .specItem{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .specItem:last-child{ border-bottom: none; }
}

/* Mobile header improvements */
@media (max-width: 520px){
  .header__row{gap:10px; align-items:center}
  .brand__text{display:none}
  .btn--why{display:none}
  .nav{display:none}
  .header__actions{gap:8px}
  .btn--cta{padding:10px 12px}
}
/* Hide any short/preview text in product cards under title (we show via buttons only) */
.productCard p.muted,
.productCard .muted{display:none;}

/* Hide grey short description under product cards in catalog */
.productGrid--catalog .product__desc{display:none;}


/* ===== 2026 refinement pass: ideal light theme + mobile cleanup ===== */
:root[data-theme="light"]{
  --bg: #f6f8fc;
  --bg2:#edf3fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#5c6b84;
  --line: rgba(15,23,42,.08);
  --shadow: 0 18px 48px rgba(15,23,42,.08);
}

:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at -5% -5%, rgba(124,58,237,.10), transparent 52%),
    radial-gradient(900px 540px at 105% 5%, rgba(6,182,212,.10), transparent 48%),
    linear-gradient(180deg, #fbfcff 0%, #f3f7fd 34%, #edf3fb 100%);
}

:root[data-theme="light"] .header{
  background: rgba(255,255,255,.84);
  border-bottom-color: rgba(15,23,42,.07);
  box-shadow: 0 14px 38px rgba(15,23,42,.06);
}
:root[data-theme="light"] .hero,
:root[data-theme="light"] .section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
:root[data-theme="light"] .glassCard,
:root[data-theme="light"] .card,
:root[data-theme="light"] .product,
:root[data-theme="light"] .leadBox,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .whyCard,
:root[data-theme="light"] .ctaBar,
:root[data-theme="light"] .note,
:root[data-theme="light"] .search,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .trust__item,
:root[data-theme="light"] .specPanel,
:root[data-theme="light"] .detailPanel,
:root[data-theme="light"] .compareCard,
:root[data-theme="light"] .mobile__panel{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
}
:root[data-theme="light"] .btn--ghost,
:root[data-theme="light"] .burger{
  background: rgba(255,255,255,.82);
}
:root[data-theme="light"] .btn--why{
  border-color: rgba(124,58,237,.16);
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(6,182,212,.08));
}
:root[data-theme="light"] .price,
:root[data-theme="light"] .product__badge,
:root[data-theme="light"] .compareCard__badge,
:root[data-theme="light"] .specIcon{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.08);
  color: var(--text);
}
:root[data-theme="light"] .specPanel{
  --panel-bg: rgba(255,255,255,.92);
  --panel-bd: rgba(15,23,42,.08);
  --divider: rgba(15,23,42,.07);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(124,58,237,.08), transparent 56%),
    radial-gradient(120% 140% at 90% 100%, rgba(6,182,212,.08), transparent 56%),
    rgba(255,255,255,.92);
  box-shadow: 0 18px 52px rgba(15,23,42,.08);
}
:root[data-theme="light"] .specLabel{ color: rgba(15,23,42,.55); }
:root[data-theme="light"] .specValue{ color: rgba(15,23,42,.90); }
:root[data-theme="light"] .nav__link,
:root[data-theme="light"] .mobile__link,
:root[data-theme="light"] .search__clear,
:root[data-theme="light"] .detailPanel__title,
:root[data-theme="light"] .compareList span,
:root[data-theme="light"] .brand__tag,
:root[data-theme="light"] .lead,
:root[data-theme="light"] .muted{ color: var(--muted); }
:root[data-theme="light"] .heroCard__overlay{
  background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.44));
}
:root[data-theme="light"] .search__input::placeholder{ color: rgba(15,23,42,.38); }
:root[data-theme="light"] .map,
:root[data-theme="light"] .detailPanel__body,
:root[data-theme="light"] .specTable td,
:root[data-theme="light"] .specTable th{
  border-color: rgba(15,23,42,.08);
}

@media (max-width: 980px){
  .container{ width:min(var(--container), calc(100% - 28px)); }
  .header__row{ gap:12px; padding: 10px 0; }
  .hero{ padding: 34px 0 18px; }
  .hero__grid{ gap:16px; }
  .hero__copy{ order: 1; }
  .hero__visual{ order: 0; }
  .heroCard__img{ aspect-ratio: 16/11; }
  .section{ padding: 52px 0; }
  .productGrid--catalog .product__body{ padding: 13px; }
  .product__media,
  .productGrid--catalog .product__media{ min-height: 190px; height: 190px; }
  .leadBox__mini{ gap:8px; }
}

@media (max-width: 720px){
  .brand{ gap:10px; }
  .brand__logo{ width:32px; height:32px; }
  .brand__name{ font-size:14px; }
  .btn,
  .burger,
  .lang__btn{ min-height: 44px; }
  .mobile{
    padding-top: 6px;
    background: transparent;
  }
  .mobile__panel{
    border:1px solid var(--line);
    border-radius: 22px;
    padding: 10px;
    margin-bottom: 8px;
  }
  .mobile__link{
    padding: 14px 12px;
    font-weight: 700;
  }
  .heroCard,
  .glassCard,
  .product,
  .card,
  .leadBox,
  .feature,
  .whyCard,
  .ctaBar,
  .note,
  .specPanel{ border-radius: 22px; }
  .h1{ font-size: clamp(30px, 9vw, 42px); line-height: 1.05; }
  .lead{ font-size:15px; line-height:1.6; }
  .specPanel{ margin-top: 14px; }
  .specItem{ gap:10px; }
  .catalogControls{ gap:10px; }
  .search{ min-width:0; width:100%; }
  .product__top{ gap:10px; }
  .price{ padding:7px 9px; }
  .detailPanel__head{ padding: 14px 0; }
}

@media (max-width: 520px){
  .container{ width: calc(100% - 22px); }
  .header{ backdrop-filter: blur(14px); }
  .header__row{ align-items:center; gap:8px; }
  .brand{ flex: 1 1 auto; min-width:0; }
  .brand__text{ display:block; }
  .brand__name{ max-width: 34vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand__tag{ display:none; }
  .header__actions{ gap:6px; }
  .btn--cta{ display:none; }
  #themeToggle{ display:inline-flex; }
  .lang__code{ display:none; }
  .btn,
  .lang__btn,
  .burger{ width: 42px; padding: 0; }
  .lang__btn{ justify-content:center; }
  .hero{ padding-top: 24px; }
  .hero__cta{ margin-bottom: 10px; }
  .heroCard__img{ aspect-ratio: 4/3; }
  .product__media,
  .productGrid--catalog .product__media{ min-height: 176px; height: 176px; }
  .product__media--soft img{ padding: 10px; }
  .specItem{ padding: 13px 12px; }
  .sectionHead{ margin-bottom: 16px; }
  .card,
  .product,
  .leadBox,
  .feature,
  .whyCard,
  .ctaBar,
  .note{ padding: 14px; }
}


/* ===== mypro-site28 mobile/header pass ===== */
.brand__nameShort{display:none;}
.brand__mobileText{display:none;}
@media (max-width: 980px){
  .header__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;}
  .header__actions{justify-content:flex-end;}
  .btn--why,.btn--cta{display:none;}
}
@media (max-width: 520px){
  .brand__nameFull{display:none;}
  .brand__nameShort{display:inline;}
  .brand__text{display:block;}
  .brand__name{max-width:none;font-size:15px;font-weight:900;}
  #themeToggle{display:none !important;}
  .header__actions{gap:8px;}
  .lang__btn,.burger{width:44px;height:44px;min-height:44px;border-radius:14px;}
  .hero__cta .btn{min-height:48px;}
  .mobile__cta{grid-template-columns:1fr;}
  .mobile__cta .btn{min-height:48px;}
  .contactItem{flex-direction:column;align-items:flex-start;}
  .footer__right{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .footer__link{padding:10px 0;}
}
@media (max-width: 380px){
  .brand__logo{width:30px;height:30px;}
  .brand__name{font-size:14px;}
  .h1{font-size:clamp(28px,10vw,36px);}
  .footer__right{grid-template-columns:1fr;}
}

/* Extra mobile fixes without changing desktop design */
@media (max-width: 640px){
  .container{width:min(var(--container), calc(100% - 24px));}
  .hero{padding:56px 0 28px}
  .hero__cta .btn{width:100%}
  .product__top{flex-direction:column; align-items:flex-start}
  .price{align-self:flex-start}
  .specPanel{grid-template-columns:1fr}
  .catalogControls{width:100%}
  .filters{width:100%; overflow:auto; flex-wrap:nowrap; padding-bottom:4px}
  .filters::-webkit-scrollbar{height:4px}
  .product__cta .btn{width:100%}
  .detailPanel__inner{overflow-wrap:anywhere}
  .heroCard__img{aspect-ratio: 4/3; min-height: 280px}
}


/* ===== Final verified mobile stability patch ===== */
html, body{max-width:100%; overflow-x:clip;}
img, svg, video, canvas, iframe{max-width:100%;}
.product, .card, .leadBox, .feature, .whyCard, .ctaBar, .note, .glassCard, .specPanel, .mobile__panel, .search, .filters, .catalogControls, .hero__cta, .product__cta, .contactItem, .footer__row > *{min-width:0;}

@media (max-width: 980px){
  #products .sectionHead--split{position:static; top:auto; background:transparent; backdrop-filter:none; border:0; padding:0; border-radius:0;}
  .header__row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .brand{flex:1 1 auto; min-width:0;}
  .header__actions{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
  .mobile{position:fixed; left:0; right:0; top:var(--header-mobile-height,64px); z-index:95; padding:0 10px 12px; background:transparent; border-top:0;}
  .mobile[hidden]{display:none !important;}
  .mobile__panel{padding:10px; margin:0 auto; max-width:min(var(--container), calc(100% - 20px)); max-height:calc(100vh - var(--header-mobile-height,64px) - 18px); overflow:auto;}
  body.menu-open{overflow:hidden;}
  main{position:relative; z-index:1;}
  .catalogControls, .hero__cta, .product__cta, .form__row, .form__row--end, .footer__row{align-items:stretch;}
}

@media (max-width: 768px){
  .container{width:calc(100% - 24px);}
  .hero{padding:28px 0 24px;}
  .hero__grid{grid-template-columns:1fr; gap:16px; align-items:start;}
  .hero__copy, .hero__visual{width:100%;}
  .hero__cta{display:grid; grid-template-columns:1fr; gap:10px;}
  .hero__cta .btn, .product__cta .btn{width:100%;}
  .catalogControls{display:grid; grid-template-columns:1fr; width:100%;}
  .filters{display:flex; flex-wrap:nowrap; overflow:auto; padding-bottom:4px;}
  .search{width:100%; min-width:0;}
  .product{grid-template-columns:1fr; min-height:0;}
  .product__media, .productGrid--catalog .product__media{height:auto; min-height:220px;}
  .product__media img{object-fit:contain;}
  .product__top{flex-direction:column; align-items:flex-start;}
  .price{align-self:flex-start;}
  .contactItem{align-items:flex-start;}
}

@media (max-width: 520px){
  .container{width:calc(100% - 20px);}
  .header{
    background: linear-gradient(180deg, rgba(11,15,23,.98), rgba(13,20,34,.96));
    backdrop-filter: none;
  }
  :root[data-theme="light"] .header{
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,253,.96));
  }
  .header__row{padding:10px 0;}
  .brand__text{display:block;}
  .brand__tag{display:none;}
  .brand__name{max-width:none; font-size:14px; display:flex; align-items:center; gap:6px;}
  .brand__nameFull{display:none;}
  .brand__nameShort{display:inline; flex:0 0 auto;}
  .brand__mobileText{display:inline; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.04em; white-space:nowrap;}
  .btn--cta, .btn--why, #themeToggle{display:none !important;}
  .lang__btn, .burger{width:48px; height:48px; min-height:48px; padding:0;}
  .mobile{padding:0 8px 10px; background:transparent;}
  .mobile__panel{background: var(--card);}
  .mobile__link{padding:14px 14px; min-height:50px; font-size:15px;}
  .h1{font-size:clamp(28px, 9vw, 36px);}
  .lead{font-size:14px;}
  .card, .product, .leadBox, .feature, .whyCard, .ctaBar, .note{padding:14px;}
  .specPanel{grid-template-columns:1fr; padding:10px;}
  .specItem{padding:12px 10px;}
  .product__media, .productGrid--catalog .product__media{min-height:190px;}
  .detailPanel__head, .detailPanel__inner, .product__body{padding-left:12px; padding-right:12px;}
  .footer__right{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
}

@media (max-width: 390px){
  .brand__logo{width:30px; height:30px;}
  .brand__name{max-width:40vw; font-size:13px;}
  .footer__right{grid-template-columns:1fr;}
  .product__media, .productGrid--catalog .product__media{min-height:170px;}
}


.mobile__cta{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.mobile__cta .btn{
  width:100%;
  min-height:58px;
  padding:16px 18px;
  font-size:16px;
  font-weight:700;
  border-radius:16px;
  justify-content:center;
}

.mobile__cta .btn span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}