:root{

--primary:#4A75B2;
--secondary:#6D4E53;
--accent:#8DB4E2;
--dark:#0F172A;
--light:#F8FAFC;
--white:#ffffff;
--border:rgba(255,255,255,.12);

}

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

body{

font-family:Poppins,sans-serif;
background:var(--dark);
color:white;
overflow-x:hidden;
position:relative;

}

.bg-grid{

position:fixed;
inset:0;

background-image:

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

background-size:45px 45px;

z-index:-2;

}

.gradient-circle{

position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.25;

}

.circle1{

width:450px;
height:450px;
background:var(--primary);

top:-150px;
left:-120px;

}

.circle2{

width:400px;
height:400px;
background:var(--secondary);

bottom:-150px;
right:-120px;

}

.hero{

min-height:100vh;

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

padding:80px 8%;

gap:80px;

flex-wrap:wrap;

}

.content{

max-width:600px;
animation:fadeUp .9s ease;

}

.logo{

width:260px;
margin-bottom:30px;

}

.badge{

display:inline-block;

padding:10px 18px;

background:rgba(74,117,178,.15);

border:1px solid rgba(74,117,178,.4);

border-radius:50px;

margin-bottom:25px;

font-size:.95rem;

}

h1{

font-size:3.4rem;
line-height:1.1;
margin-bottom:20px;

}

.subtitle{

font-size:1.1rem;
line-height:1.8;
opacity:.8;
margin-bottom:40px;

}

.loader-area{

margin-bottom:40px;

}

.progress{

height:10px;

background:#233149;

border-radius:30px;

overflow:hidden;

margin-top:18px;

}

.progress-bar{

height:100%;
width:35%;

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

animation:loading 2.5s infinite;

}

.gear{

font-size:45px;

display:inline-block;

animation:spin 5s linear infinite;

}

.btn{

display:inline-flex;

padding:16px 38px;

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

text-decoration:none;

color:white;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn:hover{

transform:translateY(-4px);
box-shadow:0 15px 40px rgba(74,117,178,.4);

}

.illustration{

width:450px;
animation:fadeUp 1.2s ease;

}

svg{

width:100%;

}

.bg-circle{

fill:#17263d;

}

.machine{

fill:var(--primary);

}

.stroke{

stroke:white;
stroke-width:8;
stroke-linecap:round;

}

.gear-svg{

fill:var(--secondary);

animation:gearRotate 6s linear infinite;

transform-origin:center;

}

.contact{

padding:40px 8% 80px;

}

.card{

max-width:900px;

margin:auto;

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

backdrop-filter:blur(12px);

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

padding:40px;

border-radius:24px;

}

.card h2{

margin-bottom:30px;

font-size:2rem;

}

.item{

display:flex;
align-items:flex-start;

gap:18px;

margin-bottom:22px;

}

.item span{

font-size:26px;

}

.item a,
.item p{

color:white;
text-decoration:none;
opacity:.9;
line-height:1.8;

}

footer{

padding:25px;

text-align:center;

opacity:.65;

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

}

@keyframes loading{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(400%);

}

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes gearRotate{

100%{

transform:rotate(360deg);

}

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@media(max-width:991px){

.hero{

text-align:center;

}

.logo{

margin:auto auto 30px;

}

}

@media(max-width:768px){

h1{

font-size:2.5rem;

}

.subtitle{

font-size:1rem;

}

.illustration{

width:320px;

}

.card{

padding:30px;

}

}

@media(max-width:480px){

h1{

font-size:2rem;

}

.logo{

width:190px;

}

.btn{

width:100%;
justify-content:center;

}

}