:root{

/* ===================== BRAND PALETTE (single source of truth) ===================== */
--brand-cyan:#00d4ff;
--brand-blue:#2563ff;
--brand-indigo:#6366ff;
--brand-purple:#8b5cf8;
--brand-magenta:#d946ef;
--brand-white:#ffffff;

/* legacy aliases */
--primary:var(--brand-blue);
--secondary:var(--brand-indigo);
--cyan:var(--brand-cyan);
--white:var(--brand-white);

/* ===================== STATUS (brand-derived) ===================== */
--success:var(--brand-cyan);
--warning:var(--brand-purple);
--danger:var(--brand-magenta);
--success-soft:rgba(0,212,255,.16);
--warning-soft:rgba(139,92,248,.16);
--danger-soft:rgba(217,70,239,.16);

/* ===================== DARK MODE TREATMENT ===================== */
--dark:#060816;
--dark-2:#0b1120;
--bg-deep:#050711;
--bg-2:#08101f;
--card:#10192c;
--card-2:#0d1528;
--panel:#0f172a;
--panel-2:#111827;
--panel-3:#192133;
--line:#1e293b;
--ring:#060b16;
--surface-1:#0d1223;
--grad-a:#232c3f;
--grad-b:#0d1424;
--grad-c:#2a3448;
--grad-d:#0c1322;
--black:#000000;

--text:#b7c4d7;
--text-strong:#f2f6ff;
--text-bright:#cbd5e1;
--text-muted:#94a3b8;
--text-muted-2:#64748b;
--text-faint:#aeb9ca;
--placeholder:#637186;
--title:#0f172a;

--border:rgba(255,255,255,.08);
--border-strong:rgba(255,255,255,.16);
--shadow:0 20px 60px rgba(0,0,0,.35);
--radius:24px;
--transition:.4s ease;
}

#portfolio-preloader{
    position:fixed;
    inset:0;
    z-index:1000000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(37,99,255,.10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--dark) 0%,
            var(--bg-2) 52%,
            var(--bg-deep) 100%
        );

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .75s cubic-bezier(.65,0,.35,1),
        visibility .75s cubic-bezier(.65,0,.35,1);
}

#portfolio-preloader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.preloader-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    opacity:.30;

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

    background-size:60px 60px;

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            var(--black) 0%,
            var(--black) 42%,
            transparent 82%
        );

    mask-image:
        radial-gradient(
            circle at center,
            var(--black) 0%,
            var(--black) 42%,
            transparent 82%
        );
}

.preloader-glow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(110px);
    pointer-events:none;
    z-index:-2;
}

.preloader-glow-left{
    left:-170px;
    top:-150px;
    background:rgba(37,99,255,.18);
}

.preloader-glow-right{
    right:-160px;
    bottom:-170px;
    background:rgba(99,102,255,.14);
}

.preloader-content{
    position:relative;
    z-index:2;
    width:min(100%,620px);
    padding:34px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.preloader-mark{
    position:relative;
    width:300px;
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.preloader-ring{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.preloader-ring-one{
    width:218px;
    height:218px;

    border:4px solid transparent;
    border-top-color:var(--cyan);
    border-right-color:var(--primary);
    border-bottom-color:var(--secondary);

    box-shadow:
        0 0 28px rgba(0,212,255,.24),
        0 0 56px rgba(37,99,255,.12);

    animation:preloaderSpinOne 2.4s linear infinite;
}

.preloader-ring-two{
    width:270px;
    height:270px;

    border:1px dashed rgba(99,102,255,.42);
    border-left-color:rgba(217,70,239,.82);
    border-bottom-color:rgba(139,92,248,.72);

    animation:preloaderSpinTwo 4.2s linear infinite;
}




.preloader-ring-two::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor,
        0 0 24px currentColor;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: var(--cyan);
}



.preloader-ring-two::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor,
        0 0 24px currentColor;
  right: 18px;
  bottom: 23px;
  background: var(--secondary);
  color: var(--secondary);
}


.preloader-core{
    position:relative;
    width:176px;
    height:176px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(37,99,255,.16),
            color-mix(in srgb, var(--dark) 96%, transparent) 62%
        );

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

    box-shadow:
        inset 0 0 40px rgba(37,99,255,.08),
        0 0 45px rgba(37,99,255,.16);
}

.preloader-core::before{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:50%;
    border:1px solid rgba(0,212,255,.12);
    pointer-events:none;
}

.preloader-monogram{
    position:relative;
    z-index:1;

    font-family:'Space Grotesk',sans-serif;
    font-size:58px;
    line-height:1;
    font-weight:800;
    letter-spacing:-4px;

    background:
        linear-gradient(
            90deg,
            var(--cyan) 0%,
            var(--primary) 42%,
            var(--secondary) 68%,
            var(--brand-magenta) 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:drop-shadow(0 0 14px rgba(37,99,255,.24));
}

.preloader-name{
    position:relative;
    z-index:1;
    margin-top:13px;

    color:var(--brand-white);
    font-family:'Space Grotesk',sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:700;
    letter-spacing:1.6px;
    white-space:nowrap;
}

.preloader-role{
    position:relative;
    z-index:1;
    margin-top:10px;

    color:var(--cyan);
    font-size:8px;
    line-height:1;
    font-weight:700;
    letter-spacing:3px;
    white-space:nowrap;
}

.preloader-loading{
    margin-top:26px;
    color:var(--brand-white);

    font-family:'Space Grotesk',sans-serif;
    font-size:17px;
    line-height:1;
    font-weight:600;
    letter-spacing:10px;
    text-transform:uppercase;
}

.preloader-subtitle{
    margin-top:15px;
    color:var(--text-muted);

    font-size:14px;
    line-height:1.4;
    letter-spacing:1.4px;
}

.preloader-progress{
    position:relative;
    width:min(330px,80vw);
    height:4px;
    margin-top:28px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

.preloader-progress span{
    position:absolute;
    left:-48%;
    top:0;
    width:46%;
    height:100%;
    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--primary),
            var(--secondary),
            var(--brand-purple),
            var(--brand-magenta)
        );

    box-shadow:
        0 0 16px rgba(37,99,255,.58),
        0 0 26px rgba(0,212,255,.18);

    animation:preloaderProgress 1.45s ease-in-out infinite;
}

@keyframes preloaderSpinOne{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

@keyframes preloaderSpinTwo{
    from{transform:rotate(360deg);}
    to{transform:rotate(0deg);}
}

@keyframes preloaderProgress{
    0%{transform:translateX(0);}
    50%{transform:translateX(220%);}
    100%{transform:translateX(470%);}
}

@media(prefers-reduced-motion:reduce){
    #portfolio-preloader *,
    #portfolio-preloader::before,
    #portfolio-preloader::after{
        animation:none ;
    }

    #portfolio-preloader{
        transition:none ;
    }
}

*{

margin:0;

padding:0;

box-sizing:border-box;

}html{

scroll-behavior:auto;

}body{

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

background:var(--dark);

color:var(--brand-white);

overflow-x:hidden;

overflow-wrap:break-word;

line-height:1.8;

}img{

max-width:100%;

display:block;

}a{

text-decoration:none;

transition:var(--transition);

}ul{

list-style:none;

margin:0;

padding:0;

}.container{

max-width:1400px;

}section{

padding:50px 0;

position:relative;

overflow:hidden;

    scroll-margin-top:120px;

}::selection{

background:var(--primary);

color:var(--brand-white);

}

h1,h2,h3,h4,h5,h6{

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

font-weight:700;

line-height:1.2;

margin:0;

}p{

font-size:17px;

color:var(--text);

margin:0;

}

::-webkit-scrollbar{

width:10px;

}::-webkit-scrollbar-track{

background:var(--bg-2);

}::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),var(--cyan));

border-radius:20px;

}

.bg-grid{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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:60px 60px;

z-index:-5;

}

.bg-blur{

position:fixed;

border-radius:50%;

filter:blur(130px);

opacity:.45;

z-index:-4;

}.blur-primary{

width:420px;

height:420px;

background:var(--brand-blue);

left:-120px;

top:-120px;

}.blur-secondary{

width:350px;

height:350px;

background:var(--brand-cyan);

right:-100px;

top:240px;

}.blur-tertiary{

width:420px;

height:420px;

background:var(--brand-indigo);

bottom:-150px;

left:45%;

}

.mouse-glow{

position:fixed;

left:0;

top:0;

width:260px;

height:260px;

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

border-radius:50%;

pointer-events:none;

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

z-index:-2;

}

.header-area{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:11px 0;
    background:color-mix(in srgb, var(--dark) 52%, transparent);
    border-bottom:1px solid rgba(255,255,255,.055);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    z-index:999;
    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        padding .35s ease;
}.header-area::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(37,99,255,.08),
            transparent 30%,
            transparent 70%,
            rgba(139,92,248,.07)
        );
}.header-navbar{
    position:relative;
    z-index:2;
    min-height:58px;
    padding:0;
    display:flex;
    align-items:center;
    gap:20px;
}.header-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    color:var(--brand-white);
    font-family:'Space Grotesk',sans-serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.7px;
    line-height:1;
}.header-brand:hover,
.header-brand:focus{
    color:var(--brand-white);
}.header-brand .brand-logo{
    display:block;
    width:auto;
    height:44px;
    flex:0 0 auto;
}.header-collapse{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
    min-width:0;
}.header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:0 auto;
    padding:5px 16px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    background:color-mix(in srgb, var(--bg-deep) 42%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 30px rgba(0,0,0,.10);
}.header-nav .nav-item{
    margin:0;
}.header-nav .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:8px 5px;
    color:var(--text-faint);
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    transition:
        color .25s ease,
        transform .25s ease;
}.header-nav .nav-link:hover,
.header-nav .nav-link:focus,
.header-nav .nav-link.active{
    color:var(--brand-cyan);
    transform:translateY(-1px);
}.header-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    width:0;
    height:2px;
    margin:auto;
    border-radius:999px;
    background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue));
    box-shadow:0 0 14px rgba(0,212,255,.55);
    transition:width .3s ease;
}.header-nav .nav-link:hover::after,
.header-nav .nav-link.active::after{
    width:100%;
}.header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex:0 0 auto;
}.header-icon-btn{
    width:44px;
    height:44px;
    padding:0;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,255,.26);
    border-radius:50%;
    background:color-mix(in srgb, var(--bg-deep) 72%, transparent);
    color:var(--text-strong);
    font-size:17px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.018),
        0 10px 28px rgba(0,0,0,.16);
    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}.header-icon-btn:hover{
    color:var(--brand-white);
    transform:translateY(-2px);
    border-color:rgba(0,212,255,.56);
    background:color-mix(in srgb, var(--card-2) 86%, transparent);
    box-shadow:
        0 12px 30px rgba(37,99,255,.18),
        0 0 20px rgba(0,212,255,.08);
}.theme-toggle{
    overflow:hidden;
}.theme-icon{
    position:absolute;
    font-size:17px;
    transition:
        opacity .25s ease,
        transform .35s ease;
}.theme-icon-sun{
    opacity:0;
    transform:rotate(-90deg) scale(.65);
}html[data-theme="light"] .theme-icon-moon{
    opacity:0;
    transform:rotate(90deg) scale(.65);
}html[data-theme="light"] .theme-icon-sun{
    opacity:1;
    transform:rotate(0deg) scale(1);
}.header-hire-btn{
    white-space:nowrap;
}.header-hire-btn i{
    font-size:14px;
    transition:transform .25s ease;
}.header-hire-btn:hover i{
    transform:translateX(4px);
}.header-toggler{
    width:48px;
    height:48px;
    margin-left:auto;
    padding:0;
    display:none;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,255,.22) !important;
    border-radius:14px;
    background:color-mix(in srgb, var(--bg-deep) 72%, transparent);
    color:var(--brand-white);
    font-size:20px;
} html[data-theme="light"] .header-nav .nav-link:focus {
    color:var(--brand-blue);
}

.hero-section{

min-height:100vh;

display:flex;

align-items:center;

padding-top:180px;

padding-bottom:120px;

position:relative;

}.hero-wrapper{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:80px;

position:relative;

z-index:2;

}

.hero-left{

    position:relative;

    z-index:10;

    max-width:650px;

animation:heroLeft .9s ease;

}.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:100px;

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

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

    backdrop-filter:blur(20px);

    margin-bottom:35px;

    color:var(--brand-cyan);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}.hero-badge i{

    color:var(--brand-blue);

}.hero-name{

    font-size:96px;

    line-height:.95;

    font-weight:800;

    margin-bottom:28px;

    color:var(--brand-white);

}.hero-name span{

    display:block;

    background:linear-gradient(90deg,var(--brand-blue),var(--brand-indigo),var(--brand-cyan));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}.hero-profession{
min-height:50px;

flex-wrap:wrap;
    display:flex;

    align-items:center;

    gap:12px;

    margin:22px 0 35px;

    font-size:40px;

    font-weight:700;

    color:var(--brand-white);

}#typing-text{

    color:var(--brand-white);

    font-weight:700;

}.typing-cursor{

    color:var(--brand-blue);

    font-weight:700;

    animation:blink .8s infinite;

}.hero-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--brand-blue);

    box-shadow:0 0 18px var(--brand-blue);

    flex-shrink:0;

}.hero-description{

    max-width:600px;

    font-size:20px;

    line-height:1.9;

    color:var(--text-muted);

    margin-bottom:45px;

}.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:40px;

}.hero-social{

    display:flex;

    gap:18px;

}.hero-social a{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    transition:.35s;

}.hero-social a:hover{

    background:var(--brand-blue);

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(37,99,255,.35);
    color: white;

}

.scroll-indicator{

position:absolute;

left:50%;

bottom: -5em;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:14px;

z-index:50;

}.scroll-indicator span{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

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

font-weight:600;

}.scroll-mouse{

width:34px;

height:58px;

border-radius:30px;

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

display:flex;

justify-content:center;

padding-top:8px;

position:relative;

}.scroll-mouse .wheel{

width:6px;

height:12px;

border-radius:50px;

background:var(--brand-blue);

animation:scrollWheel 1.6s infinite;

}

.hero-section::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

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

top:-260px;

right:-180px;

z-index:-2;

}.hero-section::after{

content:"";

position:absolute;

width:550px;

height:550px;

border-radius:50%;

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

left:-180px;

bottom:-220px;

z-index:-2;

}



.tech-stack-section{

    position:relative;

    padding:50px 0;

    overflow:hidden;

    width:100%;

}

.tech-stack-section .section-heading{

    max-width:760px;

    margin:0 auto 70px;

}.tech-stack-section h2{

    font-size:56px;

    font-weight:800;

    color:var(--brand-white);

    margin-bottom:20px;

}.tech-stack-section p{

    color:var(--text-muted);

    font-size:18px;

    line-height:1.8;

}.backend-title{

    margin-top:70px;

}

.tech-marquee{

    position:relative;

    overflow:hidden;

    width:100vw;

    padding:15px 0;

    left:50%;

    transform:translateX(-50%);

} .tech-marquee::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:170px;

    height:100%;

    z-index:30;

    background:linear-gradient(

    to right,

    var(--card-2),

    transparent

    );

} .tech-marquee::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:170px;

    height:100%;

    z-index:30;

    background:linear-gradient(

    to left,

    var(--card-2),

    transparent

    );

}

.tech-track{

    display:flex;

    align-items:center;

    gap:22px;

    width:max-content;

    padding:18px 0;

}

.tech-card{

    width:155px;

    min-width:155px;

    padding:35px 20px;

    border-radius:22px;

    text-align:center;

    background:

    color-mix(in srgb, var(--title) 72%, transparent);

    border:

    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    transition:.35s;

    position:relative;

    overflow:hidden;

    height:155px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}.tech-card:hover{

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

    border-color:var(--brand-blue);

    box-shadow:

    0 0 25px rgba(37,99,255,.25),

    0 18px 45px rgba(0,0,0,.35);

}.tech-card i{

    font-size:44px;

    color:var(--brand-blue);

    margin-bottom:16px;

    font-style:normal;

}.tech-card h4{

    color:var(--brand-white);

    font-size:20px;

    margin-bottom:6px;

    font-weight:700;

}.tech-card span{

    color:var(--text-muted);

    font-size:14px;

}

.tech-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

    padding:0 20px;

}.tech-header h2{

    color:var(--brand-white);

    font-size:58px;

    font-weight:800;

    margin:20px 0;

}.tech-header p{

    color:var(--text-muted);

    font-size:18px;

    line-height:1.8;

}.tech-row-title{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:0 60px;

    margin:55px 0 22px;

}.tech-row-title i{

    color:var(--brand-blue);

    font-size:24px;

}.tech-row-title span{

    color:var(--brand-white);

    font-size:28px;

    font-weight:700;

}

.loop-divider{

    width:70px;

    min-width:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:var(--brand-blue);

    opacity:.45;

}

.marquee-left .tech-track{

    animation:marqueeLeft 32s linear infinite;

}

.marquee-right .tech-track{

    animation:marqueeRight 36s linear infinite;

}

.marquee-cms .tech-track{

    animation:marqueeLeft 34s linear infinite;

}

.tech-marquee:hover .tech-track{

    animation-play-state:paused;

}

@keyframes marqueeLeft{

    from{

        transform:translate3d(0,0,0);

    }

    to{

        transform:translate3d(-50%,0,0);

    }

}

@keyframes marqueeRight{

    from{

        transform:translate3d(-50%,0,0);

    }

    to{

        transform:translate3d(0,0,0);

    }

}

.tech-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:22px;

    background:linear-gradient(
    135deg,
    transparent,
    rgba(37,99,255,.6),
    transparent);

    opacity:0;

    transition:.4s;

    padding:2px;

    -webkit-mask:
    linear-gradient(var(--brand-white) 0 0) content-box,
    linear-gradient(var(--brand-white) 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}.tech-card:hover::before{

    opacity:1;

}

.tech-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:skewX(-25deg);

}.tech-card:hover::after{

    animation:cardLight .8s linear;

}

.tech-card:hover i{

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

    transition:.35s;

    color:var(--brand-indigo);

}.tech-card:hover h4{

    color:var(--brand-indigo);

}

@keyframes cardLight{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

.fa-html5{

    color:var(--brand-magenta) !important;

}.fa-css3-alt{

    color:var(--brand-cyan) !important;

}.fa-bootstrap{

    color:var(--brand-purple) !important;

}.fa-js{

    color:var(--warning) !important;

}.fa-react{

    color:var(--brand-cyan) !important;

}.fa-php{

    color:var(--brand-indigo) !important;

}.fa-laravel{

    color:var(--danger) !important;

}.fa-wordpress{

    color:var(--brand-cyan) !important;

}.fa-shopify{

    color:var(--brand-cyan) !important;

}.fa-node-js{

    color:var(--brand-cyan) !important;

}.fa-database{

    color:var(--brand-blue) !important;

}

.about-section{

    position:relative;

    padding:50px 0;

    overflow:hidden;

}

.about-section .section-heading{

    max-width:760px;

    margin:0 auto 80px;

}.about-section .section-heading h2{

    font-size:58px;

    font-weight:800;

    color:var(--brand-white);

    margin:18px 0;

}.about-section .section-heading p{

    font-size:18px;

    color:var(--text-muted);

    line-height:1.8;

}.about-image{

    position:absolute;

    width:390px;

    height:500px;

    border-radius:32px;

    overflow:hidden;

    background:var(--bg-2);

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

    backdrop-filter:blur(20px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(37,99,255,.08);

    left:55px;

    top:50%;

    transform:translateY(-50%);

    z-index:15;

}.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

} .about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    180deg,

    transparent,

    rgba(37,99,255,.25)

    );

    z-index:3;

    border-radius:32px;

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

    pointer-events:none;

}

.timeline-item{

    position:relative;

    padding-bottom:45px;

    margin-bottom:70px;

    animation:timelineFade .8s ease both;

}.timeline-item:last-child{

    padding-bottom:0;

    margin-bottom:0;

} @keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.about-orbit{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

    left:50%;

    top:50%;

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

    width:560px;

    height:560px;

    z-index:5;

}@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.about-section .container{

    max-width:1320px;

}

.about-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}.about-header h2{

    color:var(--brand-white);

    font-size:68px;

    font-weight:800;

    line-height:1.12;

    margin:28px 0 24px;

}.about-header h2 span{

    color:var(--brand-blue);

}.about-header p{

    max-width:720px;

    margin:auto;

    color:var(--text-muted);

    font-size:19px;

    line-height:1.9;

}

.about-wrapper{

    display:grid;

    grid-template-columns:540px 1fr;

    align-items:center;

    gap:50px;

}





.about-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:linear-gradient(
        to top,
        rgba(37,99,255,.28),
        transparent
    );

    z-index:2;

}

.about-left::before{

    content:"";

    position:absolute;

    width:470px;

    height:470px;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

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

    filter:blur(60px);

    z-index:1;

}

.about-image .shape{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:radial-gradient(
        rgba(37,99,255,.18),
        transparent
    );

}

.orbit-circle{

    position:absolute;

    inset:0;

    border-radius:50%;

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

    background:radial-gradient(circle,
    rgba(37,99,255,.03),
    transparent 75%);

    box-shadow:
    inset 0 0 60px rgba(37,99,255,.05),
    0 0 60px rgba(37,99,255,.08);

} .orbit-circle::before{

    content:"";

    position:absolute;

    inset:26px;

    border-radius:50%;

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

} .orbit-circle::after{

    content:"";

    position:absolute;

    inset:52px;

    border-radius:50%;

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

}

.orbit-dot{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--brand-blue);

    box-shadow:

    0 0 15px var(--brand-blue),

    0 0 35px rgba(37,99,255,.6);

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

}.dot-1{

    top:65px;

    left:50%;

    transform:translateX(-50%);

}.dot-2{

    right:65px;

    top:50%;

    transform:translateY(-50%);

    animation-delay:.8s;

}.dot-3{

    bottom:65px;

    left:50%;

    transform:translateX(-50%);

    animation-delay:1.6s;

}.dot-4{

    left:65px;

    top:50%;

    transform:translateY(-50%);

    animation-delay:2.4s;

}@keyframes particlePulse{

    0%,100%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.8);

        opacity:.45;

    }

}



.wordpress{

    top:95px;

    left:18px;

}.woo{

    bottom:105px;

    left:45px;

}.shopify{

    top:105px;

    right:20px;

}.laravel{

    bottom:95px;

    right:35px;

}

.about-card{

    position:absolute;

    width:190px;

    padding:24px;

    border-radius:24px;

    background:color-mix(in srgb, var(--surface-1) 88%, transparent);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

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

    box-shadow:

        0 20px 50px rgba(0,0,0,.35);

    z-index:30;

    transition:.4s ease;

}

.about-card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,255,.35);

    box-shadow:

        0 30px 70px rgba(37,99,255,.20);

}

.about-card h3{

    margin:0 0 10px;

    color:var(--brand-blue);

    font-size:46px;

    font-weight:800;

    line-height:1;

}

.about-card span{

    display:block;

    color:var(--brand-white);

    font-size:15px;

    line-height:1.8;

    font-weight:500;

}

.experience-card{

    top:55px;

    right:-15px;

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

}

.project-card{

    left:-20px;

    bottom:65px;

    overflow:hidden;

    border-radius:22px;

    background:var(--panel-2);

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

    transition:.25s;

    height:100%;

}

@keyframes cardFloatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}@keyframes cardFloatTwo{

    0%,100%{

        transform:translateY(calc(-50%));

    }

    50%{

        transform:translateY(calc(-50% - 12px));

    }

}

.about-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--brand-blue);

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}.about-label::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--brand-blue);

}

.about-right h3{

    color:var(--brand-white);

    font-size:54px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:28px;

}.about-right h3 span{

    color:var(--brand-blue);

}

.about-right p{

    color:var(--text-muted);

    font-size:18px;

    line-height:1.95;

    margin-bottom:22px;

    max-width:680px;

}



.info-card{

    position:relative;

    padding:28px 24px;

    border-radius:24px;

    background:color-mix(in srgb, var(--surface-1) 88%, transparent);

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:.35s ease;

    overflow:hidden;

}.info-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,var(--brand-blue),var(--brand-indigo));

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}.info-card:hover::before{

    transform:scaleX(1);

}.info-card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,255,.35);

    box-shadow:

    0 20px 45px rgba(37,99,255,.18);

}

.info-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    margin-bottom:20px;

    background:rgba(37,99,255,.10);

    color:var(--brand-blue);

}.info-card h4{

    color:var(--brand-white);

    font-size:21px;

    font-weight:700;

    margin-bottom:12px;

}.info-card p{

    margin:0;

    font-size:15px;

    line-height:1.8;

} .mission{

    color:var(--brand-blue);

}.vision{

    color:var(--brand-purple);

}.passion{

    color:var(--brand-magenta);

}

.about-footer{

    margin-top:55px;

    padding:35px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    border-radius:28px;

    background:color-mix(in srgb, var(--surface-1) 88%, transparent);

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

    backdrop-filter:blur(20px);

}

.about-quote{

    display:flex;

    align-items:flex-start;

    gap:18px;

    flex:1;

}.about-quote i{

    color:var(--brand-blue);

    font-size:32px;

    margin-top:4px;

}.about-quote p{

    margin:0;

    color:var(--text-bright);

    font-size:17px;

    line-height:1.9;

}.about-quote span{

    color:var(--brand-blue);

    font-weight:700;

}

.about-signature{

    text-align:center;

    min-width:230px;

}.about-signature h3{

    margin:0;

    color:var(--brand-white);

    font-size:28px;

    font-weight:700;

}.about-signature span{

    display:block;

    margin-top:8px;

    color:var(--text-muted);

    font-size:15px;

}

.services-section{

    position:relative;

    padding:50px 0;

    overflow:hidden;

}.services-section .container{

    max-width:1320px;

    margin:auto;

}

.services-header{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:var(--brand-blue);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    justify-content:center;

    padding:10px 20px;

    border-radius:50px;

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

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

    margin-bottom:25px;

}.section-tag::before,
.section-tag::after{

    content:"";

    width:55px;

    height:2px;

    background:var(--brand-blue);

}.services-header h2{

    margin:22px 0;

    font-size:64px;

    line-height:1.1;

    font-weight:800;

    color:var(--brand-white);

}.services-header h2 span{

    color:var(--brand-blue);

}.services-header p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text-muted);

}

.services-grid{

    display:grid;

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

    gap:28px;

}



.featured-left{

    display:flex;

    justify-content:center;

    align-items:center;

}

.featured-content{

    width:100%;

}

.featured-preview{

    position:relative;

    width:100%;

    height:340px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cms-orbit{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

}.orbit-ring{

    position:absolute;

    border-radius:50%;

}.ring-1{

    width:220px;

    height:220px;

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

    animation:ringRotate 22s linear infinite;

}.ring-2{

    width:170px;

    height:170px;

    border:2px solid rgba(37,99,255,.20);

    animation:ringRotateReverse 16s linear infinite;

}.ring-3{

    width:120px;

    height:120px;

    border:2px solid rgba(37,99,255,.40);

}

.cms-logo{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    color:var(--brand-white);

    position:relative;

    background:linear-gradient(
        135deg,
        var(--brand-blue),
        var(--brand-blue)
    );

    box-shadow:
    0 0 35px rgba(37,99,255,.35);

}.cms-logo::after{

    content:"";

    position:absolute;

    width:125px;

    height:125px;

    border-radius:50%;

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

    animation:ringRotate 28s linear infinite;

}

.featured-number{

    display:block;

    color:var(--brand-blue);

    font-size:20px;

    font-weight:700;

    margin-bottom:18px;

}.featured-content h3{

    font-size:54px;

    line-height:1.08;

    color:var(--brand-white);

    margin-bottom:24px;

    font-weight:800;

}.featured-content p{

    color:var(--text-muted);

    font-size:18px;

    line-height:1.9;

    margin-bottom:28px;

}

.platform-title{

    color:var(--brand-cyan);

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}@keyframes ringRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

.platform-grid{

    display:grid;

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

    gap:18px;

    margin-top:8px;

}



.platform-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.10),

        transparent

    );

    transition:.8s;

}.platform-card:hover::before{

    left:140%;

}

.platform-card:hover{

    transform:

    translateY(-8px)

    scale(1.03);

    border-color:rgba(37,99,255,.35);

    box-shadow:

        0 18px 35px rgba(37,99,255,.18);

}

.platform-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:rgba(37,99,255,.10);

    color:var(--brand-blue);

    font-size:24px;

    transition:.4s;

}.platform-card:hover .platform-icon{

    transform:

    rotate(10deg)

    scale(1.12);

}

.platform-name{

    color:var(--brand-white);

    font-size:17px;

    font-weight:600;

}

.featured-preview::after{

    content:"";

    position:absolute;

    width:280px;

    height:55px;

    bottom:-18px;

    background:

    radial-gradient(

    rgba(37,99,255,.45),

    transparent 70%

    );

    filter:blur(22px);

}

@keyframes desktopFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

.service-card::before{

    content:"";

    position:absolute;

    left:-140%;

    top:0;

    width:60%;

    height:100%;

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

    transition:.9s;

}.service-card:hover::before{

    left:150%;

}

.service-no{

    display:inline-block;

    margin-bottom:22px;

    color:var(--brand-blue);

    font-size:18px;

    font-weight:700;

}

.service-icon{

    width:88px;

    height:88px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    font-size:38px;

    transition:.4s;

} .purple{

    background:rgba(139,92,248,.12);

    color:var(--brand-purple);

}.pink{

    background:rgba(217,70,239,.12);

    color:var(--brand-magenta);

}.green{

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

    color:var(--brand-cyan);

}.blue{

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

    color:var(--brand-indigo);

}.orange{

    background:rgba(139,92,248,.12);

    color:var(--brand-purple);

}.service-card:hover .service-icon{

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

}

.service-card h3{

    color:var(--brand-white);

    font-size:28px;

    line-height:1.3;

    font-weight:700;

    margin-bottom:18px;

    transition:.35s;

}.service-card:hover h3{

    color:var(--brand-cyan);

}

.service-card p{

    color:var(--text-muted);

    font-size:16px;

    line-height:1.8;

    transition:.35s;

}.service-card:hover p{

    color:var(--text-bright);

}

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--brand-blue),
        transparent
    );

    transform:scaleX(0);

    transition:.4s;

}.service-card:hover::after{

    transform:scaleX(1);

}

.service-card:nth-child(2){

    animation:float1 6s ease-in-out infinite;

}.service-card:nth-child(3){

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

}.service-card:nth-child(4){

    animation:float3 6.5s ease-in-out infinite;

}.service-card:nth-child(5){

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

}.service-card:nth-child(6){

    animation:float5 6.5s ease-in-out infinite;

}@keyframes featuredFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}@keyframes float1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}@keyframes float2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}@keyframes float3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}@keyframes float4{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}@keyframes float5{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-7px);

    }

}


.featured-service {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 230px
        1fr;
  align-items: center;
  gap: 25px;
  padding: 55px;
  min-height: 430px;
  border-radius: 34px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--surface-1) 96%, transparent),
        color-mix(in srgb, var(--bg-2) 92%, transparent)
    );
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(25px);
  transition: .4s;
  animation: featuredFloat 7s ease-in-out infinite;
  will-change: transform;
}

.service-card {
  grid-column: span 2;
  min-height: 315px;
  padding: 35px;
  border-radius: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--card-2) 95%, transparent),
        color-mix(in srgb, var(--bg-2) 92%, transparent)
    );
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: .45s ease;
  will-change: transform;
}

.wide-card {
  grid-column: span 3;
}

.platform-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  min-height: 88px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: .35s ease;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
}


.process-section{
    position:relative;
    padding:92px 0 86px;
    overflow:hidden;

}.process-card{

    position:relative;

    padding:45px 35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(20px);

    transition:.45s;

    overflow:hidden;

    animation:processFade .8s ease both;

}.process-card:hover{

    transform:translateY(-12px);

    border-color:var(--brand-blue);

    box-shadow:0 25px 60px rgba(37,99,255,.18);

}.process-card span{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));

    color:var(--brand-white);

    font-size:22px;

    font-weight:700;

    margin-bottom:30px;

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

    margin-bottom:18px;
    position:relative;
    z-index:2;

    margin:0 0 12px ;

    color:var(--brand-white);
    line-height:1.25;
    font-weight:700;

}.process-card p{
    line-height:1.72;
    position:relative;
    z-index:2;

    margin:0 ;
    color:var(--text-faint);
    font-size:13px ;

    max-width:205px;

}.process-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:linear-gradient(

    var(--brand-blue),

    var(--brand-cyan));

    transition:.45s;

}.process-card:hover::before{

    height:100%;

}

.tech-stack-section::before {

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(37,99,255,.08),

    transparent 70%);

    top:-180px;

    right:-180px;

    z-index:-2;

}.tech-stack-section::after {

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(0,212,255,.06),

    transparent 70%);

    bottom:-180px;

    left:-180px;

    z-index:-2;

}

.process-card:nth-child(2){animation-delay:.12s;}.process-card:nth-child(3){animation-delay:.24s;}.process-card:nth-child(4){animation-delay:.36s;}.process-card:nth-child(5){animation-delay:.48s;}.process-card:nth-child(6){animation-delay:.60s;}

.experience-section{
    position:relative;
    padding:92px 0 86px;
    overflow:hidden;

}.timeline{

    position:relative;

    max-width:950px;

    margin:80px auto 0;

    padding-left:60px;

}.timeline::before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    width:2px;

    height:100%;

    background:linear-gradient(var(--brand-blue),var(--brand-cyan));

}.timeline-item::before{

    content:"";

    position:absolute;

    left:-52px;

    top:22px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--brand-blue);

    box-shadow:0 0 25px rgba(37,99,255,.7);

}.timeline-year{

    display:inline-block;

    margin-bottom:20px;

    padding:10px 22px;

    border-radius:100px;

    background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));

    color:var(--brand-white);

    font-weight:600;

}

.statistics-section{

    padding:50px 0;

}.stat-card{

    text-align:center;

    padding:45px 25px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:.45s;

}.stat-card:hover{

    transform:translateY(-12px);

    border-color:var(--brand-blue);

    box-shadow:0 20px 55px rgba(37,99,255,.18);

}.stat-card h2{

    font-size:56px;

    color:var(--brand-blue);

    margin-bottom:12px;

}.stat-card p{

    color:var(--text);

    font-size:17px;

}

.stat-card.glass{

    background:linear-gradient(160deg, rgba(37,99,255,.10), rgba(255,255,255,.04) 45%, color-mix(in srgb, var(--brand-purple) 8%, transparent));

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

    box-shadow:0 20px 50px color-mix(in srgb, var(--dark) 35%, transparent);

}.journey-panel{

    margin-top:80px;

    padding:60px;

    border-radius:36px;

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

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

    backdrop-filter:blur(20px);

    position:relative;

    overflow:hidden;

}.journey-panel::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:340px;

    height:340px;

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

    pointer-events:none;

}.journey-heading{

    text-align:center;

    margin-bottom:20px;

}.journey-heading h3{

    font-size:clamp(26px,4vw,40px);

    color:var(--brand-white);

    margin-bottom:10px;

}.journey-heading p{

    color:var(--text);

    font-size:16px;

    max-width:560px;

    margin:0 auto 26px;

} .journey-panel .timeline{

    display:grid;

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

    gap:26px;

    max-width:1100px;

    margin:30px auto 0;

    padding-left:0;

}.journey-panel .timeline::before{

    display:none;

}.journey-panel .timeline-item{

    margin-bottom:0;

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

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

    border-radius:26px;

    padding:30px;

    transition:.45s;

    position:relative;

    overflow:hidden;

}.journey-panel .timeline-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    border-radius:0 6px 6px 0;

    background:linear-gradient(var(--brand-blue),var(--brand-cyan));

}.journey-panel .timeline-item:hover{

    transform:translateY(-8px);

    border-color:var(--brand-blue);

    box-shadow:0 22px 50px rgba(37,99,255,.16);

}.journey-panel .timeline-year{

    display:inline-block;

    padding:6px 16px;

    border-radius:999px;

    background:rgba(37,99,255,.14);

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

    color:var(--brand-cyan);

    font-weight:600;

    font-size:13px;

    margin-bottom:16px;

}.journey-panel .timeline-content{

    padding:0;

}.journey-panel .timeline-content h3{

    font-size:22px;

    color:var(--brand-white);

    margin-bottom:4px;

}.experience-company{

    display:block;

    color:var(--brand-purple);

    font-size:14px;

    font-weight:500;

    margin-bottom:12px;

}.journey-panel .timeline-content p{

    color:var(--text);

    font-size:15px;

    line-height:1.7;

}.experience-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:16px;

}.experience-tag{

    font-size:12px;

    padding:5px 12px;

    border-radius:999px;

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

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

    color:var(--text-bright);

}

.testimonial-section{
    position:relative;
    padding:50px 0 70px;
    overflow:hidden;
}.testimonial-heading{
    max-width:900px;
    margin:0 auto 34px;
}.testimonial-heading h2{
    margin:18px 0 14px;
    color:var(--brand-white);
    font-size:58px;
    line-height:1.08;
    font-weight:800;
}.testimonial-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}.testimonial-heading p{
    max-width:740px;
    margin:0 auto;
    color:var(--text-faint);
    font-size:16px;
    line-height:1.7;
}

.testimonial-review-panel{
    position:relative;

    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:30px;
    align-items:center;

    max-width:100%;
    margin:0 auto 34px;

    padding:24px 28px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--bg-2) 92%, transparent),
        color-mix(in srgb, var(--dark-2) 96%, transparent)
    );

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

    box-shadow:
        0 18px 40px color-mix(in srgb, var(--dark) 18%, transparent),
        inset 0 1px 0 rgba(255,255,255,.02);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}.testimonial-review-intro{
    display:flex;
    align-items:center;
    gap:15px;
    min-width:0;
}.testimonial-review-icon{
    width:58px;
    height:58px;
    min-width:58px;

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

    border-radius:16px;

    color:var(--brand-purple);
    background:rgba(139,92,248,.08);
    border:1px solid rgba(139,92,248,.23);

    font-size:23px;
}.testimonial-review-intro h3{
    margin:0 0 5px;
    color:var(--brand-white);
    font-size:21px;
    line-height:1.2;
    font-weight:700;
}.testimonial-review-intro h3 span{
    color:var(--brand-indigo);
}.testimonial-review-intro p{
    margin:0;
    color:var(--text-muted-2);
    font-size:12.5px;
    line-height:1.55;
}.testimonial-review-form{
    display: grid ;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) ;
    column-gap:12px;
    row-gap:10px;
    min-width:0;
    grid-template-rows: auto auto ;
    gap: 10px 12px ;
}.testimonial-form-top{
    grid-column: 1 ;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-row: 1 ;
}
.testimonial-form-top input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--dark) 55%, transparent);
  color: var(--brand-white);
  outline: none;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
  height: 43px;
}
.testimonial-form-top input::placeholder,
.testimonial-review-input::placeholder{
    color:var(--placeholder);
}.testimonial-form-top input:focus,
.testimonial-review-input:focus{
    border-color:rgba(37,99,255,.50);
    background:color-mix(in srgb, var(--bg-2) 75%, transparent);
    box-shadow:0 0 0 3px rgba(37,99,255,.07);
}
.testimonial-review-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--dark) 55%, transparent);
  color: var(--brand-white);
  outline: none;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
  grid-column: 2 ;
  grid-row: 1 ;
  height: 96px ;
  min-height: 96px ;
  resize: none;
}
 .testimonial-form-rating{
    grid-column: 1 ;
    display: flex ;
    align-items: center ;
    min-height:40px;
    width: auto ;
    min-width: 0 ;
    flex: 0 0 auto ;
    grid-row: 2 ;
    justify-self: start ;
}.testimonial-stars{
    display: flex ;
    align-items: center ;
    gap: 6px ;

    min-height:0;
    padding: 0 ;
    border: none ;
    border-radius:0;
    background: transparent ;
    width: auto ;
    min-width: 0 ;
    justify-content:flex-start ;
    margin:0 ;
    flex: 0 0 auto ;
}.testimonial-stars button{
    appearance:none;
    border:0;
    background:transparent;

    padding:0;

    color:var(--placeholder);

    font-size:23px;
    line-height:1;

    cursor:pointer;

    transition:
        color .2s ease,
        transform .2s ease,
        text-shadow .2s ease;
}

.testimonial-submit-btn{
    grid-column: 2 ;
    width: 100% ;
    min-width: 0 ;
    flex: 1 1 auto ;
    margin: 0 ;
    max-width: 100% ;
    white-space: nowrap ;
    grid-row: 2 ;
}.testimonial-submit-btn:hover{
    transform:translateY(-2px);
}

.timeline-item:nth-child(2){

    animation-delay:.15s;

}.timeline-item:nth-child(3){

    animation-delay:.30s;

}.timeline-item:nth-child(4){

    animation-delay:.45s;

}.faq-item{

    margin-bottom:24px;

    border-radius:22px;

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

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

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:.4s;

}.faq-item:hover{

    border-color:var(--brand-blue);

}.faq-question{

    width:100%;

    background:none;

    border:none;

    color:var(--brand-white);

    padding:28px 35px;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:20px;

    font-weight:600;

    text-align:left;

}.faq-question::after{

    content:"+";

    font-size:28px;

    color:var(--brand-blue);

}.faq-answer{

    padding:0 35px 28px;

}.faq-answer p{

    line-height:1.9;

}

.contact-section{

    position:relative;

    padding:50px 0;

}

.footer-logo h2{

    font-size:42px;

    margin-bottom:20px;

}.footer-logo span{

    color:var(--brand-blue);

}.footer-logo p{

    max-width:380px;

}.footer-links h4,

.footer-services h4,

.footer-social h4{

    margin-bottom:25px;

    font-size:22px;

}.footer-links ul li,

.footer-services ul li{

    margin-bottom:7px;

}


.faq-section::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,

    rgba(37,99,255,.08),

    transparent 70%);
  z-index: -1;
  top: -200px;
  right: -180px;
}

.contact-section::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,

    rgba(37,99,255,.08),

    transparent 70%);
  z-index: -1;
  bottom: -180px;
  left: -180px;
}


body.loaded section{

    opacity:1;

}

.header-contact{

    position:relative;

    margin-left:18px;

}

.contact-toggle{

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));

    color:var(--brand-white);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:22px;

    position:relative;

    transition:.35s;

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

}.contact-toggle:hover{

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

}


.contact-dot {
  right: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-width: 2px;
  position: absolute;
  background: var(--success);
  border: 2px solid var(--brand-white);
  border-radius: 50%;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot{

    0%{

        box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);

    }

    70%{

        box-shadow:0 0 0 12px color-mix(in srgb, var(--success) 0%, transparent);

    }

    100%{

        box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);

    }

}

.contact-popup{

    position:absolute;

    top:78px;

    right:0;

    width:min(370px, calc(100vw - 36px));
    max-width:min(370px, calc(100vw - 36px));

    max-height:80vh;

    overflow-y:auto;

    overflow-x:hidden;

    background:color-mix(in srgb, var(--title) 96%, transparent);

    backdrop-filter:blur(20px);

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

    border-radius:26px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:9999;

} .header-contact.active .contact-popup{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
 padding: 20px;
}

.contact-popup::-webkit-scrollbar{

    width:6px;

}.contact-popup::-webkit-scrollbar-thumb{

    background:var(--brand-blue);

    border-radius:30px;

}.contact-popup::-webkit-scrollbar-track{

    background:transparent;

}

.popup-header{

    padding: 10px 0;

    display:flex;

    align-items:center;

    gap:18px;

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

}.popup-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

    padding:3px;

    background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));

    flex-shrink:0;

}.popup-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

}.popup-info h4{

    color:var(--brand-white);

    font-size:25px;

    margin:0;

    font-weight:700;

}.popup-info span{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    color:var(--text-muted);

    font-size:15px;

}.popup-info span i{

    color:var(--success);

    font-size:11px;

}

.social-grid{

    display:grid;

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

    gap:16px;

    padding: 10px 0;

}.social-grid a{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:20px 15px;

    border-radius:20px;

    text-decoration:none;

    color:var(--brand-white);

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

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

    transition:.35s;

}.social-grid a:hover{

    transform:translateY(-6px);

    border-color:var(--brand-blue);

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

    box-shadow:

    0 12px 30px rgba(37,99,255,.18);

}.social-grid i{

    font-size:28px;

    color:var(--brand-blue);

}.social-grid span{

    font-size:14px;

    font-weight:600;

}

.projects-section{

    position:relative;

    padding:50px 0;

    overflow:hidden;

}.projects-section .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 15px;

}

.projects-header{

    max-width:720px;

    margin:0 auto 80px;

    text-align:center;

}.projects-header h2{

    font-size:58px;

    line-height:1.15;

    color:var(--brand-white);

    font-weight:800;

    margin-bottom:20px;

}.projects-header h2 span{

    color:var(--brand-blue);

}.projects-header p{

    font-size:17px;

    line-height:1.9;

    color:var(--text-muted);

    max-width:650px;

    margin:auto;

}

.featured-project{

    display:grid;

    grid-template-columns:55% 45%;

    gap:60px;

    align-items:start;

    margin-top:70px;

}

.project-preview{

    position:relative;

    width:100%;
    min-height:0;

}



.browser-window{

    position:relative;

    width:100%;

    max-width:720px;

    margin:auto;

    z-index:5;

    overflow:hidden;

    border-radius:24px;

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

    background:var(--panel-2);

    box-shadow:

        0 30px 70px rgba(0,0,0,.45),

        0 0 0 1px rgba(37,99,255,.08);

    animation:browserFloat 6s ease-in-out infinite;

}

.browser-top{

    display:flex;

    align-items:center;

    gap:18px;

    height:56px;

    padding:0 18px;

    background:var(--panel-3);

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

}

.browser-address{

    flex:1;

    height:36px;

    border-radius:50px;

    display:flex;

    align-items:center;

    padding:0 18px;

    background:var(--title);

    color:var(--text-muted);

    font-size:13px;

    overflow:hidden;

}.browser-address span{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.browser-window:hover img{

    transform:scale(1.04);

    filter:brightness(1.05);

}





.project-preview::before{

    content:none;

}

@keyframes browserFloat{

    50%{

        transform:translateY(-6px);

    }

}@keyframes tabletFloat{

    50%{

        transform:translateY(-12px);

    }

}@keyframes mobileFloat{

    50%{

        transform:translateY(-10px);

    }

}

.perf-section{
    width:100%;
}.perf-tabs{
    display:flex;
    gap:0;
    margin-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}.perf-tab{
    flex:1 1 0;
    box-sizing:border-box;
    text-align:center;
    padding:10px 12px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:var(--placeholder);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    letter-spacing:.03em;
    cursor:pointer;
    transition:.25s ease;
}.perf-tab:hover{
    color:var(--text-muted-2);
}.perf-tab.active{
    color:var(--brand-indigo);
    border-bottom-color:var(--brand-blue);
}.case-perf-tabs{
    border-bottom-color:rgba(255,255,255,.06);
}.perf-flash .perf-circle{
    animation: perfFlash 1.2s ease;
}@keyframes perfFlash{
    0%{ filter:brightness(1); }
    15%{ filter:brightness(1.8) drop-shadow(0 0 12px rgba(99,102,255,.6)); }
    100%{ filter:brightness(1); }
}

.perf-api-missing{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    gap:14px;
    border:1px dashed rgba(255,255,255,.1);
    border-radius:16px;
    background:rgba(255,255,255,.02);
    grid-column:1/-1;
}.perf-api-missing-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:color-mix(in srgb, var(--warning) 12%, transparent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:var(--warning);
    margin-bottom:4px;
}.perf-api-missing h4{
    font-size:17px;
    font-weight:700;
    color:var(--text-bright);
    margin:0;
}.perf-api-missing p{
    font-size:14px;
    color:var(--placeholder);
    max-width:380px;
    line-height:1.6;
    margin:0;
}.perf-api-missing p strong{
    color:var(--brand-indigo);
}.perf-api-btn{
    margin-top:6px;
    font-size:13px;
    padding:10px 22px;
    gap:8px;
}.perf-api-btn i{
    font-size:13px;
}

#performanceGrid{

    display:grid;

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

    gap:30px;

    margin-top:20px;

}.perf-item{

    text-align:center;

}.perf-circle{

    width:105px;
    height:105px;

    position:relative;

    margin:auto;

    border-radius:50%;

    background:transparent;

    box-shadow:none;

}.perf-circle svg{

    width:105px;

    height:105px;

    transform:rotate(-90deg);

}.perf-circle circle{

    fill:none;

    stroke-width:8;

}.perf-circle .bg{

    stroke:var(--card-2);

}.perf-item .perf-circle svg{

    stroke:var(--brand-blue);

    stroke-linecap:round;

    transition:1.5s ease;

    filter:

    drop-shadow(0 0 5px rgba(37,99,255,.18));

}.perf-circle span{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    color:var(--brand-white);

}.perf-item h5{

    margin-top:15px;

    color:var(--brand-white);

    font-size:15px;

    font-weight:600;

}

.project-status{

    display:flex;

    align-items:center;
position:relative;

overflow:visible;

    gap:10px;

    padding:5px 15px;

    border-radius:999px;

    background:color-mix(in srgb, var(--success) 10%, transparent);

    border:1px solid color-mix(in srgb, var(--success) 30%, transparent);
}.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

    display:inline-block;

    margin-right:8px;

    box-shadow:0 0 12px color-mix(in srgb, var(--success) 80%, transparent);

    animation:livePulse 1.8s infinite;

    flex-shrink:0;

}.project-top-meta{

    display:flex;

    align-items:center;

    gap:14px;
    margin-bottom:0;

    flex-wrap:wrap;

}.project-country-top{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:5px 15px;

    border-radius:999px;

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

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

    white-space:nowrap;

    width:auto;

    color:var(--brand-white);

    backdrop-filter:blur(12px);

}

@keyframes livePulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);

    }

    70%{

        transform:scale(1.2);

        box-shadow:0 0 0 12px color-mix(in srgb, var(--success) 0%, transparent);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);

    }

}

#projectCountryTopText{

    font-size:14px;

    font-weight:600;

    color:var(--text-bright);

}

#projectFlagTop{

    display:none;

}

.project-title{

    font-size:52px;

    line-height:1.15;

    color:var(--brand-white);

    font-weight:800;

    margin:0;
    display:flex;
    align-items:center;
    gap:14px;

}#projectFlag{

    font-size:22px;

}

.project-about h4{

    font-size:16px;

    color:var(--brand-blue);

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:14px;

}.project-about p{

    color:var(--text-muted);

    line-height:1.9;

    font-size:16px;

}

.project-technologies h4{

    font-size:16px;

    color:var(--brand-blue);

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

}.technology-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tech-chip{

    display:flex;

    align-items:center;

    gap:10px;

    padding:6px 10px;

    border-radius:50px;

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

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

    transition:.35s;

}.tech-chip i{

    color:var(--brand-blue);

    font-size:15px;

}.tech-chip span{

    color:var(--brand-white);

    font-size:14px;

    font-weight:600;

}.tech-chip:hover{

    transform:translateY(-5px);

    border-color:var(--brand-blue);

    box-shadow:

        0 15px 35px rgba(37,99,255,.18);

}

.secondary-btn{

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

    color:var(--brand-white);

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

}.secondary-btn:hover{

    border-color:var(--brand-blue);

    transform:translateY(-4px);

}

.case-study-panel{

    position:fixed;

    top:0;

    right:-100%;

    width:700px;

    max-width:100%;

    height:100vh;

    background:var(--title);

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

    overflow-y:auto;

    transition:.45s ease;

    z-index:9999;

    padding:45px;

}.case-study-panel.active{

    right:0;

}

.case-close-btn{

    position:absolute;

    top:25px;

    right:25px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

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

    color:var(--brand-white);

    font-size:20px;

    transition:.35s;

}.case-close-btn:hover{

    background:var(--brand-blue);

    transform:rotate(90deg);

}

.case-header{

    margin-bottom:40px;

}.case-status{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:40px;

    background:color-mix(in srgb, var(--success) 10%, transparent);

    border:1px solid color-mix(in srgb, var(--success) 25%, transparent);

    color:var(--success);

    font-size:13px;

    font-weight:600;

}.case-header h2{

    font-size:42px;

    color:var(--brand-white);

    margin:25px 0 18px;

}.case-project-meta{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-muted);

    font-size:15px;

}

.case-tabs{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:35px;

}.case-tab-btn{
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(255,255,255,.04);
  color: var(--brand-white);
  transition: .35s;
}.case-tab-btn.active{

    background:var(--brand-blue);

}.case-tab-btn:hover{

    border-color:var(--brand-blue);

}

.case-content{

    min-height:350px;

}.case-tab-content{

    display:none;

}.case-tab-content.active{

    display:block;

}.case-block{

    margin-bottom:35px;

}.case-block h3{

    color:var(--brand-white);

    margin-bottom:15px;

    font-size:22px;

}.case-block p{

    color:var(--text-muted);

    line-height:1.9;

}

.case-footer{

    margin-top:45px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.case-study-panel::-webkit-scrollbar{

    width:8px;

}.case-study-panel::-webkit-scrollbar-thumb{

    background:var(--brand-blue);

    border-radius:20px;

}

.projects-showcase{

    margin-top:50px;

}.projects-showcase-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}.projects-showcase-title span{

    color:var(--brand-blue);

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}.projects-showcase-title h3{

    margin-top:10px;

    color:var(--brand-white);

    font-size:38px;

    font-weight:700;

}

.projects-navigation{

    display:flex;

    gap:14px;

}.project-prev,
.project-next{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--brand-white);
  transition: .35s;
}.project-prev:hover,
.project-next:hover{

    background:var(--brand-blue);

    border-color:var(--brand-blue);

    transform:translateY(-4px);

}

.projectsSwiper{

    overflow:hidden;

    padding:14px 6px 52px;

}.projectsSwiper .swiper-wrapper{

    align-items:stretch;

}.project-card:hover .project-card-image img{

    transform:scale(1.08);

}

.project-card-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        color-mix(in srgb, var(--title) 92%, transparent)

    );

    opacity:0;

    transition:.35s;

}.project-card:hover .project-card-overlay{

    opacity:1;

}

.project-card-content{

    padding:22px;
    padding-top:22px;
    position:relative;
    z-index:10;

}.project-card-content h4{

    color:var(--brand-white);

    font-size:21px;

    margin-bottom:14px;

}

.project-card.active{

    border-color:var(--brand-blue);

    box-shadow:

    0 0 0 1px rgba(37,99,255,.30),

    0 20px 50px rgba(37,99,255,.20);

}.project-card.active::after{

    content:"Selected";

    position:absolute;

    top:18px;

    right:18px;

    background:var(--brand-blue);

    color:var(--brand-white);

    padding:8px 14px;

    border-radius:40px;

    font-size:12px;

    font-weight:600;

}

.project-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transition:.8s;

}.project-card:hover::before{

    left:130%;

}

.projects-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:35px;

}.projects-pagination .swiper-pagination-bullet{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

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

    color:var(--placeholder);

    font-size:15px;

    font-weight:700;

    opacity:1;

    transition:.35s ease;

}.projects-pagination .swiper-pagination-bullet:hover{

    border-color:var(--brand-blue);

    color:var(--brand-white);

    transform:translateY(-3px);

}.projects-pagination .swiper-pagination-bullet-active{

    background:var(--brand-blue);

    color:var(--brand-white);

    border-color:var(--brand-blue);

    box-shadow:

        0 0 15px rgba(37,99,255,.35),

        0 0 35px rgba(37,99,255,.18);

}

.project-about, .project-technologies {

    position:relative;
    padding-top:20px;

}
.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  position: relative;
  padding-top: 20px;
}
.project-about::before,
.project-technologies::before,
.project-actions::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:linear-gradient(

        90deg,

        rgba(37,99,255,.25),

        transparent

    );

}


@keyframes cardAppear{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.perf-loader{

    width:105px;

    height:105px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}.loader-ring{

    width:78px;

    height:78px;

    border-radius:50%;

    border:6px solid rgba(37,99,255,.15);

    border-top:6px solid var(--brand-blue);

    animation:perfSpin .8s linear infinite;

}@keyframes perfSpin{

    100%{

        transform:rotate(360deg);

    }

}

.project-title-favicon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:12px;
    object-fit:contain;
    background:var(--brand-white);
    padding:4px;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
}.project-title-text{
    display:inline-block;
}
.project-card::after,
.project-card .project-card-arrow,
.project-card .card-arrow{
    display:none ;
}

.perf-item .perf-unavailable{

    width:100px;

    height:100px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px dashed color-mix(in srgb, var(--text-muted) 45%, transparent);

    color:var(--text-muted);

    font-size:26px;

    font-weight:700;

}

.hero-visual{

    position:relative;
    width:min(620px,100%);

    aspect-ratio:1/1;
    margin-inline:auto;
    max-width:620px;

} .hero-visual-glow{

    position:absolute;

    inset:6%;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(37,99,255,.30),
        rgba(0,212,255,.12) 45%,
        transparent 72%);

    filter:blur(40px);

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

    pointer-events:none;

}@keyframes hvFloat{

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

    50%{transform:scale(1.07);opacity:1;}

} .hero-visual-ring{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}.hero-visual-ring-1{

    inset:-2%;

    border:1px dashed rgba(99,102,255,.22);

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

}.hero-visual-ring-2{

    inset:8.5%;

    border:1px solid rgba(0,212,255,.16);

}@keyframes hvRingPulse{

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

    50%{opacity:1;transform:scale(1.015);}

}

.hero-tech-orbit{

    position:absolute;

    pointer-events:none;

}@keyframes htSpin{

    from{transform:rotate(0deg);}

    to{transform:rotate(360deg);}

} .hero-tech-chip{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    animation:htSpin var(--od,48s) linear infinite;

    animation-direction:inherit;

    animation-delay:calc(-1 * var(--i,0) * var(--od,48s) / var(--n,8));

}.hero-tech-orbit-inner .hero-tech-chip{

    --od:36s;

    --n:6;

} .hero-tech-chip i{

    position:absolute;

    top:0;

    left:50%;

    translate:-50% -50%;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:var(--secondary);

    border-radius:50%;

    background:linear-gradient(160deg,color-mix(in srgb, var(--card-2) 92%, transparent),color-mix(in srgb, var(--dark-2) 88%, transparent));

    border:1px solid rgba(99,102,255,.35);

    box-shadow:
        0 0 18px rgba(37,99,255,.22),
        inset 0 0 12px rgba(0,212,255,.06);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    animation:htSpinRev var(--od,48s) linear infinite;

    animation-direction:inherit;

    animation-delay:calc(-1 * var(--i,0) * var(--od,48s) / var(--n,8));

}@keyframes htSpinRev{

    from{transform:rotate(0deg);}

    to{transform:rotate(-360deg);}

}

.hero-visual-profile{

    position:absolute;
    inset:17%;

    border-radius:50%;

    padding:clamp(10px,2.4vw,14px);

    background:
        linear-gradient(150deg,
        rgba(37,99,255,.20),
        rgba(0,212,255,.06) 55%,
        color-mix(in srgb, var(--dark-2) 40%, transparent));

    border:1px solid rgba(99,102,255,.30);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);
    box-shadow:
        0 24px 70px rgba(37,99,255,.28),
        inset 0 0 34px rgba(37,99,255,.14);

} .hero-visual-profile::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:50%;

    background:conic-gradient(from 0deg,
        transparent 0deg 300deg,
        rgba(0,212,255,.85) 330deg,
        rgba(99,102,255,.45) 350deg,
        transparent 360deg);

    -webkit-mask:radial-gradient(farthest-side,
        transparent calc(100% - 3px),
        var(--black) calc(100% - 2px));

    mask:radial-gradient(farthest-side,
        transparent calc(100% - 3px),
        var(--black) calc(100% - 2px));

    animation:hvConic 6s linear infinite;

    pointer-events:none;

}@keyframes hvConic{

    to{transform:rotate(360deg);}

} .hero-visual-photo{

    position:relative;

    width:100%;

    height:100%;

    border-radius:50%;

    overflow:hidden;

    background:var(--dark-2);

    box-shadow:inset 0 0 26px color-mix(in srgb, var(--dark) 85%, transparent);

}.hero-visual-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 30%;

    opacity:0;

    transition:opacity .8s ease .1s;

}.hero-visual-photo img.is-loaded{

    opacity:1;

} .hero-visual-monogram{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-weight:700;

    font-size:clamp(42px,9vw,68px);

    letter-spacing:2px;

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

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:none;

    z-index:-1;

}

.desktop-preview.shot-scrollable img {

    height:auto;

    min-height:100%;

    object-fit:cover;

    object-position:top center;

}
.tablet-preview.shot-scrollable img {
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
}

.mobile-preview.shot-scrollable img {
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
}


.desktop-preview.shot-scrollable::after{

    content:"";

    position:absolute;

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

    height:46px;

    background:linear-gradient(to top,color-mix(in srgb, var(--dark) 55%, transparent),transparent);

    pointer-events:none;

}

.project-card-media{
    position:relative;
    height:250px;
    overflow:hidden;

    background:

        radial-gradient(120% 90% at 50% 0%,rgba(37,99,255,.14),transparent 60%),

        linear-gradient(180deg,var(--dark-2) 0%,var(--card-2) 100%);
    isolation:isolate;

} .project-card:hover .pcm-desktop{
    transform:translateY(-3px);}.project-card:hover .pcm-tablet{
    transform:translateY(-5px) rotate(-1deg);}.project-card:hover .pcm-mobile{
    transform:translateY(-6px) rotate(1deg);}   

 .tablet-preview .device-cam{

    position:absolute;

    top:9px;left:50%;

    transform:translateX(-50%);

    width:7px;height:7px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,var(--card-2),var(--bg-2) 72%);

    box-shadow:
        inset 0 0 2px rgba(255,255,255,.85),

        0 0 0 2px rgba(255,255,255,.05);

} .device-screen{

    position:relative;

    width:100%;

    height:100%;

    border-radius:14px;

    overflow:hidden;

    background:var(--bg-deep);

}.tablet-preview .device-screen{border-radius:13px;}.device-screen img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}.device-homebar{

    position:absolute;

    left:50%;bottom:9px;

    transform:translateX(-50%);

    width:54px;height:4px;

    border-radius:99px;

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

    pointer-events:none;

    z-index:6;

} .mobile-preview .device-screen{border-radius:24px;} .device-island{

    position:absolute;

    top:10px;left:50%;

    transform:translateX(-50%);

    width:46px;height:13px;

    border-radius:99px;

    background:var(--bg-deep);

    box-shadow:

        inset 0 0 3px rgba(255,255,255,.07),

        0 0 0 1px rgba(255,255,255,.05);

    z-index:6;

}.device-island::after{

    content:"";

    position:absolute;

    right:4px;top:50%;

    transform:translateY(-50%);

    width:5px;height:5px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,var(--card-2),var(--bg-deep) 75%);

}.mobile-preview .device-homebar{

    width:40px;height:4px;

    bottom:8px;

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

} .tablet-preview.shot-scrollable::after, .mobile-preview.shot-scrollable::after {

    content:none ;

} .device-screen.shot-scrollable img{

    height:auto;

    min-height:100%;

    object-fit:cover;

    object-position:top center;

}

.case-gallery{

    display:grid;

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

    gap:18px;

    align-items:end;

}.gallery-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}.gallery-item>span:last-child{

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:var(--muted,var(--text-muted));

}.gi-frame{

    position:relative;

    width:100%;

    box-sizing:border-box;

} .gi-frame-desktop{

    border-radius:14px;

    overflow:hidden;

    background:var(--panel-2);

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

    box-shadow:

        inset 0 0 0 2px var(--ring),

        0 20px 45px rgba(255,255,255,.45);

}.gif-bar{

    display:flex;

    align-items:center;

    gap:5px;

    height:24px;

    padding:0 10px;

    background:var(--panel-3);

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

}.gif-bar i{

    width:8px;height:8px;border-radius:50%;

    background:var(--brand-magenta);display:block;

}.gif-bar i:nth-child(2){background:var(--brand-cyan);}.gif-bar i:nth-child(3){background:var(--brand-cyan);}.gi-frame-desktop img{

    display:block;

    width:100%;

    height:230px;

    object-fit:cover;

    object-position:top center;

} .gi-frame-tablet{

    width:min(240px,100%);

    padding:22px 11px 26px;

    border-radius:26px;

    background:linear-gradient(160deg,var(--grad-a),var(--grad-b));

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

    box-shadow:

        inset 0 0 0 3px var(--ring),

        0 22px 48px rgba(255,255,255,.5);

}.gi-frame-tablet .device-cam{top:8px;}.gi-frame-tablet .device-homebar{bottom:7px;}.gi-frame-tablet img{

    height:300px;

} .gi-frame-mobile{

    width:min(150px,100%);

    padding:24px 7px 20px;

    border-radius:32px;

    background:linear-gradient(160deg,var(--grad-c),var(--grad-d));

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

    box-shadow:

        inset 0 0 0 3px var(--ring),

        0 24px 50px rgba(255,255,255,.55);

}.gi-frame-mobile .device-island{top:9px;width:40px;height:12px;}.gi-frame-mobile .device-homebar{bottom:6px;width:34px;}.gi-frame-mobile img{

    height:300px;

}

.svg-device-stage{
    position:relative;
    width:100%;
    max-width:850px;
    margin:auto;
    aspect-ratio:1672 / 913;
    isolation:isolate;
    overflow:visible;
}

.svg-device-url{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
} .svg-device-viewport{
    position:absolute;
    z-index:1;
    overflow:hidden;
    background:transparent;
    pointer-events:auto;
}.svg-device-viewport img{
    display:block;
    width:100%;
    height:auto;
    min-width:100%;
    object-fit:initial;
    object-position:top center;
    transform:translateY(0);
    transform-origin:top center;
    transition:transform .7s ease;
    will-change:transform;
}

 .svg-device-desktop{
    left:25.5981%;
    top:8.1051%;
    width:50.3589%;
    height:52.5740%;
    border-radius:3px;
} .svg-device-tablet{
    left:74.2823%;
    top:37.1303%;
    width:21.6507%;
    height:52.5740%;
    border-radius:4px;
} .svg-device-mobile{
    left:68.1220%;
    top:50.3834%;
    width:11.3038%;
    height:44.6878%;
    border-radius:5px;
} .svg-device-laptop{
    left:4.9641%;
    top:46.2213%;
    width:38.0383%;
    height:41.9606%;
    border-radius:4px;
} .svg-device-viewport.shot-scrollable img{
    height:auto;
    min-height:100%;
    object-fit:initial;
} .svg-device-stage:hover .svg-device-viewport:not(.shot-scrollable) img{
    transform:scale(1.025);
} .svg-device-shell{
    position:absolute;
    inset:0;
    z-index:2;
    display:block;
    width:100%;
    height:100%;
    object-fit:fill;
    pointer-events:none;
}

.pcm-desktop.shot-scrollable > img,
.pcm-tablet.shot-scrollable > img,
.pcm-mobile.shot-scrollable > img{
    height:auto;
    min-height:100%;
    object-fit:cover;
    object-position:top center;
}.project-card-flag{
    width:20px ;
    height:14px ;
    min-width:20px;
    object-fit:cover;
    object-position:center;
    display:block ;
    border-radius:2px;
    flex:0 0 auto;
}.project-card-country-name{
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hero-tech-orbit-single{
    position:absolute;
    inset:0;
    pointer-events:none;
    border:1px solid rgba(99,102,255,.30);
    border-radius:50%;
    box-sizing:border-box;
    animation:heroTechOrbitSpin 72s linear infinite;
}.hero-tech-orbit-single .hero-tech-chip{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    animation:none;
    transform:rotate(var(--angle));
    transform-origin:50% 50%;
}.hero-tech-orbit-single .hero-tech-chip i{
    position:absolute;
    top:0;
    left:50%;
    width:58px;
    height:58px;
    margin:0;
    translate:-50% -50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:23px;
    color:var(--secondary);
    background:linear-gradient(160deg,color-mix(in srgb, var(--card-2) 92%, transparent),color-mix(in srgb, var(--dark-2) 88%, transparent));
    border:1px solid rgba(99,102,255,.35);
    box-shadow:
        0 0 18px rgba(37,99,255,.22),
        inset 0 0 12px rgba(0,212,255,.06);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transform:rotate(calc(-1 * var(--angle)));
    transform-origin:50% 50%;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
    animation:heroTechIconUpright 72s linear infinite;
}.hero-visual .hero-tech-orbit-single .hero-tech-chip i{
    width:68px;
    height:68px;
    font-size:32px;
}@keyframes heroTechOrbitSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}@keyframes heroTechIconUpright{
    from{transform:rotate(calc(-1 * var(--angle)));}
    to{transform:rotate(calc(-360deg - var(--angle)));}
}

.hero-visual .hero-visual-ring-1,
.hero-visual .hero-visual-ring-2{
    display:none;
}.hero-visual .hero-visual-profile{
    inset:7%;
}

.about-info-grid .info-card{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    align-items:center;

    min-width:0;
    min-height:132px;
    padding:20px 22px ;

    border-radius:22px;
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--title) 92%, transparent),
        color-mix(in srgb, var(--surface-1) 86%, transparent)
    );

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

    box-shadow:
        0 14px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    overflow:hidden;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
    grid-column:auto;
} .about-info-grid .info-icon{
    grid-column:1;
    grid-row:1 / span 2;

    width:56px ;
    height:56px ;
    min-width:56px;

    margin:0 ;

    border-radius:16px;

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

    font-size:23px ;

    background:rgba(37,99,255,.10);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025);
} .about-info-grid .info-card::before{
    content:"";
    position:absolute;

    left:91px;
    top:25px;
    bottom:25px;

    width:1px;

    background:color-mix(in srgb, var(--text-muted) 18%, transparent);

    transform:none ;
    opacity:1 ;

    transition:background .35s ease;
} .about-info-grid .info-card h4{
    grid-column:2;
    grid-row:1;

    margin:0 0 6px ;

    color:var(--brand-white);

    font-size:19px ;
    line-height:1.25;

    font-weight:700;
} .about-info-grid .info-card p{
    grid-column:2;
    grid-row:2;

    margin:0 ;

    color:var(--text-muted);

    font-size:13.5px ;
    line-height:1.6;

    max-width:100%;
} .about-info-grid .info-card::after{
    content:"";

    position:absolute;

    left:22px;
    bottom:0;

    width:48px;
    height:3px;

    border-radius:99px;

    background:var(--brand-blue);

    opacity:.95;

    transition:.35s ease;
}.about-info-grid .info-card:nth-child(2)::after{
    background:var(--brand-purple);
}.about-info-grid .info-card:nth-child(3)::after{
    background:var(--brand-magenta);
} .about-info-grid .mission{
    color:var(--brand-blue);
}.about-info-grid .vision{
    color:var(--brand-purple);
}.about-info-grid .passion{
    color:var(--brand-magenta);
} .about-info-grid .info-card:hover{
    transform:translateY(-6px);

    border-color:rgba(37,99,255,.28);

    box-shadow:
        0 24px 48px rgba(0,0,0,.28),
        0 8px 28px rgba(37,99,255,.08);
}.about-info-grid .info-card:hover::before{
    background:rgba(99,102,255,.28);
}.about-info-grid .info-card:hover::after{
    width:58px;
}

 .about-info-grid .info-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    grid-template-columns:56px minmax(0,1fr) !important;
    grid-template-rows:min-content min-content ;
    align-items:stretch ;
    align-content:center ;
}

 .about-info-grid .info-card:last-child:nth-child(odd) h4{
    grid-column:2;
    grid-row:1;
    margin:0 0 2px ;
    max-width:520px;
    align-self:end ;
    line-height:1.2 ;
}.about-info-grid .info-card:last-child:nth-child(odd) p{
    grid-column:2;
    grid-row:2;
    margin:0 ;
    max-width:520px;
    align-self:start ;
    line-height:1.5 ;
} .about-info-grid .info-card:last-child:nth-child(odd)::before{
    left:91px;
    top:25px;
    bottom:25px;
}

.about-info-grid > .info-card:last-child:nth-child(odd){
    grid-column:1 / -1 ;
    width:100% ;
    grid-template-columns:56px minmax(0,1fr) !important;
    grid-template-rows:auto auto ;
}

 .about-info-grid > .info-card{
    position:relative ;
    display:grid ;
    grid-template-columns:56px minmax(0,1fr) !important;
    grid-template-rows:min-content min-content ;
    column-gap:16px !important;
    align-content:center ;
    align-items:center ;

    min-width:0;
    min-height:132px ;
    padding:20px 22px ;

    border-radius:22px;
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--title) 92%, transparent),
        color-mix(in srgb, var(--surface-1) 86%, transparent)
    );
    border:1px solid rgba(255,255,255,.09);

    box-shadow:
        0 14px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    overflow:hidden;
}  .about-info-grid > .info-card .info-icon{
    grid-column:1 ;
    grid-row:1 / span 2 ;

    width:56px ;
    height:56px ;
    min-width:56px;

    margin:0 ;
    border-radius:16px;

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

    font-size:23px ;
    background:rgba(37,99,255,.10);
} .about-info-grid > .info-card::before{
    content:"";
    position:absolute;
    left:91px;
    top:25px;
    bottom:25px;
    width:1px;
    background:color-mix(in srgb, var(--text-muted) 18%, transparent);
    opacity:1 ;
    transform:none ;
} .about-info-grid > .info-card h4{
    grid-column:2 ;
    grid-row:1 ;
    margin:0 0 4px ;

    color:var(--brand-white);
    font-size:19px ;
    line-height:1.2 ;
    font-weight:700;
}.about-info-grid > .info-card p{
    grid-column:2 ;
    grid-row:2 ;
    margin:0 ;

    color:var(--text-muted);
    font-size:13.5px ;
    line-height:1.5 ;
    max-width:560px;
} .about-info-grid > .info-card:last-child:nth-child(odd) h4,
.about-info-grid > .info-card:last-child:nth-child(odd) p{
    max-width:560px;
} .about-info-grid > .info-card::after{
    content:"";
    position:absolute;
    left:22px;
    bottom:0;
    width:48px;
    height:3px;
    border-radius:99px;
    background:var(--brand-blue);
    opacity:.95;
}.about-info-grid > .info-card:nth-child(2)::after{
    background:var(--brand-purple);
}.about-info-grid > .info-card:nth-child(3)::after{
    background:var(--brand-magenta);
}

.about-left .about-card.project-card,
.about-wrapper .about-card.project-card{
    height:auto !important;
    min-height:0 ;
    max-height:none ;
    flex:none ;
}

.services-section .service-card {
    animation:none ;
}

.services-section .service-card .service-no{
    position:absolute ;
    right:16px ;
    bottom:0 ;

    margin:0 ;

    color:var(--brand-blue) ;
    opacity:.12 ;

    font-size:86px ;
    font-weight:800 ;
    line-height:.72 ;
    letter-spacing:-5px ;

    z-index:1 ;
    pointer-events:none;
    user-select:none;
    transform:none ;
} 
.services-section .featured-service {
  animation: none ;
  position: relative ;
}
.services-section .featured-service .featured-number{
    position:absolute ;
    right:24px ;
    bottom:0 ;

    margin:0 ;

    color:var(--brand-blue) ;
    opacity:.10 ;

    font-size:104px ;
    font-weight:800 ;
    line-height:.70 ;
    letter-spacing:-6px ;

    z-index:1 ;
    pointer-events:none;
    user-select:none;
    transform:none ;
} .services-section .featured-service .featured-left, .services-section .featured-service .featured-preview {
    position:relative;
    z-index:2;
}
.services-section .featured-service .featured-content {
  position: static ;
  z-index: 2;
}
.services-section .service-card > *:not(.service-no){
    position:relative;
    z-index:2;
}

 
.process-section::before {
  content: "PROCESS";
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle,

    rgba(37,99,255,.08),

    transparent 70%);
  top: 34px;
  right: -180px;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Space Grotesk',sans-serif;
  font-size: 170px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 8px;
  color: rgba(37,99,255,.025);
  pointer-events: none;
}
 .process-heading{
    position:relative;
    z-index:1;
    max-width:860px;
    margin:0 auto 62px;
    text-align:center;
}.process-heading h2{
    margin:24px 0 16px;
    color:var(--brand-white);
    font-size:64px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-1.5px;
}.process-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}.process-heading p{
    max-width:700px;
    margin:0 auto;
    color:var(--text-bright);
    font-size:18px;
    line-height:1.75;
}.process-heading-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:21px;
}.process-heading-line span{
    display:block;
    width:96px;
    height:4px;
    border-radius:99px;
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    box-shadow:0 0 15px rgba(37,99,255,.22);
}.process-heading-line i{
    color:var(--brand-cyan);
    font-size:8px;
} .process-flow{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px;
    align-items:start;
} .process-flow::before{
    content:"";
    position:absolute;
    left:7.2%;
    right:7.2%;
    top:28px;
    height:1px;
    border-top:1px dashed color-mix(in srgb, var(--text-muted) 42%, transparent);
    z-index:0;
    pointer-events:none;
} .process-section .process-card{
    position:relative;
    z-index:1;

    min-width:0;
    min-height:0 ;
    padding:78px 17px 22px ;

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

    border-radius:20px ;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--card-2) 92%, transparent),
            color-mix(in srgb, var(--bg-2) 88%, transparent)
        ) ;

    border:1px solid color-mix(in srgb, var(--text-muted) 24%, transparent) ;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:visible ;

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

    animation:none ;
    height:auto ;
    align-self:stretch ;
    justify-content:flex-start ;
}  .process-node{
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%,-50%);

    width:72px;
    height:72px;

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

    border-radius:50%;

    color:var(--brand-white);
    font-size:29px;
    font-weight:800;
    font-family:'Space Grotesk',sans-serif;

    background:
        radial-gradient(
            circle at 50% 45%,
            color-mix(in srgb, var(--brand-blue) 96%, transparent),
            color-mix(in srgb, var(--bg-2) 98%, transparent) 72%
        );

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

    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--dark-2) 96%, transparent),
        0 0 18px rgba(37,99,255,.20),
        inset 0 0 25px rgba(37,99,255,.08);

    z-index:5;
} .process-node::after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    transform:translate(-50%,1px);

    width:9px;
    height:9px;
    border-radius:50%;

    background:var(--brand-cyan);
    border:2px solid var(--card-2);

    box-shadow:0 0 13px rgba(0,212,255,.85);
} .process-card-icon{
    width:78px;
    height:78px;

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

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            rgba(37,99,255,.12),
            color-mix(in srgb, var(--title) 82%, transparent)
        );

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

    color:var(--brand-blue);
    font-size:34px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 10px 24px rgba(0,0,0,.18);

    margin-bottom:18px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}   .process-accent{
    position:absolute;
    left:50%;
    bottom:13px;
    transform:translateX(-50%);

    width:74px;
    height:4px;

    border-radius:99px;

    background:linear-gradient(90deg,var(--brand-indigo),var(--brand-cyan));

    box-shadow:0 0 14px rgba(37,99,255,.45);

    opacity:.95;
} .process-section .process-card:hover{
    transform:translateY(-7px) !important;
    border-color:rgba(37,99,255,.52) ;

    box-shadow:
        0 22px 45px rgba(0,0,0,.32),
        0 8px 26px rgba(37,99,255,.10);
}.process-section .process-card:hover .process-icon{
    transform:translateY(-2px) scale(1.04);
}.process-card-icon:hover{
    transform:translateY(-2px) scale(1.04);
} .process-section .process-card:nth-child(2) .process-node,
.process-section .process-card:nth-child(5) .process-node{
    border-color:rgba(139,92,248,.72);
}.process-section .process-card:nth-child(2) .process-accent,
.process-section .process-card:nth-child(5) .process-accent{
    background:linear-gradient(90deg,var(--brand-purple),var(--brand-indigo));
} .process-benefits{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:28px;

    border:1px solid color-mix(in srgb, var(--text-muted) 23%, transparent);
    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-2) 82%, transparent),
            color-mix(in srgb, var(--bg-2) 88%, transparent)
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);

    overflow:hidden;
}.process-benefit{
    min-width:0;
    padding:24px 23px;

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

    position:relative;
}.process-benefit:not(:last-child)::after{
    content:"";
    position:absolute;
    top:23px;
    bottom:23px;
    right:0;
    width:1px;
    background:color-mix(in srgb, var(--text-muted) 18%, transparent);
}.process-benefit-icon{
    width:50px;
    height:50px;
    min-width:50px;

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

    border-radius:15px;

    color:var(--brand-cyan);
    background:rgba(37,99,255,.08);
    border:1px solid rgba(37,99,255,.19);

    font-size:20px;
}.process-benefit-icon.purple{
    color:var(--brand-purple);
    background:rgba(139,92,248,.08);
    border-color:rgba(139,92,248,.18);
}.process-benefit h4{
    margin:0 0 5px;

    color:var(--brand-white);
    font-size:16px;
    line-height:1.25;
    font-weight:700;
}.process-benefit p{
    margin:0;

    color:var(--text-muted-2);
    font-size:12.5px;
    line-height:1.55;
}

 .process-section .section-tag{
    margin-bottom:16px;
} .process-section .process-heading-line{
    display:none ;
} .process-section .process-flow{
    align-items:stretch ;
    grid-auto-rows:auto ;
}

.process-section::after {
  content: none ;
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle,

    rgba(0,212,255,.06),

    transparent 70%);
  bottom: -180px;
  left: -180px;
  z-index: -2;
}
 
.process-section .process-card::before {
  content: none ;
  display: none ;
}

.process-section .process-card::after {
  content: none ;
}


 .process-section .process-card-icon svg{
    display:block;
    width:42px;
    height:42px;
    flex:0 0 42px;
    overflow:visible;
} .process-section .process-accent{
    position:absolute ;
    left:50% ;
    bottom:13px ;

    width:74px ;
    height:4px ;
    min-width:0 ;
    min-height:4px ;
    max-width:none ;
    max-height:4px ;

    margin:0 ;
    padding:0 ;
    display:none ;

    border-radius:99px ;

    background:linear-gradient(90deg,var(--brand-indigo),var(--brand-cyan)) ;
    box-shadow:0 0 14px rgba(37,99,255,.45);

    opacity:.95 ;
    transform:translateX(-50%) ;

    z-index:2 ;
} .process-section .process-card > span:not(.process-accent){
    box-shadow:none;
} .process-section .process-card-icon{
    overflow:visible ;
    width:78px ;
    height:78px ;
    min-width:78px ;
    min-height:78px ;
    max-width:78px ;
    max-height:78px ;
    flex:0 0 auto ;

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

    padding:0 ;
    margin:0 auto 18px ;

    border-radius:18px ;

    background:rgba(37,99,255,.10) ;
    border:1px solid rgba(37,99,255,.20) ;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 10px 24px rgba(0,0,0,.18) ;
    transform:none ;
}.process-section .process-card-icon svg *{
    vector-effect:non-scaling-stroke;
}

.process-section .process-card-icon i{
    display:block ;
    width:auto ;
    height:auto ;

    margin:0 ;
    padding:0 ;

    line-height:1 ;

    font-size:38px ;
    font-weight:900;

    transform:none ;
    transition:transform .35s ease;
}
.process-section .process-card:nth-child(1) .process-card-icon{
    background:rgba(37,99,255,.12) ;
    border-color:rgba(37,99,255,.22) ;
}.process-section .process-card:nth-child(1) .process-card-icon i{
    color:var(--brand-indigo) ;
}
.process-section .process-card:nth-child(2) .process-card-icon {
  color: var(--brand-purple);
  border-color: rgba(139,92,248,.22) ;
  background: rgba(139,92,248,.13) ;
}
.process-section .process-card:nth-child(2) .process-card-icon i{
    color:var(--brand-purple) ;
}.process-section .process-card:nth-child(3) .process-card-icon{
    background:rgba(37,99,255,.12) ;
    border-color:rgba(37,99,255,.22) ;
}.process-section .process-card:nth-child(3) .process-card-icon i{
    color:var(--brand-indigo) ;
}.process-section .process-card:nth-child(4) .process-card-icon{
    background:rgba(37,99,255,.12) ;
    border-color:rgba(37,99,255,.22) ;
}.process-section .process-card:nth-child(4) .process-card-icon i{
    color:var(--brand-blue) ;
}
.process-section .process-card:nth-child(5) .process-card-icon {
  color: var(--brand-purple);
  border-color: rgba(139,92,248,.22) ;
  background: rgba(139,92,248,.13) ;
}
.process-section .process-card:nth-child(5) .process-card-icon i{
    color:var(--brand-purple) ;
}.process-section .process-card:nth-child(6) .process-card-icon{
    background:rgba(37,99,255,.12) ;
    border-color:rgba(37,99,255,.22) ;
}.process-section .process-card:nth-child(6) .process-card-icon i{
    color:var(--brand-indigo) ;
}.process-section .process-card:hover .process-card-icon i{
    transform:scale(1.06);
}

 .process-section .process-node{
    z-index:5 ;
}

.experience-section-heading{
    max-width:900px;
    margin:0 auto 52px;
    text-align:center;
}.experience-section-heading .section-tag{
    margin-bottom:18px;
}.experience-section-heading h2{
    margin:0 0 16px;
    color:var(--brand-white);
    font-size:64px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.5px;
}.experience-section-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-indigo),var(--brand-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}.experience-section-heading p{
    max-width:760px;
    margin:0 auto;
    color:var(--text-bright);
    font-size:18px;
    line-height:1.75;
}

.experience-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:color-mix(in srgb, var(--bg-2) 72%, transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    overflow:hidden;
    box-shadow:
        0 20px 50px color-mix(in srgb, var(--dark) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.025);
}.experience-stat-card{
    min-width:0;
    min-height:110px;
    padding:15px 40px;

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

    position:relative;
}.experience-stat-card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:28px;
    bottom:28px;
    right:0;
    width:1px;
    background:color-mix(in srgb, var(--text-muted) 15%, transparent);
}.experience-stat-icon{
    width:60px;
    height:60px;
    min-width:60px;

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

    border-radius:17px;

    background:rgba(37,99,255,.09);
    border:1px solid rgba(37,99,255,.23);

    color:var(--brand-indigo);
    font-size:25px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 10px 25px rgba(0,0,0,.18);
}.experience-stat-icon.purple{
    color:var(--brand-purple);
    background:rgba(139,92,248,.09);
    border-color:rgba(139,92,248,.23);
}.experience-stat-icon.cyan{
    color:var(--brand-cyan);
    background:rgba(0,212,255,.08);
    border-color:rgba(0,212,255,.22);
}.experience-stat-content h3{
    margin:0 0 6px;
    color:var(--brand-white);
    font-family:'Space Grotesk',sans-serif;
    font-size:35px;
    line-height:1;
    font-weight:800;
}.experience-stat-content p{
    margin:0;
    color:var(--text-bright);
    font-size:15px;
    line-height:1.35;
}

.experience-section .journey-panel{
    margin-top:24px;
    padding:34px 30px 30px;

    border-radius:26px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-2) 86%, transparent),
            color-mix(in srgb, var(--bg-2) 92%, transparent)
        );

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

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    position:relative;
    overflow:hidden;

    box-shadow:
        0 24px 55px color-mix(in srgb, var(--dark) 25%, transparent);
}.experience-section .journey-panel::before{
    content:"";
    position:absolute;
    top:-150px;
    right:-150px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(37,99,255,.08),
        transparent 70%
    );
    pointer-events:none;
}.experience-section .journey-panel::after{
    content:"";
    position:absolute;
    bottom:-180px;
    left:-160px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(139,92,248,.06),
        transparent 70%
    );
    pointer-events:none;
}.experience-section .journey-heading{
    position:relative;
    z-index:2;

    margin:0 0 50px;

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

    text-align:left;
}.experience-section .journey-title-wrap{
    display:flex;
    align-items:center;
    gap:0 ;
    min-width:0;
}.experience-section .journey-title-icon{
    width:56px;
    height:56px;
    min-width:56px;
    display:none ;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    color:var(--brand-indigo);
    background:rgba(37,99,255,.09);
    border:1px solid rgba(37,99,255,.22);

    font-size:22px;
}.experience-section .journey-heading h3{
    margin:0 0 5px;

    color:var(--brand-white);
    font-size:27px;
    line-height:1.2;
    font-weight:700;
}.experience-section .journey-heading p{
    margin:0;
    color:var(--text-muted-2);
    font-size:14px;
    line-height:1.5;
}

.experience-section .timeline{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;

    max-width:none;
    margin:0;
    padding:48px 0 0;
}.experience-section .timeline::before{
    content:"";
    position:absolute;
    left:4%;
    right:4%;
    top:24px ;

    width:auto;
    height:1px ;

    background:linear-gradient(
        90deg,
        rgba(37,99,255,.25),
        rgba(139,92,248,.48),
        rgba(37,99,255,.25)
    );

    display:block;
    z-index:0 ;
}.experience-section .timeline-item{
    position:relative;
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    overflow:visible;
}.experience-section .timeline-item::before{
    content:"";
    position:absolute;

    left:50%;
    top:-17px ;
    transform:translate(-50%,-50%);

    width:15px;
    height:15px;

    border-radius:50%;
    background:var(--brand-blue) ;
    border:3px solid var(--brand-blue);

    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--bg-2) 95%, transparent),
        0 0 18px rgba(37,99,255,.45);
    z-index:4 ;
}.experience-section .timeline-item:nth-child(5)::before {
    border-color:var(--brand-purple);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--bg-2) 95%, transparent),
        0 0 18px rgba(139,92,248,.42);
}.experience-section .timeline-year{
    position:absolute;
    left:50%;
    top:0 ;
    transform:translate(-50%,-50%);
    z-index:5 ;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:118px;
    padding:8px 16px;

    border-radius:10px;

    background:color-mix(in srgb, var(--bg-2) 98%, transparent);
    border:1px solid rgba(37,99,255,.30);

    color:var(--brand-indigo);

    font-size:13px;
    line-height:1.2;
    font-weight:700;
    white-space:nowrap;
}.experience-section .timeline-item:nth-child(2n) .timeline-year{
    border-color:rgba(139,92,248,.30);
    color:var(--brand-purple);
}.experience-section .timeline-card{
    position:relative;

    min-height:290px;

    margin-top:24px;
    padding:25px 22px 22px;

    display:flex;
    flex-direction:column;

    border-radius:20px;

    background:color-mix(in srgb, var(--bg-2) 78%, transparent);
    border:1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        0 16px 32px color-mix(in srgb, var(--dark) 18%, transparent);

    transition:
        border-color .35s ease,
        box-shadow .35s ease;
}.experience-section .timeline-item:nth-child(2n) .timeline-card:hover{
    border-color:rgba(139,92,248,.42);
}.experience-section .timeline-card-top{
    display:flex;
    align-items:flex-start;
    gap:0 ;
    margin-bottom:16px;
}.experience-section .timeline-card-icon{
    width:48px;
    height:48px;
    min-width:48px;
    display:none ;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    color:var(--brand-indigo);
    background:rgba(37,99,255,.08);
    border:1px solid rgba(37,99,255,.20);

    font-size:19px;
}.experience-section .timeline-item:nth-child(2n) .timeline-card-icon{
    color:var(--brand-purple);
    background:rgba(139,92,248,.08);
    border-color:rgba(139,92,248,.20);
}.experience-section .timeline-card h3{
    margin:0 0 5px;
    color:var(--brand-white);
    font-size:20px;
    line-height:1.28;
    font-weight:700;
}.experience-section .experience-company{
    display:block;
    margin:0;
    color:var(--brand-indigo);
    font-size:14px;
    font-weight:600;
}.experience-section .timeline-item:nth-child(2n) .experience-company{
    color:var(--brand-purple);
}.experience-section .timeline-card > p{
    margin:0;
    color:var(--text-muted-2);
    font-size:13.5px;
    line-height:1.72;
}.experience-section .experience-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:auto;
    padding-top:20px;
}.experience-section .experience-tag{
    padding:6px 10px;
    border-radius:8px;

    background:rgba(37,99,255,.06);
    border:1px solid rgba(37,99,255,.20);

    color:var(--text-bright);

    font-size:11.5px;
    line-height:1.2;
    font-weight:500;
}

.experience-section .timeline-item:nth-child(4)::before {
    background:var(--brand-purple) ;
}
.experience-section .timeline-item:nth-child(2)::before {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-2) 95%, transparent),
        0 0 18px rgba(139,92,248,.42);
  background: var(--brand-purple) ;
}

.testimonial-form-status {
    grid-column: 1 / -1 ;
    margin: 0 0 4px 0 ;
    padding: 10px 14px ;
    border-radius: 10px ;
    font-size: 14px ;
    line-height: 1.5 ;
    font-weight: 500 ;
    color: var(--success) ;
    background: color-mix(in srgb, var(--success) 10%, transparent) ;
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent) ;
}.testimonial-form-status.error {
    color: var(--danger) ;
    background: color-mix(in srgb, var(--danger) 10%, transparent) ;
    border-color: color-mix(in srgb, var(--danger) 30%, transparent) ;
}

   .testimonial-arrow {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    width: 50px ;
    height: 50px ;
    min-width: 50px ;
    border-radius: 50% ;
    background: color-mix(in srgb, var(--bg-2) 85%, transparent) ;
    border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent) ;
    color: var(--brand-indigo) ;
    font-size: 20px ;
    cursor: pointer ;
    transition: 0.3s ease ;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) ;
    backdrop-filter: blur(8px) ;
    -webkit-backdrop-filter: blur(8px) ;
    z-index: 10 ;
    font-weight: 300 ;
    user-select: none ;
}.testimonial-arrow:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand-blue) 20%, transparent) ;
    border-color: var(--brand-blue) ;
    transform: scale(1.08) ;
    color: var(--brand-white) ;
}.testimonial-arrow:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    transform: none !important;
    pointer-events: none !important;
}.testimonial-pagination {
    display: flex ;
    justify-content: center ;
    align-items: center ;
    gap: 12px ;
    margin-top: 30px ;
}.testimonial-pagination span {
    width: 10px ;
    height: 10px ;
    border-radius: 50% ;
    background: var(--card-2) ;
    cursor: pointer ;
    transition: 0.3s ease ;
    border: none ;
    display: inline-block ;
}.testimonial-pagination span.active {
    background: var(--brand-blue) ;
    box-shadow: 0 0 20px color-mix(in srgb, var(--brand-blue) 60%, transparent) ;
    width: 14px ;
    height: 14px ;
}  .testimonial-quote {
    display: inline-block ;
    font-size: 48px ;
    line-height: 1 ;
    font-family: Georgia, 'Times New Roman', serif ;
    font-weight: 700 ;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)) ;
    -webkit-background-clip: text ;
    background-clip: text ;
    -webkit-text-fill-color: transparent ;
    color: transparent ;
    user-select: none ;
    margin: 0 ;
}.testimonial-card-top {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    gap: 12px ;
    margin-bottom: 16px ;
}.testimonial-copy {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: var(--text-bright) ;
    font-style: italic ;
    display: block ;
    overflow: visible ;
    margin-bottom: 20px !important;
}.testimonial-author {
    border-top: 1px solid color-mix(in srgb, var(--text-muted) 12%, transparent) ;
    padding-top: 18px ;
    margin-top: 0 ;
}.testimonial-author h4 {
    color: var(--brand-white) ;
    font-size: 17px ;
    font-weight: 700 ;
    margin-bottom: 3px ;
    font-family: 'Space Grotesk', sans-serif ;
}.testimonial-author span {
    color: var(--brand-indigo) ;
    font-size: 14px ;
    font-weight: 500 ;
    display: block ;
}

 .testimonial-viewport {
    overflow: hidden ;
    width: 100% !important;
    border-radius: 24px ;
    padding: 18px 0 46px ;
}   .testimonial-carousel {
    display: flex ;
    align-items: center ;
    gap: 12px !important;
    max-width: 100% ;
}

@keyframes blink{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
}@keyframes scrollWheel{
    0%{
        transform:translateY(0);
        opacity:.35;
    }
    40%{
        transform:translateY(8px);
        opacity:1;
    }
    80%,100%{
        transform:translateY(16px);
        opacity:0;
    }
}@keyframes heroLeft{
    0%{
        opacity:0;
        transform:translateX(-28px);
    }
    100%{
        opacity:1;
        transform:translateX(0);
    }
}@keyframes heroRight{
    0%{
        opacity:0;
        transform:translateX(28px);
    }
    100%{
        opacity:1;
        transform:translateX(0);
    }
}@keyframes processFade{
    0%{
        opacity:0;
        transform:translateY(18px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}@keyframes timelineFade{
    0%{
        opacity:0;
        transform:translateY(18px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}


.faq-section {
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
}
.faq-header{
    max-width:760px;
    margin:0 auto 58px;
    text-align:center;
}.faq-header h2{
    color:var(--brand-white);
    font-size:58px;
    font-weight:800;
    line-height:1.15;
    margin:0 0 18px;
}.faq-header h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple),var(--brand-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}.faq-header p{
    max-width:650px;
    margin:0 auto;
    color:var(--text-muted);
    font-size:17px;
    line-height:1.8;
}.faq-layout{
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
    gap:32px;
    align-items:stretch;
}.faq-intro-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-100px;
    top:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,255,.20),transparent 70%);
    pointer-events:none;
}.faq-intro-glow{
    position:absolute;
    width:180px;
    height:180px;
    left:-100px;
    bottom:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,248,.18),transparent 70%);
    pointer-events:none;
}.faq-intro-label{
    color:var(--brand-indigo);
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:12px;
}.faq-intro-card h3{
    color:var(--brand-white);
    font-size:36px;
    line-height:1.15;
    font-weight:800;
    margin:0 0 18px;
}.faq-intro-card h3 span{
    color:var(--brand-indigo);
}.faq-intro-card p{
    color:var(--text-muted);
    font-size:15px;
    line-height:1.85;
    max-width:430px;
    margin:0 0 28px;
}.faq-list{
    display:flex;
    flex-direction:column;
    gap:13px;
}.faq-list .faq-item{
    margin:0 ;
    border-radius:18px ;
    overflow:hidden;
    background:color-mix(in srgb, var(--title) 60%, transparent) ;
    border:1px solid rgba(255,255,255,.075) ;
    backdrop-filter:blur(18px);
    transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}.faq-list .faq-item:hover {
    border-color:rgba(37,99,255,.34) ;
    background:color-mix(in srgb, var(--title) 78%, transparent) !important;
}
.faq-list .faq-item.active {
  border-color: rgba(37,99,255,.34) ;
  background: color-mix(in srgb, var(--title) 78%, transparent) ;
  box-shadow: 0 18px 45px rgba(0,0,0,.18),inset 0 0 35px rgba(37,99,255,.025);
}
.faq-list .faq-question{
    width:100%;
    min-height:72px;
    display:flex ;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px ;
    border:0 ;
    outline:0;
    background:transparent ;
    color:var(--brand-white) ;
    font-family:'Space Grotesk',sans-serif;
    font-size:16px ;
    font-weight:600 ;
    line-height:1.45;
    text-align:left;
    cursor:pointer;
}.faq-list .faq-question::after{
    content:none ;
    display:none ;
}.faq-list .faq-question > span{
    display:flex;
    align-items:center;
    gap:16px;
}.faq-list .faq-question b{
    min-width:30px;
    color:var(--brand-indigo);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}.faq-list .faq-question i{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--brand-indigo);
    font-size:12px;
    background:rgba(37,99,255,.07);
    border:1px solid rgba(37,99,255,.18);
    transition:.35s ease;
}.faq-list .faq-item.active .faq-question i{
    color:var(--brand-white);
    background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
    border-color:transparent;
    box-shadow:0 8px 22px rgba(37,99,255,.20);
}


.faq-intro-actions {
  display: flex ;
  align-items: stretch ;
  gap: 12px ;
  flex-direction: column ;
  width: 100% ;
  max-width: 100% ;
}
.faq-talk-btn,
.faq-mail-btn{
    width:100% ;
    max-width:100% ;
    box-sizing:border-box ;
} 
.faq-list .faq-answer {
  display: grid ;
  grid-template-rows: 0fr ;
  padding: 0 ;
  opacity: 0 ;
  transition: grid-template-rows .38s ease,
        opacity .28s ease ;
  overflow: hidden ;
}

.faq-list .faq-item.active .faq-answer {
  grid-template-rows: 1fr ;
  opacity: 1 ;
}

.faq-list .faq-answer p {
  min-height: 0;
  overflow: hidden ;
  padding: 0 22px 0 68px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  transition: padding .38s ease ;
}
.faq-list .faq-item:not(.active) .faq-answer p{
    padding-bottom:0 ;
}
.faq-list .faq-item.active .faq-answer p {
  padding-bottom: 22px ;
}


 .faq-header .section-tag{
    margin-bottom:20px;
} .faq-intro-illustration{
    position:relative;
    width:100%;
    max-width:330px;
    height:220px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
} 
.faq-intro-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 38px;
  border-radius: 26px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--title) 92%, transparent),color-mix(in srgb, var(--bg-2) 88%, transparent));
  border: 1px solid rgba(37,99,255,.20);
  box-shadow: 0 25px 70px rgba(0,0,0,.28), inset 0 0 50px rgba(37,99,255,.025);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 
.faq-intro-illustration img {
  width: 100%;
  max-width: 330px;
  height: auto;
  object-fit: contain;
  display: block;
}


.contact-header{
    max-width:850px;
    margin:0 auto 52px;
    text-align:center;
}.contact-header h2{
    margin:0 0 18px;
    color:var(--brand-white);
    font-size:64px;
    line-height:1.08;
    font-weight:800;
}.contact-header h2 span{
    background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue),var(--brand-purple));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}.contact-header p{
    max-width:790px;
    margin:0 auto;
    color:var(--text-faint);
    font-size:17px;
    line-height:1.75;
}.contact-main-grid{
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    gap:34px;
    align-items:stretch;
}
.contact-connect-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--bg-2) 88%, transparent),color-mix(in srgb, var(--dark) 94%, transparent));
  border: 1px solid rgba(37,99,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 50px;
}
.contact-connect-hero{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:145px minmax(0,1fr);
    align-items:center;
    gap:28px;
}.contact-orbit-icon{
    position:relative;
    width:145px;
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,255,.13),color-mix(in srgb, var(--bg-2) 4%, transparent) 65%);
}.contact-orbit-icon i{
    position:relative;
    z-index:3;
    font-size:62px;
    background:linear-gradient(135deg,var(--brand-cyan),var(--brand-indigo),var(--brand-magenta));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 8px 20px rgba(37,99,255,.20));
    transform:rotate(-9deg);
}.contact-orbit-ring{
    position:absolute;
    inset:8px;
    border-radius:50%;
    border:1px solid rgba(37,99,255,.22);
}.contact-orbit-ring-two{
    inset:-10px;
    border-color:rgba(139,92,248,.18);
    border-style:dashed;
    transform:rotate(18deg);
}
.contact-orbit-icon::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 8px;
  right: 16px;
  background: var(--brand-cyan);
  box-shadow: 0 0 16px var(--brand-cyan);
}

.contact-orbit-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  left: 6px;
  bottom: 22px;
  background: var(--brand-purple);
  box-shadow: 0 0 14px var(--brand-purple);
}
.contact-kicker{
    display:block;
    margin-bottom:9px;
    color:var(--brand-cyan);
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
}.contact-connect-copy h3{
    max-width:390px;
    margin:0;
    color:var(--brand-white);
    font-size:28px;
    line-height:1.35;
    font-weight:750;
}.contact-connect-copy h3 span{
    color:var(--brand-blue);
}.contact-divider{
    position:relative;
    z-index:1;
    height:1px;
    margin:28px 0 22px;
    background:color-mix(in srgb, var(--text-muted) 13%, transparent);
}.contact-details{
    position:relative;
    z-index:1;
    display:grid;
    gap:25px;
}.contact-detail{
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 0;
    color:var(--brand-white);
    text-decoration:none;
}.contact-detail-icon{
    width:60px;
    height:60px;
    min-width:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    color:var(--brand-cyan);
    background:rgba(37,99,255,.07);
    border:1px solid rgba(37,99,255,.18);
    font-size:21px;
}.contact-detail:nth-child(2) .contact-detail-icon{
    color:var(--brand-purple);
    border-color:rgba(139,92,248,.20);
    background:rgba(139,92,248,.07);
}.contact-detail-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}.contact-detail-copy strong{
    color:var(--brand-white);
    font-size:22px;
    font-weight:600;
}.contact-detail-copy span{
    color:var(--text-muted-2);
    font-size:15px;
    line-height:1.5;
} 
.contact-form-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--bg-2) 92%, transparent),color-mix(in srgb, var(--dark) 96%, transparent));
  border: 1px solid rgba(37,99,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 50px;
  border-color: rgba(37,99,255,.26);
}
.contact-form-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,rgba(0,212,255,.65),transparent 36%,transparent 66%,color-mix(in srgb, var(--brand-purple) 50%, transparent));
    -webkit-mask:linear-gradient(var(--brand-white) 0 0) content-box,linear-gradient(var(--brand-white) 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}.contact-form-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:28px;
}.contact-form-icon{
    width:70px;
    height:70px;
    min-width:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--brand-cyan);
    background:rgba(37,99,255,.08);
    border:1px solid rgba(37,99,255,.24);
    font-size:23px;
}.contact-form-head h3{
    margin:0 0 8px;
    color:var(--brand-white);
    font-size:40px;
    line-height:1.25;
    font-weight:750;
}.contact-professional-form{
    position:relative;
    z-index:1;
    padding:0;
    border:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}.contact-form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}.contact-field{
    position:relative;
    display:block;
    margin-bottom:14px;
}.contact-field > i{
    position:absolute;
    left:18px;
    top:50%;
    z-index:2;
    transform:translateY(-50%);
    color:var(--text-muted-2);
    font-size:16px;
    pointer-events:none;
}.contact-field-message > i{
    top:21px;
    transform:none;
}
.contact-field input {
  width: 100%;
  margin: 0;
  padding: 15px 17px 15px 47px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
  background: color-mix(in srgb, var(--dark) 48%, transparent);
  color: var(--brand-white);
  outline: none;
  font: inherit;
  font-size: 14px;
  transition: border-color .25s ease,box-shadow .25s ease,background .25s ease;
  height: 54px;
}

.contact-field select {
  width: 100%;
  margin: 0;
  padding: 15px 17px 15px 47px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
  background: color-mix(in srgb, var(--dark) 48%, transparent);
  color: var(--brand-white);
  outline: none;
  font: inherit;
  font-size: 14px;
  transition: border-color .25s ease,box-shadow .25s ease,background .25s ease;
  height: 54px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.contact-field select:invalid{
    color:var(--placeholder);
}.contact-field select option{
    background:var(--bg-2);
    color:var(--brand-white);
}
.contact-field textarea {
  width: 100%;
  margin: 0;
  padding: 15px 17px 15px 47px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
  background: color-mix(in srgb, var(--dark) 48%, transparent);
  color: var(--brand-white);
  outline: none;
  font: inherit;
  font-size: 14px;
  transition: border-color .25s ease,box-shadow .25s ease,background .25s ease;
  min-height: 178px;
  resize: vertical;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:var(--placeholder);
}.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:rgba(0,212,255,.48);
    background:color-mix(in srgb, var(--bg-deep) 72%, transparent);
    box-shadow:0 0 0 3px rgba(0,212,255,.07);
}.contact-field:focus-within > i{
    color:var(--brand-cyan);
}.contact-send-btn{
    width:100%;
}

html[data-theme="light"]{
    --dark:#eef2f8;
    --dark-2:#e6ecf5;
    --card:#ffffff;
    --text:#475569;
    --border:rgba(37,99,255,.16);
    /* light mode treatment */
    --title:#0f172a;
    --heading:#16213a;
    --muted:#526176;
    --muted-2:#5a6a85;
    --muted-3:#4a5a75;
    --quote:#3a4a63;
    --body-strong:#1b2437;
    --popup-strong:#13203a;
    --soft:#eef2f9;
    --card-grad:#f7faff;
    --screen:#e9eef8;
    --neck:#d4ddf0;
    --stroke-track:#dbe3f2;
    --pagination-dot:#c6d2e6;
    --panel-bg:#f8fafd;
    --footer-bg:#e9eef7;
    --footer-grad-a:#edf4ff;
    --footer-grad-b:#f7f9fd;
    --footer-grad-c:#f2efff;
    --chip-grad:#eef2fa;
    --success-text:var(--brand-blue);
}  html[data-theme="light"] p{
    color:var(--text);
} html[data-theme="light"] .bg-grid{
    opacity:.45;
    background-image:
        linear-gradient(color-mix(in srgb, var(--brand-blue) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--brand-blue) 7%, transparent) 1px, transparent 1px);
}


html[data-theme="light"] .header-area {
  background: color-mix(in srgb, var(--card-grad) 90%, transparent);
  border-bottom-color: rgba(37,99,255,.16);
  box-shadow: 0 14px 40px rgba(37,99,255,.10);
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

html[data-theme="light"] .header-area::before {
  background: linear-gradient(90deg, rgba(37,99,255,.12), transparent 30%, transparent 70%, rgba(139,92,248,.10));
}

html[data-theme="light"] .header-nav {
  background: transparent;
  box-shadow: none;
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

html[data-theme="light"] .header-nav .nav-link {
  color: var(--text);
}

html[data-theme="light"] .header-icon-btn {
  background: rgba(255,255,255,.9);
  color: var(--brand-blue);
  border-color: rgba(37,99,255,.22);
  box-shadow: 0 8px 24px rgba(37,99,255,.10);
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

html[data-theme="light"] .header-icon-btn:hover {
  color: var(--brand-blue);
  background: var(--brand-white);
  border-color: rgba(37,99,255,.42);
  box-shadow: 0 12px 28px rgba(37,99,255,.18);
}
html[data-theme="light"] .header-toggler{
    border-color:rgba(37,99,255,.20) !important;
    background:rgba(255,255,255,.80);
    color:var(--brand-blue);
}
html[data-theme="light"] .header-nav .nav-link:hover {
  color: var(--brand-blue);
  background: transparent;
}

html[data-theme="light"] .header-nav .nav-link.active {
  color: var(--brand-blue);
  background: transparent;
}
html[data-theme="light"] .header-actions{
    border-top-color:rgba(37,99,255,.10);
} html[data-theme="light"] .contact-toggle{
    background:linear-gradient(135deg,var(--brand-blue),var(--brand-indigo));
    color:var(--brand-white);
    box-shadow:0 12px 28px rgba(37,99,255,.28);
}html[data-theme="light"] .contact-dot{
    border-color:var(--brand-white);
}html[data-theme="light"] .contact-popup{
    background:rgba(255,255,255,.98);
    border-color:rgba(37,99,255,.14);
    box-shadow:0 25px 60px rgba(37,99,255,.18);
}html[data-theme="light"] .contact-popup .popup-header{
    border-bottom-color:rgba(37,99,255,.12);
}html[data-theme="light"] .popup-info h4{
    color:var(--popup-strong);
}html[data-theme="light"] .popup-info span{
    color:var(--muted-2);
}html[data-theme="light"] .popup-info span i{
    color:var(--success);
}html[data-theme="light"] .social-grid a{
    color:var(--body-strong);
    background:rgba(37,99,255,.05);
    border-color:rgba(37,99,255,.12);
}html[data-theme="light"] .social-grid a:hover{
    border-color:var(--brand-blue);
    background:rgba(37,99,255,.10);
    box-shadow:0 12px 28px rgba(37,99,255,.15);
}html[data-theme="light"] .social-grid i{
    color:var(--brand-blue);
}html[data-theme="light"] .popup-footer{
    color:var(--muted-2);
}

html[data-theme="light"] .hero-section::before{
    background:radial-gradient(circle, rgba(37,99,255,.10), transparent 70%);
}html[data-theme="light"] .hero-section::after{
    background:radial-gradient(circle, rgba(0,212,255,.08), transparent 70%);
}
html[data-theme="light"] .hero-badge {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: rgba(37,99,255,.08);
  border-color: rgba(37,99,255,.18);
  color: var(--brand-blue);
}
html[data-theme="light"] .hero-badge i{
    color:var(--brand-blue);
}html[data-theme="light"] .hero-name{
    color:var(--title);
}html[data-theme="light"] .hero-name span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .hero-profession,
html[data-theme="light"] #typing-text{
    color:var(--title);
}html[data-theme="light"] .typing-cursor,
html[data-theme="light"] .hero-dot{
    color:var(--brand-blue);
    background:var(--brand-blue);
    box-shadow:0 0 14px rgba(37,99,255,.5);
}html[data-theme="light"] .hero-description{
    color:var(--text);
}
html[data-theme="light"] .hero-social a {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.22);
  color: var(--brand-blue);
  box-shadow: 0 6px 16px rgba(37,99,255,.08);
}
html[data-theme="light"] .hero-social a:hover{
    background:var(--brand-blue);
    color:var(--brand-white);
    box-shadow:0 10px 22px rgba(37,99,255,.30);
} html[data-theme="light"] .hero-visual-glow{
    background:radial-gradient(circle, rgba(37,99,255,.18), rgba(0,212,255,.08) 45%, transparent 72%);
}html[data-theme="light"] .hero-visual-ring-1{
    border-color:rgba(99,102,255,.35);
}html[data-theme="light"] .hero-visual-ring-2{
    border-color:rgba(0,212,255,.30);
}html[data-theme="light"] .hero-visual .hero-tech-orbit-single{
    border-color:rgba(99,102,255,.40);
}html[data-theme="light"] .hero-visual-profile{
    background:linear-gradient(150deg, rgba(37,99,255,.18), rgba(0,212,255,.06) 55%, rgba(255,255,255,.6));
    border-color:rgba(99,102,255,.35);
    box-shadow:0 24px 60px rgba(37,99,255,.16), inset 0 0 34px rgba(37,99,255,.08);
}html[data-theme="light"] .hero-visual-photo{
    background:var(--soft);
    box-shadow:inset 0 0 26px rgba(37,99,255,.10);
}

html[data-theme="light"] .tech-stack-section::before,
html[data-theme="light"] .tech-stack-section::after{
    opacity:.6;
}html[data-theme="light"] .section-tag{
    background:rgba(37,99,255,.08);
    border-color:rgba(37,99,255,.22);
    color:var(--brand-blue);
}html[data-theme="light"] .section-tag::before,
html[data-theme="light"] .section-tag::after{
    background:var(--brand-blue);
}html[data-theme="light"] .tech-stack-section h2,
html[data-theme="light"] .tech-header h2,
html[data-theme="light"] .tech-row-title span{
    color:var(--title);
}html[data-theme="light"] .tech-stack-section p,
html[data-theme="light"] .tech-header p{
    color:var(--text);
}html[data-theme="light"] .tech-row-title i,
html[data-theme="light"] .loop-divider{
    color:var(--brand-blue);
}html[data-theme="light"] .tech-marquee::before{
    background:linear-gradient(to right, var(--dark), transparent);
}html[data-theme="light"] .tech-marquee::after{
    background:linear-gradient(to left, var(--dark), transparent);
}
html[data-theme="light"] .tech-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 12px 32px rgba(37,99,255,.09);
}
html[data-theme="light"] .tech-card:hover{
    border-color:var(--brand-blue);
    box-shadow:0 18px 44px rgba(37,99,255,.20);
}html[data-theme="light"] .tech-card i{
    color:var(--brand-blue);
}html[data-theme="light"] .tech-card h4{
    color:var(--heading);
}html[data-theme="light"] .tech-card:hover h4{
    color:var(--brand-blue);
}html[data-theme="light"] .tech-card span{
    color:var(--muted);
}html[data-theme="light"] .tech-card::after{
    background:linear-gradient(90deg, transparent, rgba(37,99,255,.12), transparent);
}

html[data-theme="light"] .about-left::before{
    background:radial-gradient(circle, rgba(37,99,255,.12), transparent 70%);
}html[data-theme="light"] .about-section .section-heading h2,
html[data-theme="light"] .about-header h2,
html[data-theme="light"] .about-right h3{
    color:var(--title);
}html[data-theme="light"] .about-section .section-heading p,
html[data-theme="light"] .about-header p,
html[data-theme="light"] .about-right p{
    color:var(--text);
}
html[data-theme="light"] .about-image {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 28px 65px rgba(37,99,255,.12), 0 0 0 1px rgba(37,99,255,.10);
}
html[data-theme="light"] .about-image::before{
    border-color:rgba(37,99,255,.15);
}html[data-theme="light"] .orbit-circle{
    border-color:rgba(37,99,255,.18);
    background:radial-gradient(circle, rgba(37,99,255,.05), transparent 75%);
    box-shadow:inset 0 0 40px rgba(37,99,255,.07), 0 0 40px rgba(37,99,255,.09);
}html[data-theme="light"] .orbit-circle::before{
    border-color:rgba(37,99,255,.14);
}html[data-theme="light"] .orbit-circle::after{
    border-color:rgba(37,99,255,.12);
}html[data-theme="light"] .orbit-dot{
    background:var(--brand-blue);
    box-shadow:0 0 12px rgba(37,99,255,.5);
}html[data-theme="light"] .orbit-icon{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.18);
    box-shadow:0 15px 35px rgba(37,99,255,.10);
    color:var(--brand-blue);
}html[data-theme="light"] .orbit-icon:hover{
    border-color:rgba(37,99,255,.4);
    box-shadow:0 22px 45px rgba(37,99,255,.20);
}
html[data-theme="light"] .about-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 16px 42px rgba(37,99,255,.10);
}
html[data-theme="light"] .about-card:hover{
    border-color:rgba(37,99,255,.45);
    box-shadow:0 26px 60px rgba(37,99,255,.18);
}html[data-theme="light"] .about-card h3{
    color:var(--brand-blue);
}html[data-theme="light"] .about-card span{
    color:var(--heading);
}html[data-theme="light"] .about-label{
    color:var(--brand-blue);
}html[data-theme="light"] .about-label::before{
    background:var(--brand-blue);
}html[data-theme="light"] .about-right h3 span,
html[data-theme="light"] .about-quote span{
    color:var(--brand-blue);
}
html[data-theme="light"] .info-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.16);
  box-shadow: 0 16px 42px rgba(37,99,255,.09);
}
html[data-theme="light"] .info-card:hover{
    border-color:rgba(37,99,255,.45);
    box-shadow:0 22px 50px rgba(37,99,255,.18);
}html[data-theme="light"] .info-icon{
    background:rgba(37,99,255,.12);
    color:var(--brand-blue);
}html[data-theme="light"] .info-card h4{
    color:var(--heading);
}html[data-theme="light"] .about-footer{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.16);
    box-shadow:0 16px 42px rgba(37,99,255,.09);
}html[data-theme="light"] .about-quote p{
    color:var(--quote);
}html[data-theme="light"] .about-signature h3{
    color:var(--heading);
}html[data-theme="light"] .about-signature span{
    color:var(--muted);
}

html[data-theme="light"] .services-section::before,
html[data-theme="light"] .services-section::after{
    opacity:.6;
}html[data-theme="light"] .services-header h2,
html[data-theme="light"] .service-card h3,
html[data-theme="light"] .featured-content h3{
    color:var(--title);
}html[data-theme="light"] .services-header h2 span,
html[data-theme="light"] .featured-content h3 span{
    color:var(--brand-blue);
}html[data-theme="light"] .services-header p,
html[data-theme="light"] .featured-content p,
html[data-theme="light"] .service-card p{
    color:var(--text);
}
html[data-theme="light"] .service-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(150deg, var(--brand-white) 0%, var(--card-grad) 100%);
  border-color: rgba(37,99,255,.16);
  box-shadow: 0 16px 40px rgba(37,99,255,.08);
}
html[data-theme="light"] .service-card:hover{
    color:var(--heading);
}html[data-theme="light"] .service-card:hover h3{
    color:var(--brand-blue);
}html[data-theme="light"] .service-card:hover p{
    color:var(--quote);
}html[data-theme="light"] .service-no,
html[data-theme="light"] .featured-number{
    color:var(--brand-blue);
}
html[data-theme="light"] .featured-service {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(150deg, var(--brand-white) 0%, var(--card-grad) 100%);
  border-color: rgba(37,99,255,.17);
  box-shadow: 0 20px 54px rgba(37,99,255,.10);
}
html[data-theme="light"] .platform-title{
    color:var(--brand-blue);
}html[data-theme="light"] .platform-card{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.16);
    box-shadow:0 10px 26px rgba(37,99,255,.07);
}html[data-theme="light"] .platform-card:hover{
    border-color:rgba(37,99,255,.45);
    box-shadow:0 16px 34px rgba(37,99,255,.16);
}html[data-theme="light"] .platform-icon{
    background:rgba(37,99,255,.12);
    color:var(--brand-blue);
}html[data-theme="light"] .platform-name{
    color:var(--heading);
}html[data-theme="light"] .cms-logo{
    background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue));
    color:var(--brand-white);
    box-shadow:0 0 25px rgba(37,99,255,.3);
}html[data-theme="light"] .cms-orbit .ring-1{
    border-color:rgba(37,99,255,.28);
}html[data-theme="light"] .cms-orbit .ring-2{
    border-color:rgba(37,99,255,.32);
}html[data-theme="light"] .cms-orbit .ring-3{
    border-color:rgba(37,99,255,.26);
}html[data-theme="light"] .cms-logo::after{
    border-color:rgba(37,99,255,.28);
}

html[data-theme="light"] .projects-section::before,
html[data-theme="light"] .projects-section::after{
    opacity:.6;
}html[data-theme="light"] .projects-header h2{
    color:var(--title);
}html[data-theme="light"] .projects-header h2 span{
    color:var(--brand-blue);
}html[data-theme="light"] .projects-header p{
    color:var(--text);
}html[data-theme="light"] .perf-tabs{
    border-bottom-color:rgba(37,99,255,.14);
}html[data-theme="light"] .perf-tab{
    color:var(--muted-3);
}html[data-theme="light"] .perf-tab:hover{
    color:var(--brand-blue);
}html[data-theme="light"] .perf-tab.active{
    color:var(--brand-blue);
    border-bottom-color:var(--brand-blue);
}html[data-theme="light"] .perf-circle .bg{
    stroke:var(--stroke-track);
}html[data-theme="light"] .perf-circle span,
html[data-theme="light"] .perf-item h5{
    color:var(--heading);
}html[data-theme="light"] .perf-api-missing{
    border-color:rgba(37,99,255,.15);
    background:rgba(37,99,255,.03);
}html[data-theme="light"] .project-status{
    background:color-mix(in srgb, var(--success) 10%, transparent);
    border-color:color-mix(in srgb, var(--success) 30%, transparent);
    color:var(--success);
}html[data-theme="light"] .project-country-top{
    background:rgba(37,99,255,.05);
    border-color:rgba(37,99,255,.12);
    color:var(--quote);
}html[data-theme="light"] #projectCountryTopText{
    color:var(--quote);
}html[data-theme="light"] .project-title{
    color:var(--title);
}html[data-theme="light"] .project-about h4,
html[data-theme="light"] .project-technologies h4{
    color:var(--brand-blue);
}html[data-theme="light"] .project-about p{
    color:var(--text);
}html[data-theme="light"] .tech-chip{
    background:rgba(37,99,255,.05);
    border-color:rgba(37,99,255,.12);
}html[data-theme="light"] .tech-chip i{
    color:var(--brand-blue);
}html[data-theme="light"] .tech-chip span{
    color:var(--heading);
}html[data-theme="light"] .tech-chip:hover{
    border-color:var(--brand-blue);
    box-shadow:0 12px 28px rgba(37,99,255,.12);
}html[data-theme="light"] .primary-btn,
html[data-theme="light"] .case-tab-btn.active{
    background:var(--brand-blue);
    color:var(--brand-white);
}html[data-theme="light"] .primary-btn:hover{
    background:var(--brand-blue);
    color:var(--brand-white);
}html[data-theme="light"] .secondary-btn{
    background:var(--brand-white);
    color:var(--heading);
    border-color:rgba(37,99,255,.28);
    box-shadow:0 8px 20px rgba(37,99,255,.07);
}html[data-theme="light"] .secondary-btn:hover{
    border-color:var(--brand-blue);
    color:var(--brand-blue);
    box-shadow:0 12px 26px rgba(37,99,255,.16);
} html[data-theme="light"] .case-study-panel{
    background:var(--panel-bg);
    border-left-color:rgba(37,99,255,.16);
    box-shadow:-20px 0 60px rgba(37,99,255,.14);
}html[data-theme="light"] .case-close-btn{
    background:rgba(37,99,255,.10);
    color:var(--heading);
}html[data-theme="light"] .case-close-btn:hover{
    background:var(--brand-blue);
    color:var(--brand-white);
}html[data-theme="light"] .case-status{
    background:color-mix(in srgb, var(--success) 12%, transparent);
    border-color:color-mix(in srgb, var(--success) 30%, transparent);
    color:var(--success);
}html[data-theme="light"] .case-header h2,
html[data-theme="light"] .case-block h3{
    color:var(--title);
}html[data-theme="light"] .case-project-meta, html[data-theme="light"] .case-block p, html[data-theme="light"] .case-feature-card p {
    color:var(--text);
}html[data-theme="light"] .case-tab-btn{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.20);
    color:var(--heading);
    box-shadow:0 6px 16px rgba(37,99,255,.06);
}html[data-theme="light"] .case-tab-btn:hover{
    border-color:var(--brand-blue);
    color:var(--brand-blue);
}html[data-theme="light"] .case-study-overlay{
    background:color-mix(in srgb, var(--title) 35%, transparent);
}html[data-theme="light"] .gi-frame-desktop{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.15);
    box-shadow:inset 0 0 0 2px var(--soft), 0 20px 45px rgba(37,99,255,.10);
}html[data-theme="light"] .gif-bar{
    background:var(--soft);
    border-bottom-color:rgba(37,99,255,.10);
}html[data-theme="light"] .gi-frame-tablet{
    background:linear-gradient(160deg,var(--brand-white),var(--screen));
    border-color:rgba(37,99,255,.18);
    box-shadow:inset 0 0 0 3px var(--soft), 0 22px 48px rgba(37,99,255,.10);
}html[data-theme="light"] .gi-frame-mobile{
    background:linear-gradient(160deg,var(--brand-white),var(--screen));
    border-color:rgba(37,99,255,.20);
    box-shadow:inset 0 0 0 3px var(--soft), 0 24px 50px rgba(37,99,255,.12);
}html[data-theme="light"] .gallery-item > span:last-child{
    color:var(--muted);
}html[data-theme="light"] .performance-card{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.16);
    box-shadow:0 16px 38px rgba(37,99,255,.08);
}html[data-theme="light"] .performance-title,
html[data-theme="light"] .performance-score{
    color:var(--heading);
}html[data-theme="light"] .progress{
    background:rgba(37,99,255,.13);
}html[data-theme="light"] .progress-fill{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-indigo));
}html[data-theme="light"] .case-feature-card{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.16);
    box-shadow:0 16px 38px rgba(37,99,255,.08);
}
html[data-theme="light"] .case-list-item {
  color: var(--text);
  border-color: rgba(37,99,255,.16);
}


html[data-theme="light"] .process-section::before{
    opacity:.5;
}html[data-theme="light"] .process-heading h2{
    color:var(--title);
}html[data-theme="light"] .process-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .process-heading p{
    color:var(--text);
}
html[data-theme="light"] .process-section .process-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(180deg, var(--brand-white) 0%, var(--card-grad) 100%) ;
  border-color: rgba(37,99,255,.16) ;
  box-shadow: 0 14px 32px rgba(37,99,255,.08), inset 0 1px 0 rgba(255,255,255,.95) ;
}
html[data-theme="light"] .process-section .process-card:hover{
    border-color:rgba(37,99,255,.5) ;
    box-shadow:0 0 0 1px rgba(37,99,255,.18), 0 22px 44px rgba(37,99,255,.16), 0 8px 22px rgba(37,99,255,.08) ;
}html[data-theme="light"] .process-card h3{
    color:var(--heading);
}html[data-theme="light"] .process-card p{
    color:var(--text);
}html[data-theme="light"] .process-node{
    background:radial-gradient(circle at 50% 45%, var(--brand-white), var(--soft) 72%);
    border-color:rgba(37,99,255,.6);
    color:var(--heading);
    box-shadow:0 0 0 7px var(--brand-white), 0 0 16px rgba(37,99,255,.16), inset 0 0 20px rgba(37,99,255,.06);
}html[data-theme="light"] .process-node::after{
    background:var(--brand-blue);
    border-color:var(--brand-white);
    box-shadow:0 0 12px rgba(37,99,255,.5);
}html[data-theme="light"] .process-section .process-card-icon{
    background:rgba(37,99,255,.08) ;
    border-color:rgba(37,99,255,.16) ;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 20px rgba(37,99,255,.06) ;
}html[data-theme="light"] .process-section .process-card-icon i{
    color:var(--brand-blue) ;
}html[data-theme="light"] .process-benefits{
    border-color:rgba(37,99,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.92), color-mix(in srgb, var(--card-grad) 90%, transparent));
    box-shadow:0 12px 30px rgba(37,99,255,.06), inset 0 1px 0 rgba(255,255,255,.9);
}html[data-theme="light"] .process-benefit:not(:last-child)::after{
    background:rgba(37,99,255,.14);
}html[data-theme="light"] .process-benefit-icon{
    color:var(--brand-blue);
    background:rgba(37,99,255,.10);
    border-color:rgba(37,99,255,.18);
}html[data-theme="light"] .process-benefit-icon.purple{
    color:var(--brand-purple);
    background:rgba(139,92,248,.10);
    border-color:rgba(139,92,248,.18);
}html[data-theme="light"] .process-benefit h4{
    color:var(--heading);
}html[data-theme="light"] .process-benefit p{
    color:var(--text);
}

html[data-theme="light"] .experience-section-heading h2{
    color:var(--title);
}html[data-theme="light"] .experience-section-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .experience-section-heading p{
    color:var(--text);
}html[data-theme="light"] .experience-stats{
    border-color:rgba(37,99,255,.16);
    background:var(--brand-white);
    box-shadow:0 16px 42px rgba(37,99,255,.09), inset 0 1px 0 rgba(255,255,255,1);
}html[data-theme="light"] .experience-stat-card:not(:last-child)::after{
    background:rgba(37,99,255,.16);
}html[data-theme="light"] .experience-stat-icon{
    background:rgba(37,99,255,.09);
    border-color:rgba(37,99,255,.20);
    color:var(--brand-blue);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(37,99,255,.06);
}html[data-theme="light"] .experience-stat-icon.purple{
    color:var(--brand-purple);
    background:rgba(139,92,248,.09);
    border-color:rgba(139,92,248,.20);
}html[data-theme="light"] .experience-stat-icon.cyan{
    color:var(--brand-cyan);
    background:rgba(0,212,255,.09);
    border-color:rgba(0,212,255,.20);
}html[data-theme="light"] .experience-stat-content h3{
    color:var(--heading);
}html[data-theme="light"] .experience-stat-content p{
    color:var(--text);
}html[data-theme="light"] .experience-section .journey-panel{
    background:linear-gradient(180deg, var(--brand-white) 0%, var(--card-grad) 100%);
    border-color:rgba(37,99,255,.16);
    box-shadow:0 22px 54px rgba(37,99,255,.10);
}html[data-theme="light"] .journey-heading h3{
    color:var(--title);
}html[data-theme="light"] .journey-heading p{
    color:var(--text);
}html[data-theme="light"] .timeline::before{
    background:linear-gradient(90deg, rgba(37,99,255,.30), rgba(139,92,248,.45), rgba(37,99,255,.30));
}html[data-theme="light"] .timeline-item::before{
    background:var(--brand-blue);
    border-color:var(--brand-blue);
    box-shadow:0 0 0 5px var(--brand-white), 0 0 16px rgba(37,99,255,.4);
}html[data-theme="light"] .timeline-item:nth-child(2n)::before{
    border-color:var(--brand-purple);
    box-shadow:0 0 0 5px var(--brand-white), 0 0 16px rgba(139,92,248,.35);
}html[data-theme="light"] .experience-section .timeline-year{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.35);
    color:var(--brand-blue);
}html[data-theme="light"] .timeline-item:nth-child(2n) .timeline-year{
    border-color:rgba(139,92,248,.35);
    color:var(--brand-purple);
}
html[data-theme="light"] .experience-section .timeline-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white);
  border-color: rgba(37,99,255,.16);
  box-shadow: 0 16px 36px rgba(37,99,255,.08);
}
html[data-theme="light"] .timeline-card h3{
    color:var(--title);
}html[data-theme="light"] .experience-company{
    color:var(--brand-blue);
}html[data-theme="light"] .timeline-card > p{
    color:var(--text);
}html[data-theme="light"] .experience-section .experience-tag{
    background:rgba(37,99,255,.07);
    border-color:rgba(37,99,255,.18);
    color:var(--brand-blue);
}

html[data-theme="light"] .testimonial-heading h2{
    color:var(--title);
}html[data-theme="light"] .testimonial-heading h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .testimonial-heading p{
    color:var(--text);
}html[data-theme="light"] .testimonial-review-panel{
    background:linear-gradient(135deg, rgba(255,255,255,.94), color-mix(in srgb, var(--card-grad) 94%, transparent));
    border-color:rgba(37,99,255,.20);
    box-shadow:0 18px 40px rgba(37,99,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
}html[data-theme="light"] .testimonial-review-icon{
    color:var(--brand-purple);
    background:rgba(139,92,248,.09);
    border-color:rgba(139,92,248,.20);
}html[data-theme="light"] .testimonial-review-intro h3{
    color:var(--heading);
}html[data-theme="light"] .testimonial-review-intro h3 span{
    color:var(--brand-blue);
}html[data-theme="light"] .testimonial-review-intro p{
    color:var(--text);
}html[data-theme="light"] .testimonial-form-top input,
html[data-theme="light"] .testimonial-review-input{
    background:rgba(255,255,255,.8);
    border-color:rgba(37,99,255,.16);
    color:var(--heading);
}html[data-theme="light"] .testimonial-form-top input::placeholder,
html[data-theme="light"] .testimonial-review-input::placeholder{
    color:var(--muted-2);
}html[data-theme="light"] .testimonial-form-top input:focus,
html[data-theme="light"] .testimonial-review-input:focus{
    border-color:rgba(37,99,255,.45);
    background:rgba(255,255,255,.95);
    box-shadow:0 0 0 3px rgba(37,99,255,.10);
}html[data-theme="light"] .testimonial-stars button{
    color:var(--muted-2);
}html[data-theme="light"] .testimonial-stars button:hover,
html[data-theme="light"] .testimonial-stars button.is-selected{
    color:var(--warning);
    text-shadow:0 0 10px color-mix(in srgb, var(--warning) 35%, transparent);
}html[data-theme="light"] .testimonial-form-status{
    color:var(--success);
    background:color-mix(in srgb, var(--success) 12%, transparent);
    border-color:color-mix(in srgb, var(--success) 30%, transparent);
}html[data-theme="light"] .testimonial-form-status.error{
    color:var(--danger);
    background:color-mix(in srgb, var(--danger) 10%, transparent);
    border-color:color-mix(in srgb, var(--danger) 30%, transparent);
}
html[data-theme="light"] .testimonial-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white) ;
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 16px 42px rgba(37,99,255,.09);
}
html[data-theme="light"] .testimonial-quote{
    background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple)) ;
    -webkit-background-clip:text ;
    background-clip:text ;
    -webkit-text-fill-color:transparent ;
    color:transparent ;
}html[data-theme="light"] .testimonial-stars-static{
    color:var(--warning) ;
}html[data-theme="light"] .testimonial-copy{
    color:var(--quote) ;
}html[data-theme="light"] .testimonial-author{
    border-top-color:rgba(37,99,255,.16) ;
}html[data-theme="light"] .testimonial-author h4{
    color:var(--heading) ;
}html[data-theme="light"] .testimonial-author span{
    color:var(--brand-blue) ;
}html[data-theme="light"] .testimonial-arrow{
    background:var(--brand-white) ;
    border-color:rgba(37,99,255,.35) ;
    color:var(--brand-blue) ;
    box-shadow:0 6px 18px rgba(37,99,255,.12) ;
}html[data-theme="light"] .testimonial-arrow:hover:not(:disabled){
    background:rgba(37,99,255,.12) ;
    border-color:var(--brand-blue) ;
    color:var(--brand-blue) ;
}html[data-theme="light"] .testimonial-arrow:disabled{
    opacity:.30;
}html[data-theme="light"] .testimonial-pagination span{
    background:var(--pagination-dot) ;
}html[data-theme="light"] .testimonial-pagination span.active{
    background:var(--brand-blue) ;
    box-shadow:0 0 16px rgba(37,99,255,.5) ;
}

html[data-theme="light"] .faq-section::before{
    opacity:.6;
}
html[data-theme="light"] .faq-intro-label{
    color:var(--brand-blue);
}html[data-theme="light"] .faq-header h2{
    color:var(--title);
}html[data-theme="light"] .faq-header h2 span{
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .faq-header p{
    color:var(--text);
}
html[data-theme="light"] .faq-intro-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(145deg, rgba(255,255,255,.95), color-mix(in srgb, var(--card-grad) 92%, transparent));
  border-color: rgba(37,99,255,.20);
  box-shadow: 0 20px 55px rgba(37,99,255,.10), inset 0 0 40px rgba(37,99,255,.04);
}
html[data-theme="light"] .faq-intro-card::before{
    background:radial-gradient(circle, rgba(37,99,255,.16), transparent 70%);
}html[data-theme="light"] .faq-intro-glow{
    background:radial-gradient(circle, rgba(139,92,248,.14), transparent 70%);
}html[data-theme="light"] .faq-intro-card h3{
    color:var(--title);
}html[data-theme="light"] .faq-intro-card h3 span{
    color:var(--brand-blue);
}html[data-theme="light"] .faq-intro-card p{
    color:var(--text);
}
html[data-theme="light"] .faq-list .faq-item {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white) ;
  border-color: rgba(37,99,255,.18) ;
  box-shadow: 0 14px 34px rgba(37,99,255,.08);
}
html[data-theme="light"] .faq-list .faq-item:hover,
html[data-theme="light"] .faq-list .faq-item.active{
    background:var(--brand-white) ;
    border-color:rgba(37,99,255,.45) ;
    box-shadow:0 18px 44px rgba(37,99,255,.16) ;
}html[data-theme="light"] .faq-list .faq-question{
    color:var(--heading) ;
}html[data-theme="light"] .faq-list .faq-question b{
    color:var(--brand-blue);
}html[data-theme="light"] .faq-list .faq-question i{
    color:var(--brand-blue);
    background:rgba(37,99,255,.10);
    border-color:rgba(37,99,255,.24);
}html[data-theme="light"] .faq-list .faq-answer p{
    color:var(--text);
}

html[data-theme="light"] .contact-section::before{
    opacity:.6;
}html[data-theme="light"] .contact-header h2{
    color:var(--title);
}html[data-theme="light"] .contact-header h2 span{
    background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue),var(--brand-purple));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}html[data-theme="light"] .contact-header p{
    color:var(--text);
}
html[data-theme="light"] .contact-connect-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(150deg, var(--brand-white) 0%, var(--card-grad) 100%);
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 22px 58px rgba(37,99,255,.12), inset 0 1px 0 rgba(255,255,255,1);
}

html[data-theme="light"] .contact-form-card {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: linear-gradient(150deg, var(--brand-white) 0%, var(--card-grad) 100%);
  border-color: rgba(37,99,255,.18);
  box-shadow: 0 22px 58px rgba(37,99,255,.12), inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .contact-form-card::before{
    background:linear-gradient(135deg, rgba(0,212,255,.6), transparent 36%, transparent 66%, color-mix(in srgb, var(--brand-purple) 50%, transparent));
}html[data-theme="light"] .contact-orbit-icon{
    background:radial-gradient(circle, rgba(37,99,255,.12), rgba(255,255,255,.2) 65%);
}html[data-theme="light"] .contact-orbit-ring,
html[data-theme="light"] .contact-orbit-ring-two{
    border-color:rgba(37,99,255,.20);
}html[data-theme="light"] .contact-kicker{
    color:var(--brand-cyan);
}html[data-theme="light"] .contact-connect-copy h3{
    color:var(--title);
}html[data-theme="light"] .contact-connect-copy h3 span{
    color:var(--brand-blue);
}html[data-theme="light"] .contact-divider{
    background:rgba(37,99,255,.14);
}html[data-theme="light"] .contact-detail{
    color:var(--heading);
}html[data-theme="light"] .contact-detail-icon{
    color:var(--brand-blue);
    background:var(--brand-white);
    border-color:rgba(37,99,255,.24);
    box-shadow:0 6px 16px rgba(37,99,255,.08);
}html[data-theme="light"] .contact-detail:nth-child(2) .contact-detail-icon{
    color:var(--brand-purple);
    background:var(--brand-white);
    border-color:rgba(139,92,248,.26);
}html[data-theme="light"] .contact-detail-copy strong{
    color:var(--heading);
}html[data-theme="light"] .contact-detail-copy span{
    color:var(--text);
}html[data-theme="light"] .contact-form-head h3{
    color:var(--title);
}html[data-theme="light"] .contact-form-icon{
    color:var(--brand-cyan);
    background:var(--brand-white);
    border-color:rgba(0,212,255,.26);
    box-shadow:0 6px 16px rgba(0,212,255,.10);
}html[data-theme="light"] .contact-field > i{
    color:var(--muted-2);
}html[data-theme="light"] .contact-field input,
html[data-theme="light"] .contact-field select,
html[data-theme="light"] .contact-field textarea{
    color:var(--heading);
    background:var(--brand-white);
    border-color:rgba(37,99,255,.22);
    box-shadow:0 4px 12px rgba(37,99,255,.05);
}html[data-theme="light"] .contact-field input::placeholder,
html[data-theme="light"] .contact-field textarea::placeholder{
    color:var(--muted-2);
}html[data-theme="light"] .contact-field select:invalid{
    color:var(--muted-2);
}html[data-theme="light"] .contact-field select option{
    background:var(--brand-white);
    color:var(--heading);
}html[data-theme="light"] .contact-field input:focus,
html[data-theme="light"] .contact-field select:focus,
html[data-theme="light"] .contact-field textarea:focus{
    border-color:rgba(37,99,255,.55);
    background:var(--brand-white);
    box-shadow:0 0 0 3px rgba(37,99,255,.12);
}html[data-theme="light"] .contact-field:focus-within > i{
    color:var(--brand-blue);
}

html[data-theme="light"] .footer::before{
    background:radial-gradient(rgba(37,99,255,.08), transparent 70%);
}html[data-theme="light"] .footer-logo h2,
html[data-theme="light"] .footer-links h4,
html[data-theme="light"] .footer-services h4,
html[data-theme="light"] .footer-social h4{
    color:var(--title);
}html[data-theme="light"] .footer-logo span{
    color:var(--brand-blue);
}html[data-theme="light"] .footer-logo p, html[data-theme="light"] .footer-services li {
    color:var(--muted-3);
}


.footer {
  position: relative;
  padding: 58px 0 20px;
  border-top: 0;
  background: radial-gradient(circle at 8% 15%, rgba(37,99,255,.10), transparent 24%),
        radial-gradient(circle at 92% 78%, rgba(139,92,248,.08), transparent 25%),
        linear-gradient(135deg,var(--bg-2) 0%,var(--bg-deep) 52%,var(--dark) 100%);
  overflow: hidden;
}
.footer .container{
    position:relative;
    z-index:1;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.footer::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(37,99,255,.13),transparent 70%);
  z-index: -1;
  top: -320px;
  left: 2%;
  transform: translateX(-50%);
  pointer-events: none;
}
.footer::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-250px;
    bottom:-320px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,248,.12),transparent 70%);
    pointer-events:none;
}
.footer-top {
  display: grid ;
  grid-template-columns: 1.3fr .82fr 1.25fr 1fr ;
  gap: 28px;
  margin-bottom: 30px;
}
.footer-column{
    min-width:0;
}.footer-column:not(:first-child){
    padding-left:22px;
    border-left:1px solid color-mix(in srgb, var(--text-muted) 9%, transparent);
}.footer-brand{
    display:inline-block;
    margin-bottom:12px;
}.footer-brand .footer-logo{
    display:block;
    width:auto;
    height:58px;
}.footer-brand-text{
    max-width:345px;
    margin-bottom:20px;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.65;
}.footer-column h4{
    position:relative;
    margin:0 0 16px;
    color:var(--brand-white);
    font-family:'Space Grotesk',sans-serif;
    font-size:18px;
    font-weight:750;
    line-height:1.2;
}.footer-column h4::after{
    content:"";
    display:block;
    width:52px;
    height:2px;
    margin-top:8px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--brand-cyan),var(--brand-purple));
    box-shadow:0 0 12px rgba(0,212,255,.20);
}.footer-links ul,
.footer-services ul{
    margin:0;
    padding:0;
    list-style:none;
}.footer-links li {
    margin:0 0 6px;
}
.footer-services li {
  color: var(--text);
  margin: 0 0 6px;
}
.footer-services a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    color:var(--text-muted-2);
    font-size:13.5px;
    line-height:1.4;
    transition:color .25s ease,transform .25s ease;
}
.footer-links a {
  color: var(--text-muted-2);
  transition: color .25s ease,transform .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.4;
}
.footer-links a i,
.footer-services a i{
    flex:0 0 auto;
    color:var(--brand-blue);
    font-size:9px;
    transition:transform .25s ease,color .25s ease;
}.footer-services a:hover {
    color:var(--text-strong);
    transform:translateX(2px);
}
.footer-links a:hover {
  color: var(--text-strong);
  padding-left: 8px;
  transform: translateX(2px);
}
.footer-links a:hover i,
.footer-services a:hover i{
    color:var(--brand-indigo);
    transform:translateX(2px);
}.footer-social-links{
    display:flex;
    align-items:center;
    gap:10px;
}.footer-social-links a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,255,.28);
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 25%,rgba(37,99,255,.17),transparent 55%),
        color-mix(in srgb, var(--bg-2) 72%, transparent);
    color:var(--text-bright);
    font-size:14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 7px 20px rgba(0,0,0,.14);
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}.footer-social-links a:hover{
    transform:translateY(-4px);
    background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
    border-color:rgba(99,102,255,.72);
    color:var(--brand-white);
    box-shadow:
        0 12px 28px rgba(37,99,255,.22),
        0 0 16px rgba(139,92,248,.10);
}.footer-contact-list{
    display:flex;
    flex-direction:column;
    gap:30px;
}.footer-contact-item{
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:var(--text-muted);
    text-decoration:none;
}.footer-contact-item:hover{
    color:var(--text-bright);
}.footer-contact-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,255,.24);
    border-radius:11px;
    background:linear-gradient(145deg,rgba(37,99,255,.10),rgba(139,92,248,.06));
    color:var(--brand-cyan);
    font-size:17px;
}.footer-contact-item:nth-child(2) .footer-contact-icon{
    color:var(--brand-indigo);
    border-color:rgba(139,92,248,.24);
}.footer-contact-item > span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-top:1px;
}.footer-contact-item small{
    color:var(--text-faint);
    font-size:18px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.35px;
    text-transform:uppercase;
}.footer-contact-item strong{
    color:var(--text-bright);
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    overflow-wrap:anywhere;
}
.footer-bottom {
  padding-top: 17px;
  border-top: 1px solid color-mix(in srgb, var(--text-muted) 10%, transparent);
  text-align: center;
  margin-top: 0;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}
 
html[data-theme="light"] .footer {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: radial-gradient(circle at 8% 15%,rgba(37,99,255,.10),transparent 24%),
        radial-gradient(circle at 92% 78%,rgba(139,92,248,.07),transparent 25%),
        linear-gradient(135deg,var(--footer-grad-a) 0%,var(--footer-grad-b) 52%,var(--footer-grad-c) 100%);
  border-top-color: rgba(37,99,255,.16);
}
html[data-theme="light"] .footer-column h4{
    color:var(--title);
}html[data-theme="light"] .footer-brand-text, html[data-theme="light"] .footer-services a {
    color:var(--muted-3);
}
html[data-theme="light"] .footer-links a {
  color: var(--muted-3);
}
html[data-theme="light"] .footer-services a:hover {
    color:var(--brand-blue);
}
html[data-theme="light"] .footer-links a:hover {
  color: var(--brand-blue);
}
html[data-theme="light"] .footer-column:not(:first-child){
    border-left-color:rgba(37,99,255,.10);
}html[data-theme="light"] .footer-social-links a{
    background:
        radial-gradient(circle at 30% 25%,rgba(37,99,255,.10),transparent 55%),
        rgba(255,255,255,.88);
    border-color:rgba(37,99,255,.18);
    color:var(--brand-blue);
    box-shadow:0 8px 20px rgba(37,99,255,.07);
}html[data-theme="light"] .footer-social-links a:hover{
    color:var(--brand-white);
}html[data-theme="light"] .footer-contact-item{
    color:var(--muted-3);
}html[data-theme="light"] .footer-contact-item small{
    color:var(--text);
}html[data-theme="light"] .footer-contact-item strong{
    color:var(--muted-3);
}html[data-theme="light"] .footer-contact-icon{
    background:rgba(37,99,255,.055);
    border-color:rgba(37,99,255,.16);
    color:var(--brand-blue);
}
html[data-theme="light"] .footer-bottom {
  border-top-color: rgba(37,99,255,.12);
}

html[data-theme="light"] .footer-bottom p {
  color: var(--text-muted-2);
}


 .hero-left .hero-badge i{
    display:none ;
}


.hero-left .hero-badge {
  display: inline-flex ;
  align-items: center ;
  justify-content: flex-start ;
  gap: 15px ;
  width: max-content ;
  max-width: 100% ;
  padding: 0 ;
  margin-bottom: 35px ;
  border: 0 ;
  border-radius: 0 ;
  background: transparent ;
  box-shadow: none ;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none ;
  color: var(--brand-blue) ;
  font-size: 15px ;
  font-weight: 700 ;
  line-height: 1.25 ;
  letter-spacing: 2.5px ;
  text-transform: uppercase ;
  margin: 0 0 35px ;
}

.hero-left .hero-badge::before {
  content: "" ;
  display: block ;
  width: 54px ;
  height: 2px ;
  flex: 0 0 54px ;
  margin: 0 ;
  padding: 0 ;
  border: 0 ;
  border-radius: 999px ;
  background: var(--brand-blue) ;
  box-shadow: 0 0 10px rgba(37,99,255,.18) ;
}

.hero-left .hero-badge::after {
  content: none ;
  display: none ;
  width: 55px ;
  height: 2px ;
  flex: 0 0 55px ;
  margin: 0 ;
  padding: 0 ;
  border: 0 ;
  border-radius: 999px ;
  background: var(--brand-blue) ;
}
.hero-left .hero-badge > i{
    display:none ;
}  html[data-theme="light"] .hero-left .hero-badge{
    background:transparent ;
    border:0 ;
    color:var(--brand-blue) ;
}html[data-theme="light"] .hero-left .hero-badge::before{
    background:var(--brand-blue) ;
    box-shadow:0 0 10px rgba(37,99,255,.14) ;
}

.navbar {
    padding: 0;
}

.navbar-brand {
    font-size: 34px;
    font-weight: 700;
    font-family: 'Space Grotesk',sans-serif;
    color: var(--brand-white);
}

.navbar-brand span {
    color: var(--primary);
}

.navbar-nav {
    gap: 14px;
    align-items: center;
}

.navbar-nav a {
    color: var(--brand-white);
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

.navbar-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: .4s;
}

.navbar-nav a:hover::after {
    width: 100%;
}

.navbar-toggler {
    border: none;
    box-shadow: none;
    color: var(--brand-white);
    font-size: 28px;
}


.hero-right {
  animation: heroRight 1.2s ease;
  overflow: visible;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 700px;
}



.orbit-icon {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  color: var(--brand-blue);
  font-size: 32px;
  z-index: 20;
  transition: .35s ease;
  cursor: pointer;
}



.orbit-icon:hover {
  transform: translateY(-8px);
  border-color: rgba(37,99,255,.35);
  box-shadow: 0 25px 55px rgba(37,99,255,.20);
  background: var(--brand-blue);
  color: var(--brand-white);
}


.section-heading {
    max-width: 760px;
    margin: 0 auto 70px;
}

.section-heading.text-center {
    text-align: center;
}

.section-heading h2 {
    font-size: 58px;
    margin-bottom: 20px;
}

.section-heading p {
    font-size: 18px;
    max-width: 650px;
    margin: auto;
    line-height: 1.8;
}

.about-right h2 {
    font-size: 58px;
    line-height: 1.15;
    margin: 20px 0;
}


.about-info-grid {
  display: grid ;
  grid-template-columns: repeat(2,minmax(0,1fr)) ;
  gap: 18px ;
  margin-top: 34px !important;
  width: 100%;
  align-items: stretch;
  margin: 50px 0;
}


.about-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(37,99,255,.12),
        transparent 70%
    );
    left: -250px;
    top: 0;
    z-index: -2;
}

.about-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0,212,255,.08),
        transparent 70%
    );
    right: -180px;
    bottom: -100px;
    z-index: -2;
}


.about-left {
  position: relative;
  width: 540px;
  height: 700px;
  animation: aboutLeft .9s ease;
}



.about-right {
  width: 100%;
  position: relative;
  padding-left: 30px;
  animation: aboutRight 1s ease;
}


.about-scene{
    position:absolute;
    top:0;
    left:0;
    width:540px;
    height:700px;
    transform-origin:top center;
}

@keyframes aboutLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
@keyframes aboutRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.progress {
    height: 100%;
    border-radius: 50px;
    position: relative;
    background: linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));
    animation: progressLoad 2s ease forwards;
}

@keyframes progressLoad{

    from{

        width:0;

    }

}

.services-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(37,99,255,.08),
    transparent 70%);
    left: -250px;
    top: 150px;
    z-index: -2;
}

.services-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(0,212,255,.08),
    transparent 70%);
    right: -180px;
    bottom: -180px;
    z-index: -2;
}





.project-content p {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 5px;
}

.projects-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(37,99,255,.10),
    transparent 70%);
    top: -150px;
    right: -220px;
    z-index: -2;
}

.projects-section::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(0,212,255,.08),
    transparent 70%);
    left: -180px;
    bottom: -180px;
    z-index: -2;
}


.project-content h3 {
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 5px;
  transition: .4s;
}



.project-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 25px;
  padding-top: 10px;
  position: relative;
  animation: projectFade .8s ease both;
}


@keyframes projectFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.testimonial-grid {
  display: flex ;
  gap: 24px ;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) ;
  will-change: transform ;
  width: 100% !important;
  margin: 40px 0 0 !important;
  padding: 4px 0 ;
  flex-wrap: nowrap ;
  align-items: stretch ;
  overflow: visible ;
  grid-template-columns: repeat(3,1fr);
  margin-top: 70px;
}



.testimonial-card {
  flex: 0 0 calc(50% - 12px) ;
  width: calc(50% - 12px) !important;
  min-width: calc(50% - 12px) ;
  max-width: calc(50% - 12px) ;
  box-sizing: border-box ;
  margin: 0 ;
  padding: 30px 26px ;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent) ;
  border: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent) !important;
  border-radius: 24px ;
  backdrop-filter: blur(16px) ;
  -webkit-backdrop-filter: blur(16px) ;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease ;
  height: auto !important;
  position: relative;
}


.testimonial-card p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 30px;
}

.brand-logo.light-logo,
.footer-logo.light-logo{
    display:none;
}html[data-theme="light"] .brand-logo.light-logo,
html[data-theme="light"] .footer-logo.light-logo{
    display:block;
}html[data-theme="light"] .header-brand .brand-logo.dark-logo,
html[data-theme="light"] .footer-brand .footer-logo.dark-logo{
    display:none;
}

.angled-btn{
    --ab-h:58px;
    --ab-icon-w:max(68px,3.8em);
    --ab-pad-x:28px;
    --ab-font-size:18px;
    --ab-icon-size:20px;
    --ab-cut:16px;
    --ab-gap:2px;

    --ab-blue-fill:linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary) 55%,
        var(--secondary) 100%
    );

    --ab-dark-fill:linear-gradient(
        180deg,
        var(--dark-2) 0%,
        var(--dark) 100%
    );

    --ab-border-color:var(--primary);
    --ab-glow:color-mix(in srgb,var(--primary) 40%,transparent);
    --ab-glow-hover:color-mix(in srgb,var(--primary) 60%,transparent);

    --ab-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 284 58' preserveAspectRatio='none'%3E%3Cpath d='M29 0 L273 0 Q284 0 280.74 10.51 L269.26 47.49 Q266 58 255 58 L11 58 Q0 58 3.26 47.49 L14.74 10.51 Q18 0 29 0 Z' fill='%23fff'/%3E%3C/svg%3E");

    --ab-border-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 284 58' preserveAspectRatio='none'%3E%3Cpath d='M29 1 L273 1 Q282.1 1 279.78 10.81 L268.30 47.79 Q265.5 57 255 57 L11 57 Q1.9 57 4.22 47.19 L15.70 10.21 Q18.5 1 29 1 Z' fill='none' stroke='%232f7bff' stroke-width='2'/%3E%3C/svg%3E");

    position:relative ;
    display:inline-flex ;
    align-items:stretch ;
    justify-content:flex-start ;

    height:var(--ab-h);
    min-height:var(--ab-h);
    width:max-content ;
    max-width:100%;
    min-width:0;

    margin:0 ;
    padding:0 var(--ab-icon-w) 0 0 ;

    border:0 ;
    border-radius:0 ;
    background:var(--ab-dark-fill) ;

    color:var(--brand-white) ;

    font-family:'Space Grotesk',sans-serif ;
    font-size:var(--ab-font-size);
    font-weight:700 ;
    line-height:1 ;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;

    cursor:pointer;
    overflow:hidden ;
    isolation:isolate;
    box-sizing:border-box;

    -webkit-mask:var(--ab-shape) 0 0 / 100% 100% no-repeat;
    mask:var(--ab-shape) 0 0 / 100% 100% no-repeat;

    filter:drop-shadow(0 6px 18px var(--ab-glow));
    transition:filter .3s ease;
}

.angled-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;

    background:var(--ab-border-svg) center / 100% 100% no-repeat;
}

.angled-btn .angled-btn-label{
    position:relative;
    left:auto;
    top:auto;
    z-index:2;

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

    flex:0 0 auto;
    width:max-content;
    max-width:100%;
    height:var(--ab-h);

    padding:0 var(--ab-pad-x);
    margin:0;

    background:var(--ab-blue-fill);

    clip-path:polygon(
        0 0,
        100% 0,
        calc(100% - var(--ab-cut)) 100%,
        0 100%
    );

    font:inherit;
    color:var(--brand-white);
    font-size:var(--ab-font-size);
    line-height:1;
    text-align:center;
    white-space:nowrap;

    transition:transform .62s cubic-bezier(.65,0,.35,1);
}

.angled-btn::after{
    content:"";
    position:absolute;
    left:calc(-1 * var(--ab-cut));
    top:0;
    z-index:3;

    width:calc(100% + var(--ab-cut));
    height:var(--ab-h);

    background:var(--ab-dark-fill);

    clip-path:polygon(
        calc(100% - var(--ab-icon-w) + var(--ab-cut)) 0,
        100% 0,
        100% 100%,
        calc(100% - var(--ab-icon-w)) 100%
    );

    filter:drop-shadow(-1px 0 0 var(--ab-border-color))
           drop-shadow(1px 0 0 var(--ab-border-color));
    pointer-events:none;
    transition:transform .62s cubic-bezier(.65,0,.35,1);
}

.angled-btn .angled-btn-icon{
    position:absolute;
    left:0;
    top:0;
    z-index:4;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    width:100%;
    height:var(--ab-h);

    margin:0;
    padding:0 calc(
        (var(--ab-icon-w) - var(--ab-icon-size)) / 2
    ) 0 0;

    background:transparent ;
    border:0 ;
    border-radius:0 ;
    box-shadow:none ;

    overflow:visible;
    pointer-events:none;
    box-sizing:border-box;

    transition:transform .62s cubic-bezier(.65,0,.35,1);
}

.angled-btn .angled-btn-icon i,
.angled-btn .angled-btn-icon svg{
    position:relative;
    z-index:5;

    display:block;

    width:var(--ab-icon-size);
    height:var(--ab-icon-size);

    flex:none;
    font-size:var(--ab-icon-size);
    line-height:1;
    color:inherit;
    margin:0 ;
    transform:none ;
}

.angled-btn:hover .angled-btn-label{
    transform:translateX(calc(var(--ab-icon-w) + var(--ab-gap)));
}

.angled-btn:hover::after{
    transform:translateX(
        calc(-100% + var(--ab-icon-w) + var(--ab-cut))
    );
}

.angled-btn:hover .angled-btn-icon{
    transform:translateX(
        calc(-100% + var(--ab-icon-w))
    );
}

.angled-btn:hover{
    filter:drop-shadow(0 8px 24px var(--ab-glow-hover));
}

.angled-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px
        color-mix(in srgb,var(--primary) 25%,transparent);
}

.angled-btn[disabled],
.angled-btn.disabled,
.angled-btn[aria-disabled="true"]{
    pointer-events:none;
    cursor:not-allowed;
    opacity:.45;
    filter:grayscale(.25);
    transform:none;
    box-shadow:none;
}

.angled-btn.project-btn, .angled-btn.resume-btn {
    width:max-content ;
    max-width:100% ;
    min-width:0 ;

    padding-right:var(--ab-icon-w) ;
    padding-left:0 ;
    padding-top:0 ;
    padding-bottom:0 ;

    margin-top:0 ;

    border-width:0 ;
    border-radius:0 ;
    gap:0 ;
    flex:none ;
}

.project-actions .angled-btn.project-btn{
    flex:0 1 auto ;
    min-width:0 ;
    max-width:100% ;
}

.angled-btn--primary,
.angled-btn--blue,
.angled-btn--purple{
    --ab-blue-fill:linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary) 55%,
        var(--secondary) 100%
    );

    --ab-dark-fill:linear-gradient(
        180deg,
        var(--dark-2) 0%,
        var(--dark) 100%
    );

    --ab-border-color:var(--primary);
}

.angled-btn--ghost{
    --ab-blue-fill:linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary) 55%,
        var(--secondary) 100%
    );

    --ab-dark-fill:linear-gradient(
        180deg,
        var(--dark-2) 0%,
        var(--dark) 100%
    );

    --ab-border-color:var(--primary);
    box-shadow:none;
}

.angled-btn--sm{
    --ab-h:48px;
    --ab-icon-w:max(52px,3.8em);
    --ab-pad-x:21px;
    --ab-font-size:14px;
    --ab-icon-size:14px;
    --ab-cut:14px;
}




.angled-btn.perf-api-btn {
  width: max-content ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: none ;
  --ab-h: 44px;
  --ab-icon-w: max(48px,3.8em);
  --ab-pad-x: 16px;
  --ab-font-size: 13px;
  --ab-icon-size: 13px;
  --ab-cut: 12px;
}



.angled-btn.header-hire-btn {
  width: max-content ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: none ;
  --ab-h: 42px;
  --ab-icon-w: max(50px,3.2em);
  --ab-pad-x: 19px;
  --ab-font-size: 14px;
  --ab-icon-size: 14px;
  --ab-cut: 12px;
}


.angled-btn.header-hire-btn .angled-btn-label{
    font-size:14px;
}

html[data-theme="light"] .angled-btn{
    --ab-border-color:var(--primary);
    --ab-glow:color-mix(in srgb,var(--primary) 25%,transparent);
    --ab-glow-hover:color-mix(in srgb,var(--primary) 40%,transparent);

    --ab-blue-fill:linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary) 55%,
        var(--secondary) 100%
    );

    --ab-dark-fill:linear-gradient(
        180deg,
        var(--dark-2) 0%,
        var(--dark) 100%
    );

    color:var(--heading) ;
}

html[data-theme="light"] .angled-btn .angled-btn-icon i {
    color:var(--heading) ;
}

html[data-theme="light"] .angled-btn .angled-btn-icon svg {
  color: var(--heading) ;
  fill: currentColor ;
}


@media(prefers-reduced-motion:reduce){
    .angled-btn,
    .angled-btn .angled-btn-label,
    .angled-btn::after,
    .angled-btn .angled-btn-icon,
    .angled-btn .angled-btn-icon i,
    .angled-btn .angled-btn-icon svg{
        transition:none ;
    }

    .angled-btn:hover{
        filter:drop-shadow(0 6px 18px var(--ab-glow));
    }

    .angled-btn:hover .angled-btn-label,
    .angled-btn:hover::after,
    .angled-btn:hover .angled-btn-icon,
    .angled-btn:hover .angled-btn-icon i,
    .angled-btn:hover .angled-btn-icon svg{
        transform:none ;
    }
}


html[data-theme="light"] body {
  transition: background-color .32s ease,
        background .32s ease,
        color .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
  background: var(--brand-white) ;
  color: var(--body-strong);
}





.angled-btn--block {
  width: 100% ;
  max-width: 100% ;
  min-width: 0 ;
}


.angled-btn.faq-talk-btn .angled-btn-label,
.angled-btn.faq-mail-btn .angled-btn-label,
.angled-btn.contact-send-btn .angled-btn-label,
.angled-btn.testimonial-submit-btn .angled-btn-label{
    flex:1 1 auto ;
    width:auto ;
    max-width:100% ;
    min-width:0 ;
    justify-content:center ;
    text-align:center ;
    white-space:nowrap ;
    overflow:hidden ;
}

.angled-btn.faq-talk-btn:hover .angled-btn-label,
.angled-btn.faq-mail-btn:hover .angled-btn-label,
.angled-btn.contact-send-btn:hover .angled-btn-label,
.angled-btn.testimonial-submit-btn:hover .angled-btn-label{
    transform:translateX(calc(var(--ab-icon-w) + var(--ab-gap))) ;
}


.angled-btn.faq-talk-btn {
  width: 100% ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: 1 1 auto ;
  --ab-icon-w: 84px ;
}

.angled-btn.faq-mail-btn {
  width: 100% ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: 1 1 auto ;
  --ab-icon-w: 84px ;
}

.angled-btn.contact-send-btn {
  width: 100% ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: 1 1 auto ;
  --ab-icon-w: 84px ;
}

.angled-btn.testimonial-submit-btn {
  width: 100% ;
  max-width: 100% ;
  min-width: 0 ;
  padding-right: var(--ab-icon-w) ;
  padding-left: 0 ;
  padding-top: 0 ;
  padding-bottom: 0 ;
  margin-top: 0 ;
  border-width: 0 ;
  border-radius: 0 ;
  gap: 0 ;
  flex: 1 1 auto ;
  --ab-icon-w: 84px ;
}


html[data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"] *:not(:hover),
html[data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"] *:not(:hover)::before,
html[data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"][data-theme="light"] *:not(:hover)::after{
    box-shadow:none !important;
}

@media(min-width:1420px){
    html[data-theme="light"] .header-nav{
        background:transparent;
        border-color:rgba(37,99,255,.16);
        box-shadow:none;
    }
}

html[data-theme="light"] .scroll-indicator span{
    color:var(--muted-2);
}

html[data-theme="light"] .scroll-mouse{
    border-color:rgba(37,99,255,.32);
}

html[data-theme="light"] .hero-tech-chip i,
html[data-theme="light"] .hero-tech-orbit-single .hero-tech-chip i,
html[data-theme="light"] .hero-tech-orbit-inner .hero-tech-chip i{
    background:linear-gradient(160deg,var(--brand-white) 0%,var(--chip-grad) 100%);
    border-color:rgba(37,99,255,.22);
}

html[data-theme="light"] .project-card{
    background:var(--brand-white);
    border-color:rgba(37,99,255,.18);
}

html[data-theme="light"] .project-card .project-card-content h4{
    color:var(--title);
}

html[data-theme="light"] .project-card .project-card-meta{
    color:var(--muted);
}

html[data-theme="light"] .project-card .project-card-country-name{
    color:var(--muted);
}

html[data-theme="light"] .project-card.active{
    border-color:var(--brand-blue);
}

/* ------------------------------------------------------------------
   Shared content-card hover system
   ONE common hover treatment for all normal content boxes/cards.
   Applied via the `.card-hover` class. Buttons are not part of this.
   ------------------------------------------------------------------ */
.card-hover{
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}.card-hover:hover{
    transform:translateY(-6px);
    border-color:rgba(37,99,255,.42);
    box-shadow:
        0 14px 32px rgba(37,99,255,.14),
        0 0 16px rgba(37,99,255,.04);
}.card-hover--flat:hover{
    transform:none;
}

html[data-theme="light"] .projects-showcase-title h3{
    color:var(--heading);
}html[data-theme="light"] .project-prev,
html[data-theme="light"] .project-next{
    background:rgba(37,99,255,.05);
    border-color:rgba(37,99,255,.16);
    color:var(--brand-blue);
}

i.fa-wordpress{color:#21759B !important}
i.fa-laravel{color:#FF2D20 !important}
i.fa-php{color:#777BB4 !important}
i.fa-js{color:#F7DF1E !important}
i.fa-react{color:#61DAFB !important}
i.fa-vuejs{color:#42B883 !important}
i.fa-angular{color:#DD0031 !important}
i.fa-node-js{color:#5FA04E !important}
i.fa-html5{color:#E34F26 !important}
i.fa-css3-alt{color:#1572B6 !important}
i.fa-sass{color:#CD6799 !important}
i.fa-bootstrap{color:#7952B3 !important}
i.fa-shopify{color:#95BF47 !important}
i.fa-woocommerce{color:#96588A !important}
i.fa-elementor{color:#92003B !important}
i.fa-wix{color:#FAAD4D !important}
i.fa-webflow{color:#146EF5 !important}
i.fa-git-alt{color:#F05032 !important}
i.fa-git{color:#F05032 !important}
.cms-logo i.fa-wordpress{color:var(--brand-white) !important}


.testimonial-stars button:hover {
  color: #FFC107 !important;
  transform: translateY(-1px);
  text-shadow: 0 0 10px color-mix(in srgb, #FFC107 25%, transparent) !important;
}

.testimonial-stars button.is-selected {
  color: #FFC107 ;
  transform: translateY(-1px);
  text-shadow: 0 0 10px color-mix(in srgb, #FFC107 25%, transparent) ;
}


.testimonial-stars-static {
  color: #FFC107 ;
  font-size: 18px ;
  letter-spacing: 3px ;
  margin-bottom: 0 ;
  display: inline-flex ;
  align-items: center ;
  white-space: nowrap ;
}

.experience-stat-icon i.fa-star{
    color:#FFC107 !important;
}