/* Hover effects of the public site (home and About page first). Only for devices with a real mouse, and switched off
   for visitors who asked for less motion. Flat: they move, slide, fill and zoom, but have no shadows and no rounded corners. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root { --hx-ease: cubic-bezier(.2, .7, .2, 1); }

  /* ---------- Buttons: a dark fill slides in from the left and the arrow moves forward ---------- */
  .btn-brand { position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease; }
  .btn-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #111; transform: translateX(-101%); transition: transform .4s var(--hx-ease); }
  .btn-brand:hover { background: var(--brand-red); border-color: #111; }
  .btn-brand:hover::before { transform: translateX(0); }
  .btn-brand i { display: inline-block; transition: transform .3s var(--hx-ease); }
  .btn-brand:hover i { transform: translateX(6px); }

  /* ---------- Home: brands strip ---------- */
  .brands-marquee:hover .brands-track { animation-play-state: paused; }
  .brand-logo img { transition: transform .35s var(--hx-ease); }
  .brand-logo:hover { transform: none; }
  .brand-logo:hover img { transform: scale(1.14); }

  /* ---------- Home: About Us photo lifts off its pink back plate ---------- */
  .hm-about-photo { transition: transform .5s var(--hx-ease); }
  .hm-about-media::before { transition: width .5s var(--hx-ease), height .5s var(--hx-ease); }
  .hm-about-media:hover .hm-about-photo { transform: translate(-8px, -8px); }
  .hm-about-media:hover::before { width: 92%; height: 92%; }

  /* ---------- Home: counters grow a red line under the number ---------- */
  .stats-section .col-6 { cursor: default; }
  .stat-number { display: inline-block; }
  .stat-number::after { content: ""; display: block; width: 0; height: 3px; margin: .4rem auto 0; background: var(--brand-red); transition: width .4s var(--hx-ease); }
  .stats-section .col-6:hover .stat-number { transform: none; color: var(--brand-red); }
  .stats-section .col-6:hover .stat-number::after { width: 64%; }
  .stats-section .col-6:hover .stat-label { color: var(--brand-red); }
  .stat-label { transition: color .3s ease; }

  /* ---------- Home: Why Choose Us cards lift, the icon turns round and a red line fills the bottom ---------- */
  .why-card { position: relative; overflow: hidden; transition: transform .4s var(--hx-ease), border-color .3s ease; }
  .why-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--brand-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--hx-ease); }
  .why-card:hover { transform: translateY(-8px); box-shadow: none; }
  .why-card:hover::after { transform: scaleX(1); }
  .why-icon { transition: transform .6s var(--hx-ease), background-color .3s ease, color .3s ease; }
  .why-card:hover .why-icon { color: var(--brand-red); background: #fff; transform: rotateY(360deg); }

  /* ---------- Home: partners, testimonials, review QR ---------- */
  .partner-card { transition: transform .4s var(--hx-ease), border-color .3s ease; }
  .partner-card:hover { transform: translateY(-6px); border-color: var(--brand-red); }
  .partner-card .partner-logo-image { transition: transform .5s var(--hx-ease); }
  .partner-card:hover .partner-logo-image { transform: scale(1.05); }
  .partner-btn { transition: background-color .3s ease; }
  .partner-btn::after { content: "\2192"; display: inline-block; margin-left: .6rem; transition: transform .3s var(--hx-ease); }
  .partner-card:hover .partner-btn { background: #111; }
  .partner-card:hover .partner-btn::after { transform: translateX(6px); }

  .testimonial-card { transition: transform .4s var(--hx-ease), border-color .3s ease; }
  .testimonial-card:hover { transform: translateY(-4px); border-color: var(--brand-red); }
  .review-qr { transition: border-color .3s ease, transform .4s var(--hx-ease); }
  .review-qr:hover { transform: translateY(-4px); border-color: var(--brand-red); }
  .rq-frame { transition: transform .4s var(--hx-ease); }
  .review-qr:hover .rq-frame { transform: scale(1.04); }

  /* ---------- Home: product cards and blog cards (the picture zoom and the red border were already there) ---------- */
  .p-card .p-go { transition: transform .3s var(--hx-ease), background-color .3s ease, color .3s ease; }
  .p-card:hover .p-go { transform: translateX(5px); }
  .hb-card .hb-chip { transition: background-color .3s ease; }
  .hb-card:hover .hb-chip { background: #111; }

  /* ---------- Round social icons in the header, the menu and the footer ---------- */
  .social-link { transition: transform .35s var(--hx-ease), background-color .3s ease, border-color .3s ease; }
  .social-link:hover { transform: translateY(-4px); }

  /* ---------- About page: counters strip ---------- */
  .ab-stats div { position: relative; transition: background-color .3s ease; }
  .ab-stats div::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--brand-red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--hx-ease); }
  .ab-stats div:hover { background: #fdf3f3; }
  .ab-stats div:hover::after { transform: scaleX(1); }
  .ab-stats b { display: inline-block; transition: transform .35s var(--hx-ease); }
  .ab-stats div:hover b { transform: scale(1.12); }

  /* ---------- About page: What You Can Count On ---------- */
  .st-photo-main, .st-photo-small { transition: transform .6s var(--hx-ease); }
  .st-photos::before { transition: width .5s var(--hx-ease), height .5s var(--hx-ease); }
  .st-photos:hover .st-photo-main { transform: translate(-6px, -6px); }
  .st-photos:hover .st-photo-small { transform: translate(8px, 8px); }
  .st-photos:hover::before { width: 46%; height: 64%; }
  .st-point { transition: transform .35s var(--hx-ease); }
  .st-point:hover { transform: translateX(6px); }
  .st-icon { transition: background-color .3s ease, color .3s ease, transform .5s var(--hx-ease); }
  .st-point:hover .st-icon { color: #fff; background: var(--brand-red); transform: rotate(-8deg) scale(1.08); }
  .st-point:hover h3 { color: var(--brand-red); }

  /* ---------- About page: Vision and Mission ---------- */
  .vm-col { transition: background-color .35s ease; }
  .vm-col:hover { background: rgba(255,255,255,.08); }
  .vm-icon { transition: transform .5s var(--hx-ease), background-color .3s ease, color .3s ease; }
  .vm-col:hover .vm-icon { color: var(--brand-red); background: #fff; transform: rotate(10deg) scale(1.1); }
  .vm-col li { transition: transform .3s var(--hx-ease); }
  .vm-col li:hover { transform: translateX(6px); }

  /* ---------- About page: Why We Started, Our Commitment (the photo moves and the red frame grows) ---------- */
  .ws-photo img, .oc-photo img { transition: transform .6s var(--hx-ease); }
  .ws-photo::after, .oc-photo::before { transition: width .5s var(--hx-ease), height .5s var(--hx-ease); }
  .ws-photo:hover img { transform: translate(-6px, -6px); }
  .oc-photo:hover img { transform: translate(6px, -6px); }
  .ws-photo:hover::after, .oc-photo:hover::before { width: 88%; height: 88%; }
  .ws-note { transition: transform .35s var(--hx-ease), background-color .3s ease, border-color .3s ease; }
  .ws-note:hover { transform: translateX(6px); border-color: #111; }

  /* ---------- About page: How We Work (the number box lifts, the card rises) ---------- */
  .hw-step { transition: transform .4s var(--hx-ease); }
  .hw-step:hover { transform: translateY(-8px); }
  .hw-no { transition: background-color .3s ease, transform .5s var(--hx-ease); }
  .hw-step:hover .hw-no { background: #111; transform: scale(1.14) rotate(-6deg); }
  .hw-step h3 { transition: color .3s ease; }
  .hw-step:hover h3 { color: var(--brand-red); }

  /* ---------- About page: FAQ rows get a red bar on the left and the question moves ---------- */
  .about-page .faq-accordion .accordion-item { position: relative; transition: background-color .3s ease; }
  .about-page .faq-accordion .accordion-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-red); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--hx-ease); }
  .about-page .faq-accordion .accordion-item:hover { background: #fff; }
  .about-page .faq-accordion .accordion-item:hover::before { transform: scaleY(1); }
  .about-page .faq-accordion .accordion-button { transition: padding-left .35s var(--hx-ease), color .3s ease; }
  .about-page .faq-accordion .accordion-item:hover .accordion-button { padding-left: .9rem; color: var(--brand-red); }
  .about-page .faq-accordion .accordion-item:hover .faq-number { color: var(--brand-red); }
}