/* WPC Design — Web → Redesign → System → Logo. */
.wpc-story { --story-bg: #f8faff; --story-panel: #fff; --story-ink: #0b1324; --story-muted: #667085; --story-line: #e3e8f0; position: relative; min-height: 580px; overflow: hidden; isolation: isolate; color: var(--story-ink); background: radial-gradient(ellipse at 90% 10%,rgba(36,99,255,.08),transparent 65%),var(--story-bg); font-family: inherit; }
body.dark .wpc-story { --story-bg:#090d16; --story-panel:#111722; --story-ink:#f4f7fc; --story-muted:#a0acbd; --story-line:#252e3c; }
.hero__visual.wpc-story::before,.hero__visual.wpc-story::after { content:none; }
.wpc-story__top,.wpc-story__bottom { position:absolute; z-index:5; left:6%; right:6%; display:flex; align-items:center; gap:9px; color:var(--story-muted); font-size:9px; font-weight:700; letter-spacing:.12em; }
.wpc-story__top { top:25px; }.wpc-story__bottom { bottom:25px; justify-content:space-between; }
.wpc-story__dot { width:7px;height:7px;border-radius:50%;background:#2463ff;box-shadow:0 0 0 5px rgba(36,99,255,.08); }
.wpc-story__count { margin-left:auto; }
.wpc-story__scene { position:absolute; inset:70px 6% 65px; opacity:0; visibility:hidden; transform:translateY(15px); transition:opacity .55s ease,transform .65s ease,visibility .55s; }
.wpc-story[data-stage="0"] .wpc-story__scene--web,.wpc-story[data-stage="1"] .wpc-story__scene--redesign,.wpc-story[data-stage="2"] .wpc-story__scene--system,.wpc-story[data-stage="3"] .wpc-story__scene--logo { opacity:1;visibility:visible;transform:none; }
.wpc-story__heading>span { color:#2463ff;font-size:10px;letter-spacing:.12em;font-weight:750; }.wpc-story__heading h2 { margin:10px 0 20px;font-size:clamp(22px,2.1vw,34px);line-height:1.15;letter-spacing:-.04em;color:var(--story-ink); }
.wpc-story__brief { display:flex;flex-direction:column;gap:7px;border-left:2px solid #2463ff;padding:4px 12px;margin-bottom:18px; }.wpc-story__brief span {font-size:8px;letter-spacing:.14em;color:var(--story-muted);}.wpc-story__brief strong {font-size:12px;line-height:1.5;}
.wpc-story__site,.wpc-story__compare,.wpc-story__dashboard { border:1px solid var(--story-line);border-radius:16px;overflow:hidden;background:var(--story-panel);box-shadow:0 18px 50px rgba(0,0,0,.07); }
.wpc-story__nav { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--story-line);font-size:9px; }.wpc-story__nav b {font-size:12px;}.wpc-story__nav b span {color:#2463ff;margin-left:3px;}.wpc-story__nav>span {color:var(--story-muted);font-size:8px;}
.wpc-story__sitehero {padding:24px 20px;position:relative;min-height:175px;overflow:hidden;}.wpc-story__sitehero>span {font-size:7px;color:#2463ff;font-weight:750;letter-spacing:.1em;}.wpc-story__sitehero h3 {position:relative;z-index:1;font-size:clamp(20px,2.4vw,32px);line-height:1.12;letter-spacing:-.045em;margin:12px 0 18px;max-width:75%;}.wpc-story__pill {display:inline-block;position:relative;z-index:1;padding:9px 12px;background:#2463ff;color:white;border-radius:7px;font-size:8px;font-weight:700;}
.wpc-story__art {position:absolute;right:6%;top:30px;display:flex;align-items:center;gap:7px;transform:rotate(-16deg);}.wpc-story__art i {display:block;width:25px;height:125px;border-radius:8px;background:linear-gradient(170deg,#89aaff,#2463ff);}.wpc-story__art i:nth-child(2){height:155px;opacity:.6;}.wpc-story__art i:nth-child(3){height:95px;opacity:.3;}
.wpc-story__tiles {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px;}.wpc-story__tiles>div {display:flex;flex-direction:column;gap:7px;padding:12px 9px;border-radius:8px;background:var(--story-bg);font-size:9px;}.wpc-story__tiles b {color:#2463ff;font-size:11px;}
.wpc-story[data-stage="0"] .wpc-story__piece {animation:wpc-assemble .8s both;}.wpc-story[data-stage="0"] .wpc-story__sitehero {animation-delay:.7s;}.wpc-story[data-stage="0"] .wpc-story__tiles>div:nth-child(1){animation-delay:1.3s;}.wpc-story[data-stage="0"] .wpc-story__tiles>div:nth-child(2){animation-delay:1.7s;}.wpc-story[data-stage="0"] .wpc-story__tiles>div:nth-child(3){animation-delay:2.1s;}
@keyframes wpc-assemble {from {opacity:0;transform:translateY(18px) scale(.97);}to {opacity:1;transform:none;}}
.wpc-story__compare {position:relative;height:325px;}.wpc-story__old,.wpc-story__new {position:absolute;inset:0;}.wpc-story__old {background:#e4e1d8;color:#393727;padding:20px;font-family:Georgia,serif;}.wpc-story__old>div:first-child{font-size:9px;background:#9b9d75;padding:8px;}.wpc-story__old h3 {font-size:26px;margin:20px 0 12px;}.wpc-story__old p{font-size:11px;margin:14px 0;}.wpc-story__oldblocks {display:flex;gap:10px;margin-top:20px;}.wpc-story__oldblocks i{display:block;height:70px;width:30%;background:#b1ad9a;border:3px ridge #cbc8ba;}
.wpc-story__new {background:var(--story-panel);clip-path:inset(0 100% 0 0);}.wpc-story__newcontent {position:relative;padding:24px;overflow:hidden;height:100%;}.wpc-story__newcontent small {font-size:7px;color:#2463ff;letter-spacing:.1em;}.wpc-story__newcontent h3 {position:relative;z-index:1;font-size:35px;letter-spacing:-.05em;line-height:1.08;margin:12px 0;}.wpc-story__newcontent em {color:#2463ff;font-style:normal;}.wpc-story__newcontent p {font-size:9px;line-height:1.6;color:var(--story-muted);margin-bottom:12px;}.wpc-story__newart {position:absolute;right:-28px;top:45px;width:150px;height:190px;border-radius:80px 20px 90px 20px;transform:rotate(-15deg);background:linear-gradient(135deg,rgba(36,99,255,.08),rgba(36,99,255,.4));}
.wpc-story__wipe {position:absolute;top:0;bottom:0;left:0;width:2px;background:#2463ff;opacity:0;box-shadow:0 0 15px rgba(36,99,255,.5);}.wpc-story[data-stage="1"] .wpc-story__new {animation:wpc-redesign 3.8s .6s both;}.wpc-story[data-stage="1"] .wpc-story__wipe {animation:wpc-wipe 3.8s .6s both;}
@keyframes wpc-redesign {0%,12%{clip-path:inset(0 100% 0 0);}85%,100%{clip-path:inset(0 0 0 0);}}@keyframes wpc-wipe {0%,12%{left:0;opacity:1;}85%{left:100%;opacity:1;}100%{left:100%;opacity:0;}}
.wpc-story__comparelabels {display:flex;justify-content:space-between;margin-top:12px;color:var(--story-muted);font-size:8px;letter-spacing:.1em;}
.wpc-story__workspace {position:relative;height:340px;}.wpc-story__note {position:absolute;z-index:2;display:flex;flex-direction:column;gap:10px;width:43%;padding:20px 15px;border:1px solid var(--story-line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.08);background:var(--story-panel);}.wpc-story__note small {font-size:8px;letter-spacing:.1em;color:#2463ff;}.wpc-story__note b{font-size:13px;}.wpc-story__note>span{font-size:10px;color:var(--story-muted);}.wpc-story__note--one{top:25px;left:2%;transform:rotate(-9deg);}.wpc-story__note--two{top:70px;right:0;transform:rotate(8deg);}.wpc-story__note--three{bottom:18px;left:18%;transform:rotate(-4deg);}
.wpc-story[data-stage="2"] .wpc-story__note {animation:wpc-organize 1s 1.4s both;}.wpc-story[data-stage="2"] .wpc-story__note--two{animation-delay:1.6s;}.wpc-story[data-stage="2"] .wpc-story__note--three{animation-delay:1.8s;}
@keyframes wpc-organize {to {transform:translate(0,20px) scale(.4);opacity:0;}}
.wpc-story__dashboard {display:grid;grid-template-columns:100px 1fr;position:absolute;inset:15px 0 0;opacity:0;}.wpc-story[data-stage="2"] .wpc-story__dashboard {animation:wpc-assemble 1s 2.4s both;}.wpc-story__dashnav {display:flex;flex-direction:column;gap:18px;padding:20px 12px;border-right:1px solid var(--story-line);background:var(--story-bg);font-size:9px;color:var(--story-muted);}.wpc-story__dashnav b {font-size:10px;color:var(--story-ink);margin-bottom:12px;}.wpc-story__dashnav span:first-of-type{color:#2463ff;}.wpc-story__dashbody {padding:22px 16px;min-width:0;}.wpc-story__dashbody>small {font-size:7px;color:var(--story-muted);letter-spacing:.08em;}.wpc-story__dashbody h3 {font-size:23px;margin:7px 0 18px;letter-spacing:-.04em;}.wpc-story__stats {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}.wpc-story__stats>span {padding:10px;border-radius:8px;background:var(--story-bg);font-size:8px;color:var(--story-muted);}.wpc-story__stats b {display:block;color:var(--story-ink);font-size:10px;margin-top:5px;}.wpc-story__row {display:flex;justify-content:space-between;align-items:center;gap:5px;padding:11px 0;border-bottom:1px solid var(--story-line);font-size:9px;}.wpc-story__row>span {font-size:7px;color:#2463ff;background:rgba(36,99,255,.08);padding:4px 5px;border-radius:5px;}.wpc-story__calendar {font-size:8px;margin-top:14px;color:var(--story-muted);word-spacing:8px;}.wpc-story__calendar>div {display:flex;gap:7px;margin-top:9px;}.wpc-story__calendar i{flex:1;height:17px;background:var(--story-bg);border-radius:4px;}.wpc-story__calendar i:nth-child(3){background:#2463ff;}
.wpc-story__scene--logo {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}.wpc-story__logo {width:min(85%,450px);height:auto;}.wpc-story__scene--logo p {font-size:10px;font-weight:700;letter-spacing:.18em;margin:32px 0 14px;}.wpc-story__scene--logo>span {font-size:13px;color:var(--story-muted);}.wpc-story[data-stage="3"] .wpc-story__logo {animation:wpc-assemble 1.3s both;}body.dark .wpc-story__logo {filter:brightness(0) invert(1);}
.wpc-story__steps {display:flex;gap:5px;}.wpc-story__steps i {width:18px;height:3px;border-radius:2px;background:var(--story-line);}.wpc-story[data-stage="0"] .wpc-story__steps i:nth-child(1),.wpc-story[data-stage="1"] .wpc-story__steps i:nth-child(2),.wpc-story[data-stage="2"] .wpc-story__steps i:nth-child(3),.wpc-story[data-stage="3"] .wpc-story__steps i {background:#2463ff;}
@media(max-width:1100px) {.wpc-story__nav>span{display:none;}.wpc-story__dashboard{grid-template-columns:80px 1fr;}.wpc-story__dashnav{padding:18px 9px;}.wpc-story__dashbody{padding:18px 10px;}.wpc-story__row{font-size:8px;}.wpc-story__stats b{font-size:9px;}}
@media(max-width:650px) {.hero__visual.wpc-story {display:none!important;}}
@media(prefers-reduced-motion:reduce) {.wpc-story *, .wpc-story *::before,.wpc-story *::after {animation:none!important;transition:none!important;} .wpc-story .wpc-story__logo{opacity:1;transform:none;}}

.wpc-story.is-paused *, .wpc-story.is-paused *::before, .wpc-story.is-paused *::after { animation-play-state: paused !important; }

/* Softer product presentation — photographic web, spacious panels, detailed system. */
.wpc-story { min-height:620px; background:radial-gradient(ellipse at 80% 35%,rgba(36,99,255,.07),transparent 65%),var(--story-bg); }
.wpc-story__scene { inset:76px 5% 65px; }
.wpc-story__heading h2 { font-weight:650; letter-spacing:-.045em; margin-bottom:24px; }
.wpc-story__brief { border:1px solid var(--story-line); border-radius:16px; padding:12px 16px; background:var(--story-panel); margin-bottom:18px; }
.wpc-story__brief strong { font-weight:500; }
.wpc-story__site,.wpc-story__compare,.wpc-story__dashboard { border-radius:24px; box-shadow:0 24px 65px rgba(15,28,60,.10),0 3px 8px rgba(15,28,60,.025); }
body.dark .wpc-story__site,body.dark .wpc-story__compare,body.dark .wpc-story__dashboard { box-shadow:0 24px 65px rgba(0,0,0,.25); }
.wpc-story__nav { padding:17px 22px; }.wpc-story__sitehero { min-height:200px; padding:26px 24px; }
.wpc-story__art { inset:0 0 0 48%; transform:none; display:block; background:linear-gradient(90deg,var(--story-panel),transparent 35%),url('../images/hero-office.png') center/cover; opacity:.9; }
.wpc-story__art i { display:none; }
.wpc-story__sitehero h3 { max-width:73%; font-weight:650; font-size:clamp(23px,2.35vw,36px); text-shadow:0 1px 12px var(--story-panel); }
.wpc-story__sitehero>span { position:relative;z-index:1; }
.wpc-story__pill { padding:11px 15px; border-radius:999px; box-shadow:0 5px 16px rgba(36,99,255,.18); }
.wpc-story__tiles { gap:9px; padding:0 18px 18px; }
.wpc-story__tiles>div { border-radius:14px; padding:15px 12px; border:1px solid var(--story-line); background:transparent; }
.wpc-story__tiles b { width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(36,99,255,.08);font-size:9px; }
.wpc-story__compare { height:360px; }
.wpc-story__newcontent { padding:28px; }
.wpc-story__newcontent h3 { font-size:39px;font-weight:650; }
.wpc-story__newart { inset:0 0 0 45%; width:auto;height:auto;transform:none;border-radius:0;background:linear-gradient(90deg,var(--story-panel),transparent 65%),url('../images/hero-office.png') center/cover;opacity:.8; }
.wpc-story__newcontent small,.wpc-story__newcontent p { position:relative;z-index:1; }
.wpc-story__newcontent p { color:var(--story-ink);text-shadow:0 1px 10px var(--story-panel); }
.wpc-story__workspace { height:370px; }
.wpc-story__note { border-radius:20px;padding:24px 20px;box-shadow:0 20px 45px rgba(15,28,60,.1); }
.wpc-story__dashboard { grid-template-columns:95px 1fr; }
.wpc-story__dashnav { gap:21px;padding:25px 13px;font-size:9px; }
.wpc-story__dashnav span:first-of-type { padding:9px 5px;margin:-9px -5px;background:rgba(36,99,255,.09);border-radius:9px; }
.wpc-story__dashbody { padding:26px 18px; }
.wpc-story__dashbody h3 {font-weight:650;margin-bottom:18px;}
.wpc-story__stats {gap:10px;}.wpc-story__stats>span {border:1px solid var(--story-line);border-radius:14px;background:transparent;padding:13px 11px;}.wpc-story__stats b {font-weight:600;margin-top:7px;}
.wpc-story__project-head {display:flex;justify-content:space-between;color:var(--story-muted);font-size:7px;letter-spacing:.07em;margin:20px 0 4px;}
.wpc-story__row {padding:13px 0;}.wpc-story__row b{font-weight:550;}.wpc-story__row>span{border-radius:999px;padding:5px 8px;}
.wpc-story__row:nth-of-type(4)>span{color:#997000;background:rgba(207,157,38,.12);}
.wpc-story__meeting {display:flex;align-items:center;gap:9px;padding:12px;margin-top:15px;border-radius:13px;background:var(--story-bg);}
.wpc-story__avatar {display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(36,99,255,.12);color:#2463ff;font-size:9px;font-weight:700;}
.wpc-story__meeting>div {display:flex;flex-direction:column;gap:5px;}.wpc-story__meeting b{font-size:9px;font-weight:600;}.wpc-story__meeting>div>span{font-size:8px;color:var(--story-muted);}.wpc-story__meeting-time{font-size:10px;margin-left:auto;color:var(--story-muted);}
@media(max-width:1100px) {.wpc-story__dashbody{padding:24px 12px;}.wpc-story__dashboard{grid-template-columns:80px 1fr;}.wpc-story__dashnav{padding:25px 9px;}.wpc-story__meeting{padding:10px 7px;gap:6px;}.wpc-story__avatar{width:22px;height:22px;font-size:8px;}.wpc-story__newcontent{padding:24px;}.wpc-story__newcontent h3{font-size:34px;}}