:root {--zb1-text: rgba(31,36,48,1);--zb1-secondary: rgb(168,85,247);--zb1-accent: #10B981;--zb1-dark: #2D1B69;--zb1-primary: rgb(139,92,246);--zb1-light: rgba(248,250,252,1)}

* { box-sizing: border-box; }

.zb1-body {font-family: 'Segoe UI', Inter, Arial, sans-serif;background: var(--zb1-light);color: var(--zb1-text);margin: 0;padding: 0;isolation:auto;pointer-events:auto;outline-offset:0}

.zb1-skip-link {left: -999px;background: rgb(255,255,255);top: 0;color: var(--zb1-primary);z-index: 200;padding: 10px 16px;position: absolute}
.zb1-skip-link:focus {left: 10px;top: 10px}

.zb1-container {margin: 0 auto;max-width: 1140px;padding: 0 20px}

img {max-width: 100%;height: auto}


.zb1-navbar {top: 0;backdrop-filter: blur(10px);position: fixed;z-index: 100;right: 0;background: rgba(45, 27, 105, 0.95);left: 0;padding: 14px 0}
.zb1-navbar.zb1-scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
.zb1-navbar-inner {display: flex;justify-content: space-between;gap: 16px;align-items: center}
.zb1-brand {gap: 10px;align-items: center;text-decoration: none;color: #fff;font-weight: 700;display: flex;font-size: 1.5rem;flex-shrink: 0}
.zb1-brand-logo {object-fit: contain;width: auto;height: 40px;max-width: 160px;border-radius: 8px}
.zb1-navbar-right {flex-shrink: 0;gap: 14px;align-items: center;display: flex}
.zb1-nav-toggle {flex-direction: column;background: transparent;display: none;cursor: pointer;gap: 5px;padding: 6px;border: none}
.zb1-nav-toggle span {background: #fff;height: 2px;display: block;width: 24px}
.zb1-nav-menu {align-items: center;flex: 1;display: flex;gap: 20px;justify-content: flex-end}
.zb1-nav-list {list-style: none;flex-wrap: wrap;gap: 4px 16px;display: flex;padding: 0;margin: 0}
.zb1-nav-link {transition: color 0.2s, border-color 0.2s;border-bottom: 2px solid transparent;font-size: 0.94rem;padding: 6px 2px;font-weight: 500;color: rgb(255,255,255);text-decoration: none}
.zb1-nav-link:hover, .zb1-nav-link.zb1-active {color: var(--zb1-accent);border-color: var(--zb1-accent)}
.zb1-nav-actions {display: flex;gap: 10px}

.zb1-nav-cta-mobile { display: none; }


.zb1-btn {text-decoration: none;display: inline-block;border-radius: 25px;cursor: pointer;font-weight: 600;padding: 12px 28px;border: 2px solid transparent;transition: transform 0.2s, background 0.2s, color 0.2s}
.zb1-btn-sm {font-size: 0.88rem;padding: 8px 18px}
.zb1-btn-primary {color: rgba(255,255,255,1);background: var(--zb1-accent)}
.zb1-btn-primary:hover {transform: translateY(-2px);background: rgba(5,150,105,1)}
.zb1-btn-outline {background: transparent;color: #fff;border-color: rgba(255,255,255,0.6)}
.zb1-btn-outline:hover { border-color: #fff; }
.zb1-btn-light {color: var(--zb1-primary);background: rgb(255,255,255)}
.zb1-btn-light:hover { transform: translateY(-2px); }


.zb1-hero {color: rgba(255,255,255,1);overflow: hidden;padding: 150px 0 80px;position: relative;background: linear-gradient(135deg, var(--zb1-primary), var(--zb1-secondary))}
.zb1-hero-inner {z-index: 2;position: relative}
.zb1-hero-narrow { max-width: 760px; }
.zb1-hero-wide { max-width: 900px; }
.zb1-hero-logo {padding: 8px;width: 84px;border-radius: 16px;margin-bottom: 20px;object-fit: contain;background: rgba(255,255,255,0.1);height: 84px}
.zb1-hero h1 {font-size: 2.4rem;font-weight: 700;margin: 0 0 20px}
.zb1-hero .zb1-lead {margin: 0 0 24px;opacity: 0.96;line-height: 1.7;font-size: 1.15rem}
.zb1-hero-center {margin-left: auto;text-align: center;margin-right: auto}

.zb1-floating {overflow: hidden;position: absolute;inset: 0;pointer-events: none;z-index: 1}
.zb1-floating-box {padding: 12px 20px;font-size: 0.8rem;background: rgba(255,255,255,0.1);backdrop-filter: blur(10px);animation: zb1-float 6s ease-in-out infinite;border-radius: 15px;font-weight: 600;border: 1px solid rgba(255,255,255,0.2);position: absolute}
@keyframes zb1-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(-10px) translateX(-5px); }
  75% { transform: translateY(-15px) translateX(5px); }
}

.zb1-badges {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px}
.zb1-badge {font-size: 0.82rem;font-weight: 600;border-radius: 8px;background: rgba(255,255,255,0.92);padding: 8px 14px;color: rgb(51,51,51)}


.zb1-breadcrumb {padding: 0;margin: 0 0 22px;display: flex;gap: 6px;flex-wrap: wrap;list-style: none;font-size: 0.9rem}
.zb1-breadcrumb li + li::before {content: "›";opacity: 0.7;margin-right: 6px}
.zb1-breadcrumb a {text-decoration: none;opacity: 0.85;color: inherit}
.zb1-breadcrumb a:hover { text-decoration: underline; }
.zb1-breadcrumb .zb1-crumb-active { font-weight: 600; }
.zb1-breadcrumb-light {padding: 12px 16px;border-radius: 10px;background: rgba(255,255,255,0.12);display: inline-flex}


.zb1-content {padding: 70px 0;background: #fff}
.zb1-content-alt { background: var(--zb1-light); }
.zb1-narrow {margin: 0 auto;max-width: 820px}
.zb1-content h2 {margin: 0 0 20px;font-weight: 700;font-size: 1.9rem}
.zb1-content h3 {color: var(--zb1-primary);margin: 34px 0 14px;font-size: 1.35rem;font-weight: 700}
.zb1-content p {line-height: 1.75;margin: 0 0 18px;color: #333}
.zb1-content .zb1-center { text-align: center; }

.zb1-img-block {margin: 28px auto;box-shadow: 0 10px 30px rgba(0,0,0,0.12);border-radius: 16px;display: block}
.zb1-img-left {box-shadow: 0 10px 30px rgba(0,0,0,0.12);float: left;margin: 6px 24px 20px 0;border-radius: 16px}
.zb1-img-right {margin: 6px 0 20px 24px;float: right;box-shadow: 0 10px 30px rgba(0,0,0,0.12);border-radius: 16px}
.zb1-clear { clear: both; }

.zb1-icon-row {gap: 14px;flex-wrap: wrap;margin: 20px 0;display: flex;justify-content: center}
.zb1-icon-badge {border-radius: 50%;display: flex;align-items: center;width: 70px;background: #fff;box-shadow: 0 5px 15px rgba(0,0,0,0.12);justify-content: center;font-size: 1.5rem;height: 70px}

.zb1-partners {justify-content: center;display: flex;margin-top: 20px;align-items: center;flex-wrap: wrap;gap: 30px}
.zb1-partner-logo {object-fit: contain;height: 55px;transition: opacity 0.2s;width: auto;border-radius: 8px;opacity: 0.75}
.zb1-partner-logo:hover { opacity: 1; }


.zb1-stats {padding: 70px 0;background: linear-gradient(135deg, #667eea, #764ba2);color: rgba(255,255,255,1)}
.zb1-stats h2 {font-size: 1.8rem;text-align: center;margin: 0 0 16px}
.zb1-stats .zb1-lead {max-width: 760px;text-align: center;line-height: 1.7;margin: 0 auto 40px;opacity: 0.95}
.zb1-stats-grid {grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));display: grid;gap: 20px}
.zb1-stat {backdrop-filter: blur(10px);text-align: center;background: rgba(255,255,255,0.12);border-radius: 15px;padding: 26px 12px}
.zb1-stat-number {color: var(--zb1-accent);font-weight: 700;font-size: 2.4rem}
.zb1-stat-label {margin-top: 4px;font-weight: 600}


.zb1-review-card {border-left: 4px solid var(--zb1-accent);border-radius: 15px;box-shadow: 0 5px 15px rgba(0,0,0,0.1);margin-bottom: 28px;background: rgb(255,255,255);padding: 26px}
.zb1-review-card h3, .zb1-review-card h4 { margin-top: 0; }
.zb1-rating {margin-bottom: 10px;color: #ffd700;font-size: 1.1rem}
.zb1-rating span {color: #666;margin-left: 8px;font-size: 0.9rem}

.zb1-tool-card {border-radius: 12px;border-left: 4px solid var(--zb1-primary);background: var(--zb1-light);margin-bottom: 18px;padding: 20px 24px}
.zb1-tool-card h4 { margin: 0 0 8px; }

.zb1-game-feature {padding: 46px 30px;text-align: center;border-radius: 20px;background: linear-gradient(135deg, #667eea, #764ba2);color: #fff;margin: 36px 0}
.zb1-game-feature h3 { color: rgba(255,255,255,1); }
.zb1-feature-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));margin-top: 20px;text-align: center;gap: 20px}
.zb1-feature-grid h5 { margin: 10px 0 6px; }

.zb1-faq-category {background: var(--zb1-light);border-left: 5px solid var(--zb1-accent);margin-bottom: 26px;padding: 26px;border-radius: 15px}
.zb1-faq-category h2 {font-size: 1.3rem;color: var(--zb1-primary)}

.zb1-callout {border-radius: 14px;margin-top: 30px;background: rgba(139, 92, 246, 0.08);padding: 24px}
.zb1-callout h3 { margin-top: 0; }
.zb1-stat-box {margin-top: 40px;border-radius: 16px;padding: 26px;background: var(--zb1-light)}
.zb1-stat-box-grid {text-align: center;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));display: grid;gap: 16px}
.zb1-stat-box-num {font-weight: 700;font-size: 1.9rem;color: var(--zb1-primary)}

.zb1-info-box {margin-bottom: 34px;background: var(--zb1-light);border-radius: 12px;padding: 20px 24px}


.zb1-faq-list { margin: 0; }
.zb1-faq-item {overflow: hidden;background: rgb(255,255,255);box-shadow: 0 3px 10px rgba(0,0,0,0.08);padding: 4px 0;margin-bottom: 14px;border-radius: 12px}
.zb1-faq-item summary {list-style: none;font-weight: 600;position: relative;cursor: pointer;padding: 16px 22px}
.zb1-faq-item summary::-webkit-details-marker { display: none; }
.zb1-faq-item summary::after {position: absolute;top: 14px;font-size: 1.3rem;color: var(--zb1-primary);content: '+';right: 22px}
.zb1-faq-item[open] summary::after { content: '−'; }
.zb1-faq-body {padding: 0 22px 18px;color: #333;line-height: 1.7}


.zb1-footer {padding: 56px 0 26px;color: rgba(255,255,255,1);background: var(--zb1-dark)}
.zb1-footer-grid {display: grid;grid-template-columns: 2fr repeat(5, 1fr);gap: 24px}
.zb1-footer-title {font-weight: 700;margin: 0 0 12px}
.zb1-footer-col h4 {margin: 0 0 14px;font-weight: 700;font-size: 0.98rem}
.zb1-footer-list {margin: 0;list-style: none;padding: 0}
.zb1-footer-list li { margin-bottom: 8px; }
.zb1-footer-list a, .zb1-footer-brand p {color: #cbd5e1;line-height: 1.6;text-decoration: none;font-size: 0.92rem}
.zb1-footer-list a:hover { color: var(--zb1-accent); }
.zb1-footer-divider {margin: 34px 0 20px;border: none;border-top: 1px solid rgba(255,255,255,0.15)}
.zb1-footer-bottom {font-size: 0.85rem;gap: 10px;color: #cbd5e1;flex-wrap: wrap;justify-content: space-between;display: flex}
.zb1-footer-bottom p { margin: 0; }


.zb1-steps {margin: 24px 0;list-style: none;padding: 0;counter-reset: zb1-step}
.zb1-steps li {padding: 6px 0 20px 46px;position: relative;counter-increment: zb1-step}
.zb1-steps li::before {align-items: center;justify-content: center;border-radius: 50%;display: flex;left: 0;background: var(--zb1-primary);height: 32px;content: counter(zb1-step);width: 32px;position: absolute;color: #fff;top: 4px;font-weight: 700}
.zb1-two-col {align-items: center;gap: 30px;display: grid;grid-template-columns: 1fr 1fr}
.zb1-card-grid {margin: 24px 0;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));display: grid}
.zb1-mini-card {background: #fff;padding: 22px;border-radius: 14px;box-shadow: 0 5px 15px rgba(0,0,0,0.08)}
.zb1-mini-card h4 {color: var(--zb1-primary);margin-top: 0}


@media (max-width: 992px) {
  .zb1-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .zb1-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .zb1-nav-toggle { display: flex; }
  .zb1-nav-menu {flex-direction: column;left: 0;position: absolute;align-items: stretch;right: 0;padding: 18px 20px 24px;top: 100%;display: none;background: rgba(45, 27, 105, 0.98)}
  .zb1-nav-menu.zb1-open { display: flex; }
  .zb1-nav-list {gap: 12px;flex-direction: column}
  .zb1-brand span { display: none; }
  .zb1-navbar-right { gap: 8px; }
  .zb1-nav-actions .zb1-btn-outline { display: none; }
  .zb1-nav-actions .zb1-btn-primary {padding: 7px 10px;font-size: 0.78rem}
  .zb1-nav-cta-mobile { display: list-item; }
  .zb1-hero { padding: 130px 0 60px; }
  .zb1-hero h1 { font-size: 1.9rem; }
  .zb1-floating { display: none; }
  .zb1-img-left, .zb1-img-right {float: none;margin: 20px auto;display: block}
}

@media (max-width: 640px) {
  .zb1-footer-grid { grid-template-columns: repeat(2, 1fr); }
}


.sf-related-articles{background:rgba(255,255,255,.06);max-width:1120px;padding:clamp(18px,3vw,28px);border:1px solid rgba(148,163,184,.24);border-radius:24px;box-shadow:0 16px 45px rgba(15,23,42,.08);margin:clamp(28px,5vw,56px) auto}
.sf-related-articles h2{margin:0 0 8px;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.2}
.sf-related-articles>p{margin:0 0 18px;line-height:1.65;opacity:.78}
.sf-related-articles__list{margin:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0}
.sf-related-articles__item{padding:0;list-style:none;margin:0}
.sf-related-articles__link{border-radius:18px;padding:16px;display:flex;flex-direction:column;text-decoration:none;color:inherit;min-height:100%;transition:transform .18s ease,border-color .18s ease,background .18s ease;border:1px solid rgba(148,163,184,.18);gap:7px;background:rgba(255,255,255,.08)}
.sf-related-articles__link:hover{border-color:rgba(59,130,246,.45);background:rgba(255,255,255,.13);transform:translateY(-2px)}
.sf-related-articles__type{font-weight:700;opacity:.88;background:rgba(59,130,246,.14);font-size:.72rem;color:inherit;letter-spacing:.04em;border-radius:999px;padding:3px 9px;text-transform:uppercase;width:max-content}
.sf-related-articles strong{font-size:1rem;line-height:1.35}
.sf-related-articles small{opacity:.72;line-height:1.45;font-size:.88rem}
@media(max-width:640px){.sf-related-articles{border-radius:18px;padding:16px;margin:28px 12px}.sf-related-articles__list{grid-template-columns:1fr}.sf-related-articles__link{padding:14px}}