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

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:'Inter',sans-serif;
            background:#050816;
            color:white;
            line-height:1.6;
            overflow-x:hidden;
        }
        :root{
    --card-bg:
        linear-gradient(
            180deg,
            rgba(18,24,39,0.92),
            rgba(10,14,28,0.96)
        );

    --card-border:
        1px solid rgba(255,255,255,0.08);

    --card-border-active:
        1px solid rgba(57,232,255,0.45);

    --card-shadow:
        0 20px 60px rgba(0,0,0,0.22);

    --card-shadow-active:
        0 20px 60px rgba(57,232,255,0.10);

    --card-radius:30px;
}
        .container{
            width:100%;
            max-width:1300px;
            margin:auto;
            padding:0 24px;
        }

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,0.08);

    background:
    linear-gradient(
        90deg,
        rgba(5,8,22,0.96) 0%,
        rgba(5,8,22,0.90) 32%,
        rgba(8,14,32,0.72) 58%,
        rgba(15,32,55,0.55) 100%
    ),
    url("../images/background.jpg");

    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

.hero::after{
    content:'';
    position:absolute;
    right:-180px;
    top:50%;
    transform:translateY(-50%);

    width:700px;
    height:700px;

    background:radial-gradient(
        circle,
        rgba(57,232,255,0.12) 0%,
        rgba(57,232,255,0.04) 40%,
        transparent 70%
    );

    pointer-events:none;
}

        .hero-grid{
            position:relative;
            z-index:2;
            display:grid;
            grid-template-columns:1.2fr 0.8fr;
            gap:80px;
            align-items:center;
        }

        .badge{
            display:inline-flex;
            padding:12px 18px;
            border-radius:999px;
            border:1px solid rgba(0,255,255,0.25);
            background:rgba(0,255,255,0.08);
            color:#6ee7ff;
            font-size:14px;
            margin-bottom:28px;
        }

        h1{
            font-size:72px;
            line-height:1.05;
            font-weight:900;
            margin-bottom:28px;
            letter-spacing:-2px;
            text-shadow: 0 4px 20px rgba(0,0,0,0.35);
        }

        h1 span{
            color:#37e8ff;
            display:block;
        }

        .hero-text{
            font-size:20px;
            color:#b5bfd3;
            margin-bottom:40px;
            max-width:700px;
        }
        .buttons{
  	   display:flex;
           flex-wrap:wrap;
           gap:14px;
           align-items:center;
	}

	.buttons .btn{
	    flex:0 0 auto;
  	}
        .btn{
            padding:16px 22px;
            border-radius:18px;
            text-decoration:none;
            font-weight:700;
            transition:0.3s;
            display:inline-flex;
            align-items:center;
            justify-content:center;

            white-space:nowrap;
        }

        .btn-primary{
            background:#39e8ff;
            color:#02131a;
        }

        .btn-primary:hover{
            transform:translateY(-3px);
            box-shadow:0 20px 50px rgba(57,232,255,0.25);
        }

        .btn-secondary{
            border:1px solid rgba(255,255,255,0.15);
            color:white;
            background:rgba(255,255,255,0.03);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,0.08);
        }

.glass-box{
    background:rgba(10,14,28,0.78);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 80px rgba(0,0,0,0.45),
        0 0 50px rgba(57,232,255,0.08);

    border-radius:32px;
}
        .stats-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:18px;
        }

        .stat-card{
            background:#0d1325;
            border-radius:22px;
            padding:24px;
            border:1px solid rgba(255,255,255,0.05);
        }

        .stat-card.large{
            grid-column:span 2;
        }

        .stat-number{
            font-size:44px;
            font-weight:900;
            color:#39e8ff;
        }

        .stat-label{
            color:#9aa6c0;
            margin-top:10px;
        }

        section{
            padding:120px 0;
        }

        .section-title{
            font-size:54px;
            line-height:1.1;
            font-weight:900;
            margin-bottom:24px;
        }

        .section-subtitle{
            color:#39e8ff;
            text-transform:uppercase;
            letter-spacing:3px;
            font-size:13px;
            margin-bottom:18px;
            font-weight:700;
        }

        .section-text{
            color:#9aa6c0;
            font-size:19px;
            max-width:850px;
        }

        .cards{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:30px;
            margin-top:70px;
            align-items:stretch;
        }

        .card{
    position:relative;

    background:var(--card-bg);

    border:var(--card-border);

    border-radius:var(--card-radius);

    padding:36px;

    transition:0.35s;

    display:flex;
    flex-direction:column;

    box-shadow:var(--card-shadow);

    backdrop-filter:blur(12px);
}

        .card:hover{
            transform:translateY(-6px);
            border-color:rgba(57,232,255,0.35);
        }
.card.featured{
    border:var(--card-border-active);

    box-shadow:
        0 0 0 1px rgba(57,232,255,0.12),
        var(--card-shadow-active);

    transform:translateY(-8px) scale(1.015);
}

        .card-top{
            color:#39e8ff;
            text-transform:uppercase;
            letter-spacing:2px;
            font-size:13px;
            margin-bottom:14px;
            font-weight:700;
        }

        .card h3{
            margin-bottom:30px;
            font-size:28px;
            line-height:1.2;
            min-height:70px;
        }

        .specs{
            list-style:none;
            margin-bottom:30px;
        }

        .specs li{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:16px;
            color:#d3d9e7;
        }

        .specs li::before{
            content:'';
            width:10px;
            height:10px;
            border-radius:50%;
            background:#39e8ff;
            flex-shrink:0;
        }

        .usage{
            background:rgba(255,255,255,0.03);
            border-radius:20px;
            padding:22px;
            border:1px solid rgba(255,255,255,0.05);
            color:#bfc8d9;
            margin-top:auto;
        }

        .usage strong{
            display:block;
            margin-bottom:10px;
            color:white;
        }

        .features{
            background:rgba(255,255,255,0.03);
            border-top:1px solid rgba(255,255,255,0.08);
            border-bottom:1px solid rgba(255,255,255,0.08);
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:28px;
            margin-top:70px;
        }

.feature-box{
    background:var(--card-bg);

    border:var(--card-border);

    border-radius:var(--card-radius);

    padding:34px;

    box-shadow:var(--card-shadow);

    backdrop-filter:blur(12px);

    transition:0.3s;
}

.feature-box:hover{
    transform:translateY(-6px);

    border-color:rgba(57,232,255,0.30);
}

        .feature-number{
            font-size:54px;
            font-weight:900;
            color:#39e8ff;
            margin-bottom:20px;
        }

        .feature-box h4{
            font-size:24px;
            margin-bottom:14px;
        }

        .feature-box p{
            color:#a8b3c7;
        }

        .cta{
            position:relative;
            overflow:hidden;
        }

        .cta::before{
            content:'';
            position:absolute;
            inset:0;
            background:linear-gradient(90deg, rgba(0,255,255,0.08), rgba(0,140,255,0.08));
        }

        .cta-content{
            position:relative;
            z-index:2;
            text-align:center;
            max-width:950px;
            margin:auto;
        }

        footer{
            padding:40px 0;
            border-top:1px solid rgba(255,255,255,0.08);
        }

        .footer-content{
            display:flex;
            justify-content:space-between;
            gap:20px;
            color:#7d879c;
            flex-wrap:wrap;
        }

        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:20px;
        }

        @media(max-width:1100px){
            .hero-grid,
            .cards,
            .feature-grid{
                grid-template-columns:1fr;
            }

            h1{
                font-size:52px;
            }

            .section-title{
                font-size:42px;
            }
        }

        @media(max-width:700px){
            section{
                padding:80px 0;
            }

            h1{
                font-size:42px;
            }

            .section-title{
                font-size:34px;
            }

            .hero-text,
            .section-text{
                font-size:17px;
            }

            .glass-box{
                padding:24px;
            }
            .btn{
                text-align:center;
            }
            .buttons{
             	flex-direction:row;
          	flex-wrap:wrap;
          	justify-content:flex-start;
            }

            .buttons .btn{
         	width:auto;
            }

         }
/* SERVICES CSS */
.services-section{
    position:relative;
}

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

.service-card{
    background:var(--card-bg);

    border:var(--card-border);

    border-radius:var(--card-radius);

    padding:34px;

    transition:0.3s;

    box-shadow:var(--card-shadow);

    backdrop-filter:blur(12px);
}

.service-card:hover{
    transform:translateY(-6px);
    border-color:rgba(57,232,255,0.35);
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

.service-icon{
    font-size:42px;
    margin-bottom:22px;
}

.service-card h3{
    font-size:28px;
    margin-bottom:16px;
}

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

.services-bottom-text{
    margin-top:60px;
    text-align:center;
    font-size:22px;
    color:#d7e2f2;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.7;
}

@media(max-width:1100px){

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

}
.feature-icon{
    font-size:42px;
    margin-bottom:14px;
    display:flex;
    justify-content:center;
}
.price-badge{
    display:inline-flex;
    padding:10px 16px;
    border-radius:14px;
    background:rgba(57,232,255,0.12);
    border:1px solid rgba(57,232,255,0.25);
    color:#6ee7ff;
    font-weight:700;
    margin-bottom:24px;
    margin-top:20px;
    align-self:flex-start;
}
.pricing-note{
    margin-top:50px;
    text-align:center;
    color:#9aa6c0;
    font-size:18px;
    line-height:1.8;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

/* COMPARISON */

.comparison-section{
    padding:120px 0;
}

.comparison-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:60px;
}

.comparison-box{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:30px;
    padding:40px;
}

.comparison-box.active{
    border-color:rgba(57,232,255,0.35);
    box-shadow:0 20px 60px rgba(57,232,255,0.08);
}

.comparison-box h3{
    font-size:32px;
    margin-bottom:28px;
}

.comparison-box ul{
    list-style:none;
}

.comparison-box li{
    margin-bottom:18px;
    color:#c6d0e3;
    display:flex;
    align-items:center;
    gap:12px;
}

.comparison-box li::before{
    content:'✓';
    color:#39e8ff;
    font-weight:900;
}

.card-button{
    margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;

    padding:18px 22px;
    border-radius:18px;

    background:#39e8ff;
    color:#02131a;

    text-decoration:none;
    font-weight:700;

    transition:0.3s;
}

.card-button:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 50px rgba(57,232,255,0.25);
}

/* SPEC GRID */

.spec-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:50px;
}

.spec-card{
    background:var(--card-bg);

    border:var(--card-border);

    border-radius:24px;

    padding:28px;

    box-shadow:var(--card-shadow);

    backdrop-filter:blur(12px);

    transition:0.3s;
}

.spec-card:hover{
    transform:translateY(-4px);

    border-color:rgba(57,232,255,0.28);
}

.spec-label{
    color:#39e8ff;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:12px;

    font-weight:700;
}

.spec-data{
    font-size:24px;

    font-weight:700;

    line-height:1.4;

    color:white;
}
@media(max-width:900px){

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

}
/* FORM */

.quote-form{
    max-width:900px;
    margin:60px auto 0 auto;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-bottom:28px;
}

.form-group{
    margin-bottom:28px;
}

.form-group label{
    display:block;

    margin-bottom:12px;

    font-weight:600;

    color:white;
}

.form-group input,
.form-group textarea{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:18px;

    padding:18px 20px;

    color:white;

    font-size:16px;

    font-family:'Inter',sans-serif;

    transition:0.3s;
}

.form-group input:focus,
.form-group textarea:focus{
    outline:none;

    border-color:rgba(57,232,255,0.45);

    box-shadow:0 0 0 4px rgba(57,232,255,0.08);
}

.form-group textarea{
    resize:vertical;
    min-height:160px;
}

.checkbox-grid{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.checkbox-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:14px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    cursor:pointer;

    transition:0.3s;
}

.checkbox-item:hover{
    border-color:rgba(57,232,255,0.35);

    background:rgba(57,232,255,0.06);
}

.checkbox-item input{
    width:auto;
}

.form-submit{
    margin-top:10px;
}
/* NAVBAR CTA */

.navbar{
    position:sticky;
    top:0;
    z-index:999;

    backdrop-filter:blur(14px);

    background:rgba(5,8,22,0.72);

    border-bottom:1px solid rgba(255,255,255,0.05);
}
.navbar a{
    color:#39e8ff;
    text-decoration:none;
    font-weight:600;
}

.navbar a:hover{
    opacity:0.85;
}

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

    min-height:82px;
}

.logo{
    color:white;
    text-decoration:none;

    font-size:22px;
    font-weight:800;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:30px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:24px;
}

.nav-links a{
    color:#aeb8cc;
    text-decoration:none;

    transition:0.3s;
}

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

.nav-cta{
    background:#39e8ff;

    color:#02131a;

    text-decoration:none;

    padding:14px 22px;

    border-radius:14px;

    font-weight:700;

    transition:0.3s;
}

.nav-cta:hover{
    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(57,232,255,0.22);
}



/* PRODUCT PAGE */

.product-hero{
    padding:70px 0 80px 0;
}

.product-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:70px;
    align-items:start;
}

.product-gallery{
    width:100%;
}

.main-product-image{
    height:520px;

    border-radius:32px;

    background:
    linear-gradient(180deg,
    rgba(17,24,39,0.95),
    rgba(10,14,28,0.92));

    border:1px solid rgba(255,255,255,0.08);

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

    color:#8c97ad;

    font-size:20px;

    overflow:hidden;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-top:18px;
}

.gallery-thumb{
    height:90px;

    border-radius:18px;

    background:
    linear-gradient(180deg,
    rgba(17,24,39,0.95),
    rgba(10,14,28,0.92));

    border:1px solid rgba(255,255,255,0.08);

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

    color:#8c97ad;

    font-size:14px;

    transition:0.3s;

    cursor:pointer;
}

.gallery-thumb:hover{
    border-color:rgba(57,232,255,0.35);

    transform:translateY(-3px);
}

/* PRODUCT RIGHT SIDE */

.product-content{
    padding-top:20px;
}

.product-title{
    font-size:72px;
    line-height:0.95;
    font-weight:900;

    margin-bottom:34px;

    letter-spacing:-3px;
}

.product-description{
    font-size:22px;

    line-height:1.8;

    color:#c3cee2;

    margin-bottom:34px;

    max-width:620px;
}


/* FEATURE PILLS */

.product-features{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-bottom:40px;
}

.feature-pill{
    padding:12px 18px;

    border-radius:999px;

    background:rgba(57,232,255,0.08);

    border:1px solid rgba(57,232,255,0.16);

    color:#6ee7ff;

    font-size:14px;

    font-weight:700;

    transition:0.3s;
}

.feature-pill:hover{
    transform:translateY(-2px);

    border-color:rgba(57,232,255,0.32);
}


/* PRICE */

.price-wrapper{
    display:flex;
    align-items:flex-end;

    gap:14px;

    margin-bottom:36px;
}

.price{
    font-size:48px;

    font-weight:900;

    line-height:1;
}

.price-note{
    color:#8c97ad;

    margin-bottom:8px;

    font-size:16px;
}


/* BUTTONS */

.product-buttons{
    display:flex;
    gap:18px;

    flex-wrap:wrap;

    margin-bottom:40px;
}


/* INFO BOX */

.product-info-box{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:30px;

    backdrop-filter:blur(14px);
}

.product-info-box h3{
    font-size:28px;

    margin-bottom:16px;
}

.product-info-box p{
    color:#b8c3d8;

    line-height:1.8;

    font-size:17px;
}

@media(max-width:1200px){

    .product-title{
        font-size:64px;
    }

}
@media(max-width:900px){

    .product-title{
        font-size:48px;
    }

    .product-description{
        font-size:18px;
    }

    .product-buttons{
        flex-direction:column;
    }
}

/* PICTURES CSS */
.main-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.gallery-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:18px;
}

/* GALLERY */

.gallery-thumb{
    cursor:pointer;

    transition:0.3s;

    overflow:hidden;
}

.gallery-thumb.active{
    border:2px solid #39e8ff;

    box-shadow:0 0 20px rgba(57,232,255,0.25);
}

.gallery-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.3s;
}

.gallery-thumb:hover img{
    transform:scale(1.05);
}