:root{
--card-bg: #0d1613;
--accent: #2A5D3C;
}
.wrap{
    max-width:1200px;
    color:#e6eef8;
}

/* Carousel frame */
.carousel {
    position:relative;
    overflow:hidden;
    max-width: 1200px;
    border-radius:18px;
    padding:14px; /* outer padding for dot overlay */
}

/* track uses native scrolling with scroll-snap */
.track {
    display:flex;
    gap:var(--gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom:18px;
    scrollbar-width: none; /* firefox */
}
.track::-webkit-scrollbar { display:none; } /* chrome */

/* each slide (the screenshot card) */
.slide {
    scroll-snap-align:center;
    flex: 0 0 23%; /* visible width of each slide on desktop/tablet */
    border-radius:18px;
    position:relative;
    user-select:none;
}

/* inner container to create phone-like frame and image area */
.device {
    display:block;
    /* height: calc(100% - 0px); */
    border-radius: 14px;
    overflow:hidden;
}

.screenshot {
    display:block;
    width: auto;
    height: 480px;
    object-fit:contain;
    display:block;
    border-radius: 15px;
}
.store-buttons {
    width: 30vw;
    max-width: 180px;
    max-height: 60px;
}

/* smaller screens: slides get wider (touch-friendly) */
@media (max-width: 1200px){
    .slide{ flex:0 0 35%; }
    .screenshot{ height: 420px; }
}

/* smaller screens: slides get wider (touch-friendly) */
@media (max-width: 900px){
    .slide{ flex:0 0 35%; }
    .screenshot{ height: 420px; }
}
@media (max-width: 800px){
    .slide{ flex:0 0 55%; }
    .screenshot{ height: 390px; }
}

@media (max-width:520px){
    .slide{ flex:0 0 70%; }
    .screenshot{ height: 360px; }
}

/* pagination (dots) */
.pagination {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:14px;
    gap:10px;
    z-index:20;
    align-items:center;
    user-select:none;
    display:none;
}
.dot {
    width:10px;height:10px;border-radius:999px;
    background: #7b7878;
    transition: transform .22s cubic-bezier(.2,.9,.3,1), background .18s;
}
.dot[aria-current="true"]{
    transform:scale(1.6);
    background: var(--accent);
}

/* Left/Right arrows (optional) */
.arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(42,93,60,0.55);
    border:1px solid rgba(255,255,255,0.03);
    backdrop-filter: blur(4px);
    cursor:pointer;
}
.arrow svg{width:18px;height:18px;fill:#eaf6ff;}
.arrow.left{left:0px;}
.arrow.right{right:0px;}

/* small page indicator text (optional) */
.pagecount{
    position:absolute;right:14px;top:14px;font-size:13px;color:rgba(255,255,255,0.75);
    background: rgba(123,120,120,0.25); padding:6px 10px;border-radius:10px;
    border:1px solid rgba(123,120,120,0.03);
    z-index: 20
}

/* focus styles for accessibility */
.dot:focus, .arrow:focus { outline:2px solid rgba(125,211,252,0.28); outline-offset:2px; }