/* VYSHKA Landing v2 — public ecosystem shell, 2026-07-11.
   This file intentionally layers over the current self-contained landing.
   It does not load app widgets or change authenticated surfaces. */
:root{
  --accent:#2563eb;
  --accent-fill:#2563eb;
  --accent-soft:#eaf1ff;
  --header-h:64px;
  --layer-header:100;
  --layer-popover:350;
  --layer-drawer:500;
  --layer-scrim:700;
  --layer-dialog:710;
  --layer-system:900;
}

html{scroll-padding-top:calc(var(--header-h) + 16px)}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* Stable single-row public shell. */
.nav.ecosystem-nav{
  height:var(--header-h);
  z-index:var(--layer-header);
  isolation:isolate;
  background:var(--bg);
}
.ecosystem-nav .nav-in{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  height:var(--header-h);
  min-height:var(--header-h);
  padding-top:0;
  padding-bottom:0;
  flex-wrap:nowrap;
}
.ecosystem-nav .brand{
  appearance:none;
  border:0;
  min-height:44px;
  padding:5px 0;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
  overflow-wrap:normal;
  flex:none;
}
.ecosystem-nav .brand-word{display:inline}
.ecosystem-nav .brand-chevron{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  transition:transform var(--dur) var(--ease);
}
.ecosystem-nav .brand[aria-expanded="true"] .brand-chevron{transform:rotate(180deg)}
.nav-products{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:0;
}
.nav-products a,
.nav-products button{
  display:inline-flex;
  align-items:center;
  appearance:none;
  border:0;
  background:transparent;
  min-width:44px;
  min-height:44px;
  padding:0;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.nav-products a:hover,
.nav-products button:hover{color:var(--text)}
.nav-products button{gap:5px}
.nav-products a[aria-current="page"]{color:var(--text)}
.nav-products .module-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nav-products .module-label::after{
  content:"модуль";
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:999px;
  padding:3px 6px;
  font-size:10px;
  font-weight:700;
}
.nav-products-compact{display:none!important}
.ecosystem-nav .nav-cta{
  width:auto;
  margin-left:0;
  justify-content:flex-end;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-wrap:normal;
}
.ecosystem-nav .nav-cta>*{flex:none}
.ecosystem-nav .nav-login{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 10px;
}
.ecosystem-nav .theme-toggle,
.ecosystem-nav .nav .btn,
.ecosystem-nav .btn{min-height:44px}
.ecosystem-nav .theme-toggle{width:44px;height:44px;flex:0 0 44px}
.nav-open-wide{display:inline}
.nav-open-short{display:none}
.nav-menu-btn{display:none}
.nav-icon-btn{
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  padding:0!important;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  cursor:pointer;
}
.nav-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Product switcher and mobile drawer share one explicit overlay contract. */
.landing-scrim{
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:calc(var(--layer-drawer) - 1);
  display:none;
  background:rgba(9,14,24,.46);
}
.landing-scrim.on{display:block}
.product-popover{
  position:fixed;
  top:calc(var(--header-h) + 10px);
  left:50%;
  z-index:var(--layer-popover);
  width:min(620px,calc(100vw - 28px));
  transform:translateX(-50%);
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
}
.product-popover[hidden],
.nav-drawer[hidden]{display:none}
.product-popover-head,
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.product-popover-head strong,
.drawer-head strong{font-size:16px}
.product-popover-head span{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.product-item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:center;
  min-height:68px;
  padding:10px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
}
a.product-item:hover{border-color:var(--accent);text-decoration:none}
.product-item-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  color:var(--accent);
  background:var(--surface);
  border:1px solid var(--border);
}
.product-item-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.product-item b{display:block;font-size:13.5px}
.product-item small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3;margin-top:2px}
.product-item-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  color:var(--success);
  font-size:10.5px;
  font-weight:700;
}
.product-item-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.product-item-status.module{color:var(--accent)}
.nav-drawer{
  position:fixed;
  top:var(--header-h);
  right:0;
  bottom:0;
  z-index:var(--layer-drawer);
  width:min(390px,100vw);
  padding:18px 16px max(20px,env(safe-area-inset-bottom));
  overflow:auto;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:var(--sh-3);
}
.drawer-nav{display:grid;gap:4px}
.drawer-nav a,
.drawer-nav button,
.drawer-nav .drawer-module{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:0 10px;
  color:var(--text);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  font:inherit;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.drawer-nav a:hover{text-decoration:none;color:var(--accent)}
.drawer-nav .drawer-module{color:var(--muted);cursor:default}
.drawer-caption{margin:18px 10px 7px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
body[data-overlay-open="drawer"]{overflow:hidden}
body[data-overlay-open] :is(#vyBug,.vyc-tab,#vyAiFab,#vyfix-themetoggle.vyftt-fixed){display:none!important}

/* Hero now reads as one ecosystem, while the existing Voice scene stays honest. */
.hero .lede{max-width:58ch}
.hv-modules{
  display:flex;
  gap:6px;
  padding:0 2px;
}
.hv-modules span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
}
.hv-modules span.active{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 32%,var(--border))}

/* Explicit audience explorer. All articles remain visible without JavaScript;
   the early landing-js marker reserves only the default panel before deferred JS. */
.audience-section{background:color-mix(in srgb,var(--surface) 62%,var(--bg))}
.audience-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-bottom:18px;
}
.audience-tab{
  min-height:46px;
  padding:8px 10px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.audience-tab[aria-selected="true"]{
  color:var(--accent-ink);
  background:var(--accent-fill);
  border-color:var(--accent-fill);
}
.audience-panels{display:grid;gap:14px}
.audience-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:22px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.audience-enhanced .audience-panel[hidden]{display:none}
html.landing-js:not(.landing-persona-ready) .audience-panel:not(:first-child){display:none}
.audience-copy h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.audience-copy>p{margin-top:9px;color:var(--muted)}
.audience-kicker{display:block;margin-bottom:8px;color:var(--accent);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.audience-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.audience-steps{display:grid;gap:8px;counter-reset:persona-step}
.audience-step{
  position:relative;
  min-height:58px;
  padding:10px 10px 10px 50px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
}
.audience-step::before{
  counter-increment:persona-step;
  content:counter(persona-step);
  position:absolute;
  left:11px;
  top:11px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:var(--accent-ink);
  background:var(--accent-fill);
  border-radius:9px;
  font-size:11px;
  font-weight:800;
}
.audience-step b{display:block;font-size:13px}
.audience-step span{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px}
.audience-proof{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.audience-proof span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 9px;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
.audience-warning{margin-top:12px;color:var(--muted);font-size:11.5px}

/* Accessible dialog geometry on mobile keyboards. */
.scrim{z-index:var(--layer-scrim)}
.modal{max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))}
.modal-row{
  position:sticky;
  bottom:-24px;
  z-index:2;
  padding:12px 0 4px;
  background:var(--surface);
}
.order-error{
  margin:12px 0 0;
  padding:10px 12px;
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));
  border-radius:var(--r-sm);
  font-size:13px;
  line-height:1.4;
}
.order-error[hidden]{display:none}

body[data-landing-v2] :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* Pause the only ambient motion when it is not useful. */
html.landing-static .hv-wave .sig,
html.landing-static .reveal{animation:none!important;transition:none!important}
html.landing-static .reveal{opacity:1!important;transform:none!important}
html.landing-paused .hv-wave .sig{animation-play-state:paused!important}

@media(max-width:1119px){
  .nav-products-wide{display:none}
  .nav-products-compact{display:inline-flex!important;align-items:center;gap:16px}
  .ecosystem-nav .nav-products{justify-content:flex-end}
  .ecosystem-nav .theme-toggle,
  .ecosystem-nav .nav-login{display:none}
  .nav-menu-btn{display:inline-flex}
  .product-popover{left:auto;right:18px;transform:none}
}

@media(max-width:768px){
  .ecosystem-nav .nav-in{gap:8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .ecosystem-nav .nav-products{display:none!important}
  .nav-open-wide{display:none}
  .nav-open-short{display:inline}
  .ecosystem-nav .nav .btn,
  .ecosystem-nav .btn{padding:0 12px}
  .product-popover{left:10px;right:10px;width:auto;transform:none}
  .audience-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audience-panel{grid-template-columns:1fr;padding:18px}
  .audience-panel:not(:first-child){margin-top:4px}
}

@media(max-width:380px){
  .ecosystem-nav .brand-word{display:none}
  .ecosystem-nav .nav-cta{gap:5px}
  .ecosystem-nav .btn{padding:0 10px}
  .product-grid{grid-template-columns:1fr}
  .audience-tabs{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .brand-chevron{transition:none!important}
}

@media(forced-colors:active){
  .landing-scrim{background:Canvas}
  .audience-tab[aria-selected="true"],
  .product-item-status::before{forced-color-adjust:auto}
}