/* CREANODE homepage: process */
.home-process-system {display: grid;
  gap: clamp(26px, 3vw, 42px);}

.home-process-system {position: relative;
  overflow: hidden;
  min-height: clamp(620px, 78vh, 820px);
  align-content: center;
  border-color: rgba(217, 201, 142, .22);
  background:
    radial-gradient(circle at 78% 16%, rgba(217, 201, 142, .115), transparent 16rem),
    radial-gradient(circle at 18% 80%, rgba(245, 242, 223, .055), transparent 20rem),
    linear-gradient(145deg, rgba(245, 242, 223, .064), rgba(15, 17, 13, .46) 62%, rgba(228, 154, 46, .025));}

.home-process-system::before {content: "";
  position: absolute;
  inset: 22px;
  border-radius: 28px;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 248, 232, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 232, .028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 55% 48%, black, transparent 74%);
  opacity: .58;}

.home-process-system > * {position: relative;
  z-index: 1;}

.home-process-headline h3 {max-width: 820px;}

.home-process-wow {display: grid;
  grid-template-columns: minmax(160px, .46fr) minmax(290px, .9fr) minmax(260px, .68fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);}

.home-process-orbit {position: relative;
  aspect-ratio: 1;
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(217, 201, 142, .20);
  background:
    radial-gradient(circle, rgba(217, 201, 142, .16), rgba(245, 242, 223, .045) 42%, transparent 67%),
    rgba(8, 9, 7, .26);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .055),
    0 24px 70px rgba(0, 0, 0, .25),
    0 0 56px rgba(217, 201, 142, .07);}

.home-process-orbit::before,
.home-process-orbit::after {content: "";
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  border: 1px dashed rgba(217, 201, 142, .24);}

.home-process-orbit::after {inset: 48px;
  border-style: solid;
  border-color: rgba(255, 248, 232, .12);}

.home-process-orbit strong {display: block;
  color: rgba(255, 248, 232, .98);
  font-size: clamp(.92rem, 1vw, 1.08rem);
  font-weight: 900;
  letter-spacing: .15em;}

.home-process-orbit small {display: block;
  margin-top: 8px;
  color: rgba(217, 201, 142, .88);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;}

.home-process-orbit-dot {position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(217, 201, 142, .90);
  box-shadow: 0 0 22px rgba(217, 201, 142, .52);}

.home-process-orbit-dot-a {top: 16%; left: 56%;}

.home-process-orbit-dot-b {right: 15%; bottom: 34%;}

.home-process-orbit-dot-c {left: 20%; bottom: 20%;}

.home-process-rail {position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;}

.home-process-rail::before {content: "";
  position: absolute;
  left: 28px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(217, 201, 142, .10), rgba(217, 201, 142, .62), rgba(245, 242, 223, .18));
  box-shadow: 0 0 18px rgba(217, 201, 142, .18);}

.home-process-step {position: relative;
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 242, 223, .12);
  border-radius: 20px;
  color: inherit;
  text-align: left;
  background: rgba(245, 242, 223, .040);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  cursor: pointer;
  transition:
    transform .28s var(--ease),
    border-color .28s var(--ease),
    background-color .28s var(--ease),
    box-shadow .28s var(--ease);}

.home-process-step:hover,
.home-process-step:focus-visible,
.home-process-step.is-active {transform: translateX(8px);
  border-color: rgba(217, 201, 142, .34);
  background:
    radial-gradient(circle at 82% 24%, rgba(217, 201, 142, .10), transparent 9rem),
    rgba(245, 242, 223, .060);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .095);
  outline: none;}

.home-process-number {position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(217, 201, 142, .34);
  color: rgba(217, 201, 142, .96);
  background: rgba(8, 9, 7, .58);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .09em;
  box-shadow: 0 0 22px rgba(217, 201, 142, .12);}

.home-process-step.is-active .home-process-number,
.home-process-step:hover .home-process-number,
.home-process-step:focus-visible .home-process-number {color: #080907;
  background: linear-gradient(135deg, #fffbea, #d9c98e 62%, #e49a2e);
  box-shadow: 0 0 30px rgba(217, 201, 142, .25);}

.home-process-content strong {display: block;
  color: rgba(255, 248, 232, .96);
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  line-height: 1.08;
  letter-spacing: -.035em;}

.home-process-content small {display: block;
  margin-top: 8px;
  color: rgba(217, 201, 142, .78);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;}

.home-process-selected {min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid rgba(217, 201, 142, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 16%, rgba(217, 201, 142, .13), transparent 12rem),
    linear-gradient(145deg, rgba(245, 242, 223, .070), rgba(12, 14, 11, .48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 22px 64px rgba(0, 0, 0, .24);}

.home-process-selected-label {color: rgba(217, 201, 142, .82);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;}

.home-process-selected-top strong {display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 999px;
  color: #080907;
  background: linear-gradient(135deg, #fffbea, #d9c98e 62%, #e49a2e);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;}

.home-process-selected h4 {margin: 0;
  color: rgba(255, 248, 232, .98);
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2vw, 2.45rem);
  line-height: .98;
  letter-spacing: -.055em;}

.home-process-selected p {margin: 18px 0 0;
  color: rgba(255, 248, 232, .72);
  line-height: 1.58;}

.home-process-selected small {display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(217, 201, 142, .20);
  border-radius: 999px;
  color: rgba(217, 201, 142, .86);
  background: rgba(8, 9, 7, .30);
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;}