:root{
  --accent:#00b894;
  --dark:#0f1419;
  --light:#f5f6fa;
  --muted:#a4b0be;
  --bg:#ffffff;
}

/* Общие */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--dark);background:var(--light);line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ======= Topbar (50px) ======= */
.topbar{
  position:fixed;top:0;left:0;right:0;height:50px;z-index:1000;
  background:rgba(255,255,255,.97);box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.topbar__inner{display:flex;align-items:center;height:50px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dark);font-weight:700}
.logo img{height:30px}
.logo .accent{color:var(--accent)}

/* Бургер */
.burger{width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:transparent;border:none;padding:0;cursor:pointer}
.burger__line{width:22px;height:2px;background:var(--dark);transition:.25s}
.burger.open .burger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open .burger__line:nth-child(2){opacity:0}
.burger.open .burger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Горизонтальное меню (desktop only) */
.mainnav{margin-left:auto;display:flex;gap:18px}
.mainnav a{text-decoration:none;color:var(--dark);font-weight:500}
.mainnav a:hover{color:var(--accent)}

/* Переключатель языков справа */
.langswitch{position:relative;margin-left:12px}
.langswitch__btn{width:32px;height:32px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.langswitch__btn img{width:24px;height:24px}
.langswitch__menu{
  position:absolute;right:0;top:38px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);width:160px;display:none
}
.langswitch.open .langswitch__menu{display:block}
.langswitch__menu li{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer}
.langswitch__menu li:hover{background:#f3f4f6}
.langswitch__menu img{width:18px;height:18px}

/* ======= Sidemenu ======= */
.sidemenu{
  position:fixed;top:50px;left:0;bottom:0;width:280px;transform:translateX(-100%);
  background:#10151a;color:#fff;z-index:999;transition:transform .3s ease;overflow:auto
}
.sidemenu.open{transform:none}
.sidemenu__nav{display:flex;flex-direction:column;padding:16px}
.sidemenu__link{color:#fff;text-decoration:none;padding:12px;border-radius:8px}
.sidemenu__link:hover{background:rgba(255,255,255,.08)}
.sidemenu__backdrop{
  position:fixed;inset:50px 0 0 0;background:rgba(0,0,0,.4);z-index:998
}

/* ======= Hero ======= */
.hero{padding:100px 0 60px;background:linear-gradient(90deg,#fff,#eef2f3)}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero__text h1{font-size:2rem;margin:.2rem 0 1rem}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:10px 20px;border-radius:10px;font-weight:600}
.hero__media video{width:100%;border-radius:12px}

/* ======= Features ======= */
.features{padding:60px 0}
.features h2{text-align:center}
.subtitle{text-align:center;color:var(--muted);margin-bottom:36px}
.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature{background:#fff;border-radius:12px;padding:22px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.06);cursor:pointer;transition:transform .2s}
.feature:hover{transform:translateY(-4px)}
.feature__icon{font-size:28px;margin-bottom:8px}
.advantages{margin-top:28px;margin-bottom:28px}
.advantages ul{margin:8px 0 0 0;padding:0;list-style:none}
.advantages li{margin:6px 0}

/* ======= Pricing ======= */
.pricing{background:#fff;padding:60px 0}
.pricing__grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.pricecard{width:280px;background:var(--light);border-radius:14px;padding:24px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.pricecard--pro{border:2px solid var(--accent)}
.price{font-size:1.6rem;font-weight:800;margin:8px 0 12px}
.pricecard ul{list-style:none;margin:0;padding:0}
.pricecard li{margin:6px 0}

/* ======= News Carousel ======= */
.news{padding:60px 0}
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;gap:16px;will-change:transform;transition:transform .35s ease}
.carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);border:none;background:#fff;width:36px;height:36px;border-radius:50%;
  box-shadow:0 4px 16px rgba(0,0,0,.12);cursor:pointer;font-size:22px;line-height:36px;text-align:center
}
.carousel__btn--prev{left:-8px}
.carousel__btn--next{right:-8px}
.newsCard{
  flex:0 0 auto;width:calc((100% - 3*16px)/4); /* desktop 4 */
  height:300px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06);
  display:flex;flex-direction:column;text-decoration:none;color:inherit
}
.newsCard__img{height:140px;object-fit:cover;width:100%}
.newsCard__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.newsCard__title{font-weight:700;font-size:1rem;line-height:1.3;height:2.6em;overflow:hidden}
.newsCard__text{color:#475569;font-size:.95rem;line-height:1.4;flex:1;overflow:hidden}

/* планшеты: 2 элемента */
@media (min-width:600px) and (max-width:1199px){
  .newsCard{width:calc((100% - 16px)/2)}
}
/* мобилки: 1 элемент */
@media (max-width:599px){
  .newsCard{width:100%}
}

/* ======= Reviews ======= */
.reviews{background:linear-gradient(180deg,#ecf0f1,#fff);padding:60px 0;text-align:center}
.slider{max-width:600px;margin:0 auto}
.slide{display:none}
.slide.active{display:block}

/* ======= Article ======= */
.article{padding:90px 0 40px}
.article__content{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:24px}
.article__meta{color:var(--muted);margin:.2rem 0 1rem}
.article__image{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:10px 0 18px}
.article__nav{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.article__navlink{text-decoration:none;color:var(--accent);font-weight:600}

/* ======= Footer ======= */
.footer{background:#0f1419;color:#fff;padding:36px 0}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{color:var(--accent)}

/* Анимация появления */
.fade-in{opacity:0;transform:translateY(24px);transition:all .6s ease}
.fade-in.visible{opacity:1;transform:none}

/* Адаптив: скрываем верхнее меню на планшетах/мобилках */
@media (max-width:1199px){
  .mainnav{display:none}
}

/* Grid в hero на узких экранах */
@media (max-width:899px){
  .hero__grid{grid-template-columns:1fr}
}

.image-upload-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.image-preview {
  border: 1px solid #ccc; background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  width: 210px; height: 160px;
  overflow: hidden; position: relative;
}
.image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-preview .placeholder { color: #888; font-size: 14px; }
.image-actions { display: flex; gap: 6px; }