:root {

    --bg-dark: #070b17;
    --bg-card: rgba(255,255,255,0.06);

    --primary: #00a8ff;
    --secondary: #0066ff;

    --text: #ffffff;
    --text-muted: #b7c3d6;

    --border:
    rgba(255,255,255,0.12);

    --shadow:
    0 20px 50px rgba(0,0,0,.35);

}



/* =====================
   RESET
===================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    var(--bg-dark);

    color:
    var(--text);

    line-height:1.6;

}




a {

    color:inherit;

    text-decoration:none;

}



.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}






/* =====================
HEADER
===================== */


.header {

    position:fixed;

    width:100%;

    top:0;

    z-index:1000;

    background:
    rgba(7,11,23,.75);

    backdrop-filter:
    blur(15px);

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

}



.nav-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:1px;

}


.logo span {

    color:
    var(--primary);

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:
    var(--text-muted);

    transition:.3s;

}



nav a:hover {

    color:
    var(--primary);

}






.mobile-menu {

    display:none;

    background:none;

    border:0;

    color:white;

    font-size:30px;

}







/* =====================
HERO
===================== */


.hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}



.hero-background {


position:absolute;

inset:0;


background:

radial-gradient(
circle at top right,
rgba(0,168,255,.25),
transparent 40%
),


radial-gradient(
circle at bottom left,
rgba(0,102,255,.2),
transparent 40%
);


}



.hero-content {


display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

position:relative;

z-index:2;


}




.hero-text {


max-width:650px;


}



.hero h1 {


font-size:64px;

line-height:1.1;

margin-bottom:30px;


}



.hero h1 span {


color:
var(--primary);


}



.hero p {


font-size:20px;

color:
var(--text-muted);

margin-bottom:40px;


}





.btn-primary {


display:inline-block;

padding:15px 35px;

border-radius:50px;

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

font-weight:700;

transition:.3s;


}



.btn-primary:hover {


transform:
translateY(-5px);

box-shadow:
0 10px 30px rgba(0,168,255,.4);


}




.btn-secondary {


display:inline-block;

margin-left:15px;

padding:15px 35px;

border-radius:50px;

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


}



.btn-secondary:hover {


border-color:
var(--primary);


}






/* =====================
TECH CIRCLE
===================== */


.tech-circle {


width:360px;

height:360px;

border-radius:50%;

border:

1px solid rgba(0,168,255,.4);

display:flex;

align-items:center;

justify-content:center;

position:relative;


}


.tech-circle div {


position:absolute;

font-size:45px;


}



.tech-circle div:nth-child(1){

top:20px;

}



.tech-circle div:nth-child(2){

right:30px;

}



.tech-circle div:nth-child(3){

bottom:30px;

}



.tech-circle div:nth-child(4){

left:30px;

}








/* =====================
SECTIONS
===================== */


section {


padding:100px 0;


}



h2 {


text-align:center;

font-size:42px;

margin-bottom:20px;


}



.section-intro {


text-align:center;

max-width:800px;

margin:
0 auto 50px;

color:
var(--text-muted);

}







/* =====================
CARDS
===================== */


.cards {


display:grid;

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

gap:25px;


}




.card,
.service-card {


background:
var(--bg-card);


border:

1px solid var(--border);


border-radius:25px;

padding:35px;

backdrop-filter:

blur(15px);


transition:.4s;


}



.card:hover,
.service-card:hover {


transform:
translateY(-10px);


border-color:

var(--primary);


}





.icon,
.service-icon {


font-size:45px;

margin-bottom:20px;


}





.service-grid {


display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;


}





.service-card h3 {


font-size:24px;

margin-bottom:15px;


}




.service-card p {


color:
var(--text-muted);


}





.service-card ul {


margin-top:20px;

padding-left:20px;

color:
var(--text-muted);


}







/* =====================
CONSULTING
===================== */


.consulting-box {


background:
linear-gradient(
135deg,
rgba(0,168,255,.15),
rgba(0,102,255,.1)
);


padding:60px;

border-radius:30px;

text-align:center;


}





.stats {


display:flex;

justify-content:center;

gap:80px;

margin-top:40px;


}



.stats strong {


font-size:45px;

color:
var(--primary);


}






/* =====================
FAQ
===================== */


.faq-item {


margin-bottom:25px;

padding:30px;

background:
var(--bg-card);

border-radius:20px;


}



.faq-item p {


color:
var(--text-muted);

}








/* =====================
CONTACT
===================== */


.contact-cta {


text-align:center;


background:

linear-gradient(
135deg,
#0066ff,
#00a8ff
);


}





/* =====================
FOOTER
===================== */


.footer {


background:#030611;

padding-top:70px;


}



.footer-grid {


display:grid;

grid-template-columns:

repeat(4,1fr);

gap:40px;


}



.footer h3 {


margin-bottom:20px;


}



.footer a {


display:block;

color:
var(--text-muted);

margin-bottom:10px;


}




.footer-bottom {


margin-top:50px;

padding:25px;

text-align:center;

border-top:

1px solid var(--border);

color:
var(--text-muted);


}






/* =====================
COOKIE
===================== */


.cookie-banner {


position:fixed;

bottom:20px;

left:20px;

right:20px;


background:#101827;


border:

1px solid var(--border);


padding:25px;

border-radius:20px;


display:flex;

justify-content:space-between;

align-items:center;


z-index:9999;


}




.cookie-buttons button {


padding:10px 20px;

border-radius:20px;

border:0;

cursor:pointer;

margin-left:10px;


}




#cookie-accept {


background:
var(--primary);

color:white;


}



#cookie-reject {


background:#333;

color:white;


}