/* ============================================================
   reopt-polish.css — visual polish for the re-optimized pages
   (Home, About, Contactless, Paperless).
   Uses ONLY the existing site palette — no new colors:
     orange  #ff5821  (hover #ff774a)
     peach   #fff9f7 / #fff3ee / #ffe5dc / #f1d7ce / #ffe0d5
     ink     #39312f / #635551 / #777
   Scoped to body.reopt-polish so other pages are untouched.
   Purely presentational: spacing, radius, shadow, hover, accents.
   ============================================================ */

/* ---- Smooth interactions ---- */
.reopt-polish .card,
.reopt-polish .icon-box,
.reopt-polish .deliver-card,
.reopt-polish .cap-item,
.reopt-polish .faq-item,
.reopt-polish .stats-card,
.reopt-polish .video-box img {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

/* ---- Card hover lift ---- */
.reopt-polish .card:hover,
.reopt-polish .icon-box:hover,
.reopt-polish .deliver-card:hover,
.reopt-polish .cap-item:hover,
.reopt-polish .faq-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(57, 49, 47, .12);
}

/* ---- Capability tiles + FAQ accents ---- */
.reopt-polish .cap-item:hover { border-color: #ff5821; }
.reopt-polish .faq-item { border-left: 3px solid #ffe0d5; }
.reopt-polish .faq-item:hover { border-left-color: #ff5821; }

/* ---- Section-title accent underline (light-bg sections only) ---- */
.reopt-polish .section-title h2,
.reopt-polish .samso-advantages__title {
  position: relative;
  padding-bottom: 16px;
}
.reopt-polish .section-title h2::after,
.reopt-polish .samso-advantages__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: #ff5821;
}

/* ---- Industry / solution icon boxes: soft orange disc ---- */
.reopt-polish .services .icon-box .icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff3ee;
}
.reopt-polish .services .icon-box .icon i {
  color: #ff5821;
  transition: color .28s ease;
  margin: 0;
}
.reopt-polish .services .icon-box:hover .icon { background: #ff5821; }
.reopt-polish .services .icon-box:hover .icon i { color: #fff; }

/* ---- CTA buttons: gentle shadow + lift ---- */
.reopt-polish .cta-btn,
.reopt-polish .btn-get-started {
  box-shadow: 0 8px 20px rgba(255, 88, 33, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.reopt-polish .cta-btn:hover,
.reopt-polish .btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 88, 33, .36);
}

/* ---- List bullets -> neutral orange dot (works for any list) ---- */
.reopt-polish .card ul,
.reopt-polish .card ul.card-text {
  list-style: none;
  padding-left: 4px;
}
.reopt-polish .card ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
}
.reopt-polish .card ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5821;
}

/* ---- Stats card: subtle brand top accent ---- */
.reopt-polish .stats-card { border-top: 3px solid #ff5821; }

/* ---- Deliver (01-04) cards: top accent that warms on hover ---- */
.reopt-polish .deliver-card { border-top: 3px solid #ffe0d5; }
.reopt-polish .deliver-card:hover { border-top-color: #ff5821; }

/* ---- Media: rounded + soft shadow ---- */
.reopt-polish .video-box img {
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(57, 49, 47, .14);
}

/* ---- Quote blocks (home 01-04): soft peach panel ---- */
.reopt-polish blockquote {
  background: #fff9f7;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px !important;
}

/* ---- Fix: Home "Driving impact" 01-04 cards reuse .values .card but have
   no .card-body overlay, so the template's hover rule
   (.values .card:hover .card-title/.card-text { color:#fff }) would turn
   their text white on a white card and make it vanish. The "All-in-One"
   products section carries id="values"; the 01-04 section does not, so we
   keep text readable only there. ---- */
.reopt-polish section.values:not(#values) .card:hover .card-title,
.reopt-polish section.values:not(#values) .card:hover .card-title a {
  color: #473d3a;
}
.reopt-polish section.values:not(#values) .card:hover .card-text {
  color: #4b4949;
}