:root{--green:#1ed58c;--green-hover:#15b786;--mint:#edfcf6;--ink:#030f37}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,sans-serif;color:var(--ink);background:var(--mint)}
header{background:#fff;height:80px;display:flex;align-items:center;justify-content:center}
header img{width:173px;height:auto;display:block}
main{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;padding:3rem 0 4rem}
.stage{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;min-width:0}
.cards{display:flex;gap:1rem;width:100%;overflow-x:auto;padding:1rem 0 3.5rem var(--start,1rem);margin-bottom:-2.5rem;scrollbar-width:none}
.cards::after{content:"";flex:0 0 var(--end,1rem)}
.cards::-webkit-scrollbar{display:none}
.card{display:flex;align-items:center;gap:1rem;flex:0 0 auto;min-width:375px;padding:1rem;background:#fff;color:var(--ink);border-radius:1.25rem;text-decoration:none;box-shadow:0 30px 12px 0 rgba(0,0,0,.01),0 17px 10px 0 rgba(0,0,0,.02),0 8px 8px 0 rgba(0,0,0,.03),0 2px 4px 0 rgba(0,0,0,.04);transition:background-color .2s,color .2s,transform .2s}
.card:hover{transform:translateY(-2px)}
.card.active{background:var(--green);color:#fff}
.card-icon{width:6rem;height:6rem;border-radius:1.125rem;background:var(--mint);display:flex;align-items:center;justify-content:center;padding:.5rem;flex:none}
.card-icon img{width:100%;height:100%}
.card-title{font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(1.25rem,1.1477rem + .5455vw,2rem);line-height:1.2;padding-right:1rem;white-space:nowrap}
.body{display:flex;align-items:center;gap:3.5rem}
.phone{position:relative;width:275px;flex:none}
.phone-frame{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}
.phone-screen{position:absolute;top:1.8%;bottom:1.8%;left:4.5%;right:4.5%;overflow:hidden;z-index:3;border-radius:2.2rem}
.phone-screen img{width:100%;height:100%;object-fit:cover;display:block}
.content{max-width:420px;font-size:1rem;line-height:1.5}
.content p{margin:0 0 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:.5rem;padding:.8rem 1.9rem;border-radius:.75rem;background:var(--green);border:1px solid var(--green);color:var(--ink);font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(1rem,.983rem + .0909vw,1.125rem);text-decoration:none;transition:background-color .15s}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover)}
.btn-arrow{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:1px solid var(--green);border-radius:.75rem;color:#1e293b;transition:background-color .15s}
.btn-arrow:hover{background:var(--mint)}
.btn-arrow svg{width:1.4rem;height:1.4rem}
.pager{display:none}
@media(min-width:1024px) and (max-width:1366px){.phone{width:220px}}
@media(min-width:1200px) and (max-width:1499.98px){html{font-size:87.5%}}
@media(min-width:1500px) and (min-height:900px){.phone{width:302px}}
@media(max-width:991.98px){
main{padding:3rem 0 4rem;align-items:flex-start}
.stage{gap:1rem}
.cards{max-width:var(--container,100%);margin:0 auto -2.5rem}
.card{min-width:320px}
.body{display:grid;grid-template-columns:1fr 2fr;width:100%;max-width:var(--container,100%);padding:0 .75rem;gap:0}
.phone{grid-area:1/1;width:140px;justify-self:center;align-self:start}
.phone-screen{border-radius:1rem}
.content{grid-area:1/2;display:flex;flex-direction:column;justify-content:space-between;min-height:380px;padding-left:1.5rem;max-width:none}
.copy{display:contents}
.content .btn{width:100%;margin-top:0}
.pager{grid-area:1/1;display:flex;gap:1rem;align-self:end}
}
@media(min-width:576px) and (max-width:991.98px){:root{--container:540px}}
@media(min-width:768px) and (max-width:991.98px){:root{--container:720px}}
@media(max-width:767.98px){
.card{min-width:260px;padding:.75rem}
.card-icon{width:4.5rem;height:4.5rem}
}
@media(max-width:575.98px){.phone{justify-self:start}}