.shero{min-height:600px;padding:160px 0 92px;text-align:center}
.shero .hero__title{font-size:clamp(2rem,3.85vw,3.45rem);line-height:1.18}
.shero .hero__lead{max-width:840px;font-size:clamp(1rem,1.28vw,1.18rem)}
.shero .hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.shero .btn--ghost{padding:15px 26px;font-size:1rem}

.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;
  background:#DCEBF6;color:#12303F;font-size:.85rem;font-weight:700;letter-spacing:.01em;
}
.chip--dark{background:var(--teal);color:#fff;font-size:.82rem}
.rule{width:48px;height:3px;border-radius:2px;background:var(--blue);margin:22px 0 24px}
.lede{font-size:1rem;line-height:1.68;color:#3B454E;font-weight:500}
.lede+.lede{margin-top:18px}

/* ---- overview ---- */
.ovw{background:#fff}
.ovw__grid{display:grid;grid-template-columns:1.42fr 1fr;gap:50px;align-items:start}
.ovw__title{margin-top:22px;font-size:clamp(1.3rem,1.9vw,1.72rem);line-height:1.38}
.ovw .btn{margin-top:28px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;position:relative}
.steps3::before,.steps3::after{
  content:"";position:absolute;top:50%;width:22px;height:0;
  border-top:2px dotted #9BC3DC;
}
.steps3::before{left:calc(33.333% - 15px)}
.steps3::after{left:calc(66.666% - 15px)}
.mini{
  display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:18px 15px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.mini:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,58,90,.10);border-color:#BEDCEE}
.mini__ic{width:48px;height:48px;border-radius:50%;background:#E7F2F9;display:grid;place-items:center;color:var(--blue);flex:none}
.mini__ic svg{width:22px;height:22px}
.mini__body{display:block}
.mini__n{display:block;font-size:1.05rem;font-weight:800;color:var(--blue);letter-spacing:-.01em}
.mini__rule{width:34px;height:2px;background:var(--blue);margin:7px 0 9px}
.mini__t{display:block;font-size:.92rem;font-weight:700;line-height:1.35;color:#141C23}

.scope{
  border:2px solid #4E9DCB;border-radius:18px;padding:30px 30px 32px;background:#fff;
  box-shadow:0 16px 40px rgba(16,64,100,.07);
}
.scope__head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.scope__hex{width:74px;height:82px;flex:none;position:relative;display:grid;place-items:center}
.scope__hex svg.hexbg{position:absolute;inset:0;width:100%;height:100%}
.scope__hex svg.hexic{position:relative;width:32px;height:32px;color:#fff}
.scope__eyebrow{font-size:.86rem;font-weight:500;color:#4A5761;letter-spacing:.02em}
.scope__title{margin-top:2px;font-size:1.42rem;letter-spacing:-.02em}
.scope__list{display:flex;flex-direction:column;gap:12px}
.scope__row{
  display:flex;align-items:center;gap:16px;padding:13px 18px;border:1px solid #DCE9F3;border-radius:11px;
  background:#fff;font-size:1rem;font-weight:500;color:#182129;
  transition:border-color .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease);
}
.scope__row:hover{border-color:#8FC4E2;background:#F7FBFE;transform:translateX(4px)}
.scope__row-ic{width:38px;height:38px;border-radius:50%;background:#E7F2F9;display:grid;place-items:center;color:var(--blue);flex:none}
.scope__row-ic svg{width:18px;height:18px}
.scope__row-go{margin-left:auto;width:16px;height:16px;color:#93A3AF;flex:none;transition:transform .35s var(--ease)}
.scope__row:hover .scope__row-go{transform:translateX(3px);color:var(--blue)}

/* ---- what you get ---- */
.gains .head{max-width:980px}
.gains{position:relative;overflow:hidden;background:linear-gradient(105deg,#F1F4FD 0%,#F8F8FF 42%,#FFFFFF 60%,#F7F1FB 100%)}
.gains__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2}
.gcard{
  display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid #E2EAF4;border-radius:12px;
  padding:26px 26px 26px 24px;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.gcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(20,60,100,.10)}
.gcard__ic{
  width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#DCEBF6;color:var(--blue);box-shadow:0 0 0 6px #fff,0 0 0 7px #CFE3F1;
}
.gcard__ic svg{width:32px;height:32px}
.gcard__t{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.gcard__p{margin-top:9px;font-size:.875rem;line-height:1.58;color:#4B5761;font-weight:500}

/* ---- why zeoark ---- */
.why{background:#fff}
.why__card{
  display:grid;grid-template-columns:.86fr 1fr;gap:52px;align-items:center;
  border:1px solid #E4EAF0;border-radius:20px;padding:34px;background:#fff;
  box-shadow:0 14px 38px rgba(18,50,80,.06);
}
.why__media{border-radius:12px;overflow:hidden;background:#0B0D12}
.why__media svg,.why__media img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)}
.why__card:hover .why__media svg,.why__card:hover .why__media img{transform:scale(1.03)}
.why__title{margin-top:20px;font-size:clamp(1.2rem,1.75vw,1.58rem);line-height:1.36}
.checks--sm li{font-size:.95rem;font-weight:500;color:#26313A;gap:14px}
.checks--sm svg{width:26px;height:26px}

/* ---- how we select technology ---- */
.tech-sel{position:relative;overflow:hidden;background:linear-gradient(110deg,#F8F9FD 0%,#F6F7FE 45%,#F3F1FD 72%,#EFEBFC 100%)}
.tech-sel__grid{display:grid;grid-template-columns:1fr 1.06fr;gap:54px;align-items:start;position:relative;z-index:2}
.tech-sel__title{margin-top:22px;font-size:clamp(1.6rem,2.7vw,2.45rem);line-height:1.24}
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.pill{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E3E9F3;border-radius:10px;
  padding:12px 14px;font-size:.8rem;font-weight:700;line-height:1.3;color:#1A232B;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pill:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(26,60,100,.09)}
.pill svg{width:20px;height:20px;color:var(--blue);flex:none}

.tsteps{position:relative;padding-left:72px}
.tstep{position:relative;margin-bottom:26px}
.tstep:last-child{margin-bottom:0}
.tstep:nth-of-type(odd){margin-right:56px}
.tstep:nth-of-type(even){margin-left:56px}
.tstep:first-of-type .tstep__badge{top:-4px;transform:none}
.tstep__badge{
  position:absolute;left:-66px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:var(--blue-dark);color:#fff;display:grid;place-items:center;
  font-size:1rem;font-weight:800;z-index:3;box-shadow:0 6px 16px rgba(12,60,96,.22);
}
.tstep__card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #DCE9F3;
  border-radius:14px;padding:24px 26px 24px 26px;box-shadow:0 12px 30px rgba(20,60,100,.07);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tstep__card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(20,60,100,.12)}
.tstep__ic{width:46px;height:46px;flex:none;color:var(--blue);display:grid;place-items:center}
.tstep__ic svg{width:38px;height:38px}
.tstep__t{font-size:1.28rem;letter-spacing:-.02em}
.tstep__p{margin-top:8px;font-size:.9rem;line-height:1.58;color:#4B5761;font-weight:500}
.tsteps__line{position:absolute;inset:0;z-index:1;pointer-events:none}
.tsteps__line svg{width:100%;height:100%}
.tsteps__path{
  fill:none;stroke:#4E9DCB;stroke-width:2;stroke-dasharray:9 8;stroke-linecap:round;
  opacity:0;transition:opacity .8s var(--ease) .2s;
}
.tech-sel.is-in .tsteps__path,.tech-sel.is-in .tsteps__end{opacity:1}
.tsteps__end{transition:opacity .8s var(--ease) .9s}
.tstep{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tech-sel.is-in .tstep{opacity:1;transform:none}
.tech-sel.is-in .tstep:nth-of-type(2){transition-delay:.14s}
.tech-sel.is-in .tstep:nth-of-type(3){transition-delay:.28s}
.tech-sel.is-in .tstep:nth-of-type(4){transition-delay:.42s}

/* ---- service FAQ ---- */
.sfaq{background:#fff}
.sfaq__grid{display:grid;grid-template-columns:.82fr 1.35fr;gap:44px;align-items:start}
.sfaq__panel{background:#D5E6F0;border-radius:14px;padding:34px 32px 36px}
.sfaq__title{margin-top:22px;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.26}
.sfaq__p{margin-top:0;font-size:.9rem;line-height:1.6;color:#334049;font-weight:500}
.sfaq__checks{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.sfaq__checks li{display:flex;align-items:center;gap:14px;font-size:.94rem;font-weight:600;color:#16202A}
.sfaq__checks svg{width:26px;height:26px;color:var(--blue);flex:none}

/* ---- service page responsive ---- */
@media (max-width:1024px){
  .ovw__grid,.tech-sel__grid,.sfaq__grid{grid-template-columns:1fr;gap:44px}
  .why__card{grid-template-columns:1fr;gap:32px;padding:26px}
  .gains__cards{grid-template-columns:1fr 1fr}
  .gains__cards .gcard:last-child{grid-column:1/-1}
  .shero{min-height:520px;padding:140px 0 76px}
}
@media (max-width:1024px){
  .pills{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .steps3{grid-template-columns:1fr;gap:16px;margin-top:34px}
  .steps3::before,.steps3::after{display:none}
  .gains__cards{grid-template-columns:1fr}
  .gains__cards .gcard:last-child{grid-column:auto}
  .gcard{padding:22px}
  .gcard__ic{width:62px;height:62px}
  .gcard__ic svg{width:26px;height:26px}
  .scope{padding:22px 20px 24px}
  .scope__row{font-size:.93rem;padding:12px 14px}
  .tsteps{padding-left:62px}
  .tstep:nth-of-type(odd){margin-right:0}
  .tstep:nth-of-type(even){margin-left:0}
  .tstep__badge{left:-56px;width:44px;height:44px;font-size:.9rem}
  .tstep:first-of-type .tstep__badge{top:50%;transform:translateY(-50%)}
  .tstep__card{padding:20px 20px 20px 22px;gap:14px}
  .tstep__ic{width:34px;height:34px}
  .tstep__ic svg{width:30px;height:30px}
  .sfaq__panel{padding:26px 22px 28px}
  .pills{gap:12px}