*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
scroll-behavior:smooth;
}
html, body{ width:100%; overflow-x:hidden; }

html{
    scroll-behavior: smooth;
}
:root{
--accent:#914ce8;
--accent-glow:rgba(145,76,232,.45);
}

body{
background:#050505;
color:#fff;
overflow-x:hidden;
position:relative;
}

/* CYBER GRID */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
    linear-gradient(rgba(125, 232, 76, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,76,232,.03) 1px, transparent 1px);
    background-size:40px 40px;
    pointer-events:none;
    z-index:0;
    }

/* PARTICLES */

#particles-js{
position:fixed;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
background:#050505;
background-color:#050505;
overflow:hidden;
}

#particles-js::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background-image:
radial-gradient(circle,#ffffff 1px,transparent 2px),
radial-gradient(circle,#ffffff 1.5px,transparent 1.5px),
radial-gradient(circle,#eeeeee 1px,transparent 1px);
background-size:400px 400px,350px 350px,500px 500px;
background-position:0 0,150px 250px,300px 80px;
opacity:.3;
z-index:0;
animation:slow-stars 120s linear infinite;
pointer-events:none;
}

@keyframes slow-stars{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

#particles-js canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
pointer-events:auto !important;
}

/* HEADER */

header{
position:relative;
z-index:1000;
pointer-events:none;
}

.hero{
position:relative;
z-index:2;
pointer-events:none;
}

.hero a,
.hero button,
header a,
header button,
.navbar,
.language-switcher,

.why-title,
.why-grid
{
pointer-events:auto !important;

}

/* COOKIE */

.cookie-container{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
width:92%;
max-width:600px;
background:#111111;
color:#ffffff;
padding:15px 25px;
box-shadow:
0 4px 30px rgba(0,0,0,.9),
0 0 30px rgba(145,76,232,.12);
border-radius:10px;
border:1px solid rgba(145,76,232,.15);
display:none;
justify-content:space-between;
align-items:center;
z-index:999999 !important;
font-family:Arial,sans-serif;
box-sizing:border-box;
}

.cookie-container.show{
display:flex !important;
}

.cookie-container p{
font-size:13px;
margin:0;
padding-right:15px;
line-height:1.4;
}

.cookie-container button{
background:linear-gradient(135deg,#914ce8,#6d30b8);
color:white;
border:none;
padding:10px 24px;
cursor:pointer;
font-size:13px;
font-weight:bold;
border-radius:6px;
transition:.3s;
flex-shrink:0;
}

.cookie-container button:hover{
transform:translateY(-2px);
box-shadow:0 0 18px rgba(145,76,232,.35);
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
position:fixed;
width:100%;
top:0;
left:0;
background:rgba(0,0,0,.82);
backdrop-filter:blur(12px);
z-index:9999 !important;
border-bottom:1px solid rgba(145,76,232,.25);
box-shadow:0 0 25px rgba(145,76,232,.08);
box-sizing:border-box;
pointer-events:auto !important;
}


.navbar::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:linear-gradient(
90deg,
transparent,
rgba(145,76,232,.6),
transparent
);
opacity:.7;
}


.logo-container{
display:flex;
align-items:center;
gap:15px;
text-decoration:none;
    cursor:pointer;
}

.nav-logo{
height:50px;
width:auto;
filter:
drop-shadow(0 0 12px rgba(145,76,232,.18));
}


.neon-box{
    position:relative;
    overflow:hidden;

    }
    
    .neon-box::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(
    135deg,
    transparent,
    #914ce8,
    transparent
    );
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    
    mask-composite:exclude;
    animation:borderRotate 4s linear infinite;
    pointer-events:none;
    }
    
    @keyframes borderRotate{
    0%{
    transform:rotate(0deg);
    }
    100%{
    transform:rotate(360deg);
    }
    }


.logo-text{
font-size:1.4rem;
font-weight:700;
letter-spacing:2px;
color:#d7d7d7;
transition:.3s;
}

.logo-text:hover{
color:var(--accent);
text-shadow:0 0 12px var(--accent-glow);
}

/* LANGUAGE */

.language-switcher button{
background:none;
border:1px solid #444;
color:white;
padding:8px 14px;
margin-left:8px;
cursor:pointer;
border-radius:6px;
transition:.3s;
}

.language-switcher button:hover{
border-color:#914ce8;
color:#914ce8;
box-shadow:0 0 12px rgba(145,76,232,.25);
}

/* HERO */

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px 50px;
}

.hero-logo{
max-width:450px;
width:90%;
margin-bottom:35px;
animation:float 5s ease-in-out infinite;


}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

.hero h1{
font-size:3rem;
max-width:900px;
margin-bottom:20px;
background:linear-gradient(90deg,#ffffff,#b68cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text; color:transparent;
}


.hero p{
font-size:1.2rem;
color:#c9c9c9;
max-width:700px;
margin-bottom:40px;
line-height:1.7;
text-shadow:
0 0 10px rgba(145,76,232,.08);
}


/* BUTTON */

.btn{
display:inline-block;
padding:16px 40px;
background:linear-gradient(135deg,#914ce8,#6d30b8);
color:white;
font-weight:700;
text-decoration:none;
border-radius:50px;
transition:.35s;
border:1px solid rgba(145,76,232,.35);
box-shadow:
0 0 15px rgba(145,76,232,.22),
0 0 45px rgba(145,76,232,.10);
position:relative;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
transition:.7s;
}

.btn:hover::before{
left:100%;
}

.btn:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:
0 0 30px rgba(145,76,232,.45),
0 0 60px rgba(145,76,232,.22);
}

/* SECTIONS */

section{
padding:100px 8%;
position:relative;
z-index:2;
}


section h2{
    text-align:center;
    font-size:2.5rem;
    margin-bottom:60px;
    position:relative;
    display:block;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    
    }


section h2::after{
content:"";
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
width:80px;
height:3px;
background:linear-gradient(
90deg,
transparent,
#914ce8,
transparent
);
border-radius:10px;
box-shadow:0 0 15px rgba(145,76,232,.45);
}

/* SERVICES */

#service1-text {
    white-space: pre-line;
}

.services{
background:#090909;
position:relative;
overflow:hidden;
}

.services::before{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:radial-gradient(
circle,
rgba(145,76,232,.08),
transparent 70%
);
pointer-events:none;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
gap:30px;
}

.service-card{
background:rgba(17,17,17,.78);
border:2px solid rgba(146, 76, 232, 0.466); 
padding:30px;
border-radius:18px;
transition:.35s;
position:relative;
overflow:hidden;
backdrop-filter:blur(10px);
}

.service-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(145,76,232,.08),
transparent
);
transition:.6s;
}

.service-card:hover::before{
left:120%;
}

.service-card:hover{
transform:translateY(-10px);
border-color:rgba(145,76,232,.45);
box-shadow:
0 0 30px rgba(145,76,232,.16),
0 0 60px rgba(145,76,232,.08);
}

.service-card h3{
margin-bottom:15px;
color:#c89cff;
transition:.3s;
}

.service-card:hover h3{
text-shadow:
0 0 10px rgba(145,76,232,.45);
}


.service-card p{
color:#ebebeb;
white-space: pre-line;
}


/* ABOUT */

.about{
max-width:1000px;
margin:auto;
text-align:center;
pointer-events:none;
}

.about p{
font-size:1.15rem;
color:#cfcfcf;
line-height:1.8;
}

.legal-page{
    padding: 10%;
    max-width:1000px;
    margin:auto;
    text-align:left;
    pointer-events:auto !important;
    position:relative;
    
}

.legal-page p{
    font-size:1.15rem;
    color:#cfcfcf;
    line-height:1.8;
    pointer-events:auto !important;
    position:relative;
    
}



/* WHY */

.why-us{
   
    pointer-events:none;
}

    


.why-grid{
display:grid;
/*grid-template-columns:repeat(auto-fit,minmax(220px,1fr));*/
grid-template-columns:repeat(3,1fr);
gap:25px;
text-align:center;

}

.why-grid div{

padding:25px;
border-radius:12px;
border:1px solid rgba(145,76,232,.12);
font-size:1.1rem;
transition:.3s;
pointer-events:auto !important;

}

.why-grid div:hover{
transform:translateY(-6px);
border-color:#914ce8;
box-shadow:0 0 20px rgba(145,76,232,.15);
}

.glass{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    
    border:1px solid rgba(255,255,255,.08);
    
    box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 25px rgba(184, 184, 184, 0.08);
    
    border-radius:18px;
}

.why-grid .glass:last-child{
        grid-column: 2;
}


.pricing-preview{
    padding:80px 20px;
    text-align:center;
}

.pricing-card{
    max-width:800px;
    margin:0 auto;
    padding:50px;
}

.pricing-card h2{
    margin-bottom:15px;
}

.pricing-card p{
    font-size:1.15rem;
    line-height:2;
    color:#d8d8d8;
    margin-bottom:30px;
}
.pricing-card h3{
    margin-bottom:15px;
    margin-top:25px;
}

.pricing-card hr{
    margin:10px 0;
}


/* CONTACT */

.contact{
background:#090909;
position:relative;
overflow:hidden;
}



.contact::before{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:radial-gradient(
circle,
rgba(145,76,232,.08),
transparent 70%
);
pointer-events:none;
}



.contact-info{
    max-width:250px;
    margin:0 auto;
    text-align:left;
    margin-bottom:50px;
}

.contact-info p{
    display:flex;
    align-items:center;
    gap:22px;
    margin:15px 0;
}

.bi-envelope{
    color:#914ce8;
    width:22px;
    height:22px;
    margin-right:10px;
    vertical-align:-4px;
}
.bi-instagram{
    color:#914ce8;
    width:22px;
    height:22px;
    margin-right:10px;
    vertical-align:-4px;
}
.bi-telephone{
    color:#914ce8;
    width:22px;
    height:22px;
    margin-right:10px;
    vertical-align:-4px;
}
.bi-geo-alt-fill{
    color:#914ce8;
    width:22px;
    height:22px;
    margin-right:10px;
    vertical-align:-4px;
}



.contact-info p{
margin:15px 0;
font-size:1.1rem;
}

.contact-info a{
color:white;
text-decoration:none;
transition:.3s;

pointer-events:auto !important;
}

.contact-info a:hover{
color:#914ce8;
text-shadow:0 0 12px rgba(145,76,232,.4);
}

/* FORM */

.contact-form{
max-width:800px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
padding:16px;
background:#111;
border:1px solid #333;
color:white;
border-radius:10px;
font-size:1rem;
transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
outline:none;
border-color:#914ce8;
box-shadow:
0 0 15px rgba(145,76,232,.25);
background:#0f0f0f;
}

.contact-form textarea{
min-height:180px;
resize:vertical;
}

.contact-form button{
padding:18px;
border:none;
background:linear-gradient(135deg,#914ce8,#6d30b8);
color:white;
font-weight:700;
border-radius:10px;
cursor:pointer;
transition:.3s;
pointer-events:auto !important;
}

.contact-form button:hover{
transform:translateY(-2px);
box-shadow:0 0 25px rgba(145,76,232,.25);
}


.contact-form{
    position:relative;
    }
    
    .contact-form::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
    linear-gradient(
    135deg,
    rgba(145,76,232,.15),
    transparent,
    rgba(145,76,232,.15)
    );
    border-radius:14px;
    z-index:-1;
    filter:blur(20px);
    opacity:.5;
    }
    


.user-sub-field{
display:none !important;
visibility:hidden;
}

/* MAP */

.map-section{
padding:0;
position:relative;
z-index:2;
}

.map-section iframe{
width:100%;
height:450px;
border:none;
filter:grayscale(100%);
pointer-events:auto !important;
}

/* LINKS */

.email-link{
    color:white;
text-decoration:none;
transition:color .3s ease;

}

.email-link:hover{
    color:#914ce8;
text-decoration:underline;
}

a[href^="tel:"]{
color:white;
text-decoration:none;
}

a[href^="tel:"]:hover{
    color:#914ce8;
text-decoration:underline;
}

.instagram-btn{
    margin-top:20px;
    display:inline-block;
    }

    .language-switcher{
        display:flex;
        align-items:center;
        gap:10px;
    }
    

    .social-icon svg{
        display:flex;
        align-items:center;
        justify-content:center;
        width:40px;
        height:40px;
        color:#914ce8;
        text-decoration:none;
        transition:.3s;
    }
    
    .social-icon svg:hover{
        color:white;
        transform:translateY(-2px);
    
        text-shadow:0 0 12px rgba(234, 229, 240, 0.849);
    }
    .social-icon svg{
        width:24px;
        height:24px;
        
    }

/* FOOTER */


footer{
padding:45px 35px;
text-align:center;
border-top:1px solid rgba(145,76,232,.15);
background:
linear-gradient(
180deg,
#050505,
#090909
);
color:#888;
box-shadow:
0 -10px 40px rgba(146, 76, 232, 0.527);
position:relative;
z-index:2;
overflow:hidden;
}

footer::before{
content:"";
position:absolute;
top:-150px;
left:50%;
transform:translateX(-50%);
width:400px;
height:400px;
background:
radial-gradient(
circle,
rgba(146, 76, 232, 0.103),
transparent 70%
);
pointer-events:none;
}


.payment-info{
color:#bdbdbd;
font-size:.95rem;
line-height:1.8;
}

.footer-links{
margin-top:15px;
}

.footer-links a{
color:#c89cff;
text-decoration:none;
transition:.3s;
pointer-events:auto !important;
}

.footer-links a:hover{
text-decoration:underline;
color:white;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(
180deg,
#914ce8,
#5c2ca0
);
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#a96cff;
}





/* TECH LINES */

.tech-line{
position:absolute;
width:300px;
height:2px;
background:linear-gradient(
90deg,
transparent,
#914ce8,
transparent
);
opacity:.5;
filter:blur(.5px);
animation:techMove 6s linear infinite;
z-index: -3;
}

@keyframes techMove{
0%{
transform:translateX(-200px);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:translateX(120vw);
opacity:0;
}
}

/* MOBILE */

@media(max-width:768px){

.navbar{
padding:15px 20px;
flex-direction:column;
gap:12px;
}

.logo-container{
justify-content:center;
width:100%;
}

.hero{
padding:
190px 20px 70px;
align-items:center;
justify-content:center;
text-align:center;
}

.hero-logo{
max-width:220px;
width:70%;
margin:
0 auto 30px auto;
display:block;
}

.hero h1{
font-size:1.9rem;
line-height:1.25;
max-width:100%;
word-break:break-word;
}

.hero p{
font-size:1rem;
line-height:1.7;
padding:0 5px;
max-width:100%;
}

.btn{
width:100%;
max-width:280px;
text-align:center;
}

section{
padding:70px 20px;
}

section h2{
font-size:2rem;
text-align:center;
}

.service-grid{
grid-template-columns:1fr;
}

.service-card{
width:100%;
min-width:0;
}

.why-grid{
    grid-template-columns: repeat(2,1fr);
    gap:15px;
}
.why-grid .glass{
    width:100%;
    max-width:none;
}
.why-grid div{
    padding: 20px;
    min-height: auto;
    font-size: 1rem;
}
#why-title{
    font-size: 2rem;
    line-height: 1.2;
}
.why-grid .glass:last-child{
    grid-column: 1 / -1;
    max-width: 280px;
    margin: 0 auto;
}

.contact-form{
width:100%;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
width:100%;
}

.map-section iframe{
height:320px;
}

/*Privacy and terms pages*/

.legal-page{
    padding:140px 20px 60px;
    max-width:100%;
}

.legal-page h1{
    font-size:2rem;
    text-align:center;
    margin-bottom:30px;
}

.legal-page p{
    font-size:1rem;
    line-height:1.8;
}

.legal-page .btn{
    display:block;
    margin:30px auto 0;
    text-align:center;
}

.email-link{
    word-break:break-word;
}

}