/* Kezdeseik — лендинг */
body{background:
  radial-gradient(120% 70% at 80% -10%,#FBF5EC 0%,var(--paper) 55%),
  var(--paper);}

.landing-main{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 40px}

/* ── хиро ── */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);
  align-items:center;padding:clamp(24px,5vh,64px) 0 clamp(28px,5vh,56px);
}
.hero h1{font-size:clamp(34px,5.6vw,58px);letter-spacing:-.01em}
.hero .sub{margin-top:14px;font-size:clamp(15px,1.8vw,18px);color:var(--ink-soft);max-width:52ch}
.price-badge{
  display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wax);border:1.5px solid var(--rose-deep);
  border-radius:999px;padding:6px 15px;background:var(--rose-soft);
  text-decoration:none;transition:background .15s,border-color .15s;
}
.price-badge:hover{background:var(--rose);border-color:var(--wax)}

/* выбор «его/её» */
.who{margin-top:30px}
.who .eyebrow{margin-bottom:12px}
.who-cards{display:flex;gap:14px;flex-wrap:wrap}
.who-card{
  flex:1;min-width:150px;max-width:230px;text-decoration:none;text-align:center;
  border-radius:var(--r-md);padding:22px 18px 18px;border:2px solid transparent;
  box-shadow:var(--shadow-soft);transition:transform .2s ease,border-color .2s ease;
}
.who-card:hover{transform:translateY(-3px)}
.who-card:focus-visible{outline:3px solid var(--wax);outline-offset:3px}
.who-card em{display:block;font-style:normal;font-size:42px;line-height:1;margin-bottom:8px}
.who-card b{font-family:var(--serif);font-size:22px;color:var(--ink)}
.who-card small{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft)}
.who-her{background:linear-gradient(160deg,#FDEDF0,var(--rose))}
.who-her:hover{border-color:var(--rose-deep)}
.who-him{background:linear-gradient(160deg,#EBF1FB,#D5E0F2)}
.who-him:hover{border-color:var(--his)}

/* ── визуал: телефон с конвертом ── */
.hero-visual{display:flex;flex-direction:column;align-items:center;gap:12px}
.phone{
  width:min(100%,300px);aspect-ratio:9/17.5;border-radius:34px;padding:10px;
  background:#151019;box-shadow:0 30px 60px rgba(30,22,38,.35),inset 0 0 0 2px #2c2333;
}
.phone-screen{
  width:100%;height:100%;border-radius:26px;overflow:hidden;position:relative;
  background:var(--paper);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;
}
.phone-screen .eyebrow{font-size:9px}
.mini-envelope{position:relative;width:64%;aspect-ratio:3/4;border-radius:8px;background:var(--paper-deep);
  box-shadow:0 10px 22px rgba(58,46,57,.22)}
.mini-envelope i{position:absolute;inset:0;display:block}
.mini-envelope .f1{clip-path:polygon(-1% -1%,101% -1%,50% 52%);background:linear-gradient(180deg,#FAF4EA,var(--paper-deep))}
.mini-envelope .f2{clip-path:polygon(-1% 101%,101% 101%,50% 48%);background:linear-gradient(0deg,#F2E9DA,var(--paper-deep))}
.mini-envelope .f3{clip-path:polygon(-1% -1%,52% 50%,-1% 101%);background:linear-gradient(90deg,#F5EDDF,var(--paper-deep))}
.mini-envelope .f4{clip-path:polygon(101% -1%,48% 50%,101% 101%);background:linear-gradient(-90deg,#F5EDDF,var(--paper-deep))}
.mini-photo{position:absolute;background:#fff;border-radius:2px;box-shadow:0 4px 10px rgba(58,46,57,.25);padding:4% 4% 11%}
.mini-photo b{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:16px;border-radius:1px}
.mp1{width:34%;aspect-ratio:4/5;top:-5%;left:33%;transform:rotate(3deg)}
.mp1 b{background:linear-gradient(140deg,#F3CDD4,#E7A9B6)}
.mp2{width:30%;aspect-ratio:4/5;top:32%;right:-5%;transform:rotate(-6deg)}
.mp2 b{background:linear-gradient(140deg,#F8E3C9,#EBC29A)}
.mp3{width:29%;aspect-ratio:4/5;top:36%;left:-5%;transform:rotate(5deg)}
.mp3 b{background:linear-gradient(140deg,#D9E5D2,#B8CFAF)}
.mp4{width:36%;aspect-ratio:4/5;bottom:-4%;left:30%;transform:rotate(-3deg)}
.mp4 b{background:linear-gradient(140deg,#E4D7EE,#C9B3DE)}
.mini-seal{
  position:absolute;top:50%;left:50%;width:30%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:46% 54% 52% 48%/50% 46% 54% 50%;
  background:radial-gradient(circle at 34% 30%,var(--wax-hi),var(--wax) 52%,var(--wax-dark) 100%);
  box-shadow:0 5px 12px rgba(126,42,60,.45),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 5px rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  animation:sealpulse 2.2s ease-in-out infinite;
}
@keyframes sealpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.mini-seal svg{width:42%;fill:var(--wax-dark)}
.phone-hint{font-size:10px;color:var(--ink-soft);letter-spacing:.05em}
.hero-visual figcaption{font-size:13px;color:var(--ink-soft)}

/* ── как это работает ── */
.how{padding:clamp(20px,4vh,44px) 0}
.how h2{font-size:clamp(24px,3.4vw,32px);text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.step{
  background:rgba(255,255,255,.6);border:1px solid rgba(58,46,57,.08);
  border-radius:var(--r-md);padding:20px;box-shadow:0 6px 18px rgba(58,46,57,.06);
}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--wax);color:#fff;font-weight:700;font-size:14px;margin-bottom:10px;
}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14px;color:var(--ink-soft)}

/* ── нижний CTA ── */
.cta-bottom{text-align:center;padding:clamp(18px,4vh,40px) 0 10px}
.read-more{margin-top:14px;font-size:14px}
.read-more a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.read-more a:hover{color:var(--wax)}

@media (max-width:800px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero .sub{margin-inline:auto}
  .who-cards{justify-content:center}
  .hero-visual{order:2}
  .steps{grid-template-columns:1fr}
}