/* =====================================================================
 * ThinkSmart Diagnostic — Innov8 design scheme
 * Dark theme · orange accent · Archivo / Inter / JetBrains Mono
 * (extracted from innov8.asia)
 *
 * This file loads AFTER the Tailwind CDN, and the utility overrides near
 * the bottom use a `body` prefix so they reliably beat Tailwind's
 * single-class utilities regardless of injection order.
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Innov8 palette */
  --bg: #0a0a0a;
  --bg-2: #000000;
  --panel: #141414;
  --panel-2: #1a1a1a;
  --border: #262626;
  --border-2: #333333;
  --ink: #fafaf7;
  --muted: #d4d4ce;
  --muted-2: #8a8a85;
  --muted-3: #6f6f6a;

  --brand: #ff7a00;        /* Innov8 orange (was 888 red) */
  --brand-dark: #e66e00;
  --brand-tint: rgba(255, 122, 0, 0.12);
  --brand-line: rgba(255, 122, 0, 0.38);
  --ring: rgba(255, 122, 0, 0.45);

  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  color-scheme: dark;               /* native controls (date picker) render dark */
}

/* Heavy Archivo for headlines, logos, and big numbers (.font-black) */
body h1, body h2, body h3, body .font-black, body .font-heavy {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}
body h1 { font-weight: 900; }

/* Uppercase = the Innov8 mono label treatment */
body .uppercase {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  font-weight: 500;
}

/* Gradient hero backdrop — dark with subtle orange glow */
.hero-bg {
  background:
    radial-gradient(1100px 480px at 85% -12%, rgba(255,122,0,0.14), transparent 60%),
    radial-gradient(820px 460px at -10% 8%, rgba(255,122,0,0.06), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--brand);
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 10px 30px -10px var(--ring);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid var(--border-2);
  color: var(--muted);
  background: transparent;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---- Orange chip / badge (mono) ---- */
.chip-gold {
  background: var(--brand-tint);
  color: #ffb27a;
  border: 1px solid var(--brand-line);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Progress bar ---- */
.progress-fill { transition: width .5s cubic-bezier(.2,.7,.2,1); background: var(--brand) !important; }

/* ---- Chat bubbles ---- */
.bubble-coach { background: var(--panel-2); color: var(--ink); }
.bubble-user  { background: var(--brand); color: #0a0a0a; }

/* ---- Recommended tier / selected option ---- */
.tier-recommended {
  border-color: var(--brand) !important;
  box-shadow: 0 22px 60px -24px var(--ring);
  position: relative;
}

/* ---- Animations ---- */
@keyframes fadeUp { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.fade-up { animation: fadeUp .4s ease both; }

.typing span {
  display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:9999px;
  background: var(--muted-2); animation: blink 1.2s infinite both;
}
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.2;} 40%{opacity:1;} }

.trust-bar { backdrop-filter: saturate(180%) blur(6px); }

/* =====================================================================
 * Innov8 wordmark lockup  (INN⏻V8)
 * ===================================================================== */
[data-innov8-logo].innov8-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.innov8-mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
}
.innov8-word { display: inline-block; }
.innov8-power {
  width: 0.9em;
  height: 0.9em;
  color: var(--brand);
  margin: 0 -0.07em;              /* tuck the "O" tight against the letters */
  transform: translateY(0.03em);
}
.innov8-divider {
  width: 1px;
  height: 1.15rem;
  background: var(--border-2);
}
.innov8-sub {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted-2);
  white-space: nowrap;
}

/* =====================================================================
 * Mono ticker strip
 * ===================================================================== */
[data-innov8-ticker].ticker,
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.85rem 0;
}
.ticker-sep {
  color: var(--brand);
  margin: 0 1.25rem;
  font-size: 0.6rem;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* =====================================================================
 * Floating Google Translate widget
 * ===================================================================== */
.gt-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 9999px;
  padding: 7px 13px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.gt-float .gt-globe { font-size: 16px; line-height: 1; }

/* Trim Google's default gadget chrome; keep just the language <select>. */
.gt-float .goog-te-gadget { font-size: 0 !important; color: transparent !important; }
.gt-float .goog-te-gadget span { display: none !important; }
.gt-float .goog-te-gadget .goog-te-combo {
  margin: 0 !important;
  padding: 4px 8px;
  border-radius: 8px;
  background: #111;
  color: var(--ink);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
}

/* Stop the injected top banner from pushing the page down. */
.goog-te-banner-frame,
.skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }

/* =====================================================================
 * Floating WhatsApp button
 * ===================================================================== */
.wa-float {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  border-radius: 9999px;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.55);
  transition: transform .12s ease, filter .2s ease;
}
.wa-float:hover { transform: translateY(-2px); filter: brightness(1.05); }
.wa-float:active { transform: translateY(0); }

/* =====================================================================
 * Tailwind utility overrides -> dark theme
 * (body-prefixed for specificity so they win over the CDN utilities)
 * ===================================================================== */
body .bg-white        { background-color: var(--panel); }
body .bg-slate-50     { background-color: var(--panel-2); }
body .bg-slate-100    { background-color: #1f1f1f; }
body .bg-slate-200    { background-color: var(--border); }

body .text-slate-900  { color: var(--ink); }
body .text-slate-800  { color: #e6e6e1; }
body .text-slate-700  { color: var(--muted); }
body .text-slate-600  { color: #b6b6b0; }
body .text-slate-500  { color: var(--muted-2); }
body .text-slate-400  { color: var(--muted-3); }

body .border-slate-200 { border-color: var(--border); }
body .border-slate-100 { border-color: #1c1c1c; }

/* Status chips tuned for dark */
body .bg-green-50  { background-color: #0f2a17; }
body .text-green-800 { color: #6ee7a8; }
body .text-green-700 { color: #6ee7a8; }
body .bg-amber-50  { background-color: #2a1f08; }
body .text-amber-800 { color: #fbbf24; }
body .text-red-600 { color: #fca5a5; }

/* Form controls on dark */
body input, body textarea, body select {
  background-color: #111111;
  color: var(--ink);
  border-color: var(--border);
}
body input::placeholder, body textarea::placeholder { color: var(--muted-3); }

/* Star rating stays warm */
body .text-amber-400 { color: #ffb020; }