.driver
{
  width:100%;
  padding:8rem 0 2rem 0;
  background:var(--background);
  border-bottom:1px solid var(--border);
}

.drivers-wrapper
{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.drivers-header
{
  max-width:800px;
  margin-bottom:1rem;
}

.drivers-badge
{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}

.badge-dot
{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  animation:pulse 1.8s ease-in-out infinite;
}

.drivers-badge span
{
  font-size:12px;
  font-weight:400;
  letter-spacing:2.5px;
  color:var(--accent);
}

@keyframes pulse
{
  0%
  {
    transform:scale(1);
    opacity:1;
  }

  50%
  {
    transform:scale(1.2);
    opacity:.7;
  }

  100%
  {
    transform:scale(1);
    opacity:1;
  }
}

.drivers-header h2
{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:clamp(42px, 5vw, 55px);
  line-height:0.95;
  letter-spacing:-2px;
  font-weight:700;
  margin-bottom:26px;
  color:var(--color-navy);
}

.orange
{
  color:var(--accent);
}

.drivers-header p
{
  max-width:700px;
  font-size:19px;
  margin-bottom:28px;
  line-height:1.5;
  color:var(--color-muted-foreground);
}














.drivers-content
{
  width: 100%;
  padding: 3rem 0;
  border-top:1px solid var(--border);
  background: var(--background);
}

.drivers-grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.driver-card
{
  height: 520px;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  cursor: pointer;
}

.driver-card img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.driver-card:hover img
{
  transform: scale(1.05);
}















.benefits-section
{
  padding-bottom:4rem;
  background: var(--color-background);
}

.benefits-grid
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.benefit-card
{
  background: linear-gradient( 180deg, var(--color-surface-elevated),  var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding:1.3rem 1.6rem;
  transition: all .35s ease;
  box-shadow: var(--shadow-card);
}

.benefit-card:hover
{
  transform: translateY(-6px);
  border-color: oklch(0.68 0.21 35 / 0.28);
  box-shadow:
  0 18px 40px -20px oklch(0.28 0.13 265 / 0.25),
  0 0 0 1px oklch(0.68 0.21 35 / 0.12);
}

.benefit-icon
{
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(0.68 0.21 35 / 0.10);
  border: 1px solid oklch(0.68 0.21 35 / 0.22);
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.benefit-icon i
{
  font-size: 1.15rem;
}

.benefit-card h3
{
  font-size: 1rem;
  font-weight:550;
  line-height: 1.3;
  color: var(--color-foreground);
  margin-bottom: 0.7rem;
}

.benefit-card p
{
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
}
















.join-section
{
  padding: 6rem 0;
  width:100%;
  background: var(--color-surface-elevated);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.join-header
{
  margin-bottom: 3rem;
}

.join-header h2
{
  font-size:35px;
  line-height: 1.1;
  font-weight:700;
  color: var(--color-primary);
}

.join-grid
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-background);
  border-radius: var(--radius-3xl);
  overflow: hidden;
}

.join-card
{
  padding: 2rem 2rem;
  min-height: 220px;
  border-right: 1px solid var(--color-border);
  transition: all 0.35s ease;
  cursor: pointer;
}

.join-card:last-child
{
  border-right: none;
}

.join-card:hover
{
  background: oklch(0.98 0.01 35 / 0.4);
}

.join-number
{
  display: inline-block;
  font-size:55px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1.8rem;
}

.join-card h3
{
  font-size: 1rem;
  line-height: 1.3;
  font-weight:700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.join-card p
{
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
  max-width: 260px;
}
















.driver-apply-section
{
  padding: 6rem 0;
  background: var(--color-background);
}

.driver-apply-card
{
  max-width: 720px;
  margin-inline: auto;
  padding: 2.5rem;
  background: linear-gradient( 180deg, var(--background), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
}

.driver-apply-header
{
  margin-bottom: 2rem;
}

.driver-apply-header h2
{
  font-size:24px;
  line-height: 1.1;
  font-weight:600;
  color: var(--color-foreground);
  margin-bottom: .8rem;
}

.driver-apply-header p
{
  font-size: 0.87rem;
  line-height: 1.8;
  color: var(--color-muted-foreground);
}

.driver-apply-form
{
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.driver-apply-grid
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
}

.driver-field
{
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.driver-field label
{
  font-size: .72rem;
  font-weight:500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.driver-field input 
{
  width: 100%;
  height:48px;
  border: 1px solid var(--color-input);
  background: var(--color-surface);
  border-radius:23px;
  padding-inline: 18px;
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  outline: none;
  transition: 0.25s ease;
}

.driver-field input:focus
{
  border-color: var(--color-lime);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-lime) 18%, transparent);
}

.driver-field input::placeholder
{
  color: var(--color-foreground);
}

.full-width
{
  width: 100%;
}

.custom-select
{
  position: relative;
  width: 100%;
}

.selected-option
{
  width: 100%;
  height: 56px;
  padding-inline: 1rem;
  border: 1px solid var(--color-input);
  border-radius:23px;
  background:var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: .25s ease;
}

.selected-option span
{
  color: var(--color-foreground);
  font-size: 1rem;
}

.selected-option i
{
  color: var(--color-muted-foreground);
  font-size: .9rem;
  transition: .3s ease;
}

.selected-option:hover
{
  color: var(--color-lime);
}

.custom-select.active .selected-option
{
  border-color: var(--color-lime);
  box-shadow: 0 0 0 4px color-mix( in srgb, var(--color-lime) 18%, transparent);
}

.custom-select.active .selected-option i
{
  transform: rotate(180deg);
}

.select-dropdown
{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: .6rem;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s ease;
  z-index: 100;
}

.custom-select.active .select-dropdown
{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.select-option
{
  padding: .95rem 1rem;
  border-radius: 14px;
  cursor: pointer;
  color: var(--color-foreground);
  transition: .2s ease;
}

.select-option:hover
{
  color: var(--color-lime);
}

.select-option.active
{
  background: oklch(0.68 0.21 35 / 0.10);
  color: var(--color-lime);
}


.driver-apply-btn
{
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 999px;
  background: var(--color-lime);
  color: var(--color-accent-foreground);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: .3s ease;
  box-shadow: var(--shadow-glow);
  margin-top: .5rem;
}

.driver-apply-btn:hover
{
  transform: translateY(-2px);
  filter: brightness(1.03);
}