/* theme: manual light/dark (html.theme-light / html.theme-dark) */
/* Homepage: voice control and app sections (public/index.php, src/apps.php).
   Loaded after home.css; nothing here affects the list or other pages. */

.voice, .apps { padding: 48px 0; }
.voice h2, .apps h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.voice { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.voice-grid, .apps-grid { display: grid; gap: 32px; }

/* ---- Voice: example sentences ---------------------------------------- */
.voice-examples-title { margin: 0 0 10px; font-size: 1rem; }
.voice-examples { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.voice-examples li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.4; }
.voice-examples q {
  quotes: "“" "”";
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-weight: 700;
  font-size: .95rem;
}
.voice-examples span { color: var(--muted); font-size: .93rem; }
.voice-addup {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}
.voice-addup .feature-icon { margin: 0; }
.voice-addup h3 { margin: 2px 0 4px; font-size: 1rem; }
.voice-addup p { margin: 0; color: var(--muted); line-height: 1.5; font-size: .93rem; }
.voice-note { margin: 16px 0 0; line-height: 1.5; }

/* ---- Voice: the example on the right --------------------------------- */
.voice-demo { margin: 0 auto; width: 100%; max-width: 380px; position: relative; padding-top: 34px; }
.voice-bubble {
  position: absolute; top: 0; left: 18px; right: 18px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--green-700);
  color: #fff;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 12px 28px rgba(18,60,50,.25);
}
.voice-bubble small { display: block; font-size: .75rem; opacity: .8; }
.voice-bubble q { quotes: "“" "”"; font-weight: 700; font-size: 1.05rem; }
.voice-mic {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--green-700);
  box-shadow: 0 0 0 6px rgba(255,255,255,.22);
  animation: voice-pulse 1.6s ease-out infinite;
}
.voice-mic svg { width: 22px; height: 22px; }
.voice-mic.small {
  width: 40px; height: 40px;
  background: var(--green-100);
  box-shadow: none;
  animation: none;
}
@keyframes voice-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .voice-mic { animation: none; } }
.voice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(18,60,50,.06), 0 18px 40px rgba(18,60,50,.12);
  padding: 52px 16px 10px;
}
.voice-add { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.voice-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  font-size: .95rem;
}
.voice-result {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--green-100);
  font-size: .9rem;
}

/* ---- Apps ------------------------------------------------------------ */
.apps-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.apps-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 16px rgba(18,60,50,.18); flex: none; }
.apps-head .hero-kicker { margin: 0; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 172px;
  padding: 8px 18px 8px 14px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1px solid #555;
  text-decoration: none;
  line-height: 1.1;
}
a.store-badge:hover { background: #222; }
.store-badge svg { flex: none; }
.store-text small { display: block; font-size: .7rem; letter-spacing: .02em; }
.store-text strong { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.store-badge.is-soon { opacity: .72; cursor: default; }
.apps-meanwhile { margin: 16px 0 0; line-height: 1.5; max-width: 36em; }
.apps-phone { margin: 0; display: flex; justify-content: center; }
.phone-frame {
  width: 250px;
  padding: 10px;
  border-radius: 38px;
  background: #17221d;
  box-shadow: 0 2px 4px rgba(18,60,50,.1), 0 24px 50px rgba(18,60,50,.22);
  transform: rotate(2deg);
}
.phone-frame img { display: block; width: 100%; height: auto; border-radius: 29px; }

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .voice-examples q { color: #8fd3bd; }
  html:not(.theme-light) .phone-frame { background: #000; box-shadow: 0 0 0 1px #2a3733, 0 24px 50px rgba(0,0,0,.5); }
}
html.theme-dark .voice-examples q { color: #8fd3bd; }
  html.theme-dark .phone-frame { background: #000; box-shadow: 0 0 0 1px #2a3733, 0 24px 50px rgba(0,0,0,.5); }


@media (min-width: 920px) {
  .voice, .apps { padding: 72px 0; }
  .voice-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
  .apps-grid { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
  .phone-frame { width: 280px; }
}

@media (max-width: 639px) {
  /* Phones: the sentence on one line, what it does under it. */
  .voice-examples { gap: 12px; }
  .voice-examples li { display: grid; justify-items: start; }
  .store-badge { min-width: 0; padding-right: 14px; }
  .store-text strong { font-size: 1.1rem; }
}

/* Right-to-left languages (Arabic) */
[dir="rtl"] .store-badge { padding: 8px 14px 8px 18px; }