body{font-family:system-ui,-apple-system,Arial,sans-serif;max-width:760px;margin:0 auto;padding:20px 16px 80px;line-height:1.5;color:#111;}
nav{display:flex;flex-wrap:wrap;gap:12px;border-bottom:1px solid #ccc;padding-bottom:12px;margin-bottom:24px;font-size:14px;}
nav a{color:#0645AD;text-decoration:none;}
nav a:hover{text-decoration:underline;}
.screen{border-top:1px dashed #ccc;padding:18px 0;}
.screen:first-of-type{border-top:none;}
.screen-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#888;margin:0 0 6px;}
h1{font-size:1.6rem;margin:.2em 0;}
h2{font-size:1.3rem;margin-top:0;}
.sub{color:#555;font-size:1rem;margin:.3em 0 .6em;}
.cta{display:inline-block;background:#111;color:#fff;padding:8px 16px;border-radius:4px;text-decoration:none;font-size:.9rem;margin:4px 6px 4px 0;}
.cta.secondary{background:none;color:#111;border:1px solid #111;}
.photo{font-size:.85rem;color:#999;font-style:italic;margin-top:8px;}
table{border-collapse:collapse;width:100%;font-size:.9rem;margin:8px 0;}
td,th{border-bottom:1px solid #ddd;padding:6px 8px;text-align:left;}
footer{margin-top:40px;padding-top:16px;border-top:1px solid #ccc;font-size:.8rem;color:#888;}
.feedback{margin-top:12px;padding:10px;background:#f7f7f2;border:1px solid #ddd;border-radius:4px;}
.feedback label{display:block;font-size:.72rem;color:#888;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
.feedback textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:.85rem;padding:6px;border:1px solid #ccc;border-radius:4px;resize:vertical;}
.feedback button{margin-top:6px;padding:5px 12px;font-size:.8rem;background:#0645AD;color:#fff;border:none;border-radius:4px;cursor:pointer;}
.fb-status{margin-left:8px;font-size:.8rem;color:#2a2;}

/* ===== VH — Hero / Features (главная) ===== */
:root{
  --vh-orange:#e96636;
  --vh-green:#3a8255;
  --vh-pink:#f6b8c9;
  --vh-cream:#f5eedd;
  --vh-cream-2:#fbf5e8;
  --vh-ink:#20402a;
  --vh-font-display:'Montserrat',system-ui,sans-serif;
  --vh-font-body:'Montserrat',system-ui,sans-serif;
}
body.vh-page{padding-top:0;max-width:none;font-family:var(--vh-font-body);overflow-x:clip;}
.vh-full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box;}
.vh-inner{max-width:1200px;margin:0 auto;padding:0 24px;}

/* --- Hero: слоистая структура --- */
.vh-hero{position:relative;height:100vh;min-height:640px;background:var(--vh-orange);overflow:visible;}

/* header */
.vh-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,48px) 0;z-index:10;}
.vh-logo{font-family:var(--vh-font-display);font-weight:800;font-size:1.2rem;color:var(--vh-cream);text-decoration:none;}
.vh-menu-toggle{display:none;}
.vh-burger{display:flex;flex-direction:column;gap:5px;width:28px;cursor:pointer;padding:6px;}
.vh-burger span{display:block;height:3px;border-radius:3px;background:var(--vh-cream);}
.vh-menu{display:none;flex-direction:column;position:absolute;top:56px;right:clamp(20px,4vw,48px);background:var(--vh-cream-2);border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);min-width:200px;z-index:20;}
.vh-menu-toggle:checked ~ .vh-menu{display:flex;}
.vh-menu a{color:var(--vh-ink);text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:700;font-size:.92rem;}
.vh-menu a:hover{background:var(--vh-cream);}

/* Слой 2: типографика ×2 */
.vh-hero-title{position:absolute;top:4%;left:0;right:0;text-align:center;padding:0 12px;z-index:1;}
.vh-hero-title h1{margin:0;font-family:var(--vh-font-display);font-weight:900;color:var(--vh-cream);font-size:clamp(4.5rem,19vw,13.5rem);line-height:.86;letter-spacing:-.02em;text-wrap:balance;}

/* Слой 3: фото ×1.5, на 20% ниже (верхняя точка top:36%) */
.vh-hero-photo{position:absolute;left:50%;top:36%;transform:translateX(-50%);width:min(540px,60%);aspect-ratio:3/4;background:#fff;border-radius:16px;z-index:3;box-shadow:0 24px 60px rgba(0,0,0,.2);display:flex;align-items:flex-end;justify-content:center;}
.vh-hero-photo span{margin-bottom:16px;font-weight:700;font-size:.72rem;color:#9a9a9a;text-align:center;padding:0 10px;}
@media (prefers-reduced-motion:no-preference){.vh-hero-photo{animation:vh-float 5s ease-in-out infinite;}}
@keyframes vh-float{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(16px);}}

/* Слой 3: текст правым краем к фото + декор той же ширины справа, ютуб по центру декора */
.vh-hero-sides{position:absolute;top:46%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;z-index:4;pointer-events:none;}
/* пузырь речи (SVG) с текстом внутри */
.vh-hero-bubble{flex:none;width:430px;aspect-ratio:400/260;box-sizing:border-box;background:url(/assets/bubble.svg) no-repeat center/contain;display:flex;align-items:center;justify-content:center;padding:30px 56px 72px 56px;}
.vh-hero-blurb{margin:0;color:#3E2114;font-size:1.05rem;line-height:1.35;font-weight:600;text-align:center;}
.vh-hero-gap{flex:none;width:calc(min(540px,60vw) + 32px);}
.vh-hero-decor{flex:none;width:430px;align-self:stretch;}
/* YouTube по центру фото, на 2/3 от верха */
.vh-yt-onphoto{position:absolute;left:50%;top:66.67%;transform:translate(-50%,-50%);width:clamp(90px,10vw,132px);z-index:4;}
.vh-yt-onphoto svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));animation:vh-yt 3s ease-in-out infinite;}
@keyframes vh-yt{0%,100%{transform:translateY(0) scale(1) rotate(-2deg);}50%{transform:translateY(-8px) scale(1.06) rotate(2deg);}}
@media (prefers-reduced-motion:reduce){.vh-yt-onphoto svg{animation:none;}}

/* Слой 1: анимированная волна (canvas) */
.vh-wave-canvas{position:absolute;left:0;bottom:-1px;width:100%;height:26%;z-index:1;display:block;}

/* Слои 4–5: ленты-конвейеры (×2 тоньше, бегущий текст) */
.vh-ribbon{position:absolute;left:-12%;width:124%;overflow:hidden;display:flex;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.12);}
.vh-ribbon-track{display:flex;white-space:nowrap;will-change:transform;}
.vh-ribbon-track span{font-family:var(--vh-font-display);font-weight:800;letter-spacing:.06em;font-size:clamp(.7rem,1.3vw,1rem);}
.vh-ribbon-green{bottom:3%;height:6.5%;background:var(--vh-green);color:var(--vh-cream);transform:rotate(-6deg);z-index:6;}
.vh-ribbon-pink{bottom:1%;height:5.5%;background:var(--vh-pink);color:var(--vh-green);transform:rotate(4deg);z-index:7;}
.vh-ribbon-green .vh-ribbon-track{animation:vh-marq-l 22s linear infinite;}
.vh-ribbon-pink .vh-ribbon-track{animation:vh-marq-r 26s linear infinite;}
@keyframes vh-marq-l{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes vh-marq-r{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.vh-ribbon-track{animation:none!important;}}

@media (max-width:760px){
  .vh-hero-sides{display:none;}
  .vh-hero-photo{top:40%;width:78%;}
  .vh-hero-title{top:6%;}
}

/* --- Cards (экран 2): пары разной ширины, кривые края, цветная тень, микроанимации --- */
.vh-features-section{background:var(--vh-cream);padding:clamp(40px,6vw,72px) 0;}
.vh-cards{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,34px);}
.vh-cards-row{display:flex;gap:clamp(18px,2.6vw,34px);align-items:stretch;}
@media (max-width:640px){.vh-cards-row{flex-direction:column;}}
.vh-card{position:relative;padding:clamp(26px,3vw,40px);color:var(--vh-cream);min-height:210px;animation:vh-cardidle 7s ease-in-out infinite;transition:transform .28s cubic-bezier(.2,.8,.25,1),filter .28s ease;will-change:transform;}
.vh-card.wide{flex:1.42;}
.vh-card.narrow{flex:1;}
.vh-card-orange{background:var(--vh-orange);--sc:233,102,54;}
.vh-card-green{background:var(--vh-green);--sc:58,130,85;}
/* idle: волнистые края + тень «дышат» (без transform, чтобы не мешать hover) */
@keyframes vh-cardidle{
  0%,100%{border-radius:34px 48px 36px 44px;box-shadow:0 14px 30px rgba(var(--sc),.42);}
  50%{border-radius:46px 34px 48px 34px;box-shadow:0 26px 46px rgba(var(--sc),.52);}
}
/* реакция на наведение: подъём, лёгкое увеличение, усиленная цветная тень */
.vh-card:hover{transform:translateY(-12px) scale(1.03);filter:drop-shadow(0 22px 30px rgba(var(--sc),.42));}
@media (prefers-reduced-motion:reduce){.vh-card{animation:none;border-radius:38px 44px 38px 44px;}}
/* заголовок: зелёная плашка со скруглёнными углами + бегущая волна по верх/низ краю */
.vh-card-head{
  position:relative;overflow:hidden;display:inline-block;
  background:var(--vh-green);color:#fff;
  font-family:var(--vh-font-display);font-weight:800;
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.15;
  padding:14px 30px;margin-bottom:18px;
  border-radius:16px;
}
.vh-card-head::before,.vh-card-head::after{
  content:"";position:absolute;left:-8%;width:116%;height:10px;
  background-repeat:repeat-x;background-size:44px 10px;
  animation:vh-headwave 2.3s linear infinite;
}
.vh-card-head::before{top:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10'%3E%3Cpath d='M0,0 H44 V5 C33,9 11,1 0,5 Z' fill='%23e96636'/%3E%3C/svg%3E");}
.vh-card-head::after{bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10'%3E%3Cpath d='M0,5 C11,9 33,1 44,5 V10 H0 Z' fill='%23e96636'/%3E%3C/svg%3E");animation-direction:reverse;}
@keyframes vh-headwave{from{background-position-x:0;}to{background-position-x:44px;}}
@media (prefers-reduced-motion:reduce){.vh-card-head::before,.vh-card-head::after{animation:none;}}

/* картинки на карточках: угол выходит за границу, переворот при наведении */
.vh-card-fig{position:absolute;width:clamp(84px,9vw,120px);aspect-ratio:1;z-index:5;perspective:640px;pointer-events:none;}
.vh-fig-tr-up{top:0;right:26px;transform:translateY(-20%);}      /* карточка 1: за верхнюю границу на 20% */
.vh-fig-tr-right{top:14px;right:0;transform:translateX(20%);}    /* карточка 4: за правую границу на 20% */
.vh-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.2,.2,1);}
.vh-card:hover .vh-flip{transform:rotateY(180deg);}
.vh-flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));}
.vh-flip .vh-back{transform:rotateY(180deg);}
@media (prefers-reduced-motion:reduce){.vh-flip{transition:none;}}
.vh-card p{margin:0;font-family:var(--vh-font-body);font-weight:700;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;max-width:82%;color:var(--vh-cream);}

.vh-feedback{background:var(--vh-cream);}
.vh-feedback .feedback{background:var(--vh-cream-2);border:1px dashed #d8cfb4;max-width:1200px;margin:0 auto;}