/* Queue SEO pages — shared styles (поверх Tailwind CDN) */

:root {
  --q-bg: #ffffff;
  --q-fg: #0a0a0a;
  --q-muted: #6b7280;
  --q-border: #e5e7eb;
  --q-card: #ffffff;
  --q-soft: #f9fafb;
  --q-accent: #10b981;
  --q-blue: #2563eb;
  --q-red: #fee2e2;
  --q-red-text: #b91c1c;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--q-fg);
  background: var(--q-bg);
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dot grid pattern для секций */
.dot-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* Corner brackets — техническая засечка как на лендинге */
.corner-brackets {
  position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #d1d5db;
}
.corner-brackets::before {
  top: 6px;
  left: 6px;
  border-left: 1px solid;
  border-top: 1px solid;
}
.corner-brackets::after {
  bottom: 6px;
  right: 6px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

/* FAQ details/summary стилизация */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary .faq-plus {
  transform: rotate(45deg);
}
.faq-plus {
  transition: transform 0.2s ease;
}

/* Pricing card — featured outline */
.featured-card {
  border: 2px solid var(--q-blue);
  position: relative;
}
.featured-card::before {
  content: 'Чаще всего выбирают';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--q-blue);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Sticky CTA на мобиле */
.sticky-cta {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 50;
  background: #0a0a0a;
  color: white;
  text-align: center;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
  text-decoration: none;
  display: block;
}
@media (min-width: 640px) {
  .sticky-cta { display: none; }
}

/* Smooth reveal анимация при скролле (без JS — через CSS) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: fade-up 0.5s ease-out both;
}

/* Mockup card halo */
.mockup-halo {
  position: relative;
}
.mockup-halo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(243,244,246,1), transparent);
  filter: blur(40px);
  border-radius: 24px;
  z-index: -1;
}

/* Tables */
.cmp-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.cmp-table th {
  background: #f9fafb;
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
}
.cmp-table td {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
}
.cmp-table .q-col { color: var(--q-blue); font-weight: 500; }
.cmp-table .weak { color: #9ca3af; }

/* Print-friendly */
@media print {
  .no-print, .sticky-cta { display: none !important; }
}

/* ============================================================
   РЕДИЗАЙН 2026-06-08: анимации, скрин-блоки, кнопки, FREE
   ============================================================ */

/* Scroll-reveal всех секций — чистый CSS (animation-timeline), без JS.
   В браузерах без поддержки просто показывается статично (graceful). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    section {
      animation: fade-up 0.7s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

/* Скрин-блок: рамка «браузер» с тенью */
.shot {
  margin: 0 auto;
  max-width: 940px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--q-border);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.30), 0 8px 22px -10px rgba(0,0,0,0.12);
  background: #fff;
}
.shot img { display: block; width: 100%; height: auto; }
.shot-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--q-border); background: #f9fafb;
}
.shot-bar span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.shot-bar span:nth-child(1){ background:#ff5f57 }
.shot-bar span:nth-child(2){ background:#febc2e }
.shot-bar span:nth-child(3){ background:#28c840 }

/* CTA-кнопки (ссылки на регистрацию) — лёгкий lift при наведении */
a[href*="/register"] { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease; }
a[href*="/register"]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }

/* FREE-баннер (вставляется перед прайсом) */
.free-banner {
  margin: 0 auto; max-width: 940px;
  background: linear-gradient(135deg, #0a0a0a, #1f2937);
  color: #fff; border-radius: 20px; padding: 26px 30px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.free-banner .fb-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.free-banner .fb-sub { font-size: 14px; opacity: .85; margin-top: 6px; max-width: 560px; line-height: 1.5; }
.free-banner a {
  background: #fff; color: #0a0a0a; padding: 13px 24px; border-radius: 12px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.free-banner a:hover { opacity: .9; }