:root{--tz-bg:#f6f7fb;--tz-surface:#fff;--tz-surface-soft:#f9faff;--tz-border:#e7eaf3;--tz-text:#20263a;--tz-muted:#7c859f;--tz-primary:#5b5cf0;--tz-primary-soft:#ecebff;--tz-success:#28c76f;--tz-success-soft:#e8f9f0;--tz-danger:#ff5b5c;--tz-danger-soft:#ffecec;--tz-warning:#ffb020;--tz-warning-soft:#fff6df;--tz-info:#2f80ff;--tz-info-soft:#eaf2ff;--tz-shadow:0 10px 30px rgba(36,45,82,.06);--tz-radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{background:var(--tz-bg);color:var(--tz-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background .25s,color .25s;min-height:100vh}body[data-theme=dark]{--tz-bg:#0f1422;--tz-surface:#171d2d;--tz-surface-soft:#1c2335;--tz-border:#283149;--tz-text:#eef3ff;--tz-muted:#9ea8c4;--tz-primary-soft:rgba(91,92,240,.18);--tz-success-soft:rgba(40,199,111,.16);--tz-danger-soft:rgba(255,91,92,.15);--tz-warning-soft:rgba(255,176,32,.15);--tz-info-soft:rgba(47,128,255,.16);--tz-shadow:0 18px 45px rgba(0,0,0,.28)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 0%,rgba(91,92,240,.11),transparent 28%),radial-gradient(circle at 92% 12%,rgba(47,128,255,.09),transparent 25%);z-index:-1}.navbar{background:color-mix(in srgb,var(--tz-surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--tz-border);box-shadow:var(--tz-shadow)}.navbar-brand{color:var(--tz-text)!important;display:flex;align-items:center;gap:10px;font-weight:800!important;font-size:1.35rem;letter-spacing:-.03em}.logo-dot{width:38px;height:38px;border-radius:12px;display:inline-block;box-shadow:0 8px 18px rgba(91,92,240,.22);margin:0;object-fit:cover;flex:0 0 38px}.navbar-brand .accent,.brand .accent{color:var(--tz-primary)}.nav-link{color:#5d6785!important;display:flex;align-items:center;gap:12px;padding:11px 14px!important;border-radius:16px;font-weight:700}.nav-link:hover,.nav-link.active{background:var(--tz-primary-soft);color:var(--tz-primary)!important}body[data-theme=dark] .nav-link{color:var(--tz-muted)!important}body[data-theme=dark] .nav-link:hover,body[data-theme=dark] .nav-link.active{color:#bfc4ff!important}.navbar-toggler,.profile-btn,.mobile-menu-btn,.theme-toggle{width:48px;height:48px;border-radius:16px;border:1px solid var(--tz-border);background:var(--tz-surface);color:var(--tz-primary);display:grid;place-items:center;box-shadow:var(--tz-shadow);font-size:1.1rem}.navbar-toggler-icon{filter:none}.btn-primary-custom{background:linear-gradient(135deg,#7d4dff,var(--tz-primary));color:#fff;border:0;font-weight:800;box-shadow:0 10px 24px rgba(91,92,240,.2)}.btn-primary-custom:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px rgba(91,92,240,.24)}.btn-outline-light-custom{background:color-mix(in srgb,var(--tz-surface) 86%,transparent);border:1px solid var(--tz-border);border-radius:14px;color:var(--tz-text);box-shadow:var(--tz-shadow);font-weight:800}.btn-outline-light-custom:hover{background:var(--tz-primary-soft);border-color:transparent;color:var(--tz-primary)}.language-switcher{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--tz-border);border-radius:999px;background:var(--tz-surface);box-shadow:var(--tz-shadow)}.lang-btn{border:0;border-radius:999px;padding:.45rem .72rem;background:transparent;color:var(--tz-muted);font-weight:800;font-size:.82rem}.lang-btn.active,.lang-btn:hover{background:var(--tz-primary-soft);color:var(--tz-primary)}.offcanvas,.mobile-offcanvas{background:var(--tz-surface);color:var(--tz-text);border-color:var(--tz-border)}body[data-theme=dark] .btn-close,body[data-theme=dark] .navbar-toggler-icon{filter:invert(1) grayscale(100%) brightness(200%)}.mobile-nav-link{font-size:1.08rem;padding:1rem;border:1px solid var(--tz-border);border-radius:16px;margin-bottom:10px;text-decoration:none;display:block;color:var(--tz-muted);font-weight:800}.mobile-nav-link:hover,.mobile-nav-link.active{background:var(--tz-primary-soft);color:var(--tz-primary)}.hero{padding:8.8rem 0 5rem}.subhero{padding:8.2rem 0 3.6rem}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--tz-border);background:var(--tz-surface);color:var(--tz-primary);padding:.7rem 1rem;border-radius:999px;margin-bottom:1.25rem;box-shadow:var(--tz-shadow);font-weight:800}.eyebrow:before{content:"⚡"}.display-title{font-size:clamp(2.45rem,6vw,4.6rem);line-height:1.02;font-weight:800;letter-spacing:-.05em;color:var(--tz-text)}.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;color:var(--tz-text)}.lead-muted,.muted,.text-secondary,.metric-meta,.metric-label,.headline p{color:var(--tz-muted)!important}.highlight{background:linear-gradient(135deg,#7d4dff,var(--tz-primary) 50%,var(--tz-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.section{padding:5.3rem 0}.cardx,.glass,.pricing-card,.card-soft,.plan-box{background:var(--tz-surface);border:1px solid var(--tz-border);border-radius:var(--tz-radius);box-shadow:var(--tz-shadow);height:100%;padding:1.5rem;color:var(--tz-text)}.glass{padding:1.25rem}.cardx h2,.cardx h3,.cardx h4,.cardx h5,.pricing-card h2,.pricing-card h3,.pricing-card h4,.pricing-card h5{font-weight:800;letter-spacing:-.025em}.icon,.mini-icon,.metric-icon,.summary-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0;background:var(--tz-primary-soft);color:var(--tz-primary);margin-bottom:1rem}.feature-image{border-radius:18px;width:100%;object-fit:cover;border:1px solid var(--tz-border);box-shadow:var(--tz-shadow)}.metric{background:var(--tz-surface-soft);border:1px solid var(--tz-border);border-radius:18px;padding:1.1rem;height:100%}.metric strong,.metric-value{font-size:2.1rem;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--tz-text);display:block;margin-bottom:.45rem}.footer{border-top:1px solid var(--tz-border);color:var(--tz-muted);background:color-mix(in srgb,var(--tz-surface) 70%,transparent)}.footer a{color:var(--tz-muted)!important}.form-control,.form-select,.input-group-text{background:var(--tz-surface)!important;border:1px solid var(--tz-border)!important;color:var(--tz-text)!important;border-radius:14px;min-height:48px;box-shadow:var(--tz-shadow)}.form-control::placeholder{color:var(--tz-muted)}.form-select option{color:#20263a}.badge-soft,.badge-soft-success,.badge-soft-danger,.badge-soft-warning,.badge-soft-info,.badge-soft-primary{padding:8px 12px;border-radius:999px;font-weight:800;font-size:.85rem;border:0}.badge-soft,.badge-soft-primary{background:var(--tz-primary-soft);color:var(--tz-primary)}.badge-soft-success{background:var(--tz-success-soft);color:var(--tz-success)}.badge-soft-danger{background:var(--tz-danger-soft);color:var(--tz-danger)}.badge-soft-warning{background:var(--tz-warning-soft);color:var(--tz-warning)}.badge-soft-info{background:var(--tz-info-soft);color:var(--tz-info)}.bg-primary-soft{background:var(--tz-primary-soft);color:var(--tz-primary)}.bg-success-soft{background:var(--tz-success-soft);color:var(--tz-success)}.bg-danger-soft{background:var(--tz-danger-soft);color:var(--tz-danger)}.bg-warning-soft{background:var(--tz-warning-soft);color:var(--tz-warning)}.bg-info-soft{background:var(--tz-info-soft);color:var(--tz-info)}.table>:not(caption)>*>*{color:var(--tz-text)!important;background-color:transparent!important;border-color:var(--tz-border)!important}.table thead th{color:var(--tz-muted)!important;font-size:.85rem;font-weight:800}.sticky-mobile-cta{display:none}.trust-strip{background:var(--tz-surface);border:1px solid var(--tz-border);border-radius:var(--tz-radius);box-shadow:var(--tz-shadow);padding:18px}.dashboard-preview{background:var(--tz-surface);border:1px solid var(--tz-border);border-radius:28px;box-shadow:var(--tz-shadow);overflow:hidden}.dashboard-preview-bar{background:var(--tz-surface-soft);border-bottom:1px solid var(--tz-border);padding:16px 18px}.soft-row{padding:16px;border:1px solid var(--tz-border);border-radius:18px;background:var(--tz-surface-soft)}@media(max-width:991.98px){.hero{padding-top:7.4rem}.section{padding:4.25rem 0}.hero .btn{width:100%}.display-title{font-size:clamp(2.25rem,12vw,3.6rem)}.sticky-mobile-cta{display:block;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1030}.desktop-cta{display:none}.navbar .container{gap:.75rem}.metric{padding:1rem}.cardx,.glass,.pricing-card{padding:1.15rem}}


/* Interactive ROI Calculator */
.roi-calculator{overflow:hidden}
.roi-input-grid{display:grid;gap:16px}
.roi-field label{color:var(--tz-muted);font-weight:700;font-size:.9rem;margin-bottom:8px}
.roi-field input{min-height:52px;border-radius:16px;border:1px solid var(--tz-border);background:var(--tz-surface-soft);color:var(--tz-text);font-weight:700;box-shadow:none}
.roi-field input:focus{border-color:var(--tz-primary);box-shadow:0 0 0 .25rem var(--tz-primary-soft);background:var(--tz-surface);color:var(--tz-text)}
.roi-result-card{background:radial-gradient(circle at top right,var(--tz-primary-soft),transparent 38%),var(--tz-surface);border:1px solid var(--tz-border);border-radius:var(--tz-radius);box-shadow:var(--tz-shadow);padding:22px}
.roi-big-number{font-size:clamp(2.1rem,5vw,3.4rem);line-height:.95;letter-spacing:-.06em;font-weight:900}
.roi-result-row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--tz-border)}
.roi-result-row:last-child{border-bottom:0}
.roi-result-row span:first-child{color:var(--tz-muted);font-weight:700}
.roi-result-row span:last-child{font-weight:900;text-align:right}
.roi-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 13px;background:var(--tz-success-soft);color:var(--tz-success);font-weight:800}
.roi-bar{height:12px;border-radius:999px;background:var(--tz-border);overflow:hidden}
.roi-bar span{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--tz-primary),var(--tz-success));transition:width .25s ease}
body[data-theme=dark] .roi-field input{background:var(--tz-surface)}


/* FIX: Accordion Button Text (Light + Dark Mode) */
.accordion-button {
  background: var(--tz-surface) !important;
  color: var(--tz-text) !important;
  font-weight: 700;
}

.accordion-button:not(.collapsed) {
  background: var(--tz-primary-soft) !important;
  color: var(--tz-primary) !important;
}

/* Pfeil (Icon) */
.accordion-button::after {
  filter: none;
}

/* Dark Mode Anpassung */
body[data-theme="dark"] .accordion-button {
  color: var(--tz-text) !important;
}

body[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(200%);
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    padding: 12px 16px;
    margin-bottom: 10px;

    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;

    font-weight: 500;
    text-decoration: none;

    transition: all 0.2s ease;
}

.social-btn img {
    width: 20px;
    height: 20px;
}

.social-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* Apple Button (dark) */
.social-btn.apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

.social-btn.apple:hover {
    background: #222;
}
/* Login: weniger Abstand zwischen Subhero (H1) und Formular */
.section--compact{padding-top:3rem}
@media(max-width:991.98px){.section--compact{padding-top:2.25rem}}

/* Public landingpage SEO content sections */
.section--seo .icon{font-weight:900;font-size:1.15rem}
.seo-list{list-style:none;padding-left:0;margin:1rem 0 0}
.seo-list li{position:relative;padding-left:2rem;margin-bottom:.9rem;font-weight:700}
.seo-list li:before{content:"✕";position:absolute;left:0;top:0;color:var(--tz-danger);font-weight:900}
.seo-list-positive li:before{content:"✓";color:var(--tz-success)}
.accordion-item.cardx{padding:0;overflow:hidden}
.accordion-item.cardx .accordion-button{border-radius:var(--tz-radius);box-shadow:none;padding:1.2rem 1.35rem;font-size:1.02rem}
.accordion-item.cardx .accordion-body{padding:0 1.35rem 1.35rem}

.brand-tagline-hero{font-weight:800;color:var(--tz-primary);letter-spacing:-.02em;font-size:1.08rem}.brand-tagline-subtle{font-weight:800;color:var(--tz-primary);letter-spacing:-.02em}.footer-brand-line{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.footer-brand-name{font-weight:900;color:var(--tz-text);letter-spacing:-.03em}.footer-brand-name .accent{color:var(--tz-primary)}.footer-tagline{font-weight:800;color:var(--tz-primary)}@media(max-width:991.98px){.footer-brand-line{gap:.35rem}.footer .d-flex.gap-3{gap:.75rem!important}}

/* Developer Hub */
.public-code-box{background:#0b1020;color:#eef2ff;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1rem;overflow:auto;min-height:190px;margin:0;font-size:.86rem;line-height:1.55;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.public-code-box code{color:inherit;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.copy-code-btn{border:1px solid var(--tz-border);background:var(--tz-surface-soft);color:var(--tz-text);border-radius:999px;padding:.45rem .8rem;font-weight:800;font-size:.82rem}
.copy-code-btn:hover,.copy-code-btn.copied{background:var(--tz-primary-soft);border-color:transparent;color:var(--tz-primary)}
.section-subtitle{color:var(--tz-muted);font-size:1.05rem;max-width:760px}

/* Privacy page */
.privacy-toc { top: 96px; }
.privacy-toc a { color: var(--muted); text-decoration: none; padding: .35rem 0; }
.privacy-toc a:hover { color: var(--text); }
.privacy-content section { scroll-margin-top: 110px; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--border); }
.privacy-content section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.privacy-content h2 { font-size: 1.35rem; margin-bottom: .85rem; }
.privacy-content ul { padding-left: 1.25rem; }
.privacy-content li { margin-bottom: .45rem; }
.privacy-note { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; background: var(--surface-2); color: var(--muted); font-size: .875rem; }

/* Theme-aware TestZombie AI wordmark */
.brand-logo{display:block;width:auto;height:38px;max-width:220px;object-fit:contain;object-position:left center}
.navbar-brand{min-width:0}
.footer-brand-logo{height:30px;max-width:176px}
.footer-brand-logo-link{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:575.98px){.brand-logo{height:32px;max-width:178px}.footer-brand-logo{height:27px;max-width:158px}}

/* Google reCAPTCHA in authentication forms */
.recaptcha-wrap {
    display: flex;
    justify-content: center;
    min-height: 78px;
    overflow: hidden;
}

@media (max-width: 380px) {
    .recaptcha-wrap .g-recaptcha {
        transform: scale(.88);
        transform-origin: center top;
    }
}

/* Branded application error page */
.error-page-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.error-page-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 92px;
}

.error-page-section {
    width: 100%;
    padding: clamp(3rem, 8vw, 7rem) 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(39, 111, 255, .13), transparent 31rem),
        radial-gradient(circle at 84% 76%, rgba(65, 211, 255, .10), transparent 28rem);
}

.error-page-card {
    position: relative;
    max-width: 760px;
    padding: clamp(2rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--tz-border);
    border-radius: 32px;
    background: var(--tz-surface);
    box-shadow: 0 28px 80px rgba(18, 41, 78, .12);
}

.error-code {
    position: absolute;
    top: -1.8rem;
    right: 1rem;
    font-size: clamp(7rem, 19vw, 12rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.08em;
    color: rgba(39, 111, 255, .055);
    user-select: none;
}

.error-icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    font-size: 2rem;
    background: linear-gradient(135deg, #276fff, #42c9f5);
    box-shadow: 0 16px 36px rgba(39, 111, 255, .28);
}

.error-page-card h1 {
    position: relative;
    margin: .8rem 0 1rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -.04em;
}

.error-page-message {
    position: relative;
    max-width: 590px;
    margin: 0 auto;
    color: var(--tz-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.error-page-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}

.error-support-note {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin-top: 2rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--tz-border);
    color: var(--tz-muted);
    font-size: .9rem;
}

@media (max-width: 575.98px) {
    .error-page-actions .btn { width: 100%; }
    .error-page-card { border-radius: 24px; }
}

/* ROI calculator: maintenance-cost model */
.roi-field select{min-height:52px;border-radius:16px;border:1px solid var(--tz-border);background-color:var(--tz-surface-soft);color:var(--tz-text);font-weight:700;box-shadow:none}
.roi-field select:focus{border-color:var(--tz-primary);box-shadow:0 0 0 .25rem var(--tz-primary-soft);background-color:var(--tz-surface);color:var(--tz-text)}
.roi-input-suffix{position:relative}.roi-input-suffix .form-control{padding-right:48px}.roi-input-suffix>span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:900;color:var(--tz-muted);pointer-events:none}
.roi-formula-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--tz-border);border-radius:16px;background:var(--tz-surface-soft);color:var(--tz-muted);font-size:.9rem;font-weight:650;line-height:1.5}
.roi-formula-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:0 0 30px;background:var(--tz-primary-soft);color:var(--tz-primary);font-weight:900}
.roi-summary-caption{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tz-muted);font-weight:900;margin-bottom:2px}
.roi-result-row-highlight{margin:8px -10px 0;padding:14px 10px;border-radius:14px;background:var(--tz-success-soft);border-bottom:0}.roi-result-row-highlight span:first-child{color:var(--tz-text)}.roi-result-row-highlight span:last-child{color:var(--tz-success)}
body[data-theme=dark] .roi-field select{background-color:var(--tz-surface);color:var(--tz-text)}

/* Public live demo page */
.live-demo-hero{padding-bottom:3rem}
.live-hero-visual{display:flex;justify-content:flex-end}
.live-hero-screen{position:relative;width:min(100%,390px);aspect-ratio:16/10;border:1px solid var(--tz-border);border-radius:28px;background:linear-gradient(145deg,var(--tz-surface),var(--tz-surface-soft));box-shadow:0 28px 70px rgba(45,54,104,.14);overflow:hidden;padding:18px}
.live-hero-screen.live-hero-app{padding-bottom:76px}
.live-hero-dots{display:flex;gap:7px;margin-bottom:16px}.live-hero-dots span{width:8px;height:8px;border-radius:50%;background:var(--tz-border)}
.hero-browser-body{display:grid;grid-template-columns:72px 1fr;gap:14px;height:calc(100% - 18px)}
.hero-browser-sidebar{border-radius:18px;background:rgba(91,92,240,.05);border:1px solid rgba(91,92,240,.08);padding:16px 12px;display:grid;align-content:start;gap:12px}.hero-browser-sidebar i{display:block;height:10px;border-radius:999px;background:rgba(91,92,240,.18)}.hero-browser-sidebar i:nth-child(2){width:78%}.hero-browser-sidebar i:nth-child(3){width:65%}.hero-browser-sidebar i:nth-child(4){width:86%}
.hero-browser-main{display:grid;grid-template-rows:auto 92px 1fr;gap:14px}
.hero-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-stat-card{border-radius:18px;padding:14px 14px 12px;background:rgba(255,255,255,.92);border:1px solid rgba(90,99,140,.12)}body[data-theme=dark] .hero-stat-card{background:rgba(20,27,43,.88)}.hero-stat-card small{display:block;font-size:.72rem;color:var(--tz-muted);font-weight:700;margin-bottom:3px}.hero-stat-card strong{font-size:1.05rem}.hero-stat-card.primary strong{color:var(--tz-primary)}.hero-stat-card.success strong{color:var(--tz-success)}
.hero-chart-card{display:flex;align-items:flex-end;gap:10px;border-radius:18px;padding:16px;background:rgba(91,92,240,.05);border:1px solid rgba(91,92,240,.08)}.hero-chart-card span{display:block;flex:1;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,rgba(125,77,255,.85),rgba(91,92,240,.4))}.hero-chart-card span:nth-child(1){height:44%}.hero-chart-card span:nth-child(2){height:70%}.hero-chart-card span:nth-child(3){height:58%}.hero-chart-card span:nth-child(4){height:82%}
.hero-list-card{display:grid;gap:10px;border-radius:18px;padding:16px;background:rgba(255,255,255,.82);border:1px solid rgba(90,99,140,.1)}body[data-theme=dark] .hero-list-card{background:rgba(20,27,43,.88)}.hero-list-card div{height:12px;border-radius:999px;background:rgba(91,92,240,.12)}.hero-list-card div:nth-child(1){width:88%}.hero-list-card div:nth-child(2){width:72%}.hero-list-card div:nth-child(3){width:80%}
.hero-floating-note{position:absolute;left:18px;right:88px;bottom:18px;border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.95);border:1px solid rgba(90,99,140,.12);box-shadow:0 18px 40px rgba(36,45,82,.14)}body[data-theme=dark] .hero-floating-note{background:rgba(20,27,43,.94)}.hero-floating-note strong{display:block;font-size:.82rem;color:var(--tz-primary);margin-bottom:2px}.hero-floating-note span{display:block;font-size:.8rem;color:var(--tz-muted);font-weight:700}
.live-hero-play{position:absolute;right:22px;bottom:18px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding-left:4px;background:linear-gradient(135deg,#7d4dff,var(--tz-primary));color:#fff;box-shadow:0 14px 34px rgba(91,92,240,.28);z-index:2}
.live-streaming-note{display:inline-flex;align-items:center;gap:8px;padding:.65rem .95rem;border:1px solid var(--tz-border);border-radius:999px;background:var(--tz-surface);color:var(--tz-muted);font-size:.84rem;font-weight:800;white-space:nowrap}.live-streaming-note:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tz-success);box-shadow:0 0 0 5px var(--tz-success-soft)}
.live-demo-card{display:flex;flex-direction:column;background:var(--tz-surface);border:1px solid var(--tz-border);border-radius:24px;box-shadow:var(--tz-shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.live-demo-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(36,45,82,.11);border-color:color-mix(in srgb,var(--tz-primary) 28%,var(--tz-border))}
.live-demo-preview{position:relative;min-height:250px;overflow:hidden;background:linear-gradient(145deg,#eef0ff,#f7f8ff);border-bottom:1px solid var(--tz-border)}body[data-theme=dark] .live-demo-preview{background:linear-gradient(145deg,#1b2237,#121827)}
.live-demo-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.35rem 1.4rem 1.45rem}.live-demo-card-body h3{font-size:1.22rem;line-height:1.3;font-weight:800;letter-spacing:-.025em;margin:1rem 0 .65rem}.live-demo-card-body p{line-height:1.62;margin-bottom:1.2rem}
.live-demo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;padding-left:4px;background:rgba(255,255,255,.94);color:var(--tz-primary);font-size:1.2rem;box-shadow:0 16px 38px rgba(36,45,82,.18);z-index:5}
.preview-browser-bar{height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;background:rgba(255,255,255,.82);border-bottom:1px solid rgba(90,99,140,.12)}body[data-theme=dark] .preview-browser-bar{background:rgba(20,27,43,.88)}.preview-browser-bar>span{width:8px;height:8px;border-radius:50%;background:#c7ccdc}.preview-address{margin-left:10px;height:22px;line-height:22px;padding:0 14px;border-radius:999px;background:rgba(91,92,240,.08);color:#858da7;font-size:.67rem;font-weight:700;min-width:132px}
.preview-content{display:grid;height:206px}.preview-content-web{grid-template-columns:30% 1fr}.preview-side{border-right:1px solid rgba(90,99,140,.1);background:rgba(255,255,255,.26);padding:18px 14px;display:grid;align-content:start;gap:11px}.preview-side i{display:block;height:9px;border-radius:999px;background:rgba(91,92,240,.16)}.preview-side i:nth-child(2){width:76%}.preview-side i:nth-child(3){width:62%}.preview-side i:nth-child(4){width:84%}
.preview-dashboard{padding:18px 18px 16px;position:relative;display:grid;grid-template-rows:auto 58px 1fr auto;gap:12px}
.preview-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-stat{border-radius:14px;padding:10px 10px 8px;background:rgba(255,255,255,.9);border:1px solid rgba(90,99,140,.1)}body[data-theme=dark] .preview-stat{background:rgba(20,27,43,.88)}.preview-stat small{display:block;font-size:.63rem;color:var(--tz-muted);font-weight:800;margin-bottom:2px}.preview-stat strong{font-size:.88rem}.preview-stat.success strong{color:var(--tz-success)}
.preview-chart{display:flex;align-items:flex-end;gap:7px;border-radius:14px;padding:10px 10px 8px;background:rgba(91,92,240,.05);border:1px solid rgba(91,92,240,.08)}.preview-chart span{display:block;flex:1;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(125,77,255,.78),rgba(91,92,240,.4))}.preview-chart span:nth-child(1){height:38%}.preview-chart span:nth-child(2){height:68%}.preview-chart span:nth-child(3){height:55%}.preview-chart span:nth-child(4){height:82%}
.preview-table{display:grid;gap:8px}.preview-table div{height:10px;border-radius:999px;background:rgba(91,92,240,.12)}.preview-table div:nth-child(1){width:95%}.preview-table div:nth-child(2){width:72%}.preview-table div:nth-child(3){width:84%}
.preview-heal{height:42px;border:1px solid rgba(40,199,111,.18);border-radius:12px;background:rgba(40,199,111,.08);display:flex;align-items:center;gap:12px;padding:0 13px}.preview-heal span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--tz-success);color:#fff;font-size:.63rem;font-weight:900}.preview-heal i{display:block;height:8px;width:58%;border-radius:999px;background:rgba(40,199,111,.24)}
.live-demo-preview-android,.live-demo-preview-ios{display:flex;align-items:center;justify-content:center}.live-demo-preview-android{background:radial-gradient(circle at 72% 25%,rgba(40,199,111,.18),transparent 32%),linear-gradient(145deg,#f1fbf6,#eef4ff)}.live-demo-preview-ios{background:radial-gradient(circle at 25% 18%,rgba(47,128,255,.18),transparent 32%),linear-gradient(145deg,#f1f6ff,#f7f1ff)}body[data-theme=dark] .live-demo-preview-android,body[data-theme=dark] .live-demo-preview-ios{background:linear-gradient(145deg,#182135,#111827)}
.phone-frame{position:relative;width:118px;height:212px;border-radius:24px;background:#20263a;padding:7px;box-shadow:0 18px 38px rgba(28,34,61,.22);transform:translateX(-22px)}.android-frame{border-radius:18px}.ios-frame{border-radius:28px}.phone-ui{height:100%;border-radius:18px;background:var(--tz-surface);padding:24px 10px 12px;overflow:hidden}.ios-frame .phone-ui{border-radius:22px}.phone-speaker{position:absolute;z-index:2;top:10px;left:50%;width:24px;height:3px;border-radius:999px;background:#697089;transform:translateX(-50%)}.ios-notch{position:absolute;z-index:2;top:7px;left:50%;width:42px;height:13px;border-radius:0 0 9px 9px;background:#20263a;transform:translateX(-50%)}
.phone-ui-app{display:grid;grid-template-rows:12px 48px 28px 24px 28px 22px;gap:10px}.phone-app-header{border-radius:999px;background:linear-gradient(90deg,rgba(91,92,240,.18),rgba(91,92,240,.08));width:62%}.phone-app-header.ios{width:55%}.phone-card{border-radius:11px;background:var(--tz-surface-soft);border:1px solid var(--tz-border)}.phone-card.large{height:48px}.phone-card.short{height:28px;width:84%}.phone-list-item{height:28px;border-radius:9px;background:rgba(91,92,240,.08);border:1px solid rgba(91,92,240,.08)}.phone-list-item.short{width:78%}.phone-action{height:22px;width:70%;margin-top:4px;border-radius:999px;background:linear-gradient(135deg,#7d4dff,var(--tz-primary))}
.mobile-heal-badge{position:absolute;right:22px;top:24px;padding:8px 11px;border-radius:999px;background:var(--tz-surface);border:1px solid var(--tz-border);color:var(--tz-success);font-weight:900;font-size:.7rem;letter-spacing:.05em;box-shadow:var(--tz-shadow)}
.mobile-floating-card{position:absolute;left:28px;bottom:24px;max-width:150px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(90,99,140,.12);box-shadow:0 16px 30px rgba(36,45,82,.12);font-size:.72rem;font-weight:800;color:var(--tz-success)}body[data-theme=dark] .mobile-floating-card{background:rgba(20,27,43,.92)}.mobile-floating-card.ios{color:var(--tz-info)}
.live-demo-cta{padding:clamp(2rem,5vw,4rem)!important;background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 36%,var(--tz-surface)))}
.live-video-modal .modal-content{background:var(--tz-surface);color:var(--tz-text);border:1px solid var(--tz-border);border-radius:24px;box-shadow:0 30px 90px rgba(20,27,55,.25);overflow:hidden}.live-video-modal .modal-header{padding:1.2rem 1.35rem .8rem}.live-video-modal .modal-body{padding:0 1.35rem 1.35rem}.live-modal-platform{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:var(--tz-primary-soft);color:var(--tz-primary);font-size:.75rem;font-weight:800}.live-video-shell{overflow:hidden;border-radius:18px;background:#05070c;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.live-video-shell video{display:block;width:100%;height:100%;background:#05070c}.live-video-modal .btn-close{filter:none}body[data-theme=dark] .live-video-modal .btn-close{filter:invert(1) grayscale(100%) brightness(180%)}
@media(max-width:991.98px){.live-demo-preview{min-height:225px}.phone-frame{transform:translateX(-12px)}.hero-floating-note{right:78px}.live-hero-visual{justify-content:center}}
@media(max-width:575.98px){.live-demo-card-body{padding:1.15rem}.live-demo-preview{min-height:195px}.live-video-modal .modal-dialog{margin:.65rem}.live-video-modal .modal-header{padding:1rem 1rem .7rem}.live-video-modal .modal-body{padding:0 1rem 1rem}}

/* Live demo page thumbnail refinement */
.live-demo-hero{padding-bottom:3rem}
.live-hero-collage{position:relative;min-height:335px;max-width:420px;margin-left:auto;transform:scale(.92);transform-origin:top right}
.hero-thumb{position:absolute;border-radius:24px;overflow:hidden;border:1px solid var(--tz-border);box-shadow:0 22px 54px rgba(36,45,82,.16);background:var(--tz-surface)}
.hero-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hero-thumb-main{right:0;top:8px;width:285px;height:214px;transform:rotate(1.5deg)}
.hero-thumb-secondary{width:150px;height:112px}
.hero-thumb-android{left:18px;top:134px;transform:rotate(-8deg)}
.hero-thumb-ios{right:18px;bottom:0;transform:rotate(7deg)}
.hero-floating-pill{position:absolute;left:92px;top:14px;display:inline-flex;align-items:center;padding:.58rem .9rem;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid var(--tz-border);box-shadow:0 18px 40px rgba(36,45,82,.12);font-weight:800;color:var(--tz-primary);font-size:.95rem}
body[data-theme=dark] .hero-floating-pill{background:rgba(20,27,43,.94)}

.live-streaming-note{display:inline-flex;align-items:center;gap:8px;padding:.65rem .95rem;border:1px solid var(--tz-border);border-radius:999px;background:var(--tz-surface);color:var(--tz-muted);font-size:.84rem;font-weight:800;white-space:nowrap}
.live-streaming-note:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tz-success);box-shadow:0 0 0 5px var(--tz-success-soft)}

.live-demo-card{display:flex;flex-direction:column;background:var(--tz-surface);border:1px solid var(--tz-border);border-radius:24px;box-shadow:var(--tz-shadow);overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.live-demo-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(36,45,82,.11);border-color:color-mix(in srgb,var(--tz-primary) 28%,var(--tz-border))}
.live-demo-preview{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--tz-border);background:linear-gradient(145deg,#eef0ff,#f7f8ff)}
.live-demo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.live-demo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;padding-left:4px;background:rgba(255,255,255,.94);color:var(--tz-primary);font-size:1.35rem;box-shadow:0 16px 38px rgba(36,45,82,.18);z-index:4;transition:transform .2s ease}
.live-demo-card:hover .live-demo-play{transform:translate(-50%,-50%) scale(1.04)}
.live-demo-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.35rem 1.4rem 1.45rem}
.live-demo-card-body h3{font-size:1.22rem;line-height:1.3;font-weight:800;letter-spacing:-.025em;margin:1rem 0 .65rem}
.live-demo-card-body p{line-height:1.62;margin-bottom:1.2rem}
.live-card-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;flex-wrap:wrap}
.live-inline-cta{padding:0 !important;border:0 !important;text-decoration:none;font-weight:800;color:var(--tz-primary)}
.live-inline-cta:hover{text-decoration:underline;color:var(--tz-primary)}

.live-demo-cta{padding:clamp(2rem,5vw,4rem)!important;background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 36%,var(--tz-surface)))}
.live-video-modal .modal-content{background:var(--tz-surface);color:var(--tz-text);border:1px solid var(--tz-border);border-radius:24px;box-shadow:0 30px 90px rgba(20,27,55,.25);overflow:hidden}
.live-video-modal .modal-header{padding:1.2rem 1.35rem .8rem}
.live-video-modal .modal-body{padding:0 1.35rem 1.35rem}
.live-modal-platform{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:var(--tz-primary-soft);color:var(--tz-primary);font-size:.75rem;font-weight:800}
.live-video-shell{overflow:hidden;border-radius:18px;background:#05070c;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.live-video-shell video{display:block;width:100%;height:100%;background:#05070c}
.live-video-modal .btn-close{filter:none}
body[data-theme=dark] .live-video-modal .btn-close{filter:invert(1) grayscale(100%) brightness(180%)}

@media(max-width:991.98px){
  .live-demo-preview{min-height:230px}
  .live-card-actions{flex-direction:column;align-items:stretch}
  .live-inline-cta{text-align:center}
}
@media(max-width:575.98px){
  .live-demo-card-body{padding:1.15rem}
  .live-demo-preview{min-height:200px}
  .live-video-modal .modal-dialog{margin:.65rem}
  .live-video-modal .modal-header{padding:1rem 1rem .7rem}
  .live-video-modal .modal-body{padding:0 1rem 1rem}
}

@media(max-width:1199.98px){.live-hero-collage{transform:scale(.82);max-width:380px;min-height:300px}}

/* Simplified live hero: intentionally no decorative hero image */
.live-demo-hero{padding-top:clamp(4.5rem,7vw,7rem);padding-bottom:clamp(3.5rem,6vw,5.5rem)}
.live-demo-hero .display-title{max-width:920px}
.live-demo-hero .lead-muted{max-width:780px}

/* Framework & Playwright support */
.framework-support-shell{padding:clamp(1.5rem,3vw,2.2rem)!important;background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 24%,var(--tz-surface)))}
.framework-card{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--tz-border);border-radius:18px;background:var(--tz-surface-soft)}
.framework-card-featured{border-color:color-mix(in srgb,var(--tz-primary) 38%,var(--tz-border));box-shadow:0 14px 34px rgba(91,92,240,.10)}
.framework-card strong{display:block;font-size:1.05rem;margin-bottom:4px}
.framework-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 46px;font-weight:900;letter-spacing:-.04em;border:1px solid var(--tz-border);background:var(--tz-surface)}
.selenium-mark{color:#11a861;background:rgba(17,168,97,.08);border-color:rgba(17,168,97,.18)}
.playwright-mark{color:#7a4dff;background:rgba(122,77,255,.09);border-color:rgba(122,77,255,.20)}
.appium-mark{color:#2f80ff;background:rgba(47,128,255,.09);border-color:rgba(47,128,255,.18);font-size:.8rem}
.framework-browser-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--tz-muted);font-size:.9rem}
.framework-browser-line strong{padding:.35rem .65rem;border-radius:999px;border:1px solid var(--tz-border);background:var(--tz-surface);color:var(--tz-text);font-size:.82rem}
.framework-feature-card{position:relative;overflow:hidden}
.framework-feature-card .framework-mark{margin-bottom:1rem}
.framework-feature-card-highlight{border-color:color-mix(in srgb,var(--tz-primary) 34%,var(--tz-border));background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 28%,var(--tz-surface)))}
.framework-mini-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:1rem}
.framework-mini-pills span{padding:.35rem .58rem;border-radius:999px;background:var(--tz-surface-soft);border:1px solid var(--tz-border);font-size:.75rem;font-weight:700;color:var(--tz-muted)}
.framework-card-link{display:inline-flex;margin-top:1rem;font-weight:800;color:var(--tz-primary);text-decoration:none}
.framework-card-link:hover{text-decoration:underline;color:var(--tz-primary)}
.developer-example-card{display:flex;flex-direction:column;align-items:flex-start}
.developer-example-card .btn{margin-top:auto}
.developer-example-playwright{border-color:color-mix(in srgb,var(--tz-primary) 28%,var(--tz-border));background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 20%,var(--tz-surface)))}
.docs-playwright-block{border-color:color-mix(in srgb,var(--tz-primary) 22%,var(--tz-border))!important}

.playwright-hero{padding-bottom:4rem}
.playwright-hero-card{padding:clamp(1.5rem,3vw,2.2rem)!important;background:linear-gradient(145deg,var(--tz-surface),color-mix(in srgb,var(--tz-primary-soft) 28%,var(--tz-surface)));border-color:color-mix(in srgb,var(--tz-primary) 20%,var(--tz-border))}
.browser-pills{display:flex;gap:8px;flex-wrap:wrap}
.browser-pills span{display:inline-flex;padding:.48rem .72rem;border-radius:999px;border:1px solid var(--tz-border);background:var(--tz-surface);font-size:.8rem;font-weight:800;color:var(--tz-muted)}
.playwright-checks{display:grid;gap:10px;margin-top:1.2rem}
.playwright-checks>div{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:14px;border:1px solid var(--tz-border);background:var(--tz-surface-soft);font-weight:650}
.playwright-checks>div>span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tz-success-soft);color:var(--tz-success);font-weight:900;flex:0 0 22px}

@media(max-width:767.98px){
  .framework-card{padding:15px}
  .framework-support-shell{padding:1.25rem!important}
}