:root {
    --zx-bg: #f8f8fb;
    --zx-text: #1a1a22;
    --zx-sub: #7a7a88;
    --zx-line: #e9e9f2;
    --zx-purple: #6f36ff;
    --zx-purple-dark: #5226ca;
    --zx-grad: linear-gradient(130deg, #21b7ff 0%, #7939ff 50%, #f746a5 78%, #ffd56b 100%);
    --zx-grad-soft: linear-gradient(145deg, #eff7ff 0%, #f8efff 44%, #fff1f8 100%);
}

* {
    box-sizing: border-box;
}

body.zx-body {
    margin: 0;
    color: var(--zx-text);
    background: radial-gradient(circle at 10% 0%, #ffffff 0%, #f7f7fc 40%, #f4f4fb 100%);
    font-family: 'Manrope', sans-serif;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
}

.zx-shell {
    max-width: 1380px !important;
    width: calc(100% - 24px);
    padding-left: 12px;
    padding-right: 12px;
}

.zx-topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid #e6e9f3;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(27, 31, 58, 0.08);
}

.zx-nav-inner {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.zx-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #171721;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.zx-brand span {
    color: #7d42ff;
    font-size: 20px;
}

.zx-nav-links {
    display: flex;
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.zx-nav-links a,
.zx-link-btn {
    color: #5f5f6f;
    font-size: 15px;
    font-weight: 600;
}

.zx-nav-links a {
    padding: 6px 0;
    border-radius: 0;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.zx-nav-links a:hover {
    color: #2e215f;
    background: transparent;
    border-bottom-color: #b79eff;
}

.zx-nav-auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zx-outline-btn,
.zx-primary-btn,
.zx-dark-btn {
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.zx-outline-btn {
    border-color: #cfc0f7;
    color: #4a2db3;
    background: #fff;
    box-shadow: 0 6px 14px rgba(74, 45, 179, 0.1);
}

.zx-primary-btn {
    background: var(--zx-purple);
    color: #fff;
    box-shadow: 0 10px 22px rgba(111, 54, 255, 0.28);
}

.zx-primary-btn:hover {
    background: var(--zx-purple-dark);
    color: #fff;
}

.zx-dark-btn {
    background: #13131b;
    color: #fff;
}

.zx-small {
    padding: 9px 13px;
}

.zx-hero-section {
    padding: 36px 0 18px;
}

.zx-hero-grid {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: 26px;
    align-items: start;
}

.zx-hero-copy h1 {
    font-size: 86px;
    line-height: 1.02;
    margin-bottom: 18px;
}

.zx-hero-copy p {
    color: #6f6f7f;
    font-size: 24px;
    max-width: 390px;
    margin: 0 0 24px;
}

.zx-proof-grid {
    display: flex;
    gap: 22px;
    margin-top: 20px;
}

.zx-proof-grid h3 {
    font-size: 20px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zx-trust {
    color: #0db95a;
}

.zx-google-word {
    color: #2868ff;
}

.zx-stars {
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.zx-stars-green {
    color: #0db95a;
}

.zx-stars-gold {
    color: #f4b400;
}

.zx-proof-grid small {
    color: #8d8d9b;
    font-size: 16px;
}

.zx-hero-art {
    position: relative;
    min-height: 470px;
}

.zx-gradient-bg {
    position: absolute;
    top: 34px;
    left: 156px;
    width: 430px;
    height: 320px;
    border-radius: 20px;
    background: var(--zx-grad);
}

.zx-dotted-link {
    position: absolute;
    left: 212px;
    top: 126px;
    width: 236px;
    height: 148px;
    border: 2px dashed #a069ff;
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 0 20px;
    opacity: 0.85;
}

.zx-card {
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e7e7f1;
    box-shadow: 0 16px 34px rgba(33, 28, 77, 0.12);
}

.zx-performance-card {
    position: absolute;
    left: 0;
    top: 68px;
    width: 345px;
    padding: 22px 22px 18px;
    z-index: 8;
}

.zx-performance-card h3,
.zx-report-card h3 {
    font-size: 28px;
    margin-bottom: 14px;
    line-height: 1.2;
}

.zx-gauge {
    width: 220px;
    height: 128px;
    margin: 0 auto;
    position: relative;
}

.zx-gauge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.zx-gauge-track,
.zx-gauge-value {
    fill: none;
    stroke-linecap: round;
    stroke-width: 18;
}

.zx-gauge-track {
    stroke: #e8dbf6;
}

.zx-gauge-value {
    stroke: #7f42ff;
    stroke-dasharray: 280;
    stroke-dashoffset: 70;
}

.zx-gauge > span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
}

.zx-performance-card p {
    margin: -2px 0 0;
    text-align: center;
    font-size: 22px;
    color: #666677;
    font-weight: 600;
}

.zx-hero-photo-card {
    position: absolute;
    right: 6px;
    top: 0;
    width: 360px;
    height: 268px;
    overflow: hidden;
    z-index: 7;
    border-radius: 22px;
}

.zx-hero-photo-card img,
.zx-band-photo img,
.zx-soft-tile img,
.zx-blog-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zx-report-card {
    position: absolute;
    right: 6px;
    bottom: 0;
    width: 392px;
    padding: 24px;
    z-index: 9;
    border-radius: 20px;
}

.zx-report-row {
    display: flex;
    gap: 20px;
    align-items: center;
}

.zx-ring-chart {
    width: 132px;
    height: 132px;
    min-width: 132px;
    min-height: 132px;
    flex: 0 0 132px;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: 50%;
    background: conic-gradient(#7c40ff 0 80%, #f0a568 80% 89%, #4396ee 89% 100%);
    position: relative;
}

.zx-ring-chart::after {
    content: '';
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: #fff;
}

.zx-report-row ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.zx-report-row li {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: #6d6d7f;
    margin-bottom: 9px;
    gap: 26px;
}

.zx-report-row li span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zx-report-row li b {
    color: #5d5d6c;
}

.zx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.zx-dot-violet { background: #7c40ff; }
.zx-dot-peach { background: #f0a568; }
.zx-dot-blue { background: #4396ee; }

.zx-section {
    padding: 76px 0;
}

.zx-solutions-section {
    background: linear-gradient(180deg, #ecf8f7 0%, #f5fcfb 100%);
    border-top: 1px solid #dff1ee;
    border-bottom: 1px solid #dff1ee;
}

.zx-sales-section {
    background: linear-gradient(180deg, #f7f4ff 0%, #fcfaff 100%);
    border-top: 1px solid #ece3ff;
    border-bottom: 1px solid #ece3ff;
}

.zx-solutions-section .zx-headline {
    max-width: 920px;
}

.zx-solutions-section .zx-headline h2 {
    color: #102628;
}

.zx-solutions-section .zx-headline p {
    color: #4c6b6d;
}

.zx-solutions-section .zx-feature-grid {
    gap: 26px;
}

.zx-solutions-section .zx-feature-grid article {
    background: #ffffff;
    border: 1px solid #d9ece8;
    box-shadow: 0 12px 28px rgba(16, 87, 88, 0.1);
    border-radius: 18px;
    padding: 24px 22px;
}

.zx-solutions-section .zx-feature-grid article:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(16, 87, 88, 0.14);
}

.zx-solutions-section .zx-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    font-size: 22px;
}

.zx-solutions-section .zx-icon-peach {
    background: #ffe8d2;
    color: #d77428;
}

.zx-solutions-section .zx-icon-blue {
    background: #d7ecff;
    color: #2c78cb;
}

.zx-solutions-section .zx-icon-pink {
    background: #f8d8ef;
    color: #b93f8f;
}

.zx-solutions-section .zx-feature-grid h3 {
    font-size: 30px;
    margin-bottom: 10px;
    color: #132c2e;
}

.zx-solutions-section .zx-feature-grid p {
    color: #4f6d6f;
    font-size: 17px;
    line-height: 1.5;
}

.zx-headline {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 42px;
}

.zx-headline h2 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.zx-headline p {
    margin: 0;
    font-size: 18px;
    color: var(--zx-sub);
}

.zx-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.zx-feature-grid article {
    text-align: center;
    padding: 20px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ececf5;
    box-shadow: 0 8px 20px rgba(28, 28, 55, 0.06);
}

.zx-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 20px;
}

.zx-icon-peach { background: #ffe4ce; color: #f09748; }
.zx-icon-blue { background: #d7ebff; color: #3f8fe6; }
.zx-icon-pink { background: #ffd7f1; color: #e24fb7; }

.zx-feature-grid h3 {
    font-size: 23px;
    margin-bottom: 8px;
}

.zx-feature-grid p {
    margin: 0;
    font-size: 16px;
    color: #7b7b8a;
}

.zx-sales-grid {
    display: grid;
    grid-template-columns: 0.46fr 0.54fr;
    gap: 34px;
    align-items: center;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, rgba(243, 240, 252, 0.7) 100%);
    border: 1px solid #e9e8f4;
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 14px 30px rgba(34, 30, 67, 0.08);
}

.zx-sales-copy h2 {
    font-size: 62px;
    line-height: 1.02;
    margin-bottom: 14px;
}

.zx-sales-copy p {
    margin: 0 0 22px;
    color: #737388;
    font-size: 18px;
    max-width: 520px;
    line-height: 1.45;
}

.zx-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 420px;
}

.zx-kpis > div {
    background: #fff;
    border: 1px solid #ececf5;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 16px rgba(24, 24, 48, 0.06);
}

.zx-kpis strong {
    display: block;
    font-size: 46px;
    line-height: 1;
}

.zx-kpis span {
    color: #7d7d8b;
    font-size: 15px;
}

.zx-overview-card {
    border-radius: 22px;
    padding: 26px;
    color: #fff;
    background: var(--zx-grad);
    box-shadow: 0 24px 44px rgba(46, 23, 121, 0.3);
    position: relative;
    overflow: hidden;
}

.zx-overview-card::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    right: -120px;
    bottom: -120px;
    pointer-events: none;
}

.zx-overview-card h3 {
    font-size: 38px;
    margin-bottom: 14px;
}

.zx-client-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.zx-client-row img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    object-fit: cover;
}

.zx-overview-card p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.96);
}

.zx-overview-actions {
    display: flex;
    gap: 10px;
}

.zx-overview-actions button {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

.zx-overview-actions button:first-child {
    background: #fff;
    color: #4b2ebf;
}

.zx-overview-actions button:last-child {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.zx-mini-badges {
    margin-top: 18px;
    display: flex;
    gap: 9px;
}

.zx-mini-badges span {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.28);
}

.zx-band-section {
    background: linear-gradient(180deg, #f4f1fd 0%, #f8f6ff 100%);
    border-top: 1px solid #e9e5f4;
    border-bottom: 1px solid #e9e5f4;
    padding: 78px 0;
}

.zx-workflow-section {
    background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 100%);
    border-top: 1px solid #dfeefe;
    border-bottom: 1px solid #dfeefe;
}

.zx-band-grid {
    display: grid;
    grid-template-columns: 0.48fr 0.52fr;
    gap: 30px;
    align-items: stretch;
}

.zx-band-list {
    padding: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #ebe6f9;
}

.zx-list-card {
    border-radius: 16px;
    border: 1px solid #e7e8f4;
    background: #ffffff;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(35, 28, 80, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zx-list-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zx-list-card h3::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8245ff;
    box-shadow: 0 0 0 5px rgba(130, 69, 255, 0.16);
}

.zx-list-card p {
    margin: 0;
    font-size: 15px;
    color: #7a7a88;
    line-height: 1.45;
}

.zx-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(35, 28, 80, 0.12);
}

.zx-list-card-active {
    background: linear-gradient(135deg, #5d25dd 0%, #7f43ff 100%);
    color: #fff;
    box-shadow: 0 18px 34px rgba(69, 32, 172, 0.32);
}

.zx-list-card-active h3::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22);
}

.zx-list-card-active p {
    color: rgba(255, 255, 255, 0.9);
}

.zx-band-photo {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    min-height: 310px;
    box-shadow: 0 24px 44px rgba(22, 20, 43, 0.22);
    position: relative;
    border: 1px solid #e2e5f0;
}

.zx-band-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 12, 26, 0) 45%, rgba(11, 12, 26, 0.35) 100%);
    pointer-events: none;
}

.zx-photo-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    color: #3f2b91;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.zx-two-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 8px;
}

.zx-gradient-tile,
.zx-soft-tile {
    border-radius: 22px;
    min-height: 430px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.zx-gradient-tile {
    color: #fff;
    background: var(--zx-grad);
    box-shadow: 0 24px 46px rgba(57, 30, 146, 0.28);
}

.zx-gradient-tile::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.55);
    right: 90px;
    bottom: -140px;
    pointer-events: none;
}

.zx-gradient-tile h3,
.zx-soft-tile h3 {
    font-size: 44px;
    line-height: 1.08;
    margin-bottom: 10px;
}

.zx-gradient-tile p,
.zx-soft-tile p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.zx-gradient-tile a {
    margin-top: 20px;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    backdrop-filter: blur(3px);
    background: rgba(255, 255, 255, 0.08);
}

.zx-orbit {
    position: absolute;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.7);
}

.zx-soft-tile {
    background: #efe8fd;
    border: 1px solid #dfd3f8;
    box-shadow: 0 16px 32px rgba(24, 20, 49, 0.1);
}

.zx-soft-tile figure {
    margin: 22px 0 0;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(20, 20, 35, 0.16);
}

.zx-trial-strip {
    margin-top: 30px;
    background: linear-gradient(145deg, #f3efff 0%, #f9f2ff 100%);
    border: 1px solid #e2d8f8;
    border-radius: 22px;
    padding: 34px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.zx-trial-strip::after {
    content: '';
    position: absolute;
    right: 180px;
    top: 16px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 2px solid rgba(180, 151, 244, 0.38);
    pointer-events: none;
}

.zx-trial-strip h3 {
    font-size: 58px;
    line-height: 1.08;
    margin-bottom: 8px;
}

.zx-trial-strip p {
    margin: 0;
    font-size: 17px;
    color: #7d7d8c;
}

.zx-trial-strip .zx-primary-btn {
    min-width: 152px;
    justify-content: center;
    font-size: 17px;
    padding: 14px 20px;
    box-shadow: 0 10px 22px rgba(111, 54, 255, 0.32);
    position: relative;
    z-index: 1;
}

.zx-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    margin-top: 10px;
}

.zx-how-grid article {
    text-align: center;
    position: relative;
    background: #fff;
    border: 1px solid #e9e9f3;
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 10px 24px rgba(25, 25, 50, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zx-how-grid article:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(25, 25, 50, 0.13);
}

.zx-how-grid article:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, #8a56ff 0%, #c7acef 100%);
    z-index: 2;
}

.zx-how-grid span {
    color: #7f44ff;
    font-size: 14px;
    font-weight: 700;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #f2eaff 0%, #e9f0ff 100%);
    border: 1px solid #dccbff;
    box-shadow: 0 6px 14px rgba(127, 68, 255, 0.18);
}

.zx-how-grid h3 {
    font-size: 24px;
    margin: 14px 0 8px;
}

.zx-how-grid p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #7c7c8a;
}

.zx-process-section {
    background: linear-gradient(180deg, #fff7ee 0%, #fffdf8 100%);
    border-top: 1px solid #f4e7d8;
    border-bottom: 1px solid #f4e7d8;
}

.zx-testimonial-zone {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 20px 0 36px;
}

.zx-testimonial-section {
    background: linear-gradient(180deg, #edf8ff 0%, #f7fcff 100%);
    border-top: 1px solid #dfeff8;
    border-bottom: 1px solid #dfeff8;
}

.zx-testimonial-card {
    width: min(860px, 100%);
    border-radius: 22px;
    border: 1px solid #e8e8f3;
    padding: 44px 48px;
    text-align: center;
    background: linear-gradient(135deg, #b9e5ff 0%, #d6d7ff 50%, #ffd8ef 100%);
    box-shadow: 0 20px 44px rgba(31, 32, 68, 0.18);
    position: relative;
}

.zx-quote-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e8e9f2;
    color: #5d2be0;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 14px;
}

.zx-testimonial-card p {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.4;
    color: #323243;
}

.zx-testimonial-card strong {
    font-size: 19px;
    display: block;
}

.zx-testimonial-card small {
    display: block;
    font-size: 14px;
    color: #717286;
    margin-top: 4px;
}

.zx-float {
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(18, 18, 36, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.85);
}

.zx-f1 { left: 70px; top: 24px; }
.zx-f2 { right: 72px; top: 52px; }
.zx-f3 { right: 136px; bottom: 54px; }
.zx-f4 { left: 136px; bottom: 44px; }
.zx-f5 { left: 26px; top: 180px; width: 56px; height: 56px; }
.zx-f6 { right: 22px; bottom: 164px; width: 56px; height: 56px; }

.zx-testimonial-dots {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.zx-testimonial-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4c6ff;
}

.zx-testimonial-dots span.active {
    width: 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7d42ff 0%, #c36cff 100%);
}

.zx-blog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.zx-blog-section {
    background: linear-gradient(180deg, #f4f7ee 0%, #fbfdf6 100%);
    border-top: 1px solid #e5edd7;
    border-bottom: 1px solid #e5edd7;
}

.zx-blog-head h2 {
    font-size: 54px;
}

.zx-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.zx-blog-grid article img {
    width: 100%;
    height: 206px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.zx-blog-grid small {
    color: #8a8a98;
    font-size: 14px;
}

.zx-blog-grid h3 {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.33;
}

.zx-footer-area {
    margin-top: 20px;
    background: linear-gradient(180deg, #f5f6fb 0%, #f0f2fa 100%);
    border-top: 1px solid #e6e8f2;
    padding: 88px 0 34px;
}

.zx-bottom-cta {
    border-radius: 22px;
    background: var(--zx-grad);
    padding: 18px;
    box-shadow: 0 24px 44px rgba(76, 37, 190, 0.28);
}

.zx-bottom-cta > div {
    border-radius: 16px;
    background: #fff;
    padding: 38px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.zx-bottom-cta h2 {
    font-size: 52px;
    line-height: 1.08;
}

.zx-bottom-cta > div > div {
    display: flex;
    gap: 10px;
}

.zx-footer-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.1fr;
    gap: 34px;
    padding: 10px 0;
}

.zx-footer-grid h4 {
    font-size: 22px;
    margin-bottom: 16px;
    color: #1a1e2f;
    letter-spacing: -0.01em;
}

.zx-footer-grid p,
.zx-footer-grid a {
    color: #687089;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    line-height: 1.6;
    transition: color 0.2s ease, transform 0.2s ease;
}

.zx-footer-grid a:hover {
    color: #4f2ed0;
    transform: translateX(2px);
}

.zx-footer-grid > div:first-child .zx-brand {
    font-size: 24px;
    margin-bottom: 14px;
}

.zx-footer-grid > div:first-child p {
    max-width: 380px;
    color: #5f6680;
}

.zx-footer-grid > div:not(:first-child) {
    padding-left: 8px;
    border-left: 1px dashed #d9deea;
}

.zx-copyright {
    border-top: 1px solid #dde0ec;
    margin-top: 26px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    color: #8c8c9a;
    font-size: 14px;
}

.zx-copyright a {
    color: #747d95;
    font-weight: 600;
}

.zx-copyright a:hover {
    color: #4f2ed0;
}

@media (max-width: 991.98px) {
    .zx-shell {
        width: calc(100% - 18px);
        padding-left: 6px;
        padding-right: 6px;
    }

    .zx-nav-inner {
        height: 68px;
    }

    .zx-nav-links {
        display: none;
    }

    .zx-hero-grid,
    .zx-sales-grid,
    .zx-band-grid,
    .zx-two-card-grid,
    .zx-how-grid,
    .zx-blog-grid,
    .zx-footer-grid,
    .zx-feature-grid {
        grid-template-columns: 1fr;
    }

    .zx-hero-copy h1,
    .zx-headline h2,
    .zx-sales-copy h2,
    .zx-blog-head h2,
    .zx-trial-strip h3,
    .zx-bottom-cta h2 {
        font-size: 40px;
    }

    .zx-sales-grid {
        padding: 22px;
        border-radius: 18px;
    }

    .zx-kpis {
        max-width: 100%;
    }

    .zx-overview-card h3 {
        font-size: 30px;
    }

    .zx-overview-card p {
        font-size: 15px;
    }

    .zx-hero-art {
        min-height: auto;
        display: grid;
        gap: 14px;
    }

    .zx-gradient-bg {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 230px;
        order: 1;
    }

    .zx-hero-photo-card {
        position: relative;
        width: 100%;
        height: 280px;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        order: 3;
        margin-bottom: 0;
    }

    .zx-report-card {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        order: 4;
        margin-bottom: 0;
    }

    .zx-performance-card {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        order: 2;
        margin-bottom: 0;
    }

    .zx-dotted-link {
        display: none;
    }

    .zx-trial-strip,
    .zx-bottom-cta > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .zx-how-grid article::after,
    .zx-float {
        display: none;
    }

    .zx-testimonial-card p {
        font-size: 20px;
    }

    .zx-footer-grid > div:not(:first-child) {
        border-left: 0;
        padding-left: 0;
    }

    .zx-blog-grid article img,
    .zx-soft-tile figure {
        height: 260px;
    }

    .zx-bottom-cta > div > div {
        width: 100%;
    }

    .zx-bottom-cta > div > div a {
        flex: 1 1 0;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .zx-shell {
        width: calc(100% - 14px);
        padding-left: 4px;
        padding-right: 4px;
    }

    .zx-nav-inner {
        height: 60px;
    }

    .zx-link-btn {
        display: none;
    }

    .zx-hero-section {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .zx-hero-copy h1 {
        font-size: clamp(2.1rem, 10vw, 3rem);
        line-height: 1.03;
        margin-bottom: 12px;
    }

    .zx-hero-copy p {
        font-size: 16px;
        margin-bottom: 16px;
        max-width: 100%;
    }

    .zx-proof-grid {
        flex-direction: column;
        gap: 10px;
        margin-top: 14px;
    }

    .zx-proof-grid h3 {
        font-size: 18px;
    }

    .zx-proof-grid small {
        font-size: 13px;
    }

    .zx-headline h2,
    .zx-sales-copy h2,
    .zx-blog-head h2,
    .zx-trial-strip h3,
    .zx-bottom-cta h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.6rem);
        line-height: 1.12;
    }

    .zx-headline p,
    .zx-sales-copy p,
    .zx-feature-grid p,
    .zx-list-card p,
    .zx-how-grid p,
    .zx-trial-strip p {
        font-size: 14px;
        line-height: 1.5;
    }

    .zx-section,
    .zx-band-section,
    .zx-footer-area {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .zx-sales-grid,
    .zx-feature-grid article,
    .zx-list-card,
    .zx-gradient-tile,
    .zx-soft-tile,
    .zx-trial-strip,
    .zx-testimonial-card,
    .zx-bottom-cta > div {
        border-radius: 16px;
    }

    .zx-sales-grid {
        padding: 16px;
        gap: 16px;
    }

    .zx-kpis {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .zx-kpis strong {
        font-size: 36px;
    }

    .zx-overview-card {
        padding: 18px;
    }

    .zx-overview-card h3 {
        font-size: 26px;
    }

    .zx-overview-actions {
        width: 100%;
    }

    .zx-overview-actions button {
        flex: 1 1 0;
    }

    .zx-hero-photo-card {
        height: 210px;
    }

    .zx-report-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .zx-report-row li {
        width: 100%;
        font-size: 15px;
    }

    .zx-two-card-grid {
        gap: 14px;
    }

    .zx-gradient-tile,
    .zx-soft-tile {
        min-height: auto;
        padding: 16px;
    }

    .zx-gradient-tile h3,
    .zx-soft-tile h3 {
        font-size: 30px;
    }

    .zx-soft-tile figure,
    .zx-blog-grid article img {
        height: 190px;
    }

    .zx-trial-strip {
        padding: 16px;
        gap: 14px;
    }

    .zx-trial-strip::after {
        display: none;
    }

    .zx-how-grid {
        gap: 12px;
    }

    .zx-how-grid article {
        padding: 16px 14px;
    }

    .zx-how-grid h3 {
        font-size: 20px;
    }

    .zx-testimonial-zone {
        min-height: auto;
        padding-bottom: 28px;
    }

    .zx-testimonial-card {
        padding: 18px 16px;
    }

    .zx-testimonial-card p {
        font-size: 16px;
    }

    .zx-blog-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .zx-blog-grid {
        gap: 12px;
    }

    .zx-blog-grid article {
        padding: 8px;
    }

    .zx-bottom-cta {
        padding: 10px;
    }

    .zx-bottom-cta > div {
        padding: 16px;
    }

    .zx-footer-grid {
        margin-top: 20px;
        gap: 16px;
    }

    .zx-footer-grid h4 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .zx-footer-grid p,
    .zx-footer-grid a {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .zx-copyright {
        margin-top: 16px;
        padding-top: 12px;
        font-size: 12px;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}