.perf-page .woo-hero { background:radial-gradient(ellipse at 86% 22%,#e8eaff,transparent 43%),radial-gradient(ellipse at 4% 82%,#e8f8ff,transparent 32%),#fcfdff; }
.perf-hero-art { min-width:0; }.perf-hero-art .wp-perf-lab { min-height:0; }.perf-demo-note { margin:.8rem .5rem 0; color:#858ca1; font-size:.66rem; line-height:1.6; text-align:center; }
.perf-inclusions { padding:1.5rem 0; border-top:1px solid #e7eaf5; border-bottom:1px solid #e7eaf5; background:#f3f5ff; }.perf-inclusions .container { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.perf-inclusions span { display:flex; justify-content:center; align-items:center; gap:9px; color:#475477; font-size:.85rem; font-weight:700; }.perf-inclusions i { color:#6366f1; font-size:1.15rem; }
.perf-delivery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }.perf-delivery > div { position:relative; padding:1.6rem; border:1px solid #e1e6f2; border-radius:20px; background:linear-gradient(155deg,#fff,#f7f9ff); overflow:hidden; }.perf-delivery > div > span { position:absolute; top:1rem; right:1.2rem; color:#d0d7eb; font-size:1.8rem; font-weight:800; }.perf-delivery > div > i { display:grid; place-items:center; width:42px; height:42px; margin:.3rem 0 1.3rem; border-radius:12px; color:#4f46e5; background:#e9edff; }.perf-delivery strong { display:block; color:var(--wp-ink); font-size:.99rem; }.perf-delivery p { margin:.6rem 0 0; color:var(--wp-muted); font-size:.85rem; line-height:1.7; }.perf-delivery > div:after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:linear-gradient(90deg,#6366f1,#38bdf8); animation:perf-delivery-progress 6s ease-in-out infinite; }.perf-delivery > div:nth-child(2):after { animation-delay:-4.5s; }.perf-delivery > div:nth-child(3):after { animation-delay:-3s; }.perf-delivery > div:nth-child(4):after { animation-delay:-1.5s; }
.perf-measures { display:grid; gap:.8rem; }.perf-measures > div { display:grid; grid-template-columns:58px 1fr; gap:.25rem 1rem; align-items:center; padding:1.3rem; border:1px solid #e2e4f1; border-radius:17px; background:#fff; }.perf-measures span { grid-row:span 2; display:grid; place-items:center; width:58px; height:58px; border-radius:15px; color:#4f46e5; background:#eef0ff; font-size:.8rem; font-weight:800; }.perf-measures h3 { margin:0; color:var(--wp-ink); font-size:.96rem; font-weight:750; line-height:1.4; }.perf-measures p { margin:0; color:var(--wp-muted); font-size:.81rem; line-height:1.65; }
.perf-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.3rem; }.perf-service-grid > div { padding:1.4rem; border-top:2px solid #d6def7; }.perf-service-grid > div > i { display:block; color:#6366f1; font-size:1.5rem; margin-bottom:1rem; }.perf-service-grid strong { display:block; color:var(--wp-ink); font-size:1rem; }.perf-service-grid p { margin:.6rem 0 0; color:var(--wp-muted); font-size:.85rem; line-height:1.8; }
@keyframes perf-delivery-progress { 0%,8%{width:0;opacity:0}20%{opacity:1}55%{width:100%;opacity:1}75%,100%{width:100%;opacity:0} }
@media(max-width:1199px) { .perf-delivery,.perf-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) { .perf-inclusions .container { grid-template-columns:1fr 1fr; }.perf-inclusions span { justify-content:flex-start; font-size:.7rem; }.perf-delivery,.perf-service-grid { grid-template-columns:1fr; }.perf-measures > div { padding:1rem; gap:.25rem .7rem; }.perf-measures h3 { font-size:.88rem; } }
@media(prefers-reduced-motion:reduce) { .perf-delivery > div:after { animation:none; width:100%; } }