/* ═══════════════════════════════════════════════════════
   HOME (INDEX) — страничные стили
   Подключается ПОСЛЕ css/common.css
   ═══════════════════════════════════════════════════════ */

/* ── Акцент страницы: зелёный (по умолчанию совпадает с common) ── */
/* Переменные не нужны — common.css уже зелёный */

/* ══════════════════ HERO ══════════════════ */
.hero {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 88px 32px 68px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: .62rem; letter-spacing: .12em;
  color: var(--accent);
  border: 1px solid rgba(0,255,136,.25);
  background: var(--accent-dim);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  animation: fadeUp .6s ease both;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  margin-bottom: 22px;
  animation: fadeUp .6s .08s ease both;
}
.hero h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 40px rgba(0,255,136,.28) }
.hero-sub {
  font-size: 1.05rem; color: var(--muted); line-height: 1.68;
  max-width: 520px; margin-bottom: 42px;
  animation: fadeUp .6s .16s ease both;
}
.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  animation: fadeUp .6s .24s ease both;
}
.btn-p {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #000;
  font-family: 'Space Mono', monospace;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  padding: 13px 26px; border-radius: 10px;
  text-decoration: none; transition: all .2s;
  box-shadow: 0 0 28px rgba(0,255,136,.22);
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(0,255,136,.38) }
.btn-s {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: .76rem; letter-spacing: .06em;
  padding: 13px 26px; border-radius: 10px;
  text-decoration: none; border: 1px solid var(--border2);
  transition: all .2s;
}
.btn-s:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px) }

/* ══════════════════ STATS ══════════════════ */
.stats {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 0 32px 64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  animation: fadeUp .6s .32s ease both;
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 26px;
}
.stat-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.04em; line-height: 1 }
.stat-l { font-family: 'Space Mono', monospace; font-size: .62rem; color: var(--muted); letter-spacing: .08em; margin-top: 5px }

/* ══════════════════ SECTIONS ══════════════════ */
.section { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px 64px }
.sec-head { margin-bottom: 32px }
.sec-lbl { font-family: 'Space Mono', monospace; font-size: .6rem; letter-spacing: .14em; margin-bottom: 8px }
.c-g { color: var(--accent) } .c-p { color: #a78bfa } .c-b { color: var(--blue) }
.sec-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15 }
.sec-title em { font-style: normal; color: var(--accent) }
.sec-title em.p { color: #a78bfa } .sec-title em.b { color: var(--blue) }
.sec-sub { font-size: .87rem; color: var(--muted); line-height: 1.62; margin-top: 8px; max-width: 480px }

/* ══════════════════ TOOL CARDS ══════════════════ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 13px;
  transition: all .2s; position: relative; overflow: hidden;
}
.card::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.4) }
.card:hover::after { opacity: 1 }
/* Green cards */
.card.g::after { background: radial-gradient(circle at 85% 15%, rgba(0,255,136,.05), transparent 55%) }
.card.g:hover { border-color: rgba(0,255,136,.35) }
.card.g .ci { background: var(--accent-dim) }
.card.g .ct { border-color: rgba(0,255,136,.22); color: var(--accent); background: var(--accent-dim) }
.card.g .ca { color: var(--accent) }
/* Purple cards */
.card.p::after { background: radial-gradient(circle at 85% 15%, rgba(124,58,237,.07), transparent 55%) }
.card.p:hover { border-color: rgba(124,58,237,.42) }
.card.p .ci { background: var(--purple-dim); color: #a78bfa }
.card.p .ct { border-color: rgba(124,58,237,.22); color: #a78bfa; background: var(--purple-dim) }
.card.p .ca { color: #a78bfa }
/* Blue cards */
.card.b::after { background: radial-gradient(circle at 85% 15%, rgba(56,189,248,.06), transparent 55%) }
.card.b:hover { border-color: rgba(56,189,248,.38) }
.card.b .ci { background: var(--blue-dim); color: var(--blue) }
.card.b .ct { border-color: rgba(56,189,248,.22); color: var(--blue); background: var(--blue-dim) }
.card.b .ca { color: var(--blue) }
/* Orange cards */
.card.o::after { background: radial-gradient(circle at 85% 15%, rgba(255,170,0,.05), transparent 55%) }
.card.o:hover { border-color: rgba(255,170,0,.35) }
.card.o .ci { background: var(--gold-dim); color: var(--gold) }
.card.o .ct { border-color: rgba(255,170,0,.22); color: var(--gold); background: var(--gold-dim) }
.card.o .ca { color: var(--gold) }

/* Card sub-elements */
.card-top { display: flex; align-items: flex-start; justify-content: space-between }
.ci { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0 }
.ca { font-size: 1rem; color: var(--muted); transition: transform .2s; margin-top: 4px }
.card:hover .ca { transform: translate(3px, -3px) }
.cn { font-size: 1rem; font-weight: 700; letter-spacing: -.02em }
.cd { font-size: .81rem; color: var(--muted); line-height: 1.55 }
.ct { display: inline-flex; align-items: center; font-family: 'Space Mono', monospace; font-size: .57rem; letter-spacing: .1em; padding: 4px 10px; border-radius: 100px; border: 1px solid; width: fit-content }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
}
.step-n { font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700; color: var(--border2); line-height: 1; margin-bottom: 14px }
.step-t { font-size: .98rem; font-weight: 700; margin-bottom: 7px }
.step-d { font-size: .82rem; color: var(--muted); line-height: 1.6 }

/* Barcode icon color in card */
.card.g .barcode-icon svg { color: var(--accent) }

/* ══════════════════ FAQ OVERRIDES (главная крупнее) ══════════════════ */
.faq-wrap {
  position: relative; z-index: 1;
  max-width: 1200px;
  padding: 0 32px 80px;
}
.faq-wrap h2 { font-size: 1.75rem; margin-bottom: 26px }
.faq-wrap h2 em { color: var(--accent) }
.faq-q { padding: 15px 20px; font-size: .91rem }
.faq-ai { padding: 0 20px 15px }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 900px) {
  .hero, .section, .stats, .faq-wrap { padding-left: 20px; padding-right: 20px }
  .steps { grid-template-columns: 1fr }
  .stats { grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr }
  .grid { grid-template-columns: 1fr }
  .hero-cta { flex-direction: column; align-items: center }
}