:root {
  color-scheme: light dark;
  --font-family: 'Poppins', sans-serif;
  --bg-gradient-start: #f5f6fb;
  --bg-gradient-end: #dde6f6;
  --heading-color: #253c78;
  --text-color: #2f3347;
  --step-bg: rgba(255, 255, 255, 0.88);
  --step-hover-bg: rgba(255, 255, 255, 0.98);
  --tooltip-bg: #253c78;
  --tooltip-text: #f7f9ff;
  --button-bg: rgba(37, 60, 120, 0.08);
  --button-color: #253c78;
  --button-border: rgba(37, 60, 120, 0.35);
  --shadow-color: rgba(27, 39, 56, 0.12);
  --shadow-hover: rgba(27, 39, 56, 0.18);
  --footer-color: #4a4d5d;
  --connector-start: rgba(37, 60, 120, 0.18);
  --connector-end: rgba(37, 60, 120, 0.45);
  --connector-solid: rgba(37, 60, 120, 0.55);
  --accent-primary: #6e8efb;
  --accent-secondary: #a06ffb;
  --accent-tertiary: #71e8e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-gradient-start: #101522;
    --bg-gradient-end: #162032;
    --heading-color: #e0e8ff;
    --text-color: #d7d9e3;
    --step-bg: rgba(28, 36, 56, 0.78);
    --step-hover-bg: rgba(36, 46, 70, 0.92);
    --tooltip-bg: #e0e8ff;
    --tooltip-text: #101522;
    --button-bg: rgba(96, 124, 203, 0.12);
    --button-color: #e0e8ff;
    --button-border: rgba(117, 146, 214, 0.4);
    --shadow-color: rgba(4, 10, 22, 0.55);
    --shadow-hover: rgba(6, 15, 31, 0.72);
    --footer-color: #b9bfd3;
    --connector-start: rgba(110, 142, 251, 0.25);
    --connector-end: rgba(112, 116, 196, 0.6);
    --connector-solid: rgba(124, 136, 233, 0.72);
    --accent-primary: #6e8efb;
    --accent-secondary: #ff7ba9;
    --accent-tertiary: #71e8e0;
  }
}

body[data-theme='light'] {
  --bg-gradient-start: #f5f6fb;
  --bg-gradient-end: #dde6f6;
  --heading-color: #253c78;
  --text-color: #2f3347;
  --step-bg: rgba(255, 255, 255, 0.88);
  --step-hover-bg: rgba(255, 255, 255, 0.98);
  --tooltip-bg: #253c78;
  --tooltip-text: #f7f9ff;
  --button-bg: rgba(37, 60, 120, 0.08);
  --button-color: #253c78;
  --button-border: rgba(37, 60, 120, 0.35);
  --shadow-color: rgba(27, 39, 56, 0.12);
  --shadow-hover: rgba(27, 39, 56, 0.18);
  --footer-color: #4a4d5d;
  --connector-start: rgba(37, 60, 120, 0.18);
  --connector-end: rgba(37, 60, 120, 0.45);
  --connector-solid: rgba(37, 60, 120, 0.55);
  --accent-primary: #6e8efb;
  --accent-secondary: #a06ffb;
  --accent-tertiary: #71e8e0;
}

body[data-theme='dark'] {
  --bg-gradient-start: #101522;
  --bg-gradient-end: #162032;
  --heading-color: #e0e8ff;
  --text-color: #d7d9e3;
  --step-bg: rgba(28, 36, 56, 0.78);
  --step-hover-bg: rgba(36, 46, 70, 0.92);
  --tooltip-bg: #e0e8ff;
  --tooltip-text: #101522;
  --button-bg: rgba(96, 124, 203, 0.12);
  --button-color: #e0e8ff;
  --button-border: rgba(117, 146, 214, 0.4);
  --shadow-color: rgba(4, 10, 22, 0.55);
  --shadow-hover: rgba(6, 15, 31, 0.72);
  --footer-color: #b9bfd3;
  --connector-start: rgba(110, 142, 251, 0.25);
  --connector-end: rgba(112, 116, 196, 0.6);
  --connector-solid: rgba(124, 136, 233, 0.72);
  --accent-primary: #6e8efb;
  --accent-secondary: #ff7ba9;
  --accent-tertiary: #71e8e0;
}

body {
  font-family: var(--font-family);
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px;
  color: var(--text-color);
  transition: background 0.5s ease, color 0.5s ease;
}

h1 {
  color: var(--heading-color);
  margin-bottom: 20px;
  text-align: center;
}

.theme-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--button-border);
  background-color: var(--button-bg);
  color: var(--button-color);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
}

.theme-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px var(--shadow-hover);
}

.flow {
  width: min(960px, 100%);
  margin-top: 32px;
}

.flow-steps {
  list-style: none;
  padding: 0 0 0 52px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}

.flow-steps::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 28px;
  width: 4px;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--connector-start) 0%, var(--connector-end) 100%);
}

.step-card {
  position: relative;
  background: var(--step-bg);
  border-radius: 20px;
  padding: 24px 28px 26px 32px;
  box-shadow: 0 10px 18px var(--shadow-color);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  --glow-x: 50%;
  --glow-y: 50%;
  z-index: 0;
  overflow: hidden;
}

.step-card:hover,
.step-card:focus-visible {
  transform: translateX(6px);
  box-shadow: 0 16px 30px var(--shadow-hover);
  background-color: var(--step-hover-bg);
}

.step-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: conic-gradient(
    from 180deg at var(--glow-x) var(--glow-y),
    var(--accent-tertiary),
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: -2;
  filter: blur(12px);
}

.step-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.32), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.18), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.step-card:hover::before,
.step-card:focus-visible::before {
  opacity: 0.9;
  transform: scale(1.05);
}

.step-card:hover::after,
.step-card:focus-visible::after {
  opacity: 0.8;
}

.step-card h2 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--heading-color);
}

.step-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-color);
}

.step-number {
  position: absolute;
  left: -52px;
  top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 19px;
  background: var(--heading-color);
  color: var(--tooltip-text);
  box-shadow: 0 6px 12px var(--shadow-color);
}

.step-connector {
  position: absolute;
  bottom: -32px;
  left: -30px;
  width: 4px;
  height: 32px;
  background: linear-gradient(180deg, var(--connector-start) 0%, var(--connector-solid) 100%);
  border-radius: 999px;
  z-index: 1;
}

.step-connector::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: var(--connector-solid) transparent transparent transparent;
}

.step-connector--end,
.step-card:last-child .step-connector {
  display: none;
}

@media (max-width: 780px) {
  body {
    padding: 24px 8px 64px;
  }

  .flow-steps {
    padding-left: 48px;
    gap: 24px;
  }

  .step-card {
    padding: 20px 22px 22px 28px;
  }
}

.goal {
  max-width: 640px;
  text-align: center;
  margin-top: 40px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

footer {
  margin-top: 40px;
  font-size: 13px;
  color: var(--footer-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'Bree Serif', serif;
}

footer strong {
  font-weight: 600;
}

.footer-note {
  background: rgba(255, 255, 255, 0.12);
  padding: 10px 18px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

body[data-theme='dark'] .footer-note {
  background: rgba(16, 24, 40, 0.4);
}