:root {
  --violet: #8b5cf6;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --bg: #05050b;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(124,58,237,0.22) 0%, transparent 55%),
    radial-gradient(100% 70% at 0% 10%, rgba(59,130,246,0.16) 0%, transparent 50%);
  background-attachment: fixed;
}
h1,h2,h3,.font-display { font-family: "Space Grotesk","Inter",sans-serif; letter-spacing: -0.025em; }

::selection { background: rgba(139,92,246,0.35); }

/* ---------- Backgrounds ---------- */
.grid-fade {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 20%, transparent 72%);
}
.orb { position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; }
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Text ---------- */
.text-gradient {
  background: linear-gradient(100deg,#c4b5fd 0%,#a78bfa 35%,#60a5fa 75%,#38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-glow { text-shadow: 0 0 40px rgba(139,92,246,0.45); }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(20,16,40,0.6), rgba(10,8,22,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* Product card with animated border glow */
.pcard { position: relative; border-radius: 1.25rem; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.pcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .35s; opacity: .8;
}
.pcard::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; transition: opacity .35s;
  background: radial-gradient(120% 120% at 50% 0%, rgba(139,92,246,0.28), transparent 60%);
  z-index: -1;
}
.pcard:hover { transform: translateY(-6px); }
.pcard:hover::after { opacity: 1; }
.pcard:hover::before {
  background: linear-gradient(140deg, rgba(167,139,250,0.7), rgba(96,165,250,0.35) 50%, transparent 80%);
  opacity: 1;
}

/* 3D icon: screen-blend removes its black background */
.icon3d { mix-blend-mode: screen; filter: saturate(1.15) contrast(1.05); }
.icon-wrap { position: relative; }
.icon-wrap::before {
  content: ""; position: absolute; inset: 8% 8% 14% 8%; border-radius: 9999px;
  background: radial-gradient(circle, rgba(139,92,246,0.40), transparent 65%);
  filter: blur(14px); z-index: 0;
}

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative; background: linear-gradient(100deg,#7c3aed,#6366f1 55%,#3b82f6);
  box-shadow: 0 10px 34px -10px rgba(124,58,237,0.75), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .22s, box-shadow .22s, filter .22s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 16px 44px -10px rgba(124,58,237,0.9), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
  transition: border-color .22s, background .22s, transform .22s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(167,139,250,0.6); background: rgba(139,92,246,0.1); transform: translateY(-2px); }

/* ---------- Logo / hero ---------- */
.logo-hero { filter: drop-shadow(0 0 50px rgba(139,92,246,0.6)) drop-shadow(0 0 90px rgba(59,130,246,0.35)); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty-2 { animation: floaty 7.5s ease-in-out infinite; }
.floaty-3 { animation: floaty 9s ease-in-out infinite; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.ring-spin { animation: spinSlow 40s linear infinite; }
.ring-spin-rev { animation: spinSlow 55s linear infinite reverse; }

@keyframes pulseGlow { 0%,100%{opacity:.6} 50%{opacity:1} }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

.pill { border: 1px solid rgba(139,92,246,0.35); background: rgba(139,92,246,0.1); backdrop-filter: blur(8px); }

.count-box {
  background: linear-gradient(180deg, rgba(139,92,246,0.12), rgba(10,8,22,0.4));
  border: 1px solid rgba(139,92,246,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ---------- Reveal ---------- */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .7s cubic-bezier(.21,.6,.35,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal.in{animation:none;opacity:1}
  .floaty,.floaty-2,.floaty-3,.ring-spin,.ring-spin-rev,.pulse-glow{animation:none}
  html{scroll-behavior:auto}
}

/* ===================== Arena Pay — additions ===================== */

/* Inputs */
.field {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .2s, background .2s;
}
.field:focus { outline: none; border-color: rgba(167,139,250,0.7); background: rgba(139,92,246,0.06); }
.field::placeholder { color: rgba(148,163,184,0.6); }

/* Category chip */
.chip { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); transition: all .2s; white-space: nowrap; }
.chip:hover { border-color: rgba(167,139,250,0.5); }
.chip.active { background: linear-gradient(100deg,#7c3aed,#3b82f6); border-color: transparent; box-shadow: 0 6px 22px -8px rgba(124,58,237,0.8); }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:600; padding:.2rem .6rem; border-radius:9999px; letter-spacing:.02em; }
.badge-confirmed { background: rgba(16,185,129,0.14); color:#6ee7b7; border:1px solid rgba(16,185,129,0.3); }
.badge-pending { background: rgba(245,158,11,0.14); color:#fcd34d; border:1px solid rgba(245,158,11,0.3); }
.badge-failed { background: rgba(244,63,94,0.14); color:#fca5b1; border:1px solid rgba(244,63,94,0.3); }
.badge-proto { background: rgba(56,189,248,0.12); color:#7dd3fc; border:1px solid rgba(56,189,248,0.3); }

/* Gift / payment card visual */
.pay-card {
  position: relative; aspect-ratio: 1.586/1; border-radius: 1.1rem; overflow: hidden;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.15);
  padding: 1.1rem 1.25rem; display:flex; flex-direction:column; justify-content:space-between;
  isolation: isolate;
}
.pay-card::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background: var(--card-grad, linear-gradient(135deg,#4c1d95,#6d28d9 45%,#1d4ed8));
}
.pay-card::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.25), transparent 55%),
              radial-gradient(90% 70% at 0% 100%, rgba(0,0,0,0.35), transparent 60%);
}
.pay-card.tone-visa { --card-grad: linear-gradient(135deg,#1e3a8a,#2563eb 45%,#38bdf8); }
.pay-card.tone-master { --card-grad: linear-gradient(135deg,#7c2d12,#db2777 45%,#f59e0b); }
.pay-card.tone-gaming { --card-grad: linear-gradient(135deg,#3730a3,#7c3aed 45%,#c026d3); }
.pay-card.tone-stream { --card-grad: linear-gradient(135deg,#0f172a,#0e7490 45%,#22d3ee); }
.pay-card.tone-software { --card-grad: linear-gradient(135deg,#134e4a,#0f766e 45%,#34d399); }
.pay-card.tone-service { --card-grad: linear-gradient(135deg,#312e81,#4f46e5 45%,#818cf8); }
.chip-emv {
  width: 2.1rem; height: 1.55rem; border-radius: .3rem;
  background: linear-gradient(140deg,#fde68a,#f59e0b 60%,#b45309);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  position: relative; overflow:hidden;
}
.chip-emv::before, .chip-emv::after { content:""; position:absolute; background: rgba(0,0,0,0.25); }
.chip-emv::before { left:33%; right:33%; top:0; bottom:0; width:1px; }
.chip-emv::after { top:33%; bottom:33%; left:0; right:0; height:1px; }
.contactless { width:1.15rem; height:1.15rem; opacity:.9; }

/* QR mock */
.qr-mock {
  display:grid; grid-template-columns: repeat(9,1fr); grid-template-rows: repeat(9,1fr);
  width: 132px; height:132px; padding:10px; background:#fff; border-radius:.85rem; gap:2px;
}
.qr-mock > span { background:#0a0816; border-radius:1px; }
.qr-mock > span.off { background: transparent; }

/* Bar chart (pure CSS) */
.bars { display:flex; align-items:flex-end; gap:6px; height:120px; }
.bars > span { flex:1; border-radius:6px 6px 2px 2px; background: linear-gradient(180deg,#a78bfa,#3b82f6); opacity:.85; transition: transform .25s; }
.bars > span:hover { opacity:1; transform: scaleY(1.03); }

/* Steps indicator */
.step { display:flex; align-items:center; gap:.5rem; }
.step-dot {
  width:1.9rem; height:1.9rem; border-radius:9999px; display:grid; place-items:center;
  font-size:.75rem; font-weight:700; border:1px solid rgba(255,255,255,0.16); color:#94a3b8;
  background: rgba(255,255,255,0.03); transition: all .25s;
}
.step.active .step-dot, .step.done .step-dot {
  border-color: transparent; color:#fff; background: linear-gradient(100deg,#7c3aed,#3b82f6);
  box-shadow: 0 6px 18px -6px rgba(124,58,237,0.9);
}
.step-line { flex:1; height:1px; background: rgba(255,255,255,0.14); min-width: 1.5rem; }
.step.done + .step-line, .step-line.done { background: linear-gradient(90deg,#7c3aed,#3b82f6); }

/* Modal */
.modal-backdrop { background: rgba(3,2,10,0.72); backdrop-filter: blur(6px); }
.modal-panel { animation: modalIn .28s cubic-bezier(.21,.7,.35,1); }
@keyframes modalIn { from{opacity:0; transform: translateY(18px) scale(.98);} to{opacity:1; transform:none;} }

/* Toast */
#toastHost { position: fixed; top: 5.5rem; right: 1rem; z-index: 80; display:flex; flex-direction:column; gap:.6rem; }
.toast {
  min-width: 240px; max-width: 320px; padding: .8rem 1rem; border-radius: .9rem;
  animation: toastIn .3s cubic-bezier(.21,.7,.35,1);
}
@keyframes toastIn { from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:none;} }
.toast.leaving { animation: toastOut .25s ease forwards; }
@keyframes toastOut { to{opacity:0; transform:translateX(24px);} }

/* Skeleton loading */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}

/* Spinner */
.spinner { width:2.6rem; height:2.6rem; border-radius:9999px; border:3px solid rgba(255,255,255,0.15); border-top-color:#a78bfa; animation: spinSlow 0.8s linear infinite; }

/* Flow arrow column (OPN Pay diagram) */
.flow-line { width:1px; height:2rem; background: linear-gradient(180deg, rgba(167,139,250,0.7), rgba(56,189,248,0.5)); margin: 0 auto; }