:root{--wp-ease: cubic-bezier(.23, 1, .32, 1)}.work-process{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 10% 20%,rgba(0,114,255,.07) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 90% 80%,rgba(107,91,255,.06) 0%,transparent 60%),linear-gradient(160deg,#f0f7ff,#fafcff,#f5f0ff)}.work-process:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,rgba(0,114,255,.09) 1px,transparent 1px);background-size:36px 36px;pointer-events:none;opacity:.5}.wp-container{max-width:1400px;margin:0 auto;padding:100px 3%;position:relative;z-index:1}.wp-header{text-align:center;margin-bottom:60px}.wp-sub-tag{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--color-primary, #0072ff);margin-bottom:14px;font-family:var(--font-sans, "Outfit", sans-serif)}.wp-h2{font-family:var(--font-display, "Clash Display", "Outfit", sans-serif);font-size:clamp(36px,5vw,60px);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--color-grey-900, #111827);margin-bottom:18px}.wp-h2 .gradient-word{background:linear-gradient(135deg,var(--color-primary, #0072ff),#4d94ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.wp-desc{font-size:17px;color:var(--color-grey-500, #6b7280);max-width:560px;margin:0 auto;line-height:1.65;font-family:var(--font-sans, "Outfit", sans-serif)}.workflow-grid{display:flex;width:100%;height:450px;background:#ffffffa6;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(0,114,255,.1);border-radius:32px;overflow:hidden;box-shadow:0 30px 80px #0072ff0f,0 4px 20px #0000000a}.step-card{position:relative;flex:1;padding:48px 28px;border-right:1px solid rgba(0,114,255,.08);transition:flex .7s var(--wp-ease),background .5s ease;cursor:pointer;display:flex;flex-direction:column;min-width:0;will-change:flex;overflow:hidden}.step-card:last-child{border-right:none}.step-card:hover{flex:2.4;background:#ffffff80}.corner-accent{position:absolute;width:22px;height:22px;border-color:var(--color-primary, #0072ff);border-style:solid;opacity:0;transition:opacity .4s ease,transform .4s ease;z-index:10}.wp-tl{top:18px;left:18px;border-width:2px 0 0 2px;transform:translate(-4px,-4px)}.wp-br{bottom:18px;right:18px;border-width:0 2px 2px 0;transform:translate(4px,4px)}.step-card:hover .corner-accent{opacity:1;transform:translate(0)}.phase-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;color:#0072ff;text-transform:uppercase;margin-bottom:12px;font-family:var(--font-sans, "Outfit", sans-serif);white-space:nowrap;transition:opacity .25s ease}.step-name{font-family:var(--font-display, "Clash Display", "Outfit", sans-serif);font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--color-grey-900, #111827);margin:0 0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s ease}.wp-icon-box{width:52px;height:52px;border-radius:14px;background:#0072ff12;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:opacity .25s ease,transform .25s ease;flex-shrink:0;color:#0072ff}.wp-icon-box svg{width:26px;height:26px;fill:none}.step-desc{font-size:13px;color:var(--color-grey-500, #6b7280);line-height:1.5;margin-top:auto;font-family:var(--font-sans, "Outfit", sans-serif);transition:opacity .25s ease;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.step-card:hover .phase-tag,.step-card:hover .step-name{opacity:0}.step-card:hover .wp-icon-box{opacity:0;transform:scale(.7)}.step-card:hover .step-desc{opacity:0}.detail-info{position:absolute;top:0;right:0;bottom:0;left:0;padding:44px 32px;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s ease .18s;background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5}.step-card:hover .detail-info{opacity:1;pointer-events:auto}.detail-phase{font-size:10px;font-weight:800;letter-spacing:.2em;color:#0072ff;text-transform:uppercase;margin-bottom:14px;font-family:var(--font-sans, "Outfit", sans-serif)}.detail-title{font-family:var(--font-display, "Clash Display", "Outfit", sans-serif);font-size:30px;font-weight:600;color:var(--color-grey-900, #111827);line-height:1.1;letter-spacing:-.03em;margin-bottom:16px}.detail-text{font-size:15px;color:var(--color-grey-500, #6b7280);line-height:1.7;font-family:var(--font-sans, "Outfit", sans-serif);max-width:320px}.bg-icon-layer{position:absolute;bottom:30px;right:15px;opacity:0;transition:opacity .55s ease,transform .55s ease;pointer-events:none;z-index:5;font-size:10rem;color:#0072ff}.bg-icon-layer svg{width:140px;height:140px;fill:none;opacity:.1;transform:rotate(15deg)}.step-card:hover .bg-icon-layer{opacity:1;transform:rotate(8deg) scale(1.08)}@media(prefers-reduced-motion:reduce){.step-card,.detail-info,.phase-tag,.step-name,.wp-icon-box,.step-desc,.bg-icon-layer{transition:none}}@media(max-width:1100px){.work-process{overflow:clip}.workflow-grid{flex-direction:column;height:auto;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;gap:0;overflow:visible}.step-card{position:-webkit-sticky;position:sticky;flex:none;width:100%;min-height:240px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:25px;box-shadow:0 4px 16px #0000000d;padding:25px 20px;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;backface-visibility:hidden;transform:scale(.97);transform-origin:top center;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.step-card:nth-child(1){top:80px;z-index:1;margin-bottom:350px}.step-card:nth-child(2){top:140px;z-index:2;margin-bottom:300px}.step-card:nth-child(3){top:200px;z-index:3;margin-bottom:250px}.step-card:nth-child(4){top:260px;z-index:4;margin-bottom:200px}.step-card:nth-child(5){top:320px;z-index:5;margin-bottom:150px}.step-card:nth-child(6){top:380px;z-index:6;margin-bottom:100px}.step-card.active{border-color:var(--color-primary, #0072ff);box-shadow:0 12px 36px #0072ff24;transform:scale(1)}.step-card.active .wp-icon-box{color:#0072ff}.step-card.active .phase-tag{color:#0072ff;font-weight:900}.step-card.active .step-name{color:var(--color-grey-900, #111827);font-weight:700}.step-card.active .detail-text{color:#4a5a6a}.step-card:hover{flex:none;background:#fff}.step-card:hover .phase-tag,.step-card:hover .step-name{opacity:1}.step-card:hover .wp-icon-box{opacity:1;transform:none}.wp-icon-box{position:absolute;top:20px;right:20px;margin-bottom:0;background:transparent;color:#94a3b8;display:flex;transition:color .35s ease}.wp-icon-box svg{width:28px;height:28px;fill:none}.phase-tag{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:8px;transition:color .35s ease,font-weight .35s ease}.step-name{white-space:normal;font-size:20px;font-weight:700;overflow:visible;margin:0 0 10px;padding-right:50px;color:var(--color-grey-600, #4b5563);transition:color .35s ease,font-weight .35s ease}.step-desc{display:none}.detail-info{position:static;opacity:1;pointer-events:auto;padding:0;transition:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;display:block;margin-top:10px}.detail-phase,.detail-title{display:none}.detail-text{font-size:14px;max-width:none;color:var(--color-grey-500, #6b7280);line-height:1.6;transition:color .35s ease}.step-desc,.bg-icon-layer,.corner-accent{display:none}.wp-container{padding:70px 5%}}@media(max-width:700px){.step-card{padding:20px 18px;min-height:200px}.wp-container{padding:56px 5%}.wp-h2{font-size:32px}.wp-desc{font-size:15px}.step-card:nth-child(1){margin-bottom:220px}.step-card:nth-child(2){margin-bottom:190px}.step-card:nth-child(3){margin-bottom:160px}.step-card:nth-child(4){margin-bottom:130px}.step-card:nth-child(5){margin-bottom:100px}.step-card:nth-child(6){margin-bottom:70px}}@media(max-width:480px){.step-card{padding:16px 14px;min-height:180px}.step-name{font-size:18px}.detail-text{font-size:13px}.step-card:nth-child(1){top:70px;margin-bottom:180px}.step-card:nth-child(2){top:120px;margin-bottom:160px}.step-card:nth-child(3){top:170px;margin-bottom:130px}.step-card:nth-child(4){top:220px;margin-bottom:110px}.step-card:nth-child(5){top:270px;margin-bottom:80px}.step-card:nth-child(6){top:320px;margin-bottom:60px}}@media(prefers-color-scheme:dark){.work-process{background:radial-gradient(ellipse 60% 50% at 0% 50%,rgba(30,156,245,.14) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 100% 100%,rgba(30,156,245,.08) 0%,transparent 60%),#131720}.work-process:before{background-image:radial-gradient(circle,rgba(30,156,245,.08) 1px,transparent 1px)}.wp-sub-tag{color:#1e9cf5}.wp-h2{color:#f1f4f8}.wp-h2 .gradient-word{background:linear-gradient(135deg,#1e9cf5,#4db3ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.wp-desc{color:#95a0a6}.workflow-grid{background:#1b2030;border-color:#ffffff14;box-shadow:0 2px 6px #00000047,0 18px 44px #060a1257;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.step-card{background:transparent;border-right-color:#ffffff0f;box-shadow:none}.step-card:last-child{border-right:none}.step-card:hover{background:#232936}.corner-accent{border-color:#1e9cf5;background:transparent}.phase-tag{background:transparent;border:none;color:#1e9cf5;padding:0}.wp-icon-box{background:#1e9cf51f;border:1px solid rgba(30,156,245,.22);color:#4db3ff}.step-name{color:#f1f4f8}.step-desc{color:#95a0a6}.detail-info{background:#232936f5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.detail-phase{color:#1e9cf5}.detail-title{color:#f1f4f8}.detail-text{color:#c8d0da}.bg-icon-layer{color:#1e9cf5}.bg-icon-layer svg{opacity:.08}}@media(prefers-color-scheme:dark)and (max-width:1100px){.workflow-grid{background:transparent;box-shadow:none;border:none}.step-card{background:#1b2030;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #00000059}.step-card.active{border-color:#1e9cf5;box-shadow:0 12px 36px #1e9cf533}.step-card.active .wp-icon-box{color:#4db3ff}.step-card.active .phase-tag{color:#1e9cf5}.step-card.active .step-name{color:#f1f4f8}.step-card.active .detail-text{color:#c8d0da}.step-card:hover{background:#1b2030}.wp-icon-box{background:transparent;border:none;color:#95a0a6}.phase-tag,.step-name,.detail-text{color:#95a0a6}}