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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, sans-serif;
    color:#eaf3ff;
    background:
        radial-gradient(circle at 15% 15%, rgba(20,120,255,.18) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 25%, rgba(70,180,255,.15) 0 1px, transparent 2px),
        radial-gradient(circle at 55% 75%, rgba(20,120,255,.12) 0 1px, transparent 2px),
        linear-gradient(135deg,#030816,#07152b 48%,#02050d);
    background-size:180px 180px,240px 240px,210px 210px,100% 100%;
    line-height:1.6;
}

.container{
    width:90%;
    max-width:1150px;
    margin:auto;
}

/* HEADER */

.header{
    background:rgba(3,8,22,.88);
    padding:16px 0;
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(77,170,255,.15);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 15px rgba(0,0,0,.06);
}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#eef7ff;
    font-size:22px;
    font-weight:bold;
}

.brand b{
    color:#0d6efd;
}

.logo-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0d6efd,#19a7ff);
    color:#fff;
    border-radius:14px;
    font-size:21px;
    box-shadow:0 0 22px rgba(13,110,253,.42);
}

nav{
    display:flex;
    gap:25px;
}

nav a{
    color:#dcecff;
    text-decoration:none;
    font-weight:600;
}

nav a:hover{
    color:#0d6efd;
}

/* HERO */

.hero{
    min-height:600px;
    display:flex;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 35%, rgba(0,140,255,.20), transparent 28%),
        radial-gradient(circle at 82% 60%, rgba(0,92,255,.16), transparent 30%),
        linear-gradient(135deg,#020712,#071a35 52%,#02050c);
}

.hero-content{
    max-width:850px;
}

.hero-badge{
    display:inline-block;
    padding:8px 16px;
    background:rgba(13,110,253,.12);
    color:#69c7ff;
    border:1px solid rgba(77,180,255,.25);
    box-shadow:0 0 25px rgba(13,110,253,.12);
    border-radius:30px;
    font-weight:bold;
    margin-bottom:20px;
}

.hero h1{
    font-size:52px;
    line-height:1.15;
    margin-bottom:22px;
}

.hero h1 span{
    color:#0d6efd;
}

.hero p{
    max-width:700px;
    margin:auto;
    color:#b8c9dc;
    font-size:19px;
}

.hero-buttons{
    margin-top:32px;
    display:flex;
    justify-content:center;
    gap:15px;
}

.btn{
    display:inline-block;
    padding:13px 28px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.primary-btn{
    background:linear-gradient(135deg,#0868ff,#12a5ff);
    color:#fff;
}

.primary-btn:hover{
    background:#0957c7;
    transform:translateY(-2px);
}

.secondary-btn{
    background:rgba(255,255,255,.04);
    color:#69c7ff;
    border:2px solid #168cff;
}

.secondary-btn:hover{
    background:linear-gradient(135deg,#0868ff,#12a5ff);
    color:#fff;
}

/* SECTIONS */

.section{
    padding:90px 0;
}

.section-heading{
    text-align:center;
    margin-bottom:45px;
}

.section-heading span{
    color:#0d6efd;
    font-size:13px;
    font-weight:bold;
    letter-spacing:2px;
}

.section-heading h2{
    font-size:38px;
    margin:8px 0;
}

.section-heading p{
    color:#a9bdd3;
}

/* SERVICES */

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.service-card{
    background:rgba(8,20,40,.78);
    padding:30px;
    border:1px solid rgba(77,170,255,.13);
    color:#eaf3ff;
    border-radius:15px;
    box-shadow:0 5px 25px rgba(0,0,0,.06);
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-7px);
    box-shadow:0 12px 30px rgba(13,110,253,.12);
}

.service-icon{
    font-size:35px;
    margin-bottom:15px;
}

.service-card h3{
    margin-bottom:10px;
}

.service-card p{
    color:#a9bdd3;
}

/* CONTACT */

.contact-section{
    padding:80px 20px;
    text-align:center;
    background:linear-gradient(135deg,#0868ff,#12a5ff);
    color:#fff;
}

.contact-section h2{
    font-size:36px;
    margin-bottom:10px;
}

.contact-section p{
    margin-bottom:25px;
}

.contact-section .primary-btn{
    background:#fff;
    color:#0d6efd;
}

/* FOOTER */

footer{
    background:#01040a;
    color:#fff;
    text-align:center;
    padding:25px;
}

/* MOBILE */

@media(max-width:768px){

    .nav-container{
        flex-direction:column;
        gap:15px;
    }

    nav{
        gap:14px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        min-height:520px;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

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

    .section-heading h2{
        font-size:32px;
    }
}

/* ORIGINAL CSS-ONLY TECH BACKGROUND */
.hero::before,
.hero::after{
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;
}
.hero::before{
    background:
      linear-gradient(115deg, transparent 49.7%, rgba(65,170,255,.08) 50%, transparent 50.3%),
      linear-gradient(25deg, transparent 49.7%, rgba(65,170,255,.06) 50%, transparent 50.3%);
    background-size:180px 180px,220px 220px;
    transform:rotate(-8deg);
}
.hero::after{
    background:
      radial-gradient(circle at 20% 25%, #69c7ff 0 1px, transparent 2px),
      radial-gradient(circle at 70% 65%, #168cff 0 1px, transparent 2px),
      radial-gradient(circle at 88% 20%, #69c7ff 0 1px, transparent 2px);
    background-size:260px 260px,320px 320px,210px 210px;
    opacity:.55;
}
.hero-content{
    position:relative;
    z-index:2;
}
.section{
    background:rgba(2,8,18,.72);
}
.contact-section{
    background:linear-gradient(135deg,#064fc7,#087fe0);
}