/* ============================================================
   redesign.css — Modern visual overhaul (Terminal / Linear / Vercel)
   Loaded AFTER styles.css + animations.css
   Only overrides visual appearance (colors, shadows, borders, bg).
   Does NOT change layout, spacing, grid, or typography sizes.
   ============================================================ */

/* ------------------------------------------------------------------
   1. LIGHT SECTIONS — softer background, less jarring contrast
   ------------------------------------------------------------------ */
.section-light {
  background: #f4f7fb !important;
}

.section {
  background: #f6f8fc !important;
}

/* Keep truly dark sections dark */
.section.results-section {
  background: var(--bg-dark) !important;
}

.section.cta-section {
  background: var(--bg-dark) !important;
}

/* Report tour section keeps its dark-ish treatment */
.report-tour-section {
  background: #0d1017 !important;
  color: var(--text-light) !important;
}

/* Section dividers — softer */
.section + .section::after {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.05) 20%, rgba(15, 23, 42, 0.05) 80%, transparent) !important;
}

/* ------------------------------------------------------------------
   2. CARDS IN LIGHT SECTIONS — elevated, clean, no top gradient bar
   ------------------------------------------------------------------ */
.section-light .layer-card,
.section-light .pricing-card,
.section-light .testimonial-card,
.section-light .process-card,
.section-light .feature-card,
.section-light .planerka-step,
.section-light .pricing-logic-card,
.section-light .report-tour-label,
.section-light .fit-card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

/* Cards in regular .section (also light bg) */
.section:not(.results-section):not(.cta-section) .layer-card,
.section:not(.results-section):not(.cta-section) .chart-card,
.section:not(.results-section):not(.cta-section) .product-card,
.section:not(.results-section):not(.cta-section) .product-compare-card,
.section:not(.results-section):not(.cta-section) .product-proof-card,
.section:not(.results-section):not(.cta-section) .feature-card,
.section:not(.results-section):not(.cta-section) .process-card,
.section:not(.results-section):not(.cta-section) .manager-card,
.section:not(.results-section):not(.cta-section) .planerka-step {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

/* Integration badges in regular .section (light bg) */
.section:not(.results-section):not(.cta-section) .integration-badge {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.05) !important;
}

/* ------------------------------------------------------------------
   3. REMOVE GRADIENT TOP BARS on light-section cards — cleaner look
   ------------------------------------------------------------------ */
.section-light .layer-card::before,
.section-light .pricing-card::before,
.section-light .feature-card::before,
.section-light .process-card::before,
.section-light .pricing-logic-card::before,
.section-light .planerka-step::before {
  display: none !important;
}

.section:not(.results-section):not(.cta-section) .layer-card::before,
.section:not(.results-section):not(.cta-section) .chart-card::before,
.section:not(.results-section):not(.cta-section) .product-card::before,
.section:not(.results-section):not(.cta-section) .product-compare-card::before,
.section:not(.results-section):not(.cta-section) .product-proof-card::before,
.section:not(.results-section):not(.cta-section) .feature-card::before,
.section:not(.results-section):not(.cta-section) .manager-card::before,
.section:not(.results-section):not(.cta-section) .pricing-card::before {
  display: none !important;
}

/* ------------------------------------------------------------------
   4. HOVER STATES — light section cards
   ------------------------------------------------------------------ */
.section-light .layer-card:hover,
.section-light .pricing-card:hover,
.section-light .feature-card:hover,
.section-light .process-card:hover,
.section-light .testimonial-card:hover,
.section-light .planerka-step:hover,
.section-light .report-tour-label:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px);
}

.section:not(.results-section):not(.cta-section) .layer-card:hover,
.section:not(.results-section):not(.cta-section) .chart-card:hover,
.section:not(.results-section):not(.cta-section) .product-card:hover,
.section:not(.results-section):not(.cta-section) .product-compare-card:hover,
.section:not(.results-section):not(.cta-section) .feature-card:hover,
.section:not(.results-section):not(.cta-section) .process-card:hover,
.section:not(.results-section):not(.cta-section) .manager-card:hover,
.section:not(.results-section):not(.cta-section) .integration-badge:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px);
}

/* ------------------------------------------------------------------
   5. PRICING CARDS — premium feel
   ------------------------------------------------------------------ */
.pricing-card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06) !important;
}

.pricing-card--featured {
  border: 1px solid rgba(47, 102, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(47, 102, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.08) !important;
  background: linear-gradient(160deg, #f8faff 0%, #fff 70%) !important;
}

.pricing-card--featured:hover {
  box-shadow: 0 8px 24px rgba(47, 102, 255, 0.12), 0 20px 56px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(47, 102, 255, 0.3) !important;
}

.pricing-card:hover {
  border-color: rgba(47, 102, 255, 0.15) !important;
}

/* ------------------------------------------------------------------
   6. TESTIMONIAL CARDS — remove left border accent, cleaner look
   ------------------------------------------------------------------ */
.testimonial-card {
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.testimonial-card::before {
  display: none !important;
}

.testimonial-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.07) !important;
}

/* ------------------------------------------------------------------
   7. RESULT CARDS (counters on dark bg) — glassmorphism
   ------------------------------------------------------------------ */
.result-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.result-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ------------------------------------------------------------------
   8. PROCESS CARDS — clean left border on hover
   ------------------------------------------------------------------ */
.process-card {
  border-left-color: transparent !important;
}

.process-card:hover {
  border-left-color: var(--primary) !important;
}

/* ------------------------------------------------------------------
   9. PRODUCT COMPARE CARDS — cleaner
   ------------------------------------------------------------------ */
.product-compare-card--primary {
  border: 1px solid rgba(47, 102, 255, 0.15) !important;
  background: linear-gradient(160deg, #f5f8ff 0%, #fff 70%) !important;
  box-shadow: 0 4px 16px rgba(47, 102, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.06) !important;
}

.product-compare-card--weak {
  background: #fafbfc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ------------------------------------------------------------------
   10. INLINE CTA BLOCKS — subtle treatment
   ------------------------------------------------------------------ */
.inline-cta {
  background: #f0f4fa !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------------------------------
   11. FAQ — subtler borders
   ------------------------------------------------------------------ */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ------------------------------------------------------------------
   12. REPORT TOUR SECTION — dark treatment with glassmorphic labels
   ------------------------------------------------------------------ */
.report-tour-section .section-head h2 {
  color: #fff !important;
}

.report-tour-section .section-head p {
  color: rgba(248, 250, 252, 0.68) !important;
}

.report-tour-section .eyebrow {
  color: var(--accent) !important;
}

.report-tour-section .eyebrow::before {
  background: linear-gradient(90deg, var(--accent), rgba(62, 162, 255, 0.3)) !important;
}

.report-tour-section .report-tour-label {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.report-tour-section .report-tour-label:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.report-tour-section .report-tour-label-content strong {
  color: #fff !important;
}

.report-tour-section .report-tour-label-content span {
  color: rgba(248, 250, 252, 0.7) !important;
}

/* ------------------------------------------------------------------
   13. CTA SECTION (demo form area) — premium dark treatment
   ------------------------------------------------------------------ */
.demo-form-layout {
  background: linear-gradient(135deg, rgba(13, 17, 26, 0.98), rgba(18, 25, 48, 0.98)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------------
   14. FOOTER — darker, subtler pattern
   ------------------------------------------------------------------ */
.footer-bg-pattern {
  opacity: 0.25 !important;
}

.footer::before {
  opacity: 0.6;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(47, 102, 255, 0.5) 20%,
    rgba(62, 162, 255, 0.3) 50%,
    rgba(99, 102, 241, 0.4) 80%,
    transparent 100%
  ) !important;
  height: 1px !important;
}

/* ------------------------------------------------------------------
   15. TYPOGRAPHY TWEAKS — hierarchy through opacity, not size
   ------------------------------------------------------------------ */

/* Eyebrows — slightly more letter-spacing, dimmer */
.eyebrow {
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
}

/* Dark section headings — pure white */
.results-section .section-head h2,
.cta-section .demo-form-copy h2,
.report-tour-section .section-head h2 {
  color: #fff !important;
}

/* Dark section paragraph text — balanced opacity */
.results-section .section-head p,
.report-tour-section .section-head p {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Light section text — slightly deeper for contrast */
.section-light .section-head p,
.section:not(.results-section):not(.cta-section) .section-head p {
  color: #64748b !important;
}

/* ------------------------------------------------------------------
   16. GRADIENT ACCENTS — thin 1px lines instead of thick 3px bars
   ------------------------------------------------------------------ */

/* This applies globally first, then dark/light sections override */
.layer-card::before,
.chart-card::before,
.product-card::before,
.product-compare-card::before,
.product-proof-card::before,
.feature-card::before,
.manager-card::before,
.pricing-card::before {
  height: 1px !important;
  opacity: 0.4 !important;
}

/* ------------------------------------------------------------------
   17. TRUST BAR — refined
   ------------------------------------------------------------------ */
.trust-bar::after {
  opacity: 0.5 !important;
}

.trust-label {
  color: rgba(248, 250, 252, 0.48) !important;
  letter-spacing: 0.12em !important;
}

.trust-vertical {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.trust-vertical:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ------------------------------------------------------------------
   18. INTEGRATION BADGES on dark bg (if ever used)
   ------------------------------------------------------------------ */
.results-section .integration-badge,
.cta-section .integration-badge {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ------------------------------------------------------------------
   19. PRICING TESTIMONIAL — cleaner
   ------------------------------------------------------------------ */
.pricing-testimonial {
  background: rgba(47, 102, 255, 0.03) !important;
  border: 1px solid rgba(47, 102, 255, 0.08) !important;
}

/* ------------------------------------------------------------------
   20. PRICING LOGIC CARDS — cleaner top bar
   ------------------------------------------------------------------ */
.pricing-logic-card::before {
  height: 1px !important;
  opacity: 0.4 !important;
}

.pricing-logic-card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 24px rgba(0, 0, 0, 0.05) !important;
}

/* ------------------------------------------------------------------
   21. CALCULATOR CARD — refined
   ------------------------------------------------------------------ */
.calculator-card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 48px rgba(0, 0, 0, 0.06) !important;
}

.calculator-result {
  background: linear-gradient(180deg, #fafbff 0%, #f5f8ff 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ------------------------------------------------------------------
   22. ECONOMY TABLE — cleaner borders
   ------------------------------------------------------------------ */
.economy-table-wrap {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.05) !important;
}

/* ------------------------------------------------------------------
   23. FIT CARDS — refined borders
   ------------------------------------------------------------------ */
.fit-card--yes {
  border-color: rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

.fit-card--no {
  border-color: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ------------------------------------------------------------------
   24. QUESTIONS SECTION — refined dark treatment
   ------------------------------------------------------------------ */
.questions-section {
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* ------------------------------------------------------------------
   25. NEWSLETTER BAR — subtler
   ------------------------------------------------------------------ */
.newsletter-bar {
  background: #f2f5fa !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ------------------------------------------------------------------
   26. PLANERKA HIGHLIGHT (dark card inside light section) — refined
   ------------------------------------------------------------------ */
.planerka-highlight {
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------------
   27. SCROLL PROGRESS — thinner
   ------------------------------------------------------------------ */
.scroll-progress {
  height: 2px !important;
}

/* ------------------------------------------------------------------
   28. NOISE PATTERNS — tone down
   ------------------------------------------------------------------ */
.results-noise {
  opacity: 0.6 !important;
}

.cta-noise {
  opacity: 0.5 !important;
  background-size: 24px 24px !important;
}

/* ------------------------------------------------------------------
   29. TRANSITION FADES — smoother section transitions
   ------------------------------------------------------------------ */
.trust-bar .trust-bar-fade-bottom {
  height: 80px !important;
}

/* ------------------------------------------------------------------
   30. MOBILE — disable heavy backdrop-filter for performance
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Combined Telegram + Admin grid → stack on mobile */
  #layers [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .result-card,
  .report-tour-section .report-tour-label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Slightly increase card bg opacity on mobile for readability */
  .result-card {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .report-tour-section .report-tour-label {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

/* ------------------------------------------------------------------
   31. HOVER: NONE — disable transforms on touch devices
   ------------------------------------------------------------------ */
@media (hover: none) {
  .section-light .layer-card:hover,
  .section-light .pricing-card:hover,
  .section-light .feature-card:hover,
  .section-light .process-card:hover,
  .section-light .testimonial-card:hover,
  .section-light .planerka-step:hover,
  .section:not(.results-section):not(.cta-section) .layer-card:hover,
  .section:not(.results-section):not(.cta-section) .chart-card:hover,
  .section:not(.results-section):not(.cta-section) .product-card:hover,
  .section:not(.results-section):not(.cta-section) .feature-card:hover,
  .section:not(.results-section):not(.cta-section) .process-card:hover,
  .section:not(.results-section):not(.cta-section) .manager-card:hover,
  .section:not(.results-section):not(.cta-section) .integration-badge:hover,
  .result-card:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
  }

  .result-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
}

/* ------------------------------------------------------------------
   32. EXIT POPUP — refined
   ------------------------------------------------------------------ */
.exit-popup-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

/* ------------------------------------------------------------------
   33. PAGE GLOW — slightly toned down for subtlety
   ------------------------------------------------------------------ */
.page-glow {
  opacity: 0.6 !important;
}