:root {
    --bg: #FFFFFF;
    --strip: #DCE9F2;
    --strip-light: #E6F6FC;
    --ink: #263238;
    --muted: #5b6b83;
    --primary: #00A7E5;
    --primary-700: #00A7E5;
    --link: #00A7E5;
    --card: #ffffff;
    --ring: rgba(47, 125, 216, .2);
    --shadow: 0 12px 30px rgba(2, 6, 23, .08), 0 6px 14px rgba(2, 6, 23, .04);
    --radius: 18px;
    --radius-lg: 22px;
    --container: 1120px;
}

html,
body {
    color: var(--ink);
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--link);
    text-decoration: none
}

a.under {
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px
}

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 20px
}

.section-1 {
    padding: 96px 20px;
}

.section {
    padding: 80px 20px;
}

.section-tight {
    padding: 40px 0;
}

.eyebrow {
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-700);
    font-weight: 600;
    font-size: .8rem
}

.h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.12;
    margin: .2rem 0 1.5rem
}

.h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin: .2rem 0 1rem;
    font-weight: 600;
}

.lead {
    color: var(--muted);
    max-width: 66ch;
    font-size: 1rem;
    font-weight: 400;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border: 0;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 14px;
    box-shadow: var(--shadow)
}

.btn.alt {
    background: #e8f2ff;
    color: var(--primary-700)
}

.btn:hover {
    background: var(--primary-700)
}

/* HERO */
.hero {
    background: #fff;
    min-height: 463px;
    display: flex;
    align-items: center;
}

.hero-wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: center
}

.device-stack {
    display: flex;
    gap: 24px;
    justify-content: flex-end
}

.device {
    max-width: 400px;
    max-height: 400px;
}

.subnote {
    font-size: .9rem;
    color: #7a8aa3
}

/* PREVIEW */
.preview {
    background: var(--strip);
    border-top: 1px solid #e4edf8;
    border-bottom: 1px solid #e4edf8;
    padding: 2rem;
    position: relative;
    height: 660px;
}

.screens {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 18px;
    margin-top: 22px
}

.screen {
    background: #0b1628;
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow)
}

.screen .bar {
    height: 10px;
    background: #0e223e;
    border-radius: 10px;
    margin-bottom: 8px
}

.screen .window {
    height: 190px;
    background: linear-gradient(180deg, #0f223d, #0b1628);
    border: 1px solid #123;
    border-radius: 12px
}

/* ACTIVATION STEPS */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 26px;
    position: relative
}

.step {
    border-radius: var(--radius);
    padding: 18px;
    /* box-shadow: var(--shadow); */
    /* border: 1px solid #e9eef6; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.step .img {
    max-width: 170px;
    max-height: 130px;
    margin-bottom: 1rem;
}

.step .img img{
    width: 100%;
    height: 100%;
}

.step p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 14px;
}

.step:after {
    content: "→";
    position: absolute;
    right: -22px;
    top: 50%;
    translate: 0 -50%;
    color: var(--primary);
    font-weight: 700;
    font-size: 28px;
}

.step:last-child:after {
    display: none
}

/* VOUCHER STRIP */
.strip {
    background: var(--strip);
}

.strip-card {
    display: grid;

    grid-template-columns: 1fr 340px;
    gap: 22px;
    /* background: var(--card); */
    /* padding: 28px 24px; */
    border-radius: var(--radius-lg);
    align-items: center;
    /* box-shadow: var(--shadow);
    border: 1px solid #e9eef6 */
}

.gift {
    display: flex;
    justify-content: center;
    width: 100%;
    /* height: 220px; */
    border-radius: 16px;
    /* background:
        radial-gradient(120px 80px at 70% 30%, #79b7ff33, transparent 60%),
        radial-gradient(140px 90px at 40% 70%, #c7e1ff55, transparent 60%),
        conic-gradient(from 45deg, #eaf4ff, #fff 30%, #eaf4ff 60%, #fff 90%) */
}

.gift img{
    width: 380px;
}

/* HOW TO REDEEM */
.timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 20px
}

.tiny {
    /* background: #fff; */
    /* border: 1px solid #e9eef6; */
    /* border-radius: 14px; */
    padding: 14px;
    /* box-shadow: var(--shadow); */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
}

.tiny:after {
    content: "→";
    position: absolute;
    right: -16px;
    top: 20%;
    /* translate: 0 -50%; */
    font-size: 18px;
    color: var(--primary);
}

.tiny:last-child:after {
    display: none
}

.tiny .img {
    display: flex;
    justify-content: center;
    width: 184px;
    height: 100px;
    margin-bottom: 1rem;
}

/* APP DOWNLOAD */
.app {
    background: var(--strip)
}

.storebadges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0 3rem;
    justify-content: center;
}

.badge {
    height: 44px;
    width: 160px;
}

.thumb {
    margin-top: 24px;
    border-radius: 20px;
}

.thumb .box {
    aspect-ratio: 16/9;
    width: 100%;
    display: block;
    border-radius: 20px;
}
.thumb .box iframe{
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* FEATURES */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 2rem 0 4rem;
}

.feature {
    background: #fff;
    border: 1px solid #e9eef6;
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    text-align: center
}

.ico {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    /* background: #eaf3ff; */
    margin: 0 auto 12px
}

.feature p {
    color: var(--muted);
    margin: .45rem auto 0;
    font-size: 14px;
    line-height: 1.5;
}

/* RESOURCES */
.resources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.resource {
    background: #fff;
    border: 1px solid #e9eef6;
    border-radius: 16px;
    padding: 16px;
    /* box-shadow: var(--shadow); */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.resource.yellow{
    background: #FFF5CE;
}

.resource.yellow .pill{
    background: #FECE88;
    color: #FB941E;
}

.resource.blue{
    background: #CCEDFA;
}

.resource.blue .pill{
    background: #7AD1F2;
    color: #00A7E5;
}

.resource.green{
    background: #C8FAE2;
}

.resource.green .pill{
    background: #79D9AB;
    color: #02A859;
}

.resource .miniico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf3ff;
    margin: 0 auto 10px
}

.pill {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    background: #eaf3ff;
    color: var(--primary-700);
    font-weight: 600
}

.center {
    text-align: center
}

hr.sep {
    border: 0;
    height: 1px;
    background: #e6eef7;
    margin: 0
}

.bottom-wave {
    width: 100%;
    margin-top: 20px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.swipers{
    position: relative;
    min-height: 456px;
}

.swiper-container{
    min-height: 456px;
}

.screenshots-slider {
    position: absolute;
    top: 160px;
    width: calc(100% + 120px);
    left: -59px;
}

.swiper-slide {
    top: 22px;
}

.screenshots-slider .img {
    margin: 0 auto;
    width: 650px;
    height: 360px;
}

.screenshots-slider .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.mob-laptop {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 100%;
    z-index: 10;
}


/* RESPONSIVE */
@media (max-width: 1162px) { 
    .timeline {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 1024px) {
    .hero-wrap {
        grid-template-columns: 1fr;
        gap: 48px;
        justify-items: center;
    }

    .device-stack {
        justify-content: flex-start
    }

    .screens {
        grid-template-columns: 1fr 1fr 1fr
    }

    .features {
        grid-template-columns: 1fr 1fr
    }

    .resources {
        grid-template-columns: 1fr 1fr
    }

    .timeline {
        grid-template-columns: repeat(3, 1fr)
    }

}

@media (max-width: 720px) {
    .h1 {
        font-size: 1.8rem
    }

    .h2 {
        font-size: 1.35rem
    }

    .section {
        padding: 48px 20px
    }

    .step:after {
        right: unset;
        bottom: 0;
        top: unset;
        translate: 0 100%;
        transform: rotate(90deg);
        font-size: 18px;
    }

    .tiny:after {
        right: unset;
        bottom: 0;
        top: unset;
        translate: 0 90%;
        transform: rotate(90deg);
        font-size: 14px;
    }

    .preview{
        height: 470px;
    }

    .swipers{
        position: relative;
        min-height: 280px;
    }

    .swiper-container{
        min-height: 280px;
    }

    .swiper-slide {
        top: 45px;
    }

    .screenshots-slider .img {
        margin: 0 auto;
        width: 297px;
        height: 167px;
    }

    .screenshots-slider {
        width: 100%;
        left: 0;
        top: 115px;
    }

    .mob-laptop {
        max-width: 90%;
    }

    .screens {
        grid-template-columns: 1fr
    }

    .steps {
        grid-template-columns: 1fr
    }

    .timeline {
        grid-template-columns: 1fr
    }

    .features {
        grid-template-columns: 1fr
    }

    .resources {
        grid-template-columns: 1fr
    }

    .strip-card {
        grid-template-columns: 1fr
    }

}
@media (max-width: 398px) {
    .swiper-slide {
        top: 53px;
    }
    .screenshots-slider .img {
        width: 280px;
        height: 150px;
    }
}
@media (max-width: 378px) {
    .swiper-slide {
        top: 60px;
    }

    .screenshots-slider .img {
        width: 253px;
        height: 138px;
    }
}