.app-stage{--hero-ink:#173451;--hero-muted:#667f95;--hero-accent:#235a92;--hero-edge:#ffffff80;--hero-surface:#fff8;--hero-frame:#1b2a3d;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-width:0;min-height:0;color:var(--hero-ink);background:#dbe8ee}
.app-stage-top{position:relative;z-index:4;padding:30px 30px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.app-stage-top .eyebrow{font-size:9px;letter-spacing:2px;font-weight:500}.app-stage-top>a{font-size:10px;display:flex;gap:9px;align-items:center;white-space:nowrap;color:var(--hero-accent);border-bottom:1px solid currentColor;padding-bottom:5px}
.app-stage-heading{position:relative;z-index:3;text-align:center;padding:30px 28px 0;flex-shrink:0}.app-stage-heading h2{margin:0;font-size:clamp(40px,4.1vw,64px);font-weight:550;line-height:1.03;letter-spacing:-2.5px}.app-stage-heading em{font-style:normal;color:var(--hero-accent)}.app-stage-heading p{font-size:13px;color:var(--hero-muted);line-height:1.6;margin:15px 0 0;letter-spacing:.2px}
.app-composition{position:relative;isolation:isolate;flex:1;min-height:320px;margin:18px 0 8px}
.hero-primary{position:absolute;z-index:3;left:50%;top:49%;transform:translate(-50%,-50%) rotate(-2deg);display:block;max-height:100%;filter:drop-shadow(0 24px 20px #07182f30);overflow:hidden}
.hero-primary img{display:block;width:100%;height:100%;object-fit:contain;background:var(--hero-frame)}
.hero-frame-phone{height:min(97%,490px);aspect-ratio:600/1300;border:6px solid var(--hero-frame);border-radius:28px;background:var(--hero-frame);box-shadow:inset 0 0 0 1px #ffffff50,0 0 0 1px #7790a557}
.hero-frame-phone img{border-radius:21px}.hero-frame-poster{height:min(95%,490px);aspect-ratio:600/1067;border-radius:12px;border:1px solid #ffffffc7;background:#e7e3d9}.hero-frame-wide{width:82%;max-width:600px;aspect-ratio:16/9;border:7px solid #fff;border-radius:16px;background:white;transform:translate(-50%,-50%) rotate(-4deg);box-shadow:0 0 0 1px #b9c6ca}
.hero-frame-wide img{background:#e1e8e9;border-radius:9px}.hero-enlarge{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#07182f9c;color:white;font-size:16px;box-shadow:0 0 0 1px #ffffff38}.hero-primary:focus-visible{outline:3px solid var(--hero-accent);outline-offset:7px}.hero-primary:hover{filter:drop-shadow(0 24px 25px #07182f48) brightness(1.03)}
.hero-secondary{position:absolute;z-index:1;top:51%;height:min(76%,390px);aspect-ratio:600/1300;filter:drop-shadow(0 13px 14px #07182f20)}.hero-secondary img{width:100%;height:100%;object-fit:contain;border-radius:18px;background:var(--hero-frame);border:4px solid var(--hero-frame);box-shadow:0 0 0 1px #ffffff47}.hero-secondary-1{left:19%;transform:translate(-50%,-50%) rotate(-13deg)}.hero-secondary-2{left:81%;transform:translate(-50%,-50%) rotate(12deg)}.hero-secondary>span{position:absolute;bottom:-33px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;letter-spacing:.3px;color:var(--hero-muted)}
.hero-orbit{position:absolute;width:78%;aspect-ratio:1;left:50%;top:51%;transform:translate(-50%,-50%);border:1px solid var(--hero-edge);border-radius:50%;z-index:-1}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;inset:11%;border:1px solid var(--hero-edge);border-radius:50%}.hero-orbit:after{inset:-10%;border-style:dashed;opacity:.5}
.hero-platform{position:absolute;z-index:-1;left:12%;right:12%;height:12%;bottom:0;background:radial-gradient(ellipse,#24485c35,transparent 67%);filter:blur(9px);border-radius:50%}
.app-stage-bottom{position:relative;z-index:4;padding:4px 30px 25px;flex-shrink:0;text-align:center}.hero-caption{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.1px;margin:0 0 15px;min-height:17px}.hero-options{display:inline-flex;justify-content:center;gap:4px;padding:5px;border:1px solid var(--hero-edge);border-radius:30px;background:var(--hero-surface)}.hero-options[hidden]{display:none}.hero-options button{font-size:11px;line-height:1.3;min-height:37px;padding:10px 22px;border-radius:24px;color:var(--hero-muted)}.hero-options button[aria-pressed=true]{background:var(--hero-accent);color:#fff;box-shadow:0 3px 7px #10203920}.hero-options button:focus-visible{outline:3px solid var(--hero-accent);outline-offset:3px}.hero-footnote{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:20px;font-size:9px;color:var(--hero-muted);letter-spacing:.2px}.hero-footnote a{color:var(--hero-accent);display:flex;gap:9px;align-items:center}
.app-stage-neon{--hero-ink:#e5f4ff;--hero-muted:#91b3d4;--hero-accent:#7ee8ff;--hero-edge:#76bde526;--hero-surface:#0e2f4a90;--hero-frame:#0a1322;background:radial-gradient(ellipse at 80% 50%,#813a9940,transparent 47%),radial-gradient(ellipse at 15% 50%,#098fb840,transparent 47%),#08172d}.app-stage-neon:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#7fc8ff07 1px,transparent 1px),linear-gradient(90deg,#7fc8ff07 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(ellipse,#000,transparent 80%)}.app-stage-neon .app-stage-heading em{text-shadow:0 0 40px #42baff30}.app-stage-neon .hero-primary{box-shadow:0 0 0 1px #72e6ff6b,0 0 45px #18b8ff17;transform:translate(-50%,-50%) rotate(-3deg)}.app-stage-neon .hero-secondary-1{left:20%;top:54%;transform:translate(-50%,-50%) rotate(-15deg)}.app-stage-neon .hero-secondary-2{left:80%;top:49%;transform:translate(-50%,-50%) rotate(13deg)}.app-stage-neon .hero-options button[aria-pressed=true]{color:#0c2236}.app-stage-neon .hero-orbit{border-color:#61d9ff44;box-shadow:0 0 65px #24baff0d}.app-stage-neon .hero-platform{background:radial-gradient(ellipse,#21beff38,transparent 67%)}
.app-stage-rise{--hero-ink:#493c32;--hero-muted:#88705c;--hero-accent:#a16a36;--hero-frame:#3b3532;--hero-edge:#fff9;background:radial-gradient(ellipse at 50% 38%,#fff6db,#eee2c9 48%,#d9c3aa 100%)}.app-stage-rise .app-stage-heading h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-2px}.app-stage-rise .app-stage-heading em{font-style:italic}.app-stage-rise .hero-primary{transform:translate(-50%,-50%) rotate(-4deg)}.app-stage-rise .hero-secondary{height:min(75%,380px);aspect-ratio:600/1067}.app-stage-rise .hero-secondary img{border:1px solid #fff8;border-radius:9px}.app-stage-rise .hero-secondary-1{left:21%;top:53%;transform:translate(-50%,-50%) rotate(-13deg)}.app-stage-rise .hero-secondary-2{left:80%;top:53%;transform:translate(-50%,-50%) rotate(11deg)}.app-stage-rise .hero-orbit{border-color:#b9956752}.app-stage-rise .hero-orbit:before{border-style:dashed;border-color:#b9956752}.app-stage-rise .hero-orbit:after{border-color:#b9956733}
.app-stage-sky{--hero-ink:#18456a;--hero-muted:#577f9e;--hero-accent:#2875aa;--hero-frame:#eff7fa;--hero-edge:#fff9;background:radial-gradient(ellipse at 40% 22%,#fff8,transparent 45%),linear-gradient(155deg,#d9f2fb,#aed6ea 65%,#dcecf1)}.app-stage-sky .app-stage-heading{padding-top:34px}.app-stage-sky .app-stage-heading h2{font-weight:400;letter-spacing:-2.8px}.app-stage-sky .hero-primary{transform:translate(-50%,-50%) rotate(2deg);box-shadow:0 0 0 1px #fff}.app-stage-sky .hero-secondary{height:min(68%,340px);top:55%;filter:drop-shadow(0 14px 18px #3e729b2b)}.app-stage-sky .hero-secondary img{border-color:#f3fbff;border-width:5px}.app-stage-sky .hero-secondary-1{left:19%;transform:translate(-50%,-50%) rotate(-9deg)}.app-stage-sky .hero-secondary-2{left:82%;transform:translate(-50%,-50%) rotate(8deg)}.app-stage-sky .hero-orbit{background:#f2fbff55;border-color:#fff;box-shadow:0 0 85px #fff5}.app-stage-sky .hero-orbit:after{border-style:solid;border-color:#fff6}
.app-stage-clock{--hero-ink:#243f48;--hero-muted:#617d87;--hero-accent:#326d7e;--hero-frame:#f5f6f2;--hero-edge:#fff8;background:radial-gradient(ellipse at 20% 30%,#fcfcf5,#e1e9e6 56%,#bdd0d1)}.app-stage-clock .app-stage-heading h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-2px}.app-stage-clock .app-stage-heading em{font-style:italic}.app-stage-clock .hero-secondary{height:min(68%,330px);top:54%}.app-stage-clock .hero-secondary img{border-color:#f4f7f4;border-width:5px}.app-stage-clock .hero-secondary-1{left:22%;top:36%;transform:translate(-50%,-50%) rotate(-12deg)}.app-stage-clock .hero-secondary-2{left:80%;top:58%;transform:translate(-50%,-50%) rotate(11deg)}.app-stage-clock .app-composition[data-hero-frame=wide] .hero-secondary-1{left:27%;top:24%;height:min(58%,280px)}.app-stage-clock .app-composition[data-hero-frame=wide] .hero-secondary-2{left:77%;top:68%;height:min(58%,280px)}.app-stage-clock .app-composition[data-hero-frame=wide] .hero-primary{top:49%}.app-stage-clock .hero-orbit{border-color:#7f9a9c4d}.app-stage-clock .hero-orbit:before{border-color:#7f9a9c33}.app-stage-clock .hero-orbit:after{border-color:#7f9a9c33}
@media(max-height:800px) and (min-width:1051px){.app-stage-top{padding-top:22px}.app-stage-heading{padding-top:18px}.app-stage-heading h2{font-size:44px}.app-stage-heading p{margin-top:10px;font-size:11px}.app-stage-sky .app-stage-heading{padding-top:18px}.app-composition{min-height:275px;margin-top:12px}.app-stage-bottom{padding-bottom:17px}.hero-caption{font-size:11px;margin-bottom:11px}.hero-footnote{margin-top:13px}.hero-options button{min-height:34px;padding:8px 20px;font-size:10px}}
@media(max-width:1150px) and (min-width:851px){.app-stage-top{padding:24px 20px 0;gap:12px;flex-wrap:wrap}.app-stage-top .eyebrow{font-size:8px;letter-spacing:1.4px}.app-stage-top>a{font-size:9px}.app-stage-heading{padding-top:24px;padding-inline:15px}.app-stage-heading h2{font-size:43px;letter-spacing:-1.8px}.app-stage-heading p{font-size:11px}.app-composition{min-height:320px}.hero-frame-phone{height:min(91%,420px)}.hero-frame-poster{height:min(88%,420px)}.hero-secondary{height:min(62%,290px)}.app-stage-rise .hero-secondary{height:min(60%,280px)}.hero-secondary>span{font-size:8px}.app-stage-bottom{padding-inline:20px}.hero-options button{padding-inline:17px}.hero-footnote{font-size:8px}}
@media(max-width:850px){.app-stage{height:790px;min-height:740px;max-height:1000px}.app-stage-top{padding:24px 30px 0}.app-stage-heading{padding-top:25px}.app-stage-heading h2{font-size:55px}.app-composition{width:min(100%,660px);align-self:center;min-height:350px}.hero-frame-phone{height:min(96%,440px)}.hero-frame-poster{height:min(94%,440px)}.app-stage-bottom{padding-bottom:25px}.hero-secondary{height:min(76%,350px)}.app-stage-rise .hero-secondary{height:min(72%,335px)}.app-stage-sky .app-stage-heading{padding-top:25px}}
@media(max-width:520px){.app-stage{height:735px;min-height:735px;max-height:none}.app-stage-top{padding:22px 20px 0;gap:12px}.app-stage-top .eyebrow{font-size:7px;letter-spacing:1.5px;max-width:55%;line-height:1.8}.app-stage-top>a{font-size:9px;gap:5px}.app-stage-heading{padding:26px 20px 0}.app-stage-heading h2{font-size:43px;letter-spacing:-1.8px}.app-stage-heading p{font-size:11px;line-height:1.6;margin-top:12px}.app-composition{min-height:320px;margin-top:13px;margin-bottom:5px}.hero-frame-phone{height:94%;max-height:370px;border-width:5px;border-radius:23px}.hero-frame-phone img{border-radius:18px}.hero-frame-poster{height:92%;max-height:370px}.hero-frame-wide{width:83%;border-width:5px;border-radius:12px}.hero-secondary{height:68%;max-height:270px}.hero-secondary img{border-width:3px;border-radius:13px}.hero-secondary-1{left:18%}.hero-secondary-2{left:83%}.hero-secondary>span{display:none}.hero-orbit{width:88%}.app-stage-bottom{padding:6px 20px 23px}.hero-caption{font-size:11px;margin-bottom:13px}.hero-options button{font-size:11px;padding:9px 21px;min-height:36px}.hero-footnote{font-size:8px;gap:10px;margin-top:17px}.app-stage-rise .hero-secondary{height:66%;max-height:260px}.app-stage-sky .hero-secondary{height:63%;max-height:250px}.app-stage-sky .app-stage-heading{padding-top:26px}.app-stage-clock .hero-secondary{height:60%;max-height:240px}.app-stage-clock .app-composition[data-hero-frame=wide] .hero-secondary-1{height:54%;max-height:215px;left:26%;top:27%}.app-stage-clock .app-composition[data-hero-frame=wide] .hero-secondary-2{height:54%;max-height:215px;left:78%;top:69%}.hero-enlarge{bottom:10px;right:9px;width:25px;height:25px;font-size:15px}}
