/* ============================================
   THREE-STEP JOURNEY — LIGHT MODE
   ============================================ */

.journey {
  /* Brand colors */
  --j-primary:   var(--primary,   #fb8500);
  --j-secondary: var(--secondary, #ffb703);
  --j-accent-1:  var(--accent-1,  #219ebc);
  --j-accent-2:  var(--accent-2,  #023047);

  /* Light neutrals */
  --j-bg:          #fafbfc;
  --j-surface:     #ffffff;
  --j-text:        #0f172a;
  --j-muted:       #4b5563;
  --j-dim:         #64748b;
  --j-border:      #e5e7eb;
  --j-border-soft: #f1f5f9;

  /* Type */
  --j-font-display: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  --j-font-body:    var(--font-body, 'Inter', system-ui, sans-serif);

  /* Radius + motion */
  --j-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: clamp(4.5rem, 11vh, 8rem) 0;
  background: var(--j-bg);
  color: var(--j-text);
  font-family: var(--j-font-body);
  border-top: 1px solid var(--j-border-soft);
}

.journey__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(ellipse 55% 45% at 50% 0%,
      rgba(251, 133, 0, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 100%,
      rgba(33, 158, 188, 0.05) 0%, transparent 65%);
}

/* ============================================
   INTRO
   ============================================ */
.journey__intro {
  max-width: 780px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.journey__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--j-primary);
}

.journey__eyebrow::before,
.journey__eyebrow::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.journey__title {
  margin-top: 1.2rem;

  font-family: var(--j-font-display);
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.032em;
  color: var(--j-text);
  text-wrap: balance;
}

.journey__title-sub {
  display: block;
  margin-top: 0.35em;

  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--j-dim);
}

/* ============================================
   GRID
   ============================================ */
.journey__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);

  list-style: none;
  padding: 0;
  margin: 0;
}

.journey__step {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: clamp(1.75rem, 3vw, 2.35rem);

  border: 1px solid var(--j-border);
  border-radius: 18px;
  background: var(--j-surface);

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 10px 30px -22px rgba(15, 23, 42, 0.1);

  transition:
    transform    0.4s var(--j-ease),
    border-color 0.4s var(--j-ease),
    box-shadow   0.4s var(--j-ease);
}

.journey__step:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:
    0 4px 10px -6px rgba(15, 23, 42, 0.06),
    0 18px 45px -24px rgba(15, 23, 42, 0.14);
}

/* ============================================
   ICON + SLOW-SPIN RING
   ============================================ */
.journey__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 78px;
  height: 78px;

  margin-bottom: 1.5rem;
}

/* The rotating ring behind the icon — carries the "slow-spin" spirit */
.journey__ring {
  position: absolute;
  inset: 0;

  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--journey-color);
  border-right-color: color-mix(in srgb, var(--journey-color) 40%, transparent);
  opacity: 0.85;

  animation: journeySpin 14s linear infinite;
}

@keyframes journeySpin {
  to { transform: rotate(360deg); }
}

/* Static icon tile */
.journey__icon {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;
  border-radius: 50%;

  background: color-mix(in srgb, var(--journey-color) 12%, #ffffff);
  color: var(--journey-color);

  transition: transform 0.4s var(--j-ease);
}

.journey__step:hover .journey__icon {
  transform: scale(1.08);
}

.journey__icon i {
  font-size: 1.65rem;
  line-height: 1;
}

/* Fallback for very old browsers */
@supports not (background: color-mix(in srgb, red, blue)) {
  .journey__icon {
    background: rgba(251, 133, 0, 0.1);
  }
  .journey__ring {
    border-right-color: transparent;
  }
}

/* ============================================
   TEXT
   ============================================ */
.journey__step-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;

  font-family: var(--j-font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--j-text);
}

.journey__num {
  flex: none;

  font-family: var(--j-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;

  color: var(--journey-color);
}

.journey__step-body {
  margin-top: 0.75rem;

  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--j-muted);
  text-wrap: pretty;
}

/* ============================================
   CTA
   ============================================ */
.journey__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.journey__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: 1rem 2rem;

  border-radius: 100px;
  background: linear-gradient(120deg, var(--j-primary), var(--j-secondary));
  color: #1a0f00;

  font-family: var(--j-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 26px -12px rgba(251, 133, 0, 0.75);

  transition:
    transform   0.3s var(--j-ease),
    box-shadow  0.3s var(--j-ease),
    filter      0.3s var(--j-ease);
}

.journey__button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 16px 42px -14px rgba(251, 133, 0, 0.9);
}

.journey__button:active {
  transform: translateY(0) scale(0.985);
}

.journey__wa-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .journey__grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .journey__step {
    padding: 1.5rem 1.5rem 1.6rem;
  }
}

@media (max-width: 640px) {
  .journey__eyebrow {
    font-size: 0.66rem;
  }

  .journey__eyebrow::before,
  .journey__eyebrow::after {
    width: 1.25rem;
  }

  .journey__icon-wrap {
    width: 68px;
    height: 68px;
    margin-bottom: 1.25rem;
  }

  .journey__icon {
    width: 56px;
    height: 56px;
  }

  .journey__icon i {
    font-size: 1.4rem;
  }

  .journey__button {
    width: 100%;
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey__ring {
    animation: none;
  }

  .journey__step,
  .journey__icon,
  .journey__button {
    transition-duration: 0.01ms;
  }
}