/* ==========================================================================
   LIFEPO4BOX — Design System
   Dark-first engineering aesthetic for LiFePO4 enclosures
   ========================================================================== */

:root{
  /* ---- Surfaces (dark) ---- */
  --bg:#080A0C;
  --bg-2:#0C0F12;
  --surf:#11151A;
  --surf-2:#161B21;
  --surf-3:#1C222A;

  /* ---- Lines ---- */
  --line:#20262E;
  --line-2:#2A323B;
  --line-3:#39434E;

  /* ---- Ink ---- */
  --ink:#EEF1F3;
  --ink-2:#A3ADB7;
  --ink-3:#6C7783;
  --ink-4:#4A545E;

  /* ---- Accent ---- */
  --acc:#B7FF3C;
  --acc-d:#9CE01C;
  --acc-dim:rgba(183,255,60,.12);
  --acc-line:rgba(183,255,60,.28);
  --acc-ink:#0A0C08;
  --acc-tx:#B7FF3C;          /* акцент як текст/тонкий індикатор */

  /* ---- Тематичні поверхні ---- */
  --grid:rgba(255,255,255,.022);
  --sheen:rgba(255,255,255,.04);
  --hdr-bg:rgba(8,10,12,.72);
  --hdr-bg-stuck:rgba(8,10,12,.9);
  --sh-dd:0 20px 50px rgba(0,0,0,.6);
  --sh-nav:0 24px 50px rgba(0,0,0,.6);
  --sh-toast:0 16px 44px rgba(0,0,0,.55);
  --hero-glow:rgba(183,255,60,.07);
  --hero-glow2:rgba(78,216,255,.045);
  --cta-glow:rgba(183,255,60,.12);
  --err-bg:rgba(255,90,78,.08);
  --err-ln:rgba(255,90,78,.25);
  --err-tx:#FFA79F;
  --amber-dim:rgba(255,179,64,.14);

  color-scheme:dark;

  /* ---- Status ---- */
  --red:#FF5A4E;
  --amber:#FFB340;
  --cyan:#4ED8FF;

  /* ---- Geometry ---- */
  --r-xs:4px;  --r-s:8px;  --r:12px;  --r-l:18px;  --r-xl:26px;
  --wrap:1280px;
  --hdr-h:76px;
  --hdr-h-sm:60px;

  /* ---- Motion ---- */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  /* ---- Type ---- */
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.65 var(--f);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"cv09" 1,"ss03" 1;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
::selection{background:var(--acc);color:var(--acc-ink)}

h1,h2,h3,h4,h5{
  margin:0 0 .5em;
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.028em;
  color:var(--ink);
}
h1{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.035em}
h2{font-size:clamp(25px,3.5vw,42px);letter-spacing:-.032em}
h3{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em}
h4{font-size:15px;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.display{
  font-size:clamp(34px,7.4vw,84px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:700;
  margin:0;
}
.display em{font-style:normal;color:var(--acc-tx)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:500 11px/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--line-3);flex:0 0 auto;
}
.eyebrow--acc{color:var(--acc-tx)}
.eyebrow--acc::before{background:var(--acc-line)}

.secnum{
  font:500 11px/1 var(--f-mono);
  letter-spacing:.14em;
  color:var(--acc-tx);
}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.nowrap{white-space:nowrap}
.lead{font-size:clamp(15px,1.55vw,18px);line-height:1.6;color:var(--ink-2);max-width:60ch}

/* Technical value — engineering readout */
.val{
  font:600 var(--val-size,17px)/1 var(--f-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--ink);
}
.val u{text-decoration:none;font-size:.62em;color:var(--ink-3);margin-left:2px;font-weight:500}

/* Micro tag / chip label */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border:1px solid var(--line-2);border-radius:100px;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--grid);
}
.tag--acc{color:var(--acc-tx);border-color:var(--acc-line);background:var(--acc-dim)}
.tag--dot::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3.5vw,40px);width:100%}
.sect{padding:clamp(56px,8vw,110px) 0;position:relative}
.sect--tight{padding-top:0}
.sect--light{background:var(--bg-2)}

.sect__hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap;
}
.sect__hd h2{margin:0;max-width:20ch}
.sect__hd p{max-width:46ch;margin:0}
.sect__hd-l{min-width:0}
.sect__link{
  display:inline-flex;align-items:center;gap:8px;
  font:500 13.5px/1 var(--f);color:var(--ink-2);
  padding-bottom:3px;border-bottom:1px solid var(--line-2);
  transition:color .2s var(--e),border-color .2s var(--e);
  white-space:nowrap;
}
.sect__link:hover{color:var(--acc-tx);border-color:var(--acc-line)}
.sect__link svg{transition:transform .25s var(--e-out)}
.sect__link:hover svg{transform:translateX(4px)}

/* Hairline rule with technical ticks */
.rule{height:1px;background:var(--line);position:relative;margin:0}
.rule::before,.rule::after{
  content:"";position:absolute;top:-2px;width:1px;height:5px;background:var(--line-3);
}
.rule::before{left:0}
.rule::after{right:0}

/* Technical background grid */
.gridbg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gridbg::before{
  content:"";position:absolute;inset:-1px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,7vw,96px) clamp(60px,7vw,96px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 40%,#000 20%,transparent 78%);
}
.sect > .wrap{position:relative;z-index:1}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;min-height:44px;
  border:1px solid transparent;border-radius:var(--r-s);
  background:var(--acc);color:var(--acc-ink);
  font:600 14.5px/1.2 var(--f);letter-spacing:-.008em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .18s var(--e),border-color .18s var(--e),color .18s var(--e),transform .18s var(--e);
}
.btn:hover{background:var(--acc-d);color:var(--acc-ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn svg{flex:0 0 auto;transition:transform .25s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}

.btn--lg{padding:15px 30px;min-height:52px;font-size:15.5px}
.btn--sm{padding:8px 14px;min-height:36px;font-size:13px}
.btn--block{display:flex;width:100%}

.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{background:var(--surf-2);border-color:var(--line-3);color:var(--ink)}

.btn--outline{background:transparent;border-color:var(--acc-line);color:var(--acc-tx)}
.btn--outline:hover{background:var(--acc-dim);border-color:var(--acc-tx);color:var(--acc-tx)}

.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:#fff;color:var(--bg)}

.btn--danger{background:transparent;border-color:rgba(255,90,78,.3);color:var(--red)}
.btn--danger:hover{background:rgba(255,90,78,.1);color:var(--red)}

/* ==========================================================================
   Forms
   ========================================================================== */

.fld{margin-bottom:16px}
.fld label{
  display:block;margin-bottom:7px;
  font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
select,textarea{
  width:100%;padding:12px 14px;min-height:46px;
  border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--surf);color:var(--ink);
  font:400 15px/1.4 var(--f);
  transition:border-color .18s var(--e),background .18s var(--e),box-shadow .18s var(--e);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--acc-line);background:var(--surf-2);
  box-shadow:0 0 0 3px var(--acc-dim);
}
textarea{min-height:104px;resize:vertical;line-height:1.6}
select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5l4-4' fill='none' stroke='%236C7783' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;
}
.fld--err input,.fld--err select,.fld--err textarea{border-color:rgba(255,90,78,.5)}
.fld__err{color:var(--red);font-size:12.5px;margin-top:5px}
.req{color:var(--acc-tx)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ==========================================================================
   Header
   ========================================================================== */

.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--hdr-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--e),background .3s var(--e);
}
.hdr.is-stuck{
  background:var(--hdr-bg-stuck);
  border-bottom-color:var(--line);
}
.hdr__in{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  height:var(--hdr-h);
  transition:height .3s var(--e);
}
.hdr.is-stuck .hdr__in{height:var(--hdr-h-sm)}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo__m{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:var(--acc);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--e-out);
}
.logo:hover .logo__m{transform:rotate(-6deg) scale(1.04)}
.logo__t{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.logo__t b{
  font:700 15.5px/1 var(--f);letter-spacing:-.03em;color:var(--ink);
  white-space:nowrap;
}
.logo__t i{
  font:500 9.5px/1.3 var(--f-mono);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;
}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a,.nav__ddb{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:var(--r-s);border:0;background:none;
  font:500 14px/1 var(--f);letter-spacing:-.008em;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;
  transition:color .18s var(--e),background .18s var(--e);
}
.nav a:hover,.nav__ddb:hover{color:var(--ink);background:var(--surf-2)}
.nav a.is-on,.nav__ddb.is-on{color:var(--acc-tx)}
.nav__dd{position:relative}
.nav__dd.is-open .nav__ddb{color:var(--ink);background:var(--surf-2)}
.nav__ddb svg{transition:transform .22s var(--e);opacity:.6}
.nav__dd.is-open .nav__ddb svg{transform:rotate(180deg)}
.nav__ddm{
  display:none;position:absolute;left:0;top:calc(100% + 10px);min-width:236px;
  background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r);
  padding:7px;z-index:110;
  box-shadow:var(--sh-dd);
}
.nav__dd.is-open .nav__ddm{display:block;animation:ddIn .2s var(--e-out)}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav__ddm a{display:block;width:100%;padding:10px 12px;font-size:14px}

.hdr__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr__phone{
  display:inline-flex;align-items:center;gap:7px;
  font:600 13.5px/1 var(--f-mono);letter-spacing:-.01em;color:var(--ink);
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  white-space:nowrap;transition:border-color .18s var(--e),color .18s var(--e);
}
.hdr__phone:hover{border-color:var(--acc-line);color:var(--acc-tx)}
.hdr__phone svg{opacity:.5}

.langsw{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;flex:0 0 auto}
.langsw a{
  padding:7px 9px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;
  color:var(--ink-4);transition:color .18s var(--e),background .18s var(--e);
}
.langsw a:hover{color:var(--ink-2);background:var(--surf-2)}
.langsw a.is-on{background:var(--acc);color:var(--acc-ink)}

.cartbtn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-s);
  border:1px solid var(--line);color:var(--ink-2);
  transition:border-color .18s var(--e),color .18s var(--e),background .18s var(--e);
}
.cartbtn:hover{border-color:var(--acc-line);color:var(--acc-tx);background:var(--acc-dim)}
.cartbtn__n{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  background:var(--acc);color:var(--acc-ink);border-radius:10px;
  font:700 10.5px/19px var(--f-mono);text-align:center;
  border:2px solid var(--bg);
}
.burger{
  display:none;width:42px;height:42px;padding:0;
  border:1px solid var(--line);background:none;border-radius:var(--r-s);
  cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;transition:.24s var(--e)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;overflow:hidden;
  padding:clamp(48px,7vw,92px) 0 clamp(52px,7vw,96px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 85% at 78% 8%,var(--hero-glow) 0%,transparent 55%),
    radial-gradient(90% 70% at 12% 100%,var(--hero-glow2) 0%,transparent 60%),
    var(--bg);
}
.hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.hero__l{min-width:0}
.hero .display{margin-bottom:22px}
.hero__lead{
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.6;color:var(--ink-2);
  max-width:50ch;margin:0 0 30px;
}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(32px,4.5vw,52px)}

/* Hero spec strip — engineering readout */
.hero__specs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.hero__spec{padding:18px 16px 0 0;position:relative}
.hero__spec::before{
  content:"";position:absolute;top:-1px;left:0;width:22px;height:1px;background:var(--acc-tx);
}
.hero__spec b{
  display:block;font:600 clamp(20px,2.4vw,27px)/1 var(--f-mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink);margin-bottom:7px;
}
.hero__spec b u{text-decoration:none;font-size:.5em;color:var(--ink-3);margin-left:3px;font-weight:500}
.hero__spec span{
  display:block;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);
}

/* Hero artwork frame */
.hero__art{position:relative;min-width:0}
.hero__frame{
  position:relative;padding:clamp(20px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--r-l);
  background:
    linear-gradient(160deg,var(--sheen) 0%,transparent 42%),
    var(--surf);
  overflow:hidden;
}
.hero__frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
}
.hero__frame svg{position:relative;z-index:1;width:100%;height:auto}
/* corner brackets */
.hero__frame i{position:absolute;width:13px;height:13px;border:1px solid var(--acc-tx);opacity:.55;z-index:2}
.hero__frame i:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0}
.hero__frame i:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0}
.hero__frame i:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0}
.hero__frame i:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0}

.hero__labels{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;justify-content:center;
}

/* ==========================================================================
   Product card
   ========================================================================== */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(12px,1.4vw,18px);
}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .28s var(--e),background .28s var(--e),transform .28s var(--e-out);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:0 0 0 1px transparent,0 14px 40px -16px rgba(183,255,60,0);
  transition:box-shadow .3s var(--e);
}
.card:hover{border-color:var(--line-3);background:var(--surf-2);transform:translateY(-3px)}
.card:hover::after{box-shadow:0 0 0 1px var(--acc-line),0 20px 44px -18px rgba(183,255,60,.28)}

.card__img{
  position:relative;display:block;aspect-ratio:16/11;overflow:hidden;
  background:
    linear-gradient(165deg,var(--sheen) 0%,transparent 50%),
    var(--bg-2);
  border-bottom:1px solid var(--line);
}
.card__img::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}
.card__img img,.card__img svg{
  width:100%;height:100%;object-fit:contain;
  transition:transform .5s var(--e-out);
}
.card:hover .card__img img,.card:hover .card__img svg{transform:scale(1.045)}
.card__badge{
  position:absolute;top:11px;left:11px;z-index:3;
  padding:4px 8px;border-radius:var(--r-xs);
  background:var(--acc);color:var(--acc-ink);
  font:700 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}
.card__sku{
  position:absolute;top:11px;right:11px;z-index:3;
  padding:4px 7px;border-radius:var(--r-xs);
  background:var(--bg-2);border:1px solid var(--line);
  font:500 9.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3);
}

.card__b{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.card__cat{
  font:500 10px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc-tx);margin-bottom:9px;
}
.card__t{
  display:block;font:600 15px/1.35 var(--f);letter-spacing:-.018em;
  color:var(--ink);margin-bottom:12px;
  transition:color .2s var(--e);
}
.card:hover .card__t{color:var(--ink)}

/* Spec readout inside card */
.card__specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;margin-bottom:14px;
}
.card__spec{background:var(--surf);padding:8px 9px;transition:background .28s var(--e)}
.card:hover .card__spec{background:var(--surf-2)}
.card__spec b{
  display:block;font:600 13px/1 var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);white-space:nowrap;
}
.card__spec b u{text-decoration:none;font-size:.72em;color:var(--ink-3);margin-left:1px;font-weight:500}
.card__spec span{
  display:block;margin-top:4px;font:500 8.5px/1 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
}

.card__f{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:13px;border-top:1px solid var(--line);
}
.card__p{
  font:600 19px/1 var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);white-space:nowrap;
}
.card__old{
  display:block;font:400 11.5px/1 var(--f-mono);color:var(--ink-4);
  text-decoration:line-through;margin-bottom:4px;
}
.card__add{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;min-height:38px;border-radius:var(--r-s);
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font:600 12.5px/1 var(--f);cursor:pointer;white-space:nowrap;
  transition:all .2s var(--e);
}
.card__add:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.card__add:disabled{opacity:.45;cursor:not-allowed}

/* ==========================================================================
   Catalog
   ========================================================================== */

.cat{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(18px,2.6vw,34px);align-items:start}
.filters{
  position:sticky;top:calc(var(--hdr-h-sm) + 18px);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;
}
.filters > .eyebrow{margin-bottom:16px}
.fgroup{border-top:1px solid var(--line);padding-top:17px;margin-top:17px}
.fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fgroup h4{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:11px;
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:100px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font:500 12.5px/1 var(--f-mono);letter-spacing:-.01em;cursor:pointer;
  transition:all .18s var(--e);
}
.chip:hover{border-color:var(--line-3);color:var(--ink)}
.chip.is-on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}

.cat__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.cat__count{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cat__sort{display:flex;align-items:center;gap:10px}
.cat__sort select{width:auto;min-height:38px;padding:8px 34px 8px 12px;font-size:13.5px}

/* Promo block inside filters */
.fpromo{
  border:1px solid var(--acc-line);border-radius:var(--r-s);
  background:var(--acc-dim);padding:14px;
}
.fpromo b{display:block;font:600 13.5px/1.35 var(--f);color:var(--ink);margin-bottom:6px;letter-spacing:-.015em}
.fpromo a{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:8px 0 4px;
  font:600 12.5px/1 var(--f);color:var(--acc-tx);
}
.fpromo a:hover{text-decoration:underline}

/* ==========================================================================
   Product page
   ========================================================================== */

.prod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3.4vw,46px);align-items:start}
.prod__media{
  position:relative;
  background:
    linear-gradient(165deg,var(--sheen) 0%,transparent 48%),
    var(--surf);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(16px,2.4vw,28px);overflow:hidden;
}
.prod__media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
}
.prod__media svg,.prod__media img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--r-s)}

.prod__head{margin-bottom:20px}
.prod__head h1{font-size:clamp(22px,2.7vw,33px);margin-bottom:10px}
.prod__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}

.prod__pricebox{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.prod__price{
  font:650 clamp(28px,3.4vw,40px)/1 var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;color:var(--ink);
}
.prod__old{font:400 16px/1 var(--f-mono);color:var(--ink-4);text-decoration:line-through;padding-bottom:4px}
.stock{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding-bottom:4px;
  font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-tx);
}
.stock::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acc-tx);
  box-shadow:0 0 0 3px var(--acc-dim);
}
.stock--no{color:var(--amber)}
.stock--no::before{background:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}

.specs{width:100%;border-collapse:collapse;margin:0 0 22px}
.specs td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.specs td:first-child{
  color:var(--ink-4);width:46%;padding-right:16px;
  font:500 10.5px/1.5 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
}
.specs td:last-child{color:var(--ink);font-weight:500}
.specs td a{display:inline-block;min-height:30px;padding:6px 0;color:var(--acc-tx)}
.specs td a:hover{text-decoration:underline}
.specs tr:last-child td{border-bottom:0}

.buybar{display:flex;gap:10px;align-items:stretch;margin:20px 0 0;flex-wrap:wrap}
.qty{
  display:inline-flex;align-items:center;overflow:hidden;flex:0 0 auto;
  width:max-content;max-width:100%;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surf);
}
.qty button{
  width:42px;height:50px;border:0;background:none;color:var(--ink-2);
  font-size:18px;cursor:pointer;line-height:1;transition:background .16s var(--e),color .16s var(--e);
}
.qty button:hover{background:var(--surf-3);color:var(--ink)}
.qty input{
  width:50px;height:50px;min-height:0;border:0;background:none;text-align:center;padding:0;
  font:600 15px/1 var(--f-mono);color:var(--ink);
}
.qty input:focus{box-shadow:none;background:none}

.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,26px)}
.panel+.panel{margin-top:18px}

.content{font-size:15px;line-height:1.72;color:var(--ink-2)}
.content h2{font-size:clamp(19px,2vw,24px);margin:30px 0 12px;color:var(--ink)}
.content h3{font-size:17px;margin:24px 0 9px;color:var(--ink)}
.content > :first-child{margin-top:0}
.content ul,.content ol{padding-left:20px;margin:0 0 1em}
.content li{margin:6px 0}
.content li::marker{color:var(--acc-tx)}
.content strong{color:var(--ink);font-weight:600}
.content a{color:var(--acc-tx);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Feature sections — homepage
   ========================================================================== */

/* ---- 01 Advantages ---- */
.advs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.adv{
  background:var(--surf);padding:clamp(20px,2.5vw,28px);
  position:relative;transition:background .3s var(--e);
}
.adv:hover{background:var(--surf-2)}
.adv__n{
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--acc-tx);
  display:block;margin-bottom:clamp(28px,4vw,48px);
}
.adv__ico{color:var(--ink-3);margin-bottom:16px;transition:color .3s var(--e)}
.adv:hover .adv__ico{color:var(--acc-tx)}
.adv h3{font-size:16.5px;margin-bottom:8px;letter-spacing:-.02em}
.adv p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0}

/* ---- 02 Voltage selector ---- */
.vsel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)}
.vcard{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.8vw,32px);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s var(--e),background .3s var(--e),transform .3s var(--e-out);
}
.vcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--acc-tx),transparent);
  opacity:0;transition:opacity .3s var(--e);
}
.vcard:hover{border-color:var(--line-3);background:var(--surf-2);transform:translateY(-3px)}
.vcard:hover::before{opacity:1}
.vcard__v{
  font:650 clamp(30px,3.8vw,44px)/1 var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;color:var(--acc-tx);margin-bottom:6px;
}
.vcard__v u{text-decoration:none;font-size:.45em;color:var(--ink-3);margin-left:4px;font-weight:500}
.vcard__s{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:18px;
}
.vcard h3{font-size:17px;margin-bottom:8px}
.vcard p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0 0 20px}
.vcard__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font:600 13px/1 var(--f);color:var(--ink-2);transition:color .2s var(--e);
}
.vcard:hover .vcard__go{color:var(--acc-tx)}
.vcard__go svg{transition:transform .25s var(--e-out)}
.vcard:hover .vcard__go svg{transform:translateX(4px)}

/* ---- 03 Anatomy / BMS engineering block ---- */
.anat{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,56px);align-items:center;
}
.anat__art{
  position:relative;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(165deg,var(--sheen) 0%,transparent 46%),var(--surf);
  padding:clamp(18px,2.6vw,30px);overflow:hidden;
}
.anat__art::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
}
.anat__art svg{position:relative;z-index:1}
.anat__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:26px}
.anp{background:var(--surf);padding:16px 17px;transition:background .28s var(--e)}
.anp:hover{background:var(--surf-2)}
.anp__k{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.anp__k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc-tx);opacity:.85;flex:0 0 auto}
.anp__v{font:500 13.5px/1.45 var(--f);color:var(--ink);letter-spacing:-.015em}
.anp__v u{text-decoration:none;font-family:var(--f-mono);font-size:.92em;color:var(--acc-tx)}

/* ---- 04 Energy flow ---- */
.flow{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--sheen) 0%,transparent 50%),var(--surf);
  padding:clamp(24px,3.6vw,48px);overflow:hidden;
}
.flow__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px);position:relative;z-index:1;
}
.fnode{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(16px,2.2vw,24px) 12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s var(--e),background .3s var(--e);
}
.fnode--hot{border-color:var(--acc-line);background:var(--acc-dim)}
.fnode:hover{border-color:var(--line-3)}
.fnode--hot:hover{border-color:var(--acc-tx)}
.fnode__ico{color:var(--ink-3);margin-bottom:13px}
.fnode--hot .fnode__ico{color:var(--acc-tx)}
.fnode__n{
  font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:8px;
}
.fnode b{font:600 14px/1.3 var(--f);letter-spacing:-.02em;color:var(--ink);display:block;margin-bottom:5px}
.fnode--hot b{color:var(--acc-tx)}
.fnode span{font:500 11px/1.4 var(--f-mono);color:var(--ink-4);display:block}
/* connector line between nodes */
.fnode::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(10px,1.6vw,20px) - 1px);
  width:clamp(10px,1.6vw,20px);height:1px;background:var(--line-2);z-index:0;
}
.fnode:last-child::after{display:none}
.flow.is-live .fnode::after{
  background:linear-gradient(90deg,var(--line-2) 0%,var(--line-2) 100%);
  background-image:linear-gradient(90deg,var(--acc-tx) 0 22%,transparent 22% 100%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:flowPulse 2.6s linear infinite;
}
.flow.is-live .fnode:nth-child(2)::after{animation-delay:.3s}
.flow.is-live .fnode:nth-child(3)::after{animation-delay:.6s}
@keyframes flowPulse{
  0%{background-position:-120% 0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:220% 0;opacity:0}
}

/* ---- 05 Trust ---- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tr{background:var(--surf);padding:clamp(20px,2.4vw,26px);transition:background .28s var(--e)}
.tr:hover{background:var(--surf-2)}
.tr__ico{color:var(--acc-tx);margin-bottom:15px;opacity:.85}
.tr b{
  display:block;font:600 clamp(17px,2vw,21px)/1.15 var(--f-mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px;
}
.tr b u{text-decoration:none;font-size:.6em;color:var(--ink-3);margin-left:3px;font-weight:500;font-family:var(--f)}
.tr span{display:block;font:400 13px/1.55 var(--f);color:var(--ink-3)}

/* ==========================================================================
   CTA
   ========================================================================== */

.cta{
  position:relative;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:
    radial-gradient(110% 130% at 85% 10%,var(--cta-glow) 0%,transparent 58%),
    linear-gradient(160deg,var(--sheen) 0%,transparent 45%),
    var(--surf);
  padding:clamp(32px,5.5vw,72px) clamp(24px,4.5vw,64px);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 90% at 70% 30%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 90% at 70% 30%,#000,transparent 72%);
}
.cta__in{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{
  font-size:clamp(26px,4.4vw,50px);line-height:1.02;letter-spacing:-.04em;
  margin:0 0 12px;max-width:15ch;
}
.cta h2 em{font-style:normal;color:var(--acc-tx)}
.cta p{color:var(--ink-2);max-width:44ch;margin:0;font-size:15px}
.cta__btns{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}

/* ==========================================================================
   Configurator
   ========================================================================== */

.cfg{display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:clamp(18px,2.6vw,30px);align-items:start}
.cfg__steps{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.step{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.3vw,24px);
}
.step h3{display:flex;align-items:center;gap:11px;margin-bottom:5px;font-size:17px}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 auto;border-radius:var(--r-xs);
  background:var(--acc-dim);border:1px solid var(--acc-line);color:var(--acc-tx);
  font:600 11px/1 var(--f-mono);
}
.step__hint{font-size:13px;color:var(--ink-3);margin:0 0 16px}

.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__b{
  display:block;height:100%;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-2);
  transition:border-color .18s var(--e),background .18s var(--e);
}
.opt:hover .opt__b{border-color:var(--line-3)}
.opt input:checked + .opt__b{border-color:var(--acc-tx);background:var(--acc-dim)}
.opt input:focus-visible + .opt__b{box-shadow:0 0 0 3px var(--acc-dim)}
.opt__t{display:block;font:600 14px/1.35 var(--f);letter-spacing:-.015em;color:var(--ink)}
.opt__h{display:block;font:400 11.5px/1.45 var(--f);color:var(--ink-4);margin-top:4px}
.opt__p{
  display:inline-block;margin-top:7px;
  font:600 12px/1 var(--f-mono);color:var(--acc-tx);
}
.cells-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cells-big{
  font:650 34px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.05em;
  color:var(--acc-tx);min-width:58px;text-align:center;
}
.cells-big u{text-decoration:none;font-size:.42em;color:var(--ink-3);font-weight:500}
.cells-row input[type=range]{
  flex:1;min-width:170px;height:34px;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.cells-row input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-2)}
.cells-row input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.cells-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;
  background:var(--acc);border:2px solid var(--bg);cursor:pointer;
  transition:transform .15s var(--e);
}
.cells-row input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--bg);
  background:var(--acc);cursor:pointer;
}
.cells-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.cells-row input[type=range]:focus-visible{outline:2px solid var(--acc-tx);outline-offset:4px;border-radius:var(--r-s)}
.cells-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.cells-quick .chip{font-weight:600}

.switch{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:14px;
  padding:14px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg-2);
  transition:border-color .18s var(--e);
}
.switch:hover{border-color:var(--line-3)}
.switch:has(input:checked){border-color:var(--acc-line);background:var(--acc-dim)}
.switch input{margin-top:2px;accent-color:var(--acc);width:17px;height:17px;flex:0 0 auto}
.switch b{display:block;font:600 14px/1.35 var(--f);color:var(--ink);letter-spacing:-.015em}
.switch span > span{display:block;font:400 11.5px/1.45 var(--f);color:var(--ink-4);margin-top:3px}
.customin{margin-top:10px;display:none}
.customin.is-on{display:block}

.cfg__side{position:sticky;top:calc(var(--hdr-h-sm) + 18px);display:flex;flex-direction:column;gap:14px}
.result{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.result__hd{
  padding:15px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);
  font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.result__svg{
  position:relative;padding:16px;border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,var(--sheen) 0%,transparent 50%),var(--bg-2);
}
.result__svg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}
.result__svg svg{position:relative;z-index:1;width:100%;height:auto}
.result__body{padding:18px}
.rl{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.rl:last-of-type{border-bottom:0}
.rl__k{color:var(--ink-4);flex:0 0 auto;max-width:44%;font-size:12.5px}
.rl__v{text-align:right;font-weight:500;color:var(--ink)}
.rl__v i{font-style:normal;font-family:var(--f-mono);color:var(--acc-tx);font-weight:600;margin-left:7px;font-size:12.5px}

.dimbox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;margin:16px 0}
.dimbox div{background:var(--bg-2);padding:11px 6px;text-align:center}
.dimbox b{
  display:block;font:600 16px/1 var(--f-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);
}
.dimbox span{display:block;margin-top:5px;font:500 8.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

.totalrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 0 4px;margin-top:14px;border-top:1px solid var(--line-2);
}
.totalrow > span{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.totalrow b{font:650 27px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--acc-tx)}

.note{
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--bg-2);padding:14px 16px;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
.note b{
  display:block;margin-bottom:6px;color:var(--ink-2);
  font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

.cartwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(18px,2.6vw,30px);align-items:start}
.co{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(18px,2.6vw,30px);align-items:start}

.ci{
  display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.ci:first-child{padding-top:0}
.ci:last-child{border-bottom:0;padding-bottom:0}
.ci__img{
  width:104px;height:82px;border-radius:var(--r-s);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
}
.ci__img svg,.ci__img img{width:100%;height:100%;object-fit:contain}
.ci__t{display:block;font:600 15px/1.4 var(--f);letter-spacing:-.018em;color:var(--ink);margin-bottom:7px}
.ci__t:hover{color:var(--acc-tx)}
.ci__cfg{font:400 12.5px/1.6 var(--f);color:var(--ink-4)}
.ci__cfg div{margin:2px 0}
.ci__r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;text-align:right}
.ci__sum{font:600 17px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.ci__rm{
  background:none;border:0;padding:2px 0;cursor:pointer;
  font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  transition:color .18s var(--e);
}
.ci__rm:hover{color:var(--red)}

.summary{
  position:sticky;top:calc(var(--hdr-h-sm) + 18px);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px;
}
.summary__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.summary__row b{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.summary__tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--line-2);margin-top:14px;padding-top:16px;margin-bottom:18px;
}
.summary__tot > span{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.summary__tot b{font:650 26px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--acc-tx)}

.radios{display:flex;flex-direction:column;gap:8px}
.radio{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--bg-2);font-size:14px;color:var(--ink-2);
  transition:border-color .18s var(--e),background .18s var(--e),color .18s var(--e);
}
.radio:hover{border-color:var(--line-3);color:var(--ink)}
.radio input{accent-color:var(--acc);width:17px;height:17px;margin:0;flex:0 0 auto}
.radio:has(input:checked){border-color:var(--acc-line);background:var(--acc-dim);color:var(--ink)}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr{
  position:relative;margin-top:clamp(52px,7vw,96px);
  border-top:1px solid var(--line);background:var(--bg-2);
  padding:clamp(44px,6vw,76px) 0 0;overflow:hidden;
}
.ftr::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc-line) 30%,var(--acc-line) 70%,transparent);
}
.ftr__in{
  display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.5vw,48px);
}
.ftr__brand{min-width:0}
.ftr__logo{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.ftr__logo .logo__m{width:36px;height:36px}
.ftr__logo b{font:700 17px/1 var(--f);letter-spacing:-.035em;color:var(--ink)}
.ftr__brand p{font-size:13.5px;line-height:1.65;color:var(--ink-3);max-width:38ch;margin:0 0 20px}
.ftr__soc{display:flex;gap:8px;flex-wrap:wrap}
.ftr__soc a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border:1px solid var(--line-2);border-radius:100px;
  font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3);
  transition:all .18s var(--e);
}
.ftr__soc a:hover{border-color:var(--acc-line);color:var(--acc-tx);background:var(--acc-dim)}

.ftr__col h4{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:15px;
}
.ftr__col a,.ftr__col span{
  display:block;padding:5px 0;font-size:13.5px;color:var(--ink-3);
  transition:color .18s var(--e);
}
.ftr__col a:hover{color:var(--acc-tx)}
.ftr__col .mono{font-size:13px;color:var(--ink-2)}
.ftr__hours{font-size:12.5px!important;color:var(--ink-4)!important;padding-top:10px!important;line-height:1.5}

.ftr__bot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,60px);padding:20px 0;border-top:1px solid var(--line);
  font:500 11px/1.5 var(--f-mono);letter-spacing:.05em;color:var(--ink-4);
}
.ftr__adm{color:var(--line);transition:color .2s var(--e)}
.ftr__adm:hover{color:var(--ink-4)}

/* ==========================================================================
   Misc
   ========================================================================== */

.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 0 0;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
}
.crumbs a{color:var(--ink-4);transition:color .18s var(--e)}
.crumbs a:hover{color:var(--acc-tx)}
.crumbs span{opacity:.4}

.pagehd{padding:clamp(20px,3vw,34px) 0 clamp(20px,3vw,30px)}
.pagehd h1{margin:0 0 10px}
.pagehd p{margin:0;color:var(--ink-3);max-width:58ch;font-size:15px}

.alert{border-radius:var(--r-s);padding:14px 17px;font-size:14px;margin-bottom:18px;border:1px solid}
.alert--err{background:var(--err-bg);border-color:var(--err-ln);color:var(--err-tx)}
.alert--ok{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc-tx)}

.empty{text-align:center;padding:clamp(40px,7vw,72px) 20px;color:var(--ink-3)}
.empty svg{margin:0 auto 18px;opacity:.25}
.empty h1,.empty h2{margin-bottom:10px}

.toast{
  position:fixed;left:50%;bottom:28px;z-index:300;max-width:90vw;
  transform:translateX(-50%) translateY(14px);
  background:var(--surf-3);color:var(--ink);border:1px solid var(--line-3);
  padding:13px 20px;border-radius:var(--r-s);font-size:14px;
  opacity:0;transition:opacity .24s var(--e),transform .24s var(--e-out);
  box-shadow:var(--sh-toast);
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   Reveal animations
   ========================================================================== */

.has-js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.has-js [data-rv].is-in{opacity:1;transform:none}
[data-rv="1"]{transition-delay:.06s}
[data-rv="2"]{transition-delay:.12s}
[data-rv="3"]{transition-delay:.18s}
[data-rv="4"]{transition-delay:.24s}
[data-rv="5"]{transition-delay:.3s}
[data-rv="6"]{transition-delay:.36s}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .cfg{grid-template-columns:minmax(0,1fr) 344px}
  .advs,.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__in{grid-template-columns:1fr;gap:38px}
  .hero__art{max-width:560px;width:100%;margin:0 auto}
  .anat{grid-template-columns:1fr;gap:30px}
}
@media (max-width:980px){
  .burger{display:flex;order:3}
  .hdr__in{position:relative;gap:10px}
  .logo{margin-right:auto}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:120;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 0 16px;
    background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--sh-nav);
    max-height:calc(100vh - var(--hdr-h));overflow-y:auto;
  }
  .nav.is-open{display:flex;animation:navIn .22s var(--e-out)}
  @keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav a,.nav__ddb{
    padding:14px clamp(16px,3.5vw,40px);border-radius:0;
    border-bottom:1px solid var(--line);font-size:15px;width:100%;justify-content:flex-start;
  }
  .nav__dd{width:100%}
  .nav__ddb{display:none}
  .nav__ddm{
    display:block;position:static;min-width:0;padding:0;
    background:none;border:0;box-shadow:none;border-radius:0;
  }
  .nav__ddm a{padding:14px clamp(16px,3.5vw,40px) 14px calc(clamp(16px,3.5vw,40px) + 14px);font-size:14.5px;color:var(--ink-3)}
  .hdr__phone span{display:none}
  .hdr__phone{padding:9px 11px}
  .cat{grid-template-columns:1fr}
  .filters{position:static}
  .prod{grid-template-columns:1fr;gap:24px}
  .cfg,.cartwrap,.co{grid-template-columns:1fr}
  .cfg__side,.summary{position:static}
  .vsel{grid-template-columns:1fr}
  .flow__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fnode:nth-child(2)::after{display:none}
  .fnode::after{right:auto;left:50%;top:auto;bottom:-15px;width:1px;height:14px;transform:translateX(-50%)}
  .flow.is-live .fnode::after{background-image:linear-gradient(180deg,var(--acc-tx) 0 22%,transparent 22% 100%);background-size:100% 220%;animation-name:flowPulseV}
  @keyframes flowPulseV{
    0%{background-position:0 -120%;opacity:0}
    12%{opacity:1}88%{opacity:1}
    100%{background-position:0 220%;opacity:0}
  }
  .anat__list{grid-template-columns:1fr}
  .cta__in{flex-direction:column;align-items:flex-start}
  .ftr__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--hdr-h:62px;--hdr-h-sm:56px}
  .logo__t i{display:none}
  .logo__t b{font-size:15px}
  .hdr__phone{display:none}
  .hero__specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .hero__spec{padding:16px 10px 16px 0;border-bottom:1px solid var(--line)}
  .hero__spec:nth-child(1)::before,.hero__spec:nth-child(2)::before{top:-1px}
  .hero__spec:nth-child(3)::before,.hero__spec:nth-child(4)::before{display:none}
  .hero__spec:nth-child(3),.hero__spec:nth-child(4){border-bottom:0;padding-bottom:0}
  .hero__btns .btn{flex:1;min-width:0}
  .advs,.trust{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__b{padding:12px 13px 13px}
  .card__specs{grid-template-columns:repeat(3,1fr)}
  .card__spec{padding:6px 5px}
  .card__spec b{font-size:11px}
  .card__spec span{font-size:7.5px;letter-spacing:.06em}
  .card__t{font-size:13.5px;margin-bottom:10px}
  .card__p{font-size:16px}
  .card__add{padding:8px 11px;font-size:11.5px;min-height:34px}
  .card__f{flex-wrap:wrap}
  .opts{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .ci{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .ci__img{width:72px;height:60px}
  .ci__r{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .ftr__in{grid-template-columns:1fr;gap:28px}
  .ftr__bot{flex-direction:column;align-items:flex-start;gap:10px}
  .cta{border-radius:var(--r-l)}
  .cta__btns{width:100%}
  .cta__btns .btn{flex:1;min-width:0}
  .flow{padding:20px 16px}
  .flow__grid{grid-template-columns:1fr;gap:26px}
  .fnode:nth-child(2)::after{display:block}
  .fnode:last-child::after{display:none}
  .prod__pricebox{gap:10px}
  .stock{margin-left:0;width:100%}
  .buybar .btn{flex:1;min-width:0}
}
@media (max-width:520px){
  /* у вузькій картці третій показник не влазить — ємність і так є в назві */
  .card .card__specs{grid-template-columns:repeat(2,1fr)}
  .card .card__spec:nth-child(3){display:none}
}
@media (max-width:359px){
  .grid{grid-template-columns:1fr}
  .card .card__specs{grid-template-columns:repeat(3,1fr)}
  .card .card__spec:nth-child(3){display:block}
}


/* ==========================================================================
   Світла тема — ті самі токени, інші значення
   ========================================================================== */

:root[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-2:#F4F6F8;
  --surf:#FFFFFF;
  --surf-2:#F7F9FB;
  --surf-3:#ECEFF2;

  --line:#E5E9ED;
  --line-2:#D4DAE0;
  --line-3:#B6BFC8;

  --ink:#0B0F13;
  --ink-2:#454F59;
  --ink-3:#68727C;
  --ink-4:#96A0A9;

  --acc:#B7FF3C;             /* заливки лишаються лаймовими */
  --acc-d:#A9F428;
  --acc-tx:#46740A;          /* читабельний акцент на світлому */
  --acc-dim:rgba(132,193,18,.14);
  --acc-line:rgba(110,165,12,.42);
  --acc-ink:#0A0C08;

  --red:#C62B1F;
  --amber:#9A6208;
  --cyan:#0B7FA8;

  --grid:rgba(11,15,19,.05);
  --sheen:rgba(11,15,19,.02);
  --hdr-bg:rgba(255,255,255,.76);
  --hdr-bg-stuck:rgba(255,255,255,.94);
  --sh-dd:0 18px 44px rgba(16,24,40,.14);
  --sh-nav:0 22px 46px rgba(16,24,40,.15);
  --sh-toast:0 14px 38px rgba(16,24,40,.24);
  --hero-glow:rgba(159,224,52,.3);
  --hero-glow2:rgba(78,196,235,.14);
  --cta-glow:rgba(159,224,52,.34);
  --err-bg:rgba(198,43,31,.06);
  --err-ln:rgba(198,43,31,.22);
  --err-tx:#992116;
  --amber-dim:rgba(154,98,8,.14);

  color-scheme:light;
}

/* Тіні картки й підсвітка на світлому — стриманіші */
:root[data-theme="light"] .card:hover::after{
  box-shadow:0 0 0 1px var(--acc-line),0 16px 34px -18px rgba(16,24,40,.3);
}
:root[data-theme="light"] .toast{background:#14181C;color:#F2F4F5;border-color:#2A323B}

/* ==========================================================================
   Перемикач теми
   ========================================================================== */

.themesw{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:transparent;color:var(--ink-2);
  transition:border-color .18s var(--e),color .18s var(--e),background .18s var(--e);
}
.themesw:hover{border-color:var(--acc-line);color:var(--acc-tx);background:var(--acc-dim)}
.themesw .i-moon{display:none}
:root[data-theme="light"] .themesw .i-sun{display:none}
:root[data-theme="light"] .themesw .i-moon{display:block}

/* Тост помилки */
.toast.is-err{background:var(--err-bg);border-color:var(--err-ln);color:var(--err-tx)}
:root[data-theme="light"] .toast.is-err{background:#7E1B12;border-color:#9E2A1E;color:#FFE3DF}

/* ==========================================================================
   Motion & print
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .has-js [data-rv]{opacity:1;transform:none}
  .flow.is-live .fnode::after{animation:none;background-image:none;background:var(--line-2)}
}

@media print{
  .hdr,.ftr,.burger,.cta,.toast,.gridbg{display:none}
  body{background:#fff;color:#000}
}

/* Configurator: cells + live voltage readout */
.cells-big b{font-weight:inherit;font-family:inherit;color:inherit}
.cells-big u{text-decoration:none;font-size:.42em;color:var(--ink-3);font-weight:500;margin-left:1px}
.cells-volt{
  display:inline-flex;align-items:baseline;gap:3px;flex:0 0 auto;
  padding:8px 13px;border:1px solid var(--acc-line);border-radius:var(--r-s);background:var(--acc-dim);
}
.cells-volt b{font:600 17px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--acc-tx)}
.cells-volt u{text-decoration:none;font:500 11px/1 var(--f-mono);color:var(--acc-tx);opacity:.7}

/* Інлайнові схеми: акценти й лінії слідують за темою */
.sv-acc{fill:var(--acc-tx)}
.sv-accs{stroke:var(--acc-tx)}
.sv-badge{fill:var(--surf)}
.sv-line{stroke:var(--line-3)}

/* ==========================================================================
   Шапка: вміщаємо вузькі десктопи та малі телефони
   ========================================================================== */

.langsw--m{display:none}

@media (max-width:1200px){
  /* дескриптор під логотипом з'їдає ширину, на якій ще потрібне повне меню */
  .logo__t i{display:none}
}
@media (max-width:1100px){
  .hdr__phone span{display:none}
  .hdr__phone{padding:9px 11px}
}
@media (max-width:980px){
  /* комфортні тач-цілі */
  .langsw a{padding:10px 13px}
  .chip{min-height:34px;padding:9px 14px}
  .sect__link{padding:9px 0 7px}
}
@media (max-width:480px){
  /* мова переїжджає в бургер-меню, щоб шапка не переповнювалась */
  .hdr__right .langsw{display:none}
  .nav .langsw--m{
    display:flex;align-self:flex-start;
    margin:14px clamp(16px,3.5vw,40px) 0;
  }
  .nav .langsw--m a{border-bottom:0;width:auto}
}
@media (max-width:400px){
  .logo__m{width:30px;height:30px}
  .logo__t b{font-size:13.5px}
  .cartbtn,.themesw,.burger{width:38px;height:38px}
  .hdr__right{gap:7px}
}