/* The selected "Живата нишка" concept, using the existing local Manrope fonts. */
@font-face {
  font-family: 'Site24 Process';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-subset-2.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Site24 Process';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-subset-6.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.process-thread {
  --process-accent: #35d4c6;
  --process-text: #f2f8f8;
  --process-soft: #abc9d1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--process-text);
  background: radial-gradient(ellipse at 65% 48%, #0b3b48 0, transparent 57%), #062a38;
  font-family: 'Site24 Process', Montserrat, 'Segoe UI', sans-serif;
}
.process-thread > .container { max-width: 1240px; }
.process-thread .section-heading { max-width: 800px; margin: 0 auto; text-align: center; }
.process-thread .section-heading .eyebrow { color: var(--process-soft); margin-bottom: 19px; font-size: 13px; font-weight: 600; letter-spacing: .17em; }
.process-thread .section-heading h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.12; letter-spacing: -.05em; font-weight: 800; }
.process-thread .section-heading h2 span { color: var(--process-accent); }
.process-thread .section-heading > p:not(.eyebrow) { color: var(--process-soft); font-size: 18px; line-height: 1.75; margin-top: 21px; }

.process-timeline { position: relative; height: 195px; margin-top: 22px; }
.process-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.process-numbers { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; padding-top: 19px; text-align: center; }
.process-numbers > span { color: transparent; -webkit-text-stroke: 1px #668894; font-size: 118px; line-height: 1; font-weight: 500; letter-spacing: -.075em; user-select: none; }
.process-numbers > .is-current { color: var(--process-accent); -webkit-text-stroke-color: var(--process-accent); }
.process-numbers > .is-complete { color: #8eb6bc; -webkit-text-stroke-color: #8eb6bc; }

.process-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin: 0; padding: 9px 0 0; }
.process-steps > li { min-width: 0; }
.process-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 33px 28px 35px;
  border: 1px solid #78b7bc26;
  border-radius: 26px;
  color: var(--process-text);
  background: linear-gradient(145deg, #164452 0%, #103744 45%, #0a2c39 100%);
  box-shadow: 0 22px 37px -16px #00121de6, 5px 7px 16px -12px #00151fe6, -3px -3px 14px -8px #86dcd438, inset 0 1px 0 #d6fff324, inset 0 -2px 0 #00182480;
  text-align: center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.process-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, #c1fff30b 0%, transparent 36%, transparent 72%, #00172118 100%); box-shadow: inset 1px 0 0 #d6fff30c; }
.process-card-title { display: block; font-size: 25px; line-height: 1.3; letter-spacing: -.035em; font-weight: 800; }
.process-card-copy { display: block; max-width: 32ch; margin-top: 18px; color: var(--process-soft); font-size: 16px; line-height: 1.8; font-weight: 500; }
.process-card[aria-pressed='true'] { transform: translateY(-7px); border-color: #35d4c66b; background: linear-gradient(145deg, #1a5560, #103b47 48%, #0b303b); box-shadow: 0 29px 41px -15px #00121de6, 0 6px 14px -9px #00131fe6, inset 0 1px 0 #c7fff63b, inset 0 -2px 0 #00182480; }
.process-card:focus-visible { outline-color: var(--process-accent); }
.process-card:active { transform: translateY(-2px); }

.process-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; padding-top: 23px; border-top: 1px solid #31515d; text-align: center; }
.process-footer p { color: var(--process-soft); font-size: 16px; line-height: 1.7; }
.process-footer strong { color: var(--process-text); font-weight: 600; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .process-card:hover { transform: translateY(-9px); }
}
@media (max-width: 1023px) {
  .process-numbers, .process-steps { gap: 18px; }
  .process-timeline { height: 170px; }
  .process-numbers > span { font-size: 96px; }
  .process-card { padding: 28px 21px 30px; }
  .process-card-title { font-size: 22px; }
}
@media (max-width: 767px) {
  .process-thread .section-heading h2 { font-size: clamp(30px, 6vw, 42px); }
  .process-thread .section-heading > p:not(.eyebrow) { font-size: 16px; max-width: 33ch; margin-inline: auto; }
  .process-timeline { height: 125px; margin-top: 20px; }
  .process-numbers { gap: 14px; padding-top: 12px; }
  .process-numbers > span { font-size: clamp(58px, 12vw, 80px); }
  .process-steps { grid-template-columns: 1fr; gap: 23px; }
  .process-card { min-height: 0; padding: 28px 25px 30px; border-radius: 24px; }
  .process-card-title { font-size: 24px; }
  .process-card-copy { max-width: 32ch; }
  .process-card[aria-pressed='true'] { transform: translateY(-3px); }
  .process-footer { margin-top: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-thread *, .process-thread *::after { animation: none !important; transition: none !important; }
  .process-card[aria-pressed='true'], .process-card:hover, .process-card:active { transform: none; }
}