/* ══════════════════════════════════════════════════════════════════════
   VixitAI Studios — content pages (services, case studies, about, contact).

   Loaded AFTER tw.css, because the header and footer are inherited verbatim
   from the prerendered homepage and are styled by Tailwind utilities. This
   file only styles the article body, which is plain semantic HTML.

   Palette is the same one the app uses:
     #060e20 background · #0f1930 raised · #e0e7ff text · #a3aac4 muted
     #00f5d4 cyan · #6366f1 indigo · #22c55e green · #40485d borders
   ══════════════════════════════════════════════════════════════════════ */

.page-body {
  background: #060e20;
  color: #e0e7ff;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The homepage header is fixed, so the article needs to clear it. */
.page-main { padding-top: 72px; }

.page-article {
  max-width: 74ch;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
@media (min-width: 768px) { .page-article { padding: 4rem 2rem 6rem; } }

/* ── Breadcrumbs ────────────────────────────────────────────────────── */
.crumbs {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* #6d758c measured 4.19:1 on #060e20 — under the 4.5 minimum for small text. */
  color: #8b93ad;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.crumbs a { color: #8b93ad; text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: #00f5d4; }
.crumbs [aria-current] { color: #a3aac4; }

/* ── Page head ──────────────────────────────────────────────────────── */
.page-kicker {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #00f5d4;
  border: 1px solid rgba(99, 102, 241, .25);
  background: rgba(99, 102, 241, .07);
  padding: .35rem .8rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.page-head h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  margin: 0 0 1.1rem;
}
.page-lede {
  font-size: clamp(1.02rem, 2.3vw, 1.22rem);
  line-height: 1.62;
  color: #a3aac4;
  margin: 0 0 1rem;
}
.page-head { border-bottom: 1px solid rgba(64, 72, 93, .35); padding-bottom: 2.25rem; margin-bottom: 1rem; }

/* ── Body sections ──────────────────────────────────────────────────── */
.content-section { margin-top: 3rem; }
.content-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  margin: 0 0 1.1rem;
  color: #fff;
}
.content-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 2rem 0 .75rem;
  color: #e0e7ff;
}
.content-section p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #b9c0d6;
  margin: 0 0 1.1rem;
}
.content-section p strong { color: #e0e7ff; font-weight: 700; }
.content-section a { color: #00f5d4; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.content-section a:hover { color: #fff; }

.content-list { list-style: none; padding: 0; margin: 1.25rem 0; }
.content-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  line-height: 1.65;
  color: #b9c0d6;
}
.content-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00f5d4;
  box-shadow: 0 0 8px rgba(0, 245, 212, .5);
}

/* ── Tables — must scroll inside themselves, never widen the page ───── */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid rgba(64, 72, 93, .4); border-radius: 12px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 380px; }
.table-wrap th {
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8b93ad;
  padding: .85rem 1rem;
  background: rgba(15, 25, 48, .8);
  border-bottom: 1px solid rgba(64, 72, 93, .4);
}
.table-wrap td { padding: .85rem 1rem; border-bottom: 1px solid rgba(64, 72, 93, .22); color: #b9c0d6; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td strong { color: #22c55e; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq {
  border: 1px solid rgba(64, 72, 93, .38);
  border-radius: 12px;
  padding: 0 1.1rem;
  margin-bottom: .7rem;
  background: rgba(15, 25, 48, .45);
}
.faq summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: #e0e7ff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: #00f5d4; font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.faq[open] summary::after { content: '–'; }
.faq p { padding-bottom: 1rem; margin: 0; color: #a3aac4; line-height: 1.7; }

/* ── Related cards ──────────────────────────────────────────────────── */
.rel-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
.rel-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.25rem;
  border: 1px solid rgba(64, 72, 93, .4);
  border-radius: 14px;
  background: rgba(15, 25, 48, .5);
  text-decoration: none !important;
  transition: border-color .25s, transform .25s, background .25s;
}
.rel-card:hover { border-color: rgba(0, 245, 212, .45); transform: translateY(-2px); background: rgba(20, 31, 56, .7); }
.rel-kicker { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: #00f5d4; font-weight: 700; }
.rel-card strong { font-family: 'Space Grotesk', sans-serif; color: #e0e7ff; font-size: 1.02rem; line-height: 1.35; }
.rel-desc { font-size: .88rem; color: #8b93ad; line-height: 1.55; }

/* ── CTA ────────────────────────────────────────────────────────────── */
.page-cta {
  border: 1px solid rgba(99, 102, 241, .28);
  background: linear-gradient(140deg, rgba(99, 102, 241, .12), rgba(0, 245, 212, .05));
  border-radius: 18px;
  padding: 2rem 1.5rem;
  margin-top: 3.5rem;
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.btn-primary, .btn-ghost {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s, filter .2s;
}
.btn-primary { background: linear-gradient(120deg, #6366f1, #00f5d4); color: #060e20 !important; }
.btn-ghost { border-color: rgba(64, 72, 93, .7); color: #e0e7ff !important; background: transparent; }
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Contact form ───────────────────────────────────────────────────── */
.contact-form { display: grid; gap: 1.1rem; margin: 1.5rem 0 2.5rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #a3aac4; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.field .opt { color: #6d758c; font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  background: rgba(9, 19, 40, .9);
  border: 1px solid rgba(64, 72, 93, .6);
  border-radius: 10px;
  padding: .8rem .9rem;
  color: #e0e7ff;
  font-family: inherit;
  font-size: .97rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff6e84; }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .9rem; margin: .25rem 0 0; min-height: 1.2em; }
.form-note.ok { color: #22c55e; }
.form-note.err { color: #ff6e84; }
.contact-alt { border-top: 1px solid rgba(64, 72, 93, .35); padding-top: 1.75rem; }

/* ── Focus visibility (keyboard users) ──────────────────────────────── */
.page-body a:focus-visible,
.page-body button:focus-visible,
.page-body summary:focus-visible { outline: 2px solid #00f5d4; outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rel-card, .btn-primary, .btn-ghost { transition: none; }
  .rel-card:hover, .btn-primary:hover, .btn-ghost:hover { transform: none; }
}