/* XAUVORA AI sales website v2.2 — futuristic dark theme, mixed design:
   v2.2: wide layout (content column min(1440px, 94vw)) + performance
   pass (no animated blur filters, backdrop-filter only on the hero
   glass card and price chips, cheaper canvas) — same look, faster.
   aurora/mesh background + headings + plan cards (design C), live-chart
   hero canvas + ticker + price chips (design A), glass hero dashboard
   (design B).
   Palette: bg #070B14, secondary #0C1220, cards #111A2B (glass),
   accent cyan #00E5FF, violet #8B5CF6, success #22C55E,
   text #F8FAFC, muted #94A3B8. No external assets — works offline. */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root {
  --bg: #070B14;
  --bg2: #0C1220;
  --card: #111A2B;
  --card2: #16223A;
  --border: #1E2A44;
  --border-glow: rgba(0, 229, 255, 0.35);
  --text: #F8FAFC;
  --muted: #94A3B8;
  --cyan: #00E5FF;
  --cyan-dark: #062A33;
  --violet: #8B5CF6;
  --green: #22C55E;
  --red: #FF6B6B;
  --amber: #FFC24B;
  --gold: #00E5FF;   /* legacy class alias -> cyan accent */
  --gold2: #7DF3FF;
  --radius: 14px;
  --wrap: min(1440px, 94vw);   /* public content column (v2.2 wide layout) */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Aurora / mesh background (design C) — shared by every page.
   Fixed layers at z-index -1: above the body background, below content. */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* v2.2: no filter: blur() here — an animated blur on full-screen blobs
   forces a repaint every frame. The radial gradients fade to transparent
   on their own, giving the same soft edge for free; only transform moves. */
.aurora .blob { position: absolute; border-radius: 50%; opacity: 0.5; will-change: transform; }
.aurora .b1 { width: 560px; height: 560px; background: radial-gradient(circle, rgba(0, 184, 212, 0.9) 0%, rgba(0, 184, 212, 0.38) 42%, transparent 70%); top: -160px; left: -120px; animation: drift1 26s ease-in-out infinite alternate; }
.aurora .b2 { width: 640px; height: 640px; background: radial-gradient(circle, rgba(109, 40, 217, 0.9) 0%, rgba(109, 40, 217, 0.38) 42%, transparent 70%); top: 6%; right: -200px; animation: drift2 32s ease-in-out infinite alternate; }
.aurora .b3 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(14, 116, 144, 0.9) 0%, rgba(14, 116, 144, 0.38) 42%, transparent 70%); bottom: -180px; left: 34%; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(150px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-170px, 130px) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-120px, -90px) scale(1.2); } }
.gridlines {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}
a { color: var(--cyan); }
h1, h2, h3 { line-height: 1.2; margin: 0.4em 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 1.2em; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.small-note { color: var(--muted); font-size: 0.88rem; }
.gold { color: var(--cyan); }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }
.center { text-align: center; }
.mono { font-family: Consolas, monospace; word-break: break-all; }

/* Header */
.announcement {
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--violet));
  color: #06121A; text-align: center; font-weight: 700; padding: 8px 12px;
}
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  /* v2.2: inner content aligns with the wide content column; no
     backdrop-filter on the sticky header (it repaints on every scroll). */
  padding: 14px max(22px, calc((100vw - min(1440px, 94vw)) / 2 + 20px));
  border-bottom: 1px solid var(--border);
  background: rgba(7, 11, 20, 0.97); position: sticky; top: 0; z-index: 40;
}
.brand {
  color: var(--cyan); font-weight: 800; font-size: 1.25rem; text-decoration: none;
  letter-spacing: 1.5px; text-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
  display: inline-flex; align-items: center; gap: 10px;
}
.brand-mark { height: 34px; width: auto; border-radius: 7px; display: block; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; }
.site-nav a { color: var(--text); text-decoration: none; margin-left: 18px; font-weight: 600; font-size: 0.97rem; }
.site-nav a:hover { color: var(--cyan); }
.site-nav a.btn { margin-left: 18px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: 1.1rem; padding: 4px 10px; }

/* Live ticker tape (design A) — real feed prices only, under the nav */
.ticker { background: #05080F; border-bottom: 1px solid rgba(139, 92, 246, 0.25); overflow: hidden; height: 38px; display: flex; align-items: center; position: relative; z-index: 30; }
.ticker-track { display: flex; white-space: nowrap; animation: tickmove 36s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .tk { padding: 0 34px; font-size: 0.86rem; color: var(--muted); letter-spacing: 0.04em; }
.ticker .tk b { color: var(--text); font-weight: 700; }
.ticker .up { color: var(--green); }
.ticker .dn { color: var(--red); }
@keyframes tickmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero (v2.1 mix): cinematic candle canvas + shade (A) over the aurora
   (C), oversized type (C), glass live-dashboard card (B), floating price
   chips (A) and cycling trade notification chips (B). */
.hero { position: relative; padding: 72px 20px 64px; max-width: var(--wrap); margin: 0 auto; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 480px at 28% 42%, rgba(7, 11, 20, 0.1), rgba(7, 11, 20, 0.62) 78%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.35), rgba(7, 11, 20, 0.12) 40%, rgba(7, 11, 20, 0.72));
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; align-items: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 9px; font-size: 0.8rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 7px 14px; border-radius: 999px; background: rgba(0, 229, 255, 0.06); margin-bottom: 24px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }
.hero-title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 6px; }
.hero-logo {
  width: min(290px, 72%); height: auto; display: block; margin: 0 0 20px;
  border-radius: 16px; border: 1px solid rgba(255, 194, 75, 0.35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 194, 75, 0.14);
}
.hero-tagline {
  color: var(--amber); font-size: 1.22rem; font-weight: 700;
  letter-spacing: 0.4px; margin: 8px 0 0;
}
.hero-sub { color: var(--muted); font-size: 1.16rem; max-width: 54ch; margin: 14px 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta .btn { margin: 0; }
.hero-mini { display: flex; gap: 28px; margin-top: 38px; color: var(--muted); font-size: 0.88rem; flex-wrap: wrap; }
.hero-mini b { color: var(--text); display: block; font-size: 1.08rem; }
.shimmer {
  background: linear-gradient(100deg, #ffffff 15%, var(--cyan) 38%, var(--violet) 55%, var(--cyan) 70%, #ffffff 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* Glass live-dashboard card (design B) */
.hero-stage { position: relative; }
.glass-dash {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px 24px 18px;
  background: rgba(17, 26, 43, 0.55); border: 1px solid rgba(0, 229, 255, 0.18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(0, 229, 255, 0.04);
}
.glass-dash::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.7), transparent);
}
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dash-title { font-weight: 800; letter-spacing: 0.1em; font-size: 0.92rem; }
.live-badge { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--green); font-weight: 700; }
.dash-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fig { background: rgba(7, 11, 20, 0.55); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 13px; padding: 13px 15px; }
.fig-label { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fig-value { display: block; font-size: 1.32rem; font-weight: 800; margin-top: 3px; }
.fig-value.cy { color: var(--cyan); }
.dash-eq { background: rgba(7, 11, 20, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 13px; padding: 12px 12px 6px; margin-bottom: 6px; }
.dash-eq-svg { width: 100%; height: 110px; display: block; }
#heroEqPath { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; }
#heroEqPath.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 2.4s ease forwards; }
/* v2.2: no drop-shadow filter — this dot moves every 40 ms and a filter
   would repaint on every move; the light stroke gives the same pop. */
#heroEqDot { fill: var(--violet); stroke: #F8FAFC; stroke-width: 1.6; }
.dash-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 0.78rem; padding-top: 12px; }
.dash-updated { color: var(--muted); font-size: 0.78rem; margin: 6px 0 0; }
.dash-empty { text-align: center; padding: 30px 10px 22px; }
.dash-empty-title { font-size: 1.15rem; font-weight: 800; color: var(--cyan); margin: 0 0 8px; }
.dash-empty p { color: var(--muted); margin: 0; }

/* Trade notification chips cycling around the glass card (design B) */
.note-chip {
  position: absolute; z-index: 5; display: flex; gap: 9px; align-items: center; max-width: 290px;
  background: rgba(12, 18, 32, 0.92); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 12px;
  padding: 10px 14px; font-size: 0.83rem; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateX(26px); pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.note-chip.show { opacity: 1; transform: none; }
.note-chip small { display: block; color: var(--muted); font-weight: 400; font-size: 0.72rem; }
.note-chip .note-ic { font-size: 1rem; }
.note-1 { top: -22px; right: 12%; }
.note-2 { bottom: -24px; left: 26px; border-color: rgba(34, 197, 94, 0.4); }
.note-3 { top: 38%; right: -8px; border-color: rgba(139, 92, 246, 0.45); }

/* Floating glass price chips (design A) — real feed prices only */
.price-chips { position: relative; z-index: 2; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 48px; }
.price-chip {
  min-width: 220px; flex: 0 1 260px; border-radius: 14px; padding: 13px 16px;
  background: rgba(17, 26, 43, 0.62); border: 1px solid rgba(0, 229, 255, 0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(0, 229, 255, 0.05);
  animation: bob 6s ease-in-out infinite;
}
.price-chip.pc-2 { animation-delay: -2s; }
.price-chip.pc-3 { animation-delay: -4s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pc-sym { display: block; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.pc-price { display: block; font-size: 1.42rem; font-weight: 800; margin: 2px 0; }
.pc-price .up { color: var(--green); }
.pc-price .dn { color: var(--red); }
.price-chip small { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; }

/* Buttons */
.btn {
  display: inline-block; padding: 11px 24px; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-gold, .btn-primary {
  background: linear-gradient(180deg, #5FF2FF, var(--cyan)); color: #04222B;
  box-shadow: 0 0 0 rgba(0, 229, 255, 0);
}
.btn-gold:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 229, 255, 0.35); }
.btn-violet { background: linear-gradient(180deg, #A78BFA, var(--violet)); color: #160B33; }
.btn-violet:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(139, 92, 246, 0.35); }
.btn-ghost { background: rgba(17, 26, 43, 0.6); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-danger { background: #3A1220; color: #FF9A9A; border-color: #6E2436; }
.btn-big { font-size: 1.1rem; padding: 14px 30px; }
.btn-small { padding: 6px 12px; font-size: 0.88rem; margin: 2px 0; }

/* Layout + glass cards */
.section { max-width: var(--wrap); margin: 0 auto; padding: 34px 20px; scroll-margin-top: 84px; }
.section.wide { max-width: var(--wrap); }
.section.narrow { max-width: 640px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 18px 0; }
.card {
  background: linear-gradient(180deg, rgba(22, 34, 58, 0.92), rgba(12, 18, 32, 0.96));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.1);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-glow); box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(0, 229, 255, 0.1); }
.card h3 { color: var(--cyan); margin-top: 0; }
.card p { color: var(--muted); margin-bottom: 0; }
.market-card .market-bid { font-size: 1.55rem; font-weight: 800; color: var(--text); margin: 2px 0; }
.stats-strip {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: var(--wrap); margin: 6px auto 0; padding: 10px 20px;
}
.stat {
  flex: 1 1 180px; text-align: center; background: rgba(17, 26, 43, 0.94); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 10px;
}
.stat-value { display: block; font-size: 1.7rem; font-weight: 800; color: var(--cyan); text-shadow: 0 0 16px rgba(0, 229, 255, 0.3); }
.stat-label { color: var(--muted); font-size: 0.9rem; }
.stats-note { width: 100%; text-align: center; color: var(--muted); }
/* Stat sparklines (design C) — drawn from real snapshot history */
.stat-spark { display: block; width: 100%; height: 34px; margin-top: 12px; }
.spark-line { fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; }
.stat:nth-child(2) .spark-line { stroke: var(--violet); }
.stat:nth-child(4) .spark-line { stroke: var(--violet); }
.reveal.inview .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 1.8s ease forwards 0.2s; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.step-num {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #5FF2FF, var(--cyan)); color: #04222B; font-weight: 800;
  align-items: center; justify-content: center; box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}
.step p { color: var(--muted); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 18px 0; }
/* Plans — animated rotating gradient borders (design C) */
.plan-card {
  --a: 0deg;
  border: 1.5px solid transparent; border-radius: 20px; padding: 22px; text-align: center; display: block;
  background:
    linear-gradient(180deg, rgba(22, 34, 58, 0.94), rgba(12, 18, 32, 0.97)) padding-box,
    conic-gradient(from var(--a), rgba(0, 229, 255, 0.55), rgba(139, 92, 246, 0.55), rgba(0, 229, 255, 0.07), rgba(139, 92, 246, 0.07), rgba(0, 229, 255, 0.55)) border-box;
  animation: spin-a 7s linear infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plans .plan-card:nth-child(2), .plans-grid .plan-card:nth-child(2) { animation-duration: 5.5s; }
.plans .plan-card:nth-child(3), .plans-grid .plan-card:nth-child(3) { animation-duration: 8.5s; }
.plans .plan-card:nth-child(4), .plans-grid .plan-card:nth-child(4) { animation-duration: 6.5s; }
@keyframes spin-a { to { --a: 360deg; } }
/* v2.2: the rotating border is paused while its section is still
   off-screen (the reveal observer adds .inview when it scrolls in). */
.reveal:not(.inview) .plan-card { animation-play-state: paused; }
.plan-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 229, 255, 0.18); }
.plan-card h3 { margin-top: 0; color: var(--cyan); }
.plan-price { font-size: 1.6rem; font-weight: 800; color: var(--cyan); margin: 6px 0; }
.plan-days { color: var(--muted); }
.plan-features { list-style: none; padding: 0; margin: 12px 0; color: var(--muted); font-size: 0.93rem; text-align: left; }
.plan-features li { padding: 3px 0 3px 18px; position: relative; }
.plan-features li::before { content: "▸"; color: var(--violet); position: absolute; left: 2px; }
.plan-card.selectable { cursor: pointer; }
.plan-card.selectable input { accent-color: var(--cyan); transform: scale(1.25); }
.plan-card.selectable:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan) inset; }
.plan-edit { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0; background: rgba(12, 18, 32, 0.6); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--cyan); background: rgba(0, 229, 255, 0.05); white-space: nowrap; }
td { color: var(--text); }
tr:last-child td { border-bottom: none; }
.badge { padding: 2px 9px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: #22345C; color: #C9D6F2; white-space: nowrap; }
.badge-pending_payment, .badge-awaiting_payment { background: #4D3D10; color: #FFD95E; }
.badge-paid_key_pending, .badge-awaiting_approval { background: #4D2410; color: #FFAB5E; }
.badge-info_requested { background: #2E1A56; color: #C4B0FF; }
.badge-key_sent, .badge-active, .badge-verified, .badge-approved, .badge-sent { background: #0E3A24; color: #4ADE80; }
.badge-pack_sent { background: #0B3050; color: #6FD3FF; }
.badge-cancelled, .badge-rejected, .badge-revoked, .badge-failed { background: #40222A; color: #FF9A9A; }
.badge-expired { background: #2A2F3A; color: #A8B3C7; }
.badge-suspended, .badge-pending, .badge-queued, .badge-open { background: #4D3410; color: #FFC24B; }
.badge-in_progress, .badge-waiting_customer { background: #123A4D; color: #7DD7FF; }
.badge-resolved, .badge-closed { background: #233028; color: #9FB8A6; }
.actions form { display: inline-block; margin: 1px; }

/* Forms */
.order-form { background: rgba(17, 26, 43, 0.96); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 18px 0; }
.field { display: block; margin: 12px 0; color: var(--muted); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field textarea, .field select, select, textarea, input[type="text"], input[type="email"], input[type="password"] {
  margin-top: 6px; padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: #0A1120; color: var(--text); font-size: 1rem;
}
.field input, .field textarea, .field select { width: 100%; }
.field.inline { display: inline-block; margin-right: 14px; }
.field.inline input { width: auto; }
.radio-row { display: block; margin: 8px 0; font-weight: 600; }
.radio-row input { accent-color: var(--cyan); }
.radio-row.danger { color: #FF9A9A; }
.filter-row { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filter-row select, .filter-row input { width: auto; margin-top: 0; }
.check-row { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-weight: 600; }
.check-row input { accent-color: var(--cyan); transform: scale(1.2); margin-top: 4px; }

/* Alerts, pay boxes, key box */
.alert { border-radius: var(--radius); padding: 14px 18px; margin: 14px 0; font-weight: 600; }
.alert-ok { background: #0C2E1E; border: 1px solid #1F6B41; color: #A9F0C6; }
.alert-error { background: #3D1620; border: 1px solid #7A2A3C; color: #FFB3BA; }
.alert-warn { background: #3D3312; border: 1px solid #7A641F; color: #FFE28A; }
.pay-box { background: var(--card); border: 1px solid var(--cyan); border-radius: var(--radius); padding: 20px; margin: 14px 0; box-shadow: 0 0 22px rgba(0, 229, 255, 0.12); }
.pay-text { white-space: pre-wrap; font-family: inherit; color: var(--text); margin: 0; }
.pay-addr { font-family: Consolas, monospace; word-break: break-all; font-size: 1.05rem; color: var(--cyan); }
.pay-qr-row { display: flex; gap: 16px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pay-qr { background: #fff; border-radius: 10px; padding: 6px; width: 132px; height: 132px; }
.pay-qr-side { flex: 1; min-width: 220px; }
.download-card { border-color: var(--gold, #f5c542); }
.key-once { background: #062A33; border: 2px solid var(--cyan); border-radius: var(--radius); padding: 20px; margin: 16px 0; box-shadow: 0 0 30px rgba(0, 229, 255, 0.25); }
.key-value { font-family: Consolas, monospace; font-size: 1.25rem; color: var(--cyan); word-break: break-all; }
.next-steps li { margin: 8px 0; }
.updated { color: var(--muted); }
.empty-state { background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 34px; text-align: center; margin: 20px 0; }
.prose { white-space: pre-wrap; color: var(--text); max-width: 78ch; }
.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--muted); margin: 1px; }

/* Chart */
.chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.chart { width: 100%; height: auto; display: block; }
.chart-area { fill: rgba(0, 229, 255, 0.12); stroke: none; }
.chart-line { fill: none; stroke: var(--cyan); stroke-width: 2.5; }
.chart-line.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 2.2s ease forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
svg.chart { height: auto; }

/* FAQ */
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 18px; margin: 10px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.faq-item p { color: var(--muted); }
.faq-edit { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 16px 14px; margin: 12px 0; }

/* Footer + WhatsApp */
.site-footer { border-top: 1px solid var(--border); padding: 28px max(22px, calc((100vw - min(1440px, 94vw)) / 2 + 20px)); margin-top: 30px; text-align: center; }
.footer-brand { color: var(--cyan); font-weight: 800; letter-spacing: 1px; }
.footer-links a { color: var(--muted); text-decoration: none; margin: 0 8px; font-size: 0.9rem; }
.footer-links a:hover { color: var(--cyan); }
.disclaimer { color: var(--muted); font-size: 0.86rem; max-width: 85ch; margin: 8px auto; }
.footer-small { color: var(--muted); font-size: 0.82rem; }
.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  background: #1FAA55; color: #fff; font-weight: 700; text-decoration: none;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.whatsapp-float:hover { background: #23C562; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.inview { opacity: 1; transform: none; }

/* Section headings with a line that grows in on reveal (design C) */
.sec-title { position: relative; display: inline-block; padding-bottom: 14px; }
.sec-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.reveal.inview .sec-title::after, .sec-title.inview::after { transform: scaleX(1); }

/* Customer dashboard layout */
.dash-layout { display: grid; grid-template-columns: 250px 1fr; gap: 0; max-width: 1400px; margin: 0 auto; align-items: start; }
.dash-sidebar {
  position: sticky; top: 66px; padding: 20px 14px; border-right: 1px solid var(--border);
  background: rgba(12, 18, 32, 0.94); min-height: calc(100vh - 66px);
}
.dash-sidebar .who { padding: 4px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dash-sidebar .who strong { display: block; font-size: 1.05rem; }
.dash-sidebar .who span { color: var(--muted); font-size: 0.88rem; }
.dash-nav a {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text); text-decoration: none; padding: 9px 10px; border-radius: 9px; font-weight: 600;
}
.dash-nav a:hover { background: rgba(0, 229, 255, 0.08); color: var(--cyan); }
.unread-badge { background: var(--violet); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.78rem; font-weight: 800; }
.dash-main { padding: 10px 22px 30px; min-width: 0; }
.dash-toggle { display: none; margin: 12px 0; }
.timeline { list-style: none; padding: 0; margin: 10px 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--border); position: relative; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.timeline li strong { color: var(--text); }
.msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; background: rgba(17, 26, 43, 0.7); }
.msg.admin-msg { border-color: rgba(139, 92, 246, 0.5); }
.msg.internal { border-color: #7A641F; background: rgba(61, 51, 18, 0.35); }
.msg .meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }
.note-item { display: block; text-decoration: none; color: var(--text); }
.note-item.unread { border-color: var(--border-glow); }

/* Admin */
.admin-body main { max-width: 1400px; margin: 0 auto; }
.admin-nav a { margin-left: 12px; font-size: 0.92rem; }

/* Home promo video */
.promo-video-wrap { display: flex; justify-content: center; margin-top: 18px; }
.promo-video {
  width: min(340px, 90vw); max-height: 70vh; aspect-ratio: 9 / 16;
  border-radius: var(--radius); border: 1px solid var(--border-glow);
  box-shadow: 0 0 32px rgba(0, 229, 255, 0.14), 0 0 64px rgba(139, 92, 246, 0.10);
  background: #000; object-fit: contain;
}
.promo-video-note { text-align: center; color: var(--muted); margin-top: 14px; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { text-align: center; }
  .hero-logo { margin-left: auto; margin-right: auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-mini { justify-content: center; }
  .price-chips { justify-content: center; }
}
@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; min-height: 0; border-right: none; border-bottom: 1px solid var(--border); display: none; }
  .dash-sidebar.open { display: block; }
  .dash-toggle { display: inline-block; }
  .dash-main { padding: 6px 14px 24px; }
}
@media (max-width: 760px) {
  .hero { padding: 52px 16px 44px; }
  .hero-title { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .note-chip { display: none; }
  .price-chip { flex: 1 1 100%; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 60px; right: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; z-index: 60; }
  .site-nav.open { display: block; }
  .site-nav a { display: block; margin: 8px 0; }
  h1 { font-size: 1.6rem; }
  table { min-width: 480px; }
  .aurora .blob { opacity: 0.32; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .chart-line.draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .hero-canvas { display: none; }
  .ticker-track { animation: none; }
  .sec-title::after { transform: scaleX(1); }
  .reveal .spark-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  #heroEqPath.draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Intro logo overlay — cinematic sunrise sequence (v2.7.2): a
   full-screen XAUVORA logo build a visitor sees when they first
   arrive. The overlay is display:none by default; app.js adds
   .intro-show only when this browser session has not seen it yet,
   so with JavaScript off it never appears and can never block the
   page. The mark is rebuilt as an inline SVG so every element
   animates on its own (all animations are transform/opacity only,
   running on the compositor at 60fps; the timeline lives entirely
   in CSS — no library is loaded):
     0.0-0.4s  darkness, a gold glow grows at the horizon
     0.5-1.9s  the crescent is in place and the golden sun RISES
               from behind it (clipped at the horizon line)
     0.8-2.1s  25 rays grow outward one by one, centre first
     2.0-2.7s  the arrow emerges from the sun and travels up to
               its logo position, leaving a soft glow trail
     2.5-3.4s  XAUVORA AI fades in, a gold sweep crosses the
               letters, the tagline fades in underneath
     3.3-3.8s  the SVG build crossfades to the official logo.png
     ~3.9s     app.js flies the official logo toward the header
               mark while the overlay fades over the loaded page. */
.intro-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse 62% 46% at 50% 46%, rgba(255, 194, 75, 0.10), transparent 70%), var(--bg);
  cursor: pointer;
}
.intro-overlay.intro-show { display: flex; opacity: 1; transition: opacity 0.55s ease; }
.intro-overlay.intro-hide { opacity: 0; }
.intro-stage {
  position: relative;
  width: min(560px, 90vw);
  aspect-ratio: 3 / 2;
  container-type: inline-size;
}
.intro-show .intro-stage { animation: introStageSettle 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) 2.3s both; }
.intro-build {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
}
.intro-show .intro-build { animation: introBuildOut 0.45s ease 3.3s both; }
.intro-svg { width: 61.2%; height: auto; display: block; margin-top: -5.7%; overflow: visible; }
.intro-official {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; pointer-events: none;
}
.intro-show .intro-official { animation: introOfficialIn 0.45s ease 3.3s both; }
.intro-horizon-glow { opacity: 0; }
.intro-show .intro-horizon-glow { animation: introGlowIn 1.3s ease 0.15s both; }
.intro-sun-disc { transform: translateY(172px); }
.intro-show .intro-sun-disc { animation: introSunRise 1.35s cubic-bezier(0.25, 0.7, 0.3, 1) 0.55s both; }
.intro-ray { opacity: 0; transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.intro-show .intro-ray { animation: introRayGrow 0.8s cubic-bezier(0.22, 0.8, 0.3, 1) var(--rd, 0.9s) both; }
.intro-crescent { opacity: 0; }
.intro-show .intro-crescent { animation: introCrescentIn 0.8s ease 0.45s both; }
.intro-arrow-shape { opacity: 0; transform: translateY(208px); }
.intro-show .intro-arrow-shape { animation: introArrowRise 0.75s cubic-bezier(0.22, 0.8, 0.3, 1) 1.95s both; }
.intro-arrow-trail { opacity: 0; }
.intro-show .intro-arrow-trail { animation: introTrailGlow 1.05s ease 1.95s both; }
.intro-wordmark {
  position: relative; overflow: hidden;
  margin-top: 1.2%;
  font-size: 34px; font-size: 7cqw;
  font-weight: 700; letter-spacing: 0.14em; white-space: nowrap;
  opacity: 0;
}
.intro-show .intro-wordmark { animation: introWordIn 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 2.5s both; }
.intro-wordmark .wm-gold {
  background: linear-gradient(100deg, #7c4d0e 0%, #caa13c 30%, #ffeeb0 50%, #caa13c 70%, #7c4d0e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro-wordmark .wm-ai { color: #f4f6fb; }
.intro-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 225, 160, 0.45) 52%, transparent 70%);
  transform: translateX(-130%);
}
.intro-show .intro-shine { animation: introShine 0.9s ease-in-out 2.85s both; }
.intro-tagline {
  margin: 1.6% 0 0;
  font-size: 15px; font-size: 2.7cqw;
  letter-spacing: 0.22em; color: #e9c25e; white-space: nowrap;
  opacity: 0;
}
.intro-show .intro-tagline { animation: introTagIn 0.6s ease 2.95s both; }
.intro-skip {
  position: absolute; right: 22px; bottom: 18px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(233, 194, 94, 0.75); opacity: 0;
}
.intro-show .intro-skip { animation: introTagIn 0.6s ease 0.9s both; }
@keyframes introGlowIn {
  from { opacity: 0; } to { opacity: 0.9; }
}
@keyframes introSunRise {
  from { transform: translateY(172px); } to { transform: translateY(0); }
}
@keyframes introRayGrow {
  from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); }
}
@keyframes introCrescentIn {
  from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }
}
@keyframes introArrowRise {
  0% { opacity: 0; transform: translateY(208px); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes introTrailGlow {
  0% { opacity: 0; } 35% { opacity: 0.85; } 100% { opacity: 0; }
}
@keyframes introWordIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes introShine {
  to { transform: translateX(130%); }
}
@keyframes introTagIn {
  from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }
}
@keyframes introStageSettle {
  from { transform: scale(1.045); } to { transform: scale(1); }
}
@keyframes introBuildOut {
  from { opacity: 1; } to { opacity: 0; }
}
@keyframes introOfficialIn {
  from { opacity: 0; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none !important; }
}