/* ═══════════════════════════════════════════════════════════════
   styles-home-v2.css — SA Homepage v2.0
   Анимации, утилиты и responsive для редизайна главной
   ═══════════════════════════════════════════════════════════════ */

/* ─── Animations ─── */
@keyframes eqPulse {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes glow {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.45; }
}
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes dashShift {
  to { stroke-dashoffset: -40; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, -10px); }
  100% { transform: translate(0, 0); }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Animation utility classes ─── */
.eq-bar       { transform-origin: bottom center; animation: eqPulse 1100ms ease-in-out infinite; }
.cover-spin   { animation: spin 24s linear infinite; }
.floaty       { animation: float 4.5s ease-in-out infinite; }
.ambient-glow { animation: glow 5s ease-in-out infinite; }
.blueprint-line { stroke-dasharray: 1000; animation: drawLine 3.5s ease-out forwards; }
.blueprint-dash { stroke-dasharray: 6 6; animation: dashShift 2.4s linear infinite; }
.pulse-dot    { animation: pulse 2.8s ease-in-out infinite; transform-origin: center; }
.drift        { animation: drift 9s ease-in-out infinite; }
.orbit        { animation: orbit 14s linear infinite; }
.shimmer-text {
  background: linear-gradient(90deg, currentColor 30%, rgba(255,255,255,0.6) 50%, currentColor 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
.reveal { opacity: 0; animation: fadeUp 900ms cubic-bezier(.2,.7,.2,1) forwards; }

/* ─── Interactive transitions ─── */
.platform-chip {
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background 220ms ease;
}
.platform-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -12px rgba(0,52,127,0.18);
}
.lift-card {
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease, border-color 320ms ease;
}
.lift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -16px rgba(0,52,127,0.18);
}

/* ─── Tokens as CSS vars (scoped to page-home) ─── */
.page-home {
  --hc-primary: #00347f;
  --hc-primary-hi: #1e4b9e;
  --hc-primary-deep: #001b48;
  --hc-accent: #6d28d9;
  --hc-accent-hi: #5b21b6;
  --hc-accent-soft: #f5f3ff;
  --hc-accent-border: #ddd6fe;
  --hc-bg: #f7f6fb;
  --hc-surface: #ffffff;
  --hc-surface-low: #f2f3ff;
  --hc-surface-deep: #ecedf6;
  --hc-ink: #131b2e;
  --hc-ink-soft: #434651;
  --hc-mute: #747782;
  --hc-outline: #c3c6d3;
  --hc-outline-soft: #e6e8f4;
  --hc-success: #27ae60;
  --hc-error: #c0392b;
}

/* ─── Section shell ─── */
.hp-shell { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.hp-section { padding: 120px 0; }

/* ─── Component: Eyebrow ─── */
.hp-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.hp-eyebrow__num {
  font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.hp-eyebrow__line { width: 56px; height: 1px; }
.hp-eyebrow__label {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* ─── Component: Tag ─── */
.hp-tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hp-tag--violet { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
.hp-tag--navy   { background: #f2f3ff; color: #00347f; border: 1px solid #dadffb; }
.hp-tag--mute   { background: #ffffff; color: #434651; border: 1px solid #e6e8f4; }

/* ─── Component: Buttons ─── */
.hp-btn-primary {
  background: #00347f; color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 16px 26px; border-radius: 8px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer;
  transition: transform 120ms ease;
}
.hp-btn-primary:hover { transform: scale(1.02); }
.hp-btn-primary__arrow {
  width: 22px; height: 22px; border-radius: 999px;
  background: #fff; color: #00347f;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.hp-btn-primary--dark { background: #fff; color: #00347f; }
.hp-btn-primary--dark .hp-btn-primary__arrow { background: #00347f; color: #fff; }

.hp-btn-ghost {
  background: transparent; color: #131b2e;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 16px 24px; border-radius: 8px;
  border: 1.5px solid #c3c6d3;
  letter-spacing: -0.005em;
  cursor: pointer; transition: border-color 180ms ease;
}
.hp-btn-ghost:hover { border-color: #00347f; }

.hp-btn-accent {
  background: #6d28d9; color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 16px 26px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer;
  transition: transform 120ms ease;
}
.hp-btn-accent:hover { transform: scale(1.02); }

/* ─── FAQ Accordion ─── */
.hp-faq-item { border-radius: 14px; transition: all 200ms ease; }
.hp-faq-item__answer {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 300ms ease, opacity 200ms ease, padding 200ms ease;
  padding: 0 24px;
}
.hp-faq-item.faq-open .hp-faq-item__answer {
  max-height: 400px; opacity: 1; padding: 0 24px 24px;
}
.hp-faq-item__toggle {
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
  border: 1px solid #c3c6d3; background: #fff;
}
.hp-faq-item.faq-open .hp-faq-item__toggle {
  background: #6d28d9; border-color: #6d28d9;
}
.hp-faq-item__toggle svg { transition: transform 200ms ease; }
.hp-faq-item.faq-open .hp-faq-item__toggle svg { transform: rotate(45deg); }

/* ─── Responsive ─── */
@media (max-width: 1280px) {
  .hp-shell { padding: 0 32px; }
  .hp-section { padding: 80px 0; }
}
@media (max-width: 1024px) {
  .hp-shell { padding: 0 24px; }
  .hp-section { padding: 64px 0; }

  .hp-hero-grid { grid-template-columns: 1fr !important; }
  .hp-hero-right { display: none; }
  .hp-hero h1 { font-size: 52px !important; }
  .hp-hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  .hp-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-trust-grid > div { border-right: none !important; }
  .hp-trust-grid > div:nth-child(odd) { border-right: 1px solid #e6e8f4 !important; }
  .hp-trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid #e6e8f4 !important; }

  .hp-solution-grid { grid-template-columns: 1fr !important; }
  .hp-industries-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-industries-grid > div:first-child { grid-column: span 2 !important; }
  .hp-mistakes-grid { grid-template-columns: 1fr !important; }
  .hp-audience-grid { grid-template-columns: 1fr !important; }
  .hp-process-grid { grid-template-columns: 1fr !important; }
  .hp-pricing-outer { grid-template-columns: 1fr !important; }
  .hp-guarantee-top { grid-template-columns: 1fr !important; }
  .hp-guarantee-cards { grid-template-columns: 1fr !important; }
  .hp-cases-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-podcast-grid { grid-template-columns: 1fr !important; }
  .hp-tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-articles-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-about-grid { grid-template-columns: 1fr !important; }
  .hp-reviews-grid { grid-template-columns: 1fr !important; }
  .hp-faq-grid { grid-template-columns: 1fr !important; }
  .hp-cta-inner { grid-template-columns: 1fr !important; padding: 48px 32px !important; }

  .hp-section h2 { font-size: 44px !important; }
  .hp-guarantee-top h2 { font-size: 56px !important; }
}
@media (max-width: 768px) {
  .hp-hero h1 { font-size: 40px !important; }
  .hp-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-hero-kicker { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }

  .hp-trust-grid { grid-template-columns: 1fr !important; }
  .hp-trust-grid > div { border-right: none !important; border-bottom: 1px solid #e6e8f4 !important; }
  .hp-trust-grid > div:last-child { border-bottom: none !important; }

  .hp-industries-grid { grid-template-columns: 1fr !important; }
  .hp-industries-grid > div:first-child { grid-column: span 1 !important; }
  .hp-cases-grid { grid-template-columns: 1fr !important; }
  .hp-tools-grid { grid-template-columns: 1fr !important; }
  .hp-articles-grid { grid-template-columns: 1fr !important; }
  .hp-pricing-compare { grid-template-columns: 1fr !important; }

  .hp-section h2 { font-size: 36px !important; }
  .hp-guarantee-top h2 { font-size: 40px !important; }
  .hp-cta-inner h2 { font-size: 36px !important; }

  .hp-hero-cta { flex-direction: column; }
  .hp-hero-cta > * { width: 100%; text-align: center; justify-content: center; }

  .hp-platform-bar { flex-direction: column; align-items: flex-start !important; }
}
@media (max-width: 480px) {
  .hp-shell { padding: 0 16px; }
  .hp-section { padding: 48px 0; }
  .hp-hero h1 { font-size: 32px !important; }
  .hp-hero-stats > div:nth-child(n) { font-size: 24px; }
  .hp-section h2 { font-size: 28px !important; }
}