/* =========================================================
   VALUEFORIT PREMIUM HERO
   Complete Consolidated CSS
   Jambo / Deepgram Inspired
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --vf-bg: #05080f;
    --vf-bg-soft: #08111f;

    --vf-primary: #20e3ff;
    --vf-secondary: #3ef7a4;
    --vf-blue: #0f72ff;
    --vf-purple: #8b5cf6;

    --vf-text: #ffffff;
    --vf-muted: rgba(255,255,255,.65);

    --vf-glass: rgba(255,255,255,.06);
    --vf-border: rgba(255,255,255,.12);

    --vf-gradient:
        linear-gradient(
            90deg,
            #20e3ff,
            #3ef7a4
        );

}


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

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Inter', sans-serif;

    background:
        var(--vf-bg);

    color:
        var(--vf-text);

    overflow-x: hidden;

}


a {

    text-decoration: none;

}


img {

    max-width: 100%;
    height: auto;

}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 50;

    padding: 22px 0;

    background:
        rgba(8,12,18,.55);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid rgba(255,255,255,.06);

    transition:
        padding .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


/* Navbar after scrolling */

.navbar.scrolled {

    padding:
        12px 0;

    background:
        rgba(5,8,15,.95);

    box-shadow:
        0 10px 40px rgba(0,0,0,.4);

}


/* Navbar Logo */

.navbar-brand img {

    height:
        35px;

    width:
        auto;

    transition:
        height .3s ease;

}


/* Navbar links */

.nav-link {

    color:
        rgba(255,255,255,.75);

    font-weight:
        500;

    margin:
        0 16px;

    transition:
        color .3s ease;

}


.nav-link:hover {

    color:
        var(--vf-primary);

}


/* Call button */

.btn-call {

    padding:
        11px 24px;

    border-radius:
        6px;

    background:
        var(--vf-gradient);

    color:
        #000;

    font-weight:
        700;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.btn-call:hover {

    color:
        #000;

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 40px rgba(32,227,255,.35);

}

/* =========================================================
   VALUEFORIT NAVBAR - ROBUST MOBILE LAYOUT
   ========================================================= */

@media (max-width: 991.98px) {

    .navbar > .container {
        display: flex;
        align-items: center;
        flex-wrap: nowrap !important;
    }

    .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: auto;
        padding: 0;
    }

    .navbar-brand img {
        display: block;
        width: auto;
        height: 35px;
        max-width: 100%;
    }

    .navbar-toggler {
        flex: 0 0 auto;
        margin-left: 15px;
        position: relative;
        z-index: 2;
    }

    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
    }
}


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

.hero-section {

    position:
        relative;

    min-height:
        750px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        0;

    background:

        radial-gradient(
            circle at top,
            #08111f,
            #04070c 70%
        );

}


/* =========================================================
   HERO OUTER BORDER
   ========================================================= */

.hero-section::after {

    content:
        "";

    position:
        absolute;

    inset:
        18px;

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

    border-radius:
        30px;

    pointer-events:
        none;

    z-index:
        15;

}


/* =========================================================
   PARTICLE CANVAS
   ========================================================= */

#particles {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        1;

    pointer-events:
        none;

}


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

.grid-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    opacity:
        .05;

    background-image:

        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    animation:
        gridMove 20s linear infinite;

}


@keyframes gridMove {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(70px);

    }

}


/* =========================================================
   AURORA
   ========================================================= */

.aurora {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    z-index:
        0;

    pointer-events:
        none;

}


.aurora::before,
.aurora::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    filter:
        blur(130px);

    opacity:
        .18;

}


.aurora-one {

    top:
        -150px;

    left:
        -120px;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        var(--vf-primary);

    filter:
        blur(130px);

    opacity:
        .28;

    animation:
        auroraMoveOne 18s ease-in-out infinite alternate;

}


.aurora-two {

    right:
        -100px;

    bottom:
        -180px;

    width:
        450px;

    height:
        450px;

    border-radius:
        50%;

    background:
        var(--vf-secondary);

    filter:
        blur(130px);

    opacity:
        .28;

    animation:
        auroraMoveTwo 20s ease-in-out infinite alternate;

}


.aurora-three {

    top:
        35%;

    left:
        45%;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        var(--vf-blue);

    filter:
        blur(130px);

    opacity:
        .22;

    animation:
        auroraMoveThree 22s ease-in-out infinite alternate;

}


@keyframes auroraMoveOne {

    from {

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

    }

    to {

        transform:
            translate(80px,-60px)
            scale(1.25);

    }

}


@keyframes auroraMoveTwo {

    from {

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

    }

    to {

        transform:
            translate(-70px,-50px)
            scale(1.2);

    }

}


@keyframes auroraMoveThree {

    from {

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

    }

    to {

        transform:
            translate(-50px,60px)
            scale(1.2);

    }

}


/* =========================================================
   CURSOR GLOW
   ========================================================= */

.cursor-glow {

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        2;

    background:

        radial-gradient(
            circle,
            rgba(32,227,255,.25),
            transparent 70%
        );

    filter:
        blur(45px);

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

}


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

.hero-section .container {

    position:
        relative;

    z-index:
        5;

}


.hero-content {

    max-width:
        1000px;

    padding-top:
        40px;

}


/* Small hero tag */

.hero-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 18px;

    border-radius:
        40px;

    background:
        var(--vf-glass);

    border:
        1px solid var(--vf-border);

    color:
        #6cf7cf;

    font-size:
        14px;

    margin-bottom:
        28px;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

}


.hero-tag::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--vf-primary);

    box-shadow:
        0 0 20px var(--vf-primary);

}


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

.hero-content h1 {

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

    line-height:
        1.1;

    font-weight:
        800;

    letter-spacing:
        -2px;

    margin:
        0;

}


.hero-content h1 span {

    background:
        var(--vf-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


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

.hero-text {

    max-width:
        580px;

    margin-top:
        25px;

    font-size:
        19px;

    line-height:
        1.8;

    color:
        var(--vf-muted);

}


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

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        40px;

}


/* Shared button */

.btn-primary-custom,
.btn-outline-custom {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    padding:
        16px 36px;

    border-radius:
        10px;

    font-weight:
        700;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease,

        border-color .3s ease,

        color .3s ease;

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn-primary-custom {

    background:
        var(--vf-gradient);

    color:
        #000;

    border:
        1px solid transparent;

    box-shadow:
        0 0 30px rgba(32,227,255,.22);

}


.btn-primary-custom:hover {

    color:
        #000;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 50px rgba(32,227,255,.42);

}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.btn-outline-custom {

    background:
        transparent;

    border:
        1px solid rgba(32,227,255,.6);

    color:
        #fff;

    box-shadow:
        0 0 15px rgba(32,227,255,.05);

}


.btn-outline-custom:hover {

    background:
        var(--vf-primary);

    border-color:
        var(--vf-primary);

    color:
        #020509;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 45px rgba(32,227,255,.32);

}


/* =========================================================
   PREMIUM SILVER SQUARE SHIMMER
   ========================================================= */

.btn-primary-custom::before,
.btn-outline-custom::before {

    content:
        "";

    position:
        absolute;

    top:
        -20%;

    left:
        -35%;

    width:
        28px;

    height:
        140%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9),
            rgba(255,255,255,.5),
            transparent
        );

    transform:
        skewX(-20deg);

    opacity:
        .8;

    pointer-events:
        none;

    z-index:
        -1;

}


.btn-primary-custom:hover::before,
.btn-outline-custom:hover::before {

    animation:
        vfSilverButtonShine .9s ease-out forwards;

}


@keyframes vfSilverButtonShine {

    0% {

        left:
            -35%;

        opacity:
            0;

    }

    15% {

        opacity:
            .9;

    }

    100% {

        left:
            135%;

        opacity:
            0;

    }

}


/* =========================================================
   TECHNOLOGY SECTION INSIDE HERO
   ========================================================= */

.technology-wrapper {

    position:
        relative;

    width:
        100%;

    margin-top:
        70px;

    padding:
        25px 0 0;

    overflow:
        hidden;

    z-index:
        10;

}


/* Technology heading */

.technology-title {

    text-align:
        center;

    font-size:
        11px;

    line-height:
        1;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.42);

    margin-bottom:
        18px;

}


/* =========================================================
   TECHNOLOGY SLIDER
   ========================================================= */

.technology-slider {

    width:
        100%;

    overflow:
        hidden;

    position:
        relative;

}


/* Fade edges */

.technology-slider::before,
.technology-slider::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    width:
        120px;

    height:
        100%;

    z-index:
        3;

    pointer-events:
        none;

}


.technology-slider::before {

    left:
        0;

    background:
        linear-gradient(
            90deg,
            var(--vf-bg),
            transparent
        );

}


.technology-slider::after {

    right:
        0;

    background:
        linear-gradient(
            270deg,
            var(--vf-bg),
            transparent
        );

}


/* =========================================================
   TECHNOLOGY TRACK
   ========================================================= */

.technology-track {

    display:
        flex;

    width:
        max-content;

    gap:
        0;

    animation:
        technologyMove 32s linear infinite;

}


.technology-slider:hover
.technology-track {

    animation-play-state:
        paused;

}


/* =========================================================
   TECHNOLOGY ITEM
   ========================================================= */

.technology-item {

    position:
        relative;

    min-width:
        160px;

    height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 25px;

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

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

    color:
        rgba(255,255,255,.72);

    font-size:
        15px;

    font-weight:
        600;

    white-space:
        nowrap;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/* Touching borders */

.technology-item + .technology-item {

    border-left:
        0;

}


/* Animated top light */

.technology-item::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        20%;

    width:
        60%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(32,227,255,.8),
            transparent
        );

    opacity:
        .35;

    animation:
        techLight 3s ease-in-out infinite;

}


.technology-item:nth-child(2)::before {

    animation-delay:
        .4s;

}


.technology-item:nth-child(3)::before {

    animation-delay:
        .8s;

}


.technology-item:nth-child(4)::before {

    animation-delay:
        1.2s;

}


.technology-item:nth-child(5)::before {

    animation-delay:
        1.6s;

}


.technology-item:nth-child(6)::before {

    animation-delay:
        2s;

}


/* Technology active/live state */

.technology-item:hover {

    color:
        #fff;

    border-color:
        rgba(32,227,255,.6);

    background:
        rgba(32,227,255,.06);

    box-shadow:
        inset 0 0 25px rgba(32,227,255,.06);

}


@keyframes techLight {

    0%,
    100% {

        opacity:
            .15;

        transform:
            scaleX(.5);

    }

    50% {

        opacity:
            .8;

        transform:
            scaleX(1);

    }

}


/* =========================================================
   TECHNOLOGY MOVEMENT
   ========================================================= */

@keyframes technologyMove {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.scroll-indicator {

    position:
        absolute;

    left:
        50%;

    bottom:
        170px;

    transform:
        translateX(-50%);

    z-index:
        20;

}


.scroll-indicator span {

    display:
        block;

    width:
        28px;

    height:
        48px;

    border:
        2px solid rgba(255,255,255,.35);

    border-radius:
        25px;

    position:
        relative;

}


.scroll-indicator span::before {

    content:
        "";

    position:
        absolute;

    width:
        6px;

    height:
        10px;

    border-radius:
        10px;

    background:
        var(--vf-primary);

    top:
        9px;

    left:
        50%;

    transform:
        translateX(-50%);

    animation:
        scrollMove 1.8s infinite;

}


@keyframes scrollMove {

    0% {

        opacity:
            1;

        transform:
            translate(-50%,0);

    }

    100% {

        opacity:
            0;

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

    }

}


/* =========================================================
   GSAP INITIAL STATES
   ========================================================= */

.hero-tag,
.hero-content h1,
.hero-text,
.hero-buttons {

    opacity:
        0;

    transform:
        translateY(40px);

}


/* =========================================================
   PERFORMANCE
   ========================================================= */

#particles,
.aurora,
.grid-overlay,
.technology-track {

    will-change:
        transform;

}


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

@media (max-width: 991px) {

    .navbar {

        padding:
            15px 0;

    }


    .hero-section {

        min-height:
            900px;

        align-items:
            center;

    }


    .hero-content {

        text-align:
            center;

        margin:
            auto;

        padding-top:
            50px;

    }


    .hero-text {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .scroll-indicator {

        display:
            none;

    }


    .technology-wrapper {

        margin-top:
            60px;

    }


    .technology-item {

        min-width:
            145px;

        height:
            80px;

    }

}


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

@media (max-width: 576px) {

    .navbar {

        padding:
            15px 0;

    }


    .navbar-brand img {

        height:
            45px;

    }


    .hero-section {

        min-height:
            820px;

        padding:
            100px 0 0;

    }


    .hero-section::after {

        inset:
            8px;

        border-radius:
            20px;

    }


    .hero-content {

        padding-top:
            20px;

    }


    .hero-tag {

        font-size:
            11px;

        padding:
            7px 13px;

        margin-bottom:
            20px;

    }


    .hero-tag::before {

        width:
            6px;

        height:
            6px;

    }


    .hero-content h1 {

        font-size:
            38px;

        line-height:
            1.08;

        letter-spacing:
            -1px;

    }


    .hero-text {

        max-width:
            100%;

        margin-top:
            18px;

        font-size:
            16px;

        line-height:
            1.65;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            center;

        gap:
            12px;

        margin-top:
            28px;

    }


    .btn-primary-custom,
    .btn-outline-custom {

        width:
            220px;

        padding:
            14px 25px;

        font-size:
            14px;

    }


    /* Technology section */

    .technology-wrapper {

        margin-top:
            45px;

        padding:
            18px 0 0;

    }


    .technology-title {

        font-size:
            9px;

        letter-spacing:
            2px;

        margin-bottom:
            14px;

    }


    .technology-slider::before,
    .technology-slider::after {

        width:
            60px;

    }


    .technology-item {

        min-width:
            125px;

        height:
            68px;

        padding:
            0 16px;

        font-size:
            13px;

    }


    .technology-track {

        animation-duration:
            25s;

    }


    /* Aurora */

    .aurora-one {

        width:
            320px;

        height:
            320px;

    }


    .aurora-two {

        width:
            280px;

        height:
            280px;

    }


    .aurora-three {

        width:
            260px;

        height:
            260px;

    }


    /* Cursor glow disabled */

    .cursor-glow {

        display:
            none;

    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .hero-section {

        min-height:
            800px;

    }


    .hero-content h1 {

        font-size:
            33px;

    }


    .hero-text {

        font-size:
            15px;

    }


    .technology-item {

        min-width:
            110px;

        height:
            62px;

        font-size:
            12px;

    }


    .technology-title {

        font-size:
            8px;

    }

}


/* =========================================================
   REDUCED MOTION
   Accessibility / Performance
   ========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}