/* ============================================================
   СМОТРИТЕЛЬ — design tokens
   "Полевой отчёт" — светлая, высококонтрастная,
   плакатно-досье эстетика вместо тёмного sci-fi.
   ============================================================ */
:root{
  --paper:#070f0c;
  --paper-2:#0e1a15;
  --paper-3:#16261f;
  --void:#040907;
  --ink:#34ff8f;
  --ink-2:#c3d9cd;
  --ink-3:#82a394;

  --line:#34ff8f;
  --line-soft:#1c3327;

  --red:#b6ff2e;
  --red-dark:#8fd400;
  --amber:#d4ff5c;
  --green:#17c964;

  --radius-s:3px;
  --radius-m:3px;
  --radius-l:3px;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-hard:6px 6px 0 var(--ink), 0 0 26px -8px var(--ink);
  --shadow-hard-sm:4px 4px 0 var(--ink), 0 0 18px -8px var(--ink);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .45s var(--ease);
}
body.loaded{opacity:1;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  font-weight:700;
  letter-spacing:-0.02em;
  text-shadow:0 0 18px rgba(52,255,143,.35);
}
p{margin:0;}
.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
@media (max-width:640px){ .container{padding:0 18px;} }

::selection{background:var(--ink);color:var(--paper);}
[id]{scroll-margin-top:96px;}

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  body{opacity:1 !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}

/* subtle blueprint grid texture */
.grid-tex{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ============================================================
   Scroll-reveal
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============================================================
   Buttons — flat fills, thick border, hard offset shadow
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 25px;
  border-radius:var(--radius-s);
  font-weight:700;
  font-size:15px;
  border:2px solid var(--ink);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  white-space:nowrap;
  box-shadow:var(--shadow-hard-sm);
}
.btn-primary{
  background:var(--red);
  border-color:var(--ink);
  color:var(--void);
}
.btn-primary:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
  background:var(--red-dark);
}
.btn-ghost{
  background:var(--paper);
  border-color:var(--ink);
  color:var(--ink);
}
.btn-ghost:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
  background:var(--ink);
  color:var(--paper);
}
.btn-sm{padding:8px 15px;font-size:13.5px;box-shadow:3px 3px 0 var(--ink);}
.btn-sm:hover{box-shadow:1px 1px 0 var(--ink);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}

/* ============================================================
   Header
   ============================================================ */
header.site{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(4,10,7,.86);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  flex-shrink:0;
}
.logo-mark{
  width:34px;height:34px;
  position:relative;
  flex-shrink:0;
  color:var(--ink);
}
.logo-mark svg{width:100%;height:100%;}
.logo-mark .lm-sweep{
  transform-origin:17px 17px;
  animation:lm-spin 5s linear infinite;
}
@keyframes lm-spin{to{transform:rotate(360deg);}}
.logo-mark .lm-core{animation:lm-pulse 2.2s ease-in-out infinite;}
@keyframes lm-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.logo small{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--red);
  margin-top:1px;
}
nav.main-nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-2);
}
nav.main-nav a{
  position:relative;
  padding:6px 0;
  transition:color .15s;
}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:3px;
  background:var(--red);
  transition:width .22s var(--ease);
}
nav.main-nav a:hover::after{width:100%;}
nav.main-nav a.active{color:var(--ink);}
nav.main-nav a.active::after{width:100%;}

.head-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.icon-btn{
  position:relative;
  width:42px;height:42px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .15s, color .15s, transform .15s, box-shadow .15s;
  box-shadow:3px 3px 0 var(--ink);
}
.icon-btn:hover{background:var(--ink);color:var(--paper);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.icon-btn svg{width:19px;height:19px;}
.cart-count{
  position:absolute;
  top:-8px;right:-8px;
  background:var(--red);
  color:var(--void);
  font-size:10.5px;
  font-weight:700;
  min-width:18px;height:18px;
  border-radius:9px;
  border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  transition:transform .2s var(--ease);
}
.cart-count.bump{animation:bump .32s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}
@media (max-width:560px){
  .head-actions .btn{display:none;}
}

.burger{
  display:none;
  width:42px;height:42px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  align-items:center;justify-content:center;
  flex-direction:column;
  gap:4px;
  box-shadow:3px 3px 0 var(--ink);
}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s, opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:960px){
  nav.main-nav{
    position:fixed;
    top:76px;left:0;right:0;
    background:var(--paper);
    border-bottom:2px solid var(--ink);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 22px 18px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    max-height:calc(100vh - 76px);
    overflow-y:auto;
  }
  nav.main-nav.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  nav.main-nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft);}
  .burger{display:flex;}
}

/* ============================================================
   Hero (home page)
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 80px;
  isolation:isolate;
  background:var(--paper);
}
.hero .grid-tex{
  position:absolute;inset:0;
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
  z-index:-1;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px 7px 10px;
  border:2px solid var(--ink);
  border-radius:99px;
  background:var(--paper);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:26px;
  box-shadow:3px 3px 0 var(--ink);
}
.rec-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 1px var(--ink);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

.hero h1{
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.06;
  max-width:640px;
}
.hero h1 .accent{
  color:var(--red);
  font-style:normal;
}
.hero-sub{
  margin-top:22px;
  font-size:17px;
  color:var(--ink-2);
  max-width:520px;
}
.hero-cta{
  display:flex;
  gap:14px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-stats{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(4, auto);
  gap:0;
  border-top:2px solid var(--ink);
}
@media (max-width:640px){ .hero-stats{grid-template-columns:repeat(2, auto);} }
.hero-stats > div{padding:16px 20px 0 0;}
.stat-num{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:2px;
}
.stat-num .unit{font-size:18px;color:var(--red);}
.stat-label{
  font-size:12.5px;
  color:var(--ink-3);
  margin-top:4px;
}

/* hero visual — bordered case-file frame */
.hero-visual{
  position:relative;
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper-2);
  padding:16px;
  box-shadow:var(--shadow-hard);
}
.hero-visual .frame{
  position:relative;
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
}
.hero-visual .frame img{
  width:100%;height:100%;object-fit:contain;background:var(--paper-2);padding:22px;
}
.frame-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  animation:scan 3.2s linear infinite;
}
@keyframes scan{0%{top:0;}100%{top:100%;}}
.frame-hud{
  position:absolute;inset:0;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--ink);
  pointer-events:none;
}
.frame-hud .top{display:flex;justify-content:space-between;}
.frame-hud .rec{display:flex;align-items:center;gap:5px;color:var(--red);font-weight:700;}
.frame-hud .corner{
  position:absolute;width:16px;height:16px;border-color:var(--ink);border-style:solid;border-width:0;
}
.frame-hud .c1{top:10px;left:10px;border-top-width:2px;border-left-width:2px;}
.frame-hud .c2{top:10px;right:10px;border-top-width:2px;border-right-width:2px;}
.frame-hud .c3{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px;}
.frame-hud .c4{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px;}
.hero-visual .cap{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 6px 4px;
  font-size:13px;
  color:var(--ink-3);
}
.hero-visual .cap b{color:var(--ink);font-weight:700;}

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:60px 0 50px;
  border-bottom:2px solid var(--ink);
  isolation:isolate;
  background:var(--paper-2);
}
.page-hero .grid-tex{
  position:absolute;inset:0;
  opacity:.6;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
  z-index:-1;
}
.breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--ink-3);
  margin-bottom:16px;
}
.breadcrumb a{color:var(--ink-2);}
.breadcrumb a:hover{color:var(--red);}
.page-hero h1{font-size:clamp(28px,4vw,42px);line-height:1.12;max-width:640px;}
.page-hero p.lead{margin-top:14px;font-size:15.5px;color:var(--ink-2);max-width:600px;}

/* ============================================================
   Section shell
   ============================================================ */
section{padding:100px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
.eyebrow{
  font-size:13px;
  font-weight:700;
  color:var(--red);
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.section-head{
  max-width:620px;
  margin-bottom:52px;
}
.section-head h2{
  font-size:clamp(26px,3vw,38px);
  line-height:1.15;
}
.section-head p{
  margin-top:14px;
  font-size:16px;
  color:var(--ink-2);
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============================================================
   Services
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }
.service-card{
  position:relative;
  padding:30px 26px;
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper);
  box-shadow:var(--shadow-hard);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.service-card:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink);}
.service-icon{
  width:52px;height:52px;
  border-radius:var(--radius-m);
  background:var(--paper-2);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  margin-bottom:22px;
}
.service-icon svg{width:24px;height:24px;}
.service-card h3{font-size:19px;margin-bottom:10px;}
.service-card p{color:var(--ink-2);font-size:14.5px;}
.service-card .tag-list{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:18px;
}
.service-card .tag-list span{
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  border:1px solid var(--ink-3);
  padding:4px 10px;
  border-radius:99px;
}
.service-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;
  font-size:13.5px;font-weight:700;color:var(--red);
  transition:gap .18s var(--ease);
}
.service-link:hover{gap:10px;}

/* services page: detail rows */
.service-detail{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--line-soft);
}
.service-detail:last-child{border-bottom:1px solid var(--line-soft);}
.service-detail.rev{grid-template-columns:1.1fr .9fr;}
.service-detail.rev .sd-media{order:2;}
@media (max-width:860px){
  .service-detail, .service-detail.rev{grid-template-columns:1fr;}
  .service-detail.rev .sd-media{order:0;}
}
.sd-media{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper-2);
  padding:32px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-hard);
}
.sd-media .sd-icon{
  width:54px;height:54px;border-radius:var(--radius-m);
  background:var(--paper);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
}
.sd-media .sd-icon svg{width:26px;height:26px;}
.sd-list{display:grid;gap:10px;margin-top:6px;}
.sd-list li{
  list-style:none;
  display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;color:var(--ink-2);
}
.sd-list li svg{width:16px;height:16px;color:var(--green);flex-shrink:0;margin-top:2px;}
.sd-body h3{font-size:24px;margin-bottom:14px;}
.sd-body p{color:var(--ink-2);font-size:15px;margin-bottom:18px;}

/* ============================================================
   Why us
   ============================================================ */
.why-wrap{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){ .why-wrap{grid-template-columns:1fr;gap:36px;} }
.why-list{
  display:grid;
  gap:2px;
  border-top:2px solid var(--ink);
}
.why-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--line-soft);
}
.why-item .ico{
  width:44px;height:44px;
  border-radius:var(--radius-m);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  flex-shrink:0;
  background:var(--paper);
}
.why-item .ico svg{width:20px;height:20px;}
.why-item h4{font-size:16px;margin-bottom:5px;color:var(--ink);font-family:var(--font-body);font-weight:700;}
.why-item p{font-size:14px;color:var(--ink-2);}

.brand-panel{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper-2);
  padding:32px;
  box-shadow:var(--shadow-hard);
}
.brand-panel h3{font-size:18px;margin-bottom:6px;}
.brand-panel p.small{color:var(--ink-2);font-size:14px;margin-bottom:24px;}
.brand-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.brand-chip{
  border:2px solid var(--ink);
  border-radius:var(--radius-m);
  padding:18px 10px;
  text-align:center;
  background:var(--paper);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow:3px 3px 0 var(--ink);
}
.brand-chip:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.brand-chip .name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
}
.brand-chip .role{
  font-size:11.5px;
  color:var(--ink-3);
  margin-top:4px;
}
.warranty-strip{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-radius:var(--radius-m);
  background:var(--paper);
  border:1px solid var(--ink-3);
  font-size:13.5px;
  color:var(--ink-2);
}
.warranty-strip svg{width:22px;height:22px;color:var(--red);flex-shrink:0;}

/* ============================================================
   Process
   ============================================================ */
.process-list{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  position:relative;
}
@media (max-width:980px){ .process-list{grid-template-columns:repeat(3, 1fr);gap:28px 0;} }
@media (max-width:560px){ .process-list{grid-template-columns:1fr;gap:0;} }
.process-item{
  position:relative;
  padding:0 18px 0 0;
}
.process-item:not(:last-child)::after{
  content:'';
  position:absolute;
  top:22px;right:-2px;
  width:calc(100% - 44px);
  height:1px;
  background:var(--ink-3);
}
@media (max-width:980px){ .process-item:not(:last-child)::after{display:none;} }
@media (max-width:560px){
  .process-item{padding:0 0 30px 0;}
  .process-item:not(:last-child){border-left:1px solid var(--ink-3);margin-left:21px;padding-left:26px;}
}
.process-num{
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid var(--ink);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  background:var(--ink);
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
@media (max-width:560px){ .process-num{margin-left:-22px;} }
.process-item h4{font-size:15px;color:var(--ink);font-family:var(--font-body);font-weight:700;margin-bottom:6px;}
.process-item p{font-size:13.5px;color:var(--ink-2);}

/* ============================================================
   Catalog
   ============================================================ */
.catalog-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
  padding-bottom:26px;
  border-bottom:2px solid var(--ink);
}
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filter-tab{
  padding:8px 15px;
  border-radius:99px;
  border:2px solid var(--ink);
  background:var(--paper);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-2);
  transition:all .16s var(--ease);
}
.filter-tab:hover{color:var(--ink);}
.filter-tab.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.catalog-search-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.search-box{
  position:relative;
}
.search-box input{
  width:240px;
  padding:9px 14px 9px 38px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  font-family:inherit;
}
.search-box input:focus{outline:none;border-color:var(--red);}
.search-box svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-3);
}
select.brand-select{
  padding:9px 14px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  font-family:inherit;
}
@media (max-width:640px){
  .catalog-search-row{width:100%;}
  .search-box{flex:1;}
  .search-box input{width:100%;}
}
.sort-note{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-3);
  margin-bottom:22px;
}
.sort-note svg{width:15px;height:15px;color:var(--green);}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
@media (max-width:1080px){ .product-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:760px){ .product-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:460px){ .product-grid{grid-template-columns:1fr;} }

.product-card{
  border:2px solid var(--ink);
  border-radius:var(--radius-m);
  background:var(--paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-hard-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.product-card:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
}
.product-thumb{
  position:relative;
  aspect-ratio:1/1;
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
}
.product-thumb img{
  width:88%;height:88%;object-fit:contain;
  transition:transform .35s var(--ease);
}
.product-card:hover .product-thumb img{transform:scale(1.05);}
.brand-tag{
  position:absolute;top:10px;left:10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  padding:4px 9px;
  border-radius:99px;
  background:var(--ink);
  color:var(--paper);
}
.best-price-tag{
  position:absolute;top:8px;right:6px;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:4px 9px;
  border:2px solid var(--red);
  color:var(--red);
  background:var(--paper);
  transform:rotate(6deg);
  text-transform:uppercase;
}
.product-body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.product-cat{font-size:11px;color:var(--red);font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.product-model{font-size:14.5px;font-weight:700;color:var(--ink);font-family:var(--font-display);}
.product-desc{
  font-size:12.5px;
  color:var(--ink-3);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.price{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  font-size:16.5px;
}
.add-btn{
  width:38px;height:38px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .16s, border-color .16s, transform .16s;
  flex-shrink:0;
}
.add-btn svg{width:17px;height:17px;}
.add-btn:hover{background:var(--ink);color:var(--paper);}
.add-btn.added{background:var(--green);border-color:var(--green);color:#fff;}
.add-btn.added svg{animation:none;}

.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  color:var(--ink-3);
  font-size:14.5px;
}

.catalog-more{
  display:flex;
  justify-content:center;
  margin-top:36px;
}

/* ============================================================
   Cart drawer
   ============================================================ */
.overlay{
  position:fixed;inset:0;
  background:rgba(2,7,4,.75);
  z-index:900;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.overlay.show{opacity:1;pointer-events:auto;}

.cart-drawer{
  position:fixed;
  top:0;right:0;
  bottom:0;
  width:420px;
  max-width:92vw;
  background:var(--paper);
  border-left:2px solid var(--ink);
  z-index:950;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s var(--ease);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px;
  border-bottom:2px solid var(--ink);
}
.cart-head h3{font-size:18px;}
.close-btn{
  width:36px;height:36px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.close-btn:hover{background:var(--ink);color:var(--paper);}
.close-btn svg{width:16px;height:16px;}

.cart-items{
  flex:1;
  overflow-y:auto;
  padding:14px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cart-empty{
  margin:auto;
  text-align:center;
  color:var(--ink-3);
  font-size:14px;
  padding:40px 0;
}
.cart-empty svg{width:40px;height:40px;color:var(--ink-3);margin-bottom:14px;}

.cart-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.cart-item img{
  width:56px;height:56px;
  object-fit:contain;
  background:var(--paper-2);
  border-radius:var(--radius-s);
  border:1px solid var(--ink-3);
  padding:4px;
}
.cart-item .ci-name{font-size:13.5px;color:var(--ink);font-weight:700;line-height:1.3;}
.cart-item .ci-brand{font-size:11px;color:var(--ink-3);margin-top:2px;}
.qty-row{
  display:flex;align-items:center;gap:8px;
  margin-top:8px;
}
.qty-btn{
  width:22px;height:22px;
  border-radius:var(--radius-s);
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  line-height:1;
}
.qty-btn:hover{background:var(--ink);color:var(--paper);}
.qty-val{font-size:13px;color:var(--ink-2);min-width:16px;text-align:center;}
.ci-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.ci-price{font-size:13.5px;font-weight:700;color:var(--ink);font-family:var(--font-display);}
.ci-remove{font-size:11.5px;color:var(--ink-3);}
.ci-remove:hover{color:var(--red);}

.cart-foot{
  padding:20px 22px 24px;
  border-top:2px solid var(--ink);
}
.cart-total-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
  font-size:14.5px;
  color:var(--ink-2);
}
.cart-total-row b{font-size:20px;color:var(--ink);font-family:var(--font-display);}

/* ============================================================
   Modal (checkout)
   ============================================================ */
.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease);
}
.modal.show{opacity:1;pointer-events:auto;}
.modal-box{
  width:100%;
  max-width:440px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  padding:30px 28px 28px;
  transform:translateY(14px) scale(.98);
  transition:transform .26s var(--ease);
  max-height:88vh;
  overflow-y:auto;
  box-shadow:var(--shadow-hard);
}
.modal.show .modal-box{transform:translateY(0) scale(1);}
.modal-box h3{font-size:20px;margin-bottom:6px;}
.modal-box p.small{font-size:13.5px;color:var(--ink-2);margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-2);
  margin-bottom:7px;
}
.field input, .field textarea{
  width:100%;
  padding:10px 13px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink-3);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--red);}
.modal-success{
  text-align:center;
  padding:10px 0 6px;
}
.modal-success .ico{
  width:58px;height:58px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);
}
.modal-success .ico svg{width:26px;height:26px;}

/* ============================================================
   Contacts
   ============================================================ */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
@media (max-width:900px){ .contact-wrap{grid-template-columns:1fr;gap:36px;} }
.contact-info-list{display:grid;gap:20px;margin-top:28px;}
.contact-info-item{display:flex;gap:14px;align-items:flex-start;}
.contact-info-item .ico{
  width:40px;height:40px;flex-shrink:0;
  border-radius:var(--radius-m);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  background:var(--paper);
}
.contact-info-item .ico svg{width:18px;height:18px;}
.contact-info-item b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px;}
.contact-info-item span{font-size:13.5px;color:var(--ink-2);}

.contact-form{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper-2);
  padding:32px;
  box-shadow:var(--shadow-hard);
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:480px){ .form-row-2{grid-template-columns:1fr;} }
.consent-line{
  display:flex;gap:9px;align-items:flex-start;
  font-size:12px;color:var(--ink-3);
  margin:6px 0 18px;
}
.consent-line input{margin-top:2px;}

.map-card{
  margin-top:28px;
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper-2);
  padding:24px;
  position:relative;
  overflow:hidden;
  min-height:180px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-hard);
}
.map-card .grid-tex{position:absolute;inset:0;opacity:.7;}
.map-pin{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-2);font-size:13px;text-align:center;
}
.map-pin .dot{
  width:16px;height:16px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 2px var(--ink);
  animation:pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse{
  0%{box-shadow:0 0 0 2px var(--ink), 0 0 0 0 rgba(182,255,46,.55);}
  100%{box-shadow:0 0 0 2px var(--ink), 0 0 0 18px rgba(182,255,46,0);}
}

/* ============================================================
   Footer — inverted (dark) as a bold closing band
   ============================================================ */
footer{
  border-top:2px solid var(--ink);
  padding:56px 0 30px;
  background:var(--void);
  color:#8a97c2;
}
footer .logo{color:var(--ink);}
footer .logo-mark{color:var(--ink);}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:40px;
}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h5{
  font-size:13px;
  color:var(--ink);
  margin-bottom:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.footer-grid ul a{font-size:13.5px;color:#7fa091;}
.footer-grid ul a:hover{color:var(--red);}
.footer-brand p{color:#7fa091;font-size:13.5px;margin-top:14px;max-width:280px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;
  border-top:1px solid #1a2b21;
  font-size:12.5px;
  color:#5c7d6c;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a{color:#5c7d6c;}
.footer-bottom a:hover{color:var(--red);}

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie-bar{
  position:fixed;
  left:20px;right:20px;bottom:20px;
  max-width:560px;
  margin:0 auto;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius-m);
  padding:20px 22px;
  z-index:800;
  box-shadow:var(--shadow-hard);
  transform:translateY(160%);
  transition:transform .4s var(--ease);
}
.cookie-bar.show{transform:translateY(0);}
.cookie-bar p{font-size:13px;color:var(--ink-2);margin-bottom:14px;}
.cookie-bar p a{color:var(--red);text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* toast */
.toast{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  border:2px solid var(--ink);
  color:var(--paper);
  padding:12px 20px;
  border-radius:var(--radius-s);
  font-size:13.5px;
  z-index:1100;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  display:flex;align-items:center;gap:10px;
  box-shadow:4px 4px 0 var(--red);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:16px;height:16px;color:var(--green);flex-shrink:0;}

/* ============================================================
   CTA band (home page) — inverted dark punch
   ============================================================ */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-l);
  padding:52px 44px;
  background:var(--void);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-hard);
}
.cta-band h2{color:var(--ink);font-size:clamp(22px,2.6vw,30px);max-width:520px;}
.cta-band p{margin-top:10px;color:#a9c9b6;font-size:15px;max-width:480px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cta-band .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
.cta-band .btn-ghost:hover{background:var(--ink);color:var(--void);box-shadow:1px 1px 0 var(--ink);}
.cta-band .btn-primary{box-shadow:3px 3px 0 var(--ink);}
.cta-band .btn-primary:hover{box-shadow:1px 1px 0 var(--ink);}

/* ============================================================
   Nav — hover mega-dropdown (Каталог)
   ============================================================ */
.nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.nav-item > a{display:flex;align-items:center;gap:5px;}
.nav-caret{width:10px;height:10px;transition:transform .2s var(--ease);}
.nav-item:hover .nav-caret{transform:rotate(180deg);}
.nav-drop{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translate(-50%, -8px);
  min-width:240px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-hard);
  padding:10px;
  display:grid;
  gap:2px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:600;
}
/* invisible bridge so the pointer can travel from link to menu without losing hover */
.nav-item::after{
  content:'';
  position:absolute;
  left:50%;top:100%;
  width:260px;height:18px;
  transform:translateX(-50%);
  pointer-events:none;
}
.nav-item:hover::after{pointer-events:auto;}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.nav-drop a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border-radius:var(--radius-s);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-2);
  white-space:nowrap;
}
.nav-drop a::after{display:none;}
.nav-drop a:hover{background:var(--paper-2);color:var(--ink);}
.nav-drop a svg{width:16px;height:16px;color:var(--red);flex-shrink:0;}
.nav-drop .nav-drop-all{
  border-top:1px solid var(--line-soft);
  margin-top:4px;padding-top:10px;
  color:var(--red);font-weight:700;
}
@media (max-width:960px){
  .nav-drop{display:none;}
  .nav-item{width:100%;}
}

/* ============================================================
   Catalog — category sections
   ============================================================ */
.cat-section{margin-bottom:52px;}
.cat-section:last-child{margin-bottom:0;}
.cat-section-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:22px;
  border-bottom:2px solid var(--ink);
  animation:sweepIn .5s var(--ease) both;
}
.cat-section-icon{
  width:38px;height:38px;
  flex-shrink:0;
  border-radius:var(--radius-m);
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.cat-section-icon svg{width:19px;height:19px;}
.cat-section-head h3{
  font-size:19px;
  flex:1;
}
.cat-section-count{
  font-size:12px;
  font-weight:700;
  color:var(--ink-3);
  border:1.5px solid var(--line-soft);
  padding:4px 10px;
  border-radius:99px;
}
@keyframes sweepIn{
  from{opacity:0;transform:translateX(-16px);}
  to{opacity:1;transform:translateX(0);}
}

/* ============================================================
   Product card — camera HUD overlays + entrance animation
   ============================================================ */
.product-card{animation:cardIn .5s var(--ease) both;}
@keyframes cardIn{
  from{opacity:0;transform:translateY(18px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.thumb-corner{
  position:absolute;width:14px;height:14px;
  border-color:var(--ink);border-style:solid;border-width:0;
  opacity:.55;
  transition:opacity .2s, width .2s, height .2s;
  pointer-events:none;
}
.product-card:hover .thumb-corner{opacity:1;width:18px;height:18px;}
.tc1{top:8px;left:8px;border-top-width:2px;border-left-width:2px;}
.tc2{top:8px;right:8px;border-top-width:2px;border-right-width:2px;}
.tc3{bottom:8px;left:8px;border-bottom-width:2px;border-left-width:2px;}
.tc4{bottom:8px;right:8px;border-bottom-width:2px;border-right-width:2px;}
.thumb-hud{
  position:absolute;left:8px;bottom:8px;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:700;
  color:var(--ink-3);
  display:flex;align-items:center;gap:4px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.product-card:hover .thumb-hud{opacity:1;transform:translateY(0);}
.thumb-hud .dot{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1.4s ease-in-out infinite;}
.thumb-detect{
  position:absolute;
  border:1.5px dashed var(--red);
  opacity:0;
  transform:scale(.9);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events:none;
  inset:16%;
}
.product-card:hover .thumb-detect{opacity:.85;transform:scale(1);}
.thumb-detect::after{
  content:'КАМЕРА';
  position:absolute;left:0;top:-16px;
  font-family:var(--font-display);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--red);
  background:var(--paper);
  padding:0 3px;
}
.product-thumb{position:relative;}

.product-actions{display:flex;align-items:center;gap:8px;}
.icon-btn-sm{
  width:38px;height:38px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .16s, color .16s, transform .16s;
  flex-shrink:0;
}
.icon-btn-sm svg{width:16px;height:16px;}
.icon-btn-sm:hover{background:var(--ink);color:var(--paper);}

/* stagger delays applied inline via style="--d:n" */
.product-card{animation-delay:calc(var(--d, 0) * 55ms);}
.cat-section-head{animation-delay:calc(var(--d, 0) * 90ms);}

/* ============================================================
   Passport modal — official "technical passport" document look
   ============================================================ */
.passport-box{
  width:100%;
  max-width:760px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  padding:0;
  transform:translateY(14px) scale(.98);
  transition:transform .26s var(--ease);
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-hard);
  position:relative;
}
.modal.show .passport-box{transform:translateY(0) scale(1);}
.passport-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:2px solid var(--ink);
  background:var(--paper-2);
}
.passport-head-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.passport-head-title .rec-dot{width:7px;height:7px;}
.passport-close{
  width:34px;height:34px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.passport-close:hover{background:var(--ink);color:var(--paper);}
.passport-close svg{width:15px;height:15px;}
.passport-body{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
}
@media (max-width:640px){ .passport-body{grid-template-columns:1fr;} }
.passport-photo{
  position:relative;
  background:var(--paper-2);
  border-right:2px solid var(--ink);
  padding:22px;
  display:flex;align-items:center;justify-content:center;
  min-height:260px;
}
@media (max-width:640px){ .passport-photo{border-right:none;border-bottom:2px solid var(--ink);} }
.passport-photo img{max-height:280px;object-fit:contain;}
.passport-photo .thumb-corner{opacity:.6;}
.passport-stamp{
  position:absolute;
  bottom:14px;right:14px;
  width:74px;height:74px;
  border:2.5px solid var(--red);
  border-radius:50%;
  color:var(--red);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:8px;
  line-height:1.15;
  letter-spacing:.03em;
  text-transform:uppercase;
  transform:rotate(-14deg);
  opacity:.85;
  animation:stampIn .4s var(--ease) .15s both;
}
@keyframes stampIn{
  from{opacity:0;transform:rotate(-14deg) scale(1.6);}
  to{opacity:.85;transform:rotate(-14deg) scale(1);}
}
.passport-fields{padding:22px 24px;}
.passport-fields h3{font-size:18px;margin-bottom:2px;}
.passport-model-num{font-size:12px;color:var(--ink-3);margin-bottom:16px;}
.passport-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--line-soft);
}
.passport-grid div{font-size:12px;}
.passport-grid b{display:block;color:var(--ink-3);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;}
.passport-grid span{color:var(--ink);font-weight:700;}
.passport-specs{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.passport-specs li{
  font-size:12.5px;color:var(--ink-2);
  padding-left:16px;
  position:relative;
}
.passport-specs li::before{
  content:'▸';
  position:absolute;left:0;top:0;
  color:var(--red);
}
.passport-note{
  margin-top:16px;
  font-size:10.5px;
  color:var(--ink-3);
  border-top:1px solid var(--line-soft);
  padding-top:12px;
  line-height:1.5;
}

/* ============================================================
   Hero cursor spotlight (index page)
   ============================================================ */
.hero{
  --sx:50%; --sy:50%;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(360px 360px at var(--sx) var(--sy), rgba(52,255,143,.16), transparent 70%);
  pointer-events:none;
  z-index:0;
  transition:opacity .3s;
}
.hero-grid{z-index:1;}

/* ============================================================
   Extra micro-animation touches
   ============================================================ */
.service-icon, .why-item .ico, .contact-info-item .ico{transition:transform .25s var(--ease), background .2s, color .2s;}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.08);background:var(--ink);color:var(--paper);}
.why-item:hover .ico{transform:scale(1.1);background:var(--ink);color:var(--paper);}
.brand-chip{transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.brand-chip:hover{transform:translateY(-4px);}
.process-num{transition:transform .2s var(--ease);}
.process-item:hover .process-num{transform:scale(1.12);background:var(--ink);color:var(--paper);}

/* ============================================================
   Floating contact dock (right edge) — quick call-back request
   and links to messengers
   ============================================================ */
.contact-dock{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:950;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dock-btn{
  width:50px;height:50px;
  border-radius:50%;
  border:2px solid var(--ink);
  background:var(--paper-2);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px -6px var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
  position:relative;
}
.dock-btn svg{width:21px;height:21px;}
.dock-btn:hover{
  transform:translateX(-4px) scale(1.06);
  box-shadow:0 0 22px -2px var(--ink);
}
.dock-btn.dock-callback{background:var(--red);border-color:var(--red);color:var(--void);box-shadow:0 0 16px -4px var(--red);}
.dock-btn.dock-callback:hover{box-shadow:0 0 26px 0 var(--red);}
.dock-btn.dock-vk:hover{background:#0077ff;border-color:#0077ff;color:#fff;box-shadow:0 0 22px -2px #0077ff;}
.dock-btn.dock-tg:hover{background:#29b6f6;border-color:#29b6f6;color:#fff;box-shadow:0 0 22px -2px #29b6f6;}
.dock-btn.dock-max:hover{background:var(--ink);color:var(--void);}
.dock-tip{
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--void);
  border:2px solid var(--ink);
  color:var(--ink-2);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  padding:6px 11px;
  border-radius:var(--radius-s);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.dock-btn:hover .dock-tip{opacity:1;transform:translateY(-50%) translateX(0);}
@media (max-width:640px){
  .contact-dock{right:10px;gap:8px;}
  .dock-btn{width:44px;height:44px;}
  .dock-btn svg{width:18px;height:18px;}
  .dock-tip{display:none;}
}

/* ============================================================
   Nav — mega-dropdown «Каталог»: категории + производители
   ============================================================ */
.nav-item > a{padding-bottom:14px;margin-bottom:-14px;}   /* bridge: hover не теряется */
.nav-drop{top:calc(100% + 8px);}
.nav-item::after{height:24px;}

.nav-mega{
  left:50%;
  transform:translate(-50%,-8px);
  width:min(760px, calc(100vw - 40px));
  min-width:0;
  padding:18px;
  grid-template-columns:1fr 1.25fr;
  gap:18px;
}
.nav-item:hover .nav-mega,
.nav-item:focus-within .nav-mega{transform:translate(-50%,0);}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mega-brands{
  border-left:1px solid var(--line-soft);
  padding-left:18px;
}
.mega-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:2px 0 8px 12px;
}
.mega-cats a{justify-content:flex-start;}
.mega-cats a span{flex:1;}
.mega-count{
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-3);
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:2px;
  padding:1px 7px;
  flex-shrink:0;
}
.mega-brand{
  border:1px solid var(--line-soft);
  border-radius:var(--radius-s);
  padding:6px;
  margin-bottom:6px;
  transition:border-color .15s;
}
.mega-brand:hover{border-color:var(--ink);}
.mega-brand-head{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px !important;
}
.mega-brand-logo{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  border-radius:2px;
  background:var(--paper-2);
  color:var(--red);
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
}
.mega-brand-name{
  display:flex;flex-direction:column;line-height:1.25;flex:1;
  font-size:14px;color:var(--ink);
}
.mega-brand-name small{
  font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:0;
}
.mega-brand-links{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:2px 6px 4px;
}
.mega-brand-links a{
  padding:4px 8px !important;
  font-size:12px !important;
  font-weight:600;
  border:1px solid var(--line-soft);
  border-radius:2px;
  color:var(--ink-3);
  gap:5px;
}
.mega-brand-links a i{font-style:normal;opacity:.65;font-size:11px;}
.mega-brand-links a:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-3);}

/* мобильное меню: тап по стрелке раскрывает подменю */
@media (max-width:960px){
  .nav-drop{
    display:none;
    position:static;
    transform:none !important;
    opacity:1;visibility:visible;pointer-events:auto;
    width:auto;min-width:0;
    border:0;box-shadow:none;
    background:transparent;
    padding:0 0 10px 10px;
    grid-template-columns:1fr;
  }
  .nav-item.open > .nav-drop{display:grid;}
  .nav-item{display:block;}
  .nav-item > a{padding:12px 0;margin:0;justify-content:space-between;}
  .mega-brands{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:10px;}
  .nav-drop a{border-bottom:0 !important;}
  .nav-caret{width:14px;height:14px;}
  .nav-item.open .nav-caret{transform:rotate(180deg);}
}

/* ============================================================
   Карточка товара — галерея «фото + паспорт изделия»
   ============================================================ */
.product-thumb{position:relative;}
.thumb-shot{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .25s var(--ease);
}
.thumb-shot.on{opacity:1;}
.thumb-shot img{width:88%;height:88%;object-fit:contain;}
.thumb-tabs{
  position:absolute;
  left:50%;bottom:8px;
  transform:translateX(-50%);
  display:flex;gap:4px;
  z-index:4;
}
.thumb-tab{
  border:1.5px solid var(--ink);
  background:rgba(7,15,12,.82);
  color:var(--ink-2);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 9px;
  border-radius:2px;
  line-height:1.5;
}
.thumb-tab.on{background:var(--red);color:var(--void);border-color:var(--ink);}

/* ============================================================
   Паспорт изделия — модальное окно с двумя изображениями
   ============================================================ */
.passport-shots{display:flex;flex-direction:column;gap:10px;}
.passport-shot-tabs{display:flex;gap:6px;}
.passport-shot-tabs button{
  flex:1;
  border:2px solid var(--ink);
  background:var(--paper-2);
  color:var(--ink-2);
  font-size:12px;font-weight:700;
  padding:7px 6px;
  border-radius:var(--radius-s);
}
.passport-shot-tabs button.on{background:var(--red);color:var(--void);}
.passport-lead{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 14px;
}
.passport-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.passport-tags span{
  font-size:11.5px;font-weight:600;
  border:1px solid var(--line-soft);
  border-radius:2px;
  padding:3px 8px;
  color:var(--ink-3);
}
.passport-specs-table{
  display:grid;
  gap:0;
  margin:0 0 14px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-s);
  overflow:hidden;
}
.passport-specs-table div{
  display:grid;
  grid-template-columns:minmax(120px,42%) 1fr;
  gap:10px;
  padding:8px 12px;
  font-size:13px;
}
.passport-specs-table div:nth-child(odd){background:var(--paper-2);}
.passport-specs-table b{color:var(--ink-3);font-weight:600;}
.passport-specs-table span{color:var(--ink);font-weight:600;}
.passport-dl{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:2px;
  font-size:12.5px;font-weight:700;
  color:var(--red);
}
.passport-dl svg{width:15px;height:15px;}

/* краткие характеристики прямо в карточке */
.product-chips{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0;}
.product-chips span{
  font-size:11px;font-weight:600;
  color:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:2px;
  padding:2px 7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* паспорт в модальном окне: фото + разворот паспорта */
.passport-shots{
  padding:14px;
  border-right:2px solid var(--ink);
  background:var(--paper-2);
}
.passport-shots .passport-photo{
  border-right:none;
  padding:12px;
  min-height:230px;
  border:1px solid var(--line-soft);
}
.passport-shots .passport-photo img{max-height:340px;cursor:zoom-in;}
@media (max-width:640px){
  .passport-shots{border-right:none;border-bottom:2px solid var(--ink);}
}

/* ============================================================
   Hero — демонстрационная трансляция с камер ТЦ
   4 ракурса, поворот каждые 4 с, полный цикл 16 с
   ============================================================ */
.cctv{
  position:absolute;inset:0;
  overflow:hidden;
  background:#0d1812;
}
.cctv-scene{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06) translateX(var(--pan, 0));
  transition:opacity .45s var(--ease), transform 1.1s var(--ease);
  will-change:opacity, transform;
}
.cctv-scene.on{
  opacity:1;
  transform:scale(1) translateX(0);
}
.cctv-svg{width:100%;height:100%;display:block;}

/* пешеходы */
.cctv .people g.walker{
  fill:#5ca47e;
  transform:translate(var(--x), var(--y)) scale(var(--s));
  animation:cctvWalk var(--dur) linear var(--delay) infinite;
}
@keyframes cctvWalk{
  0%   {opacity:0;}
  6%   {opacity:.92;}
  94%  {opacity:.92;}
  100% {opacity:0;}
}
.cctv .people g.walker circle,
.cctv .people g.walker path{
  animation:cctvStride var(--dur) linear var(--delay) infinite;
}
@keyframes cctvStride{
  from{transform:translateX(0);}
  to  {transform:translateX(var(--dist));}
}

/* машина на въезде */
.cctv-car{
  transform:translate(90px, 0);
  animation:cctvCar 13s linear 1.5s infinite;
}
@keyframes cctvCar{
  0%   {transform:translate(-160px,0); opacity:0;}
  8%   {opacity:1;}
  92%  {opacity:1;}
  100% {transform:translate(560px,0); opacity:0;}
}
.cctv-head{fill:#9dffc8;opacity:.55;animation:cctvHead 2.2s steps(2) infinite;}
@keyframes cctvHead{0%,100%{opacity:.55;}50%{opacity:.85;}}

/* шум, строчная развёртка, засветка по краям */
.cctv-noise{
  position:absolute;inset:-40%;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation:cctvNoise .7s steps(4) infinite;
}
@keyframes cctvNoise{
  0%{transform:translate(0,0);}   25%{transform:translate(-4%,3%);}
  50%{transform:translate(3%,-3%);} 75%{transform:translate(-3%,-2%);}
  100%{transform:translate(0,0);}
}
.cctv-lines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.cctv-lines::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 100%);
}
/* вспышка в момент поворота камеры */
.cctv-pan{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(180,255,120,.16), transparent);
  opacity:0;
}
.cctv-pan.go{animation:cctvPanFlash 1s var(--ease);}
@keyframes cctvPanFlash{
  0%{opacity:0;transform:translateX(-60%);}
  35%{opacity:1;}
  100%{opacity:0;transform:translateX(60%);}
}

/* HUD: мигающий REC, часы, пресет PTZ */
.frame-hud .bottom{display:flex;justify-content:space-between;align-items:flex-end;}
.frame-hud .rec-led{
  width:9px;height:9px;border-radius:50%;
  background:#ff4438;
  box-shadow:0 0 10px rgba(255,68,56,.9);
  animation:recBlink 1s steps(1) infinite;
}
@keyframes recBlink{0%,49%{opacity:1;}50%,100%{opacity:.12;}}
.frame-hud .rec{color:#ff6a5e;letter-spacing:.1em;}
.cctv-clock{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:13px;
  color:var(--ink);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.cctv-ptz{color:var(--ink-3);letter-spacing:.08em;}

@media (prefers-reduced-motion:reduce){
  .cctv .people g.walker, .cctv .people g.walker *,
  .cctv-car, .cctv-noise, .cctv-pan, .frame-hud .rec-led{animation:none;}
  .cctv-scene{transition:opacity .3s;}
}

/* ============================================================
   ЛОГОТИП «СМОТРИТЕЛЬ» — глаз-объектив в рамке видоискателя
   ============================================================ */
.logo-mark .lm-iris{
  transform-origin:20px 20px;
  animation:lm-spin 6s linear infinite;
}
.logo-mark .lm-core{transform-origin:20px 20px;}
.logo-mark .lm-eye{opacity:.95;}
.logo:hover .lm-eye{opacity:1;}

/* ============================================================
   Мессенджеры: кнопки и карточки менеджеров
   ============================================================ */
.msgr-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.msgr-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border:2px solid var(--ink);
  border-radius:var(--radius-s);
  background:var(--paper-2);
  color:var(--ink);
  font-size:13.5px;
  font-weight:700;
  line-height:1;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s, color .15s;
  box-shadow:3px 3px 0 var(--line-soft);
}
.msgr-btn svg{width:19px;height:19px;flex-shrink:0;}
.msgr-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line-soft);background:var(--paper-3);}
.msgr-btn small{display:block;font-weight:500;font-size:11px;color:var(--ink-3);margin-top:3px;}
.msgr-btn.is-vk:hover{border-color:#0077ff;color:#4da2ff;}
.msgr-btn.is-tg:hover{border-color:#29b6f6;color:#7fd4ff;}
.msgr-btn.is-max:hover{border-color:#6f4cff;color:#a893ff;}

.managers-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:26px;
}
@media (max-width:760px){ .managers-grid{grid-template-columns:1fr;} }
.manager-card{
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:22px;
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-hard-sm);
}
.manager-card .mc-head{
  display:flex;align-items:center;gap:13px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--line-soft);
}
.manager-card .mc-ava{
  width:44px;height:44px;flex-shrink:0;
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;font-size:17px;
  color:var(--red);
  background:var(--paper-3);
}
.manager-card .mc-name{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:16px;}
.manager-card .mc-role{font-size:12.5px;color:var(--ink-3);}
.manager-card .mc-phone{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:16px;
  font-family:var(--font-display);
  font-size:20px;font-weight:700;color:var(--ink);
  letter-spacing:.01em;
}
.manager-card .mc-phone svg{width:18px;height:18px;color:var(--red);}
.manager-card .mc-phone:hover{color:var(--red);}
.manager-card .mc-hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;}

/* всплывающее меню у плавающих кнопок справа */
.dock-item{position:relative;display:flex;}
.dock-flyout{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  width:250px;
  max-width:calc(100vw - 80px);
  background:var(--void);
  border:2px solid var(--ink);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-hard-sm);
  padding:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
  z-index:2;
}
.dock-item.open .dock-flyout{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0);}
.dock-flyout-title{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:4px 8px 8px;
}
.dock-flyout a{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;
  border-radius:2px;
  color:var(--ink-2);
  font-size:13px;
  transition:background .14s, color .14s;
}
.dock-flyout a:hover{background:var(--paper-3);color:var(--ink);}
.dock-flyout a b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;}
.dock-flyout a span{display:block;font-size:11.5px;color:var(--ink-3);}
.dock-flyout a svg{width:20px;height:20px;flex-shrink:0;}
.dock-btn.dock-max:hover{background:#6f4cff;border-color:#6f4cff;color:#fff;box-shadow:0 0 22px -2px #6f4cff;}
.dock-btn.dock-max svg,
.dock-btn.dock-tg svg{width:23px;height:23px;}

/* ============================================================
   Прайс-лист
   ============================================================ */
.price-note{
  display:flex;align-items:flex-start;gap:11px;
  border:2px dashed var(--line-soft);
  padding:15px 18px;
  border-radius:var(--radius-s);
  color:var(--ink-3);
  font-size:13px;
  margin-top:26px;
}
.price-note svg{width:19px;height:19px;flex-shrink:0;color:var(--red);margin-top:1px;}

.price-block{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-hard-sm);
  margin-top:24px;
  overflow:hidden;
}
.price-block-head{
  display:flex;align-items:center;gap:11px;
  padding:16px 20px;
  background:var(--paper-3);
  border-bottom:2px solid var(--ink);
}
.price-block-head svg{width:20px;height:20px;color:var(--red);}
.price-block-head h3{font-size:15.5px;text-shadow:none;}
.price-table{width:100%;border-collapse:collapse;}
.price-table tr{border-bottom:1px solid var(--line-soft);}
.price-table tr:last-child{border-bottom:0;}
.price-table tr:hover{background:rgba(52,255,143,.04);}
.price-table td{padding:13px 20px;font-size:14px;color:var(--ink-2);vertical-align:top;}
.price-table td.pt-unit{
  text-align:right;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  font-size:14.5px;
}
.price-table td.pt-unit i{
  display:block;font-style:normal;font-family:var(--font-body);
  font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:2px;
}
.price-table td small{display:block;color:var(--ink-3);font-size:12px;margin-top:3px;}
.price-table .pt-free{color:var(--red);}
@media (max-width:560px){
  .price-table td{padding:11px 14px;font-size:13.2px;}
  .price-block-head{padding:13px 14px;}
}

.kit-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:26px;
}
@media (max-width:980px){ .kit-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:620px){ .kit-grid{grid-template-columns:1fr;} }
.kit-card{
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:22px;
  border-radius:var(--radius-s);
  display:flex;flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:3px 3px 0 var(--line-soft);
}
.kit-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm);}
.kit-card .kit-tag{
  align-self:flex-start;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--void);background:var(--red);
  padding:4px 9px;border-radius:2px;font-weight:700;
}
.kit-card h3{font-size:17px;margin-top:14px;}
.kit-card ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;}
.kit-card li{position:relative;padding-left:18px;font-size:13.5px;color:var(--ink-2);}
.kit-card li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--red);}
.kit-price{
  margin-top:auto;padding-top:18px;
  font-family:var(--font-display);
  font-size:24px;font-weight:700;color:var(--ink);
}
.kit-price span{display:block;font-family:var(--font-body);font-size:11.5px;color:var(--ink-3);font-weight:500;}

/* ============================================================
   Калькулятор стоимости
   ============================================================ */
.calc-wrap{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:24px;
  margin-top:28px;
  align-items:start;
}
@media (max-width:960px){ .calc-wrap{grid-template-columns:1fr;} }
.calc-form,
.calc-result{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-hard-sm);
  padding:24px;
}
.calc-result{position:sticky;top:96px;background:var(--paper-3);}
@media (max-width:960px){ .calc-result{position:static;} }
.calc-group{padding-bottom:20px;margin-bottom:20px;border-bottom:1px dashed var(--line-soft);}
.calc-group:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.calc-group > h4{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;text-shadow:none;
}
.calc-field{margin-bottom:14px;}
.calc-field:last-child{margin-bottom:0;}
.calc-field > label{
  display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px;font-weight:600;
}
.calc-field select,
.calc-field input[type=number],
.calc-field input[type=text]{
  width:100%;
  padding:11px 13px;
  background:var(--paper);
  border:2px solid var(--line-soft);
  border-radius:var(--radius-s);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
}
.calc-field select:focus,
.calc-field input:focus{outline:none;border-color:var(--ink);}
.calc-field small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:5px;}
.calc-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:460px){ .calc-row-2{grid-template-columns:1fr;} }
.calc-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.2px;color:var(--ink-2);
  padding:8px 0;cursor:pointer;
}
.calc-check input{
  width:17px;height:17px;flex-shrink:0;margin-top:1px;
  accent-color:var(--red);cursor:pointer;
}
.calc-stepper{display:flex;align-items:center;gap:0;}
.calc-stepper button{
  width:40px;height:43px;flex-shrink:0;
  border:2px solid var(--line-soft);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;font-weight:700;line-height:1;
}
.calc-stepper button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.calc-stepper input{
  text-align:center;
  border-left:0 !important;border-right:0 !important;
  border-radius:0 !important;
  -moz-appearance:textfield;
}
.calc-stepper input::-webkit-outer-spin-button,
.calc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.calc-result h3{font-size:16px;margin-bottom:4px;}
.calc-result .cr-sub{font-size:12.5px;color:var(--ink-3);}
.calc-lines{margin-top:18px;display:flex;flex-direction:column;gap:0;}
.calc-line{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;
  font-size:13.3px;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
}
.calc-line b{color:var(--ink);font-weight:600;white-space:nowrap;}
.calc-line.is-sum{
  font-family:var(--font-display);
  font-weight:700;color:var(--ink);font-size:14px;
  border-bottom:2px solid var(--line-soft);
  margin-top:6px;
}
.calc-line.is-muted{color:var(--ink-3);border-bottom:0;}
.calc-total{
  margin-top:18px;
  padding:18px;
  border:2px solid var(--red);
  border-radius:var(--radius-s);
  background:var(--paper);
}
.calc-total .ct-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.calc-total .ct-value{
  font-family:var(--font-display);
  font-size:clamp(24px,3.4vw,30px);
  font-weight:700;color:var(--red);
  line-height:1.15;margin-top:6px;
}
.calc-total .ct-range{font-size:12.5px;color:var(--ink-3);margin-top:7px;}
.calc-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.calc-disclaimer{font-size:11.5px;color:var(--ink-3);margin-top:14px;line-height:1.5;}

/* ============================================================
   Блок связи на главной
   ============================================================ */
.contact-strip{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  padding:30px;
  box-shadow:var(--shadow-hard-sm);
}
.footer-contacts{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.footer-contacts a{
  display:inline-flex;align-items:center;gap:9px;
  color:#a9c9b6;font-size:14px;font-weight:600;
}
.footer-contacts a:hover{color:var(--ink);}
.footer-contacts a svg{width:16px;height:16px;flex-shrink:0;}
.footer-msgr{display:flex;gap:9px;margin-top:14px;}
.footer-msgr a{
  width:38px;height:38px;
  border:2px solid var(--line-soft);
  border-radius:var(--radius-s);
  display:flex;align-items:center;justify-content:center;
  color:#a9c9b6;
  transition:border-color .15s, color .15s, transform .15s;
}
.footer-msgr a svg{width:19px;height:19px;}
.footer-msgr a:hover{transform:translateY(-2px);border-color:var(--ink);color:var(--ink);}

/* иконки мессенджеров внутри выпадающего меню шапки */
.nav-drop .nav-msgr{display:flex;flex-shrink:0;}
.nav-drop .nav-msgr svg{width:17px;height:17px;color:inherit;}

/* ============================================================
   Карточка товара: клик по карточке открывает паспорт
   ============================================================ */
.product-card{cursor:pointer;}
.product-card .product-thumb::after{
  content:'Открыть карточку';
  position:absolute;left:50%;top:12px;
  transform:translate(-50%,-8px);
  background:var(--ink);color:var(--void);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:2px;
  opacity:0;pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:4;
}
.product-card:hover .product-thumb::after{opacity:1;transform:translate(-50%,0);}

/* крестик закрытия всегда на виду */
.passport-head{position:sticky;top:0;z-index:5;}
.passport-close{flex-shrink:0;}

.passport-actions{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}
.passport-dl.is-pdf{background:var(--red);color:var(--void);border-color:var(--red);}
.passport-dl.is-pdf:hover{background:var(--red-dark);border-color:var(--red-dark);}
.passport-dl.is-ghost{background:transparent;}

/* ============================================================
   Модалка «Связаться с менеджером»
   ============================================================ */
.mm-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;}
.mm-card{
  border:2px solid var(--line-soft);
  border-radius:var(--radius-s);
  padding:14px;
  margin-top:14px;
}
.mm-name{
  font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:15px;
  margin-bottom:10px;
}
.mm-name span{display:block;font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ink-3);margin-top:2px;}
.mm-card .msgr-btn{width:100%;justify-content:flex-start;}
.mm-card .msgr-row{margin-top:10px;}
.mm-card .msgr-row .msgr-btn{width:calc(50% - 5px);}
@media (max-width:460px){ .mm-card .msgr-row .msgr-btn{width:100%;} }

/* кнопка связи под блоком комплектов */
.kits-cta{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:34px;
}

/* ============================================================
   Панель управления (admin.html)
   ============================================================ */
body.admin-body{opacity:1;}   /* у панели нет main.js, который снимает затемнение */
.admin-body section{padding:40px 0 70px;}
.admin-card{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  padding:24px;
  box-shadow:var(--shadow-hard-sm);
}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.admin-tab{
  border:2px solid var(--line-soft);
  background:var(--paper-2);
  color:var(--ink-2);
  font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:var(--radius-s);
}
.admin-tab.active{border-color:var(--ink);color:var(--void);background:var(--red);}
.admin-toolbar{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr auto;
  gap:10px;margin-bottom:18px;
}
.admin-toolbar > *{min-width:0;}
@media (max-width:860px){ .admin-toolbar{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .admin-toolbar{grid-template-columns:1fr;} }
.admin-toolbar input,
.admin-toolbar select{
  padding:11px 13px;
  background:var(--paper);
  border:2px solid var(--line-soft);
  border-radius:var(--radius-s);
  color:var(--ink);font-family:var(--font-body);font-size:14px;
}
.admin-toolbar input:focus,.admin-toolbar select:focus{outline:none;border-color:var(--ink);}
.admin-split{display:grid;grid-template-columns:400px 1fr;gap:20px;align-items:start;}
@media (max-width:1000px){ .admin-split{grid-template-columns:1fr;} }
.admin-list{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  max-height:76vh;overflow-y:auto;
}
.admin-list-head{
  padding:11px 16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-soft);
  background:var(--paper-3);
}
.admin-row{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:transparent;border:0;
  border-bottom:1px solid var(--line-soft);
  text-align:left;color:var(--ink-2);
}
.admin-row:hover{background:var(--paper-3);}
.admin-row.on{background:var(--paper-3);box-shadow:inset 3px 0 0 var(--red);}
.admin-row img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:2px;flex-shrink:0;}
.admin-row .ar-main{flex:1;min-width:0;}
.admin-row .ar-main b{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-row .ar-main small{display:block;font-size:11.5px;color:var(--ink-3);}
.admin-row .ar-price{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;}
.ar-flag{
  font-style:normal;font-size:10px;font-weight:700;
  border:1px solid var(--red);color:var(--red);
  padding:2px 6px;border-radius:2px;
}
.ar-flag.is-new{background:var(--red);color:var(--void);}
.admin-editor{
  border:2px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--radius-s);
  padding:22px;
}
.admin-empty{color:var(--ink-3);font-size:14px;text-align:center;padding:40px 10px;}
.admin-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;}
.ae-title{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:16px;}
.ae-sub{font-size:12px;color:var(--ink-3);margin-top:3px;}
.admin-editor textarea,
.admin-editor input[type=text],
.admin-editor input[type=number],
.admin-card textarea,
.admin-card input[type=text],
.admin-card input[type=password]{
  width:100%;padding:11px 13px;
  background:var(--paper);
  border:2px solid var(--line-soft);
  border-radius:var(--radius-s);
  color:var(--ink);font-family:var(--font-body);font-size:14px;
  resize:vertical;
}
.admin-editor input:focus,.admin-editor textarea:focus,
.admin-card input:focus,.admin-card textarea:focus{outline:none;border-color:var(--ink);}
.ae-spec{display:grid;grid-template-columns:1fr 1.4fr 40px;gap:8px;margin-bottom:8px;}
.ae-spec-del{
  border:2px solid var(--line-soft);background:var(--paper);
  color:var(--ink-3);font-size:17px;border-radius:var(--radius-s);
}
.ae-spec-del:hover{border-color:var(--red);color:var(--red);}
.ae-img{
  border:2px solid var(--line-soft);border-radius:var(--radius-s);
  background:#fff;height:150px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ae-img img{max-height:100%;width:auto;object-fit:contain;}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.admin-quota{margin-top:16px;font-size:12px;color:var(--ink-3);}
.admin-quota-bar{
  height:8px;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:2px;overflow:hidden;margin-bottom:7px;
}
.admin-quota-bar span{display:block;height:100%;width:0;background:var(--red);}

/* ============================================================
   Зона выезда и схема проезда
   ============================================================ */
.geo-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:52px;
  align-items:center;
}
@media (max-width:920px){ .geo-wrap{grid-template-columns:1fr;gap:34px;} }
.geo-map{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper);
  box-shadow:var(--shadow-hard);
  padding:8px;
}
.geo-svg{display:block;width:100%;height:auto;font-family:var(--font-body);}
.geo-pulse{transform-box:fill-box;transform-origin:center;animation:geo-pulse 2.4s ease-out infinite;}
@keyframes geo-pulse{
  0%{transform:scale(1);opacity:.9;}
  100%{transform:scale(3.4);opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .geo-pulse{animation:none;} }
.geo-cities{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
@media (max-width:420px){ .geo-cities{grid-template-columns:1fr;} }
.geo-cities li{
  border:2px solid var(--line-soft);
  border-radius:var(--radius-m);
  background:var(--paper-2);
  padding:11px 14px;
}
.geo-cities b{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);}
.geo-cities span{display:block;font-size:12.5px;color:var(--ink-3);}
.geo-cities li.is-office{border-color:var(--red);box-shadow:3px 3px 0 var(--red);}
.geo-cities li.is-office b{color:var(--red);}
@media (max-width:560px){
  .geo-svg .gm{display:none;}
  .geo-svg .gk{font-size:25px;stroke-width:6px;}
  .geo-svg .go{font-size:24px;transform:translateY(12px);stroke-width:7px;}
}
.geo-note{margin-top:16px;font-size:13px;color:var(--ink-3);}
.geo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}

.route-map{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
}
.route-map iframe{display:block;width:100%;height:440px;border:0;background:var(--paper-3);}
@media (max-width:640px){ .route-map iframe{height:320px;} }
.route-map-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;
  padding:18px 20px;
  border-top:2px solid var(--ink);
}
.route-addr{display:flex;gap:14px;align-items:flex-start;}
.route-addr b{display:block;color:var(--ink);font-size:15px;}
.route-addr span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.route-map .ico,.route-card .ico{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);border-radius:var(--radius-m);
  color:var(--red);background:var(--paper);
}
.route-map .ico svg,.route-card .ico svg{width:19px;height:19px;}
.route-links{display:flex;gap:10px;flex-wrap:wrap;}
.route-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:36px;
}
@media (max-width:960px){ .route-grid{grid-template-columns:1fr;} }
.route-card{
  border:2px solid var(--ink);
  border-radius:var(--radius-l);
  background:var(--paper);
  box-shadow:var(--shadow-hard-sm);
  padding:24px 24px 26px;
}
.route-card h3{font-size:18px;margin:16px 0 12px;}
.route-card p{font-size:14px;color:var(--ink-2);}
.route-card p + p{margin-top:10px;}
.route-card b{color:var(--ink);font-weight:600;}
.route-card a{color:var(--red);font-weight:600;}
.route-card a:hover{text-decoration:underline;text-underline-offset:3px;}

.footer-addr{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:16px;max-width:280px;
  font-size:13.5px;color:#a9c4b6;
}
.footer-addr svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--red);}
.footer-addr u{color:var(--red);text-underline-offset:3px;}
.footer-addr:hover u{color:var(--ink);}
.footer-area{font-size:12.5px !important;color:#5c7d6c !important;margin-top:8px !important;}

/* ============================================================
   Формы: скрытое поле-ловушка и ошибки
   ============================================================ */
.hp-field{position:absolute !important;left:-10000px !important;width:1px;height:1px;opacity:0;pointer-events:none;}
.btn[disabled]{opacity:.6;cursor:progress;}

/* ============================================================
   Текстовые страницы (политика, 404)
   ============================================================ */
.legal{max-width:760px;}
.legal h2{font-size:22px;margin:38px 0 12px;}
.legal p,.legal li{font-size:15px;color:var(--ink-2);}
.legal p + p{margin-top:10px;}
.legal ul{padding-left:20px;margin:10px 0 0;display:grid;gap:6px;}
.legal a{color:var(--red);}
.legal .todo{background:rgba(182,255,46,.12);outline:1px dashed var(--red);padding:0 4px;color:var(--red);}
.notfound{min-height:52vh;display:flex;align-items:center;}
.notfound .code{font-family:var(--font-display);font-size:clamp(90px,16vw,180px);line-height:1;color:var(--ink);font-weight:700;text-shadow:0 0 30px rgba(52,255,143,.35);}