/* =====================================================
   AI & DATA SCIENCE PAGE
===================================================== */

.ai-hero {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(13,110,253,.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f8fbff,
            #eef6ff
        );

}


/* Animated Grid */

.ai-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(13,110,253,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(13,110,253,.05) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    animation: gridMove 15s linear infinite;

}


@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(50px);
    }

}


/* Hero Content */

.ai-hero .container {

    position: relative;

    z-index: 2;

}


.ai-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 18px;

    border-radius: 50px;

    background: #e8f2ff;

    color: #0d6efd;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 22px;

}


.ai-hero h1 {

    font-size: clamp(45px, 5vw, 72px);

    line-height: 1.08;

    font-weight: 800;

    color: #10265f;

    margin-bottom: 25px;

}


.ai-hero h1 span {

    display: block;

    background: linear-gradient(
        90deg,
        #0d6efd,
        #38bdf8
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.ai-hero-text {

    max-width: 600px;

    color: #64748b;

    font-size: 18px;

    line-height: 1.8;

}


.ai-buttons {

    display: flex;

    gap: 15px;

    margin-top: 32px;

    flex-wrap: wrap;

}


.ai-btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 25px;

    border-radius: 50px;

    text-decoration: none;

    color: white;

    font-weight: 600;

    background: linear-gradient(
        90deg,
        #123b8e,
        #1687f5
    );

    transition: .3s;

}


.ai-btn-primary:hover {

    color: white;

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(13,110,253,.25);

}


.ai-btn-outline {

    display: inline-flex;

    align-items: center;

    padding: 13px 25px;

    border: 1px solid #0d6efd;

    border-radius: 50px;

    color: #0d6efd;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}


.ai-btn-outline:hover {

    background: #0d6efd;

    color: white;

}


/* Mini Stats */

.hero-mini-stats {

    display: flex;

    gap: 40px;

    margin-top: 45px;

}


.hero-mini-stats div {

    display: flex;

    flex-direction: column;

}


.hero-mini-stats strong {

    font-size: 24px;

    color: #0d6efd;

}


.hero-mini-stats span {

    color: #64748b;

    font-size: 13px;

}



/* =====================================================
   AI VISUAL
===================================================== */

.ai-visual {

    height: 520px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}


.ai-circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(13,110,253,.25);

}


.circle-one {

    width: 360px;

    height: 360px;

    animation: rotateCircle 20s linear infinite;

}


.circle-two {

    width: 470px;

    height: 470px;

    border-style: dashed;

    animation: rotateCircleReverse 30s linear infinite;

}


@keyframes rotateCircle {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes rotateCircleReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }

}


.ai-core {

    width: 150px;

    height: 150px;

    border-radius: 35px;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #38bdf8
    );

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-shadow:
        0 25px 70px rgba(13,110,253,.35);

    z-index: 3;

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

}


.ai-core i {

    font-size: 50px;

}


.ai-core span {

    font-size: 20px;

    font-weight: 800;

}


@keyframes corePulse {

    50% {
        transform: scale(1.08);
    }

}


/* Floating Cards */

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 18px;

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

    border-radius: 14px;

    box-shadow:
        0 15px 40px rgba(15,23,42,.12);

    z-index: 5;

    animation: floatCard 4s ease-in-out infinite;

}


.floating-card i {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 10px;

    background: #eaf3ff;

    color: #0d6efd;

    font-size: 20px;

}


.floating-card strong {

    display: block;

    color: #172554;

    font-size: 13px;

}


.floating-card small {

    color: #64748b;

}


.card-one {

    top: 65px;

    left: 5px;

}


.card-two {

    right: 0;

    top: 180px;

    animation-delay: 1s;

}


.card-three {

    bottom: 70px;

    left: 50px;

    animation-delay: 2s;

}


@keyframes floatCard {

    50% {
        transform: translateY(-12px);
    }

}



/* =====================================================
   SECTION HEADING
===================================================== */

.section-heading {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 55px;

}


.section-heading span {

    color: #0d6efd;

    font-weight: 700;

    letter-spacing: 2px;

    font-size: 13px;

}


.section-heading h2 {

    font-size: 42px;

    color: #10265f;

    font-weight: 800;

    margin-top: 12px;

}


.section-heading p {

    color: #64748b;

    line-height: 1.8;

}



/* =====================================================
   SERVICES
===================================================== */

.ai-services-section {

    padding: 100px 0;

    background: #fff;

}


.ai-service-card {

    height: 100%;

    padding: 35px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #e8eef7;

    box-shadow:
        0 10px 40px rgba(15,23,42,.06);

    transition: .4s;

}


.ai-service-card:hover {

    transform: translateY(-10px);

    border-color: #b8d7ff;

    box-shadow:
        0 25px 55px rgba(13,110,253,.12);

}


.service-icon {

    width: 65px;

    height: 65px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

    background: #eaf3ff;

    color: #0d6efd;

    font-size: 28px;

    margin-bottom: 25px;

}


.ai-service-card h3 {

    color: #10265f;

    font-size: 23px;

    font-weight: 700;

}


.ai-service-card p {

    color: #64748b;

    line-height: 1.7;

}


.ai-service-card ul {

    list-style: none;

    padding: 0;

    margin-top: 20px;

}


.ai-service-card li {

    color: #475569;

    margin-bottom: 10px;

}


.ai-service-card li::before {

    content: "✓";

    color: #0d6efd;

    font-weight: bold;

    margin-right: 10px;

}



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

.technology-section {

    padding: 100px 0;

    background: #f7faff;

}


.tech-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;

}


.tech-item {

    min-height: 140px;

    background: white;

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

    box-shadow:
        0 8px 30px rgba(15,23,42,.05);

    transition: .3s;

}


.tech-item:hover {

    transform: translateY(-7px);

    color: #0d6efd;

}


.tech-item i {

    font-size: 35px;

    color: #0d6efd;

}


.tech-item span {

    font-weight: 600;

    color: #334155;

}



/* =====================================================
   PROCESS
===================================================== */

.ai-process-section {

    padding: 100px 0;

    background: white;

}


.process-line {

    position: relative;

    max-width: 900px;

    margin: auto;

}


.process-item {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    padding: 25px;

    margin-bottom: 20px;

    background: #f8fbff;

    border-radius: 18px;

    transition: .3s;

}


.process-item:hover {

    transform: translateX(10px);

}


.process-number {

    min-width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #38bdf8
    );

    color: white;

    font-weight: 800;

}


.process-item h4 {

    color: #10265f;

    font-weight: 700;

}


.process-item p {

    margin: 0;

    color: #64748b;

}



/* =====================================================
   STATS
===================================================== */

.ai-stats-section {

    padding: 70px 0;

    background: linear-gradient(
        135deg,
        #10265f,
        #0d6efd
    );

}


.ai-stat {

    color: white;

}


.ai-stat strong {

    display: block;

    font-size: 48px;

    font-weight: 800;

}


.ai-stat span {

    opacity: .8;

}



/* =====================================================
   CTA
===================================================== */

.ai-cta {

    padding: 100px 0;

    background: #f7faff;

}


.cta-box {

    padding: 55px;

    border-radius: 30px;

    background: linear-gradient(
        120deg,
        #10265f,
        #0d6efd
    );

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.cta-box span {

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 700;

}


.cta-box h2 {

    font-size: 40px;

    font-weight: 800;

    margin: 12px 0;

}


.cta-box p {

    opacity: .85;

    max-width: 650px;

}


.cta-box .ai-btn-primary {

    background: white;

    color: #0d6efd;

    flex-shrink: 0;

}


.cta-box .ai-btn-primary:hover {

    color: #0d6efd;

}



/* =====================================================
   REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.active {

    opacity: 1;

    transform: translateY(0);

}



/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:991px) {

    .ai-hero {

        padding: 90px 0;

    }


    .ai-visual {

        margin-top: 50px;

    }


    .tech-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .cta-box {

        flex-direction: column;

        align-items: flex-start;

    }

}


@media(max-width:576px) {

    .ai-hero {

        min-height: auto;

        padding: 70px 0;

    }


    .ai-hero h1 {

        font-size: 42px;

    }


    .hero-mini-stats {

        gap: 20px;

    }


    .ai-visual {

        height: 430px;

    }


    .circle-one {

        width: 260px;

        height: 260px;

    }


    .circle-two {

        width: 330px;

        height: 330px;

    }


    .ai-core {

        width: 120px;

        height: 120px;

    }


    .floating-card {

        transform: scale(.8);

    }


    .card-one {

        left: -15px;

    }


    .card-two {

        right: -15px;

    }


    .section-heading h2 {

        font-size: 32px;

    }


    .tech-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .cta-box {

        padding: 35px 25px;

    }


    .cta-box h2 {

        font-size: 30px;

    }

}