/* =========================
   Reagan's Tech Support
   Main Stylesheet
========================= */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}


:root{

    --background:#070b18;
    --surface:#111827;
    --card:#172033;

    --text:#ffffff;
    --muted:#a8b1c5;

    --primary:#2563eb;
    --secondary:#8b5cf6;

    --border:rgba(255,255,255,.1);

}



body{

    background:var(--background);
    color:var(--text);

    transition:.3s;

    overflow-x:hidden;

}




/* LIGHT MODE */


body.light{

    --background:#f5f7fb;
    --surface:#ffffff;
    --card:#ffffff;

    --text:#111827;
    --muted:#4b5563;

    --border:rgba(0,0,0,.1);

}







/* NAVBAR */


nav{

    height:80px;

    width:100%;

    padding:0 7%;

    display:flex;

    align-items:center;

    justify-content:space-between;


    background:rgba(17,24,39,.75);

    backdrop-filter:blur(15px);


    position:sticky;

    top:0;

    z-index:100;


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

}




.logo{

    font-size:24px;

    font-weight:700;

    white-space:nowrap;

}




.nav-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}





nav ul{

    display:flex;

    list-style:none;

    gap:25px;

}





nav a{

    color:var(--text);

    text-decoration:none;

    font-weight:500;

    transition:.2s;

}



nav a:hover{

    color:#60a5fa;

}





.book-button{

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

    padding:10px 18px;

    border-radius:12px;

}






button{

    border:none;

    cursor:pointer;

    background:none;

    color:var(--text);

    font-size:22px;

}






.device-status{

    position:absolute;

    left:50%;

    transform:translateX(-50%);


    background:var(--card);

    padding:8px 15px;

    border-radius:20px;


    font-size:14px;

}







/* HERO */


header{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px;

}





.hero{

    max-width:900px;

}



.hero h1{

    font-size:70px;

    line-height:1.1;

    margin-bottom:25px;


    background:linear-gradient(
    90deg,
    #60a5fa,
    #c084fc
    );


    -webkit-background-clip:text;

    color:transparent;

}



.hero p{

    font-size:22px;

    color:var(--muted);

    margin-bottom:40px;

}






.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}





.primary,
.secondary{

    padding:15px 35px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}



.primary{

    color:white;

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

}




.secondary{

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

    color:var(--text);

}




.primary:hover,
.secondary:hover{

    transform:translateY(-5px);

}





.mobile-layout{

    display:none;

}







/* STATS */


.stats{

    display:grid;

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

    gap:25px;

    padding:50px 8%;

}




.stat{

    background:var(--card);

    padding:35px;

    border-radius:20px;

    text-align:center;


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

}




.stat h2{

    font-size:45px;

    color:#60a5fa;

}




.stat p{

    color:var(--muted);

}








/* SERVICE CARDS */


.services-preview{

    padding:90px 8%;

    text-align:center;

}




.services-preview h1,
.why h1,
.reviews h1{

    font-size:40px;

    margin-bottom:50px;

}




.card-grid{

    display:grid;

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

    gap:25px;

}





.card{

    background:var(--card);

    padding:35px;

    border-radius:25px;


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


    transition:.3s;

}




.card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.25);

}




.icon{

    font-size:45px;

    margin-bottom:20px;

}




.card p{

    color:var(--muted);

}








/* WHY SECTION */


.why{

    padding:90px 8%;

    text-align:center;

}




.why-grid{

    display:grid;

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

    gap:25px;

}





.why-grid div{

    background:var(--card);

    padding:35px;

    border-radius:20px;

}





.why p{

    color:var(--muted);

}







/* REVIEWS */


.reviews{

    padding:90px 8%;

    text-align:center;

}



.review-container{

    display:flex;

    justify-content:center;

    gap:25px;

}




.review{

    background:var(--card);

    padding:30px;

    border-radius:20px;

    max-width:350px;

}








/* CTA */


.cta{

    margin:50px 8%;

    padding:60px;

    border-radius:30px;

    text-align:center;


    background:
    linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6
    );

}





.cta h1{

    font-size:45px;

    margin-bottom:20px;

}





.cta .primary{

    display:inline-block;

    background:white;

    color:#111;

    margin-top:20px;

}







/* FOOTER */


footer{

    padding:40px;

    text-align:center;

    color:var(--muted);

}









/* MOBILE */


@media(max-width:900px){



nav{

    padding:0 20px;

}



.logo{

    font-size:18px;

}


nav ul{

    display:none;

}



.device-status{

    display:none;

}



.hero h1{

    font-size:45px;

}



.hero p{

    font-size:18px;

}




.desktop-layout{

    display:none;

}



.mobile-layout{

    display:block;

}



.stats{

    grid-template-columns:1fr;

}




.card-grid{

    grid-template-columns:1fr;

}




.why-grid{

    grid-template-columns:1fr;

}




.review-container{

    flex-direction:column;

    align-items:center;

}




.cta{

    padding:40px 20px;

}




.cta h1{

    font-size:32px;

}


}





/* ANIMATIONS */


.card,
.stat,
.review,
.why-grid div{

    animation:fadeUp .7s ease;

}




@keyframes fadeUp{


from{

    opacity:0;

    transform:translateY(30px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}
/* =========================
   PRICING PAGE
========================= */


.page-header{

    text-align:center;

    padding:100px 20px 50px;

}



.page-header h1{

    font-size:55px;

    margin-bottom:20px;

}



.page-header p{

    color:var(--muted);

    font-size:20px;

}






.pricing-container{

    padding:50px 8%;

    display:grid;

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

    gap:25px;

}






.price-card{

    background:var(--card);

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

    padding:40px 25px;

    border-radius:25px;

    text-align:center;

    position:relative;

    transition:.3s;

}



.price-card:hover{

    transform:translateY(-10px);

}




.price-card h1{

    font-size:50px;

    color:#60a5fa;

    margin:20px;

}



.price-card p{

    color:var(--muted);

    margin-bottom:30px;

}





.price-card a{

    display:inline-block;

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

    color:white;

    padding:12px 25px;

    border-radius:12px;

    text-decoration:none;

}



.price-icon{

    font-size:45px;

}





.featured{

    border:2px solid #8b5cf6;

    transform:scale(1.05);

}





.badge{

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    background:#8b5cf6;

    padding:7px 20px;

    border-radius:20px;

    font-size:13px;

}






.custom-price{

    margin:60px 8%;

    padding:60px;

    text-align:center;

    border-radius:30px;

    background:linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6
    );

}





.guarantee{

    display:grid;

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

    gap:25px;

    padding:60px 8%;

    text-align:center;

}





.guarantee div{

    background:var(--card);

    padding:30px;

    border-radius:20px;

}





@media(max-width:1000px){


.pricing-container{

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

}


.guarantee{

    grid-template-columns:1fr;

}


}





@media(max-width:600px){


.pricing-container{

    grid-template-columns:1fr;

}


.price-card.featured{

    transform:none;

}


.page-header h1{

    font-size:38px;

}


}
/* =========================
   BOOKING PAGE
========================= */


.booking-section{

    max-width:700px;

    margin:auto;

    padding:50px 20px;

}





#bookingForm{

    background:var(--card);

    padding:40px;

    border-radius:25px;

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

}





.input-group{

    margin-bottom:25px;

}



.input-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}




.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:none;

    background:var(--surface);

    color:var(--text);

    font-size:16px;

}





.input-group textarea{

    height:150px;

    resize:none;

}





.submit-button{

    width:100%;

    padding:15px;

    border-radius:15px;

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

    color:white;

    font-size:18px;

}





.confirmation{

    margin-top:30px;

    text-align:center;

    font-size:18px;

}





.status-check{

    margin:60px 8%;

    padding:50px;

    text-align:center;

    background:var(--card);

    border-radius:25px;

}





.status-check input{

    padding:15px;

    border-radius:10px;

    border:none;

    margin:20px;

}




.status-check button{

    background:var(--primary);

    padding:12px 25px;

    border-radius:10px;

    color:white;

}



@media(max-width:700px){

#bookingForm{

    padding:25px;

}


.status-check{

    margin:30px 20px;

}


}
/* =========================
   ABOUT PAGE
========================= */


.about-container{

    padding:50px 8%;

    display:grid;

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

    gap:25px;

}





.about-card{

    background:var(--card);

    padding:40px;

    border-radius:25px;

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

}



.about-card h1{

    margin-bottom:20px;

    font-size:30px;

}



.about-card p{

    color:var(--muted);

    margin-bottom:15px;

    line-height:1.7;

}







.skills{

    padding:80px 8%;

    text-align:center;

}




.skill-grid{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}




.skill-grid div{

    background:var(--card);

    padding:30px;

    border-radius:20px;

}





.skill-grid p{

    color:var(--muted);

}







.equipment{

    padding:70px 8%;

    text-align:center;

}




.tool-list{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}





.tool-list span{

    background:var(--card);

    padding:15px 25px;

    border-radius:30px;

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

}





@media(max-width:1000px){


.about-container{

grid-template-columns:1fr;

}



.skill-grid{

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

}



}





@media(max-width:600px){


.skill-grid{

grid-template-columns:1fr;

}


}
/* =========================
   CONTACT PAGE
========================= */


.contact-container{

    padding:50px 8%;

    display:grid;

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

    gap:25px;

}





.contact-card{

    background:var(--card);

    padding:35px;

    border-radius:25px;

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

    text-align:center;

}



.contact-card h2{

    margin-bottom:20px;

}



.contact-card p{

    color:var(--muted);

    margin:10px;

}



.contact-card a{

    color:#60a5fa;

}







.contact-form-section{

    padding:70px 8%;

    text-align:center;

}





#messageForm{

    max-width:600px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}





#messageForm input,
#messageForm textarea{

    padding:15px;

    border-radius:12px;

    border:none;

    background:var(--card);

    color:var(--text);

    font-size:16px;

}





#messageForm textarea{

    height:150px;

    resize:none;

}







.faq{

    padding:70px 8%;

}





.faq-item{

    background:var(--card);

    padding:25px;

    border-radius:20px;

    margin:20px 0;

}



.faq-item p{

    color:var(--muted);

    margin-top:10px;

}





@media(max-width:900px){


.contact-container{

    grid-template-columns:1fr;

}


}
/* =========================
   ADMIN DASHBOARD
========================= */


.dashboard-stats{

    padding:50px 8%;

    display:grid;

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

    gap:25px;

}





.dashboard-section{

    padding:50px 8%;

}





.dashboard-card{

    background:var(--card);

    border-radius:20px;

    padding:25px;

    margin:20px 0;

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

}



.dashboard-card h2{

    color:#60a5fa;

}



.dashboard-card p{

    color:var(--muted);

    margin:8px;

}



.status-select{

    padding:10px;

    border-radius:10px;

    background:var(--surface);

    color:var(--text);

    border:none;

}




.danger{

    background:#dc2626;

    color:white;

    padding:15px 30px;

    border-radius:12px;

}



@media(max-width:800px){


.dashboard-stats{

grid-template-columns:1fr;

}


}
.admin-link{

    font-size:12px;
    color:transparent;
    text-decoration:none;

}

.admin-link:hover{

    color:#60a5fa;

}