/* ============================================
   OuiTeint - Franchise Page Specific Styles
   ============================================ */

/* === FRANCHISE HERO STATS === */
.franchise-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:32px; }
.franchise-stat { text-align:center; }
.franchise-stat .number { font-family:'Montserrat',sans-serif; font-size:2.2rem; font-weight:900; background:var(--gradient-red); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.franchise-stat p { color:var(--text-muted); font-size:.85rem; margin-top:4px; }

/* === KEY FIGURES === */
.key-figures { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }
.key-figure { background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:28px 20px; text-align:center; transition:all .3s; }
.key-figure:hover { border-color:rgba(196,26,31,.2); transform:translateY(-3px); }
.key-figure .label { color:var(--red); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.key-figure .value { font-family:'Montserrat',sans-serif; font-size:1.8rem; font-weight:900; }
.key-figure .desc { color:var(--text-muted); font-size:.85rem; margin-top:6px; }

/* === FRANCHISE ADVANTAGES === */
.advantages-franchise { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.advantage-franchise-card { background:var(--dark); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:26px; display:flex; gap:18px; align-items:flex-start; transition:all .3s; }
.advantage-franchise-card:hover { border-color:rgba(196,26,31,.2); }
.advantage-franchise-icon { width:48px; height:48px; background:rgba(196,26,31,.1); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.advantage-franchise-icon svg { margin-right:0; }
.advantage-franchise-card h4 { margin-bottom:6px; font-size:1rem; }
.advantage-franchise-card p { color:var(--text-muted); font-size:.88rem; line-height:1.6; }

/* === TIMELINE === */
.steps-timeline { max-width:740px; margin:0 auto; }
.timeline-item { display:flex; gap:24px; margin-bottom:36px; align-items:flex-start; }
.timeline-number { width:52px; height:52px; background:var(--gradient-red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.3rem; flex-shrink:0; }
.timeline-content h3 { margin-bottom:6px; font-size:1.05rem; }
.timeline-content p { color:var(--text-muted); line-height:1.7; font-size:.9rem; }

/* ============================================
   RESPONSIVE BREAKPOINTS - FRANCHISE PAGE
   ============================================ */
@media (max-width:1024px) {
  .key-figures { grid-template-columns:repeat(2,1fr); gap:20px; }
  .franchise-hero-stats { padding:28px; }
}

@media (max-width:768px) {
  .key-figures { grid-template-columns:repeat(2,1fr); gap:16px; }
  .key-figure { padding:22px 16px; }
  .advantages-franchise { grid-template-columns:1fr; }
  .franchise-hero-stats { grid-template-columns:1fr; gap:16px; padding:24px; }
  .franchise-stat .number { font-size:1.8rem; }
  .timeline-item { gap:18px; }
  .timeline-number { width:44px; height:44px; font-size:1.1rem; }
}