/* System care · 2026-11-12. Homepage section only. Reduced motion respected. */
.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px;perspective:1200px}
.care-card{position:relative;padding:0 0 28px;border-radius:24px;border:1px solid rgba(255,240,225,.08);background:linear-gradient(180deg,rgba(255,240,225,.04),rgba(255,240,225,.008));overflow:hidden;min-height:100%}
.care-card .care-art{height:210px;display:block;background:radial-gradient(120% 80% at 50% 0%,rgba(255,240,225,.05),transparent 62%);overflow:hidden}
.care-card .care-art svg{width:100%;height:100%;display:block}
.care-body{padding:22px 26px 0}
.care-card h3{margin:12px 0 10px;font-weight:300;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.015em;color:var(--sl-ink)}
.care-card .care-body > p{margin:0;color:#c2b9b1;font-size:15.5px;line-height:1.62}
.care-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.care-card li{font-size:14.5px;color:#ddd4cc;display:flex;gap:10px;align-items:baseline}
.care-card li:before{content:"";flex:none;width:12px;height:1px;background:var(--sl-acc);transform:translateY(-4px)}
.care-num{display:block;margin:14px 0 0;font-size:30px;font-weight:300;letter-spacing:-.02em;color:var(--sl-acc)}
.care-num b{font-weight:300}

/* unique scroll reveals */
.care-card.reveal{opacity:0;transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.2,.7,.2,1)}
.care-card[data-care="clean"].reveal{transform:translate3d(-32px,28px,0) scale(.97)}
.care-card[data-care="policy"].reveal{transform:translate3d(0,46px,0)}
.care-card[data-care="replica"].reveal{transform:translate3d(32px,28px,0) scale(.97)}
.care-card[data-care="restore"].reveal{transform:translate3d(0,36px,0) rotateX(8deg)}
.care-card.reveal.in{opacity:1;transform:none}
.care-card[data-care="clean"].reveal{transition-delay:.04s}
.care-card[data-care="policy"].reveal{transition-delay:.16s}
.care-card[data-care="replica"].reveal{transition-delay:.28s}
.care-card[data-care="restore"].reveal{transition-delay:.4s}

/* status: In progress */
.sl-status.progress{border-color:hsla(var(--live-hue),70%,66%,.45);color:var(--sl-acc2)}
.sl-status.progress:before{background:currentColor;border:0;box-shadow:0 0 8px currentColor;animation:care-pulse var(--sl-period,10.9s) cubic-bezier(.45,0,.55,1) infinite}
@keyframes care-pulse{0%,100%{opacity:.45}41.3%{opacity:1}}

/* --- card motions (run only after reveal) --- */
.care-arc{stroke-dasharray:188 452;stroke-dashoffset:80}
.care-card.in .care-arc{animation:care-arc 1.8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes care-arc{from{stroke-dasharray:150 452;stroke-dashoffset:110}to{stroke-dasharray:188 452;stroke-dashoffset:80}}

.care-mote{opacity:0}
.care-card.in .care-mote{animation:care-mote 3.8s ease-out var(--d,0s) infinite}
@keyframes care-mote{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}
}

.care-flow{stroke-dasharray:4 8;stroke-dashoffset:0}
.care-card.in .care-flow{animation:care-flow 2.8s linear infinite}
@keyframes care-flow{to{stroke-dashoffset:-24}}

.care-dot{offset-path:path("M72 105 C 120 105, 180 105, 228 105");offset-distance:0%;offset-rotate:0deg}
.care-card.in .care-dot{animation:care-dot 2.6s cubic-bezier(.45,0,.55,1) var(--d,0s) infinite}
@keyframes care-dot{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}

.care-check{stroke-dasharray:36;stroke-dashoffset:36}
.care-card.in .care-check{animation:care-check 1s ease .9s forwards}
@keyframes care-check{to{stroke-dashoffset:0}}

.care-tick{opacity:0;transform-origin:center;transform:scale(.4)}
.care-card.in .care-tick{animation:care-tick .45s ease var(--d,0s) forwards}
@keyframes care-tick{to{opacity:1;transform:scale(1)}}

.care-link{stroke-dasharray:3 7}
.care-card.in .care-link{animation:care-link 3.2s linear infinite}
@keyframes care-link{to{stroke-dashoffset:-20}}

.care-ring{transform-origin:150px 105px;transform:rotate(-90deg)}
.care-card.in .care-ring{animation:care-spin 8s linear infinite}
@keyframes care-spin{to{transform:rotate(270deg)}}

.care-files{opacity:.35}
.care-card.in .care-files rect{animation:care-file 3.6s ease-in-out var(--d,0s) infinite}
@keyframes care-file{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.85;transform:translateY(-4px)}}

.care-lock{transform-origin:150px 108px}
.care-card.in .care-lock{animation:sl-breathe var(--sl-period,10.9s) cubic-bezier(.45,0,.55,1) infinite}

@media (max-width:900px){
  .care-grid{grid-template-columns:1fr;perspective:none}
  .care-card[data-care="clean"].reveal,
  .care-card[data-care="policy"].reveal,
  .care-card[data-care="replica"].reveal,
  .care-card[data-care="restore"].reveal{transform:translate3d(0,28px,0);transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .care-card.reveal{opacity:1;transform:none;transition:none}
  .care-card.in .care-arc,
  .care-card.in .care-mote,
  .care-card.in .care-flow,
  .care-card.in .care-dot,
  .care-card.in .care-check,
  .care-card.in .care-tick,
  .care-card.in .care-link,
  .care-card.in .care-ring,
  .care-card.in .care-files rect,
  .care-card.in .care-lock,
  .sl-status.progress:before{animation:none!important}
  .care-arc{stroke-dasharray:188 452;stroke-dashoffset:80}
  .care-check{stroke-dashoffset:0}
  .care-tick{opacity:1;transform:none}
  .care-mote{opacity:0}
}