/* Завиток и Лепесток — лого + меню */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#e9ebf0}
img{display:block;max-width:100%;height:auto}

/* ---------- Главный экран с логотипом ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vmin;
  background:#ffffff;
}
.hero-logo{
  width:auto;
  max-width:min(86vw,720px);
  max-height:62vh;
}

/* стрелка «листайте вниз» */
.scroll{
  position:absolute;
  left:50%;
  bottom:clamp(18px,4.5vh,42px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
}
.chev{
  width:16px;height:16px;
  border-right:2px solid #17145f;
  border-bottom:2px solid #17145f;
  transform:rotate(45deg);
  opacity:.55;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.3}
  50%{transform:rotate(45deg) translate(3px,3px);opacity:.85}
}

/* ---------- Меню ---------- */
.menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,3vw,34px);
  padding:clamp(18px,4vw,52px) clamp(0px,3vw,24px) clamp(40px,8vw,84px);
}
.menu img{
  width:100%;
  max-width:820px;
  border-radius:5px;
  box-shadow:0 12px 44px rgba(23,20,95,.16);
}

/* ---------- Мобильные ---------- */
@media (max-width:640px){
  .menu{gap:10px;padding:10px 0 28px}
  .menu img{border-radius:0;box-shadow:0 6px 22px rgba(23,20,95,.14)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chev{animation:none}
}