.hero .product-window {
  position: relative;
  padding: 9px;
  border-color: rgba(205, 208, 230, 0.92);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 36px 90px rgba(44, 32, 122, 0.2), 0 8px 30px rgba(74, 60, 160, 0.1);
  transform: none;
  transition: box-shadow 0.35s ease;
}

.hero .product-window:hover {
  transform: none;
  box-shadow: 0 44px 100px rgba(44, 32, 122, 0.25), 0 12px 34px rgba(74, 60, 160, 0.13);
}

.hero .product-window::before,
.hero .product-window::after {
  position: absolute;
  z-index: 4;
  display: grid;
  border: 1px solid rgba(220, 222, 238, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(43, 32, 113, 0.16);
  backdrop-filter: blur(16px);
  pointer-events: none;
}

.hero .product-window::before {
  content: "+24  новых возможностей";
  top: -25px;
  right: -24px;
  padding: 11px 15px;
  color: #1d273b;
  font-size: 10px;
  font-weight: 850;
  transform: rotate(2deg);
}

.hero .product-window::after {
  content: "87.4  высокий потенциал";
  right: -28px;
  bottom: -22px;
  padding: 10px 14px;
  color: #604ded;
  font-size: 11px;
  font-weight: 900;
}

.hero .window-bar {
  position: relative;
  height: 35px;
  align-items: center;
  padding: 0 7px;
  gap: 5px;
}

.hero .window-bar::before {
  content: "app.seotab.ru";
  position: absolute;
  left: 50%;
  color: #9aa2b4;
  font-size: 8px;
  transform: translateX(-50%);
}

.hero .window-bar::after {
  content: "●  Анализ готов";
  margin-left: auto;
  color: #25a982;
  font-size: 8px;
  font-weight: 800;
}

.hero .window-body {
  min-height: 440px;
  padding: 20px;
  border: 1px solid #e5e7f0;
  border-radius: 18px;
  background: radial-gradient(circle at 100% 0, rgba(116, 96, 255, 0.12), transparent 36%), linear-gradient(145deg, #fbfbff, #f1f2f8);
}

.hero .mini-brand {
  color: #172035;
  font-size: 12px;
}

.hero .mini-brand b {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  background-image: url("/assets/logo-seotab.webp?v=3");
  background-repeat: no-repeat;
  background-position: -10px -19px;
  background-size: 126px 63px;
  box-shadow: none;
}

.hero .dashboard-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 27px 0 13px;
  color: #172035;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.hero .dashboard-title::before {
  content: "ПРИОРИТЕТЫ РОСТА";
  position: absolute;
  bottom: calc(100% + 1px);
  color: #8d96aa;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.hero .dashboard-title::after {
  content: "42 готовы";
  padding: 5px 7px;
  border: 1px solid #dedbf9;
  border-radius: 7px;
  color: #6554df;
  background: #f0eeff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0;
}

.hero .metric-row { gap: 7px; }

.hero .metric {
  padding: 10px 11px;
  border-color: #e3e5ee;
  color: #8b94a7;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(42, 35, 95, 0.05);
  font-size: 7px;
}

.hero .metric strong {
  color: #172035;
  font-size: 18px;
}

.hero .metric::after {
  display: block;
  margin-top: 2px;
  color: #22a77f;
  font-size: 6px;
  font-weight: 750;
}

.hero .metric:first-child::after { content: "↑ 18% за год"; }
.hero .metric:nth-child(2)::after { content: "31 новая"; }
.hero .metric:nth-child(3)::after { content: "можно публиковать"; }

.hero .chart {
  height: 80px;
  margin: 9px 0;
  border: 1px solid #e2e0f7;
  background: linear-gradient(180deg, rgba(111, 91, 255, 0.18), rgba(111, 91, 255, 0.01)), repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(106, 112, 140, 0.1) 20px);
}

.hero .chart::before {
  content: "Потенциал органического трафика";
  position: absolute;
  top: 7px;
  left: 9px;
  z-index: 2;
  color: #6d7690;
  font-size: 6px;
  font-weight: 800;
}

.hero .chart::after {
  content: "+31%";
  position: absolute;
  top: 6px;
  right: 9px;
  z-index: 2;
  color: #24a77f;
  font-size: 8px;
  font-weight: 900;
}

.hero .chart svg {
  inset: 11px 0 0;
  height: 65px;
  filter: drop-shadow(0 4px 5px rgba(103, 82, 245, 0.24));
}

.hero .table-lines { gap: 5px; }

.hero .table-lines span {
  position: relative;
  height: 39px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 34px;
  overflow: hidden;
  border: 1px solid #e4e6ef;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 5px 12px rgba(42, 35, 95, 0.03);
}

.hero .table-lines span::before {
  position: absolute;
  left: 8px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #6554e8;
  background: #efedff;
  font-size: 8px;
  font-weight: 900;
}

.hero .table-lines span::after {
  position: absolute;
  left: 35px;
  right: 8px;
  overflow: hidden;
  color: #222b3d;
  font-size: 7px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero .table-lines span:nth-child(1)::before { content: "↗"; }
.hero .table-lines span:nth-child(1)::after { content: "автоматизация бизнеса                         87.4"; }
.hero .table-lines span:nth-child(2)::before { content: "✦"; color: #138a67; background: #e4f8f1; }
.hero .table-lines span:nth-child(2)::after { content: "разработка CRM на заказ                    82.1"; }
.hero .table-lines span:nth-child(3)::before { content: "◎"; color: #b36b12; background: #fff2db; }
.hero .table-lines span:nth-child(3)::after { content: "внедрение ИИ в производство              78.6"; }
.hero .table-lines span:nth-child(4)::before { content: "▤"; }
.hero .table-lines span:nth-child(4)::after { content: "личный кабинет для клиентов                 74.9"; }

@media (prefers-reduced-motion: no-preference) {
  .hero .product-window::before { animation: preview-float 4.5s ease-in-out infinite; }
  .hero .product-window::after { animation: preview-float 4.5s ease-in-out 1.2s infinite; }
}

@keyframes preview-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@media (max-width: 950px) {
  .hero .product-window { max-width: 650px; transform: none; }
}

@media (max-width: 650px) {
  .hero .product-window { padding: 7px; }
  .hero .window-body { min-height: 380px; padding: 14px; }
  .hero .metric-row { grid-template-columns: repeat(3, 1fr); }
  .hero .metric:nth-child(n+2) { display: block; }
  .hero .metric { padding: 8px 6px; }
  .hero .metric strong { font-size: 13px; }
  .hero .product-window::before { right: -4px; }
  .hero .product-window::after { right: -2px; bottom: -18px; }
}