/* ------------------------------------------------------------------
   HFT LIVE — landing page additions
   Loaded after the compiled bundle stylesheet. Supplies the handful of
   utilities the bundle did not ship with, plus bespoke styling for the
   hero headline, the Ekion Engine panel and the FAQ accordion.
   ------------------------------------------------------------------ */

/* ---- Hero ---- */
.hero-title {
  font-size: clamp(2.125rem, 7.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-fact {
  font-size: clamp(1.125rem, 4.4vw, 1.5rem);
  line-height: 1.15;
  hyphens: manual;
  text-wrap: balance;
}
/* Decorative hero pills only appear once the viewport has clear side margins */
@media (min-width: 1280px) { .xl\:block { display: block; } }
.hero-nots { gap: 0.5rem 1.25rem; }
.hero-nots li { display: inline-flex; align-items: center; gap: 1.25rem; }
.hero-nots li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 92, 88, 0.7);
}

/* ---- Utilities missing from the compiled bundle ---- */
.mt-7 { margin-top: 1.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }
.w-1 { width: 0.25rem; }
.gap-4 { gap: 1rem; }
.items-start { align-items: flex-start; }
.space-y-4 > :not(:last-child) { margin-bottom: 1rem; }
@media (min-width: 640px) {
  .sm\:p-5 { padding: 1.25rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 1.2; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:items-center { align-items: center; }
}

/* ---- Ekion Engine panel ---- */
.ek-grid {
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 100%);
}
.ek-card { transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ek-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(to right, transparent, rgba(255, 92, 88, 0.55), transparent);
}
@media (hover: hover) {
  .ek-card:hover { border-color: rgba(255, 92, 88, 0.4); transform: translateY(-2px); }
}
.ek-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.ek-flow li { display: inline-flex; align-items: center; gap: 1rem; }
.ek-flow li + li::before { content: "\2192"; color: #ff5c58; font-weight: 400; }
.ek-flow li:last-child { color: #ff5c58; }

/* ---- FAQ accordion (native <details>) ---- */
.faq { display: grid; gap: 0.75rem; }
.faq-item {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] { border-color: rgba(255, 92, 88, 0.35); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 1rem; }
.faq-icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 92, 88, 0.5);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #ff5c58;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-icon::before { width: 0.5rem; height: 1px; }
.faq-icon::after { width: 1px; height: 0.5rem; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #a1a1aa;
}

@media (prefers-reduced-motion: reduce) {
  .ek-card, .ek-card:hover { transform: none; }
  .faq-icon::before, .faq-icon::after, .faq-item { transition: none; }
}