/* ======================================================
   RESET & VARIABILE
====================================================== */

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

:root {
    --primary: #0066ff;
    --primary-dark: #0050cc;
    --success: #16a34a;
    --text: #1f2937;
    --text-light: #6b7280;
    --border: #e5e7eb;
    --bg: #f5f7fb;
    --card: #ffffff;
    --radius: 18px;
    --shadow: 0 12px 30px rgba(0,0,0,.08);
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* ======================================================
   CONTAINER
====================================================== */

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

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

.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.left {
    flex: 1;
}

.right {
    flex: 1;
    text-align: center;
}

.right img {
    max-width: 380px;
    width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
}

.badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.hero h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    opacity: .9;
    max-width: 600px;
}

/* ======================================================
   BUTTONS
====================================================== */

.buttons {
    display: flex;
    gap: 20px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.btn {
    text-decoration: none;
    padding: 15px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.btn.blue {
    background: var(--primary);
    color: #fff;
}

.btn.blue:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn.white {
    background: #fff;
    color: var(--text);
}

.btn.white:hover {
    background: #f3f4f6;
}

/* ======================================================
   PREȚURI
====================================================== */

.prices {
    padding: 70px 0;
}

.prices h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 35px;
}
/* ======================================================
   PRICE TABLE
====================================================== */

.table {

    background: var(--card);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}


/* HEADER */

.head {

    display: grid;

    grid-template-columns: 5fr 1.5fr 1.5fr 2fr;

    background: #111827;

    color: white;

    padding: 22px 30px;

    font-weight: 600;

    font-size: 15px;

}


/* ROW */

.item {

    display: grid;

    grid-template-columns: 5fr 1.5fr 1.5fr 2fr;

    align-items: center;

    padding: 25px 30px;

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

    transition: .3s ease;

}


.item:last-child {

    border-bottom: none;

}


.item:hover {

    background: #f0f7ff;

    transform: translateX(5px);

}


/* SERVICE */

.service {

    display: flex;

    align-items: center;

    gap: 20px;

}


.icon {

    width: 60px;

    height: 60px;

    border-radius: 18px;

    background: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.service h3 {

    font-size: 18px;

    color: #111827;

    margin-bottom: 5px;

}


.service p {

    color: var(--text-light);

    font-size: 14px;

}


/* PRICE */

.price {

    text-align: right;

    color: var(--primary);

    font-weight: 800;

    font-size: 22px;

}


.price.free {

    color: var(--success);

}


/* ======================================================
   ANIMAȚII
====================================================== */


.item {

    opacity: 0;

    animation: showItem .6s ease forwards;

}


.item:nth-child(2) {
    animation-delay: .1s;
}


.item:nth-child(3) {
    animation-delay: .2s;
}


.item:nth-child(4) {
    animation-delay: .3s;
}


.item:nth-child(5) {
    animation-delay: .4s;
}


.item:nth-child(6) {
    animation-delay: .5s;
}


@keyframes showItem {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}


/* ======================================================
   EFECT CARD PREMIUM
====================================================== */


.table {

    position: relative;

}


.table:before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #0066ff,
        #00c6ff
    );

}
/* ======================================================
   RESPONSIVE TABLETĂ
====================================================== */

@media (max-width: 992px) {

    .hero .container {

        flex-direction: column;

        text-align: center;

    }


    .hero h1 {

        font-size: 38px;

    }


    .hero p {

        margin: auto;

    }


    .buttons {

        justify-content: center;

    }


    .head,
    .item {

        grid-template-columns: 3fr 1fr 1fr 1.5fr;

        padding-left:20px;

        padding-right:20px;

    }


}


/* ======================================================
   RESPONSIVE MOBIL
====================================================== */

@media (max-width: 700px) {


    .container {

        width: 92%;

    }


    .hero {

        padding:50px 0;

    }


    .hero h1 {

        font-size:30px;

    }


    .hero p {

        font-size:16px;

    }


    .right img {

        max-width:280px;

    }


    .buttons {

        flex-direction:column;

        width:100%;

    }


    .btn {

        text-align:center;

        width:100%;

    }



    /* ascundem headerul tabelului */

    .head {

        display:none;

    }


    /* transformăm tabelul în carduri */


    .item {

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

        padding:25px;

    }


    .service {

        width:100%;

    }


    .price {

        text-align:left;

        font-size:24px;

    }


    .item:after {

        content:"";

        width:100%;

        height:1px;

        background:#e5e7eb;

    }


}


/* ======================================================
   ANIMAȚIE HERO
====================================================== */


.hero .left {

    animation: slideLeft .8s ease;

}


.hero .right {

    animation: slideRight .8s ease;

}



@keyframes slideLeft {

    from {

        opacity:0;

        transform:translateX(-40px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes slideRight {

    from {

        opacity:0;

        transform:translateX(40px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}


/* ======================================================
   FINISAJE
====================================================== */


img {

    user-select:none;

}


::selection {

    background:#0066ff;

    color:white;

}


a {

    -webkit-tap-highlight-color:transparent;

}
.item.visible {

    opacity:1;

    transform:translateY(0);

}
/* ======================================================
   FORMULAR PROGRAMARE
====================================================== */

.booking {

    padding:80px 0;

    background:#ffffff;

}


.booking-box {

    max-width:700px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    text-align:center;

}


.booking-box h2 {

    font-size:32px;

    margin-bottom:15px;

}


.booking-box p {

    color:var(--text-light);

    margin-bottom:30px;

}



.repair-form {

    display:flex;

    flex-direction:column;

    gap:18px;

}


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

    width:100%;

    padding:16px 18px;

    border:1px solid #e5e7eb;

    border-radius:12px;

    font-size:16px;

    font-family:inherit;

    outline:none;

    transition:.3s;

}


.form-group textarea {

    min-height:120px;

    resize:vertical;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,102,255,.1);

}



/* ======================================================
   RECENZII
====================================================== */


.reviews {

    padding:80px 0;

    background:#f5f7fb;

}


.reviews h2,
.faq h2 {

    text-align:center;

    font-size:36px;

    margin-bottom:40px;

}


.review-grid {

    display:grid;

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

    gap:25px;

}


.review {

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}


.review:hover {

    transform:translateY(-8px);

}


.stars {

    color:#fbbf24;

    font-size:22px;

    margin-bottom:15px;

}


.review p {

    color:#4b5563;

    margin-bottom:20px;

}



.review strong {

    color:#111827;

}



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


.faq {

    padding:80px 0;

    background:white;

}


.faq-item {

    max-width:850px;

    margin:0 auto 20px;

    padding:25px 30px;

    background:#f8fafc;

    border-radius:16px;

    border-left:5px solid var(--primary);

    transition:.3s;

}


.faq-item:hover {

    background:#eff6ff;

}


.faq-item h3 {

    margin-bottom:10px;

    font-size:19px;

}


.faq-item p {

    color:var(--text-light);

}



/* ======================================================
   WHATSAPP FLOAT BUTTON
====================================================== */


.whatsapp {

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    text-decoration:none;

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

    z-index:1000;

    animation:pulse 2s infinite;

}


.whatsapp:hover {

    transform:scale(1.1);

}



@keyframes pulse {


    0% {

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }


    70% {

        box-shadow:0 0 0 20px rgba(37,211,102,0);

    }


    100% {

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }


}



/* ======================================================
   RESPONSIVE
====================================================== */


@media(max-width:900px){


.review-grid {

    grid-template-columns:1fr;

}


.booking-box {

    padding:30px 20px;

}


.reviews h2,
.faq h2 {

    font-size:30px;

}


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

.header {

    background:white;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.06);

}


.header-container {

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.logo {

    font-size:22px;

    font-weight:800;

    color:#111827;

}


.menu {

    display:flex;

    gap:30px;

}


.menu a {

    text-decoration:none;

    color:#374151;

    font-weight:500;

    transition:.3s;

}


.menu a:hover {

    color:var(--primary);

}


.header-phone {

    background:var(--primary);

    color:white;

    padding:12px 20px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

}



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


.footer {

    background:#111827;

    color:white;

    padding:60px 0 20px;

}


.footer-grid {

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

}


.footer h3 {

    margin-bottom:20px;

    font-size:20px;

}


.footer p {

    color:#cbd5e1;

}


.footer ul {

    list-style:none;

}


.footer li {

    color:#cbd5e1;

    margin-bottom:10px;

}


.copyright {

    text-align:center;

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #374151;

    color:#94a3b8;

}



@media(max-width:900px){


.menu {

    display:none;

}


.header-phone {

    font-size:14px;

}


.footer-grid {

    grid-template-columns:1fr;

}


}
/* ======================================================
   CALCULATOR PREȚ
====================================================== */


.calculator {

    padding:80px 0;

    background:#f5f7fb;

}


.calculator-box {

    max-width:650px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);

}


.calculator-box h2 {

    font-size:32px;

    margin-bottom:10px;

}


.calculator-box p {

    color:var(--text-light);

    margin-bottom:30px;

}



#repairSelect {

    width:100%;

    padding:16px;

    border-radius:12px;

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

    font-size:16px;

    margin-bottom:30px;

}



.result {

    background:#eff6ff;

    padding:25px;

    border-radius:15px;

    margin-bottom:30px;

    font-size:20px;

}


.result strong {

    display:block;

    color:var(--primary);

    font-size:32px;

    margin-top:10px;

}