:root{
    --salmon: #FF6A00;
    --black: #000;
    --white: #fff;
    --cyan: #AEDEE0;
    --dsalmon: #2E1206;
    --dcyan: #000000;
}

body{
    transition: background-color ease-out .5s;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, .font-head{
    font-family: 'Unbounded', 'Manrope', sans-serif;
}

.vdodiv{
    clip-path: circle(var(--clip) at 50% 50%);
}

/* dark overlay so hero text stays readable over the video */
.vdodiv::after{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
}

/* outlined words for the hero marquee (hero is always on black) */
.outline-word{
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}

/* infinite marquee motion (duration is set per-row from script.js) */
@keyframes mq-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
@keyframes mq-right{
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); }
}
.row.lft{ animation: mq-left linear infinite; }
.row.rgt{ animation: mq-right linear infinite; }

/* ============ TABLET & PHONE ADAPTATION ============ */

@media (max-width: 1100px){
    .directions{
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .directions .ltext{
        position: static !important;
        width: 100% !important;
    }
    .directions .cards{
        width: 100% !important;
    }
    .btmtext{
        display: none !important;
    }
}

@media (max-width: 767px){
    .section{
        padding-left: 6vw !important;
        padding-right: 6vw !important;
    }

    /* hero */
    .heading{
        width: 90vw !important;
        padding: 0 4vw !important;
    }
    .heading h1[data-i18n="hero_title"]{
        font-size: 2.1rem !important;
    }
    .heading .flex{
        flex-wrap: wrap !important;
    }
    .btmtext{
        display: none !important;
    }
    .row{
        gap: 1.6rem !important;
    }
    .row h2{
        font-size: 2.6rem !important;
    }
    .row .imgdiv{
        width: 2rem !important;
        height: 2rem !important;
    }

    /* audience */
    .audience h2{
        font-size: 1.5rem !important;
    }

    /* directions */
    .directions .ltext h2{
        font-size: 2rem !important;
    }
    .dircard h2{
        font-size: 1.4rem !important;
    }

    /* process */
    .pslide > div{
        width: 88% !important;
    }
    .pslide h2{
        font-size: 2rem !important;
    }
    .pslide p{
        font-size: 1rem !important;
    }
    .pslide h3.text-\[10rem\]{
        font-size: 4.5rem !important;
    }

    /* solutions */
    .solcard{
        min-height: 0 !important;
        padding: 1.5rem !important;
    }

    /* build list */
    .build .list h2{
        font-size: 1.1rem !important;
    }
    .build .list h3{
        font-size: .9rem !important;
    }
    .listelem{
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .listelem .left{
        gap: 1rem !important;
    }

    /* big section titles (direct children only, so card headings keep their size) */
    .cases > h2,
    .tech > h2,
    .audience > h2,
    .why > h2,
    .faq > h2{
        font-size: 2.4rem !important;
    }
    .build h2.uppercase{
        font-size: 2rem !important;
    }

    /* cases */
    .casecard{
        padding: 1.5rem !important;
    }

    /* why */
    .why .w-\[75\%\]{
        width: 100% !important;
    }
    .textpara{
        font-size: 1.2rem !important;
        line-height: 1.9rem !important;
    }

    /* geography */
    .geo h2{
        font-size: 3rem !important;
    }
    .geo .w-\[60\%\]{
        width: 100% !important;
    }
    .geo .flex-col{
        align-items: flex-start !important;
    }
    .geo .text-right{
        text-align: left !important;
    }
    .geo .text-right p{
        font-size: 1.3rem !important;
    }

    /* faq */
    .faqq span:first-child{
        font-size: 1rem !important;
    }
    .faqico{
        font-size: 2rem !important;
    }

    /* cta */
    .cta h2{
        font-size: 2.2rem !important;
    }
}


*::selection{
    background-color: var(--salmon) !important;
}

body[theme="black"]{
    background-color: var(--black) !important;
}

body[theme="black"] .section{
    color: var(--white)
}

body[theme="cyan"]{
    background-color: var(--cyan) !important;
}

body[theme="cyan"] .section{
    color: var(--dcyan) !important;
}

body[theme="salmon"]{
    background-color: var(--salmon) !important;
}

body[theme="salmon"] .section{
    color: var(--dsalmon) !important;
}

body[theme="white"]{
    background-color: var(--white) !important;
}

body[theme="white"] .section{
    color: var(--black) !important;
}
/* Prevent horizontal overflow on mobile (side gaps) */
html, body{
    overflow-x: clip;
}