:root {
  --radius: 0.875rem;
  --background: oklch(0.16 0.03 260);
  --foreground: oklch(0.97 0.005 260);
  --card: oklch(0.19 0.032 260);
  --card-foreground: oklch(0.97 0.005 260);
  --popover: oklch(0.18 0.03 260);
  --popover-foreground: oklch(0.97 0.005 260);
  --primary: oklch(0.78 0.19 160);
  --primary-foreground: oklch(0.15 0.03 260);
  --secondary: oklch(0.78 0.13 85);
  --secondary-foreground: oklch(0.15 0.03 260);
  --muted: oklch(0.24 0.025 260);
  --muted-foreground: oklch(0.72 0.02 260);
  --accent: oklch(0.78 0.19 160);
  --accent-foreground: oklch(0.15 0.03 260);
  --destructive: oklch(0.68 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 260);
  --border: oklch(0.28 0.02 260);
  --input: oklch(0.25 0.02 260);
  --ring: oklch(0.78 0.19 160);

  --bull: oklch(0.78 0.19 160);
  --bear: oklch(0.68 0.22 25);
  --gold: oklch(0.82 0.14 85);
  --grid-line: oklch(1 0 0 / 6%);

  --gradient-primary: linear-gradient(135deg, oklch(0.78 0.19 160), oklch(0.7 0.16 190));
  --gradient-gold: linear-gradient(135deg, oklch(0.82 0.14 85), oklch(0.72 0.15 60));
  --gradient-hero: radial-gradient(60% 60% at 30% 20%, oklch(0.78 0.19 160 / 18%), transparent 70%),
                   radial-gradient(50% 50% at 80% 60%, oklch(0.7 0.15 220 / 12%), transparent 70%);
  --shadow-glow: 0 0 40px oklch(0.78 0.19 160 / 30%);
  --shadow-elegant: 0 20px 60px -20px oklch(0 0 0 / 60%);
}

* { border-color: var(--border); box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Space Grotesk", "Sora", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }

/* ── Utility classes ── */

.text-gradient {
  background: linear-gradient(135deg, oklch(0.97 0.005 260), oklch(0.78 0.19 160));
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.text-gradient-gold {
  background: var(--gradient-gold);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.btn-primary-glow {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 24px -6px oklch(0.78 0.19 160 / 45%);
  transition: transform .2s ease, box-shadow .2s ease;
  border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-primary-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -6px oklch(0.78 0.19 160 / 60%);
}
.hero-bg { background: var(--gradient-hero); }

.gradient-border {
  position: relative; background: var(--card);
}
.gradient-border::before {
  content: ""; position: absolute; inset: 0; padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, oklch(0.78 0.19 160 / 60%), oklch(0.82 0.14 85 / 40%), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.blob {
  filter: blur(60px);
  animation: blob-drift 14s ease-in-out infinite;
}

.marquee-track {
  animation: marquee 40s linear infinite;
}

.tick-price,
.live-pair-price,
.hero-gold-price,
.markets-live-price {
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 3px;
  padding: 0 2px;
}
.tick-price.flash-up,
.live-pair-price.flash-up,
.hero-gold-price.flash-up,
.markets-live-price.flash-up {
  color: var(--bull);
  background: oklch(0.78 0.19 160 / 18%);
  animation: tick-flash 0.55s ease-out;
}
.tick-price.flash-down,
.live-pair-price.flash-down,
.hero-gold-price.flash-down,
.markets-live-price.flash-down {
  color: var(--bear);
  background: oklch(0.68 0.22 25 / 18%);
  animation: tick-flash 0.55s ease-out;
}
@keyframes tick-flash {
  0% { opacity: 1; }
  40% { opacity: 0.85; }
  100% { opacity: 1; background: transparent; }
}

.glow-card {
  position: relative; overflow: hidden;
  border-radius: 1rem; border: 1px solid oklch(0.28 0.02 260 / 60%);
  background: oklch(0.19 0.032 260 / 60%);
  padding: 1.5rem;
  transition: transform .3s, box-shadow .3s;
}
.glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -20px oklch(0.78 0.19 160 / 40%);
}

.icon-badge {
  display: inline-grid; width: 3rem; height: 3rem;
  place-items: center; border-radius: 0.75rem;
  transition: transform .5s;
}
.icon-badge.bull { background: oklch(0.78 0.19 160 / 18%); color: var(--bull); }
.icon-badge.gold { background: oklch(0.82 0.14 85 / 18%); color: var(--gold); }
.glow-card:hover .icon-badge { transform: scale(1.1) rotate(3deg); }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Keyframes ── */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(4%, -3%) scale(1.08); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Reveal animation ── */

.reveal {
  opacity: 0; transform: translateY(1rem);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.shown { opacity: 1; transform: translateY(0); }

/* ── FAQ accordion ── */

.faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s, opacity .3s; overflow: hidden; }
.faq-body.open { grid-template-rows: 1fr; opacity: 1; }
.faq-body > div { min-height: 0; }

/* ── Navbar ── */

.navbar {
  position: sticky; top: 0; z-index: 50; width: 100%;
  transition: all .3s;
}
.navbar.scrolled {
  border-bottom: 1px solid oklch(0.28 0.02 260 / 60%);
  background: oklch(0.16 0.03 260 / 85%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.navbar:not(.scrolled) {
  background: transparent;
  padding-top: 1rem; padding-bottom: 1rem;
}

.mega-menu {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  padding-top: 0.75rem;
  transition: opacity .2s, transform .2s;
  pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(-4px);
}
.nav-group:hover .mega-menu {
  pointer-events: auto; opacity: 1; transform: translateX(-50%) translateY(0);
}

.mobile-menu {
  display: none;
  border-top: 1px solid oklch(0.28 0.02 260 / 60%);
  background: oklch(0.16 0.03 260 / 95%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mobile-menu.open { display: block; }

/* ── Slider (partnership) ── */

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bull); border: 2px solid var(--background);
}

/* ── Floating label (contact) ── */

.float-label { position: relative; display: block; }
.float-label input, .float-label textarea {
  width: 100%; border-radius: 0.75rem;
  border: 1px solid oklch(0.28 0.02 260 / 70%);
  background: oklch(0.16 0.03 260 / 40%);
  padding: 1.25rem 1rem 0.5rem; font-size: 0.875rem;
  color: var(--foreground); outline: none; transition: border-color .2s;
}
.float-label input:focus, .float-label textarea:focus { border-color: var(--bull); }
.float-label span {
  position: absolute; left: 1rem; top: 0.875rem;
  font-size: 0.875rem; color: var(--muted-foreground);
  transition: all .2s; pointer-events: none;
}
.float-label input:focus + span,
.float-label input:not(:placeholder-shown) + span,
.float-label textarea:focus + span,
.float-label textarea:not(:placeholder-shown) + span {
  top: 0.375rem; font-size: 0.625rem; color: var(--bull);
}

/* ── Tab active state ── */

.tab-active {
  background: oklch(0.78 0.19 160 / 15%);
  color: var(--bull);
}

.hidden { display: none !important; }

.footer-legal-heading,
.footer-legal-icon {
  color: #00c1af;
}

.footer-legal-heading {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rotate-180 { transform: rotate(180deg); }

/* ── Spinner ── */

.spinner {
  display: inline-block; width: 0.75rem; height: 0.75rem;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */

@media (max-width: 1023px) {
  .desktop-nav { display: none !important; }
  .desktop-actions { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}