*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',Arial,sans-serif;background:#fff;color:#000;line-height:1.6;font-weight:500}
.header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;position:fixed;top:0;width:100%;background:#fff;z-index:999;border-bottom:1px solid #f2f2f2}
.logo{font-weight:800;font-size:22px}
.nav a{margin:0 12px;font-size:15px;text-decoration:none;color:#000}
/* жёсткий пресет именно для ссылок-кнопок */
a.btn-small{
  all: unset;                 /* сбросить наследованные странности */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;     /* пробиваем цвет, если где-то перекрывается */
  padding: 8px 16px;
  border-radius: 999px;
  font: 600 14px/1 'Inter', system-ui, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: 32px;           /* чтобы текст точно влазил */
}
.burger{font-size:24px;cursor:pointer;margin-left:auto;display:none}

@media (max-width:768px){
  .nav{display:none;flex-direction:column;position:absolute;top:60px;right:10px;background:#fff;border:1px solid #eee;box-shadow:0 8px 20px rgba(0,0,0,.08);padding:15px;z-index:1000;width:210px;text-align:right}
  .nav a{padding:8px 0;font-weight:600}
  .nav.active{display:flex}
  .burger{display:block}
}

.main{text-align:center;padding:80px 20px}
.main-logo{height:26px;margin-top:90px;opacity:.9}
h1{font-size:38px;font-weight:800;margin-top:12px}
.subtitle{color:#555;font-size:20px;margin-top:6px}
.buttons{margin-top:28px}
.btn-primary{display:inline-block;padding:12px 20px;background:#000;color:#fff;text-decoration:none;border-radius:12px;font-weight:700;transition:.2s}
.btn-primary:hover{opacity:.9}
.btn-main{background:#000;color:#fff;border:none;padding:12px 20px;font-size:16px;cursor:pointer;border-radius:12px;margin-left:8px}
.proof{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:16px;color:#666;font-size:14px}

.features{display:flex;flex-direction:column;gap:28px;max-width:900px;margin:64px auto 0}
.feature-card{display:flex;align-items:center;background:#f9f9f9;border-radius:20px;box-shadow:0 10px 20px rgba(0,0,0,.06);padding:20px;transition:transform .25s,box-shadow .25s}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 24px rgba(0,0,0,.1)}
.feature-card.reverse{flex-direction:row-reverse}
.feature-icon{width:74px;height:74px;background:#666;border-radius:16px;margin:0 18px;flex-shrink:0}
.feature-icon.circle{border-radius:50%}
.feature-icon.triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%);background:#666}
.feature-content h2{font-size:20px;margin-bottom:6px}
.feature-content p{color:#666;font-size:15px;max-width:450px}

.templates-grid{max-width:1000px;margin:48px auto 0;text-align:center}
.templates-grid h3{font-size:26px}
.templates-grid .templates-sub{color:#666;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.tile{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 16px;text-align:left;transition:.15s;text-decoration:none;color:#111;display:flex;flex-direction:column;gap:10px}
.tile:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.emoji{font-size:26px}
.tile-title{font-weight:700}
.tile-list{margin-left:18px;color:#555;font-size:14px;line-height:1.6}
.tile-cta{margin-top:auto;font-weight:700}
.ribbon{position:absolute;top:12px;right:12px;background:#10b981;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}
.ribbon-pre{background:#ef4444}
.ribbon-custom{background:#6366f1}
.tile[data-status="preorder"]{border-color:#fee2e2}
.tile[data-status="custom"]{border-color:#e0e7ff}

.process{max-width:900px;margin:56px auto 0;text-align:center;padding:0 20px}
.process h3{font-size:26px}
.steps{margin:16px auto 18px;max-width:700px;text-align:left;display:grid;gap:8px;counter-reset:step}
.steps li{background:#f9fafb;border:1px solid #eef0f2;border-radius:12px;padding:12px 14px;list-style:none}
.steps strong{font-weight:700}

.pricing-section{text-align:center;padding:64px 20px}
.pricing-title{font-size:30px;font-weight:800;margin-bottom:8px}
.pricing-subtitle{font-size:18px;color:#666;font-weight:600;margin-bottom:26px}
.pricing-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}
.pricing-card{position:relative;background:#f8f8f8;border-radius:18px;padding:22px 18px;width:280px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #eee}
.pricing-card .badge{position:absolute;top:-10px;right:14px;background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}
.pricing-card.featured{box-shadow:0 10px 22px rgba(0,0,0,.12);transform:translateY(-4px)}
.pricing-card h3{font-size:16px;color:#666;font-weight:600;margin-bottom:14px}
.price{font-size:26px;font-weight:900;margin-bottom:12px}
.pricing-card ul{list-style:none;padding:0;margin:0 0 14px;font-size:15px;color:#444;font-weight:500;line-height:1.7em}
.note{font-size:12px;color:#666;margin-top:6px}
.btn{display:inline-block;padding:12px 20px;text-align:center;text-decoration:none;font-weight:700;border-radius:10px}
.btn-black{background:#000;color:#fff}
.btn-grey{background:#ddd;color:#111}
.btn:hover{opacity:.9}

.testimonials{max-width:900px;margin:12px auto 0;text-align:center;padding:0 20px}
.testimonials h3{font-size:24px}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.t-card{background:#f9f9f9;border:1px solid #eee;border-radius:14px;padding:16px;color:#333;font-size:14px}
.t-card span{display:block;margin-top:8px;color:#666;font-size:12px}

.contact-section{text-align:center;padding:64px 20px}
.contact-title{font-size:28px;font-weight:800;margin-bottom:8px}
.contact-subtitle{font-size:18px;color:#666;font-weight:600;margin-bottom:18px}
.contact-form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.contact-form input,.contact-form textarea,.contact-form select{padding:14px;border:1px solid #ddd;border-radius:12px;font-size:15px;font-family:inherit;resize:none}
.contact-form textarea{min-height:120px}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#000;outline:none}
.policy{color:#777;font-size:12px;margin-top:4px}

.faq-section{max-width:800px;margin:12px auto 0;font-weight:500;padding:0 20px}
.faq-item{background:#f0f0f0;border-radius:12px;margin-bottom:10px;overflow:hidden;transition:background .25s}
.faq-item.active{background:#e8e8e8}
.faq-question{background:none;border:none;width:100%;font-size:16px;font-weight:600;text-align:left;padding:18px 20px;color:#111;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-question::after{content:"+";font-size:20px;color:#444;transition:transform .2s}
.faq-item.active .faq-question::after{content:"−"}
.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s,opacity .25s;padding:0 20px 0;font-size:14px;color:#555}
.faq-item.active .faq-answer{opacity:1;max-height:220px;padding:0 20px 18px}

.footer{display:flex;justify-content:space-between;align-items:flex-start;padding:34px 20px;max-width:1200px;margin:0 auto;font-size:14px;margin-top:64px}
.footer-logo img{height:20px;opacity:.25}
.footer-links{display:flex;gap:48px}
.footer-column h4{font-size:14px;font-weight:700;margin-bottom:10px;color:#000}
.footer-column a{display:block;margin-bottom:6px;color:#999;text-decoration:none;transition:color .2s}
.footer-column a:hover{color:#000}

@media (max-width:768px){
  .features{max-width:90%}
  .feature-card{flex-direction:column;text-align:center;padding:16px}
  .feature-card.reverse{flex-direction:column}
  .feature-icon{margin:0 auto 14px auto}
  .feature-content h2{font-size:18px}
  .feature-content p{font-size:14px}
  nav{font-size:14px;padding:10px 15px}
}

.demo{max-width:1000px;margin:40px auto 0;text-align:center;padding:0 20px}
.demo h3{font-size:26px}
.demo-sub{color:#666;margin-top:6px}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px;align-items:start}
.demo-card{display:flex;flex-direction:column;gap:10px;align-items:center}
.demo-photo {
  position: relative;
  display: inline-block;
  border-radius: 12px; /* скруглённые углы, если нужно */
  overflow: hidden; /* обрезаем, чтобы не вылазило за границы */
}
.demo-img {
  width: 100%;
  display: block;
  object-fit: contain; /* чтобы картинка полностью помещалась */
  background: #fff; /* фон под фото */
}


.demo-video{width:100%;height:100%;object-fit:cover;display:block}
.demo-card figcaption{font-size:14px;color:#444}

/* Hover video preview on tiles */
.tile{overflow:hidden;position:relative}
.tile-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;opacity:.95}

.slider-demo{max-width:1000px;margin:40px auto 0;text-align:center;padding:0 20px}
.slider-demo h3{font-size:26px}
.slider-demo .demo-sub{color:#666;margin-top:6px;margin-bottom:16px}
.phone-slider{position:relative;width:300px;height:620px;margin:0 auto;overflow:hidden;border-radius:40px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.phone-slider .slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.phone-slider .slide img{width:100%;height:100%;object-fit:cover;display:block}
.phone-slider .caption{position:absolute;bottom:10px;left:0;right:0;background:rgba(0,0,0,0.6);color:#fff;padding:6px;font-size:14px}
.phone-slider .slide.active{opacity:1}
@keyframes slideFade{
  0%{opacity:1}
  45%{opacity:1}
  50%{opacity:0}
  95%{opacity:0}
  100%{opacity:1}
}
.phone-slider .slide:nth-child(1){animation:slideFade 8s infinite}
.phone-slider .slide:nth-child(2){animation:slideFade 8s infinite 4s}

/* === Image-based demo section (no video) === */
.demo{max-width:1000px;margin:40px auto 0;text-align:center;padding:0 20px}
.demo h3{font-size:26px}
.demo-sub{color:#666;margin-top:6px}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px;align-items:start}
.demo-card{display:flex;flex-direction:column;gap:10px;align-items:center}
.demo-img{width:100%;height:100%;object-fit:contain;display:block}
.tag{position:absolute;top:12px;right:12px;background:#10b981;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}
.tag-green{background:#10b981}
.tag-red{background:#ef4444}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}


/* Mobile marquee (auto carrousel) */
.demo-marquee{display:none;overflow:hidden;margin-top:16px}
.marquee-track{display:flex;gap:12px;animation:marquee 12s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}50%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@media (max-width:720px){
  .demo-grid{display:none}
  .demo-marquee{display:block}
}

/* Colored ribbons on template tiles to match green/red */
.tile[data-status="ready"] .ribbon{background:#10b981}
.tile[data-status="ready"].shop .ribbon{background:#ef4444}

.device-link{display:block}
.device-link,.tile{cursor:pointer}

/* ===== 1) Мобайл-типографика и отступ под фикс-хедер ===== */
@media (max-width: 480px){
  .main{ padding-top: calc(64px + 2vh); } /* чтобы текст не прятался под хедером */
  h1{
    font-size: clamp(24px, 8vw, 32px);   /* меньше и адаптивно */
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;                  /* аккуратные переносы (совр. браузеры) */
  }
  .subtitle{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.35;
  }
  .buttons{ gap: 10px; }
}

/* === HERO: текст и отступ под фикс-хедер === */
@media (max-width: 480px){
  .header{height:64px}
  .main{padding-top:calc(64px + 12px)}
  h1{
    font-size: clamp(22px, 8vw, 30px);
    line-height: 1.15;
    letter-spacing: -.01em;
  }
  .subtitle{font-size: clamp(14px, 4.2vw, 18px); line-height:1.35}
}

/* === Кнопки: чтобы не налезали на мобиле === */
.buttons{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn-primary,.btn-main{white-space:nowrap}
@media (max-width: 480px){
  .buttons{flex-direction:column; align-items:stretch}
  .btn-primary,.btn-main{width:100%}  /* во всю ширину, аккуратно одна под другой */
}

/* === DEMO: фото без чёрных полей и правильные размеры === */

/* БАЗА (десктоп/планшет): оставляем умеренный размер */
.demo-grid{justify-items:center}
.demo-photo{
  position:relative; display:flex; align-items:center; justify-content:center;
  width: min(420px, 42vw);
  aspect-ratio: 16 / 10;   /* фиксируем соотношение, чтобы блоки были одинаковые */
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.demo-img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;             /* картинка не растягивается сверх контейнера */
  object-fit:contain; display:block; background:#fff;
}

/* МОБИЛА: одна колонка и крупные фото, но без гигантских размеров на ПК */
@media (max-width: 480px){
  .demo-grid{grid-template-columns:1fr; gap:16px}
  .demo-photo{
    width: 92vw;            /* почти во всю ширину экрана */
    aspect-ratio: 16 / 10;  /* одинаковая высота для обеих */
  }
}

/* на всякий: убираем старый чёрный фон «телефона», если где-то остался */
.device-frame{background:transparent !important}
/* === DEMO: крупные фото на всех экранах === */

/* контейнер пошире */
.demo { max-width: 1200px; }

/* базовые стили */
.demo-grid { justify-items: center; gap: 24px; }
.demo .demo-photo{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100% !important;           /* снимаем прежние min()/max() ограничения */
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.demo .demo-img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;        /* картинка не растягивается сверх контейнера */
  object-fit: contain; display: block; background:#fff;
}

/* МОБИЛА: одна колонка, крупно */
@media (max-width: 599px){
  .demo-grid{ grid-template-columns: 1fr; }
  .demo .demo-photo{
    width: 94vw !important;
    aspect-ratio: 16 / 10;          /* единая высота для обеих */
  }
}

/* ПЛАНШЕТ: две колонки, побольше */
@media (min-width: 600px) and (max-width: 1023px){
  .demo-grid{ grid-template-columns: repeat(2, minmax(320px, 1fr)); }
  .demo .demo-photo{ aspect-ratio: 16 / 10; }
}

/* Мобильная версия демо-шаблонов — один под другим и крупно */
@media (max-width: 600px){
  .demo-grid{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .demo-photo{
    width: 94vw !important;   /* почти вся ширина экрана */
    max-width: 500px;         /* чтобы не раздувалось на больших телефонах */
    aspect-ratio: 16 / 10;    /* одинаковая высота */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
  .demo-img{
    width: 100%;
    height: 100%;
    object-fit: contain;      /* картинка полностью помещается */
    background: #fff;
  }
}

/* === MOBILE: демо-фото — фуллвикс, но не выше экрана === */
@media (max-width: 600px){
  /* секция и сетка — столбиком */
  .demo{ max-width: none; padding: 0; background:#fff; }
  .demo-grid{
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  /* карточка с фото: во всю ширину экрана */
  .demo-photo{
    position: relative;
    width: min(100vw, 560px);  /* фуллвикс, но не больше 560px, чтобы не «перебор» */
    aspect-ratio: 16 / 10;     /* одинаковая высота у обеих */
    max-height: 80svh;         /* не выше 80% высоты экрана (svh — корректно на iOS) */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }

  /* изображение внутри: полностью помещается, без обрезки */
  .demo-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
  }
}

@media (max-width: 600px) {
  .demo-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;  /* убираем горизонтальную прокрутку */
  }
  .demo-photo {
    flex: none !important;   /* убираем "сжимание" в одну строку */
    width: min(100vw, 560px);
  }
}