@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.aws-container .aws-search-form{position:relative;width:100%;float:none!important;display:-webkit-box!important;display:-moz-box!important;display:-ms-flexbox!important;display:-webkit-flex!important;display:flex!important;align-items:stretch;height:44px}.aws-container .aws-search-form *,.aws-search-result{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-hyphens:manual;-webkit-hyphens:manual;hyphens:manual;border-radius:0!important}.aws-container .aws-search-form .aws-loader,.aws-container .aws-search-form .aws-loader:after{border-radius:50%!important;width:20px;height:20px}.aws-container .aws-search-form .aws-wrapper{flex-grow:1;position:relative;vertical-align:top;padding:0;width:100%;overflow:hidden}.aws-container .aws-search-form .aws-loader{position:absolute;display:none;right:10px;top:50%;z-index:999;margin:-10px 0 0;font-size:10px;text-indent:-9999em;border-top:3px solid #ededed;border-right:3px solid #ededed;border-bottom:3px solid #ededed;border-left:3px solid #555}.aws-container .aws-search-form.aws-processing .aws-loader{display:block;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 .7s infinite linear;animation:load8 .7s infinite linear}.aws-container .aws-search-label{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.aws-container .aws-search-field{width:100%;max-width:100%;color:#313131;padding:6px;line-height:30px;display:block;font-size:12px;position:relative;z-index:2;-webkit-appearance:none;height:100%;min-height:inherit;margin:0!important;border:1px solid #d8d8d8;outline:0}@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:1024px){.aws-container .aws-search-field{font-size:16px}}.aws-container .aws-search-field::-ms-clear{display:none;width:0;height:0}.aws-container .aws-search-field::-ms-reveal{display:none;width:0;height:0}.aws-container .aws-search-field::-webkit-search-cancel-button,.aws-container .aws-search-field::-webkit-search-decoration,.aws-container .aws-search-field::-webkit-search-results-button,.aws-container .aws-search-field::-webkit-search-results-decoration{display:none}.aws-container .aws-search-field:focus{background-color:#fff}.aws-container .aws-show-clear .aws-search-field{padding-right:40px}.aws-container .aws-search-field:focus::-webkit-input-placeholder{color:transparent}.aws-container .aws-search-field:focus:-moz-placeholder{color:transparent}.aws-container .aws-search-field:focus::-moz-placeholder{color:transparent}.aws-container .aws-search-field:focus:-ms-input-placeholder{color:transparent}.aws-container .aws-search-form .aws-search-clear{display:none!important;position:absolute;top:0;right:0;z-index:2;cursor:pointer;color:#757575;height:100%;width:38px;padding:0 0 0 10px;text-align:left}.aws-container .aws-search-form .aws-search-clear span{position:relative;display:block;font-size:24px;line-height:24px;top:50%;margin-top:-12px}.aws-container .aws-search-form.aws-show-clear.aws-form-active .aws-search-clear{display:block!important}.aws-container .aws-search-form.aws-form-active.aws-processing .aws-search-clear{display:none!important}.aws-container .aws-search-form .aws-search-btn{padding:0;line-height:10px;width:42px}.aws-container .aws-search-form .aws-search-btn_icon{display:inline-block;fill:currentColor;height:24px;line-height:24px;position:relative;width:42px;color:#555}.aws-container .aws-search-form .aws-search-btn svg{display:block;height:100%;width:100%}.aws-container[data-show-page=false] .aws-search-form .aws-search-btn:hover{background:#ededed;cursor:default}.aws-container .aws-search-form .aws-form-btn{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;flex-direction:column;text-align:center;background:#ededed;border:1px solid #d8d8d8;margin:0 0 0-1px;cursor:pointer;position:relative;white-space:nowrap;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color 100ms ease-in-out;-moz-transition:background-color 100ms ease-in-out;-o-transition:background-color 100ms ease-in-out;transition:background-color 100ms ease-in-out}.aws-container .aws-search-form .aws-form-btn:hover{background:#dcdcdc}.aws-container .aws-search-form .aws-form-btn:active{background:#d8d8d8}.aws-container[data-buttons-order="3"] .aws-search-form .aws-wrapper{-webkit-order:2;order:2}.aws-container[data-buttons-order="3"] .aws-search-form .aws-search-btn{margin:0-1px 0 0}.aws-search-result{position:absolute;text-align:left;z-index:9999999999999;background:#fff;width:100%;margin-top:-1px;border:1px solid #ccc;font-size:12px;line-height:16px}.aws-search-result ul{list-style:none;padding:0!important;margin:0!important;max-height:400px;overflow-y:auto}.aws-search-result ul::-webkit-scrollbar-track{-webkit-box-shadow:none;background-color:#ededed}.aws-search-result ul::-webkit-scrollbar{width:7px;background-color:#ededed}.aws-search-result ul::-webkit-scrollbar-thumb{background-color:#d8d8d8}.aws-search-result ul li{list-style:none;border-bottom:1px solid #ccc;overflow:hidden;margin:0!important;position:relative}.aws-search-result ul li:last-child{border-bottom:0}.aws-search-result .aws_result_link{display:block;cursor:pointer;padding:10px 8px;height:100%;overflow:hidden;text-decoration:none;border:0}.aws-search-result .aws_top_text{width:100%;padding:10px 8px;border-bottom:1px solid #ccc}.aws-search-result .aws_result_item.hovered,.aws-search-result .aws_result_item:hover,.aws-search-result .aws_search_more a:hover{background:#f5f5f5}.aws-search-result .aws_results .aws_result_item{position:relative}.aws-search-result .aws_result_item .aws_result_link_top{position:absolute;z-index:1;white-space:nowrap;text-indent:-9999px;overflow:hidden;top:0;bottom:0;left:0;right:0;opacity:0;outline:0;text-decoration:none}.aws-search-result .aws_result_item [data-link],.aws-search-result .aws_result_item a,.aws-search-result .aws_result_item button,.aws-search-result .aws_result_item span[href]{position:relative;z-index:2}.aws-search-result .aws_result_content{overflow:hidden;display:block}.aws-search-result .aws_result_title{display:block;font-weight:400;margin-bottom:3px;color:#21759b}.aws-search-result .aws_result_featured{margin:0 6px 0 0;position:relative;top:-2px;left:3px}.aws-search-result .aws_result_featured svg{width:13px;height:13px;fill:#fa0;vertical-align:bottom}.aws-search-result .aws_result_sku,.aws-search-result .aws_result_stock{display:block;font-weight:400;margin-top:4px;margin-bottom:5px;color:#7ad03a}.aws-search-result .aws_result_stock.out{color:#a44}.aws-search-result .aws_result_sku{margin-top:3px;color:#222}.aws-search-result .aws_result_cat .aws_result_title,.aws-search-result .aws_result_tag .aws_result_title,.aws-search-result .aws_result_top_custom_item .aws_result_title{margin-bottom:2px}.aws-search-result .aws_result_excerpt{display:block;color:#222}.aws-search-result .aws_result_price{display:block;padding:2px 0;color:#222}.aws-search-result .aws_result_price del{background:0 0;padding:0 12px 0 0;opacity:.8;text-decoration:line-through!important}.aws-search-result .aws_result_price ins{background:0 0;padding:0 12px 0 0;opacity:1}.aws-search-result .aws_result_cats{display:block;float:left;margin:0 20px 0 0}.aws-search-result .aws_result_image{display:block;height:100%;float:left;padding:0 10px 0 0}.aws-search-result .aws_result_image img{width:50px;height:auto;box-shadow:none}.aws-search-result .aws_result_sale{display:block;height:42px;overflow:hidden;position:absolute;right:0;top:0;width:47px}.aws-search-result .aws_onsale{background:#77a464 0 0;color:#fff;display:block;float:right;height:20px;padding-top:2px;position:relative;right:-25px;text-align:center;top:3px;transform:rotate(45deg);width:77px}.aws-search-result .aws_no_result{line-height:1.5;padding:10px 6px;cursor:auto}.aws-search-result .aws_search_more a{line-height:40px;display:block;text-decoration:none;border:0;text-align:center;color:#21759b}.aws-search-result .aws_terms_suggestions{line-height:1.7}.aws-search-result .aws_term_suggestion{color:#222;vertical-align:middle}.aws-search-result a.aws_term_suggestion{color:#222;background:#ededed;border:0;border-radius:3px;font-size:13px;padding:2px 5px}.aws-search-result a.aws_term_suggestion:hover{background-color:#dad8da}body.aws-overlay{overflow:hidden!important;position:fixed;width:100%}.aws-container.aws-mobile-fixed{position:fixed!important;z-index:9999999!important;top:10px!important;left:20px!important;width:100%;width:calc(100% - 40px)!important}.aws-mobile-fixed-close{padding:15px;margin-right:-10px;display:inline-block;float:right;cursor:pointer}.aws-overlay-mask{display:block;position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;background:#fff;z-index:9999998!important}.aws-overlay .aws-overlay-mask{opacity:1}.et_search_outer .aws-container{width:60%}.et_search_outer .aws-container .aws-search-form{max-width:100%!important}.et_vertical_nav .et_search_outer .aws-container{width:auto;margin:0 20px 0 0}.et_fixed_nav .et-fixed-header .et_search_outer .aws-container{top:7px}.et_pb_menu__search .aws-container{width:100%}#et-boc .aws-container .aws-search-field{border:1px solid #d8d8d8;padding:6px 15px}#et-boc .aws-container .aws-search-form .aws-form-btn{background:#ededed;border:1px solid #d8d8d8;margin:0 0 0-1px}#et-boc .aws-container .aws-search-form .aws-wrapper .aws-loader{border-top:3px solid #ededed;border-right:3px solid #ededed;border-bottom:3px solid #ededed;border-left:3px solid #555;margin:-10px 0 0}#et-boc .aws-container .aws-search-form .aws-search-clear span{margin-top:-12px}#et-boc .aws-container .aws-search-form .aws-search-clear{padding:0 0 0 10px}.aws-search-result .aws_result_title .advanced-woo-labels{position:relative!important;width:auto!important;margin:0 5px 5px 0!important;transform:none!important}.aws-search-result .aws_result_title .advanced-woo-labels:last-child{margin-bottom:0!important}.aws-search-result .aws_result_title .aws_result_labels{display:flex;margin:0!important;flex-wrap:wrap;flex-direction:row;text-align:left;justify-content:flex-start}:root {
--hz-orange: #EC641E;
--hz-orange-hover: #d4580f;
--hz-dark: #1a1a2e;
--hz-text: #333;
--hz-text-light: #666;
--hz-bg-light: #f7f7f8;
--hz-border: #e5e5e5;
--hz-radius: 12px;
--hz-radius-sm: 8px;
--hz-shadow: 0 2px 12px rgba(0,0,0,0.08);
--hz-font: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--hz-content-width: 1280px;
} .hz-hero {
position: relative;
min-height: 420px;
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 0 0 48px;
margin-bottom: 40px;
}
.hz-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
z-index: 1;
}
.hz-hero__inner {
position: relative;
z-index: 2;
max-width: var(--hz-content-width);
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
.hz-hero__breadcrumbs {
margin-bottom: 16px;
font-size: 13px;
}
.hz-hero__crumb {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s;
}
.hz-hero__crumb:hover { color: #fff; }
.hz-hero__crumb-sep {
color: rgba(255,255,255,0.4);
margin: 0 6px;
}
.hz-hero__tag {
display: inline-block;
background: var(--hz-orange);
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.hz-hero__title {
color: #fff;
font-family: var(--hz-font);
font-size: 38px;
font-weight: 800;
line-height: 1.2;
margin: 0 0 20px;
max-width: 850px;
}
.hz-hero__meta {
display: flex;
align-items: center;
gap: 20px;
color: rgba(255,255,255,0.8);
font-size: 14px;
flex-wrap: wrap;
}
.hz-hero__author {
display: flex;
align-items: center;
gap: 8px;
}
.hz-hero__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
}
.hz-hero__date,
.hz-hero__reading {
display: flex;
align-items: center;
gap: 6px;
}
.hz-hero__date svg,
.hz-hero__reading svg {
opacity: 0.7;
} .hz-blog {
max-width: var(--hz-content-width);
margin: 0 auto;
padding: 0 24px 60px;
}
.hz-blog__layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
align-items: start;
} .hz-blog__content {
min-width: 0;
font-family: var(--hz-font);
font-size: 16px;
line-height: 1.75;
color: var(--hz-text);
}
.hz-blog__content h2 {
font-size: 28px;
font-weight: 800;
margin: 48px 0 16px;
padding-bottom: 8px;
border-bottom: 3px solid var(--hz-orange);
color: var(--hz-dark);
}
.hz-blog__content h3 {
font-size: 22px;
font-weight: 700;
margin: 36px 0 12px;
color: var(--hz-dark);
}
.hz-blog__content h4 {
font-size: 18px;
font-weight: 700;
margin: 28px 0 10px;
color: var(--hz-dark);
}
.hz-blog__content p {
margin: 0 0 16px;
}
.hz-blog__content img {
max-width: 100%;
height: auto;
border-radius: var(--hz-radius);
box-shadow: var(--hz-shadow);
margin: 16px 0;
}
.hz-blog__content a {
color: var(--hz-orange);
text-decoration: underline;
text-underline-offset: 2px;
}
.hz-blog__content a:hover {
color: var(--hz-orange-hover);
}
.hz-blog__content ul,
.hz-blog__content ol {
padding-left: 24px;
margin: 0 0 16px;
}
.hz-blog__content li {
margin-bottom: 6px;
} .hz-blog__content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--hz-radius);
overflow: hidden;
margin: 24px 0;
box-shadow: var(--hz-shadow);
font-size: 14px;
}
.hz-blog__content table thead th {
background: var(--hz-orange);
color: #fff;
font-weight: 700;
padding: 12px 16px;
text-align: left;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.hz-blog__content table tbody td {
padding: 10px 16px;
border-bottom: 1px solid var(--hz-border);
background: #fff;
}
.hz-blog__content table tbody tr:last-child td {
border-bottom: none;
}
.hz-blog__content table tbody tr:nth-child(even) td {
background: var(--hz-bg-light);
}
.hz-blog__content table tbody tr:hover td {
background: #fff5ee;
}
.hz-table-scroll {
width: 100%;
overflow-x: auto;
margin: 24px 0;
border-radius: var(--hz-radius);
box-shadow: var(--hz-shadow);
}
.hz-table-scroll table {
min-width: 680px;
margin: 0;
box-shadow: none;
}
.hz-sortable-table__th {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.hz-sortable-table__th::after {
content: "↕";
margin-left: 6px;
font-size: 11px;
color: var(--hz-text-light);
}
.hz-sortable-table__th[data-sort-direction="asc"]::after {
content: "↑";
color: var(--hz-primary);
}
.hz-sortable-table__th[data-sort-direction="desc"]::after {
content: "↓";
color: var(--hz-primary);
}
.hz-table-tools {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
margin: 18px 0 12px;
}
.hz-table-search {
width: min(100%, 360px);
border: 1px solid var(--hz-border);
border-radius: 8px;
padding: 11px 14px;
font-size: 14px;
outline: none;
}
.hz-table-search:focus {
border-color: var(--hz-primary);
box-shadow: 0 0 0 3px rgba(255, 103, 27, 0.12);
}
.hz-source-note {
font-size: 13px;
color: var(--hz-text-light);
margin-top: -12px;
}
.hz-inline-photo {
margin: 24px 0;
}
.hz-inline-photo img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.hz-inline-photo figcaption {
margin-top: 8px;
color: var(--hz-text-light);
font-size: 13px;
line-height: 1.5;
}
.hz-decision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 24px 0;
}
.hz-decision-card {
border: 1px solid var(--hz-border);
border-radius: var(--hz-radius-sm);
padding: 18px;
background: #fff;
}
.hz-decision-card__label {
font-size: 12px;
font-weight: 800;
color: var(--hz-orange);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
.hz-decision-card__title {
font-size: 17px;
font-weight: 800;
color: var(--hz-dark);
margin-bottom: 8px;
}
.hz-decision-card__text {
font-size: 14px;
line-height: 1.55;
color: var(--hz-text-light);
} .hz-callout {
display: flex;
gap: 14px;
padding: 18px 20px;
border-radius: var(--hz-radius-sm);
margin: 24px 0;
font-size: 15px;
line-height: 1.6;
border-left: 4px solid;
}
.hz-callout__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
font-weight: 700;
}
.hz-callout--tip {
background: #f0fdf4;
border-color: #22c55e;
color: #15803d;
}
.hz-callout--tip .hz-callout__icon { background: #dcfce7; }
.hz-callout--warning {
background: #fffbeb;
border-color: #f59e0b;
color: #92400e;
}
.hz-callout--warning .hz-callout__icon { background: #fef3c7; }
.hz-callout--info {
background: #eff6ff;
border-color: #3b82f6;
color: #1e40af;
}
.hz-callout--info .hz-callout__icon { background: #dbeafe; }
.hz-callout--important {
background: #fef2f2;
border-color: #ef4444;
color: #991b1b;
}
.hz-callout--important .hz-callout__icon { background: #fee2e2; } .hz-pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 24px 0;
}
.hz-pros-cons__col {
border-radius: var(--hz-radius-sm);
padding: 20px;
font-size: 14px;
}
.hz-pros-cons__col--pros {
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
.hz-pros-cons__col--cons {
background: #fef2f2;
border: 1px solid #fecaca;
}
.hz-pros-cons__heading {
font-weight: 700;
font-size: 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.hz-pros-cons__col--pros .hz-pros-cons__heading { color: #16a34a; }
.hz-pros-cons__col--cons .hz-pros-cons__heading { color: #dc2626; }
.hz-pros-cons__list {
list-style: none;
padding: 0;
margin: 0;
}
.hz-pros-cons__list li {
padding: 4px 0 4px 22px;
position: relative;
line-height: 1.5;
}
.hz-pros-cons__list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 14px;
height: 14px;
border-radius: 50%;
}
.hz-pros-cons__col--pros .hz-pros-cons__list li::before {
background: #22c55e;
box-shadow: inset 0 0 0 3px #f0fdf4;
}
.hz-pros-cons__col--cons .hz-pros-cons__list li::before {
background: #ef4444;
box-shadow: inset 0 0 0 3px #fef2f2;
} .hz-spec-table {
margin: 24px 0;
border-radius: var(--hz-radius);
overflow: hidden;
box-shadow: var(--hz-shadow);
}
.hz-spec-table__header {
background: var(--hz-dark);
color: #fff;
padding: 16px 20px;
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.hz-spec-table__header svg { color: var(--hz-orange); }
.hz-spec-table table {
margin: 0;
border-radius: 0;
box-shadow: none;
} .hz-product-card {
display: flex;
gap: 20px;
padding: 20px;
background: var(--hz-bg-light);
border-radius: var(--hz-radius);
border: 1px solid var(--hz-border);
margin: 24px 0;
align-items: center;
transition: box-shadow 0.2s;
}
.hz-product-card:hover {
box-shadow: var(--hz-shadow);
}
.hz-product-card__img {
width: 140px;
height: 140px;
flex-shrink: 0;
border-radius: var(--hz-radius-sm);
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.hz-product-card__img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0;
box-shadow: none;
border-radius: 0;
}
.hz-product-card__body {
flex: 1;
min-width: 0;
}
.hz-product-card__name {
font-weight: 700;
font-size: 16px;
color: var(--hz-dark);
margin-bottom: 6px;
}
.hz-product-card__price {
font-size: 22px;
font-weight: 800;
color: var(--hz-orange);
margin-bottom: 10px;
}
.hz-product-card__btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--hz-orange);
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 10px 24px;
border-radius: var(--hz-radius-sm);
text-decoration: none;
transition: background 0.2s;
}
.hz-product-card__btn:hover {
background: var(--hz-orange-hover);
color: #fff;
} .hz-builds {
margin: 24px 0;
}
.hz-builds__title {
font-size: 22px;
font-weight: 800;
color: var(--hz-dark);
margin-bottom: 16px;
}
.hz-builds__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.hz-builds__card {
background: #fff;
border: 1px solid var(--hz-border);
border-radius: var(--hz-radius);
padding: 20px;
text-align: center;
transition: box-shadow 0.2s, transform 0.2s;
}
.hz-builds__card:hover {
box-shadow: var(--hz-shadow);
transform: translateY(-2px);
}
.hz-builds__card-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--hz-orange);
margin-bottom: 8px;
}
.hz-builds__card-name {
font-size: 18px;
font-weight: 800;
color: var(--hz-dark);
margin-bottom: 12px;
}
.hz-builds__card-specs {
font-size: 13px;
color: var(--hz-text-light);
margin-bottom: 16px;
line-height: 1.5;
}
.hz-builds__card-price {
font-size: 24px;
font-weight: 800;
color: var(--hz-orange);
margin-bottom: 12px;
}
.hz-builds__card-btn {
display: inline-block;
background: var(--hz-orange);
color: #fff;
font-weight: 600;
padding: 10px 28px;
border-radius: var(--hz-radius-sm);
text-decoration: none;
font-size: 14px;
transition: background 0.2s;
}
.hz-builds__card-btn:hover {
background: var(--hz-orange-hover);
color: #fff;
} .hz-cta-banner {
background: linear-gradient(135deg, var(--hz-dark) 0%, #16213e 100%);
border-radius: var(--hz-radius);
padding: 32px 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 32px 0;
color: #fff;
}
.hz-cta-banner__text {
flex: 1;
}
.hz-cta-banner__title {
font-size: 22px;
font-weight: 800;
margin-bottom: 6px;
}
.hz-cta-banner__desc {
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.hz-cta-banner__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--hz-orange);
color: #fff;
font-weight: 700;
font-size: 15px;
padding: 14px 32px;
border-radius: var(--hz-radius-sm);
text-decoration: none;
transition: background 0.2s;
white-space: nowrap;
}
.hz-blog__content a.hz-cta-banner__btn,
.hz-blog__content a.hz-product-card__btn,
.hz-blog__content a.hz-builds__card-btn,
.hz-blog__content a.hz-sidebar-cta__btn {
color: #fff;
text-decoration: none;
}
.hz-cta-banner__btn:hover {
background: var(--hz-orange-hover);
color: #fff;
}
.hz-blog__content a.hz-cta-banner__btn:hover,
.hz-blog__content a.hz-product-card__btn:hover,
.hz-blog__content a.hz-builds__card-btn:hover,
.hz-blog__content a.hz-sidebar-cta__btn:hover {
color: #fff;
text-decoration: none;
} .hz-quote {
margin: 24px 0;
padding: 24px 28px;
background: var(--hz-bg-light);
border-left: 4px solid var(--hz-orange);
border-radius: 0 var(--hz-radius-sm) var(--hz-radius-sm) 0;
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: var(--hz-text);
}
.hz-quote__author {
font-style: normal;
font-weight: 700;
font-size: 14px;
color: var(--hz-orange);
margin-top: 12px;
} .hz-faq {
margin: 24px 0;
}
.hz-faq__item {
border: 1px solid var(--hz-border);
border-radius: var(--hz-radius-sm);
margin-bottom: 8px;
overflow: hidden;
}
.hz-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #fff;
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--hz-dark);
transition: background 0.2s;
user-select: none;
}
.hz-faq__question:hover { background: var(--hz-bg-light); }
.hz-faq__chevron {
transition: transform 0.3s;
flex-shrink: 0;
color: var(--hz-text-light);
}
.hz-faq__item.active .hz-faq__chevron {
transform: rotate(180deg);
}
.hz-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 20px;
font-size: 14px;
line-height: 1.6;
color: var(--hz-text-light);
background: var(--hz-bg-light);
}
.hz-faq__item.active .hz-faq__answer {
max-height: 600px;
padding: 16px 20px;
} .hz-rating {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: var(--hz-bg-light);
border-radius: var(--hz-radius-sm);
margin: 16px 0;
}
.hz-rating__stars {
display: flex;
gap: 2px;
}
.hz-rating__star {
color: #fbbf24;
}
.hz-rating__star--empty {
color: #d4d4d8;
}
.hz-rating__value {
font-size: 24px;
font-weight: 800;
color: var(--hz-dark);
}
.hz-rating__max {
font-size: 14px;
color: var(--hz-text-light);
font-weight: 400;
} .hz-gallery {
margin: 24px 0;
}
.hz-gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.hz-gallery__item {
border-radius: var(--hz-radius-sm);
overflow: hidden;
cursor: pointer;
aspect-ratio: 4/3;
}
.hz-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
box-shadow: none;
transition: transform 0.3s;
}
.hz-gallery__item:hover img {
transform: scale(1.05);
}
.hz-video {
margin: 24px 0;
border-radius: var(--hz-radius);
overflow: hidden;
box-shadow: var(--hz-shadow);
aspect-ratio: 16/9;
}
.hz-video iframe {
width: 100%;
height: 100%;
border: none;
} .hz-author-box {
display: flex;
gap: 16px;
padding: 24px;
background: var(--hz-bg-light);
border-radius: var(--hz-radius);
margin: 48px 0 24px;
align-items: center;
}
.hz-author-box__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
flex-shrink: 0;
}
.hz-author-box__label {
font-size: 12px;
color: var(--hz-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.hz-author-box__name {
font-weight: 700;
font-size: 16px;
color: var(--hz-dark);
}
.hz-author-box__bio {
font-size: 13px;
color: var(--hz-text-light);
margin-top: 4px;
line-height: 1.4;
} .hz-share {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0;
padding: 16px 0;
border-top: 1px solid var(--hz-border);
}
.hz-share__label {
font-weight: 600;
font-size: 14px;
color: var(--hz-text);
}
.hz-share__buttons {
display: flex;
gap: 8px;
}
.hz-share__btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--hz-border);
background: #fff;
color: var(--hz-text-light);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.hz-share__btn:hover {
border-color: var(--hz-orange);
color: var(--hz-orange);
background: #fff5ee;
}
.hz-share__btn--tg:hover { color: #0088cc; border-color: #0088cc; background: #e6f4fa; }
.hz-share__btn--vk:hover { color: #4a76a8; border-color: #4a76a8; background: #eaf1f8; } .hz-related {
margin: 48px 0 0;
padding-top: 32px;
border-top: 1px solid var(--hz-border);
}
.hz-related__title {
font-size: 24px;
font-weight: 800;
color: var(--hz-dark);
margin-bottom: 20px;
}
.hz-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.hz-related__card {
border-radius: var(--hz-radius);
overflow: hidden;
border: 1px solid var(--hz-border);
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
.hz-related__card:hover {
box-shadow: var(--hz-shadow);
transform: translateY(-3px);
}
.hz-related__img {
height: 160px;
background-size: cover;
background-position: center;
background-color: var(--hz-bg-light);
}
.hz-related__card-body {
padding: 14px 16px;
}
.hz-related__tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--hz-orange);
margin-bottom: 6px;
}
.hz-related__card-title {
font-size: 15px;
font-weight: 700;
color: var(--hz-dark);
line-height: 1.3;
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hz-related__date {
font-size: 12px;
color: var(--hz-text-light);
} .hz-sidebar {
position: relative;
}
.hz-sidebar__inner {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 20px;
}
.hz-sidebar__block {
background: #fff;
border: 1px solid var(--hz-border);
border-radius: var(--hz-radius);
padding: 20px;
} .hz-toc__title {
font-weight: 700;
font-size: 16px;
color: var(--hz-dark);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--hz-orange);
}
.hz-toc__nav {
display: flex;
flex-direction: column;
gap: 0;
}
.hz-toc__link {
display: block;
padding: 6px 0 6px 12px;
font-size: 13px;
color: var(--hz-text-light);
text-decoration: none;
border-left: 2px solid transparent;
transition: all 0.2s;
line-height: 1.3;
}
.hz-toc__link:hover {
color: var(--hz-orange);
}
.hz-toc__link.active {
color: var(--hz-orange);
border-left-color: var(--hz-orange);
font-weight: 600;
}
.hz-toc__link--h3 {
padding-left: 24px;
font-size: 12px;
} .hz-sidebar-cta {
background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
border-color: var(--hz-orange);
text-align: center;
}
.hz-sidebar-cta__icon {
margin-bottom: 8px;
}
.hz-sidebar-cta__text {
font-weight: 600;
font-size: 15px;
color: var(--hz-dark);
margin-bottom: 12px;
}
.hz-sidebar-cta__btn {
display: inline-block;
background: var(--hz-orange);
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 10px 24px;
border-radius: var(--hz-radius-sm);
text-decoration: none;
transition: background 0.2s;
}
.hz-sidebar-cta__btn:hover {
background: var(--hz-orange-hover);
color: #fff;
} .hz-sidebar-products__title {
font-weight: 700;
font-size: 16px;
color: var(--hz-dark);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--hz-orange);
}
.hz-sidebar-product {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--hz-border);
text-decoration: none;
color: inherit;
transition: background 0.15s;
align-items: center;
}
.hz-sidebar-product:last-child { border-bottom: none; }
.hz-sidebar-product:hover { background: var(--hz-bg-light); }
.hz-sidebar-product__img {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: var(--hz-bg-light);
}
.hz-sidebar-product__img img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
box-shadow: none;
margin: 0;
}
.hz-sidebar-product__name {
font-size: 13px;
font-weight: 600;
color: var(--hz-dark);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hz-sidebar-product__price {
font-size: 14px;
font-weight: 700;
color: var(--hz-orange);
margin-top: 4px;
} @media (max-width: 1024px) {
.hz-blog__layout {
grid-template-columns: 1fr;
}
.hz-sidebar__inner {
position: static;
}
.hz-toc { display: none; }
}
@media (max-width: 768px) {
.hz-hero {
min-height: 320px;
padding-bottom: 32px;
}
.hz-hero__title {
font-size: 26px;
}
.hz-hero__meta {
gap: 12px;
font-size: 12px;
}
.hz-blog__content h2 { font-size: 22px; }
.hz-blog__content h3 { font-size: 18px; }
.hz-pros-cons {
grid-template-columns: 1fr;
}
.hz-related__grid {
grid-template-columns: 1fr;
}
.hz-cta-banner {
flex-direction: column;
text-align: center;
padding: 24px 20px;
}
.hz-product-card {
flex-direction: column;
text-align: center;
}
.hz-product-card__img {
width: 100%;
height: 180px;
}
.hz-builds__grid {
grid-template-columns: 1fr;
}
.hz-author-box {
flex-direction: column;
text-align: center;
}
}