.ztv-inner-main { padding-bottom: 32px; }
.ztv-inner-hero { position: relative; padding: 74px 0 58px; border-bottom: 1px solid rgba(142,160,215,.14); background: radial-gradient(circle at 15% 30%, rgba(22,113,255,.18), transparent 38%), #050b20; overflow: hidden; }
.ztv-inner-hero-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 72px; align-items: center; }
.ztv-inner-copy { min-width: 0; }
.ztv-breadcrumb { margin-bottom: 24px; display: flex; gap: 9px; color: #7784a5; font-size: 11px; }
.ztv-breadcrumb a { color: #aeb9d6; }
.ztv-inner-copy h1 { max-width: 720px; margin: 0 0 18px; font-size: clamp(34px, 4vw, 57px); line-height: 1.45; }
.ztv-inner-copy > p:not(.ztv-kicker) { max-width: 680px; margin: 0; color: #aab4ce; font-size: 16px; line-height: 2.1; }
.ztv-inner-actions { margin-top: 30px; display: flex; gap: 13px; flex-wrap: wrap; }
.ztv-data-visual { position: relative; min-height: 350px; direction: ltr; display: grid; align-content: center; justify-items: center; gap: 30px; }
.ztv-data-visual::before { content: ""; position: absolute; inset: 10% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(36,95,224,.2), transparent 67%); filter: blur(12px); }
.ztv-data-source, .ztv-data-branches { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.ztv-data-source span { padding: 8px; border: 1px solid #2e3b62; border-radius: 4px; color: #aebadc; background: #0d1733; text-align: center; font-size: 11px; }
.ztv-data-cloud { position: relative; z-index: 2; width: 250px; height: 112px; border: 1px solid #604bc0; border-radius: 8px; display: grid; place-content: center; text-align: center; background: #101941; box-shadow: 0 0 48px rgba(59,78,215,.26); }
.ztv-data-cloud::before, .ztv-data-cloud::after { content: ""; position: absolute; left: 50%; width: 1px; height: 31px; background: #5267a8; }
.ztv-data-cloud::before { top: -31px; }.ztv-data-cloud::after { bottom: -31px; }
.ztv-data-cloud small { color: #8997bd; }.ztv-data-cloud strong { font-size: 18px; }
.ztv-data-cloud i { position: absolute; right: 20px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: #27dd84; box-shadow: 0 0 13px #27dd84; }
.ztv-data-branches { grid-template-columns: repeat(3, 1fr); }
.ztv-data-branches span { padding: 10px; border: 1px solid #2e3b62; border-radius: 4px; color: #e3e8f6; background: #0b132b; text-align: center; font-size: 11px; }
.ztv-data-branches small { display: block; color: #6f7d9e; font-size: 8px; }
.ztv-inner-stats { margin-top: -24px; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #28365a; border-radius: 8px; background: #0b132d; }
.ztv-inner-stats article { padding: 19px; border-inline-start: 1px solid #28365a; display: grid; justify-items: center; }.ztv-inner-stats article:last-child { border: 0; }
.ztv-inner-stats strong { color: #ffd04d; font-size: 24px; }.ztv-inner-stats span { color: #8895b4; font-size: 11px; }
.ztv-inner-section { padding-top: 72px; }
.ztv-inner-heading { margin-bottom: 28px; }.ztv-inner-heading span, .ztv-lead-form-wrap > div > span { color: #a870ff; font-size: 11px; font-weight: 700; }.ztv-inner-heading h2, .ztv-lead-form-wrap h2 { margin: 5px 0 0; font-size: 27px; }
.ztv-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ztv-capability-grid article { min-height: 92px; padding: 18px; border: 1px solid #273454; border-radius: 6px; display: flex; align-items: center; gap: 15px; background: #091128; }
.ztv-capability-grid b { width: 35px; height: 35px; border: 1px solid #5940a1; border-radius: 50%; display: grid; place-items: center; color: #ba8aff; font-size: 10px; }.ztv-capability-grid span { font-weight: 600; }
.ztv-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ztv-directory-grid a { min-height: 210px; padding: 24px; border: 1px solid #283557; border-radius: 7px; display: flex; flex-direction: column; background: #091128; transition: transform .2s ease, border-color .2s ease; }.ztv-directory-grid a:hover { transform: translateY(-4px); border-color: #6e4dca; }
.ztv-directory-grid i { color: #7659d5; font-style: normal; font-size: 12px; }.ztv-directory-grid h3 { margin: 18px 0 8px; font-size: 18px; }.ztv-directory-grid p { margin: 0 0 18px; color: #8d99b7; font-size: 12px; }.ztv-directory-grid span { margin-top: auto; color: #d8b4ff; font-size: 11px; }
.ztv-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }.ztv-process div { position: relative; padding: 24px 10px; display: grid; justify-items: center; gap: 12px; text-align: center; }.ztv-process div:not(:last-child)::after { content: ""; position: absolute; top: 42px; left: -18%; width: 36%; border-top: 1px dashed #51618e; }.ztv-process b { width: 38px; height: 38px; border: 1px solid #6850c0; border-radius: 50%; display: grid; place-items: center; background: #10183c; }.ztv-process span { color: #b8c1d8; font-size: 12px; }
.ztv-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.ztv-template-grid article { padding: 12px; border: 1px solid #283557; border-radius: 7px; background: #091128; }.ztv-template-preview { aspect-ratio: 16/9; padding: 18px; border-radius: 4px; display: grid; place-content: center; gap: 8px; color: #ffd34e; text-align: center; background: #090909; }.ztv-template-preview b { color: #26dc82; font-size: 8px; }.ztv-template-grid h3 { margin: 13px 0 7px; font-size: 14px; }.ztv-template-grid a { color: #bb82ff; font-size: 11px; }.is-template-1,.is-template-5 { background: #122344; }.is-template-2 { background: #22112b; }.is-template-3,.is-template-6 { background: #11291e; }.is-template-4 { background: #382610; }
.ztv-editor { min-height: 490px; border: 1px solid #2b385c; border-radius: 9px; display: grid; grid-template-columns: 290px 1fr; overflow: hidden; background: #080f24; }.ztv-editor aside { padding: 24px; border-inline-end: 1px solid #2b385c; }.ztv-editor aside h3 { margin-top: 0; }.ztv-editor label { margin: 18px 0; display: grid; gap: 7px; color: #9da8c3; font-size: 11px; }.ztv-editor input,.ztv-editor select,.ztv-lead-form input,.ztv-lead-form select { width: 100%; min-height: 43px; padding: 8px 11px; border: 1px solid #344364; border-radius: 4px; color: #fff; background: #101a33; }.ztv-editor input[type=color] { padding: 4px; }.ztv-editor-modes { display: grid; grid-template-columns: 1fr 1fr; }.ztv-editor-modes button { padding: 9px; border: 1px solid #354464; color: #97a2bd; background: transparent; }.ztv-editor-modes button.is-active { color: #fff; background: #453297; }.ztv-editor-preview { padding: 48px; display: grid; place-items: center; background: #040818; }.ztv-editor-preview > div { width: min(100%,650px); aspect-ratio: 16/9; border: 9px solid #242c3c; border-radius: 7px; display: grid; place-content: center; gap: 7px; color: #d6dbe9; text-align: center; background: #090906; box-shadow: 0 24px 50px rgba(0,0,0,.45); }.ztv-editor-preview strong { font-size: 19px; }.ztv-editor-preview b { color: #ffd54d; font-size: 34px; }.ztv-editor-preview span { color: #25dc81; font-size: 9px; }
.ztv-editor-preview.is-portrait > div { width: min(100%, 310px); aspect-ratio: 9 / 16; }
.ztv-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.ztv-plan-grid article { padding: 25px; border: 1px solid #2b385b; border-radius: 7px; background: #091128; }.ztv-plan-grid article.is-featured { border-color: #7f4dd3; box-shadow: inset 0 3px #8b50e1; }.ztv-plan-grid article > span { color: #9b83da; font-size: 10px; }.ztv-plan-grid h2 { margin: 5px 0 18px; }.ztv-plan-grid ul { min-height: 160px; padding: 0; list-style: none; }.ztv-plan-grid li { margin: 9px 0; color: #a8b2ca; font-size: 12px; }.ztv-plan-grid li::before { content: "✓"; margin-inline-end: 7px; color: #25dc81; }.ztv-plan-grid .ztv-btn { width: 100%; }
.ztv-lead-form-wrap { padding: 35px; border: 1px solid #344269; border-radius: 9px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: center; background: #0b1430; }.ztv-lead-form-wrap p { color: #8f9ab5; }.ztv-lead-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }.ztv-lead-form label { display: grid; gap: 6px; color: #a7b1c8; font-size: 10px; }.ztv-lead-form .ztv-btn { white-space: nowrap; }
.ztv-inner-cta { margin-top: 75px; padding: 34px 38px; border: 1px solid #5944a0; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #11173b; }.ztv-inner-cta span { color: #a47bea; font-size: 11px; }.ztv-inner-cta h2 { margin: 4px 0 0; font-size: 22px; }
@media (max-width: 980px) { .ztv-inner-hero-grid { grid-template-columns: 1fr; }.ztv-data-visual { min-height: 310px; }.ztv-capability-grid,.ztv-directory-grid,.ztv-template-grid { grid-template-columns: repeat(2,1fr); }.ztv-plan-grid { grid-template-columns: repeat(2,1fr); }.ztv-lead-form-wrap { grid-template-columns: 1fr; }.ztv-lead-form { grid-template-columns: 1fr 1fr; }.ztv-lead-form .ztv-btn { grid-column: 1/-1; }.ztv-editor { grid-template-columns: 230px 1fr; } }
@media (max-width: 620px) { .ztv-inner-hero { padding-top: 42px; }.ztv-inner-copy h1 { font-size: 32px; }.ztv-inner-copy > p:not(.ztv-kicker) { font-size: 13px; }.ztv-inner-actions { display: grid; }.ztv-data-source { grid-template-columns: repeat(2,1fr); }.ztv-data-branches { gap: 5px; }.ztv-data-branches span { padding-inline: 4px; }.ztv-inner-stats { grid-template-columns: 1fr; margin-top: 18px; }.ztv-inner-stats article { border: 0; border-bottom: 1px solid #28365a; }.ztv-capability-grid,.ztv-directory-grid,.ztv-template-grid,.ztv-plan-grid { grid-template-columns: 1fr; }.ztv-process { grid-template-columns: repeat(2,1fr); }.ztv-process div::after { display:none; }.ztv-editor { grid-template-columns: 1fr; }.ztv-editor aside { border: 0; border-bottom: 1px solid #2b385c; }.ztv-editor-preview { padding: 24px 12px; }.ztv-plan-grid ul { min-height: 0; }.ztv-lead-form { grid-template-columns: 1fr; }.ztv-lead-form .ztv-btn { grid-column: auto; }.ztv-inner-cta { flex-direction: column; align-items: flex-start; }.ztv-inner-cta .ztv-btn { width: 100%; } }