.hsb-wrap{width:min(1200px,90vw);margin:auto}.hsb-hero{--accent:#0a8f55;background:linear-gradient(115deg,#f7faf7,#e5f4eb);color:#12231c;padding:70px 0}.hsb-hero--blue{--accent:#1758b0;background:linear-gradient(115deg,#f7f9fc,#e7effd)}.hsb-hero--dark{--accent:#151b18;background:linear-gradient(115deg,#f8f9f8,#e7ece9)}.hsb-hero--orange{--accent:#ef6b20;background:linear-gradient(115deg,#fffaf6,#fff0e5)}.hsb-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:7%}.hsb-eyebrow{font-size:11px;font-weight:900;letter-spacing:.17em;color:#0a8f55;margin:0 0 14px}.hsb-hero .hsb-eyebrow{color:var(--accent)}.hsb-hero h1{font-size:clamp(44px,5vw,70px);line-height:1;letter-spacing:-.05em;margin:0 0 22px}.hsb-intro{font-size:17px;line-height:1.7;color:#56635d;max-width:690px}.hsb-intro p{margin:0}.hsb-trust{display:flex;gap:22px;margin-top:28px;font-size:12px;font-weight:700;color:#64716b}.hsb-device{height:330px;position:relative;display:grid;place-items:center}.hsb-device:before{content:"";position:absolute;width:170px;height:315px;border-radius:32px;background:linear-gradient(145deg,#dfeee5,#8fc8a7);border:7px solid #cadbd2;box-shadow:0 25px 45px #193b2a2b;transform:rotate(9deg)}.hsb-hero--blue .hsb-device:before{background:linear-gradient(145deg,#e6efff,#8daee0)}.hsb-hero--dark .hsb-device:before{background:linear-gradient(145deg,#dfe5e2,#52645c)}.hsb-hero--orange .hsb-device:before{background:linear-gradient(145deg,#fff0e4,#efaa7f)}.hsb-device>span{position:relative;z-index:2;display:grid;place-items:center;width:65px;height:65px;border-radius:20px;background:#fff;color:var(--accent);font-size:31px;font-weight:900;transform:rotate(9deg)}.hsb-device i{position:absolute;width:300px;height:300px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%}.hsb-choices{padding:65px 0}.hsb-choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.hsb-choice-grid a{border:1px solid #dfe6e1;border-radius:13px;padding:24px;min-height:185px;display:flex;flex-direction:column;text-decoration:none;color:#12231c;transition:.2s}.hsb-choice-grid a:hover{transform:translateY(-4px);box-shadow:0 14px 35px #11291c16}.hsb-choice-grid span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#e7f5ed;color:#0a8f55;font-size:28px;margin-bottom:24px}.hsb-choice-grid b{font-size:16px}.hsb-choice-grid small{font-size:11px;color:#69766f;line-height:1.5;margin-top:8px}.hsb-guide{background:#f4f7f4;padding:80px 0;color:#12231c}.hsb-guide__grid{display:grid;grid-template-columns:1fr 1fr;gap:9%}.hsb-guide h2{font-size:clamp(32px,3.5vw,48px);line-height:1.05;letter-spacing:-.04em;margin:0 0 20px}.hsb-guide__text,.hsb-description{font-size:15px;line-height:1.75;color:#617069}.hsb-description{margin-top:20px}.hsb-faq details{border-bottom:1px solid #cbd7d0;padding:0 0 16px;margin-bottom:18px}.hsb-faq summary{font-size:14px;font-weight:800;cursor:pointer}.hsb-faq p{font-size:13px;line-height:1.6;color:#65726b}
@media(max-width:900px){.hsb-hero__grid{grid-template-columns:1fr}.hsb-device{height:280px}.hsb-choice-grid{grid-template-columns:1fr 1fr}.hsb-guide__grid{grid-template-columns:1fr}}
@media(max-width:600px){.hsb-wrap{width:auto;margin:0 22px}.hsb-hero{padding:50px 0}.hsb-hero h1{font-size:42px}.hsb-trust{flex-direction:column;gap:8px}.hsb-device{height:240px}.hsb-device:before{transform:scale(.7) rotate(9deg)}.hsb-choice-grid{grid-template-columns:1fr}.hsb-guide{padding:60px 0}}
.hsb-categories{padding:52px 0 66px;background:#fff}.hsb-categories__head{max-width:720px;margin-bottom:28px}.hsb-categories__head h2{font-size:clamp(2.6rem,4vw,4.2rem);margin:7px 0 10px}.hsb-categories__head>div{color:#5f625f;font-size:1.6rem}.hsb-tiles{display:grid;grid-template-columns:repeat(var(--hsb-columns-desktop,5),minmax(0,1fr));gap:12px}.hsb-tile{display:block;color:#151715;text-decoration:none;background:#f4f4f4;transition:transform .2s ease,box-shadow .2s ease}.hsb-tile:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,30,25,.12)}.hsb-tile__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4d565d,#1c2227 70%)}.hsb-tile__media img{width:100%;height:100%;object-fit:cover}.hsb-tile__label{min-height:82px;padding:18px 14px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:1.55rem;line-height:1.3}.hsb-tile__label span:last-child{font-size:1.9rem;flex:0 0 auto}.hsb-tile__art{position:absolute;inset:0}.hsb-art-case{position:absolute;width:38%;height:66%;left:22%;top:17%;border:8px solid #9da7ad;border-radius:28px;transform:rotate(-13deg);box-shadow:0 18px 25px rgba(0,0,0,.35)}.hsb-art-case:before{content:"";position:absolute;width:30%;aspect-ratio:1;left:10%;top:6%;border:4px solid #c2c9cd;border-radius:12px}.hsb-art-case--two{left:46%;top:20%;transform:rotate(10deg);background:#303940;border-color:#646f76}.hsb-art-glass{position:absolute;width:54%;height:72%;left:23%;top:14%;border:3px solid rgba(224,238,244,.75);border-radius:25px;transform:rotate(-10deg);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.02));box-shadow:0 20px 40px rgba(0,0,0,.4)}.hsb-art-glass--two{left:31%;top:10%;transform:rotate(8deg)}.hsb-art-cable{position:absolute;width:54%;aspect-ratio:1;left:23%;top:20%;border:8px solid #aeb7bc;border-radius:50%;box-shadow:0 15px 25px rgba(0,0,0,.4)}.hsb-art-plug{position:absolute;width:19%;height:26%;right:16%;top:15%;border-radius:9px;background:#bcc5ca;box-shadow:0 15px 25px rgba(0,0,0,.35)}
@media(max-width:989px){.hsb-tiles{grid-template-columns:repeat(var(--hsb-columns-tablet,3),minmax(0,1fr))}}
@media(max-width:749px){.hsb-tiles{grid-template-columns:repeat(var(--hsb-columns-mobile,2),minmax(0,1fr));gap:8px}.hsb-tile__label{min-height:70px;padding:12px 8px;font-size:1.35rem}.hsb-tile__label span:last-child{font-size:1.6rem}.hsb-categories{padding:38px 0 48px}}
.hsb-tiles--two{grid-template-columns:repeat(2,minmax(0,230px));justify-content:center}
@media(max-width:749px){.hsb-tiles--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hsb-empty{grid-column:1/-1;padding:32px;border:2px dashed #b9c7bf;border-radius:12px;background:#f5f8f6;color:#4e5d55;text-align:center;font-size:1.5rem}