/*==================================================
    SERVICE HERO
==================================================*/
    .service-hero {
        position: relative;
        overflow: hidden;
        padding: 170px 0 130px;
        background:radial-gradient(circle at top left, rgba(37, 99, 235, .12) 0%,transparent 35%), radial-gradient(circle at bottom right,rgba(96, 165, 250, .10) 0%,transparent 40%), linear-gradient(180deg, #ffffff 0%, #f8fbff 55%,#ffffff 100%);
    }
    .service-hero::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        top: -260px;
        left: -250px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(37, 99, 235, .14),
                rgba(37, 99, 235, 0));
        filter: blur(20px);
        pointer-events: none;
    }
    .service-hero::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        right: -220px;
        bottom: -220px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(96, 165, 250, .15),
                rgba(96, 165, 250, 0));
        filter: blur(20px);
        pointer-events: none;
    }
    .service-hero-grid {
        position: relative;
        z-index: 5;
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 70px;
        align-items: center;
    }
    /*==================================
        LEFT
    ==================================*/
    .hero-left {
        position: relative;
    }
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 22px;
        border-radius: 999px;
        background: #eff6ff;
        border: 1px solid #dbeafe;
        color: #2563eb;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 28px;
    }
    .hero-badge span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2563eb;
        box-shadow:
            0 0 0 8px rgba(37, 99, 235, .10);
    }
    /*==================================
        Heading
    ==================================*/
    .hero-left h1 {
        font-size: 72px;
        line-height: 1.05;
        color: #0f172a;
        font-weight: 800;
        letter-spacing: -2px;
        margin-bottom: 28px;
        max-width: 760px;
    }
    .hero-left h1 strong {
        color: #2563eb;
        font-weight: 800;
    }
    /*==================================
        Description
    ==================================*/
    .hero-left p {
        max-width: 720px;
        font-size: 18px;
        line-height: 1.95;
        color: #64748b;
        margin-bottom: 40px;
    }
    /*==================================
       Buttons
    ==================================*/
    .hero-buttons {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 45px;
    }
    /*==================================
    Highlights
    ==================================*/
    .hero-highlights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 650px;
    }
    .hero-highlights div {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid #e2e8f0;
        font-size: 15px;
        font-weight: 600;
        color: #334155;
        transition: .35s;
        box-shadow:0 10px 30px rgba(15, 23, 42, .04);
    }
    .hero-highlights div:hover {
        transform: translateY(-5px);
        border-color: #2563eb;
        box-shadow:0 20px 45px rgba(37, 99, 235, .10);
    }
    /*==================================
        Decorative Blur
    ==================================*/
    .hero-left::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        top: -60px;
        left: -60px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(59, 130, 246, .08),
                rgba(59, 130, 246, 0));
        z-index: -1;
    }
    .hero-left::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        bottom: -40px;
        right: 60px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(96, 165, 250, .10),
                rgba(96, 165, 250, 0));
        z-index: -1;
    }
    /*==================================
        Responsive
    ==================================*/
    @media(max-width:1400px) {
        .hero-left h1 {
            font-size: 64px;
        }
    }
    @media(max-width:1200px) {
        .service-hero-grid {
            gap: 45px;
        }
        .hero-left h1 {
            font-size: 56px;
        }
    }
    @media(max-width:991px) {
        .service-hero {
            padding: 140px 0 90px;
        }
        .service-hero-grid {
            grid-template-columns: 1fr;
            gap: 55px;
        }
        .hero-left {
            text-align: center;
        }
        .hero-left p {
            margin-left: auto;
            margin-right: auto;
        }
        .hero-buttons {
            justify-content: center;
        }
        .hero-highlights {
            margin: auto;
        }
    }
    @media(max-width:767px) {
        .service-hero {
            padding: 120px 0 70px;
        }
        .hero-badge {
            font-size: 11px;
            padding: 10px 16px;
        }
        .hero-left h1 {
            font-size: 38px;
            line-height: 1.15;
            letter-spacing: -1px;
            margin-bottom: 20px;
        }
        .hero-left p {
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
        .hero-buttons {
            gap: 15px;
        }
        .hero-highlights {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        .hero-highlights div {
            padding: 16px 18px;
            font-size: 14px;
        }
    }
    @media(max-width:480px) {
        .hero-left h1 {
            font-size: 32px;
        }
        .hero-left p {
            font-size: 14px;
        }
    }
    /*==================================================
    HERO RIGHT
    ==================================================*/
    .hero-right {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Floating Glow */
    .hero-right::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(37, 99, 235, .18),
                rgba(37, 99, 235, 0));
        top: -100px;
        right: -100px;
        filter: blur(20px);
        z-index: 0;
    }
    .hero-right::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(96, 165, 250, .16),
                rgba(96, 165, 250, 0));
        bottom: -60px;
        left: -40px;
        filter: blur(20px);
        z-index: 0;
    }
    /*==================================================
    DASHBOARD CARD
    ==================================================*/
    .dashboard-card {
        position: relative;
        width: 100%;
        max-width: 560px;
        border-radius: 34px;
        overflow: hidden;
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, .98),
                rgba(248, 251, 255, .98));
        border: 1px solid rgba(37, 99, 235, .10);
        box-shadow:
           0 30px 80px rgba(15, 23, 42, .10),
            0 8px 25px rgba(37, 99, 235, .08);
        backdrop-filter: blur(14px);
        z-index: 5;
        transition: .45s ease;
    }
    .dashboard-card:hover {
        transform:translateY(-8px);
        box-shadow:
            0 40px 90px rgba(37, 99, 235, .16);
    }
    /* Top Border */
    .dashboard-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background:
            linear-gradient(90deg,
                #2563eb,
                #3b82f6,
                #60a5fa);
    }
    /*==================================================
    HEADER
    ==================================================*/
    .dashboard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px;
        border-bottom: 1px solid #edf2f7;
        background: #ffffff;
    }
    .dashboard-header strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .4px;
    }
    /* Browser Dots */
    .browser-dots {
        display: flex;
        gap: 8px;
    }
    .browser-dots span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    .browser-dots .red {
        background: #ff5f57;
    }
    .browser-dots .yellow {
        background: #febc2e;
    }
    .browser-dots .green {
        background: #28c840;
    }
    /*==================================================
    BODY
    ==================================================*/
    .dashboard-body {
        padding: 35px;
    }
    /*==================================================
    SCORE AREA
    ==================================================*/
    .score-area {
        display: flex;
        align-items: center;
        gap: 25px;
       margin-bottom: 35px;
   }
    /*==================================================
    SCORE CIRCLE
    ==================================================*/
    .score-circle {
        position: relative;
        width: 150px;
        height: 150px;
        min-width: 150px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            conic-gradient(#2563eb 0deg,
                #3b82f6 230deg,
                #dbeafe 230deg,
0                #dbeafe 360deg);
    }
    .score-circle::before {
        content: "";
        position: absolute;
        width: 118px;
        height: 118px;
        border-radius: 50%;
        background: #ffffff;
    }
    .score-circle span {
        position: relative;
        z-index: 2;
        font-size: 46px;
        font-weight: 800;
        color: #2563eb;
        line-height: 1;
    }
    /* Small Pulse */
    .score-circle::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(37, 99, 235, .12);
        animation: pulseCircle 3s infinite;
    }
    /*==================================================
    SCORE CONTENT
    =================================================*/
    .score-content {
        flex: 1;
    }
    .score-content h3 {
        font-size: 28px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 10px;
        line-height: 1.2;
    }
    .score-content p {
        color: #64748b;
        font-size: 15px;
        line-height: 1.8;
    }
    /*==================================================
    BADGE
    ==================================================*/
    .score-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
        padding: 10px 16px;
        border-radius: 999px;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #15803d;
        font-size: 13px;
        font-weight: 700;
    }
    .score-status::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #22c55e;
    }
    /*==================================================
    ANIMATION
    ==================================================*/
    @keyframes pulseCircle {
        0% {
            transform: scale(1);
            opacity: .8;
        }
        50% {
            transform: scale(1.08);
            opacity: .25;
        }
        100% {
            transform: scale(1);
            opacity: .8;
        }
    }
    /*==================================================
    RESPONSIVE
    ==================================================*/
    @media(max-width:991px) {
        .dashboard-card {
            max-width: 650px;
            margin: auto;
        }
    }
    @media(max-width:767px) {
        .dashboard-body {
            padding: 25px;
        }
        .dashboard-header {
            padding: 18px 20px;
        }
        .dashboard-header strong {
            font-size: 14px;
        }
        .score-area {
            flex-direction: column;
            text-align: center;
            gap: 20px;
        }
        .score-circle {
            width: 120px;
            height: 120px;
            min-width: 120px;
        }
        .score-circle::before {
            width: 94px;
            height: 94px;
        }
        .score-circle span {
            font-size: 36px;
        }
        .score-content h3 {
           font-size: 22px;
        }
        .score-content p {
            font-size: 14px;
        }
    }
    @media(max-width:480px) {
        .dashboard-card {
            border-radius: 24px;
        }
        .dashboard-body {
            padding: 20px;
        }
        .score-circle {
            width: 105px;
            height: 105px;
            min-width: 105px;
        }
        .score-circle::before {
            width: 82px;
           height: 82px;
        }
        .score-circle span {
            font-size: 30px;
        }
    }
    /*==================================================
    METRIC LIST
    ==================================================*/
    .metric-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 35px;
        margin-bottom: 35px;
    }
    /*==================================================
    METRIC CARD
    =================================================*/
    .metric {
        position: relative;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 20px;
        transition: .35s ease;
        box-shadow:
           0 10px 25px rgba(15, 23, 42, .05);
    }
    .metric:hover {
        transform: translateY(-6px);
        border-color: #2563eb;
        box-shadow:
           0 20px 45px rgba(37, 99, 235, .10);
    }
    /* Top Gradient */
    .metric::before {
        content: "";
        position: absolute;
        top: 0;
       left: 0;
        width: 100%;
       height: 4px;
       background:
            linear-gradient(90deg,
                #2563eb,
                #60a5fa);
       transform: scaleX(0);
       transform-origin: left;
        transition: .35s;
    }
    .metric:hover::before {
        transform: scaleX(1);
    }
    /*==================================================
   TITLE
    ==================================================*/
    .metric span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    /*==================================================
    VALUE
    ==================================================*/
    .metric strong {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #0f172a;
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 18px;
    }
    /*==================================================
    STATUS BADGE
    ==================================================*/
    .metric strong::after {
        content: "Good";
        padding: 5px 10px;
        border-radius: 999px;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #15803d;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
    }
    /*==================================================
   PROGRESS TRACK
    =================================================*/
    .metric-progress {
        position: relative;
        width: 100%;
        height: 8px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow: hidden;
    }
    /*==================================================
    PROGRESS BAR
    ==================================================*/
    .metric-progress span {
        position: absolute;
        left: 0;
       top: 0;
        width: 92%;
        height: 100%;
        border-radius: 999px;
        background:
            linear-gradient(90deg,
                #2563eb,
                #60a5fa);
        animation: metricLoad 2.5s ease forwards;
    }
    /* Different Widths */
    .metric:nth-child(2) .metric-progress span {
        width: 95%;
    }
    .metric:nth-child(3) .metric-progress span {
        width: 98%;
    }
    .metric:nth-child(4) .metric-progress span {
        width: 90%;
    }
    /*==================================================
   HOVER GLOW
    ==================================================*/
    .metric::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background:
           radial-gradient(circle at top right,
                rgba(37, 99, 235, .10),
                transparent 65%);
        opacity: 0;
        transition: .35s;
    }
    .metric:hover::after {
        opacity: 1;
    }
    /*==================================================
    ICON
    ==================================================*/
    .metric-icon {
        position: absolute;
        top: 18px;

       right: 18px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 15px;
        font-weight: 700;
    }
    /*==================================================
   ANIMATION
    ==================================================*/
    @keyframes metricLoad {
        from {
            width: 0;
        }
    }
    /*==================================================
    RESPONSIVE
    ==================================================*/
    @media(max-width:991px) {
        .metric-list {
           gap: 16px;
        }
    }
    @media(max-width:767px) {
        .metric-list {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        .metric {
            padding: 18px;
        }
        .metric strong {
            font-size: 24px;
        }
    }
    @media(max-width:480px) {
        .metric {
            padding: 16px;
            border-radius: 18px;
        }
        .metric span {
            font-size: 12px;
        }
        .metric strong {
            font-size: 22px;
        }
        .metric-icon {
            width: 32px;
            height: 32px;
            font-size: 13px;
        }
    }
    /*==================================================
    PERFORMANCE CHART
    ==================================================*/
    .dashboard-chart {
        position: relative;
        width: 100%;
        height: 240px;
        margin-top: 35px;
        border-radius: 24px;
        overflow: hidden;
        background:
           linear-gradient(180deg,
                #ffffff,
                #f8fbff);
        border: 1px solid #e2e8f0;
        box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .70);
    }
    /*==================================================
    GRID LINES
    ==================================================*/
    .dashboard-chart::before {
        content: "";
        position: absolute;
        inset: 0;
       background:
            repeating-linear-gradient(to bottom,
                transparent,
                transparent 38px,
               rgba(226, 232, 240, .70) 39px);
        pointer-events: none;
    }
    .dashboard-chart::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(to right,
                transparent,
                transparent 58px,
                rgba(226, 232, 240, .45) 59px);
        pointer-events: none;
    }
    /*==================================================
   SVG CHART
    ==================================================*/
    .chart-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .chart-svg svg {
        width: 100%;
        height: 100%;
    }
    /*==================================================
       LINE
    ==================================================*/
    .chart-line {
        fill: none;
        stroke: #2563eb;
        stroke-width: 4;
       stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: drawLine 2.5s ease forwards;
    }
    /*==================================================
    AREA
    =================================================*/
    .chart-area {
        fill: url(#chartGradient);
        opacity: .25;
    }
    /*==================================================
    DATA POINT
    ==================================================*/
    .chart-point {
        fill: #2563eb;
        stroke: #fff;
        stroke-width: 5;
        animation: pointPulse 2.5s infinite;
    }
   /*==================================================
    FLOATING LABEL
    ==================================================*/
    .chart-label {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 10px 16px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
       box-shadow:
            0 12px 30px rgba(15, 23, 42, .08);
    }
    .chart-label strong {
      color: #2563eb;
      margin-left: 6px;
    }
    /*==================================================
    FLOATING STATUS
    ==================================================*/
    .live-status {
        position: absolute;
        bottom: 20px;
        left: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow:
            0 15px 35px rgba(15, 23, 42, .08);
    }
    .live-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #22c55e;
       animation: livePulse 1.8s infinite;
    }
    .live-status h5 {
        color: #0f172a;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
    }
    .live-status span {
        color: #64748b;
        font-size: 12px;
    }
    /*==================================================
    FLOATING CARD
    ==================================================*/
    .chart-floating {
        position: absolute;
        right: 20px;
        bottom: 20px;
        padding: 18px;
        width: 180px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow:
            0 18px 40px rgba(15, 23, 42, .08);
    }
   .chart-floating h4 {
       color: #0f172a;
        font-size: 15px;
        margin-bottom: 12px;
    }
    .chart-floating strong {
        display: block;
        font-size: 34px;
        color: #2563eb;
        margin-bottom: 6px;
    }
    .chart-floating small {
        color: #64748b;
    }
    /*==================================================
    ANIMATIONS
    ==================================================*/
    @keyframes drawLine {
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes pointPulse {
        0% {
            transform: scale(1);
        }
       50% {
            transform: scale(1.25);
        }
        100% {
           transform: scale(1);
        }
    }
    @keyframes livePulse {
        0% {
            box-shadow:
                0 0 0 0 rgba(34, 197, 94, .60);
        }
       70% {
           box-shadow:
                0 0 0 12px rgba(34, 197, 94, 0);
        }
        100% {
            box-shadow:
                0 0 0 0 rgba(34, 197, 94, 0);
        }
    }
    /*==================================================
    RESPONSIVE
    ==================================================*/
    @media(max-width:991px) {
        .dashboard-chart {
            height: 220px;
        }
    }
    @media(max-width:767px) {
        .dashboard-chart {
            height: 190px;
        }
        .chart-floating {
            display: none;
        }
        .chart-label {
            font-size: 12px;
            padding: 8px 12px;
        }
        .live-status {
            left: 15px;
            bottom: 15px;
            padding: 10px 14px;
        }
    }
    @media(max-width:480px) {
        .dashboard-chart {
            height: 170px;
           border-radius: 18px;
        }
        .chart-label {
            top: 10px;
            right: 10px;
        }
        .live-status {
            position: relative;
           margin: 15px;
            left: auto;
            bottom: auto;
        }
    }
    /*==================================================
    DASHBOARD PREMIUM GLASS SHINE
    ==================================================*/
    .dashboard-card {
        isolation: isolate;
       overflow: hidden;
    }
    /*==================================
    Main Shine Layer
    ==================================*/
    .dashboard-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -140%;
        width: 70%;
        height: 100%;
        background:
            linear-gradient(120deg,
                transparent 0%,
                rgba(255, 255, 255, .08) 25%,
                rgba(255, 255, 255, .45) 50%,
                rgba(255, 255, 255, .08) 75%,
                transparent 100%);
        transform: skewX(-20deg);
        transition: 1.6s ease;
        pointer-events: none;
        z-index: 8;
    }
    .dashboard-card:hover::after {
        left: 170%;
    }
    /*==================================
    Top Reflection
    ==================================*/
    .dashboard-reflection {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 140px;
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, .55),
                rgba(255, 255, 255, .18),
                transparent);
        pointer-events: none;
        z-index: 2;
   }
    /*==================================
   Bottom Reflection
    ==================================*/
    .dashboard-bottom-glow {
        position: absolute;
        left: 50%;
        bottom: -140px;
        transform: translateX(-50%);
        width: 85%;
        height: 220px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(37, 99, 235, .22),
                rgba(37, 99, 235, 0));
        filter: blur(60px);
        opacity: .85;
        pointer-events: none;
        z-index: 1;
    }
    /*==================================
   Corner Glow
    ==================================*/
    .dashboard-corner {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background:
            radial-gradient(circle,
                rgba(96, 165, 250, .18),
                transparent);
        filter: blur(50px);
        pointer-events: none;
    }
    .dashboard-corner.top {
        top: -120px;
        right: -120px;
    }
    .dashboard-corner.bottom {
        left: -120px;
        bottom: -120px;
    }
    /*==================================
    Floating Glass Blur
    ==================================*/
    .dashboard-glass {
        position: absolute;
        width: 170px;
        height: 170px;
       border-radius: 40px;
        backdrop-filter: blur(20px);
        background:
            rgba(255, 255, 255, .18);
        border:
            1px solid rgba(255, 255, 255, .25);
        transform: rotate(18deg);
        opacity: .45;
        z-index: 1;
    }
    .dashboard-glass.one {
        top: 40px;
        right: -70px;
    }
    .dashboard-glass.two {
        bottom: 30px;
        left: -70px;
    }
    /*==================================
   Floating Blur Balls
    ==================================*/
    .blur-ball {
        position: absolute;
        border-radius: 50%;
        filter: blur(12px);
        animation: floatBlur 10s linear infinite;
        pointer-events: none;
    }
    .blur-ball.one {
        width: 18px;
        height: 18px;
        background: #60a5fa;
        top: 80px;
        right: 80px;
   }

    .blur-ball.two {
        width: 12px;
        height: 12px;
        background: #2563eb;
        bottom: 70px;
        left: 60px;
    }
    .blur-ball.three {
        width: 26px;
        height: 26px;
        background: #93c5fd;
        top: 45%;
        right: -12px;
    }
    /*================================== Border Highlight ==================================*/
.dashboard-border {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.05), rgba(96,165,250,.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/*================================== Floating Animation ==================================*/
@keyframes floatBlur {
    0% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-10px) translateX(6px); }
    50% { transform: translateY(0) translateX(10px); }
    75% { transform: translateY(12px) translateX(-6px); }
    100% { transform: translateY(0) translateX(0); }
}

/*================================== Hover Lift ==================================*/
.dashboard-card:hover {
    transform: translateY(-10px) scale(1.01);
}

/*================================== Responsive ==================================*/
@media (max-width:767px) {
    .dashboard-reflection {
        height: 90px;
    }

    .dashboard-glass {
        display: none;
    }

    .dashboard-bottom-glow {
        width: 100%;
        bottom: -160px;
    }
}

@media (max-width:480px) {
    .dashboard-corner {
        display: none;
    }

    .blur-ball {
        display: none;
    }
}

/*================================== Floating Notification Widgets ==================================*/
.dashboard-widget {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(226,232,240,.85);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
    transition: .4s ease;
    z-index: 20;
}

.dashboard-widget:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(37,99,235,.12);
}

/*================================== Widget Position ==================================*/
.widget-speed {
    top: 110px;
    right: -65px;
    animation: floatOne 6s ease-in-out infinite;
}

.widget-lcp {
    bottom: 120px;
    left: -55px;
    animation: floatTwo 7s ease-in-out infinite;
}

.widget-live {
    right: 25px;
    bottom: -28px;
    animation: floatThree 6.5s ease-in-out infinite;
}

/*================================== Widget Icon ==================================*/
.dashboard-widget-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.dashboard-widget-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-widget-info h5 {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.dashboard-widget-info span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/*================================== Live Status ==================================*/
.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
}

.live-indicator::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    animation: liveDot 1.8s infinite;
}

/*================================== Progress Ring ==================================*/
.widget-ring {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(#2563eb 0deg, #60a5fa 300deg, #dbeafe 300deg, #dbeafe 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-ring::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
}

.widget-ring strong {
    position: relative;
    z-index: 2;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
}

/*================================== Hover Glow ==================================*/
.dashboard-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 70%);
    opacity: 0;
    transition: .35s;
}

.dashboard-widget:hover::before {
    opacity: 1;
}

/*================================== Hover Border ==================================*/
.dashboard-widget::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1px solid transparent;
    transition: .35s;
}

.dashboard-widget:hover::after {
    border-color: rgba(37,99,235,.20);
}

/*================================== Floating Animation ==================================*/
@keyframes floatOne {
    0%,100% {
        transform: translateY(0);
    }

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

@keyframes floatTwo {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

@keyframes floatThree {
    0%,100% {
        transform: translateY(0);
    }

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

@keyframes liveDot {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34,197,94,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
}
/*================================== Responsive ==================================*/
@media(max-width:1200px){
    .widget-speed{
        right:-25px;
    }
    .widget-lcp{
        left:-20px;
    }
}
@media(max-width:991px){
    .dashboard-widget{
        position:relative;
        top:auto;
        right:auto;
        left:auto;
        bottom:auto;
        margin:18px 0;
        animation:none;
    }
}
@media(max-width:767px){
    .dashboard-widget{
        padding:14px;
        gap:12px;
    }
    .dashboard-widget-icon{
        width:46px;
        height:46px;
        font-size:18px;
    }
    .dashboard-widget-info h5{
        font-size:14px;
    }
    .dashboard-widget-info span{
        font-size:12px;
    }
}
@media(max-width:480px){
    .dashboard-widget{
        flex-direction:column;
        text-align:center;
    }
}

/*================================== Dashboard Final Premium Effects ==================================*/
/*================================== Premium Hover Animation ==================================*/
.dashboard-card{
    transform-style:preserve-3d;
    perspective:1400px;
    will-change:transform,box-shadow;
    transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .35s ease;
}
.dashboard-card:hover{
    transform:perspective(1400px) rotateX(3deg) rotateY(-3deg) translateY(-14px) scale(1.01);
    border-color:rgba(37,99,235,.28);
    box-shadow:0 45px 100px rgba(37,99,235,.18),0 15px 45px rgba(15,23,42,.12);
}

/*================================== Gradient Border ==================================*/
.dashboard-card{
    position:relative;
}
.dashboard-card .gradient-border{
    position:absolute;
    inset:-1px;
    border-radius:35px;
    padding:1px;
    background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(96,165,250,.40),rgba(37,99,235,.22),rgba(255,255,255,.80));
    opacity:0;
    transition:.45s;
    pointer-events:none;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}
.dashboard-card:hover .gradient-border{
    opacity:1;
}

/*================================== Soft Background Glow ==================================*/
.dashboard-background-glow{
    position:absolute;
    inset:0;
    border-radius:34px;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.dashboard-background-glow::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.12),transparent);
    top:-160px;
    left:-130px;
    animation:glowMoveOne 12s linear infinite;
}
.dashboard-background-glow::after{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.14),transparent);
    right:-110px;
    bottom:-140px;
    animation:glowMoveTwo 10s linear infinite;
}

/*================================== Animated Grid ==================================*/
.dashboard-grid-overlay{
    position:absolute;
    inset:0;
    border-radius:34px;
    overflow:hidden;
    pointer-events:none;
    opacity:.20;
}
.dashboard-grid-overlay::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
    background-size:40px 40px;
    animation:gridMove 16s linear infinite;
}

/*================================== Dashboard Shadow Layer ==================================*/
.dashboard-shadow{
    position:absolute;
    left:50%;
    bottom:-70px;
    transform:translateX(-50%);
    width:88%;
    height:90px;
    background:radial-gradient(ellipse,rgba(37,99,235,.18),transparent 70%);
    filter:blur(24px);
    opacity:.8;
    transition:.4s;
    pointer-events:none;
}
.dashboard-card:hover .dashboard-shadow{
    width:94%;
    opacity:1;
}

/*================================== Top Light ==================================*/
.dashboard-light{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.15),transparent);
    pointer-events:none;
}

/*================================== Floating Highlight ==================================*/
.dashboard-highlight{
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.30),transparent);
    right:40px;
    top:50px;
    filter:blur(35px);
    animation:highlightMove 8s ease infinite;
}

/*================================== Hover Scale ==================================*/
.metric,
.dashboard-widget,
.chart-floating,
.live-status{
    transition:transform .35s,box-shadow .35s,border-color .35s;
}
.metric:hover,
.dashboard-widget:hover,
.chart-floating:hover,
.live-status:hover{
    transform:translateY(-5px) scale(1.02);
}

/*================================== Keyframes ==================================*/
@keyframes glowMoveOne{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(40px,25px);
    }
    100%{
        transform:translate(0,0);
    }
}
@keyframes glowMoveTwo{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-35px,-25px);
    }
    100%{
        transform:translate(0,0);
    }
}
@keyframes gridMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(40px);
    }
}
@keyframes highlightMove{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(20px);
    }
    100%{
        transform:translateY(0);
    }
}
/*================================== Tablet ==================================*/
@media(max-width:991px){
    .dashboard-card:hover{
        transform:translateY(-8px);
    }
}

/*================================== Mobile ==================================*/
@media(max-width:767px){
    .dashboard-grid-overlay,
    .dashboard-highlight,
    .dashboard-shadow{
        display:none;
    }
    .dashboard-card{
        transform:none !important;
    }
}

/*================================== Dashboard Premium Finish ==================================*/
/*================================== Floating Particles ==================================*/
.dashboard-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}
.dashboard-particles span{
    position:absolute;
    display:block;
    border-radius:50%;
    background:rgba(37,99,235,.18);
    animation:particleFloat linear infinite;
}

/*================================== Particle Sizes ==================================*/
.dashboard-particles span:nth-child(1){
    width:8px;
    height:8px;
    left:8%;
    top:85%;
    animation-duration:12s;
}
.dashboard-particles span:nth-child(2){
    width:12px;
    height:12px;
    left:22%;
    top:95%;
    animation-duration:15s;
}
.dashboard-particles span:nth-child(3){
    width:6px;
    height:6px;
    left:40%;
    top:88%;
    animation-duration:11s;
}
.dashboard-particles span:nth-child(4){
    width:14px;
    height:14px;
    left:60%;
    top:96%;
    animation-duration:18s;
}
.dashboard-particles span:nth-child(5){
    width:10px;
    height:10px;
    left:78%;
    top:92%;
    animation-duration:14s;
}
.dashboard-particles span:nth-child(6){
    width:18px;
    height:18px;
    left:90%;
    top:88%;
    animation-duration:17s;
}

/*================================== Mouse Glow Layer ==================================*/
.dashboard-card{
    cursor:default;
}
.dashboard-card::selection{
    background:transparent;
}
.mouse-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    transition:.35s;
    z-index:2;
}
.dashboard-card:hover .mouse-glow{
    opacity:1;
}
.mouse-glow::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:260px;
    height:260px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.16),rgba(37,99,235,.08),transparent 70%);
    filter:blur(30px);
}

/*================================== Loading Shimmer ==================================*/
.loading-shimmer{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.loading-shimmer::before{
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:70%;
    height:100%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
    animation:dashboardShimmer 7s infinite;
}

/*================================== Widget Micro Animation ==================================*/
.dashboard-widget{
    animation-fill-mode:both;
}
.dashboard-widget:hover .dashboard-widget-icon{
    transform:rotate(8deg) scale(1.08);
}
.dashboard-widget-icon{
    transition:.35s;
}

/*================================== Metric Animation ==================================*/
.metric{
    overflow:hidden;
}
.metric strong{
    transition:.35s;
}
.metric:hover strong{
    color:#2563eb;
    transform:translateX(3px);
}

/*================================== Chart Floating ==================================*/
.chart-floating{
    animation:cardFloat 6s ease-in-out infinite;
}
.live-status{
    animation:cardFloat2 5s ease-in-out infinite;
}

/*================================== Score Circle ==================================*/
.score-circle{
    animation:scoreRotate 10s linear infinite;
}
.score-circle::before{
    animation:scorePulse 3s infinite;
}

/*================================== Card Border Pulse ==================================*/
.dashboard-card{
    animation:borderPulse 8s infinite;
}

/*================================== Animations ==================================*/
@keyframes particleFloat{
    0%{
        transform:translateY(0) scale(1);
        opacity:0;
    }
    20%{
        opacity:.8;
    }
    100%{
        transform:translateY(-750px) scale(.3);
        opacity:0;
    }
}
@keyframes dashboardShimmer{
    0%{
        left:-150%;
    }
    100%{
        left:180%;
    }
}
@keyframes scoreRotate{
    0%{
        filter:hue-rotate(0deg);
    }
    100%{
        filter:hue-rotate(12deg);
    }
}
@keyframes scorePulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(.96);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes borderPulse{
    0%{
        border-color:rgba(37,99,235,.10);
    }
    50%{
        border-color:rgba(96,165,250,.22);
    }
    100%{
        border-color:rgba(37,99,235,.10);
    }
}
@keyframes cardFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}
@keyframes cardFloat2{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(6px);
    }
}

/*================================== Hover Enhancement ==================================*/
.dashboard-card:hover .metric{
    border-color:#dbeafe;
}
.dashboard-card:hover .dashboard-chart{
    border-color:#bfdbfe;
}
.dashboard-card:hover .score-content h3{
    color:#2563eb;
}
   /*================================== Responsive ==================================*/
@media(max-width:991px){
    .dashboard-particles{
        display:none;
    }
}
@media(max-width:767px){
    .loading-shimmer,
    .mouse-glow,
    .dashboard-highlight{
        display:none;
    }
    .chart-floating,
    .live-status{
        animation:none;
    }
}
@media(max-width:480px){
    .dashboard-card{
        border-radius:24px;
    }
}

/*================================== 2nd Section CSS ==================================*/
.audit-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:radial-gradient(circle at top left,rgba(37,99,235,.08) 0%,transparent 35%),radial-gradient(circle at bottom right,rgba(96,165,250,.10) 0%,transparent 40%),linear-gradient(180deg,#ffffff 0%,#f8fbff 50%,#ffffff 100%);
}
.audit-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-320px;
    left:-260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.12),transparent);
    filter:blur(30px);
    pointer-events:none;
}
.audit-section::after{
    content:"";
    position:absolute;
    width:580px;
    height:580px;
    right:-220px;
    bottom:-250px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.12),transparent);
    filter:blur(35px);
    pointer-events:none;
}
.audit-section .container{
    position:relative;
    z-index:5;
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}
.audit-section .section-title{
    max-width:900px;
    margin:0 auto 80px;
    text-align:center;
}
.audit-section .section-title span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border-radius:999px;
    background:#eff6ff;
    border:1px solid #dbeafe;
    color:#2563eb;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}
.audit-section .section-title h2{
    margin:26px 0;
    font-size:58px;
    line-height:1.12;
    font-weight:800;
    color:#0f172a;
    letter-spacing:-1.3px;
}
.audit-section .section-title p{
    max-width:820px;
    margin:auto;
    font-size:18px;
    line-height:1.9;
    color:#64748b;
}
.audit-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:stretch;
    position:relative;
}
.audit-grid::before{
    content:"";
    position:absolute;
    inset:-30px;
    border-radius:40px;
    border:1px dashed rgba(37,99,235,.06);
    pointer-events:none;
}
.audit-grid-glow{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.06),transparent 70%);
    filter:blur(60px);
    pointer-events:none;
    z-index:-1;
}
@media(max-width:1200px){
    .audit-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .audit-section .section-title h2{
        font-size:48px;
    }
}
@media(max-width:991px){
    .audit-section{
        padding:90px 0;
    }
    .audit-section .section-title{
        margin-bottom:60px;
    }
    .audit-section .section-title h2{
        font-size:42px;
    }
    .audit-section .section-title p{
        font-size:16px;
    }
}
@media(max-width:767px){
    .audit-section{
        padding:70px 0;
    }
    .audit-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .audit-section .section-title{
        margin-bottom:40px;
    }
    .audit-section .section-title span{
        padding:10px 18px;
        font-size:11px;
    }
    .audit-section .section-title h2{
        font-size:34px;
        margin:20px 0;
    }
    .audit-section .section-title p{
        font-size:15px;
        line-height:1.8;
    }
}
@media(max-width:480px){
    .audit-section .container{
        padding:0 15px;
    }
    .audit-section .section-title h2{
        font-size:28px;
        line-height:1.2;
    }
    .audit-section .section-title p{
        font-size:14px;
    }
    .audit-grid::before{
        display:none;
    }
}

/*================================== Audit Card ==================================*/
.audit-card{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:28px;
    padding:38px;
    transition:.45s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:330px;
    z-index:2;
}
.audit-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#2563eb,#3b82f6,#60a5fa);
    transform:scaleX(0);
    transform-origin:left;
    transition:.45s;
}
.audit-card::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.10),transparent 70%);
    opacity:0;
    transition:.45s;
}
.audit-card:hover{
    transform:translateY(-12px);
    border-color:#2563eb;
    box-shadow:0 28px 70px rgba(37,99,235,.12);
}
.audit-card:hover::before{
    transform:scaleX(1);
}
.audit-card:hover::after{
    opacity:1;
}
.audit-number{
    width:68px;
    height:68px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:#ffffff;
    font-size:20px;
    font-weight:800;
    margin-bottom:28px;
    box-shadow:0 15px 30px rgba(37,99,235,.18);
    transition:.4s;
}
.audit-card:hover .audit-number{
    transform:rotate(-6deg) scale(1.08);
}

/*================================== Title ==================================*/
.audit-card h3{
    font-size:25px;
    line-height:1.35;
    color:#0f172a;
    font-weight:800;
    margin-bottom:18px;
    transition:.35s;
}
.audit-card:hover h3{
    color:#2563eb;
}

/*================================== Description ==================================*/
.audit-card p{
    color:#64748b;
    font-size:15px;
    line-height:1.9;
    margin-bottom:22px;
}

/*================================== Divider ==================================*/
.audit-divider{
    width:70px;
    height:4px;
    border-radius:50px;
    background:linear-gradient(90deg,#2563eb,#60a5fa);
    margin-top:auto;
    transition:.35s;
}
.audit-card:hover .audit-divider{
    width:110px;
}

/*================================== Footer Label ==================================*/
.audit-footer{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    color:#2563eb;
    font-size:14px;
    font-weight:700;
}
.audit-footer i{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#eff6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-style:normal;
}

/*================================== Card Content ==================================*/
.audit-card-content{
    flex:1;
}

/*================================== Hover Content Move ==================================*/
.audit-card:hover .audit-card-content{
    transform:translateY(-2px);
    transition:.35s;
}
/*================================== Responsive ==================================*/
@media(max-width:1200px){
    .audit-card{
        min-height:310px;
    }
}
@media(max-width:991px){
    .audit-card{
        padding:32px;
    }
}
@media(max-width:767px){
    .audit-card{
        padding:26px;
        min-height:auto;
    }
    .audit-number{
        width:60px;
        height:60px;
        font-size:18px;
        margin-bottom:22px;
    }
    .audit-card h3{
        font-size:22px;
    }
    .audit-card p{
        font-size:14px;
    }
}
@media(max-width:480px){
    .audit-card{
        border-radius:22px;
        padding:22px;
    }
    .audit-number{
        width:54px;
        height:54px;
        border-radius:16px;
    }
    .audit-card h3{
        font-size:20px;
    }
}

/*================================== Performance Audit Card ==================================*/
/*================================== Glass Base ==================================*/
.audit-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,252,255,.94));
}

/*================================== Premium Border Layer ==================================*/
.audit-card .glass-border{
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:1px;
    pointer-events:none;
    opacity:0;
    transition:.45s ease;
    background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(96,165,250,.45),rgba(37,99,235,.22),rgba(255,255,255,.90));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}
.audit-card:hover .glass-border{
    opacity:1;
}

/*================================== Background Glow ==================================*/
.audit-card .card-glow{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:28px;
    z-index:-1;
    pointer-events:none;
}
.audit-card .card-glow::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    left:-110px;
    top:-110px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.13),transparent 72%);
    filter:blur(12px);
    animation:auditGlowOne 8s ease infinite;
}
.audit-card .card-glow::after{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-90px;
    bottom:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.14),transparent 72%);
    filter:blur(18px);
    animation:auditGlowTwo 10s ease infinite;
}

/*================================== Top Reflection ==================================*/
.audit-card .glass-reflection{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:90px;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15),transparent);
    pointer-events:none;
}

/*================================== Corner Blur ==================================*/
.audit-card .corner-blur{
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.45),transparent);
    filter:blur(24px);
    opacity:.55;
    pointer-events:none;
}
.audit-card .corner-blur.left{
    top:-35px;
    left:-35px;
}
.audit-card .corner-blur.right{
    bottom:-35px;
    right:-35px;
}

/*================================== Bottom Shadow ==================================*/
.audit-card .card-shadow{
    position:absolute;
    left:50%;
    bottom:-60px;
    transform:translateX(-50%);
    width:85%;
    height:80px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(37,99,235,.14),transparent);
    filter:blur(24px);
    opacity:.8;
    transition:.35s;
    pointer-events:none;
}
.audit-card:hover .card-shadow{
    width:92%;
    opacity:1;
}

/*================================== Light Overlay ==================================*/
.audit-card .light-overlay{
    position:absolute;
    inset:0;
    border-radius:28px;
    background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 40%);
    pointer-events:none;
    opacity:.9;
}

/*================================== Glow Animation ==================================*/
@keyframes auditGlowOne{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(18px,16px);
    }
    100%{
        transform:translate(0,0);
    }
}
@keyframes auditGlowTwo{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-18px,-18px);
    }
    100%{
        transform:translate(0,0);
    }
}

/*================================== Responsive ==================================*/
@media(max-width:767px){
    .audit-card .glass-reflection{
        height:60px;
    }
    .audit-card .corner-blur{
        display:none;
    }
}
@media(max-width:480px){
    .audit-card .card-shadow{
        display:none;
    }
}
/*================================== Performance Audit Card ==================================*/
/*================================== Main Shine Effect ==================================*/
.audit-card{
    position:relative;
    overflow:hidden;
}
.audit-card .card-shine{
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:28px;
    overflow:hidden;
    z-index:4;
}

/*================================== Moving Shine ==================================*/
.audit-card .card-shine::before{
    content:"";
    position:absolute;
    top:-20%;
    left:-170%;
    width:70%;
    height:140%;
    transform:rotate(22deg);
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,.65),rgba(255,255,255,.08),rgba(255,255,255,0));
    transition:1.3s cubic-bezier(.22,.61,.36,1);
    opacity:.85;
}
.audit-card:hover .card-shine::before{
    left:170%;
}

/*================================== Top Sweep ==================================*/
.audit-card .card-shine::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08),transparent);
    opacity:.65;
}

/*================================== Hover Light ==================================*/
.audit-card .hover-light{
    position:absolute;
    inset:0;
    border-radius:28px;
    overflow:hidden;
    pointer-events:none;
    z-index:3;
}
.audit-card .hover-light::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    top:-120px;
    left:-120px;
    background:radial-gradient(circle,rgba(255,255,255,.38),rgba(255,255,255,.10),transparent 72%);
    filter:blur(14px);
    opacity:0;
    transition:.45s;
}
.audit-card:hover .hover-light::before{
    opacity:1;
    transform:translate(55px,55px);
}

/*================================== Side Highlight ==================================*/
.audit-card .side-highlight{
    position:absolute;
    top:0;
    right:0;
    width:8px;
    height:100%;
    background:linear-gradient(180deg,rgba(96,165,250,.60),rgba(37,99,235,.10),transparent);
    opacity:0;
    transition:.45s;
}
.audit-card:hover .side-highlight{
    opacity:1;
}

/*================================== Bottom Highlight ==================================*/
.audit-card .bottom-highlight{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:8px;
    background:linear-gradient(90deg,transparent,rgba(96,165,250,.40),rgba(37,99,235,.25),transparent);
    opacity:0;
    transition:.45s;
}
.audit-card:hover .bottom-highlight{
    opacity:1;
}

/*================================== Icon Lift ==================================*/
.audit-card:hover .audit-number{
    transform:translateY(-6px) rotate(-8deg) scale(1.08);
}

/*================================== Title Transition ==================================*/
.audit-card h3{
    transition:color .35s,transform .35s;
}
.audit-card:hover h3{
    transform:translateX(4px);
}

/*================================== Description Transition ==================================*/
.audit-card p{
    transition:color .35s,transform .35s;
}
.audit-card:hover p{
    transform:translateY(-2px);
}

/*================================== Divider Animation ==================================*/
.audit-divider{
    overflow:hidden;
    position:relative;
}
.audit-divider::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
    left:-120%;
}
.audit-card:hover .audit-divider::before{
    animation:dividerShine 1.2s ease;
}

/*================================== Keyframes ==================================*/
@keyframes dividerShine{
    from{
        left:-120%;
    }
    to{
        left:120%;
    }
}

/*================================== Responsive ==================================*/
@media(max-width:767px){
    .audit-card .card-shine::before{
        display:none;
    }
    .audit-card .hover-light{
        display:none;
    }
}
@media(max-width:480px){
    .audit-card .side-highlight,
    .audit-card .bottom-highlight{
        display:none;
    }
}/*======================================== Optimization Engine ========================================*/
.optimization-engine{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:radial-gradient(circle at 0% 0%,rgba(20,184,255,.18),transparent 35%),radial-gradient(circle at 100% 100%,rgba(10,99,255,.15),transparent 40%),linear-gradient(135deg,#ffffff 0%,#f8fbff 35%,#eef7ff 70%,#ffffff 100%);
    z-index:1;
}
.optimization-engine::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    top:-220px;
    left:-180px;
    background:radial-gradient(circle,rgba(20,184,255,.25),transparent 70%);
    filter:blur(45px);
    z-index:-1;
}
.optimization-engine::after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    right:-180px;
    bottom:-180px;
    background:radial-gradient(circle,rgba(10,99,255,.18),transparent 70%);
    filter:blur(50px);
    z-index:-1;
}

/*======================================== Container ========================================*/
.optimization-engine .container{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 20px;
}

/*======================================== Wrapper ========================================*/
.optimization-wrapper{
    display:grid;
    grid-template-columns:520px 1fr;
    align-items:center;
    gap:70px;
}

/*======================================== Left Content ========================================*/
.optimization-left{
    position:relative;
    z-index:2;
}

/*======================================== Section Tag ========================================*/
.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 24px;
    border-radius:50px;
    background:linear-gradient(135deg,#14b8ff,#0a63ff);
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    box-shadow:0 12px 30px rgba(10,99,255,.25);
    margin-bottom:30px;
}
.section-tag::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ffffff;
}

/*======================================== Heading ========================================*/
.optimization-left h2{
    font-size:56px;
    line-height:1.08;
    font-weight:800;
    color:#081b4b;
    margin-bottom:30px;
    letter-spacing:-1px;
}
.optimization-left h2 span{
    display:block;
    background:linear-gradient(135deg,#14b8ff,#0a63ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/*======================================== Paragraph ========================================*/
.optimization-left p{
    font-size:18px;
    line-height:1.9;
    color:#5d6c88;
    margin-bottom:35px;
    max-width:520px;
}

/*======================================== Feature List ========================================*/
.optimization-list{
    list-style:none;
    margin:0;
    padding:0;
}
.optimization-list li{
    position:relative;
    display:flex;
    align-items:center;
    font-size:17px;
    color:#203354;
    font-weight:600;
    margin-bottom:18px;
    padding-left:42px;
}
.optimization-list li:last-child{
    margin-bottom:40px;
}
.optimization-list li::before{
    content:"";
    position:absolute;
    left:0;
    width:24px;
    height:24px;
    border-radius:50%;
    background:linear-gradient(135deg,#14b8ff,#0a63ff);
    box-shadow:0 8px 18px rgba(10,99,255,.25);
}
.optimization-list li::after{
    content:"✓";
    position:absolute;
    left:7px;
    top:2px;
    color:#ffffff;
    font-size:13px;
    font-weight:700;
}

/*======================================== Button ========================================*/
.primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px 42px;
    border-radius:60px;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    color:#ffffff;
    background:linear-gradient(135deg,#14b8ff,#0a63ff);
    box-shadow:0 18px 40px rgba(10,99,255,.30);
    transition:.35s;
}
.primary-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 60px rgba(10,99,255,.40);
}
.primary-btn::after{
    content:"→";
    font-size:18px;
    transition:.35s;
}
.primary-btn:hover::after{
    transform:translateX(6px);
}

/*======================================== Right Area ========================================*/
.optimization-right{
    position:relative;
    z-index:2;
}

/*======================================== Engine Grid ========================================*/
.engine-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(280px,1fr));
    gap:28px;
    position:relative;
    z-index:2;
}

/*======================================== Engine Card ========================================*/
.engine-card{
    position:relative;
    overflow:hidden;
    padding:35px 32px;
    min-height:250px;
    border-radius:24px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(20,184,255,.18);
    box-shadow:0 20px 45px rgba(8,27,75,.08),inset 0 1px rgba(255,255,255,.85);
    transition:all .45s ease;
    cursor:pointer;
}
.engine-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#14b8ff,#0a63ff);
}
.engine-card::after{
    content:"";
    position:absolute;
    top:-180%;
    left:-60%;
    width:70%;
    height:420%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);
    transform:rotate(28deg);
    transition:1s;
}
.engine-card:hover::after{
    left:170%;
}
.engine-card span::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,184,255,.20),transparent 70%);
    top:-45px;
    right:-45px;
    z-index:-1;
}
.engine-card:hover{
    transform:translateY(-10px);
    border-color:#14b8ff;
    box-shadow:0 35px 80px rgba(10,99,255,.18);
}
.engine-card span{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg,#14b8ff,#0a63ff);
    color:#fff;
    font-size:22px;
    font-weight:800;
    margin-bottom:25px;
    box-shadow:0 18px 35px rgba(10,99,255,.30);
}
.engine-card h3{
    font-size:24px;
    line-height:1.35;
    font-weight:700;
    color:#081b4b;
    margin-bottom:18px;
    transition:.35s;
}
.engine-card:hover h3{
    color:#0a63ff;
}
.engine-card p{
    font-size:16px;
    line-height:1.9;
    color:#64748b;
    margin:0;
}
/*======================================== Card Icon Glow ========================================*/
.engine-card .icon-bg{
    position:absolute;
    right:-40px;
    bottom:-40px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,184,255,.18),transparent 70%);
    pointer-events:none;
}

/*======================================== Card Border Animation ========================================*/
.engine-card .border-animation{
    position:absolute;
    inset:0;
    border-radius:24px;
    padding:1px;
    background:linear-gradient(135deg,transparent,rgba(20,184,255,.45),transparent);
    opacity:0;
    transition:.45s;
    pointer-events:none;
}
.engine-card:hover .border-animation{
    opacity:1;
}

/*======================================== Active Card ========================================*/
.engine-card.active{
    background:linear-gradient(135deg,#0a63ff,#14b8ff);
}
.engine-card.active h3,
.engine-card.active p,
.engine-card.active span{
    color:#fff;
}

/*======================================== Card Animation ========================================*/
.engine-card{
    animation:cardFade .8s ease both;
}
@keyframes cardFade{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*======================================== Stagger Animation ========================================*/
.engine-card:nth-child(2){
    animation-delay:.1s;
}
.engine-card:nth-child(3){
    animation-delay:.2s;
}
.engine-card:nth-child(4){
    animation-delay:.3s;
}
.engine-card:nth-child(5){
    animation-delay:.4s;
}
.engine-card:nth-child(6){
    animation-delay:.5s;
}
.engine-card:nth-child(7){
    animation-delay:.6s;
}
.engine-card:nth-child(8){
    animation-delay:.7s;
}
/*======================================== Premium Floating Shapes ========================================*/
.optimization-engine .shape-1,
.optimization-engine .shape-2,
.optimization-engine .shape-3{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}
.optimization-engine .shape-1{
    width:220px;
    height:220px;
    top:8%;
    right:5%;
    background:radial-gradient(circle,#14b8ff22 0%,transparent 70%);
    animation:floatShape1 8s ease-in-out infinite;
}
.optimization-engine .shape-2{
    width:170px;
    height:170px;
    bottom:12%;
    left:4%;
    background:radial-gradient(circle,#0a63ff18 0%,transparent 70%);
    animation:floatShape2 10s ease-in-out infinite;
}
.optimization-engine .shape-3{
    width:120px;
    height:120px;
    top:45%;
    left:48%;
    background:radial-gradient(circle,#14b8ff20 0%,transparent 70%);
    animation:floatShape3 7s ease-in-out infinite;
}

/*======================================== Float Animation ========================================*/
@keyframes floatShape1{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
}
@keyframes floatShape2{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(25px);
    }
}
@keyframes floatShape3{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-18px) scale(1.08);
    }
}
/*========================================== Large Desktop ==========================================*/
@media(max-width:1400px){
    .optimization-wrapper{
        grid-template-columns:470px 1fr;
        gap:50px;
    }
    .optimization-left h2{
        font-size:48px;
    }
    .engine-grid{
        gap:24px;
    }
}

/*========================================== Laptop ==========================================*/
@media(max-width:1200px){
    .optimization-engine{
        padding:100px 0;
    }
    .optimization-wrapper{
        grid-template-columns:1fr;
        gap:60px;
    }
    .optimization-left{
        text-align:center;
        max-width:850px;
        margin:auto;
    }
    .optimization-left p{
        margin:0 auto 35px;
    }
    .optimization-list{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:18px;
        margin-bottom:40px;
    }
    .optimization-list li{
        margin:0;
    }
    .primary-btn{
        margin:auto;
    }
    .engine-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/*========================================== Tablet ==========================================*/
@media(max-width:991px){
    .optimization-engine{
        padding:80px 0;
    }
    .optimization-left h2{
        font-size:42px;
    }
    .optimization-left p{
        font-size:17px;
    }
    .engine-grid{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    .engine-card{
        padding:28px;
        min-height:auto;
    }
    .engine-card h3{
        font-size:21px;
    }
    .engine-card p{
        font-size:15px;
    }
}

/*========================================== iPad ==========================================*/
@media(max-width:768px){
    .optimization-wrapper{
        gap:45px;
    }
    .optimization-left{
        text-align:center;
    }
    .optimization-left h2{
        font-size:36px;
    }
    .optimization-left p{
        font-size:16px;
        line-height:1.8;
    }
    .optimization-list{
        grid-template-columns:1fr;
    }
    .engine-grid{
        grid-template-columns:1fr;
    }
    .engine-card{
        padding:30px;
    }
    .section-tag{
        font-size:12px;
        padding:10px 20px;
    }
    .primary-btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }
}

/*========================================== Mobile ==========================================*/
@media(max-width:576px){
    .optimization-engine{
        padding:65px 0;
    }
    .optimization-engine .container{
        padding:0 18px;
    }
    .optimization-left h2{
        font-size:31px;
        line-height:1.2;
    }
    .optimization-left p{
        font-size:15px;
    }
    .section-tag{
        font-size:11px;
        letter-spacing:1px;
    }
    .engine-card{
        padding:25px;
        border-radius:20px;
    }
    .engine-card span{
        width:56px;
        height:56px;
        font-size:20px;
        margin-bottom:18px;
    }
    .engine-card h3{
        font-size:20px;
    }
    .engine-card p{
        font-size:15px;
        line-height:1.7;
    }
    .primary-btn{
        padding:16px 28px;
        font-size:15px;
    }
}

/*========================================== Small Mobile ==========================================*/
@media(max-width:420px){
    .optimization-engine{
        padding:55px 0;
    }
    .optimization-left h2{
        font-size:27px;
    }
    .optimization-left p{
        font-size:14px;
    }
    .engine-card{
        padding:22px;
    }
    .engine-card h3{
        font-size:18px;
    }
    .engine-card p{
        font-size:14px;
    }
    .primary-btn{
        width:100%;
        font-size:14px;
        padding:15px 20px;
    }
}

/*========================================== Ultra Small ==========================================*/
@media(max-width:360px){
    .optimization-left h2{
        font-size:24px;
    }
    .section-tag{
        font-size:10px;
        padding:9px 16px;
    }
    .engine-card{
        padding:20px;
    }
    .engine-card span{
        width:50px;
        height:50px;
        font-size:18px;
    }
    .engine-card h3{
        font-size:17px;
    }
    .engine-card p{
        font-size:13px;
    }
}

/*========================================== Hover Improvement ==========================================*/
@media(hover:hover){
    .engine-card:hover{
        transform:translateY(-12px) scale(1.02);
    }
    .primary-btn:hover{
        transform:translateY(-4px);
    }
}

/*========================================== Reduce Motion ==========================================*/
@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}
/*========================================== Tablet ==========================================*/
@media(max-width:991px){
    .optimization-engine{
        padding:70px 0;
    }
    .optimization-wrapper{
        display:flex;
        flex-direction:column;
        gap:45px;
    }
    .optimization-left,
    .optimization-right{
        width:100%;
        max-width:100%;
    }
    .optimization-left{
        text-align:center;
    }
    .optimization-left h2{
        font-size:38px;
        line-height:1.2;
        margin-bottom:20px;
    }
    .optimization-left p{
        max-width:100%;
        font-size:16px;
        line-height:1.8;
        margin-bottom:30px;
    }
    .optimization-list{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
    .primary-btn{
        margin:25px auto 0;
    }
    .engine-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }
    .engine-card{
        min-height:auto;
        padding:28px;
    }
}

/*========================================== Mobile ==========================================*/
@media(max-width:767px){
    .optimization-engine{
        padding:60px 0;
    }
    .optimization-engine .container{
        padding:0 18px;
    }
    .optimization-wrapper{
        gap:35px;
    }
    .section-tag{
        font-size:11px;
        padding:10px 18px;
    }
    .optimization-left h2{
        font-size:30px;
        line-height:1.25;
    }
    .optimization-left p{
        font-size:15px;
    }
    .optimization-list{
        gap:12px;
    }
    .optimization-list li{
        font-size:15px;
        padding-left:34px;
    }
    .optimization-list li::before{
        width:20px;
        height:20px;
    }
    .optimization-list li::after{
        left:6px;
        top:1px;
        font-size:11px;
    }
    .primary-btn{
        width:100%;
        max-width:100%;
        padding:16px;
        font-size:15px;
    }
    .engine-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .engine-card{
        padding:24px;
        border-radius:20px;
    }
    .engine-card span{
        width:54px;
        height:54px;
        font-size:20px;
        margin-bottom:18px;
    }
    .engine-card h3{
        font-size:20px;
        line-height:1.4;
    }
    .engine-card p{
        font-size:14px;
        line-height:1.8;
    }
}
    /*==========================================
SMALL MOBILE
==========================================*/

    @media (max-width:480px) {

        .optimization-engine {
            padding: 50px 0;
        }

        .optimization-engine .container {
            padding: 0 15px;
        }

        .optimization-left h2 {
            font-size: 26px;
        }

        .optimization-left p {
            font-size: 14px;
        }

        .engine-card {
            padding: 20px;
        }

        .engine-card span {
            width: 50px;
            height: 50px;
            font-size: 18px;
        }

        .engine-card h3 {
            font-size: 18px;
        }

        .engine-card p {
            font-size: 13px;
            line-height: 1.7;
        }

        .primary-btn {
            padding: 15px;
            font-size: 14px;
        }

    }


    /*=========================================================
MANUAL OPTIMIZATION
PART 1
=========================================================*/

    .manual-optimization {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 255, .15), transparent 35%),
            radial-gradient(circle at bottom right, rgba(10, 99, 255, .10), transparent 40%),
            linear-gradient(135deg, #ffffff 0%, #f7fbff 40%, #edf6ff 75%, #ffffff 100%);
        z-index: 1;
    }

    .manual-optimization::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        top: -220px;
        left: -220px;
        background: radial-gradient(circle, rgba(20, 184, 255, .28), transparent 70%);
        filter: blur(55px);
        z-index: -1;
    }

    .manual-optimization::after {
        content: "";
        position: absolute;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        right: -180px;
        bottom: -180px;
        background: radial-gradient(circle, rgba(10, 99, 255, .20), transparent 70%);
        filter: blur(60px);
        z-index: -1;
    }

    /*=========================================
CONTAINER
=========================================*/

    .manual-optimization .container {
        width: 100%;
        max-width: 1400px;
        margin: auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    /*=========================================
SECTION TITLE
=========================================*/

    .section-title {
        max-width: 860px;
        margin: 0 auto 70px;
        text-align: center;
    }

    .section-title span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 50px;
        background: linear-gradient(135deg, #14b8ff, #0a63ff);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        box-shadow: 0 15px 35px rgba(10, 99, 255, .20);
        margin-bottom: 28px;
    }

    .section-title span::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
    }

    .section-title h2 {
        font-size: 56px;
        line-height: 1.12;
        font-weight: 800;
        color: #081b4b;
        margin-bottom: 26px;
        letter-spacing: -1px;
    }

    .section-title p {
        font-size: 18px;
        line-height: 1.9;
        color: #64748b;
        max-width: 760px;
        margin: auto;
    }

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

    .manual-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 20px;
    }

    /*=========================================
BOTTOM NOTE
=========================================*/

    .manual-note {
        position: relative;
        margin-top: 90px;
        text-align: center;
        padding: 60px;
        border-radius: 32px;
        overflow: hidden;
        background: linear-gradient(135deg, #0a63ff, #14b8ff);
        box-shadow: 0 35px 80px rgba(10, 99, 255, .25);
    }

    .manual-note::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        top: -120px;
        left: -120px;
        background: rgba(255, 255, 255, .10);
    }

    .manual-note::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -80px;
        bottom: -80px;
        background: rgba(255, 255, 255, .08);
    }

    .manual-note>* {
        position: relative;
        z-index: 2;
    }

    .manual-note h3 {
        color: #fff;
        font-size: 38px;
        line-height: 1.2;
        margin-bottom: 20px;
        font-weight: 800;
    }

    .manual-note p {
        max-width: 760px;
        margin: 0 auto 35px;
        color: rgba(255, 255, 255, .92);
        font-size: 17px;
        line-height: 1.9;
    }

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

    .manual-note .primary-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 18px 42px;
        border-radius: 60px;
        background: #fff;
        color: #0a63ff;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        transition: .35s ease;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    }

    .manual-note .primary-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
    }

    .manual-note .primary-btn::after {
        content: "→";
        transition: .35s;
    }

    .manual-note .primary-btn:hover::after {
        transform: translateX(6px);
    }

    /*=========================================================
MANUAL OPTIMIZATION
PART 2 - PREMIUM CARDS
=========================================================*/

    .manual-card {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 38px 34px;
        min-height: 300px;
        border-radius: 28px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 255, .15);
        box-shadow:
            0 18px 45px rgba(8, 27, 75, .08),
            inset 0 1px rgba(255, 255, 255, .9);
        transition: .45s ease;
        z-index: 1;
    }

    /*=========================================
TOP GRADIENT BAR
=========================================*/

    .manual-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,
                #14b8ff,
                #0a63ff);
    }

    /*=========================================
SHINE EFFECT
=========================================*/

    .manual-card::after {
        content: "";
        position: absolute;
        top: -180%;
        left: -70%;
        width: 70%;
        height: 420%;
        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, .65),
                transparent);
        transform: rotate(28deg);
        transition: 1s;
    }

    .manual-card:hover::after {
        left: 170%;
    }

    /*=========================================
HOVER
=========================================*/

    .manual-card:hover {
        transform: translateY(-12px);
        border-color: #14b8ff;
        box-shadow:
            0 30px 80px rgba(10, 99, 255, .16);
    }

    /*=========================================
NUMBER
=========================================*/

    .manual-number {
        width: 68px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        box-shadow:
            0 18px 35px rgba(10, 99, 255, .28);
        position: relative;
    }

    .manual-number::before {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .18),
                transparent 70%);
        z-index: -1;
    }

    /*=========================================
TITLE
=========================================*/

    .manual-card h3 {
        font-size: 24px;
        font-weight: 700;
        color: #081b4b;
        line-height: 1.35;
        margin-bottom: 18px;
        transition: .35s;
    }

    .manual-card:hover h3 {
        color: #0a63ff;
    }

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

    .manual-card p {
        margin: 0;
        color: #64748b;
        font-size: 16px;
        line-height: 1.9;
    }

    /*=========================================
BACKGROUND GLOW
=========================================*/

    .manual-card .card-glow {
        position: absolute;
        right: -60px;
        bottom: -60px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .14),
                transparent 70%);
        pointer-events: none;
    }

    /*=========================================
BORDER LIGHT
=========================================*/

    .manual-card .border-light {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 1px;
        background: linear-gradient(135deg,
                transparent,
                rgba(20, 184, 255, .45),
                transparent);
        opacity: 0;
        transition: .45s;
        pointer-events: none;
    }

    .manual-card:hover .border-light {
        opacity: 1;
    }

    /*=========================================
ICON AREA
=========================================*/

    .manual-card .card-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 22px;
        font-size: 26px;
    }

    /*=========================================
ANIMATION
=========================================*/

    .manual-card {
        animation: manualFade .8s ease both;
    }

    @keyframes manualFade {

        from {
            opacity: 0;
            transform: translateY(35px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }

    /*=========================================
STAGGER EFFECT
=========================================*/

    .manual-card:nth-child(2) {
        animation-delay: .1s;
    }

    .manual-card:nth-child(3) {
        animation-delay: .2s;
    }

    .manual-card:nth-child(4) {
        animation-delay: .3s;
    }

    .manual-card:nth-child(5) {
        animation-delay: .4s;
    }

    .manual-card:nth-child(6) {
        animation-delay: .5s;
    }

    .manual-card:nth-child(7) {
        animation-delay: .6s;
    }

    .manual-card:nth-child(8) {
        animation-delay: .7s;
    }

    .manual-card:nth-child(9) {
        animation-delay: .8s;
    }

    /*=========================================================
MANUAL OPTIMIZATION
PART 3
RESPONSIVE + PREMIUM EFFECTS
=========================================================*/

    /*=========================================
FLOATING BACKGROUND
=========================================*/

    .manual-optimization .shape-one,
    .manual-optimization .shape-two,
    .manual-optimization .shape-three {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .manual-optimization .shape-one {
        width: 220px;
        height: 220px;
        top: 6%;
        right: 4%;
        background: radial-gradient(circle, #14b8ff22 0%, transparent 70%);
        animation: floatOne 9s ease-in-out infinite;
    }

    .manual-optimization .shape-two {
        width: 180px;
        height: 180px;
        left: 3%;
        bottom: 8%;
        background: radial-gradient(circle, #0a63ff18 0%, transparent 70%);
        animation: floatTwo 10s ease-in-out infinite;
    }

    .manual-optimization .shape-three {
        width: 120px;
        height: 120px;
        top: 50%;
        left: 48%;
        background: radial-gradient(circle, #14b8ff18 0%, transparent 70%);
        animation: floatThree 8s ease-in-out infinite;
    }

   /*========================================= Float Animation =========================================*/
@keyframes floatOne{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-28px);
    }
}
@keyframes floatTwo{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(22px);
    }
}
@keyframes floatThree{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}

/*========================================= Card Hover =========================================*/
.manual-card:hover{
    transform:translateY(-12px) scale(1.02);
}
.manual-card:hover .manual-number{
    transform:rotate(360deg);
    transition:1s;
}

/*========================================= Section Spacing =========================================*/
.manual-grid{
    align-items:stretch;
}
.manual-card{
    height:100%;
}

/*========================================= Large Desktop =========================================*/
@media(max-width:1400px){
    .manual-grid{
        grid-template-columns:repeat(3,1fr);
        gap:24px;
    }
}

/*========================================= Laptop =========================================*/
@media(max-width:1200px){
    .manual-optimization{
        padding:100px 0;
    }
    .section-title h2{
        font-size:46px;
    }
    .manual-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .manual-note{
        padding:50px;
    }
}

/*========================================= Tablet =========================================*/
@media(max-width:991px){
    .manual-optimization{
        padding:80px 0;
    }
    .section-title{
        margin-bottom:50px;
    }
    .section-title h2{
        font-size:38px;
    }
    .section-title p{
        font-size:16px;
    }
    .manual-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }
    .manual-card{
        padding:28px;
        min-height:auto;
    }
    .manual-card h3{
        font-size:21px;
    }
    .manual-card p{
        font-size:15px;
    }
    .manual-note{
        padding:45px 30px;
        margin-top:70px;
    }
    .manual-note h3{
        font-size:30px;
    }
}

/*========================================= Mobile =========================================*/
@media(max-width:767px){
    .manual-optimization{
        padding:65px 0;
    }
    .manual-optimization .container{
        padding:0 18px;
    }
    .section-title{
        margin-bottom:40px;
    }
    .section-title span{
        font-size:11px;
        padding:10px 18px;
    }
    .section-title h2{
        font-size:30px;
        line-height:1.25;
    }
    .section-title p{
        font-size:15px;
        line-height:1.8;
    }
    .manual-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .manual-card{
        padding:24px;
        border-radius:20px;
    }
    .manual-number{
        width:56px;
        height:56px;
        font-size:20px;
        margin-bottom:20px;
    }
    .manual-card h3{
        font-size:20px;
    }
    .manual-card p{
        font-size:14px;
        line-height:1.8;
    }
    .manual-note{
        padding:35px 25px;
        border-radius:22px;
    }
    .manual-note h3{
        font-size:25px;
    }
    .manual-note p{
        font-size:15px;
        line-height:1.8;
    }
    .manual-note .primary-btn{
        width:100%;
        padding:16px;
    }
}

   /*========================================= Small Mobile =========================================*/
@media(max-width:480px){
    .manual-optimization{
        padding:55px 0;
    }
    .manual-optimization .container{
        padding:0 15px;
    }
    .section-title h2{
        font-size:26px;
    }
    .section-title p{
        font-size:14px;
    }
    .manual-card{
        padding:20px;
    }
    .manual-number{
        width:50px;
        height:50px;
        font-size:18px;
    }
    .manual-card h3{
        font-size:18px;
    }
    .manual-card p{
        font-size:13px;
    }
    .manual-note{
        padding:30px 20px;
    }
    .manual-note h3{
        font-size:22px;
    }
    .manual-note p{
        font-size:14px;
    }
    .manual-note .primary-btn{
        font-size:14px;
        padding:15px;
    }
}

/*========================================= Reduce Motion =========================================*/
@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}

    /*=========================================================
SUPPORTED PLATFORMS
PART 1
=========================================================*/

    .supported-platforms {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 255, .16), transparent 35%),
            radial-gradient(circle at bottom right, rgba(10, 99, 255, .10), transparent 42%),
            linear-gradient(135deg, #ffffff 0%, #f8fbff 40%, #eef7ff 75%, #ffffff 100%);
        z-index: 1;
    }

    /*=========================================
BACKGROUND GLOW
=========================================*/

    .supported-platforms::before {
        content: "";
        position: absolute;
        top: -220px;
        left: -220px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .25),
                transparent 70%);
        filter: blur(55px);
        z-index: -1;
    }

    .supported-platforms::after {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -180px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(10, 99, 255, .18),
                transparent 70%);
        filter: blur(60px);
        z-index: -1;
    }

    /*=========================================
CONTAINER
=========================================*/

    .supported-platforms .container {
        width: 100%;
        max-width: 1400px;
        margin: auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    /*=========================================
SECTION TITLE
=========================================*/

    .supported-platforms .section-title {
        max-width: 850px;
        margin: 0 auto 70px;
        text-align: center;
    }

    .supported-platforms .section-title span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 50px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        box-shadow: 0 15px 35px rgba(10, 99, 255, .25);
        margin-bottom: 28px;
    }

    .supported-platforms .section-title span::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
    }

    .supported-platforms .section-title h2 {
        font-size: 56px;
        line-height: 1.1;
        font-weight: 800;
        color: #081b4b;
        margin-bottom: 25px;
        letter-spacing: -1px;
    }

    .supported-platforms .section-title p {
        max-width: 760px;
        margin: auto;
        font-size: 18px;
        line-height: 1.9;
        color: #64748b;
    }

    /*=========================================
PLATFORM GRID
=========================================*/

    .platform-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
        align-items: stretch;
    }

    /* Equal Height */

    .platform-grid .platform-card {
        height: 100%;
    }

    /*=========================================
GRID ALIGNMENT
=========================================*/

    .platform-grid>* {
        display: flex;
    }

    /*=========================================
PREMIUM SPACING
=========================================*/

    .platform-grid {
        margin-top: 15px;
    }

    /*=========================================
SELECTION
=========================================*/

    .supported-platforms ::selection {
        background: #0a63ff;
        color: #fff;
    }

    /*=========================================
FOCUS
=========================================*/

    .supported-platforms *:focus {
        outline: none;
    }

    /*=========================================
SMOOTH
=========================================*/

    .supported-platforms,
    .supported-platforms * {
        box-sizing: border-box;
    }

    .supported-platforms {
        scroll-margin-top: 120px;
    }

    /*=========================================================
SUPPORTED PLATFORMS
PART 2 - PREMIUM PLATFORM CARDS
=========================================================*/

    .platform-card {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 38px 34px;
        min-height: 290px;
        border-radius: 26px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 255, .14);
        box-shadow:
            0 18px 45px rgba(8, 27, 75, .08),
            inset 0 1px rgba(255, 255, 255, .85);
        transition: all .45s ease;
        z-index: 1;
    }

    /*=========================================
TOP GRADIENT BAR
=========================================*/

    .platform-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 5px;

        background: linear-gradient(90deg,
                #14b8ff,
                #0a63ff);

    }

    /*=========================================
PREMIUM SHINE
=========================================*/

    .platform-card::after {

        content: "";

        position: absolute;

        top: -180%;

        left: -70%;

        width: 70%;

        height: 420%;

        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, .70),
                transparent);

        transform: rotate(28deg);

        transition: 1s;

    }

    .platform-card:hover::after {

        left: 170%;

    }

    /*=========================================
HOVER
=========================================*/

    .platform-card:hover {

        transform: translateY(-12px);

        border-color: #14b8ff;

        box-shadow:
            0 35px 80px rgba(10, 99, 255, .16);

    }

    /*=========================================
PLATFORM ICON
=========================================*/

    .platform-icon {

        position: relative;

        width: 72px;

        height: 72px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 28px;

        border-radius: 22px;

        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);

        color: #fff;

        font-size: 24px;

        font-weight: 800;

        letter-spacing: 1px;

        box-shadow:
            0 18px 35px rgba(10, 99, 255, .30);

        transition: .45s;

    }

    .platform-icon::before {

        content: "";

        position: absolute;

        width: 135px;

        height: 135px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(20, 184, 255, .18),
                transparent 70%);

        z-index: -1;

    }

    .platform-card:hover .platform-icon {

        transform: rotate(8deg) scale(1.08);

    }

    /*=========================================
TITLE
=========================================*/

    .platform-card h3 {

        font-size: 24px;

        font-weight: 700;

        line-height: 1.35;

        color: #081b4b;

        margin-bottom: 18px;

        transition: .35s;

    }

    .platform-card:hover h3 {

        color: #0a63ff;

    }

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

    .platform-card p {

        margin: 0;

        color: #64748b;

        font-size: 16px;

        line-height: 1.9;

    }

    /*=========================================
BOTTOM GLOW
=========================================*/

    .platform-card .card-glow {

        position: absolute;

        right: -70px;

        bottom: -70px;

        width: 180px;

        height: 180px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(20, 184, 255, .15),
                transparent 70%);

        pointer-events: none;

    }

    /*=========================================
BORDER LIGHT
=========================================*/

    .platform-card .border-light {

        position: absolute;

        inset: 0;

        border-radius: 26px;

        padding: 1px;

        background: linear-gradient(135deg,
                transparent,
                rgba(20, 184, 255, .45),
                transparent);

        opacity: 0;

        transition: .45s;

        pointer-events: none;

    }

    .platform-card:hover .border-light {

        opacity: 1;

    }

    /*=========================================
CARD ANIMATION
=========================================*/

    .platform-card {

        animation: platformFade .8s ease both;

    }

    @keyframes platformFade {

        from {

            opacity: 0;

            transform: translateY(35px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    /*=========================================
STAGGER
=========================================*/

    .platform-card:nth-child(2) {
        animation-delay: .08s;
    }

    .platform-card:nth-child(3) {
        animation-delay: .16s;
    }

    .platform-card:nth-child(4) {
        animation-delay: .24s;
    }

    .platform-card:nth-child(5) {
        animation-delay: .32s;
    }

    .platform-card:nth-child(6) {
        animation-delay: .40s;
    }

    .platform-card:nth-child(7) {
        animation-delay: .48s;
    }

    .platform-card:nth-child(8) {
        animation-delay: .56s;
    }

    .platform-card:nth-child(9) {
        animation-delay: .64s;
    }

    .platform-card:nth-child(10) {
        animation-delay: .72s;
    }

    .platform-card:nth-child(11) {
        animation-delay: .80s;
    }

    .platform-card:nth-child(12) {
        animation-delay: .88s;
    }

    /*=========================================================
SUPPORTED PLATFORMS
PART 3
RESPONSIVE + PREMIUM EFFECTS
=========================================================*/

    /*=========================================
FLOATING BACKGROUND SHAPES
=========================================*/

    .supported-platforms .shape-one,
    .supported-platforms .shape-two,
    .supported-platforms .shape-three {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .supported-platforms .shape-one {
        width: 220px;
        height: 220px;
        top: 6%;
        right: 5%;
        background: radial-gradient(circle, #14b8ff22 0%, transparent 70%);
        animation: platformFloat1 9s ease-in-out infinite;
    }

    .supported-platforms .shape-two {
        width: 170px;
        height: 170px;
        bottom: 8%;
        left: 4%;
        background: radial-gradient(circle, #0a63ff18 0%, transparent 70%);
        animation: platformFloat2 11s ease-in-out infinite;
    }

    .supported-platforms .shape-three {
        width: 130px;
        height: 130px;
        top: 48%;
        left: 50%;
        background: radial-gradient(circle, #14b8ff18 0%, transparent 70%);
        animation: platformFloat3 8s ease-in-out infinite;
    }

    /*=========================================
ANIMATION
=========================================*/

    @keyframes platformFloat1 {

        0%,
        100% {
            transform: translateY(0);
        }

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

    }

    @keyframes platformFloat2 {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(25px);
        }

    }

    @keyframes platformFloat3 {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.08);
        }

    }

    /*=========================================
CARD ALIGNMENT
=========================================*/

    .platform-grid {
        align-items: stretch;
    }

    .platform-card {
        height: 100%;
    }

    /*=========================================
LARGE DESKTOP
=========================================*/

    @media (max-width:1400px) {

        .platform-grid {

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

            gap: 24px;

        }

    }

    /*=========================================
LAPTOP
=========================================*/

    @media (max-width:1200px) {

        .supported-platforms {

            padding: 100px 0;

        }

        .supported-platforms .section-title h2 {

            font-size: 46px;

        }

        .platform-grid {

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

            gap: 22px;

        }

    }

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

    @media (max-width:991px) {

        .supported-platforms {

            padding: 80px 0;

        }

        .supported-platforms .section-title {

            margin-bottom: 55px;

        }

        .supported-platforms .section-title h2 {

            font-size: 38px;

        }

        .supported-platforms .section-title p {

            font-size: 16px;

        }

        .platform-grid {

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

            gap: 20px;

        }

        .platform-card {

            padding: 28px;

            min-height: auto;

        }

        .platform-icon {

            width: 64px;

            height: 64px;

            font-size: 22px;

        }

        .platform-card h3 {

            font-size: 21px;

        }

        .platform-card p {

            font-size: 15px;

        }

    }

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

    @media (max-width:767px) {

        .supported-platforms {

            padding: 65px 0;

        }

        .supported-platforms .container {

            padding: 0 18px;

        }

        .supported-platforms .section-title {

            margin-bottom: 40px;

        }

        .supported-platforms .section-title span {

            font-size: 11px;

            padding: 10px 18px;

        }

        .supported-platforms .section-title h2 {

            font-size: 30px;

            line-height: 1.25;

        }

        .supported-platforms .section-title p {

            font-size: 15px;

            line-height: 1.8;

        }

        .platform-grid {

            grid-template-columns: 1fr;

            gap: 18px;

        }

        .platform-card {

            padding: 24px;

            border-radius: 20px;

        }

        .platform-icon {

            width: 58px;

            height: 58px;

            font-size: 20px;

            margin-bottom: 20px;

        }

        .platform-card h3 {

            font-size: 20px;

        }

        .platform-card p {

            font-size: 14px;

            line-height: 1.8;

        }

    }

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

    @media (max-width:480px) {

        .supported-platforms {

            padding: 55px 0;

        }

        .supported-platforms .container {

            padding: 0 15px;

        }

        .supported-platforms .section-title h2 {

            font-size: 26px;

        }

        .supported-platforms .section-title p {

            font-size: 14px;

        }

        .platform-card {

            padding: 20px;

        }

        .platform-icon {

            width: 52px;

            height: 52px;

            font-size: 18px;

            margin-bottom: 18px;

        }

        .platform-card h3 {

            font-size: 18px;

        }

        .platform-card p {

            font-size: 13px;

            line-height: 1.7;

        }

    }

    /*=========================================
HOVER DEVICES
=========================================*/

    @media (hover:hover) {

        .platform-card:hover {

            transform: translateY(-12px) scale(1.02);

        }

        .platform-card:hover .platform-icon {

            transform: rotate(8deg) scale(1.08);

        }

    }

    /*=========================================
REDUCE MOTION
=========================================*/

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

        * {

            animation: none !important;

            transition: none !important;

            scroll-behavior: auto !important;

        }

    }

    /*=========================================================
PERFORMANCE METRICS
PART 1
=========================================================*/

    .performance-metrics {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 255, .16), transparent 35%),
            radial-gradient(circle at bottom right, rgba(10, 99, 255, .12), transparent 45%),
            linear-gradient(135deg, #ffffff 0%, #f8fbff 35%, #edf6ff 72%, #ffffff 100%);
        z-index: 1;
    }

    /*=========================================
BACKGROUND GLOW
=========================================*/

    .performance-metrics::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        top: -240px;
        left: -220px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .25),
                transparent 70%);
        filter: blur(60px);
        z-index: -1;
    }

    .performance-metrics::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(10, 99, 255, .18),
                transparent 70%);
        filter: blur(70px);
        z-index: -1;
    }

    /*=========================================
CONTAINER
=========================================*/

    .performance-metrics .container {
        width: 100%;
        max-width: 1400px;
        margin: auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    /*=========================================
SECTION TITLE
=========================================*/

    .performance-metrics .section-title {
        max-width: 860px;
        margin: 0 auto 70px;
        text-align: center;
    }

    .performance-metrics .section-title span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 26px;
        border-radius: 50px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        box-shadow: 0 15px 35px rgba(10, 99, 255, .25);
        margin-bottom: 30px;
    }

    .performance-metrics .section-title span::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
    }

    .performance-metrics .section-title h2 {
        font-size: 56px;
        line-height: 1.12;
        font-weight: 800;
        color: #081b4b;
        margin-bottom: 24px;
        letter-spacing: -1px;
    }

    .performance-metrics .section-title p {
        max-width: 760px;
        margin: auto;
        font-size: 18px;
        line-height: 1.9;
        color: #64748b;
    }

    /*=========================================
METRICS GRID
=========================================*/

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
        align-items: stretch;
        margin-top: 15px;
    }

    /* Equal Height */

    .metrics-grid .metric-box {
        height: 100%;
    }

    /* Grid Stretch */

    .metrics-grid>* {
        display: flex;
    }

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

    .performance-metrics,
    .performance-metrics * {
        box-sizing: border-box;
    }

    .performance-metrics {
        scroll-margin-top: 120px;
    }

    .performance-metrics ::selection {
        background: #0a63ff;
        color: #fff;
    }

    .performance-metrics *:focus {
        outline: none;
    }

    /*=========================================================
PERFORMANCE METRICS
PART 2 - PREMIUM METRIC CARDS
=========================================================*/

    .metric-box {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 320px;
        padding: 34px;
        border-radius: 28px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 255, .15);
        box-shadow:
            0 18px 45px rgba(8, 27, 75, .08),
            inset 0 1px rgba(255, 255, 255, .85);
        transition: .45s ease;
        z-index: 1;
    }

    /*==============================
TOP BORDER
==============================*/

    .metric-box::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 5px;

        background: linear-gradient(90deg,
                #14b8ff,
                #0a63ff);

    }

    /*==============================
SHINE EFFECT
==============================*/

    .metric-box::after {

        content: "";

        position: absolute;

        top: -180%;

        left: -70%;

        width: 70%;

        height: 420%;

        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, .72),
                transparent);

        transform: rotate(28deg);

        transition: 1s;

    }

    .metric-box:hover::after {

        left: 170%;

    }

    /*==============================
CARD HOVER
==============================*/

    .metric-box:hover {

        transform: translateY(-12px);

        border-color: #14b8ff;

        box-shadow:
            0 35px 80px rgba(10, 99, 255, .18);

    }

    /*==============================
HEADER
==============================*/

    .metric-head {

        display: flex;

        align-items: center;

        gap: 16px;

        margin-bottom: 28px;

        font-size: 15px;

        font-weight: 700;

        color: #0a63ff;

        text-transform: uppercase;

        letter-spacing: .8px;

    }

    /*==============================
NUMBER
==============================*/

    .metric-head span {

        position: relative;

        width: 60px;

        height: 60px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 18px;

        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);

        color: #fff;

        font-size: 20px;

        font-weight: 800;

        box-shadow:
            0 18px 35px rgba(10, 99, 255, .28);

        flex-shrink: 0;

    }

    .metric-head span::before {

        content: "";

        position: absolute;

        width: 120px;

        height: 120px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(20, 184, 255, .18),
                transparent 70%);

        z-index: -1;

    }

    /*==============================
TITLE
==============================*/

    .metric-box h3 {

        font-size: 24px;

        font-weight: 700;

        line-height: 1.35;

        color: #081b4b;

        margin-bottom: 18px;

        transition: .35s;

    }

    .metric-box:hover h3 {

        color: #0a63ff;

    }

    /*==============================
TEXT
==============================*/

    .metric-box p {

        margin: 0;

        color: #64748b;

        font-size: 16px;

        line-height: 1.9;

    }

    /*==============================
BOTTOM GLOW
==============================*/

    .metric-box .card-glow {

        position: absolute;

        width: 180px;

        height: 180px;

        right: -70px;

        bottom: -70px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(20, 184, 255, .14),
                transparent 70%);

        pointer-events: none;

    }

    /*==============================
BORDER LIGHT
==============================*/

    .metric-box .border-light {

        position: absolute;

        inset: 0;

        border-radius: 28px;

        padding: 1px;

        background: linear-gradient(135deg,
                transparent,
                rgba(20, 184, 255, .45),
                transparent);

        opacity: 0;

        transition: .45s;

        pointer-events: none;

    }

    .metric-box:hover .border-light {

        opacity: 1;

    }

    /*==============================
ENTRY ANIMATION
==============================*/

    .metric-box {

        animation: metricFade .8s ease both;

    }

    @keyframes metricFade {

        from {

            opacity: 0;

            transform: translateY(35px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    /*==============================
STAGGER
==============================*/

    .metric-box:nth-child(2) {
        animation-delay: .08s;
    }

    .metric-box:nth-child(3) {
        animation-delay: .16s;
    }

    .metric-box:nth-child(4) {
        animation-delay: .24s;
    }

    .metric-box:nth-child(5) {
        animation-delay: .32s;
    }

    .metric-box:nth-child(6) {
        animation-delay: .40s;
    }

    .metric-box:nth-child(7) {
        animation-delay: .48s;
    }

    .metric-box:nth-child(8) {
        animation-delay: .56s;
    }

    .metric-box:nth-child(9) {
        animation-delay: .64s;
    }

    .metric-box:nth-child(10) {
        animation-delay: .72s;
    }

    .metric-box:nth-child(11) {
        animation-delay: .80s;
    }

    .metric-box:nth-child(12) {
        animation-delay: .88s;
    }

    /*=========================================================
PERFORMANCE METRICS
PART 3
RESPONSIVE + PREMIUM EFFECTS
=========================================================*/

    /*=========================================
FLOATING SHAPES
=========================================*/

    .performance-metrics .shape-one,
    .performance-metrics .shape-two,
    .performance-metrics .shape-three {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .performance-metrics .shape-one {
        width: 240px;
        height: 240px;
        top: 8%;
        right: 4%;
        background: radial-gradient(circle, #14b8ff22 0%, transparent 70%);
        animation: metricFloatOne 10s ease-in-out infinite;
    }

    .performance-metrics .shape-two {
        width: 180px;
        height: 180px;
        left: 3%;
        bottom: 8%;
        background: radial-gradient(circle, #0a63ff18 0%, transparent 70%);
        animation: metricFloatTwo 12s ease-in-out infinite;
    }

    .performance-metrics .shape-three {
        width: 130px;
        height: 130px;
        top: 50%;
        left: 48%;
        background: radial-gradient(circle, #14b8ff18 0%, transparent 70%);
        animation: metricFloatThree 8s ease-in-out infinite;
    }

    /*=========================================
FLOAT ANIMATION
=========================================*/

    @keyframes metricFloatOne {

        0%,
        100% {
            transform: translateY(0);
        }

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

    }

    @keyframes metricFloatTwo {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(24px);
        }

    }

    @keyframes metricFloatThree {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.08);
        }

    }

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

    .metrics-grid {
        align-items: stretch;
    }

    .metric-box {
        height: 100%;
    }

    /*=========================================
HOVER
=========================================*/

    @media (hover:hover) {

        .metric-box:hover {

            transform: translateY(-12px) scale(1.02);

        }

        .metric-box:hover .metric-head span {

            transform: rotate(360deg);

            transition: 1s;

        }

    }

    /*=========================================
LARGE DESKTOP
=========================================*/

    @media (max-width:1400px) {

        .metrics-grid {

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

            gap: 24px;

        }

    }

    /*=========================================
LAPTOP
=========================================*/

    @media (max-width:1200px) {

        .performance-metrics {

            padding: 100px 0;

        }

        .performance-metrics .section-title h2 {

            font-size: 46px;

        }

        .metrics-grid {

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

            gap: 22px;

        }

    }

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

    @media (max-width:991px) {

        .performance-metrics {

            padding: 80px 0;

        }

        .performance-metrics .section-title {

            margin-bottom: 55px;

        }

        .performance-metrics .section-title h2 {

            font-size: 38px;

        }

        .performance-metrics .section-title p {

            font-size: 16px;

        }

        .metrics-grid {

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

            gap: 20px;

        }

        .metric-box {

            padding: 28px;

            min-height: auto;

        }

        .metric-head {

            font-size: 14px;

            gap: 14px;

        }

        .metric-head span {

            width: 56px;

            height: 56px;

            font-size: 18px;

        }

        .metric-box h3 {

            font-size: 21px;

        }

        .metric-box p {

            font-size: 15px;

        }

    }

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

    @media (max-width:767px) {

        .performance-metrics {

            padding: 65px 0;

        }

        .performance-metrics .container {

            padding: 0 18px;

        }

        .performance-metrics .section-title {

            margin-bottom: 40px;

        }

        .performance-metrics .section-title span {

            font-size: 11px;

            padding: 10px 18px;

        }

        .performance-metrics .section-title h2 {

            font-size: 30px;

            line-height: 1.25;

        }

        .performance-metrics .section-title p {

            font-size: 15px;

            line-height: 1.8;

        }

        .metrics-grid {

            grid-template-columns: 1fr;

            gap: 18px;

        }

        .metric-box {

            padding: 24px;

            border-radius: 22px;

        }

        .metric-head {

            font-size: 13px;

            gap: 12px;

            flex-wrap: wrap;

        }

        .metric-head span {

            width: 54px;

            height: 54px;

            font-size: 18px;

            border-radius: 16px;

        }

        .metric-box h3 {

            font-size: 20px;

            margin-bottom: 14px;

        }

        .metric-box p {

            font-size: 14px;

            line-height: 1.8;

        }

    }

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

    @media (max-width:480px) {

        .performance-metrics {

            padding: 55px 0;

        }

        .performance-metrics .container {

            padding: 0 15px;

        }

        .performance-metrics .section-title h2 {

            font-size: 26px;

        }

        .performance-metrics .section-title p {

            font-size: 14px;

        }

        .metric-box {

            padding: 20px;

        }

        .metric-head {

            font-size: 12px;

        }

        .metric-head span {

            width: 50px;

            height: 50px;

            font-size: 17px;

        }

        .metric-box h3 {

            font-size: 18px;

        }

        .metric-box p {

            font-size: 13px;

            line-height: 1.7;

        }

    }

    /*=========================================
REDUCE MOTION
=========================================*/

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

        * {

            animation: none !important;

            transition: none !important;

            scroll-behavior: auto !important;

        }

    }

    /*=========================================================
TECHNOLOGY ENGINE
PART 1
=========================================================*/

    .technology-engine {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 255, .16), transparent 35%),
            radial-gradient(circle at bottom right, rgba(10, 99, 255, .12), transparent 42%),
            linear-gradient(135deg, #ffffff 0%, #f8fbff 38%, #eef7ff 72%, #ffffff 100%);
        z-index: 1;
    }

    /*=========================================
BACKGROUND GLOW
=========================================*/

    .technology-engine::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        top: -220px;
        left: -220px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .26),
                transparent 70%);
        filter: blur(60px);
        z-index: -1;
    }

    .technology-engine::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(10, 99, 255, .18),
                transparent 70%);
        filter: blur(70px);
        z-index: -1;
    }

    /*=========================================
CONTAINER
=========================================*/

    .technology-engine .container {
        max-width: 1400px;
        width: 100%;
        margin: auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    /*=========================================
SECTION TITLE
=========================================*/

    .technology-engine .section-title {
        max-width: 850px;
        margin: 0 auto 70px;
        text-align: center;
    }

    .technology-engine .section-title span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 26px;
        border-radius: 50px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        box-shadow: 0 15px 35px rgba(10, 99, 255, .25);
        margin-bottom: 28px;
    }

    .technology-engine .section-title span::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
    }

    .technology-engine .section-title h2 {
        font-size: 56px;
        line-height: 1.12;
        font-weight: 800;
        color: #081b4b;
        margin-bottom: 24px;
        letter-spacing: -1px;
    }

    .technology-engine .section-title p {
        max-width: 760px;
        margin: auto;
        font-size: 18px;
        line-height: 1.9;
        color: #64748b;
    }

    /*=========================================
TECH GRID
=========================================*/

    .technology-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
        align-items: stretch;
        margin-top: 15px;
    }

    /* Equal Height */

    .technology-grid .technology-card {
        height: 100%;
    }

    /* Grid Stretch */

    .technology-grid>* {
        display: flex;
    }

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

    .technology-engine,
    .technology-engine * {
        box-sizing: border-box;
    }

    .technology-engine {
        scroll-margin-top: 120px;
    }

    .technology-engine ::selection {
        background: #0a63ff;
        color: #fff;
    }

    .technology-engine *:focus {
        outline: none;
    }

    /*=========================================================
TECHNOLOGY ENGINE
PART 2 - PREMIUM CARDS
=========================================================*/

    .technology-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 300px;
        padding: 34px;
        border-radius: 28px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 255, .15);
        box-shadow:
            0 20px 45px rgba(8, 27, 75, .08),
            inset 0 1px rgba(255, 255, 255, .85);
        transition: all .45s ease;
        z-index: 1;
    }

    /*=========================================
TOP BORDER
=========================================*/

    .technology-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,
                #14b8ff,
                #0a63ff);
    }

    /*=========================================
PREMIUM SHINE
=========================================*/

    .technology-card::after {
        content: "";
        position: absolute;
        top: -180%;
        left: -70%;
        width: 70%;
        height: 420%;
        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, .75),
                transparent);
        transform: rotate(28deg);
        transition: 1s;
    }

    .technology-card:hover::after {
        left: 170%;
    }

    /*=========================================
CARD HOVER
=========================================*/

    .technology-card:hover {
        transform: translateY(-12px);
        border-color: #14b8ff;
        box-shadow:
            0 35px 80px rgba(10, 99, 255, .18);
    }

    /*=========================================
TECH NUMBER
=========================================*/

    .tech-no {
        position: relative;
        width: 66px;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        border-radius: 20px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        box-shadow:
            0 18px 35px rgba(10, 99, 255, .30);
        transition: .45s;
    }

    .tech-no::before {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .18),
                transparent 70%);
        z-index: -1;
    }

    .technology-card:hover .tech-no {
        transform: rotate(8deg) scale(1.08);
    }

    /*=========================================
TITLE
=========================================*/

    .technology-card h3 {
        font-size: 24px;
        font-weight: 700;
        color: #081b4b;
        line-height: 1.35;
        margin-bottom: 18px;
        transition: .35s;
    }

    .technology-card:hover h3 {
        color: #0a63ff;
    }

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

    .technology-card p {
        margin: 0;
        color: #64748b;
        font-size: 16px;
        line-height: 1.9;
    }

    /*=========================================
BOTTOM GLOW
=========================================*/

    .technology-card .card-glow {
        position: absolute;
        right: -70px;
        bottom: -70px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .15),
                transparent 70%);
        pointer-events: none;
    }

    /*=========================================
BORDER LIGHT
=========================================*/

    .technology-card .border-light {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 1px;
        background: linear-gradient(135deg,
                transparent,
                rgba(20, 184, 255, .45),
                transparent);
        opacity: 0;
        transition: .45s;
        pointer-events: none;
    }

    .technology-card:hover .border-light {
        opacity: 1;
    }

    /*=========================================
ENTRY ANIMATION
=========================================*/

    .technology-card {
        animation: technologyFade .8s ease both;
    }

    @keyframes technologyFade {

        from {
            opacity: 0;
            transform: translateY(35px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }

    /*=========================================
STAGGER ANIMATION
=========================================*/

    .technology-card:nth-child(2) {
        animation-delay: .08s;
    }

    .technology-card:nth-child(3) {
        animation-delay: .16s;
    }

    .technology-card:nth-child(4) {
        animation-delay: .24s;
    }

    .technology-card:nth-child(5) {
        animation-delay: .32s;
    }

    .technology-card:nth-child(6) {
        animation-delay: .40s;
    }

    .technology-card:nth-child(7) {
        animation-delay: .48s;
    }

    .technology-card:nth-child(8) {
        animation-delay: .56s;
    }

    .technology-card:nth-child(9) {
        animation-delay: .64s;
    }

    .technology-card:nth-child(10) {
        animation-delay: .72s;
    }

    .technology-card:nth-child(11) {
        animation-delay: .80s;
    }

    .technology-card:nth-child(12) {
        animation-delay: .88s;
    }

    /*=========================================================
TECHNOLOGY ENGINE
PART 3
RESPONSIVE + PREMIUM EFFECTS
=========================================================*/

    /*=========================================
FLOATING SHAPES
=========================================*/

    .technology-engine .shape-one,
    .technology-engine .shape-two,
    .technology-engine .shape-three {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .technology-engine .shape-one {
        width: 240px;
        height: 240px;
        top: 8%;
        right: 4%;
        background: radial-gradient(circle, #14b8ff22 0%, transparent 70%);
        animation: technologyFloatOne 10s ease-in-out infinite;
    }

    .technology-engine .shape-two {
        width: 180px;
        height: 180px;
        bottom: 8%;
        left: 4%;
        background: radial-gradient(circle, #0a63ff18 0%, transparent 70%);
        animation: technologyFloatTwo 11s ease-in-out infinite;
    }

    .technology-engine .shape-three {
        width: 130px;
        height: 130px;
        top: 48%;
        left: 50%;
        background: radial-gradient(circle, #14b8ff18 0%, transparent 70%);
        animation: technologyFloatThree 8s ease-in-out infinite;
    }

    /*=========================================
FLOAT ANIMATION
=========================================*/

    @keyframes technologyFloatOne {

        0%,
        100% {
            transform: translateY(0);
        }

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

    }

    @keyframes technologyFloatTwo {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(24px);
        }

    }

    @keyframes technologyFloatThree {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.08);
        }

    }

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

    .technology-grid {
        align-items: stretch;
    }

    .technology-card {
        height: 100%;
    }

    /*=========================================
HOVER
=========================================*/

    @media (hover:hover) {

        .technology-card:hover {

            transform: translateY(-12px) scale(1.02);

        }

        .technology-card:hover .tech-no {

            transform: rotate(360deg) scale(1.08);

            transition: 1s;

        }

    }

    /*=========================================
LARGE DESKTOP
=========================================*/

    @media(max-width:1400px) {

        .technology-grid {

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

            gap: 24px;

        }

    }

    /*=========================================
LAPTOP
=========================================*/

    @media(max-width:1200px) {

        .technology-engine {

            padding: 100px 0;

        }

        .technology-engine .section-title h2 {

            font-size: 46px;

        }

        .technology-grid {

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

            gap: 22px;

        }

    }

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

    @media(max-width:991px) {

        .technology-engine {

            padding: 80px 0;

        }

        .technology-engine .section-title {

            margin-bottom: 55px;

        }

        .technology-engine .section-title h2 {

            font-size: 38px;

        }

        .technology-engine .section-title p {

            font-size: 16px;

        }

        .technology-grid {

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

            gap: 20px;

        }

        .technology-card {

            padding: 28px;

            min-height: auto;

        }

        .tech-no {

            width: 58px;

            height: 58px;

            font-size: 20px;

            margin-bottom: 22px;

        }

        .technology-card h3 {

            font-size: 21px;

        }

        .technology-card p {

            font-size: 15px;

        }

    }

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

    @media(max-width:767px) {

        .technology-engine {

            padding: 65px 0;

        }

        .technology-engine .container {

            padding: 0 18px;

        }

        .technology-engine .section-title {

            margin-bottom: 40px;

        }

        .technology-engine .section-title span {

            font-size: 11px;

            padding: 10px 18px;

        }

        .technology-engine .section-title h2 {

            font-size: 30px;

            line-height: 1.25;

        }

        .technology-engine .section-title p {

            font-size: 15px;

            line-height: 1.8;

        }

        .technology-grid {

            grid-template-columns: 1fr;

            gap: 18px;

        }

        .technology-card {

            padding: 24px;

            border-radius: 22px;

        }

        .tech-no {

            width: 54px;

            height: 54px;

            font-size: 18px;

            margin-bottom: 18px;

            border-radius: 16px;

        }

        .technology-card h3 {

            font-size: 20px;

            margin-bottom: 14px;

        }

        .technology-card p {

            font-size: 14px;

            line-height: 1.8;

        }

    }

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

    @media(max-width:480px) {

        .technology-engine {

            padding: 55px 0;

        }

        .technology-engine .container {

            padding: 0 15px;

        }

        .technology-engine .section-title h2 {

            font-size: 26px;

        }

        .technology-engine .section-title p {

            font-size: 14px;

        }

        .technology-card {

            padding: 20px;

        }

        .tech-no {

            width: 48px;

            height: 48px;

            font-size: 16px;

            margin-bottom: 16px;

        }

        .technology-card h3 {

            font-size: 18px;

        }

        .technology-card p {

            font-size: 13px;

            line-height: 1.7;

        }

    }

    /*=========================================
REDUCE MOTION
=========================================*/

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

        * {

            animation: none !important;

            transition: none !important;

            scroll-behavior: auto !important;

        }

    }

    /*=========================================================
WEBSITE TYPES
PART 1
=========================================================*/

    .website-types {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 255, .16), transparent 35%),
            radial-gradient(circle at bottom right, rgba(10, 99, 255, .12), transparent 42%),
            linear-gradient(135deg,
                #ffffff 0%,
                #f8fbff 35%,
                #eef7ff 72%,
                #ffffff 100%);
        z-index: 1;
    }

    /*=========================================
BACKGROUND GLOW
=========================================*/

    .website-types::before {

        content: "";

        position: absolute;

        width: 560px;

        height: 560px;

        top: -220px;

        left: -220px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(20, 184, 255, .26),
                transparent 70%);

        filter: blur(60px);

        z-index: -1;

    }

    .website-types::after {

        content: "";

        position: absolute;

        width: 500px;

        height: 500px;

        right: -180px;

        bottom: -180px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(10, 99, 255, .18),
                transparent 70%);

        filter: blur(70px);

        z-index: -1;

    }

    /*=========================================
CONTAINER
=========================================*/

    .website-types .container {

        width: 100%;

        max-width: 1400px;

        margin: auto;

        padding: 0 20px;

        position: relative;

        z-index: 2;

    }

    /*=========================================
SECTION TITLE
=========================================*/

    .website-types .section-title {

        max-width: 860px;

        margin: 0 auto 70px;

        text-align: center;

    }

    .website-types .section-title span {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        padding: 12px 26px;

        border-radius: 50px;

        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);

        color: #fff;

        font-size: 13px;

        font-weight: 700;

        letter-spacing: 2px;

        text-transform: uppercase;

        box-shadow: 0 15px 35px rgba(10, 99, 255, .25);

        margin-bottom: 28px;

    }

    .website-types .section-title span::before {

        content: "";

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: #fff;

    }

    .website-types .section-title h2 {

        font-size: 56px;

        line-height: 1.1;

        font-weight: 800;

        color: #081b4b;

        margin-bottom: 24px;

        letter-spacing: -1px;

    }

    .website-types .section-title p {

        max-width: 760px;

        margin: auto;

        font-size: 18px;

        line-height: 1.9;

        color: #64748b;

    }

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

    .website-grid {

        display: grid;

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

        gap: 28px;

        align-items: stretch;

        margin-top: 20px;

    }

    /*=========================================
EQUAL HEIGHT
=========================================*/

    .website-grid>* {

        display: flex;

    }

    .website-grid .website-card {

        height: 100%;

    }

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

    .website-types,
    .website-types * {

        box-sizing: border-box;

    }

    .website-types {

        scroll-margin-top: 120px;

    }

    .website-types ::selection {

        background: #0a63ff;

        color: #fff;

    }

    .website-types *:focus {

        outline: none;

    }

    /*=========================================================
WEBSITE TYPES
PART 2 - PREMIUM WEBSITE CARDS
=========================================================*/

    .website-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 300px;
        padding: 34px;
        border-radius: 28px;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 255, .15);
        box-shadow:
            0 20px 45px rgba(8, 27, 75, .08),
            inset 0 1px rgba(255, 255, 255, .90);
        transition: all .45s ease;
        z-index: 1;
    }

    /*=========================================
TOP BORDER
=========================================*/

    .website-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,
                #14b8ff,
                #0a63ff);
    }

    /*=========================================
SHINE EFFECT
=========================================*/

    .website-card::after {
        content: "";
        position: absolute;
        top: -180%;
        left: -70%;
        width: 70%;
        height: 420%;
        background: linear-gradient(120deg,
                transparent,
                rgba(255, 255, 255, .75),
                transparent);
        transform: rotate(28deg);
        transition: 1s;
    }

    .website-card:hover::after {
        left: 170%;
    }

    /*=========================================
HOVER
=========================================*/

    .website-card:hover {
        transform: translateY(-12px);
        border-color: #14b8ff;
        box-shadow:
            0 35px 80px rgba(10, 99, 255, .18);
    }

    /*=========================================
ICON
=========================================*/

    .website-icon {
        position: relative;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        border-radius: 22px;
        background: linear-gradient(135deg,
                #14b8ff,
                #0a63ff);
        color: #fff;
        font-size: 22px;
        font-weight: 800;
        box-shadow:
            0 18px 35px rgba(10, 99, 255, .30);
        transition: .45s;
    }

    .website-icon::before {
        content: "";
        position: absolute;
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .18),
                transparent 70%);
        z-index: -1;
    }

    .website-card:hover .website-icon {
        transform: rotate(10deg) scale(1.08);
    }

    /*=========================================
TITLE
=========================================*/

    .website-card h3 {
        font-size: 24px;
        font-weight: 700;
        color: #081b4b;
        line-height: 1.35;
        margin-bottom: 18px;
        transition: .35s;
    }

    .website-card:hover h3 {
        color: #0a63ff;
    }

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

    .website-card p {
        margin: 0;
        color: #64748b;
        font-size: 16px;
        line-height: 1.9;
    }

    /*=========================================
BOTTOM GLOW
=========================================*/

    .website-card .card-glow {
        position: absolute;
        right: -70px;
        bottom: -70px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle,
                rgba(20, 184, 255, .15),
                transparent 70%);
        pointer-events: none;
    }

    /*=========================================
BORDER LIGHT
=========================================*/

    .website-card .border-light {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 1px;
        background: linear-gradient(135deg,
                transparent,
                rgba(20, 184, 255, .45),
                transparent);
        opacity: 0;
        transition: .45s;
        pointer-events: none;
    }

    .website-card:hover .border-light {
        opacity: 1;
    }

    /*=========================================
ENTRY ANIMATION
=========================================*/

    .website-card {
        animation: websiteFade .8s ease both;
    }

    @keyframes websiteFade {

        from {
            opacity: 0;
            transform: translateY(35px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }

    /*=========================================
STAGGER
=========================================*/

    .website-card:nth-child(2) {
        animation-delay: .08s;
    }

    .website-card:nth-child(3) {
        animation-delay: .16s;
    }

    .website-card:nth-child(4) {
        animation-delay: .24s;
    }

    .website-card:nth-child(5) {
        animation-delay: .32s;
    }

    .website-card:nth-child(6) {
        animation-delay: .40s;
    }

    .website-card:nth-child(7) {
        animation-delay: .48s;
    }

    .website-card:nth-child(8) {
        animation-delay: .56s;
    }

    .website-card:nth-child(9) {
        animation-delay: .64s;
    }

    .website-card:nth-child(10) {
        animation-delay: .72s;
    }

    .website-card:nth-child(11) {
        animation-delay: .80s;
    }

    .website-card:nth-child(12) {
        animation-delay: .88s;
    }

    /*=========================================================
WEBSITE TYPES
PART 3
RESPONSIVE + PREMIUM EFFECTS
=========================================================*/

    /*=========================================
FLOATING SHAPES
=========================================*/

    .website-types .shape-one,
    .website-types .shape-two,
    .website-types .shape-three {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .website-types .shape-one {
        width: 240px;
        height: 240px;
        top: 8%;
        right: 4%;
        background: radial-gradient(circle, #14b8ff22 0%, transparent 70%);
        animation: websiteFloatOne 10s ease-in-out infinite;
    }

    .website-types .shape-two {
        width: 180px;
        height: 180px;
        left: 3%;
        bottom: 8%;
        background: radial-gradient(circle, #0a63ff18 0%, transparent 70%);
        animation: websiteFloatTwo 12s ease-in-out infinite;
    }

    .website-types .shape-three {
        width: 130px;
        height: 130px;
        top: 48%;
        left: 50%;
        background: radial-gradient(circle, #14b8ff18 0%, transparent 70%);
        animation: websiteFloatThree 8s ease-in-out infinite;
    }

   /*========================================= Float Animation =========================================*/
@keyframes websiteFloatOne{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-28px);
    }
}
@keyframes websiteFloatTwo{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(24px);
    }
}
@keyframes websiteFloatThree{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}

/*========================================= Grid =========================================*/
.website-grid{
    align-items:stretch;
}
.website-card{
    height:100%;
}

/*========================================= Hover =========================================*/
@media(hover:hover){
    .website-card:hover{
        transform:translateY(-12px) scale(1.02);
    }
    .website-card:hover .website-icon{
        transform:rotate(360deg) scale(1.08);
        transition:1s;
    }
}
/*========================================= Large Desktop =========================================*/
@media(max-width:1400px){
    .website-grid{
        grid-template-columns:repeat(4,1fr);
        gap:24px;
    }
}

/*========================================= Laptop =========================================*/
@media(max-width:1200px){
    .website-types{
        padding:100px 0;
    }
    .website-types .section-title h2{
        font-size:46px;
    }
    .website-grid{
        grid-template-columns:repeat(3,1fr);
        gap:22px;
    }
}

/*========================================= Tablet =========================================*/
@media(max-width:991px){
    .website-types{
        padding:80px 0;
    }
    .website-types .section-title{
        margin-bottom:55px;
    }
    .website-types .section-title h2{
        font-size:38px;
    }
    .website-types .section-title p{
        font-size:16px;
    }
    .website-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }
    .website-card{
        padding:28px;
        min-height:auto;
    }
    .website-icon{
        width:58px;
        height:58px;
        font-size:20px;
        margin-bottom:22px;
    }
    .website-card h3{
        font-size:21px;
    }
    .website-card p{
        font-size:15px;
    }
}

/*========================================= Mobile =========================================*/
@media(max-width:767px){
    .website-types{
        padding:65px 0;
    }
    .website-types .container{
        padding:0 18px;
    }
    .website-types .section-title{
        margin-bottom:40px;
    }
    .website-types .section-title span{
        font-size:11px;
        padding:10px 18px;
    }
    .website-types .section-title h2{
        font-size:30px;
        line-height:1.25;
    }
    .website-types .section-title p{
        font-size:15px;
        line-height:1.8;
    }
    .website-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .website-card{
        padding:24px;
        border-radius:22px;
    }
    .website-icon{
        width:54px;
        height:54px;
        font-size:18px;
        margin-bottom:18px;
        border-radius:16px;
    }
    .website-card h3{
        font-size:20px;
        margin-bottom:14px;
    }
    .website-card p{
        font-size:14px;
        line-height:1.8;
    }
}

/*========================================= Small Mobile =========================================*/
@media(max-width:480px){
    .website-types{
        padding:55px 0;
    }
    .website-types .container{
        padding:0 15px;
    }
    .website-types .section-title h2{
        font-size:26px;
    }
    .website-types .section-title p{
        font-size:14px;
    }
    .website-card{
        padding:20px;
    }
    .website-icon{
        width:48px;
        height:48px;
        font-size:16px;
        margin-bottom:16px;
    }
    .website-card h3{
        font-size:18px;
    }
    .website-card p{
        font-size:13px;
        line-height:1.7;
    }
}

/*========================================= Reduce Motion =========================================*/
@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}
/*========================================= Service CTA Part 1 =========================================*/
.service-cta{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:radial-gradient(circle at top left,rgba(20,184,255,.20),transparent 35%),radial-gradient(circle at bottom right,rgba(10,99,255,.18),transparent 45%),linear-gradient(135deg,#081b4b 0%,#0a63ff 45%,#14b8ff 100%);
    z-index:1;
}

/*========================================= Background Glow =========================================*/
.service-cta::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-280px;
    left:-250px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);
    filter:blur(70px);
    z-index:-1;
}
.service-cta::after{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    right:-220px;
    bottom:-220px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);
    filter:blur(80px);
    z-index:-1;
}

/*========================================= Container =========================================*/
.service-cta .container{
    max-width:1400px;
    width:100%;
    margin:auto;
    padding:0 20px;
    position:relative;
    z-index:2;
}

/*========================================= Wrapper =========================================*/
.service-cta-wrapper{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:60px;
    align-items:center;
}

/*========================================= Left =========================================*/
.cta-left{
    color:#fff;
}

/*========================================= Tag =========================================*/
.cta-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 24px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(15px);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:30px;
}
.cta-tag::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;
}

/*========================================= Heading =========================================*/
.cta-left h2{
    font-size:58px;
    line-height:1.1;
    font-weight:800;
    margin-bottom:28px;
    letter-spacing:-1px;
    color:#fff;
}

/*========================================= Description =========================================*/
.cta-left p{
    max-width:720px;
    font-size:18px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
    margin-bottom:40px;
}

/*========================================= Points =========================================*/
.cta-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    max-width:650px;
}
.cta-points div{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(14px);
    color:#fff;
    font-size:16px;
    font-weight:600;
    transition:.35s;
}
.cta-points div:hover{
    background:rgba(255,255,255,.16);
    transform:translateY(-4px);
}

/*========================================= Right =========================================*/
.cta-right{
    position:relative;
}
/*========================================= CTA Box =========================================*/
.cta-box{
    position:relative;
    overflow:hidden;
    padding:50px 42px;
    border-radius:32px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 35px 80px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.18);
    text-align:center;
    transition:.45s ease;
    z-index:1;
}

/*========================================= Top Border =========================================*/
.cta-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#ffffff,#14b8ff,#ffffff);
}

/*========================================= Shine =========================================*/
.cta-box::after{
    content:"";
    position:absolute;
    top:-180%;
    left:-70%;
    width:70%;
    height:420%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
    transform:rotate(28deg);
    transition:1s;
}
.cta-box:hover::after{
    left:170%;
}

/*========================================= Hover =========================================*/
.cta-box:hover{
    transform:translateY(-12px);
    box-shadow:0 45px 90px rgba(0,0,0,.22);
}

/*========================================= Heading =========================================*/
.cta-box h3{
    font-size:34px;
    line-height:1.25;
    color:#fff;
    font-weight:800;
    margin-bottom:18px;
}

/*========================================= Text =========================================*/
.cta-box p{
    font-size:16px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
    margin-bottom:35px;
}

/*========================================= Primary Button =========================================*/
.cta-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:60px;
    border-radius:60px;
    margin-bottom:18px;
    background:#ffffff;
    color:#0a63ff;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
    box-shadow:0 18px 40px rgba(255,255,255,.20);
}
.cta-btn:hover{
    background:#f3f8ff;
    transform:translateY(-4px);
}

/*========================================= Outline Button =========================================*/
.cta-btn-outline{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:58px;
    border-radius:60px;
    text-decoration:none;
    border:2px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:16px;
    font-weight:700;
    transition:.35s;
}
.cta-btn-outline:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;
    transform:translateY(-4px);
}

/*========================================= Button Icon =========================================*/
.cta-btn::after{
    content:"→";
    margin-left:10px;
    transition:.35s;
}
.cta-btn:hover::after{
    transform:translateX(6px);
}
.cta-btn-outline::after{
    content:"↗";
    margin-left:10px;
    transition:.35s;
}
.cta-btn-outline:hover::after{
    transform:translateX(5px);
}

/*========================================= Glow =========================================*/
.cta-box .card-glow{
    position:absolute;
    width:240px;
    height:240px;
    right:-80px;
    bottom:-80px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
    pointer-events:none;
}

/*========================================= Border Light =========================================*/
.cta-box .border-light{
    position:absolute;
    inset:0;
    border-radius:32px;
    padding:1px;
    background:linear-gradient(135deg,transparent,rgba(255,255,255,.35),transparent);
    opacity:0;
    transition:.45s;
    pointer-events:none;
}
.cta-box:hover .border-light{
    opacity:1;
}

/*========================================= Entry Animation =========================================*/
.cta-box{
    animation:ctaFade .8s ease both;
}
@keyframes ctaFade{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*========================================= Floating Shapes =========================================*/
.service-cta .shape-one,
.service-cta .shape-two,
.service-cta .shape-three{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}
.service-cta .shape-one{
    width:260px;
    height:260px;
    top:6%;
    right:5%;
    background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
    animation:ctaFloatOne 10s ease-in-out infinite;
}
.service-cta .shape-two{
    width:180px;
    height:180px;
    left:4%;
    bottom:8%;
    background:radial-gradient(circle,rgba(20,184,255,.22),transparent 70%);
    animation:ctaFloatTwo 12s ease-in-out infinite;
}
.service-cta .shape-three{
    width:140px;
    height:140px;
    top:48%;
    left:48%;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);
    animation:ctaFloatThree 8s ease-in-out infinite;
}

/*========================================= Float Animation =========================================*/
@keyframes ctaFloatOne{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-28px);
    }
}
@keyframes ctaFloatTwo{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(25px);
    }
}
@keyframes ctaFloatThree{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}

/*========================================= Desktop =========================================*/
@media(max-width:1400px){
    .service-cta-wrapper{
        grid-template-columns:1.2fr .8fr;
        gap:45px;
    }
}

/*========================================= Laptop =========================================*/
@media(max-width:1200px){
    .service-cta{
        padding:100px 0;
    }
    .service-cta-wrapper{
        grid-template-columns:1fr;
        gap:45px;
    }
    .cta-left{
        text-align:center;
    }
    .cta-left p{
        margin-left:auto;
        margin-right:auto;
    }
    .cta-points{
        margin:0 auto;
    }
    .cta-right{
        max-width:550px;
        margin:auto;
    }
}

/*========================================= Tablet =========================================*/
@media(max-width:991px){
    .service-cta{
        padding:80px 0;
    }
    .cta-left h2{
        font-size:42px;
    }
    .cta-left p{
        font-size:16px;
    }
    .cta-points{
        grid-template-columns:1fr 1fr;
        gap:16px;
    }
    .cta-box{
        padding:40px 30px;
    }
    .cta-box h3{
        font-size:30px;
    }
}

/*========================================= Mobile =========================================*/
@media(max-width:767px){
    .service-cta{
        padding:65px 0;
    }
    .service-cta .container{
        padding:0 18px;
    }
    .service-cta-wrapper{
        gap:35px;
    }
    .cta-tag{
        font-size:11px;
        padding:10px 18px;
        letter-spacing:1px;
    }
    .cta-left{
        text-align:center;
    }
    .cta-left h2{
        font-size:32px;
        line-height:1.25;
    }
    .cta-left p{
        font-size:15px;
        line-height:1.8;
    }
    .cta-points{
        grid-template-columns:1fr;
        gap:15px;
        max-width:100%;
    }
    .cta-points div{
        padding:16px 18px;
        font-size:15px;
    }
    .cta-box{
        padding:32px 24px;
        border-radius:24px;
    }
    .cta-box h3{
        font-size:26px;
    }
    .cta-box p{
        font-size:15px;
        margin-bottom:28px;
    }
    .cta-btn,
    .cta-btn-outline{
        height:54px;
        font-size:15px;
    }
}

/*========================================= Small Mobile =========================================*/
@media(max-width:480px){
    .service-cta{
        padding:55px 0;
    }
    .service-cta .container{
        padding:0 15px;
    }
    .cta-left h2{
        font-size:27px;
    }
    .cta-left p{
        font-size:14px;
    }
    .cta-tag{
        font-size:10px;
        padding:9px 16px;
    }
    .cta-points div{
        font-size:14px;
        padding:15px 16px;
    }
    .cta-box{
        padding:28px 20px;
    }
    .cta-box h3{
        font-size:22px;
    }
    .cta-box p{
        font-size:14px;
    }
    .cta-btn,
    .cta-btn-outline{
        height:50px;
        font-size:14px;
    }
}

/*========================================= Hover Devices =========================================*/
@media(hover:hover){
    .cta-box:hover{
        transform:translateY(-12px) scale(1.02);
    }
    .cta-btn:hover{
        transform:translateY(-4px);
    }
    .cta-btn-outline:hover{
        transform:translateY(-4px);
    }
}

/*========================================= Reduce Motion =========================================*/
@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}