/* ==========================================================================
   Lingos marketing site — shared stylesheet
   Used identically by all 4 language versions (/, /en/, /es/, /fr/) so that
   design changes only need to happen in one place. Page-specific content
   lives in each index.html; this file is pure presentation.
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #ff6600;
  --primary-light: #ff8833;
  --primary-dark: #cc5200;
  --dark: #0f172a;
  --light: #f8fafc;
  --gradient: linear-gradient(135deg, #ff6600 0%, #ff8833 100%);
}

body {
  font-family: "Inter", sans-serif;
  color: var(--dark);
  overflow-x: hidden;
  background: var(--light);
}

.hero {
  min-height: 100vh;
  background: #ef670d;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 80px;
}
.hero::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 9px,
    transparent 9px,
    transparent 25px,
    rgba(255, 255, 255, 0.1) 25px,
    rgba(255, 255, 255, 0.1) 26px,
    transparent 26px,
    transparent 42px,
    rgba(255, 255, 255, 0.1) 42px,
    rgba(255, 255, 255, 0.1) 43px,
    transparent 43px,
    transparent 55px,
    rgba(255, 255, 255, 0.1) 55px,
    rgba(255, 255, 255, 0.1) 56px,
    transparent 56px,
    transparent 73px,
    rgba(255, 255, 255, 0.1) 73px,
    rgba(255, 255, 255, 0.1) 74px
  );
  pointer-events: none;
  animation: slideLines 8s ease-in-out infinite;
}

@keyframes slideLines {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 80px 40px;
  }
}

.herox::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
      30deg,
      rgba(255, 255, 255, 0.03) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.03) 87.5%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.03) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.03) 87.5%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(
      30deg,
      rgba(255, 255, 255, 0.03) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.03) 87.5%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.03) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(255, 255, 255, 0.03) 87.5%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(
      60deg,
      rgba(255, 255, 255, 0.02) 25%,
      transparent 25.5%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 75%,
      rgba(255, 255, 255, 0.02)
    ),
    linear-gradient(
      60deg,
      rgba(255, 255, 255, 0.02) 25%,
      transparent 25.5%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 75%,
      rgba(255, 255, 255, 0.02)
    );
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  pointer-events: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.container-screenshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: #ff6f10;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.3);
}

nav.scrolled {
  padding: 8px 0 10px 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s;
}

nav.scrolled::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 102, 0, 0.5),
    transparent
  );
  opacity: 1;
}

nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.logo {
  font-size: 28px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  letter-spacing: -1px;
  transition: color 0.3s;
}

nav.scrolled .logo {
  color: var(--primary);
}

/* Language switcher — top-left, next to the logo. All 4 language
   versions are shown as buttons side by side so a visitor (or a
   crawler) can always see every translation is one click away. */
.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-switch a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.25s;
}

.lang-switch a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lang-switch a.active {
  background: white;
  color: var(--primary-dark);
  border-color: white;
}

nav.scrolled .lang-switch a {
  border-color: rgba(15, 23, 42, 0.2);
  color: var(--dark);
}

nav.scrolled .lang-switch a:hover {
  background: rgba(255, 102, 0, 0.08);
}

nav.scrolled .lang-switch a.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  position: relative;
}

nav.scrolled .nav-links a {
  color: var(--dark);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: white;
  transition: width 0.3s;
}

nav.scrolled .nav-links a::after {
  background: var(--primary);
}

.nav-links a:hover::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 1001;
}

nav.scrolled .mobile-menu-btn {
  color: var(--dark);
}

.mobile-menu {
  position: fixed;
  top: 50px;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
  z-index: 999;
  padding: 100px 40px 40px;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Language switcher repeated inside the mobile slide-out menu, so it
   stays reachable once .lang-switch is hidden at very small widths. */
.lang-switch-mobile {
  display: flex;
  gap: 8px;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lang-switch-mobile a {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.25s;
}

.lang-switch-mobile a.active {
  background: var(--gradient);
  border-color: transparent;
}

.mobile-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-links a {
  display: block;
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  padding: 20px 0;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.mobile-menu-links a::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient);
  transition: left 0.3s;
}

.mobile-menu-links a:hover {
  color: var(--primary-light);
  padding-left: 15px;
}

.mobile-menu-links a:hover::before {
  left: 0;
}

.mobile-menu-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 0;
}

.hero-text h1 {
  font-size: 56px;
  color: white;
  margin-bottom: 20px;
  line-height: 1.1;
  font-weight: 300;
}

.hero-text h1 span {
  color: white;
  font-weight: 600;
}

.hero-text p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 30px;
  line-height: 1.7;
}

.download-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border-radius: 36px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
}

.app-btn i {
  font-size: 32px;
  color: white;
}

.app-btn .btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: white;
  line-height: 1.2;
}

.app-btn .btn-text small {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.9;
}

.app-btn .btn-text span {
  font-size: 16px;
  font-weight: 600;
}

.app-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: heroImageIn 0.45s ease-out forwards,
    floatPhone 6s ease-in-out 0.45s infinite;
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatPhone {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.hero-image img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.3));
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.features {
  padding: 100px 0;
  background: white;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header-screenshot {
  padding: 0 20px;
}

.section-header h2 {
  font-size: 42px;
  margin-bottom: 15px;
  color: var(--dark);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.section-header .dot {
  width: 60px;
  height: 4px;
  background: var(--gradient);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.section-header p {
  font-size: 18px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

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

.feature-card {
  padding: 40px 30px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--primary);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(255, 102, 0, 0.15);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 24px;
  transition: transform 0.3s;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-icon i {
  color: white;
}

.feature-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: var(--dark);
  font-weight: 700;
}

.feature-card p {
  color: #64748b;
  line-height: 1.7;
}

.books {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.books-intro {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: #334155;
}

.books-list {
  background: white;
  padding: 40px 40px 20px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 40px auto 0;
}

.books-list h3 {
  font-size: 24px;
  margin-bottom: 25px;
  color: var(--dark);
  font-weight: 700;
}

.books-list ul {
  list-style: none;
}

.books-list li {
  position: relative; /* containing block for the stretched title link below */
  padding: 18px 0;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: all 0.3s;
}

.books-listX li:hover {
  padding-left: 10px;
  background: rgba(255, 102, 0, 0.03);
}

.books-list li span {
  color: var(--dark);
  line-height: 1.6;
  font-size: 14px;
}

.books-list li i {
  font-size: 20px;
  color: var(--primary);
  margin-top: 3px;
  flex-shrink: 0;
}

.books-list li:last-child {
  border-bottom: none;
}

/* Cool primary-colored book links with an animated underline */
.books-list li a {
  color: var(--primary-dark);
  text-decoration: none;
  background-image: linear-gradient(
    var(--primary-light),
    var(--primary-light)
  );
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  padding-bottom: 1px;
  transition: color 0.25s ease, background-size 0.3s ease;
}

.books-list li a:hover {
  color: #a34200;
  background-size: 100% 2px;
}

.books-list li a strong {
  font-weight: 700;
}

/* Stretched link: an invisible overlay on the title's <a> covers the whole
   row, so the entire li (icon, tag, description) is clickable/tappable and
   hovering anywhere on it triggers the title's hover underline. */
.books-list li a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* stay above the positioned .book-lang-tag badge */
}

/* Small badge naming the target language of each textbook — visible,
   crawlable keyword text (e.g. "Chinesisch", "Russisch") right next
   to the book title, so language-name searches have real on-page
   context to match against. */
.book-lang-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--primary-dark);
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  top: -3px;
  position: relative;
  left: -2px;
}

/* Simple search box above the books list — filters by book title (via
   li.textContent) or by target language, matched against every
   supported UI language including the ones currently hidden from the
   visible language switcher (see data-lang-search on each <li>). */
.books-search {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 0 24px;
}

.books-search i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.books-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.books-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}

.books-search input::placeholder {
  color: #94a3b8;
}

.books-list ul li.is-hidden {
  display: none;
}

/* Progressive disclosure for the long tail of textbooks: markup, hrefs and
   crawlable text stay in the DOM for all of them (nothing removed, nothing
   robots-blocked), only the visual display is collapsed until "Show more"
   is clicked or a search matches one of them — same read-more/accordion
   pattern search engines already treat as regular content, not cloaking. */
.books-list ul li.book-extra {
  display: none;
}

.books-list.is-expanded ul li.book-extra {
  display: flex;
}

/* A search query expands the list (is-expanded) AND hides non-matches
   (is-hidden). This must outrank the display:flex reveal above, so extra
   books that don't match the query stay hidden during a search. */
.books-list.is-expanded ul li.is-hidden {
  display: none;
}

.books-show-more {
  display: block;
  margin: 24px auto 30px;
  padding: 10px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.books-show-more:hover {
  background: rgba(255, 102, 0, 0.06);
  border-color: var(--primary);
}

.book-desc {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-style: normal;
}

/* Audio/TTS remark appended to each book-desc — visible, crawlable text
   (not a badge/icon-only indicator) so "mit Audio" / "Text-to-Speech"
   stay searchable, styled in italics to read as a secondary remark. */
.book-audio-note {
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 600;
}

.screenshots {
  padding: 100px 0 50px 0;
  background: white;
}

.screenshot-wrapper {
  position: relative;
}

.screenshot-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) #e2e8f0;
  scroll-behavior: smooth;
  padding: 0 30px;
  height: calc(60vh + 30px);
  padding-top: 30px;
  top: -35px;
  position: relative;
  overflow-y: hidden;
}

.screenshot-slider::-webkit-scrollbar {
  height: 8px;
}

.screenshot-slider::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 4px;
}

.screenshot-slider::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

.screenshot-slider::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.screenshot-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 70vh;
  width: auto;
  background: #404040;
  padding: 0;
  border: 3px solid rgba(255, 102, 0, 0.1);
  border-bottom: none;
}

.screenshot-itemX:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 30px 80px rgba(255, 102, 0, 0.25);
  border-color: rgba(255, 102, 0, 0.3);
}

.screenshot-placeholder {
  width: 280px;
  height: 100%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.screenshot-placeholder i {
  font-size: 48px;
  color: #cbd5e1;
}

.screenshot-item img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.4);
}

.slider-nav i {
  color: white;
}

.slider-nav:hover {
  background: var(--primary-dark);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.6);
}

.slider-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.slider-nav.prev {
  left: 10px;
}

.slider-nav.next {
  right: 10px;
}

/* ==========================================================================
   FAQ section — implemented with native <details>/<summary> so every
   question and answer is always present in the rendered DOM (no JS
   needed to reveal it). That matters for GEO: AI crawlers that don't
   execute JavaScript, or that ignore collapsed visual state, still see
   the full question + direct-answer text. Also paired with FAQPage
   JSON-LD in the page <head> for classic rich-result eligibility.
   ========================================================================== */
.faq {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.faq-list {
  max-width: 800px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: white;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--primary);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 60px 22px 26px;
  font-weight: 700;
  font-size: 17px;
  color: var(--dark);
  position: relative;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--primary);
  transition: transform 0.3s;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  padding: 0 26px 24px;
  color: #64748b;
  line-height: 1.7;
}

.download {
  padding: 100px 0;
  background: var(--gradient);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.downloadX::before {
  left: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    );
}

.download .container {
  position: relative;
  z-index: 2;
}

.download h2 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 800;
}

.download p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  opacity: 0.95;
  line-height: 1.7;
}

.download .download-buttons {
  justify-content: center;
}

.contact {
  padding: 100px 0;
  background: white;
}

.contact-content {
  text-align: center;
  max-width: 600px;
  margin: 60px auto 0;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 40px;
  background: var(--gradient);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0 140px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.contact-email:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 102, 0, 0.4);
}

.impressum-link {
  display: inline-block;
  margin-top: 30px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.impressum-link:hover {
  text-decoration: underline;
  color: var(--primary-dark);
}

.publisher-link {
  display: block;
  margin-top: 28px;
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.3s;
}

.publisher-link:hover {
  text-decoration: underline;
  color: var(--primary);
}

footer {
  padding: 40px 0;
  background: var(--dark);
  color: white;
  text-align: center;
}

footer p {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 36px;
  }

  .hero-text p {
    font-size: 13px;
  }

  .download-buttons {
    justify-content: center;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .section-header h2 {
    font-size: 32px;
  }

  .slider-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .slider-nav.prev {
    left: 10px;
  }

  .slider-nav.next {
    right: 10px;
  }

  .screenshot-item {
    width: 280px;
    height: 60vh;
  }

  .books-list {
    padding: 30px 20px;
  }

  .download h2 {
    font-size: 32px;
  }

  .download p {
    font-size: 16px;
  }
}

/* Soft-launch language rollout — see CLAUDE.md "Language rollout"
   note. The /es/ and /fr/ pages stay fully live and linked (hreflang,
   sitemap.xml, JSON-LD, robots.txt) so they're still indexable and
   reachable by direct URL; only their buttons in the visible language
   switcher are hidden for now. Remove this rule (and the
   `lang-hidden` class on the ES/FR links in all 4 index.html files)
   to show all 4 languages again. */
.lang-switch a.lang-hidden,
.lang-switch-mobile a.lang-hidden {
  display: none;
}