.hero{
position:relative;
padding:160px 20px 140px;
text-align:center;
overflow:hidden;
}

.hero-inner{
max-width:900px;
margin:auto;
position:relative;
z-index:2;
}

.hero-logo{
width:140px;
margin-bottom:30px;
}

.hero-title{
font-size:64px;
margin-bottom:16px;
}

.hero-sub{
font-size:20px;
color:#94a3b8;
max-width:650px;
margin:auto;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

.btn-primary{
background:#2563eb;
padding:12px 24px;
border-radius:10px;
color:white;
text-decoration:none;
}

.btn-secondary{
border:1px solid #334155;
padding:12px 24px;
border-radius:10px;
color:#94a3b8;
text-decoration:none;
}

.hero-bg{
position:absolute;
top:-200px;
left:-200px;
width:800px;
height:800px;
background:radial-gradient(circle,#1d4ed8,transparent 60%);
opacity:0.2;
filter:blur(80px);
}


.tech-section{
padding:120px 20px;
background:#020617;
}

.tech-container{
max-width:1100px;
margin:auto;
}

.tech-title{
font-size:40px;
margin-bottom:10px;
}

.tech-sub{
color:#94a3b8;
max-width:700px;
margin-bottom:50px;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.tech-card{
background:#0f172a;
border:1px solid #1e293b;
padding:30px;
border-radius:16px;
transition:all .25s;
}

.tech-card:hover{
transform:translateY(-6px);
border-color:#334155;
}

.tech-card h3{
margin-bottom:10px;
font-size:20px;
}

.tech-card p{
color:#94a3b8;
font-size:14px;
}


.philosophy-section{
padding:120px 20px;
background:#020617;
}

.philosophy-container{
max-width:1100px;
margin:auto;
}

.philosophy-title{
font-size:40px;
margin-bottom:10px;
}

.philosophy-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.philosophy-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.philosophy-card{
background:#0f172a;
border:1px solid #1e293b;
padding:28px;
border-radius:16px;
}

.philosophy-card h3{
margin-bottom:10px;
font-size:20px;
}

.philosophy-card p{
color:#94a3b8;
font-size:14px;
}

.philosophy-card.highlight{
border-color:#2563eb;
box-shadow:0 0 0 1px rgba(37,99,235,0.3);
}


.industries-section{
padding:120px 20px;
background:#020617;
}

.industries-container{
max-width:1100px;
margin:auto;
}

.industries-title{
font-size:40px;
margin-bottom:10px;
}

.industries-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.industries-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.industries-card{
background:#0f172a;
border:1px solid #1e293b;
padding:28px;
border-radius:16px;
transition:all .25s;
}

.industries-card:hover{
transform:translateY(-6px);
border-color:#334155;
}

.industries-card h3{
margin-bottom:10px;
font-size:20px;
}

.industries-card p{
color:#94a3b8;
font-size:14px;
}

.infra-section{
padding:120px 20px;
background:#020617;
}

.infra-container{
max-width:1100px;
margin:auto;
}

.infra-title{
font-size:40px;
margin-bottom:10px;
}

.infra-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.infra-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.infra-card{
background:#0f172a;
border:1px solid #1e293b;
padding:28px;
border-radius:16px;
transition:all .25s;
}

.infra-card:hover{
transform:translateY(-6px);
border-color:#334155;
}

.infra-card h3{
margin-bottom:10px;
font-size:20px;
}

.infra-card p{
color:#94a3b8;
font-size:14px;
}

.eco-section{
padding:120px 20px;
background:#020617;
}

.eco-container{
max-width:1100px;
margin:auto;
}

.eco-title{
font-size:40px;
margin-bottom:10px;
}

.eco-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.eco-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.eco-card{
display:block;
background:#0f172a;
border:1px solid #1e293b;
padding:30px;
border-radius:16px;
text-decoration:none;
transition:all .25s;
}

.eco-card:hover{
transform:translateY(-6px);
border-color:#2563eb;
}

.eco-card h3{
margin-bottom:10px;
font-size:20px;
color:white;
}

.eco-card p{
color:#94a3b8;
font-size:14px;
}

.nav{
position:fixed;
top:0;
left:0;
width:100%;
background:#020617;
border-bottom:1px solid #1e293b;
z-index:1000;
}

.nav-inner{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px;
}

.nav-left{
display:flex;
align-items:center;
gap:10px;
}

.nav-logo{
width:28px;
}

.nav-brand{
font-size:16px;
font-weight:600;
}

.nav-links{
display:flex;
gap:22px;
}

.nav-links a{
text-decoration:none;
color:#94a3b8;
font-size:14px;
transition:color .2s;
}

.nav-links a:hover{
color:white;
}

.footer{
padding:80px 20px 40px;
background:#020617;
border-top:1px solid #1e293b;
margin-top:120px;
}

.footer-container{
max-width:1100px;
margin:auto;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:40px;
margin-bottom:40px;
}

.footer-col h4{
margin-bottom:12px;
font-size:16px;
}

.footer-col a{
display:block;
color:#94a3b8;
text-decoration:none;
margin-bottom:8px;
font-size:14px;
}

.footer-col a:hover{
color:white;
}

.footer-bottom{
border-top:1px solid #1e293b;
padding-top:20px;
text-align:center;
color:#64748b;
font-size:14px;
}

.global-gradient-bg{
position:fixed;
top:-300px;
left:-300px;
width:1200px;
height:1200px;
background:radial-gradient(circle at 30% 30%, #2563eb, transparent 60%),
           radial-gradient(circle at 70% 70%, #7c3aed, transparent 60%);
opacity:0.15;
filter:blur(120px);
z-index:-1;
animation:gradientMove 18s ease-in-out infinite alternate;
}

@keyframes gradientMove{

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

50%{
transform:translate(150px,100px) scale(1.1);
}

100%{
transform:translate(-100px,150px) scale(1.05);
}

}




.arch-section{
padding:120px 20px;
background:#020617;
}

.arch-container{
max-width:900px;
margin:auto;
text-align:center;
}

.arch-title{
font-size:40px;
margin-bottom:10px;
}

.arch-sub{
color:#94a3b8;
margin-bottom:60px;
}

.arch-diagram{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.arch-layer{
display:flex;
justify-content:center;
}

.arch-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
}

.arch-box{
background:#0f172a;
border:1px solid #1e293b;
padding:18px 24px;
border-radius:12px;
font-size:14px;
}

.arch-arrow{
color:#64748b;
font-size:20px;
}

.tech-card,
.philosophy-card,
.industries-card,
.infra-card,
.eco-card,
.arch-box{
position:relative;
overflow:hidden;
}

.tech-card::before,
.philosophy-card::before,
.industries-card::before,
.infra-card::before,
.eco-card::before,
.arch-box::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(
circle 220px at var(--x) var(--y),
rgba(37,99,235,0.15),
transparent 40%
);

opacity:0;
transition:opacity .25s;
pointer-events:none;

}

.tech-card:hover::before,
.philosophy-card:hover::before,
.industries-card:hover::before,
.infra-card:hover::before,
.eco-card:hover::before,
.arch-box:hover::before{

opacity:1;

}



.eng-section{
padding:120px 20px;
background:#020617;
}

.eng-container{
max-width:1100px;
margin:auto;
}

.eng-title{
font-size:40px;
margin-bottom:10px;
}

.eng-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.eng-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.eng-card{
background:#0f172a;
border:1px solid #1e293b;
padding:28px;
border-radius:16px;
transition:all .25s;
}

.eng-card:hover{
transform:translateY(-6px);
border-color:#334155;
}

.eng-card h3{
margin-bottom:10px;
font-size:20px;
}

.eng-card p{
color:#94a3b8;
font-size:14px;
}

.showcase-section{
padding:120px 20px;
background:#020617;
}

.showcase-container{
max-width:1100px;
margin:auto;
}

.showcase-title{
font-size:40px;
margin-bottom:10px;
}

.showcase-sub{
color:#94a3b8;
max-width:720px;
margin-bottom:50px;
}

.showcase-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;
}

.showcase-card{
display:block;
background:#0f172a;
border:1px solid #1e293b;
padding:28px;
border-radius:16px;
text-decoration:none;
transition:all .25s;
}

.showcase-card:hover{
transform:translateY(-6px);
border-color:#2563eb;
}

.showcase-header{
margin-bottom:10px;
}

.showcase-card h3{
color:white;
font-size:20px;
margin-bottom:8px;
}

.showcase-card p{
color:#94a3b8;
font-size:14px;
}

.nav-links a{
position:relative;
}

.nav-links a.nav-active{
color:white;
}

.nav-links a.nav-active::after{

content:"";

position:absolute;
bottom:-6px;
left:0;

width:100%;
height:2px;

background:#2563eb;

border-radius:2px;

}