/* Новият вид на Мегдана (2026-11): зарежда се ПОСЛЕДЕН на всяка страница и подрежда общото —
   спокоен светъл фон без шарка, едни и същи бутони, карти и сенки, по-малък банер за бисквитките.
   Цветовете са същите като в картинките при споделяне (vps/og.mjs). */
:root {
  --page: #faf6ef;
  --line: #e4dacb;
  --amber: #b7791f;
  --amber-soft: #fbf0d9;
  --teal: #2a6f8f;
  --teal-soft: #dfeef4;
  --plum: #6b4fa0;
  --plum-soft: #ece6f5;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --sh-1: 0 1px 2px rgba(34, 32, 28, .06), 0 4px 14px rgba(34, 32, 28, .06);
  --sh-2: 0 2px 6px rgba(34, 32, 28, .08), 0 18px 44px rgba(34, 32, 28, .14);
}

/* Фонът: без шарката по цялата страница — тя правеше всичко да изглежда натрупано. */
body, body.home { background: var(--page) !important; }
footer, .home footer { background: #f1e9dc !important; border-top: 1px solid var(--line); }
.home footer::before { display: none; }

/* Горната лента: бяла, с тънка линия, без „мъгла“. */
header { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* Бутони: едни и същи навсякъде — заоблени, ясни, с лек отскок при посочване. */
.btn { border-radius: 999px; font-weight: 600; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.btn:hover { box-shadow: 0 6px 16px rgba(194, 59, 46, .28); }
.btn.green:hover { box-shadow: 0 6px 16px rgba(46, 125, 79, .28); }
.btn.ghost { box-shadow: inset 0 0 0 2px var(--line); background: #fff; }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); background: var(--ink); color: #fff; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* Заглавията на разделите. */
.sec-head h2 { letter-spacing: -.3px; }

/* Банерът за бисквитките: малка лента долу, не голям прозорец върху снимката. */
.bk { max-width: 760px !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--sh-2) !important;
      padding: 12px 16px !important; font-size: 15px !important; background: #fff !important; }
.bk h2 { font-size: 16px !important; }
.bk button { min-height: 40px !important; padding: 7px 16px !important; }

/* ============ НАЧАЛНАТА СТРАНИЦА ============ */
.home main.has-side > .hero.lv { margin-top: 16px; }
.hero.nv { display: block; aspect-ratio: auto; min-height: clamp(560px, 82vh, 760px); text-align: left; border-radius: var(--r-l); box-shadow: var(--sh-2); }
.hero.nv > img { object-position: center 58%; }
.hero.nv::after { background:
  linear-gradient(90deg, rgba(22, 16, 10, .86) 0%, rgba(22, 16, 10, .62) 36%, rgba(22, 16, 10, .1) 66%, rgba(22, 16, 10, 0) 100%),
  linear-gradient(0deg, rgba(22, 16, 10, .55) 0%, rgba(22, 16, 10, 0) 34%); }
.hero.nv .hero-in { margin: 0; display: flex; flex-direction: column; justify-content: center; min-height: inherit; max-width: 660px; padding: clamp(36px, 5vw, 64px); align-items: flex-start; }
.hero.nv .hero-top { max-width: none; }
.hero.nv p { font-family: 'Rubik', sans-serif; font-style: normal; }
.hero.nv .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); font-size: 14px; font-weight: 600; letter-spacing: .4px; color: #fff; margin-bottom: 22px; }
.hero.nv .kicker i { width: 9px; height: 9px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 0 4px rgba(95, 211, 141, .25); animation: nv-pulse 2s ease-in-out infinite; }
.hero.nv h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1; letter-spacing: -1px; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.hero.nv h1 em { display: inline-block; font-family: 'Lobster', cursive; font-style: normal; font-weight: 400; color: var(--sun); letter-spacing: 0; position: relative; }
.hero.nv h1 em::after { content: ''; position: absolute; left: 2%; right: 4%; bottom: .02em; height: .12em; border-radius: 99px; background: var(--sun); opacity: .45;
  transform-origin: left; animation: nv-line 1s .7s cubic-bezier(.2, .8, .2, 1) both; }
.hero.nv p.sub { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; margin: 20px 0 0; max-width: 520px; text-align: left; color: #f6efe3; }
.hero.nv .hero-bottom { margin-top: 30px; align-items: flex-start; width: 100%; }
.hero.nv .hero-btns { justify-content: flex-start; gap: 12px; }
.hero.nv .hero-btns .btn { padding: 17px 28px; font-size: 18px; font-weight: 700; }
.hero.nv .hero-btns .btn svg { width: 22px; height: 22px; }
.hero.nv .btn.light { background: #fff; color: var(--ink); }
.hero.nv .btn.light:hover { background: #fff7e6; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.hero.nv .where { margin: 0; }
.hero.nv .note { text-align: left; }
.hero.nv .tags { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; list-style: none; padding: 0; }
.hero.nv .tags li { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-size: 15px; font-weight: 500; color: #fff; }
.hero.nv .tags li b { color: var(--sun); font-weight: 600; }
/* Плавно появяване на заглавието и бутоните. */
.hero.nv .kicker, .hero.nv h1, .hero.nv p.sub, .hero.nv .hero-bottom, .hero.nv .tags { animation: nv-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero.nv h1 { animation-delay: .08s; }
.hero.nv p.sub { animation-delay: .18s; }
.hero.nv .hero-bottom { animation-delay: .28s; }
.hero.nv .tags { animation-delay: .38s; }
@keyframes nv-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes nv-line { from { transform: scaleX(0); } }
@keyframes nv-pulse { 50% { box-shadow: 0 0 0 8px rgba(95, 211, 141, 0); } }

/* Трите стъпки под снимката — малко „качени“ върху нея. */
.steps3 { grid-column: 1 / -1; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: -54px clamp(16px, 3vw, 40px) 0; list-style: none; padding: 0; }
.steps3 li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; box-shadow: var(--sh-1); }
.steps3 .n { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font: 800 20px var(--serif); }
.steps3 li:nth-child(1) .n { background: var(--red-soft); color: var(--red); }
.steps3 li:nth-child(2) .n { background: var(--amber-soft); color: var(--amber); }
.steps3 li:nth-child(3) .n { background: var(--green-soft); color: var(--green); }
.steps3 b { display: block; font-size: 18px; margin-bottom: 2px; }
.steps3 p { color: var(--muted); font-size: 15.5px; line-height: 1.4; }
.steps3 a { color: var(--red); font-weight: 600; text-decoration: none; }

@media (max-width: 860px) {
  .steps3 { grid-template-columns: 1fr; margin: -40px 12px 0; gap: 10px; }
  .steps3 li { padding: 14px 16px; }
}
@media (max-width: 760px) {
  .hero.nv { min-height: 0; border-radius: 22px; }
  .hero.nv > img { object-position: 30% 50%; }
  .hero.nv::after { background: linear-gradient(0deg, rgba(22, 16, 10, .92) 0%, rgba(22, 16, 10, .78) 48%, rgba(22, 16, 10, .2) 78%, rgba(22, 16, 10, .05) 100%); }
  .hero.nv .hero-in { min-height: 0; justify-content: flex-end; padding: 210px 20px 64px; }
  .hero.nv .kicker { margin-bottom: 14px; font-size: 13px; }
  .hero.nv h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero.nv p.sub { font-size: 17.5px; margin-top: 12px; }
  .hero.nv .hero-bottom { margin-top: 20px; }
  .hero.nv .hero-btns { width: 100%; }
  .hero.nv .hero-btns .btn { flex: 1 1 100%; padding: 16px 20px; }
  .hero.nv .tags { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.nv *, .hero.nv h1 em::after { animation: none !important; }
}
main.has-side > .steps3 { grid-column: 1 / -1; grid-row: 2; }
main.has-side > .hero ~ .steps3 ~ .side-news { grid-row: 3 / span 30; }

/* Къщите в горната лента: същите цветове като навсякъде (граждани, институции, бизнес, академичност). */
.kashti-top a:nth-child(2) svg { stroke: var(--teal); }
.kashti-top a:nth-child(3) svg { stroke: var(--amber); }
.kashti-top a:nth-child(4) svg { stroke: var(--plum); }
/* Телефон: горната лента в два реда — лого, Търси, меню; отдолу „Вход“ и четирите къщи на един ред. */
@media (max-width: 640px) {
  .bar { row-gap: 4px; }
  .bar > .nav { order: 4; margin: 0; width: auto; flex: none; overflow: visible; }
  .bar > .nav a[href$="#vhod"] { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--red); color: #fff;
    font-size: 0; font-weight: 700; text-decoration: none; }
  .bar > .nav a[href$="#vhod"]::after { content: 'Вход'; font-size: 15px; }
  .bar > .kashti-top { order: 5; width: auto; flex: 1; min-width: 0; }
  .kashti-top a { font-size: 10.5px; }
}