/* ==========================
   TRUST BAR / MARQUEE
========================== */

.trust-bar {
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  background: #ffffff;
  position: relative;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: scroll-left 25s linear infinite;
}


.m-pill {
    white-space: nowrap;
    padding: 12px 22px;
    border-radius: 999px;

    background: #ffffff !important;
    color: #0B4DBB !important;
    border: 2px solid #D4AF37 !important;

    font-size: 14px;
    font-weight: 600;
}

.m-pill:hover {
    background: #ffffff !important;
    color: #0B4DBB !important;
    border: 2px solid #D4AF37 !important;
    transform: none !important;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* CONTACT FORM */

.contact-section{
    padding:140px 20px 80px;
    display:flex;
    justify-content:center;
}

.contact-section .container{
    width:100%;
    max-width:800px;
}

.form-wrapper{
    background:#ffffff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.form-title{
    text-align:center;
    margin-bottom:35px;
    font-size:2rem;
    font-weight:700;
}

.form-title span{
    color:#1E63F0;
}

.form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-row{
    width:100%;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-label{
    font-weight:600;
    color:#111827;
}

.required-asterisk{
    color:#ef4444;
}

.input{
    width:100%;
    padding:14px 16px;
    border:1px solid #d1d5db;
    border-radius:12px;
    font-size:15px;
    transition:.3s;
    box-sizing:border-box;
}

.input:focus{
    outline:none;
    border-color:#1E63F0;
    box-shadow:0 0 0 3px rgba(30,99,240,.15);
}

.phone-group{
    display:flex;
    align-items:center;
    gap:10px;
}

.input-code{
    width:90px;
    flex:none;
}

.input-main{
    flex:1;
}

.phone-divider{
    width:1px;
    height:28px;
    background:#d1d5db;
}

.form-section{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.checkbox-group{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.checkbox-label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

textarea.input{
    resize:vertical;
    min-height:120px;
}

.submit-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:16px;
    background:#1E63F0;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.submit-btn:hover{
    background:#1140C8;
}

.form-error{
    color:#dc2626;
    font-size:13px;
    margin-top:4px;
}

.success-message{
    text-align:center;
    color:#16a34a;
    font-weight:600;
}

.spinner{
    margin:15px auto;
    width:40px;
    height:40px;
    border:4px solid #e5e7eb;
    border-top:4px solid #1E63F0;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

@media(max-width:768px){

    .contact-section{
        padding:120px 15px 60px;
    }

    .form-wrapper{
        padding:25px;
    }

    .checkbox-group{
        flex-direction:column;
        gap:10px;
    }

    .phone-group{
        flex-direction:column;
        align-items:stretch;
    }

    .input-code{
        width:100%;
    }

    .phone-divider{
        display:none;
    }
}

.form-error{
  color:#ef4444;
  font-size:13px;
  margin-top:6px;
}

.input.error{
  border:1px solid #ef4444;
}

.success-message{
  color:#16a34a;
  text-align:center;
  margin-top:15px;
  font-weight:600;
}


/* ==========================================
   FREIGHTPROTECT AI NETWORK SECTION
========================================== */
/* 
.ai-network-section{
    padding:120px 20px;
}

.network-container{
    position:relative;
    max-width:1200px;
    height:750px;
    margin:auto;
    border-radius:40px;
    overflow:hidden;

    background:
    radial-gradient(
        circle at center,
        rgba(37,99,235,.18),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #020617 0%,
        #07132a 45%,
        #0f172a 100%
    );

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);
} */

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

/* .network-container::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:32px 32px;

    animation:gridMove 25s linear infinite;
}

@keyframes gridMove{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(32px);
    }
} */

/* ==========================================
   LIGHT SWEEP
========================================== */
/* 
.network-container::after{
    content:"";

    position:absolute;
    top:0;
    left:-300px;

    width:300px;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.04),
        transparent
    );

    animation:sweep 10s linear infinite;
}

@keyframes sweep{
    from{
        left:-300px;
    }

    to{
        left:130%;
    }
} */

/* ==========================================
   SVG CONNECTION LINES
========================================== */
/* 
.network-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.network-lines line{
    stroke:rgba(96,165,250,.45);
    stroke-width:2.5;
    filter:drop-shadow(0 0 8px rgba(59,130,246,.4));
} */

/* ==========================================
   AI HUB
========================================== */
/* 
.center-ai{
    position:absolute;

    left:50%;
    top:50%;

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

    width:220px;
    height:220px;

    border-radius:50%;

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

    text-align:center;

    color:white;

    background:
    radial-gradient(
        circle at top,
        #6ea8ff,
        #2563eb
    );

    box-shadow:
        0 0 50px rgba(59,130,246,.6),
        0 0 120px rgba(59,130,246,.3);

    z-index:20;

    animation:floatCenter 6s ease-in-out infinite;
}

.center-ai h2{
    margin:0;
    font-size:34px;
    font-weight:700;
    line-height:1.2;
}

.center-ai span{
    margin-top:10px;
    font-size:28px;
    font-weight:600;
} */

/* ==========================================
   CENTER FLOAT
========================================== */
/* 
@keyframes floatCenter{
    0%,100%{
        transform:
        translate(-50%,-50%)
        translateY(0);
    }

    50%{
        transform:
        translate(-50%,-50%)
        translateY(-10px);
    }
} */

/* ==========================================
   PULSE RINGS
========================================== */
/* 
.center-ai::before,
.center-ai::after{
    content:"";

    position:absolute;

    inset:-25px;

    border-radius:50%;

    border:2px solid rgba(96,165,250,.15);

    animation:pulse 4s linear infinite;
}

.center-ai::after{
    animation-delay:2s;
}

@keyframes pulse{
    from{
        transform:scale(.95);
        opacity:1;
    }

    to{
        transform:scale(1.7);
        opacity:0;
    }
} */

/* ==========================================
   NODE CARDS
========================================== */
/* 
.node{
    position:absolute;

    width:180px;
    height:90px;

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

    color:white;
    font-size:18px;
    font-weight:600;

    border-radius:22px;

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

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

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

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

    z-index:30;

    transition:.35s;

    animation:nodeFloat 5s ease-in-out infinite;
}

.node:hover{
    transform:scale(1.06);

    border-color:
    rgba(96,165,250,.45);

    box-shadow:
    0 0 35px rgba(59,130,246,.35);
}

@keyframes nodeFloat{
    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -10px;
    }
} */

/* ==========================================
   NODE POSITIONS
========================================== */
/* .node-top{
    top:60px;
    left:50%;
    transform:translateX(-50%);
}

.node-left{
    top:250px;
    left:90px;
}

.node-right{
    top:250px;
    right:90px;
}

.node-bottom-left{
    bottom:100px;
    left:160px;
}

.node-bottom-right{
    bottom:100px;
    right:160px;
} */
/* ==========================================
   PARTICLES
========================================== */

/* .particle{
    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#FFC72C;

    box-shadow:
        0 0 10px #FFC72C,
        0 0 25px #FFC72C;

    z-index:15;
} */

/* TOP */
/* 
.p1{
    left:50%;
    animation:topParticle 2.5s linear infinite;
}

@keyframes topParticle{
    from{
        top:140px;
    }

    to{
        top:285px;
    }
} */

/* LEFT */
/* 
.p2{
    animation:leftParticle 3.5s linear infinite;
}

@keyframes leftParticle{
    from{
        left:220px;
        top:300px;
    }

    to{
        left:430px;
        top:337px;
    }
} */

/* RIGHT */
/* 
.p3{
    animation:rightParticle 3.5s linear infinite;
}

@keyframes rightParticle{
    from{
        right:250px;
        top:285px;
    }

    to{
        right:430px;
        top:320px;
    }
} */

/* BOTTOM LEFT */
/* 
.p4{
    animation:bottomLeftParticle 3.5s linear infinite;
}

@keyframes bottomLeftParticle{
    from{
        left:330px;
        bottom:140px;
    }

    to{
        left:470px;
        bottom:280px;
    }
} */

/* BOTTOM RIGHT */
/* 
.p5{
    animation:bottomRightParticle 3.5s linear infinite;
}

@keyframes bottomRightParticle{
    from{
        right:330px;
        bottom:140px;
    }

    to{
        right:470px;
        bottom:280px;
    }
} */

/* ==========================================
   LOGOS INSIDE NODES
========================================== */

/* .node img{
    max-width:110px;
    max-height:45px;
    object-fit:contain;
} */

/* ==========================================
   RESPONSIVE
========================================== */
/* 
@media(max-width:991px){

    .network-container{
        height:650px;
    }

    .center-ai{
        width:180px;
        height:180px;
    }

    .center-ai h2{
        font-size:24px;
    }

    .center-ai span{
        font-size:20px;
    }

    .node{
        width:130px;
        height:70px;
        font-size:14px;
    }

    .node-bottom-left{
        left:40px;
    }

    .node-bottom-right{
        right:40px;
    }
}

.center-logo{
    width:70px;
    height:auto;
    margin-bottom:15px;
    object-fit:contain;
}

.node img{
    max-width:110px;
    max-height:45px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:brightness(1.05);
} */


/* Animation css */

.features-section{
    max-width:1400px;
    margin:auto;
    padding:20px;
font-family: 'Syne', sans-serif;
    display:grid;
    grid-template-columns:1.3fr 0.8fr;
    gap:80px;
    align-items:center;
}

.feature-left{
    background:#f5f6fa;
    border-radius:32px;
    min-height:520px;
    position:relative;
    overflow:hidden;
}

.feature-screen{
    position:absolute;
    inset:0;

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

    opacity:0;
    transform:translateY(40px);

    transition:.6s ease;
}

.feature-screen.active{
    opacity:1;
    transform:translateY(0);
}

.mockup-card{
    width:80%;
}

.logo-row{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:50px;
}

.logo-row div{
    background:white;
    padding:14px 24px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.center-box{
    width:220px;
    margin:auto;

    background:white;
    padding:24px;
    border-radius:18px;
    text-align:center;
    font-weight:700;

    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.quote-box{
    width:220px;
    margin:auto;

    background:white;
    padding:20px;
    border-radius:18px;
    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.flow-line{
    width:3px;
    height:80px;
    background:#ddd;
    margin:20px auto;
    position:relative;
}

.flow-line::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d4ac35;

    position:absolute;
    left:50%;
    transform:translateX(-50%);

    animation:flow 2s linear infinite;
}

@keyframes flow{
    from{
        top:0;
    }

    to{
        top:70px;
    }
}

.feature-count{
    font-size:20px;
    color:#777;
    margin-bottom:40px;
}

#counter{
    font-weight:700;
    color:#111;
}

.accordion{
    padding:25px 0;
    border-bottom:1px solid #eee;
    cursor:pointer;
}

.accordion h3{
    margin-bottom:10px;
    font-size:28px;
}

.accordion p{
    display:none;
    color:#666;
    line-height:1.8;
}

.accordion.active p{
    display:block;
}

.app-card{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:120px;
    height:56px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    font-weight:600;
}

.icon{
    width:18px;
    height:18px;
    border-radius:50%;
    display:block;
}

.gmail{
    background:#EA4335;
}

.outlook{
    background:#0078D4;
}

.email{
    background:#22C55E;
}