/**
 * Video Intelligence campaign page.
 *
 * Loaded only for page-templates/template-video-intelligence.php, on top of the
 * shared theme styles, so the page keeps the site header, footer and nav.
 */

:root {
    --ztvi-navy: #060e1c;
    --ztvi-navy-mid: #0a1628;
    --ztvi-navy-bar: #0d1b2e;
    --ztvi-blue: #2b5aa8;
    --ztvi-blue-dark: #0d4f8a;
    --ztvi-cyan: #00e5ff;
    --ztvi-teal: #00b4d8;
    --ztvi-ink: #0d1b2e;
    --ztvi-muted: #56687f;
    --ztvi-pale: #b1c7ea;
    --ztvi-line: #e5e7eb;
    --ztvi-surface: #f6f8fb;
}

body.ztvi-page {
    margin: 0;
    color: var(--ztvi-ink);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.ztvi-main *,
.ztvi-modal *,
.ztvi-main *::before,
.ztvi-main *::after {
    box-sizing: border-box;
}

.ztvi-main h1,
.ztvi-main h2,
.ztvi-main h3,
.ztvi-main p,
.ztvi-modal h2,
.ztvi-modal p {
    margin: 0;
}

.ztvi-main button {
    appearance: none;
}

.ztvi-main img,
.ztvi-modal img {
    max-width: 100%;
}

/* Reveal-on-scroll ------------------------------------------------------- */

.ztvi-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ztvi-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ztvi-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Shared furniture -------------------------------------------------------- */

body.ztvi-page .ztvi-main .padding-section {
    padding-block: clamp(64px, 7vw, 112px);
}

.ztvi-label {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--ztvi-blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ztvi-label--cyan {
    color: var(--color-lime);
}

.ztvi-title {
    color: var(--ztvi-ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ztvi-title span {
    color: var(--ztvi-blue);
    font-weight: 700;
}

.ztvi-title--light {
    color: var(--color-white);
}

.ztvi-title--light span {
    background: linear-gradient(90deg, var(--ztvi-cyan), #7ee8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ztvi-body {
    margin-top: 18px;
    color: var(--ztvi-muted);
    font-size: 17px;
    line-height: 1.7;
}

.ztvi-body--light {
    color: white;
}

.ztvi-head--center {
    margin-bottom: clamp(40px, 5vw, 64px);
}

.ztvi-icon {
    width: 16px;
    height: 16px;
}

/* Hero -------------------------------------------------------------------- */

/*
 * The banner is a wide, short image (roughly 3.3:1). Letting it set its own
 * height leaves a thin strip on desktop and a sliver on mobile, so the section
 * owns the height and the image covers it.
 */
.ztvi-hero {
    position: relative;
    min-height: 800px;
    height: 100vh;
}

.ztvi-hero__media {
    position: absolute;
    top: 0;
    height: 100vh;
    min-height: 800px;
    width: 100%;
}

.ztvi-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Keeps the headline legible over the brighter parts of the banner. */
.ztvi-hero__scrim {
   position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(21, 17, 40, 0) 0%, #151128 84.04%);
    pointer-events: none;
    z-index: 1;
}

.ztvi-hero__content {
    position: absolute;
    z-index: 1;
    bottom: 108px;
}

.ztvi-hero__bar {
    background: var(--ztvi-navy-bar);
    color: var(--color-white);
}

.ztvi-hero__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-block: 26px;
}

.ztvi-hero__text {
    max-width: 720px;
    color: var(--ztvi-pale);
    font-size: 17px;
    line-height: 1.6;
}

/* Headline statistics ----------------------------------------------------- */

.ztvi-stats {
    background: #151127;
    color: var(--color-white);
}

.ztvi-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: clamp(40px, 5vw, 64px);
}

.ztvi-stat {
    position: relative;
    padding-inline: clamp(12px, 2.5vw, 32px);
    text-align: center;
}

.ztvi-stat + .ztvi-stat::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.ztvi-stat__value {
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1;
}

.ztvi-stat__label {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
}

/* The challenge ----------------------------------------------------------- */

.ztvi-challenge {
    background: var(--color-white);
}

.ztvi-challenge__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.ztvi-challenge-card {
    padding: 34px 28px;
    border: 1px solid var(--ztvi-line);
    border-radius: 16px;
    background: var(--ztvi-surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ztvi-challenge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(13, 27, 46, 0.1);
}

.ztvi-challenge-card__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--bg-section);
    color: var(--color-white);
    font-size: 17px;
    font-weight: 700;
}

.ztvi-challenge-card h3 {
    color: var(--ztvi-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ztvi-challenge-card p {
    margin-top: 10px;
    color: var(--ztvi-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Real-time intelligence -------------------------------------------------- */

.ztvi-analytics {
    background: var(--bg-section);
    color: var(--color-white);
}

.ztvi-analytics__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.ztvi-bars {
    margin-top: 34px;
    display: grid;
    gap: 22px;
}

.ztvi-bar__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: white;
    font-size: 15px;
}

.ztvi-bar__label strong {
    color: white;
    font-size: 16px;
}

.ztvi-bar__track {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ztvi-bar__track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: -webkit-linear-gradient(275deg, #6FC7EA, #344C98);
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--ztvi-bar-i, 0) * 120ms);
}

.ztvi-bar.is-visible .ztvi-bar__track i {
    width: var(--ztvi-bar, 0%);
}

@media (prefers-reduced-motion: reduce) {
    .ztvi-bar__track i {
        width: var(--ztvi-bar, 0%);
        transition: none;
    }
}

/* Chart panel */

.ztvi-chart {
    margin: 0;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.ztvi-chart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ztvi-chart__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
}

.ztvi-chart__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ztvi-cyan);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.55);
    animation: ztvi-pulse 2.2s infinite;
}

@keyframes ztvi-pulse {
    70% { box-shadow: 0 0 0 9px rgba(0, 229, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ztvi-chart__dot { animation: none; }
}

.ztvi-chart__legend {
    display: inline-flex;
    gap: 18px;
    color: var(--ztvi-pale);
    font-size: 13px;
}

.ztvi-chart__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ztvi-chart__key {
    width: 16px;
    height: 3px;
    border-radius: 99px;
}

.ztvi-chart__key--before { background: var(--ztvi-blue); }
.ztvi-chart__key--after { background: var(--ztvi-cyan); }

.ztvi-chart__plot svg {
    display: block;
    width: 100%;
    height: 150px;
}

.ztvi-chart__plot line {
    stroke: #1e3a5f;
    stroke-width: 1;
}

.ztvi-chart__bars rect {
    fill: #1e3a5f;
}

.ztvi-chart__area {
    fill: url(#ztvi-chart-fill);
}

.ztvi-chart__line {
    fill: none;
    stroke: #344C98;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ztvi-chart__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.ztvi-chart__stats strong {
    display: block;
    color: white;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 800;
}

.ztvi-chart__stats span {
    display: block;
    margin-top: 6px;
    color: var(--color-white);
    font-size: 13px;
}

/* Architecture ------------------------------------------------------------ */

.ztvi-steps {
    background: var(--color-white);
}

.ztvi-steps__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
        margin-bottom: clamp(40px, 5vw, 64px);
}

.ztvi-step {
    position: relative;
    text-align: center;
}

/* Rail linking the stages. */
.ztvi-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 34px;
    inset-inline: calc(50% + 40px) calc(-50% + 40px);
    height: 1px;
    background: var(--ztvi-line);
}

.ztvi-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-inline: auto;
    border: 1px solid var(--ztvi-line);
    border-radius: 18px;
    background: var(--color-white);
    color: var(--ztvi-blue);
}

.ztvi-step__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ztvi-step__num {
    display: block;
    margin-top: 18px;
    color: var(--ztvi-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

@media (max-width: 768px) {
    .ztvi-step__num {
        display: none;
    }
}

.ztvi-step h3 {
    margin-top: 6px;
    color: var(--ztvi-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ztvi-step p {
    margin-top: 10px;
    color: var(--ztvi-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ztvi-steps__footnote {
    max-width: 700px;
    margin: clamp(36px, 4vw, 52px) auto 0;
    color: var(--ztvi-blue);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

/* Three capabilities ------------------------------------------------------ */

.ztvi-platform {
    background: var(--bg-section);
    color: var(--color-white);
}

.ztvi-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

.ztvi-tab {
    padding: 12px 30px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    background: transparent;
    color: var(--ztvi-pale);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ztvi-tab:hover {
    border-color: rgba(0, 229, 255, 0.5);
    color: var(--color-white);
}

.ztvi-tab.is-active {
    border-color: transparent;
    background: #344C98;
    color: var(--color-white);
}

.ztvi-panel {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.ztvi-panel.is-active {
    display: grid;
}

.ztvi-panel__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.ztvi-panel__tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 99px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--ztvi-cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ztvi-panel__body h3 {
    color: var(--color-white);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.ztvi-panel__body > p {
    margin-top: 15px;
    margin-bottom: 10px;
    color: white;
    font-size: 16px;
    line-height: 1.7;
}

.ztvi-panel__list {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.ztvi-panel__list li {
    position: relative;
    padding-inline-start: 26px;
    color: var(--color-white);
    font-size: 15px;
    line-height: 1.6;
}

.ztvi-panel__list li::before {
    content: '';
    position: absolute;
    top: 8px;
    inset-inline-start: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: white;
}

/* Industries -------------------------------------------------------------- */

.ztvi-industries {
    background: var(--color-white);
}

.ztvi-industries__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.ztvi-industry {
    padding: 34px 28px;
    border: 1px solid var(--ztvi-line);
    border-radius: 16px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ztvi-industry:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 20px 44px rgba(13, 27, 46, 0.1);
}

.ztvi-industry__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: var(--ztvi-surface);
    color: var(--ztvi-blue);
}

.ztvi-industry__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ztvi-industry h3 {
    color: var(--ztvi-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ztvi-industry p {
    margin-top: 10px;
    color: var(--ztvi-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Why ZainTECH ------------------------------------------------------------ */

.ztvi-why {
    background: var(--ztvi-surface);
}

.ztvi-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 72px);
}

.ztvi-why__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 26px;
}

.ztvi-why__points li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ztvi-why__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-section);
    color: var(--color-white);
    font-size: 17px;
    font-weight: 700;
}

.ztvi-why__points h3 {
    color: var(--ztvi-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ztvi-why__points p {
    margin-top: 8px;
    color: var(--ztvi-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Webinar on demand ------------------------------------------------------- */

.ztvi-webinar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--ztvi-navy-mid), var(--ztvi-navy));
    color: var(--color-white);
}

.ztvi-webinar__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.ztvi-webinar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}


.ztvi-webinar__card {
    display: block;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-align: start;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.ztvi-webinar__card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.45);
}

.ztvi-webinar__thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(rgba(6, 14, 28, 0.55), rgba(6, 14, 28, 0.55)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px),
        var(--ztvi-navy-bar);
}

.ztvi-webinar__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--ztvi-blue);
    color: var(--color-white);
}

.ztvi-webinar__play svg {
    width: 26px;
    height: 26px;
    margin-inline-start: 4px;
}

.ztvi-webinar__note {
    color: var(--ztvi-pale);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ztvi-webinar__meta {
    display: block;
    padding: 18px 22px;
    background: rgba(6, 14, 28, 0.7);
}

.ztvi-webinar__meta strong {
    display: block;
    color: var(--color-white);
    font-size: 16px;
}

.ztvi-webinar__meta span {
    display: block;
    margin-top: 4px;
    color: var(--ztvi-pale);
    font-size: 13px;
}

/* Closing CTA ------------------------------------------------------------- */

.ztvi-cta {
    position: relative;
    overflow: hidden;
    background: var(--ztvi-navy);
    color: var(--color-white);
}

.ztvi-cta::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    width: min(900px, 90%);
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.14), transparent 70%);
    pointer-events: none;
}

.ztvi-cta .container {
    position: relative;
    z-index: 1;
}

/* Contact Form 7 ---------------------------------------------------------- */

.ztvi-form {
    max-width: 720px;
    margin-inline: auto;
}

.ztvi-cta .ztvi-form {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.ztvi-form .wpcf7-form-control-wrap {
    display: block;
}

/* Contact Form 7 runs its markup through wpautop, and the section reset above
 * strips paragraph margins — put the rhythm back inside the form only. */
.ztvi-form p {
    margin: 0 0 16px;
}

.ztvi-form p:last-child {
    margin-bottom: 0;
}

/* Two fields side by side; stacks on narrow screens. */
.ztvi-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

@media (max-width: 560px) {
    .ztvi-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ztvi-form input[type="submit"],
    .ztvi-form .wpcf7-submit {
        width: 100%;
    }
}

.ztvi-form .wpcf7-list-item {
    margin: 0;
}

.ztvi-form .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    line-height: 1.5;
}

.ztvi-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--ztvi-cyan);
}

/* Contact Form 7 wraps each field in <p> and appends <br> after the label
 * text. The paragraph already supplies the rhythm, so the label must not add
 * its own margin, and the break is redundant once the control wrap is block. */
.ztvi-form label {
    display: block;
    margin-bottom: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
}

.ztvi-form label br {
    display: none;
}

.ztvi-form input[type="text"],
.ztvi-form input[type="email"],
.ztvi-form input[type="tel"],
.ztvi-form input[type="url"],
.ztvi-form select,
.ztvi-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
    font-family: inherit;
    font-size: 15px;
}

.ztvi-form input::placeholder,
.ztvi-form textarea::placeholder {
    color: rgba(177, 199, 234, 0.7);
}

.ztvi-form input:focus,
.ztvi-form select:focus,
.ztvi-form textarea:focus {
    outline: 2px solid var(--ztvi-cyan);
    outline-offset: 1px;
}

.ztvi-form select option {
    color: var(--ztvi-ink);
}

.ztvi-form input[type="submit"],
.ztvi-form .wpcf7-submit {
    min-width: 240px;
    margin-top: 8px;
    padding: 15px 24px;
    border: 0;
    border-radius: 10px;
    background: var(--ztvi-blue);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease;
}

.ztvi-form input[type="submit"]:hover,
.ztvi-form .wpcf7-submit:hover {
    background: var(--ztvi-cyan);
    color: var(--ztvi-ink);
}

.ztvi-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #ff8a8a;
    font-size: 13px;
}

.ztvi-form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

/* Webinar dialog ---------------------------------------------------------- */

.ztvi-modal {
    width: min(720px, calc(100vw - 32px));
    /* Tall forms must scroll inside the dialog rather than overflow the
     * viewport, which leaves the submit button unreachable on short screens. */
    max-height: min(88svh, 760px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: var(--ztvi-navy-mid);
    color: var(--color-white);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Older browsers ignore svh; min-height fallback keeps the rule useful. */
@supports not (height: 1svh) {
    .ztvi-modal {
        max-height: 88vh;
    }
}

.ztvi-modal::backdrop {
    background: rgba(4, 8, 15, 0.78);
}

.ztvi-modal__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 26px 18px;
    background: var(--ztvi-navy-mid);
}

.ztvi-modal__head h2 {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.ztvi-modal__head h2 span {
    color: var(--ztvi-cyan);
}

.ztvi-modal__head button {
    border: 0;
    background: transparent;
    color: var(--ztvi-pale);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ztvi-modal .ztvi-form {
    max-width: none;
    padding: 0 26px 28px;
}

/* The dialog matches the page column's width, so paired fields stay side by
 * side; the shared small-screen breakpoint stacks them. */

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
    .ztvi-steps__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 20px;
    }

    .ztvi-step:not(:last-child)::before {
        display: none;
    }

    .ztvi-challenge__grid,
    .ztvi-industries__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ztvi-analytics__grid,
    .ztvi-why__grid,
    .ztvi-webinar__grid,
    .ztvi-panel.is-active {
        grid-template-columns: minmax(0, 1fr);
    }

    .ztvi-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 0;
    }

    .ztvi-stat:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 767px) {
    body.ztvi-page .ztvi-main .padding-section {
        padding-block: 56px;
    }

    .ztvi-hero__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .ztvi-steps__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ztvi-challenge__grid,
    .ztvi-industries__grid {
        grid-template-columns: minmax(0, 1fr);
    }


    /* Card paddings tighten so copy is not squeezed into a narrow column. */
    .ztvi-challenge-card,
    .ztvi-industry {
        padding: 28px 22px;
    }

    .ztvi-chart {
        padding: 20px 16px;
    }

    .ztvi-modal {
        width: calc(100vw - 24px);
        max-height: min(92svh, 760px);
    }

    .ztvi-modal__head {
        padding: 20px 20px 14px;
    }

    .ztvi-modal .ztvi-form {
        padding: 0 20px 24px;
    }
}

/* One statistic per row below the two-up layout, with the rules turned flat. */
@media (max-width: 560px) {
    .ztvi-stats__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .ztvi-stat {
        padding-block: 26px;
    }

    .ztvi-stat + .ztvi-stat::before,
    .ztvi-stat:nth-child(3)::before {
        display: block;
        top: 0;
        bottom: auto;
        inset-inline: 0;
        width: auto;
        height: 1px;
    }

    .ztvi-chart__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ztvi-tabs {
        gap: 8px;
    }

    .ztvi-tab {
        padding: 11px 20px;
        font-size: 14px;
    }
}


.zt__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-lime);
    color: #201547;
    border-radius: 4px;
    font-size: 0.9rem;
    padding-top: 4px;
    transition: transform 0.2s ease;
}


.section-hero__btn-icon--outline {
    background: transparent;
    color: #fff;
}

.zt-hero__title {
        font-size: clamp(3.25rem, 7vw, 6.5rem);
        font-weight: bold;
        line-height: 0.65;
        color: #fff;
    }

    .zt-hero__title span {
        font-weight: 800;
        color: var(--color-lime, #C3D534);
    }

    .zt-hero__subtitle {
    max-width: 504px;
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
}