:root{--bg:#f1f5f9; --ink:#0f172a; --muted:#475569; --ring:#e2e8f0; --blue1:#2dd4bf; --blue2:#0F63B9; --card:#fff; --warn-bg:#fff7e6; --warn-br:#f6d78a; --warn-line:#f59e0b}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,Segoe UI,Arial}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
a{color:#0d9488;text-decoration:none}
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--ring)}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;height:64px}
.nav a{color:var(--ink)}
.brand img{height:50px}
.hero{
  /* Използвайте снимка за фон вместо градиент. Комбинираният shorthand задава изображение,
     позиция и мащабиране. */
  background: url('../assets/services/bundle.jpg') no-repeat center 60%/cover;
  padding: 64px 0;
  color: #ffffff;
  text-align: center;
  position: relative;
  /* Минимална височина за да се покаже по-голяма част от фоновата снимка */
  min-height: 360px;
}
/* Декоративните точки вече не се използват */
.hero .dots{display:none}
.hero .content{position:relative}
.hero h1{
  margin:0 0 10px;
  font-size:44px;
  display:inline-block;
  /* Тъмна полупрозрачна подложка за по-добър контраст върху снимката */
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:.2em .6em;
  border-radius:12px;
}
.hero p{
  margin:0 auto;
  max-width:820px;
  font-size:18px;
  display:inline-block;
  /* Тъмна полупрозрачна подложка за по-добър контраст върху снимката */
  background:rgba(0,0,0,0.45);
  color:#fff;
  padding:.2em .6em;
  border-radius:10px;
}
.section{padding:56px 0}
h2{font-size:28px;margin:0 0 16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* Fix the services grid layout when markup is imperfect by making the container itself a grid
   and allowing the `.grid` wrapper to collapse to contents. This ensures all `.card` elements
   align in a responsive grid regardless of extra closing tags. */
/* Use flexbox to lay out service cards in responsive columns. This helps when
   markup contains extra wrappers by ensuring all cards flow naturally. */
/* Use CSS columns for the services grid. This creates a multi-column layout
   regardless of markup nesting, and avoids splitting cards across columns. */
/* Reset any previous column layout for the services section. */
#services .container{
  column-count: initial !important;
  column-gap: normal !important;
}

/* Define a four‑column grid for the service cards.
   The grid will automatically wrap into two columns on medium screens and
   one column on small screens. */
#services .grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
#services .card{
  width: auto;
}
@media (max-width: 1024px){
  #services .grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px){
  #services .grid{
    grid-template-columns: 1fr;
  }
}

/* Provide inner padding for the card content wrapper. */
.card .card-content{
  padding: 14px;
}

/* Steps section styling to create card-like panels with numbered circles */
.steps{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:32px;
}
.step{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.step-number{
  width:40px;
  height:40px;
  background:var(--blue2);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  margin-bottom:12px;
}
.step h3{
  margin:0 0 8px;
  font-size:20px;
}
.step p.small{
  color:var(--muted);
}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card .pad{padding:14px}
.small{color:var(--muted);font-size:14px}
.price-list{display:grid;gap:12px}
.price-item{padding:14px;border:1px solid var(--ring);border-radius:12px;background:var(--card);display:flex;justify-content:space-between;gap:16px}
.price-item .title{font-weight:600}
.price-item .amount{font-weight:500}
.notice{background:var(--warn-bg);border:2px solid var(--warn-br);border-left:6px solid var(--warn-line);padding:16px;border-radius:12px}
.notice b{font-weight:800}
.contacts-grid{display:grid;gap:16px}
@media(min-width:900px){.contacts-grid{grid-template-columns:1fr 1fr}}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.contact-list li{display:flex;gap:12px;align-items:flex-start}
.contact-list svg{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:#0F63B9;stroke-width:2}
footer{padding:40px 0;border-top:1px solid var(--ring);color:var(--muted)}
.placeholder{padding:18px;border:1px dashed var(--ring);border-radius:12px;background:#fff}

/* Steps section styling matching updated design */
.steps{display:grid;gap:20px;margin-top:32px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.step-number{display:flex;align-items:center;justify-content:center;background:var(--blue2);color:#fff;border-radius:50%;width:40px;height:40px;font-weight:600;font-size:18px;margin-bottom:12px}
.step h3{margin:0 0 8px;font-size:20px;color:var(--ink)}
.step p{margin:0;font-size:14px;color:var(--muted)}