/* Global Styles & Body */
/* ========================================================= */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #e9ecef;
    color: #343a40;
    line-height: 1.6;
}










    

/* --- Къде е болката? --- */
#pain-conditions-intro{padding:2px 0}
#pain-conditions-intro h2{font-size:clamp(28px,3.2vw,40px);line-height:1.2;margin:0 0 8px}
#pain-conditions-intro .pain-explanation{color:#64748b;max-width:900px;margin:0 0 22px}

/* Grid */
.pain-buttons-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px
}
@media (max-width:1200px){.pain-buttons-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.pain-buttons-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.pain-buttons-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pain-buttons-grid{grid-template-columns:1fr}}

/* Плочки */
.pain-button{
  display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e5e7eb;
  border-radius:16px;padding:16px;text-decoration:none;color:inherit;
  box-shadow:0 8px 24px rgba(2,6,23,.06);transition:.2s transform,.2s box-shadow
}
.pain-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,6,23,.08)}

/* Медия: статична снимка -> видео при hover */
.pain-button-media.image-container{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#f1f5f9
}

.pain-button:hover .hover-img{opacity:1}
.pain-button:hover .static-img{opacity:0}

/* Текст */
.pain-button-text{font-weight:800;color:#0f172a;font-size:1.05rem;letter-spacing:.1px}

/* Достъпност */
.pain-button:focus-visible{outline:3px solid rgba(14,165,233,.35);outline-offset:2px}

/* Ако имаш лепкав топ-бар */
:target{scroll-margin-top:80px}
/* Медия контейнер (1:1 квадрат) */
.pain-button-media.image-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;   /* квадрат */
  background: #f1f5f9;
}



/* --- Slider container --- */
.pcarousel{position:relative}
.pc-viewport{overflow:hidden}
.pc-track{display:flex;gap:12px;will-change:transform;transition:transform .35s ease}

/* Карти: по-малки + responsive брой на екран */
.pc-card{flex:0 0 80%;}                      /* мобилен: 1 карта (~80% ширина) */
@media (min-width:700px){ .pc-card{flex:0 0 33.333%;} } /* таблет: 3 карти */
@media (min-width:1100px){ .pc-card{flex:0 0 20%;} }    /* лаптоп/десктоп: 5 карти */

.pc-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px;
  text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(2,6,23,.06);
  transition:transform .2s, box-shadow .2s; display:flex;flex-direction:column;gap:10px
}
.pc-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,6,23,.08)}
.pc-card h3{margin:2px 0 2px;font-size:.98rem;font-weight:800;color:#0f172a}
.pc-card p{margin:0;color:#64748b;font-size:.92rem;line-height:1.45}

/* 1:1 медия с видео при hover */
.pc-card .media{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:#f1f5f9}
.pc-card .media .static,
.pc-card .media .hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;transition:opacity .35s}
.pc-card .media .hover{opacity:0;pointer-events:none}
.pc-card:hover .media .hover{opacity:1}
.pc-card:hover .media .static{opacity:0}

/* Бутони: видими на ≥900px, скрити на мобилен */
.pc-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;
  box-shadow:0 10px 24px rgba(2,6,23,.12);display:grid;place-items:center;
  font-size:20px;font-weight:800;color:#0f172a;cursor:pointer;z-index:2
}
.pc-btn.prev{left:-6px}
.pc-btn.next{right:-6px}
.pc-btn:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:899.98px){ .pc-btn{display:none} }

/* Дреболии */
@media (max-width:600px){ .pc-btn.prev{left:4px} .pc-btn.next{right:4px} }
:root{
  --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --blue:#0ea5e9; --green:#16a34a; --accent:#22c55e;
  --shadow:0 20px 60px rgba(2,6,23,.12); --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:#f8fafc;
}

/* HERO */
.hero-pro{
  padding:72px 0 56px;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(700px 320px at 95% 10%, rgba(20,184,166,.10), transparent 60%);
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.hero-pro__wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
}
.hero-pro__eyebrow{
  display:inline-block;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--blue);
  margin-bottom:6px;
}
.hero-pro__title{
  margin:0 0 8px;
  font-size:clamp(34px,5.4vw,56px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
}
.brand-blue{color:var(--blue)}
.brand-green{color:var(--green)}
.hero-pro__subtitle{
  color:#475569;
  font-size:clamp(16px,2.2vw,20px);
  line-height:1.7;
  max-width:680px;
  margin:8px 0 0;
}
.link-accent{color:#0284c7;font-weight:600;text-decoration:underline}

.hero-pro__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border-radius:12px;
  padding:12px 18px;
  text-decoration:none;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
}
.btn-outline{
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
}
.btn-outline:hover{background:#f1f5f9}

.hero-pro__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:28px;
}
.stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:18px;
  text-align:center;
}
.stat__value{font-size:clamp(24px,3.6vw,32px);font-weight:800}
.stat__label{color:var(--muted);font-weight:600;font-size:14px}

.hero-pro__media{position:relative;margin:0}
.hero-pro__media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.badge-top,
.badge-bottom{
  position:absolute;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  padding:10px 14px;
  font-weight:700;
}
.badge-top{top:14px;right:14px}
.badge-bottom{left:14px;bottom:14px}

/* Responsive */
@media(max-width:900px){
  .hero-pro__wrap{grid-template-columns:1fr}
  .hero-pro__media{order:-1;margin-bottom:24px}
}
.hero-pro__media img{
  width:100%;
  height:auto;
  display:block;

  /* махаме твърдите краища */
  border-radius:0;
  box-shadow:none;

  /* преливане отляво → надясно */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 26%);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;

  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 26%);
  mask-repeat:no-repeat;
  mask-size:100% 100%;
}
@media(max-width:900px){
  .hero-pro__media img{
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.25) 10%,
      rgba(0,0,0,.55) 18%,
      rgba(0,0,0,.85) 26%,
      rgba(0,0,0,1) 34%);
    mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.25) 10%,
      rgba(0,0,0,.55) 18%,
      rgba(0,0,0,.85) 26%,
      rgba(0,0,0,1) 34%);
  }
}
/* WHY section */
.why{
  padding:72px 0;
  background:
    radial-gradient(680px 320px at 10% 0%, rgba(34,197,94,.08), transparent 60%),
    radial-gradient(760px 360px at 90% 20%, rgba(20,184,166,.07), transparent 60%),
    linear-gradient(#e8eef6 0, #e8eef600 200px) /* леко „въздушно“ топко */
}
.why__wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:32px;
  align-items:start;
}

/* Лява колона */
.why__title{
  margin:0 0 12px;
  font-size:clamp(28px,4.6vw,44px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.01em;
}
.why__lead{font-size:clamp(18px,2.4vw,20px); margin:6px 0 6px}
.why__text{color:#0f172a; margin:0 0 12px}
.accent{color:var(--green); font-weight:700}
.accent-red{color:#ef4444; font-weight:700}

.why-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  padding:18px 20px;
  margin:12px 0 16px;
  position:relative;
}
.why-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--green));
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.why-card__link{display:inline-block; margin-top:6px; font-weight:700; color:var(--blue)}

.why-list{
  display:grid;
  gap:12px;
  margin:10px 0 12px;
}
.why-pill{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  text-decoration:none; color:var(--text); font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.why-pill:hover{background:#f8fafc}
.why-pill .dot{
  width:10px; height:10px; border-radius:999px; display:inline-block;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}
.why__muted{color:#64748b; max-width:62ch}

/* Дясна колона: снимка */
.why__media{
  position:relative; margin:0;
  filter: drop-shadow(16px 18px 0 rgba(15,23,42,.06)); /* „изтеглена“ сянка вдясно */
}
.why__media img{
  width:100%; display:block; height:auto;
  border-radius:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  background:#fff;
}

/* малка карта / бейдж долу вдясно */
.why-badge{
  position:absolute; right:14px; bottom:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  text-align:left;
}
.why-badge__brand{font-weight:800; font-size:18px; line-height:1}
.why-badge__sub{font-size:12px; color:#64748b; margin-top:4px}

/* Опционално: само ляво преливане на снимката (ако искаш „сливане“ с фона отляво) */
.why--softfade .why__media img{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 28%);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 28%);
  mask-repeat:no-repeat; mask-size:100% 100%;
}

/* Responsive */
@media (max-width: 980px){
  .why__wrap{grid-template-columns:1fr; gap:20px}
  .why__media{order:-1}
  .why-badge{right:10px; bottom:10px}
}
.why { padding:60px 0; background:#f1f5f9 }
.why__wrap { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:24px }

.why__title {
  margin:0 0 16px;
  font-size:clamp(26px,4vw,34px);
  font-weight:800;
  color:#1e3a8a; /* синьо */
}

/* общ стил за карти */
.why-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.why-card__title {
  margin:0 0 14px;
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}
.why-card p { margin:10px 0; line-height:1.6 }

/* списък */
.why-list { list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:10px }
.why-list li { display:flex; align-items:center; gap:10px }
.dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--green, #22c55e);
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}

/* акцентна карта */
.why-card--accent {
  background:#ecfdf5;
  border-color:#bbf7d0;
  text-align:center;
}
.final-quote {
  margin-top:px;
  font-size:18px;
  font-weight:700;
  color:#16a34a;
}

/* акценти */
.accent { color:#22c55e; font-weight:700 }
.accent-red { color:#ef4444; font-weight:700 }
/* ===== DM Physio – Подробна секция ===== */
.dm-flow {
  padding:15px 0;
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(34,197,94,.06), transparent 60%),
    radial-gradient(520px 240px at 88% 18%, rgba(2,132,199,.06), transparent 60%);
}
.dm-flow__wrap {
  max-width:880px;
  margin:0 auto;
}

/* Заглавие и интро */
.dm-flow__title {
  margin:0 0 14px;
  font-size:clamp(28px,4.2vw,42px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  text-align:center;
  color:var(--text);
}
.brand-blue { color:var(--blue); }
.brand-green { color:var(--green); }

.dm-flow__intro {
  margin:0 auto 32px;
  max-width:70ch;
  font-size:clamp(16px,2.2vw,19px);
  color:#334155;
  text-align:center;
  line-height:1.7;
}

/* Подробни точки */
.dm-flow__points {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:30px;
}
.dm-flow__point h3 {
  font-size:20px;
  font-weight:700;
  margin:0 0 0px;
  color:var(--blue);
}
.dm-flow__point p {
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#0f172a;
}

/* Резултат и мисия */
.dm-flow__result {
  margin:0 auto 16px;
  max-width:65ch;
  font-size:clamp(17px,2.3vw,20px);
  text-align:center;
  line-height:1.7;
}
.dm-flow__result strong { color:var(--green); }

.dm-flow__mission {
  margin:0 auto;
  max-width:65ch;
  text-align:center;
  font-size:clamp(17px,2.3vw,20px);
  font-weight:700;
  color:#0f172a;
}
.dm-flow__mission em {
  font-style:normal;
  color:#ef4444;
  font-weight:800;
}

/* Responsive */
@media (max-width:640px) {
  .dm-flow { padding:56px 0; }
  .dm-flow__points { gap:24px; }
}
/* Двуколонен layout */
.two-col__wrap {
  display:grid;
  grid-template-columns: 2fr 1fr; /* ляво по-широко */
  gap:40px;
  align-items:start;
}
.two-col__left section { margin-bottom:0px; }

/* Дясна колона: най-чести състояния */
.conditions__title {
  font-size: 50px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--blue);
   text-align:center; 
}
.conditions-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.conditions-list li a {
  display:block;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
}
.conditions-list li a:hover {
  background:#f8fafc;
  border-color:var(--green);
  color:var(--green);
}

/* Responsive */
@media(max-width:900px){
  .two-col__wrap{
    grid-template-columns:1fr;
  }
  .two-col__right{
    margin-top:20px;
  }
}
.conditions__title {
  font-size:24px;
  font-weight:700;
  margin-bottom:14px;
  color:var(--blue);
}

/* Вертикален списък – 1 под друго */
.pain-buttons-vertical {
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Карта (по-малка) */
.pain-button {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  transition:all .2s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.pain-button:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  border-color:var(--green);
}

/* Медия контейнер – по-компактна пропорция */
.image-container {
  position:relative;
  aspect-ratio:5/3; /* по-ниско от 16:9 */
  overflow:hidden;
  background:#f8fafc;
}
.image-container img,
.image-container video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .25s ease;
}
.static-img { opacity:1; }
.hover-img { opacity:0; }
.pain-button:hover .static-img { opacity:0; }
.pain-button:hover .hover-img { opacity:1; }

/* Текст – по-малък */
.pain-button-text {
  padding:0px 0px;
  font-size:24px;
  font-weight:600;
  color:#0f172a;
  line-height:1.3;
  text-align:center;
}
.pain-button-hook {
  font-size:12px;
  color:#475569;
  line-height:1.4;
  margin:4px 8px 10px;
  text-align:center;
}
/* Общ прозорец */
.recovery-box {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:28px;
  margin:32px 0;
  max-width:800px;
}
.recovery__inner {
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Заглавие и увод */
.recovery__title {
  font-size:36px;
  font-weight:800;
  text-align:center;
  margin:0;
  color:var(--green);
}
.recovery__intro {
  font-size:15px;
  color:#475569;
  line-height:1.7;
  margin:0 auto;
  max-width:65ch;
  text-align:center;
}

/* Стъпки вътре */
.recovery__steps {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.recovery__step {
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.recovery__step:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  border-color:var(--green);
}
.recovery__step .icon {
  font-size:22px;
  flex-shrink:0;
  margin-top:2px;
}
.recovery__step h3 {
  font-size:16px;
  font-weight:700;
  margin:0 0 4px;
  color:var(--blue);
}
.recovery__step p {
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:#0f172a;
}
/* Прозорец около CTA */
.cta-box {
    
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:14px 8px;
  margin:22px auto;
  text-align:center;
  max-width:600px;
}

/* Текст */
.cta-text {
  font-size:17px;
  font-weight:600;
  color:#0f172a;
  margin:0 0 18px;
  line-height:1.5;
}

/* Бутон */
.btn-book {
  display:inline-block;
  padding:12px 36px;
  background:linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff;
  font-weight:700;
  font-size:15px;
  border-radius:10px;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(34,197,94,.35);
  transition:all .25s ease;
}
.btn-book:hover {
  background:linear-gradient(135deg, #16a34a, #15803d);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(22,163,74,.4);
}
.reviews-section {
  padding:48px 20px;
  background:#f9fafb;
}

.reviews-box {
  max-width:1300px;
  margin:0 auto;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  padding:0px;
  text-align:center;
}

.reviews-title {
  font-size:46px;
  font-weight:800;
  margin-bottom:4px;
  color:var(--blue);
}
/* --- Секция: Къде е болката? --- */
.hero-subpage {
  padding:64px 0 40px;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(34,197,94,.07), transparent 60%),
    radial-gradient(520px 240px at 88% 18%, rgba(2,132,199,.06), transparent 60%);
}

.pci-title{
  margin:0 0 10px;
  font-size:clamp(28px,4.2vw,40px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
  text-align:center;
}

.pci-intro{
  margin:8px auto 14px;
  max-width:76ch;
  font-size:clamp(16px,2.2vw,18px);
  color:#334155;
  line-height:1.75;
  text-align:center;
}
.pci-intro .pci-accent{ color:var(--green); font-weight:700; }

.pci-helper{
  text-align:center;
  color:#64748b;
  font-size:14px;
  margin:0 0 18px;
}

/* Grid с карти (responsive) */
.pain-buttons-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media(min-width:900px){
  .pain-buttons-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media(min-width:1200px){
  .pain-buttons-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Карта */
.pain-button{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pain-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  border-color:rgba(34,197,94,.35);
}
.pain-button:focus-visible{
  outline:3px solid rgba(2,132,199,.35);
  outline-offset:3px;
}

/* Медия контейнер – 4:3 за по-добра четимост, видео при hover */
.image-container{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:10px;
  background:#f1f5f9;
}
.image-container img,
.image-container video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .25s ease;
}
.static-img{ opacity:1; }
.hover-img{ opacity:0; }
.pain-button:hover .static-img,
.pain-button:focus-within .static-img{ opacity:0; }
.pain-button:hover .hover-img,
.pain-button:focus-within .hover-img{ opacity:1; }

/* Текст под медията */
.pain-button-text{
  font-weight:700;
  color:var(--text);
  padding:0 2px 2px;
  line-height:1.3;
  text-align:center;
  font-size:25px;
}

/* Финален подсказващ ред */
.pci-footnote{
  margin:16px auto 0;
  max-width:70ch;
  color:#475569;
  font-size:14px;
  text-align:center;
}
/* --- SECTION wrapper --- */
.form-reveal{
  padding:40px 0;
  background:
    radial-gradient(700px 280px at 12% 0%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(620px 240px at 88% 16%, rgba(34,197,94,.08), transparent 60%),
    #ffffff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.reveal-head{ text-align:center; margin-bottom:12px }
.reveal-head h3{ margin:0 0 6px; font-size:clamp(20px,3vw,28px); font-weight:900; color:#0b3b6f }
.reveal-head p{ margin:0; color:#334155 }

/* --- Button (summary) --- */
.btn--block{ width:100% }
.reveal-btn{
  --grad1:#0ea5e9; --grad2:#22c55e;
  position:relative; user-select:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; border-radius:16px;
  font-weight:900; letter-spacing:.01em;
  color:#0f172a; background:#ffffff;
  border:2px solid transparent;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(135deg,var(--grad1),var(--grad2));
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  list-style:none;
}
.reveal > summary::-webkit-details-marker{ display:none }
.reveal-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(2,6,23,.12) }
.reveal-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(34,197,94,.2), 0 12px 28px rgba(2,6,23,.12) }

.reveal-btn .btn-icon{ font-size:18px; transform:translateY(-1px) }
.chev{
  width:10px; height:10px; border:2px solid currentColor; border-left:0; border-top:0;
  transform:rotate(45deg); transition:transform .25s ease, opacity .2s ease; opacity:.75;
}
.reveal[open] .chev{ transform:rotate(-135deg) }

.reveal-btn .btn-text{ display:inline-flex; gap:6px; align-items:center }
.label-close{ display:none }
.reveal[open] .label-open{ display:none }
.reveal[open] .label-close{ display:inline }

.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(2,6,23,.2); border-top-color:var(--grad2);
  animation:spin 1s linear infinite; display:none;
}
.reveal.is-loading .btn-spinner{ display:inline-block }
.reveal.is-loading .chev{ opacity:0 }

/* --- Reveal panel --- */
.reveal{ margin-top:12px }
.reveal-panel{
  overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px);
  transition:max-height .45s ease, opacity .35s ease, transform .35s ease;
  margin-top:10px;
  border:1px solid var(--line); border-radius:16px; background:#fff;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.reveal[open] .reveal-panel{ max-height:2300px; opacity:1; transform:translateY(0) }

/* --- Hints --- */
.panel-head{ padding:14px 14px 0 }
.panel-hints{
  list-style:none; padding:0; margin:0 0 10px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.panel-hints li{
  padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; background:#f8fafc; font-weight:700; color:#0f172a; font-size:14px;
}

/* --- Iframe + loader --- */
.gform-embed{
  position:relative; margin:10px; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}
.gform-embed iframe{
  display:block; width:100%; height:clamp(900px, 80dvh, 1400px); border:0;
}
.gform-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.95));
  color:#0f172a; font-weight:700;
}
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(2,6,23,.15); border-top-color:#22c55e;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.panel-note{ margin:8px 14px 14px; color:#64748b; font-size:13px }
html { scroll-behavior: smooth; }


/* ===== МОБИЛЕН ПАТЧ (само до 768px) – НЕ засяга лаптоп/десктоп ===== */
@media (max-width: 768px){

  /* Контейнер и типография */
  .container{ padding-left:16px; padding-right:16px; }
  h1,h2,h3{ word-wrap:break-word; }

 

  /* HERO: две колони -> една */
  .hero-pro__wrap{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
  .why__media{ order:2; }
  .hero-pro__title{ font-size:clamp(26px,7vw,34px); line-height:1.15; }
  .hero-pro__subtitle{ font-size:16px; }

  /* CTA бутони в HERO */
  .hero-pro__cta{ display:grid; gap:10px; }
  .hero-pro__cta .btn,
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-book{ width:100%; min-height:48px; padding:12px 16px; border-radius:14px; font-weight:800; }

  /* Статистики */
  .hero-pro__stats{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
  .stat{ padding:10px; border-radius:12px; text-align:center; }

  /* Двуколонен layout -> една колона */
  .two-col__wrap{ grid-template-columns:1fr; gap:20px; }

  /* „Как работим“ – четимост */
  .dm-flow__title,
  .recovery__title,
  .conditions__title{ font-size:clamp(20px,5.2vw,26px); }

  /* Стъпките – 1 колона */
  .recovery__steps{ grid-template-columns:1fr; gap:12px; }
  .recovery__step{ padding:12px; border-radius:12px; }

  /* CTA кутия */
  .cta-box{ flex-direction:column; align-items:stretch; gap:10px; }

  /* Грид „Къде е болката?“ */
  .pain-buttons-grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .pain-buttons-grid{ grid-template-columns:1fr; }
}




/* Формата (reveal) – мобилна височина и по-малки отстояния */
@media (max-width: 768px){
  .reveal-head h3{ font-size:clamp(20px,6vw,24px); }
  .gform-embed{ margin:8px; border-radius:12px; }
  .gform-embed iframe{ height:clamp(680px, 72svh, 1100px); }
  .panel-hints li{ font-size:13px; }
}

/* Карта (Google Maps) – responsive контейнер */
@media (max-width: 768px){
  .map{ aspect-ratio:4/3; width:100%; border-radius:12px; overflow:hidden; }
  .map iframe{ width:100%; height:100%; }
}



/* Скрол към секцията „Как работим“ – да не го покрива топ бар на мобилно */
@media (max-width: 768px){
  #work{ scroll-margin-top: 72px; }
}
/* ===== Scoped само за секцията ===== */
.advice-reveal-block{ max-width:880px; margin:0 auto; padding:16px; }
.advice-reveal-block .advice-intro{ text-align:center; margin-bottom:10px; }
.advice-reveal-block .advice-intro h3{
  margin:0 0 6px; font-size:clamp(20px,4.5vw,28px); font-weight:900; color:#0b3b6f;
}
.advice-reveal-block .advice-intro p{ margin:0; color:#334155; }
.advice-reveal-block .advice-intro p strong{ color:#0ea5e9; }

/* Success банер */
.advice-reveal-block .advice-success{
  margin:0 0 10px; padding:12px 14px; border:1px solid #bbf7d0; background:#f0fdf4;
  color:#166534; border-radius:12px; text-align:center; font-weight:700;
}

/* Summary бутон (Отвори формата) */
.advice-reveal{ margin-top:12px; }
.advice-reveal > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid #e2e8f0; background:#51f163;
  font-weight:900; color:#0f172a; position:relative; transition:box-shadow .2s, transform .1s;
}
.advice-reveal > summary::-webkit-details-marker{ display:none; }
.advice-reveal > summary:hover{ box-shadow:0 8px 18px rgba(255, 255, 255, 0.08); transform:translateY(-1px); }
.advice-reveal .chev{
  width:10px; height:10px; border-right:2px solid #0f172a; border-bottom:2px solid #0f172a;
  transform:rotate(45deg); transition:transform .25s ease;
}   
.advice-reveal[open] .chev{ transform:rotate(-135deg); }

/* Панел (анимация) */
.advice-panel{
  overflow:hidden; max-height:0; opacity:0; transition:max-height .35s ease, opacity .25s ease;
  margin-top:10px;
}
.advice-reveal[open] .advice-panel{ max-height:2200px; opacity:1; }

/* Карта и форма */
.advice-reveal-block .form-card{
  background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.08); padding:18px;
}
.advice-reveal-block .form-card__title{
  margin:4px 0 14px; text-align:center; font-weight:900; font-size:20px; color:#0f172a;
}
.advice-reveal-block .advice-form{ display:grid; gap:12px; }
.advice-reveal-block .form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:680px){ .advice-reveal-block .form-row{ grid-template-columns:1fr; } }
.advice-reveal-block .field{ display:grid; gap:6px; }
.advice-reveal-block .field label{ font-weight:700; color:#0f172a; }
.advice-reveal-block .field input,
.advice-reveal-block .field textarea{
  width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.advice-reveal-block .field input::placeholder,
.advice-reveal-block .field textarea::placeholder{ color:#94a3b8; }
.advice-reveal-block .field input:focus,
.advice-reveal-block .field textarea:focus{
  border-color:#93c5fd; box-shadow:0 0 0 4px rgba(14,165,233,.15);
}

/* Действия */
.advice-reveal-block .form-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center;
}
@media (max-width:480px){ .advice-reveal-block .form-actions{ grid-template-columns:1fr; } }
.advice-reveal-block .btn-cancel{
  appearance:none; border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a;
  border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer;
}
.advice-reveal-block .btn-cancel:hover{ background:#f1f5f9; }
.advice-reveal-block .btn-submit{
  appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:900; color:#fff; cursor:pointer;
  background-image:linear-gradient(90deg,#0ea5e9,#22c55e); box-shadow:0 8px 20px rgba(14,165,233,.25);
}
.advice-reveal-block .btn-submit[disabled]{ opacity:.7; cursor:progress; }
.advice-reveal-block .btn-submit:hover{ transform:translateY(-1px); }

.advice-reveal-block .form-note{ margin:4px 2px 0; text-align:center; color:#64748b; font-size:13px; }
/* --- Window shell за секцията --- */
.advice-window{
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 40px rgba(2,6,23,.10);
  overflow:hidden;    /* за да не „стърчат“ вътрешни елементи */
}

/* Титълбар – усещане за “прозорец” */
.advice-window__titlebar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:
    linear-gradient(180deg, #f8fafc, #eef2f7);
  border-bottom:1px solid #e2e8f0;
}

/* „светофар“ точки като macOS */
.win-dots{ display:flex; gap:8px; }
.win-dots .dot{
  width:12px; height:12px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.win-dots .red{   background:#ff5f57; }
.win-dots .amber{ background:#febc2e; }
.win-dots .green{ background:#28c840; }

.advice-window__titlebar .title{
  font-weight:800; color:#0f172a; font-size:14px; letter-spacing:.02em;
}

/* Тяло на прозореца */
.advice-window__body{
  padding:18px;
}

/* Премахваме излишни външни марджини на първи/последен елемент вътре,
   за да стои добре в рамката */
.advice-window__body > :first-child{ margin-top:0; }
.advice-window__body > :last-child{ margin-bottom:0; }

/* Малки доработки за съвместимост с вече наличния ти стил */
@media (max-width:640px){
  .advice-window{ border-radius:16px; }
  .advice-window__body{ padding:14px; }
}
footer {
  font-size: 25px;          /* по-едър базов текст */
  line-height: 1.6;
  background: #f9f9f9;
  padding: 40px 20px;
  color: #222;
}

footer h2 {
  font-size: 2 rem;        /* ~25px */
  margin-bottom: 15px;
  font-weight: 700;
}

footer .contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

footer .social-links img {
  width: 80px;              /* по-големи социални икони */
  height: 80px;
  object-fit: contain;
}

footer .icon {
  width: 60px;              /* по-големи иконки за телефон/часовник/адрес */
  height: 60px;
  flex-shrink: 0;
}

footer .contact-item {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

footer .work-hours span,
footer .address-item span,
footer .contact-item span {
  font-size: 1.05rem;       /* малко по-едър от базовия */
}

footer .footer-links {
  text-align: center;
  margin-top: 30px;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  footer {
    font-size: 16px;
  }
  footer .contact-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
  footer iframe {
    width: 100% !important;
    height: 220px !important;
  }
}
/* ===== FOOTER – layout и визия като на скрийншота ===== */
footer{
  background:#f3f5f7;
  padding: 40px 0 28px;
  color:#0f172a;
  font-size: 18px;
  line-height: 1.6;
}

footer .contact-section{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Три колони: карта (фиксирана), център (икони), дясно (телефон/час/адрес) */
footer .contact-container{
  display: grid;
  grid-template-columns: 360px 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

/* --- ЛЯВО: карта --- */
footer .contact-left .map iframe{
  width: 360px; height: 260px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  background:#e9eef3;
  display:block;
}

/* --- ЦЕНТЪР: заглавие + социални --- */
footer .contact-center{ text-align: center; }
footer .contact-center h2{
  margin: 0 0 14px;
  font-size: 2rem;        /* ~32px */
  font-weight: 800;
}
footer .social-links{
  display: inline-flex;
  gap: 14px;
}
footer .social-links a{ display:inline-flex; }
footer .social-links img{
  width: 64px; height: 64px;   /* едри социални икони */
  object-fit: contain; display:block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
  border-radius: 8px;
}

/* --- ДЯСНО: телефон голям, работно време, адрес --- */
footer .contact-right{ }
footer .contact-item{ display:flex; gap:12px; align-items:center; margin-bottom: 16px; }
footer .icon{ width: 48px; height: 48px; object-fit: contain; flex:0 0 48px; }

footer .contact-item.phone .icon{ width: 54px; height: 54px; }
footer .contact-item.phone span{
  font-size: 2.2rem;      /* ~35px */
  font-weight: 800;
  letter-spacing: .5px;
}

footer .work-hours .icon{ width: 54px; height: 54px; }
footer .address-item .icon{ width: 48px; height: 48px; }

footer .map-link{
  color:#0b66ff;
  text-decoration: underline;
}
footer .map-link:hover{ text-decoration: none; }

/* Долен ред с линкове */
footer .footer-links{
  margin-top: 22px; text-align:center; font-size: 1.05rem;
}
footer .footer-links a{ color:#0b66ff; }

/* --- Responsive --- */
@media (max-width: 1024px){
  footer .contact-container{
    grid-template-columns: 320px 1fr;    /* карта + комбинирана дясна колона */
    grid-auto-rows: auto;
  }
  footer .contact-center{ order: 2; }
  footer .contact-right{ order: 3; }
  footer .contact-left .map iframe{ width: 320px; height: 230px; }
}
@media (max-width: 768px){
  footer{ font-size: 16px; }
  footer .contact-container{ grid-template-columns: 1fr; gap: 22px; }
  footer .contact-left .map iframe{ width: 100%; height: 220px; }
  footer .social-links img{ width: 56px; height: 56px; }
  footer .contact-item.phone span{ font-size: 1.9rem; }
}
/* === Mobile-first оптимизации === */

/* предотвратява нежелано уголемяване на шрифта в iOS */
html { -webkit-text-size-adjust: 100%; }

/* без хоризонтален скрол */
html, body { overflow-x: hidden; }



/* Логото да не е прекалено високо на мобилно */
@media (max-width: 768px){
  .main-logo{ width: 50px; height: auto; }
}



/* Контейнерът – по-тесни падинги на тесни екрани */
@media (max-width: 768px){
  main .container{ padding-left: 14px; padding-right: 14px; }
}

/* Карти/решетка: гарантирано 1 колона на много тесни екрани */
@media (max-width: 420px){
  main .cards{ grid-template-columns: 1fr; }
}

/* По-малки вертикални разстояния на мобилно за по-дълги страници */
@media (max-width: 560px){
  main .section, main .section--alt{ padding: 28px 0; }
  main .cta{ padding: 36px 0; }
  main .hero-subpage{ padding: 48px 0 28px; }
}

/* Бутоните в картите да не излизат извън екрана */
main .card__actions .btn{ max-width: 100%; }

/* Понякога изображения с позициониране могат да преливат — подсигуряваме */
main .card__media{ overflow: hidden; }
/* ====== UX подобрения и ефекти за фуутъра ====== */

/* 1) Глобални променливи за цветове и сенки */
:root{
  --f-accent: #0b66ff;
  --f-ink: #0f172a;
  --f-bg: #f3f5f7;
  --f-soft-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --f-ring: 0 0 0 3px rgba(11,102,255,.18);
}

/* 2) Плавни преходи по подразбиране за кликаеми неща */
footer a, 
footer .social-links a,
footer .contact-item,
footer .map-link,
footer .footer-links a,
footer .contact-item span,
footer .icon,
footer .social-links img{
  transition: 
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease,
    opacity .25s ease,
    color .25s ease,
    background-color .25s ease;
}

/* 3) Социални икони – „изплуване“ + меко сияние */
footer .social-links a{
  position: relative;
  border-radius: 10px;
  outline: none;
}
footer .social-links a:hover,
footer .social-links a:focus-visible{
  transform: translateY(-4px) scale(1.03);
}
footer .social-links a:hover img,
footer .social-links a:focus-visible img{
  filter: drop-shadow(0 8px 18px rgba(11,102,255,.25));
}
footer .social-links a:active{
  transform: translateY(-1px) scale(.99);
}

/* 4) Контакт редове – фина карта при ховър */
footer .contact-item{
  border-radius: 14px;
  padding: 8px 10px;
}
footer .contact-item:hover{
  background: rgba(11,102,255,.06);
  box-shadow: var(--f-soft-shadow);
}
footer .contact-item .icon{
  transition: transform .25s ease;
}
footer .contact-item:hover .icon{
  transform: scale(1.06) rotate(-2deg);
}

/* 5) Телефон – акцент при ховър (лек „пулс“) */
@keyframes f-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
footer .contact-item.phone:hover span{
  color: var(--f-accent);
  animation: f-pulse .8s ease-in-out;
}

/* 6) Линкове долу – анимирано подчертаване */
footer .footer-links a{
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
}
footer .footer-links a:hover,
footer .footer-links a:focus-visible{
  color: var(--f-accent);
  background-size: 100% 2px;    /* от центъра към краищата */
}

/* 7) Линк към карта – „индикатор“ при ховър */
footer .map-link{
  position: relative;
}
footer .map-link::after{
  content:"↗";
  margin-left: .35em;
  opacity: .0;
  transition: transform .25s ease, opacity .25s ease;
}
footer .map-link:hover::after,
footer .map-link:focus-visible::after{
  opacity: .9;
  transform: translateY(-1px);
}

/* 8) Карта – фино издигане на iframe при ховър */
footer .contact-left .map iframe{
  transition: transform .3s ease, box-shadow .3s ease;
}
footer .contact-left .map iframe:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 9) Фокус стилове за достъпност */
footer a:focus-visible{
  box-shadow: var(--f-ring);
  border-radius: 10px;
}

/* 10) „Back to top“ бутон за фуутър (скрива се на мобилно) */
footer .back-to-top{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: white;
  box-shadow: var(--f-soft-shadow);
  font-weight: 700;
}
footer .back-to-top:hover{ transform: translateY(-3px); }
@media (max-width: 768px){
  footer .back-to-top{ display:none; }
}

/* 11) Тъмна тема (автоматично) */
@media (prefers-color-scheme: dark){
  :root{
    --f-bg:#0b1220;
    --f-ink:#e5e7eb;
  }
  footer{
    background: var(--f-bg);
    color: var(--f-ink);
  }
  footer .footer-links a,
  footer .map-link{ color: var(--f-accent); }
  footer .social-links img{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
  footer .contact-item:hover{ background: rgba(11,102,255,.14); }
}

/* 12) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}
@media (max-width: 900px){
  .hero-pro__media img,
  .why__media img{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}
/* Контейнер */
.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* HERO layout */
.hero-pro{
  padding:72px 0 56px;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(700px 320px at 95% 10%, rgba(20,184,166,.10), transparent 60%);
}
.hero-pro__wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
}
.hero-pro__eyebrow{display:inline-block;font-weight:700;letter-spacing:.06em;color:#0ea5e9;margin-bottom:6px}
.hero-pro__title{margin:0 0 8px;font-size:clamp(34px,5.4vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.02em}
.brand-blue{color:#0ea5e9}
.brand-green{color:#16a34a}
.hero-pro__subtitle{color:#475569;font-size:clamp(16px,2.2vw,20px);line-height:1.7;max-width:680px;margin:8px 0 0}
.hero-pro__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:12px;padding:12px 18px;text-decoration:none;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 8px 20px rgba(34,197,94,.35)}
.btn-outline{background:#fff;border:1px solid #e2e8f0;color:#0f172a}
.btn-outline:hover{background:#f1f5f9}

.hero-pro__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.stat{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.05);padding:18px;text-align:center}
.stat__value{font-size:clamp(24px,3.6vw,32px);font-weight:800}
.stat__label{color:#64748b;font-weight:600;font-size:14px}

/* Медия */
.hero-pro__media{position:relative;margin:0}
.hero-pro__media img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.10)}

/* Мека „маска“ на снимката за десктоп (за елегантен край) */
.hero-pro__media img{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 26%);
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
          mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,1) 26%);
  mask-repeat:no-repeat; mask-size:100% 100%;
}

/* Бейдж върху снимката */
.why-badge{
  position:absolute; right:14px; bottom:14px;
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:12px 14px; box-shadow:0 6px 16px rgba(0,0,0,.12); text-align:left
}
.why-badge__brand{font-weight:800; font-size:18px; line-height:1}
.why-badge__sub{font-size:12px; color:#64748b; margin-top:4px}

/* Мобилни корекции */
@media (max-width:900px){
  .hero-pro__wrap{grid-template-columns:1fr}
  .hero-pro__media{order:-1;margin-bottom:16px}
  .hero-pro__title{font-size:clamp(26px,7vw,34px)}
  .hero-pro__subtitle{font-size:16px}
  .hero-pro__cta{display:grid;gap:10px}
  .btn,.btn-primary,.btn-outline{width:100%;min-height:48px;border-radius:14px;font-weight:800}
  /* изключваме маската на мобилно за по-добро представяне */
  .hero-pro__media img{-webkit-mask-image:none;mask-image:none}
}
/* Резервира място за HERO снимката на мобилно (намалява LCP/CLS) */
@media (max-width: 600px){
  .hero-pro__media { aspect-ratio: 1 / 1; } /* 1600x1067 ≈ 3:2 */
  .hero-pro__media img { width: 100%; height: 100%; object-fit: cover; }
}
/* Мобилно: дръж снимката, докато видеото реално не тръгне */
@media (hover: none), (pointer: coarse){
  .image-container,
  .pain-button-media{
    position: relative;
  }

  /* Вашият JS вече добавя .is-playing при старт — тогава показваме видеото */
  .image-container.is-playing .hover-img,
  .pain-button-media.is-playing .hover-img{
    opacity: 1;
  }
}
/* Показвай снимката по подразбиране */
.image-container .static-img { opacity: 1; }
.image-container .hover-img  { opacity: 0; }

/* Скрий снимката само ако ВИДЕОТО Е ГОТОВО */
.image-container.video-ready:hover .static-img,
.image-container.is-playing    .static-img { opacity: 0; }

.image-container.video-ready:hover .hover-img,
.image-container.is-playing    .hover-img  { opacity: 1; }

/* Сваля „лошото“ правило при hover върху картата */
.pain-button:hover .static-img { opacity: 1; }           /* override старото */
.pain-button:hover .hover-img  { opacity: 0; }           /* докато няма video-ready */

/* Когато контейнерът е готов – разреши hover прехода */
.pain-button:hover .image-container.video-ready .static-img { opacity: 0; }
.pain-button:hover .image-container.video-ready .hover-img  { opacity: 1; }
/* === VIDEO HOVER: никога не крий статичната снимка,
   докато видеото не е готово/не играе === */

/* по подразбиране – снимката е видима, видеото скрито */
.image-container .static-img,
.pain-button-media .static-img{ opacity:1; transition:opacity .25s ease; }
.image-container .hover-img,
.pain-button-media .hover-img{ opacity:0; transition:opacity .25s ease; }

/* старото правило, което крие снимката при hover, го зануляваме */
.pain-button:hover .static-img{ opacity:1; }
.pain-button:hover .hover-img{ opacity:0; }

/* показваме видеото ЕДВА когато контейнерът е video-ready ИЛИ когато е в режим is-playing */
.image-container.video-ready:hover .static-img,
.pain-button-media.video-ready:hover .static-img{ opacity:0; }
.image-container.video-ready:hover .hover-img,
.pain-button-media.video-ready:hover .hover-img{ opacity:1; }

.image-container.is-playing .static-img,
.pain-button-media.is-playing .static-img{ opacity:0; }
.image-container.is-playing .hover-img,
.pain-button-media.is-playing .hover-img{ opacity:1; }

/* безопасно фоново покритие за контейнера (да няма сиво) */
.image-container,
.pain-button-media{
  background:#f1f5f9;
  position:relative;
  border-radius:12px;
  overflow:hidden;
}

/* на мобилно не използваме hover правила — JS управлява показването */
@media (hover:none){
  .image-container.video-ready:hover .static-img,
  .pain-button-media.video-ready:hover .static-img{ opacity:1; }
  .image-container.video-ready:hover .hover-img,
  .pain-button-media.video-ready:hover .hover-img{ opacity:0; }
}