.aboutV2Hero{
    position:relative;
    overflow:hidden;
    padding:90px 0 110px;
    color:#fff;
    background:
        radial-gradient(circle at 82% 12%,rgba(65,139,255,.42),transparent 31%),
        radial-gradient(circle at 13% 95%,rgba(0,196,255,.15),transparent 31%),
        linear-gradient(135deg,#020d20 0%,#061e45 48%,#0b57d0 100%);
}

.aboutV2Hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.13;
    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:42px 42px;
}

.aboutV2Hero .container{
    position:relative;
    z-index:2;
}

.aboutV2HeroGrid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:70px;
    align-items:center;
}

.aboutV2Eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    color:#bfdbfe;
    font-size:11px;
    letter-spacing:1.35px;
    font-weight:900;
}

.aboutV2Eyebrow span{
    width:32px;
    height:2px;
    border-radius:999px;
    background:#ffc107;
}

.aboutV2HeroCopy h1{
    max-width:720px;
    margin:0;
    font-size:clamp(45px,6vw,72px);
    line-height:1.03;
    letter-spacing:-2.8px;
    font-weight:950;
}

.aboutV2HeroCopy h1 strong{
    display:block;
    color:#ffc107;
}

.aboutV2HeroCopy > p{
    max-width:700px;
    margin:25px 0 0;
    color:#d9e6f7;
    font-size:17px;
    line-height:1.8;
    font-weight:550;
}

.aboutV2HeroActions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:32px;
}

.aboutV2PrimaryButton,
.aboutV2SecondaryButton,
.aboutV2FinalSecondary{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 23px;
    border-radius:16px;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    transition:.22s ease;
}

.aboutV2PrimaryButton{
    color:#172033;
    background:#ffc107;
    box-shadow:0 18px 40px rgba(255,193,7,.24);
}

.aboutV2PrimaryButton:hover{
    color:#172033;
    transform:translateY(-2px);
}

.aboutV2SecondaryButton{
    color:#fff;
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(10px);
}

.aboutV2SecondaryButton:hover{
    color:#fff;
    background:rgba(255,255,255,.15);
}

.aboutV2Trust{
    display:flex;
    flex-wrap:wrap;
    gap:17px;
    margin-top:27px;
}

.aboutV2Trust span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#c6d7ec;
    font-size:11px;
    font-weight:750;
}

.aboutV2Trust svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#4ade80;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2Visual{
    position:relative;
    min-height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.aboutV2Glow{
    position:absolute;
    width:310px;
    height:310px;
    border-radius:999px;
    background:rgba(53,130,255,.38);
    filter:blur(75px);
}

.aboutV2Monitor{
    position:relative;
    z-index:2;
}

.aboutV2MonitorScreen{
    width:310px;
    height:210px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
    border:12px solid rgba(255,255,255,.94);
    border-radius:29px;
    background:
        radial-gradient(circle at 75% 20%,rgba(87,157,255,.48),transparent 32%),
        linear-gradient(135deg,#031329,#0b57d0);
    box-shadow:0 35px 75px rgba(0,0,0,.37);
}

.aboutV2MonitorScreen svg{
    width:67px;
    height:67px;
    margin-bottom:18px;
    fill:none;
    stroke:#fff;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2MonitorScreen strong{
    font-size:18px;
    font-weight:950;
}

.aboutV2MonitorScreen small{
    margin-top:6px;
    color:#bfdbfe;
    font-size:11px;
    font-weight:750;
}

.aboutV2MonitorStand{
    width:105px;
    height:18px;
    margin:0 auto;
    border-radius:0 0 20px 20px;
    background:#fff;
}

.aboutV2FloatingCard{
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 15px;
    color:#061e45;
    border:1px solid rgba(255,255,255,.65);
    border-radius:17px;
    background:rgba(255,255,255,.95);
    box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.aboutV2FloatingCard svg{
    width:27px;
    height:27px;
    flex:0 0 27px;
    fill:none;
    stroke:#0b57d0;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2FloatingCard b,
.aboutV2FloatingCard small{
    display:block;
}

.aboutV2FloatingCard b{
    font-size:11px;
    font-weight:950;
}

.aboutV2FloatingCard small{
    margin-top:2px;
    color:#64748b;
    font-size:9px;
    font-weight:700;
}

.aboutV2CardOne{
    top:35px;
    left:0;
}

.aboutV2CardTwo{
    top:90px;
    right:-15px;
}

.aboutV2CardThree{
    right:25px;
    bottom:45px;
}

.aboutV2Section{
    padding:95px 0;
    background:#fff;
}

.aboutV2SectionSoft{
    background:#f2f6fc;
}

.aboutV2Heading{
    max-width:810px;
    margin-bottom:38px;
}

.aboutV2Heading > span,
.aboutV2ProcessIntro > span{
    color:#0b57d0;
    font-size:11px;
    letter-spacing:1.25px;
    font-weight:950;
    text-transform:uppercase;
}

.aboutV2Heading h2,
.aboutV2ProcessIntro h2{
    margin:10px 0 14px;
    color:#061e45;
    font-size:clamp(32px,4.5vw,50px);
    line-height:1.1;
    letter-spacing:-1.8px;
    font-weight:950;
}

.aboutV2Heading p,
.aboutV2ProcessIntro p{
    margin:0;
    color:#64748b;
    line-height:1.8;
    font-weight:550;
}

.aboutV2Values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.aboutV2ValueCard{
    padding:31px;
    border:1px solid #e2eaf4;
    border-radius:26px;
    background:#fff;
    box-shadow:0 16px 40px rgba(8,48,107,.07);
    transition:.22s ease;
}

.aboutV2ValueCard:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 55px rgba(8,48,107,.12);
}

.aboutV2Icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:19px;
    background:#eaf2ff;
}

.aboutV2Icon svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:#0b57d0;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2ValueCard h3{
    margin:20px 0 10px;
    color:#061e45;
    font-size:20px;
    font-weight:950;
}

.aboutV2ValueCard p{
    margin:0;
    color:#64748b;
    font-size:13px;
    line-height:1.8;
    font-weight:550;
}

.aboutV2ProcessGrid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:60px;
    align-items:center;
}

.aboutV2ProcessIntro > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:25px;
    color:#0b57d0;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
}

.aboutV2Steps{
    padding:24px 29px;
    border:1px solid #dce7f3;
    border-radius:29px;
    background:#fff;
    box-shadow:0 25px 55px rgba(8,48,107,.1);
}

.aboutV2Step{
    display:grid;
    grid-template-columns:38px 55px 1fr;
    gap:14px;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #edf1f6;
}

.aboutV2Step:last-child{
    border-bottom:0;
}

.aboutV2Step > b{
    color:#cbd5e1;
    font-size:20px;
    font-weight:950;
}

.aboutV2StepIcon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#eaf2ff;
}

.aboutV2StepIcon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:#0b57d0;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2Step h3{
    margin:0 0 4px;
    color:#061e45;
    font-size:15px;
    font-weight:950;
}

.aboutV2Step p{
    margin:0;
    color:#64748b;
    font-size:11px;
    line-height:1.55;
}

.aboutV2FeatureGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.aboutV2Feature{
    padding:27px;
    border:1px solid #e3ebf5;
    border-radius:23px;
    background:#f8fbff;
}

.aboutV2Feature > svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:#0b57d0;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutV2Feature h3{
    margin:18px 0 9px;
    color:#061e45;
    font-size:16px;
    line-height:1.35;
    font-weight:950;
}

.aboutV2Feature p{
    margin:0;
    color:#64748b;
    font-size:12px;
    line-height:1.7;
}

.aboutV2Final{
    padding:0 0 95px;
    background:#fff;
}

.aboutV2FinalPanel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:45px;
    color:#fff;
    border-radius:31px;
    background:
        radial-gradient(circle at 88% 15%,rgba(75,148,255,.48),transparent 30%),
        linear-gradient(135deg,#031329,#083b88);
    box-shadow:0 25px 60px rgba(8,48,107,.22);
}

.aboutV2FinalPanel > div:first-child{
    max-width:700px;
}

.aboutV2FinalPanel span{
    color:#bfdbfe;
    font-size:11px;
    letter-spacing:.8px;
    font-weight:900;
}

.aboutV2FinalPanel h2{
    margin:7px 0;
    font-size:32px;
    font-weight:950;
}

.aboutV2FinalPanel p{
    margin:0;
    color:#dbeafe;
    font-size:13px;
    line-height:1.7;
}

.aboutV2FinalActions{
    min-width:max-content;
    display:flex;
    gap:10px;
    flex-direction:column;
}

.aboutV2FinalSecondary{
    color:#fff;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);
}

.aboutV2FinalSecondary:hover{
    color:#fff;
    background:rgba(255,255,255,.14);
}

@media(max-width:991px){
    .aboutV2HeroGrid,
    .aboutV2ProcessGrid{
        grid-template-columns:1fr;
    }

    .aboutV2Visual{
        min-height:420px;
    }

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

    .aboutV2FeatureGrid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:640px){
    .aboutV2Hero{
        padding:60px 0 75px;
    }

    .aboutV2HeroCopy h1{
        font-size:42px;
        letter-spacing:-1.4px;
    }

    .aboutV2HeroActions,
    .aboutV2HeroActions a{
        width:100%;
    }

    .aboutV2Trust{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .aboutV2Visual{
        min-height:350px;
    }

    .aboutV2MonitorScreen{
        width:245px;
        height:172px;
    }

    .aboutV2FloatingCard{
        padding:10px 12px;
    }

    .aboutV2CardOne{
        left:0;
    }

    .aboutV2CardTwo{
        right:0;
    }

    .aboutV2CardThree{
        right:10px;
        bottom:25px;
    }

    .aboutV2Section{
        padding:67px 0;
    }

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

    .aboutV2Step{
        grid-template-columns:32px 47px 1fr;
    }

    .aboutV2FinalPanel{
        align-items:flex-start;
        flex-direction:column;
        padding:29px 22px;
    }

    .aboutV2FinalActions,
    .aboutV2FinalActions a{
        width:100%;
    }
}
