.cap-list{border-top:1px solid #cfd9e4}
.cap-row{display:grid;grid-template-columns:80px 1.1fr 1.25fr 40px;gap:30px;align-items:center;padding:35px 8px;border-bottom:1px solid #cfd9e4;transition:.35s}
.cap-row:hover{background:#fff;padding-left:22px;padding-right:22px;box-shadow:0 16px 40px rgba(10,18,32,.06)}
.cap-index{font:500 15px monospace;color:var(--blue)}
.cap-title h3{font:600 27px "Space Grotesk";margin:0 0 7px}
.cap-title span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8391a2}
   /* =========================================================
       INDUSTRIES & USE CASES — "Technology for real-world needs."
       Colorful animated tech-item cards (scoped to #industries only)
    ========================================================= */
  #industries{position:relative;overflow:hidden}
    #industries:before{
        content:"";position:absolute;width:260px;height:260px;left:-110px;top:-40px;
        border-radius:50%;filter:blur(10px);opacity:.4;pointer-events:none;z-index:0;
        background:radial-gradient(circle,rgba(37,99,235,.16),transparent 70%);
        animation:indOrb 13s ease-in-out infinite;
    }
    #industries:after{
        content:"";position:absolute;width:220px;height:220px;right:-100px;bottom:-30px;
        border-radius:50%;filter:blur(10px);opacity:.35;pointer-events:none;z-index:0;
        background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%);
        animation:indOrb 13s ease-in-out infinite;animation-delay:-6s;
    }
    @keyframes indOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-16px)}}
    #industries .container{position:relative;z-index:1}

    #industries .tech-grid{
        display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
    }
    #industries .tech-item{
        position:relative;overflow:hidden;isolation:isolate;
        display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
        padding:30px 18px 26px;border-radius:18px;
        background:#fff;border:1px solid rgba(15,23,42,.06);
        box-shadow:0 12px 30px rgba(15,23,42,.06);
        opacity:1;
        animation:techItemIn .6s cubic-bezier(.2,.8,.2,1) both;
        transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease;
    }
    #industries .tech-item:nth-child(1){--tech-accent:#2563eb;--tech-accent2:#06b6d4}
    #industries .tech-item:nth-child(2){--tech-accent:#10b981;--tech-accent2:#14b8a6}
    #industries .tech-item:nth-child(3){--tech-accent:#f59e0b;--tech-accent2:#f97316}
    #industries .tech-item:nth-child(4){--tech-accent:#ec4899;--tech-accent2:#ef4444}
    #industries .tech-item:nth-child(5){--tech-accent:#a855f7;--tech-accent2:#8b5cf6}
    #industries .tech-item:nth-child(6){--tech-accent:#06b6d4;--tech-accent2:#0ea5e9}
    #industries .tech-item:nth-child(7){--tech-accent:#14b8a6;--tech-accent2:#10b981}
    #industries .tech-item:nth-child(8){--tech-accent:#6366f1;--tech-accent2:#2563eb}

    #industries .tech-item:nth-child(1){animation-delay:.04s}
    #industries .tech-item:nth-child(2){animation-delay:.10s}
    #industries .tech-item:nth-child(3){animation-delay:.16s}
    #industries .tech-item:nth-child(4){animation-delay:.22s}
    #industries .tech-item:nth-child(5){animation-delay:.28s}
    #industries .tech-item:nth-child(6){animation-delay:.34s}
    #industries .tech-item:nth-child(7){animation-delay:.40s}
    #industries .tech-item:nth-child(8){animation-delay:.46s}
    @keyframes techItemIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

    #industries .tech-item:hover{
        transform:translateY(-9px) scale(1.015);
        box-shadow:0 26px 55px color-mix(in srgb, var(--tech-accent,#2563eb) 30%, transparent);
        border-color:color-mix(in srgb, var(--tech-accent,#2563eb) 35%, transparent);
    }
    #industries .tech-item:before{
        content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;z-index:0;
        background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);
        transform:skewX(-20deg);transition:left .75s ease;pointer-events:none;
    }
    #industries .tech-item:hover:before{left:130%}

    #industries .tech-item i{
        position:relative;z-index:1;font-style:normal;line-height:1;
        width:54px;height:54px;display:grid;place-items:center;border-radius:15px;
        font-size:22px;color:#fff;
        background:linear-gradient(135deg,var(--tech-accent,#2563eb),var(--tech-accent2,#06b6d4));
        box-shadow:0 12px 26px color-mix(in srgb, var(--tech-accent,#2563eb) 35%, transparent);
        animation:techIconFloat 3.4s ease-in-out infinite;
        transition:transform .4s ease,box-shadow .4s ease;
    }
    #industries .tech-item:hover i{transform:rotate(-8deg) scale(1.14)}
    @keyframes techIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

    #industries .tech-item span{
        position:relative;z-index:1;
        font:600 13.5px "Inter",sans-serif;color:#0f172a;line-height:1.45;
        transition:color .35s ease;
    }
    #industries .tech-item:hover span{color:var(--tech-accent,#2563eb)}

    @media(max-width:992px){#industries .tech-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:700px){#industries .tech-grid{grid-template-columns:repeat(2,1fr);gap:14px}
        #industries .tech-item{padding:24px 14px 22px}
    }
    @media(max-width:460px){#industries .tech-grid{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){
        #industries .tech-item,#industries .tech-item i,#industries:before,#industries:after{animation:none}
        #industries .tech-item{transition:none}
    }
	
    /* =========================================================
       SOLUTIONS — "An integrated approach to complex problems."
       Mobile-friendly layout for the capability list + why-grid
    ========================================================= */
    .solutions-section .cap-list{width:100%}
    .solutions-section .cap-row{
        display:flex;align-items:center;gap:22px;
        transition:transform .3s ease,box-shadow .3s ease;
    }
    .solutions-section .cap-index{flex:0 0 auto}
    .solutions-section .cap-title{flex:0 0 auto}
    .solutions-section .cap-row p{flex:1 1 auto;min-width:0}
    .solutions-section .cap-arrow{flex:0 0 auto}

    @media(max-width:900px){
        .solutions-section .cap-row{
            flex-wrap:wrap;position:relative;
            padding:18px 44px 18px 0;
            row-gap:6px;
        }
        .solutions-section .cap-index{font-size:15px}
        .solutions-section .cap-title{flex:1 1 auto;min-width:0}
        .solutions-section .cap-title h3{font-size:17px;line-height:1.3}
        .solutions-section .cap-title span{font-size:12px}
        .solutions-section .cap-row p{
            flex:1 1 100%;width:100%;font-size:13.5px;line-height:1.6;
            margin-top:2px;
        }
        .solutions-section .cap-arrow{
            position:absolute;top:18px;right:0;font-size:16px;
        }
    }

    @media(max-width:600px){
        .solutions-section .cap-row{
            flex-direction:column;align-items:flex-start;gap:8px;
            padding:16px 40px 16px 0;
        }
        .solutions-section .cap-index,
        .solutions-section .cap-title{flex:0 0 auto;width:auto}
        .solutions-section .cap-row p{margin-top:4px}
    }

    .solutions-section .services-grid{
        display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
    }
    @media(max-width:992px){
        .solutions-section .services-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media(max-width:700px){
        .solutions-section .services-grid{grid-template-columns:repeat(2,1fr);gap:14px}
        .solutions-section .services-card{padding:20px 16px;text-align:center}
        .solutions-section .services-icon{margin-left:auto;margin-right:auto}
        .solutions-section .services-card h4{font-size:15px}
        .solutions-section .services-card p{font-size:12.5px;line-height:1.55}
    }
    @media(max-width:460px){
        .solutions-section .services-grid{grid-template-columns:1fr}
    }

    @media(max-width:600px){
        .solutions-section .section-heading.center h2{font-size:26px;line-height:1.25}
        .solutions-section .section-heading.center p{font-size:14px}
    }
.cap-list{border-top:1px solid #cfd9e4}
.cap-row{display:grid;grid-template-columns:80px 1.1fr 1.25fr 40px;gap:30px;align-items:center;padding:35px 8px;border-bottom:1px solid #cfd9e4;transition:.35s}
.cap-row:hover{background: #FFEEEE;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DDEFBB, #FFEEEE);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #DDEFBB, #FFEEEE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-left:22px;padding-right:22px;box-shadow:0 16px 40px rgba(10,18,32,.06)}
.cap-index{font:500 15px monospace;color:var(--blue)}
.cap-title h3{font:600 27px "Space Grotesk";margin:0 0 7px}
.cap-title span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8391a2}
.cap-row>p{color:var(--muted);line-height:1.65;margin:0}
.cap-arrow{font-size:22px;transition:.3s}
.cap-row:hover .cap-arrow{transform:translate(4px,-4px);color:var(--blue)}

/* ============ PROCESS TIMELINE ============ */
.process-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.process-timeline:before{content:"";position:absolute;top:23px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,rgba(23,105,255,.05),rgba(23,105,255,.4),rgba(123,92,255,.05))}
.process-step{text-align:center;position:relative;z-index:1}
.process-step b{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 16px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font:700 13px "Space Grotesk";color:var(--blue)}
.process-step h3{font-size:15.5px;margin-bottom:6px}
.process-step p{font-size:11px;color:var(--muted);line-height:1.5;padding:0 4px}
/* ===========================================================
   SOOTHING SCROLL-REVEAL (same convention as the rest of the site)
=========================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,.7,.2,1),transform 1s cubic-bezier(.22,.7,.2,1);will-change:opacity,transform}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal:nth-child(2),.engagement-grid .reveal:nth-child(2),.process-timeline .reveal:nth-child(2),.benefit-grid .reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3),.engagement-grid .reveal:nth-child(3),.process-timeline .reveal:nth-child(3),.benefit-grid .reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4),.process-timeline .reveal:nth-child(4),.benefit-grid .reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5),.process-timeline .reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6),.process-timeline .reveal:nth-child(6){transition-delay:.4s}
.reveal:nth-child(7){transition-delay:.48s}
.reveal:nth-child(8){transition-delay:.56s}

@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
}
/* ============ RESPONSIVE ============ */
@media(max-width:1050px){
    .process-timeline{grid-template-columns:repeat(3,1fr);row-gap:34px}
    .process-timeline:before{display:none}
}

@media(max-width:760px){
    .process-timeline{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
    .process-timeline{grid-template-columns:1fr 1fr}
    .tag-b{display:none}
}
@media(max-width:600px){
.cap-row{grid-template-columns:15px 1fr 30px;padding:28px 0}.cap-title h3{font-size:22px}
}
.cap-row>p{color:var(--muted);line-height:1.65;margin:0}
.cap-arrow{font-size:22px;transition:.3s}
.cap-row:hover .cap-arrow{transform:translate(4px,-4px);color:var(--blue)}

/* ============ PROCESS TIMELINE ============ */
.process-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.process-timeline:before{content:"";position:absolute;top:23px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,rgba(23,105,255,.05),rgba(23,105,255,.4),rgba(123,92,255,.05))}
.process-step{text-align:center;position:relative;z-index:1}
.process-step b{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 16px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font:700 13px "Space Grotesk";color:var(--blue)}
.process-step h3{font-size:15.5px;margin-bottom:6px}
.process-step p{font-size:13px;color:var(--muted);line-height:1.5;padding:0 4px}
/* ===========================================================
   SOOTHING SCROLL-REVEAL (same convention as the rest of the site)
=========================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,.7,.2,1),transform 1s cubic-bezier(.22,.7,.2,1);will-change:opacity,transform}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal:nth-child(2),.engagement-grid .reveal:nth-child(2),.process-timeline .reveal:nth-child(2),.benefit-grid .reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3),.engagement-grid .reveal:nth-child(3),.process-timeline .reveal:nth-child(3),.benefit-grid .reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4),.process-timeline .reveal:nth-child(4),.benefit-grid .reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5),.process-timeline .reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6),.process-timeline .reveal:nth-child(6){transition-delay:.4s}
.reveal:nth-child(7){transition-delay:.48s}
.reveal:nth-child(8){transition-delay:.56s}

@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
}
/* ============ RESPONSIVE ============ */
@media(max-width:1050px){
    .process-timeline{grid-template-columns:repeat(3,1fr);row-gap:34px}
    .process-timeline:before{display:none}
}

@media(max-width:760px){
    .process-timeline{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
    .process-timeline{grid-template-columns:1fr 1fr}
    .tag-b{display:none}
}
@media(max-width:600px){
.cap-row{grid-template-columns:45px 1fr 30px;padding:28px 0}.cap-title h3{font-size:22px}
}
/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

    max-width:950px;

    margin:auto;

}


.timeline:before{

    content:"";

    position:absolute;

    left:24px;

    top:0;

    bottom:0;

    width:3px;

    background:#cfe3f7;

}


.timeline-item{

    position:relative;

    padding-left:80px;

    margin-bottom:28px;

}


.timeline-icon{

    position:absolute;

    left:0;

    top:10px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 20px rgba(15,76,129,.22);

}


.timeline-content{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:25px 28px;

    box-shadow:0 10px 30px rgba(25,55,90,.055);

    transition:.3s;

}


.timeline-content:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(25,55,90,.10);

}


.timeline-content h4{

    font-size:19px;

    font-weight:800;

    color:#173b60;

}


.timeline-content p{

    color:var(--muted);

    margin-bottom:0;

}
@media(max-width:767px){
.timeline-item{

        padding-left:65px;

    }

    .timeline-content{

        padding:20px;

    }
}
/* ==========================================================
   AUDIENCE
========================================================== */

.audience-section{

    background:var(--background);

}


.services-card{

    background:#fff;

    padding:32px 20px;

    text-align:center;

    border-radius:20px;

    border:1px solid var(--border);

    height:100%;

    transition:.35s;

}


.services-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(25,55,90,.10);

}


.services-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#edf6ff;

    color:var(--primary);

    font-size:25px;

}


.services-card h4{

    color:#173b60;

    font-size:17px;

    font-weight:800;

}


/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #06b6d4;

    --navy: #0f172a;
    --text: #1e293b;
    --muted: #64748b;

    --bg: #f7faff;
    --white: #ffffff;

    --blue-soft: #eff6ff;
    --cyan-soft: #ecfeff;

    --border: rgba(37, 99, 235, 0.12);

    --shadow:
        0 20px 60px rgba(15, 23, 42, 0.08);

    --radius: 24px;

    --transition:
        all 0.35s cubic-bezier(.4, 0, .2, 1);

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

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

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.container {

    width: min(1380px, 92%);

    margin: auto;

}


/* =========================================================
   PRELOADER
========================================================= */

#preloader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

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

}

#preloader.hide {

    opacity: 0;
    visibility: hidden;

}

.loader-wrapper {

    position: relative;

    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;
    justify-content: center;

}

.loader-logo {

    width: 48px;
    height: 48px;

    border-radius: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    font-family: "Space Grotesk";

    font-size: 25px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 10px 35px rgba(37, 99, 235, .3);

}

.loader-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 2px solid transparent;

    border-top-color: var(--primary);
    border-right-color: var(--secondary);

    animation:
        loaderSpin 1s linear infinite;

}

@keyframes loaderSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: fixed;
    background-color: #d0d8eb;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: #0f172a;
    z-index: 1000;

    padding: 18px 0;

    transition: var(--transition);

}

.navbar.scrolled {

    padding: 10px 0;

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

    backdrop-filter: blur(20px);

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

}

.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo {

    display: flex; width:190px; height:70px;

    align-items: center;

   }

.logo-icon {

    width: 43px;
    height: 43px;

    border-radius: 13px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 8px 25px rgba(37,99,235,.25);

}

.logo-icon span {

    font-family:
        "Space Grotesk";

    font-size: 22px;

    font-weight: 700;

}

.logo-text {

    display: flex;

    flex-direction: column;

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

}

.logo-text small {

    margin-top: 4px;

    color: var(--muted);

    font-family: "Inter";

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}

.nav-link {

    position: relative;

    color: #475569;

    font-size: 17px;

    font-weight: 600;

    transition: var(--transition);

}

.nav-link:hover,
.nav-link.active {

    color: var(--primary);

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transition: var(--transition);

}

.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}

.nav-cta {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 18px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 10px 25px rgba(37,99,235,.2);

    transition: var(--transition);

}

.nav-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(37,99,235,.28);

}

.mobile-toggle {

    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 12px;

    background: var(--blue-soft);

    color: var(--primary);

    font-size: 24px;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 900px;

    padding-top: 170px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(37,99,235,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(6,182,212,.09),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef7ff 100%
        );

}

#networkCanvas {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: .7;

}

.particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

}

.particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    opacity: .25;

    animation:
        floatParticle
        var(--duration)
        ease-in-out
        infinite alternate;

}

@keyframes floatParticle {

    from {

        transform:
            translate3d(0,0,0)
            scale(.7);

    }

    to {

        transform:
            translate3d(
                var(--move-x),
                var(--move-y),
                0
            )
            scale(1.3);

    }

}


/* gradient blobs */

.gradient-blob {

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .12;

    pointer-events: none;

    animation:
        blobFloat
        10s
        ease-in-out
        infinite alternate;

}

.blob-1 {

    top: 10%;
    left: -120px;

    background: #2563eb;

}

.blob-2 {

    top: 30%;
    right: -130px;

    background: #06b6d4;

    animation-delay: -3s;

}

.blob-3 {

    bottom: -150px;
    left: 45%;

    background: #8b5cf6;

    animation-delay: -6s;

}

@keyframes blobFloat {

    to {

        transform:
            translate(
                40px,
                -30px
            )
            scale(1.1);

    }

}

.hero-container {

    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:1fr 1fr;
    align-items: center;
    gap: 60px;width: 100%;
  max-width: 1500px;margin: 0 auto;

}

.hero-content {

    max-width: 650px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 14px;

    margin-bottom: 25px;

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

    border-radius: 50px;

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

    backdrop-filter: blur(10px);

    color: var(--primary);

    font-size: 16px;

    font-weight: 700;

}

.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 5px
        rgba(34,197,94,.1);

    animation:
        pulseDot 2s infinite;

}

@keyframes pulseDot {

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

}

.hero h1 {

    margin-bottom: 25px;

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size:
        clamp(48px, 5.5vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

}

.hero h1 span {

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}

.hero h1 strong {

    font-weight: 500;

}

.hero-description {

    max-width: 600px;

    margin-bottom: 35px;

    color: var(--muted);

    font-size: 20px;

    line-height: 1.8;

}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

.btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 23px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 700;

    transition: var(--transition);

}

.btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 14px 30px
        rgba(37,99,235,.22);

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(37,99,235,.3);

}

.btn-outline {

    color: var(--navy);

    border: 1px solid
        rgba(15,23,42,.12);

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

    backdrop-filter:
        blur(10px);

}

.btn-outline:hover {

    color: var(--primary);

    border-color:
        rgba(37,99,235,.25);

    transform:
        translateY(-4px);

}

.hero-trust {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 35px;margin-bottom: 40px;

}

.trust-avatars {

    display: flex;

}

.trust-avatars span {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-left: 10px;

    border: 2px solid white;

    border-radius: 50%;

    color: var(--primary);

    background: var(--blue-soft);

    font-size: 14px;

    font-weight: 800;

}

.trust-avatars span:first-child {
    margin-left: 0;
}

.hero-trust strong,
.hero-trust small {

    display: block;

}

.hero-trust strong {

    color: var(--navy);

    font-size: 16px;

}

.hero-trust small {

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position: relative;

    height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;

}

.hero-center-card {

    position: relative;

    z-index: 5;

    width: 230px;
    height: 230px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(20px);

    box-shadow:

        0 30px 70px
        rgba(37,99,235,.12),

        inset 0 0 50px
        rgba(37,99,235,.04);

}

.center-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border-radius: 22px;

    color: white;

    font-size: 30px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 15px 30px
        rgba(37,99,235,.25);

}

.hero-center-card span {

    color: var(--muted);

    font-size: 16px;

}

.hero-center-card strong {

    margin-top: 5px;

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 22px;

    letter-spacing: 2px;

}

.hero-orbit {

    position: absolute;

    border: 1px dashed
        rgba(37,99,235,.18);

    border-radius: 50%;

    animation:
        orbitRotate
        20s
        linear
        infinite;

}

.orbit-1 {

    width: 380px;
    height: 380px;

}

.orbit-2 {

    width: 510px;
    height: 510px;

    animation-duration: 30s;

    animation-direction: reverse;

}

@keyframes orbitRotate {

    to {
        transform: rotate(360deg);
    }

}


/* floating cards */

.floating-card {

    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

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

    border-radius: 16px;

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

    backdrop-filter:
        blur(18px);

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

    animation:
        floatingCard
        5s
        ease-in-out
        infinite;

}

.floating-card small,
.floating-card strong {

    display: block;

}

.floating-card small {

    color: var(--muted);

    font-size: 12px;

}

.floating-card strong {

    margin-top: 2px;

    color: var(--navy);

    font-size: 13px;

}

.floating-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--primary);

    background: var(--blue-soft);

}

.card-cloud {

    top: 55px;
    left: 15px;

}

.card-ai {

    top: 100px;
    right: 5px;

    animation-delay: -1s;

}

.card-code {

    bottom: 100px;
    left: 25px;

    animation-delay: -2s;

}

.card-data {

    bottom: 45px;
    right: 30px;

    animation-delay: -3s;

}

@keyframes floatingCard {

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

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

}


/* scroll indicator */

.scroll-indicator {

    position: absolute;

    z-index: 5;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: #94a3b8;

    font-size: 14px;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.scroll-indicator i {

    color: var(--primary);

    animation:
        scrollArrow
        1.5s
        infinite;

}

@keyframes scrollArrow {

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

}


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

.stats-section {

    position: relative;

    z-index: 10;

    margin-top: -35px;

}

.stats-grid {

    display: grid;

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

    gap: 15px;

}

.stat-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 23px;

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

    border-radius: 20px;

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

    backdrop-filter:
        blur(15px);

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

    transition: var(--transition);

}

.stat-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 50px
        rgba(37,99,235,.1);

}

.stat-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    color: var(--primary);

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #ecfeff
        );

}

.stat-card h3 {

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 27px;

}

.stat-card p {

    margin-top: 3px;

    color: var(--muted);

    font-size: 15px;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

    padding: 120px 0;

}

.section-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 80px;

}

.section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 2px;

}

.section-label > span {

    width: 30px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

}

.section-heading {

    max-width: 750px;

    margin-bottom: 60px;

}

.section-heading.center {

    margin-left: auto;
    margin-right: auto;

    text-align: center;

}

.section-heading.center .section-label {

    justify-content: center;

}

.section-heading h2,
.about-content h2,
.solutions-content h2 {

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size:
        clamp(34px,4vw,53px);

    line-height: 1.08;

    letter-spacing: -1.8px;

}

.section-heading h2 span,
.about-content h2 span,
.solutions-content h2 span {

    color: var(--primary);

}

.section-heading p,
.about-content > p,
.solutions-content > p {

    max-width: 650px;

    margin-top: 20px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8; text-align:justify;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

    background: #ffffff;

}

.about-visual {

    position: relative;

    min-height: 520px;

}

.image-frame {

    width: 90%;

    height: 460px;

    padding: 14px;

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

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #ffffff
        );

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

}

.image-grid {

    height: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

}

.image-block {

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 22px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    transition: var(--transition);

}

.image-block:nth-child(even) {

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #334155
        );

}

.image-block:hover {

    transform:
        scale(1.02);

}

.image-block i {

    font-size: 42px;

}

.image-block span {

    font-size: 13px;

    font-weight: 700;

}

.experience-card {

    position: absolute;

    right: 0;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 22px;

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

    border-radius: 18px;

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

    backdrop-filter:
        blur(15px);

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

}

.experience-card strong {

    color: var(--primary);

    font-family:
        "Space Grotesk";

    font-size: 36px;

}

.experience-card span {

    color: var(--muted);

    font-size: 15px;

    line-height: 1.5;

}

.check-list {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    margin: 30px 0;

}

.check-list div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #475569;

    font-size: 16px;

}

.check-list i {

    color: #22c55e;

    font-size: 19px;

}

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

}

.text-link i {

    transition: var(--transition);

}

.text-link:hover i {

    transform:
        translateX(5px);

}


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

.services-section {

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );

}

.services-grid {

    display: grid;

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

    gap: 18px;

}

.service-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 30px;

    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 25px;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 15px 45px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    isolation: isolate;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.service-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(37, 199, 165, 0.11);

    transition: transform 0.5s ease;

    z-index: -1;
}


/* =========================================
   RUNNING BORDER
========================================= */

.service-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 25px;

    padding: 5px;

    background: conic-gradient(
        from var(--border-angle),
        transparent 0deg,
        transparent 250deg,
        #f05b05 285deg,
        #f05b05 325deg,
        transparent 360deg
    );

    /* Cut out card center */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

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

    mask-composite: exclude;

    opacity: 0;

    pointer-events: none;

    z-index: 10;

    transition: opacity 0.85s ease;
}


/* =========================================
   CUSTOM PROPERTY
========================================= */

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


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

.service-card:hover {
    transform: translateY(-10px);

    border-color: rgba(37, 99, 235, 0.2);

    box-shadow:
        0 30px 65px rgba(37, 99, 235, 0.11);
}


/* =========================================
   START BORDER ANIMATION
========================================= */

.service-card:hover::after {
    opacity: 1;

    animation:
        runningBorder 1.5s linear infinite;
}


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

.service-card:hover::before {
    transform: scale(2);
}


/* =========================================
   BORDER ROTATION
========================================= */

@keyframes runningBorder {
    from {
        --border-angle: 0deg;
    }

    to {
        --border-angle: 360deg;
    }
}
.service-number {

    position: absolute;

    top: 22px;
    right: 25px;

    color: #cbd5e1;

    font-family:
        "Space Grotesk";

    font-size: 15px;

}

.service-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 16px;

    color: var(--primary);

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #ecfeff
        );

    font-size: 23px;

    transition: var(--transition);

}

.service-card:hover .service-icon {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        rotate(-5deg)
        scale(1.05);

}

.service-card h3 {

    margin-bottom: 12px;

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 20px;

}

.service-card p {

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;

}

.service-card a {

    position: absolute;

    bottom: 27px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 700;

}


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

.solution-list {

    margin-top: 30px;

}

.solution-item {

    display: flex;

    gap: 14px;

    padding: 17px 0;

    border-bottom:
        1px solid
        rgba(15,23,42,.07);

}

.solution-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--primary);

    background: var(--blue-soft);

}

.solution-item h4 {

    color: var(--navy);

    font-size: 18px;

}

.solution-item p {

    margin-top: 4px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.5;

}

.dashboard-wrapper {

    padding: 25px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #ffffff
        );

}

.dashboard-card {

    padding: 27px;

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

    border-radius: 25px;

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

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

}

.dashboard-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.dashboard-header small {

    color: var(--muted);

    font-size: 13px;

}

.dashboard-header h3 {

    margin-top: 4px;

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 22px;

}

.dashboard-status {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #16a34a;

    font-size: 14px;

}

.dashboard-status span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

}

.chart-area {

    height: 240px;

    margin-top: 30px;

    padding: 15px;

    border-radius: 18px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 47px,
            rgba(37,99,235,.06) 48px
        );

}

.chart-line {

    height: 100%;

    display: flex;

    align-items: flex-end;

    gap: 12px;

}

.chart-line span {

    flex: 1;

    border-radius:
        7px 7px 2px 2px;

    background:
        linear-gradient(
            180deg,
            var(--secondary),
            var(--primary)
        );

    opacity: .85;

    transform-origin:
        bottom;

    animation:
        chartGrow
        1.5s
        ease
        both;

}

.chart-line span:nth-child(2) {
    animation-delay: .1s;
}

.chart-line span:nth-child(3) {
    animation-delay: .2s;
}

.chart-line span:nth-child(4) {
    animation-delay: .3s;
}

.chart-line span:nth-child(5) {
    animation-delay: .4s;
}

.chart-line span:nth-child(6) {
    animation-delay: .5s;
}

.chart-line span:nth-child(7) {
    animation-delay: .6s;
}

.chart-line span:nth-child(8) {
    animation-delay: .7s;
}

@keyframes chartGrow {

    from {
        transform:
            scaleY(0);
    }

    to {
        transform:
            scaleY(1);
    }

}

.dashboard-metrics {

    display: grid;

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

    gap: 10px;

    margin-top: 20px;

}

.dashboard-metrics div {

    padding: 15px;

    border-radius: 14px;

    background: var(--blue-soft);

}

.dashboard-metrics small,
.dashboard-metrics strong {

    display: block;

}

.dashboard-metrics small {

    color: var(--muted);

    font-size: 12px;

}

.dashboard-metrics strong {

    margin-top: 5px;

    color: var(--primary);

    font-size: 16px;

}


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

.technology-section {

    background: #ffffff;

}

.tech-grid {

    display: grid;

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

    gap: 15px;

}

.tech-item {

    min-height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    color: var(--muted);

    transition: var(--transition);

}

.tech-item i {

    color: var(--primary);

    font-size: 30px;

}

.tech-item span {

    font-size: 18px;

    font-weight: 600;

}

.tech-item:hover {

    transform:
        translateY(-7px);

    color: var(--primary);

    box-shadow:
        0 20px 45px
        rgba(37,99,235,.1);

}


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

.process-section {

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

}

.process-grid {

    display: grid;

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

    align-items: center;

    gap: 10px;

}

.process-item {

    position: relative;

    padding: 25px;

    text-align: center;

}

.process-number {

    margin-bottom: 15px;

    color: var(--primary);

    font-family:
        "Space Grotesk";

    font-size: 14px;

    font-weight: 700;

}

.process-item > i {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: auto auto 18px;

    border-radius: 18px;

    color: var(--primary);

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #ecfeff
        );

    font-size: 25px;

}

.process-item h3 {

    color: var(--navy);

    font-family:
        "Space Grotesk";

    font-size: 18px;

}

.process-item p {

    margin-top: 8px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.6;

}

.process-line {

    width: 35px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    opacity: .3;

}


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

.cta-section {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #172554
        );

}

.cta-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(37,99,235,.3);

    filter: blur(80px);

}

.cta-section::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -150px;
    bottom: -300px;

    border-radius: 50%;

    background:
        rgba(6,182,212,.25);

    filter: blur(80px);

}

.cta-box {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}

.section-label.light {

    color: #93c5fd;

}

.cta-content {

    max-width: 720px;

}

.cta-content h2 {

    color: white;

    font-family:
        "Space Grotesk";

    font-size:
        clamp(38px,5vw,60px);

    line-height: 1.05;

    letter-spacing: -2px;

}

.cta-content h2 span {

    color: #67e8f9;

}

.cta-content p {

    max-width: 620px;

    margin: 20px 0 30px;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.8;

}

.cta-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.btn-white {

    color: var(--navy);

    background: white;

}

.btn-white:hover {

    transform:
        translateY(-4px);

}

.btn-transparent {

    color: white;

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

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

}

.btn-transparent:hover {

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

}

.cta-orbit {

    position: relative;

    width: 260px;
    height: 260px;

    flex-shrink: 0;

}

.cta-circle {

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(103,232,249,.25);

    border-radius: 50%;

    animation:
        ctaRotate
        20s
        linear
        infinite;

}

.circle-2 {

    inset: 25px;

    animation-duration: 14s;

    animation-direction: reverse;

}

.circle-3 {

    inset: 55px;

    animation-duration: 10s;

}

.cta-icon {

    position: absolute;

    inset: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    font-size: 35px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 0 60px
        rgba(6,182,212,.3);

}

@keyframes ctaRotate {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    padding: 70px 0 25px;

    background: #ffffff;

}

.footer-grid {

    display: grid;

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

    gap: 50px;

    padding-bottom: 50px;

    border-bottom:
        1px solid
        rgba(15,23,42,.07);

}

.footer-brand p {

    max-width: 270px;

    margin: 20px 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;

}

.social-links {

    display: flex;

    gap: 8px;

}

.social-links a {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--muted);

    background: var(--blue-soft);

    transition: var(--transition);

}

.social-links a:hover {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        translateY(-3px);

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 13px;

}

.footer-column h4 {

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 18px;

}

.footer-column a,
.footer-column span {

    color: var(--muted);

    font-size: 14px;

    transition: var(--transition);

}

.footer-column a:hover {

    color: var(--primary);

    transform:
        translateX(3px);

}

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 25px;

    color: #94a3b8;

    font-size: 13px;

}

.footer-bottom div {

    display: flex;

    gap: 20px;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 100;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 12px 30px
        rgba(37,99,235,.25);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px);

    cursor: pointer;

    transition: var(--transition);

}

.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


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

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);

}

.reveal.active {

    opacity: 1;

    transform:
        translateY(0);

}


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

@media (max-width: 1100px) {

    .nav-menu {

        gap: 18px;

    }

    .hero-container {

        gap: 30px;

    }

    .hero h1 {

        font-size: 60px;

    }

    .hero-visual {

        transform:
            scale(.9);

    }

}


@media (max-width: 900px) {

    .mobile-toggle {

        display: flex;

        align-items: center;
        justify-content: center;

    }

    .nav-menu {

        position: absolute;

        top: 75px;
        left: 4%;
        right: 4%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 5px;

        padding: 20px;

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

        border-radius: 20px;

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

        backdrop-filter:
            blur(20px);

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

    }

    .nav-menu.open {

        display: flex;

    }

    .nav-link {

        padding: 12px;

    }

    .nav-cta {

        justify-content: center;

        margin-top: 5px;

    }

    .hero {

        min-height: auto;

        padding:
            150px 0 100px;

    }

    .hero-container {

        grid-template-columns:
            1fr;

    }

    .hero-content {

        max-width: 750px;

        text-align: center;

        margin: auto;

    }

    .hero-badge {

        margin-left: auto;
        margin-right: auto;

    }

    .hero-description {

        margin-left: auto;
        margin-right: auto;

    }

    .hero-buttons,
    .hero-trust {

        justify-content: center;

    }

    .hero-visual {

        height: 500px;

    }

    .stats-grid {

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

    }

    .section-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }

    .services-grid {

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

    }

    .tech-grid {

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

    }

    .process-grid {

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

    }

    .process-line {

        display: none;

    }

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 600px) {

    .container {

        width: 90%;

    }

    .hero {

        padding-top: 130px;

    }

    .hero h1 {

        font-size: 44px;

        letter-spacing: -2px;

    }

    .hero-description {

        font-size: 16px;

    }

    .hero-visual {

        height: 390px;

        transform:
            scale(.72);

        margin:
            -35px -60px;

    }

    .scroll-indicator {

        display: none;

    }

    .stats-grid {

        grid-template-columns:
            1fr;

    }

    .stats-section {

        margin-top: 0;

        padding-top: 20px;

    }

    .section {

        padding: 80px 0;

    }

    .section-heading h2,
    .about-content h2,
    .solutions-content h2 {

        font-size: 35px;

    }

    .services-grid {

        grid-template-columns:
            1fr;

    }

    .check-list {

        grid-template-columns:
            1fr;

    }

    .image-frame {

        width: 100%;

        height: 390px;

    }

    .experience-card {

        right: 10px;

    }

    .tech-grid {

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

    }

    .process-grid {

        grid-template-columns:
            1fr;

    }

    .dashboard-wrapper {

        padding: 10px;

    }

    .dashboard-card {

        padding: 20px;

    }

    .chart-area {

        height: 180px;

    }

    .dashboard-metrics {

        grid-template-columns:
            1fr;

    }

    .cta-box {

        flex-direction: column;

        align-items: flex-start;

    }

    .cta-orbit {

        display: none;

    }

    .footer-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

}