/* =========================================================
   PHOTO FACEFINDER
   FEATURES SECTION
   DISTINCT VIOLET / LAVENDER THEME
   ========================================================= */


/* =========================================================
   BRAND VARIABLES
   ========================================================= */

:root {
    --pf-blue: #246BFF;
    --pf-blue-light: #4F83FF;

    --pf-purple: #713CFF;
    --pf-purple-light: #9A73FF;

    --pf-cyan: #19D8FF;

    /* Feature section colors */
    --pf-feature-bg: #17142B;
    --pf-feature-bg-2: #211A3D;
    --pf-feature-bg-3: #121122;

    --pf-white: #F7F8FF;
    --pf-soft-white: #E7E9F4;

    --pf-text: #111426;
    --pf-muted: #737991;

    --pf-line: rgba(113, 60, 255, 0.20);
    --pf-line-blue: rgba(36, 107, 255, 0.25);

    --pf-card: #F5F3FF;
}
html {
  scroll-behavior: smooth;
}

#featureCarousel {
  scroll-margin-top: 40px;
}

/* =========================================================
   MAIN FEATURES SECTION
   ========================================================= */

.features-section {
    position: relative;
    width: 100%;
    min-height: 100vh;

    padding: 110px 0 90px;

    color: #111426;

    /* background:
        radial-gradient(
            650px 450px at 10% 20%,
            rgba(113, 60, 255, 0.10),
            transparent 70%
        ),
        radial-gradient(
            650px 450px at 90% 70%,
            rgba(36, 107, 255, 0.08),
            transparent 70%
        ),
        linear-gradient(
            135deg,
            #F5F6FC 0%,
            #F1F0FA 45%,
            #F7F8FC 100%
        ); */

    overflow: hidden;
}

/* =========================================================
   SUBTLE TECHNOLOGY GRID
   ========================================================= */

.features-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(113, 60, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 107, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.15)
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.15)
        );
}

/* =========================================================
   LARGE VIOLET ATMOSPHERIC LIGHT
   ========================================================= */

.features-section::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: 15%;
    right: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 60, 255, 0.10),
            transparent 68%
        );

    filter: blur(45px);

    pointer-events: none;
}

/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.features-container {
    position: relative;

    /* max-width: 1180px; */

    width: 100%;

    margin: 0 auto;

    padding: 50px 32px 0;

    box-sizing: border-box;

    z-index: 2;
}


@media (max-width: 640px) {

    .features-container {
        padding: 50px 20px;
    }

}

/* skip the intro transition entirely on first load */
.app-stage.no-anim,
.app-stage.no-anim .main-app-image,
.app-stage.no-anim .main-app-video,
.app-stage.no-anim .app-copy {
    transition: none !important;
}
.intro-label {
    text-align: center;
    color: red;
}
/* =========================================================
   MAIN APP STAGE
   ========================================================= */

.app-stage {
    position: relative;

    width: 100%;
    min-height: 560px;

    display: flex;

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

    margin-bottom: 90px;
     overflow: visible;
    transition:
        min-height 0.8s ease,
        transform 0.8s ease,
        opacity 0.8s ease;
}


/* =========================================================
   MAIN APP IMAGE
   ========================================================= */

.main-app-image {
    position: absolute;

    width: min(900px, 72vw);

    max-width: 900px;

    height: auto;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1);

    border-radius: 18px;

    object-fit: contain;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(113, 60, 255, 0.15);

    transition:
        left 1s ease,
        top 1s ease,
        width 1s ease,
        transform 1s ease,
        opacity 1s ease,
        filter 1s ease;
}


/* =========================================================
   MAIN APP VIDEO
   ========================================================= */

.main-app-video {
    position: absolute;

    width: min(900px, 72vw);

    max-width: 900px;

    height: auto;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.92);

    opacity: 0;

    border-radius: 18px;

    object-fit: contain;

   box-shadow:
    0 30px 70px rgba(30, 40, 100, 0.22),
    0 0 0 1px rgba(113, 60, 255, 0.18),
    0 0 25px rgba(113, 60, 255, 0.20),
    0 0 65px rgba(80, 110, 255, 0.14);

    pointer-events: none;

    transition:
        left 1s ease,
        top 1s ease,
        width 1s ease,
        transform 1s ease,
        opacity 1s ease;
}


/* =========================================================
   APP STAGE SHRINK
   ========================================================= */

.app-stage.shrink {
    min-height: 470px;
}


.app-stage.shrink .main-app-image {
    transform:
        translate(-50%, -50%)
        scale(0.72);

    opacity: 0.28;

    filter:
        blur(1px)
        brightness(0.75);
}


/* =========================================================
   VIDEO ACTIVE

   The video now shifts to the RIGHT side of the stage
   and shrinks a little, instead of staying dead-center.
   This leaves room on the left for .app-copy to sit
   beside it (not underneath it) once it fades in.
   ========================================================= */

.app-stage.video-active .main-app-image {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.82);
}


.app-stage.video-active .main-app-video {
      left: 74%;
    width: min(58%, 620px);

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


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

.app-copy {
    position: absolute;

    left: 5%;
    top: 50%;
    bottom: auto;

    width: 380px;

    z-index: 5;

    opacity: 0;

    transform: translateY(-50%) translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.app-stage.video-active .app-copy {
    opacity: 1;

    transform: translateY(-50%) translateY(0);
}


/* =========================================================
   APP COPY LABEL
   ========================================================= */

.app-copy-label {
    margin-bottom: 12px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--pf-purple);
}


/* =========================================================
   APP COPY TITLE
   ========================================================= */

.app-copy h2 {
    margin: 0 0 14px;

    font-family: "Big Shoulders Display", sans-serif;

    font-size: clamp(42px, 4vw, 68px);

    line-height: 0.95;

    text-transform: uppercase;

    color: var(--pf-text);
}


.app-copy h2 span {
    color: var(--pf-purple);
}


/* =========================================================
   APP COPY DESCRIPTION
   ========================================================= */

.app-copy p {
    margin: 0;

    max-width: 350px;

    font-family: "IBM Plex Sans", sans-serif;

    font-size: 16px;

    line-height: 1.6;

    color: var(--pf-muted);
}


/* =========================================================
   FEATURE HEADING

   Title now comes first in the HTML, label sits under it.
   Swap the spacing so the gap sits below the small label
   (matches the "title first, subtitle after" pattern used
   elsewhere on the site).
   ========================================================= */

.feature-heading {
    position: relative;

    z-index: 5;

    text-align: center;

    margin: 60px auto 60px;

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.feature-heading.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   FEATURE HEADING TITLE
   ========================================================= */

.feature-heading h2 {
    margin: 0 0 16px;

    font-family: "Big Shoulders Display", sans-serif;

       font-size: clamp(32px, 4vw, 48px);

    line-height: 0.95;

    font-weight: 700;

    letter-spacing: -1px;

    text-transform: uppercase;

    color: var(--pf-text);
}


/*
   The HTML currently has an inline color
   on the span, so this keeps the gradient
   consistent.
*/

.feature-heading h2 span {
    background:
        linear-gradient(
            90deg,
            var(--pf-blue),
            var(--pf-purple),
            var(--pf-cyan)
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   FEATURE HEADING SMALL LABEL
   ========================================================= */

.feature-heading small {
    display: block;

    margin-bottom: 0;

    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--pf-purple);

    text-transform: uppercase;
}


/* =========================================================
   GLOWING DOT
   ========================================================= */

.feature-heading small::before {
    content: "";

    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 10px;

    border-radius: 50%;

    background: var(--pf-purple);

    box-shadow:
        0 0 10px rgba(113, 60, 255, 0.8);
}


/* =========================================================
   FEATURE CAROUSEL
   ========================================================= */

.feature-carousel {
   position: relative;
    width: 100%;
    height: clamp(540px, 42vw, 650px);
    overflow: hidden;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );

    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.feature-carousel.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.feature-grid {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

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

    perspective: 1600px;

    transform-style: preserve-3d;
}


/* =========================================================
   FEATURE CARD
   ========================================================= */
.feature-card {
    position: absolute;

    /* width: 330px;  
    height: 520px;     */
    
    width:clamp(280px,47vw, 330px);  
    height:clamp(380px,40vw, 520px);   


    left: 50%;
    top: 50%;

    margin-left: -135px; 
    margin-top: -240px;   
    display: flex;
    flex-direction: column;

    padding: 18px 18px 22px;

    border-radius: 20px;
  
    /* DARK CARD */
    background:
        linear-gradient(
            145deg,
            #15182F 0%,
            #101329 55%,
            #0B0E20 100%
        );

    border:
        1px solid
        rgba(113, 60, 255, 0.28);

    color: #F7F8FF;

    box-shadow:
        0 25px 60px rgba(15, 18, 40, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    transform:
        translate3d(
            var(--card-x),
            0,
            var(--card-z)
        )
        rotateY(var(--card-rotate))
        scale(var(--card-scale));

    opacity: var(--card-opacity);

    filter: blur(var(--card-blur));

    z-index: var(--card-z-index);

    /* transition:
        transform 0.8s cubic-bezier(.22,.61,.36,1),
        opacity 0.8s ease,
        filter 0.8s ease,
        box-shadow 0.5s ease,
        border-color 0.5s ease; */

        /* new after removing video from feature */
      transition:
        transform 0.5s cubic-bezier(.22,.61,.36,1),
        opacity 0.5s ease,
        filter 0.15s ease,   
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

/* =========================================================
   CARD SOFT INNER LIGHT
   ========================================================= */
.feature-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        radial-gradient(
            350px 180px at 50% -10%,
            rgba(113, 60, 255, 0.12),
            transparent 70%
        );

    opacity: 0.8;
}

/* =========================================================
   ACTIVE CARD
   ========================================================= */

.feature-card.active {
     background: radial-gradient(circle at 15% 50%, rgba(98, 127, 189, 0.18),
      transparent 38%), radial-gradient(circle at 85% 40%, rgba(121, 114, 146, 0.18),
       transparent 40%), linear-gradient(135deg, rgb(23, 26, 39) 0%, rgb(26, 33, 63) 45%, rgb(12, 30, 59) 100%);

    border-color:
        rgba(36, 107, 255, 0.18);

    box-shadow:
        0 35px 80px rgba(25, 27, 55, 0.30),

        0 0 0 1px
        rgba(138, 166, 226, 0.18),

        0 0 50px
        rgba(149, 187, 202, 0.18);
}

/* =========================================================
   ACTIVE CARD TOP GLOW
   ========================================================= */

.feature-card.active::before {
    content: "";

    position: absolute;

    top: -1px;

    left: 18%;
    right: 18%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pf-blue),
            var(--pf-purple),
            var(--pf-cyan),
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(113, 60, 255, 0.6);

    border-radius: 10px;

    z-index: 5;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.card-number {
    position: absolute;

    top: 18px;
    left: 18px;

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 11px;

    border:
        1px solid
        rgba(154, 115, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(36, 107, 255, 0.12),
            rgba(113, 60, 255, 0.16)
        );

    color: #9A73FF;

    font-family: "IBM Plex Mono", monospace;

    font-size: 14px;

    font-weight: 700;

    z-index: 6;

    box-shadow:
        0 0 18px
        rgba(113, 60, 255, 0.10);
}
/* =========================================================
   CARD STATUS
   ========================================================= */

.card-status {
    position: absolute;

    top: 28px;
    right: 20px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #19D8FF;

    z-index: 6;
}


/* =========================================================
   FEATURE MEDIA
   ========================================================= */

.feature-media {
    position: relative;

    width: 100%;
    height: 190px;   /* was 235px */
    margin-top: 42px;

    overflow: hidden;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #080B18,
            #11142A
        );

    border:
        1px solid
        rgba(113, 60, 255, 0.30);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30),
        0 0 20px rgba(113, 60, 255, 0.06);
}


/* =========================================================
   FEATURE MEDIA GLOW
   ========================================================= */

.feature-media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(36, 107, 255, 0.04),
            transparent 40%,
            rgba(113, 60, 255, 0.08)
        );
}


/* =========================================================
   FEATURE IMAGE / VIDEO
   ========================================================= */

.feature-image,
.feature-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}


.feature-image {
    opacity: 1;

    transition:
        opacity 0.6s ease,
        transform 0.7s ease;
}


.feature-video {
    opacity: 0;

    transition:
        opacity 0.6s ease;
}


/* =========================================================
   PLAYING CARD
   ========================================================= */

.feature-card.playing .feature-image {
    opacity: 0;

    transform: scale(1.04);
}


.feature-card.playing .feature-video {
    opacity: 1;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.card-content {
    flex: 1;

    padding: 22px 4px 0;

    position: relative;

    z-index: 4;
}


/* =========================================================
   CARD TITLE
   ========================================================= */
.card-content h3 {
    margin: 0 0 10px;

    font-family: "Big Shoulders Display", sans-serif;

   font-size: 24px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.3px;

    color: #F7F8FF;
}

/* =========================================================
   CARD DESCRIPTION
   ========================================================= */
.card-content p {
    margin: 0;

    font-family: "IBM Plex Sans", sans-serif;

    font-size: 14px;

    line-height: 1.55;

    color: rgba(231, 233, 244, 0.68);
}

/* =========================================================
   CARD BUTTON
   ========================================================= */
.card-button {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

    padding: 10px 14px;

    border-radius: 9px;

    border:
        1px solid
        rgba(113, 60, 255, 0.45);

    background:
        rgba(113, 60, 255, 0.07);

    color: #F7F8FF;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.card-button span {
    color: #9A73FF;

    font-size: 16px;

    transition:
        transform 0.3s ease;
}


.feature-card.active .card-button:hover {
    background:
        linear-gradient(
            90deg,
            rgba(36, 107, 255, 0.15),
            rgba(113, 60, 255, 0.18)
        );

    border-color:
        #9A73FF;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


.feature-card.active .card-button:hover span {
    transform:
        translateX(4px);
}

/* =========================================================
   CARD PROGRESS
   ========================================================= */

.card-progress {
    position: relative;

    width: 100%;
    height: 2px;

    margin-top: auto;

    background:
        rgba(154, 115, 255, 0.15);

    overflow: hidden;

    border-radius: 10px;

    z-index: 4;
}


.card-progress-bar {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #246BFF,
            #713CFF,
            #19D8FF
        );

    box-shadow:
        0 0 12px
        rgba(113, 60, 255, 0.50);

    transition:
        width 0.1s linear;
}

/* =========================================================
   FEATURE NAVIGATION
   ========================================================= */
.feature-nav {
    position: relative;

    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;

    margin-top: 25px;
    padding-top: 0;

    z-index: 5;
}

/* Horizontal timeline line */
.feature-nav::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(154, 115, 255, 0.18);

    z-index: 0;
}

/* =========================================================
   FEATURE NAVIGATION
========================================================= */
.feature-nav {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;

    margin-top: 25px;
    padding: 25px 0;

    z-index: 5;
}


/* =========================================================
   HORIZONTAL CENTER LINE
========================================================= */

.feature-nav::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(154, 115, 255, 0.25);

    transform: translateY(-50%);

    z-index: 0;
}


/* =========================================================
   NAV ITEM
========================================================= */

.feature-nav-item {
    position: relative;
    z-index: 1;

    width: fit-content;
    min-width: 90px;

    justify-self: center;

    padding: 8px 18px;

    border-radius: 9px;

    color: rgba(231, 233, 244, 0.50);

    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    line-height: 1.3;

    text-align: center;

    cursor: pointer;

    background: transparent;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


.feature-nav-item strong {
    display: block;

    margin-bottom: 2px;

    color: var(--pf-purple);

    font-size: 11px;
    line-height: 1;
}

/* =========================================================
   HOVER
========================================================= */

.feature-nav-item:hover {
    color: var(--pf-text);

    background: rgba(113, 60, 255, 0.09);

    transform: translateY(-2px);
}

.feature-nav-item:hover strong {
    color: var(--pf-blue);
}


/* =========================================================
   ACTIVE
========================================================= */

.feature-nav-item.active {
    color: var(--pf-text);

    background:
        linear-gradient(
            135deg,
            rgba(36, 107, 255, 0.10),
            rgba(113, 60, 255, 0.14)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(113, 60, 255, 0.45);
}

.feature-nav-item.active strong {
    color: var(--pf-purple);
}
/* =========================================================
   SEQUENCE NOTE
   ========================================================= */

.sequence-note {
    margin-top: 24px;

    text-align: center;

    font-family:
        "IBM Plex Mono", monospace;

    font-size: 10px;

    letter-spacing: 1.5px;

    color:
        var(--pf-muted);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .features-container {
        width:
            min(1420px, calc(100% - 100px));
    }

    /* .feature-carousel {
        height: 600px;
    } */

    /* .feature-card {
        width: 350px;
        height: 420px;

        margin-left: -175px;
        margin-top: -320px;
    } */

    .feature-media {
        height: 245px;
    }
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1199px) {

    .features-container {
        width:
            min(1100px, calc(100% - 60px));
    }

    .app-stage {
        min-height: 500px;
    }

    .main-app-image,
    .main-app-video {
        width:
            min(760px, 72vw);
    }
    .app-stage.video-active .main-app-video {
         top: 54%;
        left: 74%;
        width: min(50%, 450px);
    }
       .app-stage.video-active::after {
        display: none;
        content:none;
    }

    .app-copy {
        left: 2%;
        width: 340px;
    }

    /* .feature-card {
        width: 310px;
        height: 500px;

        margin-left: -155px;
        margin-top: -250px;
    } */

    .feature-media {
        height: 220px;
    }

}


/* =========================================================
   TABLET

   Side-by-side no longer fits comfortably at this width,
   so the video-active state falls back to the original
   centered layout, with the copy fading in underneath it.
   ========================================================= */

@media (max-width: 900px) {

    .features-section {
        padding:
            80px 0 70px;
    }

    .features-container {
        width:
            calc(100% - 40px);
    }

     .app-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: unset;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 60px;
    }

    .main-app-image,
    .main-app-video {
        width: 78vw;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
    }

    .app-stage.video-active .main-app-video {
        left: auto;
        top: auto;
        width: 78vw;
        transform: none;
    }

    /* .app-copy now flows below the video in normal document
       order, instead of being absolutely positioned inside the
       same box the video occupies — that overlap was the bug */
    .app-copy {
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: 320px;
        margin-top: 24px;
        transform: none;
    }

    .app-stage.video-active .app-copy {
        transform: none;
        text-align: center;
    }

    .app-copy h2 {
        font-size: 48px;
    }

    .feature-heading {
        margin-bottom: 45px;
    }

    .feature-heading h2 {
        font-size: 58px;
    }

    /* .feature-carousel {
        height: 580px;
    } */

 .feature-card {
      
        margin-left: -145px;
        margin-top: -220px;
    }
    .feature-media {
        height: 205px;
    }

    .card-content h3 {
        font-size: 26px;
    }

    /* .feature-nav {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 8px;
    } */
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 600px) {

    .features-section {
        padding: 70px 0 55px;
    }

    .features-container {
        width: calc(100% - 28px);
    }

    /* CHANGED: let the stage size to its content instead of a fixed
       min-height, since .app-copy now flows normally inside it */
    .app-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: unset;
        margin-bottom: 50px;
        padding-bottom: 20px;
    }

    .main-app-image,
    .main-app-video {
        width: 92vw;
        position: relative; /* was absolute-only via base rule; override for mobile stacking */
        left: auto;
        top: auto;
        transform: none;
    }

    .app-stage.shrink {
        min-height: unset;
    }

    .app-stage.video-active .main-app-video {
        left: auto;
        top: auto;
        width: 92vw;
        transform: none;
    }

    /* CHANGED: .app-copy now flows normally below the video instead of
       being absolutely positioned and pushed off the bottom edge */
    .app-copy {
        position: static;
        width: 100%;
        margin-top: 24px;
        transform: none;
        text-align: center;
    }

    .app-stage.video-active .app-copy {
        transform: none;
    }

    .video-ai-badge,
    .video-scan-status,
    .video-results-badge {
        display: none;
    }

    
    .app-copy-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .app-copy h2 {
        font-size: 42px;
    }

    .app-copy p {
        margin: 0 auto;
        font-size: 14px;
    }

    .feature-heading {
        margin: 70px auto 35px;
    }

    .feature-heading h2 {
        font-size: 46px;
        line-height: 0.95;
    }

    .feature-heading small {
        font-size: 9px;
        letter-spacing: 2px;
    }

    /* .feature-carousel {
        height: 560px;
    } */

    /* .feature-card {
        width: 275px;
        height: 460px;
        margin-left: -137.5px;
        margin-top: -230px;
    } */

    .feature-media {
        height: 190px;
    }

    .card-content {
        padding-top: 18px;
    }

    .card-content h3 {
        font-size: 24px;
    }

    .card-content p {
        font-size: 13px;
    }

    .card-number {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .card-status {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    /* .feature-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-top: 15px;
        padding-top: 20px;
    } */

    /* .feature-nav-item {
        padding: 10px 5px;
        font-size: 9px;
    } */

    .sequence-note {
        font-size: 8px;
        letter-spacing: 1px;
    }

}

@media (max-width:480px){
    .feature-card {
        width: 275px;
        height: 400px;
        margin-left: -137.5px;
        margin-top: -200px;
    }
}
/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .features-container {
        width:
            calc(100% - 20px);
    }

    .feature-heading h2 {
        font-size: 40px;
    }

    .feature-card {
        width: 260px;
        height: 445px;

        margin-left: -130px;
        margin-top: -222.5px;
    }

    .feature-media {
        height: 180px;
    }

    .card-content h3 {
        font-size: 22px;
    }

    .card-content p {
        font-size: 12px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .features-section *,
    .features-section *::before,
    .features-section *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}

/* =========================================================
   MINIMAL VIDEO AI DETAILS — BASE (restores position/bg/border
   that got lost when the icon layout was added)

   ========================================================= */

   /* .video-frame{
    position: absolute;
    inset: 0;
    overflow: hidden; 
    pointer-events: none;
}
.video-frame .main-app-video{
    pointer-events: auto; 
} */

.video-ai-badge,
.video-scan-status,
.video-results-badge {
    position: absolute;
    z-index: 30;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 14px 9px 9px;
    line-height: 1.35;

    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #0e122e;

    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(82, 96, 164, 0.16);
    border-radius: 7px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(70, 80, 150, 0.08);

    pointer-events: none;
}

/* icon boxes inside each badge */
.video-ai-icon,
.video-scan-icon,
.video-results-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(113, 60, 255, 0.10);
    color: var(--pf-purple, #713CFF);
}
.video-ai-icon svg,
.video-scan-icon svg,
.video-results-icon svg {
    width: 14px;
    height: 14px;
}

/* small pulsing dot used inside .video-scan-status if you want it */
.video-ai-dot,
.video-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #20c9e8;
    box-shadow: 0 0 7px rgba(32, 201, 232, 0.7);
}

/* ---- badge 1: top-left of video ---- */
.video-ai-badge {
    top: calc(58% - 270px);
    left: calc(42% + 15px);
}

/* ---- badge 2: bottom-right area ---- */
.video-scan-status {
    bottom: calc(56% - 270px);
    right: -42px;
}

/* ---- badge 3: bottom-right, lower ---- */
.video-results-badge {
    top: calc(70% - 300px);
    left: calc(90% - 20px);
}

/* ---- dashed connector lines ---- */
.video-connector {
    position: absolute;
    z-index: 29;
    border-top: 1.5px dashed rgba(113, 60, 255, 0.35);
    pointer-events: none;
}
.video-connector::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pf-purple, #713CFF);
    box-shadow: 0 0 6px rgba(113, 60, 255, 0.6);
}
.video-connector-top {
    top: calc(60% - 245px);
    left: calc(42% + 90px);
    width: 90px;
    transform: rotate(4deg);
}
.video-connector-bottom {
    bottom: calc(56% - 245px);
    right: calc(8% + 60px);
    width: 90px;
    transform: rotate(-6deg);
}


@media (max-width: 1199px) {
    .video-ai-badge {
        top: calc(60% - 200px);
    }
    .video-scan-status {
        bottom: calc(56% - 200px);
        right: 0px;
    }
    .video-results-badge {
        top: calc(70% - 238px);
        left: calc(90% - 20px);
    }
}

@media (max-width: 900px) {
    .video-connector { display: none; }
   
    .video-ai-badge {
        top: calc(60% - 460px);
    }
        .video-scan-status {
        bottom: calc(56% - 120px);
        right: 567px;
    }

    
}
/* @media (max-width: 768px) {
    .video-ai-badge {
        top: calc(62% - 220px);
        left: 50%;
        transform: translateX(-50%);
    }
    .video-scan-status {
        bottom: auto;
        top: calc(62% + 210px);
        right: 50%;
        transform: translateX(50%);
    }
    .video-results-badge {
        top: calc(62% + 260px);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
    }
} */
@media (max-width: 480px) {
     .video-ai-badge,
    .video-scan-status,
    .video-results-badge {
        display: none;
    }

}


/* =========================================================
   STAT CARDS (Accuracy / Real-time Scanning / Secure)
   ========================================================= */

.stats-row{
    position: relative;
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

.stat-card{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;

    padding: 16px 10px;

    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(82, 96, 164, 0.14);
    border-radius: 12px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px rgba(70, 80, 150, 0.06);
}

.stat-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(113, 60, 255, 0.10);
    color: var(--pf-purple, #713CFF);
    margin-bottom: 2px;
}
.stat-icon svg{
    width: 16px;
    height: 16px;
}

.stat-value{
    font-family: "Big Shoulders Display", sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--pf-text, #111426);
    line-height: 1;
}

.stat-label{
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    color: var(--pf-muted, #737991);
}

/* =========================================================
   FLOATING SPARKLES AROUND STAT CARDS
   ========================================================= */

.stat-sparkle{
    position: absolute;
    color: var(--pf-purple, #713CFF);
    opacity: .55;
    font-size: 14px;
    pointer-events: none;
    animation: statSparkleFloat 4s ease-in-out infinite;
}

.sparkle-1{
    top: -18px;
    left: 30%;
    font-size: 12px;
    animation-delay: 0s;
}
.sparkle-2{
    bottom: -14px;
    left: 58%;
    font-size: 16px;
    color: var(--pf-blue, #246BFF);
    animation-delay: 1.3s;
}
.sparkle-3{
    top: 40%;
    right: -22px;
    font-size: 10px;
    color: var(--pf-cyan, #19D8FF);
    animation-delay: 2.4s;
}

@keyframes statSparkleFloat{
    0%, 100%{
        transform: translateY(0) scale(1);
        opacity: .35;
    }
    50%{
        transform: translateY(-8px) scale(1.15);
        opacity: .8;
    }
}

@media (max-width: 640px){
    .stats-row{ flex-wrap: wrap; }
    .stat-sparkle{ display: none; }


}

/* VIDEO ATMOSPHERIC GLOW */
.app-stage.video-active::before {
    content: "";

    position: absolute;
    left: 74%;
    top: 50%;

    width: min(62%, 670px);
    height: 430px;

    transform: translate(-50%, -50%);

    border-radius: 28px;

    background:
        radial-gradient(
            ellipse at 45% 50%,
            rgba(101, 71, 255, 0.16),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 70% 50%,
            rgba(52, 120, 255, 0.12),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 85% 65%,
            rgba(0, 217, 255, 0.07),
            transparent 45%
        );

    filter: blur(30px);

    opacity: 1;

    z-index: 0;
    pointer-events: none;
}

.app-stage.video-active::before {
    opacity: 1;
}


/* FUTURISTIC VIDEO BORDER */
.app-stage.video-active::after {
    content: "";

    position: absolute;
    left: 74%;
    top: 50%;

    width: min(58%, 620px);
    aspect-ratio: 16 / 9;

    transform: translate(-50%, -50%);

    border-radius: 18px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        #6547ff 0%,
        #8b5cff 25%,
        #3478ff 55%,
        #00d9ff 82%,
        #6547ff 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    box-shadow:
        0 0 16px rgba(101, 71, 255, 0.25),
        0 0 30px rgba(52, 120, 255, 0.15),
        0 0 45px rgba(0, 217, 255, 0.08);

    opacity: 1;

    z-index: 1;
    pointer-events: none;
}

.app-stage.video-active::after {
    opacity: 1;
}


/* VIDEO + SOFT OUTER GLOW */
.app-stage.video-active .main-app-video {
    border: 1px solid rgba(101, 71, 255, 0.55);

    box-shadow:
        0 30px 70px rgba(30, 40, 100, 0.22),
        0 0 0 1px rgba(101, 71, 255, 0.18),
        0 0 25px rgba(101, 71, 255, 0.22),
        0 0 65px rgba(101, 71, 255, 0.12);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 800;
    gap: 10px;
    color: #8d2b24;

}

.feature-arrow {
    position: absolute;
    top: 50%;
    z-index: 30;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;
    border: 1px solid rgba(154, 115, 255, 0.35);
    background: rgba(21, 24, 47, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: #F7F8FF;
    cursor: pointer;

    transform: translateY(-50%);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.feature-arrow svg {
    width: 20px;
    height: 20px;
}

.feature-arrow:hover {
    background: rgba(113, 60, 255, 0.28);
    border-color: #9A73FF;
}

.feature-arrow-left { left: 4px; }
.feature-arrow-right { right: 4px; }

@media (max-width: 640px) {
    .feature-arrow { width: 36px; height: 36px; }
    .feature-arrow svg { width: 16px; height: 16px; }
}



/* =========================================================
   FEATURES ORBIT SECTION
   ========================================================= */

.features-orbit-section{position:relative;width:100%;overflow:hidden;padding:55px 20px 90px;background:transparent;}
.orbit-container{position:relative;max-width:1180px;height:700px;margin:auto;}
.features-orbit-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(100,130,190,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(100,130,190,.055) 1px,transparent 1px);background-size:55px 55px;pointer-events:none;}
.features-orbit-section:after{content:"";position:absolute;width:700px;height:700px;right:-300px;bottom:-350px;border-radius:50%;background:radial-gradient(circle,rgba(105,145,255,.20),transparent 68%);pointer-events:none;}


/* =========================================================
   HEADER
   ========================================================= */

.orbit-head{position:absolute;z-index:5;top:0;left:50%;width:410px;transform:translateX(-50%);text-align:center;}
.orbit-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#2874ff;font:600 11px/1 Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;}
.orbit-eyebrow:before,.orbit-eyebrow:after{content:"";width:28px;height:1px;background:#397cff;}
.orbit-kicker{margin:18px 0 12px;color:#111b3a;font:700 25px/1.15 "Arial Narrow",Arial,sans-serif;text-transform:uppercase;}
.orbit-kicker span{color:#3974ff;}
.orbit-subtitle{max-width:390px;margin:0 auto;font-size:12.5px;color:#667493;font:400 13px/1.55 Arial,sans-serif;}
.orbit-cta{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:11px 17px 11px 24px;border-radius:30px;background:linear-gradient(90deg,#2878ff,#673dff);color:#fff;text-decoration:none;font:600 13px Arial,sans-serif;box-shadow:0 10px 25px rgba(61,91,255,.22);}
.orbit-cta-arrow{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);}
.orbit-cta-arrow svg{width:12px;height:12px;}
.orbit-tags{margin-top:13px;color:#65718d;font:500 9px Arial,sans-serif;letter-spacing:3px;}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.orbit-card{position:absolute;z-index:4;width:280px;min-height:175px;padding:25px 25px 23px;background:rgba(255,255,255,.94);border:1px solid rgba(210,220,242,.85);border-radius:18px;box-shadow:0 18px 35px rgba(50,70,120,.12);opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;}
.orbit-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(50,70,120,.16);}
.orbit-card.in-view{opacity:1;transform:translateY(0);}
.orbit-card-num{position:absolute;top:17px;right:20px;color:#65789f;font:600 11px Arial,sans-serif;}
.orbit-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:18px;border-radius:11px;}
.orbit-icon svg{width:21px;height:21px;}
.orbit-card h3{margin:0 0 9px;color:#111b3a;font:700 17px/1.15 "Arial Narrow",Arial,sans-serif;text-transform:uppercase;}
.orbit-card p{margin:0;color:#687695;font:400 13px/1.55 Arial,sans-serif;}


/* =========================================================
   ICON COLORS
   ========================================================= */

.icon-blue{color:#2874ff;background:#e8f0ff;}
.icon-rose{color:#ef4c75;background:#ffe9f0;}
.icon-mint{color:#13b99a;background:#e0faf4;}
.icon-purple{color:#714cff;background:#eee9ff;}
.icon-amber{color:#e99a22;background:#fff3df;}
.icon-cyan{color:#08aeca;background:#e1f8fc;}


/* =========================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATION
   ========================================================= */

.card-01{transition-delay:0s;}
.card-02{transition-delay:.05s;}
.card-03{transition-delay:.15s;}
.card-04{transition-delay:.2s;}
.card-05{transition-delay:.3s;}
.card-06{transition-delay:.35s;}

.card-01,.card-03,.card-05{transform:translate(-40px,20px);}
.card-02,.card-04,.card-06{transform:translate(40px,20px);}

.orbit-mockup{opacity:0;transform:translate(-50%,40px) scale(.94);transition:opacity .8s ease .15s, transform .8s ease .15s;}
.orbit-mockup.in-view{opacity:1;transform:translate(-50%,0) scale(1);}

.float-badge{opacity:0;transform:scale(.4);transition:opacity .5s ease, transform .5s ease;}
.float-badge.in-view{opacity:1;transform:scale(1);}
.badge-1.in-view{transition-delay:.45s;}
.badge-2.in-view{transition-delay:.5s;}

.conn{opacity:0;transform:scaleX(0);transition:opacity .5s ease .3s, transform .6s ease .3s;}
.conn-02,.conn-04,.conn-06{transform-origin:right center;}
.conn-01,.conn-03,.conn-05{transform-origin:left center;}
.conn.in-view{opacity:.75;transform:scaleX(1);}

@media(prefers-reduced-motion: reduce){
  .orbit-card,.orbit-mockup,.float-badge,.conn{opacity:1!important;transform:none!important;transition:none!important;}
}


/* =========================================================
   CARD POSITIONS
   ========================================================= */

.card-01{left:0;top:70px;}
.card-02{right:0;top:70px;}
.card-03{left:0;top:295px;}
.card-04{right:0;top:295px;}
.card-05{left:0;top:520px;}
.card-06{right:0;top:520px;}


/* =========================================================
   CENTER DASHBOARD
   ========================================================= */

.orbit-mockup{position:absolute;z-index:3;left:50%;top:315px;width:480px;padding:8px;border-radius:18px;background:rgba(238,244,255,.88);border:1px solid rgba(176,198,241,.7);box-shadow:0 25px 55px rgba(47,70,125,.22);}
.dashboard-image-wrap{width:100%;overflow:hidden;border-radius:12px;background:#fff;}
.dashboard-image{display:block;width:100%;height:auto;max-width:100%;}


/* =========================================================
   CONNECTOR LINES
   ========================================================= */

.conn{position:absolute;z-index:2;height:1px;background:linear-gradient(90deg,#82b7ff,#a98cff);}
.conn:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#3982ff;box-shadow:0 0 0 4px rgba(57,130,255,.08);}
.conn-01{left:250px;top:155px;width:90px;}
.conn-01:after{right:-3px;}
.conn-02{right:250px;top:155px;width:90px;}
.conn-02:after{left:-3px;}
.conn-03{left:275px;top:382px;width:65px;}
.conn-03:after{right:-3px;}
.conn-04{right:275px;top:382px;width:65px;}
.conn-04:after{left:-3px;}
.conn-05{left:250px;top:607px;width:90px;}
.conn-05:after{right:-3px;}
.conn-06{right:250px;top:607px;width:90px;}
.conn-06:after{left:-3px;}


/* =========================================================
   FLOATING BADGES
   ========================================================= */

.float-badge{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(170,190,235,.55);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 12px 25px rgba(60,80,130,.15);}
.float-badge img{width:34px;height:34px;object-fit:contain;}
.float-badge svg{width:20px;height:20px;color:#397cff;}
.badge-1{left:250px;top:350px;}
.badge-2{right:250px;top:350px;}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){
  .orbit-container{max-width:900px;height:680px;}
  .orbit-card{width:225px;padding:22px;}
  .orbit-card h3{font-size:15px;}
  .orbit-card p{font-size:12px;}
  .orbit-mockup{width:350px;}
  .conn-01,.conn-02,.conn-05,.conn-06{width:55px;}
  .conn-03,.conn-04{width:40px;}
  .conn-01,.conn-05{left:225px;}
  .conn-02,.conn-06{right:225px;}
  .conn-03{left:265px;}
  .conn-04{right:265px;}
  .badge-1{left:220px;}
  .badge-2{right:220px;}
}


/* =========================================================
   MOBILE + TABLET PORTRAIT / LARGE PHONES
   ---------------------------------------------------------
   Raised from 760px to 940px: the orbit-grid layout only
   avoids overlap between the 480px-wide header and the side
   cards once the container reaches its full 900px max-width,
   which needs a viewport of ~940px or more (900px container +
   2x20px section padding). Below that (tablet portraits,
   most landscape phones), the header and cards collide, so
   this stacked layout now covers that whole range instead.
   ========================================================= */

@media(max-width:940px){
  .features-orbit-section{padding:45px 16px 60px;}
  .orbit-container{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;}
  .orbit-head{position:relative;top:auto;left:auto;width:100%;flex:0 0 100%;transform:none;margin-bottom:14px;order:0;}
  .orbit-kicker{font-size:25px;}
  .orbit-subtitle{font-size:13px;max-width:430px;}

  .orbit-mockup{position:relative;left:auto;top:auto;flex:0 0 100%;width:min(100%,600px);margin:0 auto 4px;transform:none;order:2;}
  .orbit-mockup.in-view{transform:none;}

  /* Two cards per row from 601px up to this 940px breakpoint. */
  .orbit-card{position:relative!important;left:auto!important;right:auto!important;top:auto!important;flex:1 1 calc(50% - 8px);width:auto;min-height:auto;margin:0;padding:22px;transform:translateY(30px)!important;}
  .orbit-card.in-view{transform:translateY(0)!important;}

  .conn,.float-badge{display:none;}

  .card-01{order:3!important;}
  .card-02{order:4!important;}
  .card-03{order:5!important;}
  .card-04{order:6!important;}
  .card-05{order:7!important;}
  .card-06{order:8!important;}
}


/* =========================================================
   PHONE — back to one card per row
   ---------------------------------------------------------
   Below 600px, two ~50% cards side by side get too narrow to
   read comfortably, so this reverts to the single stacked
   column that already worked well on phones. This block also
   kills the orbit section's own grid pattern + blue glow
   (::before / ::after), since those are the elements that were
   actually showing through on mobile — not .features-section.
   ========================================================= */

@media(max-width:600px){
  .orbit-card{flex:0 0 100%;}

  .features-orbit-section::before,
  .features-orbit-section::after{
    display:none !important;
    content:none !important;
    background:none !important;
    background-image:none !important;
  }
}


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

@media(max-width:430px){
  .features-orbit-section{padding: 0; overflow: visible;}
  .orbit-kicker{font-size:22px;}
  .orbit-tags{font-size:8px;letter-spacing:2px;}
  .orbit-cta{padding:10px 15px 10px 20px;}
  .orbit-card{border-radius:15px;padding:20px;}
  .orbit-card h3{font-size:15px;}
  .orbit-card p{font-size:12px;line-height:1.5;}
}