:root{
  --purple:#8e1a7d;
  --purple-dark:#6d1461;
  --pink:#e6007e;
  --pink-soft:#d94fb0;
  --ink:#4a4a4a;
  --muted:#6f6f6f;
  --line:#e7e0e6;
  --bg:#ffffff;
  --panel:#f4f2f4;
  --c1:#29b6d8;
  --c2:#7cb342;
  --c3:#e6007e;
  --c4:#f5a623;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Heebo",Arial,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.skip{position:absolute;right:-9999px;top:0;background:var(--pink);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{right:10px;top:10px}

/* header */
.top{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center;padding:26px 0 18px}
.brand{text-align:center}
.brand img{margin:0 auto;max-width:190px}
.brand .phones{margin-top:10px;font-size:15px;color:var(--purple);font-weight:500;line-height:1.9}
.brand .phones span{color:var(--muted);font-weight:400}
.brand .phones a{color:var(--purple)}

nav.main{border-bottom:1px solid var(--line);padding-bottom:12px}
nav.main ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
nav.main li:not(:last-child)::after{content:"|";color:#c9bfc7;margin-inline-start:10px}
nav.main a{color:var(--purple);font-weight:500;font-size:15px}
nav.main a[aria-current]{color:var(--pink)}
.langs{margin-top:10px;font-size:14px;color:var(--pink-soft)}
.langs a{color:var(--pink-soft)}
.langs span{color:#c9bfc7;margin:0 6px}

/* layout */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:28px;padding:26px 0 50px;align-items:start}

/* side menu */
.sidemenu{
  background:linear-gradient(180deg,var(--purple-dark) 0%,var(--purple) 45%,#c94ba8 100%);
  border-radius:var(--radius) 0 0 var(--radius);
  padding:26px 20px 60px;position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(110,20,97,.18);
}
.sidemenu h2{font-size:0;margin:0}
.sidemenu ul{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.sidemenu li+li{margin-top:2px}
.sidemenu a{display:block;color:#fff;font-size:14.5px;padding:7px 10px;border-radius:8px;transition:background .18s,transform .18s}
.sidemenu a:hover{background:rgba(255,255,255,.16);text-decoration:none;transform:translateX(-3px)}
.sidemenu a[aria-current]{background:rgba(255,255,255,.22);font-weight:700}
.sidemenu::after{content:"";position:absolute;left:-30px;bottom:-30px;width:150px;height:150px;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 62%);border-radius:50%}

/* content */
main h1{color:var(--pink);font-size:26px;font-weight:500;margin:0 0 16px;line-height:1.4}
main h2{color:var(--purple);font-size:19px;font-weight:700;margin:26px 0 10px}
main h3{color:var(--purple);font-size:16px;font-weight:700;margin:20px 0 8px}
main p{margin:0 0 16px;color:var(--muted)}
main p.intro{margin-bottom:28px}
main ul,main ol{color:var(--muted);padding-inline-start:22px;margin:0 0 16px}
main li{margin-bottom:6px}
main a{color:var(--pink)}
main strong,main b{color:var(--ink)}
main img{border-radius:10px;margin:6px 0 14px;box-shadow:0 6px 18px rgba(0,0,0,.10)}
main hr{border:0;border-top:1px solid var(--line);margin:24px 0}
main table{width:100%;border-collapse:collapse;margin:0 0 16px}
main td,main th{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.card{text-align:center}
.card .ring{display:block;width:132px;height:132px;margin:0 auto 12px;border-radius:50%;
  border:7px solid var(--ring);overflow:hidden;background:#f2f2f2;transition:transform .2s,box-shadow .2s}
.card:hover .ring{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.13)}
.card .ring img{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;box-shadow:none}
.card h3{color:var(--ring);font-size:15.5px;font-weight:700;margin:0 0 6px}
.card h3 a{color:inherit}
.card p{margin:0 0 8px;font-size:13.5px;line-height:1.6}
.card .more{color:var(--ring);font-size:13px;font-weight:500}

/* aside */
aside section+section{margin-top:22px}
aside h2{font-size:15px;color:var(--purple);margin:0 0 10px;font-weight:700}
.yt{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#111}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlink{margin:8px 0 0;font-size:13px}
.ytlink a{color:var(--pink)}
.leadbox{background:var(--panel);border-radius:var(--radius);padding:18px}
.leadbox .lead-title{margin:0 0 12px;font-size:14px;color:var(--purple);font-weight:500;line-height:1.5}
.leadbox label{display:block;font-size:13px;margin-bottom:4px;color:var(--muted)}
.leadbox label i{color:var(--pink);font-style:normal}
.leadbox input[type=text],.leadbox input[type=email],.leadbox input[type=tel]{
  width:100%;padding:8px 10px;border:1px solid #d8d2d8;border-radius:8px;
  font-family:inherit;font-size:14px;margin-bottom:10px;background:#fff}
.leadbox input:focus{outline:2px solid var(--pink-soft);outline-offset:1px}
.leadbox button{width:100%;background:var(--pink);color:#fff;border:0;border-radius:8px;padding:10px 12px;
  font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .18s}
.leadbox button:hover{background:#c30069}

/* footer */
footer{border-top:1px solid var(--line);padding:18px 0 34px;text-align:center;color:#9a929a;font-size:13px}
footer p{margin:4px 0}
footer a{color:var(--purple)}
.fcontact{font-size:14px;color:var(--purple)}

/* ltr language pages */
html[dir=ltr] main{text-align:left}
html[dir=ltr] .sidemenu a:hover{transform:translateX(3px)}

@media (max-width:1000px){
  .layout{grid-template-columns:200px minmax(0,1fr)}
  aside{grid-column:1 / -1}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .top{grid-template-columns:1fr;text-align:center}
  nav.main ul{justify-content:center}
  .langs{text-align:center}
  .layout{grid-template-columns:1fr;gap:22px}
  .sidemenu{border-radius:var(--radius)}
  .sidemenu ul{display:grid;grid-template-columns:1fr 1fr;gap:2px}
}
