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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    color: #222;
    background: #f4f6f8;
    line-height: 1.6;
}

/* Header / Navigation */
.navbar {
    background: #0b1f3a;
    color: white;
    padding: 18px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.logo {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

#menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    font-size: 32px;
    cursor: pointer;
    color: white;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 25px;
    font-weight: bold;
    transition: 0.3s;
}

nav a:hover {
    color: #4da3ff;
}

/* Hero */
.hero {
    min-height: 500px;
    background: linear-gradient(rgba(11,31,58,0.80), rgba(11,31,58,0.80)), url("images/pc-service.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 8%;
    color: white;
}

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

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

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

.btn {
    display: inline-block;
    background: #1e88e5;
    color: white;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.btn:hover {
    background: #1565c0;
    transform: translateY(-2px);
}

/* Sections */
.services,
.contact {
    padding: 70px 8%;
    text-align: center;
}

.about {
    background: white;
    padding: 70px 8%;
    text-align: center;
}

.services h2,
.about h2,
.prices h2,
.contact h2,
.why-us h2 {
    font-size: 34px;
    margin-bottom: 35px;
    color: #0b1f3a;
}

.about p {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
    line-height: 1.7;
}

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

.card {
    background: white;
    padding: 30px 20px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card h3 {
    margin-bottom: 15px;
    color: #0b1f3a;
    font-size: 20px;
}

.card p,
.card ul {
    font-size: 15px;
    line-height: 1.6;
}

.card ul {
    text-align: left;
    padding-left: 20px;
    margin-top: 10px;
}

.card li {
    margin-bottom: 8px;
}

/* Why us */
.why-us {
    padding: 70px 8%;
    background: #0b1f3a;
    color: white;
    text-align: center;
}

.why-us h2 {
    color: white;
}

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

.why-box {
    background: rgba(255,255,255,0.08);
    padding: 30px 20px;
    border-radius: 14px;
}

.why-box h3 {
    margin-bottom: 15px;
}

.why-box p {
    line-height: 1.6;
}

/* Prices */
.prices {
    background: white;
    padding: 70px 8%;
    text-align: center;
}

.price-list {
    max-width: 850px;
    margin: auto;
}

.price-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: #f4f6f8;
    margin-bottom: 15px;
    padding: 18px 25px;
    border-radius: 10px;
    font-size: 18px;
}

.price-item strong {
    color: #0b1f3a;
    white-space: nowrap;
}

/* Contact */
form {
    max-width: 600px;
    margin: 0 auto 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form input,
form textarea {
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

form input:focus,
form textarea:focus {
    border-color: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30,136,229,0.15);
}

form textarea {
    min-height: 130px;
    resize: vertical;
}

form button {
    background: #1e88e5;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

form button:hover {
    background: #1565c0;
}

.contact-info {
    max-width: 700px;
    margin: 25px auto;
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
}

.contact-info p {
    font-size: 18px;
    margin: 10px 0;
    color: #0b1f3a;
}

.contact-info a {
    color: #1e88e5;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}

.map-container {
    max-width: 1000px;
    margin: 35px auto 20px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
    background: white;
}

.map-container iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

.directions-btn {
    display: inline-block;
    margin-top: 10px;
    background: #0b1f3a;
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.directions-btn:hover {
    background: #1e88e5;
}

/* Floating buttons */
.call-btn,
.viber-btn {
    position: fixed;
    right: 20px;
    width: 60px;
    height: 60px;
    color: white;
    text-decoration: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 999;
    transition: all 0.3s ease;
}

.call-btn {
    bottom: 20px;
    background: #1e88e5;
}

.viber-btn {
    bottom: 90px;
    background: #7360F2;
    overflow: hidden;
}

.call-btn:hover,
.viber-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.viber-btn img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

/* Footer */
footer {
    background: #0b1f3a;
    color: white;
    text-align: center;
    padding: 22px;
}

/* Tablet */
@media (max-width: 900px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

/* Mobile */
@media (max-width: 700px) {
    .navbar {
        padding: 16px 6%;
        flex-direction: row;
    }

    .logo {
        font-size: 1.35rem;
    }

    .menu-icon {
        display: block;
    }

    nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #0b1f3a;
        padding: 15px 0;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    nav a {
        display: block;
        margin: 15px 0;
        font-size: 18px;
    }

    #menu-toggle:checked + .menu-icon + nav {
        display: block;
    }

    .hero {
        min-height: 420px;
        padding: 0 6%;
        text-align: center;
        justify-content: center;
    }

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

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

    .services,
    .about,
    .prices,
    .contact,
    .why-us {
        padding: 55px 6%;
    }

    .services h2,
    .about h2,
    .prices h2,
    .contact h2,
    .why-us h2 {
        font-size: 28px;
    }

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

    .price-item {
        flex-direction: column;
        gap: 8px;
        text-align: left;
    }

    .price-item strong {
        white-space: normal;
    }

    .map-container iframe {
        height: 320px;
    }

    .call-btn,
    .viber-btn {
        width: 55px;
        height: 55px;
        right: 15px;
    }

    .call-btn {
        bottom: 15px;
    }

    .viber-btn {
        bottom: 80px;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .logo {
        font-size: 1.1rem;
    }

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

    .contact-info p {
        font-size: 16px;
    }
}

/* Modern 2026 design refresh */
:root{--ink:#07111f;--mint:#2ad7a2;--paper:#f3f6f9;--muted:#667487;--line:#dfe5ec}
body{font-family:"Manrope",Arial,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden}
html{scroll-padding-top:82px}
.navbar{height:82px;padding:0 clamp(24px,7vw,110px);position:sticky;top:0;background:rgba(7,17,31,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.logo{font-size:18px;letter-spacing:-.5px}nav{display:flex;align-items:center;gap:30px}nav a{margin:0;color:#c4cfdb;font-size:14px}nav a:hover{color:var(--mint)}
.hero{min-height:calc(100vh - 82px);padding:100px clamp(24px,8vw,130px);position:relative;overflow:hidden;background:radial-gradient(circle at 77% 35%,rgba(76,132,255,.3),transparent 25%),radial-gradient(circle at 68% 100%,rgba(42,215,162,.18),transparent 30%),linear-gradient(90deg,rgba(7,17,31,.99),rgba(7,17,31,.76)),url("images/pc-service.jpg") center/cover}
.hero:after{content:"";position:absolute;inset:0;opacity:.23;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px}
.hero-content{max-width:760px;position:relative;z-index:1}.hero-content:before{content:"КОМПЮТЪРЕН СЕРВИЗ • РАЗГРАД";display:block;margin-bottom:24px;color:var(--mint);font-size:11px;font-weight:800;letter-spacing:2.4px}
.hero h1{max-width:740px;margin-bottom:24px;font-size:clamp(48px,6vw,82px);line-height:1.03;letter-spacing:-4px}.hero p{max-width:620px;margin-bottom:34px;color:#afbbc9;font-size:clamp(17px,1.5vw,20px)}
.btn{display:inline-flex;align-items:center;padding:16px 25px;color:var(--ink);background:var(--mint);border-radius:12px;font-size:14px;box-shadow:0 10px 35px rgba(42,215,162,.2)}.btn:after{content:"→";margin-left:28px;font-size:20px}.btn:hover{background:#20c997;transform:translateY(-3px)}
.services,.about,.prices,.contact,.why-us{padding:110px clamp(24px,7vw,110px)}
.services h2,.about h2,.prices h2,.contact h2,.why-us h2{margin-bottom:55px;color:var(--ink);font-size:clamp(36px,4vw,56px);line-height:1.12;letter-spacing:-2.5px}
.services h2:before,.about h2:before,.prices h2:before,.contact h2:before,.why-us h2:before{display:block;margin-bottom:13px;color:#14866a;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.services h2:before{content:"Как помагаме"}.about h2:before{content:"За нас"}.prices h2:before{content:"Прозрачни условия"}.contact h2:before{content:"Свържете се с нас"}.why-us h2:before{content:"Нашият стандарт";color:var(--mint)}
.services{background:var(--paper)}.services-container{gap:16px}
.card{min-height:270px;padding:30px;background:#fff;border:1px solid #e3e8ee;border-radius:18px;box-shadow:none}.card:before{content:"✦";display:grid;place-items:center;width:44px;height:44px;margin-bottom:40px;border-radius:13px;background:#e4f8f2;color:#16876b}.card:nth-child(1):before{content:"▣"}.card:nth-child(3):before{content:"⌁"}.card:nth-child(4):before{content:"◫"}.card:nth-child(5):before{content:"⌕"}.card:nth-child(6):before{content:"↗"}
.card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 24px 70px rgba(7,17,31,.12)}.card:first-child{color:#fff;background:#0d1b2d;border-color:#0d1b2d}.card:first-child:before{color:var(--ink);background:var(--mint)}.card h3{color:var(--ink);font-size:19px;line-height:1.35}.card:first-child h3{color:#fff}.card p,.card ul{color:var(--muted);font-size:13px}.card:first-child p{color:#9eacbd}
.about{background:#fff}.about p{color:var(--muted)}
.why-us{background:var(--ink)}.why-us h2{color:#fff}.why-container{gap:16px}.why-box{padding:35px 26px;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.045)}.why-box h3:before{content:"✓";display:block;width:30px;height:30px;margin-bottom:25px;border-radius:50%;color:var(--ink);background:var(--mint);text-align:center;line-height:30px;font-size:13px}.why-box p{color:#95a4b6;font-size:13px}
.prices{background:#edf1f5}.price-list{max-width:930px;border-top:1px solid #cdd5df}.price-item{padding:24px 12px;margin:0;background:transparent;border-bottom:1px solid #cdd5df;border-radius:0;font-size:16px}.price-item:hover{padding-left:25px;background:rgba(255,255,255,.55)}.price-item strong{color:#0a8165}
.contact{color:#fff;background:var(--ink)}.contact h2{color:#fff}.contact h2:before{color:var(--mint)}form{max-width:680px;padding:38px;border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.25)}form input,form textarea{padding:14px 15px;background:#f7f9fb;border:1px solid var(--line);border-radius:10px;font-size:14px}form input:focus,form textarea:focus{border-color:#4c84ff;box-shadow:0 0 0 3px rgba(76,132,255,.12)}form button{color:var(--ink);background:var(--mint);border-radius:10px}
.contact-info{max-width:830px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);box-shadow:none}.contact-info p{margin:4px 0;color:#a9b6c5;font-size:14px}.contact-info a{color:var(--mint)}.map-container{border-radius:18px}.map-container iframe{filter:grayscale(35%) contrast(95%)}.directions-btn{border:1px solid rgba(255,255,255,.18);background:transparent}.directions-btn:hover{color:var(--ink);background:var(--mint)}
.call-btn{background:var(--mint)}footer{padding:35px 24px;color:#6f7e91;background:#050c16;font-size:12px}
@media(max-width:700px){.navbar{height:72px;padding:0 20px}.logo{font-size:15px}nav{top:72px;padding:18px 22px;background:#0a1625}nav a{margin:0;padding:13px 3px;border-bottom:1px solid rgba(255,255,255,.07)}.hero{min-height:calc(100vh - 72px);padding:80px 22px;text-align:left;justify-content:flex-start}.hero h1{font-size:46px;letter-spacing:-2.5px}.services,.about,.prices,.contact,.why-us{padding:82px 22px}.services h2,.about h2,.prices h2,.contact h2,.why-us h2{margin-bottom:38px;font-size:38px}.card{min-height:245px}form{padding:24px 18px}.contact-info{align-items:flex-start;flex-direction:column;text-align:left}}
@media(max-width:410px){.hero h1{font-size:39px}.hero-content:before{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* Service card actions */
.card{display:flex;flex-direction:column}
.card p,.card ul{margin-bottom:18px}
.service-link{display:inline-flex;align-items:center;margin-top:auto;color:#0a8165;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.1px;transition:.2s}
.service-link:hover{color:#07111f;transform:translateX(4px)}
.card:first-child .service-link{color:#2ad7a2}
.card:first-child .service-link:hover{color:#fff}

.form-privacy{margin-top:2px;color:#7d8998;font-size:11px;line-height:1.5;text-align:center}

/* Website packages */
.website-packages{padding:110px clamp(24px,7vw,110px);background:#fff;text-align:center}
.website-packages h2{margin-bottom:22px;color:var(--ink);font-size:clamp(36px,4vw,56px);line-height:1.12;letter-spacing:-2.5px}
.website-packages h2:before{content:"Нова услуга";display:block;margin-bottom:13px;color:#14866a;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.section-intro{max-width:820px;margin:0 auto 46px;color:var(--muted);font-size:16px;line-height:1.8}
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.package-card{position:relative;display:flex;flex-direction:column;padding:34px 28px;text-align:left;background:#f7fafc;border:1px solid #dfe7ef;border-radius:22px;transition:.25s ease;overflow:hidden}
.package-card:hover{transform:translateY(-8px);box-shadow:0 24px 70px rgba(7,17,31,.12);border-color:transparent}
.featured-package{background:#0d1b2d;color:#fff;border-color:#0d1b2d;box-shadow:0 24px 70px rgba(7,17,31,.18)}
.package-badge{align-self:flex-start;margin-bottom:24px;padding:7px 12px;color:#0a8165;background:#e4f8f2;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.featured-package .package-badge{color:var(--ink);background:var(--mint)}
.package-card h3{margin-bottom:12px;color:var(--ink);font-size:25px;letter-spacing:-1px}
.featured-package h3{color:#fff}
.package-card p{margin-bottom:22px;color:var(--muted);font-size:14px;line-height:1.7}
.featured-package p{color:#aebccd}
.package-price{display:block;margin-bottom:22px;color:#0a8165;font-size:30px;letter-spacing:-1px}
.featured-package .package-price{color:var(--mint)}
.package-card ul{margin:0 0 28px;padding-left:20px;color:#4d5c6d;font-size:14px;line-height:1.9}
.featured-package ul{color:#d6dee8}
.package-btn{display:inline-flex;justify-content:center;margin-top:auto;padding:13px 18px;color:var(--ink);background:var(--mint);border-radius:12px;text-decoration:none;font-size:13px;font-weight:800;transition:.2s}
.package-btn:hover{transform:translateY(-2px);background:#20c997}
.package-note{max-width:820px;margin:28px auto 0;color:#7b8796;font-size:13px;line-height:1.6}
.web-service-card{background:linear-gradient(145deg,#ffffff,#eefaf6)}
.card:nth-child(7):before{content:"</>";font-size:12px;font-weight:800}

@media(max-width:900px){.packages-grid{grid-template-columns:1fr}.package-card{text-align:left}.website-packages{padding:82px 22px}.website-packages h2{font-size:38px}}


/* Final readability tweaks */
.package-note{max-width:900px;margin-top:32px;padding:15px 22px;color:#526071;background:#f7fafc;border:1px solid #e1e8ef;border-radius:14px;font-size:14px;line-height:1.7}
.about p{max-width:920px}