/* ============================================================
   CEMP shared header, logo and Google Play badge
   Loaded after each page's own styles so these rules win.
   ============================================================ */

html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }

/* Header bar: fixed height so the mobile menu always sits flush under it */
nav, .site-nav {
  height: 68px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 16px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img {
  height: 40px !important;
  width: 40px;
  border-radius: 10px;
  display: block;
  box-shadow: 0 2px 10px rgba(30,58,138,0.18);
}
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border-radius: 50px;
  background: linear-gradient(135deg, #1e3a8a, #4c1d95);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,58,138,0.28); }

.nav-play { display: inline-flex; align-items: center; flex-shrink: 0; transition: transform 0.2s, filter 0.2s; }
.nav-play img { height: 40px; width: auto; display: block; }
.nav-play:hover { transform: translateY(-2px); filter: brightness(1.1); }

.mobile-nav { top: 68px !important; }
.mobile-nav .mobile-cta { font-weight: 600; }

/* Footer logo is now a full-colour tile: no white-out filter */
.footer-brand img {
  filter: none !important;
  width: 46px;
  height: 46px !important;
  border-radius: 12px;
}

/* Tool cards on the home page link to their guide */
.tool-card h4 a { color: inherit; text-decoration: none; }
.tool-card h4 a:hover { color: #06b6d4; }
.tool-guide {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6366f1;
  text-decoration: none;
}
.tool-guide:hover { color: #06b6d4; }

@media (max-width: 1100px) {
  .nav-links { gap: 22px !important; }
}
@media (max-width: 900px) {
  nav, .site-nav { height: 60px; padding-left: 16px !important; padding-right: 16px !important; }
  .nav-cta { display: none !important; }
  .nav-logo img { height: 36px !important; width: 36px; border-radius: 9px; }
  .nav-play img { height: 36px; }
  .nav-right { gap: 10px; }
  .mobile-nav { top: 60px !important; }
}
@media (max-width: 380px) {
  .nav-play img { height: 31px; }
  .nav-right { gap: 7px; }
  .lang-btn { padding: 6px 9px !important; }
}

/* Long one-word hero lines (Superinteligencia, Superintelligenz) must fit a 375px screen */
@media (max-width: 600px) {
  #hero .hero-tagline { font-size: min(3rem, 10vw); }
  #hero .hero-content { max-width: 100%; }
}