:root{
--brand-cyan:#00d4ff;
--brand-blue:#2563ff;
--brand-indigo:#6366ff;
--brand-purple:#8b5cf8;
--brand-magenta:#d946ef;
--brand-white:#ffffff;
--primary:var(--brand-blue);
--secondary:var(--brand-indigo);
--cyan:var(--brand-cyan);
--white:var(--brand-white);
--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:#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 h3{
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 h3{
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:#4a78ff;
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 h3{
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 .25s ease;
}.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 .journey-panel .timeline-item:hover{
box-shadow:none;
border-color:transparent;
}.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-year--mode{
flex-direction:column;
}.experience-section .timeline-work-mode{
display:inline-flex;
align-items:center;
gap:5px;
margin-top:3px;
padding:2px 9px 3px;
border-radius:999px;
background:linear-gradient(135deg,#2563FF,#8B5CF8);
border:1px solid rgba(255,255,255,.24);
box-shadow:0 0 10px rgba(37,99,255,.22), 0 1px 3px rgba(37,99,255,.18);
color:#fff;
font-size:9.5px;
line-height:1.15;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap;
}.experience-section .timeline-work-mode::before{
content:"";
width:3.5px;
height:3.5px;
border-radius:50%;
background:rgba(255,255,255,.95);
flex:0 0 auto;
}
.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%{
transform:translateX(-28px);
}
100%{
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);
--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:#1d4ed8;
}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 h3{
color:var(--heading);
}html[data-theme="light"] .tech-card:hover h3{
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 h3{
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);
}
.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;
}