.how-page { color: var(--ink); background: #fff; }
.how-page main { overflow: hidden; }
.how-page .main-nav a.is-current { color: var(--pink); }
.how-page .main-nav a.is-current::after { transform: scaleX(1); }
.how-page .footer__links .footer-pending { display: block; color: #8a8188; font-size: 13px; line-height: 1.65; }
.how-page .footer__socials .social-placeholder { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; opacity: .8; }
.how-page .footer__socials .social-placeholder:first-child { background: var(--pink); }
.how-page .footer__socials .social-placeholder:first-child img { filter: brightness(0) invert(1); }

.process { padding: 76px 0 82px; background: #fff; }
.process__heading { margin-bottom: 23px; }
.process__heading h1 { margin: 9px 0 0; font: 900 clamp(39px, 4.2vw, 61px)/.99 Montserrat, sans-serif; letter-spacing: -.055em; }

.process__description {
  position: relative;
  margin-bottom: 34px;
  padding: 24px 31px;
  border: 1px solid #eadce4;
  border-left: 6px solid var(--pink);
  border-radius: 21px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(247, 0, 118, .08) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(105deg, #fff8fb, #fffdf2 55%, #edfafd);
  box-shadow: 0 13px 28px rgba(41, 21, 34, .07);
}
.process__description::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -49px;
  width: 120px;
  height: 120px;
  border: 21px solid rgba(36, 188, 216, .12);
  border-radius: 50%;
}
.process__description p { position: relative; z-index: 1; margin: 0; color: #5f555d; font-size: 16px; line-height: 1.68; }

.process-route {
  position: relative;
  padding: 48px 84px;
  border: 1px solid #eadfe5;
  border-radius: 38px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "one two" "four three" "five six";
  gap: 92px 100px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(247, 0, 118, .09) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(145deg, #fff8fb, #fffdf3 46%, #f2fbfd);
}
.process-route::before { content: ''; position: absolute; width: 280px; height: 280px; left: -120px; top: 35%; border: 43px solid rgba(247, 0, 118, .06); border-radius: 50%; }
.process-route::after { content: ''; position: absolute; width: 330px; height: 330px; right: -150px; bottom: 9%; border: 47px solid rgba(36, 188, 216, .08); border-radius: 50%; }

.step-card {
  --step-accent: var(--pink);
  --step-tint: #fff0f7;
  position: relative;
  z-index: 2;
  min-height: 310px;
  border: 1px solid rgba(24, 19, 43, .08);
  border-radius: 27px;
  display: grid;
  grid-template-columns: minmax(180px, .84fr) minmax(0, 1.16fr);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 38px rgba(41, 21, 34, .09);
  transition: transform .22s ease, box-shadow .22s ease;
}
.step-card:hover { transform: translateY(-5px); box-shadow: 0 25px 48px rgba(41, 21, 34, .14); }
.step-card--one { grid-area: one; --step-accent: #e70070; --step-tint: #fff0f7; }
.step-card--two { grid-area: two; --step-accent: #7752d4; --step-tint: #f0ebff; }
.step-card--three { grid-area: three; --step-accent: #ef9f00; --step-tint: #fff5cf; }
.step-card--four { grid-area: four; --step-accent: #009fc0; --step-tint: #e7faff; }
.step-card--five { grid-area: five; --step-accent: #e70070; --step-tint: #fff0f7; }
.step-card--six { grid-area: six; --step-accent: #6841c7; --step-tint: #f0ebff; }
.step-card__visual {
  min-height: 100%;
  background-image: url('./assets/process-steps-v1.webp');
  background-repeat: no-repeat;
  background-size: 300% 200%;
}
.step-card__visual--one { background-position: 0% 0%; }
.step-card__visual--two { background-position: 50% 0%; }
.step-card__visual--three { background-position: 100% 0%; }
.step-card__visual--four { background-position: 0% 100%; }
.step-card__visual--five { background-position: 50% 100%; }
.step-card__visual--six { background-position: 100% 100%; }
.step-card--two .step-card__visual,
.step-card--three .step-card__visual,
.step-card--six .step-card__visual { order: 2; }
.step-card__body { position: relative; padding: 29px 27px 27px; display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(145deg, #fff, var(--step-tint)); }
.step-card__meta { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--step-accent); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.step-card__number { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--step-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--step-accent) 28%, transparent); font: 900 13px Montserrat, sans-serif; letter-spacing: 0; }
.step-card h3 { margin: 18px 0 10px; font: 900 clamp(22px, 1.75vw, 29px)/1.08 Montserrat, sans-serif; letter-spacing: -.04em; }
.step-card p { margin: 0; color: #685e65; font-size: 14px; line-height: 1.58; }
.step-card a { margin-top: auto; padding-top: 17px; color: var(--step-accent); font-size: 12px; font-weight: 900; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.route-connector { position: absolute; z-index: 1; pointer-events: none; }
.route-connector::after { content: ''; position: absolute; width: 0; height: 0; }
.route-connector--one,
.route-connector--three,
.route-connector--five { left: calc(50% - 50px); width: 100px; border-top: 4px dashed var(--pink); }
.route-connector--one { top: 17.2%; }
.route-connector--three { top: 50%; }
.route-connector--five { top: 82.8%; }
.route-connector--one::after,
.route-connector--five::after { right: -2px; top: -9px; border-left: 13px solid var(--pink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.route-connector--three::after { left: -2px; top: -9px; border-right: 13px solid var(--pink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.route-connector--two { right: 34px; top: 17.2%; width: 52px; height: 32.8%; border-top: 4px dashed var(--pink); border-right: 4px dashed var(--pink); border-bottom: 4px dashed var(--pink); border-radius: 0 36px 36px 0; }
.route-connector--two::after { left: -4px; bottom: -9px; border-right: 13px solid var(--pink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.route-connector--four { left: 34px; top: 50%; width: 52px; height: 32.8%; border-top: 4px dashed var(--pink); border-left: 4px dashed var(--pink); border-bottom: 4px dashed var(--pink); border-radius: 36px 0 0 36px; }
.route-connector--four::after { right: -4px; bottom: -9px; border-left: 13px solid var(--pink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

.how-cta { padding: 0 0 78px; background: #fff; }
.how-cta__panel { position: relative; min-height: 270px; padding: 52px 62px; border-radius: 30px; display: flex; align-items: center; justify-content: space-between; gap: 45px; overflow: hidden; background:
  radial-gradient(circle at 1px 1px, rgba(24, 19, 43, .12) 1px, transparent 1.2px) 0 0 / 18px 18px,
  linear-gradient(112deg, #ffd63e 0 55%, #ff8dc2 55% 78%, #41c7dd 78% 100%);
}
.how-cta__panel::after { content: ''; position: absolute; width: 160px; height: 160px; right: -42px; top: -55px; border: 24px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.how-cta__panel > div { position: relative; z-index: 1; }
.how-cta__panel h2 { margin: 9px 0 8px; font: 900 clamp(39px, 4vw, 57px)/1 Montserrat, sans-serif; letter-spacing: -.055em; }
.how-cta__panel p:not(.eyebrow) { margin: 0; color: #423949; font-size: 15px; }
.how-cta__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

@media (max-width: 1280px) {
  .process-route { padding-inline: 66px; gap: 80px 76px; }
  .route-connector--one,
  .route-connector--three,
  .route-connector--five { left: calc(50% - 38px); width: 76px; }
  .route-connector--two { right: 25px; width: 42px; }
  .route-connector--four { left: 25px; width: 42px; }
  .step-card { grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr); }
}

@media (max-width: 1080px) {
  .process-route { padding: 42px; grid-template-columns: 1fr; grid-template-areas: "one" "two" "three" "four" "five" "six"; gap: 31px; }
  .process-route::before { left: -180px; }
  .process-route::after { right: -205px; }
  .process-route > .route-connector { display: none; }
  .process-route::before { content: ''; position: absolute; width: 4px; height: calc(100% - 120px); left: 21px; top: 60px; border: 0; border-radius: 0; background: repeating-linear-gradient(to bottom, var(--pink) 0 8px, transparent 8px 15px); }
  .step-card { min-height: 280px; grid-template-columns: minmax(225px, .7fr) minmax(0, 1.3fr); }
  .step-card--two .step-card__visual,
  .step-card--three .step-card__visual,
  .step-card--six .step-card__visual { order: 0; }
}

@media (max-width: 760px) {
  .process { padding: 47px 0 54px; }
  .process__heading { margin-bottom: 24px; }
  .process__heading h1 { font-size: clamp(36px, 10vw, 48px); }
  .process__description { margin-bottom: 25px; padding: 21px 20px; grid-template-columns: 1fr; gap: 12px; }
  .process__description p { font-size: 15px; }
  .process-route { margin-inline: -5px; padding: 25px 16px 25px 35px; border-radius: 24px; gap: 22px; }
  .process-route::before { left: 17px; top: 45px; height: calc(100% - 90px); }
  .step-card { min-height: 0; grid-template-columns: 1fr; border-radius: 21px; }
  .step-card__visual { min-height: 230px; aspect-ratio: 4 / 3; }
  .step-card__body { min-height: 245px; padding: 23px 21px; }
  .step-card h3 { font-size: 25px; }
  .step-card p { font-size: 14px; }
  .how-cta { padding-bottom: 52px; }
  .how-cta__panel { min-height: 0; padding: 36px 23px; border-radius: 23px; align-items: flex-start; flex-direction: column; }
  .how-cta__panel h2 { font-size: clamp(37px, 10vw, 49px); }
  .how-cta__actions { width: 100%; justify-content: flex-start; }
  .how-cta__actions .button { width: 100%; }
}

/* Provozní metadata a odkazy musí zůstat čitelné i mimo velký desktop. */
.step-card__meta,
.step-card__number,
.step-card a,
.how-page .footer__links .footer-pending { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .step-card { transition: none; }
}

/* V2: shodná šířka fotografie a textu u karet v obou směrech */
@media (min-width: 761px) {
  .step-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}