/* ============ WEBER v2 — dark manufacturer site ============ */
:root{
  --bg:#090B10;
  --bg-2:#0E1118;
  --bg-3:#12161F;
  --card:#1B1F28;
  --card-2:#20242E;
  --ink:#F3F4F6;
  --dim:#A9AFB9;
  --faint:#6B7280;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --accent:#FFC400;
  --accent-ink:#0B0D12;
  --blue:#36C8F5;
  --tile:#F5F5F5;
  --evrika:#0AA0DC;
  --kaspi:#F14635;
  --halyk:#0CA45C;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink);
  background:var(--bg);
  background-image:radial-gradient(120% 80% at 50% 0%, #0E1118 0%, #090B10 55%);
  background-attachment:fixed;
  font-family:"Inter",system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
.mono{font-family:"DM Mono",ui-monospace,monospace; font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--dim)}
.wrap{max-width:1440px; margin:0 auto; padding:0 clamp(20px,4vw,60px)}
::selection{background:var(--accent); color:var(--accent-ink)}

/* ---------- light theme ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F5F8;
  --bg-2:#FFFFFF;
  --bg-3:#EDEFF3;
  --card:#FFFFFF;
  --card-2:#F7F8FA;
  --ink:#0E1118;
  --dim:#5A6374;
  --faint:#98A1B0;
  --line:rgba(11,20,40,.09);
  --line-2:rgba(11,20,40,.18);
  --tile:#FFFFFF;
}
html[data-theme="light"] body{background-image:radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, #F4F5F8 55%)}
html[data-theme="light"] .logo{filter:none}
html[data-theme="light"] .hdr.scrolled{background:rgba(244,245,248,.85)}
html[data-theme="light"] .hero-bgword{-webkit-text-stroke-color:rgba(11,20,40,.05)}
html[data-theme="light"] .poster{background:linear-gradient(180deg,#FFFFFF 0%,#F1F3F6 100%)}
html[data-theme="light"] #poster-dyn img{filter:drop-shadow(0 20px 34px rgba(11,20,40,.16))}
html[data-theme="light"] .ppicto-ic{background:rgba(11,20,40,.03)}
html[data-theme="light"] .card:hover{box-shadow:0 20px 50px rgba(11,20,40,.12)}
html[data-theme="light"] .toast{background:#fff; box-shadow:0 14px 40px rgba(11,20,40,.16)}
html[data-theme="light"] .sk{background:linear-gradient(100deg,#fff 30%,#EDEFF3 50%,#fff 70%); background-size:200% 100%}
html[data-theme="light"] .bdg-disc{background:#10141C}

/* ---------- header ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .3s, border-color .3s; border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(9,11,16,.85); backdrop-filter:blur(14px); border-color:var(--line)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.hdr .logo{height:17px; filter:brightness(0) invert(1)}
.nav{display:flex; gap:clamp(18px,2.4vw,36px)}
.nav a{font-weight:500; font-size:18px; color:var(--dim); transition:color .2s; padding:6px 0; position:relative}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent)}
.hdr-right{display:flex; align-items:center; gap:14px}
.lang{display:flex; gap:2px; border:1px solid var(--line-2); border-radius:999px; padding:3px}
.lang button,.lang a{font-weight:800; font-size:11.5px; letter-spacing:.06em; padding:6px 11px; border-radius:999px; color:var(--dim); transition:.2s}
.lang button:hover,.lang a:hover{color:var(--ink)}
.lang button.on,.lang a.on{background:var(--accent); color:var(--accent-ink)}
.theme-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--dim); transition:.2s}
.theme-btn:hover{color:var(--ink); border-color:var(--ink)}
.hdr-cta{font-weight:700; font-size:15px; height:44px; display:inline-flex; align-items:center; padding:0 22px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink); transition:.2s}
.hdr-cta:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:980px){ .hdr-cta{display:none} }
@media (max-width:760px){ .nav{display:none} }

/* ---------- hero: видеослайдер ---------- */
.vhero{position:relative; width:100%; height:100svh; min-height:560px; overflow:hidden; background:#0B0D12}
.vslide{position:absolute; inset:0; opacity:0; transition:opacity 1.15s var(--ease); pointer-events:none}
.vslide.is-active{opacity:1; pointer-events:auto}
.vslide video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
/* затемнение: сверху — под шапку, снизу — под текст */
.vscrim{position:absolute; inset:0; background:
  /* дополнительное затемнение слева-снизу — под колонку с текстом */
  radial-gradient(120% 95% at 0% 100%, rgba(6,8,12,.72) 0%, rgba(6,8,12,.28) 42%, rgba(6,8,12,0) 68%),
  linear-gradient(180deg, rgba(6,8,12,.62) 0%, rgba(6,8,12,.12) 24%, rgba(6,8,12,.18) 48%, rgba(6,8,12,.82) 100%)}

/* геометрия как в исходном макете: во всю ширину, без центрирующего wrap */
.vhero-in{position:absolute; left:0; right:0; bottom:0; z-index:20; max-width:none; margin:0;
  padding:0 clamp(20px,4vw,64px) 96px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px}

.vcopy{max-width:640px; opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:.15s;
  /* кадры бывают светлые — держим читаемость текста поверх любого видео */
  text-shadow:0 1px 2px rgba(6,8,12,.45), 0 8px 32px rgba(6,8,12,.5)}
.vcopy.is-in{opacity:1; transform:none}
/* видно только краулерам и скринридерам: display:none такой текст скрыл бы
   и от них, поэтому уводим за пределы экрана, а не прячем */
.vhidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.veyebrow{display:flex; align-items:center; gap:12px; color:var(--accent); margin-bottom:20px}
.veyebrow::before{content:""; width:26px; height:1px; background:var(--accent); flex:0 0 auto}
.vtitle{margin:0 0 22px; color:#F3F4F6; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(32px,4.6vw,64px); line-height:1.08}
.vsub{margin:0 0 30px; max-width:480px; color:rgba(243,244,246,.82);
  font-size:clamp(14.5px,1.15vw,17px); line-height:1.55}
.vcta{display:inline-flex; align-items:center; gap:12px; color:#F3F4F6;
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
.vcta-line{position:relative; width:38px; height:1px; background:rgba(243,244,246,.75); overflow:hidden}
.vcta-line::after{content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.vcta:hover{color:var(--accent)}
.vcta:hover .vcta-line::after{transform:scaleX(1)}

.vctrl{display:flex; flex-direction:column; align-items:flex-end; gap:22px; flex:0 0 auto}
.varrows{display:flex; gap:10px}
.varrow{width:44px; height:44px; border:1px solid rgba(243,244,246,.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#F3F4F6;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease)}
.varrow:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.varrow:active{transform:scale(.92)}
.varrow svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6}
.vprogress{display:flex; align-items:center; gap:16px}
.vcount{font-size:11.5px; letter-spacing:.1em; color:rgba(243,244,246,.65)}
.vcount b{color:#F3F4F6; font-weight:500}
.vsegs{display:flex; gap:8px}
.vseg{width:52px; height:2px; padding:0; background:rgba(243,244,246,.28); position:relative; overflow:hidden; cursor:pointer}
.vseg i{position:absolute; left:0; top:0; bottom:0; width:0; background:#F3F4F6; transition:width .1s linear}

/* шапка поверх видео — всегда светлая, пока не начали скроллить */
.has-vhero .hdr:not(.scrolled) .nav a,
.has-vhero .hdr:not(.scrolled) .hdr-cta,
.has-vhero .hdr:not(.scrolled) .theme-btn,
.has-vhero .hdr:not(.scrolled) .lang button,
.has-vhero .hdr:not(.scrolled) .lang a{color:#F3F4F6}
.has-vhero .hdr:not(.scrolled) .lang button.on,
.has-vhero .hdr:not(.scrolled) .lang a.on{color:var(--accent-ink)}
.has-vhero .hdr:not(.scrolled) .hdr-cta,
.has-vhero .hdr:not(.scrolled) .theme-btn,
.has-vhero .hdr:not(.scrolled) .lang{border-color:rgba(243,244,246,.34)}
.has-vhero .hdr:not(.scrolled) .logo{filter:brightness(0) invert(1)}

@media (max-width:860px){
  .vhero-in{flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:64px}
  .vctrl{width:100%; flex-direction:row; align-items:center; justify-content:space-between}
  .vprogress{order:2} .varrows{order:1}
  .vseg{width:34px}
  .vsegs{gap:6px}
}
@media (max-width:480px){
  .vtitle{font-size:clamp(26px,8vw,34px)}
  .vsub{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .vslide,.vcopy,.varrow{transition-duration:.01ms !important}
}

/* ---------- hero poster (не используется, оставлен для старых версий) ---------- */
.hero{min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; padding:110px 0 60px}
.hero-bgword{position:absolute; left:50%; top:8%; transform:translateX(-50%); font-weight:900; font-size:clamp(120px,24vw,420px);
  letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.045); line-height:1; user-select:none; pointer-events:none; white-space:nowrap}
.hero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr); gap:clamp(28px,4vw,56px); align-items:center; width:100%}
.hero-kicker{display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,2.6vw,34px)}
.hero-kicker::before{content:""; width:40px; height:1px; background:var(--accent)}
.hero h1{margin:0; font-weight:900; letter-spacing:-.03em;
  font-size:clamp(44px,6.4vw,84px); line-height:.95; text-wrap:balance}
.hero h1 .ac{color:var(--accent)}
.hero-sub{margin-top:clamp(22px,2.6vw,34px); max-width:34ch; color:var(--dim); font-weight:400; font-size:clamp(18px,1.5vw,24px); line-height:1.45}
.hero-feats{display:flex; align-items:flex-start; gap:clamp(18px,2.4vw,36px); margin-top:clamp(30px,3.6vw,48px)}
.hfeat{display:flex; align-items:center; gap:15px; position:relative; min-width:0}
.hfeat+.hfeat{padding-left:clamp(18px,2.4vw,36px)}
.hfeat+.hfeat::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--line-2)}
.hfeat-ic{flex:0 0 auto; color:var(--accent); display:flex}
.hfeat-ic svg{width:48px; height:48px}
.hfeat-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.hfeat-txt b{font-weight:400; font-size:16px; color:var(--ink)}
.hfeat-txt span{font-size:16px; color:var(--dim)}

/* hero CTA buttons */
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(26px,3.2vw,40px)}
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15px; padding:16px 32px; border-radius:999px; transition:transform .25s var(--ease), box-shadow .25s, background .2s, color .2s, border-color .2s}
.btn-accent{background:var(--accent); color:var(--accent-ink)}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,196,0,.22)}
.btn-ghost{border:1px solid var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* poster product slide (right) */
.poster{position:relative; aspect-ratio:4/5; max-height:74svh; width:100%; margin-left:auto;
  border-radius:28px; background:linear-gradient(180deg,#20242E 0%, #12151C 100%); border:1px solid var(--line); overflow:hidden}
.poster-photo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.poster-photo img{width:84%; height:70%; object-fit:contain; filter:drop-shadow(0 30px 55px rgba(0,0,0,.5)); cursor:pointer}
.poster::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,10,14,.4) 0%, transparent 20%, transparent 52%, rgba(8,10,14,.88) 100%)}
.poster-head{position:absolute; left:0; right:0; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:clamp(20px,2.2vw,30px)}
.poster-tag{color:var(--ink); font-size:13px; letter-spacing:.16em}
.poster-disc{background:var(--accent); color:var(--accent-ink); font-family:"DM Mono",monospace; font-weight:500; font-size:14px; padding:7px 13px; border-radius:10px; white-space:nowrap}
.poster-disc:empty{display:none}
.poster-nav{position:absolute; right:clamp(14px,1.6vw,20px); top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px}
.poster-count{font-size:12px; color:var(--dim); margin-bottom:2px}
.poster-count b{color:var(--ink); font-weight:600}
.pnav{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:rgba(18,21,28,.5); backdrop-filter:blur(6px); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:.2s}
.pnav:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.poster-foot{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:clamp(22px,2.6vw,34px)}
.poster-info{display:flex; flex-direction:column; gap:4px; min-width:0}
.poster-type{font-size:14px; color:var(--dim)}
.poster-name{margin:0; font-weight:700; font-size:clamp(20px,2vw,28px); letter-spacing:-.01em; line-height:1.1}
.poster-price{display:flex; align-items:baseline; gap:8px; margin-top:6px}
.poster-price i{font-style:normal; font-size:14px; color:var(--dim); font-weight:500}
.poster-price b{font-weight:900; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.poster-cta{flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 24px; border-radius:26px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:15px; white-space:nowrap; transition:transform .2s, box-shadow .2s}
.poster-cta:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(255,196,0,.24)}
html[data-theme="light"] .poster::after{background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 22%, transparent 52%, rgba(255,255,255,.92) 100%)}
html[data-theme="light"] .pnav{background:rgba(255,255,255,.6); color:var(--ink)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .poster{aspect-ratio:1/1; max-height:none}
}
@media (max-width:560px){
  .poster-foot{flex-direction:column; align-items:stretch; gap:14px}
  .poster-cta{justify-content:center}
  .hero-feats{gap:16px; flex-wrap:wrap}
  .hfeat+.hfeat{padding-left:16px}
}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)}
/* padding-block, а не padding: горизонтальные отступы .wrap должны сохраниться */
.strip-in{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-block:0}
.strip-item{display:flex; align-items:center; gap:18px; padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,44px); min-width:0}
.strip-item+.strip-item{border-left:1px solid var(--line)}
.strip-item:first-child{padding-left:0}
.strip-item:last-child{padding-right:0}
.strip-ic{flex:0 0 auto; color:var(--accent); display:flex}
.strip-ic svg{width:48px; height:48px}
.strip-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.strip-txt b{font-weight:700; font-size:clamp(16px,1.3vw,18px); color:var(--ink); line-height:1.2}
.strip-txt span{font-size:clamp(13px,1vw,15px); color:var(--dim); line-height:1.35}
@media (max-width:920px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-item{padding:22px clamp(18px,3vw,30px)}
  .strip-item:nth-child(2n+1){padding-left:0}
  .strip-item:nth-child(2n){padding-right:0}
  .strip-item:nth-child(2n+1){border-left:0}
  .strip-item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .strip-in{grid-template-columns:1fr; padding-block:6px}
  .strip-item{padding:18px 0}
  .strip-item+.strip-item{border-left:0; border-top:1px solid var(--line)}
}

/* ---------- sections ---------- */
.section{padding:clamp(64px,8vw,120px) 0}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{margin:0; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(30px,4.6vw,52px); line-height:1}
.sec-head p{margin:14px 0 0; color:var(--dim); font-size:18px; max-width:54ch}

/* ---------- catalog ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips-box{margin-bottom:clamp(24px,3vw,40px)}
.chips-box.collapsed .chips{max-height:88px; overflow:hidden}
.chips-toggle{margin-top:10px; font-weight:800; font-size:13px; color:var(--accent); display:inline-flex; align-items:center; gap:6px; padding:4px 0}
.chips-toggle:hover{text-decoration:underline}
.chip{padding:9px 17px; border-radius:999px; border:1px solid var(--line-2); font-weight:700; font-size:13.5px; color:var(--dim); transition:.2s; white-space:nowrap}
.chip:hover{color:var(--ink); border-color:var(--ink)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.group{margin-bottom:clamp(40px,5vw,64px)}
.group:last-child{margin-bottom:0}
.group-head{display:flex; align-items:baseline; gap:18px; margin-bottom:18px; flex-wrap:wrap}
.group-head h3{margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(22px,3vw,36px); letter-spacing:-.01em}
.group-head .mono{font-size:11px}
.group-head .more{margin-left:auto; font-weight:800; font-size:13.5px; color:var(--accent)}
.group-head .more:hover{text-decoration:underline}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px}
.card{min-width:0; display:flex; flex-direction:column; border-radius:20px; background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%); border:1px solid var(--line); overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s}
.card:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card-tile{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden; display:block; width:100%; padding:0; cursor:pointer}
.card-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .card-tile img{transform:scale(1.05)}
.chip-row{position:absolute; left:12px; top:12px; display:flex; gap:6px; z-index:2}
.bdg{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.04em; padding:5px 9px; border-radius:7px; line-height:1}
.bdg-disc{background:#0B0E14; color:var(--accent)}
.bdg-inst{background:var(--accent); color:var(--accent-ink)}
.card-body{padding:15px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.card-cat{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.card-name{font-weight:500; font-size:16px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.card-price{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; row-gap:2px; margin-top:auto}
.p-now{font-weight:900; font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap}
.p-old{color:var(--faint); font-size:13px; text-decoration:line-through; white-space:nowrap}
.card-shops{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:11px; border-top:1px solid var(--line)}
.cshop{display:flex; align-items:center; justify-content:center; min-height:34px; padding:7px 4px; border-radius:9px;
  font-weight:800; font-size:11px; line-height:1.1; text-align:center; color:#fff; transition:.2s}
.cshop:hover{transform:translateY(-2px); filter:brightness(1.08)}
.cshop.evrika{background:var(--evrika)}
.cshop.kaspi{background:var(--kaspi)}
.cshop.halyk{background:var(--halyk)}

.cat-status{padding:40px 0; color:var(--dim)}
.cat-status .err{color:#FF7A6B}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px}
.sk{aspect-ratio:3/4; border-radius:20px; background:linear-gradient(100deg, var(--bg-2) 30%, #131722 50%, var(--bg-2) 70%); background-size:200% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (max-width:640px){
  .grid,.sk-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .card-body{padding:13px 12px 14px}
  .card-name{font-size:13px}
  .card-price{column-gap:6px}
  .p-now{font-size:16px} .p-old{font-size:11.5px}
  .cshop{font-size:10px; padding:6px 2px}
}
@media (max-width:400px){
  .card-body{padding:12px 10px 13px}
  .card-price{column-gap:4px}
  .p-now{font-size:15px} .p-old{font-size:10.5px}
}

/* ---------- advantages ---------- */
.adv{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* brand story block above the cards */
.brand-lead{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,64px); align-items:start;
  margin-bottom:clamp(32px,4vw,52px); padding-bottom:clamp(32px,4vw,52px); border-bottom:1px solid var(--line)}
.brand-lead-main{margin:0; font-size:clamp(20px,2.1vw,26px); line-height:1.45; font-weight:600; letter-spacing:-.01em}
.brand-lead-main .ac{color:var(--accent)}
.brand-lead-side{display:flex; flex-direction:column; gap:18px}
.brand-lead-side p{margin:0; color:var(--dim); font-size:16px; line-height:1.6}
@media (max-width:900px){ .brand-lead{grid-template-columns:1fr} }
.adv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.adv-card{border:1px solid var(--line); border-radius:20px; padding:26px 24px; background:var(--bg); transition:border-color .3s}
.adv-card:hover{border-color:var(--line-2)}
.adv-ic{width:48px; height:48px; border-radius:13px; background:rgba(255,196,0,.1); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.adv-card h3{margin:0 0 8px; font-size:17px; font-weight:800}
.adv-card p{margin:0; color:var(--dim); font-size:14px; line-height:1.55}
@media (max-width:980px){ .adv-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .adv-grid{grid-template-columns:1fr} }

/* ---------- tech ---------- */
.tech-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; padding:clamp(28px,4vw,52px) 0; border-top:1px solid var(--line)}
.tech-row:first-of-type{border-top:0}
.tech-row:nth-child(even) .tech-media{order:-1}
.tech-txt .num{font-family:"DM Mono",monospace; color:var(--accent); font-size:14px; margin-bottom:14px}
.tech-txt h3{margin:0 0 12px; font-weight:900; text-transform:uppercase; font-size:clamp(20px,2.4vw,32px); letter-spacing:-.01em}
.tech-txt p{margin:0; color:var(--dim); line-height:1.65; max-width:46ch}
.tech-media{position:relative; aspect-ratio:16/11; border-radius:24px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.tech-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%}
.tech-media .wm{position:absolute; right:16px; bottom:10px; font-weight:900; font-size:13px; letter-spacing:.3em; color:rgba(11,34,64,.18)}
@media (max-width:860px){
  .tech-row{grid-template-columns:1fr}
  .tech-row:nth-child(even) .tech-media{order:0}
}

/* ---------- faq ---------- */
.faq-wrap{max-width:860px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left;
  font-weight:700; font-size:clamp(15px,1.4vw,17.5px); padding:22px 4px; color:var(--ink)}
/* крест рисуем полосками: текстовый «+» центрируется по строке, а не по глифу, и съезжает */
.faq-q .pm{flex:0 0 auto; position:relative; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); transition:transform .3s var(--ease), background .2s, color .2s}
.faq-q .pm::before,.faq-q .pm::after{content:""; position:absolute; inset:0; margin:auto; background:currentColor}
.faq-q .pm::before{width:11px; height:1.5px}
.faq-q .pm::after{width:1.5px; height:11px}
.faq-item.open .pm{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.faq-a{overflow:hidden; max-height:0; transition:max-height .35s var(--ease)}
.faq-a p{margin:0 0 22px; color:var(--dim); line-height:1.65; max-width:64ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(40px,5vw,64px) 0 36px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:40px}
.foot .logo{height:16px; filter:brightness(0) invert(1); margin-bottom:16px}
.foot-brand p{margin:0; color:var(--dim); font-size:14px; max-width:30ch}
.foot-col h4{margin:0 0 14px; font-family:"DM Mono",monospace; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.foot-col a{display:block; padding:5px 0; color:var(--dim); font-size:14.5px; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:13px}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }

/* ---------- product modal ---------- */
.pmodal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:clamp(10px,3vw,40px);
  background:rgba(4,6,10,.7); backdrop-filter:blur(10px)}
.pmodal.open{display:flex}
/* панель не скроллится сама — скроллит .pm-scroll, иначе крестик уезжает с контентом */
.pm-panel{position:relative; width:min(1060px,100%); max-height:92svh; overflow:hidden; border-radius:24px;
  background:var(--bg-2); border:1px solid var(--line-2); display:flex}
.pm-scroll{flex:1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(20px,3vw,40px); padding:clamp(20px,3vw,36px)}
.pm-close{position:absolute; right:16px; top:16px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--dim); display:flex; align-items:center; justify-content:center; transition:.2s}
.pm-close:hover{color:var(--ink); border-color:var(--ink)}
.pm-gallery{display:flex; flex-direction:column; gap:10px; min-width:0}
.pm-main{position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#fff}
.pm-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pm-thumbs{display:flex; gap:8px; flex-wrap:wrap}
.pm-th{width:64px; height:64px; border-radius:10px; overflow:hidden; background:#fff; border:2px solid transparent; padding:0; cursor:pointer; transition:border-color .2s}
.pm-th img{width:100%; height:100%; object-fit:cover}
.pm-th.on{border-color:var(--accent)}
.pm-info{display:flex; flex-direction:column; gap:14px; min-width:0}
.pm-name{margin:0; font-weight:700; font-size:clamp(24px,3vw,36px); line-height:1.15; letter-spacing:-.01em; padding-right:40px}
.pm-price{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pm-price .p-now{font-size:clamp(24px,2.4vw,32px)}
.pm-badges{display:flex; gap:8px; flex-wrap:wrap}
.pm-warr{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; padding:6px 10px; border-radius:7px; border:1px solid var(--line-2); color:var(--dim)}
.pm-shops{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.shopbtn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 13px; border-radius:13px; color:#fff; transition:.2s; text-align:left; cursor:pointer}
.shopbtn:hover{transform:translateY(-2px)}
.shopbtn b{font-size:13.5px; font-weight:900} .shopbtn span{font-size:11px; opacity:.85; font-weight:700}
.shopbtn.evrika{background:var(--evrika)} .shopbtn.kaspi{background:var(--kaspi)} .shopbtn.halyk{background:var(--halyk)}
.pm-specs h4{margin:8px 0 4px; font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.08em}
.pm-specs-body.collapsed{max-height:260px; overflow:hidden; position:relative}
.pm-specs-body.collapsed::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background:linear-gradient(180deg, transparent, var(--bg-2))}
.pm-specs-toggle{margin-top:10px; font-weight:800; font-size:13px; color:var(--accent); padding:4px 0}
.pm-specs-toggle:hover{text-decoration:underline}
.pm-spec-group h5{margin:14px 0 4px; font-family:"DM Mono",monospace; font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.pm-row{display:flex; justify-content:space-between; gap:18px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.pm-row span{color:var(--dim)} .pm-row b{font-weight:700; text-align:right}
.pm-desc{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:4px}
.pm-desc h4{margin:18px 0 4px; font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.08em}
.pm-desc-body{color:var(--dim); font-size:14px; line-height:1.65}
.pm-desc-body p{margin:8px 0}
.pm-desc-body ul{margin:8px 0; padding-left:20px}
.pm-desc-body li{margin:4px 0}
.pm-desc-body strong,.pm-desc-body b{color:var(--ink)}
.pm-desc-body h1,.pm-desc-body h2,.pm-desc-body h3,.pm-desc-body h4,.pm-desc-body h5{font-size:15px; margin:14px 0 6px; color:var(--ink); text-align:left !important}
.pm-desc-body img,.pm-desc-body video,.pm-desc-body iframe{display:none}
.pm-desc-body table{border-collapse:collapse; width:100%; font-size:13px}
.pm-desc-body td,.pm-desc-body th{border:1px solid var(--line); padding:6px 8px; text-align:left}
@media (max-width:760px){
  .pm-panel{max-height:94svh}
  .pm-scroll{grid-template-columns:1fr}
  .pm-shops{grid-template-columns:1fr}
  .pm-main{aspect-ratio:4/3}
}

/* ---------- tech: кликабельные строки на главной ---------- */
.tech-link{transition:color .2s}
.tech-link:hover{color:var(--accent)}
.tech-more{display:inline-block; margin-top:16px; font-weight:800; font-size:14px; color:var(--accent)}
.tech-more:hover{text-decoration:underline}
a.tech-media{display:block; transition:border-color .3s, transform .3s var(--ease)}
a.tech-media:hover{border-color:var(--accent); transform:translateY(-3px)}
/* фотография вместо товарного рендера: без белого поля, кадр по краям */
.tech-media.photo{background:var(--bg-3)}
.tech-media.photo img{object-fit:cover; padding:0; transition:transform .5s var(--ease)}
.tech-media.photo:hover img{transform:scale(1.03)}
.tech-media.photo .wm{color:rgba(255,255,255,.55); text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Изображение показывается целиком, без обрезки: для товарных снимков и рендеров,
   где по краям кадра есть подписи или логотип. Подложка — под фон самой картинки,
   поэтому поля по бокам не видны. */
.tech-media.fit img, .tp-hero.fit img{object-fit:contain; padding:0}
.tech-media.fit.dark,  .tp-hero.fit.dark {background:#000308}
.tech-media.fit.warm,  .tp-hero.fit.warm {background:#F0E9E3}
.tech-media.fit.light, .tp-hero.fit.light{background:#FFFFFF}
/* на светлой подложке белый водяной знак не читается */
.tech-media.fit.warm .wm, .tech-media.fit.light .wm{color:rgba(11,34,64,.22); text-shadow:none}

/* ---------- tech: отдельная страница технологии ---------- */
.tpage{padding:calc(72px + clamp(28px,5vw,64px)) 0 clamp(48px,6vw,90px)}
.tp-back{display:inline-flex; align-items:center; gap:8px; font-family:"DM Mono",monospace; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); transition:color .2s}
.tp-back:hover{color:var(--accent)}
.tp-head{padding:clamp(22px,3vw,34px) 0 clamp(26px,3.4vw,42px); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:end}
.tp-head h1{margin:0; font-weight:900; text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(30px,5.4vw,72px); line-height:1.02}
.tp-lead{margin:0 0 6px; color:var(--ink); font-size:clamp(16px,1.5vw,21px); line-height:1.55}
@media (max-width:900px){
  .tp-head{grid-template-columns:1fr; gap:18px; align-items:start}
  .tp-lead{margin:0}
}

.tp-hero{margin-top:clamp(24px,3vw,38px); border-radius:24px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/7; background:var(--bg-3)}
.tp-hero img{width:100%; height:100%; object-fit:cover}
@media (max-width:640px){ .tp-hero{aspect-ratio:16/10; border-radius:18px} }

.tp-body{padding-top:clamp(10px,1.6vw,20px); color:var(--dim); font-size:16.5px; line-height:1.75}
/* секция = липкий заголовок слева + текст справа */
.tp-sec{display:grid; grid-template-columns:minmax(200px,300px) minmax(0,1fr); gap:clamp(28px,5vw,80px);
  padding:clamp(26px,3.4vw,44px) 0; border-top:1px solid var(--line)}
/* вступление — без пустой колонки под заголовок, текст от левого края */
.tp-sec.intro{border-top:0; padding-top:clamp(20px,2.6vw,32px); grid-template-columns:1fr}
.tp-sec.intro .tp-sec-head{display:none}
.tp-sec.intro .tp-sec-txt{max-width:92ch}
.tp-sec-head{position:sticky; top:104px; align-self:start}
.tp-sec-txt{max-width:80ch}
@media (max-width:900px){
  .tp-sec{grid-template-columns:1fr; gap:0; padding:26px 0}
  .tp-sec-head{position:static}
  .tp-sec-txt{max-width:none}
}
.tp-body p{margin:0 0 16px}
.tp-body .tp-lead-p{color:var(--ink); font-size:18.5px; font-weight:600; line-height:1.6; margin:0 0 18px}
.tp-body h2{margin:0; color:var(--ink); font-weight:900; text-transform:uppercase;
  font-size:clamp(19px,2.2vw,28px); letter-spacing:-.01em; line-height:1.15}
.tp-body h2::before{content:""; display:block; width:34px; height:3px; border-radius:2px; background:var(--accent); margin-bottom:16px}
.tp-body h3{margin:26px 0 10px; color:var(--ink); font-weight:800; font-size:17.5px; line-height:1.35}
.tp-body h3:first-child{margin-top:0}
.tp-body ul{margin:0 0 18px; padding-left:0; list-style:none}
.tp-body li{position:relative; padding-left:24px; margin:9px 0}
.tp-body li::before{content:""; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.tp-body li b{color:var(--ink); font-weight:700}
.tp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 26px}
.tp-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:var(--bg-2); display:flex; flex-direction:column; gap:6px}
.tp-card b{color:var(--ink); font-size:15px; font-weight:800}
.tp-card span{font-size:14px; line-height:1.5}
@media (max-width:760px){ .tp-cards{grid-template-columns:1fr} }

.tp-nav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(36px,5vw,60px); padding-top:26px; border-top:1px solid var(--line)}
.tp-nav-link{border:1px solid var(--line); border-radius:18px; padding:18px 22px; display:flex; flex-direction:column; gap:6px; transition:border-color .25s}
.tp-nav-link:hover{border-color:var(--accent)}
.tp-nav-link .mono{font-size:10.5px; color:var(--faint)}
.tp-nav-link b{font-weight:800; font-size:16px}
.tp-nav-link.next{grid-column:2; text-align:right; align-items:flex-end}
.tp-nav-link.prev{grid-column:1}
@media (max-width:640px){
  .tp-nav{grid-template-columns:1fr}
  .tp-nav-link.next,.tp-nav-link.prev{grid-column:1; text-align:left; align-items:flex-start}
}
.tp-cta{margin-top:clamp(28px,4vw,46px); padding:clamp(22px,3vw,32px); border-radius:22px; background:var(--bg-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:var(--dim); font-size:15.5px}

/* ---------- service centers ---------- */
.strip-link{width:100%; text-align:left; font:inherit; position:relative; transition:color .2s}
.strip-link .strip-txt b{transition:color .2s}
.strip-link:hover .strip-txt b{color:var(--accent)}
.strip-link:hover .strip-ic{color:var(--accent)}
.adv-card-link{width:100%; text-align:left; font:inherit; display:block; cursor:pointer}
.adv-card-link:hover{border-color:var(--accent)}
.adv-more{display:inline-block; margin-top:12px; font-size:13px; font-weight:800; color:var(--accent)}
.adv-card-link:hover .adv-more{text-decoration:underline}
.lnk{padding:0; font:inherit; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.lnk:hover{text-decoration:none}

.smodal .sm-panel{position:relative; width:min(720px,100%); max-height:92svh; overflow:hidden; border-radius:24px;
  background:var(--bg-2); border:1px solid var(--line-2); display:flex}
.smodal .sm-scroll{flex:1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; padding:clamp(22px,3vw,36px)}
.sm-title{margin:8px 0 6px; font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.15; letter-spacing:-.01em; padding-right:44px}
.sm-sub{margin:0 0 22px; color:var(--dim); font-size:14.5px}
.sm-empty{margin:0; padding:22px; border:1px dashed var(--line-2); border-radius:16px; color:var(--dim); font-size:14.5px; line-height:1.6}
.sm-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.sm-item{border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:5px; background:var(--bg-3)}
.sm-city{font-size:10.5px; color:var(--accent)}
.sm-name{margin:2px 0 0; font-size:15.5px; font-weight:800}
.sm-addr{margin:0; font-size:14px; color:var(--dim); line-height:1.5}
.sm-phone{font-size:15px; font-weight:800; color:var(--ink)}
.sm-phone:hover{color:var(--accent)}
.sm-hours{font-size:13px; color:var(--faint)}
.sm-map{margin-top:6px; font-size:13px; font-weight:800; color:var(--accent)}
.sm-map:hover{text-decoration:underline}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); z-index:90;
  background:#161B25; border:1px solid var(--line-2); color:var(--ink); font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:999px; display:flex; align-items:center; gap:10px; opacity:0; transition:.35s var(--ease); pointer-events:none}
.toast.show{transform:translate(-50%,0); opacity:1}
.toast .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

/* ============================================================
   SEO-обвязка: хлебные крошки, тэги статьи, хаб «Технологии».
   Генерируется tools/build-seo.mjs — руками страницы не правим.
   ============================================================ */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--dim); margin:0 0 22px}
.crumbs a{color:var(--dim); transition:.2s}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs b{font-weight:600; color:var(--ink)}

.tp-tags{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 0; padding:24px 0 0; border-top:1px solid var(--line)}
.tp-tags-l{font-size:12.5px; color:var(--dim); align-self:center; margin-right:4px}
.tp-tag{font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid var(--line-2); color:var(--dim)}

.hub-lead{max-width:760px; font-size:17px; line-height:1.6; color:var(--dim); margin:0 0 8px}
.hub-count{font-size:12.5px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
.tech-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:12.5px; color:var(--dim); margin:0 0 10px}
.tech-meta time{letter-spacing:.04em}
.tech-all{display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-weight:700; font-size:15px; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:3px; transition:.2s}
.tech-all:hover{gap:12px}

/* вопрос-ответ в конце статьи — без JS, чтобы текст видели краулеры */
.tp-faq{margin:clamp(34px,4vw,56px) 0 0; padding:clamp(26px,3vw,38px) 0 0; border-top:1px solid var(--line)}
.tp-faq > h2{margin:0 0 22px; color:var(--ink); font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(18px,2vw,25px); line-height:1.15}
.tp-faq > h2::before{content:""; display:block; width:34px; height:3px; border-radius:2px; background:var(--accent); margin-bottom:16px}
.tp-faq-item{padding:18px 0; border-top:1px solid var(--line)}
.tp-faq-item:first-of-type{border-top:0; padding-top:0}
.tp-faq-item h3{margin:0 0 8px; color:var(--ink); font-weight:700; font-size:17px; line-height:1.4}
.tp-faq-item p{margin:0; color:var(--dim); font-size:16px; line-height:1.7}