/* =========================================================
   ISAFAAPPS
   FULL SCREEN PRESENTATION
   ========================================================= */

:root {

    --blue: #087fe5;
    --blue-dark: #0752aa;
    --red: #e52e2e;
    --ink: #073268;

    --white: #ffffff;

    /* Desktop */
    --cycle: 38s;

    /* Mobile */
    --mobile-cycle: 31s;

    --ease:
        cubic-bezier(.18,.82,.2,1);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
}

body {

    overflow: hidden;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--ink);

    background: #8bdfff;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   APP
   ========================================================= */

.app {

    position: relative;

    width: 100vw;
    height: 100svh;

    min-height: 600px;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(
            circle at 52% 3%,
            rgba(255,255,255,.95),
            transparent 19%
        ),

        linear-gradient(
            180deg,
            #17afea 0%,
            #72d5f7 44%,
            #eaf9ff 78%,
            #f4fbff 100%
        );
}


.scene-bg,
.hero {

    position: absolute;

    inset: 0;
}


.scene-bg {

    z-index: 0;

    overflow: hidden;
}


/* =========================================================
   SUN
   ========================================================= */

.sun {

    position: absolute;

    width: 38vmin;
    height: 38vmin;

    min-width: 260px;
    min-height: 260px;

    left: 44%;
    top: -20vmin;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,1) 0 4%,
            rgba(255,244,183,.72) 9%,
            rgba(255,255,255,0) 67%
        );

    filter: blur(.5px);

    opacity: 0;

    animation:
        sunRise
        var(--cycle)
        ease-in-out
        infinite;
}


.sun-rays {

    position: absolute;

    left: 48%;
    top: -4%;

    width: 5px;
    height: 45%;

    opacity: 0;

    background:
        linear-gradient(
            #fff,
            transparent
        );

    transform: rotate(34deg);

    filter: blur(1px);

    box-shadow:
        90px 10px 0 rgba(255,255,255,.22),
        -110px 20px 0 rgba(255,255,255,.18),
        170px 70px 0 rgba(255,255,255,.16);

    animation:
        rays
        var(--cycle)
        ease-in-out
        infinite;
}


/* =========================================================
   CLOUD
   ========================================================= */

.cloud {

    position: absolute;

    width: 230px;
    height: 62px;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            .83
        );

    filter: blur(2px);

    opacity: 0;

    z-index: 2;

    animation:
        cloudFloat
        var(--cycle)
        ease-in-out
        infinite;
}


.cloud::before,
.cloud::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}


.cloud::before {

    width: 105px;
    height: 105px;

    left: 35px;
    bottom: 20px;
}


.cloud::after {

    width: 130px;
    height: 130px;

    right: 35px;
    bottom: 5px;
}


.cloud-a {

    left: -4%;
    top: 18%;
}


.cloud-b {

    right: -4%;
    top: 9%;

    transform: scale(.75);
}


.cloud-c {

    left: 33%;
    top: 48%;

    transform: scale(.65);
}


.cloud-d {

    right: 22%;
    top: 60%;

    transform: scale(.45);
}


/* =========================================================
   CITY
   ========================================================= */

.city {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 8%;

    width: 100%;
    height: 31%;

    object-fit: cover;

    object-position:
        center bottom;

    opacity: 0;

    animation:
        cityIn
        var(--cycle)
        ease-in-out
        infinite;
}


/* =========================================================
   PARTICLES
   ========================================================= */

.particles {

    position: absolute;

    inset: 0;

    opacity: 0;

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,.8) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle,
            rgba(255,255,255,.5) 0 1px,
            transparent 2px
        );

    background-size:
        125px 125px,
        83px 83px;

    background-position:
        10px 20px,
        45px 75px;

    animation:
        particlesIn
        var(--cycle)
        ease-in-out
        infinite;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    z-index: 5;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {

    position: absolute;

    z-index: 100;

    left: 6vw;
    top: 2vh;

    width:
        clamp(
            190px,
            24vw,
            340px
        );

    display: block;

    filter:
        drop-shadow(
            0 15px 22px
            rgba(
                0,
                62,
                130,
                .14
            )
        );

    animation:
        logoIn
        var(--cycle)
        var(--ease)
        infinite;

    transform-origin: center;
}


.brand img {

    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   COPY
   ========================================================= */

.copy {

    position: absolute;

    z-index: 40;

    left: 4.2vw;

    top: 37vh;

    width:
        min(
            42vw,
            610px
        );
}


/* =========================================================
   HEADLINE
   ========================================================= */

.headline {

    margin: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    column-gap: .20em;

    row-gap: 0;

    font-size:
        clamp(
            40px,
            3.8vw,
            50px
        );

    line-height: 1.02;

    letter-spacing: -0.045em;

    font-style: italic;

    font-weight: 850;
}


.headline span {

    display: inline-block;

    opacity: 0;

    transform:
        translateY(28px)
        rotateX(-20deg);

    filter: blur(7px);

    animation:
        wordIn
        var(--cycle)
        var(--ease)
        infinite;
}


.accent-blue {
    color: #0755c7;
}


.accent-red {
    color: var(--red);
}


/* =========================================================
   QUOTE
   ========================================================= */

.quote {

    position: relative;

    margin-top: 18px;

    padding:
        20px
        40px
        10px
        50px;

    width:
        min(
            480px,
            100%
        );

    min-height: 125px;

    font-size:
        clamp(
            15px,
            1.35vw,
            22px
        );

    line-height: 1.28;

    font-style: italic;

    font-weight: 650;

    color: #073268;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        quoteBox
        var(--cycle)
        var(--ease)
        infinite;
}


.quote::before,
.quote::after {

    content: "";

    position: absolute;

    left: 48px;
    right: 12px;

    height: 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #178cf0,
            transparent
        );
}


.quote::before {
    top: 0;
}


.quote::after {
    bottom: 0;
}


.quote-mark {

    position: absolute;

    left: 0;
    top: 0;

    font-size: 58px;

    line-height: 1;

    font-style: normal;

    color: #178cf0;
}


.quote-mark-end {

    left: auto;
    right: -2px;

    top: auto;
    bottom: -19px;
}


.quote p {

    margin: 0;

    min-height: 88px;
}


.quote p::after {

    content: "";

    display: inline-block;

    width: 2px;
    height: 1em;

    margin-left: 3px;

    vertical-align: -.15em;

    background: currentColor;

    animation:
        caret
        .55s
        steps(1)
        infinite;
}


/* =========================================================
   OBJECT STAGE
   ========================================================= */

.object-stage {

    position: absolute;

    inset: 0;

    z-index: 14;

    pointer-events: none;
}


.object {

    position: absolute;

    display: block;

    opacity: 0;

    will-change:
        transform,
        opacity,
        filter;
}



/* =========================================================
   SCENE CAPTION
   MAN + LAPTOP / WOMAN + PHONE
   ========================================================= */

.scene-caption {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 20px;
    border-radius: 999px;
    color: #073268;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,250,255,.90));
    border: 1px solid rgba(255,255,255,.98);
    box-shadow: 0 15px 35px rgba(0,78,150,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: clamp(14px,1.15vw,20px);
    font-weight: 850;
    letter-spacing: -.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 45;
    will-change: transform, opacity, filter;
}

.caption-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(8,127,229,.16), rgba(7,82,170,.07));
    font-size: 18px;
}

.caption-work,
.caption-gadget {
    top: 68%;
    transform: translate(-50%,25px) scale(.92);
    filter: blur(7px);
}

.caption-work {
    animation: captionWork var(--cycle) var(--ease) infinite;
}

.caption-gadget {
    animation: captionGadget var(--cycle) var(--ease) infinite;
}

@keyframes captionWork {
    0%,34% { opacity:0; transform:translate(-50%,25px) scale(.92); filter:blur(7px); }
    36%,47% { opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0); }
    48%,100% { opacity:0; transform:translate(-50%,-15px) scale(.96); filter:blur(5px); }
}

@keyframes captionGadget {
    0%,47% { opacity:0; transform:translate(-50%,25px) scale(.92); filter:blur(7px); }
    49%,60% { opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0); }
    61%,100% { opacity:0; transform:translate(-50%,-15px) scale(.96); filter:blur(5px); }
}

/* =========================================================
   PLANE
   ========================================================= */

.plane {

    width:
        clamp(
            80px,
            9vw,
            145px
        );

    left: 38%;
    top: 17%;

    animation:
        planeFly
        var(--cycle)
        var(--ease)
        infinite;
}


/* =========================================================
   LAPTOP
   ========================================================= */

.laptop {

    width:
        clamp(
            400px,
            43vw,
            450px
        );

    left: 35%;
    top: 19%;

    animation:
        laptopIn
        var(--cycle)
        var(--ease)
        infinite;
}


/* =========================================================
   MAN
   ========================================================= */

.person-man {

    width:
        clamp(
            190px,
            19vw,
            315px
        );

    left: 53%;
    top: 41%;

    z-index: 18;

    animation:
        manIn
        var(--cycle)
        var(--ease)
        infinite;
}


/* =========================================================
   PHONE
   ========================================================= */

.phone {

    width:
        clamp(
            140px,
            15vw,
            135px
        );

    left: 43%;
    top: 18%;

    z-index: 16;

    animation:
        phoneIn
        var(--cycle)
        var(--ease)
        infinite;
}


/* =========================================================
   WOMAN
   ========================================================= */

.person-woman {

    width:
        clamp(
            165px,
            18vw,
            290px
        );

    left: 43%;
    top: 42%;

    z-index: 19;

    animation:
        womanIn
        var(--cycle)
        var(--ease)
        infinite;
}


/* =========================================================
   BUSINESS ICONS
   ========================================================= */

.business-pulse {

    position: absolute;

    z-index: 12;

    width:
        clamp(
            48px,
            5vw,
            78px
        );

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border-radius: 22%;

    color: #087fe5;

    background:
        rgba(
            255,
            255,
            255,
            .8
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .85
        );

    box-shadow:
        0 14px 28px
        rgba(
            0,
            84,
            160,
            .14
        );

    font-size:
        clamp(
            20px,
            2vw,
            32px
        );

    opacity: 0;

    animation:
        iconFloat
        var(--cycle)
        var(--ease)
        infinite;
}


.pulse-cart {
    left: 61%;
    top: 5%;
}


.pulse-chart {
    left: 74%;
    top: 10%;
}


.pulse-users {
    right: 3%;
    top: 18%;
}


/* =========================================================
   FEATURES DESKTOP
   ========================================================= */

.features {

    position: absolute;

    z-index: 24;

    left: 5%;
    right: 5%;

    bottom: 19%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 10px;
}


.feature {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        9px
        12px;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            .91
        );

    box-shadow:
        0 12px 30px
        rgba(
            0,
            80,
            150,
            .10
        );

    opacity: 0;

    transform:
        translateY(24px)
        scale(.96);

    filter: blur(5px);

    animation:
        featureIn
        var(--cycle)
        var(--ease)
        infinite;
}


.feature img {

    flex: 0 0 auto;

    width:
        clamp(
            42px,
            4vw,
            64px
        );

    height:
        clamp(
            42px,
            4vw,
            64px
        );

    object-fit: cover;

    border-radius: 50%;
}


.feature strong {

    display: block;

    font-size:
        clamp(
            12px,
            1.05vw,
            18px
        );
}


.feature small {

    display: block;

    margin-top: 2px;

    font-size:
        clamp(
            9px,
            .75vw,
            13px
        );

    line-height: 1.2;

    color: #24466c;
}


/* =========================================================
   COMPLETE PACKAGE
   ========================================================= */

.complete-package {

    position: absolute;

    z-index: 30;

    left: 5%;

    right: 5%;

    top: 12%;

    bottom: 18%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    opacity: 0;

    animation:
        packageIn
        var(--cycle)
        var(--ease)
        infinite;

    pointer-events: none;
}


/* =========================================================
   PACKAGE TITLE
   ========================================================= */

.package-title {

    margin-bottom: 16px;

    opacity: 0;

    transform:
        translateY(25px)
        scale(.96);

    filter: blur(6px);

    animation:
        packageTitleIn
        var(--cycle)
        var(--ease)
        infinite;
}


.package-kicker {

    margin-bottom: 4px;

    font-size:
        clamp(
            10px,
            1vw,
            15px
        );

    font-weight: 800;

    letter-spacing: .12em;

    color: #087fe5;
}


.package-title h2 {

    margin: 0;

    font-size:
        clamp(
            30px,
            3.2vw,
            48px
        );

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.04em;

    color: #073268;
}


.package-title p {

    margin:
        7px
        0
        0;

    font-size:
        clamp(
            11px,
            1vw,
            16px
        );

    color: #315577;
}


/* =========================================================
   PACKAGE GRID
   ========================================================= */

.package-grid {

    width: 100%;

    max-width: 1050px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 9px;
}


/* =========================================================
   PACKAGE ITEM
   ========================================================= */

.package-item {

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        9px
        13px;

    text-align: left;

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .95
        );

    box-shadow:
        0 12px 28px
        rgba(
            0,
            80,
            150,
            .12
        );

    opacity: 0;

    transform:
        translateY(28px)
        scale(.90);

    filter: blur(6px);

    animation:
        packageCardIn
        var(--cycle)
        var(--ease)
        infinite;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.package-icon {

    width: 43px;

    height: 43px;

    flex:
        0 0 43px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(23,140,240,.12),
            rgba(7,95,192,.08)
        );

    font-size: 22px;
}


.package-item strong {

    display: block;

    font-size:
        clamp(
            11px,
            .95vw,
            16px
        );

    line-height: 1.15;

    font-weight: 850;
}


.package-item small {

    display: block;

    margin-top: 3px;

    font-size:
        clamp(
            8px,
            .72vw,
            12px
        );

    line-height: 1.2;

    color: #315577;
}



/* =========================================================
   COMPLETE PACKAGE STAGGER
   ========================================================= */

.package-1 { animation-delay: 0s; }
.package-2 { animation-delay: .10s; }
.package-3 { animation-delay: .20s; }
.package-4 { animation-delay: .30s; }
.package-5 { animation-delay: .40s; }
.package-6 { animation-delay: .50s; }
.package-7 { animation-delay: .60s; }
.package-8 { animation-delay: .70s; }
.package-9 { animation-delay: .80s; }


/* =========================================================
   FOOTER DESKTOP
   ========================================================= */

.footer {

    position: absolute;

    z-index: 120;

    left: 2%;
    right: 2%;

    bottom: 1%;

    min-height: 14.5%;

    display: grid;

    grid-template-columns:
        1.45fr
        .9fr
        .9fr
        1.55fr;

    gap: 16px;

    align-items: center;

    padding:
        12px
        22px;

    border-radius: 28px;

    color: #fff;

    background:
        linear-gradient(
            110deg,
            #075fc0,
            #0789e8
        );

    box-shadow:
        0 18px 50px
        rgba(
            0,
            75,
            145,
            .23
        );

    opacity: 0;

    transform:
        translateY(35px);

    filter: blur(7px);

    animation:
        footerIn
        var(--cycle)
        var(--ease)
        infinite;

    pointer-events: auto;
}


.profile h2 {

    margin: 0 0 4px;

    font-size:
        clamp(
            14px,
            1.15vw,
            21px
        );
}


.profile p,
.join p {

    margin: 0;

    font-size:
        clamp(
            9px,
            .75vw,
            14px
        );

    line-height: 1.3;
}


.contact-item {

    display: flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;

    padding:
        4px
        10px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            .35
        );
}


.contact-item:hover {

    transform:
        translateY(-2px);
}


.contact-icon {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #fff;

    color: #087fe5;

    font-weight: 900;

    font-size: 20px;
}


.contact-item b,
.contact-item small {

    display: block;
}


.contact-item b {

    font-size:
        clamp(
            11px,
            1vw,
            17px
        );
}


.contact-item small {

    margin-top: 2px;

    font-size:
        clamp(
            9px,
            .72vw,
            13px
        );
}


.join {

    text-align: center;
}


.join p {

    margin-bottom: 8px;
}


.cta {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    gap: 20px;

    min-width:
        min(
            280px,
            90%
        );

    padding:
        9px
        22px;

    border-radius: 999px;

    color: #075bb8;

    background: #fff;

    text-decoration: none;

    font-size:
        clamp(
            15px,
            1.35vw,
            23px
        );

    font-weight: 850;

    box-shadow:
        0 7px 18px
        rgba(
            0,
            0,
            0,
            .12
        );
}


.cta span {
    font-size: 1.35em;
}


/* =========================================================
   DESKTOP KEYFRAMES
   ========================================================= */

@keyframes sunRise {

    0%, 6% {
        opacity: 0;
        transform:
            translateY(100px)
            scale(.7);
    }

    13%, 82% {
        opacity: .95;
        transform:
            translateY(0)
            scale(1);
    }

    94%, 100% {
        opacity: 0;
        transform:
            translateY(-20px)
            scale(1.05);
    }
}


@keyframes rays {

    0%, 9% {
        opacity: 0;
        transform:
            rotate(34deg)
            translateY(30px);
    }

    15%, 80% {
        opacity: .7;
        transform:
            rotate(34deg)
            translateY(0);
    }

    94%, 100% {
        opacity: 0;
    }
}


@keyframes cloudFloat {

    0%, 7% {
        opacity: 0;
        transform:
            translateX(-40px)
            scale(1);
    }

    15%, 84% {
        opacity: .9;
    }

    96%, 100% {
        opacity: 0;
        transform:
            translateX(40px)
            scale(1);
    }
}


@keyframes cityIn {

    0%, 10% {
        opacity: 0;
        transform:
            translateY(30px);
    }

    17%, 86% {
        opacity: .75;
        transform:
            translateY(0);
    }

    96%, 100% {
        opacity: 0;
        transform:
            translateY(-15px);
    }
}


@keyframes particlesIn {

    0%, 12% {
        opacity: 0;
    }

    20%, 84% {
        opacity: .45;
    }

    96%, 100% {
        opacity: 0;
    }
}


@keyframes logoIn {

    0%, 2% {
        opacity: 0;
        transform:
            translateY(40px)
            scale(.78)
            rotate(-3deg);
        filter:
            blur(9px)
            drop-shadow(
                0 15px 22px
                rgba(0,62,130,.14)
            );
    }

    3%, 91% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
        filter:
            blur(0)
            drop-shadow(
                0 15px 22px
                rgba(0,62,130,.14)
            );
    }

    92%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(1.03)
            rotate(0);
        filter:
            blur(6px)
            drop-shadow(
                0 15px 22px
                rgba(0,62,130,0)
            );
    }
}


@keyframes wordIn {

    0%, 10% {
        opacity: 0;
        transform:
            translateY(28px)
            rotateX(-20deg);
        filter: blur(7px);
    }

    11%, 34% {
        opacity: 1;
        transform:
            translateY(0)
            rotateX(0);
        filter: blur(0);
    }

    35%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.97);
        filter: blur(5px);
    }
}


@keyframes quoteBox {

    0%, 21% {
        opacity: 0;
        transform:
            translateY(25px);
        filter: blur(7px);
    }

    22%, 34% {
        opacity: 1;
        transform:
            translateY(0);
        filter: blur(0);
    }

    35%, 100% {
        opacity: 0;
        transform:
            translateY(-10px)
            scale(.97);
        filter: blur(5px);
    }
}


@keyframes planeFly {

    0%, 3% {
        opacity: 0;
        transform:
            translate(-180px, 90px)
            rotate(-13deg)
            scale(.65);
    }

    4%, 10% {
        opacity: 1;
        transform:
            translate(90px, -55px)
            rotate(5deg)
            scale(1);
    }

    11%, 100% {
        opacity: 0;
        transform:
            translate(210px, -110px)
            rotate(9deg)
            scale(.75);
    }
}


@keyframes manIn {

    0%, 34% {
        opacity: 0;
        transform:
            translateY(90px)
            scale(.8);
        filter: blur(7px);
    }

    36%, 47% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    48%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.97);
        filter: blur(6px);
    }
}


@keyframes laptopIn {

    0%, 34% {
        opacity: 0;
        transform:
            translateX(120px)
            translateY(55px)
            scale(.84)
            rotate(2deg);
        filter: blur(7px);
    }

    36%, 47% {
        opacity: 1;
        transform:
            translateX(0)
            translateY(0)
            scale(1)
            rotate(0);
        filter: blur(0);
    }

    48%, 100% {
        opacity: 0;
        transform:
            translateX(-20px)
            scale(1.02);
        filter: blur(6px);
    }
}


@keyframes womanIn {

    0%, 47% {
        opacity: 0;
        transform:
            translateY(100px)
            scale(.8);
        filter: blur(7px);
    }

    49%, 60% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    61%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.97);
        filter: blur(6px);
    }
}


@keyframes phoneIn {

    0%, 47% {
        opacity: 0;
        transform:
            translateX(100px)
            translateY(25px)
            rotate(5deg)
            scale(.82);
        filter: blur(6px);
    }

    49%, 60% {
        opacity: 1;
        transform:
            translateX(0)
            translateY(0)
            rotate(0)
            scale(1);
        filter: blur(0);
    }

    61%, 100% {
        opacity: 0;
        transform:
            translateX(-12px)
            translateY(-15px)
            rotate(-3deg)
            scale(.96);
        filter: blur(6px);
    }
}


@keyframes featureIn {

    0%, 60% {
        opacity: 0;
        transform:
            translateY(24px)
            scale(.96);
        filter: blur(5px);
    }

    62%, 73% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    74%, 100% {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(.97);
        filter: blur(6px);
    }
}


@keyframes footerIn {

    0%, 2% {
        opacity: 0;
        transform:
            translateY(35px)
            scale(.96);
        filter: blur(7px);
    }

    3%, 91% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    92%, 100% {
        opacity: 0;
        transform:
            translateY(20px)
            scale(.98);
        filter: blur(6px);
    }
}


@keyframes iconFloat {

    0%, 3% {
        opacity: 0;
        transform:
            translateY(20px)
            scale(.8);
    }

    4%, 10% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

    11%, 100% {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(.95);
    }
}


@keyframes caret {

    50% {
        opacity: 0;
    }
}

/* =========================================================
   COMPLETE PACKAGE TIMELINE
   28–35 DETIK
   ========================================================= */

@keyframes packageIn {

    0%, 73% {
        opacity: 0;
    }

    75%, 92% {
        opacity: 1;
    }

    93%, 100% {
        opacity: 0;
    }
}


@keyframes packageTitleIn {

    0%, 74% {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.96);
        filter: blur(6px);
    }

    77%, 92% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    93%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.98);
        filter: blur(5px);
    }
}


@keyframes packageCardIn {

    0%, 75% {
        opacity: 0;
        transform:
            translateY(28px)
            scale(.90);
        filter: blur(6px);
    }

    79%, 92% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    93%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.97);
        filter: blur(5px);
    }
}


/* =========================================================
   =========================================================
   MOBILE
   =========================================================
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       BACKGROUND
       ===================================================== */

    .app {

        min-height: 0;

        height: 100svh;

        background:

            radial-gradient(
                circle at 50% 1%,
                rgba(255,255,255,.95),
                transparent 22%
            ),

            linear-gradient(
                180deg,
                #16afea 0%,
                #7ad9f8 44%,
                #effaff 72%,
                #edf9ff 100%
            );
    }


    .sun {

        width: 65vw;
        height: 65vw;

        min-width: 0;
        min-height: 0;

        left: 18%;
        top: -22vw;
    }


    .sun-rays {

        left: 50%;
        top: 0;

        height: 38%;
    }


    .cloud {

        width: 145px;
        height: 40px;
    }


    .cloud::before {

        width: 65px;
        height: 65px;
    }


    .cloud::after {

        width: 80px;
        height: 80px;
    }


    .cloud-a {
        top: 14%;
    }


    .cloud-b {
        top: 28%;
    }


    .cloud-c {
        top: 43%;
    }


    .cloud-d {
        top: 52%;
    }


    .city {

        height: 23%;

        bottom: 18%;
    }


    /* =====================================================
       LOGO
       
       SLIDE 1 SAJA
       0 - 4 detik
       
       Kemudian benar-benar hilang.
       ===================================================== */

    .brand {

        left: 50%;

        top: 3.5%;

        width: 58vw;

        max-width: 300px;

        margin-left: -29vw;

        z-index: 100;

        animation:
            mobileLogo
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       COPY
       
       Headline sengaja diturunkan.

       Logo:
       3.5% - sekitar 17%

       Headline:
       mulai sekitar 25%

       Jadi ada ruang kosong yang jelas.
       ===================================================== */

    .copy {

        left: 5%;

        right: 5%;

        top: 25%;

        width: 90%;

        text-align: center;

        z-index: 50;
    }


    /* =====================================================
       HEADLINE
       
       SLIDE 2 + bagian awal SLIDE 3
       ===================================================== */

    .headline {

        justify-content: center;

        align-items: center;

        width: 100%;

        margin: 0;

        font-size:
            clamp(
                28px,
                7.5vw,
                42px
            );

        line-height: 1.04;

        letter-spacing: -0.045em;

        column-gap: .15em;

        row-gap: 3px;

        animation:
            mobileHeadline
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    .headline span {

        animation:
            mobileHeadlineWord
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       QUOTE
       
       SLIDE 3
       ===================================================== */

    .quote {

        margin:
            16px
            auto
            0;

        padding:
            14px
            27px
            8px
            35px;

        width: 96%;

        min-height: 90px;

        font-size:
            clamp(
                24px,
                3vw,
                28px
            );

        line-height: 1.35;

        text-align: center;

        animation:
            mobileQuote
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    .quote::before,
    .quote::after {

        left: 20px;
        right: 8px;

        height: 2px;
    }


    .quote-mark {

        left: 0;

        top: -2px;

        font-size: 38px;
    }


    .quote-mark-end {

        right: -1px;

        bottom: -11px;
    }


    .quote p {

        min-height: 62px;
    }


    /* =====================================================
       OBJECT STAGE
       ===================================================== */

    .object-stage {

        z-index: 20;

        pointer-events: none;
    }


    .object {

        opacity: 0;
    }


    /* =====================================================
       PLANE
       
       SLIDE 1
       ===================================================== */

    .plane {

        width: 58px;

        left: 68%;

        top: 14%;

        z-index: 90;

        animation:
            mobilePlane
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       LAPTOP
       
       SLIDE 5
       ===================================================== */

    .laptop {

        content:
            url("assets/laptop.png?v=7");

        width:
            min(
                82vw,
                390px
            );

        left: 9%;

        top: 27%;

        z-index: 25;

        animation:
            mobileLaptop
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       MAN
       
       SLIDE 5
       ===================================================== */

    .person-man {

        content:
            url("assets/man.png?v=7");

        width:
            min(
                36vw,
                185px
            );

        left: 49%;

        top: 45%;

        z-index: 28;

        animation:
            mobileMan
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       WOMAN
       
       SLIDE 6
       ===================================================== */

    .person-woman {

        content:
            url("assets/woman.png");

        width:
            min(
                40vw,
                205px
            );

        left: 38%;

        top: 45%;

        z-index: 28;

        animation:
            mobileWoman
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       PHONE
       
       SLIDE 6
       ===================================================== */

    .phone {

        content:
            url("assets/phone.png");

        width:
            min(
                27vw,
                140px
            );

        left: 36%;

        top: 27%;

        z-index: 27;

        animation:
            mobilePhone
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    /* =====================================================
       HIDE FLOATING ICONS
       ===================================================== */

    .business-pulse {

        display: none;
    }


    /* =====================================================
       FEATURES
       
       SLIDE 4
       
       Tidak boleh overlap logo karena:
       - logo sudah hilang sebelum 13 detik
       - features baru aktif pada 13 detik
       
       Menggunakan FLEXBOX.
       ===================================================== */

    .features {

        position: absolute;

        left: 5%;

        right: 5%;

        top: 31%;

        bottom: auto;

        width: 90%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: stretch;

        align-content: center;

        gap: 10px;

        z-index: 60;

        animation:
            mobileFeatures
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    .feature {

        flex:
            0 0
            calc(
                50% - 5px
            );

        width:
            calc(
                50% - 5px
            );

        min-width:
            calc(
                50% - 5px
            );

        min-height: 105px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        gap: 7px;

        padding:
            11px
            8px;

        border-radius: 17px;

        background:
            rgba(
                255,
                255,
                255,
                .97
            );

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .95
            );

        box-shadow:
            0 12px 30px
            rgba(
                0,
                80,
                150,
                .14
            );

        opacity: 0;

        transform:
            translateY(30px)
            scale(.90);

        filter: blur(6px);

        animation:
            mobileFeatureCard
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }


    .feature img {

        width:
            clamp(
                40px,
                11vw,
                55px
            );

        height:
            clamp(
                40px,
                11vw,
                55px
            );

        object-fit: cover;

        border-radius: 50%;
    }


    .feature strong {

        display: block;

        font-size:
            clamp(
                11px,
                3.1vw,
                15px
            );

        line-height: 1.15;

        font-weight: 850;
    }


    .feature small {

        display: block;

        margin-top: 1px;

        font-size:
            clamp(
                8px,
                2.25vw,
                11px
            );

        line-height: 1.25;

        color: #24466c;
    }


    /* =====================================================
       FEATURE STAGGER
       ===================================================== */

    .feature-1 {
        animation-delay: 0s;
    }

    .feature-2 {
        animation-delay: .08s;
    }

    .feature-3 {
        animation-delay: .16s;
    }

    .feature-4 {
        animation-delay: .24s;
    }


    /* =====================================================
       FOOTER
       
       SLIDE 1
       
       Tetap clickable.
       ===================================================== */

    .footer {

        position: absolute;

        left: 4%;

        right: 4%;

        bottom: 3%;

        width: 92%;

        min-height: 0;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

        gap: 8px;

        padding:
            13px
            12px;

        border-radius: 22px;

        z-index: 120;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                #075fc0,
                #0789e8
            );

        box-shadow:
            0 18px 45px
            rgba(
                0,
                60,
                130,
                .25
            );

        opacity: 0;

        transform:
            translateY(45px)
            scale(.96);

        filter: blur(7px);

        animation:
            mobileFooterIntro
            var(--mobile-cycle)
            var(--ease)
            infinite;

        pointer-events: auto;

        touch-action: manipulation;
    }


    /* =====================================================
       PROFILE
       ===================================================== */

    .profile {

        flex:
            1 1 100%;

        width: 100%;

        text-align: center;

        padding: 0 3px;
    }


    .profile h2 {

        margin:
            0 0 4px;

        font-size:
            clamp(
                14px,
                4vw,
                18px
            );

        line-height: 1.1;

        font-weight: 850;
    }


    .profile p {

        margin: 0;

        font-size:
            clamp(
                9px,
                2.6vw,
                12px
            );

        line-height: 1.3;
    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .contact-item {

        flex:
            1 1
            calc(
                50% - 4px
            );

        min-width:
            calc(
                50% - 4px
            );

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        padding:
            5px
            3px;

        border-left: 0;

        border-radius: 10px;

        background:
            rgba(
                255,
                255,
                255,
                .08
            );

        text-decoration: none;
    }


    .contact-icon {

        width:
            clamp(
                28px,
                8vw,
                36px
            );

        height:
            clamp(
                28px,
                8vw,
                36px
            );

        font-size:
            clamp(
                14px,
                4vw,
                18px
            );
    }


    .contact-item b {

        font-size:
            clamp(
                10px,
                2.8vw,
                13px
            );

        line-height: 1.1;
    }


    .contact-item small {

        margin-top: 2px;

        font-size:
            clamp(
                7px,
                2.1vw,
                10px
            );

        line-height: 1.15;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .join {

        flex:
            1 1 100%;

        width: 100%;

        text-align: center;
    }


    .join p {

        margin:
            2px 0 6px;

        font-size:
            clamp(
                9px,
                2.5vw,
                12px
            );

        line-height: 1.3;
    }


    .cta {

        display: inline-flex;

        width:
            min(
                90%,
                320px
            );

        min-width: 0;

        padding:
            8px
            16px;

        gap: 10px;

        border-radius: 999px;

        font-size:
            clamp(
                12px,
                3.4vw,
                16px
            );

        font-weight: 850;

        color: #075bb8;

        background: #fff;

        box-shadow:
            0 8px 20px
            rgba(
                0,
                0,
                0,
                .15
            );
    }


    .cta span {
        font-size: 1.2em;
    }


    /* =====================================================
       MOBILE LANDSCAPE
       ===================================================== */

    @media (orientation: landscape) {

        .brand {

            width: 32vw;

            margin-left:
                -16vw;

            top: 2%;
        }


        .copy {

            top: 22%;
        }


        .headline {

            font-size:
                clamp(
                    22px,
                    5vw,
                    34px
                );
        }


        .quote {

            margin-top: 8px;

            min-height: 55px;

            padding:
                7px
                20px
                4px
                28px;

            font-size:
                clamp(
                    9px,
                    2vw,
                    12px
                );
        }


        .features {

            top: 27%;

            left: 8%;

            right: 8%;

            width: 84%;

            gap: 6px;
        }


        .feature {

            min-height: 65px;

            padding: 6px;

            flex:
                0 0
                calc(
                    50% - 3px
                );

            min-width:
                calc(
                    50% - 3px
                );
        }


        .feature img {

            width: 30px;
            height: 30px;
        }


        .feature strong {

            font-size: 8px;
        }


        .feature small {

            font-size: 6px;
        }


        .laptop {

            width: 55vw;

            left: 8%;

            top: 34%;
        }


        .person-man {

            width: 25vw;

            top: 45%;
        }


        .person-woman {

            width: 28vw;

            top: 43%;
        }


        .phone {

            width: 19vw;

            top: 30%;
        }


        .footer {

            left: 7%;

            right: 7%;

            width: 86%;

            bottom: 2%;

            padding:
                7px
                10px;

            gap: 5px;

            flex-wrap: nowrap;
        }


        .profile {

            flex:
                1.5 1 0;

            text-align: left;
        }


        .profile h2 {
            font-size: 10px;
        }


        .profile p {
            font-size: 6.5px;
        }


        .contact-item {

            flex:
                1 1 0;

            min-width: 0;

            background: transparent;
        }


        .contact-item b {
            font-size: 7px;
        }


        .contact-item small {
            font-size: 5.5px;
        }


        .join {

            flex:
                1.5 1 0;
        }


        .join p {
            font-size: 6.5px;
        }


        .cta {

            width: 100%;

            padding:
                5px
                9px;

            font-size: 8px;
        }

    }

    /* =====================================================
       COMPLETE PACKAGE — MOBILE
       ===================================================== */
    
    .complete-package {
    
        left: 4%;
    
        right: 4%;
    
        top: 23%;
    
        bottom: 23%;
    
        width: 92%;
    
        justify-content: flex-start;
    
        z-index: 65;
    
        animation:
            mobilePackageIn
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }
    
    
    .package-title {
    
        width: 100%;
    
        margin-bottom: 12px;
    
        animation:
            mobilePackageTitleIn
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }
    
    
    .package-kicker {
    
        font-size:
            clamp(
                7px,
                2vw,
                10px
            );
    
        letter-spacing: .08em;
    }
    
    
    .package-title h2 {
    
        font-size:
            clamp(
                25px,
                7vw,
                34px
            );
    }
    
    
    .package-title p {
    
        margin-top: 5px;
    
        font-size:
            clamp(
                8px,
                2.4vw,
                11px
            );
    }
    
    
    .package-grid {
    
        width: 100%;
    
        grid-template-columns:
            repeat(3, 1fr);
    
        gap: 6px;
    }
    
    
    .package-item {
    
        min-height: 73px;
    
        flex-direction: column;
    
        justify-content: center;
    
        align-items: center;
    
        gap: 4px;
    
        padding:
            7px
            4px;
    
        text-align: center;
    
        border-radius: 13px;
    
        animation:
            mobilePackageCardIn
            var(--mobile-cycle)
            var(--ease)
            infinite;
    }
    
    
    .package-icon {
    
        width: 31px;
    
        height: 31px;
    
        flex:
            0 0 31px;
    
        border-radius: 10px;
    
        font-size: 16px;
    }
    
    
    .package-item strong {
    
        font-size:
            clamp(
                8px,
                2.45vw,
                11px
            );
    
        line-height: 1.05;
    }
    
    
    .package-item small {
    
        margin-top: 2px;
    
        font-size:
            clamp(
                6px,
                1.75vw,
                8px
            );
    
        line-height: 1.1;
    }
}


/* =========================================================
   =========================================================
   MOBILE TIMELINE
   =========================================================
   
   31 DETIK
   
   00–04  INTRO
           LOGO + PLANE + FOOTER
   
   04–08  HEADLINE
   
   08–13  QUOTE
   
   13–18  FEATURES
   
   18–23  MAN + LAPTOP
   
   23–28  WOMAN + PHONE
   
   28–31  CLOSING
           WOMAN + PHONE FADE OUT
   
   ========================================================= */


/* =========================================================
   MOBILE LOGO
   0–4 detik
   ========================================================= */

@keyframes mobileLogo {

    /* =========================
       0s
       ========================= */

    0% {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.75);

        filter:
            blur(8px)
            drop-shadow(
                0 12px 18px
                rgba(0,62,130,.14)
            );
    }


    /* =========================
       Logo masuk
       sekitar 0.5 detik
       ========================= */

    2%,
    90% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0)
            drop-shadow(
                0 12px 18px
                rgba(0,62,130,.14)
            );
    }


    /*
       Tetap tampil sampai
       seluruh slide selesai.
    */

    90%,
    96% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0)
            drop-shadow(
                0 12px 18px
                rgba(0,62,130,.14)
            );
    }


    /*
       29.8 - 31 detik
       closing
    */

    96%,
    100% {

        opacity: 0;

        transform:
            translateY(-18px)
            scale(1.03);

        filter:
            blur(6px)
            drop-shadow(
                0 12px 18px
                rgba(0,62,130,0)
            );
    }
}


/* =========================================================
   MOBILE PLANE
   0–4 detik
   ========================================================= */

@keyframes mobilePlane {

    0% {

        opacity: 0;

        transform:
            translate(-70px,45px)
            rotate(-14deg)
            scale(.65);
    }


    2%,
    8% {

        opacity: 1;

        transform:
            translate(0,0)
            rotate(0)
            scale(1);
    }


    9%,
    13% {

        opacity: 0;

        transform:
            translate(100px,-55px)
            rotate(9deg)
            scale(.72);
    }


    100% {

        opacity: 0;
    }
}


/* =========================================================
   MOBILE FOOTER INTRO
   0–4 detik
   ========================================================= */

@keyframes mobileFooterIntro {

    /* =========================
       Awal
       ========================= */

    0% {

        opacity: 0;

        transform:
            translateY(45px)
            scale(.95);

        filter: blur(7px);
    }


    /*
       Footer masuk bersamaan
       dengan Logo.
    */

    2%,
    90% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }


    /*
       Tetap berada di layar
       selama semua slide.
    */

    90%,
    96% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }


    /*
       Closing.
       Logo + Footer menghilang
       bersamaan.
    */

    96%,
    100% {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.98);

        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE HEADLINE
   4–8 detik
   ========================================================= */

@keyframes mobileHeadline {

    /*
       0 - 4 detik
       Headline belum tampil
    */

    0%,
    12% {

        opacity: 0;
    }


    /*
       4 - 13 detik
       Headline tetap tampil,
       termasuk ketika Quote muncul.
    */

    14%,
    39% {

        opacity: 1;
    }


    /*
       13 detik
       Headline menghilang
       BERSAMA Quote.
    */

    40%,
    100% {

        opacity: 0;
    }
}

/* =========================================================
   MOBILE HEADLINE WORD
   ========================================================= */

@keyframes mobileHeadlineWord {

    /*
       Sebelum headline muncul
    */

    0%,
    12% {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.94);

        filter: blur(7px);
    }


    /*
       Headline masuk
    */

    15%,
    39% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }


    /*
       Menghilang bersamaan
       dengan Quote.
    */

    40%,
    100% {

        opacity: 0;

        transform:
            translateY(-22px)
            scale(.97);

        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE QUOTE
   8–13 detik
   ========================================================= */

@keyframes mobileQuote {

    /*
       0 - 8 detik
       Quote belum tampil
    */

    0%,
    25% {

        opacity: 0;

        transform:
            translateY(22px)
            scale(.96);

        filter: blur(7px);
    }


    /*
       8 - 13 detik
    */

    27%,
    39% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }


    /*
       13 detik
       Hilang bersama Headline.
    */

    40%,
    100% {

        opacity: 0;

        transform:
            translateY(-20px)
            scale(.97);

        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE FEATURES CONTAINER
   13–18 detik
   ========================================================= */

@keyframes mobileFeatures {

    0%, 60% {
        opacity: 0;
    }

    62%, 73% {
        opacity: 1;
    }

    74%, 100% {
        opacity: 0;
    }
}

/* =========================================================
   MOBILE FEATURE CARD
   13–18 detik
   ========================================================= */

@keyframes mobileFeatureCard {

    0%, 60% {
        opacity: 0;
        transform:
            translateY(30px)
            scale(.90);
        filter: blur(6px);
    }

    62%, 73% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    74%, 100% {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(.96);
        filter: blur(5px);
    }
}

/* =========================================================
   MOBILE LAPTOP
   18–23 detik
   ========================================================= */

@keyframes mobileLaptop {

    0%, 40% {
        opacity: 0;
        transform:
            translateY(55px)
            scale(.82);
        filter: blur(8px);
    }

    41%, 47% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    48%, 100% {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(.96);
        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE MAN
   18–23 detik
   ========================================================= */

@keyframes mobileMan {

    0%, 40% {
        opacity: 0;
        transform:
            translateY(70px)
            translateX(15px)
            scale(.78);
        filter: blur(8px);
    }

    41%, 47% {
        opacity: 1;
        transform:
            translateY(0)
            translateX(0)
            scale(1);
        filter: blur(0);
    }

    48%, 100% {
        opacity: 0;
        transform:
            translateY(-20px)
            translateX(-10px)
            scale(.96);
        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE WOMAN
   23–28 detik
   ========================================================= */

@keyframes mobileWoman {

    0%, 47% {
        opacity: 0;
        transform:
            translateY(70px)
            translateX(20px)
            scale(.78);
        filter: blur(8px);
    }

    49%, 60% {
        opacity: 1;
        transform:
            translateY(0)
            translateX(0)
            scale(1);
        filter: blur(0);
    }

    61%, 100% {
        opacity: 0;
        transform:
            translateY(-20px)
            translateX(-10px)
            scale(.96);
        filter: blur(6px);
    }
}

/* =========================================================
   MOBILE PHONE
   23–28 detik
   ========================================================= */

@keyframes mobilePhone {

    0%, 47% {
        opacity: 0;
        transform:
            translateX(60px)
            translateY(35px)
            rotate(8deg)
            scale(.78);
        filter: blur(7px);
    }

    49%, 60% {
        opacity: 1;
        transform:
            translateX(0)
            translateY(0)
            rotate(0)
            scale(1);
        filter: blur(0);
    }

    61%, 100% {
        opacity: 0;
        transform:
            translateX(-20px)
            translateY(-20px)
            rotate(-4deg)
            scale(.96);
        filter: blur(6px);
    }
}


/* =========================================================
   MOBILE CAPTION KEYFRAMES
   ========================================================= */

@keyframes mobileCaptionWork {
    0%,40% { opacity:0; transform:translate(-50%,28px) scale(.90); filter:blur(7px); }
    41%,47% { opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0); }
    48%,100% { opacity:0; transform:translate(-50%,-20px) scale(.96); filter:blur(6px); }
}

@keyframes mobileCaptionGadget {
    0%,47% { opacity:0; transform:translate(-50%,28px) scale(.90); filter:blur(7px); }
    49%,60% { opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0); }
    61%,100% { opacity:0; transform:translate(-50%,-20px) scale(.96); filter:blur(6px); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

@keyframes mobilePackageIn {

    0%, 73% {
        opacity: 0;
    }

    75%, 92% {
        opacity: 1;
    }

    94%, 100% {
        opacity: 0;
    }
}


@keyframes mobilePackageTitleIn {

    0%, 75% {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.94);
        filter: blur(6px);
    }

    78%, 92% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    94%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.97);
        filter: blur(5px);
    }
}


@keyframes mobilePackageCardIn {

    0%, 77% {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.88);
        filter: blur(6px);
    }

    81%, 92% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }

    94%, 100% {
        opacity: 0;
        transform:
            translateY(-15px)
            scale(.96);
        filter: blur(5px);
    }
}