Add integrated holo-style demo checkout to the sci-fi UI

[Copilot]

This updates the deployed sci-fi UI with a complete payment section integrated into the existing FormatX Pro page, instead of a disconnected mockup. The new checkout keeps the existing theme selector and ?theme=holo flow intact while adding a responsive, keyboard-accessible, non-live payment experience.

• Integrated checkout surface

  • Replaced the sparse payment block with a full checkout panel inside the existing Pro/documentation flow
  • Added order summary, billing cadence, plan selection, payment method selection, CTA, and supporting trust/help copy
  • Kept enterprise/support/legal entry points adjacent to the checkout path

• Client-side demo payment flow

  • Removed live checkout-session creation from the page flow
  • Switched to a safe demo interaction that validates locally and never submits or stores live payment data
  • Added mode-specific messaging for card demo vs. transfer/procurement flows

• Holographic UI + responsive behavior

  • Added checkout-specific layout and form styling aligned with the existing holographic visual system
  • Built a two-column summary/form layout that collapses cleanly on mobile
  • Preserved readability, focus states, and keyboard navigation across controls

• Checkout behavior

  • Added live summary updates for plan, billing cycle, and payment method
  • Added inline validation, consent gating, card field formatting, and success/error feedback
  • Hid card fields automatically for non-card payment modes

• Content alignment

  • Updated privacy/terms/support copy to reflect the demo-only checkout behavior and clarify that no live card processing occurs on this page

function updateSummary() {
  const plan = getSelectedPlan();
  const cycle = cycleSelect.value === 'annual' ? 'annual' : 'monthly';
  const method = getSelectedMethod();

  summaryPlanName.textContent = plan.name;
  summaryCycle.textContent = cycle === 'annual' ? 'Éves előfizetés' : 'Havi előfizetés';
  summaryPrice.textContent = `${formatPrice(cycle === 'annual' ? plan.annual : plan.monthly)}${cycle === 'annual' ? ' / év' : ' / hó'}`;
  summaryMethod.textContent = METHOD_LABELS[method];
}