/* Water Weaver — process section */
.process-1 {
  background: #EAF1F8;
  position: relative;
}
.process-2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px,10vw,110px) 20px;
}
.process-3 {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.process-4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans',sans-serif;
}
.process-5 {
  flex-shrink: 0;
  display: block;
}
.process-6 {
  font-size: 14px;
  font-weight: 700;
  color: #1271C4;
}
.process-7 {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#2BA8E0,rgba(43,168,224,0));
}
.process-8 {
  margin: 18px 0 0;
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 800;
  font-size: clamp(36px,4.8vw,64px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #0B1E3F;
  text-wrap: balance;
}
.process-9 {
  background: linear-gradient(90deg,#0EA5E9 0%,#1271C4 45%,#5B5CF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.process-10 {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: #5A6676;
  text-wrap: balance;
}
.process-11 {
  margin-top: clamp(36px,5vw,56px);
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-areas: "a b b" "a c d" "e e f";
  gap: 16px;
}
.process-12 {
  grid-area: a;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-12:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}
.process-13 {
  position: absolute;
  top: 4%;
  left: 50%;
  width: clamp(150px,52%,240px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 22px rgba(11,22,36,0.18));
  pointer-events: none;
}
.process-14 {
  width: 100%;
  height: 100%;
  animation: wwFloat 6s ease-in-out infinite;
}
.process-15 {
  position: relative;
  max-width: 100%;
}
.process-16 {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1271C4;
  background: #E2F0FC;
  padding: 5px 10px;
  border-radius: 999px;
}
.process-17 {
  margin: 12px 0 0;
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 700;
  font-size: clamp(20px,1.9vw,26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0B1624;
}
.process-18 {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5A6676;
  text-wrap: pretty;
}
.process-19 {
  grid-area: b;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-19:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}
.process-20 {
  position: absolute;
  top: 50%;
  right: 4%;
  width: clamp(96px,34%,170px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 16px 22px rgba(11,22,36,0.18));
  pointer-events: none;
}
.process-21 {
  position: relative;
  max-width: 58%;
}
.process-22 {
  grid-area: c;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-22:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}
.process-23 {
  grid-area: d;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-23:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}
.process-24 {
  grid-area: e;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-24:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}
.process-25 {
  position: absolute;
  top: 50%;
  right: 6%;
  width: clamp(110px,36%,230px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 16px 22px rgba(11,22,36,0.18));
  pointer-events: none;
}
.process-26 {
  position: relative;
  max-width: 56%;
}
.process-27 {
  grid-area: f;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,#FFFFFF 0%,#F2F6FA 100%);
  border: 1px solid #E3EAF2;
  box-shadow: 0 1px 2px rgba(11,22,36,0.04),0 12px 30px rgba(18,113,196,0.06);
  padding: clamp(22px,2.4vw,30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(200px,20vw,240px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.process-27:hover {
  transform: translateY(-6px) !important;
  border-color: #C7DDF1 !important;
  box-shadow: 0 26px 50px rgba(18,113,196,0.14) !important;
}

@media (max-width: 999px) {
  .process-11 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-areas: "a b" "a c" "d e" "f f";
  }
}

@media (max-width: 699px) {
  .process-11 {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "a" "b" "c" "d" "e" "f";
  }
}