:root {
  --amber: #F59E0B;
  --amber-light: #FCD34D;
  --amber-dark: #D97706;
  --amber-dim: rgba(245, 158, 11, 0.12);
  --amber-border: rgba(245, 158, 11, 0.35);
}

/* Service pills */
.service-pills { display: flex; flex-wrap: wrap; gap: 10px; }

  .service-pill {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    font-size: 12.5px; font-weight: 400;
    padding: 8px 16px; border-radius: 100px; letter-spacing: 0.2px;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }

  .service-pill:hover {
    background: var(--amber-dim); border-color: var(--amber-border); color: var(--amber-light);
  }

  .service-pill .pill-icon { font-size: 15px; }


  /* ══════════════════ HOW IT WORKS ══════════════════ */
  .how-it-works { background: var(--deep); padding: 90px 5vw; }
  .how-it-works .section-eyebrow { color: var(--amber-light); }
  .how-it-works .section-title  { color: var(--white); }
  .how-it-works .section-sub    { color: rgba(255,255,255,0.45); }

  .steps-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0; max-width: 960px; margin: 0 auto; position: relative;
  }

  .steps-grid::before {
    content: ''; position: absolute;
    top: 36px; left: calc(12.5% + 16px); right: calc(12.5% + 16px);
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(245,158,11,0.3) 0px, rgba(245,158,11,0.3) 8px, transparent 8px, transparent 16px);
    z-index: 0;
  }

  .step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }

  .step-number {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; position: relative;
    color: var(--amber-light);
    transition: background var(--transition), border-color var(--transition);
  }

  .step:hover .step-number { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.5); }

  .step-glyph {
    font-size: 28px;
    font-weight: 200;
    line-height: 1;
    font-family: system-ui, 'Segoe UI', 'Noto Sans', sans-serif;
  }

  .step-number svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .step-number svg path,
  .step-number svg line,
  .step-number svg circle,
  .step-number svg rect {
    stroke: currentColor;
    fill: none;
  }

  .step-num-badge {
    position: absolute; top: -4px; right: -4px;
    width: 22px; height: 22px; background: var(--amber); border-radius: 50%;
    font-size: 11px; font-weight: 500; color: var(--deep);
    display: flex; align-items: center; justify-content: center;
  }

  .step-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 10px; }
  .step-desc  { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.65; }

  /* ══════════════════ FLEET OVERVIEW ══════════════════ */
  .fleet-showcase { background: var(--white); padding: 90px 5vw; }

  .fleet-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; max-width: 1200px; margin: 0 auto;
  }

  .fleet-card {
    border: 1.5px solid var(--surface2); border-radius: 14px;
    padding: 28px 20px 22px; text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    background: var(--surface); position: relative; overflow: hidden;
  }

  .fleet-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--amber-dark), var(--amber-light));
    opacity: 0; transition: opacity var(--transition);
  }

  .fleet-card:hover { border-color: rgba(245,158,11,0.3); box-shadow: 0 10px 36px rgba(13,27,42,0.08); transform: translateY(-4px); }
  .fleet-card:hover::before { opacity: 1; }

  .fleet-icon { font-size: 42px; margin-bottom: 12px; display: block; }
  .fleet-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--deep); margin-bottom: 4px; }
  .fleet-eg   { font-size: 11.5px; color: var(--text-muted); margin-bottom: 16px; }

  .fleet-specs { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
  .fleet-spec  { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .spec-val    { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--amber-dark); line-height: 1; }
  .spec-label  { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }