/* ============================================================
   Главная страница CUANDO — новый дизайн.
   Все классы с префиксом cu- : style.css и Bootstrap не трогаем,
   этот файл подключён только в index.html.
   ============================================================ */

.cu-page{
  --cu-yellow:#ffd700;
  --cu-dark:#242424;
  --cu-grey:#f7f7f7;
  --cu-fg:#1b1b1b;
  --cu-muted:#5e5e5e;
  --cu-border:#dedede;
  --cu-radius:.625rem;
  --cu-shadow-sm:0 1px 3px 0 rgb(0 0 0/.1), 0 1px 2px -1px rgb(0 0 0/.1);
  --cu-shadow-xl:0 20px 25px -5px rgb(0 0 0/.1), 0 8px 10px -6px rgb(0 0 0/.1);

  font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  color:var(--cu-fg);
  background:#fff;
  line-height:1.5;
}
.cu-page *{box-sizing:border-box}
.cu-page img{display:block;max-width:100%}
.cu-page ul{list-style:none;margin:0;padding:0}
.cu-page p{margin:0}

/* ---------- каркас ---------- */
.cu-shell{width:100%;max-width:1200px;margin-inline:auto;padding-inline:1.25rem}
.cu-section{padding-block:5rem;scroll-margin-top:2rem}
.cu-section--grey{background:var(--cu-grey)}
.cu-short{width:100%;max-width:22rem;margin-inline:auto;aspect-ratio:9/16;border-radius:1rem;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.12);background:#111}
.cu-short iframe{width:100%;height:100%;border:0;display:block}
.cu-grid2{display:grid;gap:2.5rem}
.cu-grid2--wide{gap:3rem}
.cu-grid3{display:grid;gap:1.5rem}
.cu-center{text-align:center}

/* ---------- типографика ---------- */
.cu-page h1{font-size:2.25rem;line-height:1.25;font-weight:700;margin:0}
.cu-page h2{font-size:1.875rem;line-height:2.25rem;font-weight:700;margin:0}
.cu-page h3{font-size:1.5rem;line-height:2rem;font-weight:700;margin:0}
.cu-lead{font-size:1.125rem;line-height:1.75rem}
.cu-lead-lg{font-size:1.25rem;line-height:1.75rem;font-weight:600;margin-top:1rem}
.cu-muted{color:var(--cu-muted)}
.cu-relaxed{line-height:1.625}
.cu-sub{margin-top:.75rem;font-size:1.125rem;line-height:1.75rem;color:var(--cu-muted)}
.cu-mt-6{margin-top:1.5rem}
.cu-mt-8{margin-top:2rem}

/* ---------- жёлтые точки-маркеры ---------- */
.cu-dot{flex:none;width:.5rem;height:.5rem;border-radius:9999px;background:var(--cu-yellow)}
.cu-checklist{display:flex;flex-direction:column;gap:.75rem}
.cu-checklist li{display:flex;align-items:flex-start;gap:.75rem;font-size:1.125rem;line-height:1.75rem}
.cu-checklist .cu-dot{margin-top:.5rem}

/* ---------- кнопки сторов ---------- */
.cu-stores{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.cu-stores img{height:60px;width:auto;border-radius:.5rem}
.cu-btn-web{
  display:inline-flex;align-items:center;height:60px;padding-inline:1.5rem;
  border:2px solid var(--cu-yellow);border-radius:.5rem;color:var(--cu-yellow);
  font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.025em;
  text-decoration:none;transition:background-color .15s,color .15s;
}
.cu-btn-web:hover{background:var(--cu-yellow);color:var(--cu-fg)}
.cu-btn-web--dark{border-color:var(--cu-dark);background:var(--cu-dark);color:#fff;transition:opacity .15s}
.cu-btn-web--dark:hover{background:var(--cu-dark);color:#fff;opacity:.85}

/* ---------- обычные кнопки ---------- */
.cu-btn{
  display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:.5rem;
  font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.025em;
  text-decoration:none;border:2px solid transparent;
}
.cu-btn--sm{padding:.75rem 1.5rem;gap:.5rem}
.cu-btn--primary{background:var(--cu-yellow);color:var(--cu-fg);transition:opacity .15s}
.cu-btn--primary:hover{opacity:.9;color:var(--cu-fg)}
.cu-btn--outline{border-color:var(--cu-dark);color:var(--cu-dark);transition:background-color .15s,color .15s}
.cu-btn--outline:hover{background:var(--cu-dark);color:#fff}

/* ---------- services page link on top of the hero ---------- */
.cu-top-cta{
  position:absolute;top:15px;right:190px;z-index:1030;
  display:inline-flex;align-items:center;height:42px;padding-inline:1.25rem;
  border:2px solid var(--cu-yellow);border-radius:5px;background:rgb(36 36 36/.55);
  color:var(--cu-yellow);font-size:.8125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.025em;text-decoration:none;transition:background-color .15s,color .15s;
}
.cu-top-cta:hover{background:var(--cu-yellow);color:var(--cu-fg)}
/* ponytail: on narrow screens it drops below the language selector */
@media (max-width:720px){
  .cu-top-cta{top:64px;right:40px}
}

/* ---------- 1. первый экран ---------- */
.cu-hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:100vh;overflow:hidden;background:var(--cu-dark);
}
.cu-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cu-hero-overlay{position:absolute;inset:0;background:rgb(36 36 36/.6)}
.cu-hero-content{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:2rem;padding-block:6rem;text-align:center;color:#fff;
}
.cu-hero h1{max-width:64rem}
.cu-hero-sub{max-width:48rem;font-size:1.125rem;line-height:1.75rem}
.cu-hero-tags{
  display:flex;flex-wrap:wrap;justify-content:center;max-width:56rem;
  column-gap:1.75rem;row-gap:.75rem;font-size:1rem;font-weight:600;
}
.cu-hero-tags li{display:flex;align-items:center;gap:.75rem}

/* селектор языка поверх видео (позиционируется классами из style.css) */
.cu-hero .language-selector{z-index:2}

/* ---------- 3. возможности ---------- */
.cu-pillars{margin-top:3rem}
.cu-pillar{
  display:flex;flex-direction:column;padding:2rem;
  border:1px solid var(--cu-border);border-radius:1.125rem;background:#fff;box-shadow:var(--cu-shadow-sm);
}
.cu-pillar-icon{width:2.5rem;height:2.5rem;margin-bottom:1.5rem;color:var(--cu-yellow)}
.cu-pillar ul{display:flex;flex-direction:column;gap:.75rem;flex:1;margin-top:1.5rem;font-size:1.125rem;color:var(--cu-muted)}
.cu-pillar li{display:flex;align-items:flex-start;gap:.75rem}
.cu-pillar li .cu-dot{margin-top:.5rem}
.cu-pillar-more{
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  width:3rem;height:3rem;margin-top:2rem;border:2px solid var(--cu-yellow);border-radius:9999px;
  color:var(--cu-yellow);transition:background-color .15s,color .15s;
}
.cu-pillar-more:hover{background:var(--cu-yellow);color:var(--cu-fg)}
.cu-pillar-more svg{width:1.25rem;height:1.25rem}

/* ---------- скриншоты приложения ---------- */
.cu-shot{margin-inline:auto;width:auto;max-height:680px;border-radius:var(--cu-radius);box-shadow:var(--cu-shadow-xl)}

/* ---------- 5. категории услуг ---------- */
.cu-cats-title{margin-top:3.5rem;font-size:1.25rem;font-weight:700}
.cu-cats{margin-top:1.5rem}
.cu-cat{padding:1.5rem;border-radius:1.125rem;background:var(--cu-grey)}
.cu-cat img{width:4rem;height:4rem;margin-bottom:1.25rem;border-radius:var(--cu-radius);object-fit:cover}
.cu-cat h3{font-size:1.25rem;line-height:1.75rem}
.cu-cat p{margin-top:.5rem;font-size:1rem;color:var(--cu-muted)}
.cu-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.5rem}

/* ---------- 8. шаги ---------- */
.cu-steps{margin-top:3rem}
.cu-step{padding:2rem;border-radius:1.125rem;background:#fff;box-shadow:var(--cu-shadow-sm);text-align:center}
.cu-step-num{
  display:flex;align-items:center;justify-content:center;margin-inline:auto;
  width:3.5rem;height:3.5rem;border-radius:9999px;background:var(--cu-yellow);
  font-size:1.5rem;font-weight:700;color:var(--cu-fg);
}
.cu-step h3{margin-top:1.25rem;font-size:1.25rem;line-height:1.75rem}
.cu-step p{margin-top:.5rem;font-size:1rem;color:var(--cu-muted)}

/* ---------- футер ---------- */
.cu-footer{padding-block:3.5rem;background:var(--cu-yellow);color:var(--cu-fg)}
.cu-footer .cu-shell{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center}
.cu-footer-slogan{font-size:1.5rem;font-weight:700}
.cu-footer-mail{
  color:inherit;
  padding:.5rem 1.5rem;border:2px solid var(--cu-dark);border-radius:9999px;
  font-size:1.125rem;font-weight:500;text-transform:uppercase;text-decoration:none;
  transition:background-color .15s,color .15s;
}
.cu-footer-mail:hover{background:var(--cu-dark);color:#fff}
.cu-footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:1.5rem;row-gap:.75rem;font-size:.875rem;font-weight:500;
}
.cu-footer-nav a{color:inherit;text-decoration:none;text-underline-offset:4px}
.cu-footer-nav a:hover{text-decoration:underline}
.cu-socials{display:flex;justify-content:center;gap:.5rem}
.cu-socials a{
  display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;
  border-radius:9999px;background:#fff;color:var(--cu-muted);text-decoration:none;
  transition:opacity .15s;
}
.cu-socials a:hover{opacity:.8}

/* ---------- планшет / десктоп ---------- */
@media (min-width:768px){
  .cu-page h1{font-size:3.75rem}
  .cu-page h2{font-size:2.25rem;line-height:2.5rem}
  .cu-hero-sub{font-size:1.5rem;line-height:2rem}
  .cu-hero-tags{font-size:1.125rem}
  .cu-grid2{grid-template-columns:1fr 1fr;align-items:center}
  .cu-grid3{grid-template-columns:repeat(3,1fr)}
  .cu-cats{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .cu-cats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .cu-shot{max-height:none;width:100%}
}