/* ==========================================================================
   Shared components — Febus AI
   Layered on theme.css. Class-based; markup from _includes/components/ui.njk.
   Style: 0.5px borders, no gradients/shadows, violet brand + teal conversion,
   mono eyebrows with a "// " prefix.
   ========================================================================== */

/* --- Eyebrow ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--teal);
  margin: 0 0 0.75rem;
}
.eyebrow::before { content: "// "; }

/* --- Section header ------------------------------------------------------ */
.section-head { max-width: 540px; margin-bottom: 3rem; }
.section-head h2 { margin: 0.5rem 0 0.75rem; }
.section-head__lead { font-size: 1rem; color: var(--ink-dim); margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

/* --- Section variants ---------------------------------------------------- */
.section--alt { background: var(--bg-soft); border-block: 0.5px solid var(--line); }
section[id] { scroll-margin-top: 76px; }

/* --- Responsive grid ----------------------------------------------------- */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* --- Card ---------------------------------------------------------------- */
.card {
  background: var(--bg-soft);
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card--featured { border: 2px solid var(--accent); }
.card__badge {
  position: absolute;
  top: -11px;
  right: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 99px;
}
.card__icon { font-size: 1.625rem; line-height: 1; margin-bottom: 0.5rem; }
.card__title { margin: 0; }
.card__body { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }
.card__link {
  margin-top: auto;
  padding-top: 0.4rem;
  color: var(--teal);
  font-size: 0.875rem;
  font-weight: 500;
}
.card__link:hover { color: var(--teal); opacity: 0.8; }

/* --- Stat ---------------------------------------------------------------- */
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  color: var(--ink-bright);
  line-height: 1;
  display: block;
}
.stat__label { color: var(--ink-dim); font-size: 0.8125rem; margin-top: 0.25rem; display: block; }

/* --- Pill / hero badge --------------------------------------------------- */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--teal);
  border: 0.5px solid #2a4a3e;
  padding: 6px 16px;
  border-radius: 99px;
}

/* --- Steps (process, left rule) ----------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.steps--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step {
  border-left: 2px solid var(--line-strong);
  padding: 0.25rem 0 0.25rem 1.375rem;
}
.step__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent-2); }
.step__title { margin: 0.5rem 0; font-size: 1.0625rem; }
.step__content p { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }

/* --- Tick list (deliverables) ------------------------------------------- */
.ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  font-size: 0.9rem;
}
.ticklist li { position: relative; padding-left: 1.6rem; color: var(--ink-dim); }
.ticklist li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); }

/* --- FAQ (native <details>, hairline list) ------------------------------ */
.faq { max-width: 720px; }
.faq__item { border-bottom: 0.5px solid var(--line); padding: 1.25rem 0; }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-bright);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.375rem; color: var(--ink-faint); transition: transform 0.2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0.875rem 0 0; font-size: 0.9375rem; color: var(--ink-dim); }

/* --- Service / project detail hero -------------------------------------- */
.service-hero__back { margin: 0 0 1.25rem; font-size: 0.85rem; }
.service-hero__back a { color: var(--ink-dim); }
.service-hero__back a:hover { color: var(--teal); }
.service-hero__tagline { font-size: 1.0625rem; color: var(--ink-dim); max-width: 52ch; }
.service-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(4rem, 10vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.hero .pill { margin-bottom: 1.5rem; }
.hero h1 { max-width: 640px; margin: 0 auto 1.125rem; }
.hero__lead { max-width: 480px; margin: 0 auto 2rem; font-size: 1.0625rem; color: var(--ink-dim); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-bottom: 3.5rem; }

/* --- Ticker (signature element) ----------------------------------------- */
.ticker {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-soft);
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.875rem 1.375rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  overflow: hidden;
}
.ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; animation: ticker-pulse 2s ease-in-out infinite; }
@keyframes ticker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ticker__label { color: var(--ink-faint); flex-shrink: 0; }
.ticker__task { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease; }
.ticker__task .check { color: var(--teal); margin-right: 0.5rem; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { padding-block: var(--section-y); border-top: 0.5px solid var(--line); }
.cta-band__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.cta-band__text h2 { margin: 0 0 0.875rem; }
.cta-band__text p { margin: 0 auto 1.75rem; color: var(--ink-dim); max-width: 48ch; }

/* --- Prose (long-form copy) --------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1rem; color: var(--ink-dim); }
.whitepaper__h { margin-top: 2.5rem; }

/* --- Contact form ------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  max-width: 680px;
  margin-top: 1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; color: var(--ink-dim); }
.form input,
.form textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.7rem 0.85rem;
}
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { resize: vertical; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ink-dim);
  font-size: 0.875rem;
}
.form__check input { width: auto; margin-top: 0.2rem; }
.form__check a { color: var(--accent-2); }
.form__status { grid-column: 1 / -1; margin: 0; min-height: 1.3em; font-weight: 500; }
.form__status.is-success { color: var(--teal); }
.form__status.is-error { color: var(--coral); }
.form__fallback { margin-top: 1.25rem; color: var(--ink-dim); }
.form__fallback a { color: var(--accent-2); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* --- Footer layout ------------------------------------------------------- */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.footer__logo { height: 24px; width: auto; margin-bottom: 0.6rem; }
.footer__email { margin: 0; color: var(--ink-dim); }
.footer__email a { color: var(--accent-2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; }

/* --- Back-to-top --------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--accent); color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 0.2s linear; transform: none; } }