/* ============================================================
   Тема 3 — Bento + кислотный лайм
   Белое поле, чёрная типографика огромного кегля,
   лаймовый акцент, жёсткие рамки без размытий.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #ffffff;
  --bg-2: #f4f4f2;
  --bg-3: #ebebe7;
  --line: #e2e2dd;

  --text: #111111;
  --muted: #63635d;

  --accent: #d7ff3e;
  --accent-2: #c8f52a;
  --accent-3: #4f46e5;
  --accent-soft: rgba(215, 255, 62, .3);
  --on-accent: #111111;

  --ok: #16a34a;
  --danger: #dc2626;

  --card-bg: #ffffff;
  --card-border: #e2e2dd;
  --card-hover-border: #111111;

  --shadow-card: none;
  --shadow-lift: 6px 6px 0 #111111;
  --glow: none;

  --header-bg: rgba(255, 255, 255, .9);
  --hero-glow: radial-gradient(closest-side, rgba(215,255,62,.5), transparent 70%);
  --cta-bg: var(--accent);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --h1-size: clamp(2.4rem, 6.4vw, 4.6rem);
  --h1-weight: 800;
  --h1-spacing: -0.04em;
  --radius: 20px;
  --radius-lg: 28px;
}

/* Акцент — заливка-маркер под словами, а не цветной текст */
.hero h1 span {
  color: var(--text);
  background: var(--accent);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .12em; border-radius: 6px;
}

.eyebrow {
  color: var(--text); background: var(--accent);
  padding: 4px 12px; border-radius: var(--radius-pill);
}

/* Карточка «уезжает» на жёсткую тень — фирменный приём стиля */
.card:hover, .faq details:hover { border-color: #111; }
.card:hover { transform: translate(-4px, -4px); }

.btn--primary { background: var(--accent); color: #111; border-color: #111; }
.btn--primary:hover { background: var(--accent-2); box-shadow: 5px 5px 0 #111; }
.btn--ghost { border-color: #111; }
.btn--ghost:hover { background: #111; color: #fff; border-color: #111; }

.logo__mark { background: var(--accent); color: #111; border: 1px solid #111; }
.logo span { color: var(--text); }

.stat__num { color: var(--text); }
.card__icon { background: var(--accent); color: #111; border-radius: 14px; }
.step::before { background: var(--accent); color: #111; }
.step:hover::before { background: #111; color: var(--accent); }

.price-card--featured { border-color: #111; border-width: 2px; }
.price-card li::before, .check-list li::before { color: var(--accent-3); }
.card__meta { color: var(--accent-3); }
.crumbs a:hover, .footer a:hover, .nav a:hover { color: var(--accent-3); }
.nav a::after { background: var(--accent-3); }

.cta-band { border: 2px solid #111; }
.cta-band h2, .cta-band .lead { color: #111; }
.cta-band .btn--primary { background: #111; color: var(--accent); border-color: #111; }
.cta-band .btn--ghost { border-color: #111; color: #111; background: transparent; }
/* Без этого правила общий :hover заливает фон чёрным, а цвет текста
   остаётся #111 из строки выше — кнопка становится нечитаемой */
.cta-band .btn--ghost:hover { background: #111; color: var(--accent); border-color: #111; }

.compare { border: 2px solid #111; box-shadow: 8px 8px 0 var(--accent); animation: none; }
.compare__body { background: #111; }
.compare__tab.is-active { color: #111; border-bottom-color: #111; background: var(--accent); }
.compare__note { background: var(--bg-2); }
.compare__text mark { background: var(--accent); }
.compare__label--before { background: #ffe0e0; color: #b91c1c; }
.compare__label--after { background: #dcfce7; color: #15803d; }

.field input, .field textarea, .field select { background: var(--bg-2); border-color: #d6d6d0; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #111; box-shadow: 3px 3px 0 var(--accent); }

th { background: #111; color: #fff; }
tbody tr:hover { background: var(--accent-soft); }
.section--alt { background: var(--bg-2); }
.footer { background: #111; color: #f4f4f2; border-top: 0; }
.footer .logo, .footer .footer__bottom { color: #f4f4f2; }
.footer a { color: #a3a39c; }
.footer a:hover { color: var(--accent); }
.footer h4 { color: #7c7c75; }
.footer, .footer__bottom, .footer__grid { border-color: #2a2a28; }