:root {
  --bg: #2B2D30;
  --bg-strong: #242629;
  --surface: #333538;
  --panel: #3A3D41;
  --line: rgba(255,255,255,0.08);
  --text: #EAEAEA;
  --muted: rgba(234,234,234,0.72);
  --primary: #FFEA00;
  --secondary: #4FC3F7;
  --critical: #D32F2F;
  --high: #F57C00;
  --medium: #FBC02D;
  --low: #388E3C;
  --map: #24445E;
  --shadow: 0 20px 60px rgba(0,0,0,0.32);
  --radius: 24px;
  --radius-lg: 34px;
  --shell: min(1440px, calc(100vw - clamp(24px, 4vw, 56px)));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font-family: "Inter", sans-serif; background: linear-gradient(180deg, #242629 0%, #2B2D30 100%); }
.site-bg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 0%, rgba(255,234,0,0.10), transparent 22%), radial-gradient(circle at 92% 10%, rgba(79,195,247,0.12), transparent 18%), radial-gradient(circle at 55% 40%, rgba(36,68,94,0.28), transparent 30%); z-index: -1; }
img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; }
.shell { width: var(--shell); margin: 0 auto; }
.section-pad { padding: clamp(56px, 8vw, 96px) 0; }
.header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); background: rgba(36,38,41,0.84); border-bottom: 1px solid rgba(255,255,255,0.04); }
.nav-shell { min-height: 84px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand > img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: block;
  box-shadow: 0 12px 32px rgba(255,234,0,0.20);
}
.brand-copy strong { display: block; font-size: 1rem; letter-spacing: -0.03em; }
.brand-copy small { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--muted); }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: 8px; padding: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; }
.desktop-nav a, .mobile-menu a:not(.button) { color: var(--muted); padding: 10px 14px; border-radius: 12px; transition: 0.22s ease; }
.desktop-nav a:hover, .desktop-nav a.active, .mobile-menu a:hover, .mobile-menu a.active { color: var(--text); background: rgba(255,255,255,0.08); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 18px; border: 1px solid transparent; font-weight: 700; transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-sm { min-height: 46px; padding: 0 18px; }
.button-primary { color: #111; background: linear-gradient(135deg, #FFF36B, var(--primary)); box-shadow: 0 18px 40px rgba(255,234,0,0.14); }
.button-secondary, .button-ghost { background: rgba(255,255,255,0.04); border-color: var(--line); color: var(--text); }
.button-secondary:hover, .button-ghost:hover { border-color: rgba(79,195,247,0.32); box-shadow: 0 0 0 1px rgba(79,195,247,0.08) inset; }
.nav-toggle { display: none; width: 48px; height: 48px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; padding: 0; position: relative; }
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--text); border-radius: 999px; transition: 0.2s ease; }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 23px; } .nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; border-top: 1px solid rgba(255,255,255,0.05); } .mobile-menu.open { display: block; }
.mobile-menu-inner { width: var(--shell); margin: 0 auto; padding: 14px 0 18px; display: grid; gap: 8px; }
.hero-grid, .split-grid, .page-hero-grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); align-items: center; }
.split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.eyebrow { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,234,0,0.22); background: rgba(255,234,0,0.10); color: #FFF7A3; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-top: 18px; font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.96; letter-spacing: -0.06em; max-width: 12ch; }
.page-hero h1 { max-width: 13ch; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.05em; margin-bottom: 14px; }
h3 { font-size: 1.28rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.lead, .panel p, .info-card p, .mini-feature p, .feature-panel p, .about-card p, .contact-card p, .contact-list, .footer p, .text-link, .stat-card p { color: var(--muted); }
.lead { font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.9; max-width: 60ch; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.trust-pill { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); color: var(--muted); font-size: 0.92rem; }
.stats-grid, .feature-strip, .stack-grid, .feature-grid, .about-grid, .contact-grid { display: grid; gap: 18px; }
.stats-grid { margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.stat-card, .info-card, .panel, .mini-feature, .feature-panel, .about-card, .contact-card, .contact-form, .floating-card { background: rgba(58,61,65,0.88); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); padding: clamp(20px, 2vw, 28px); }
.stat-card h3 { font-size: 1.85rem; margin-bottom: 6px; }
.feature-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icon-box { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,234,0,0.18), rgba(79,195,247,0.16)); color: #FFF7A3; font-weight: 800; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.08); }
.alt-band { background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.02)), linear-gradient(180deg, rgba(36,68,94,0.10), rgba(36,68,94,0.04)); border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); }
.large-panel { min-height: 100%; background: radial-gradient(circle at top right, rgba(79,195,247,0.10), transparent 32%), radial-gradient(circle at bottom left, rgba(255,234,0,0.06), transparent 28%), rgba(58,61,65,0.95); }
.stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.text-link { display: inline-block; margin-top: 8px; font-weight: 700; color: #8ED8FA; }
.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.visual-orb { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .48; }
.orb-a { width: 220px; height: 220px; background: rgba(255,234,0,0.18); top: 6%; left: 5%; }
.orb-b { width: 260px; height: 260px; background: rgba(79,195,247,0.18); right: 8%; bottom: 10%; }
.phone-stage { position: relative; width: min(100%, 560px); min-height: 560px; display: grid; place-items: center; }
.phone-frame { width: clamp(260px, 27vw, 340px); aspect-ratio: 0.49; border-radius: 42px; padding: 14px; background: linear-gradient(180deg, #1A1C1F, #0E1012); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 30px 80px rgba(0,0,0,0.42); position: relative; z-index: 2; }
.phone-notch { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; width: 38%; height: 26px; border-radius: 0 0 16px 16px; background: #08090B; z-index: 4; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 30px; background: var(--map); border: 1px solid rgba(255,255,255,0.06); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.floating-card { position: absolute; z-index: 3; min-width: 180px; backdrop-filter: blur(10px); background: rgba(36,38,41,0.82); }
.floating-card-top { top: 12%; left: clamp(-8px, 2vw, 24px); } .floating-card-bottom { right: clamp(-8px, 2vw, 24px); bottom: 12%; }
.floating-label { display: block; color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }
.severity-row { display: flex; gap: 10px; }
.severity-dot { width: 16px; height: 16px; border-radius: 999px; display: inline-block; box-shadow: 0 0 0 3px rgba(255,255,255,0.05); }
.severity-dot.critical { background: var(--critical); } .severity-dot.high { background: var(--high); } .severity-dot.medium { background: var(--medium); } .severity-dot.low { background: var(--low); }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-grid .large-panel { grid-column: 1 / -1; }
.contact-grid { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); }
.contact-form { display: grid; gap: 16px; } .contact-form label { display: grid; gap: 8px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font: inherit; outline: none; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(79,195,247,0.45); box-shadow: 0 0 0 4px rgba(79,195,247,0.10); }
.contact-list { padding-left: 18px; line-height: 1.9; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(circle at top right, rgba(79,195,247,0.10), transparent 24%), radial-gradient(circle at bottom left, rgba(255,234,0,0.08), transparent 20%), rgba(58,61,65,0.95); box-shadow: var(--shadow); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer { padding: 28px 0 42px; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-inner { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.centered { max-width: 860px; margin: 0 auto 32px; text-align: center; } .hide-mobile { display: inline-flex; }
@media (max-width: 1180px) { .hero-grid, .split-grid, .feature-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; } .hero-visual { min-height: auto; } .phone-stage { min-height: 500px; } .feature-strip { grid-template-columns: 1fr; } .stack-grid { grid-template-columns: 1fr 1fr; } .footer-inner, .cta-panel { flex-direction: column; align-items: flex-start; } }
@media (max-width: 860px) { .nav-shell { grid-template-columns: auto 1fr auto; } .desktop-nav, .hide-mobile { display: none; } .nav-toggle { display: block; justify-self: end; } .nav-actions { display: none; } .stats-grid, .stack-grid, .feature-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; } .hero-grid { gap: 28px; } .hero-visual { order: -1; } .phone-stage { min-height: 460px; width: 100%; } .floating-card { min-width: 160px; } .floating-card-top { left: 0; top: 7%; } .floating-card-bottom { right: 0; bottom: 7%; } h1 { max-width: 11ch; font-size: clamp(2.7rem, 12vw, 4.4rem); } .shell { width: min(100vw - 24px, 1440px); } }
@media (max-width: 560px) { .phone-stage { min-height: 390px; } .phone-frame { width: min(78vw, 310px); border-radius: 36px; padding: 12px; } .phone-screen { border-radius: 26px; } .floating-card { position: static; width: 100%; margin-top: 12px; } .phone-stage { display: flex; flex-direction: column; align-items: center; } .footer-inner { align-items: flex-start; } }


.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 620px);
  margin-top: 24px;
}

.hero-highlight-card {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(58,61,65,0.95), rgba(51,53,56,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow);
}

.hero-highlight-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234,234,234,0.62);
  margin-bottom: 8px;
}

.hero-highlight-card strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.hero-actions-upgraded {
  align-items: center;
}

.play-badge {
  min-height: 64px;
  padding: 10px 18px 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #111315 0%, #050607 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.play-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(255,234,0,0.26);
  box-shadow: 0 22px 40px rgba(0,0,0,0.36);
}

.play-badge-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.play-badge-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.play-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.play-badge-text small {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  opacity: 0.82;
}

.play-badge-text strong {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-rating {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.94rem;
}

.hero-stars {
  color: var(--primary);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .hero-highlights {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .play-badge {
    width: 100%;
    justify-content: center;
  }

  .hero-actions-upgraded {
    width: 100%;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .play-badge-text strong {
    font-size: 1.15rem;
  }

  .hero-rating {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


.play-badge-premium {
  position: relative;
  padding-right: 16px;
  min-width: 240px;
}

.play-badge-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}

.play-badge-arrow {
  margin-left: 2px;
  font-size: 1.1rem;
  opacity: 0.9;
}

.screenshots-section {
  padding-top: clamp(36px, 6vw, 64px);
}

.screenshots-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

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

.shot-card {
  border-radius: 28px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(58,61,65,0.96), rgba(51,53,56,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow);
}

.shot-phone {
  width: min(100%, 240px);
  margin: 0 auto;
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(180deg, #181A1D 0%, #0F1012 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 36px rgba(0,0,0,0.28);
}

.shot-phone img {
  border-radius: 20px;
  width: 100%;
  aspect-ratio: 0.49;
  object-fit: cover;
  background: var(--map);
  border: 1px solid rgba(255,255,255,0.06);
}

.shot-copy {
  margin-top: 18px;
  text-align: center;
}

.shot-copy h3 {
  margin-bottom: 8px;
}

.shot-copy p {
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.75;
}

.shots-nav {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.shots-nav:hover {
  transform: translateY(-1px);
  border-color: rgba(79,195,247,0.32);
  background: rgba(255,255,255,0.08);
}

.shots-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.shots-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.18);
}

.shots-dot.active {
  width: 28px;
  background: var(--primary);
}

@media (max-width: 980px) {
  .screenshots-shell {
    grid-template-columns: 1fr;
  }

  .shots-track {
    grid-template-columns: 1fr;
  }

  .shots-nav {
    display: none;
  }

  .shots-dots {
    display: flex;
  }

  .shot-card {
    display: none;
  }

  .shot-card.active {
    display: block;
  }
}

@media (max-width: 560px) {
  .play-badge-premium {
    min-width: 0;
  }

  .shot-card {
    padding: 16px;
  }
}


.play-badge-official {
  display: inline-block;
  transition: transform 0.18s ease;
}

.play-badge-official:hover {
  transform: translateY(-2px) scale(1.02);
}

.play-badge-img {
  height: 64px;
  width: auto;
  display: block;
}

@media (max-width: 560px) {
  .play-badge-img {
    height: 56px;
  }
}


/* Force official Google Play badge usage everywhere */
.play-badge-official {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 0;
}

.play-badge-official:hover {
  transform: translateY(-1px);
}

.play-badge-official .play-badge-img,
.play-badge-img {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
}

.nav-play-badge .play-badge-img {
  height: 44px;
}

.mobile-play-badge .play-badge-img {
  height: 56px;
}

.cta-play-badge .play-badge-img {
  height: 60px;
}

.hero-actions .play-badge-official .play-badge-img {
  height: 64px;
}

.play-badge,
.play-badge-premium,
.play-badge-text,
.play-badge-icon,
.play-badge-arrow {
  all: unset;
  display: contents;
}

@media (max-width: 860px) {
  .nav-play-badge .play-badge-img {
    height: 40px;
  }
  .hero-actions .play-badge-official,
  .mobile-play-badge,
  .cta-play-badge {
    width: auto !important;
  }
  .hero-actions .play-badge-official .play-badge-img,
  .mobile-play-badge .play-badge-img,
  .cta-play-badge .play-badge-img {
    height: 52px;
  }
}