/* Water Weaver — services section */
.services-1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px,6vw,72px) 20px 100px;
}
.services-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 32px;
  align-items: end;
}
.services-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans',sans-serif;
}
.services-4 {
  flex-shrink: 0;
  display: block;
}
.services-5 {
  font-size: 14px;
  font-weight: 700;
  color: #1271C4;
}
.services-6 {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#2BA8E0,rgba(43,168,224,0));
}
.services-7 {
  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;
}
.services-8 {
  background: linear-gradient(90deg,#0EA5E9 0%,#1271C4 45%,#5B5CF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.services-9 {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.6;
  color: #3A4250;
}
.services-10 {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  background: #fff;
  color: #0B0F17;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid #DCE1E8;
}
.services-10:hover {
  border-color: #0B0F17 !important;
  color: #0B0F17 !important;
}
.services-11 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F4F6FA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-12 {
  position: relative;
  height: calc(100vh + 420vh);
  margin-top: 8px;
}
.services-13 {
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
  align-items: center;
  gap: 24px;
  overflow: clip;
}
.sp-info { position: relative; z-index: 2; max-width: 380px; align-self: start; padding-top: clamp(16px,4vh,40px); }
.sp-num { display: flex; align-items: baseline; gap: 8px; font-family: Anton,sans-serif; color: #1271C4; }
.sp-num [data-sp-num] { font-size: clamp(56px,7vw,96px); line-height: 1; }
.sp-of { font-size: 20px; color: #9AA7B8; }
.sp-title { margin: 14px 0 0; font-family: Anton,sans-serif; font-weight: 400; font-size: clamp(28px,3.2vw,44px); line-height: 1.05; text-transform: uppercase; color: #0B1624; min-height: 2.1em; }
.sp-desc { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #3A4250; min-height: 4.8em; text-wrap: pretty; }
.sp-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; background: #0B0F17; color: #fff; font-size: 14px; font-weight: 600; padding: 7px 7px 7px 20px; border-radius: 999px; transition: transform .25s ease; }
.sp-link:hover { color: #fff !important; transform: translateY(-2px); }
.sp-link-i { width: 30px; height: 30px; border-radius: 50%; background: #2BA8E0; display: flex; align-items: center; justify-content: center; }
.sp-dots { display: flex; gap: 6px; margin-top: 28px; }
.sp-dot { width: 18px; height: 4px; border-radius: 4px; background: #D6E2EF; transition: background .3s ease, width .3s ease; }
.sp-dot.is-on { width: 34px; background: #1271C4; }
.sp-scene { position: relative; height: 100%; perspective: 1500px; perspective-origin: 50% 40%; }
.sp-orbit { position: absolute; left: 50%; top: 50%; width: 860px; height: 860px; margin: -430px 0 0 -430px; border-radius: 50%; border: 1px dashed rgba(18,113,196,0.18); transform: rotateX(78deg); pointer-events: none; }
.sp-helix { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-8deg); }
.sp-card { position: absolute; left: 0; top: 0; width: 280px; height: 360px; margin: -180px 0 0 -140px; border-radius: 22px; overflow: hidden; background: #0B1624; box-shadow: 0 30px 60px rgba(11,22,36,0.22); will-change: transform, opacity; backface-visibility: hidden; color: #fff; }
.sp-card:hover { color: #fff !important; }
.sp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg,rgba(6,18,34,0) 0%,rgba(6,18,34,0.92) 75%); }
.sp-cn { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #2BA8E0; }
.sp-ct { font-family: Anton,sans-serif; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.sp-go { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #0B1624; display: flex; align-items: center; justify-content: center; font-size: 14px; }
@media (max-width: 899px) {
  .services-13 { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; align-items: stretch; padding-bottom: 20px; }
  .sp-info { order: 2; max-width: none; }
  .sp-num [data-sp-num] { font-size: 44px; }
  .sp-title { font-size: 26px; min-height: 0; margin-top: 6px; }
  .sp-desc { font-size: 14px; min-height: 0; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sp-dots { margin-top: 14px; }
  .sp-card { width: 190px; height: 250px; margin: -125px 0 0 -95px; }
  .sp-ct { font-size: 18px; }
  .sp-orbit { width: 480px; height: 480px; margin: -240px 0 0 -240px; }
}