/* Mobile First */
.hero { text-align:center; padding:1.5rem 0; }
.hero h1 { font-size:1.5rem; margin-bottom:0.75rem; font-weight:700; }
.hero h1 span { color:var(--red); }
.hero p { font-size:0.9rem; color:var(--gray-light); max-width:600px; margin:0 auto 1.5rem; }
.hero .btn-lg { padding:0.75rem 1.5rem; font-size:0.95rem; }

.services-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem; }
.service-card { background:var(--gray-dark); border-radius:var(--radius); padding:1rem; text-align:center; transition:transform .3s,box-shadow .3s; }
.service-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.service-card .icon { font-size:2rem; margin-bottom:0.5rem; display:block; }
.service-card h3 { font-size:1rem; margin:0.5rem 0; }
.service-card p { font-size:0.8rem; color:var(--gray-light); margin-bottom:0.5rem; }
.service-card .price { color:var(--red); font-weight:700; font-size:1.1rem; margin:0.5rem 0; }
.service-card .duration { color:var(--gray-light); font-size:0.75rem; }

.step { background:var(--gray-dark); padding:1rem; border-radius:var(--radius); margin-bottom:1rem; }
.step h3 { font-size:1rem; margin-bottom:0.5rem; }
.time-slots { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
.time-slot { padding:0.5rem 0.75rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--black-intense); color:var(--white); transition:all .3s; cursor:pointer; font-size:0.85rem; }
.time-slot:hover { border-color:var(--red); }
.time-slot.selected { background:var(--red); border-color:var(--red); }
.time-slot.disabled { opacity:.3; cursor:not-allowed; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--gray-dark); padding:1rem; border-radius:var(--radius); text-align:center; }
.stat-card .number { font-size:1.5rem; font-weight:700; color:var(--red); }
.stat-card .label { color:var(--gray-light); font-size:0.75rem; }

/* Tablet - 768px */
@media (min-width:768px) {
    .hero { padding:2.5rem 0; }
    .hero h1 { font-size:2.2rem; }
    .hero p { font-size:1rem; }
    .hero .btn-lg { padding:0.85rem 2rem; font-size:1rem; }
    
    .services-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.25rem; }
    .service-card { padding:1.25rem; }
    .service-card .icon { font-size:2.25rem; }
    .service-card h3 { font-size:1.1rem; }
    .service-card p { font-size:0.85rem; }
    .service-card .price { font-size:1.2rem; }
    
    .time-slots { grid-template-columns:repeat(3,1fr); gap:0.75rem; }
    .time-slot { padding:0.6rem 0.9rem; font-size:0.9rem; }
    
    .stats-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; }
    .stat-card { padding:1.25rem; }
    .stat-card .number { font-size:1.75rem; }
    .stat-card .label { font-size:0.8rem; }
}

/* Desktop - 1024px */
@media (min-width:1024px) {
    .hero { padding:4rem 0; }
    .hero h1 { font-size:3rem; }
    .hero p { font-size:1.2rem; margin:0 auto 2rem; }
    .hero .btn-lg { padding:0.9rem 2.5rem; font-size:1.1rem; }
    
    .services-grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.5rem; margin-top:1.5rem; }
    .service-card { padding:1.5rem; }
    .service-card .icon { font-size:2.5rem; }
    .service-card h3 { font-size:1.2rem; }
    .service-card p { font-size:0.9rem; }
    .service-card .price { font-size:1.35rem; }
    
    .time-slots { grid-template-columns:repeat(4,1fr); gap:0.75rem; }
    .time-slot { padding:0.7rem 1rem; font-size:0.95rem; }
    
    .stats-grid { grid-template-columns:repeat(4,1fr); gap:1.5rem; }
    .stat-card { padding:1.5rem; }
    .stat-card .number { font-size:2rem; }
    .stat-card .label { font-size:0.875rem; }
}