:root {
  --journey-bg: #080705;
  --journey-panel: #0d1a2b;
  --journey-line: rgba(255, 255, 255, 0.18);
  --journey-violet: #805fa0;
  --journey-green: #005030;
  --journey-rose: #c02080;
  --journey-blue: #105080;
  --journey-cream: #fff3cc;
  --journey-paper-ink: #fff8df;
  --journey-ink: #080705;
}

.journey-page {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 18%, rgba(128, 95, 160, 0.32), transparent 32rem),
    radial-gradient(circle at 78% 24%, rgba(16, 80, 128, 0.28), transparent 28rem),
    radial-gradient(circle at 50% 86%, rgba(192, 32, 128, 0.22), transparent 34rem),
    #080705;
}

.journey-page .site-header {
  background: rgba(6, 17, 29, 0.92);
}

.journey-focus {
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.focus-shell {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.focus-intro {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.focus-intro h1 {
  max-width: 16ch;
  margin-right: auto;
  margin-left: auto;
}

.focus-intro p {
  max-width: 78ch;
  margin-right: auto;
  margin-left: auto;
}

.journey-workbench {
  display: grid;
  grid-template-columns: minmax(560px, 1.12fr) minmax(500px, 0.88fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}

.journey-figure {
  margin: 0;
  padding: clamp(0.6rem, 1.7vw, 1.2rem);
  border: 4px solid var(--journey-paper-ink);
  border-radius: clamp(22px, 4vw, 36px);
  background: var(--journey-cream);
  box-shadow: 10px 10px 0 var(--journey-violet), 0 30px 90px rgba(0, 0, 0, 0.46);
  display: grid;
  place-items: center;
}

.journey-visual {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: auto;
  height: auto;
  overflow: visible;
}

.outer-guide,
.inner-guide {
  fill: none;
  stroke: rgba(7, 17, 31, 0.28);
  stroke-width: 3;
}

.inner-guide {
  stroke-width: 2;
}

.step-zone {
  stroke: rgba(245, 234, 216, 0.94);
  stroke-width: 3;
  cursor: pointer;
  transition: opacity 0.22s ease, filter 0.22s ease, stroke-width 0.22s ease;
}

.tone-violet { fill: var(--journey-violet); }
.tone-green { fill: var(--journey-green); }
.tone-rose { fill: var(--journey-rose); }
.tone-blue { fill: var(--journey-blue); }

.step-zone:hover,
.step-zone:focus-visible,
.step-zone.active {
  opacity: 1;
  filter: drop-shadow(0 12px 12px rgba(7, 17, 31, 0.26));
  stroke-width: 5;
  outline: none;
}

.journey-visual.is-hovering .step-zone:not(.is-hovered) {
  opacity: 0.52;
}

.step-number {
  fill: var(--journey-ink);
  font: 900 30px/1 'Manrope', sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.center-disc {
  fill: var(--journey-ink);
  stroke: var(--journey-cream);
  stroke-width: 5;
}

.center-title,
.center-subtitle {
  fill: var(--journey-cream);
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  text-anchor: middle;
  pointer-events: none;
}

.center-title {
  font-size: 30px;
  letter-spacing: -0.03em;
}

.center-subtitle {
  font-size: 20px;
  opacity: 0.86;
}

.orbit-label {
  fill: rgba(7, 17, 31, 0.9);
  font: 900 24px/1 'Manrope', sans-serif;
  dominant-baseline: middle;
  pointer-events: none;
}

.step-panel {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  height: 660px;
  border: 4px solid var(--journey-paper-ink);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(8, 7, 5, 0.98), rgba(13, 26, 43, 0.98));
  box-shadow: 10px 10px 0 var(--journey-blue), 0 22px 58px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step-panel .eyebrow {
  align-self: flex-start;
  gap: 0.35rem;
}

.step-panel h2 {
  margin: 0.8rem 0 0.25rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.step-panel [data-panel-text] {
  margin-bottom: 0;
}

.panel-subtitle {
  margin: 0 0 1rem;
  color: var(--journey-rose);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.35rem;
  flex-shrink: 0;
}

.panel-actions .button.primary {
  background: var(--journey-rose);
  color: var(--journey-ink);
}

.panel-actions .button.tarot {
  border-color: var(--journey-violet);
  background: rgba(128, 95, 160, 0.18);
}

@media (max-width: 1040px) {
  .journey-workbench {
    grid-template-columns: 1fr;
  }

  .step-panel {
    width: min(780px, 100%);
    height: auto;
    min-height: auto;
    overflow: visible;
    margin: 0 auto;
    text-align: center;
  }

  .panel-actions {
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .journey-focus {
    padding-top: 3.2rem;
  }

  .journey-figure {
    margin-right: -0.45rem;
    margin-left: -0.45rem;
    padding: 0.3rem;
    border-radius: 20px;
  }

  .orbit-label {
    font-size: 19px;
  }

  .step-number {
    font-size: 30px;
  }
}








.seo-panel {
  padding-top: 0;
}

@media (min-width: 1041px) {
  .journey-focus {
    padding-bottom: 3rem;
  }

  .seo-panel {
    padding-top: 1rem;
  }

  .seo-content-rich {
    min-height: 520px;
    display: grid;
    align-content: center;
  }
}

.seo-content-rich {
  max-width: 980px;
  border: 4px solid var(--journey-paper-ink);
  border-radius: 30px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: rgba(8, 7, 5, 0.78);
  box-shadow: 10px 10px 0 var(--journey-green), 0 24px 70px rgba(0, 0, 0, 0.38);
}

.seo-content-rich h2 {
  max-width: 16ch;
  margin: 0.7rem 0 1rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.seo-content-rich p {
  max-width: 82ch;
}





.seo-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.seo-example-grid article {
  border: 2px solid rgba(255, 248, 223, 0.24);
  border-radius: 20px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.seo-example-grid h3 {
  color: var(--text);
  margin-bottom: 0.35rem;
}

.seo-example-grid p {
  margin: 0;
}

.seo-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 780px) {
  .seo-example-grid {
    grid-template-columns: 1fr;
  }
}