@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#081126;--rainbow:linear-gradient(90deg,#ff4937,#ffb400 25%,#62cd18 48%,#0aa6ef 72%,#bf42fa)}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,Arial,sans-serif}
.page{width:min(calc(100% - 64px),1500px);margin:auto}
.topbar{height:170px;padding-top:42px;display:flex;justify-content:space-between;align-items:flex-start}
.brand{display:flex;align-items:baseline;text-decoration:none;letter-spacing:-.065em;line-height:1}
.brand span{font-size:clamp(2.8rem,4.6vw,5rem);font-weight:800}
.brand-black{color:#05070b}.brand-rainbow{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.contacts{display:grid;gap:13px;padding-top:2px}
.contact{display:flex;align-items:center;gap:13px;text-decoration:none}
.contact svg{width:31px;height:31px;fill:none;stroke:#746bff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact img{display:block;height:auto}.contact:first-child img{width:260px}.contact.phone img{width:195px}

.desktop-stage{position:relative;width:1000px;height:700px;margin:0 auto 70px}
.orbit{position:absolute;left:500px;top:350px;width:570px;height:570px;border:2px dashed #bec7da;border-radius:50%;transform:translate(-50%,-50%)}
.center-card{position:absolute;left:500px;top:350px;width:306px;height:306px;border-radius:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;box-shadow:0 28px 75px rgba(44,56,92,.13)}
.center-card h1,.mobile-center h1{margin:0;font-size:2.05rem;line-height:1.28;letter-spacing:-.035em;font-weight:500}
.rainbow-line{width:104px;height:3px;margin-top:28px;border-radius:99px;background:var(--rainbow)}

.service{position:absolute;width:138px;height:138px;text-decoration:none;color:var(--ink)}
.service .node{width:138px;height:138px;border:9px solid #fff;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 18px 38px rgba(0,0,0,.12)}
.service .node svg{width:73px;height:73px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.service .copy{position:absolute;top:34px;width:245px;display:grid;gap:10px}
.service .copy strong{font-size:1.28rem}.service .copy span{font-size:.98rem;line-height:1.5;font-weight:500}

/* exact symmetric node centers: (500,65), (771,262), (668,581), (332,581), (229,262) */
.loxone{left:431px;top:-4px}.loxone .node{background:linear-gradient(145deg,#8ddd18,#18b900)}.loxone .copy{left:166px}.loxone strong{color:#18b900}
.vyskova{left:702px;top:193px}.vyskova .node{background:linear-gradient(145deg,#26c7ff,#078ee8)}.vyskova .copy{left:166px}.vyskova strong{color:#078ee8}
.termo{left:599px;top:512px}.termo .node{background:linear-gradient(145deg,#ff5b3d,#f10d0d)}.termo .copy{left:166px}.termo strong{color:#f10d0d}
.podprsenkova{left:263px;top:512px}.podprsenkova .node{background:linear-gradient(145deg,#ff47af,#ed0097)}.podprsenkova .copy{right:166px;text-align:right}.podprsenkova strong{color:#ed0097}.bra{transform:translateY(0)}
.elektro{left:160px;top:193px}.elektro .node{background:linear-gradient(145deg,#ffd120,#f5ad00)}.elektro .copy{right:166px;text-align:right}.elektro strong{color:#f5ad00}

.benefits{display:grid;grid-template-columns:repeat(5,1fr);margin:0 auto 42px;padding:28px 20px;border:1px solid #edf0f5;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(54,70,110,.10)}
.benefits article{min-height:104px;display:flex;align-items:center;justify-content:center;gap:22px;padding:8px 22px;border-right:1px solid #e3e7ef}
.benefits article:last-child{border-right:0}
.benefits svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.green{color:#00b91f}.yellow{color:#f6b400}.blue{color:#078ee8}.pink{color:#ee0a99}.red{color:#f20b16}
.benefits span{font-size:.98rem;line-height:1.55;font-weight:500}
.mobile-list{display:none}

@media(max-height:850px) and (min-width:1101px){
 .topbar{height:145px;padding-top:28px}
 .desktop-stage{transform:scale(.88);transform-origin:top center;margin-bottom:-10px}
}
@media(max-width:1100px){
 .desktop-stage{display:none}
 .mobile-list{display:grid;gap:16px;margin:0 auto 45px}
 .mobile-center{width:286px;height:286px;margin:0 auto 12px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 28px 75px rgba(44,56,92,.13)}
 .mobile-item{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid #edf0f5;border-radius:22px;text-decoration:none;color:var(--ink);box-shadow:0 12px 28px rgba(44,56,92,.06)}
 .mini-node{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:700;flex:none}
 .mobile-item strong{display:block;margin-bottom:5px}.mobile-item small{font-size:.88rem}
 .mobile-item.loxone .mini-node{background:#55c900}.mobile-item.loxone strong{color:#18b900}
 .mobile-item.elektro .mini-node{background:#ffc000}.mobile-item.elektro strong{color:#f5ad00}
 .mobile-item.vyskova .mini-node{background:#0ba6ef}.mobile-item.vyskova strong{color:#078ee8}
 .mobile-item.termo .mini-node{background:#f52b1f}.mobile-item.termo strong{color:#f10d0d}
 .mobile-item.podprsenkova .mini-node{background:#ef0b9b}.mobile-item.podprsenkova strong{color:#ed0097}
}
@media(max-width:760px){
 .page{width:min(calc(100% - 28px),1500px)}
 .topbar{height:auto;min-height:160px;padding-top:26px}
 .contact:first-child img{width:205px}.contact.phone img{width:155px}
 .contact svg{width:24px;height:24px}
 .benefits{grid-template-columns:1fr 1fr}
 .benefits article{border-right:0;border-bottom:1px solid #e3e7ef}
 .benefits article:last-child{grid-column:1/-1;border-bottom:0}
}
@media(max-width:540px){
 .topbar{display:grid;gap:18px}
 .benefits{grid-template-columns:1fr}
 .benefits article{justify-content:flex-start}
 .benefits article:last-child{grid-column:auto}
}