/* A mobile dashboard separated into physical layers, using the live KPI palette. */
#hero{min-height:clamp(650px,calc(100svh - 76px),770px);isolation:isolate}
#hero .landing-copy{z-index:3}
.ss-hero-visual{position:absolute;z-index:1;right:150px;top:50%;transform:translateY(calc(-50% - 40px));width:min(38vw,475px,calc((100svh - 190px)*.73));aspect-ratio:600/760;container-type:inline-size;pointer-events:none}
.ss-hero-visual__scene{position:relative;width:100%;height:100%;perspective:1800px;perspective-origin:50% 50%}
.ss-hero-visual__glow{position:absolute;inset:9% -8% 0 -5%;background:radial-gradient(ellipse at 65% 48%,#365aa730 0%,#1f376319 36%,transparent 68%);filter:blur(30px)}
.ss-stack{position:absolute;left:33%;top:7%;width:55%;height:90%;transform-style:preserve-3d;transform:rotateX(38deg) rotateY(-24deg) rotateZ(24deg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.ss-stack__base{position:absolute;inset:0;border-radius:3.8cqw;background:linear-gradient(115deg,#fff 0%,#edf1f9 58%,#e4e9f3 100%);border:1px solid #ffffffdb;box-shadow:inset -2px -2px 4px #7c89a455,0 2px 0 #c1c9d7,1px 4px 0 #b7c0d0,2px 6px 0 #aab4c6,3px 8px 0 #8d9bb3,4px 10px 0 #71829e,10px 20px 28px #0009,26px 35px 55px #0006;transform:translateZ(-3px)}
.ss-stack__base:after{content:"";position:absolute;inset:7px 7px 9px;border:1px solid #fff;border-radius:3cqw;pointer-events:none}
.ss-stack__brand{position:absolute;left:3.3cqw;top:2.8cqw;color:#172544;font-size:2.35cqw;line-height:1.1;font-weight:750;letter-spacing:-.04em;display:flex;justify-content:space-between;align-items:center;width:48cqw}
.ss-stack__brand span{font-size:1.28cqw;letter-spacing:0;font-weight:500;color:#6e7e9a}
.ss-stack-card{position:absolute;left:1.5cqw;width:52cqw;padding:1.8cqw 2.5cqw;border:1px solid #6a80aa55;border-radius:1.7cqw;background:linear-gradient(120deg,#2c477f,#243e73 68%);color:#fff;box-shadow:inset 0 1px 0 #ffffff20,0 1px 0 #1a2d55,0 3px 0 #1b2f59,0 5px 0 #16294e,0 12px 22px #10213e3b;transform-style:preserve-3d}
.ss-stack-card__heading{display:flex;align-items:center;justify-content:space-between;font-size:2.15cqw;line-height:1.2;font-weight:550;letter-spacing:-.015em}
.ss-stack-card__heading i{display:grid;place-items:center;border:1px solid #adbedc5e;width:2.5cqw;height:2.5cqw;border-radius:50%;font:400 1.75cqw/1 Georgia,serif;color:#adbfdf}
.ss-stack-card__value{display:flex;align-items:baseline;gap:1.6cqw;margin-top:1.35cqw;white-space:nowrap}
.ss-stack-card__value strong{font-size:4.5cqw;line-height:1.05;letter-spacing:-.025em;font-weight:570}
.ss-stack-card__value>span{font-size:1.7cqw;line-height:1;font-weight:500;color:#a6e8d6}
.ss-stack-card__rows{margin-top:1.3cqw;padding-top:.4cqw;border-top:1px solid #9fb1d036;font-size:1.6cqw;line-height:1.2}
.ss-stack-card__rows>div{display:flex;justify-content:space-between;gap:1cqw;padding:.12cqw 0;border-bottom:1px solid #9fb1d01c;white-space:nowrap}
.ss-stack-card__rows>div:last-child{border:0}
.ss-stack-card__rows span{color:#c5d1e7;font-weight:400}
.ss-stack-card__rows b{font-weight:500;color:#f2f5fc}
.ss-stack-card--orders{top:2.5cqw;transform:translate3d(-1cqw,0,16cqw);box-shadow:inset 0 1px 0 #ffffff26,0 2px 0 #1a2d55,0 4px 0 #1b2f59,0 6px 0 #152747,0 7px 8px #06122520}
.ss-stack-card--buyouts{top:29cqw;transform:translateZ(4px)}
.ss-stack-card--payout{top:51cqw;transform:translate3d(-2cqw,0,14cqw);box-shadow:inset 0 1px 0 #ffffff26,0 2px 0 #1a2d55,0 4px 0 #1b2f59,0 6px 0 #152747,0 7px 8px #06122520}
.ss-stack-card--cost{top:74cqw;transform:translateZ(4px)}
.ss-stack-card--cost .ss-stack-card__value>span{color:#e9c3d3}
.ss-stack-card--profit{top:94cqw;transform:translate3d(1cqw,0,18cqw);background:linear-gradient(120deg,#273a68,#1e2d53 75%);box-shadow:inset 0 1px 0 #ffffff26,0 2px 0 #162545,0 4px 0 #14213e,0 6px 0 #101b33,0 7px 8px #06122530}
@media(min-width:901px) and (max-width:1200px){
  #hero{min-height:clamp(650px,calc(100svh - 76px),730px);padding-block:80px}
  #hero .landing-title{font-size:clamp(38px,4.2vw,50px)}
  #hero .landing-copy>p{max-width:500px;font-size:17px}
  #hero .landing-actions{gap:10px}
  #hero .landing-actions .landing-button{font-size:14px;padding-inline:18px;gap:16px}
  .ss-hero-visual{right:50px;width:min(39vw,calc((100svh - 190px)*.73))}
}
@media(max-width:900px){
  #hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:78px;padding-bottom:0;gap:10px}
  #hero .landing-copy{padding:0}
  .ss-hero-visual{position:relative;right:auto;top:auto;transform:none;width:min(100%,560px);margin:0 auto;flex-shrink:0}
}
@media(max-width:640px){
  #hero{padding-top:58px;gap:4px}
  .ss-hero-visual{width:100%;max-width:450px;margin-inline:auto}
  .ss-hero-visual__scene{perspective:1200px}
  .ss-stack{transform:rotateX(38deg) rotateY(-24deg) rotateZ(24deg)}

}

/* Soft concentric waves share the visual language of the final offer. */
.ss-hero-waves{position:absolute;z-index:0;right:-120px;top:45%;width:min(75vw,1040px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;mask-image:radial-gradient(ellipse,#000 28%,#0008 56%,transparent 74%)}
.ss-hero-waves span{position:absolute;border:1px solid #bec1ca24;border-radius:43% 57% 48% 52%/55% 41% 59% 45%;transform:rotate(-12deg)}
.ss-hero-waves span:nth-child(1){inset:34%}
.ss-hero-waves span:nth-child(2){inset:27%;filter:blur(.15px)}
.ss-hero-waves span:nth-child(3){inset:20%;filter:blur(.3px)}
.ss-hero-waves span:nth-child(4){inset:13%;filter:blur(.5px)}
.ss-hero-waves span:nth-child(5){inset:6%;filter:blur(.8px)}
.ss-hero-waves span:nth-child(6){inset:-1%;filter:blur(1.2px)}
/* The detached cards cast soft shadows onto the original screen plane. */
.ss-stack-shadow{position:absolute;left:3cqw;width:49cqw;border-radius:2cqw;background:#07152f55;filter:blur(2cqw);transform:translateZ(0);pointer-events:none}
.ss-stack-shadow--orders{top:7cqw;height:19cqw}
.ss-stack-shadow--payout{top:56cqw;height:16cqw}
.ss-stack-shadow--profit{top:99cqw;height:16cqw}
@media(max-width:900px){.ss-hero-waves{top:auto;bottom:-8%;right:-25%;width:120%;transform:none}.ss-hero-visual{margin-bottom:18px}}


@media(max-width:900px){.ss-hero-waves{top:auto;right:-18%}.ss-hero-visual{width:min(94%,500px)}}
@media(max-width:640px){.ss-hero-visual{width:94%;max-width:420px}}

/* Hide the illustration when the layout collapses into a single column. */
@media(max-width:900px){#hero{gap:0;padding-bottom:64px}.ss-hero-visual{display:none}.ss-hero-waves{top:50%;bottom:auto;right:-50%;width:120%;transform:translateY(-50%);opacity:.5}}
@media(max-width:640px){#hero{padding-bottom:58px}}

/* A small optical adjustment for the MacBook viewport at normal zoom. */
@media(min-width:1360px) and (max-width:1535px){.ss-hero-visual{right:166px}}