/* Главная: первый экран со схемой сети, разделы, витрина панели. Токены — Andromeda (site.css).
   Подложка — .an-backdrop Andromeda на <body> по всей длине (site.css), карточки —
   стекло .an-glass: как экраны пульта splify2. Карточки стекла в разметке задают только форму —
   фон, кромку, тень и размытие даёт .an-glass. */
.hero { position: relative; overflow: hidden; padding: 72px 0 56px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--an-space-14); align-items: center; }
.logo-draw { width: 72px; height: 72px; margin-bottom: var(--an-space-10); filter: drop-shadow(0 10px 24px var(--an-accent-glow)); }
.logo-draw .s { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.6s .2s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 var(--an-space-9); font-weight: var(--an-weight-semibold);
  animation: up .7s .1s both; }
.grad { color: var(--link); }
.lead { font-size: clamp(17px, 2vw, 19.5px); color: var(--muted); max-width: 600px; margin: 0 0 30px; animation: up .7s .25s both; }
.cta { display: flex; flex-wrap: wrap; gap: var(--an-space-6); animation: up .7s .4s both; }
.btn.ghost { background: transparent; }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.net { animation: up .9s .3s both; }
.net svg { width: 100%; height: auto; overflow: visible; }
.net text { font: var(--an-weight-medium) 12.5px var(--an-font-sans); fill: var(--muted); text-anchor: middle; }
.net .tun-a { stop-color: var(--an-accent); }
.net .tun-b { stop-color: var(--an-accent-press); }
.net .wire { fill: none; stroke: var(--an-control-knob-off); stroke-width: 3; stroke-linecap: round; }
.net .wire.tunnel { stroke: url(#tun); stroke-width: 4; stroke-dasharray: 8 8; animation: flow 1.2s linear infinite; }
.net .wire.direct { stroke: var(--an-text-muted); stroke-dasharray: 2 8; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.net .dev rect:first-child { fill: var(--an-surface-card); stroke: var(--an-border); stroke-width: 1.5; }
.net .dev .ico { fill: color-mix(in srgb, var(--an-accent) 55%, var(--an-text-muted)); opacity: .8; }
.net .router { fill: var(--an-surface-card); stroke: var(--an-accent); stroke-width: 2; }
.net .router-glow { fill: var(--an-accent); opacity: .35; animation: pulse var(--an-dur-pulse) ease-in-out infinite; transform-origin: 30px 42px; }
@keyframes pulse { 50% { opacity: .12; transform: scale(1.15); } }
.net .dst { stroke-width: 2; }
.net .dst.tunnel { fill: color-mix(in srgb, var(--an-accent) 16%, var(--an-surface-card)); stroke: var(--an-accent); }
.net .dst.direct { fill: var(--an-surface-card); stroke: var(--an-border); }
.net .lock { fill: none; stroke: var(--an-accent); stroke-width: 4; stroke-linecap: round; }
.net .lockb { fill: var(--an-accent); }
.net .globe { fill: none; stroke: var(--an-text-muted); stroke-width: 2.5; }
.net .lbl { font-weight: var(--an-weight-semibold); fill: var(--an-text); }
.net .pk { filter: drop-shadow(0 0 6px currentColor); }
.net .pk.in { fill: var(--an-cat-2); color: var(--an-cat-2); }
.net .pk.t { fill: var(--an-accent); color: var(--an-accent); }
.net .pk.d { fill: var(--an-control-knob-off); color: transparent; }
.net .chip rect { fill: var(--an-surface-card); stroke: var(--an-accent-line); }
.net .chip text { fill: var(--link); font-size: 11.5px; }
.net .chip.muted rect { fill: var(--an-surface-card); stroke: var(--an-border); }
.net .chip.muted text { fill: var(--muted); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 48px; } .net { max-width: 520px; } }

/* появление при прокрутке */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .logo-draw .s { stroke-dashoffset: 0; } }

section { padding: 64px 0; }
.sec-head { max-width: 720px; margin-bottom: 34px; }
.sec-head h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.15; letter-spacing: var(--an-tracking-verdict); margin: var(--an-space-4) 0 var(--an-space-6); }
.sec-head p { color: var(--muted); margin: 0; font-size: 17px; }
.kicker { display: inline-block; font: var(--an-text-caption); font-size: 13px; font-weight: var(--an-weight-semibold); letter-spacing: var(--an-tracking-caps);
  text-transform: uppercase; color: var(--link); }
.narrow { max-width: 820px; }

/* карточки стекла: только форма и рамка нужной толщины */
.stats-grid > div, .f, .p, .steps li, .faq details, .ipanes { border-width: 1px; border-style: solid; }
.f:hover, .p:hover { border-color: var(--an-accent-line); }

.stats { padding: 0 0 var(--an-space-12); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--an-space-7); }
.stats-grid > div { border-radius: var(--an-radius-block); padding: var(--an-space-9); }
.stats-grid b { display: block; font-size: 30px; line-height: 1.3; letter-spacing: var(--an-tracking-verdict); color: var(--link); }
.stats-grid span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 820px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--an-gap-block); }
.f { border-radius: var(--an-radius-card); padding: var(--an-space-12) 26px; transition: transform .25s var(--an-ease), border-color .25s var(--an-ease); }
.f:hover { transform: translateY(-4px); }
.fi { width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px; border-radius: var(--an-radius-control); background: var(--an-accent-soft); margin-bottom: var(--an-space-7); }
.f h3 { margin: 0 0 var(--an-space-4); font-size: 18.5px; line-height: 1.3; }
.f p { margin: 0; color: var(--muted); font-size: 15.5px; }
.fgrid .f:nth-child(2) { transition-delay: .05s; } .fgrid .f:nth-child(3) { transition-delay: .1s; }
.fgrid .f:nth-child(5) { transition-delay: .05s; } .fgrid .f:nth-child(6) { transition-delay: .1s; }
@media (max-width: 900px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }

.tabs { display: flex; flex-wrap: wrap; gap: var(--an-space-4); margin-bottom: 18px; }
.tabs button, .itabs button { font: inherit; font-size: 14.5px; font-weight: var(--an-weight-medium); padding: 9px 15px; border-radius: var(--an-radius-pill); cursor: pointer;
  border: 1px solid var(--an-glass-border); background: var(--an-glass-tint); color: var(--muted); transition: var(--an-transition-hover), color var(--an-dur-hover) var(--an-ease); }
.tabs button:hover, .itabs button:hover { color: var(--an-text); background: var(--an-glass-hover); }
.tabs button.on, .itabs button.on { background: var(--btn-accent); color: var(--an-text-on-accent); border-color: transparent; }
.screen img { display: block; width: 100%; height: auto; transition: opacity .35s ease; }
.screen img.fade { opacity: 0; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--an-gap-block); counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; top: 31px; left: 8%; right: 8%; height: 2px; background: var(--an-accent-line); }
.steps li { position: relative; border-radius: var(--an-radius-card); padding: var(--an-space-10); }
.steps .n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--an-radius-control); background: var(--btn-accent);
  color: var(--an-text-on-accent); font-weight: var(--an-weight-semibold); margin-bottom: var(--an-space-6); }
.steps h3 { margin: 0 0 var(--an-space-3); font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.steps li:nth-child(2) { transition-delay: .08s; } .steps li:nth-child(3) { transition-delay: .16s; } .steps li:nth-child(4) { transition-delay: .24s; }
.more { margin-top: 18px; font-weight: var(--an-weight-semibold); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps::before { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--an-gap-block); }
.p { border-radius: var(--an-radius-card); padding: var(--an-space-12) 26px; display: flex; flex-direction: column; scroll-margin-top: calc(var(--top-h) + 20px);
  transition: transform .25s var(--an-ease), border-color .25s var(--an-ease); }
.p:hover { transform: translateY(-4px); }
.p:target { outline: 2px solid var(--an-accent); }
.p .tag { align-self: flex-start; font: var(--an-text-caption); font-weight: var(--an-weight-semibold); letter-spacing: var(--an-tracking-caps); text-transform: uppercase;
  color: var(--link); background: var(--chip-accent); padding: var(--an-space-2) 9px; border-radius: var(--an-radius-badge); margin-bottom: var(--an-space-6); }
.p .tag.new { background: var(--btn-accent); color: var(--an-text-on-accent); }
.p h3 { margin: 0 0 var(--an-space-4); font-size: 21px; }
.p p { margin: 0 0 var(--an-space-8); color: var(--muted); font-size: 15.5px; }
.p .links { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--an-space-7); font-weight: var(--an-weight-semibold); font-size: 15px; }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }

.itabs { display: flex; flex-wrap: wrap; gap: var(--an-space-4); margin-bottom: var(--an-space-8); }
.ipanes { border-radius: var(--an-radius-card); padding: var(--an-space-9); }
.ipane { display: none; animation: up .4s both; }
.ipane.on { display: block; }
.ipane p { color: var(--muted); max-width: 760px; margin: var(--an-space-8) 0 0; }
.code { position: relative; }
.code pre { margin: 0; padding-right: 130px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; background: var(--an-surface-inverse);
  color: var(--an-grey-20); border-color: transparent; border-radius: var(--an-radius-block); }
.cp { position: absolute; top: var(--an-space-5); right: var(--an-space-5); font: var(--an-weight-medium) 13px var(--an-font-sans); padding: 7px var(--an-space-6);
  border-radius: var(--an-radius-control); cursor: pointer; border: 1px solid color-mix(in srgb, var(--an-grey-00) 20%, transparent);
  background: color-mix(in srgb, var(--an-grey-00) 10%, transparent); color: var(--an-grey-20); transition: var(--an-transition-hover); }
.cp:hover { background: color-mix(in srgb, var(--an-grey-00) 18%, transparent); }

.faq details { border-radius: var(--an-radius-block); padding: var(--an-space-2) var(--an-space-9); margin-bottom: var(--an-space-5); }
.faq summary { cursor: pointer; font-weight: var(--an-weight-semibold); padding: var(--an-space-7) 28px var(--an-space-7) 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 22px; font-weight: var(--an-weight-regular); color: var(--link);
  transition: transform .2s var(--an-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--an-space-8); color: var(--muted); }
@media (max-width: 560px) { .stats-grid b { font-size: 23px; } .stats-grid > div { padding: var(--an-space-8); } .ipanes { padding: var(--an-space-7); } }
/* витрина: готовые кадры в рамке (tools/frame.html), лёгкий наклон до появления */
.framed { perspective: 1800px; text-align: center; }
.framed img { display: block; width: 100%; height: auto; margin: 0 auto; transform-origin: 50% 0;
  transform: rotateX(10deg) scale(.95); transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.framed.in img { transform: none; }
.framed img.fade { opacity: 0; }
.framed:hover img { transform: translateY(-4px); }
.framed .cap { margin: var(--an-space-2) 0 0; color: var(--muted); font-size: 15px; }

/* Карта России: контур — assets/ru-map.json (tools/ru_map.py), города — из сводки откликов. */
.map[hidden], .map-card[hidden] { display: none; }
.map .live { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.15; letter-spacing: var(--an-tracking-verdict); margin: 0 0 var(--an-space-9); }
.map-card { position: relative; border-width: 1px; border-style: solid; border-radius: var(--an-radius-card); padding: clamp(10px, 2.2vw, 36px); }
#ru-map { display: block; width: 100%; height: auto; overflow: visible; }
/* Прозрачность — у группы, а не у заливки: куски контура на 180-м меридиане перекрываются, и
   полупрозрачная заливка рисовала бы на стыке шов. */
#ru-map .land { opacity: .14; }
#ru-map .land path { fill: var(--an-accent); stroke: var(--an-accent); stroke-width: .7; }
.dark #ru-map .land, [data-theme="dark"] #ru-map .land { opacity: .26; }
#ru-map .halo { fill: var(--an-accent); opacity: .16; }
#ru-map .dot { fill: var(--an-accent); stroke: var(--an-glass-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .15s; }
#ru-map g.city { outline: none; }
#ru-map g.city:hover .dot, #ru-map g.city:focus-visible .dot { fill: var(--link); }
#ru-map g.city:focus-visible .halo { opacity: .4; }
.map-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--an-radius-control); font-size: 14px; font-weight: var(--an-weight-medium);
  background: var(--an-surface-card); color: var(--an-text); border: 1px solid var(--an-border); box-shadow: var(--an-glass-shadow); }
.map-tip[hidden] { display: none; }