/* The use-case landing pages: /ai-salon-receptionist, /ai-scheduling-assistant,
   /ai-phone-product-catalog (and their /ro/, /en/, /de/ twins).

   One stylesheet for the three of them rather than an inline <style> each, as the
   legal pages do: these are meant to multiply — one page per search intent — and
   a fourth copy of the same two hundred lines is how they would drift apart.

   The palette is the legal pages' own, with its light half beside it, so moving
   from the FAQ to one of these and back changes nothing but the words. */

:root {
  --bg:         #04080f;
  --bg-surface: #0d1528;
  --accent:     steelblue;
  --accent-l:   skyblue;
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #8b9cb3;
  --border:     #1e2e45;
  --border-strong: #334155;
  --heading:    #fff;
  --nav-bg:     rgba(7,13,26,0.95);
  --bg-note:    #111c30;
}

:root[data-theme="light"] {
  --bg:         #eef2f6;
  --bg-surface: #ffffff;
  --accent-l:   #2f6f9f;
  --text:       #1e293b;
  --text-muted: #475569;
  --text-faint: #56657a;
  --border:     #dbe3ec;
  --border-strong: #cbd5e1;
  --heading:    #0f172a;
  --nav-bg:     rgba(255,255,255,0.95);
  --bg-note:    #f5f8fb;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top bar: the FAQ's, unchanged ── */
nav {
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}
nav > .theme-toggle { margin-left: auto; margin-right: 0.75rem; }
.nav-left { display: flex; align-items: center; gap: 1.5rem; }
.nav-brand {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-brand span { color: var(--accent-l); }
.nav-back {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--heading); }

.lang-switcher { display: flex; align-items: center; gap: 0.25rem; }
.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}
.lang-btn:hover { color: var(--heading); background: rgba(99,102,241,0.12); }
.lang-btn.active { color: var(--accent-l); }
.lang-sep { color: var(--text-faint); font-size: 0.72rem; user-select: none; line-height: 1; }

/* ── Page ── */
main {
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.sol-crumbs {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 2rem;
}
.sol-crumbs a { color: var(--text-muted); text-decoration: none; }
.sol-crumbs a:hover { color: var(--heading); }

.sol-header {
  padding-bottom: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.sol-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-l);
  margin-bottom: 0.9rem;
}
.sol-header h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading);
  margin-bottom: 1.1rem;
}
.sol-lede { font-size: 1.1rem; color: var(--text-muted); max-width: 44em; }

.sol-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
/* Accent surface: the same on either background, like every steelblue button. */
.sol-btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: steelblue;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid steelblue;
  transition: filter 0.2s;
}
.sol-btn:hover { filter: brightness(1.12); }
.sol-btn-ghost { background: transparent; color: var(--accent-l); border-color: var(--border-strong); }

.sol-section { padding: 2.25rem 0 0.5rem; }
.sol-section h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 1rem;
}
.sol-section p { margin-bottom: 0.9rem; color: var(--text); }
.sol-section strong { color: var(--heading); }

.sol-features { list-style: none; display: grid; gap: 0.75rem; }
.sol-features li {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: var(--text-muted);
}

.sol-checklist { list-style: none; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .sol-checklist { grid-template-columns: 1fr 1fr; } }
.sol-checklist li { padding-left: 1.6rem; position: relative; }
.sol-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-l);
  font-weight: 700;
}

.sol-steps { counter-reset: step; list-style: none; display: grid; gap: 0.75rem; }
.sol-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  min-height: 1.9rem;
}
.sol-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: steelblue;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-note { font-size: 0.85rem; color: var(--text-faint); }
.sol-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: 0.8rem;
}
.sol-turn { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; }
.sol-turn p { margin: 0; }
.sol-who {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.2rem;
}
.sol-bot .sol-who { color: var(--accent-l); }
.sol-caller p { color: var(--text-muted); }

/* ── Questions: the FAQ's accordion ── */
details {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: var(--bg-surface);
  transition: border-color 0.2s;
}
details[open] { border-color: var(--border-strong); }
details summary {
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-size: 1.1rem; color: var(--accent-l); flex-shrink: 0; }
details[open] summary::after { content: '−'; }
details summary:hover { color: var(--heading); }
.faq-body { padding: 0 1.25rem 1.1rem; font-size: 0.92rem; }
.faq-body p { color: var(--text-muted); margin: 0; }
.sol-more { margin-top: 1rem; font-size: 0.9rem; }
.sol-more a, .sol-related a { color: var(--accent-l); }

.sol-cta {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--bg-note);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.sol-cta .sol-ctas { justify-content: center; margin-top: 1rem; }

.sol-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-faint);
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--heading); }

@media (max-width: 600px) {
  nav { padding: 0.9rem 1rem; }
  .nav-back { display: none; }
  main { padding: 1.75rem 1rem 4rem; }
  .sol-header h1 { font-size: 1.9rem; }
  .sol-turn { grid-template-columns: 1fr; gap: 0.15rem; }
}