/* ============================================================
   REX CURTAINS — Brand Design System
   Extends Cartzilla v3.1.1 · Rex Line brand palette
   Colors: Rex Line primary #f55266 · Dark #181d25
   ============================================================ */

/* ── 1. Inter variable font ──────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Design Tokens — Rex Line palette ─────────────────── */
:root {
  /* Override Cartzilla primary with Rex Line coral — drives btn-primary, focus rings */
  --cz-primary:         #f55266;
  --cz-primary-rgb:     245, 82, 102;

  /* Rex Line primary (coral) */
  --rc-accent:          #f55266;
  --rc-accent-rgb:      245, 82, 102;
  --rc-accent-light:    rgba(245, 82, 102, .08);
  --rc-accent-dark:     #d43f56;

  /* Alias: existing templates use --rc-gold class names.
     Map them to the Rex Line accent so HTML stays unchanged. */
  --rc-gold:            var(--rc-accent);
  --rc-gold-rgb:        var(--rc-accent-rgb);
  --rc-gold-light:      var(--rc-accent-light);
  --rc-gold-dark:       var(--rc-accent-dark);

  /* Core neutrals — shared with Rex Line */
  --rc-dark:            #181d25;
  --rc-dark-2:          #222934;
  --rc-dark-3:          #2d3546;
  --rc-wa:              #25d366;
  --rc-wa-rgb:          37, 211, 102;

  /* Layout tokens */
  --rc-radius-card:     1rem;
  --rc-radius-card-lg:  1.25rem;
  --rc-radius-btn:      50rem;

  /* Elevation — Rex Line subtlety */
  --rc-shadow-sm:       0 1px 4px rgba(24,29,37,.06);
  --rc-shadow-card:     0 2px 12px rgba(24,29,37,.08);
  --rc-shadow-card-hover: 0 8px 32px rgba(24,29,37,.14);
  --rc-shadow-nav:      0 4px 24px rgba(24,29,37,.10);

  /* Typography */
  --rc-heading-tracking: -0.025em;
  --rc-label-tracking:   0.08em;
}

/* Dark mode token adjustments */
[data-bs-theme="dark"] {
  --rc-accent-light: rgba(245, 82, 102, .12);
  --rc-shadow-card:  0 2px 12px rgba(0,0,0,.25);
  --rc-shadow-card-hover: 0 8px 32px rgba(0,0,0,.35);
}

/* ── 3. Global typography refinements ────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: var(--rc-heading-tracking);
}

.display-4, .display-5, .display-6 {
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* ── 4. Topbar ───────────────────────────────────────────── */
.rc-topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.rc-topbar a:hover { color: #fff; text-decoration: underline; }

/* ── 5. Navbar overrides ─────────────────────────────────── */
.navbar-sticky .dropdown-menu {
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-nav);
  margin-top: .5rem;
  border: 1px solid var(--cz-border-color);
}
.navbar-sticky .dropdown-item {
  font-size: .8125rem;
  border-radius: .375rem;
  padding: .375rem .625rem;
  color: var(--cz-body-color);
  transition: background .12s, color .12s;
}
.navbar-sticky .dropdown-item:hover,
.navbar-sticky .dropdown-item:focus {
  background: var(--cz-secondary-bg);
  color: var(--rc-dark);
}

/* Nav link hover — Rex Line animate-underline pattern */
.navbar .nav-link {
  position: relative;
  transition: color .15s;
}

/* Mega menu section heading */
.rc-menu-section {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--rc-label-tracking);
  text-transform: uppercase;
  color: var(--cz-secondary-color, #6c727f);
  padding-bottom: .375rem;
  margin-bottom: .375rem;
  border-bottom: 1px solid var(--cz-border-color);
}

/* ── 6. Mobile Offcanvas ─────────────────────────────────── */
#mobileNav { max-width: 320px; }
#mobileNav .accordion-button {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--cz-body-color);
  background: transparent;
  box-shadow: none;
  padding: .875rem 1.5rem;
}
#mobileNav .accordion-button:not(.collapsed) {
  color: var(--rc-accent);
  background: var(--rc-accent-light);
  box-shadow: none;
}
#mobileNav .accordion-body { padding: .25rem 1.5rem 1rem; }

/* ── 7. Mobile Sticky Bottom Bar ────────────────────────── */
.rc-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: .625rem 1rem;
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: var(--cz-body-bg);
  border-top: 1px solid var(--cz-border-color);
  box-shadow: 0 -4px 24px rgba(24,29,37,.10);
  gap: .5rem;
  align-items: center;
}
@media (max-width: 991.98px) {
  .rc-mobile-bar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ── 8. Floating WhatsApp (desktop only) ─────────────────── */
.rc-wa-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.5rem;
  z-index: 1040;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rc-wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(var(--rc-wa-rgb),.4);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.rc-wa-float:hover {
  color: #fff;
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 10px 30px rgba(var(--rc-wa-rgb),.5);
}
@media (max-width: 991.98px) { .rc-wa-float { display: none; } }

/* ── 9. Back-to-top ──────────────────────────────────────── */
.rc-back-top {
  position: fixed;
  bottom: 5.25rem;
  right: 1.5rem;
  z-index: 1039;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cz-body-bg);
  border: 1px solid var(--cz-border-color);
  color: var(--cz-body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  text-decoration: none;
  box-shadow: var(--rc-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s, color .2s;
}
.rc-back-top.rc-visible { opacity: 1; pointer-events: auto; }
.rc-back-top:hover {
  background: var(--rc-dark);
  color: #fff;
  border-color: var(--rc-dark);
  transform: translateY(-3px);
}
@media (max-width: 991.98px) { .rc-back-top { bottom: 5rem; right: 1rem; } }

/* ── 10. Hero Section ─────────────────────────────────────── */
.rc-hero {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) { .rc-hero { padding: 3.5rem 0; } }

/* Hero badge — Rex Line's text-primary pill pattern */
.rc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--rc-label-tracking);
  text-transform: uppercase;
  padding: .375rem .875rem;
  border-radius: 50rem;
  background: var(--rc-accent-light);
  color: var(--rc-accent);
  border: 1px solid rgba(var(--rc-accent-rgb), .2);
  margin-bottom: 1.25rem;
}
.rc-hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-accent);
  animation: rc-pulse 2s ease-in-out infinite;
}
@keyframes rc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.7); }
}

/* Trust chips — refined Rex Line style */
.rc-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.rc-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .375rem .875rem;
  border-radius: 50rem;
  border: 1px solid var(--cz-border-color);
  background: var(--cz-body-bg);
  white-space: nowrap;
  color: var(--cz-body-color);
  transition: border-color .15s, background .15s;
}
.rc-trust-chip:hover {
  border-color: var(--rc-accent);
  background: var(--rc-accent-light);
}

/* ── 11. Section Wrappers ────────────────────────────────── */
.rc-section    { padding: 5.5rem 0; }
.rc-section-sm { padding: 3.25rem 0; }
.rc-section-dark { background: var(--rc-dark); }

@media (max-width: 767.98px) {
  .rc-section    { padding: 3.5rem 0; }
  .rc-section-sm { padding: 2.25rem 0; }
}

/* Eyebrow label — matches Rex Line exactly */
.rc-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--rc-label-tracking);
  text-transform: uppercase;
  color: var(--rc-accent);
  margin-bottom: .625rem;
  display: block;
}

/* ── 12. Cards ───────────────────────────────────────────── */
.rc-card {
  border-radius: var(--rc-radius-card);
  border: 1px solid var(--cz-border-color);
  background: var(--cz-body-bg);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.rc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rc-shadow-card-hover);
  color: inherit;
}
.rc-card-img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cz-secondary-bg);
}
.rc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.rc-card:hover .rc-card-img { transform: scale(1.07); }

.rc-card-body { padding: 1.125rem 1.25rem 1.375rem; }
.rc-card-title {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: var(--rc-heading-tracking);
  color: var(--cz-heading-color);
  margin-bottom: .25rem;
}
.rc-card-price {
  font-size: .75rem;
  color: var(--cz-secondary-color, #6c727f);
}
.rc-card-arrow {
  margin-left: auto;
  color: var(--cz-secondary-color, #6c727f);
  transition: transform .2s, color .2s;
}
.rc-card:hover .rc-card-arrow {
  transform: translateX(5px);
  color: var(--rc-accent);
}

/* Loading shimmer */
.rc-card-placeholder .rc-card-img-wrap,
.rc-card-placeholder .rc-card-title,
.rc-card-placeholder .rc-card-price {
  background: var(--cz-secondary-bg);
  border-radius: .375rem;
  animation: rc-shimmer 1.4s ease-in-out infinite;
}
@keyframes rc-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* ── 13. Process Steps ───────────────────────────────────── */
.rc-step { display: flex; gap: 1rem; }
.rc-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rc-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(24,29,37,.25);
}
.rc-step-line {
  width: 2px;
  flex: 1;
  background: var(--cz-border-color);
  margin: .375rem auto 0;
  min-height: 32px;
}

/* ── 14. Review Cards ────────────────────────────────────── */
.rc-review {
  border-radius: var(--rc-radius-card);
  border: 1px solid var(--cz-border-color);
  padding: 1.625rem;
  background: var(--cz-body-bg);
  transition: box-shadow .25s, transform .25s;
  height: 100%;
}
.rc-review:hover {
  box-shadow: var(--rc-shadow-card-hover);
  transform: translateY(-3px);
}

.rc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rc-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8125rem;
  flex-shrink: 0;
}

/* ── 15. Stats Block ─────────────────────────────────────── */
.rc-stat-num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--rc-heading-tracking);
  color: var(--cz-heading-color);
}
.rc-stat-label {
  font-size: .8125rem;
  color: var(--cz-secondary-color, #6c727f);
  margin-top: .375rem;
}

/* ── 16. FAQ Accordion ───────────────────────────────────── */
.rc-faq .accordion-item {
  border-radius: .875rem !important;
  overflow: hidden;
  margin-bottom: .5rem;
  border: 1px solid var(--cz-border-color);
  box-shadow: var(--rc-shadow-sm);
  transition: box-shadow .2s;
}
.rc-faq .accordion-item:hover {
  box-shadow: var(--rc-shadow-card);
}
.rc-faq .accordion-button {
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: var(--rc-heading-tracking);
  background: var(--cz-body-bg);
  color: var(--cz-heading-color);
  padding: 1.125rem 1.25rem;
}
.rc-faq .accordion-button:not(.collapsed) {
  background: var(--rc-accent-light);
  color: var(--rc-dark);
  box-shadow: none;
}
.rc-faq .accordion-button::after {
  filter: none;
}
.rc-faq .accordion-button:not(.collapsed)::after {
  filter: none;
  opacity: .6;
}
.rc-faq .accordion-body {
  padding: .875rem 1.25rem 1.25rem;
}

/* ── 17. Utility: Accent (remapped from gold) ────────────── */
.text-gold     { color: var(--rc-accent) !important; }
.bg-gold       { background-color: var(--rc-accent) !important; }
.bg-gold-light { background-color: var(--rc-accent-light) !important; }
.border-gold   { border-color: rgba(var(--rc-accent-rgb), .3) !important; }

.btn-gold {
  background-color: var(--rc-accent);
  border-color: var(--rc-accent);
  color: #fff;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, transform .15s, box-shadow .15s;
}
.btn-gold:hover, .btn-gold:focus {
  background-color: var(--rc-accent-dark);
  border-color: var(--rc-accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--rc-accent-rgb), .35);
}
.btn-gold:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary button upgrade — consistent with Rex Line */
.btn-primary {
  transition: background-color .2s, border-color .2s, transform .15s, box-shadow .15s;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--cz-primary-rgb), .3);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

/* Dark button upgrade */
.btn-dark {
  transition: background-color .2s, border-color .2s, transform .15s, box-shadow .15s;
}
.btn-dark:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(24,29,37,.25);
}
.btn-dark:active { transform: translateY(0); box-shadow: none; }

/* Outline dark upgrade */
.btn-outline-dark {
  transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.btn-outline-dark:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* ── 18. Footer ──────────────────────────────────────────── */
.rc-footer { background: var(--rc-dark); }
.rc-footer-head {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--rc-label-tracking);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .875rem;
}
.rc-footer-link {
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  display: inline-flex;
  padding: .225rem 0;
  transition: color .15s;
}
.rc-footer-link:hover { color: #fff; }
.rc-footer-divider { border-color: rgba(255,255,255,.08); }

/* Footer nav links */
.rc-footer .nav-link {
  color: rgba(255,255,255,.6);
  transition: color .15s;
  font-size: .875rem;
}
.rc-footer .nav-link:hover { color: #fff; }

/* ── 19. Scroll Reveal Animations ────────────────────────── */
.rc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.2,.8,.3,1), transform .55s cubic-bezier(.2,.8,.3,1);
}
.rc-reveal.rc-revealed {
  opacity: 1;
  transform: translateY(0);
}
.rc-reveal-delay-1 { transition-delay: .1s; }
.rc-reveal-delay-2 { transition-delay: .2s; }
.rc-reveal-delay-3 { transition-delay: .3s; }
.rc-reveal-delay-4 { transition-delay: .4s; }
.rc-reveal-scale {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
}
.rc-reveal-scale.rc-revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── 20. Nav pill active tab (areas) ─────────────────────── */
#areaTabs .nav-link {
  border: 1px solid transparent;
  color: var(--cz-body-color);
  padding: .75rem 1rem;
  transition: background .2s, color .2s, border-color .2s;
}
#areaTabs .nav-link:hover {
  background: var(--cz-secondary-bg);
  color: var(--rc-dark);
}
#areaTabs .nav-link.active {
  background: var(--rc-accent-light);
  color: var(--rc-accent);
  border-color: rgba(var(--rc-accent-rgb), .2);
  font-weight: 600;
}

/* ── 21. Scrollbar (minimal) ─────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(24,29,37,.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(24,29,37,.28); }

/* ── 22. Focus / Accessibility ───────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--rc-accent-rgb), .3);
}

/* ── 23. Lazy loading fade-in ────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .45s ease;
}
img[loading="lazy"].rc-loaded { opacity: 1; }

/* ── 24. Touch targets (mobile) ──────────────────────────── */
@media (max-width: 991.98px) {
  .btn { min-height: 44px; }
  .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* ── 25. Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .rc-reveal, .rc-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 26. Print ───────────────────────────────────────────── */
@media print {
  .navbar-sticky, .rc-mobile-bar,
  .rc-wa-float, .rc-back-top { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ── 27. Topbar ──────────────────────────────────────────── */
.rc-topbar { background: #181d25; overflow: hidden; height: 36px; display: flex; align-items: center; }
.rc-topbar-track { display: flex; align-items: center; animation: rc-tb-scroll 34s linear infinite; white-space: nowrap; will-change: transform; }
.rc-topbar-track:hover { animation-play-state: paused; }
.rc-topbar-set { display: flex; align-items: center; flex-shrink: 0; }
.rc-topbar-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.78); font-size: .72rem; font-weight: 500; padding: 0 22px; border-right: 1px solid rgba(255,255,255,.10); white-space: nowrap; }
.rc-topbar-item i { font-size: .82rem; opacity: .6; flex-shrink: 0; }
.rc-topbar-item a { color: rgba(255,255,255,.85); text-decoration: none; }
.rc-topbar-item a:hover { color: #fff; text-decoration: underline; }
@keyframes rc-tb-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ══════════════════════════════════════════════════════════════
   §28  MOBILE APP-LIKE REFINEMENTS
   Premium interaction quality — phones & small tablets
   Rex Line design system preserved; no new brand colors
   ══════════════════════════════════════════════════════════════ */

/* ── M-1. Hide topbar on mobile (saves 36px; marquee unreadable at <768px) */
@media (max-width: 767.98px) {
  .rc-topbar { display: none !important; }
}

/* ── M-2. Navbar: tighter pill on small phones */
@media (max-width: 575.98px) {
  .navbar-sticky .navbar { padding-top:.35rem !important; padding-bottom:.35rem !important; }
  .navbar-brand img[style] { width:108px !important; }
}

/* ── M-3. Navbar scroll-shadow state (JS adds .rc-scrolled) */
.navbar-sticky.rc-scrolled .navbar {
  box-shadow: 0 3px 20px rgba(24,29,37,.13);
  transition: box-shadow .25s;
}

/* ── M-4. Full-width offcanvas on phones */
@media (max-width: 575.98px) {
  #mobileNav {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}
@media (min-width: 576px) {
  #mobileNav { max-width: 360px; }
}

/* ── M-5. Offcanvas header — bigger, premium close button */
#mobileNav .offcanvas-header {
  padding: 1rem 1.25rem;
  min-height: 62px;
  align-items: center;
}
#mobileNav .btn-close {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--cz-secondary-bg);
  opacity: 1;
  flex-shrink: 0;
  transition: background .15s, opacity .15s;
}
#mobileNav .btn-close:hover { background-color: var(--rc-accent-light); }

/* ── M-6. Offcanvas nav: bigger touch targets */
#mobileNav .accordion-button {
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
}
#mobileNav .accordion-body { padding: .25rem 1.25rem .875rem; }
#mobileNav .accordion-body a {
  min-height: 42px;
  display: flex !important;
  align-items: center;
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  font-size: .9rem;
}
#mobileNav .border-bottom > a.d-block {
  min-height: 54px;
  display: flex !important;
  align-items: center;
  padding: 0 1.25rem;
  font-size: .9375rem;
}

/* ── M-7. Mobile bottom bar — bigger, cleaner */
@media (max-width: 991.98px) {
  .rc-mobile-bar {
    padding: .7rem 1rem;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    gap: .5rem;
  }
  .rc-mobile-bar .btn {
    font-size: .8125rem !important;
    font-weight: 600;
    min-height: 44px;
    padding: .5rem .875rem !important;
    line-height: 1.2;
  }
  body { padding-bottom: 76px; }
}

/* ── M-8. Typography: prevent oversized headings on phones */
@media (max-width: 575.98px) {
  .display-4 { font-size: 2rem !important; }
  .display-5 { font-size: 1.75rem !important; }
  .display-6 { font-size: 1.5rem !important; }
  h1, .h1 { font-size: 1.625rem; }
  h2, .h2 { font-size: 1.375rem; }
  .rc-stat-num { font-size: 2rem; }
}

/* ── M-9. Section rhythm — tighter on small phones */
@media (max-width: 575.98px) {
  .rc-section    { padding: 2.75rem 0; }
  .rc-section-sm { padding: 1.75rem 0; }
  .rc-hero       { padding: 2.5rem 0 2rem; }
  .rc-hero-badge { font-size: .625rem; padding: .3rem .7rem; }
}

/* ── M-10. Card tap feedback — instant, satisfying */
@media (hover: none) and (pointer: coarse) {
  .rc-card { transition: transform .1s, box-shadow .1s; }
  .rc-card:active {
    transform: scale(.975) !important;
    box-shadow: var(--rc-shadow-sm) !important;
  }
  .btn:active:not(:disabled) {
    transform: scale(.96) !important;
    transition: transform .08s;
    box-shadow: none !important;
  }
}

/* ── M-11. Card image: less tall on mobile (save scroll space) */
@media (max-width: 575.98px) {
  .rc-card-img-wrap { aspect-ratio: 3 / 2; }
}

/* ── M-12. Form inputs: prevent iOS auto-zoom + better size */
@media (max-width: 991.98px) {
  .form-control,
  .form-select {
    font-size: 1rem !important;  /* ≥ 16px stops iOS from zooming on tap */
    min-height: 48px !important;
    padding-top: .625rem !important;
    padding-bottom: .625rem !important;
  }
  textarea.form-control { min-height: 96px !important; }
  .form-label { font-size: .875rem; }
}

/* ── M-13. Trust chips — wrap better on narrow phones */
@media (max-width: 575.98px) {
  .rc-trust-bar { gap: .35rem; margin-top: 1.125rem; }
  .rc-trust-chip { font-size: .6875rem; padding: .3rem .6rem; gap: .25rem; }
}

/* ── M-14. FAQ accordion — bigger tap area on mobile */
@media (max-width: 991.98px) {
  .rc-faq .accordion-button {
    font-size: .875rem;
    padding: 1rem 1.125rem;
  }
  .rc-faq .accordion-body { padding: .625rem 1.125rem 1rem; }
}

/* ── M-15. Review cards — full-width on phone */
@media (max-width: 575.98px) {
  .rc-review { padding: 1.25rem; }
}

/* ── M-16. Images: stable reserved height (prevent layout shift) */
img[width][height] { aspect-ratio: attr(width) / attr(height); }

/* ── M-17. Tap highlight: remove browser blue flash */
* { -webkit-tap-highlight-color: transparent; }

/* ── M-18. Touch-action: remove 300ms tap delay */
a, button, [role="button"], label, input[type="submit"],
input[type="button"], input[type="checkbox"], input[type="radio"],
select { touch-action: manipulation; }

/* ── M-19. Horizontal scroll containers — native snap */
.rc-scroll-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: .75rem;
  padding-bottom: .25rem;
}
.rc-scroll-x::-webkit-scrollbar { display: none; }
.rc-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* ── M-20. Footer: tighter on phone */
@media (max-width: 575.98px) {
  .rc-footer { padding-top: 2.5rem; padding-bottom: 2rem; }
  .rc-footer .nav-link { font-size: .8125rem; }
}

/* ── M-21. Mobile-only utility: hide separator elements */
@media (max-width: 575.98px) {
  .rc-hide-xs { display: none !important; }
  .rc-show-xs { display: block !important; }
}

/* ── M-22. Safe-area padding for fixed elements */
.rc-mobile-bar {
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
}
.rc-back-top {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}