.ztv-products-page { padding-bottom: 50px; background: radial-gradient(circle at 17% 7%, rgba(28, 64, 219, .25), transparent 26%), #03091d; }
.ztv-products-hero { padding: 22px 0 46px; border-bottom: 1px solid rgba(126,145,202,.16); }
.ztv-products-breadcrumb { margin-bottom: 12px; display: flex; gap: 9px; color: #7582a3; font-size: 11px; }.ztv-products-breadcrumb a { color: #bac3d7; }
.ztv-products-hero-grid { min-height: 455px; display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; align-items: center; }
.ztv-products-copy { min-width: 0; }.ztv-products-eyebrow { width: fit-content; margin: 0 0 14px; padding: 6px 12px; border: 1px solid #26365e; border-radius: 4px; color: #b9c4df; background: #0b1531; font-size: 11px; }
.ztv-products-copy h1 { margin: 0; font-size: clamp(40px,4.3vw,62px); line-height: 1.45; }.ztv-products-copy h1 bdi { white-space: nowrap; }
.ztv-products-copy > p:not(.ztv-products-eyebrow) { max-width: 650px; margin: 14px 0 25px; color: #a9b2c8; font-size: 16px; line-height: 2.05; }
.ztv-products-benefits { display: grid; grid-template-columns: repeat(5,max-content); gap: 9px; }.ztv-products-benefits span { padding: 9px 12px; border: 1px solid #29375b; border-radius: 5px; color: #b6c1d9; background: rgba(8,16,37,.8); font-size: 10px; }.ztv-products-benefits span::before { content: "\2713"; margin-inline-end: 6px; color: #ad63ff; }
.ztv-products-stage { position: relative; min-width: 0; min-height: 410px; direction: ltr; display: grid; place-items: center; }.ztv-products-stage::before { content: ""; position: absolute; inset: 5%; background: radial-gradient(circle,rgba(38,61,240,.35),transparent 67%); filter: blur(18px); }
.ztv-products-monitor { position: relative; z-index: 2; width: min(100%,570px); margin-right: 65px; }.ztv-products-screen { aspect-ratio:16/9; padding: 10px; border: 8px solid #151c29; outline: 1px solid #4c586f; border-radius: 6px; display:grid; grid-template-columns:.82fr 1.18fr; grid-template-rows:1fr 1fr; gap:7px; background:#050811; box-shadow:0 28px 60px rgba(0,0,0,.6); }
.ztv-products-screen article { min-width:0; padding:11px; border:1px solid #29324a; border-radius:4px; background:#080c15; text-align:center; }.ztv-products-screen small { display:block; color:#abb5ca; font-size:8px; }.ztv-products-screen strong { display:block; font-size:clamp(14px,1.9vw,23px); }.ztv-products-screen article > b { color:#29da80; font-size:8px; }.ztv-products-screen article > span { color:#8995ad; font-size:8px; }
.ztv-products-chart { grid-column:2; grid-row:1; text-align:left !important; }.ztv-products-chart div { height:70%; margin-top:9px; display:flex; align-items:end; gap:6px; border-bottom:1px solid #5a4714; }.ztv-products-chart i { flex:1; height:var(--h,50%); border-top:2px solid #efbc05; background:linear-gradient(to top,rgba(239,188,5,.03),rgba(239,188,5,.24)); }.ztv-products-chart i:nth-child(1){--h:32%}.ztv-products-chart i:nth-child(2){--h:53%}.ztv-products-chart i:nth-child(3){--h:42%}.ztv-products-chart i:nth-child(4){--h:76%}.ztv-products-chart i:nth-child(5){--h:61%}.ztv-products-chart i:nth-child(6){--h:86%}
.ztv-products-coin { border-color:#5a4512 !important; background:#100d06 !important; }.ztv-products-coin strong { color:#ffd23b; }.ztv-products-rates { direction:ltr; text-align:left !important; }.ztv-products-rates span { padding:3px; border-bottom:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; color:#dce1eb !important; }.ztv-products-rates b { color:#fff; }
.ztv-products-monitor-neck { width:58px; height:34px; margin:auto; background:#151c29; clip-path:polygon(24% 0,76% 0,100% 100%,0 100%); }.ztv-products-monitor-base { width:205px; height:8px; margin:auto; border-radius:50%; background:#222a38; box-shadow:0 6px 18px #000; }
.ztv-products-zbox { position:absolute; z-index:3; left:0; bottom:16px; width:190px; height:64px; padding:22px; border:1px solid #29334a; border-radius:7px; color:#59647a; background:#111827; box-shadow:0 20px 35px rgba(0,0,0,.65); font-size:11px; }.ztv-products-zbox i { position:absolute; right:22px; top:27px; width:7px; height:7px; border-radius:50%; background:#1999ff; box-shadow:0 0 15px #1999ff; }
.ztv-products-z8 { position:absolute; z-index:3; right:0; bottom:25px; width:130px; }.ztv-products-z8 > div { aspect-ratio:3/4; padding:12px 7px; border:7px solid #1a202d; border-radius:11px; display:grid; place-content:center; gap:4px; text-align:center; background:#080907; box-shadow:0 18px 35px rgba(0,0,0,.6); }.ztv-products-z8 small,.ztv-products-z8 span { color:#b7b29f; font-size:7px; }.ztv-products-z8 strong { font-size:14px; }.ztv-products-z8 b { color:#2cdb80; font-size:7px; }.ztv-products-z8 em { display:block; color:#778196; text-align:center; font-style:normal; font-size:10px; }
.ztv-products-section { padding-top:62px; }.ztv-products-heading { margin-bottom:25px; text-align:center; }.ztv-products-heading span { color:#a272f1; font-size:10px; font-weight:700; }.ztv-products-heading h2 { margin:3px 0; font-size:27px; }.ztv-products-heading p { margin:0; color:#8692af; font-size:11px; }.ztv-products-heading.is-inline { display:flex; align-items:end; justify-content:space-between; gap:30px; text-align:right; }.ztv-products-heading.is-inline p { max-width:550px; text-align:right; }
.ztv-product-family { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.ztv-product-family > article { --product:#a85cf4; min-width:0; padding:16px; border:1px solid color-mix(in srgb,var(--product) 55%,#26324d); border-radius:8px; display:flex; flex-direction:column; background:linear-gradient(160deg,color-mix(in srgb,var(--product) 8%,#091127),#071024 55%); }.ztv-product-family .is-zbox {--product:#3494ff}.ztv-product-family .is-z8 {--product:#9f5bfa}.ztv-product-family .is-complete {--product:#ec9d13}
.ztv-product-visual { height:145px; display:grid; place-items:center; position:relative; }.ztv-product-family h3 { margin:8px 0 0; text-align:center; font-size:19px; }.ztv-product-family > article > p { margin:0 0 10px; color:#a2acc2; text-align:center; font-size:10px; }.ztv-product-family ul,.ztv-product-choice ul { margin:5px 0 15px; padding:0; list-style:none; }.ztv-product-family li,.ztv-product-choice li { margin:6px 0; color:#a3aec7; font-size:9px; }.ztv-product-family li::before,.ztv-product-choice li::before { content:"\2713"; margin-inline-end:6px; color:var(--product); }.ztv-product-family > article > a { margin-top:auto; min-height:39px; border:1px solid var(--product); border-radius:4px; display:grid; place-items:center; color:#fff; background:color-mix(in srgb,var(--product) 62%,#17215a); font-size:10px; }
.ztv-product-laptop { width:155px; aspect-ratio:16/10; padding:20px 12px; border:6px solid #1b2230; display:grid; align-content:center; gap:5px; color:#a9b5d2; background:#071020; box-shadow:0 16px 25px rgba(0,0,0,.5); font-size:7px; }.ztv-product-laptop b { color:#4ba9ff; }.ztv-product-visual > i { position:absolute; z-index:2; top:5px; right:22px; color:#7d59ff; font-style:normal; font-size:52px; text-shadow:0 0 18px #216cff; }
.ztv-product-box { width:190px; height:65px; padding:22px; border:1px solid #303b50; border-radius:7px; color:#68738a; background:#111827; box-shadow:0 18px 28px rgba(0,0,0,.6); }.ztv-product-box i { float:right; width:6px; height:6px; margin-top:6px; border-radius:50%; background:#1999ff; box-shadow:0 0 12px #1999ff; }.ztv-product-mini { width:105px; aspect-ratio:3/4; padding:15px 7px; border:7px solid #1b2230; border-radius:10px; display:grid; place-content:center; text-align:center; background:#070905; box-shadow:0 18px 28px rgba(0,0,0,.55); }.ztv-product-mini span,.ztv-product-mini small { color:#a6adbe; font-size:8px; }.ztv-product-mini strong { font-size:14px; }
.ztv-product-complete { display:flex; align-items:end; gap:7px; direction:ltr; }.ztv-product-complete div { width:140px; aspect-ratio:16/9; border:6px solid #1a2130; display:grid; place-items:center; color:#ffc331; background:#080b10; }.ztv-product-complete span { width:62px; height:24px; padding:7px; color:#68738b; background:#111827; font-size:6px; }.ztv-product-complete i { width:36px; aspect-ratio:3/4; border:4px solid #1b2230; display:grid; place-items:center; color:#ddd; background:#070905; font-style:normal; font-size:6px; }
.ztv-product-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.ztv-product-choice article { --product:#aa56f0; min-height:190px; padding:20px; border:1px solid color-mix(in srgb,var(--product) 55%,#26324d); border-radius:8px; display:grid; grid-template-columns:65px 1fr; gap:14px; background:#091127; }.ztv-product-choice .is-zbox {--product:#348df4}.ztv-product-choice .is-complete {--product:#e9a61c}.ztv-product-choice > article > i { color:var(--product); font-style:normal; font-size:42px; }.ztv-product-choice h3 { margin:0; font-size:17px; }.ztv-product-choice p { margin:0; color:#929eb9; font-size:10px; }.ztv-product-choice a { grid-column:1/-1; min-height:35px; border:1px solid var(--product); border-radius:4px; display:grid; place-items:center; color:var(--product); font-size:9px; }
.ztv-products-table-wrap { border:1px solid #283451; border-radius:7px; overflow-x:auto; background:#081024; }.ztv-products-table { width:100%; min-width:720px; border-collapse:collapse; text-align:center; }.ztv-products-table th,.ztv-products-table td { height:45px; padding:7px 11px; border-inline-start:1px solid #202c47; border-bottom:1px solid #202c47; }.ztv-products-table thead th { height:61px; color:#b770ff; background:#0c1630; font-size:16px; }.ztv-products-table thead th:last-child { color:#f3b31d; }.ztv-products-table thead span { margin-inline-start:5px; color:#fff; font-size:10px; }.ztv-products-table tbody th { color:#9fa9c0; text-align:right; font-size:10px; font-weight:500; }.ztv-products-table tbody td { color:#39db79; font-size:11px; font-weight:800; }.ztv-products-table tbody tr:last-child > * { border-bottom:0; }
.ztv-products-architecture { padding:22px; border:1px solid #26334f; border-radius:8px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:18px; align-items:center; background:#081023; }.ztv-products-architecture article { min-height:125px; padding:14px; border:1px solid #2b3958; border-radius:6px; display:grid; place-items:center; align-content:center; text-align:center; background:#0c1530; }.ztv-products-architecture article:nth-of-type(2) { border-color:#7049bf; }.ztv-products-architecture i { color:#9f66f4; font-style:normal; font-size:28px; }.ztv-products-architecture strong { font-size:12px; }.ztv-products-architecture span { color:#8692ac; font-size:8px; }.ztv-products-architecture > b { color:#8995b3; font-size:22px; }
.ztv-products-features { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }.ztv-products-features article { min-height:145px; padding:17px 12px; border:1px solid #273451; border-radius:7px; display:grid; justify-items:center; align-content:center; text-align:center; background:#091127; }.ztv-products-features i { color:#a867ff; font-style:normal; font-size:34px; }.ztv-products-features article:nth-child(1) i,.ztv-products-features article:nth-child(4) i { color:#f2ae18; }.ztv-products-features article:nth-child(3) i { color:#32d278; }.ztv-products-features h3 { margin:7px 0 3px; font-size:13px; }.ztv-products-features p { margin:0; color:#8e99b3; font-size:8px; }
.ztv-products-final { margin-top:62px; min-height:190px; padding:28px 32px; border:1px solid #5a48c0; border-radius:9px; display:grid; grid-template-columns:.75fr 1.3fr auto; gap:28px; align-items:center; background:linear-gradient(110deg,#120f3b,#27259e 55%,#095bea); }.ztv-products-final > div > span { color:#c39df5; font-size:9px; }.ztv-products-final h2 { margin:3px 0; font-size:23px; }.ztv-products-final p { margin:0; color:#c2cdea; font-size:10px; }.ztv-products-final-notes { margin-top:16px; display:flex; gap:20px; }.ztv-products-final-notes small::before { content:"\2713"; margin-inline-end:5px; color:#fff; }
.ztv-products-final-visual { position:relative; min-height:130px; direction:ltr; }.ztv-products-final-visual > div { width:185px; aspect-ratio:16/9; padding:22px; border:7px solid #151c29; display:grid; align-content:center; color:#ffd13a; background:#070906; font-size:8px; box-shadow:0 15px 30px rgba(0,0,0,.45); }.ztv-products-final-visual > div strong { font-size:16px; }.ztv-products-final-visual > i { position:absolute; left:175px; top:25px; width:45px; aspect-ratio:3/4; border:4px solid #171f2d; display:grid; place-items:center; color:#fff; background:#070905; font-style:normal; font-size:7px; }.ztv-products-final-visual > b { position:absolute; left:100px; bottom:2px; width:100px; height:32px; padding:10px; color:#626d83; background:#101827; font-size:7px; }.ztv-products-final-actions { display:grid; gap:9px; }.ztv-products-final-actions .ztv-btn { min-height:41px; padding-inline:17px; white-space:nowrap; font-size:9px; }
@media(max-width:1100px){.ztv-products-hero-grid{grid-template-columns:1fr}.ztv-products-benefits{grid-template-columns:repeat(3,max-content)}.ztv-product-family{grid-template-columns:repeat(2,1fr)}.ztv-products-features{grid-template-columns:repeat(3,1fr)}.ztv-products-final{grid-template-columns:.7fr 1.3fr}.ztv-products-final-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.ztv-products-stage{min-height:380px}}
@media(max-width:760px){.ztv-products-hero-grid{min-height:0;gap:28px}.ztv-products-copy h1{font-size:36px}.ztv-products-copy>p:not(.ztv-products-eyebrow){font-size:13px}.ztv-products-benefits{grid-template-columns:1fr 1fr}.ztv-products-stage{min-height:265px}.ztv-products-monitor{margin-right:34px}.ztv-products-screen{padding:6px;border-width:5px}.ztv-products-screen article{padding:5px}.ztv-products-zbox{left:0;bottom:2px;width:115px;height:42px;padding:13px;font-size:7px}.ztv-products-zbox i{right:13px;top:17px}.ztv-products-z8{right:0;bottom:8px;width:72px}.ztv-products-z8>div{border-width:4px;padding:5px}.ztv-products-heading h2{font-size:23px}.ztv-products-heading.is-inline{align-items:flex-start;flex-direction:column;gap:5px}.ztv-product-family,.ztv-product-choice{grid-template-columns:1fr}.ztv-products-architecture{grid-template-columns:1fr}.ztv-products-architecture>b{transform:rotate(-90deg)}.ztv-products-features{grid-template-columns:1fr 1fr}.ztv-products-final{grid-template-columns:1fr;text-align:center}.ztv-products-final-visual{width:230px;margin:auto}.ztv-products-final-notes{justify-content:center;flex-wrap:wrap}.ztv-products-final-actions{grid-column:auto;grid-template-columns:1fr}.ztv-products-final-actions .ztv-btn{white-space:normal}}
@media(max-width:420px){.ztv-products-benefits{grid-template-columns:1fr}.ztv-products-stage{min-height:230px}.ztv-products-monitor-neck{height:23px}.ztv-products-monitor-base{width:135px}.ztv-products-screen small,.ztv-products-screen article>b{font-size:6px}.ztv-products-screen strong{font-size:11px}.ztv-product-family{grid-template-columns:1fr}.ztv-products-features{grid-template-columns:1fr}.ztv-product-choice article{grid-template-columns:50px 1fr}}