/* =========================================
VIDEO INTRO
========================================= */

.intro-video-section{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#050816;
}

.intro-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0.55;

    will-change:transform;

    transform:translateZ(0);
}
.intro-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(5,8,22,0.30),
        rgba(5,8,22,0.72)
    );

    z-index:2;
}

.intro-content{

    position:relative;

    z-index:5;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.intro-glow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.28),
        transparent 72%
    );

    filter:blur(50px);

    z-index:-1;
}

.intro-tag{

    color:rgba(255,255,255,0.68);

    font-family:'Space Grotesk',sans-serif;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:22px;
}

.intro-content h2{

    font-size:clamp(4rem,8vw,8rem);

    line-height:0.95;

    color:white;

    font-weight:800;

    letter-spacing:-4px;

    margin-bottom:24px;

    text-shadow:
    0 10px 30px rgba(0,0,0,0.35);
}

.intro-content p{

    color:rgba(255,255,255,0.72);

    font-size:18px;

    letter-spacing:1px;
}

/* =========================================
SCROLL INDICATOR
========================================= */

.scroll-indicator{

    position:absolute;

    bottom:42px;
    left:50%;

    transform:translateX(-50%);

    z-index:10;
}

.scroll-indicator span{

    display:block;

    width:2px;
    height:70px;

    border-radius:20px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0),
        rgba(0,140,255,1),
        rgba(255,255,255,0)
    );

    animation:scrollLine 2s infinite;
}

@keyframes scrollLine{

    0%{

        opacity:0.2;

        transform:translateY(-10px);
    }

    50%{

        opacity:1;

        transform:translateY(10px);
    }

    100%{

        opacity:0.2;

        transform:translateY(-10px);
    }
}
/* =========================================
NEW HERO
========================================= */

.hero-section{

    position:relative;

    overflow:hidden;

    padding:110px 0 90px;

    background:
    linear-gradient(
        180deg,
        #f5f8fc 0%,
        #edf3fa 100%
    );
}

.hero-bg-glow{

    position:absolute;

    top:-220px;
    right:-120px;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.18),
        transparent 70%
    );

    filter:blur(60px);

    z-index:1;
}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);

    background-size:70px 70px;

    z-index:1;
}

.hero-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;
}

/* =========================================
LEFT
========================================= */

.hero-content{

    max-width:640px;
}

.hero-mini-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.7);

    border:1px solid rgba(0,140,255,0.12);

    backdrop-filter:blur(20px);

    color:#008cff;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

.hero-content h1{

    font-size:clamp(4rem,7vw,7rem);

    line-height:0.92;

    letter-spacing:-5px;

    color:#071120;

    margin-bottom:28px;

    font-weight:800;
}

.hero-content p{

    font-size:19px;

    line-height:1.8;

    color:#526277;

    margin-bottom:40px;

    max-width:620px;
}

/* =========================================
BUTTONS
========================================= */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:55px;
}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:60px;

    padding:0 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #008cff,
        #005eff
    );

    color:white;

    font-weight:700;

    text-decoration:none;

    box-shadow:
    0 15px 40px rgba(0,140,255,0.28);

    transition:0.35s;
}

.btn-primary:hover{

    transform:
    translateY(-3px)
    scale(1.02);
}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:60px;

    padding:0 34px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.75);

    border:1px solid rgba(0,0,0,0.06);

    color:#091423;

    font-weight:700;

    text-decoration:none;

    backdrop-filter:blur(20px);

    transition:0.35s;
}

.btn-secondary:hover{

    transform:
    translateY(-3px);
}

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

.hero-stats{

    display:flex;

    gap:55px;

    flex-wrap:wrap;
}

.hero-stat h3{

    font-size:42px;

    color:#008cff;

    margin-bottom:8px;

    font-weight:800;
}

.hero-stat span{

    color:#5f6e82;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* =========================================
RIGHT VISUAL
========================================= */

.hero-visual{

    position:relative;

    height:760px;
}

.hero-orb{

    position:absolute;

    top:50%;
    left:50%;

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

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.22),
        transparent 72%
    );

    filter:blur(50px);
}

.hero-dashboard{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%)
    rotate(-6deg);

    width:540px;

    border-radius:34px;

    overflow:hidden;

    background:white;

    box-shadow:
    0 40px 80px rgba(0,0,0,0.18);

    z-index:3;
}

.hero-dashboard img{

    width:100%;

    display:block;
}

.hero-panel{

    position:absolute;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:24px 28px;

    border-radius:24px;

    background:
    rgba(255,255,255,0.72);

    border:1px solid rgba(255,255,255,0.55);

    backdrop-filter:blur(25px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.10);

    z-index:5;
}

.hero-panel span{

    font-size:11px;

    letter-spacing:2px;

    color:#008cff;

    font-weight:700;
}

.hero-panel strong{

    font-size:22px;

    color:#091423;
}

.hero-panel-top{

    top:110px;
    right:0;
}

.hero-panel-bottom{

    bottom:110px;
    left:0;
}

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

@media(max-width:980px){

    .hero-section{

        padding:100px 0 80px;
    }

    .hero-container{

        grid-template-columns:1fr;

        gap:60px;
    }

    .hero-content{

        text-align:center;

        margin:auto;
    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;
    }

    .hero-stats{

        justify-content:center;
    }

    .hero-visual{

        height:540px;
    }

    .hero-dashboard{

        width:100%;

        max-width:420px;
    }

    .hero-panel{

        transform:scale(0.88);
    }

    .hero-panel-top{

        right:-10px;
    }

    .hero-panel-bottom{

        left:-10px;
    }
}

/* =========================================
PREMIUM HERO ANIMATIONS
========================================= */

.hero-content{

    animation:
    fadeUpHero 1.1s ease;
}

.hero-visual{

    animation:
    fadeHeroVisual 1.4s ease;
}

/* =========================================
HEADLINE
========================================= */

.hero-content h1{

    position:relative;

    z-index:2;
}

.hero-content h1::after{

    content:"";

    position:absolute;

    left:0;
    bottom:12px;

    width:180px;
    height:22px;

    background:
    linear-gradient(
        90deg,
        rgba(0,140,255,0.20),
        transparent
    );

    filter:blur(14px);

    z-index:-1;
}

/* =========================================
FLOATING MOTION
========================================= */

.hero-dashboard{

    animation:
    dashboardFloat 7s ease-in-out infinite;

    will-change:transform;
}

.hero-panel{

    will-change:transform;
}

.hero-panel-top{

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

.hero-panel-bottom{

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

.hero-orb{

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

/* =========================================
DASHBOARD GLOW
========================================= */

.hero-dashboard-glow{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top center,
        rgba(0,140,255,0.18),
        transparent 70%
    );

    pointer-events:none;

    mix-blend-mode:screen;
}

/* =========================================
BUTTONS
========================================= */

.btn-primary{

    position:relative;

    overflow:hidden;
}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

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

    transition:0.8s;
}

.btn-primary:hover::before{

    left:120%;
}

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

.hero-stat{

    transition:0.35s;
}

.hero-stat:hover{

    transform:
    translateY(-4px);
}

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

.hero-grid{

    animation:
    gridMoveSlow 40s linear infinite;
}

/* =========================================
ANIMATIONS
========================================= */

@keyframes dashboardFloat{

    0%{

        transform:
        translate(-50%,-50%)
        rotate(-6deg)
        translateY(0px);
    }

    50%{

        transform:
        translate(-50%,-50%)
        rotate(-6deg)
        translateY(-14px);
    }

    100%{

        transform:
        translate(-50%,-50%)
        rotate(-6deg)
        translateY(0px);
    }
}

@keyframes panelFloatTop{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}

@keyframes panelFloatBottom{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(10px);
    }

    100%{

        transform:translateY(0px);
    }
}

@keyframes orbPulse{

    0%{

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

        opacity:0.7;
    }

    50%{

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

        opacity:1;
    }

    100%{

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

        opacity:0.7;
    }
}

@keyframes fadeUpHero{

    from{

        opacity:0;

        transform:
        translateY(50px);
    }

    to{

        opacity:1;

        transform:
        translateY(0px);
    }
}

@keyframes fadeHeroVisual{

    from{

        opacity:0;

        transform:
        translateX(60px);
    }

    to{

        opacity:1;

        transform:
        translateX(0px);
    }
}

@keyframes gridMoveSlow{

    from{

        transform:translateY(0px);
    }

    to{

        transform:translateY(70px);
    }
}
/* =========================================
PREMIUM STATS
========================================= */

.hero-stats{

    display:flex;

    gap:22px;

    margin-top:55px;

    flex-wrap:wrap;
}

.hero-stat{

    position:relative;

    min-width:190px;

    padding:26px 24px;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:
    blur(20px);

    overflow:hidden;

    transition:
    transform 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
}

.hero-stat::before{

    content:"";

    position:absolute;

    top:-40%;
    right:-20%;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.22),
        transparent 70%
    );

    filter:blur(18px);

    opacity:0.8;
}

.hero-stat:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(0,140,255,0.25);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12),
    0 0 30px rgba(0,140,255,0.12);
}

.hero-stat-number{

    font-size:56px;

    font-weight:800;

    line-height:1;

    letter-spacing:-3px;

    color:#2d7dff;

    margin-bottom:18px;

    font-family:'Inter',sans-serif;

    text-shadow:
    0 0 20px rgba(0,140,255,0.18);
}

.hero-stat-line{

    width:46px;
    height:2px;

    border-radius:20px;

    margin-bottom:18px;

    background:
    linear-gradient(
        90deg,
        #008cff,
        transparent
    );
}

.hero-stat span{

    display:block;

    color:rgba(15,25,45,0.72);

    font-size:13px;

    line-height:1.7;

    text-transform:uppercase;

    letter-spacing:1.8px;

    font-weight:600;
}

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

@media(max-width:768px){

    .hero-stats{

        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
    }

    .hero-stat{

        width:100%;

        min-width:100%;

        padding:18px 20px;

        box-sizing:border-box;
    }

    .hero-stat-number{

        font-size:38px;
    }

    .hero-stat span{

        font-size:10px;

        letter-spacing:1.2px;
    }
}

/* =========================================
COMMAND SECTION
========================================= */
/* =========================================
COMMAND SECTION
========================================= */

.command-section{

    position:relative;

    overflow:hidden;

    padding:110px 0 120px;

    background:
    radial-gradient(circle at top right,
    rgba(0,120,255,0.18),
    transparent 35%),

    linear-gradient(
        180deg,
        #020617 0%,
        #030b1d 100%
    );
}

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

.command-grid{

    position:absolute;

    inset:0;

    opacity:0.03;

    background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:72px 72px;

    mask-image:
    radial-gradient(circle at center,
    black 30%,
    transparent 100%);
}

/* =========================================
TOP HEADING
========================================= */

.command-heading{

    position:relative;

    z-index:3;

    text-align:center;

    max-width:1200px;

    margin:auto auto 60px;
}

.command-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#2d8cff;

    font-size:12px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:34px;

    backdrop-filter:blur(20px);
}

.command-heading h2{

    font-family:'DM Serif Display',serif;

    font-size:clamp(4.5rem,9vw,9rem);

    line-height:0.9;

    letter-spacing:-5px;

    color:white;

    margin-bottom:34px;
}

.command-heading p{

    max-width:900px;

    margin:auto;

    font-family:'Inter',sans-serif;

    font-size:22px;

    line-height:1.8;

    color:rgba(255,255,255,0.68);
}

/* =========================================
LAYOUT
========================================= */

.command-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;
}

/* =========================================
LEFT
========================================= */

.command-cards{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.command-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    padding:18px 24px;

    min-height:105px;

    border-radius:28px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,0.045),

        rgba(255,255,255,0.015)

    );

    border:

    1px solid rgba(255,255,255,0.06);

    backdrop-filter:blur(20px);

    overflow:hidden;

    transition:

    transform .45s ease,

    border-color .45s ease,

    box-shadow .45s ease,

    background .45s ease;

}

.command-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,140,255,0.10),
        transparent 40%
    );

    opacity:0;

    transition:0.5s;
}

.command-card:hover{

    transform:
    translateY(-8px);
    

    border-color:
    rgba(0,140,255,0.25);

    box-shadow:
    0 30px 80px rgba(0,0,0,0.35),
    0 0 40px rgba(0,140,255,0.12);
}

.command-card:hover::before{

    opacity:1;
}

.command-card.active{

    transform:
    translateY(-4px)
    scale(1.01);

    border-color:
    rgba(0,140,255,0.20);

    background:
    linear-gradient(
        180deg,
        rgba(0,140,255,0.10),
        rgba(255,255,255,0.02)
    );

    box-shadow:
    0 20px 60px rgba(0,0,0,0.25),
    0 0 40px rgba(0,140,255,0.08);
}

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

.command-icon{

    min-width:64px;
    width:64px;

    height:64px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        180deg,
        rgba(0,140,255,0.22),
        rgba(0,140,255,0.08)
    );

    border:
    1px solid rgba(0,140,255,0.22);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(0,140,255,0.16);

    font-size:24px;

    color:#58a6ff;

    backdrop-filter:blur(20px);
}
.command-icon svg{

      width:36px;

    height:36px;

    stroke-width:1.8;
}

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

.command-info{

    flex:1;
}

.command-top{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;
}

.command-top span{

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;

    font-family:'Inter',sans-serif;
}

.command-top h3{

    color:white;

    font-family:'DM Serif Display',serif;

    font-size:34px;

    line-height:1;

    letter-spacing:-2px;
}
.command-info h3{

    font-size:24px;

    letter-spacing:-1px;

    color:white;

    font-weight:700;

    margin:0;
}

.command-info p{

    font-family:'Inter',sans-serif;

    margin-top:6px;

    font-size:14px;

    line-height:1.55;

    color:rgba(255,255,255,0.56);

    max-width:420px;
}

/* =========================================
ARROW
========================================= */

.command-arrow{

    color:#2d8cff;

    font-size:34px;

    transition:0.4s;
}

.command-card:hover .command-arrow{

    transform:
    translateX(8px);
}

/* =========================================
RIGHT PREVIEW
========================================= */

.command-right{

    position:sticky;

    top:120px;
}

.command-preview{

    padding:12px;
height:760px;
    border-radius:44px;

    background:

linear-gradient(

    180deg,

    rgba(255,255,255,0.08),

    rgba(255,255,255,0.02)

);

box-shadow:

0 50px 120px rgba(0,0,0,0.55),

0 0 80px rgba(0,140,255,0.14);

border:

1px solid rgba(255,255,255,0.08);
    transform:
    perspective(2200px)
    rotateY(-7deg)
    rotateX(3deg);

    transition:
    transform .6s ease;
}

.command-preview:hover{

    transform:
    perspective(2200px)
    rotateY(-4deg)
    rotateX(2deg)
    translateY(-6px);
}

.command-preview::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:40px;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.18),
        transparent 35%,
        rgba(0,140,255,0.16)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;
}

.command-preview img{


    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:

    transform .7s ease,

    opacity .4s ease;
    border-radius:32px;

    aspect-ratio:16/10;

    object-fit:cover;

    filter:
    contrast(1.08)
    saturate(1.12)
    brightness(1.02);

    transition:
    transform .8s ease,
    opacity .5s ease,
    filter .5s ease;
}

.command-preview:hover img{

    transform:scale(1.02);
}

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

.command-preview-glow{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.20),
        transparent 70%
    );

    filter:blur(80px);

    top:50%;
    left:50%;

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

    z-index:-1;
}

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

@keyframes workspaceFloat{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}

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

@media(max-width:1100px){

    .command-container{

        grid-template-columns:1fr;

        gap:50px;
    }

    .command-right{

        position:relative;

        top:auto;
    }

    .command-heading h2{

        font-size:clamp(3.5rem,12vw,6rem);
    }
}

@media(max-width:768px){

    .command-card{

        flex-direction:column;

        align-items:flex-start;
    }

    .command-top{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;
    }

    .command-top h3{

        font-size:32px;
    }

    .command-heading p{

        font-size:18px;
    }
}

/* =========================================
ECOSYSTEM SECTION
========================================= */

.ecosystem-section{

    position:relative;

    overflow:hidden;

     padding:90px 0;

    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #040b1d 100%
    );
}

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

.ecosystem-grid{

    position:absolute;

    inset:0;

    opacity:0.06;

    background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:72px 72px;
}

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

.ecosystem-glow{

    position:absolute;

    top:50%;
    right:-200px;

    transform:translateY(-50%);

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.20),
        transparent 70%
    );

    filter:blur(100px);
}

/* =========================================
LAYOUT
========================================= */

.ecosystem-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:460px 1fr;

    gap:55px;

    align-items:center;
}

/* =========================================
LEFT
========================================= */

.ecosystem-left{

    position:relative;

    z-index:3;
}

.ecosystem-tag{

    display:inline-flex;

    padding:14px 28px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#2d8cff;

    font-size:12px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:40px;

    backdrop-filter:blur(20px);
}

.ecosystem-left h2{

    font-family:'DM Serif Display',serif;

    font-size:clamp(4rem,6vw,6.8rem);

    line-height:0.95;

    letter-spacing:-4px;

    color:white;

    margin-bottom:34px;
}

.ecosystem-left h2 span{

    color:#2d8cff;
}

.ecosystem-left p{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,0.65);

    max-width:520px;

    margin-bottom:50px;
}

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

.ecosystem-stats{

    display:flex;

    gap:20px;

    margin-bottom:55px;
}

.eco-stat{

    flex:1;

    padding:28px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.015)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    transition:0.45s;
}

.eco-stat:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 30px 80px rgba(0,0,0,0.35),
    0 0 40px rgba(0,140,255,0.10);
}

.eco-icon{

    width:54px;
    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    background:
    linear-gradient(
        180deg,
        rgba(0,140,255,0.18),
        rgba(0,140,255,0.06)
    );

    color:#58a6ff;
}

.eco-stat strong{

    display:block;

    color:white;

    font-size:42px;

    margin-bottom:10px;

    font-weight:800;
}

.eco-stat span{

    color:rgba(255,255,255,0.58);

    font-size:14px;
}

/* =========================================
TECH STACK
========================================= */

.ecosystem-tech span{

    display:block;

    margin-bottom:18px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}

.ecosystem-tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.ecosystem-tech-list div{

    width:120px;
    height:86px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    transition:.35s ease;

    overflow:hidden;
}

.ecosystem-tech-list div:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(0,140,255,0.20);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    0 0 30px rgba(0,140,255,0.12);
}

.ecosystem-tech-list img{

    width:58px;

    opacity:.92;

    filter:
    brightness(0)
    invert(1);

    transition:.35s ease;
}

.ecosystem-tech-list div:hover img{

    transform:scale(1.08);

    opacity:1;
}
/* =========================================
RIGHT
========================================= */

.ecosystem-right{

    position:relative;

    min-height:820px;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* =========================================
LAPTOP
========================================= */
.ecosystem-laptop-parallax{

    position:relative;

    width:100%;

    max-width:1000px;

    transition:

    transform .35s ease;

    will-change:transform;

}
.ecosystem-laptop{

   position:relative;

    z-index:2;

    width:100%;

    animation:

    ecosystemLaptopFloat 7s ease-in-out infinite;
}

@keyframes ecosystemLaptopFloat{

    0%{

        transform:
        translateY(0px)
        rotate(-0.4deg);
    }

    50%{

        transform:
        translateY(-8px)
        rotate(0.4deg);
    }

    100%{

        transform:
        translateY(0px)
        rotate(-0.4deg);
    }
}

.ecosystem-laptop::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-40px;

    transform:translateX(-50%);

    width:70%;
    height:60px;

    background:
    radial-gradient(
        ellipse,
        rgba(0,140,255,0.22),
        transparent 70%
    );

    filter:blur(28px);

    z-index:-1;

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

@keyframes laptopGlowPulse{

    0%{

        opacity:.45;

        transform:
        translateX(-50%)
        scale(1);
    }

    50%{

        opacity:1;

        transform:
        translateX(-50%)
        scale(1.08);
    }

    100%{

        opacity:.45;

        transform:
        translateX(-50%)
        scale(1);
    }
}



.ecosystem-laptop img{

    width:100%;

    display:block;

    filter:

drop-shadow(0 80px 140px rgba(0,0,0,0.65))

drop-shadow(0 0 50px rgba(0,140,255,0.10));
}

/* =========================================
PREMIUM FLOATING CARDS
========================================= */

.eco-floating{

    position:absolute;

    overflow:hidden;

    z-index:5;

    width:290px;

    padding:24px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        rgba(8,15,35,0.94),
        rgba(3,8,20,0.88)
    );

    border:
    1px solid rgba(120,180,255,0.12);

   backdrop-filter:

blur(40px)

saturate(180%);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.08),

    0 30px 80px rgba(0,0,0,0.45),

    0 0 60px rgba(0,140,255,0.10);

    opacity:0;

    transform:
    translateY(60px)
    scale(.92);

    animation:
    ecoCardEntrance 1.2s cubic-bezier(.16,1,.3,1) forwards;

    transition:
    transform .5s ease,
    border-color .5s ease,
    box-shadow .5s ease;
}

/* =========================================
TOP LIGHT LINE
========================================= */

.eco-floating::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

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

    opacity:.8;
}
.ecosystem-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at 70% 40%,
        rgba(0,140,255,0.08),
        transparent 40%
    );

    pointer-events:none;

    z-index:0;
}
/* =========================================
INNER GLOW
========================================= */

.eco-floating::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.12),
        transparent 40%,
        rgba(0,140,255,0.16)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;
}

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

.eco-floating:hover{

    transform:
    translateY(-10px)
    scale(1.03);

    border-color:
    rgba(0,140,255,0.22);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.10),

    0 50px 120px rgba(0,0,0,0.55),

    0 0 80px rgba(0,140,255,0.18);
}

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

.eco-label{

    display:block;

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:14px;

    font-family:'Inter',sans-serif;
}

.eco-sub{

    display:block;

    color:rgba(255,255,255,0.48);

    font-size:15px;

    margin-bottom:14px;

    font-family:'Inter',sans-serif;
}

.eco-number{

    display:flex;

    align-items:flex-end;

    gap:14px;

    margin-bottom:20px;
}

.eco-number strong{

    color:white;

    font-size:56px;

    line-height:1;

    letter-spacing:-4px;

    font-weight:800;

    font-family:'Inter',sans-serif;
}

.eco-growth{

    display:flex;

    align-items:center;

    gap:5px;

    color:#20ff9c;

    font-size:15px;

    font-weight:600;

    margin-bottom:10px;
}

/* =========================================
CHART
========================================= */

.eco-chart{

    width:100%;

    height:70px;
}

.eco-chart path{

    stroke-dasharray:400;

    stroke-dashoffset:400;

    animation:
    chartDraw 2.2s ease forwards;
}

/* =========================================
PERFORMANCE CIRCLE
========================================= */

.eco-circle{

    position:relative;

    width:92px;
    height:92px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    conic-gradient(
        #2d8cff 0deg,
        #58a6ff 320deg,
        rgba(255,255,255,0.08) 320deg
    );

    margin-right:18px;
}

.eco-circle::before{

    content:"";

    position:absolute;

    width:66px;
    height:66px;

    border-radius:50%;

    background:#07111f;
}

.eco-circle strong{

    position:relative;

    z-index:2;

    color:white;

    font-size:34px;

    font-weight:800;
}

/* =========================================
CRM AVATARS
========================================= */

.eco-avatars{

    display:flex;

    align-items:center;

    margin-top:18px;
}

.eco-avatars img{

    width:42px;
    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #091423;

    margin-left:-10px;
}

.eco-more{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(255,255,255,0.06);

    color:white;

    font-size:13px;

    margin-left:-10px;
}

/* =========================================
INTEGRATIONS
========================================= */

.eco-tools{

    display:flex;

    gap:12px;

    margin:20px 0;
}

.eco-tool{

    width:54px;
    height:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.06);
}

.eco-tool img{

    width:28px;
}

/* =========================================
POSITIONS
========================================= */

.eco-card-1{

    top:30px;
    left:0;

    animation-delay:.1s;
}

.eco-card-2{

    top:20px;
    right:40px;

    animation-delay:.3s;
}

.eco-card-3{

    bottom:80px;
    left:40px;

    animation-delay:.5s;
}

.eco-card-4{

    bottom:40px;
    right:0;

    animation-delay:.7s;
}

/* =========================================
ANIMATIONS
========================================= */

@keyframes ecoCardEntrance{

    to{

        opacity:1;

        transform:
        translateY(0px)
        scale(1);
    }
}

@keyframes chartDraw{

    to{

        stroke-dashoffset:0;
    }
}
.eco-card-1{

    animation:
    ecoCardEntrance 1.2s cubic-bezier(.16,1,.3,1) forwards,
    ecoFloat1 6s ease-in-out infinite;

    animation-delay:.1s;
}

.eco-card-2{

    animation:
    ecoCardEntrance 1.2s cubic-bezier(.16,1,.3,1) forwards,
    ecoFloat2 7s ease-in-out infinite;

    animation-delay:.3s;
}

.eco-card-3{

    animation:
    ecoCardEntrance 1.2s cubic-bezier(.16,1,.3,1) forwards,
    ecoFloat3 5.5s ease-in-out infinite;

    animation-delay:.5s;
}

.eco-card-4{

    animation:
    ecoCardEntrance 1.2s cubic-bezier(.16,1,.3,1) forwards,
    ecoFloat4 8s ease-in-out infinite;

    animation-delay:.7s;
}
@keyframes ecoFloat1{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-10px);
    }

    100%{

        transform:
        translateY(0px);
    }
}

@keyframes ecoFloat2{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(12px);
    }

    100%{

        transform:
        translateY(0px);
    }
}

@keyframes ecoFloat3{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-8px);
    }

    100%{

        transform:
        translateY(0px);
    }
}

@keyframes ecoFloat4{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(6px);
    }

    100%{

        transform:
        translateY(0px);
    }
}
.ecosystem-right::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.12),
        transparent 70%
    );

    filter:blur(90px);

    top:50%;
    left:50%;

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

    z-index:0;
}

@media(max-width:768px){

    .ecosystem-container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .ecosystem-right{

        min-height:auto;

    }

    .eco-floating{

        display:none;

    }

}
/* =========================================
TECH PREMIUM LOGOS
========================================= */

.ecosystem-tech-logos{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.tech-logo{

    width:120px;

    height:84px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.015)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:
    blur(30px);

    transition:
    transform .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}

.tech-logo::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(0,140,255,0.16),
        transparent 65%
    );

    opacity:0;

    transition:.45s;
}

.tech-logo:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(0,140,255,0.22);

    box-shadow:

    0 20px 60px rgba(0,0,0,0.35),

    0 0 35px rgba(0,140,255,0.12);
}

.tech-logo:hover::before{

    opacity:1;
}

.tech-logo img{

    width:100%;

    max-width:180px;

    height:auto;

    object-fit:contain;

    display:block;

    opacity:1;

    filter:none;

    transition:
    transform .35s ease,
    opacity .35s ease;
}

/* MOBILE */

@media(max-width:768px){

    .ecosystem-tech-logos{

        gap:12px;
    }

    .tech-logo{

        width:92px;

        height:68px;

        border-radius:18px;
    }

  

} /* =========================================
TECH LOGOS PREMIUM
========================================= */

.ecosystem-tech-logos{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:10px;
}

.tech-logo{

    width:120px;
    height:88px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:26px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.015)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:
    blur(20px);

    overflow:hidden;

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.tech-logo:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(0,140,255,0.22);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    0 0 35px rgba(0,140,255,0.10);
}



.tech-logo:hover img{

    transform:scale(1.08);

    opacity:1;
}

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

@media(max-width:768px){

    .ecosystem-tech-logos{

        gap:14px;
    }

    .tech-logo{

        width:92px;
        height:72px;
    }

    .tech-logo img{

        width:44px;
    }
}

/* =========================================
ECOSYSTEM EXTRA AIR
========================================= */

.ecosystem-section .container{

    padding-left:60px;

    padding-right:90px;
}

/* MOBILE */

@media(max-width:768px){

    .ecosystem-section .container{

        padding-left:22px;

        padding-right:22px;
    }

}

/* =========================================
IMPACT SECTION
========================================= */

.impact-section{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #050b18 100%
    );
}

/* GRID */

.impact-grid{

    position:absolute;

    inset:0;

    opacity:0.04;

    background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:72px 72px;
}

/* GLOW */

.impact-glow{

    position:absolute;

    top:50%;
    left:50%;

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

    width:1000px;
    height:1000px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.14),
        transparent 70%
    );

    filter:blur(100px);
}

/* CONTAINER */

.impact-container{

    position:relative;

    z-index:2;
}

/* HEADING */

.impact-heading{

    text-align:center;

    max-width:980px;

    margin:0 auto 60px;
}

.impact-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:30px;
}

.impact-heading h2{

    font-size:clamp(3.5rem,7vw,6.8rem);

    line-height:0.95;

    letter-spacing:-4px;

    color:white;

    margin-bottom:28px;

    font-weight:800;
}

.impact-heading h2 span{

    color:#2d8cff;
}

.impact-heading p{

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,0.65);
}

/* GRID */

.impact-projects{

    display:grid;

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

    gap:28px;
}

/* CARD */

.impact-card{

    position:relative;

    overflow:hidden;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.015)
    );

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    transition:
    transform .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}

.impact-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(0,140,255,0.22);

    box-shadow:
    0 30px 80px rgba(0,0,0,0.45),
    0 0 40px rgba(0,140,255,0.12);
}

/* IMAGE */

.impact-image{

    position:relative;

    overflow:hidden;

    height:300px;

    border-bottom:
    1px solid rgba(255,255,255,0.06);

    cursor:pointer;
}

.impact-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:top center;

    transition:
    transform .7s ease;
}

.impact-card:hover .impact-image img{

    transform:scale(1.05);
}

/* CONTENT */

.impact-content{

    padding:30px;
}

.impact-category{

    display:inline-flex;

    margin-bottom:18px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;
}

.impact-content h3{

    color:white;

    font-size:36px;

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:18px;

    font-weight:700;
}

.impact-content p{

    color:rgba(255,255,255,0.62);

    font-size:16px;

    line-height:1.7;

    margin-bottom:26px;
}

/* TAGS */

.impact-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.impact-tags span{

    padding:10px 16px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.06);

    color:white;

    font-size:12px;

    letter-spacing:1px;
}

/* MOBILE */

@media(max-width:1100px){

    .impact-projects{

        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){

    .impact-section{

        padding:90px 0;
    }

    .impact-projects{

        grid-template-columns:1fr;
    }

    .impact-heading h2{

        font-size:clamp(2.8rem,10vw,4rem);
    }

    .impact-content{

        padding:24px;
    }

    .impact-content h3{

        font-size:30px;
    }
}
/* =========================================
PROJECT MODAL
========================================= */

.project-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(0,0,0,0.88);

    backdrop-filter:blur(12px);

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .35s ease,
    visibility .35s ease;

    padding:40px;
}

.project-modal.active{

    opacity:1;

    visibility:visible;
}

.project-modal img{

    max-width:92%;

    max-height:92vh;

    border-radius:30px;

    box-shadow:
    0 40px 120px rgba(0,0,0,0.55);

    transform:scale(.92);

    transition:
    transform .35s ease;
}

.project-modal.active img{

    transform:scale(1);
}

.project-modal-close{

    position:absolute;

    top:30px;
    right:30px;

    width:56px;
    height:56px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,0.08);

    color:white;

    font-size:24px;

    cursor:pointer;

    backdrop-filter:blur(20px);

    transition:.35s ease;
}

.project-modal-close:hover{

    transform:
    rotate(90deg);

    background:
    rgba(255,255,255,0.16);
}

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

.services-section{

    position:relative;

    overflow:hidden;

     padding:90px 0;

    background:
    linear-gradient(
        180deg,
        #f2f6fb 0%,
        #eef4fb 100%
    );
}

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

.services-noise{

    position:absolute;

    inset:0;

    opacity:.4;

    background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);

    background-size:72px 72px;
}

.services-gradient{

    position:absolute;

    top:-300px;
    right:-300px;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(45,140,255,0.10),
        transparent 70%
    );

    filter:blur(80px);
}

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

.services-heading{

    position:relative;

    z-index:2;

    max-width:980px;

    margin:0 auto 70px;

    text-align:center;
}

.services-tag{

    display:inline-flex;

    margin-bottom:28px;

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;
}

.services-heading h2{

    font-size:clamp(4rem,7vw,7rem);

    line-height:.92;

    letter-spacing:-5px;

    color:#071120;

    margin-bottom:30px;

    font-weight:800;
}

.services-heading h2 span{

    color:#2d8cff;
}

.services-heading p{

    max-width:760px;

    margin:auto;

    color:#5e6f85;

    font-size:20px;

    line-height:1.8;
}

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

.services-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr;

    gap:28px;
}

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

.service-card{

    position:relative;

    overflow:hidden;

    border-radius:38px;

    padding:38px;

    transition:
    transform .45s ease,
    box-shadow .45s ease;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.06);
}

.service-card:hover{

    transform:
    translateY(-10px);
}

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

.service-card-top{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:28px;
}

.service-card-top i{

    width:24px;
    height:24px;
}

.service-card-top span{

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;
}

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

.service-card h3{

    font-size:44px;

    line-height:.95;

    letter-spacing:-3px;

    margin-bottom:20px;

    font-weight:800;
}

.service-card p{

    font-size:17px;

    line-height:1.8;
}

/* =========================================
DARK
========================================= */

.service-dark{

    grid-row:span 2;

    min-height:880px;

    background:
    linear-gradient(
        180deg,
        #071120 0%,
        #0b1728 100%
    );

    color:white;
}

.service-dark h3,
.service-dark p{

    color:white;
}

.service-dark span{

    color:#58a6ff;
}

.service-dark i{

    color:#58a6ff;
}

.service-dark img{

    position:absolute;

    bottom:-40px;
    right:-100px;

    width:108%;

    border-radius:28px;

    box-shadow:
    0 40px 100px rgba(0,0,0,0.35);
}

/* =========================================
ICE
========================================= */

.service-ice{

    background:#edf5ff;
}

.service-ice h3{

    color:#071120;
}

.service-ice p{

    color:#5d6f84;
}

.service-ice span,
.service-ice i{

    color:#2d8cff;
}

/* =========================================
CYAN
========================================= */

.service-cyan{

    background:
    linear-gradient(
        180deg,
        #effcff 0%,
        #e2f7ff 100%
    );
}

.service-cyan span,
.service-cyan i{

    color:#00a6d6;
}

.service-cyan p{

    color:#55717c;
}

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

.service-light{

    background:white;
}

.service-light span,
.service-light i{

    color:#2d8cff;
}

/* =========================================
ANALYTICS
========================================= */

.service-analytics{

    background:
    linear-gradient(
        180deg,
        #f4f7fb 0%,
        #edf3f9 100%
    );
}

.analytics-chart{

    display:flex;

    align-items:flex-end;

    gap:14px;

    margin-top:35px;

    height:120px;
}

.bar{

    flex:1;

    border-radius:20px;

    background:
    linear-gradient(
        180deg,
        #2d8cff,
        #7cc7ff
    );

    animation:barGrow 2s infinite alternate;
}

.bar:nth-child(1){

    height:45%;
}

.bar:nth-child(2){

    height:80%;
}

.bar:nth-child(3){

    height:60%;
}

.bar:nth-child(4){

    height:100%;
}

@keyframes barGrow{

    from{

        opacity:.7;
    }

    to{

        opacity:1;
    }
}

/* =========================================
WIDE
========================================= */

.service-wide{

    grid-column:span 2;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:40px;

    align-items:center;

    background:
    linear-gradient(
        180deg,
        #081120 0%,
        #0b1728 100%
    );

    color:white;
}

.service-wide h3,
.service-wide p{

    color:white;
}

.service-wide span,
.service-wide i{

    color:#58a6ff;
}

/* =========================================
TERMINAL
========================================= */

.service-terminal{

    padding:30px;

    border-radius:28px;

    background:#020817;
}

.terminal-line{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:white;

    font-size:14px;

    font-weight:600;
}

.terminal-line span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff88;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

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

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

@media(max-width:1100px){

    .services-grid{

        grid-template-columns:1fr 1fr;
    }

    .service-dark{

        grid-column:span 2;
    }

    .service-wide{

        grid-column:span 2;
    }
}

@media(max-width:768px){

    .services-section{

        padding:90px 0;
    }

    .services-grid{

        grid-template-columns:1fr;
    }

    .service-dark,
    .service-wide{

        grid-column:span 1;

        grid-row:auto;
    }

    .service-wide{

        grid-template-columns:1fr;
    }

    .service-dark{

        min-height:auto;
    }

    .service-dark img{

        position:relative;

        width:100%;

        right:auto;
        bottom:auto;

        margin-top:30px;
    }

    .service-card h3{

        font-size:34px;
    }

    .services-heading h2{

        font-size:clamp(2.8rem,10vw,4rem);
    }
}
/* =========================================
BACKGROUND ICON
========================================= */

.service-bg-icon{

    position:absolute;

    right:-40px;
    bottom:-40px;

    opacity:.12;

    pointer-events:none;

    z-index:1;

    filter:
    blur(1px);

    color:rgba(255,255,255,0.9);
}

/* DARK */

.service-dark .service-bg-icon{

    opacity:.12;

    color:rgba(255,255,255,0.9);
}

/* ICE */

.service-ice .service-bg-icon{

    opacity:.07;

    color:#2d8cff;
}

/* CYAN */

.service-cyan .service-bg-icon{

    opacity:.08;

    color:#00a6d6;
}

/* LIGHT */

.service-light .service-bg-icon{

    opacity:.11;

    color:#2d8cff;

}
/* ANALYTICS */

.service-analytics .service-bg-icon{

    opacity:.06;

    color:#2d8cff;
}


.service-light .service-bg-icon svg{

    width:300px;

    height:300px;

    stroke-width:.9;

}
/* WIDE */

.service-wide .service-bg-icon{

    opacity:.10;

    color:white;
}
.service-bg-icon svg{

    width:260px;
    height:260px;

    stroke-width:1.1;
}

.service-card{

    position:relative;

    isolation:isolate;

}
.service-card > *{

    position:relative;

    z-index:2;
}

/* DARK */

.service-dark .service-bg-icon{

    opacity:.12;
}

/* LIGHT */

.service-light .service-bg-icon,
.service-ice .service-bg-icon,
.service-cyan .service-bg-icon{

    opacity:.12;
}

@media(max-width:768px){

    .service-bg-icon{

        right:-20px;
        bottom:-20px;

        opacity:.05;
    }

    .service-bg-icon svg{

        width:160px;
        height:160px;
    }

}

@media(max-width:768px){

    .command-preview{

        height:420px;

        border-radius:28px;

        transform:none;
    }

    .command-preview:hover{

        transform:none;
    }

    .command-preview img{

        border-radius:22px;
    }

}/* =========================================
FINAL CTA
========================================= */

.final-cta-section{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background:
    linear-gradient(
        180deg,
       #f2f6fb 0%,
        #eef5fc 100%
    );
}

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

.final-cta-grid{

    position:absolute;

    inset:0;

    opacity:.45;

    background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);

    background-size:72px 72px;
}

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

.final-cta-glow{

    position:absolute;

    top:50%;
    left:50%;

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

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.12),
        transparent 70%
    );

    filter:blur(90px);
}

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

.final-cta-container{

    position:relative;

    z-index:2;

    max-width:1100px;

    margin:auto;

    text-align:center;
}

/* =========================================
TAG
========================================= */

.final-cta-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:34px;

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;
}

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

.final-cta-container h2{

    font-size:clamp(4rem,7vw,7rem);

    line-height:.92;

    letter-spacing:-5px;

    color:#071120;

    margin-bottom:32px;

    font-weight:800;
}

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

.final-cta-container p{

    max-width:760px;

    margin:auto auto 55px;

    color:#5d6d82;

    font-size:21px;

    line-height:1.9;
}

/* =========================================
BUTTONS
========================================= */

.final-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:60px;
}

.final-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:62px;

    padding:0 38px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #008cff,
        #005eff
    );

    color:white;

    font-weight:700;

    text-decoration:none;

    box-shadow:
    0 18px 45px rgba(0,140,255,0.22);

    transition:.35s ease;
}

.final-btn-primary:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 25px 60px rgba(0,140,255,0.30);
}

.final-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:62px;

    padding:0 38px;

    border-radius:18px;

    background:white;

    border:
    1px solid rgba(0,0,0,0.06);

    color:#071120;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;
}

.final-btn-secondary:hover{

    transform:
    translateY(-4px);

    border-color:
    rgba(0,140,255,0.18);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08);
}

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

.final-cta-bottom{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;
}

.final-cta-bottom span{

    padding:12px 18px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(0,0,0,0.05);

    color:#526277;

    font-size:12px;

    letter-spacing:1.5px;

    font-weight:600;

    backdrop-filter:blur(20px);
}

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

@media(max-width:768px){

    .final-cta-section{

        padding:90px 0;
    }

    .final-cta-container h2{

        font-size:clamp(2.8rem,11vw,4rem);

        letter-spacing:-3px;
    }

    .final-cta-container p{

        font-size:18px;
    }

    .final-cta-buttons{

        flex-direction:column;
    }

    .final-btn-primary,
    .final-btn-secondary{

        width:100%;
    }

}

/* =========================================

MOBILE FIXES

========================================= */

@media(max-width:768px){

    html,

    body{

        overflow-x:hidden;

    }

    .hero-dashboard,

    .command-preview,

    .ecosystem-laptop-parallax{

        transform:none !important;

    }

    .command-section,

    .ecosystem-section,

    .impact-section,

    .services-section,

    .final-cta-section{

        overflow:visible;

    }

    footer{

        position:relative;

        z-index:99;

        isolation:isolate;

    }

}
/* =========================================
WEB HERO
========================================= */

.web-hero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

   padding:220px 0 180px;



    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #071120 100%
    );
}



.web-hero-grid{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:72px 72px;
}

.web-hero-glow{

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.18),
        transparent 70%
    );

    filter:blur(100px);

    top:50%;
    right:-250px;

    transform:translateY(-50%);
}
/* =========================================
ATMOSPHERIC HERO
========================================= */

.web-hero-noise{

    position:absolute;

    inset:0;

    z-index:1;

    opacity:.018;

    pointer-events:none;

    background-image:
    url("https://www.transparenttextures.com/patterns/noise.png");

    mix-blend-mode:overlay;
}

/* =========================================
ATMOSPHERE
========================================= */

.web-hero-atmosphere{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

    radial-gradient(
        circle at 75% 35%,
        rgba(0,140,255,.14),
        transparent 32%
    ),

    radial-gradient(
        circle at 20% 70%,
        rgba(88,166,255,.08),
        transparent 28%
    );

    filter:blur(40px);
}

/* =========================================
WIRE FRAME
========================================= */

.web-hero-wireframe{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    overflow:hidden;
}

/* =========================================
BOXES
========================================= */

.wireframe-box{

    position:absolute;

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

    border-radius:28px;

    backdrop-filter:blur(2px);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.01),
        rgba(255,255,255,.005)
    );
}

/* BOX 1 */

.wire-1{

    width:420px;
    height:240px;

    top:180px;
    right:120px;

    transform:
    rotate(-12deg);

    animation:
    wireFloat1 18s ease-in-out infinite;
}

/* BOX 2 */

.wire-2{

    width:280px;
    height:160px;

    bottom:140px;
    right:260px;

    transform:
    rotate(8deg);

    animation:
    wireFloat2 22s ease-in-out infinite;
}

/* BOX 3 */

.wire-3{

    width:180px;
    height:180px;

    top:120px;
    right:420px;

    border-radius:50%;

    animation:
    wireFloat3 20s ease-in-out infinite;
}

/* =========================================
LINES
========================================= */

.wire-line{

    position:absolute;

    display:block;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(88,166,255,.18),
        transparent
    );

    opacity:.45;
}

/* LINE 1 */

.line-1{

    width:420px;
    height:1px;

    top:240px;
    right:180px;

    transform:
    rotate(-18deg);
}

/* LINE 2 */

.line-2{

    width:320px;
    height:1px;

    bottom:220px;
    right:260px;

    transform:
    rotate(14deg);
}

/* LINE 3 */

.line-3{

    width:180px;
    height:1px;

    top:420px;
    right:520px;

    transform:
    rotate(90deg);
}

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

@keyframes wireFloat1{

    0%{

        transform:
        rotate(-12deg)
        translateY(0px);
    }

    50%{

        transform:
        rotate(-12deg)
        translateY(-18px);
    }

    100%{

        transform:
        rotate(-12deg)
        translateY(0px);
    }
}

@keyframes wireFloat2{

    0%{

        transform:
        rotate(8deg)
        translateY(0px);
    }

    50%{

        transform:
        rotate(8deg)
        translateY(14px);
    }

    100%{

        transform:
        rotate(8deg)
        translateY(0px);
    }
}

@keyframes wireFloat3{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-12px);
    }

    100%{

        transform:
        translateY(0px);
    }
}
.web-hero-container{

    position:relative;

   z-index:5;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;
}

.web-hero-tag{

    display:inline-flex;

    padding:14px 24px;

    border-radius:999px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    color:#58a6ff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:34px;
}

.web-hero-left h1{

    font-size:clamp(4.8rem,7vw,7.2rem);

    line-height:.92;

    letter-spacing:-5px;

    color:white;

    margin-bottom:34px;
text-wrap:balance;
    font-weight:700;
     max-width:760px;
     text-shadow:

0 10px 40px rgba(0,0,0,.35);
}

.web-hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.35),
        transparent 40%
    );

    z-index:1;
}

.web-hero-section::after{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:220px;

    background:
    linear-gradient(
        180deg,
        rgba(2,6,23,0.92),
        transparent
    );

    z-index:2;

    pointer-events:none;
}

.web-hero-left{

    position:relative;

    z-index:10;
}
.web-hero-right{

    position:relative;

    z-index:10;
}

.web-hero-left p{

    max-width:720px;

    font-size:21px;

    line-height:1.9;

    color:rgba(255,255,255,0.72);

    margin-bottom:50px;
}

.web-hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:60px;
}

.web-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:62px;

    padding:0 38px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #008cff,
        #005eff
    );

    color:white;

    text-decoration:none;

    font-weight:700;

    box-shadow:
    0 20px 60px rgba(0,140,255,0.25);

    transition:.35s ease;
}

.web-btn-primary:hover{

    transform:translateY(-4px);
}

.web-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:62px;

    padding:0 38px;

    border-radius:18px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    text-decoration:none;

    font-weight:700;

    backdrop-filter:blur(20px);
}

.web-hero-stats{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.web-stat-card{

    min-width:190px;

    padding:26px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);
}

.web-stat-card strong{

    display:block;

    color:white;

    font-size:52px;

    letter-spacing:-3px;

    margin-bottom:12px;
}

.web-stat-card span{

    color:rgba(255,255,255,0.55);

    font-size:13px;

    letter-spacing:1px;
}

.web-hero-right{

    position:relative;

    height:760px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.web-dashboard{

    position:relative;

    width:100%;

    max-width:620px;

    height:560px;

    border-radius:40px;
outline:1px solid rgba(255,255,255,0.04);
    overflow:hidden;
isolation:isolate;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(30px);

    box-shadow:

0 60px 160px rgba(0,0,0,0.52),

0 0 80px rgba(0,140,255,0.10);

    transform:
    perspective(2200px)
    rotateY(-10deg)
    rotateX(4deg);

    animation:webFloat 8s ease-in-out infinite;
}

.web-dashboard::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.10),
        transparent 40%,
        rgba(0,140,255,0.12)
    );

    opacity:.8;

    pointer-events:none;
}
.web-dashboard::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent 30%
    );

    pointer-events:none;

    z-index:2;
    
    mix-blend-mode:screen;
    opacity:.9;
}

.dashboard-topbar{

    height:70px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 28px;

    border-bottom:1px solid rgba(255,255,255,0.08);
}

.dashboard-topbar span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#58a6ff;
}

.dashboard-content{

    display:grid;

    grid-template-columns:100px 1fr;

    height:calc(100% - 70px);
}

.dashboard-sidebar{

    padding:24px;

    border-right:1px solid rgba(255,255,255,0.06);
}

.dashboard-sidebar div{

    width:100%;

    height:60px;

    border-radius:18px;

    margin-bottom:18px;

    background:rgba(255,255,255,0.06);
}

.dashboard-main{

    padding:34px;
}

.dashboard-chart{
position:relative;

overflow:hidden;
    height:220px;

    border-radius:28px;

    margin-bottom:28px;

    background:
    linear-gradient(
        135deg,
        rgba(0,140,255,0.20),
        rgba(88,166,255,0.04)
    );
}

.dashboard-chart::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:translateX(-100%);

    animation:
    dashboardScan 6s linear infinite;
}

@keyframes dashboardScan{

    to{

        transform:translateX(100%);
    }
}

.dashboard-cards{

    display:grid;

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

    gap:18px;
}

.mini-card{

    height:150px;

    border-radius:24px;

    background:rgba(255,255,255,0.06);
}

.web-floating-card{

    position:absolute;

    z-index:5;

    width:260px;

    padding:24px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);
}

.web-floating-card span{

    display:block;

    color:#58a6ff;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:12px;
}

.web-floating-card strong{

    display:block;

    color:white;

    font-size:40px;

    margin-bottom:12px;
}

.web-floating-card p{

    color:rgba(255,255,255,0.6);

    font-size:14px;
}

.card-analytics{

     top:20px;
    left:-40px;
}

.card-ui{

    bottom:20px;
    right:-40px;
}

@keyframes webFloat{

    0%{

        transform:
        perspective(2200px)
        rotateY(-10deg)
        rotateX(4deg)
        translateY(0px);
    }

    50%{

        transform:
        perspective(2200px)
        rotateY(-10deg)
        rotateX(4deg)
        translateY(-12px);
    }

    100%{

        transform:
        perspective(2200px)
        rotateY(-10deg)
        rotateX(4deg)
        translateY(0px);
    }
}

/* =========================================
SECTION HEADINGS
========================================= */

.web-section-heading{

    max-width:900px;

    margin-bottom:70px;
}

.web-section-heading span{

    display:inline-flex;

    margin-bottom:26px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}

.web-section-heading h2{

    font-size:clamp(3.2rem,5vw,5.4rem);

    line-height:.95;

    letter-spacing:-4px;

    margin-bottom:24px;

    font-weight:800;
}

.web-section-heading p{

    font-size:20px;

    line-height:1.8;
}

.center-light{

    text-align:center;

    margin:auto auto 80px;
}

.center-light h2{

    color:white;
}

.center-light p{

    color:rgba(255,255,255,0.65);
}

/* =========================================
EXPERIENCE
========================================= */

.web-experience-section{

    padding:120px 0;

    background:
linear-gradient(
    180deg,
    #f4f7fb 0%,
    #eef3f8 100%
);
}
.experience-card::before,

.process-card::before,

.tech-card::before,

.web-stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,0.10),

        transparent 40%

    );

    opacity:.7;

    pointer-events:none;

}


.web-experience-grid{

    display:grid;

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

   gap:34px;
}

.experience-card{

    position:relative;

    overflow:hidden;

    padding:34px;
   

    border-radius:36px;

    background:white;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.06);

    transition:.45s ease;
    border:1px solid rgba(0,0,0,0.04);
    display:flex;

    flex-direction:column;

    justify-content:center;
}

.experience-line{

    width:70px;

    height:3px;

    border-radius:20px;

    margin-bottom:22px;

    background:
    linear-gradient(
        90deg,
        #008cff,
        transparent
    );
}
.experience-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(45,140,255,0.05),
        transparent 45%
    );

    pointer-events:none;
}

.experience-card:hover{

    transform:translateY(-10px);
}

.dark-card{

   background:
linear-gradient(
    135deg,
    #020817 0%,
    #071120 60%,
    #0a1730 100%
);
    
    box-shadow:

0 30px 90px rgba(0,0,0,0.28);
}

.dark-card h3,
.dark-card p{

    color:white;
}

.experience-card h3{

    font-size:38px;

line-height:1.02;

letter-spacing:-2px;

    margin-bottom:20px;
}

.experience-card p{

    font-size:17px;
    max-width:520px;

    line-height:1.9;

    color:#526277;
}

.wide-card{
position:relative;

    overflow:hidden;
    grid-column:span 2;

    min-height:260px;
    max-width:900px;

    background:
    linear-gradient(
        135deg,
        #008cff,
        #005eff
    );
}

.wide-card h3,
.wide-card p,
.wide-card span{

    color:white;
}

.wide-card::after{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:340px;
    height:340px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.18),
        transparent 70%
    );

    filter:blur(20px);

    opacity:.9;
}
.wide-card::before{

    content:"";

    position:absolute;

    right:-120px;
    top:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.18),
        transparent 70%
    );

    filter:blur(20px);
}

/* =========================================
PROCESS (PREMIUM ENTERPRISE VERSION)
========================================= */

.web-process-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0 160px; /* Un poco más de aire para el empaque premium */
    background: linear-gradient(
        180deg,
        #020617 0%,
        #060d26 100% /* Un tono azul oscuro sutilmente más rico en la base */
    );
}

.web-process-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 140, 255, 0.12),
        transparent 70%
    );
    filter: blur(120px);
    pointer-events: none;
}

/* Contenedor Grid Optimizado */
.process-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px; /* Un gap ligeramente mayor para respiración visual */
    align-items: stretch;
}

.process-grid::before{

    content:"";

    position:absolute;

    top:120px;
    left:5%;
    right:5%;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(88,166,255,.18),
        transparent
    );

    z-index:0;
}

/* Tarjeta Base Estilo Glassmorphism Premium */
.process-card {
    position: relative;
    overflow: hidden;
    padding: 40px 32px;
    border-radius: 32px;
    min-height: 280px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.015)
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    isolation: isolate;
    transition: 
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Resplandor Radial de Esquina */
.process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(0, 140, 255, 0.08),
        transparent 50%
    );
    opacity: 0.6;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

/* Línea Neon Superior de Carga Creciente */
.process-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 2px;
    background: linear-gradient(
        90deg,
        #008cff,
        #58a6ff,
        transparent
    );
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto Hover Pro */
.process-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0, 140, 255, 0.35);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.45),
        0 0 50px rgba(0, 140, 255, 0.15);
}

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

/* La línea superior se expande al hacer hover */
.process-card:hover::after {
    width: 100%;
}

/* Tipografía de Números Estilo Dashboard */
.process-number {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #58a6ff 0%, rgba(88, 166, 255, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
    margin-bottom: 24px;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.process-card:hover .process-number {
    opacity: 1;
}

/* Encabezados de Tarjeta */
.process-card h3 {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
    font-weight: 700;
}

/* Párrafo con mejor contraste de lectura */
.process-card p {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    font-size: 14.5px;
    margin: 0;
}

/* Modificador de Tarjeta Destacada por defecto (Ej: Fase Actual) */
.process-card.process-active {
    background: linear-gradient(
        180deg,
        rgba(0, 140, 255, 0.12),
        rgba(255, 255, 255, 0.02)
    );
    border-color: rgba(0, 140, 255, 0.25);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 140, 255, 0.08);
}

.process-card.process-active::after {
    width: 70%;
}
/* =========================================
SHOWCASE
========================================= */

.web-showcase-section{

     padding:160px 0;

    background:#f2f6fb;
}

.showcase-grid{

    display:grid;

    grid-template-columns:1.35fr 1fr;

    gap:34px;
}

.large-showcase{

    grid-row:span 2;

    height:820px;

}

.showcase-card{

    position:relative;

    overflow:hidden;

    border-radius:38px;

    min-height:420px;

   box-shadow:

0 30px 90px rgba(0,0,0,0.12);

transition:

    transform .6s ease,

    box-shadow .6s ease;
}

.showcase-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;

    filter:
    contrast(1.05)
    saturate(1.05)
    brightness(.92);
    border:1px solid rgba(0,0,0,0.04);
}

.showcase-card:hover img{

    transform:scale(1.06);
}

.showcase-card:hover{

    transform:

    translateY(-10px)

    scale(1.01);

}


.showcase-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:60px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0.02),
        rgba(0,0,0,0.72)
    );
}

.showcase-overlay span{

    display:inline-flex;

    margin-bottom:22px;

    color:#7cbcff;

    font-size:11px;

    letter-spacing:4px;

    font-weight:700;

    opacity:.92;
}

.showcase-overlay h3{

    color:white;

    font-size:46px;

    line-height:.96;

    letter-spacing:-3px;

    max-width:420px;
}

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

.web-tech-section{

    padding:120px 0;

    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #071120 100%
    );
}

.tech-grid{

    display:grid;

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

    gap:18px;
}

.tech-card{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100px;

    border-radius:16px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    font-size:18px;

    font-weight:700;

    transition:.35s ease;
     box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.04),

    0 20px 40px rgba(0,0,0,0.18);
    
}

.tech-card:hover{

    transform:translateY(-6px);

    border-color:rgba(0,140,255,0.22);
}

/* =========================================
FINAL
========================================= */

.web-final-section{

    position:relative;

    overflow:hidden;

    padding:160px 0;

    background:

    linear-gradient(

        180deg,

        #f8fbff 0%,

        #edf4fb 100%

    );
}

.web-final-container{

    position:relative;

    z-index:2;

    max-width:1000px;

    text-align:center;
}

.web-final-container span{

    display:inline-flex;

    margin-bottom:30px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}
.web-final-container::before{

    content:"";

    position:absolute;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.08),
        transparent 70%
    );

    filter:blur(90px);

    z-index:-1;
}
.web-final-container h2{

    font-size:clamp(4rem,7vw,7rem);

    line-height:.92;

    letter-spacing:-5px;

    color:#071120;

    margin-bottom:30px;
}

.web-final-container p{

    max-width:760px;

    margin:auto auto 50px;

    font-size:20px;

    line-height:1.9;

    color:#617286;
}

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

@media(max-width:1100px){

    .web-hero-container,
    .process-grid,
    .tech-grid,
    .showcase-grid{

        grid-template-columns:1fr 1fr;
    }

    .web-hero-container{

        grid-template-columns:1fr;
    }

    .web-hero-right{

        height:auto;
    }
}

@media(max-width:768px){

    .web-hero-section,
    .web-experience-section,
    .web-process-section,
    .web-showcase-section,
    .web-tech-section,
    .web-final-section{

        padding:100px 0;
    }

    .web-hero-buttons,
    .web-hero-stats,
    .process-grid,
    .showcase-grid,
    .tech-grid,
    .web-experience-grid{
 align-items:stretch;
        grid-template-columns:1fr;

        flex-direction:column;
    }

    .web-dashboard{
        margin-top:40px;

        transform:none;

        height:460px;
    }

    .web-floating-card{

        display:none;
    }

    .wide-card,
    .large-showcase{

        grid-column:auto;

        grid-row:auto;

        height:auto;
    }

    .web-hero-left h1,
    .web-final-container h2{

        letter-spacing:-3px;
    }

    .experience-card h3,
    .showcase-overlay h3{

        font-size:32px;
    }

}
.showcase-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        transparent 35%,

        rgba(0,0,0,.88)

    );

    z-index:1;

}
.showcase-overlay{

    z-index:2;
}
.tech-card::before{

    content:"";

    position:absolute;

    top:-40%;
    right:-20%;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,140,255,0.18),
        transparent 70%
    );

    filter:blur(20px);

    opacity:.8;
}
@media(max-width:768px){

    .web-hero-left h1{

        font-size:3.4rem;

        line-height:.95;
    }

    .web-hero-left p{

        font-size:18px;

        line-height:1.8;
    }

    .web-hero-section{

        padding:150px 0 90px;
    }
}
.process-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top left,
        rgba(88,166,255,0.08),
        transparent 45%
    );

    pointer-events:none;
}











/* =========================================
SYSTEMS HERO ENTERPRISE PREMIUM
========================================= */

.systems-enterprise-hero{
padding-top:170px;

    padding-bottom:110px;

    min-height:auto;

}

overflow:hidden;
    position:relative;



    padding:180px 0 130px;

    background:
    linear-gradient(
        180deg,
        #f7f9fc 0%,
        #edf3fb 100%
    );
}

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

.systems-hero-gradient{

    position:absolute;

    top:-320px;
    right:-320px;

    width:950px;
    height:950px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,119,255,.12),
        transparent 70%
    );

    filter:blur(100px);
}

.systems-hero-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(
        rgba(18,35,72,.06) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(18,35,72,.06) 1px,
        transparent 1px
    );

    background-size:80px 80px;

    mask-image:
    radial-gradient(circle at center,
    rgba(0,0,0,1),
    transparent 85%);
}

/* =========================================
LINES
========================================= */

.systems-lines{

    position:absolute;

    inset:0;

    pointer-events:none;
}

.sys-line{

    position:absolute;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,102,255,.18),
        transparent
    );
}

.line-1{

    width:340px;

    top:240px;
    right:220px;

    transform:rotate(-18deg);
}

.line-2{

    width:260px;

    top:480px;
    right:420px;

    transform:rotate(18deg);
}

.line-3{

    width:180px;

    top:620px;
    right:180px;

    transform:rotate(90deg);
}

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

.systems-enterprise-top{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:90px;

    margin-bottom:70px;
}

.systems-micro-tag{

    display:inline-flex;

    align-items:center;

    padding:14px 24px;

    border-radius:999px;

    background:white;

    border:
    1px solid rgba(0,0,0,.05);

    color:#0066ff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:34px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.04);
}

.systems-top-left h1{

     font-size:clamp(3.8rem,7vw,7.2rem);

    line-height:.95;

    letter-spacing:-4px;

    max-width:760px;

    text-wrap:balance;

    font-weight:800;

    color:#07111f;

    text-shadow:
    0 20px 60px rgba(255,255,255,.75);
}



.systems-top-right p{

    font-size:1.12rem;

    line-height:1.9;

    color:#4b5563;

    max-width:520px;

    font-weight:400;

}

/* =========================================
PROOF BAR
========================================= */

.systems-proof-bar{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    padding:24px 0 10px;

    position:relative;
}

.proof-tag{

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

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

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

    font-size:.9rem;

    font-weight:600;

    color:#0f172a;

    transition:.4s ease;
}

.proof-tag:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 20px 40px rgba(0,119,255,.12);
}.systems-hero-glow{

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,119,255,.12),
        transparent 65%
    );

    top:-320px;
    right:-250px;

    filter:blur(30px);

    pointer-events:none;
}.sys-line{

    position:absolute;

    width:1px;

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(0,119,255,.18),
        transparent
    );

    animation:
    lineFloat 7s ease-in-out infinite;
}@keyframes lineFloat{

    0%{
        transform:translateY(0);
        opacity:.4;
    }

    50%{
        transform:translateY(30px);
        opacity:1;
    }

    100%{
        transform:translateY(0);
        opacity:.4;
    }
}

.systems-proof-bar span{

    padding:14px 20px;

    border-radius:999px;

    background:white;

    border:
    1px solid rgba(0,0,0,.05);

    color:#4f6178;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.04);
}

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

.systems-enterprise-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:24px;
}

/* =========================================
BASE BOX
========================================= */

.enterprise-box{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:34px;

    background:

linear-gradient(

    180deg,

    rgba(255,255,255,.92),

    rgba(255,255,255,.72)

);

    border:
    1px solid rgba(0,0,0,.05);

    backdrop-filter:blur(30px);

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

    transition:.45s ease;
}

.enterprise-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(0,119,255,.08),
        transparent 42%
    );

    opacity:.9;

    pointer-events:none;
}



.enterprise-box:hover{

    transform:

    translateY(-10px);

    border-color:

    rgba(0,119,255,.12);

    box-shadow:

    0 45px 120px rgba(15,23,42,.10),

    0 0 60px rgba(0,119,255,.06);

}


.systems-enterprise-hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.018;

    background-image:
    url("https://www.transparenttextures.com/patterns/noise.png");

    mix-blend-mode:multiply;

    pointer-events:none;
}


/* =========================================
SIZES
========================================= */

.enterprise-mega-card{

    grid-column:span 6;

    min-height:480px;
}

.stats-box{

    grid-column:span 2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.wide-light{

    grid-column:span 7;

    min-height:250px;
}

.ui-preview{

    grid-column:span 5;

    min-height:250px;
}

.enterprise-box:not(.enterprise-mega-card):not(.stats-box):not(.wide-light):not(.ui-preview){

    grid-column:span 5;
}

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

.enterprise-box-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:36px;
}

.enterprise-box-top span{

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

    color:#0066ff;
}

.enterprise-box h3{

    font-size:36px;

    line-height:1.15;

    letter-spacing:-2px;

    color:#0b1220;

    margin-bottom:22px;
}

.enterprise-box p{

    font-size:17px;

    line-height:1.85;

    color:#5d6d81;
}

.enterprise-box a{

    display:inline-flex;

    align-items:center;

    margin-top:32px;

    color:#0066ff;

    text-decoration:none;

    font-weight:700;
}

/* =========================================
MEGA UI
========================================= */

.mega-ui-preview{

    position:absolute;

    right:-40px;
    bottom:-40px;

    width:440px;
    height:260px;

    border-radius:28px;

    overflow:hidden;

    background:white;

    border:
    1px solid rgba(0,0,0,.05);

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

    transform:
    rotate(-6deg);
}

.mega-ui-preview{

    display:grid;

    grid-template-columns:90px 1fr;
}

.mega-ui-sidebar{

    padding:16px;

    border-right:
    1px solid rgba(0,0,0,.05);

    background:#f7f9fc;
}

.mega-ui-sidebar div{

    height:42px;

    border-radius:14px;

    background:white;

    margin-bottom:14px;
}

.mega-ui-main{

    padding:20px;
}

.mega-chart{

    height:110px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #0066ff,
        #6ab8ff
    );

    margin-bottom:18px;
}

.mega-cards{

    display:grid;

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

    gap:12px;
}

.mega-cards div{

    height:72px;

    border-radius:16px;

    background:#f4f7fb;
}

/* =========================================
PREMIUM ENTERPRISE UI
========================================= */

.mega-ui-preview{

    position:absolute;

    right:-20px;
    bottom:-20px;

    width:520px;
    height:320px;

    border-radius:34px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.98),
        rgba(248,250,255,.92)
    );

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

    box-shadow:

    0 50px 120px rgba(15,23,42,.12),

    0 0 50px rgba(0,119,255,.08);

    transform:
    rotate(-6deg)
    perspective(1800px)
    rotateX(4deg);

    backdrop-filter:blur(30px);

    isolation:isolate;

    transition:
    transform .6s ease,
    box-shadow .6s ease;
}

.enterprise-mega-card:hover .mega-ui-preview{

    transform:
    rotate(-4deg)
    translateY(-8px)
    perspective(1800px)
    rotateX(2deg);

    box-shadow:

    0 70px 160px rgba(15,23,42,.16),

    0 0 70px rgba(0,119,255,.12);
}

/* TOPBAR */

.mega-topbar{

    height:58px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    border-bottom:
    1px solid rgba(0,0,0,.05);

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

    backdrop-filter:blur(20px);
}

.mega-dots{

    display:flex;

    gap:8px;
}

.mega-dots span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#c7d2e5;
}

.mega-search{

    width:160px;
    height:34px;

    border-radius:999px;

    background:#eef3fb;
}

.mega-user{

    width:34px;
    height:34px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #67b6ff
    );
}

/* BODY */

.mega-ui-body{

    display:grid;

    grid-template-columns:84px 1fr;

    height:calc(100% - 58px);
}

/* SIDEBAR */

.mega-ui-sidebar{

    padding:16px;

    border-right:
    1px solid rgba(0,0,0,.05);

    background:
    linear-gradient(
        180deg,
        #f8fbff,
        #f1f6fc
    );
}

.side-item{

    height:46px;

    border-radius:16px;

    background:white;

    margin-bottom:14px;

    box-shadow:
    0 6px 20px rgba(15,23,42,.04);
}

.side-item.active{

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #67b6ff
    );

    box-shadow:
    0 10px 30px rgba(0,119,255,.22);
}

/* MAIN */

.mega-ui-main{

    padding:18px;
}

/* KPI */

.mega-kpis{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:18px;
}

.kpi-card{

    padding:16px;

    border-radius:20px;

    background:white;

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

.kpi-card small{

    display:block;

    color:#6b7c93;

    font-size:11px;

    margin-bottom:10px;
}

.kpi-card strong{

    display:block;

    color:#081120;

    font-size:26px;

    letter-spacing:-1px;

    margin-bottom:6px;
}

.kpi-card span{

    color:#00b86b;

    font-size:12px;

    font-weight:700;
}

/* CHART */

.mega-chart{

    position:relative;

    height:92px;

    border-radius:22px;

    overflow:hidden;

    margin-bottom:18px;

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #69b9ff
    );
}

.chart-line{

    position:absolute;

    inset:0;

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

    transform:translateX(-100%);

    animation:
    chartScan 5s linear infinite;
}

@keyframes chartScan{

    to{

        transform:translateX(100%);
    }
}

/* TABLE */

.mega-table{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.table-row{

    height:16px;

    border-radius:999px;

    background:#eef3fb;
}

.table-row:nth-child(1){

    width:100%;
}

.table-row:nth-child(2){

    width:82%;
}

.table-row:nth-child(3){

    width:92%;
}

.table-row:nth-child(4){

    width:65%;
}




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

.stats-box strong{

    font-size:84px;

    line-height:1;

    letter-spacing:-5px;

    color:#0b1220;

    margin-bottom:14px;
}

.stats-box span{

    font-size:15px;

    line-height:1.7;

    color:#5d6d81;
}

/* =========================================
ICONS
========================================= */

.enterprise-icon{

    width:74px;
    height:74px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.10),
        rgba(0,102,255,.04)
    );

    margin-bottom:28px;
}

.enterprise-icon svg{

    width:34px;
    height:34px;

    stroke:#0066ff;
}

/* =========================================
DARK CARD
========================================= */

.dark-soft{

    background:
    linear-gradient(
        135deg,
        #0d1726,
        #182335
    );
}

.dark-soft h3,
.dark-soft p{

    color:white;
}

.dark-soft p{

    opacity:.72;
}

/* =========================================
UI WINDOW
========================================= */

.ui-window{

    position:absolute;

    inset:24px;

    border-radius:28px;

    overflow:hidden;

    background:white;

    border:
    1px solid rgba(0,0,0,.05);

    box-shadow:
    0 30px 80px rgba(15,23,42,.08);
}

.ui-window-top{

    height:58px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 22px;

    border-bottom:
    1px solid rgba(0,0,0,.05);
}

.ui-window-top span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#0066ff;
}

.ui-window-content{

    display:grid;

    grid-template-columns:90px 1fr;

    height:calc(100% - 58px);
}

.ui-sidebar{

    padding:16px;

    border-right:
    1px solid rgba(0,0,0,.05);
}

.ui-sidebar div{

    height:48px;

    border-radius:14px;

    background:#eef4fb;

    margin-bottom:14px;
}

.ui-main{

    padding:20px;
}

.ui-chart{

    height:120px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #0077ff,
        #6ab8ff
    );

    margin-bottom:18px;
}

.ui-cards{

    display:grid;

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

    gap:12px;
}

.ui-cards div{

    height:90px;

    border-radius:16px;

    background:#f5f8fc;
}

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

@media(max-width:1100px){

   

    .enterprise-mega-card,
    .stats-box,
    .wide-light,
    .ui-preview,
    .enterprise-box{

        grid-column:span 12 !important;
    }

    .mega-ui-preview{

        position:relative;

        right:auto;
        bottom:auto;

        margin-top:40px;

        width:100%;

        transform:none;
    }
}

@media(max-width:768px){

    .systems-enterprise-hero{

        padding:140px 0 90px;
        isolation:isolate;
    }
.systems-enterprise-hero::after{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:220px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.75),
        transparent
    );

    pointer-events:none;
}
    .systems-top-left h1{

        font-size:3.5rem;

        letter-spacing:-3px;
    }

    .systems-top-right p{

        font-size:18px;
    }

    .enterprise-box{

        padding:28px;
    }




    .mega-ui-preview{

        height:220px;
    }

    .stats-box strong{

        font-size:60px;
    }
}









/* =========================================
HEADINGS
========================================= */

.systems-heading{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;
}

.systems-heading span{

    display:inline-flex;

    margin-bottom:26px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}

.systems-heading h2{

    font-size:clamp(3.5rem,6vw,6rem);

    line-height:.95;

    letter-spacing:-4px;

    margin-bottom:24px;

    color:#071120;

    font-weight:800;
}

.systems-heading p{

    font-size:20px;

    line-height:1.8;

    color:#617286;
}

.systems-heading-light h2{

    color:white;
}

/* =========================================
SOLUTIONS
========================================= */

.systems-solutions-section{

    padding:130px 0;

    background:
    linear-gradient(
        180deg,
        #f5f8fc 0%,
        #edf3fa 100%
    );
}

.systems-solutions-grid{

    display:grid;

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

    gap:28px;
}

.solution-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:34px;

    background:white;

    border:
    1px solid rgba(0,0,0,.04);

    box-shadow:
    0 20px 60px rgba(0,0,0,.05);

    transition:
    transform .45s ease,
    box-shadow .45s ease;
}

.solution-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 35px 90px rgba(0,0,0,.10);
}

.solution-icon{

    width:70px;
    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:
    linear-gradient(
        180deg,
        rgba(0,140,255,.12),
        rgba(0,140,255,.04)
    );
}

.solution-icon svg{

    width:32px;
    height:32px;

    color:#2d8cff;
}

.solution-card h3{

    font-size:34px;

    line-height:1;

    letter-spacing:-2px;

    color:#071120;

    margin-bottom:18px;
}

.solution-card p{

    color:#617286;

    font-size:17px;

    line-height:1.8;
}

/* =========================================
SHOWCASE
========================================= */

.systems-showcase{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #071120 100%
    );
}

.systems-showcase-grid{

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size:72px 72px;
}

.systems-projects-grid{

    display:grid;

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

    gap:30px;
}

.systems-project-card{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.015)
    );

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

    backdrop-filter:blur(20px);

    transition:
    transform .45s ease,
    border-color .45s ease;
}

.systems-project-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(0,140,255,.25);
}

.systems-project-image{

    height:300px;

    overflow:hidden;
}

.systems-project-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform .8s ease;
}

.systems-project-card:hover img{

    transform:
    scale(1.05);
}

.systems-project-content{

    padding:34px;
}

.systems-project-content span{

    display:inline-flex;

    margin-bottom:18px;

    color:#58a6ff;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;
}

.systems-project-content h3{

    color:white;

    font-size:38px;

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:18px;
}

.systems-project-content p{

    color:rgba(255,255,255,.62);

    font-size:16px;

    line-height:1.8;

    margin-bottom:26px;
}

.systems-project-content a{

    color:white;

    text-decoration:none;

    font-weight:700;
}

/* =========================================
ARCHITECTURE
========================================= */

.systems-architecture-section{

    padding:130px 0;

    background:
    linear-gradient(
        180deg,
        #f7fbff 0%,
        #eef4fb 100%
    );
}

.systems-architecture-container{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;
}

.architecture-left span{

    display:inline-flex;

    margin-bottom:26px;

    color:#2d8cff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}

.architecture-left h2{

    font-size:clamp(3.2rem,5vw,5rem);

    line-height:.95;

    letter-spacing:-4px;

    margin-bottom:28px;

    color:#071120;
}

.architecture-left p{

    font-size:20px;

    line-height:1.9;

    color:#617286;
}

.architecture-right{

    display:grid;

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

    gap:24px;
}

.architecture-card{

    padding:36px;

    border-radius:30px;

    background:white;

    border:
    1px solid rgba(0,0,0,.04);

    box-shadow:
    0 20px 60px rgba(0,0,0,.05);

    transition:
    transform .4s ease;
}

.architecture-card:hover{

    transform:
    translateY(-8px);
}

.architecture-card strong{

    display:block;

    font-size:28px;

    line-height:1.1;

    letter-spacing:-1px;

    color:#071120;

    margin-bottom:18px;
}

.architecture-card p{

    color:#617286;

    line-height:1.8;
}

/* =========================================
FINAL
========================================= */

.systems-final-section{

    position:relative;

    overflow:hidden;

    padding:150px 0;

    background:
    linear-gradient(
        180deg,
        #020617 0%,
        #071120 100%
    );
}

.systems-final-glow{

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

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

    filter:blur(100px);

    top:50%;
    left:50%;

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

.systems-final-container{

    position:relative;

    z-index:2;

    max-width:1000px;

    text-align:center;
}

.systems-final-container span{

    display:inline-flex;

    margin-bottom:30px;

    color:#58a6ff;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;
}

.systems-final-container h2{

    font-size:clamp(4rem,7vw,7rem);

    line-height:.92;

    letter-spacing:-5px;

    color:white;

    margin-bottom:30px;
}

.systems-final-container p{

    max-width:760px;

    margin:auto auto 50px;

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.65);
}

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

@media(max-width:1100px){

    .systems-hero-container,
    .systems-architecture-container{

        grid-template-columns:1fr;
    }

    .systems-projects-grid,
    .systems-solutions-grid{

        grid-template-columns:1fr;
    }

    .architecture-right{

        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){

    .systems-hero,
    .systems-solutions-section,
    .systems-showcase,
    .systems-architecture-section,
    .systems-final-section{

        padding:100px 0;
    }

    .systems-hero-container{

        grid-template-columns:1fr;
    }

    .systems-buttons,
    .systems-stats{

        flex-direction:column;
    }

    .systems-dashboard{

        transform:none;

        height:460px;
    }

    .systems-floating-card{

        display:none;
    }

    .architecture-right{

        grid-template-columns:1fr;
    }

    .systems-project-content h3,
    .solution-card h3{

        font-size:30px;
    }

    .systems-left h1,
    .systems-final-container h2{

        letter-spacing:-3px;
    }
}

.systems-enterprise-hero{

    position:relative;
    overflow:hidden;

    background:
    radial-gradient(
        circle at top left,
        rgba(0,119,255,.08),
        transparent 28%
    ),

    radial-gradient(
        circle at top right,
        rgba(94,234,212,.05),
        transparent 24%
    ),

    linear-gradient(
        180deg,
        #f7faff 0%,
        #ffffff 45%,
        #f8fbff 100%
    );
}
/* =========================================
CINEMATIC DASHBOARD
========================================= */

.cinematic-dashboard{

    width:100%;
    max-width:640px;

    height:460px;

    position:relative;

    margin-top:60px;
    margin-left:auto;

    border-radius:34px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        rgba(10,14,28,.96),
        rgba(22,28,48,.92)
    );

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

    backdrop-filter:blur(20px);

    box-shadow:
    0 80px 180px rgba(61,115,255,.20),
    0 40px 80px rgba(0,0,0,.35);
  transform:

    perspective(1800px)

    rotateY(-6deg)

    rotateX(2deg);
    translateY(0px);

    transition:.6s ease;
}


@media(max-width:991px){

    .cinematic-dashboard{

        transform:none;

        height:auto;

        min-height:480px;

        margin-top:40px;
    }

}

.cinematic-dashboard:hover{

   transform:

    perspective(1800px)

    rotateY(-3deg)

    rotateX(1deg)

    translateY(-8px);

    box-shadow:
    0 120px 220px rgba(61,115,255,.28),
    0 60px 100px rgba(0,0,0,.40);
}

/* =========================================
TOPBAR
========================================= */

.cinematic-topbar{

    height:68px;

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

    padding:0 28px;

    border-bottom:
    1px solid rgba(255,255,255,.06);

    background:
    rgba(255,255,255,.02);
}

.topbar-left{

    display:flex;
    gap:10px;
}

.topbar-left span{

    width:11px;
    height:11px;

    border-radius:50%;

    background:
    rgba(255,255,255,.18);
}

.topbar-title{

    font-size:.8rem;

    letter-spacing:.22em;

    color:rgba(255,255,255,.5);

    font-weight:600;
}

/* =========================================
BODY
========================================= */

.cinematic-body{

    display:flex;

    height:calc(100% - 68px);
}

/* =========================================
SIDEBAR
========================================= */

.cinematic-sidebar{

    width:90px;

    border-right:
    1px solid rgba(255,255,255,.05);

    padding:24px 18px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.sidebar-logo{

    width:42px;
    height:42px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4
    );

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

.sidebar-items{

    margin-top:42px;

    display:flex;
    flex-direction:column;

    gap:18px;
}

.sidebar-items span{

    width:36px;
    height:36px;

    border-radius:12px;

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

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

/* =========================================
CONTENT
========================================= */

.cinematic-content{

    flex:1;

    padding:28px;
}

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

.cinematic-stats{

    display:grid;

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

    gap:18px;
}

.stat-card{

    padding:22px;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

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

    position:relative;

    overflow:hidden;
}

.stat-card small{

    display:block;

    font-size:.78rem;

    color:rgba(255,255,255,.45);

    margin-bottom:10px;
}

.stat-card strong{

    font-size:1.3rem;

    color:#fff;

    font-weight:700;
}

.mini-line{

    margin-top:18px;

    height:5px;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #3b82f6,
        #06b6d4
    );
}

/* =========================================
GRAPH
========================================= */

.cinematic-graph{

    position:relative;

    height:220px;

    margin-top:22px;

    border-radius:28px;

    overflow:hidden;

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

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

.graph-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:40px 40px;
}

.cinematic-graph svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}

.cinematic-graph path{

    fill:none;

    stroke:#4f9cf9;

    stroke-width:5;

    filter:
    drop-shadow(0 0 12px rgba(79,156,249,.8));

    stroke-linecap:round;
}

.graph-glow{

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,130,246,.22),
        transparent 70%
    );

    top:-120px;
    right:-60px;

    filter:blur(30px);
}

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

.cinematic-bottom{

    margin-top:22px;

    display:grid;

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

    gap:18px;
}

.bottom-card{

    padding:22px;

    border-radius:24px;

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

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

.bottom-header{

    width:120px;
    height:14px;

    border-radius:999px;

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

    margin-bottom:20px;
}

.bottom-lines{

    display:flex;
    flex-direction:column;

    gap:14px;
}

.bottom-lines span{

    height:10px;

    border-radius:999px;

    background:
    rgba(255,255,255,.06);
}

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

.dashboard-light{

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,130,246,.16),
        transparent 70%
    );

    top:-220px;
    right:-160px;

    pointer-events:none;

    filter:blur(20px);
}

.systems-enterprise-grid{

    align-items:center;

}

cinematic-dashboard{

    animation:

    dashboardFloat 8s ease-in-out infinite;

}


@keyframes dashboardFloat{

    0%{
        transform:
        perspective(1800px)
        rotateY(-10deg)
        rotateX(6deg)
        translateY(0);
    }

    50%{
        transform:
        perspective(1800px)
        rotateY(-8deg)
        rotateX(5deg)
        translateY(-12px);
    }

    100%{
        transform:
        perspective(1800px)
        rotateY(-10deg)
        rotateX(6deg)
        translateY(0);
    }
}

.systems-enterprise-top{

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

.systems-top-right{

    position:relative;
}

.cinematic-dashboard{

    width:100%;
    max-width:620px;

    height:460px;

    margin-top:40px;

    margin-left:auto;

    position:relative;

    border-radius:34px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        rgba(14,18,34,.96),
        rgba(26,32,54,.92)
    );

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

    box-shadow:
    0 40px 120px rgba(60,120,255,.18);

    transform:
    perspective(1800px)
    rotateY(-10deg)
    rotateX(5deg);
}

@media(max-width:991px){

    .systems-enterprise-top{

        grid-template-columns:1fr;
    }

    .cinematic-dashboard{

        max-width:100%;

        height:380px;

        transform:none;
    }

}

.glass-orb{

    position:absolute;

    border-radius:50%;

    backdrop-filter:blur(30px);

    background:
    radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,.22),
        rgba(255,255,255,.04)
    );

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

    z-index:1;
}

.orb-1{

    width:420px;
    height:420px;

    top:-120px;
    right:-120px;

    opacity:.55;
}

.orb-2{

    width:240px;
    height:240px;

    bottom:80px;
    left:-60px;

    opacity:.30;
}

/* =========================================
SYSTEMS HERO FIX
========================================= */

.systems-enterprise-top{

    display:block;

    max-width:1200px;

    margin:auto;
}

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

.systems-top-left{

    width:100%;
}

.systems-top-left h1{

    font-size:clamp(4rem,6vw,6.8rem);

    line-height:.92;

    letter-spacing:-4px;

    max-width:900px;

    margin-bottom:34px;

    text-wrap:balance;

}
.systems-hero-description{

    max-width:820px;

    font-size:20px;

    line-height:1.9;

    color:#526277;

    margin-bottom:60px;
}

/* =========================================
DASHBOARD
========================================= */

.cinematic-dashboard{

    margin-top:0;

    margin-left:auto;

    margin-right:auto;
}

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

@media(max-width:768px){

    .systems-enterprise-hero{

        padding-top:140px;

        padding-bottom:90px;

        min-height:auto;
    }

    .systems-top-left h1{

        font-size:3rem;

        line-height:.98;

        letter-spacing:-3px;
    }

    .systems-hero-description{

        font-size:17px;

        line-height:1.8;

        margin-bottom:40px;
    }

    .cinematic-dashboard{

        width:100%;

        max-width:100%;

        height:340px;

        border-radius:26px;

        transform:none !important;
    }

    .cinematic-content{

        padding:18px;
    }

    .cinematic-stats{

        grid-template-columns:1fr;

        gap:12px;
    }

    .cinematic-bottom{

        grid-template-columns:1fr;
    }

    .stat-card{

        padding:16px;
    }

    .cinematic-graph{

        height:140px;
    }
}

.systems-enterprise-top{

    max-width:1280px;

    margin:auto;

    text-align:left;
}

.systems-top-left{

    max-width:1000px;

    margin:auto;
}

@media(max-width:768px){

    .systems-enterprise-hero{

        padding-top:130px;

        padding-bottom:70px;

        overflow:hidden;

    }

    .systems-top-left{

        max-width:100%;

    }

    .systems-top-left h1{

        font-size:2.7rem;

        line-height:1;

        letter-spacing:-2px;

    }

    .systems-hero-description{

        font-size:16px;

        line-height:1.75;

        margin-bottom:34px;

    }

    .cinematic-dashboard{

        height:320px;

        border-radius:24px;

        transform:none !important;

        margin-top:20px;

    }

    .cinematic-content{

        padding:14px;

    }

    .cinematic-stats{

        gap:10px;

    }

    .stat-card{

        padding:14px;

        border-radius:18px;

    }

    .stat-card strong{

        font-size:1rem;

    }

    .cinematic-graph{

        height:120px;

    }

    .cinematic-bottom{

        gap:10px;

    }

    .bottom-card{

        padding:14px;

    }

}@media(max-width:980px){

    .systems-enterprise-top{
        grid-template-columns:1fr;
        gap:50px;
    }

    .systems-top-right{
        justify-content:center;
    }

}.systems-enterprise-top{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    align-items:center;
    gap:80px;
}

.systems-top-left{
    position:relative;
    z-index:2;
}

.systems-top-right{
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.cinematic-dashboard{
    width:100%;
    max-width:720px;
}

/* =========================================
ARCHITECTURE ICONS
========================================= */

.architecture-icon{

    width:64px;

    height:64px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(37,99,235,.03)
    );

    border:
    1px solid rgba(37,99,235,.12);

    box-shadow:
    0 10px 40px rgba(37,99,235,.08);
}

.architecture-icon svg{

    width:28px;

    height:28px;

    stroke:#2563eb;

    stroke-width:2.2;
}