@media (max-width:1090px) {
  .nav-mobile-row { display: flex !important; }
  .brand, .nav-cta-main { display: none !important; }
}
@media (min-width:1091px) {
  .nav-mobile-row { display: none !important; }
  .brand, .nav-cta-main { display: flex !important; }
}
@media (max-width:1090px) {
  .nav-mobile-row { display: flex !important; }
  .brand, .nav-cta-main { display: none !important; }
}
@media (min-width:1091px) {
  .nav-mobile-row { display: none !important; }
  .brand, .nav-cta-main { display: flex !important; }
}
@media (min-width:1091px) {
  .nav-mobile-row {
    display: none !important;
  }
  .brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .brand-title {
    font-size: 20px;
    font-weight: 800;
    margin-left: 0;
  }
  .nav-cta {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
}
@media (max-width:1090px) {
  .nav-mobile-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0 8px;
  }
  .brand-title {
    font-size: 18px;
    font-weight: 700;
    margin-left: 4px;
  }
  .mobile-ekv {
    min-width: 120px;
    font-size: 15px;
    padding: 0 10px;
  }
  .nav-cta,
  .brand,
  .nav-links {
    display: none !important;
  }
}
@media (max-width:1090px) {
  .mobile-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
}

  .brand {
    margin-right:0;
  }
  .nav-cta-main {
    margin-left:0;
    display:flex;
    justify-content:flex-end;
  }
.mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
  display: none !important;
}
.mobile-menu.is-open {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}
/* Мобильная навигация */
@media (max-width:1090px) {
  .nav-links {
    display: none;
  }
  .burger {
    display: block;
    margin-left: auto;
  }
  .nav-cta-main {
    margin-left: 16px;
      flex-direction: column !important;
      align-items: stretch;
      gap: 8px;
    order: 2;
    display: flex;
    align-items: center;
  }
  .brand {
    order: 1;
    display: flex;
    align-items: center;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
}
/* =========================================================
ФАЙЛ: /web/static/css/styles.css
Назначение: общий модуль стилей для лендинга PayBurst
Внимание: стили вынесены из шаблонов; шапку и служебные комментарии не удалять
========================================================= */

/* =====================
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
   ===================== */
:root{
  --color-bg: #ffffff;
  --color-text: #0f1a17;
  --color-primary: #147470; /* основной зелёный */
  --color-accent: #2d9691;  /* дополнительный */
  --color-muted: #eef6f5;
  --color-border: #e6f0ef;

  --shadow-lg: 0 10px 30px rgba(20,116,112,0.25);
  --shadow-md: 0 6px 18px rgba(20,116,112,0.20);

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;

  --container: 1200px;
  --container-pad: 20px;
}

/* Базовые сбросы/типографика */
*{box-sizing:border-box}
html,body{
  height:100%;
  min-width:430px;
}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--color-text);
  background: linear-gradient(180deg, #f8faf9, #e8f5f3);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%; /* чтобы iOS не поднимал шрифт */
  padding-top: 72px; /* Отступ для фиксированного navbar */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.no-top{margin-top:0}

/* Контейнер */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* Общая мягкая секция */
.section-soft{background:linear-gradient(180deg,#f0f8f7,#e0f2f0)}

/* =====================
   КНОПКИ (единая геометрия)
   ===================== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 16px; border-radius:var(--radius-md);
  font-weight:600; letter-spacing:.2px; line-height:1;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:var(--shadow-md); border:1px solid transparent;
  position:relative; overflow:hidden;
}

.button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s ease;
  z-index:1;
}
.button:hover{
  transform:translateY(-1px);
}

.button:hover::before{
  left:100%;
}
.button:active{transform:translateY(0)}
.button:focus{outline:none; box-shadow:0 0 0 3px rgba(45,150,145,.18)}
.button-primary{background:var(--color-primary); color:#fff}
.button-primary:hover{background:#12675f}
.button-outline{background:#fff; color:var(--color-primary); border-color:var(--color-primary); box-shadow:none}
.button-outline:hover{background:var(--color-muted)}

/* =====================
   ХЕДЕР/НАВБАР
   ===================== */
.navbar{
  position: fixed; 
  top: 0; 
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(20px);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(246,251,250,0.95) 100%);
  border-bottom: 2px solid rgba(20, 116, 112, 0.1);
  box-shadow: 0 4px 20px rgba(20, 116, 112, 0.15), 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  will-change: transform;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{
  display:flex; 
  align-items:center; 
  gap:12px; 
  font-weight:800; 
  font-size:20px;
  color: #147470;
  transition: all 0.3s ease;
}
.brand:hover{
  transform: scale(1.02);
}
.brand-badge{
  width:36px; 
  height:36px; 
  border-radius:12px;
  background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display:grid; 
  place-items:center; 
  color:#fff; 
  font-weight:800; 
  line-height:1;
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.3);
  transition: all 0.3s ease;
}
.brand-badge:hover{
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(20, 116, 112, 0.4);
}
.nav-links{display:flex; gap:4px}
.nav-links a{
  display:inline-flex; 
  align-items:center; 
  height:44px; 
  padding:0 12px; 
  border-radius:12px; 
  white-space:nowrap;
  font-weight:500;
  color: #147470;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.nav-links a::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(20, 116, 112, 0.1), transparent);
  transition: left 0.5s ease;
}
.nav-links a:hover{
  background: linear-gradient(135deg, rgba(20, 116, 112, 0.1) 0%, rgba(32, 163, 158, 0.1) 100%);
  color: #0d5a57;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.2);
}
.nav-links a:hover::before{
  left: 100%;
}
.nav-cta{display:flex; gap:12px; align-items:center; flex-shrink: 0}
.nav-cta .button{
  min-height:44px; 
  padding:0 20px;
  font-weight:600;
  box-shadow: 0 2px 8px rgba(20, 116, 112, 0.25);
  transition: all 0.3s ease;
}
.nav-cta .button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(20, 116, 112, 0.35);
}

/* Кнопка в навигации в стиле hero-badge */
.nav-cta .button-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.3);
  white-space: nowrap;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  min-height: auto;
}

.nav-cta .button-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.nav-cta .button-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 116, 112, 0.5);
  color: #ffffff;
  text-decoration: none;
}

.nav-cta .button-primary:hover::before{
  left: 100%;
}
.burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--color-border); background:#fff}

/* Мобильное меню: по умолчанию скрыто, появляется под шапкой на малых экранах */

.mobile-menu{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:16px;
  position:absolute; top:100%; left:0; right:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,251,250,0.98) 100%);
  border-bottom: 2px solid rgba(20, 116, 112, 0.1);
  box-shadow: 0 8px 32px rgba(20, 116, 112, 0.2), 0 2px 8px rgba(0,0,0,0.1);
  padding:16px var(--container-pad);
  z-index:49;
  backdrop-filter: saturate(140%) blur(20px);
}
.mobile-menu a{
  display:inline-flex;
  align-items:center;
  padding:12px 18px;
  border-radius:12px;
  white-space:nowrap;
  font-weight:500;
  color: #b6cccb;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mobile-menu a::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(20, 116, 112, 0.1), transparent);
  transition: left 0.5s ease;
}
.mobile-menu a:hover{ 
  background: linear-gradient(135deg, rgba(20, 116, 112, 0.1) 0%, rgba(32, 163, 158, 0.1) 100%);
  color: #a8bebe;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.2);
}
.mobile-menu a:hover::before{
  left: 100%;
}

@media (min-width:1001px){
  .navbar{box-shadow:0 1px 0 rgba(0,0,0,.02)} /* лёгкая линия под хедером */
}

/* =====================
   HERO
   ===================== */
.hero{position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70%; z-index:-1;
  background:radial-gradient(60% 60% at 50% 0%, rgba(45,150,145,.18), rgba(255,255,255,0));
}
.hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center; padding:70px 0; text-align:center}
.hero-badge-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  margin-bottom:24px;
}

.hero-badge-logo{
  width:144px;
  height:144px;
  flex-shrink:0;
  filter:drop-shadow(0 6px 12px rgba(20, 116, 112, 0.35));
  transition:transform 0.3s ease;
}

.hero-badge-logo:hover{
  transform:scale(1.1);
}

.hero-badge{
  display:inline-flex; 
  align-items:center; 
  gap:20px; 
  font-weight:700; 
  font-size: 24px;
  padding:24px 40px; 
  border-radius:50px; 
  background:linear-gradient(135deg, #147470 0%, #20a39e 100%); 
  color:#ffffff; 
  border:4px solid rgba(255,255,255,0.3);
  white-space:nowrap;
  box-shadow:0 12px 40px rgba(20, 116, 112, 0.4);
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
}

.hero-badge::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s ease;
}

.hero-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(20, 116, 112, 0.5);
}

.hero-badge:hover::before{
  left:100%;
}
.hero-title-wrapper{
  display:flex;
  align-items:flex-end;
  gap:20px;
  margin:14px 0;
  flex-wrap:wrap;
  justify-content:center;
  position:relative;
}

.hero-logo{
  width:60px;
  height:60px;
  flex-shrink:0;
  filter:drop-shadow(0 4px 12px rgba(20, 116, 112, 0.35));
  transition:transform 0.3s ease;
  position:absolute;
  top: -9%;
  left: -9%;
  margin-top:10px;
  margin-right:20px;
}

.hero-logo:hover{
  transform:scale(1.05);
}

.hero-title{
  /* плавная типографика */
  font-size:clamp(28px, 4.2vw, 54px);
  line-height:1.08;
  margin:0;
  flex:1;
  min-width:0;
}
.hero-sub{font-size:clamp(14px, 1.8vw, 18px); color:#38514c}
.hero-cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.hero-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.metric{background:var(--color-muted); border:1px dashed #d4e7e5; padding:16px; border-radius:12px; text-align:center}
.metric strong{display:block; font-size:clamp(16px, 2.2vw, 22px)}

/* =====================
   РАЗДЕЛЫ / ШАПКИ
   ===================== */
section{padding:70px 0}
.section-header{
  text-align:center; 
  margin: 0 -20px 64px -20px;
  position:relative;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,255,254,0.9) 100%);
  border-radius: 0;
  border: 1px solid rgba(230,240,239,0.6);
  box-shadow: 0 8px 32px rgba(20, 116, 112, 0.15);
  backdrop-filter: blur(10px);
  overflow: hidden;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #147470 0%, #20a39e 50%, #147470 100%);
}

.section-header::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(20, 116, 112, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}


.section-title{
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.1;
  margin:0 0 20px;
  color:var(--color-primary);
  font-weight:800;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, #147470 0%, #20a39e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(20, 116, 112, 0.2);
}

.section-sub{
  font-size:clamp(16px, 2vw, 20px); 
  color:#4d6a65; 
  margin:0 0 32px;
  line-height:1.6;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.section-divider{
  width:100px;
  height:4px;
  background:linear-gradient(90deg, #147470 0%, #20a39e 50%, #147470 100%);
  border-radius:2px;
  margin:0 auto;
  position:relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(20, 116, 112, 0.35);
}

.section-divider::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:140px;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(20, 116, 112, 0.2) 50%, transparent 100%);
  border-radius:1px;
}

.section-divider::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:8px;
  height:8px;
  background:linear-gradient(135deg, #147470 0%, #20a39e 100%);
  border-radius:50%;
  box-shadow: 0 2px 4px rgba(20, 116, 112, 0.45);
}

/* =====================
   КАРТОЧКИ ПРЕИМУЩЕСТВ
   ===================== */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-md)}
.card h3{margin-top:8px; font-size:clamp(16px, 2.2vw, 20px)}

/* =====================
   МАГАЗИНЫ (улучшенный дизайн с Instagram данными)
   ===================== */
/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Мерцание курсора для ссылок магазинов */
#shops a,
#shops .shop-title-link,
.shop a,
.shop .shop-title-link {
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Дополнительная защита от мерцания */
#shops a:hover,
#shops .shop-title-link:hover,
.shop a:hover,
.shop .shop-title-link:hover {
  cursor: pointer !important;
}
.shops{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.shop{
  background: linear-gradient(135deg, #ffffff 0%, #f8faf9 100%);
  border: 2px solid rgba(20, 116, 112, 0.1);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 280px;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.08);
}



.shop:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(20, 116, 112, 0.2);
  border-color: rgba(20, 116, 112, 0.2);
}

.shop:hover::before{
  left: 100%;
}

/* Аватар магазина */
.shop-avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px;
  filter: drop-shadow(0 2px 8px rgba(20, 116, 112, 0.15));
  transition: all 0.3s ease;
  object-fit: cover;
  border: 3px solid rgba(20, 116, 112, 0.1);
}

.shop svg,
.shop img:not(.shop-avatar){
  width: min(80px, 25vw);
  height: auto;
  max-height: none;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(20, 116, 112, 0.15));
  transition: all 0.3s ease;
  object-fit: contain;
}


/* Информация о магазине */
.shop-info{
  width: 100%;
  text-align: center;
}

.shop h3{
  font-size: 16px;
  font-weight: 600;
  color: #147470;
  margin: 0 0 12px 0;
  text-align: center;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Значок верификации */
.verified-badge{
  color: #1DA1F2;
  font-size: 14px;
  font-weight: bold;
}

/* Статистика магазина */
.shop-stats{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.stat-item{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.stat-icon{
  font-size: 14px;
}

.stat-value{
  font-weight: 600;
  color: #374151;
}

/* Биография магазина */
.shop-bio{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  margin: 0 0 8px 0;
  font-style: italic;
}

/* Категория магазина */
.shop-category{
  display: inline-block;
  background: rgba(20, 116, 112, 0.1);
  color: #147470;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.shop-country{
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  text-align: center;
}


.shop-title-link {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.shop-title-link:hover {
  color: #147470;
  text-decoration: underline;
  cursor: pointer;
}

.shop-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  margin-bottom: 12px;
}


/* =====================
   ПАРТНЁРАМ
   ===================== */
.partners-grid{display:grid; grid-template-columns:1fr; gap:24px}
.benefits{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.benefit{background:var(--color-muted); border:1px dashed #d4e7e5; padding:16px; border-radius:12px}

/* =====================
   КОНТАКТЫ / ФУТЕР
   ===================== */
.contact-form-wrapper{
  max-width: 800px;
  margin: 0 auto;
}
.footer{background:linear-gradient(180deg,#f7fbfa,#fff); border-top:1px solid var(--color-border); padding:30px 0; color:#4e6a65}
.socials{display:flex; gap:12px; flex-wrap:wrap}

/* Стили для кнопки Telegram */
.telegram-button{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:12px 20px;
  background:#0088cc; 
  color:#fff; 
  border:1px solid #0088cc; 
  border-radius:var(--radius-md);
  font-weight:600;
  transition:all .2s ease;
  text-decoration:none;
  position:relative;
  overflow:hidden;
}

.telegram-button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s ease;
  z-index:1;
}
.telegram-button:hover{
  background:#006699; 
  border-color:#006699; 
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,136,204,0.45);
}

.telegram-button:hover::before{
  left:100%;
}
.telegram-button svg{
  flex-shrink:0;
}

/* Стили для кнопки Instagram */
.instagram-button{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:8px 16px;
  background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  color:#fff; 
  border:none; 
  border-radius:var(--radius-md);
  font-weight:600;
  transition:all .2s ease;
  text-decoration:none;
  font-size:14px;
  position:relative;
  overflow:hidden;
}

.instagram-button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s ease;
  z-index:1;
}
.instagram-button:hover{
  background:linear-gradient(45deg, #e0852e 0%,#d55a35 25%,#d01e3c 50%,#c01a5f 75%,#ab1579 100%); 
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(188,24,136,0.45);
}

.instagram-button:hover::before{
  left:100%;
}
.instagram-button svg{
  flex-shrink:0;
}

/* ===================== УЛУЧШЕННАЯ ФОРМА КОНТАКТОВ ===================== */
.contact-form-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
  border: 1px solid #e6f0ef;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(20, 116, 112, 0.15);
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #147470 0%, #20a39e 50%, #147470 100%);
}

.form-header {
  text-align: center;
  margin-bottom: 32px;
}

.form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  color: white;
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.35);
  transition: all 0.3s ease;
}

.form-header:hover .form-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(20, 116, 112, 0.45);
}

.form-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: #147470;
  margin: 0 0 8px 0;
}

.form-description {
  color: #4d6a65;
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-weight: 600;
  color: #2c3e3a;
  font-size: 14px;
  margin-bottom: 4px;
}

.form-input,
.form-textarea {
  padding: 16px 20px;
  border: 2px solid #e6f0ef;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  background: #ffffff;
  transition: all 0.3s ease;
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #147470;
  box-shadow: 0 0 0 3px rgba(20, 116, 112, 0.1);
  transform: translateY(-1px);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.35);
  min-width: 200px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.form-submit-btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s ease;
  z-index:1;
}

.form-submit-btn:hover {
  background: linear-gradient(135deg, #0f5a57 0%, #1a8a85 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 116, 112, 0.45);
}

.form-submit-btn:hover::before{
  left:100%;
}

.form-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.35);
}

.form-submit-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.form-submit-btn:hover svg {
  transform: translateX(2px);
}

.form-note {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
  font-style: italic;
}

/* ===================== ПАРТНЕРСКАЯ ФОРМА ===================== */
.partner-form-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
  border: 1px solid #e6f0ef;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(20, 116, 112, 0.15);
  position: relative;
  overflow: hidden;
}

.partner-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #147470 0%, #20a39e 50%, #147470 100%);
}

.partner-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-select {
  padding: 16px 20px;
  border: 2px solid #e6f0ef;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  background: #ffffff;
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px;
}

.form-select:focus {
  border-color: #147470;
  box-shadow: 0 0 0 3px rgba(20, 116, 112, 0.1);
  transform: translateY(-1px);
}

.form-select option {
  padding: 8px 12px;
  color: #2c3e3a;
}

/* ===================== УЛУЧШЕННЫЕ КАРТОЧКИ ===================== */
.enhanced-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
  border: 1px solid #e6f0ef;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(20, 116, 112, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.enhanced-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #147470 0%, #20a39e 50%, #147470 100%);
}

.enhanced-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(20, 116, 112, 0.25);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 16px rgba(20, 116, 112, 0.35);
  transition: all 0.3s ease;
}

.enhanced-card:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(20, 116, 112, 0.45);
}

.enhanced-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #147470;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.enhanced-card p {
  color: #4d6a65;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.enhanced-card .benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.enhanced-card .benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2c3e3a;
  font-size: 15px;
  line-height: 1.5;
}

.enhanced-card .benefit::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.enhanced-card .socials {
  margin-top: 20px;
}

/* Адаптивность для форм и карточек */
@media (max-width: 768px) {
  .contact-form-card,
  .partner-form-card,
  .enhanced-card {
    padding: 24px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .form-header h3,
  .enhanced-card h3 {
    font-size: 18px;
  }
  
  .form-description {
    font-size: 14px;
  }
  
  .form-submit-btn {
    width: 100%;
    min-width: auto;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
  }
  
  .form-icon {
    width: 40px;
    height: 40px;
  }
  
}

/* =====================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ===================== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

/* =========================================================
   АДАПТИВ: КАСКАД МЕДИАЗАПРОСОВ
   Пореже сверху — покрупнее снизу, чтобы легче переопределять
   ========================================================= */

/* <= 1200px — немного ужимаем контейнер и сетки */
@media (max-width:1200px){
  :root{ --container: 1040px; }
  .shops{grid-template-columns:repeat(4,1fr); gap:20px}
  .shop{min-height: 260px; padding: 18px 14px}
  .shop-avatar{width: 70px; height: 70px}
  .shop svg, .shop img:not(.shop-avatar){width: min(75px, 22vw); max-height: none}
}

/* <= 1024px — планшеты в альбомной */
@media (max-width:1024px){
  :root{ --container: 960px; }
  .mobile-menu a {
    text-align: center !important;
    justify-content: center !important;
  }
  
  .mobile-ekv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.3);
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(20, 116, 112, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: auto;
  }
  
  .mobile-ekv::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }
  
  .mobile-ekv:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20, 116, 112, 0.5);
    color: #ffffff;
    text-decoration: none;
  }
  
  .mobile-ekv:hover::before{
    left: 100%;
  }
  .hero-grid{grid-template-columns:1fr; gap:28px; padding:56px 0}
  .hero-badge-wrapper{
    gap:24px;
  }
  .hero-badge-logo{
    width:120px;
    height:120px;
  }
  .hero-title-wrapper{
    gap:16px;
  }
  .hero-logo{
    width:50px;
    height:50px;
  }
  .features{grid-template-columns:repeat(2,1fr)}
  .shops{grid-template-columns:repeat(3,1fr); gap:18px}
  .shop{min-height: 240px; padding: 16px 12px}
  .shop-avatar{width: 60px; height: 60px}
  .shop svg, .shop img:not(.shop-avatar){width: min(70px, 20vw); max-height: none}
  .partners-grid{grid-template-columns:1fr}
}

/* <= 900px — планшеты портрет/большие телефоны: в шапке показываем бургер */
@media (max-width:1090px){
  .nav-links, .nav-cta{display:none}
  .burger{display:block}
  .nav-inner{height:68px}
  body{padding-top: 68px}
  .brand{font-size:18px}
  .brand-badge{width:30px; height:30px}

  /* Показ мобильного меню только когда добавлен класс .is-open */
 /*ile-menu.is-open{ display:block; }*/
}

/* На экранах шире 900px мобильное меню скрыто всегда, даже если по ошибке остался класс */
@media (min-width:1091px){
  .mobile-menu{ display:none !important; }
}

/* <= 768px — типичная ширина планшета */
@media (max-width:768px){
  :root{ --container: 680px; --container-pad: 18px; }
  section{padding:56px 0}
  .hero-grid{grid-template-columns:1fr; gap:20px; padding:44px 0}
  .hero-cta{gap:10px}
  .hero-metrics{grid-template-columns:repeat(3,1fr)}
  .partners-grid{grid-template-columns:1fr}
}

/* <= 700px — мобильные устройства: вертикальное расположение hero-badge-wrapper */
@media (max-width:700px){
  .hero-badge-wrapper{
    flex-direction: column;
    gap: 20px;
  }
}

/* <= 600px — телефоны: ужимаем сетки, увеличиваем высоту тач-мишеней */
@media (max-width:600px){
  :root{ --container: 560px; --container-pad: 16px; }
  .features{grid-template-columns:1fr}
  .shops{grid-template-columns:repeat(2,1fr); gap:16px}
  .shop{min-height: 220px; padding: 14px 10px}
  .shop-avatar{width: 50px; height: 50px}
  .shop svg, .shop img:not(.shop-avatar){width: min(65px, 18vw); max-height: none}
  .shop h3{font-size: 14px}
  .shop-country{font-size: 11px}
  .shop-stats{gap: 12px}
  .stat-item{font-size: 11px}
  .button{min-height:46px; padding:0 14px}
  .hero-metrics{grid-template-columns:1fr 1fr; gap:12px}
  .hero-badge-wrapper{
    flex-wrap:wrap;
    gap:18px;
  }
  .hero-badge-logo{
    width:108px;
    height:108px;
  }
  .hero-title-wrapper{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .hero-logo{
    position:static;
    margin:10px 0 0 0;
  }
  .hero-logo{
    width:40px;
    height:40px;
  }
  .card{padding:16px}
}

/* <= 480px — маленькие телефоны: один столбец почти везде */
@media (max-width:480px){
  :root{ --container: 440px; --container-pad: 14px; }
  .hero-badge{
    padding:16px 28px;
    font-size:18px;
    gap:12px;
    border:3px solid rgba(255,255,255,0.3);
  }
  .shops{grid-template-columns:repeat(2,1fr); gap:14px}
  .shop{min-height: 200px; padding: 12px 8px}
  .shop-avatar{width: 45px; height: 45px}
  .shop svg, .shop img:not(.shop-avatar){width: min(60px, 16vw); max-height: none}
  .shop h3{font-size: 13px}
  .shop-country{font-size: 10px}
  .shop-stats{gap: 8px}
  .stat-item{font-size: 10px}
  .shop-bio{font-size: 11px}
  .benefits{grid-template-columns:1fr}
  .nav-inner{height:64px}
  body{padding-top: 64px}
  .brand{font-size:17px}
  .brand-badge{width:28px; height:28px}
  .section-header{
    margin: 0 -15px 48px -15px;
    padding: 30px 15px;
    border-radius: 0;
  }
  
  
  .section-title{
    font-size:clamp(24px, 5vw, 32px);
  }
  
  .section-sub{
    font-size:clamp(14px, 2.5vw, 18px);
    margin-bottom:24px;
  }
}

/* <= 360px — ультрамалые устройства */
@media (max-width:360px){
  :root{ --container: 340px; --container-pad: 12px; }
  .button{min-height:44px; padding:0 12px}
  .shops{grid-template-columns:1fr; gap:12px}
  .shop{min-height: 180px; padding: 10px 6px}
  .shop-avatar{width: 40px; height: 40px}
  .shop svg, .shop img:not(.shop-avatar){width: min(55px, 14vw); max-height: none}
  .shop h3{font-size: 12px}
  .shop-country{font-size: 9px}
  .shop-stats{gap: 6px}
  .stat-item{font-size: 9px}
  .shop-bio{font-size: 10px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .nav-inner{height:60px}
  body{padding-top: 60px}
}

/* Дополнительные стили для кнопки навигации */
@media (max-width: 480px) {
  .nav-cta {
    display: none !important;
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  .nav-cta .button-primary {
    padding: 8px 12px;
    font-size: 13px;
    max-width: 150px;
  }
}

/* ===================== ССЫЛКА НА СЕРТИФИКАТ ===================== */
.cert-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px auto 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 116, 112, 0.3);
  position: relative;
  overflow: hidden;
  width: fit-content;
}

/* Кнопка сертификата в футере */
.cert-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(20, 116, 112, 0.3);
  position: relative;
  overflow: hidden;
}

.cert-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.cert-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.cert-link:hover::before {
  left: 100%;
}

.cert-link svg {
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.cert-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.cert-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.cert-button:hover::before {
  left: 100%;
}

.cert-button svg {
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

/* Кнопка Telegram в футере */
.telegram-footer-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #0088cc 0%, #00a8ff 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
  position: relative;
  overflow: hidden;
}

.telegram-footer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.telegram-footer-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.telegram-footer-button:hover::before {
  left: 100%;
}

.telegram-footer-button svg {
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

/* Центрирование ссылки на сертификат в карточке */
.enhanced-card:has(.cert-link) {
  text-align: center;
}

/* =========================================================
ОТЗЫВЫ
========================================================= */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.review-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8f4f3;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #147470;
}

.review-content {
  position: relative;
  z-index: 2;
}

.review-quote {
  color: #147470;
  margin-bottom: 20px;
  opacity: 0.6;
}

.review-text {
  font-size: 16px;
  line-height: 1.6;
  color: #2d3748;
  margin: 0 0 24px 0;
  font-style: italic;
  position: relative;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-info {
  flex: 1;
}

.author-name {
  font-weight: 600;
  color: #1a202c;
  font-size: 16px;
  margin-bottom: 4px;
}

.author-role {
  color: #718096;
  font-size: 14px;
}

.author-rating {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1;
  color: #FFB800;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(255, 184, 0, 0.3);
}

/* Адаптивность для отзывов */
@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  
  .review-card {
    padding: 24px;
  }
  
  .review-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .review-card {
    padding: 20px;
  }
  
  .review-text {
    font-size: 14px;
  }
  
  .author-name {
    font-size: 15px;
  }
  
  .author-role {
    font-size: 13px;
  }
}

/* =====================
   КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ МЕРЦАНИЯ КУРСОРА
   ===================== */
/* Принудительное исправление курсора для всех ссылок магазинов */
#shops a,
#shops a:hover,
#shops a:focus,
#shops a:active,
.shop a,
.shop a:hover,
.shop a:focus,
.shop a:active,
.shop-title-link,
.shop-title-link:hover,
.shop-title-link:focus,
.shop-title-link:active {
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Дополнительная защита от конфликтов CSS */
body #shops a,
body #shops a:hover,
body .shop a,
body .shop a:hover {
  cursor: pointer !important;
}

/* ===================== МОДАЛЬНОЕ ОКНО СЕРТИФИКАТА ===================== */
.cert-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cert-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.cert-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10001;
  animation: certModalFadeIn 0.3s ease;
}

@keyframes certModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cert-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid #e8f4f3;
  border-radius: 16px 16px 0 0;
}

.cert-modal-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #147470;
}

.cert-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #718096;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.cert-modal-close:hover {
  background: #f7fafc;
  color: #147470;
}

.cert-modal-body {
  padding: 32px;
}

.cert-current {
  margin-bottom: 32px;
}

.cert-current h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

.cert-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8f4f3;
}

.cert-archive h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

.cert-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cert-archive-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  color: #2d3748;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.cert-archive-link:hover {
  background: linear-gradient(135deg, #147470 0%, #20a39e 100%);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(20, 116, 112, 0.3);
  border-color: #147470;
}

.cert-archive-link svg {
  flex-shrink: 0;
}

/* Адаптивность для модального окна */
@media (max-width: 768px) {
  .cert-modal-content {
    max-width: 95%;
    max-height: 95vh;
  }
  
  .cert-modal-header {
    padding: 20px 24px;
  }
  
  .cert-modal-header h3 {
    font-size: 20px;
  }
  
  .cert-modal-body {
    padding: 24px;
  }
  
  .cert-current h4,
  .cert-archive h4 {
    font-size: 16px;
  }
  
  .cert-archive-link {
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cert-modal {
    padding: 10px;
  }
  
  .cert-modal-content {
    max-width: 100%;
    border-radius: 12px;
  }
  
  .cert-modal-header {
    padding: 16px 20px;
  }
  
  .cert-modal-body {
    padding: 20px;
  }
  
  .cert-archive-link {
    padding: 10px 14px;
    font-size: 14px;
  }
}