/* _cqus4l7h5 */
:root {--color-surface-alt: #151927;--shadow-strong: 0 32px 70px rgba(0, 0, 0, 0.45);--color-surface: #10131b;--shadow-soft: 0 18px 30px rgba(0, 0, 0, 0.22);--container-width: min(1120px, 92vw);--color-primary: #e0003c;--color-text: rgba(255, 255, 255, 0.88);--color-border: rgba(255, 255, 255, 0.12);--color-primary-dark: #b1002f;--color-secondary: #06b68b;--transition: 0.24s ease;--color-muted: rgba(255, 255, 255, 0.65);--color-background: #07080d}

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

html {font-size: 16px;scroll-behavior: smooth}

body {font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;line-height: 1.6;color: var(--color-text);background-attachment: fixed;background: radial-gradient(circle at 12% 12%, rgba(26, 30, 45, 0.85), var(--color-background));margin: 0}

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

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

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

.topbar {top: 0;z-index: 1000;position: sticky;backdrop-filter: blur(18px);background: rgba(7, 8, 13, 0.85);border-bottom: 1px solid rgba(255, 255, 255, 0.06)}

.topbar .container {justify-content: space-between;align-items: center;padding: 1rem 0;gap: 1.5rem;display: flex}

.logo {display: inline-flex;margin-left: -0.5rem;align-items: center;gap: 0.4rem;letter-spacing: 0.12em;font-weight: 700;font-family: "Roboto Condensed", sans-serif;font-size: 1.25rem;text-transform: uppercase}

.logo__star {justify-content: center;transform: rotate(12deg);color: #fff;font-size: 1.1rem;border-radius: 50%;display: inline-flex;height: 1.75rem;background: var(--color-primary);align-items: center;width: 1.75rem}

.logo__img {width: auto;object-fit: contain;height: 4rem}

.nav {align-items: center;display: flex;gap: 1.5rem}

.nav a {transition: color var(--transition);color: var(--color-muted);font-weight: 500}

.nav a:hover {color: #fff}

.btn {padding: 0.9rem 1.8rem;justify-content: center;display: inline-flex;font-size: 0.95rem;transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);border-radius: 999px;flex-direction: column;line-height: 1.1;border: 1px solid transparent;align-items: center;gap: 0.2rem;letter-spacing: 0.04em;text-transform: uppercase;font-weight: 600}

.btn__label {font-size: 1rem}

.btn__sub {letter-spacing: 0;opacity: 0.75;font-weight: 500;font-size: 0.7rem}

.btn--primary {box-shadow: var(--shadow-soft);color: #fff;background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark))}

.btn--primary:hover {box-shadow: var(--shadow-strong);transform: translateY(-2px)}

.btn--secondary {color: #fff;background: rgba(255, 255, 255, 0.14);border-color: rgba(255, 255, 255, 0.2)}

.btn--secondary:hover {background: rgba(255, 255, 255, 0.2);transform: translateY(-2px);border-color: rgba(255, 255, 255, 0.3)}

.btn--ghost {font-size: 0.85rem;padding: 0.75rem 1.6rem;border-color: rgba(255, 255, 255, 0.2);color: #fff;background: transparent}

.btn--ghost:hover {border-color: rgba(255, 255, 255, 0.4);transform: translateY(-2px)}

.hero {background: radial-gradient(circle at 25% 20%, rgba(178, 0, 44, 0.25), transparent 52%), radial-gradient(circle at 80% 15%, rgba(6, 182, 139, 0.25), transparent 55%);padding: 7rem 0 5rem}

.hero__grid {gap: 3rem;align-items: center;grid-template-columns: repeat(2, minmax(0, 1fr));display: grid}

.hero h1 {letter-spacing: -0.01em;margin: 0.4rem 0 1rem;font-size: clamp(2.6rem, 3.5vw, 3.2rem)}


.hero__lead {color: var(--color-muted);margin: 0 0 2rem}

.eyebrow {display: flex;align-items: center;letter-spacing: 0.32em;font-weight: 600;gap: 0.5rem;text-transform: uppercase;margin-bottom: 0.5rem;font-size: 0.75rem;color: var(--color-secondary)}

.hero__title-logo {width: auto;display: block;flex-shrink: 0;object-fit: contain;height: 1rem}

.download-buttons {margin-bottom: 1.5rem;flex-wrap: wrap;display: flex;gap: 1rem}

.download-buttons .btn {flex: 1;min-width: 200px}

.hero__note {font-size: 0.95rem;max-width: 540px;color: var(--color-muted)}

.hero__media {justify-content: center;align-items: center;display: flex}

.phone-mockup {max-width: 100%;width: min(320px, 90vw)}

.phone-mockup__img {display: block;width: 100%;height: auto}

.hero__card {padding: 1.6rem;border: 1px solid rgba(255, 255, 255, 0.06);border-radius: 24px;position: relative;background: rgba(16, 19, 27, 0.92);backdrop-filter: blur(16px);width: min(360px, 100%);overflow: hidden;box-shadow: var(--shadow-strong)}

.hero__card::before {content: "";position: absolute;background: radial-gradient(circle at 30% 20%, rgba(224, 0, 60, 0.2), transparent 60%);z-index: 0;inset: 0}

.card__header,
.card__body {z-index: 1;position: relative}

.card__header {margin-bottom: 1.6rem;justify-content: space-between;display: flex;align-items: center}

.card__title {letter-spacing: 0.08em;text-transform: uppercase;font-weight: 600;font-size: 0.9rem}

.card__status {background: rgba(6, 182, 139, 0.15);padding: 0.4rem 0.75rem;color: var(--color-secondary);letter-spacing: 0.06em;font-weight: 600;border-radius: 999px;font-size: 0.75rem}

.card__chips {gap: 0.6rem;display: flex;margin-bottom: 1.1rem;flex-wrap: wrap}

.chip {padding: 0.35rem 0.7rem;text-transform: uppercase;font-weight: 600;background: rgba(255, 255, 255, 0.08);letter-spacing: 0.08em;border-radius: 999px;font-size: 0.7rem}

.chip--gold {color: #1a1b26;background: linear-gradient(120deg, #ffb347, #ff8c42)}

.chip--silver {background: linear-gradient(120deg, #d7e1ec, #9fb6cc);color: #10131b}

.card__text {margin: 0 0 1.4rem;color: var(--color-muted)}

.card__footer {border-top: 1px solid rgba(255, 255, 255, 0.08);align-items: center;color: var(--color-muted);display: flex;justify-content: space-between;padding-top: 0.8rem;font-size: 0.9rem}

.card__footer strong {font-size: 1.25rem;color: #fff}

.section {padding: 5rem 0}

.section h2 {text-align: center;margin-bottom: 3rem;font-size: clamp(2rem, 3vw, 2.5rem)}

.section--gallery {background: rgba(16, 19, 27, 0.5)}

.gallery-intro {text-align: center;margin: -2rem auto 3rem;color: var(--color-muted);line-height: 1.7;font-size: 1rem;max-width: 720px}

.gallery-grid {gap: 1.5rem;grid-template-columns: repeat(3, minmax(0, 1fr));display: grid}

.gallery-card {border: 1px solid rgba(255, 255, 255, 0.08);position: relative;box-shadow: var(--shadow-soft);transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);aspect-ratio: 4 / 3;border-radius: 18px;background: rgba(7, 8, 13, 0.6);overflow: hidden}

.gallery-card:hover {box-shadow: var(--shadow-strong);transform: translateY(-4px);border-color: rgba(255, 255, 255, 0.15)}

.gallery-card__img {object-fit: cover;height: 100%;display: block;transition: transform var(--transition);width: 100%}

.gallery-card:hover .gallery-card__img {transform: scale(1.05)}

.section--features {background: linear-gradient(180deg, rgba(16, 19, 27, 0.95), rgba(7, 8, 13, 0.88))}

.feature-grid {gap: 1.8rem;grid-template-columns: repeat(4, minmax(0, 1fr));display: grid}

.feature-card {border: 1px solid rgba(255, 255, 255, 0.04);background: rgba(7, 8, 13, 0.9);transition: transform var(--transition), border-color var(--transition);box-shadow: var(--shadow-soft);border-radius: 18px;padding: 2rem}

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

.feature-card h3 {font-size: 1.3rem;margin-top: 0;margin-bottom: 0.8rem}

.feature-card p {color: var(--color-muted);margin: 0}

.section--cta {background: linear-gradient(135deg, rgba(224, 0, 60, 0.12), rgba(6, 182, 139, 0.12))}

.cta {align-items: center;grid-template-columns: 1fr 1fr;display: grid;gap: 4rem}

.cta__left {display: flex;gap: 2rem;flex-direction: column}

.cta__content h2 {line-height: 1.3;margin-bottom: 1rem;font-size: clamp(1.8rem, 3vw, 2.3rem);color: #fff}

.cta__content p {line-height: 1.7;color: var(--color-muted);font-size: 1.05rem;margin: 0}

.cta__image {justify-content: center;align-items: center;display: flex}

.cta__img {border-radius: 18px;object-fit: cover;max-width: 500px;width: 100%;height: auto}

.section--security {background: rgba(16, 19, 27, 0.92)}

.section-title {font-size: clamp(1.8rem, 3vw, 2.3rem);color: #fff;text-align: center;line-height: 1.3;margin-bottom: 1rem}

.section-intro {line-height: 1.7;color: var(--color-text);font-size: 1.05rem;margin: 0 auto 3rem;text-align: center;max-width: 720px}

.security-grid {display: grid;gap: 2rem;grid-template-columns: repeat(3, minmax(0, 1fr))}

.security-card {border: 1px solid rgba(255, 255, 255, 0.08);background: rgba(7, 8, 13, 0.9);transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);border-radius: 18px;padding: 2.5rem;backdrop-filter: blur(10px);box-shadow: var(--shadow-soft)}

.security-card:hover {box-shadow: var(--shadow-strong);border-color: rgba(255, 255, 255, 0.15);transform: translateY(-4px)}

.security-card__icon {margin-bottom: 1.5rem;font-size: 3rem;line-height: 1;text-align: center}

.security-card h3 {color: #fff;font-weight: 600;text-align: center;margin: 0 0 1.5rem;font-size: 1.4rem}

.security-card__list {padding: 0;gap: 0.75rem;margin: 0;color: var(--color-muted);display: grid;list-style: none}

.security-card__list li {padding-left: 1.5rem;line-height: 1.6;position: relative;font-size: 0.95rem}

.security-card__list li::before {content: "✓";font-weight: 600;font-size: 1rem;color: var(--color-secondary);position: absolute;left: 0}

.section--article {background: rgba(16, 19, 27, 0.6)}

.article-content {max-width: 800px;border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 24px;background: rgba(7, 8, 13, 0.7);box-shadow: var(--shadow-soft);padding: 3rem;margin: 0 auto}

.article-title {text-align: center;color: #fff;font-weight: 700;margin-bottom: 1.5rem;font-size: clamp(1.8rem, 3vw, 2.2rem);line-height: 1.3}

.article-meta {border-bottom: 1px solid rgba(255, 255, 255, 0.1);color: var(--color-muted);display: flex;gap: 2rem;justify-content: center;margin-bottom: 2.5rem;font-size: 0.9rem;padding-bottom: 1.5rem}

.article-date,
.article-author {display: inline-block}

.article-body {line-height: 1.8;color: var(--color-text)}

.article-body p {color: var(--color-text);margin-bottom: 1.5rem;font-size: 1rem}

.article-body h3 {margin: 2.5rem 0 1rem;padding-top: 1rem;font-weight: 600;font-size: 1.4rem;border-top: 1px solid rgba(255, 255, 255, 0.08);color: #fff}

.article-body h3:first-of-type {margin-top: 0;padding-top: 0;border-top: none}

.article-tags {display: flex;justify-content: center;border-top: 1px solid rgba(255, 255, 255, 0.1);flex-wrap: wrap;margin-top: 2.5rem;gap: 0.75rem;padding-top: 2rem}

.tag {transition: all var(--transition);border: 1px solid rgba(224, 0, 60, 0.3);cursor: pointer;padding: 0.5rem 1rem;border-radius: 999px;color: rgba(255, 255, 255, 0.9);font-weight: 500;display: inline-block;font-size: 0.85rem;background: rgba(224, 0, 60, 0.15)}

.tag:hover {background: rgba(224, 0, 60, 0.3);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(224, 0, 60, 0.2);color: #fff;border-color: var(--color-primary)}

.section--faq {background: radial-gradient(circle at 70% 10%, rgba(224, 0, 60, 0.12), transparent 60%)}

.faq {gap: 1rem;max-width: 720px;margin: 0 auto;display: grid}

.faq details {border: 1px solid rgba(255, 255, 255, 0.08);transition: border-color var(--transition), transform var(--transition);border-radius: 16px;background: rgba(7, 8, 13, 0.85);padding: 1.2rem 1.4rem}

.faq summary {list-style: none;font-weight: 600;letter-spacing: 0.02em;cursor: pointer}

.faq details[open] {transform: translateY(-2px);border-color: rgba(224, 0, 60, 0.3)}

.faq p {color: var(--color-muted);margin-top: 0.8rem}

.footer {border-top: 1px solid rgba(255, 255, 255, 0.06);padding: 3rem 0 2.5rem;background: rgba(5, 6, 9, 0.95)}

.footer__grid {grid-template-columns: repeat(2, minmax(0, 1fr));align-items: start;display: grid;gap: 3rem}

.footer__brand p {margin-top: 1rem;color: var(--color-muted)}

.footer__links {gap: 2.5rem;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr))}

.footer__title {display: block;letter-spacing: 0.06em;color: rgba(255, 255, 255, 0.75);text-transform: uppercase;margin-bottom: 1rem;font-size: 0.8rem;font-weight: 600}

.footer__links a {font-size: 0.95rem;color: var(--color-muted);display: block;transition: color var(--transition);margin-bottom: 0.6rem}

.footer__links a:hover {color: #fff}

.logo--footer .logo__img {height: 3rem}

@media (max-width: 992px) {justify-content: center;.topbar .container {
    flex-wrap: wrap}

  .nav {display: none}

  .hero__grid {grid-template-columns: 1fr;text-align: center}

  .hero__content {order: 1}

  .hero__media {order: 2}

  .download-buttons {justify-content: center}

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

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

  .cta {grid-template-columns: 1fr;text-align: center;gap: 2.5rem}

  .cta__image {order: -1}

  .cta__content h2 {text-align: center}

  .security-grid {gap: 1.5rem;grid-template-columns: repeat(2, minmax(0, 1fr))}

  .security-card {padding: 2rem}

  .footer__grid {text-align: center;grid-template-columns: 1fr}

  .footer__links {grid-template-columns: repeat(2, minmax(0, 1fr));text-align: left}
}

@media (max-width: 640px) {.topbar .container {
    padding: 0.8rem 0}

  .hero {padding: 5rem 0 4rem}

  .eyebrow {flex-direction: column;gap: 0.75rem;align-items: center}

  .hero__title-logo {height: 5rem;border-radius: 1.2rem;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);object-fit: cover;width: 5rem;margin-bottom: 0.5rem}

  .section {padding: 4rem 0}

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

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

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

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

  .phone-mockup {width: min(280px, 85vw)}

  .article-content {padding: 2rem 1.5rem}

  .article-title {font-size: 1.5rem}

  .article-meta {flex-direction: column;gap: 0.5rem}

  .article-body h3 {font-size: 1.2rem}
}


._c9ts3nzqv{}

._ckydq0jy0{}

._c0g28l4gj{}