/* aiebo SAFE-AI — landing page styles (official aiebo branding) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* offset anchors for fixed header */
section[id], footer[id] { scroll-margin-top: 90px; }

/* ---------- brand typography ---------- */
/* Montserrat for headings/wordmark, Inter for body (per aiebo style guide) */
h1, h2, h3, h4, .font-display {
  font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* aiebo heading / primary-text color: Dark Blue Gray #19282d
   (map the existing slate-900 utility used on headings to brand ink) */
.text-slate-900 { color: #19282d; }
.hover\:text-slate-900:hover { color: #19282d; }

/* aiebo dark sections (How It Works, footer) use Dark Blue Gray #19282d */
.bg-slate-900 { background-color: #19282d; }

/* ---------- gradients ---------- */
.text-gradient {
  background: linear-gradient(120deg, #ed7035 0%, #d85a28 55%, #b6481f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-bg {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(237, 112, 53, 0.12), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, rgba(216, 90, 40, 0.08), transparent 55%),
    linear-gradient(180deg, #fbf7f4 0%, #ffffff 100%);
}

/* subtle grid backgrounds */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-grid-dark {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 30%, transparent 90%);
}

/* ---------- nav scrolled state ---------- */
#nav-inner.scrolled {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- dashboard bars ---------- */
.bar {
  width: 100%;
  height: 0;
  transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-frame.animate .bar { height: var(--h); }
.bar-flag { width: 100%; }

/* ---------- before/after tabs ---------- */
.ba-tab.is-active {
  background: linear-gradient(120deg, #ed7035, #d85a28);
  color: #fff;
  box-shadow: 0 6px 16px rgba(237, 112, 53, 0.28);
}

/* ---------- FAQ accordion ---------- */
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-trigger:hover .faq-icon { transform: scale(1.15); }
.faq-item.is-open .faq-trigger:hover .faq-icon { transform: rotate(45deg) scale(1.15); }

/* ---------- live demo step states ---------- */
.demo-step.is-checking {
  border-color: #f6c2a7;
  background: #fdf3ee;
}
.demo-step.is-done {
  border-color: #a7f3d0;
  background: #ecfdf5;
}
.demo-step.is-checking .step-icon,
.demo-step.is-checking .step-label { color: #d85a28; }
.demo-step.is-done .step-icon,
.demo-step.is-done .step-label { color: #059669; }
#demo-verdict.is-visible { opacity: 1; }

/* ---------- misc ---------- */
::selection { background: #f6c2a7; color: #6f2d15; }