:root{
  --bg-a:#E8EEF6;   /* пастельно-блакитний */
  --bg-b:#EDE7F3;   /* пастельно-лавандовий */
  --bg-c:#F3ECE7;   /* пастельно-персиковий */
  --card:#D9E5F1;
  --card-edge:rgba(255,255,255,.55);
  --navy:#2E5A8A;
  --navy-deep:#234A74;
  --text:#22344A;
  --muted:#4F6482;
  --gold:#D3B27C;
  --tg:#2AABEE;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 0% 0%, var(--bg-a) 0%, transparent 65%),
    radial-gradient(900px 700px at 100% 0%, var(--bg-b) 0%, transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, var(--bg-c) 0%, transparent 60%),
    #EEF0F5;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 12px calc(16px + env(safe-area-inset-bottom));
  line-height:1.5;
}
.card{
  width:100%;
  max-width:960px;
  background:linear-gradient(160deg,#E2ECF6 0%,var(--card) 55%,#D2DFEE 100%);
  border:1px solid var(--card-edge);
  border-radius:24px;
  padding:18px;
  box-shadow:0 30px 70px -30px rgba(35,74,116,.35);
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.photo{
  width:min(86%,320px);
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(35,74,116,.45);
  outline:4px solid rgba(255,255,255,.6);
}
.photo picture{display:block;width:100%;height:100%}
.photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:60% 15%;
  display:block;
}
.content{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0 2px 6px;
}
h1{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:clamp(30px,6vw,44px);
  line-height:1.12;
  color:var(--navy-deep);
  text-wrap:balance;
}
h1 .sep{display:none}
h1 .sub{display:block;font-size:.68em;font-weight:500;margin-top:.15em}
.rule{width:56px;height:2px;background:var(--gold);border-radius:2px;margin:2px 0}
.role{font-weight:600;font-size:16px;color:var(--navy)}
.desc{font-size:17px;color:var(--muted);max-width:34ch}
.desc b{color:var(--text);font-weight:700}
.btn{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  max-width:360px;
  min-height:60px;
  padding:14px 26px 14px 20px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:17px;
  white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(46,90,138,.7);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
  position:sticky;
  bottom:calc(12px + env(safe-area-inset-bottom));
}
.btn .ic{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--tg);
  display:grid;place-items:center;
  flex:none;
}
.btn .ic svg{width:18px;height:18px;display:block;transform:translateX(-1px)}
.btn:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (min-width:400px){
  .card{padding:24px;border-radius:28px}
  .role{font-size:17px}
}
@media (min-width:760px){
  .card{grid-template-columns:380px 1fr;align-items:center;gap:40px;padding:32px}
  .photo{width:100%;margin:0;aspect-ratio:3/4;outline-width:6px}
  .content{text-align:left;align-items:flex-start;padding:8px 8px 8px 0;gap:18px}
  h1 .sep{display:inline}
  h1 .sub{display:inline;font-size:1em;font-weight:inherit;margin:0}
  .btn{width:auto;min-width:300px;position:static}
}
@media (min-width:1000px){
  .card{grid-template-columns:410px 1fr;gap:48px;padding:36px}
  .content{padding-right:16px}
  h1{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}