/* ============================================
   WBIndex Pro — Unified Style System
   Landing + Dashboard + Auth pages
   ============================================ */

/* --- RESET & VARIABLES --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Core palette — WBIndex deep blue-violet */
  --bg-deepest: #0f1120;
  --bg-deep: #161929;
  --bg-base: #1a1d2e;
  --bg-card: #1f2237;
  --bg-card-hover: #252a45;
  --bg-elevated: #2a2f4a;
  --bg-input: #252a45;

  /* Text */
  --text-primary: #f1f3f9;
  --text-secondary: #9ca3be;
  --text-muted: #6b7194;
  --text-inverse: #0e1019;

  /* Accent colors */
  --blue: #3b82f6;
  --blue-light: #60a5fa;
  --blue-dark: #2563eb;
  --blue-glow: rgba(59, 130, 246, 0.15);
  --green: #22c55e;
  --green-light: #4ade80;
  --green-dark: #16a34a;
  --green-glow: rgba(34, 197, 94, 0.15);
  --red: #ef4444;
  --red-light: #f87171;
  --red-dark: #dc2626;
  --red-glow: rgba(239, 68, 68, 0.15);
  --red-alarm: #c0392b;
  --orange: #f59e0b;
  --orange-light: #fbbf24;
  --orange-dark: #d97706;
  --orange-glow: rgba(245, 158, 11, 0.15);
  --purple: #6366f1;
  --purple-dark: #4f46e5;

  /* Borders */
  --border: #2d3251;
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.12);
  --border-blue: rgba(59,130,246,0.3);

  /* Sizing */
  --sidebar-width: 72px;
  --topnav-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Fonts */
  --font-main: 'Onest', 'Manrope', system-ui, sans-serif;
  --font-display: 'Bitter', 'Onest', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Steel accent (структура и действия) */
  --steel: #6d8dff;
  --steel-glow: rgba(109, 141, 255, 0.12);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--bg-deepest);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--blue-light);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--text-primary); }

img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ==============================================================
   LAYOUT
   ============================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.main {
  margin-left: var(--sidebar-width);
  padding-top: var(--topnav-height);
  min-height: 100vh;
}

/* Dashboard-specific main layout */
.main--dashboard {
  padding: 32px;
  padding-top: calc(var(--topnav-height) + 32px);
}


/* ==============================================================
   TOP NAVBAR (landing pages)
   ============================================================== */
.topnav {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topnav-height);
  background: rgba(14, 16, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
  transition: background 0.3s;
}

.topnav.scrolled {
  background: rgba(14, 16, 25, 0.95);
  border-bottom-color: var(--border-medium);
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 32px;
}

.topnav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.15rem;
}

.topnav__logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.topnav__logo .accent { color: var(--blue-light); }

.topnav__links {
  display: flex;
  list-style: none;
  gap: 8px;
}

.topnav__links a {
  padding: 8px 16px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}
.topnav__links a:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.topnav__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topnav__mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
}


/* ==============================================================
   SIDEBAR — Shared base styles
   ============================================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-deep);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 200;
  transition: transform 0.3s ease;
}

.sidebar__logo {
  width: 100%;
  height: var(--topnav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar__logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sidebar__logo-text { display: none; }

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  width: 100%;
  min-height: 0;
}

.sidebar__item {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 18px;
  cursor: pointer;
}
.sidebar__item span { display: none; }

.sidebar__item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* Landing sidebar — decorative active state */
.sidebar--landing .sidebar__item--active {
  color: var(--blue-light);
  background: var(--blue-glow);
}
.sidebar--landing .sidebar__item--active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
}

/* Dashboard sidebar — functional active state */
.sidebar--dashboard .sidebar__item.active {
  color: var(--blue);
  background: rgba(59, 130, 246, 0.12);
}
.sidebar--dashboard .sidebar__item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
}

/* Sidebar tooltip */
.sidebar__item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  z-index: 1001;
  pointer-events: none;
}

/* Tooltip for bottom sidebar buttons — show above, not centered */
.sidebar__bottom .sidebar__item[data-tooltip]:hover::after {
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.sidebar__bottom {
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow: visible;
}

.sidebar__logout { color: var(--text-muted) !important; }
.sidebar__logout:hover {
  color: var(--red) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}


/* ==============================================================
   TOP BAR (dashboard pages)
   ============================================================== */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topnav-height);
  background: rgba(20, 22, 37, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 100;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar__burger {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
}

.topbar__brand-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  -webkit-user-select: none;
  user-select: none;
}

.topbar__brand-accent {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background-clip: text;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  text-transform: uppercase;
}

.topbar__user {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.topbar__bell {
  position: relative;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}
.topbar__bell:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.topbar__bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
}


/* ==============================================================
   SECTION COMMON (landing)
   ============================================================== */
.section {
  padding: 80px 0;
  position: relative;
}

.section__header {
  text-align: center;
  margin-bottom: 48px;
}

.section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-glow);
  color: var(--blue-light);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section__title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.accent { color: var(--blue-light); }


/* ==============================================================
   BUTTONS (unified)
   ============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn--green {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: white;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
.btn--green:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(34, 197, 94, 0.45);
}

.btn--blue {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}
.btn--blue:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(59, 130, 246, 0.45);
}

.btn--outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}
.btn--outline:hover {
  color: var(--text-primary);
  border-color: var(--blue);
  background: var(--blue-glow);
}

.btn--outline-sm {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 10px;
}
.btn--outline-sm:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}
.btn--outline-sm i {
  color: var(--green);
}

.btn--outline-sm:disabled,
.btn--outline-sm[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 8px;
  border-radius: 8px;
}
.btn--ghost:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.btn--danger {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--red);
}
.btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}

.btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn--block { width: 100%; }


/* ==============================================================
   HERO (landing)
   ============================================================== */
.hero {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
  text-align: center;
}

.hero__bg-grid {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 28px;
  animation: fadeInUp 0.6s ease both;
}

.hero__title {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
  animation: fadeInUp 0.6s 0.1s ease both;
}

.hero__subtitle {
  font-size: 1.35rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: 12px;
  animation: fadeInUp 0.6s 0.2s ease both;
}

.hero__tagline {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 48px;
  animation: fadeInUp 0.6s 0.3s ease both;
}
.hero__tagline strong { color: var(--green-light); }

.hero__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 56px;
  animation: fadeInUp 0.6s 0.4s ease both;
}

.hero__cta-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}
.hero__cta-card:hover { transform: translateY(-3px); }
.hero__cta-card--free:hover { border-color: rgba(34, 197, 94, 0.3); }
.hero__cta-card--pro:hover { border-color: rgba(59, 130, 246, 0.3); }

.hero__cta-desc {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hero__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  animation: fadeInUp 0.6s 0.5s ease both;
}

.hero__stat { text-align: center; }

.hero__stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1;
}

.hero__stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.hero__stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-medium);
}


/* ==============================================================
   CARD COMMON
   ============================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s;
}
.card:hover { border-color: var(--border-medium); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.card__title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.card__title i { color: var(--blue-light); font-size: 0.9rem; }

.card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.card__badge--red {
  background: var(--red-glow);
  color: var(--red-light);
}

/* Landing card layout — padding inside card */
.main:not(.main--dashboard) .card {
  padding: 24px;
}

/* Dashboard card layout — padding via header/footer/body */
.main--dashboard .card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.main--dashboard .card {
  margin-bottom: 24px;
}

.card__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
}


/* ==============================================================
   ANALYSIS SECTION (landing)
   ============================================================== */
.analysis { background: var(--bg-deep); }

.analysis__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.card--chart { height: 100%; }

.chart-container {
  position: relative;
  height: 320px;
}

.analysis__metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Landing metric cards */
.analysis__metrics .metric-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: transform 0.25s, border-color 0.25s;
}
.analysis__metrics .metric-card:hover { transform: translateY(-2px); }

.analysis__metrics .metric-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.metric-card--warning .metric-card__icon { background: var(--orange-glow); color: var(--orange); }
.metric-card--warning:hover { border-color: rgba(245,158,11,0.3); }

.metric-card--danger .metric-card__icon { background: var(--red-glow); color: var(--red); }
.metric-card--danger:hover { border-color: rgba(239,68,68,0.3); }

.metric-card--alert .metric-card__icon { background: var(--red-glow); color: var(--red); }
.metric-card--alert:hover { border-color: rgba(239,68,68,0.3); }

.analysis__metrics .metric-card__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.analysis__metrics .metric-card__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}


/* ==============================================================
   ABOUT / WHAT IS IL (landing)
   ============================================================== */
.about__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card--wb, .card--reality { height: 100%; }

.about__quote {
  background: var(--bg-elevated);
  border-left: 3px solid var(--orange);
  padding: 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 16px;
  margin-bottom: 16px;
}
.about__quote p {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.about__offer {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.about__offer-badge {
  display: inline-block;
  background: var(--orange-glow);
  color: var(--orange);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-bottom: 10px;
}
.about__offer p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.about__reality-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about__reality-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.about__reality-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.about__reality-icon--red { background: var(--red-glow); color: var(--red); }

.about__reality-list li span:last-child {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 2px;
}

/* === help-seller: card inner spacing === */
.about__quote {
  margin-top: 16px;
  margin-bottom: 20px;
}
.card--wb .card__header,
.card--reality .card__header {
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.about__reality-list {
  gap: 20px;
}


/* ==============================================================
   SUPPORT / LEGAL (landing)
   ============================================================== */
.support__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.support__card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: transform 0.25s, border-color 0.25s;
}
.support__card:hover {
  transform: translateY(-2px);
  border-color: var(--border-blue);
}

.support__card-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-glow);
  color: var(--blue-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.support__card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-top: 4px;
}
.support__card strong { color: var(--text-primary); font-weight: 700; }

.support__quote-block {
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06));
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
}

.support__quote-icon {
  color: var(--blue);
  font-size: 1.8rem;
  opacity: 0.4;
  margin-bottom: 16px;
  display: block;
}

.support__quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  font-weight: 500;
}


/* ==============================================================
   PRICING (landing)
   ============================================================== */
.pricing { background: var(--bg-deep); }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing__card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  transition: transform 0.3s, border-color 0.3s;
}
.pricing__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-medium);
}

.pricing__card--featured {
  border-color: var(--blue);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.1);
}
.pricing__card--featured:hover { border-color: var(--blue-light); }

.pricing__popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: white;
  padding: 4px 20px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing__card-header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.pricing__plan {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pricing__price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.pricing__price small {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

.pricing__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.pricing__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.pricing__features li i {
  color: var(--green);
  margin-top: 2px;
  flex-shrink: 0;
}

.pricing__coming-soon i { color: var(--orange) !important; }

/* Pricing toggle */
.pricing__toggle {
  display: flex;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 3px;
  margin: 12px 0 8px;
  gap: 2px;
}
.pricing__toggle-btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.pricing__toggle-btn--active {
  background: rgba(59, 130, 246, 0.25);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
.pricing__toggle-btn:hover:not(.pricing__toggle-btn--active) {
  color: rgba(255,255,255,0.8);
}
.pricing__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pricing__price-total {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}
.pricing__save {
  margin-top: 6px;
  padding: 5px 14px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  color: #22c55e;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ==============================================================
   FOOTER (landing)
   ============================================================== */
.footer {
  padding: 60px 0 0;
  background: var(--bg-deepest);
  border-top: 1px solid var(--border-subtle);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer__logo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.footer__logo i { color: var(--blue); margin-right: 8px; }

.footer__desc {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.footer__links h4,
.footer__contact h4 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer__links a,
.footer__contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--text-primary); }

.footer__bottom {
  border-top: 1px solid var(--border-subtle);
  padding: 20px 0;
  text-align: center;
}

.footer__bottom p {
  color: var(--text-muted);
  font-size: 0.8rem;
}


/* ==============================================================
   DASHBOARD: METRICS ROW
   ============================================================== */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.metrics-row .metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metrics-row .metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.metrics-row .metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}

.metric-card--blue::before { background: linear-gradient(90deg, var(--blue), var(--purple)); }
.metric-card--green::before { background: var(--green); }
.metric-card--red::before { background: var(--red); }
.metric-card--orange::before { background: var(--orange); }
.metric-card--yellow::before { background: #eab308; }
.metric-card--purple::before { background: linear-gradient(90deg, var(--purple), var(--blue)); }

.metric-card--blue:hover { box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); }
.metric-card--green:hover { box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15); }
.metric-card--red:hover { box-shadow: 0 8px 32px rgba(239, 68, 68, 0.15); }
.metric-card--orange:hover { box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15); }
.metric-card--yellow:hover { box-shadow: 0 8px 32px rgba(234, 179, 8, 0.15); }
.metric-card--purple:hover { box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15); }

.metrics-row .metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.metrics-row .metric-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metrics-row .metric-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
}

.metric-card--blue .metric-card__icon { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.metric-card--green .metric-card__icon { background: rgba(34, 197, 94, 0.15); color: var(--green); }
.metric-card--red .metric-card__icon { background: rgba(239, 68, 68, 0.15); color: var(--red); }
.metric-card--orange .metric-card__icon { background: rgba(245, 158, 11, 0.15); color: var(--orange); }
.metric-card--yellow .metric-card__icon { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.metric-card--purple .metric-card__icon { background: rgba(139, 92, 246, 0.15); color: var(--purple); }

.metrics-row .metric-card__value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.metric-card--blue .metric-card__value { color: var(--blue); }
.metric-card--green .metric-card__value { color: var(--green); }
.metric-card--red .metric-card__value { color: var(--red); }
.metric-card--orange .metric-card__value { color: var(--orange); }
.metric-card--purple .metric-card__value { color: var(--purple); }

.metrics-row .metric-card__value small {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.7;
}

.metric-card__sub {
  font-size: 12px;
  color: var(--text-muted);
}


/* ==============================================================
   DASHBOARD: ACTION ROW
   ============================================================== */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.action-row__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-row__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--green {
  background: var(--green);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.6); }
}

.status-text--green { color: var(--green); font-weight: 600; }
.status-text--dim { color: var(--text-muted); font-style: italic; }
.status-divider { color: var(--text-muted); }

.status-dot--yellow {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  animation: pulse-yellow 2s infinite;
}
@keyframes pulse-yellow {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.6); }
}


/* ==============================================================
   DASHBOARD: PAGE TITLE
   ============================================================== */
.page-title { margin-bottom: 28px; }
.page-title h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.page-title p {
  color: var(--text-secondary);
  font-size: 15px;
}


/* ==============================================================
   DASHBOARD: DOWNLOAD SECTION
   ============================================================== */
.download-card { margin-bottom: 28px; }

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 20px 24px;
}


/* ==============================================================
   DASHBOARD: CHARTS
   ============================================================== */
.chart-card { margin-bottom: 28px; }

.chart-wrapper {
  padding: 20px 24px 24px;
  height: 320px;
  position: relative;
}

.chart-wrapper--tall { height: 420px; }


/* ==============================================================
   DASHBOARD: TABLES
   ============================================================== */
.table-wrapper {
  overflow-x: auto;
  padding: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table thead th {
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.data-table--compact th,
.data-table--compact td {
  padding: 10px 14px !important;
  font-size: 13px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}

.text-muted { color: var(--text-muted); }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
  padding: 2px 8px;
  border-radius: 6px;
}


/* ==============================================================
   BADGES & TAGS
   ============================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.badge--green { background: rgba(34, 197, 94, 0.12); color: var(--green); }

.rec-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.rec-tag--red { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.rec-tag--orange { background: rgba(245, 158, 11, 0.12); color: var(--orange); }
.rec-tag--green { background: rgba(34, 197, 94, 0.12); color: var(--green); }

/* Text colors */
.text-red { color: var(--red) !important; }
.text-green { color: var(--green) !important; }
.text-orange { color: var(--orange) !important; }
.text-blue { color: var(--blue) !important; }


/* ==============================================================
   INFO BOX
   ============================================================== */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.12);
  font-size: 13px;
  color: var(--text-secondary);
}
.info-box i { color: var(--blue); margin-top: 2px; flex-shrink: 0; }


/* ==============================================================
   RECOMMENDATION CARD (dashboard)
   ============================================================== */
.recommendation-card {
  display: flex;
  gap: 20px;
  padding: 24px !important;
  align-items: flex-start;
}

.recommendation-card__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 20px;
}

.recommendation-card__content h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.recommendation-card__content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ==============================================================
   LEGAL CARDS (dashboard)
   ============================================================== */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.legal-card {
  padding: 24px !important;
  transition: all 0.3s ease;
}

.legal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.legal-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  margin-bottom: 14px;
}
.legal-card__badge--blue { background: rgba(59, 130, 246, 0.12); color: var(--blue); }
.legal-card__badge--orange { background: rgba(245, 158, 11, 0.12); color: var(--orange); }
.legal-card__badge--purple { background: rgba(139, 92, 246, 0.12); color: var(--purple); }

.legal-card__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}

.legal-card__meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.legal-card__meta i { margin-right: 4px; }

.legal-card__text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.legal-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.2s;
}
.legal-card__link:hover { gap: 10px; }


/* ==============================================================
   PROFILE (dashboard)
   ============================================================== */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profile-grid .profile-card:first-child {
  grid-column: 1 / -1;
}

.profile-info { padding: 20px 24px; }

.profile-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-info__row:last-child { border-bottom: none; }

.profile-info__label { font-size: 14px; color: var(--text-muted); }
.profile-info__value { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.promo-form { padding: 20px 24px; }

.input-group { display: flex; gap: 12px; }

.input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.profile-actions {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-back { margin-top: 32px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.back-link:hover { color: var(--blue); }


/* ==============================================================
   FLOATING SUPPORT (dashboard)
   ============================================================== */
.floating-support {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
}

.floating-support__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-support__btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}

.floating-support__popup {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: none;
  overflow: hidden;
}

.floating-support__popup.active {
  display: block;
  animation: popupIn 0.3s ease;
}

@keyframes popupIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.floating-support__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 700;
  font-size: 14px;
}

.floating-support__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.floating-support__body { padding: 18px; }

.floating-support__body p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.support-email {
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
}

/* Landing floating support (pill style) */
.support-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  padding: 14px 22px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}
.support-fab:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(59, 130, 246, 0.55);
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.support-fab i { font-size: 1.2rem; }


/* ==============================================================
   AUTH PAGES (login, register)
   ============================================================== */
.auth-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--topnav-height));
  padding: 40px 24px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
}

.auth-card__header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-card__logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.auth-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.auth-card__subtitle {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-label__optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.form-input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-row { display: flex; align-items: center; gap: 12px; }
.form-row--between { justify-content: space-between; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.form-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color 0.2s;
}
.form-link:hover { color: var(--blue-light); }
.form-link--accent { color: var(--blue-light); }
.form-link--accent:hover { color: var(--text-primary); }

.auth-card__footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.auth-card__footer p {
  font-size: 0.88rem;
  color: var(--text-muted);
}


/* ==============================================================
   MOBILE SIDEBAR OVERLAY
   ============================================================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }


/* ==============================================================
   UTILITIES
   ============================================================== */
.mt-sm { margin-top: 10px; }


/* ==============================================================
   ANIMATIONS
   ============================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal (landing) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==============================================================
   RESPONSIVE
   ============================================================== */

/* Landing responsive */
@media (max-width: 1024px) {
  .analysis__grid { grid-template-columns: 1fr; }
  .analysis__metrics { flex-direction: row; flex-wrap: wrap; }
  .analysis__metrics .metric-card { flex: 1 1 280px; }
  .legal-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .data-table--compact th,
  .data-table--compact td { padding: 8px 10px !important; font-size: 12px; }
}

@media (max-width: 1200px) {
  .metrics-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }

  /* Landing sidebar hidden */
  .sidebar--landing { display: none; }

  /* Dashboard sidebar slides */
  .sidebar--dashboard {
    width: 72px;
    transform: translateX(-100%);
  }
  .sidebar--dashboard.open { transform: translateX(0); }

  .topnav { left: 0; }
  .topbar { left: 0; padding: 0 16px; }
  .topbar__burger { display: block; }
  .topbar__user { display: none; }

  .topnav__links { display: none; }
  .topnav__links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--topnav-height);
    left: 0; right: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px;
    gap: 4px;
  }

  .topnav__right { display: none; }
  .topnav__mobile-toggle { display: block; }

  .hero__title { font-size: 2.6rem; }
  .hero__subtitle { font-size: 1.1rem; }
  .hero__ctas { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .hero__stats { flex-direction: column; gap: 16px; }
  .hero__stat-divider { width: 60px; height: 1px; }

  .about__columns { grid-template-columns: 1fr; }
  .support__grid { grid-template-columns: 1fr; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  .footer__inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer__links a, .footer__contact a { justify-content: center; }

  .section__title { font-size: 1.65rem; }
  .section { padding: 56px 0; }

  .support__quote-block { padding: 24px; }
  .support__quote { font-size: 0.95rem; }

  /* Dashboard responsive */
  .main--dashboard { margin-left: 0; padding: 20px 16px; padding-top: calc(var(--topnav-height) + 20px); }
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .metrics-row .metric-card__value { font-size: 24px; }
  .action-row { flex-direction: column; align-items: flex-start; }
  .action-row__buttons { width: 100%; }
  .action-row__buttons .btn { flex: 1; }
  .download-grid { grid-template-columns: 1fr; }
  .chart-wrapper { height: 260px; }
  .chart-wrapper--tall { height: 320px; }
  .legal-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .input-group { flex-direction: column; }

  /* Auth responsive */
  .auth-card { padding: 28px 20px; }
}

@media (max-width: 600px) {
  .support-fab { bottom: 18px; right: 18px; padding: 12px 18px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 2rem; }
  .btn--lg { padding: 14px 24px; font-size: 0.95rem; }
  .analysis__metrics .metric-card { flex-direction: column; text-align: center; }
  .analysis__metrics .metric-card__icon { margin: 0 auto; }
  .metrics-row { grid-template-columns: 1fr; }
  .action-row__buttons { flex-direction: column; }
  .action-row__buttons .btn { width: 100%; justify-content: center; }
  .card__header { padding: 16px 18px; }
  .recommendation-card { flex-direction: column; }
}
/* =============================================
   AUTH ERROR MESSAGE
   Добавить в конец style.css
   ============================================= */

/* ==============================================================
   PRO LOCKED PAGE
   ============================================================== */
.pro-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--topnav-height) - 64px);
}

.pro-locked__card {
  text-align: center;
  max-width: 480px;
  padding: 48px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.pro-locked__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--blue);
}

.pro-locked__lock {
  width: 40px;
  height: 40px;
  margin: -28px auto 20px;
  margin-left: calc(50% + 12px);
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--orange);
}

.pro-locked__title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.pro-locked__desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.pro-locked__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
  color: var(--blue-light);
  margin-bottom: 32px;
}

.pro-locked__badge i {
  color: var(--orange);
}

.pro-locked__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}


/* ==============================================================
   LOCKED BUTTON (dashboard action row)
   ============================================================== */
.btn--locked {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  cursor: not-allowed;
  opacity: 0.7;
  position: relative;
}

.btn--locked:hover {
  transform: none;
  box-shadow: none;
}

.btn__pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  margin-left: 4px;
}

/* FREE badge in topbar */
.topbar__badge--free {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}


.auth-error {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    color: #e74c3c;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-error i {
    flex-shrink: 0;
}


/* ============================================
   FREE PAGE — /free
   ============================================ */

/* Hero */
.free-hero {
  padding: 120px 0 40px;
  text-align: center;
}
.free-hero__title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}
.free-hero__subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Upload Form */
.free-upload {
  padding: 0 0 40px;
}
.free-form {
  max-width: 700px;
  margin: 0 auto;
}
.free-form__files {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.free-form__file-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.free-form__file-box:hover {
  border-color: rgba(255,255,255,0.12);
}
.free-form__file-box--selected {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 20px var(--green-glow);
}
.free-form__file-icon {
  font-size: 2rem;
  color: var(--green);
  flex-shrink: 0;
}
.free-form__file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.free-form__file-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.free-form__file-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.free-form__file-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}
.free-form__file-btn {
  flex-shrink: 0;
  cursor: pointer;
}
.free-form__submit {
  width: 100%;
  font-size: 1.1rem;
  padding: 16px 32px;
}

/* Error */
.free-error {
  max-width: 700px;
  margin: 16px auto 0;
  padding: 14px 20px;
  background: var(--red-glow);
  border: 1px solid var(--red);
  border-radius: 8px;
  color: var(--red-light);
  font-size: 0.95rem;
}
.free-error i {
  margin-right: 8px;
}

/* Results */
.free-results {
  padding: 0 0 60px;
}
.free-results__title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 32px;
}
.free-results__title i {
  color: var(--blue);
  margin-right: 8px;
}
.free-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto 40px;
}

/* PRO Banner */
.pro-banner {
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.06);
}
.pro-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.pro-banner__icon {
  font-size: 2.4rem;
  color: var(--orange);
  flex-shrink: 0;
  padding-top: 4px;
}
.pro-banner__text {
  flex: 1;
}
.pro-banner__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.pro-banner__desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pro-banner__features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pro-banner__features li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 4px 0;
}
.pro-banner__features li i {
  color: var(--green);
  margin-right: 8px;
  width: 16px;
}
.pro-banner__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
}
.pro-banner__price {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.pro-banner--compact .pro-banner__content {
  align-items: center;
}

/* Teaser */
.free-teaser {
  padding: 20px 0 60px;
}

/* Loading */
.free-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(14, 16, 25, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.free-loading__spinner {
  text-align: center;
  color: var(--text-primary);
}
.free-loading__spinner i {
  font-size: 3rem;
  color: var(--blue);
  margin-bottom: 20px;
}
.free-loading__spinner p {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.free-loading__hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .free-hero__title { font-size: 1.6rem; }
  .free-metrics { grid-template-columns: 1fr; }
  .pro-banner__content { flex-direction: column; }
  .pro-banner__action { align-self: stretch; }
  .pro-banner__action .btn { width: 100%; }
}

@media (max-width: 480px) {
  .free-form__file-box { flex-direction: column; text-align: center; }
  .free-form__file-btn { width: 100%; }
}
/* ============================================
   FREE PAGE — Errors section additions
   ============================================ */

/* 2-column centered grid for error metrics */
.free-metrics--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 540px;
}

/* Error definition banner */
.error-definition-banner {
  max-width: 800px;
  margin: 0 auto 40px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.error-definition-banner__icon {
  font-size: 1.3rem;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.error-definition-banner__body {
  flex: 1;
}

.error-definition-banner__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.error-definition-banner__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 768px) {
  .free-metrics--two {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}


/* ============================================
   PRO Dashboard — Session 16 additions
   ============================================ */

/* --- Progress Card --- */
.progress-card {
  padding: 20px 24px;
  margin-bottom: 20px;
}

.progress-card__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-card__text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* --- Banner Card (info banners) --- */
.banner-card {
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  border-left: 4px solid var(--blue);
  background: rgba(59, 130, 246, 0.06);
}

.banner-card--compact {
  margin: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 1px solid var(--border-subtle);
  border-left: none;
  padding: 14px 22px;
}

.banner-card__icon {
  font-size: 1.3rem;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}

.banner-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.banner-card__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Table Card --- */
.table-card {
  margin-bottom: 20px;
  overflow: hidden;
}

.table-card .card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card__badge--pro {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
}

.table-wrapper {
  overflow-x: auto;
  padding: 0 0 16px;
}

.table-loading {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.table-note {
  padding: 10px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* --- Data Table --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-subtle);
}

.data-table td {
  padding: 9px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table .cell--green {
  color: var(--green);
  font-weight: 600;
}

.data-table .cell--red {
  color: var(--red);
  font-weight: 600;
}

.data-table .row--red {
  background: rgba(239, 68, 68, 0.08);
}

.data-table .row--orange {
  background: rgba(245, 158, 11, 0.08);
}

.data-table .row--yellow {
  background: rgba(250, 204, 21, 0.06);
}

/* --- Promo Card (upgrade to PRO) --- */
.promo-card {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 32px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(59,130,246,0.2);
}

.promo-card__icon {
  font-size: 2.5rem;
  color: var(--blue);
  flex-shrink: 0;
}

.promo-card__content h3 {
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.promo-card__content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* --- Download Grid --- */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 0 24px 20px;
}

/* --- Responsive: PRO tables --- */
@media (max-width: 768px) {
  .banner-card {
    flex-direction: column;
    gap: 8px;
  }
  .promo-card {
    flex-direction: column;
    text-align: center;
  }
  .download-grid {
    grid-template-columns: 1fr;
  }
}


/* --- MODAL WINDOWS --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--card-bg, #1e2130);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-box__header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-box__header h3 i {
  color: var(--accent, #5b7fff);
}
.modal-box__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s;
  line-height: 1;
}
.modal-box__close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.modal-box__body {
  padding: 20px 24px;
}
.modal-box__hint {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  line-height: 1.5;
}
.modal-box__hint a {
  color: var(--accent, #5b7fff);
  text-decoration: none;
}
.modal-box__hint a:hover {
  text-decoration: underline;
}
.modal-box__error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(229, 57, 53, 0.15);
  border: 1px solid rgba(229, 57, 53, 0.3);
  border-radius: 8px;
  color: #ef5350;
  font-size: 0.9rem;
}
.modal-box__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Form inputs inside modals */
.modal-box .form-group {
  margin-bottom: 16px;
}
.modal-box .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.modal-box .form-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.modal-box .form-input:focus {
  outline: none;
  border-color: var(--accent, #5b7fff);
  background: rgba(255,255,255,0.08);
}
.modal-box .form-input::placeholder {
  color: rgba(255,255,255,0.3);
}

/* Cabinet list in select modal */
.cabinet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cabinet-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}
.cabinet-list__item:hover {
  background: rgba(91, 127, 255, 0.12);
  border-color: var(--accent, #5b7fff);
}
.cabinet-list__item i {
  color: var(--accent, #5b7fff);
  font-size: 1.1rem;
}

  .topnav__mobile-auth { display: none; }
  @media (max-width: 768px) {
    .topnav__mobile-auth {
      display: flex;
      gap: 8px;
      padding: 12px 0 4px;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 8px;
      flex-wrap: wrap;
    }
  }

  .topnav__mobile-auth { display: none; }
  @media (max-width: 768px) {
    .topnav__mobile-auth {
      display: flex;
      gap: 8px;
      padding: 12px 0 4px;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 8px;
      flex-wrap: wrap;
    }
  }

.btn--red {
  background: linear-gradient(135deg, #c0392b, #96281b);
  color: white;
  box-shadow: 0 4px 20px rgba(192, 57, 43, 0.3);
}
.btn--red:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(192, 57, 43, 0.45);
}

/* help-seller: force show all sections */
.support__card,
.support__quote-block,
.pricing__card,
.pricing__grid {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* help-seller: force show all sections */
.support__card,
.support__quote-block,
.pricing__card,
.pricing__grid {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* help-seller: выравнивание карточек тарифов */
.pricing__grid {
  align-items: stretch !important;
}
.pricing__card {
  display: flex !important;
  flex-direction: column !important;
}
.pricing__features {
  flex: 1 !important;
}

/* help-seller: мобильное центрирование */
@media (max-width: 768px) {
  .hero { text-align: center; }
  .hero__ctas { margin-left: auto; margin-right: auto; }
  .hero__stats { justify-content: center; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* help-seller: фикс обрезания на мобильных */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .hero { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .hero__ctas { width: 100%; max-width: 100%; padding: 0 8px; box-sizing: border-box; }
  .hero__cta-card { width: 100%; box-sizing: border-box; }
  .container { overflow-x: hidden; }
  .hero__badge { max-width: 90%; margin-left: auto; margin-right: auto; }
}

/* help-seller: выравнивание кнопок тарифов */
.pricing__card .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  display: flex;
  align-items: center;
  min-height: 48px;
  box-sizing: border-box;
}
.pricing__card .btn--outline {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  min-height: 70px;
}

/* help-seller: скрытые элементы сайдбара не занимают место */
.sidebar__item[style*="display:none"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* help-seller: убрать пробел между help-seller и .ru */
.topbar__brand-text {
  letter-spacing: 0 !important;
}
.topbar__brand-accent {
  margin-left: -1px !important;
}

/* help-seller: одинаковая высота карточек тарифов в claim */
#claimTariffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
#claimTariffs > div {
  display: flex;
  flex-direction: column;
}
#claimTariffs > div ul {
  flex: 1;
}
#claimTariffs > div button {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

/* help-seller: фикс выхода блока тарифов за границы */
#claimTariffs {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
@media (max-width: 700px) {
  #claimTariffs {
    grid-template-columns: 1fr !important;
  }
}

/* help-seller: уменьшить шрифт кнопок тарифов */
#claimTariffs button.btn {
  font-size: 12px !important;
  padding: 10px 8px !important;
}

/* help-seller: симметрия hero кнопок */
.hero__ctas {
  align-items: stretch !important;
}
.hero__cta-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.hero__cta-desc {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.hero__cta-card .btn {
  width: 100% !important;
  justify-content: center !important;
}

/* help-seller: одинаковая высота hero карточек */
.hero__cta-card {
  min-height: 160px !important;
}

/* help-seller: плавающая кнопка поддержки не перекрывает hero-карточки на мобильных */
@media (max-width: 768px) {
  .hero { padding-bottom: 90px; }
}

/* help-seller: возврат отступа снизу у hero-карточек на мобильных */
@media (max-width: 768px) {
  .hero__ctas { margin-bottom: 40px !important; }
}

/* help-seller: разрешить перенос текста в кнопках hero-карточек на узких экранах,
   чтобы кнопка не вылезала за правый край и не обрезалась overflow-x:hidden */
@media (max-width: 480px) {
  .hero__cta-card .btn {
    white-space: normal !important;
    line-height: 1.3;
    text-align: center;
  }
}

/* help-seller: перенос текста в кнопках тарифов на index.html на узких экранах */
@media (max-width: 480px) {
  .pricing__card .btn {
    white-space: normal !important;
    line-height: 1.3;
    text-align: center;
  }
}

/* help-seller: компенсация сайдбара — центрирование контента относительно всего окна, а не урезанной слева области */
@media (min-width: 769px) {
  .main:not(.main--dashboard) .container {
    transform: translateX(calc(var(--sidebar-width) / -2));
  }
}

/* help-seller: убрать моноширинный шрифт для текстовых (не цифровых) статистик — устраняет широкий пробел в "ст. 422" */
.law-cite {
  font-family: var(--font-main) !important;
  letter-spacing: normal !important;
}

/* help-seller: перенос текста в кнопках тарифов на всех экранах — новые формулировки длиннее прежних */
.pricing__card .btn {
  white-space: normal !important;
  line-height: 1.3;
  text-align: center;
}

/* help-seller: единая высота кнопок в карточках тарифов независимо от длины текста */
.pricing__card .btn {
  min-height: 70px;
}


/* === help-seller: pool blocks spacing === */
#claimResultContent > div {
  margin-bottom: 20px;
}
#claimResultContent > div:last-child {
  margin-bottom: 0;
}

/* === help-seller: about section spacing === */
.section.about {
  padding: 48px 0 40px;
}

/* ── HERO HOOK: главный аргумент в первом экране ───────────────── */
.hero__hook{
  max-width:680px;margin:0 auto 28px;padding:20px 22px;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.28);
  border-radius:14px;text-align:left;
}
.hero__hook-title{
  font-size:1.05rem;font-weight:700;color:#f59e0b;line-height:1.35;margin-bottom:10px;
}
.hero__hook-lead{
  font-size:.9rem;line-height:1.6;color:var(--text-secondary);margin:0 0 14px;
}
.hero__hook-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.hero__hook-list li{
  position:relative;padding-left:20px;font-size:.87rem;line-height:1.55;color:var(--text-secondary);
}
.hero__hook-list li::before{
  content:'';position:absolute;left:0;top:.52em;width:7px;height:7px;
  border-radius:50%;background:#f59e0b;
}
.hero__hook-list b{color:#fff;font-weight:600}
.hero__hook-foot{
  font-size:.82rem;color:#22c55e;font-weight:600;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.07);
}
@media (max-width:768px){
  .hero__hook{padding:16px 16px;margin-bottom:22px;border-radius:12px}
  .hero__hook-title{font-size:.98rem}
  .hero__hook-lead{font-size:.85rem;margin-bottom:12px}
  .hero__hook-list li{font-size:.83rem;padding-left:17px}
  .hero__hook-foot{font-size:.78rem}
}

/* ── Плавающая CTA над кнопкой поддержки ──────────────────────── */
.support-fab--cta{
  bottom: 92px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 8px 24px rgba(192,57,43,.4);
}
.support-fab--cta:hover{
  box-shadow: 0 10px 30px rgba(192,57,43,.55);
}
@media (max-width:768px){
  .support-fab--cta{ bottom: 74px; }
}

/* ── Плавающая CTA над кнопкой поддержки ──────────────────────── */
.support-fab--cta{
  bottom: 92px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 8px 24px rgba(192,57,43,.4);
}
.support-fab--cta:hover{
  box-shadow: 0 10px 30px rgba(192,57,43,.55);
}
@media (max-width:768px){
  .support-fab--cta{ bottom: 74px; }
}

/* Плавающие кнопки одного размера */
.support-fab{ min-width: 190px; justify-content: center; }
@media (max-width:768px){
  .support-fab{ min-width: 168px; }
}

/* Плавающие кнопки одного размера */
.support-fab{ min-width: 190px; justify-content: center; }
@media (max-width:768px){
  .support-fab{ min-width: 168px; }
}

/* Плавающие кнопки одного размера */
.support-fab{ min-width: 190px; justify-content: center; }
@media (max-width:768px){
  .support-fab{ min-width: 168px; }
}

/* Плавающие кнопки одного размера */
.support-fab{ min-width: 190px; justify-content: center; }
@media (max-width:768px){
  .support-fab{ min-width: 168px; }
}

/* Заголовок первого экрана: логотип не дублируем, экономим высоту */
.hero__subtitle--main{
  font-size: 1.55rem; font-weight: 700; color: #fff;
  line-height: 1.3; margin: 0 auto 22px; max-width: 620px;
}
@media (max-width:768px){
  .hero__subtitle--main{ font-size: 1.18rem; margin-bottom: 16px; }
}

/* Плавающие кнопки строго одного размера (перебиваем базовые правила) */
.support-fab.support-fab,
.support-fab--cta.support-fab--cta{
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width:768px){
  .support-fab.support-fab,
  .support-fab--cta.support-fab--cta{
    width: 178px; min-width: 178px; max-width: 178px;
  }
}

/* Плавающие кнопки строго одного размера (перебиваем базовые правила) */
.support-fab.support-fab,
.support-fab--cta.support-fab--cta{
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width:768px){
  .support-fab.support-fab,
  .support-fab--cta.support-fab--cta{
    width: 178px; min-width: 178px; max-width: 178px;
  }
}

/* Плавающие кнопки строго одного размера (перебиваем базовые правила) */
.support-fab.support-fab,
.support-fab--cta.support-fab--cta{
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width:768px){
  .support-fab.support-fab,
  .support-fab--cta.support-fab--cta{
    width: 178px; min-width: 178px; max-width: 178px;
  }
}

/* Первый экран вплотную к шапке */
.hero{ padding-top: 20px !important; }
@media (max-width:768px){ .hero{ padding-top: 10px !important; } }

/* На телефоне оставляем только тезисы — пояснения на десктопе */
@media (max-width:768px){
  span.hook-why{ display: none !important; }
  .hero__hook-list li{ font-size: .86rem; line-height: 1.4; }
  .hero__hook-list{ gap: 10px; }
}

/* Вопрос-крючок над ответом */
.hero__hook-q{
  font-size: 1.12rem; font-weight: 800; color: #fff;
  margin-bottom: 10px; line-height: 1.3;
}
@media (max-width:768px){
  .hero__hook-q{ font-size: 1rem; margin-bottom: 8px; }
}

/* ── Прецедент Шушары ─────────────────────────────────────────── */
.prec{max-width:820px;margin:0 auto}
.prec__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.prec__num{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.prec__num b{display:block;font-size:1.5rem;font-weight:800;color:#22c55e;margin-bottom:4px}
.prec__num span{font-size:.8rem;color:var(--text-muted)}
.prec__quote{background:rgba(34,197,94,.06);border-left:3px solid #22c55e;border-radius:0 12px 12px 0;
  padding:18px 20px;margin:0 0 18px;font-size:1rem;line-height:1.6;color:#fff;font-style:italic}
.prec__quote cite{display:block;margin-top:10px;font-size:.8rem;color:var(--text-muted);font-style:normal}
.prec__text{font-size:.92rem;line-height:1.7;color:var(--text-secondary);margin:0}
@media (max-width:768px){
  .prec__nums{grid-template-columns:1fr;gap:10px}
  .prec__num{padding:14px;display:flex;align-items:center;justify-content:space-between;text-align:left}
  .prec__num b{font-size:1.25rem;margin:0}
  .prec__quote{font-size:.9rem;padding:14px 16px}
  .prec__text{font-size:.86rem}
}

/* Зелёный ответ на вопрос — главный тезис в нашу пользу */
.hero__hook-answer{
  font-size: 1.02rem; font-weight: 700; color: #22c55e;
  line-height: 1.5; margin-bottom: 14px;
}
.hero__hook-title{
  font-size: .92rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 10px;
}
@media (max-width:768px){
  .hero__hook-answer{ font-size: .93rem; margin-bottom: 12px; }
  .hero__hook-title{ font-size: .85rem; margin-bottom: 8px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Мобильный: хук компактнее, чтобы кнопка осталась в первом экране */
@media (max-width:768px){
  .hero__hook{ padding:13px 14px; margin-bottom:14px; }
  .hero__hook-q{ font-size:.92rem; margin-bottom:6px; }
  .hero__hook-answer{ font-size:.86rem; line-height:1.42; margin-bottom:10px; }
  .hero__hook-title{ font-size:.8rem; margin-bottom:6px; }
  .hero__hook-list{ gap:6px; }
  .hero__hook-list li{ font-size:.8rem; line-height:1.35; padding-left:15px; }
  .hero__hook-list li::before{ width:5px; height:5px; top:.45em; }
  .hero__subtitle--main{ font-size:1.06rem; margin-bottom:12px; }
}

/* Якорь с отступом под фиксированную шапку */
#start{ display:block; position:relative; top:-90px; visibility:hidden; }

/* Хук и карточки кнопок одной ширины */
.hero__hook{ max-width: 760px; }
.hero__ctas{ max-width: 760px; margin-left: auto; margin-right: auto; }

/* Бейдж прижат влево, выше остального */
.hero__badge{ margin-left: 0; margin-right: auto; }
.hero .container{ text-align: left; }
.hero__subtitle--main{ margin-left: 0; text-align: left; }
.hero__hook{ margin-left: 0; }
.hero__ctas{ margin-left: 0; }
@media (max-width:768px){
  .hero .container{ text-align: left; }
}

/* Титул: оранжевый, крупный */
.hero__h1{
  font-size: 2.1rem; font-weight: 800; color: #f59e0b;
  line-height: 1.22; margin: 0 0 10px; max-width: 760px;
}
.hero__h2{
  font-size: 1.15rem; font-weight: 600; color: var(--text-secondary);
  margin: 0 0 22px;
}
@media (max-width:768px){
  .hero__h1{ font-size: 1.42rem; margin-bottom: 8px; }
  .hero__h2{ font-size: .98rem; margin-bottom: 16px; }
}

/* Поддержка не должна перекрывать основную кнопку на мобильном */
@media (max-width:768px){
  .support-fab{ bottom: 12px; right: 12px; padding: 10px 14px; font-size: .8rem; }
  .support-fab{ width: auto; min-width: 0; max-width: none; }
  .support-fab__text{ display: none; }
}

/* ── Первый экран: одна колонка фиксированной ширины ───────────── */
.hero .container{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.hero__h1{ max-width: 100%; }
.hero__hook{ max-width: 100%; margin-left: 0; margin-right: 0; }
.hero__ctas{ max-width: 100%; margin-left: 0; margin-right: 0; }

/* На широких экранах кнопки в две колонки, на узких — в одну */
@media (min-width: 769px){
  .hero__ctas{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 768px){
  .hero .container{ max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .hero__ctas{ display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* Тарифы: три в ряд на десктопе, колонкой на телефоне */
@media (max-width: 900px){
  #claimTariffs{ grid-template-columns: 1fr !important; }
}

/* Список «Почему WB не освобождён»: две колонки на десктопе, одна на телефоне */
.about__reality-list--grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px){
  .about__reality-list--grid{ grid-template-columns: 1fr; gap: 12px; }
}

/* Две колонки на десктопе, одна на телефоне */
.about__reality-list--grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:768px){ .about__reality-list--grid{ grid-template-columns:1fr; gap:12px; } }

/* Блок про отключённую кнопку — ключевое обстоятельство */
.keyfact{ max-width:820px; margin:0 auto; background:linear-gradient(135deg,#2d1214,#1a0d0f);
  border:1px solid #c0392b66; border-radius:16px; padding:28px; }
.keyfact__lead{ font-size:1.28rem; font-weight:800; color:#ff6b6b; line-height:1.35; margin:0 0 14px; }
.keyfact__sub{ font-size:.95rem; line-height:1.7; color:var(--text-secondary); margin:0 0 20px; }
.keyfact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.keyfact__item{ background:#161929; border-radius:10px; padding:14px 16px; font-size:.87rem;
  line-height:1.55; color:var(--text-secondary); }
.keyfact__item b{ color:#fff; }
.keyfact__quote{ background:rgba(245,158,11,.07); border-left:3px solid #f59e0b;
  border-radius:0 10px 10px 0; padding:14px 16px; font-size:.88rem; line-height:1.6;
  color:var(--text-secondary); margin-bottom:18px; }
.keyfact__final{ font-size:1.02rem; font-weight:700; color:#22c55e; text-align:center; margin:0; }
@media (max-width:768px){
  .keyfact{ padding:18px; }
  .keyfact__lead{ font-size:1.05rem; }
  .keyfact__sub{ font-size:.87rem; }
  .keyfact__grid{ grid-template-columns:1fr; gap:9px; }
  .keyfact__item{ font-size:.83rem; padding:12px 14px; }
  .keyfact__quote{ font-size:.82rem; }
  .keyfact__final{ font-size:.93rem; }
}

/* ── Тарифные карточки в первом экране ────────────────────────── */
.hero__ctas--tariffs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tcard{
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:#161929; border:1px solid #2d3251; border-radius:14px;
  padding:20px 18px; text-decoration:none; transition:transform .18s, border-color .18s;
}
.tcard:hover{ transform:translateY(-3px); }
.tcard__grade{ font-size:11px; font-weight:700; letter-spacing:.07em; color:#9ca3be; }
.tcard__title{ font-size:13.5px; font-weight:600; color:#fff; line-height:1.45; flex:1; }
.tcard__price{ font-size:21px; font-weight:800; color:#fff; margin-top:4px; }
.tcard__badge{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:#f59e0b; color:#000; font-size:10px; font-weight:700;
  padding:3px 12px; border-radius:99px; white-space:nowrap;
}
.tcard--silver:hover{ border-color:#9ca3be; }
.tcard--gold{ background:#1a1508; border:2px solid #f59e0b; }
.tcard--gold .tcard__grade{ color:#f59e0b; }
.tcard--platinum{
  border:2px solid transparent;
  background:
    linear-gradient(#161929,#161929) padding-box,
    linear-gradient(135deg,#cbd5e1,#64748b,#e2e8f0) border-box;
}
.tcard--platinum .tcard__grade{ color:#cbd5e1; }
@media (max-width:900px){
  .hero__ctas--tariffs{ grid-template-columns:1fr; gap:12px; }
  .tcard{ padding:15px; }
  .tcard__title{ font-size:12.5px; }
  .tcard__price{ font-size:18px; }
  .tcard__badge{ top:-9px; left:15px; transform:none; }
}

/* ── Нижняя панель действий (только мобильный) ────────────────── */
.bottombar{ display:none; }
@media (max-width:768px){
  .bottombar{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0;
    z-index:9998; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(15,17,32,.96); backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .bottombar__btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    min-height:46px; border-radius:10px; text-decoration:none;
    font-size:14px; font-weight:600; color:#cbd5e1;
    background:#1f2237; border:1px solid #2d3251;
  }
  .bottombar__btn--primary{
    background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none;
  }
  /* поддержка сжимается в иконку и уходит выше панели */
  .support-fab{
    bottom:78px !important; right:12px !important;
    width:48px !important; min-width:48px !important; max-width:48px !important;
    height:48px; padding:0 !important; justify-content:center;
  }
  .support-fab__text{ display:none; }
  /* чтобы контент не прятался за панелью */
  body{ padding-bottom:70px; }
}
.tcard__price--custom{ font-size:15px; font-weight:700; color:#cbd5e1; }
@media (max-width:900px){ .tcard__price--custom{ font-size:14px; } }
.tcard__price--custom{ font-size:15px; font-weight:700; color:#cbd5e1; }
@media (max-width:900px){ .tcard__price--custom{ font-size:14px; } }

/* Платина: премиальный вид — свечение и глубина */
.tcard--platinum{
  background:
    linear-gradient(160deg,#1c2030,#12141f) padding-box,
    linear-gradient(135deg,#e2e8f0,#64748b,#f1f5f9,#94a3b8) border-box;
  box-shadow: 0 0 26px rgba(203,213,225,.09), inset 0 1px 0 rgba(255,255,255,.06);
}
.tcard--platinum:hover{ box-shadow: 0 0 34px rgba(203,213,225,.16); }
.tcard--platinum .tcard__grade{
  background:linear-gradient(135deg,#f1f5f9,#94a3b8);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; letter-spacing:.12em;
}
.tcard--platinum::after{
  content:'ПРЕМИУМ'; position:absolute; top:12px; right:14px;
  font-size:8.5px; font-weight:700; letter-spacing:.1em; color:#94a3b8;
  border:1px solid #64748b; border-radius:99px; padding:2px 7px;
}

/* Нижняя панель убрана — возвращаем поддержку и отступы */
@media (max-width:768px){
  body{ padding-bottom:0; }
  .support-fab{ bottom:16px !important; right:16px !important; }
}
.tcard__list{ font-size:11.5px; line-height:1.6; color:#8b93a7; }
.tcard__cta{ font-size:12.5px; font-weight:700; color:#3b82f6; margin-top:2px; }
.tcard--gold .tcard__cta{ color:#f59e0b; }
.tcard--platinum .tcard__cta{ color:#cbd5e1; }

/* Правовая позиция через Пленум */
.plenum{ max-width:860px; margin:0 auto; }
.plenum__law{ background:rgba(59,130,246,.07); border-left:3px solid #3b82f6;
  border-radius:0 12px 12px 0; padding:16px 20px; font-size:.9rem; line-height:1.65;
  color:var(--text-secondary); margin-bottom:18px; }
.plenum__law b{ color:#fff; }
.plenum__pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.plenum__sign{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:18px; }
.plenum__signname{ font-size:.95rem; font-weight:700; color:#ff6b6b; margin-bottom:8px; }
.plenum__sign p{ font-size:.86rem; line-height:1.6; color:var(--text-secondary); margin:0; }
.plenum__final{ text-align:center; font-size:1rem; font-weight:700; color:#22c55e;
  padding:14px; background:rgba(34,197,94,.06); border-radius:12px; }
@media (max-width:768px){
  .plenum__pair{ grid-template-columns:1fr; gap:10px; }
  .plenum__law{ font-size:.84rem; padding:14px 16px; }
  .plenum__sign{ padding:14px; }
  .plenum__final{ font-size:.9rem; }
}

/* Правовая позиция через Пленум */
.plenum{ max-width:860px; margin:0 auto; }
.plenum__law{ background:rgba(59,130,246,.07); border-left:3px solid #3b82f6;
  border-radius:0 12px 12px 0; padding:16px 20px; font-size:.9rem; line-height:1.65;
  color:var(--text-secondary); margin-bottom:18px; }
.plenum__law b{ color:#fff; }
.plenum__pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.plenum__sign{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:18px; }
.plenum__signname{ font-size:.95rem; font-weight:700; color:#ff6b6b; margin-bottom:8px; }
.plenum__sign p{ font-size:.86rem; line-height:1.6; color:var(--text-secondary); margin:0; }
.plenum__final{ text-align:center; font-size:1rem; font-weight:700; color:#22c55e;
  padding:14px; background:rgba(34,197,94,.06); border-radius:12px; }
@media (max-width:768px){
  .plenum__pair{ grid-template-columns:1fr; gap:10px; }
  .plenum__law{ font-size:.84rem; padding:14px 16px; }
  .plenum__sign{ padding:14px; }
  .plenum__final{ font-size:.9rem; }
}
.hero__price-note{
  font-size:.88rem; line-height:1.6; color:#8b93a7;
  margin:0 0 16px; max-width:640px;
  padding-left:12px; border-left:2px solid rgba(245,158,11,.4);
}
@media (max-width:768px){ .hero__price-note{ font-size:.8rem; margin-bottom:12px; } }
.hero__price-note{
  font-size:.88rem; line-height:1.6; color:#8b93a7;
  margin:0 0 16px; max-width:640px;
  padding-left:12px; border-left:2px solid rgba(245,158,11,.4);
}
@media (max-width:768px){ .hero__price-note{ font-size:.8rem; margin-bottom:12px; } }

/* Заголовок по центру */
.hero__h1--center{ text-align:center; margin-left:auto; margin-right:auto; }
.hero__h2{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }

/* Фраза про цены — перед тарифами */
.pricenote{
  text-align:center; font-size:.95rem; line-height:1.6; color:#f59e0b;
  font-weight:600; margin:0 auto 16px; max-width:640px;
}
@media (max-width:768px){ .pricenote{ font-size:.86rem; margin-bottom:12px; } }

/* Вопрос и ответ по центру, обоснование остаётся слева для читаемости */
.hero__hook-q,
.hero__hook-answer{ text-align:center; }
.hero__hook-title{ text-align:center; }


/* ==============================================================
   DESIGN V2 — тёмная тема WBIndex, интерактив, мобильный хук
   (добавлено в конце файла: перекрывает прежние правила каскадом)
   ============================================================== */

/* ── Карточки складов (реестр пожаров) ───────────────────────── */
.fire-list{
  display:flex; flex-direction:column; gap:10px; padding:8px 0;
}
.fire-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--bg-deep); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.fire-row:hover{
  transform:translateY(-3px);
  border-color:rgba(192,57,43,.55);
  background:var(--bg-card);
  box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 18px rgba(192,57,43,.12);
}
.fire-row--warn:hover{
  border-color:rgba(245,158,11,.5);
  box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 18px rgba(245,158,11,.12);
}
.fire-row__place{ font-weight:600; color:#fff; }
.fire-row__note{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.fire-row__date{
  color:var(--red-alarm); font-weight:600; font-size:13px;
  white-space:nowrap; flex-shrink:0;
}
.fire-row--warn .fire-row__date{ color:var(--orange); }
@media (max-width:480px){
  .fire-row{ padding:11px 13px; }
}

/* ── Тарифные карточки: ховеры по грейдам ────────────────────── */
.tcard{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.tcard:hover{ transform:translateY(-4px); }
.tcard--silver{ border-color:var(--border); }
.tcard--silver:hover{
  border-color:#b6c2d9;
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 20px rgba(148,163,184,.18);
}
.tcard--gold:hover{
  border-color:var(--orange-light);
  box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 26px rgba(245,158,11,.28);
}
.tcard--platinum{ transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.tcard--platinum:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 34px rgba(203,213,225,.22);
  background:
    linear-gradient(160deg,#1e2233,#131522) padding-box,
    linear-gradient(315deg,#e2e8f0,#64748b,#f1f5f9,#94a3b8) border-box;
}

/* Пульс бейджа «Полное сопровождение» на золотом тарифе */
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.45); }
  50%{ box-shadow:0 0 0 7px rgba(245,158,11,0); }
}
.tcard--gold .tcard__badge{ animation:badgePulse 2.4s ease-in-out infinite; }

/* ── Ховеры остальных блоков ─────────────────────────────────── */
.keyfact__item{
  border:1px solid transparent;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.keyfact__item:hover{
  background:#1a1e33; border-color:rgba(192,57,43,.4);
  transform:translateY(-2px);
}
.plenum__sign{
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.plenum__sign:hover{
  border-color:rgba(255,107,107,.45); transform:translateY(-3px);
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.plenum__law{ transition:background .22s ease; }
.plenum__law:hover{ background:rgba(59,130,246,.11); }
.support__card{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.support__card:hover{
  transform:translateY(-3px); border-color:var(--border-blue);
  box-shadow:0 8px 26px rgba(0,0,0,.35), 0 0 20px rgba(59,130,246,.1);
}
.analysis__metrics .metric-card{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.analysis__metrics .metric-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.support__quote-block{ transition:border-color .25s ease, box-shadow .25s ease; }
.support__quote-block:hover{
  border-color:rgba(99,102,241,.35);
  box-shadow:0 0 30px rgba(99,102,241,.1);
}

/* ── Хук «Почему суд работает?»: раскрывающиеся основания ────── */
.hero__hook-list li{
  cursor:pointer;
  margin:0 -10px; padding:6px 34px 6px 30px;
  border-radius:9px; border:1px solid transparent;
  transition:background .22s ease, border-color .22s ease;
}
.hero__hook-list li::before{ left:10px; top:calc(.52em + 6px); }
.hero__hook-list li:hover{
  background:rgba(245,158,11,.07);
  border-color:rgba(245,158,11,.22);
}
span.hook-why{
  display:block;
  max-height:0; opacity:0; overflow:hidden;
  margin-top:0;
  transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.hero__hook-list li.open > span.hook-why{
  max-height:200px; opacity:1; margin-top:4px;
}
@media (hover:hover) and (min-width:769px){
  .hero__hook-list li:hover > span.hook-why{
    max-height:200px; opacity:1; margin-top:4px;
  }
}
/* Стрелка-индикатор раскрытия */
.hero__hook-list li::after{
  content:'\276F'; position:absolute; right:12px; top:8px;
  font-size:9px; color:rgba(245,158,11,.55);
  transform:rotate(90deg);
  transition:transform .25s ease, color .25s ease;
}
.hero__hook-list li.open::after{ transform:rotate(-90deg); color:var(--orange); }

/* Кнопка «Показать 7 оснований» — только мобильный */
.hero__hook-toggle{
  display:none;
  width:100%; margin-top:2px; padding:9px 12px;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3);
  border-radius:9px; color:var(--orange); font-family:var(--font-main);
  font-size:13px; font-weight:700; cursor:pointer;
  align-items:center; justify-content:center; gap:8px;
  transition:background .22s ease, border-color .22s ease;
}
.hero__hook-toggle:hover{ background:rgba(245,158,11,.16); }
.hero__hook-toggle i{ transition:transform .25s ease; font-size:11px; }
.hero__hook--open .hero__hook-toggle i{ transform:rotate(180deg); }

@media (max-width:768px){
  /* Пояснения снова доступны — по тапу (перекрывает старый display:none) */
  span.hook-why{ display:block !important; }
  /* По умолчанию список и подводка скрыты, видны вопрос + ответ + кнопка */
  .hero__hook-toggle{ display:flex; }
  .hero__hook .hero__hook-title,
  .hero__hook .hero__hook-list{
    display:none;
  }
  .hero__hook--open .hero__hook-title{ display:block; margin-top:12px; }
  .hero__hook--open .hero__hook-list{ display:flex; animation:fadeIn .3s ease both; }
  .hero__hook-answer{ margin-bottom:10px; }
  .hero__hook-list li{ margin:0 -6px; padding:5px 26px 5px 22px; }
  .hero__hook-list li::before{ left:8px; top:calc(.45em + 5px); }
  .hero__hook-list li::after{ right:8px; top:7px; }
}

/* ── Мобильный: золото первым, шрифты, первый экран ──────────── */
@media (max-width:900px){
  .hero__ctas--tariffs{ display:grid; grid-template-columns:1fr; }
  .tcard__list{ font-size:12.5px; }
  .tcard__cta{ font-size:12.5px; }
}
@media (max-width:768px){
  .hero{ padding-top:8px !important; padding-bottom:40px; }
  .hero__h1{ font-size:1.32rem; margin-bottom:6px; }
  .hero__h2{ font-size:.92rem; line-height:1.55; margin-bottom:12px; }
  .hero__hook{ padding:12px 13px; margin-bottom:12px; }
  .pricenote{ font-size:.84rem; margin-bottom:10px; }
  .hero__ctas--tariffs{ gap:10px; }
  .tcard{ padding:14px 15px; }
  .hero__hook-list li{ font-size:.8rem; }
  .hook-why{ font-size:.79rem; line-height:1.5; color:var(--text-muted); }
}

/* ── Секции: чередование фона для глубины ────────────────────── */
.section#keyfact{ background:var(--bg-deepest); }
.section.about{ background:var(--bg-deep); }
.section.support{ background:var(--bg-deepest); }

/* ── Плавность и доступность ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .tcard:hover, .fire-row:hover, .support__card:hover,
  .keyfact__item:hover, .plenum__sign:hover{ transform:none !important; }
}


/* ==============================================================
   DESIGN V2.1 — типографика Bitter/Onest, цветовая дисциплина
   Роли цвета: сталь #6d8dff — структура и действия;
   огонь — только пожары и тревога; зелёный — только вердикты закона;
   янтарь — только золотой тариф и предупреждения.
   ============================================================== */

/* ── Заголовки: брусковая антиква — вес юридического документа ── */
.hero__h1,
.section__title,
.hero__hook-q,
.keyfact__lead,
.plenum__signname,
.plenum__final,
.keyfact__final,
.auth-card h1{
  font-family:var(--font-display);
  letter-spacing:0;
}
.hero__h1{
  color:#f2f5ff; font-weight:800;
  text-wrap:balance;
}
.section__title{ font-weight:800; }
.hero__hook-q{ font-weight:700; color:#f2f5ff; }
.keyfact__lead{ font-weight:800; }

/* Данные — моноширинный: даты, цены */
.tcard__price{ font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em; }
.tcard__price--custom{ font-family:var(--font-main); }
.fire-row__date{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; }

/* ── Хук: нейтральная «выписка из дела» вместо янтарной плашки ── */
.hero__hook{
  background:#171a2c;
  border:1px solid var(--border);
  border-left:3px solid var(--steel);
  border-radius:6px 14px 14px 6px;
}
.hero__hook-list li::before{ background:var(--steel); }
.hero__hook-list li:hover{
  background:var(--steel-glow);
  border-color:rgba(109,141,255,.28);
}
.hero__hook-list li::after{ color:rgba(109,141,255,.55); }
.hero__hook-list li.open::after{ color:var(--steel); }
.hero__hook-toggle{
  background:rgba(109,141,255,.09);
  border:1px solid rgba(109,141,255,.32);
  color:#9db1ff;
}
.hero__hook-toggle:hover{ background:rgba(109,141,255,.16); }
.hook-why{ color:var(--text-muted); }

/* ── Тише второстепенное: эмпатия — не сигнал тревоги ─────────── */
.pricenote{ color:var(--text-secondary); font-weight:500; }
.hero__h2{ color:#a9b2d0; font-weight:500; }

/* Бейджи секций — сталь */
.section__badge{ background:var(--steel-glow); color:#9db1ff; }
.accent{ color:#9db1ff; }
.topnav__logo-icon, .sidebar__logo-icon{ color:var(--steel); }

/* Кнопки действий — сталь вместо разнобоя синего */
.btn--blue{
  background:linear-gradient(135deg,#5b7cf0,#4a5fd7);
  box-shadow:0 4px 20px rgba(91,124,240,.3);
}
.btn--blue:hover{ box-shadow:0 6px 28px rgba(91,124,240,.45); }

/* Серебро: холодная сталь и в покое */
.tcard--silver .tcard__cta{ color:#9db1ff; }
.tcard .tcard__cta{ transition:color .2s; }

/* Ключевое обстоятельство: огонь остаётся — это раздел про пожар */
.keyfact__item:hover{ border-color:rgba(192,57,43,.4); }

/* Правовая позиция: стальная линейка закона вместо синей */
.plenum__law{ border-left-color:var(--steel); background:rgba(109,141,255,.06); }
.plenum__law:hover{ background:rgba(109,141,255,.1); }

/* Цитата-вердикт внизу: сталь + фиолет глубже */
.support__quote-block{
  background:linear-gradient(135deg,rgba(109,141,255,.05),rgba(99,102,241,.06));
  border-color:rgba(109,141,255,.16);
}
.support__card-icon{ background:var(--steel-glow); color:#9db1ff; }
.support__card:hover{ border-color:rgba(109,141,255,.35); }

/* Мобильный: заголовки-антиква чуть плотнее */
@media (max-width:768px){
  .hero__h1{ font-size:1.36rem; line-height:1.28; }
  .section__title{ font-size:1.5rem; }
}


/* ==============================================================
   DESIGN V2.2 — hero__steps: процесс из 4 заменяемых шагов
   (бывший абзац hero__h2, разбит на пункты; активный шаг
   сменяется автоматически, клик выбирает вручную)
   ============================================================== */
.hero__steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  max-width:900px; margin:0 auto 22px;
}
.hero__step{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:transparent; border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; cursor:pointer; font-family:var(--font-main);
  text-align:left; overflow:hidden;
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.hero__step:hover{
  border-color:rgba(109,141,255,.4);
  background:var(--steel-glow);
  transform:translateY(-2px);
}
.hero__step:focus-visible{ outline:2px solid var(--steel); outline-offset:2px; }
.hero__step-num{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--text-muted); letter-spacing:.08em;
  transition:color .22s ease;
}
.hero__step-text{
  font-size:.83rem; line-height:1.5; color:var(--text-secondary);
  transition:color .22s ease;
}
.hero__step.is-active{ border-color:rgba(109,141,255,.55); background:#171a2c; }
.hero__step.is-active .hero__step-num{ color:var(--steel); }
.hero__step.is-active .hero__step-text{ color:#e7ebfa; }
/* Полоса прогресса до смены шага */
.hero__step::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--steel),rgba(109,141,255,.15));
}
.hero__step.is-active::after{ animation:stepProgress 4s linear forwards; }
.hero__steps.is-paused .hero__step.is-active::after{ animation-play-state:paused; }
@keyframes stepProgress{ from{ width:0 } to{ width:100% } }

@media (max-width:768px){
  /* Номера — компактные табы в строку, текст — только у активного */
  .hero__steps{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .hero__step{
    flex:0 0 auto; flex-direction:row; align-items:center;
    padding:7px 12px; border-radius:9px;
  }
  .hero__step:hover{ transform:none; }
  .hero__step .hero__step-text{ display:none; }
  .hero__step.is-active{
    order:1; flex:1 1 100%; gap:10px; padding:10px 12px;
    border-radius:11px;
  }
  .hero__step.is-active .hero__step-text{
    display:block; font-size:.8rem; line-height:1.45; min-height:2.9em;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero__step.is-active::after{ animation:none; width:100%; }
}

/* ── Динамика шагов: карусель — один блок на сцене ────────────── */
/* Перекрывает сетку из V2.2: теперь виден один шаг, остальные
   ждут за кулисами справа; смена — выезд нового и уход старого */
.hero__steps{ display:block; }
.hero__steps-track{
  position:relative; overflow:hidden;
  min-height:72px;
}
.hero__steps .hero__step{
  position:absolute; inset:0;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  text-align:center; gap:16px;
  padding:12px 18px;
  background:transparent; border:none; border-radius:0; box-shadow:none;
  opacity:0; transform:translateX(52px);
  transition:opacity .45s ease, transform .5s cubic-bezier(.22,.8,.36,1);
  pointer-events:none;
}
.hero__steps .hero__step:hover{ transform:none; background:transparent; border:none; }
.hero__steps .hero__step.is-active{
  opacity:1; transform:translateX(0);
  pointer-events:auto; cursor:pointer;
  background:transparent; border:none;
}
.hero__steps .hero__step.is-leaving{ opacity:0; transform:translateX(-52px); }
.hero__steps .hero__step.from-left{ transform:translateX(-52px); }
.hero__steps .hero__step.is-leaving.leave-r{ transform:translateX(52px); }
.hero__steps .hero__step .hero__step-text{
  font-size:1.12rem; line-height:1.5;
}
.hero__steps .hero__step .hero__step-num{ font-size:14px; }
/* Полоса прогресса — на всю ширину дорожки, чуть заметнее */
.hero__steps .hero__step::after{ height:2px; bottom:2px; }

/* Номера-переключатели */
.hero__steps-nav{
  display:flex; gap:8px; margin-top:10px;
}
.hero__steps-dot{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.06em;
  background:transparent; border:1px solid var(--border);
  border-radius:8px; color:var(--text-muted);
  padding:6px 14px; cursor:pointer;
  transition:color .22s ease, border-color .22s ease, background .22s ease;
}
.hero__steps-dot:hover{
  color:#9db1ff; border-color:rgba(109,141,255,.4);
  background:var(--steel-glow);
}
.hero__steps-dot.is-active{
  color:var(--steel); border-color:rgba(109,141,255,.55);
  background:#171a2c;
}
.hero__steps-dot:focus-visible{ outline:2px solid var(--steel); outline-offset:2px; }

@media (max-width:768px){
  .hero__steps{ display:block; margin-bottom:14px; }
  .hero__steps-track{ min-height:110px; }
  .hero__steps .hero__step{
    flex-direction:column; align-items:center; justify-content:center;
    gap:5px; padding:8px 10px;
  }
  .hero__steps .hero__step .hero__step-text{
    display:block; font-size:.95rem; line-height:1.45; text-align:center;
  }
  .hero__steps .hero__step .hero__step-num{ font-size:12.5px; }
  /* На мобильном номера не нужны — блок сменяется сам */
  .hero__steps-nav{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__steps .hero__step{ transition:none; }
  .hero__steps .hero__step.is-active{ opacity:1; transform:none; }
}

/* ── Фон hero: тихое свечение и линии-границы (вместо канвы) ──── */
#heroCanvas{ display:none; }
.hero::before{
  content:'';
  position:absolute; inset:0; top:-56px;
  left:50%; transform:translateX(-50%);
  width:min(1100px, 100%); height:520px;
  background:radial-gradient(38% 78% at 50% 0%, rgba(109,141,255,.11), transparent);
  pointer-events:none;
}
.hero .container{ position:relative; }
.hero .container::before,
.hero .container::after{
  content:'';
  position:absolute; top:-40px; bottom:-20px;
  width:1px;
  background:linear-gradient(to bottom,
    transparent, #2d3251 16%, #2d3251 78%, transparent);
  pointer-events:none;
}
.hero .container::before{ left:-28px; }
.hero .container::after{ right:-28px; }

/* Каскадное появление первого экрана */
.hero__h1{ animation:fadeInUp .6s .05s ease both; }
.hero__steps{ animation:fadeInUp .6s .16s ease both; }
.hero__hook{ animation:fadeInUp .6s .27s ease both; }
.pricenote{ animation:fadeInUp .6s .38s ease both; }
.hero__ctas--tariffs{ animation:fadeInUp .6s .48s ease both; }

/* ── Параллакс при прокрутке ──────────────────────────────────── */
/* --sy обновляет JS (initParallax); слои движутся с разной скоростью.
   Сдвиг контента hero убран: с overflow:hidden он срезал нижние
   кнопки тарифов при прокрутке (баг с мобильного). Двигается только
   фоновое свечение. */
:root{ --sy:0; }
/* Слой 2: свечение фона hero плывёт ещё медленнее */
.hero::before{
  transform:translateX(-50%) translateY(calc(var(--sy) * 0.3px));
}
/* Слой 3: контент секций дрейфует навстречу при входе в экран
   (scroll-driven animations; без поддержки — просто нет эффекта) */
@supports (animation-timeline: view()){
  #keyfact .container,
  #analysis .container,
  #about .container,
  #support .container{
    animation:plxDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes plxDrift{
    from{ transform:translateX(calc(var(--sidebar-width) / -2)) translateY(26px); }
    to{ transform:translateX(calc(var(--sidebar-width) / -2)) translateY(-26px); }
  }
}
@media (prefers-reduced-motion: reduce){
  .hero .container{ transform:none; opacity:1; }
  .main:not(.main--dashboard) .hero .container{
    transform:translateX(calc(var(--sidebar-width) / -2));
    opacity:1;
  }
  #keyfact .container, #analysis .container,
  #about .container, #support .container{ animation:none; }
}


/* ==============================================================
   V2.6 — по референсу Меркатуса: без зелёного, призывы в секциях
   ============================================================== */

/* Вердикты — не зелёным: белый для главного, сталь для подписей */
.hero__hook-answer{ color:#e9edfb; }
.hero__hook-foot{ color:#9db1ff; }
.keyfact__final{ color:#e9edfb; }
.plenum__final{
  color:#e9edfb;
  background:var(--steel-glow);
  border:1px solid rgba(109,141,255,.25);
}

/* Призыв в конце секции */
.section-cta{
  display:flex; justify-content:center;
  margin-top:32px;
}
.section-cta .btn{
  min-width:280px;
}
.section-cta .btn i{
  transition:transform .2s ease;
  font-size:.85em;
}
.section-cta .btn:hover i{ transform:translateX(4px); }
@media (max-width:768px){
  .section-cta{ margin-top:22px; }
  .section-cta .btn{ width:100%; min-width:0; }
}

@media (max-width:768px){
  .hero .container::before{ left:4px; }
  .hero .container::after{ right:4px; }
  .hero .container::before,
  .hero .container::after{ top:-12px; bottom:0; }
}


/* ==============================================================
   V2.7 — СКИН ПО РЕФЕРЕНСУ МЕРКАТУСА (cons.merkatys.ru)
   Формула референса: почти чёрный графит + ОДИН кислотный акцент,
   заголовки Unbounded, mono-глазки над секциями, карточки r20,
   кнопки-пилюли. Акцент у них кислотно-лаймовый — у нас, по просьбе
   «только не зелёным», кислотно-янтарный (огонь/золото).
   ============================================================== */

:root{
  --acid:#ffbe2e;
  --acid-dim:#dfa11c;
  --acid-glow:rgba(255,190,46,.1);

  --bg-deepest:#0e0f11;
  --bg-deep:#141519;
  --bg-base:#17181d;
  --bg-card:#191b20;
  --bg-card-hover:#1e2026;
  --bg-elevated:#1f2127;
  --bg-input:#1e2026;
  --text-primary:#f2f4f8;
  --text-secondary:#b7bdc9;
  --text-muted:#7e8494;
  --border:#2a2d34;
  --border-subtle:rgba(255,255,255,.05);
  --border-medium:rgba(255,255,255,.09);
  --border-hover:rgba(255,255,255,.14);
  --border-blue:rgba(255,190,46,.35);

  /* Сталь уступает место кислоте: всё, что было на --steel,
     автоматически переходит на янтарь */
  --steel:var(--acid);
  --steel-glow:var(--acid-glow);
  --blue:#4c7dd8;
  --blue-light:#6f97e2;
  --blue-glow:rgba(76,125,216,.12);

  --font-display:'Bitter', 'Onest', Georgia, serif;
  --font-main:'Onest', 'Manrope', system-ui, sans-serif;

  --shadow-card:0 4px 24px rgba(0,0,0,.3);
  --shadow-hover:0 10px 32px rgba(0,0,0,.42);
}

::selection{ background:rgba(255,190,46,.28); }
body{ background:var(--bg-deepest); }

/* ── Заголовки Unbounded: плотные, компактные кегли ──────────── */
.hero__h1{
  font-family:var(--font-display);
  font-size:2rem; font-weight:700; line-height:1.14;
  letter-spacing:-.01em; color:#f2f4f8;
}
.section__title{
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:700; line-height:1.18;
  letter-spacing:-.01em;
}
.hero__hook-q{ font-family:var(--font-display); font-size:1rem; font-weight:600; }
.keyfact__lead{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; line-height:1.3; }
.plenum__signname{ font-family:var(--font-display); font-size:.88rem; font-weight:600; }
.keyfact__final, .plenum__final{ font-family:var(--font-main); font-weight:700; }

/* ── Глазки секций: mono, кислота, без плашки ────────────────── */
.section__badge{
  background:transparent; border:none; padding:0;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--acid); border-radius:0;
}
.section__badge::before{ content:'// '; color:var(--acid-dim); }
.section__badge i{ display:none; }
.accent{ color:var(--acid); }
.topnav__logo-icon, .sidebar__logo-icon{
  background:linear-gradient(135deg, var(--acid), #e89b12);
  color:#131313;
  box-shadow:0 4px 12px rgba(255,190,46,.28);
}
.topnav__logo .accent{ color:var(--acid); }
.sidebar__item--active, .sidebar__item:hover{ color:var(--acid); }
.sidebar--landing .sidebar__item--active{
  color:var(--acid);
  background:var(--acid-glow);
}
.sidebar--landing .sidebar__item--active::before{ background:var(--acid); }

/* ── Кнопки-пилюли ───────────────────────────────────────────── */
.btn{ border-radius:100px; }
.btn--blue{
  background:var(--acid); color:#131313;
  font-weight:800;
  box-shadow:0 4px 20px rgba(255,190,46,.22);
}
.btn--blue:hover{
  background:#ffd15e; color:#131313;
  transform:translateY(-2px);
  box-shadow:0 6px 26px rgba(255,190,46,.34);
}
.btn--outline{ border-radius:100px; }
.btn--outline:hover{ border-color:var(--acid); background:var(--acid-glow); color:#f2f4f8; }
.section-cta .btn{ font-family:var(--font-main); }

/* ── Поверхности: r20 и тихий градиент 160° ──────────────────── */
.card, .support__card, .plenum__sign,
.analysis__metrics .metric-card, .support__quote-block{
  background:linear-gradient(160deg,#191b20,#131519);
  border:1px solid var(--border);
  border-radius:20px;
}
.hero__hook{
  background:linear-gradient(160deg,#191b20,#131519);
  border:1px solid var(--border);
  border-left:3px solid var(--acid);
  border-radius:20px;
}
.hero__hook-toggle{ border-radius:100px; }
.keyfact{
  background:linear-gradient(160deg,#1d1518,#141013);
  border:1px solid rgba(239,68,68,.28);
  border-radius:20px;
}
.keyfact__item{ background:#191b20; border-radius:12px; }
.keyfact__item:hover{ background:#1e2026; }
.fire-row{ background:var(--bg-deep); border-radius:12px; }
.plenum__law{ border-left:3px solid var(--acid); background:var(--acid-glow); border-radius:0 14px 14px 0; }
.plenum__law:hover{ background:rgba(255,190,46,.14); }
.plenum__final{ border-radius:14px; }
.keyfact__quote{ border-left-color:var(--acid); background:var(--acid-glow); }
.support__quote-block{ border-radius:24px; }
.support__card-icon{ background:var(--acid-glow); color:var(--acid); border-radius:14px; }
.card__title i{ color:var(--acid); }

/* ── Тарифы: r20, золото — кислотное ─────────────────────────── */
.tcard{
  background:linear-gradient(160deg,#191b20,#131519);
  border:1px solid var(--border);
  border-radius:20px;
}
.tcard--silver:hover{ border-color:#8b93a7; }
.tcard--gold{
  background:linear-gradient(160deg,#211a0b,#161109);
  border:2px solid var(--acid);
}
.tcard--gold .tcard__grade{ color:var(--acid); }
.tcard--gold .tcard__cta{ color:var(--acid); }
.tcard--gold:hover{
  border-color:#ffd15e;
  box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 26px rgba(255,190,46,.24);
}
.tcard__badge{
  background:var(--acid); color:#131313;
  border-radius:100px;
}
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,190,46,.4); }
  50%{ box-shadow:0 0 0 7px rgba(255,190,46,0); }
}
/* Платина — представительский класс: чёрный корпус,
   переливающаяся платиновая рамка, металлический блик */
.tcard--platinum{
  position:relative;
  background:
    linear-gradient(160deg,#14161d,#0a0c11) padding-box,
    linear-gradient(120deg,#f8fafc,#8b96a8,#e2e8f0,#5c6778,#f1f5f9,#94a3b8) border-box;
  border:2px solid transparent;
  border-radius:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 24px rgba(203,213,225,.08),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.tcard--platinum:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 34px rgba(203,213,225,.16),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* Металлический блик при наведении — анимация фона, чтобы не
   резать overflow'ом плашку «Полное сопровождение» */
.tcard--platinum::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  border-radius:18px;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%);
  background-size:260% 100%;
  background-position:130% 0;
  background-repeat:no-repeat;
  pointer-events:none;
}
.tcard--platinum:hover::before{
  transition:background-position .7s ease;
  background-position:-130% 0;
}
/* Плашка платины — металл, без пульса */
.tcard--platinum > .tcard__badge{
  position:absolute;
  background:linear-gradient(135deg,#f1f5f9,#a8b3c4);
  color:#10121a;
  animation:none;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  z-index:2;
}
.tcard--platinum > *{ position:relative; z-index:1; }
.tcard--platinum .tcard__grade{
  font-size:12px; letter-spacing:.2em;
  background:linear-gradient(135deg,#f8fafc,#94a3b8,#e2e8f0);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tcard--platinum::after{
  content:'ПРЕМИУМ';
  top:19px; right:16px;
  background:linear-gradient(135deg,#f1f5f9,#a8b3c4);
  color:#10121a; border:none; border-radius:100px;
  font-size:9.5px; font-weight:700; letter-spacing:.22em;
  padding:4px 14px 4px 16px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  z-index:1;
}
@media (max-width:900px){
  .tcard--platinum::after{ top:16px; }
}
.tcard--platinum .tcard__title{ color:#f4f6fa; }
.tcard--platinum .tcard__price--custom{ color:#dde3ec; }
.tcard__price{ font-family:var(--font-mono); }

/* Боковые карточки ярче: не сливаются с фоном рядом с золотом */
.tcard__title{ color:#ffffff; }
.tcard__price{ color:#ffffff; }
.tcard__list{ color:#a9b0c0; }
.tcard__grade{ color:#9aa2b5; }
.tcard--silver{ border-color:#363b49; }
.tcard--silver .tcard__grade{ color:#aeb6c9; }
.tcard--silver .tcard__cta{ color:#e6ebf5; }
.tcard--silver:hover{ border-color:#aeb6c9; }
.tcard--platinum .tcard__cta{ color:#eef2f8; }
/* Подводка перед тарифами */
.tariffs-lead{
  font-family:var(--font-display);
  font-size:1.02rem; font-weight:600; line-height:1.3;
  color:#f2f4f8; text-align:center;
  margin:0 0 18px;
}
@media (max-width:768px){
  .tariffs-lead{ font-size:.9rem; margin-bottom:12px; }
}

/* ==============================================================
   V2.9 — тарифы-кнопки: физика клавиши + CTA-пилюли внутри
   ============================================================== */

/* Карточка ведёт себя как клавиша: объёмная нижняя грань,
   подъём при наведении, вдавливание при нажатии */
.tcard{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:0 4px 0 rgba(0,0,0,.5), 0 12px 26px rgba(0,0,0,.35);
}
.tcard:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.42);
}
.tcard:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.3);
  transition-duration:.07s;
}
.tcard--gold{
  box-shadow:0 4px 0 rgba(122,84,6,.85), 0 12px 26px rgba(0,0,0,.35);
}
.tcard--gold:hover{
  box-shadow:0 7px 0 rgba(122,84,6,.85), 0 16px 32px rgba(0,0,0,.4), 0 0 26px rgba(255,190,46,.22);
}
.tcard--gold:active{
  box-shadow:0 1px 0 rgba(122,84,6,.85), 0 6px 14px rgba(0,0,0,.3);
}
.tcard--platinum{
  box-shadow:0 4px 0 rgba(70,78,94,.9), 0 12px 26px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.tcard--platinum:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 rgba(70,78,94,.9), 0 16px 32px rgba(0,0,0,.5),
             0 0 30px rgba(203,213,225,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
.tcard--platinum:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(70,78,94,.9), 0 6px 14px rgba(0,0,0,.35);
}

/* Призыв внутри карточки — настоящая кнопка-пилюля */
.tcard .tcard__cta{
  display:flex; align-items:center; justify-content:center;
  margin-top:12px; padding:12px 16px;
  border-radius:100px;
  font-size:13px; font-weight:800; letter-spacing:.01em;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
/* Серебро — серебряное сияние: светлый металл с холодным отблеском */
.tcard--silver .tcard__cta{
  background:linear-gradient(135deg,#ffffff,#c2cedf 55%,#eef3f9);
  color:#12161f;
  box-shadow:0 0 20px rgba(214,226,240,.4), inset 0 1px 0 rgba(255,255,255,.85);
}
.tcard--silver:hover .tcard__cta{
  background:linear-gradient(135deg,#ffffff,#d3dded 55%,#f6f9fd);
  color:#12161f;
  box-shadow:0 0 28px rgba(214,226,240,.55), inset 0 1px 0 #ffffff;
}
/* Золото — свой, янтарный слиток */
.tcard--gold .tcard__cta{
  background:linear-gradient(135deg,#ffd15e,#f5ae14 60%,#ffbe2e);
  color:#131313;
  box-shadow:0 0 16px rgba(255,190,46,.3), inset 0 1px 0 rgba(255,236,180,.7);
}
.tcard--gold:hover .tcard__cta{
  background:linear-gradient(135deg,#ffe08a,#ffbe2e 60%,#ffd15e);
  color:#131313;
  box-shadow:0 0 24px rgba(255,190,46,.45), inset 0 1px 0 rgba(255,236,180,.8);
}
/* Платина — особенный: перелив металла живёт сам, без наведения */
.tcard--platinum .tcard__cta{
  background:linear-gradient(120deg,#f8fafc,#9aa8bc 30%,#e9eef5 50%,#8f9db3 70%,#f1f5f9);
  background-size:250% 100%;
  color:#10121a;
  box-shadow:0 0 18px rgba(203,213,225,.28), inset 0 1px 0 rgba(255,255,255,.75);
  animation:platinumSheen 4.5s ease-in-out infinite alternate;
}
.tcard--platinum:hover .tcard__cta{
  color:#10121a;
  box-shadow:0 0 28px rgba(203,213,225,.45), inset 0 1px 0 rgba(255,255,255,.85);
}
@keyframes platinumSheen{
  from{ background-position:0% 0; }
  to{ background-position:100% 0; }
}
@media (max-width:768px){
  .tcard .tcard__cta{ padding:12px 14px; margin-top:10px; }
}
@media (prefers-reduced-motion: reduce){
  .tcard:hover, .tcard:active{ transform:none; }
}

/* ── Hero: кислотное свечение, mono-номера шагов ─────────────── */
.hero::before{
  background:radial-gradient(38% 78% at 50% 0%, rgba(255,190,46,.07), transparent);
}
.hero .container::before,
.hero .container::after{
  background:linear-gradient(to bottom, transparent, var(--border) 16%, var(--border) 78%, transparent);
}
.hero__step-num{ color:var(--acid-dim); }
.hero__step.is-active .hero__step-num{ color:var(--acid); }
.hook-why{ color:var(--text-muted); }

/* ── Навигация и футер ───────────────────────────────────────── */
.topnav{ background:rgba(14,15,17,.88); backdrop-filter:blur(10px); }
.topnav.scrolled{ background:rgba(14,15,17,.97); }
.footer{ background:var(--bg-deep); }

/* ── Плавающая поддержка ─────────────────────────────────────── */
.support-fab{
  background:var(--acid); color:#131313;
  border-radius:100px;
  box-shadow:0 8px 24px rgba(255,190,46,.28);
}
.support-fab:hover{ background:#ffd15e; color:#131313; box-shadow:0 10px 30px rgba(255,190,46,.4); }
.support-fab i{ color:#131313; }

/* ── Мобильный: кегли Unbounded ──────────────────────────────── */
@media (max-width:768px){
  .hero__h1{ font-size:1.22rem; line-height:1.24; }
  .section__title{ font-size:1.14rem; line-height:1.28; }
  .hero__hook-q{ font-size:.9rem; }
  .keyfact__lead{ font-size:.95rem; }
  .plenum__signname{ font-size:.8rem; }
  .section__badge{ font-size:11px; }
}
/* ── Статус претензии в кабинете ──────────────────────────────── */
.cstatus{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-radius:14px; padding:20px 22px; margin-bottom:20px;
  border:1px solid;
}
.cstatus__body{ flex:1; min-width:240px; }
.cstatus__title{ font-size:16px; font-weight:700; margin-bottom:5px; }
.cstatus__text{ font-size:13px; line-height:1.6; color:#9ca3be; }
.cstatus__btn{
  flex-shrink:0; padding:11px 20px; border-radius:9px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.cstatus--blue{ background:#0f1a2e; border-color:#3b82f666; }
.cstatus--blue .cstatus__title{ color:#3b82f6; }
.cstatus--blue .cstatus__btn{ background:#3b82f6; color:#fff; }
.cstatus--amber{ background:#1a1200; border-color:#f59e0b66; }
.cstatus--amber .cstatus__title{ color:#f59e0b; }
.cstatus--amber .cstatus__btn{ background:#f59e0b; color:#000; }
.cstatus--red{ background:#2d1214; border-color:#c0392b88; }
.cstatus--red .cstatus__title{ color:#ff6b6b; }
.cstatus--red .cstatus__btn{ background:#c0392b; color:#fff; }
.cstatus--green{ background:#0d2018; border-color:#22c55e66; }
.cstatus--green .cstatus__title{ color:#22c55e; }
.cstatus--green .cstatus__btn{ background:#22c55e; color:#000; }
@media (max-width:768px){
  .cstatus{ padding:16px; gap:12px; }
  .cstatus__title{ font-size:14.5px; }
  .cstatus__text{ font-size:12.5px; }
  .cstatus__btn{ width:100%; text-align:center; }
}


/* === V3: янтарь вместо синего во всём интерфейсе === */
:root{
  --blue:#ffbe2e; --blue-light:#ffd15e; --blue-dark:#d97706;
  --blue-glow:rgba(255,190,46,.15); --purple:#e89b12; --steel:#ffbe2e;
}
.topbar__brand-accent{ color:#ffbe2e; }
.sidebar__logo-icon,.topbar__logo-icon{ background:linear-gradient(135deg,#ffbe2e,#d97706); color:#131313; }

/* Статус склада в реестре пожаров */
.fire-row__status{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:20px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; vertical-align:middle;
}
.fire-row__status--total{ background:rgba(192,57,43,.18); color:#ff6b6b; }
.fire-row__status--partial{ background:rgba(255,190,46,.15); color:var(--acid); }
.fire-row__status--unknown{ background:rgba(255,255,255,.07); color:var(--text-secondary); }
.fire-row__status--mostly_safe{ background:rgba(34,197,94,.14); color:#22c55e; }

/* Параллакс: transform в слое V2.9 перебивал центрирование
   translateX(-50%) из базовых правил — свечение уезжало за край.
   Возвращаем оба преобразования вместе и красим в янтарь. */
.hero::before{
  background: radial-gradient(38% 78% at 50% 0%, rgba(255,190,46,.10), transparent) !important;
  transform: translateX(-50%) translateY(calc(var(--sy) * 0.3px)) !important;
  will-change: transform;
}

/* Кнопки: шрифт темы принудительно (наследование перебивалось) */
.btn, .btn--sm, .btn--lg, .btn--blue, .topnav .btn,
a.btn, button.btn, .cstatus__btn {
  font-family: 'Onest', 'Manrope', system-ui, sans-serif !important;
  font-weight: 700;
}

/* Индикатор расчёта */
@keyframes hsShimmer{ 0%{background-position:-180% 0} 100%{background-position:280% 0} }
@keyframes hsPulse{ 0%,100%{opacity:.55;transform:scale(.96)} 50%{opacity:1;transform:scale(1)} }
.hs-bar{ height:8px;background:var(--bg-deep);border-radius:99px;overflow:hidden;position:relative; }
.hs-bar__fill{
  height:100%; border-radius:99px; transition:width .5s ease;
  background:linear-gradient(90deg,#d97706,var(--acid) 45%,#ffd15e 55%,#d97706);
  background-size:220% 100%; animation:hsShimmer 2.2s linear infinite;
  box-shadow:0 0 14px rgba(255,190,46,.35);
}
.hs-shield{ width:44px;height:44px;margin:0 auto 14px;animation:hsPulse 1.8s ease-in-out infinite; }
.hs-shield svg{ width:100%;height:100%;display:block; }
.hs-mail{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  color:var(--text-secondary);font-size:12.5px;line-height:1.5;
}
.hs-mail b{ color:var(--acid);font-weight:600; }

/* Зелёный остаётся только маркером «готово» в статусной плашке */
.cstatus--green{ background:var(--bg-card)!important; border-color:rgba(34,197,94,.5)!important; }
.cstatus--green .cstatus__title{ color:#22c55e!important; }
.cstatus--green .cstatus__btn{ background:var(--acid)!important; color:#131313!important; }

/* Зелёный остаётся только маркером «готово» в статусной плашке */
.cstatus--green{ background:var(--bg-card)!important; border-color:rgba(34,197,94,.5)!important; }
.cstatus--green .cstatus__title{ color:#22c55e!important; }
.cstatus--green .cstatus__btn{ background:var(--acid)!important; color:#131313!important; }

/* Тарифы: CTA внутри карточки читается как кнопка */
.tcard__cta{
  display:block; margin-top:14px; padding:13px 18px; border-radius:100px;
  text-align:center; font-weight:700; font-size:14px;
  background:var(--acid); color:#131313;
  box-shadow:0 4px 16px rgba(255,190,46,.24);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tcard:hover .tcard__cta{ background:#ffd15e; transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(255,190,46,.34); }
.tcard--silver .tcard__cta{ background:#e8ecf5; color:#131313;
  box-shadow:0 4px 16px rgba(232,236,245,.18); }
.tcard--silver:hover .tcard__cta{ background:#fff; }
.tcard--platinum .tcard__cta{ background:linear-gradient(135deg,#d5d8e5,#aeb6cc); color:#131313; }
@media (max-width:768px){
  .tcard{ position:relative; }
  .tcard__cta{ padding:15px 18px; font-size:15px; }
}

/* ==============================================================
   Платина вместо зелёного: успех в иерархии серебро→золото→платина
   ============================================================== */
:root{
  --platinum-1:#e8ecf5; --platinum-2:#aeb6cc; --platinum-3:#f5f7fb;
  --platinum-glow:rgba(210,218,235,.28);
  --green:var(--platinum-1); --green-dark:var(--platinum-2);
}
@keyframes hsPlatinum{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
.is-success, .cstatus--green .cstatus__title,
.badge--success, .status--ok{
  background:linear-gradient(110deg,var(--platinum-2),var(--platinum-3) 35%,var(--platinum-1) 50%,var(--platinum-2) 75%);
  background-size:220% 100%;
  animation:hsPlatinum 4.5s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:700;
}
.cstatus--green{
  background:var(--bg-card)!important;
  border-color:rgba(210,218,235,.42)!important;
  box-shadow:0 0 22px rgba(210,218,235,.07);
}
.cstatus--green .cstatus__btn{
  background:linear-gradient(110deg,var(--platinum-2),var(--platinum-3) 45%,var(--platinum-1) 55%,var(--platinum-2));
  background-size:220% 100%; animation:hsPlatinum 4.5s ease-in-out infinite;
  color:#131313!important; font-weight:700;
}
/* Кнопка Excel и прочие «успешные» действия */
.btn--green, .btn--excel{
  background:linear-gradient(110deg,var(--platinum-2),var(--platinum-3) 45%,var(--platinum-1) 55%,var(--platinum-2))!important;
  background-size:220% 100%; animation:hsPlatinum 4.5s ease-in-out infinite;
  color:#131313!important;
  box-shadow:0 4px 18px var(--platinum-glow)!important;
}
.btn--green:hover, .btn--excel:hover{ filter:brightness(1.08); }
/* Статусы «active» и подобные */
.status-dot--ok, .cabinet__status--active{ color:var(--platinum-1)!important; }

/* Мобильное меню: контраст и переносы */
.topnav .btn--blue, .topnav__mobile-auth .btn,
#mobileLinks .btn, #mobileLinks a.btn{
  color:#131313 !important; font-weight:700;
}
.topnav .btn--blue i, #mobileLinks .btn i{ color:#131313 !important; }

@media (max-width:768px){
  /* Переносы: длинные слова и юридические ссылки */
  .hero__h1, .section__title, .tcard__title, .cstatus__title{
    hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; text-wrap:balance;
  }
  /* Чекбоксы соглашений: текст и ссылка в одну строку */
  .form-check, .checkbox-row{
    display:flex; align-items:flex-start; gap:8px; flex-wrap:nowrap;
  }
  .form-check label, .checkbox-row label{ display:inline; line-height:1.45; }
  .form-check a, .checkbox-row a{ white-space:normal; }
  /* Заголовки не разъезжаются */
  .hero__h1{ font-size:clamp(21px,6vw,30px); line-height:1.22; }
  .section__title{ font-size:clamp(18px,5vw,24px); line-height:1.28; }
}

/* Бейджи: блик при наведении */
@keyframes hsSheen{ 0%{left:-140%} 100%{left:140%} }
.card__badge, .news-badge, .badge, .tcard__badge, .fire-row__status{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card__badge::after, .news-badge::after, .badge::after,
.tcard__badge::after, .fire-row__status::after{
  content:''; position:absolute; top:0; bottom:0; left:-140%; width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
.card__badge:hover, .news-badge:hover, .badge:hover,
.tcard__badge:hover, .fire-row__status:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 14px rgba(255,190,46,.18);
}
.card__badge:hover::after, .news-badge:hover::after, .badge:hover::after,
.tcard__badge:hover::after, .fire-row__status:hover::after{
  opacity:1; animation:hsSheen .75s ease-out;
}
/* Карточка новости целиком — блик по бейджу внутри */
.news-card:hover .news-badge::after{ opacity:1; animation:hsSheen .75s ease-out; }

/* ── Степпер воронки ─────────────────────────────────────────── */
.funnel{ display:flex; gap:10px; margin-bottom:22px; }
.funnel__step{
  flex:1; position:relative; padding:14px 16px; border-radius:12px;
  background:var(--bg-card); border:1px solid var(--border);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.funnel__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:11.5px; font-weight:700;
  background:rgba(255,255,255,.07); color:var(--text-secondary); margin-bottom:8px;
}
.funnel__name{ font-size:13.5px; font-weight:600; color:var(--text-secondary); line-height:1.3; }
.funnel__price{ font-size:12px; color:var(--text-secondary); margin-top:3px; opacity:.75; }
/* пройден — платина */
.funnel__step--done{ border-color:rgba(210,218,235,.4); }
.funnel__step--done .funnel__num{ background:linear-gradient(135deg,#e8ecf5,#aeb6cc); color:#131313; }
.funnel__step--done .funnel__name{ color:#e8ecf5; }
/* текущий — янтарь */
.funnel__step--now{
  border-color:rgba(255,190,46,.55); background:var(--bg-deep);
  box-shadow:0 0 20px rgba(255,190,46,.08);
}
.funnel__step--now .funnel__num{ background:var(--acid); color:#131313; }
.funnel__step--now .funnel__name{ color:#fff; }
.funnel__step--now .funnel__price{ color:var(--acid); opacity:1; font-weight:600; }
/* заблокирован */
.funnel__step--lock{ opacity:.45; }
@media (max-width:768px){
  .funnel{ gap:6px; }
  .funnel__step{ padding:11px 10px; }
  .funnel__name{ font-size:11.5px; }
  .funnel__price{ font-size:10.5px; }
  .funnel__num{ width:19px; height:19px; font-size:10.5px; margin-bottom:6px; }
}

/* Меню: пункты не разрываются на две строки */
.topnav__links a, .topnav__links li{ white-space:nowrap; }
.topnav__links{ gap:clamp(12px,2vw,28px); }
@media (max-width:1100px){
  .topnav__links a{ font-size:13.5px; }
}

/* Платина: бейджи в платиновой гамме, не в янтарной */
.tcard--platinum .tcard__badge{
  background:linear-gradient(110deg,#aeb6cc,#f5f7fb 45%,#e8ecf5 55%,#aeb6cc)!important;
  background-size:220% 100%; color:#131313!important;
  box-shadow:0 3px 14px rgba(210,218,235,.22);
}
.tcard--platinum .tcard__grade{ color:#cbd5e1!important; }
.tcard--platinum .tcard__price{ color:#e8ecf5!important; }
.tcard--platinum .tcard__cta{
  background:linear-gradient(110deg,#aeb6cc,#f5f7fb 45%,#e8ecf5 55%,#aeb6cc)!important;
  background-size:220% 100%; color:#131313!important;
  box-shadow:0 4px 16px rgba(210,218,235,.2)!important;
}

/* ── Блок подготовки иска ────────────────────────────────────── */
.ls{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
     padding:24px; margin-bottom:24px; }
.ls__h{ font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; }
.ls__sub{ font-size:13px; color:var(--text-secondary); margin-bottom:18px; }
.ls__count{ display:flex; align-items:baseline; gap:10px; padding:16px 18px;
  background:var(--bg-deep); border:1px solid rgba(255,190,46,.3); border-radius:12px; margin-bottom:16px; }
.ls__days{ font-size:30px; font-weight:800; color:var(--acid); font-variant-numeric:tabular-nums; line-height:1; }
.ls__field{ margin-bottom:14px; }
.ls__label{ display:block; font-size:12.5px; color:var(--text-secondary); margin-bottom:6px; }
.ls__input{ width:100%; padding:11px 14px; background:var(--bg-deep);
  border:1px solid var(--border); border-radius:9px; color:#fff;
  font-family:var(--font-main); font-size:13.5px; }
.ls__input:focus{ outline:none; border-color:rgba(255,190,46,.55); }
.ls__note{ font-size:12px; color:var(--text-secondary); line-height:1.55; margin-top:6px; }
.ls__lock{ padding:14px 16px; background:rgba(192,57,43,.08);
  border:1px solid rgba(192,57,43,.35); border-radius:10px;
  color:#ff9b8f; font-size:12.5px; line-height:1.6; }
.ls__ok{ padding:14px 16px; background:var(--bg-deep);
  border:1px solid rgba(210,218,235,.4); border-radius:10px; font-size:12.5px; line-height:1.6; }
.ls__demo{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }

/* ── Сводка «Ваше дело» ──────────────────────────────────────── */
.deal{ background:var(--bg-card); border:1px solid var(--border);
       border-radius:14px; padding:20px 22px; margin-bottom:20px; }
.deal__h{ font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acid); font-family:var(--font-mono); margin-bottom:14px; }
.deal__row{ display:flex; align-items:flex-start; gap:12px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.05); }
.deal__row:last-of-type{ border-bottom:none; }
.deal__mark{ flex-shrink:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.deal__mark--done{ background:linear-gradient(135deg,#e8ecf5,#aeb6cc); color:#131313; }
.deal__mark--now{ background:var(--acid); color:#131313; }
.deal__mark--wait{ background:rgba(255,255,255,.07); color:var(--text-secondary); }
.deal__name{ font-size:13.5px; font-weight:600; color:#fff; }
.deal__meta{ font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.5; }
.deal__files{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.deal__file{ font-size:12.5px; color:var(--acid); text-decoration:none;
  padding:6px 12px; border:1px solid rgba(255,190,46,.3); border-radius:20px; }
.deal__file:hover{ background:rgba(255,190,46,.08); }

/* ── Сводка «Ваше дело» ──────────────────────────────────────── */
.deal{ background:var(--bg-card); border:1px solid var(--border);
       border-radius:14px; padding:20px 22px; margin-bottom:20px; }
.deal__h{ font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acid); font-family:var(--font-mono); margin-bottom:14px; }
.deal__row{ display:flex; align-items:flex-start; gap:12px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.05); }
.deal__row:last-of-type{ border-bottom:none; }
.deal__mark{ flex-shrink:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.deal__mark--done{ background:linear-gradient(135deg,#e8ecf5,#aeb6cc); color:#131313; }
.deal__mark--now{ background:var(--acid); color:#131313; }
.deal__mark--wait{ background:rgba(255,255,255,.07); color:var(--text-secondary); }
.deal__name{ font-size:13.5px; font-weight:600; color:#fff; }
.deal__meta{ font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.5; }
.deal__files{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.deal__file{ font-size:12.5px; color:var(--acid); text-decoration:none;
  padding:6px 12px; border:1px solid rgba(255,190,46,.3); border-radius:20px; }
.deal__file:hover{ background:rgba(255,190,46,.08); }

/* Инструкция «Мой Арбитр» */
.arb{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.arb summary{ cursor:pointer; list-style:none; color:var(--acid); font-size:13.5px; font-weight:700; padding:10px 0; }
.arb summary::-webkit-details-marker{ display:none; }
.arb summary::before{ content:'▸ '; }
.arb[open] summary::before{ content:'▾ '; }
.arb__step{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.arb__step:last-of-type{ border-bottom:none; }
.arb__n{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--acid);
  color:#131313; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.arb__t{ font-size:13px; font-weight:600; color:#fff; margin-bottom:3px; }
.arb__d{ font-size:12.5px; color:var(--text-secondary); line-height:1.6; }
.arb__warn{ margin-top:14px; padding:14px 16px; background:rgba(192,57,43,.07);
  border:1px solid rgba(192,57,43,.3); border-radius:10px; font-size:12.5px; line-height:1.6; color:var(--text-secondary); }
.arb__warn b{ color:#ff9b8f; }

/* Чекбоксы соглашений: ровные строки без разрывов */
.form-check, .checkbox-row, .auth-check, .register-check{
  display:flex!important; align-items:flex-start; gap:9px; margin-bottom:12px;
}
.form-check input[type=checkbox], .checkbox-row input[type=checkbox],
.auth-check input[type=checkbox], .register-check input[type=checkbox]{
  margin:2px 0 0!important; flex-shrink:0; width:17px; height:17px; accent-color:#ffbe2e;
}
.form-check label, .checkbox-row label, .auth-check label, .register-check label{
  font-size:13px; line-height:1.5; display:inline; flex:1;
}

/* Синяя схема плашки — в янтарь */
.cstatus--blue{ background:var(--bg-card)!important; border-color:rgba(255,190,46,.45)!important; }
.cstatus--blue .cstatus__title{ color:var(--acid)!important; }
.cstatus--blue .cstatus__text{ color:var(--text-secondary)!important; }
.cstatus--blue .cstatus__btn{ background:var(--acid)!important; color:#131313!important; }

/* ========== ЛИД-МАГНИТ /free ========== */
.lm{
  min-height:calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center;
  padding:48px 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255,190,46,.10), transparent 70%),
    var(--bg-deepest);
}
.lm__wrap{ width:100%; max-width:620px; text-align:center; }

.lm__badge{
  display:inline-block; margin-bottom:22px; padding:6px 14px;
  border:1px solid rgba(255,190,46,.35); border-radius:99px;
  background:rgba(255,190,46,.08);
  color:var(--acid); font-size:12px; font-weight:600; letter-spacing:.03em;
}
.lm__title{
  font-family:'Bitter',Georgia,serif;
  font-size:clamp(27px,5vw,42px); line-height:1.2; font-weight:700;
  color:#fff; margin:0 0 18px;
}
.lm__sub{
  font-size:15px; line-height:1.65; color:var(--text-secondary);
  margin:0 auto 30px; max-width:530px;
}
.lm__form{
  background:var(--bg-deep); border:1px solid var(--border);
  border-radius:16px; padding:24px; text-align:left;
}
.lm__input{
  width:100%; box-sizing:border-box; padding:14px 16px;
  background:var(--bg-deepest); border:1px solid var(--border);
  border-radius:10px; color:#fff; font-size:15px; font-family:inherit;
  transition:border-color .18s;
}
.lm__input::placeholder{ color:#6b7190; }
.lm__input:focus{ outline:none; border-color:var(--acid); }
.lm__btn{
  width:100%; min-height:52px; margin-top:4px;
  background:linear-gradient(135deg,var(--acid),var(--acid-dim,#e0a020));
  color:#131313; border:none; border-radius:10px;
  font-size:15.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:transform .12s, box-shadow .18s;
}
.lm__btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,190,46,.22); }
.lm__btn:active{ transform:translateY(0); }

.lm__agree{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  font-size:12.5px; line-height:1.5; color:var(--text-secondary); cursor:pointer;
}
.lm__agree input{ margin-top:2px; accent-color:var(--acid); flex-shrink:0; }
.lm__agree a{ color:var(--acid); text-decoration:none; }
.lm__agree a:hover{ text-decoration:underline; }

.lm__note{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border-subtle);
  font-size:12px; line-height:1.55; color:#6b7190;
}
.lm__err{
  margin-top:16px; padding:12px 16px; border-radius:10px;
  background:#2a1215; border:1px solid #c0392b; color:#ffb4b4; font-size:13.5px;
}

.lm__facts{
  display:flex; justify-content:center; gap:14px; margin-top:32px; flex-wrap:wrap;
}
.lm__fact{
  flex:1 1 150px; max-width:190px; padding:16px 12px;
  background:var(--bg-deep); border:1px solid var(--border-subtle); border-radius:12px;
}
.lm__fact b{
  display:block; font-family:'Bitter',Georgia,serif;
  font-size:24px; color:var(--acid); margin-bottom:5px;
}
.lm__fact span{ font-size:11.5px; line-height:1.45; color:var(--text-secondary); }

@media (max-width:600px){
  .lm{ padding:32px 16px; }
  .lm__form{ padding:20px 18px; }
  .lm__facts{ gap:10px; }
  .lm__fact{ flex:1 1 100%; max-width:none; display:flex; align-items:center; gap:12px;
             text-align:left; padding:12px 16px; }
  .lm__fact b{ margin:0; font-size:20px; min-width:56px; }
}

/* Карусель шагов: входящий блок всегда поверх уходящего, иначе
   на стыке переходов два текста читаются один сквозь другой. */
.hero__steps .hero__step{ z-index:1; }
.hero__steps .hero__step.is-leaving{ z-index:1; }
.hero__steps .hero__step.is-active{ z-index:2; }
.hero__steps .hero__step.is-leaving{ z-index:1; }
.hero__steps .hero__step.is-active{ z-index:2; }