/* ─── FONTS ─────────────────────────────────────────────── */
@font-face {
    font-family: 'Sen';
    src: url("../assets/font/Sen-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sen';
    src: url("../assets/font/Sen-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sen';
    src: url("../assets/font/Sen-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sen';
    src: url("../assets/font/Sen-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sen';
    src: url("../assets/font/Sen-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    font-family: 'Sen', sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.section1-container {
    display: flex;
    width: 100%;
    min-height: 541px;          
    padding: 45px 10px;         
    align-items: center;
    justify-content: center;
    gap: 160px;                  
}

.section1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;  
    margin: 0;              
    max-width: 560px;          
    gap: 0;
    margin-top: 30px;
}

.section1 h3 {
    display: inline-flex;  
    align-self: flex-start;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background-color: #d6ddf5;
    margin: 0 0 16px;
}

.section1 h2 {
    font-size:clamp(30px,4vw,40px);
    font-weight: 700;
    color: #1a5cff;
    margin: 0 0 20px;
    line-height: 1.15;
}

.section1 p {
    font-size: clamp(15px, 1.6vw, 20px);
    font-weight: 400;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 24px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;           
    gap: 16px;
    margin-top: 8px;            
}

.btn1 {
    height: 50px;
    padding: 0 28px;           
    background-color: #1a5cff;
    color: #ffffff;
    font-family: 'Sen', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.btn1:hover {
    background-color: #0d4ee0;
}

.btn2 {
    height: 50px;
    padding: 0 28px;
    background-color: #d6ddf5;
    color: #000;
    font-family: 'Sen', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #000;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn2:hover {
    background-color: #c2cdf0;
}

.stats {
    display: flex;
    margin-top: 28px;
    gap: 48px;
    flex-direction: row;
    flex-wrap: wrap;
}

.stats h4 {
    color: #1a5cff;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;           
    margin: 0;
}

.stats p {
    color: #4b5563;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    margin-top: 4px;
}

.section2 {
    position: relative;
    flex: 1 1 0;               
    max-width: 420px;
    left: 0px;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;                 
}

.real-time-card {
    position: absolute;
    bottom: 30px;     
    left: -40px;       
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* White icon box */
.rtc-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rtc-icon img {
    width: 56px;
    margin-bottom: 20px;
    height: 56px;
    background-color: white;
    border-radius: 16px;
    padding: 15px;
}

.rtc-text h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.rtc-text p {
    margin: 0;
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px !important;
}

.aplus-badge {
    position: absolute;
    top: 114px;
    right: 104px;
    background: #071a45;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(15deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    z-index: 3;
    animation: float 3s ease-in-out infinite;
}

.aplus-badge h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    padding: 0;               
    width: auto;
    border-radius: 0;
    background: none;
}

.aplus-badge p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

/* ── Floating real-time card ── */
.real-time-card {
    position: absolute;
    bottom: 50px;
    right: 20px;               
    background: #1a5cff;
    width: 50%;
    padding: 25px 15px 5px ;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 3;
    animation: float 3s ease-in-out infinite;
}

.real-time-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.real-time-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    margin-top: 2px;
}

/* ───────── ENTERPRISE SECTION ───────── */
.enterprise-section{
    width:100%;
    padding:60px ;
    background:#f5f7fb;
}

.enterprise-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

/* LEFT SIDE */

.enterprise-left{
    max-width:480px;
    margin: 50px;
}

.enterprise-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    background:#e6ebf7;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    color:#0b1c3d;
}

.enterprise-dot{
    width:8px;
    height:8px;
    background:#1a5cff;
    border-radius:50%;
}

.enterprise-title{
    font-size:clamp(30px,4vw,40px);
    font-weight:700;
    color:#0b1c3d;
    line-height:1.2;
}

.enterprise-text{
    font-size:16px;
    color:#4b5563;
    line-height:1.7;
}

/* RIGHT SIDE */
.enterprise-right{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-right: 70px;
}

.enterprise-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#e9edf5;
    padding:13px 10px;
    border-radius:12px;
    max-width:430px;
}

.enterprise-icon{
    width:42px;
    height:42px;
    background:#1a5cff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.enterprise-icon img{
    width:20px;
}

.enterprise-card-title{
    font-size:15px;
    font-weight:700;
    color:#0b1c3d;
    margin:0 0 6px;
}

.enterprise-card-text{
    font-size:13px;
    color:#6b7280;
    line-height:1.5;
    margin:0;
}

/* ENTERPRISE ANIMATION */

.enterprise-left,
.enterprise-card{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

/* visible state */

.enterprise-left.show{
    opacity:1;
    transform:translateY(0);
}

.enterprise-card.show{
    opacity:1;
    transform:translateY(0);
}

/* stagger effect */

.enterprise-card:nth-child(1){ transition-delay:0.1s; }
.enterprise-card:nth-child(2){ transition-delay:0.2s; }
.enterprise-card:nth-child(3){ transition-delay:0.3s; }
.enterprise-card:nth-child(4){ transition-delay:0.4s; }
.enterprise-card:nth-child(5){ transition-delay:0.5s; }

/* INITIAL STATE */

.enterprise-left{
    opacity:0;
    transform:translateX(-80px);
    transition:all 0.8s ease;
}

.enterprise-card{
    opacity:0;
    transform:translateX(80px);
    transition:all 0.8s ease;
}

/* ACTIVE STATE */

.enterprise-left.active{
    opacity:1;
    transform:translateX(0);
}

.enterprise-card.active{
    opacity:1;
    transform:translateX(0);
}

/* CARD DELAY */

.enterprise-card:nth-child(1){ transition-delay:0.15s; }
.enterprise-card:nth-child(2){ transition-delay:0.30s; }
.enterprise-card:nth-child(3){ transition-delay:0.45s; }
.enterprise-card:nth-child(4){ transition-delay:0.60s; }
.enterprise-card:nth-child(5){ transition-delay:0.75s; }




/*RESPONSIVE */

@media(max-width:768px){

.enterprise-section{
padding:20px ;
}

.enterprise-badge{
    margin-top: 20px;
}   

.enterprise-container{
flex-direction:column;
text-align:center;
gap: 10px;
}

.enterprise-right{
width:100%;
align-items:center;
}

.enterprise-left{
margin-top: 60px;
}

.enterprise-right , .enterprise-left{
    margin: 0;
}

.enterprise-card{
max-width:100%;
margin-left:5px;
text-align:left;
}
}

/* ── Shared float animation ── */
@keyframes float {
    0%   { transform: translateY(0px) rotate(15deg); }
    50%  { transform: translateY(-8px) rotate(15deg); }
    100% { transform: translateY(0px) rotate(15deg); }
}

/* real-time card shouldn't rotate */
.real-time-card {
    animation: floatCard 3s ease-in-out infinite;
}

@keyframes floatCard {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* ── Misc inline helpers ── */
.circle {
    width: 10px;
    height: 10px;
    background-color: #1a5cff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 8px;
}

.circle1 {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 8px;
}

.rightarrow {
    margin-left: 20px;
}


/* SECTION 3  –  Features Grid*/

.section3 {
    width: 100%;
    background: #f0f2f8;
    padding: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Header ── */
.s3-header {
    text-align: center;
    max-width: 860px;
    margin-bottom: 56px;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.s3-badge {
    display: inline-block;
    background: #dce5f9;
    color: black;
    font-family: 'Sen', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 20px;
    border-radius: 30px;
    margin-bottom: 25px;
    letter-spacing: 0.01em;
}

.s3-title {
    font-family: 'Sen', sans-serif;
    font-size:clamp(30px,4vw,40px);
    font-weight: 600;
    color: #1a5cff;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.s3-title {
margin: 0
};

.s3-sub {
    font-family: 'Sen', sans-serif;
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 400;
    color: black;
    line-height: 1.7 !important;
}

.s3-sub .line-break {
    display: block;    
    margin-top: 8px;    
}

/* ── Grid ── */
.s3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1200px;
}

/* ── Card ── */
.s3-card {
    background: white;
    border-radius: 20px;
    padding: 36px 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Stagger delays (for JS-driven .visible class) */
.s3-card:nth-child(1) { transition-delay: 0.05s; }
.s3-card:nth-child(2) { transition-delay: 0.12s; }
.s3-card:nth-child(3) { transition-delay: 0.19s; }
.s3-card:nth-child(4) { transition-delay: 0.26s; }
.s3-card:nth-child(5) { transition-delay: 0.33s; }
.s3-card:nth-child(6) { transition-delay: 0.40s; }


.s3-card:hover {
    background: #e4edff;
    box-shadow: 0 12px 40px rgba(43, 85, 230, 0.20);
    transform: translateY(-6px);
}

/* ── Icon box ── */
.s3-icon {
    width: 54px;
    height: 54px;
    background: #003db8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.s3-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
}

/* ── Card text ── */
.s3-card-title {
    font-family: 'Sen', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1a5cff;
    margin-bottom: 12px;
    line-height: 1.3;
}

.s3-card-title {
    margin: 0;
}

.s3-card-text {
    font-family: 'Sen', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.65;
    margin-bottom: 24px;
    flex: 1;
}

/* ── Explore link ── */
.s3-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sen', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color:black;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.s3-explore:hover {
    gap: 12px;
}

.s3-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid black;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.s3-explore:hover .s3-arrow {
    background: #003db8;
    color: #ffffff;
}

/* //section4 */

.section4 {
    width: 100%;
    background: #071C3C;
    padding: 50px ;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*  Header */

.s4-header {
    text-align: center;
    max-width: 760px;
    margin-bottom: 10px;
}

.s4-badge {
    display: inline-block;
    background: #dce5f9;
    color: #003db8;
    font-family: 'Sen', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 30px;
}

.s4-title {
    font-family: 'Sen', sans-serif;
    font-size:clamp(30px,4vw,40px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 16px;
}

.s4-sub {
    font-family: 'Sen', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

/* ---------- Grid ---------- */
.s4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    margin-bottom: 0 !important;
    width: 100%;
    max-width: 1200px;
}

/* ---------- Card ---------- */
.s4-card {
    background: linear-gradient(135deg, #1b2f55 0%, #1e3563 100%);
    border-radius: 22px;
    padding: 13px;
    width: 100%;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 35px rgba(0,0,0,0.35);
    transition: all 0.3s ease;
}

/* Hover */
.s4-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* Top Row (ICON + TITLE)  */
.s4-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* Icon */
.s4-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s4-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Title */
.s4-card-title {
    font-family: 'Sen', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

/* Description */
.s4-card-text {
    font-family: 'Sen', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0;
}

/* animation base */
.animate-section{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

/* when visible */
.animate-section.show{
opacity:1;
transform:translateY(0);
}



/*  WHY SECTION  (blue gradient) */
.why-section {
    padding: 80px 10%;         
    background: linear-gradient(135deg, #0b2a6f 0%, #1446c6 50%, #1a5cff 100%);
    height: 650px;
display:flex;
    justify-content: center;
}

.container-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;                 
}

/* ── Left image ── */
.image-wrapper {
    position: relative;
    width: 480px;
    flex-shrink: 0;
}

.image-wrapper img {
    width: 100%;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    display: block;
}


/* ── Right content ── */
.content {
    flex: 1;
    max-width: 480px;         
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
}

.content h2 {
    font-size:clamp(30px,4vw,40px);
    line-height: 1.25;
    margin: 0 0 28px;
    color: #ffffff;
}

/* ── Feature rows ── */
.feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.check-box {
    width: 36px;
    height: 36px;
    min-width: 36px;          
    background: linear-gradient(145deg, #8fa8d8, #a9bce6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 16px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.feature-content {
    display: flex;
    flex-direction: column;
}

.feature h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 18px 0 6px;
}

.feature p {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}


/* last section   */

.conversion{
    height: 550px;
    background-color: #071a45;
    text-align: center;
    padding: 50px;
}

.conversion-section1{
    width: 100%;
}

.Lets{
    color:white;
    padding:3px 25px 4px;
    font-size:18px;
    background:#80889c;
    border-radius:40px;
    width:fit-content;
    margin:auto;
    display:flex;
    align-items:center;
    gap:0px;
}

.heading{
    font-size:clamp(30px,4vw,40px);
    color: white;
}

.heading-para{
    font-size: 22px;
    font-weight: lighter;
    width: 70%;
    margin: 20px auto;
    color: rgba(255,255,255,0.85);
}

.Initiative{
    background-color:#1a5cff;
    padding: 20px  ;
    margin-top: 30px;
    color: white;
    font-size: 20px;
    font-family: 'Sen';
    border: none;
    border-radius: 10px;
}

/* INITIAL STATE */

.Lets,
.heading,
.heading-para,
.Initiative{
    opacity:0;
    transform:translateY(40px) scale(0.95);
    transition:all 0.8s ease;
}

/* ACTIVE STATE */

.show-cta .Lets{
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:0.1s;
}

.show-cta .heading{
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:0.3s;
}

.show-cta .heading-para{
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:0.5s;
}

.show-cta .Initiative{
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:0.7s;
}

/* BUTTON PULSE EFFECT */

.Initiative:hover{
    animation:pulseBtn 1.2s infinite;
}

@keyframes pulseBtn{
    0%{box-shadow:0 0 0 0 rgba(26,92,255,0.6);}
    70%{box-shadow:0 0 0 15px rgba(26,92,255,0);}
    100%{box-shadow:0 0 0 0 rgba(26,92,255,0);}
}


@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .section1-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
            gap:50px;                  

    }

    .section1 {
        max-width: 100%;
        width: 100%;
        align-items: center;
    }

    .section1 h3 {
        align-self: center;
        font-size: 12px;
        margin-top: 40px;
    }

    .section1 h2 {
        font-size: 26px;
    }

    .section1 p {
        font-size: 14px;
    }

    /* Buttons stacked full width */
    .buttons {
        flex-direction: column;
        width: 100%;
        gap: 14px;
    }

    .btn1,
    .btn2 {
        width: 100%;
        height: 48px;
    }

    /* Stats stacked */
    .stats {
        justify-content: center;
        gap: 30px;
        margin-top: 40px;
    }

    .stats div {
        text-align: center;
    }

    .stats h4 {
        font-size: 24px;
    }

    .stats p {
        font-size: 13px;
    }

   /* IMAGE CONTAINER */
.section2{
    position: relative;
    left: 0;
    max-width: 100%;
    height: auto;
}

/* IMAGE */
.section2 img{
    width: 100%;
    height: auto;
    border-radius: 18px;
}

    .aplus-badge {
        top: 700px;
        right: 10px; 
        width: 60px;
        height: 60px;
    }

/* REAL TIME CARD */
.real-time-card{
    position: absolute;
    bottom: 0px;
    left: -10px;
    width: 70%;
    padding: 14px;
    border-radius: 12px;
    gap: 12px;
}

/* ICON */
.rtc-icon img{
    width: 36px;
    height: 36px;
    padding: 8px;
}

/* TEXT */
.rtc-text h4{
    font-size: 14px;
}

.rtc-text p{
    font-size: 12px;
}

    /* ---------------------------
       SECTION 3 (GRID)
    ---------------------------- */

    .section3 {
        padding: 60px 20px;
    }

    .s3-header {
        margin-bottom: 40px;
    }

    .s3-title {
        font-size: 24px;
    }

    .s3-sub {
        font-size: 14px;
    }

    .s3-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .s3-card {
        padding: 28px 22px;
    }

    /* ---------------------------
       WHY SECTION
    ---------------------------- */

    .why-section {
        padding: 60px 20px;
        height: auto;
    }

    .container-content {
        flex-direction: column;
        text-align: center;
    }

    .image-wrapper {
        width: 100%;
    }

    .verified-card {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-top: 20px;
        justify-content: center;
    }

    .content {
        max-width: 100%;
        width: 100%;
        height: 600px;
    }

    .content h2 {
        font-size: 24px;
    }

    .feature {
        justify-content: center;
        text-align: left;
    }

.feature-content {
    display: flex;
    flex-direction: column;
}

}

@media (max-width: 992px) {
    .s4-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 450px) {
    .section4 {
        padding: 70px 20px;
    }

    .s4-grid {
        grid-template-columns: 1fr;
    }

    .s4-card {
        padding: 15px;
    }
}

/* Mobile Responsive */

@media (max-width:768px){

.conversion{
    height:auto;
    padding:20px 20px;
}

.conversion-section1{
    padding:10px;
}

.Lets{
    font-size:14px;
    padding:8px 16px;
}

.heading{
    font-size:28px;
    line-height:1.3;
}

.heading-para{
    font-size:16px;
    width:70%;
    line-height:1.4;
}

.Initiative{
    font-size:16px;
    padding:14px 20px;
    margin-top:20px;
}

}

/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL SCROLL & ENTRANCE ANIMATIONS
   Drop this file AFTER your main stylesheet.
   Add  data-animate  attribute to any element you want animated.
   JS observer at the bottom triggers .in-view on scroll.
═══════════════════════════════════════════════════════════════ */

/* ─── 1. CSS CUSTOM PROPERTIES ──────────────────────────────── */
:root {
  --ease-out-expo  : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back  : cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out    : cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring    : cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast       : 0.45s;
  --dur-base       : 0.75s;
  --dur-slow       : 1.1s;
  --dur-crawl      : 1.6s;
  --blur-amount    : 8px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 1  –  HERO
   Cinematic stagger: badge → headline → paragraph → buttons → stats
═══════════════════════════════════════════════════════════════ */

/* ── badge ── */
.section1 h3 {
  opacity: 0;
  transform: translateY(-20px) scale(0.92);
  animation: heroFadeDown var(--dur-base) var(--ease-out-back) 0.15s forwards;
}

/* ── headline ── */
.section1 h2 {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(var(--blur-amount));
  animation: heroBlurUp var(--dur-slow) var(--ease-out-expo) 0.30s forwards;
}

/* ── paragraph ── */
.section1 p {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp var(--dur-base) var(--ease-out-expo) 0.50s forwards;
}

/* ── buttons ── */
.btn1 {
  opacity: 0;
  transform: translateX(-20px);
  animation: heroSlideRight var(--dur-base) var(--ease-out-back) 0.68s forwards;
}

.btn2 {
  opacity: 0;
  transform: translateX(-20px);
  animation: heroSlideRight var(--dur-base) var(--ease-out-back) 0.80s forwards;
}

/* ── stats row ── */
.stats {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp var(--dur-base) var(--ease-out-expo) 1.00s forwards;
}

/* ── right image column ── */
.section2 {
  opacity: 0;
  transform: translateX(60px) scale(0.96);
  filter: blur(6px);
  animation: heroImageIn var(--dur-crawl) var(--ease-out-expo) 0.20s forwards;
}

/* ── floating badges on hero image ── */
.aplus-badge {
  opacity: 0;
  transform: scale(0.5) rotate(15deg);
  animation: badgePop var(--dur-base) var(--ease-out-back) 1.20s forwards;
}

.real-time-card {
  opacity: 0;
  transform: translateX(40px) translateY(10px);
  animation: cardSlideIn var(--dur-base) var(--ease-out-back) 1.30s forwards;
}

/* ── Hero keyframes ── */
@keyframes heroFadeDown {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroBlurUp {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideRight {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes heroImageIn {
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes badgePop {
  to { opacity: 1; transform: scale(1) rotate(15deg); }
}
@keyframes cardSlideIn {
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

/* ── Shimmer effect on headline ── */
.section1 h2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 40%,
      rgba(255,255,255,0.55) 50%,
      transparent 60%);
  background-size: 200% 100%;
  animation: shimmer 2.5s var(--ease-in-out) 1.4s 1 forwards;
  pointer-events: none;
  border-radius: inherit;
}
.section1 h2 { position: relative; overflow: hidden; }

@keyframes shimmer {
  0%   { background-position: -200% 0; opacity: 1; }
  100% { background-position: 200% 0;  opacity: 0; }
}

/* ── Stat counter pulse ── */
.stats h4 {
  animation: statPop var(--dur-base) var(--ease-out-back) 1.1s both;
}

@keyframes statPop {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 2  –  ENTERPRISE
   Left flies in from left, cards stagger from right
═══════════════════════════════════════════════════════════════ */

/* Resets (these previously relied purely on JS .active) */
.enterprise-left {
  opacity: 0;
  transform: translateX(-70px);
  filter: blur(4px);
  transition:
    opacity    var(--dur-slow)  var(--ease-out-expo),
    transform  var(--dur-slow)  var(--ease-out-expo),
    filter     var(--dur-slow)  var(--ease-out-expo);
}

.enterprise-left.active {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.enterprise-card {
  opacity: 0;
  transform: translateX(70px) scale(0.95);
  filter: blur(3px);
  transition:
    opacity    var(--dur-base)  var(--ease-out-expo),
    transform  var(--dur-base)  var(--ease-out-back),
    filter     var(--dur-base)  var(--ease-out-expo),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.enterprise-card.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

/* stagger */
.enterprise-card:nth-child(1) { transition-delay: 0.10s; }
.enterprise-card:nth-child(2) { transition-delay: 0.22s; }
.enterprise-card:nth-child(3) { transition-delay: 0.34s; }
.enterprise-card:nth-child(4) { transition-delay: 0.46s; }
.enterprise-card:nth-child(5) { transition-delay: 0.58s; }

/* icon spin-in on card hover */
.enterprise-card:hover .enterprise-icon {
  animation: iconSpin 0.5s var(--ease-out-back) forwards;
}

@keyframes iconSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-15deg) scale(1.15); }
  100% { transform: rotate(0deg) scale(1.05); }
}

/* badge dot pulse */
.enterprise-dot {
  animation: dotPulse 2.4s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,92,255,0.6); }
  50%       { box-shadow: 0 0 0 7px rgba(26,92,255,0); }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 3  –  FEATURES GRID
   Header sweeps up; cards flip in with perspective
═══════════════════════════════════════════════════════════════ */

/* ── Section header ── */
.s3-header {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(5px);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo),
    filter    var(--dur-slow) var(--ease-out-expo);
}

.s3-header.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Cards: 3-D flip entrance ── */
.s3-card {
  opacity: 0;
  transform: perspective(600px) rotateX(18deg) translateY(40px);
  filter: blur(3px);
  transition:
    opacity    var(--dur-base)  var(--ease-out-expo),
    transform  var(--dur-base)  var(--ease-out-expo),
    filter     var(--dur-base)  var(--ease-out-expo),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.s3-card.in-view {
  opacity: 1;
  transform: perspective(600px) rotateX(0deg) translateY(0);
  filter: blur(0);
}

/* stagger */
.s3-card:nth-child(1) { transition-delay: 0.05s; }
.s3-card:nth-child(2) { transition-delay: 0.13s; }
.s3-card:nth-child(3) { transition-delay: 0.21s; }
.s3-card:nth-child(4) { transition-delay: 0.29s; }
.s3-card:nth-child(5) { transition-delay: 0.37s; }
.s3-card:nth-child(6) { transition-delay: 0.45s; }

/* ── Icon bounce on hover ── */
.s3-card:hover .s3-icon {
  animation: iconBounce 0.55s var(--ease-out-back) forwards;
}

@keyframes iconBounce {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.22) rotate(-8deg); }
  70%  { transform: scale(0.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Badge ripple ── */
.s3-badge {
  position: relative;
  overflow: hidden;
}

.s3-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.45) 50%,
      transparent 100%);
  transform: translateX(-100%);
  animation: badgeShimmer 3s ease-in-out 1.5s infinite;
}

@keyframes badgeShimmer {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}


.animate-section {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(4px);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo),
    filter    var(--dur-slow) var(--ease-out-expo);
}

.animate-section.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Per-card entrance */
.s4-card {
  opacity: 0;
  transform: translateY(50px) scale(0.94) rotate(-1deg);
  filter: blur(4px);
  transition:
    opacity    var(--dur-base)  var(--ease-out-expo),
    transform  var(--dur-base)  var(--ease-out-back),
    filter     var(--dur-base)  var(--ease-out-expo),
    box-shadow 0.3s ease;
}

.s4-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  filter: blur(0);
}

/* stagger */
.s4-card:nth-child(1) { transition-delay: 0.05s; }
.s4-card:nth-child(2) { transition-delay: 0.17s; }
.s4-card:nth-child(3) { transition-delay: 0.29s; }
.s4-card:nth-child(4) { transition-delay: 0.41s; }
.s4-card:nth-child(5) { transition-delay: 0.53s; }
.s4-card:nth-child(6) { transition-delay: 0.65s; }

/* ── Icon glint on hover ── */
.s4-card:hover .s4-icon {
  animation: glint 0.7s var(--ease-out-back) forwards;
}

@keyframes glint {
  0%   { transform: scale(1); filter: brightness(1); }
  40%  { transform: scale(1.18) rotate(-6deg); filter: brightness(1.35); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

/* ── Subtle border glow on hover ── */
.s4-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: linear-gradient(135deg,
      rgba(26,92,255,0.6) 0%,
      rgba(80,150,255,0.2) 50%,
      rgba(26,92,255,0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.s4-card { position: relative; }

.s4-card:hover::before { opacity: 1; }

/* ensure children stay above pseudo */
.s4-top, .s4-card-text { position: relative; z-index: 1; }



.image-wrapper {
  opacity: 0;
  transform: translateX(-60px) scale(0.95);
  filter: blur(5px);
  transition:
    opacity   var(--dur-crawl) var(--ease-out-expo),
    transform var(--dur-crawl) var(--ease-out-expo),
    filter    var(--dur-crawl) var(--ease-out-expo);
}

.image-wrapper.in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

/* ── Feature rows ── */
.feature {
  opacity: 0;
  transform: translateX(50px);
  filter: blur(3px);
  transition:
    opacity   var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo),
    filter    var(--dur-base) var(--ease-out-expo);
}

.feature.in-view {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.feature:nth-child(1) { transition-delay: 0.10s; }
.feature:nth-child(2) { transition-delay: 0.25s; }
.feature:nth-child(3) { transition-delay: 0.40s; }

/* ── Tag badge sweep ── */
.tag {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-back);
}

.tag.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Heading ── */
.content h2 {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo) 0.15s,
    transform var(--dur-slow) var(--ease-out-expo) 0.15s,
    filter    var(--dur-slow) var(--ease-out-expo) 0.15s;
}

.content h2.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Check-box morph ── */
.check-box {
  transition: transform 0.35s var(--ease-out-back),
              box-shadow 0.35s ease;
}

.feature:hover .check-box {
  transform: scale(1.18) rotate(-6deg);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.5),
    0 12px 28px rgba(0,0,0,0.25);
}


/* Override original basic transitions with richer ones */
.show-cta .Lets {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-base) var(--ease-out-back) 0.10s,
              transform var(--dur-base) var(--ease-out-back) 0.10s;
}

.show-cta .heading {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo) 0.28s,
              transform var(--dur-slow) var(--ease-out-expo) 0.28s,
              filter    var(--dur-slow) var(--ease-out-expo) 0.28s;
}

.show-cta .heading-para {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-base) var(--ease-out-expo) 0.48s,
              transform var(--dur-base) var(--ease-out-expo) 0.48s;
}

.show-cta .Initiative {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-base) var(--ease-out-back) 0.68s,
              transform var(--dur-base) var(--ease-out-back) 0.68s;
}

/* Extra: heading starts blurred */
.heading {
  filter: blur(6px);
  transition: opacity 0.8s ease,
              transform 0.8s ease,
              filter 0.8s ease;
}

/* ── CTA background animated grid ── */
.conversion {
  position: relative;
  overflow: hidden;
}

.conversion::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(26,92,255,0.07) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(26,92,255,0.07) 60px
    );
  animation: gridDrift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.conversion-section1 { position: relative; z-index: 1; }

@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* ── Glowing orbs in background ── */
.conversion::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,92,255,0.25) 0%, transparent 70%);
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  animation: orbPulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes orbPulse {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: 0.7; }
  50%       { transform: translateX(-50%) scale(1.25); opacity: 1;   }
}

/* ── Initiative button enhanced pulse ── */
.Initiative {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.Initiative::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.2) 50%,
      transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.Initiative:hover::after {
  transform: translateX(100%);
}


/* ── Button press effect ── */
.btn1:active,
.btn2:active,
.Initiative:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ── Smooth focus rings ── */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #1a5cff;
  outline-offset: 4px;
  border-radius: 6px;
}

/* ── Generic reveal utility class ── */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition:
    opacity   var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo),
    filter    var(--dur-base) var(--ease-out-expo);
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* delay helpers */
[data-delay="1"] { transition-delay: 0.10s; }
[data-delay="2"] { transition-delay: 0.20s; }
[data-delay="3"] { transition-delay: 0.30s; }
[data-delay="4"] { transition-delay: 0.40s; }
[data-delay="5"] { transition-delay: 0.50s; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}