/* _cne23b3lw */
:root {--gradient-card: linear-gradient(160deg, rgba(23, 195, 178, 0.12), rgba(255, 77, 79, 0.12));--radius-lg: 28px;--color-surface: rgba(16, 21, 36, 0.85);--color-bg: #05070f;--radius-md: 18px;--color-secondary: #17c3b2;--gradient-banner: linear-gradient(90deg, rgba(255, 77, 79, 0.8), rgba(23, 195, 178, 0.8));--shadow-card: 0 16px 32px rgba(10, 13, 23, 0.4);--radius-sm: 12px;--transition-base: all 240ms ease;--color-accent: #f9a826;--color-text: #f3f5ff;--shadow-soft: 0 24px 48px rgba(10, 13, 23, 0.35);--color-surface-strong: rgba(16, 21, 36, 0.95);--gradient-hero: linear-gradient(130deg, #09152e 0%, #120a24 50%, #270f32 100%);--color-border: rgba(255, 255, 255, 0.08);--container-width: min(1180px, 90vw);--color-primary: #ff4d4f;--color-muted: #9aa2c1}

*,
*::before,
*::after {box-sizing: border-box}

html {background: var(--color-bg);scroll-behavior: smooth}

body {background: radial-gradient(circle at top, rgba(15, 25, 56, 0.9), rgba(5, 7, 15, 0.95));margin: 0;font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color: var(--color-text);min-height: 100vh}

img {max-width: 100%;display: block}

a {color: inherit;text-decoration: none}

p {color: var(--color-muted);line-height: 1.7}

h1,
h2,
h3,
h4 {margin: 0;letter-spacing: 0.01em;font-weight: 600}

.container {width: var(--container-width);margin: 0 auto}

.site-header {position: sticky;z-index: 50;top: 0;backdrop-filter: blur(16px);border-bottom: 1px solid var(--color-border);background: rgba(5, 7, 15, 0.82)}

.site-header .container {justify-content: space-between;align-items: center;padding: 18px 0;display: flex}

.logo {font-weight: 700;display: inline-flex;gap: 12px;font-size: 1.05rem;align-items: center;letter-spacing: 0.02em}

.logo img {height: 42px;width: 42px}

.primary-nav {gap: 24px;display: flex}

.primary-nav a {transition: var(--transition-base);color: var(--color-muted);font-size: 0.95rem;padding: 8px 0}

.primary-nav a:hover,
.primary-nav a:focus {color: var(--color-text)}

.nav-toggle {border: 1px solid var(--color-border);transition: var(--transition-base);width: 42px;justify-content: center;gap: 5px;height: 42px;flex-direction: column;background: rgba(255, 255, 255, 0.06);display: none;cursor: pointer;border-radius: var(--radius-sm)}

.nav-toggle span {width: 18px;display: block;height: 2px;background: var(--color-text);transition: var(--transition-base);margin: 0 auto}

.nav-toggle.active span:nth-child(1) {transform: translateY(7px) rotate(45deg)}

.nav-toggle.active span:nth-child(2) {opacity: 0}

.nav-toggle.active span:nth-child(3) {transform: translateY(-7px) rotate(-45deg)}

.hero {background: var(--gradient-hero);overflow: hidden;padding: 120px 0 90px}

.hero-content {grid-template-columns: repeat(2, minmax(0, 1fr));display: grid;align-items: center;gap: 48px}

.hero-content > img {height: auto;justify-self: end;width: clamp(160px, 26vw, 360px)}

.phone-frame {box-shadow: 0 18px 36px rgba(10, 13, 23, 0.45);background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));display: inline-block;border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 38px;padding: 14px}

.phone-frame img {height: auto;border-radius: 28px;display: block;width: 100%}

.hero-content .phone-frame {width: clamp(160px, 26vw, 360px);justify-self: end}

.hero-text h1 {margin-bottom: 24px;line-height: 1.15;font-size: clamp(2.6rem, 2vw + 2rem, 3.6rem)}

.hero-app-logo {margin-bottom: 14px}

.hero-app-logo img {width: auto;height: 48px;display: block}

.hero-text p {font-size: 1.05rem;margin-bottom: 32px;max-width: 520px}

.cta-group {gap: 16px;flex-wrap: wrap;margin-bottom: 24px;display: flex}

.cta-group .btn {width: 180px}

.btn {border-radius: var(--radius-sm);font-weight: 600;display: inline-flex;align-items: center;transition: var(--transition-base);cursor: pointer;justify-content: center;padding: 14px 30px;border: 1px solid transparent;font-size: 0.98rem}

.btn-primary {background: var(--color-primary);box-shadow: var(--shadow-soft);color: #fff}

.btn-primary:hover,
.btn-primary:focus {background: #ff6163}

.btn-secondary {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);color: var(--color-text)}

.btn-secondary:hover,
.btn-secondary:focus {background: rgba(255, 255, 255, 0.2)}

.btn-outline {background: transparent;color: var(--color-text);border-color: rgba(255, 255, 255, 0.35)}

.btn-outline:hover,
.btn-outline:focus {background: rgba(255, 255, 255, 0.08)}

.trust-badges {color: var(--color-muted);flex-wrap: wrap;font-size: 0.88rem;gap: 14px;display: flex}

.trust-badges span {border: 1px solid var(--color-border);border-radius: 999px;gap: 8px;display: inline-flex;background: rgba(255, 255, 255, 0.08);align-items: center;padding: 8px 14px}

.hero-visual {position: relative}

.device-mockup {border: none;backdrop-filter: blur(12px);position: relative;background: var(--gradient-card);box-shadow: var(--shadow-card);padding: 22px;border-radius: 32px}

.device-mockup::after {inset: 18px;border-radius: 26px;pointer-events: none;border: none;content: "";position: absolute}

.device-mockup img {border-radius: 18px}

.features {padding: 110px 0 80px}

.news {padding: 110px 0 80px}

.article {padding: 110px 0 90px;border-bottom: 1px solid rgba(255, 255, 255, 0.06);border-top: 1px solid rgba(255, 255, 255, 0.06);background: rgba(10, 14, 24, 0.6)}

.article-wrap {max-width: 840px}

.article-header h2 {font-size: clamp(1.8rem, 1.4vw + 1.4rem, 2.2rem);text-align: center;margin-bottom: 10px}

.article-meta {font-size: 0.92rem;margin-bottom: 22px;display: flex;gap: 10px;color: var(--color-muted);justify-content: center}

.article-content {gap: 14px;display: grid}

.article-content h3 {margin-bottom: 6px;font-size: 1.25rem;margin-top: 10px}

.article-content p {color: var(--color-muted)}

.article-content ul {margin: 0;color: var(--color-muted);padding-left: 18px}

.article-content li {margin: 6px 0}

.article-tags {display: flex;gap: 10px;margin-top: 16px;flex-wrap: wrap}

.article-tags a {align-items: center;color: var(--color-text);transition: var(--transition-base);padding: 8px 12px;border-radius: 999px;background: rgba(255, 255, 255, 0.06);display: inline-flex;border: 1px solid rgba(255, 255, 255, 0.14);font-size: 0.86rem}

.article-tags a:hover,
.article-tags a:focus {border-color: rgba(255, 255, 255, 0.28);background: rgba(255, 255, 255, 0.12)}

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

.news-card {border-radius: var(--radius-lg);border: 1px solid rgba(255, 255, 255, 0.06);transition: transform 220ms ease, border-color 220ms ease;display: flex;flex-direction: column;overflow: hidden;background: rgba(10, 14, 24, 0.9)}

.news-card:hover {transform: translateY(-6px);border-color: rgba(255, 255, 255, 0.16)}

.news-media img {height: auto;display: block;width: 100%}

.news-body {display: flex;gap: 10px;padding: 18px 18px 20px;flex-direction: column}

.news-body h3 {font-size: 1.1rem;line-height: 1.35}

.news-body p {margin: 0;color: var(--color-muted)}

.news-link {margin-top: 6px;font-weight: 600;opacity: 0.85;color: var(--color-text);transition: color 180ms ease, opacity 180ms ease}

.news-link:hover,
.news-link:focus {opacity: 1;color: var(--color-primary)}

.section-heading {margin-bottom: 54px;text-align: center}

.section-heading h2 {font-size: 2.4rem;margin-bottom: 12px}

.section-heading p {max-width: 540px;margin: 0 auto}

.section-heading .download-banner {width: clamp(180px, 56vw, 560px);display: block;height: auto;margin: 14px auto 0}

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

.feature-card {background: rgba(10, 14, 24, 0.9);border-radius: var(--radius-lg);flex-direction: column;gap: 18px;padding: 32px 28px;border: 1px solid rgba(255, 255, 255, 0.06);display: flex;transition: transform 220ms ease, border-color 220ms ease}

.feature-card:hover {border-color: rgba(255, 255, 255, 0.16);transform: translateY(-6px)}

.icon {border-radius: 14px;place-items: center;height: 48px;display: grid;width: 48px;background: rgba(255, 255, 255, 0.08)}

.icon::before {font-size: 1.4rem}

.icon-shield::before {content: "🛡"}

.icon-trophy::before {content: "🏆"}

.icon-bolt::before {content: "⚡"}

.icon-headset::before {content: "🎧"}

.preview {padding: 110px 0 80px}

.preview-content {grid-template-columns: repeat(2, minmax(0, 1fr));display: grid;align-items: center;gap: 48px}

.preview-media {justify-self: end}

.preview-text ul {gap: 14px;padding: 0;list-style: none;display: grid;margin: 24px 0 0}

.preview-text li {color: var(--color-muted);position: relative;padding-left: 24px}

.preview-text li::before {position: absolute;width: 10px;box-shadow: 0 0 12px rgba(23, 195, 178, 0.6);top: 9px;content: "";background: var(--color-secondary);left: 0;border-radius: 50%;height: 10px}

.preview-media .video-frame {border: none;overflow: hidden;border-radius: 26px;position: relative;box-shadow: none}

.preview-media .video-frame {margin: 0}

.preview-media .video-frame img {width: clamp(140px, 28vw, 360px);height: auto}
.video-play {inset: auto 50% 18px auto;width: 64px;display: grid;transition: var(--transition-base);height: 64px;background: rgba(0, 0, 0, 0.55);place-items: center;position: absolute;cursor: pointer;border-radius: 50%;font-size: 1.3rem;color: #fff;border: 1px solid rgba(255, 255, 255, 0.25);transform: translateX(-50%)}

.video-play:hover {background: rgba(0, 0, 0, 0.7)}

.download {padding: 110px 0 90px}

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

.download-card {padding: 30px;gap: 18px;box-shadow: var(--shadow-soft);display: flex;flex-direction: column;background: var(--color-surface);border: 1px solid var(--color-border);border-radius: var(--radius-lg)}

.download-card .platform {display: flex;align-items: center;gap: 14px;font-weight: 600}

.download-card .platform img {width: 42px;height: 42px}

.download-card .hint {color: var(--color-muted);font-size: 0.85rem}

.cta-banner {margin: 0;background: var(--gradient-banner);padding: 70px 0;text-align: center}

.cta-banner .container {flex-direction: column;display: flex;gap: 20px;align-items: center;color: #0a0f1c}

.cta-banner h2 {font-size: 2.1rem}

.cta-banner p {color: rgba(10, 15, 28, 0.72)}

.cta-banner .btn-secondary {border-color: rgba(10, 15, 28, 0.16);color: #0a0f1c;background: rgba(10, 15, 28, 0.12)}

.faq {padding: 110px 0 90px}

.faq-grid {display: grid;gap: 18px}

.faq details {border-radius: var(--radius-md);transition: border-color 180ms ease;border: 1px solid rgba(255, 255, 255, 0.06);padding: 18px 24px;background: rgba(10, 14, 24, 0.92)}

.faq details[open] {border-color: rgba(255, 255, 255, 0.18)}

.faq summary {list-style: none;font-weight: 500;color: var(--color-text);cursor: pointer}

.faq summary::-webkit-details-marker {display: none}

.faq summary::after {content: "+";float: right;transition: transform 200ms ease}

.faq details[open] summary::after {transform: rotate(45deg)}

.faq p {margin-top: 12px}

.site-footer {background: #05070f;padding: 80px 0 30px;border-top: 1px solid rgba(255, 255, 255, 0.06)}

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

.footer-links,
.footer-contact {display: flex;gap: 12px;flex-direction: column}

.footer-links a {color: var(--color-muted);transition: color 180ms ease}

.footer-links a:hover,
.footer-links a:focus {color: var(--color-text)}

.footer-bottom {align-items: center;justify-content: space-between;margin-top: 48px;font-size: 0.88rem;border-top: 1px solid rgba(255, 255, 255, 0.08);padding-top: 26px;display: flex;color: var(--color-muted)}

.footer-bottom .legal-links {display: flex;gap: 18px}

.floating-download {display: none;right: 24px;position: fixed;bottom: 24px;z-index: 40}

.floating-download.visible {display: block}

.floating-download .btn {padding: 16px 28px}

@media (max-width: 1100px) {.features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))}

  .news-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}

  .preview-content,
  .hero-content {grid-template-columns: 1fr}

  .preview-media {justify-self: center}

  .preview-text {text-align: center}

  .hero-visual {order: -1}

  .hero-content > img {width: clamp(160px, 48vw, 360px);justify-self: center}

  .hero-content .phone-frame {width: clamp(160px, 48vw, 360px);justify-self: center}

  /* Center hero title and app logo on mobile, keep desktop unchanged */
  .hero-text {text-align: center}

  .hero-app-logo img {margin: 0 auto}
}

@media (max-width: 840px) {pointer-events: none;background: rgba(5, 7, 15, 0.95);border-radius: var(--radius-md);inset: 68px 16px auto;flex-direction: column;.primary-nav {
    position: absolute;border: 1px solid var(--color-border);padding: 18px;transform: translateY(-12px);box-shadow: var(--shadow-card);opacity: 0;transition: var(--transition-base)}

  .primary-nav.open {opacity: 1;pointer-events: all;transform: translateY(0)}

  .nav-toggle {display: inline-flex}

  .site-header .container {padding: 18px 8px}

  .hero {padding-top: 100px}

  .footer-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}

  .footer-bottom {text-align: center;flex-direction: column;gap: 12px}
}

@media (max-width: 640px) {.container {
    width: min(92vw, 100%)}

  .news-grid {grid-template-columns: 1fr}

  .cta-group {width: 100%}

  .cta-group .btn {width: auto;flex: 1}

  .features-grid,
  .download-grid {grid-template-columns: 1fr}

  .hero-text h1 {font-size: clamp(2.1rem, 6vw, 2.8rem)}

  .site-header {position: fixed;width: 100%}

  .preview {padding-top: 90px}

  .floating-download {display: block}
}

@media (max-width: 420px) {.device-mockup {
    padding: 16px}

  .cta-banner h2 {font-size: 1.8rem}

  .cta-banner .btn {width: 100%}
}


._chc0nnbdh{}

._c3zhghlsv{}

._cilc7s8np{}