/* ============================================================
   dealer.html — page-specific rules only.
   Reuses shared classes from home.css (.container, .features,
   .features-grid, .feature-card, .dealer-banner, .btn-orange,
   .btn-outline-light, .form-group, .btn-wa-order, .fade-up) and
   the dark hero-banner pattern used on about.html / contact.html.
   ============================================================ */


/* Who Can Apply */
.dealer-who{background:#fff;padding:64px 0;}
.dealer-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.dealer-who-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:28px 16px;text-align:center;transition:all 0.25s ease;}
.dealer-who-card:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.dealer-who-card i{font-size:30px;color:var(--orange);}
.dealer-who-card span{font-size:14px;font-weight:600;color:var(--gray-900);}

/* How It Works */
.dealer-steps{background:var(--gray-50);padding:64px 0;}
.dealer-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dealer-step{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;}
.dealer-step-num{width:40px;height:40px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;margin:0 auto 16px;}
.dealer-step h3{font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:8px;}
.dealer-step p{font-size:13.5px;color:var(--gray-500);line-height:1.6;}

/* Application Form */
.dealer-form-section{background:#fff;padding:64px 0;}
.dealer-form-card{max-width:600px;margin:0 auto;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-sm);}

@media(max-width:900px){
  .dealer-who-grid{grid-template-columns:1fr 1fr;}
  .dealer-steps-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .dealer-who{padding:40px 0;}
  .dealer-steps{padding:40px 0;}
  .dealer-form-section{padding:40px 0;}
  .dealer-form-card{padding:22px;}
}