.hero-visual { min-width:0; min-height:540px; }
.pd-demo { position:relative; width:100%; max-width:520px; aspect-ratio:520/500; color:#142655; --progress:0; }
.pd-demo * { box-sizing:border-box; }
.pd-shield { position:absolute; right:10%; top:5%; width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:#eff4ff; transition:box-shadow .3s; }
.pd-shield svg { width:30px; height:35px; fill:#2d72ff; }
.pd-shield .pd-check { fill:none; stroke:white; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.pd-field { position:absolute; left:10%; top:36%; width:80%; height:64px; display:flex; align-items:center; gap:20px; padding:0 20px; border:1px solid #d8e5ff; border-radius:20px; background:white; box-shadow:0 12px 35px #2339600d; }
.pd-field > svg { width:28px; height:30px; padding:5px; border-radius:8px; background:#eef4ff; fill:none; stroke:#347bff; stroke-width:1.8; flex-shrink:0; }
.pd-characters { display:flex; align-items:center; white-space:nowrap; font-family:inherit; font-size:clamp(17px,2vw,25px); font-weight:700; letter-spacing:0; }
.pd-characters span { display:inline-block; }
.pd-health,.pd-slider { position:absolute; left:10%; width:80%; height:8px; border-radius:99px; background:#e9edf5; }
.pd-health { top:52%; overflow:hidden; }.pd-health i { display:block; width:calc(var(--strength,.14)*100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff525c,#ffac35,#36c67e); background-size:416px 100%; }
.pd-slider { top:59%; }.pd-slider i { display:block; height:100%; width:calc(10% + var(--progress)*90%); border-radius:inherit; background:#347bff; }.pd-slider b { position:absolute; left:calc(10% + var(--progress)*90%); top:50%; width:21px; height:21px; transform:translate(-50%,-50%); background:#347bff; border:4px solid white; border-radius:50%; box-shadow:0 3px 9px #15275133; }
.pd-use,.pd-regenerate { position:absolute; top:67%; height:68px; display:flex; align-items:center; justify-content:center; border-radius:23px; background:#205ded; color:white; }.pd-use { left:10%; width:59%; font-size:clamp(19px,2.3vw,28px); font-weight:700; }.pd-regenerate { right:10%; width:15%; }.pd-regenerate svg { width:27px; height:27px; fill:none; stroke:white; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pd-pointer { position:absolute; left:0; top:0; width:28px; height:34px; fill:#17294e; stroke:white; stroke-width:1.5; stroke-linejoin:round; pointer-events:none; opacity:0; z-index:5; }
.pd-transfer { position:absolute; left:10%; top:36%; width:86px; height:30px; border:1px solid #d9e6ff; border-radius:12px; background:white; display:flex; align-items:center; justify-content:center; gap:6px; opacity:0; pointer-events:none; }.pd-transfer i { width:6px; height:6px; border-radius:50%; background:#347bff; }
.pd-saved { position:absolute; right:6%; top:19%; padding:9px 13px; display:flex; gap:7px; background:white; color:#249764; border:1px solid #dceee4; border-radius:12px; box-shadow:0 7px 20px #193b2510; font-size:14px; white-space:nowrap; opacity:0; }.pd-saved:before { content:''; position:absolute; right:36px; top:-5px; width:8px; height:8px; background:white; border-left:1px solid #dceee4; border-top:1px solid #dceee4; transform:rotate(45deg); }
@media(max-width:600px) { .hero-visual { min-height:400px; }.pd-field { height:54px; padding:0 12px; gap:10px; }.pd-use,.pd-regenerate { height:55px; border-radius:18px; }.pd-shield { width:45px; height:45px; }.pd-characters { font-size:clamp(15px,4.5vw,23px); }.pd-saved { font-size:12px; } }
.pd-demo { transform-origin:50% 48%; will-change:transform,opacity; }
.pd-transfer { width:auto; height:auto; padding:9px 14px; font-size:clamp(14px,1.6vw,20px); font-weight:700; white-space:nowrap; z-index:4; box-shadow:0 9px 24px #23396017; }
.pd-shield > svg,.pd-loading { grid-area:1/1; transition:opacity .18s,transform .32s cubic-bezier(.22,1.45,.45,1); }
.pd-shield .pd-complete { width:29px;height:29px;fill:none;stroke:#23ad6c;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6); }
.pd-loading { width:25px;height:25px;border:2px solid #d5e3ff;border-top-color:#347bff;border-radius:50%;opacity:0; }
.pd-shield.is-loading > svg:first-child,.pd-shield.is-complete > svg:first-child { opacity:0;transform:scale(.7); }
.pd-shield.is-loading .pd-loading { opacity:1;animation:pd-loading-spin .65s linear infinite; }
.pd-shield.is-complete .pd-complete { opacity:1;transform:scale(1); }
@keyframes pd-loading-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .pd-shield > svg,.pd-loading { transition:none; } }