/* М-Тех — неоновые плитки направлений и страницы услуг.
   Дополняет базовые стили сайта. Палитра наследуется из :root главной страницы. */

:root{
  --neon-copper:#FF8A3D;
  --neon-aqua:#22D3EE;
  --neon-sky:#38BDF8;
  --neon-violet:#8B7BFF;
  --neon-warn:#FF6B4A;
  --neon-volt:#FFD23F;
  --neon-teal:#2DD4BF;
  --neon-solar:#FFA31A;
  --tile-bg:linear-gradient(160deg,#12405F 0%,#0B2C44 55%,#082131 100%);
}

/* ---------- сетка плиток ---------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:34px;
}
@media (max-width:1080px){ .tiles{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr;} }

.tile{
  --neon:var(--neon-aqua);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:212px;
  padding:22px 20px 20px;
  border-radius:var(--r);
  background:var(--tile-bg);
  border:1px solid rgba(255,255,255,.10);
  color:#EAF4F8;
  text-decoration:none;
  isolation:isolate;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* неоновая подсветка — мягкое пятно за иконкой */
.tile::before{
  content:"";
  position:absolute;
  inset:-40% 45% 55% -30%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--neon) 55%, transparent), transparent 70%);
  opacity:.28;
  filter:blur(14px);
  z-index:-1;
  transition:opacity .22s ease, transform .22s ease;
}
/* неоновая линия по низу плитки */
.tile::after{
  content:"";
  position:absolute;
  left:20px; right:20px; bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity:.5;
  transition:opacity .22s ease, box-shadow .22s ease;
}
.tile:hover,
.tile:focus-visible{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--neon) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--neon) 35%, transparent),
             0 18px 44px -22px rgba(8,33,49,.9),
             0 0 34px -6px color-mix(in srgb, var(--neon) 45%, transparent);
  outline:none;
}
.tile:hover::before,
.tile:focus-visible::before{ opacity:.5; transform:scale(1.08); }
.tile:hover::after,
.tile:focus-visible::after{
  opacity:1;
  box-shadow:0 0 12px 1px color-mix(in srgb, var(--neon) 70%, transparent);
}
.tile:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }

.tile__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--r);
  background:rgba(255,255,255,.07);
  border:1px solid color-mix(in srgb, var(--neon) 40%, transparent);
  color:var(--neon);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 45%, transparent));
}
.tile__eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--neon) 75%, #EAF4F8);
}
.tile__t{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  margin:0;
  color:#fff;
}
.tile__s{
  font-size:14px;
  line-height:1.5;
  color:rgba(234,244,248,.72);
  margin:0;
  flex:1;
}
.tile__go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--neon);
}
.tile__go svg{ transition:transform .22s ease; }
.tile:hover .tile__go svg{ transform:translateX(4px); }

/* акценты по направлениям */
.tile--copper{ --neon:var(--neon-copper); }
.tile--aqua{   --neon:var(--neon-aqua); }
.tile--sky{    --neon:var(--neon-sky); }
.tile--neon{   --neon:var(--neon-violet); }
.tile--warn{   --neon:var(--neon-warn); }
.tile--volt{   --neon:var(--neon-volt); }
.tile--teal{   --neon:var(--neon-teal); }
.tile--solar{  --neon:var(--neon-solar); }

@media (prefers-reduced-motion:reduce){
  .tile,.tile::before,.tile::after,.tile__go svg{ transition:none; }
  .tile:hover,.tile:focus-visible{ transform:none; }
}

/* ---------- страница услуги ---------- */
.crumbs{
  font-size:13px;
  color:var(--muted);
  padding:18px 0 0;
}
.crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); }
.crumbs a:hover{ color:var(--aqua); border-color:var(--aqua); }
.crumbs span{ color:var(--ink); }

.shero{
  position:relative;
  background:linear-gradient(150deg,#0E3350 0%,#0B2C44 60%,#082131 100%);
  color:#EAF4F8;
  padding:52px 0 56px;
  overflow:hidden;
}
.shero::before{
  content:"";
  position:absolute;
  inset:-30% 55% 30% -20%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--neon,#22D3EE) 50%, transparent), transparent 70%);
  opacity:.3;
  filter:blur(24px);
}
.shero__in{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; }
@media (max-width:900px){ .shero__in{ grid-template-columns:1fr; } }
.shero__eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon,#22D3EE);
}
.shero h1{
  font-family:'Oswald',sans-serif;
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.1;
  margin:12px 0 14px;
  color:#fff;
}
.shero__lead{ font-size:17px; line-height:1.65; color:rgba(234,244,248,.85); max-width:60ch; }
.shero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.shero__img{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
  background:linear-gradient(140deg,#12405F,#082131);
  aspect-ratio:16/9;
}
.shero__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.sub{ padding:56px 0; }
.sub--mist{ background:var(--mist); }
.sub__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; }
@media (max-width:900px){ .sub__grid{ grid-template-columns:1fr; gap:28px; } }
.sub p{margin:0 0 14px;  font-size:16px; line-height:1.7; color:var(--ink); }
.sub h2{ font-family:'Oswald',sans-serif; font-size:clamp(22px,3vw,30px); line-height:1.2; margin:0 0 18px; }
.sub h3{ font-family:'Oswald',sans-serif; font-size:19px; margin:0 0 8px; }

.checks{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.checks li{
  position:relative;
  padding-left:30px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
}
.checks li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:14px; height:8px;
  border-left:2px solid var(--aqua);
  border-bottom:2px solid var(--aqua);
  transform:rotate(-45deg);
}

.figure{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--mist-2); }
.figure img{ width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; }
.figure figcaption{ font-size:13px; color:var(--muted); padding:10px 14px; background:var(--paper); }
.figs{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
@media (max-width:700px){ .figs{ grid-template-columns:1fr; } }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; counter-reset:st; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{
  position:relative;
  padding:20px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  border-top:2px solid var(--neon,#12A5C0);
}
.step::before{
  counter-increment:st;
  content:"0" counter(st);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  color:var(--neon,#12A5C0);
  letter-spacing:.1em;
}
.step h3{ margin:8px 0 6px; font-size:17px; }
.step p{ font-size:14.5px; color:var(--muted); margin:0; line-height:1.55; }

.qa{ display:grid; gap:14px; margin-top:24px; }
.qa details{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  padding:16px 18px;
}
.qa summary{ cursor:pointer; font-weight:600; font-size:16px; list-style:none; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; float:right; color:var(--aqua); font-size:20px; line-height:1; }
.qa details[open] summary::after{ content:"–"; }
.qa p{ margin:12px 0 0; font-size:15.5px; color:var(--muted); }

.cta-band{
  background:linear-gradient(150deg,#0E3350,#082131);
  color:#EAF4F8;
  padding:44px 0;
}
.cta-band h2{ color:#fff; margin:0 0 10px; }
.cta-band p{ color:rgba(234,244,248,.8); margin:0 0 22px; max-width:62ch; }
.cta-band .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.otherwrap{ padding:52px 0 60px; }
.otherwrap .tiles{ margin-top:26px; }
.otherwrap .tile{ min-height:170px; }
.otherwrap .tile__s{ display:none; }
@media (min-width:1081px){ .otherwrap .tiles{ grid-template-columns:repeat(4,1fr); } }

/* ---------- кнопка «Координаты» в шапке (выпадающее меню) ---------- */
.coords{ position:relative; }
.coords > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  background:var(--paper);
  white-space:nowrap;
  transition:border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.coords > summary::-webkit-details-marker{ display:none; }
.coords > summary:hover,
.coords[open] > summary{
  color:var(--aqua);
  border-color:var(--aqua);
  box-shadow:0 0 0 1px rgba(18,165,192,.25), 0 0 18px -6px rgba(34,211,238,.65);
}
.coords > summary:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }
.coords__chev{ transition:transform .2s ease; }
.coords[open] .coords__chev{ transform:rotate(180deg); }

.coords__menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:60;
  width:min(340px, calc(100vw - 32px));
  padding:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:2px solid var(--aqua);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  display:grid;
  gap:14px;
}
.coords__row{ display:grid; gap:3px; }
.coords__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.coords__v{ font-size:15px; line-height:1.5; color:var(--ink); text-decoration:none; }
a.coords__v:hover{ color:var(--aqua); }
.coords__v--big{ font-family:'Oswald',sans-serif; font-size:19px; font-weight:600; letter-spacing:.01em; }
.coords__geo{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  color:var(--muted);
}
.coords__acts{ display:flex; flex-wrap:wrap; gap:8px; padding-top:2px; }
.coords__acts .btn{ flex:1 1 auto; justify-content:center; }

@media (max-width:900px){
  .coords{ width:100%; }
  .coords > summary{ width:100%; justify-content:center; }
  .coords__menu{ position:static; width:100%; margin-top:10px; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce){
  .coords > summary,.coords__chev{ transition:none; }
}

.coords__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper); color:var(--navy);
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.coords__btn:hover{ border-color:var(--aqua); color:var(--aqua); }
.coords__btn:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }

/* ---------- копируемые координаты ---------- */
.geocopy{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  padding:4px 9px; border:1px solid var(--line,#D9E3E9); border-radius:3px;
  background:transparent; color:inherit; cursor:pointer; line-height:1.3;
  transition:border-color .2s ease, color .2s ease;
}
.geocopy:hover{ border-color:#12A5C0; color:#12A5C0 }
.geocopy:focus-visible{ outline:2px solid #12A5C0; outline-offset:2px }
.geocopy svg{ flex:none; opacity:.75 }
.geocopy.is-done{ border-color:#1B7F5A; color:#1B7F5A }
.geocopy.is-done svg{ display:none }
.coords__menu .geocopy{ margin-top:3px }
.mtc-back .geocopy{ border-color:rgba(84,195,216,.35); color:#9FB6C4 }
.mtc-back .geocopy:hover{ border-color:#54C3D8; color:#54C3D8 }
.mtc-back .geocopy.is-done{ border-color:#54C3D8; color:#54C3D8 }

/* ===== гео-SEO страницы (услуга × город) — build_geo.py ===== */
.shero--solo .shero__in{ grid-template-columns:1fr; }
.geoparent{ margin-top:20px; font-size:15.5px; color:rgba(234,244,248,.8); }
.geoparent a{ color:var(--aqua); font-weight:600; border-bottom:1px solid transparent; }
.geoparent a:hover{ border-color:var(--aqua); }
.geochips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.geochips a{ display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:14px;
  line-height:1.2; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.geochips a:hover, .geochips a:focus-visible{ border-color:var(--aqua); color:var(--aqua); }
.geochips a[aria-current="page"]{ background:var(--aqua); color:#062431; border-color:var(--aqua); font-weight:600; }
.shero .geochips a{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#EAF4F8; }
.shero .geochips a:hover{ border-color:var(--aqua); color:var(--aqua); }
.shero .geochips a[aria-current="page"]{ background:var(--aqua); color:#062431; border-color:var(--aqua); }
.geogrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:26px; }
@media (max-width:1000px){ .geogrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .geogrid{ grid-template-columns:1fr; } }
.geocol h3{ font-family:'Oswald',sans-serif; font-size:16px; margin:0 0 12px; }
.geocol h3 a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--aqua); }
.geocol ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.geocol a{ color:var(--muted); text-decoration:none; font-size:14px; line-height:1.4;
  border-bottom:1px solid transparent; }
.geocol a:hover{ color:var(--aqua); }

/* etapy-tiles */
a.step{ text-decoration:none; color:inherit; display:block; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.step:hover, a.step:focus-visible{ transform:translateY(-2px); border-color:var(--neon,#12A5C0); box-shadow:0 14px 32px -16px rgba(14,51,80,.5); outline:none; }
.step__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin:10px 0 14px; background:var(--mist-2); }
a.step .step__t{ top:14px; right:14px; z-index:2; background:rgba(255,255,255,.86); padding:3px 9px; border-radius:20px; color:var(--navy); }
.step__go{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color:var(--aqua); letter-spacing:.03em; }
.step__go svg{ transition:transform .18s ease; }
a.step:hover .step__go svg{ transform:translateX(3px); }
.etapchips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.etapchip{ display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:22px; font-size:14px; text-decoration:none; color:var(--ink); background:var(--paper); transition:border-color .16s ease, color .16s ease; }
.etapchip:hover{ border-color:var(--aqua); color:var(--aqua); }
.etapchip.is-cur{ background:var(--navy); color:#fff; border-color:var(--navy); }
@media (prefers-reduced-motion:reduce){ a.step{ transition:none; } a.step:hover{ transform:none; } a.step:hover .step__go svg{ transform:none; } }