.hero-visual.hero-calculator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:500px;margin:0;padding:48px 35px;text-align:left}
.hero-panel-placeholder{position:absolute;z-index:-1;inset:48px 0;border:1px solid #e1e5f4;border-radius:20px;background:#eef1f8}
.hero-calc-decoration{width:100%;padding:90px 0 30px}
.hero-calc-track{position:relative;height:6px;border-radius:5px;background:#dce2f2;margin:0 16px}
.hero-calc-fill{position:absolute;inset:0;background:#2448bb;border-radius:5px;transform-origin:left;transform:scaleX(.2)}
.hero-calc-marker{position:absolute;left:0;top:3px;width:0;height:0}
.hero-calc-thumb{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border:4px solid white;border-radius:50%;background:#2448bb;box-shadow:0 3px 10px #2448bb25}
.hero-calc-number{position:absolute;bottom:26px;left:-65px;width:130px;text-align:center;color:#2448bb}
.hero-calc-number>span{display:block;font-size:58px;font-weight:700;line-height:1.15;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.hero-calc-number small{font-size:12px;color:#626984}
.hero-calc-price{display:flex;justify-content:center;align-items:baseline;gap:9px;margin-top:38px;color:#070e2c}
.hero-calc-price strong{display:inline-block;font-size:36px;line-height:1.2;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hero-calc-price>span{font-size:12px;color:#626984}
@media(max-width:899px){.hero-visual.hero-calculator{max-width:490px;min-height:350px;margin:auto;padding:35px}.hero-panel-placeholder{inset:12px 0}}
@media(max-width:399px){.hero-visual.hero-calculator{padding:30px 25px;min-height:320px}.hero-calc-number>span{font-size:48px}.hero-calc-price strong{font-size:30px}.hero-calc-price>span{font-size:10px}}
/* Layer placeholders follow the supplied composition; images can replace them independently. */
.hero-visual.hero-calculator{display:block;min-height:560px;padding:0;align-self:center}
.hero-scene{position:absolute;inset:0}
.hero-panel-placeholder{inset:65px 40px 55px;border-radius:14px;background:#e9edf5;z-index:0}
.hero-panel-crop{position:absolute;top:125px;width:34%;height:120px;background:#fff;border:1px solid #e8ebf5;border-radius:10px;box-shadow:0 12px 32px #172c6a0c;z-index:2}
.hero-panel-crop-left{left:4px}.hero-panel-crop-right{right:4px}
.hero-scene-icon{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#52beff;box-shadow:0 6px 12px #1387cd1a;z-index:3}
.hero-scene-icon-top{top:60px;right:28%}.hero-scene-icon-side{left:18px;bottom:130px}
.hero-scene-icon svg{width:24px;height:24px;stroke:white;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-calc-decoration{position:absolute;width:auto;left:17%;right:17%;bottom:88px;padding:0;z-index:4}
.hero-calc-track{margin:0 14px}.hero-calc-number>span{font-size:44px}.hero-calc-number{bottom:22px}.hero-calc-number small{font-size:10px}
.hero-calc-price{margin-top:24px;gap:7px}.hero-calc-price strong{font-size:28px}.hero-calc-price>span{font-size:10px}

@media(hover:hover){.hero-motion-pause:hover{color:#2448bb;background:#f4f6fc}}
@media(max-width:899px){.hero-visual.hero-calculator{width:100%;min-height:460px;padding:0}.hero-panel-placeholder{inset:40px 30px 40px}.hero-panel-crop{top:90px;height:100px}.hero-scene-icon-top{top:38px}.hero-scene-icon-side{bottom:110px}.hero-calc-decoration{bottom:66px}}
@media(max-width:399px){.hero-visual.hero-calculator{min-height:385px;padding:0}.hero-panel-placeholder{inset:38px 20px 38px}.hero-panel-crop{top:76px;height:80px}.hero-scene-icon{width:34px;height:34px;border-radius:8px}.hero-scene-icon svg{width:20px;height:20px}.hero-scene-icon-side{left:7px;bottom:100px}.hero-calc-decoration{left:13%;right:13%;bottom:60px}.hero-calc-number>span{font-size:36px}.hero-calc-price strong{font-size:25px}.hero-calc-price>span{font-size:9px}}

/* Separate nested surfaces keep idle floating independent from pointer parallax. */
.hero-panel-crop,.hero-scene-icon{background:none;border:0;box-shadow:none}
.hero-float-surface{width:100%;height:100%;border-radius:inherit;animation:hero-idle-float var(--float-duration) cubic-bezier(.77,0,.175,1) var(--float-delay) infinite alternate;animation-play-state:paused}
.hero-panel-crop .hero-float-surface{background:#fff;border:1px solid #e8ebf5;box-shadow:0 12px 32px #172c6a0c}
.hero-scene-icon .hero-float-surface{display:grid;place-items:center;background:#52beff;box-shadow:0 6px 12px #1387cd1a}
.hero-panel-crop-left{--float-duration:3.8s;--float-delay:-1.1s;--float-distance:3.5px}
.hero-panel-crop-right{--float-duration:4.6s;--float-delay:-3.4s;--float-distance:4.5px}
.hero-scene-icon-top{--float-duration:3.1s;--float-delay:-2.2s;--float-distance:5px}
.hero-scene-icon-side{--float-duration:4.1s;--float-delay:-.4s;--float-distance:8px}
.hero-is-playing .hero-float-surface{animation-play-state:running}
@keyframes hero-idle-float{from{transform:translateY(calc(-1 * var(--float-distance)))}to{transform:translateY(var(--float-distance))}}
@media(prefers-reduced-motion:reduce){.hero-float-surface{animation:none;transform:none}}

/* Perspective affects the scene; each inner wrapper retains its own motion. */
.hero-visual.hero-calculator{perspective:1000px}
.hero-scene{transform-style:preserve-3d;transform-origin:center}
.hero-panel-placeholder{translate:0 0 0}
.hero-panel-crop-left{translate:0 0 35px}
.hero-panel-crop-right{translate:0 0 50px}
.hero-scene-icon-top{translate:0 0 65px}
.hero-scene-icon-side{translate:0 0 55px}
.hero-calc-decoration{translate:0 0 75px}
@media(prefers-reduced-motion:reduce){
 .hero-scene{transform:none!important}
 .hero-scene>[data-depth]{translate:none}
}

/* Independent digit reels, scaled by the surrounding typography. */
.hero-calc-number>span.hero-rolling-number,.hero-calc-price strong.hero-rolling-number{display:inline-flex;align-items:center;justify-content:center;line-height:1.15;letter-spacing:0;vertical-align:bottom}
.hero-digit{position:relative;display:inline-block;flex:0 0 1ch;width:1ch;height:1.15em;overflow:hidden;font-variant-numeric:tabular-nums}
.hero-digit>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1.15}
.hero-digit-separator{display:inline-block;line-height:1.15}

/* Tighter optical spacing while each digit keeps its full clipping window. */
.hero-rolling-number .hero-digit+.hero-digit{margin-left:-.11em}
.hero-rolling-number .hero-digit-separator{margin-inline:-.025em}
.hero-calc-number small{display:block}

/* The supplied artwork includes its own white card and shadow. */
.hero-panel-crop-right{top:37%;width:44%;right:-24%;height:auto;aspect-ratio:301 / 218}
.hero-panel-crop-right .hero-float-surface{background:transparent;border:0;box-shadow:none}
.hero-visual .hero-panel-art{position:static;inset:auto;display:block;width:100%;height:auto;max-height:none;object-fit:contain}

.hero-panel-crop-left{top:46%;width:29.33%;left:-5%;height:auto;aspect-ratio:295 / 247}
.hero-panel-crop-left .hero-float-surface{background:transparent;border:0;box-shadow:none}
.hero-calc-price{flex-direction:column;align-items:center;gap:4px;text-align:center}

/* Full dashboard screenshot, with its original proportions preserved. */
.hero-panel-placeholder{left:-8%;right:-8%;bottom:auto;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.hero-visual .hero-main-panel{position:static;inset:auto;display:block;width:100%;height:auto;max-height:none;object-fit:contain}

/* Give the animated scene breathing room beside the desktop headline. */
@media(min-width:900px){.hero-visual.hero-calculator{left:40px;width:calc(100% - 24px)}}

@media(max-width:899px){.hero-panel-crop-right{right:-8%}.hero-panel-crop-left{left:-6%}}
@media(min-width:900px) and (max-width:1399px){.hero-panel-crop-right{right:-6%}}

/* Use the extra right-hand space on wide screens without moving the left edge. */
@media(min-width:1400px){.hero-panel-placeholder{right:-24%}}
@media(min-width:1400px){.hero-panel-crop-right{right:-36%}}

/* The wider dashboard is centered eight percent to the right of the scene. */
@media(min-width:1400px){.hero-calc-decoration{left:25%;right:9%}}

/* Compact mobile composition: the background stays still. */
@media(max-width:899px){.hero-visual.hero-calculator{width:84%;max-width:412px;min-height:390px}.hero-float-surface{animation:none;transform:none}}
@media(max-width:399px){.hero-visual.hero-calculator{min-height:330px}.hero-calc-number>span{font-size:32px}.hero-calc-price strong{font-size:23px}}
@media(max-width:899px){.hero-panel-placeholder,.hero-scene-icon{opacity:.6}}

/* Trim the unused space below the mobile price without moving the artwork. */
@media(max-width:899px){.hero .hero-layout{padding-bottom:12px}.hero-visual.hero-calculator{margin-bottom:-28px}}

/* Simplify the mobile composition and lift the calculator by 56px. */
@media(max-width:899px){.hero-panel-crop,.hero-scene-icon{display:none}.hero-calc-decoration{bottom:122px}.hero-visual.hero-calculator{margin-bottom:-84px}}
@media(max-width:399px){.hero-calc-decoration{bottom:116px}}