/* Vivid layout overrides — "break the straight line" pass (home page).
   Restraint-first: all desktop grids keep 4/3-col behavior above 900px.
   Only transform/opacity used for motion. RTL mirrors automatically
   (grid areas/columns are direction-aware); mobile never overlaps.
   磨砂玻璃浅色主题 v6：布局/尺寸与旧版一致，只换颜色质感。 */

/* ---------- 1. services bento: card 1 tall, cards 2+3 stacked right ---------- */
@media(min-width:901px){
  #services .grid.g3{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"svc-a svc-b" "svc-a svc-c";
    gap:22px;
  }
  #services .grid.g3 .card.hv-svc:nth-child(1){grid-area:svc-a}
  #services .grid.g3 .card.hv-svc:nth-child(2){grid-area:svc-b}
  #services .grid.g3 .card.hv-svc:nth-child(3){grid-area:svc-c}
  /* the tall lead card: bigger icon + depth, still calm */
  #services .grid.g3 .card.hv-svc:nth-child(1){
    padding:44px 40px;
    position:relative;isolation:isolate;overflow:hidden;
  }
  #services .grid.g3 .card.hv-svc:nth-child(1)::before{
    content:"";position:absolute;inset:-30% -20% auto;height:70%;z-index:-1;
    background:radial-gradient(60% 100% at 70% 0%,rgba(122,92,245,.14),rgba(122,92,245,0) 100%);
  }
  #services .grid.g3 .card.hv-svc:nth-child(1) .ico{
    width:84px;height:84px;border-radius:22px;
    background:linear-gradient(150deg,rgba(216,79,158,.16),rgba(10,159,224,.12));
    border:1px solid rgba(216,79,158,.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 30px rgba(216,79,158,.20);
  }
  #services .grid.g3 .card.hv-svc:nth-child(1) .ico svg{width:46px;height:46px}
  #services .grid.g3 .card.hv-svc:nth-child(1) h3{font-size:26px}
  #services .grid.g3 .card.hv-svc:nth-child(1) p{font-size:16px;max-width:46ch}
}

/* ---------- 2. before/after: "with an agent" overlaps "without" ---------- */
@media(min-width:901px){
  #before-after .hv-ba{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
  }
  #before-after .hv-ba-before{grid-column:1/8}
  #before-after .hv-ba-after{
    grid-column:6/13;
    position:relative;z-index:1;
    transform:translateY(-32px);           /* the "new covers old" float */
    margin-bottom:-32px;                    /* keep section rhythm tight */
    border-color:rgba(216,79,158,.45);
    box-shadow:0 28px 64px rgba(216,79,158,.20),inset 0 1px 0 rgba(255,255,255,.95);
  }
}
@media(max-width:900px){
  /* restore plain stacking on mobile: no overlap, no overflow risk */
  #before-after .hv-ba-after{transform:none;margin-bottom:0}
}

/* ---------- 3. flow: horizontal snap-scroll on small phones ---------- */
@media(max-width:640px){
  #flow .hv-flow{
    display:flex;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-inline:-24px;                    /* bleed inside .wrap's 28px padding */
    padding:6px 24px 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #flow .hv-flow::-webkit-scrollbar{display:none}
  #flow .hv-link{display:none}
  #flow .hv-node{
    flex:0 0 76%;
    scroll-snap-align:center;
  }
  #flow .hv-node:hover{transform:none}
}

/* count-up targets: keep layout stable while digits change */
#pilot [data-i18n="k69"],#pricing [data-i18n="k168"],
#pilot .hv-amt,#pricing .hv-pricing .price-card .amt{
  font-variant-numeric:tabular-nums;
}