/* Dark + teal glassy theme — overrides Webflow's main stylesheet.
   Keep this file loaded AFTER chaingpt-labs.webflow.shared.*.css. */

/* Use the clone's original Webflow fonts: RobotoMono (body) + LabsAmiga
   (display/brand). Sora was forced earlier — removed now. */

/* ---------- 1. Palette swap via CSS variables ---------- */
:root {
  /* Brand teal (from logo) */
  --teal:        #4dd4be;
  --teal-bright: #7efcdb;
  --teal-deep:   #1f9485;
  --teal-glow:   rgba(77, 212, 190, 0.35);

  /* Flip light/dark axis */
  --dark:        #e8f5f1;          /* was #0e0e0e — now used as light text */
  --darklighter: #d0e8e2;          /* was #1b1b1b */
  --dark-60:     rgba(232, 245, 241, 0.6);
  --darkgrey:    #8aa8a1;          /* was #848484 */

  --light:       #050d0c;          /* was #f6f6f6 — now dark bg */
  --lightgrey:   rgba(255, 255, 255, 0.04);  /* was #e4e4e4 — translucent for glass cards */
  --lightergrey: rgba(255, 255, 255, 0.08);  /* was #bebebe */

  --grey:        rgba(255, 255, 255, 0.18);  /* borders/dividers */

  --white:       #050d0c;          /* swap so "white" bg becomes dark */
  --black:       #e8f5f1;          /* swap so "black" text becomes light */

  /* Brand accent: teal replaces orange */
  --orange:      var(--teal);
}

/* Webflow's :root sets --orange:#ff7120 in chaingpt-labs.webflow.shared.css.
   Loaded order is webflow → theme-dark-glass, so our --orange wins, but the
   page-transition pixel grid was rendering orange anyway because some browsers
   resolve the cascade against the original sheet's :root. Force it directly. */
.page-transition-pixel {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
}

/* ---------- 2. Page-level dark background ---------- */
html, body {
  background-color: #03070a !important;
  color: var(--dark);
}

/* Subtle aurora-style background tint behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(77, 212, 190, 0.10), transparent 60%),
    radial-gradient(50% 50% at 85% 90%, rgba(126, 252, 219, 0.07), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(31, 148, 133, 0.05), transparent 70%),
    #03070a;
}

/* ---------- 3. Glass surfaces ---------- */
/* Convert anything previously light-grey or light into a glassy panel */
[class*="card"],
[class*="-card"],
.section,
.section-wrapper,
.container,
.hero-square,
.hero-backing,
.partner-item,
.media-item,
.portfolio-item,
.blog-item,
.team-item,
[class*="badge"],
.w-tab-pane,
.faq-item,
.dropdown-toggle {
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Headings get a subtle teal sheen */
h1, h2, h3, .heading, .marquee-heading {
  color: var(--dark);
  text-shadow: 0 0 30px rgba(77, 212, 190, 0.15);
}

/* Marquee outline-text variant */
.marquee-heading {
  -webkit-text-stroke: 1px var(--teal);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

p, li, span, label, .text, .paragraph {
  color: rgba(232, 245, 241, 0.78);
}

/* Links */
a, a:visited {
  color: var(--teal);
}
a:hover {
  color: var(--teal-bright);
  text-shadow: 0 0 12px var(--teal-glow);
}

/* ---------- 4. Buttons ---------- */
.btn,
.button,
[class*="button"]:not(input),
.w-button,
.apply-button {
  background-color: var(--teal) !important;
  color: #03110e !important;
  border: 1px solid rgba(126, 252, 219, 0.4);
  box-shadow:
    0 0 0 1px rgba(126, 252, 219, 0.2) inset,
    0 8px 24px rgba(77, 212, 190, 0.25),
    0 0 40px var(--teal-glow);
  transition: all 0.25s ease;
}
.btn:hover,
.button:hover,
.w-button:hover,
.apply-button:hover {
  background-color: var(--teal-bright) !important;
  box-shadow:
    0 0 0 1px rgba(126, 252, 219, 0.5) inset,
    0 12px 32px rgba(77, 212, 190, 0.45),
    0 0 60px var(--teal-glow);
  transform: translateY(-1px);
}

/* Header / nav bar */
.navbar,
.nav,
.header,
header,
.w-nav {
  background-color: rgba(3, 7, 10, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Forms / inputs */
input,
textarea,
select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
}
input::placeholder, textarea::placeholder {
  color: rgba(232, 245, 241, 0.4) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-glow);
  outline: none;
}

/* Footer */
footer, .footer {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-top: 1px solid rgba(77, 212, 190, 0.15);
}

/* Divider lines */
hr, [class*="divider"], [class*="separator"] {
  background-color: rgba(77, 212, 190, 0.2) !important;
  border-color: rgba(77, 212, 190, 0.2) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #03070a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--teal-deep), var(--teal));
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-bright); }

/* ---------- 5. Partner / portfolio logo cards ---------- */
/* Most partner logos are dark SVGs — invert + tint them so they read on dark bg */
.partner-item img,
.media-item img,
[class*="partners"] img,
[class*="logoMedia"],
img[src*="logoMedia"],
img[src*="partner"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.1) saturate(0.6);
  opacity: 0.85;
}
.partner-item img:hover,
.media-item img:hover {
  opacity: 1;
  filter: invert(1) hue-rotate(180deg) brightness(1.3) saturate(0.9)
          drop-shadow(0 0 8px var(--teal-glow));
}

/* Don't invert the brand logo */
img[src*="custom/logo"] { filter: none !important; opacity: 1 !important; }

/* ---------- 6. Brand: shrink logo + add "oxchange" wordmark ---------- */
/* The new logo is a 2048x2048 square, but the original was a 134x44 wide
   wordmark, so without constraint it eats half the header. Force it to a
   compact square and let the wordmark text sit beside it. */
.brand,
.brand.w-nav-brand,
.footer-brand,
[class*="brand-link"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 4px 0;
}

.brand-image,
img.brand-image,
[class*="brand"] img[src*="custom/logo"] {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--teal-glow)) !important;
}

/* Wordmark next to the logo — uses LabsAmiga (the clone's brand display font). */
.brand::after,
.brand.w-nav-brand::after,
.footer-brand::after,
[class*="brand-link"]::after {
  content: "oxchange";
  font-family: 'LabsAmiga', 'RobotoMono', system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  background: linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 50%, var(--teal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.4;
  padding-bottom: 4px;
  display: inline-block;
  filter: drop-shadow(0 0 12px rgba(77, 212, 190, 0.25));
}

/* Mobile sizing */
@media (max-width: 640px) {
  .brand-image, img.brand-image { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; }
  .brand::after, .brand.w-nav-brand::after { font-size: 22px; }
}

/* ---------- 7. Hero center: replace robot video with animated 3D logo ---------- */
/* Hide the original LABS_hero video, drop the brand logo in its slot, and
   spin/float it. Pure CSS — no extra JS, no Three.js. */
.hero-video.w-embed { position: relative; perspective: 1200px; min-height: 360px; }
.hero-video.w-embed video,
.hero-video.w-embed source { display: none !important; }

.hero-video.w-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('logo.png');   /* sibling of this css file */
  background-size: 70% auto;
  background-repeat: no-repeat;
  background-position: center;
  transform-style: preserve-3d;
  animation: oxchangeSpin 8s linear infinite, oxchangeFloat 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 30px var(--teal-glow))
    drop-shadow(0 0 60px rgba(77, 212, 190, 0.25));
  will-change: transform;
}

/* Glow halo behind the logo */
.hero-video.w-embed::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,212,190,0.25), transparent 60%);
  filter: blur(20px);
  animation: oxchangePulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes oxchangeSpin {
  0%   { transform: rotateY(0deg)   rotateX(8deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}
@keyframes oxchangeFloat {
  0%, 100% { translate: 0 -8px; }
  50%      { translate: 0  8px; }
}
@keyframes oxchangePulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1);   }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* ---------- 8. Hide the side white-cube decorative asset ---------- */
.graphic-block.hero-graphic-small,
.hero-top-content .graphic-block,
.hero-top-content .graphic-block-image {
  display: none !important;
}

/* ---------- 8b. Hide every original ChainGPT-Labs section that we
                  replace with our own Oxchange content. The JS also
                  hides these, but CSS gives us a hard guarantee. ---- */
html body #Capital-Incubation-Section,
html body .capital-incubation-section,
html body .capital-section,
html body .incubation-section,
html body .support-slider-section,
html body .capital-incubation-chain,
html body .capital-incubation-bubbles,
html body #media-section,
html body .media-section,
html body #reviews-section,
html body .testimonials-section,
html body #team-section,
html body .team-section,
html body #faq-section,
html body .faq-section,
html body #portfolio-section,
html body .portfolio-section,
html body #blogs-section,
html body .blogs-section,
html body section.footer,
html body section.footer-with-blog,
html body .footer-with-blog,
html body .footer:not(.ox-footer),
html body footer:not(.ox-footer) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ---------- 9. New OXCHANGE hero panel ---------- */
/* The Webflow video slot was 39x86px and impossible to override cleanly,
   so the JS injects a brand-new .ox-hero-panel and hides the old slot. */

.ox-hero-panel {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 40px auto 60px;
  padding: 40px 32px;
  z-index: 2;
}

.ox-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .ox-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ----- Copy column ----- */
.ox-hero-copy { display: flex; flex-direction: column; gap: 18px; }

.ox-tagline {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--teal-bright);
  text-transform: uppercase;
}

.ox-headline {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin: 0;
  text-shadow: 0 0 40px rgba(77,212,190,0.18);
}
.ox-headline .ox-accent {
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ox-desc {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232,245,241,0.72);
  margin: 0;
  max-width: 520px;
}

/* Smart-contract pill */
.ox-contract {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: fit-content;
  background: rgba(77,212,190,0.06);
  border: 1px solid rgba(77,212,190,0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 13px;
}
.ox-contract-label { color: rgba(232,245,241,0.6); }
.ox-contract-addr { color: var(--teal-bright); font-family: 'JetBrains Mono', monospace; }
.ox-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(77,212,190,0.12);
  border: 1px solid rgba(77,212,190,0.3);
  color: var(--teal-bright);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ox-copy-btn:hover { background: rgba(77,212,190,0.25); transform: translateY(-1px); }
.ox-copy-btn.ox-copied { background: var(--teal); color: #03110e; }

/* Quick links */
.ox-quicklinks-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(232,245,241,0.5);
  text-transform: uppercase;
  margin-top: 8px;
}
.ox-quicklinks { display: flex; gap: 12px; flex-wrap: wrap; }
.ox-link-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  color: var(--dark);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.25s ease;
}
.ox-link-btn:hover {
  border-color: var(--teal);
  color: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(77,212,190,0.12);
}
.ox-link-btn.ox-link-primary {
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  color: #03110e;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(77,212,190,0.3);
}
.ox-link-btn.ox-link-primary:hover {
  color: #03110e;
  box-shadow: 0 12px 32px rgba(77,212,190,0.5);
  transform: translateY(-2px);
}

/* Force the original Webflow hero-section to grow with our content rather
   than being clipped to 100svh + overflow:hidden. Horizontal overflow is
   overridden on small screens only (see mobile block below). */
html body #hero-section.hero-section,
html body section.hero-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Fixed `.portfolio-apply-header` sits over content; `#ox-hero-panel` is injected as a
   direct child of `#hero-section`, so Webflow’s `.hero-container` padding-top never applies. */
#hero-section.hero-section {
  padding-top: calc(5.25rem + env(safe-area-inset-top, 0px)) !important;
}

#hero-section.hero-section > .ox-hero-panel {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  #hero-section.hero-section {
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ----- Stage column (3D coin) ----- */
.ox-hero-stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 38vw, 520px);
  max-width: 560px;
  margin: 0 auto;
  perspective: 1400px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .ox-hero-stage { height: clamp(320px, 80vw, 460px); max-width: 100%; }
}

/* Coin scene — perspective happens here */
.ox-coin-scene {
  position: absolute;
  inset: 12%;
  perspective: 1600px;
  transform-style: preserve-3d;
  z-index: 3;
  animation: oxFloatUp 5s ease-in-out infinite;
}

/* The coin itself: tumbles in 3D */
.ox-coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: coinTumble 9s linear infinite;
}

/* Each slice = a copy of the logo at a different Z depth.
   Stacked together they form a thick disc (coin body). */
.ox-coin-slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(var(--z, 0px));
  /* dim is a smooth bell curve from JS; sat is computed there too */
  filter: brightness(var(--dim, 1)) saturate(var(--sat, 1));
  backface-visibility: visible;
  pointer-events: none;
}
/* Front-most slice gets the strong glow */
.ox-coin-slice:last-of-type {
  filter:
    brightness(1.05)
    drop-shadow(0 0 24px rgba(77,212,190,0.6))
    drop-shadow(0 0 52px rgba(77,212,190,0.28));
}
/* Back-most slice darkened so the rim reads as real depth */
.ox-coin-slice:first-of-type {
  filter: brightness(0.45) saturate(1.4);
}

/* Edge: a teal donut that reads as the coin's metallic rim, visible
   from all angles thanks to additive ring glow. */
.ox-coin-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%,
      transparent 46%,
      rgba(126, 252, 219, 0.28) 49%,
      rgba(77, 212, 190, 0.55) 50%,
      rgba(126, 252, 219, 0.28) 51%,
      transparent 54%,
      transparent 100%);
  mix-blend-mode: screen;
  filter: blur(0.6px);
  pointer-events: none;
}

/* Specular highlight — an off-axis bright crescent that suggests a
   single light source raking across the coin face. Counter-rotates the
   parent so the highlight roughly stays in the upper-left of the viewport. */
.ox-coin-spec {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(60% 50% at 30% 22%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.10) 28%,
      transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateZ(28px);
  animation: oxSpecCounter 9s linear infinite;
}
@keyframes oxSpecCounter {
  from { transform: translateZ(28px) rotateY(0deg); }
  to   { transform: translateZ(28px) rotateY(-360deg); }
}

/* Soft ground shadow under the coin */
.ox-coin-shadow {
  position: absolute;
  bottom: -8%;
  left: 15%;
  right: 15%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(77,212,190,0.4), transparent 70%);
  filter: blur(14px);
  animation: oxShadowPulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes oxShadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50%      { transform: scaleX(0.85); opacity: 0.9; }
}

@keyframes coinTumble {
  0%   { transform: rotateY(0deg)   rotateX(12deg); }
  50%  { transform: rotateY(180deg) rotateX(-8deg); }
  100% { transform: rotateY(360deg) rotateX(12deg); }
}
@keyframes oxFloatUp {
  0%, 100% { translate: 0 -8px; }
  50%      { translate: 0  8px; }
}

/* ----- Orbiting satellites (small teal dots circling the coin) ----- */
.ox-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow:
    0 0 12px var(--teal-bright),
    0 0 28px var(--teal-glow);
  margin: -6px 0 0 -6px;          /* centre */
  pointer-events: none;
  z-index: 4;
}
/* Each satellite uses its own translate radius so they orbit at different distances. */
.ox-sat-a {
  --orbit-r: 46%;
  animation: oxOrbitSat 4.5s linear infinite;
}
.ox-sat-b {
  --orbit-r: 56%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  animation: oxOrbitSat 7s linear infinite reverse;
  animation-delay: -1.2s;
}
.ox-sat-c {
  --orbit-r: 38%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: white;
  box-shadow: 0 0 10px white, 0 0 20px var(--teal-bright);
  animation: oxOrbitSat 3s linear infinite;
  animation-delay: -0.6s;
}
@keyframes oxOrbitSat {
  from { transform: rotate(0deg)   translateX(var(--orbit-r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
}

/* Backdrop sweep */
.ox-sweep {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(77, 212, 190, 0.22) 12%,
    transparent 25%,
    rgba(126, 252, 219, 0.16) 50%,
    transparent 65%,
    rgba(31, 148, 133, 0.22) 85%,
    transparent 100%
  );
  filter: blur(36px);
  animation: oxSweep 14s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes oxSweep { to { transform: rotate(360deg); } }

/* Orbital rings */
.ox-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) rotateX(72deg);
  transform-style: preserve-3d;
  z-index: 2;
}
.ox-ring-outer {
  width: 92%;
  aspect-ratio: 1;
  border: 1.5px dashed rgba(77, 212, 190, 0.6);
  box-shadow:
    0 0 30px rgba(77, 212, 190, 0.3),
    inset 0 0 30px rgba(77, 212, 190, 0.18);
  animation: oxOrbit 22s linear infinite;
}
.ox-ring-inner {
  width: 70%;
  aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-top: 1.5px solid var(--teal-bright);
  border-right: 1.5px solid rgba(77,212,190,0.2);
  border-bottom: 1.5px solid var(--teal-deep);
  box-shadow: 0 0 24px rgba(126, 252, 219, 0.4);
  animation: oxOrbitReverse 13s linear infinite;
}
@keyframes oxOrbit {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes oxOrbitReverse {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
  to   { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg); }
}

/* Particles */
.ox-particles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ox-particle {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 10px var(--teal-bright), 0 0 20px var(--teal-glow);
  left: calc(50% + (var(--r) - 0.5) * 95%);
  top:  calc(50% + (var(--i) / 12 - 0.5) * 95%);
  opacity: 0;
  animation: oxFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.5s);
}
@keyframes oxFloat {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%      { opacity: 1; }
  50%      { opacity: 1; transform: translate(calc((var(--r) - 0.5) * 40px), -50px) scale(1.3); }
  80%      { opacity: 0; }
}

/* ============================================================
   HERO — Plasma Gyroscope
   A cinematic sci-fi plasma core with the Oxchange logo at the
   center, three rings tumbling on different axes, two orbit
   planes of data nodes, vertical plasma beams, holo grid bg
   and corner HUD brackets. Visually distinct from the cube
   (About), sphere (FAQ), pie (Tokenomics) and old coin.
   ============================================================ */

.ox-gyro-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  --gyro-size: clamp(280px, 30vw, 420px);
}

/* Holographic dotted teal grid background */
.ox-gyro-grid {
  position: absolute;
  inset: 6%;
  background-image:
    radial-gradient(rgba(77, 212, 190, 0.22) 1px, transparent 1.4px),
    radial-gradient(rgba(126, 252, 219, 0.10) 1px, transparent 1.4px);
  background-size: 22px 22px, 44px 44px;
  background-position: 0 0, 11px 11px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  opacity: 0.75;
  animation: oxGyroGridDrift 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes oxGyroGridDrift {
  from { background-position: 0 0, 11px 11px; }
  to   { background-position: 22px 22px, 33px 33px; }
}

/* Corner HUD brackets */
.ox-gyro-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--teal);
  box-shadow: 0 0 12px var(--teal-glow);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
.ox-gyro-corner.tl { top: 14px;    left: 14px;   border-right: 0; border-bottom: 0; }
.ox-gyro-corner.tr { top: 14px;    right: 14px;  border-left: 0;  border-bottom: 0; }
.ox-gyro-corner.bl { bottom: 14px; left: 14px;   border-right: 0; border-top: 0;    }
.ox-gyro-corner.br { bottom: 14px; right: 14px;  border-left: 0;  border-top: 0;    }

/* 3D scene wrapper */
.ox-gyro-stage {
  position: relative;
  width: var(--gyro-size);
  height: var(--gyro-size);
  perspective: 1400px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: oxGyroFloat 6s ease-in-out infinite;
}
@keyframes oxGyroFloat {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px);  }
}

/* Ground shadow under the orb */
.ox-gyro-shadow {
  position: absolute;
  bottom: -6%;
  left: 18%;
  right: 18%;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(77,212,190,0.45), transparent 70%);
  filter: blur(14px);
  animation: oxGyroShadowPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes oxGyroShadowPulse {
  0%, 100% { transform: scaleX(1);    opacity: 0.55; }
  50%      { transform: scaleX(0.8);  opacity: 0.9;  }
}

/* Vertical plasma energy beams shooting from the core */
.ox-gyro-beam {
  position: absolute;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(126, 252, 219, 0.0) 4%,
    rgba(126, 252, 219, 0.55) 35%,
    var(--teal-bright)        50%,
    rgba(126, 252, 219, 0.55) 65%,
    rgba(126, 252, 219, 0.0) 96%,
    transparent 100%);
  filter: blur(0.6px) drop-shadow(0 0 10px var(--teal-bright));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: oxGyroBeamFlicker 2.4s ease-in-out infinite;
}
.ox-gyro-beam-up   { top: -8%;   bottom: 50%; }
.ox-gyro-beam-down { top: 50%;   bottom: -8%; animation-delay: -1.1s; }
@keyframes oxGyroBeamFlicker {
  0%, 100% { opacity: 0.55; transform: scaleY(1);    }
  50%      { opacity: 1;    transform: scaleY(1.06); }
}

/* Orbit planes — each one holds a set of data nodes.
   The plane itself rotates; nodes are positioned at --ang. */
.ox-gyro-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 3;
}
.ox-gyro-orbit-a {
  transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg);
  animation: oxGyroOrbitA 14s linear infinite;
}
.ox-gyro-orbit-b {
  transform: translate(-50%, -50%) rotateX(28deg) rotateY(40deg);
  animation: oxGyroOrbitB 18s linear infinite reverse;
}
@keyframes oxGyroOrbitA {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg);   }
  to   { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes oxGyroOrbitB {
  from { transform: translate(-50%, -50%) rotateX(28deg) rotateY(40deg) rotateZ(0deg);   }
  to   { transform: translate(-50%, -50%) rotateX(28deg) rotateY(40deg) rotateZ(360deg); }
}

/* Each node sits at angle --ang on its orbit ring */
.ox-gyro-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow:
    0 0 8px var(--teal-bright),
    0 0 18px var(--teal-glow);
  transform: rotate(var(--ang, 0deg)) translateX(46%);
  pointer-events: none;
}
.ox-gyro-orbit-a .ox-gyro-node { transform: rotate(var(--ang, 0deg)) translateX(46%); }
.ox-gyro-orbit-b .ox-gyro-node {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px var(--teal-bright);
  transform: rotate(var(--ang, 0deg)) translateX(36%);
}

/* The 3 gyroscope rings — group container */
.ox-gyro-rings {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 4;
}
.ox-gyro-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  margin: -40% 0 0 -40%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    conic-gradient(from 0deg,
      rgba(126, 252, 219, 0)    0%,
      rgba(126, 252, 219, 0.85) 18%,
      rgba(77, 212, 190, 0.95)  35%,
      rgba(126, 252, 219, 0)    50%,
      rgba(31, 148, 133, 0.9)   72%,
      rgba(126, 252, 219, 0.6)  90%,
      rgba(126, 252, 219, 0)    100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow:
    0 0 20px rgba(77, 212, 190, 0.45),
    inset 0 0 22px rgba(126, 252, 219, 0.25);
  transform-style: preserve-3d;
}
.ox-gyro-ring-x {
  transform: rotateX(75deg);
  animation: oxGyroRingX 11s linear infinite;
}
.ox-gyro-ring-y {
  transform: rotateY(75deg);
  animation: oxGyroRingY 14s linear infinite reverse;
}
.ox-gyro-ring-z {
  transform: rotateZ(0deg) rotateX(20deg) rotateY(20deg);
  width: 92%; height: 92%; margin: -46% 0 0 -46%;
  animation: oxGyroRingZ 17s linear infinite;
}
@keyframes oxGyroRingX {
  from { transform: rotateX(75deg) rotateZ(0deg);   }
  to   { transform: rotateX(75deg) rotateZ(360deg); }
}
@keyframes oxGyroRingY {
  from { transform: rotateY(75deg) rotateZ(0deg);   }
  to   { transform: rotateY(75deg) rotateZ(360deg); }
}
@keyframes oxGyroRingZ {
  from { transform: rotateX(20deg) rotateY(20deg) rotateZ(0deg);   }
  to   { transform: rotateX(20deg) rotateY(20deg) rotateZ(360deg); }
}

/* Core — center pulsing energy orb with the Oxchange logo on top */
.ox-gyro-core {
  position: relative;
  width: 38%;
  height: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.ox-gyro-core-halo {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(126, 252, 219, 0.55) 0%,
    rgba(77, 212, 190, 0.32)  22%,
    rgba(31, 148, 133, 0.18)  45%,
    transparent 70%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: oxGyroHalo 4s ease-in-out infinite;
}
@keyframes oxGyroHalo {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.ox-gyro-core-orb {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #ffffff 0%,
      var(--teal-bright) 20%,
      var(--teal) 45%,
      var(--teal-deep) 75%,
      #0a201e 100%);
  box-shadow:
    0 0 28px var(--teal-bright),
    0 0 60px var(--teal-glow),
    inset 0 0 22px rgba(255, 255, 255, 0.35);
  animation: oxGyroOrbPulse 2.4s ease-in-out infinite;
}
@keyframes oxGyroOrbPulse {
  0%, 100% { transform: scale(1);    filter: brightness(1);    }
  50%      { transform: scale(1.06); filter: brightness(1.18); }
}

.ox-gyro-core-logo {
  position: relative;
  width: 78%;
  height: 78%;
  object-fit: contain;
  z-index: 2;
  filter:
    drop-shadow(0 0 10px var(--teal-bright))
    drop-shadow(0 0 24px var(--teal-glow));
  animation: oxGyroLogoBob 5s ease-in-out infinite;
}
@keyframes oxGyroLogoBob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px);  }
}

/* Concentric expanding pulse rings */
.ox-gyro-core-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--teal-bright);
  box-shadow: 0 0 16px var(--teal-glow);
  opacity: 0;
  pointer-events: none;
  animation: oxGyroPulse 3s ease-out infinite;
}
.ox-gyro-core-pulse.p2 { animation-delay: -1.5s; }
@keyframes oxGyroPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { opacity: 0.15; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Status readout pill below the gyro */
.ox-gyro-readout {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 32, 30, 0.55);
  border: 1px solid rgba(77, 212, 190, 0.45);
  box-shadow:
    0 0 14px rgba(77, 212, 190, 0.25),
    inset 0 0 10px rgba(126, 252, 219, 0.08);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 6;
  pointer-events: none;
}
.ox-gyro-readout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80, 0 0 14px rgba(74, 222, 128, 0.5);
  animation: oxGyroDot 1.4s ease-in-out infinite;
}
@keyframes oxGyroDot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.ox-gyro-readout-txt {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  text-shadow: 0 0 8px var(--teal-glow);
}

/* Mobile scaling */
@media (max-width: 900px) {
  .ox-gyro-wrap { --gyro-size: clamp(240px, 70vw, 360px); }
  .ox-gyro-corner { width: 22px; height: 22px; }
  .ox-gyro-readout { bottom: 8px; padding: 5px 12px; }
  .ox-gyro-readout-txt { font-size: 10px; letter-spacing: 0.12em; }
}

/* ----- Stats bar ----- */
.ox-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 60px;
  padding: 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(140%);
}
@media (max-width: 700px) { .ox-stats { grid-template-columns: repeat(2, 1fr); } }

.ox-stat { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.ox-stat-num {
  font-family: inherit;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ox-stat-lbl {
  font-family: inherit;
  font-size: 13px;
  color: rgba(232,245,241,0.6);
}

/* ============================================================
   10. OXCHANGE post-hero sections (About, Features, Tokenomics,
       Roadmap, FAQs, Footer). All in the same dark-glassy theme.
   ============================================================ */

.ox-section { padding: 80px 24px; position: relative; }
.ox-section-inner { max-width: 1240px; margin: 0 auto; }
.ox-section-title {
  font-family: inherit;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin: 0 0 16px;
  text-shadow: 0 0 30px rgba(77,212,190,0.18);
}
.ox-section-title .ox-accent {
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ox-section-lede {
  font-family: inherit;
  color: rgba(232,245,241,0.7);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 720px;
}
.ox-center { text-align: center; display: flex; justify-content: center; align-items: center; }
.ox-link {
  color: var(--teal-bright); text-decoration: underline; text-underline-offset: 3px;
}

/* ----- ABOUT US ----- */
.ox-about-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 1000px) { .ox-about-grid { grid-template-columns: 1fr; } }

.ox-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.ox-about-stats .ox-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(12px);
}
.ox-about-stats .ox-stat-num { font-size: clamp(18px, 1.8vw, 24px); }

.ox-about-mid { display: flex; justify-content: center; }
.ox-frame {
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid rgba(77,212,190,0.45);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(77,212,190,0.18), transparent 70%),
    rgba(255,255,255,0.02);
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(77,212,190,0.15) inset,
    0 30px 60px -20px rgba(77,212,190,0.4);
}
.ox-frame::before, .ox-frame::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--teal); border-radius: 3px;
}
.ox-frame::before { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.ox-frame::after  { bottom: -8px; right: -8px; border-left: none; border-top: none; }
.ox-frame-logo {
  width: 70%; height: 70%; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(77,212,190,0.6));
  animation: oxFrameSpin 12s linear infinite;
}
@keyframes oxFrameSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.ox-about-right p {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(232,245,241,0.75);
  margin: 0 0 14px;
}

/* ----- FEATURES ----- */
.ox-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) { .ox-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ox-feature-grid { grid-template-columns: 1fr; } }

.ox-feature-card {
  padding: 32px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  transition: all 0.3s ease;
  position: relative;
}
.ox-feature-card:hover {
  border-color: rgba(77,212,190,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(77,212,190,0.4);
}
.ox-feature-card .ox-feature-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(77,212,190,0.3);
  border-radius: 10px;
  color: var(--teal-bright);
  margin-bottom: 16px;
  background: rgba(77,212,190,0.06);
}
.ox-feature-card .ox-feature-icon svg { width: 22px; height: 22px; }
.ox-feature-card .ox-feature-title {
  font-family: inherit;
  font-weight: 700; font-size: 17px;
  color: var(--dark);
  margin-bottom: 6px;
}
.ox-feature-card .ox-feature-sub {
  font-family: inherit;
  font-size: 13px;
  color: rgba(232,245,241,0.6);
}

/* ----- TOKENOMICS ----- */
.ox-tokenomics-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 32px;
}
@media (max-width: 1000px) { .ox-tokenomics-grid { grid-template-columns: 1fr; } }

.ox-pie-legend {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
}
.ox-pie-legend li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  color: rgba(232,245,241,0.85);
}
.ox-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ox-legend-pct { color: var(--teal-bright); font-weight: 600; }

.ox-token-details {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(14px);
  font-family: inherit;
}
.ox-td-title {
  text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--dark); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.ox-td-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(232,245,241,0.85);
}
.ox-td-row:last-of-type { border-bottom: none; }
.ox-mono { font-family: 'JetBrains Mono', monospace; color: var(--teal-bright); }
.ox-td-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ox-td-actions .ox-link-btn { padding: 10px; font-size: 12px; text-align: center; }

/* ----- ROADMAP ----- */
.ox-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
  position: relative;
}
.ox-roadmap-grid::before {
  content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,212,190,0.5), transparent);
}
@media (max-width: 900px) { .ox-roadmap-grid { grid-template-columns: 1fr 1fr; } .ox-roadmap-grid::before { display: none; } }
@media (max-width: 600px) { .ox-roadmap-grid { grid-template-columns: 1fr; } }

.ox-roadmap-card {
  padding: 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  position: relative;
  transition: all 0.25s;
}
.ox-roadmap-card:hover {
  border-color: rgba(77,212,190,0.45);
  transform: translateY(-3px);
}
.ox-roadmap-card::before {
  content: ""; position: absolute; top: -8px; left: 24px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(77,212,190,0.2), 0 0 12px var(--teal-bright);
}
.ox-roadmap-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: inherit;
  margin-bottom: 14px;
}
.ox-roadmap-num { font-size: 24px; font-weight: 800; color: var(--dark); }
.ox-roadmap-year { font-size: 13px; color: var(--teal-bright); letter-spacing: 0.1em; }
.ox-roadmap-list {
  list-style: none; padding: 0; margin: 0;
  font-family: inherit;
  font-size: 13px;
  color: rgba(232,245,241,0.78);
}
.ox-roadmap-list li { padding: 4px 0; }

/* ----- FAQ ----- */
.ox-faq-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .ox-faq-layout { grid-template-columns: 1fr; } .ox-faq-art { display: none; } }

.ox-faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.ox-faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color 0.25s;
}
.ox-faq-item:hover { border-color: rgba(77,212,190,0.3); }
.ox-faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--dark);
}
.ox-faq-item summary::-webkit-details-marker { display: none; }
.ox-faq-toggle {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(77,212,190,0.4);
  color: var(--teal-bright); font-size: 16px;
  transition: transform 0.25s;
}
.ox-faq-item[open] .ox-faq-toggle { transform: rotate(45deg); }
.ox-faq-answer {
  padding: 0 18px 16px;
  font-family: inherit;
  font-size: 13px; line-height: 1.7;
  color: rgba(232,245,241,0.7);
}

.ox-faq-art { display: grid; place-items: center; }
.ox-faq-orb {
  width: 200px; aspect-ratio: 1;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(77,212,190,0.2), transparent 60%);
  border-radius: 50%;
}
.ox-faq-orb img {
  width: 60%; height: 60%; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(77,212,190,0.6));
  animation: oxLogoSpin 14s linear infinite;
}

/* ----- FOOTER ----- */
.ox-footer {
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(77,212,190,0.15);
  padding: 60px 24px 24px;
  margin-top: 40px;
}
.ox-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  font-family: inherit;
}
@media (max-width: 800px) { .ox-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ox-footer-grid { grid-template-columns: 1fr; } }

.ox-footer-logo {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 16px;
}
.ox-footer-logo img { width: 36px; height: 36px; object-fit: contain; }
.ox-footer-logo span {
  font-family: inherit; font-weight: 700; font-size: 22px;
  color: var(--teal-bright);
  -webkit-text-fill-color: var(--teal-bright);
  text-shadow: 0 0 12px rgba(126, 252, 219, 0.32);
}
.ox-footer-brand p {
  font-size: 13px; color: rgba(232,245,241,0.65); line-height: 1.6; margin: 0 0 16px;
}
.ox-footer-social { display: flex; gap: 10px; }
.ox-footer-social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(77,212,190,0.3);
  color: var(--teal-bright); text-decoration: none; font-size: 14px;
  transition: all 0.25s;
}
.ox-footer-social a:hover { background: var(--teal); color: #03110e; transform: translateY(-2px); }
.ox-footer-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--dark); margin-bottom: 14px;
}
.ox-footer-grid > div > a {
  display: block; padding: 5px 0;
  color: rgba(232,245,241,0.65);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}
.ox-footer-grid > div > a:hover { color: var(--teal-bright); }
.ox-footer-bottom {
  text-align: center; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(232,245,241,0.45);
  font-family: inherit; font-size: 12px;
}

/* ============================================================
   11. Reusable 3D coin sizes (hero / about / faq)
   ============================================================ */
.ox-coin-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.ox-coin-wrap.ox-coin--lg {
  width: 100%;
  height: 100%;
  max-width: 460px;
  max-height: 460px;
}
.ox-coin-wrap.ox-coin--md {
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 1;
}
.ox-coin-wrap.ox-coin--sm {
  width: clamp(180px, 18vw, 240px);
  aspect-ratio: 1;
}
.ox-coin-wrap .ox-coin-scene {
  position: relative;
  inset: auto;
  width: 80%;
  height: 80%;
  perspective: 1600px;
  transform-style: preserve-3d;
  z-index: 3;
  animation: oxFloatUp 5s ease-in-out infinite;
}

/* Hexagonal sci-fi frame around the hero coin */
.ox-hex-frame {
  position: absolute;
  inset: 6%;
  z-index: 1;
  pointer-events: none;
  background:
    /* outer hex outline */
    conic-gradient(from 30deg,
      rgba(77,212,190,0.15) 0deg, rgba(77,212,190,0.6) 60deg,
      rgba(77,212,190,0.15) 120deg, rgba(77,212,190,0.6) 180deg,
      rgba(77,212,190,0.15) 240deg, rgba(77,212,190,0.6) 300deg,
      rgba(77,212,190,0.15) 360deg);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  filter: drop-shadow(0 0 20px rgba(77,212,190,0.3));
  animation: hexBreathe 4s ease-in-out infinite;
  -webkit-mask: linear-gradient(transparent 0, transparent 0) content-box,
                linear-gradient(white, white);
  -webkit-mask-composite: source-over, source-out;
  mask: linear-gradient(transparent 0, transparent 0) content-box,
        linear-gradient(white, white);
  mask-composite: exclude;
  padding: 4px;
}
@keyframes hexBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.02); }
}

/* ============================================================
   12. Sci-fi 3D pie chart
   --------------------------------------------------------------
   Built from real stacked disc layers (no flat conic-gradient image).
   The whole pie tilts on X so the depth is visible, then the disc
   rotates on its Y axis. A HUD frame, brackets, scan-lines, ticks
   and orbit rings sell the "tactical readout" sci-fi feel.
   ============================================================ */
.ox-pie-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
}

.ox-pie-frame {
  position: relative;
  width: clamp(240px, 24vw, 320px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(58deg);
  filter: drop-shadow(0 28px 36px rgba(77,212,190,0.22));
}

/* The disc itself — child layers are stacked along Z. */
.ox-pie-disc {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: oxPieSpin 28s linear infinite;
}
@keyframes oxPieSpin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Each layer is one slice of the extruded coin. Conic stops match tokenomics (100%). */
.ox-pie-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #7efcdb 0%      38.7%,
    #5ce7c6 38.7%   58.7%,
    #3fc4ab 58.7%   73.7%,
    #2ea893 73.7%   83.7%,
    #1c8270 83.7%   89.2%,
    #86f0d6 89.2%   96.2%,
    #a6f5e0 96.2%   97.5%,
    #bdf8e8 97.5%   98.8%,
    #d2faef 98.8%   99.5%,
    #e2fcf5 99.5%   100%
  );
  -webkit-mask: radial-gradient(circle at center, transparent 36%, black 37%);
          mask: radial-gradient(circle at center, transparent 36%, black 37%);
  transform: translateZ(var(--z, 0px));
  filter: brightness(var(--dim, 1)) saturate(1.1);
  backface-visibility: hidden;
}
.ox-pie-layer--top {
  /* a glassy top with neon segment edges */
  filter: brightness(1.08) saturate(1.2)
          drop-shadow(0 0 14px rgba(126,252,219,0.45));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 0 18px rgba(255,255,255,0.05);
}
.ox-pie-layer--bottom {
  filter: brightness(0.32) saturate(1.4);
}

/* HUD scan-line overlay — pinned to the disc top. */
.ox-pie-scan {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at center, transparent 36%, black 37%);
          mask: radial-gradient(circle at center, transparent 36%, black 37%);
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.0) 0px,
      rgba(255,255,255,0.0) 7px,
      rgba(126,252,219,0.10) 8px,
      rgba(255,255,255,0.0) 9px),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 55%);
  mix-blend-mode: screen;
  transform: translateZ(31px);
  pointer-events: none;
  animation: oxPieScan 5s linear infinite;
}
@keyframes oxPieScan {
  from { background-position: 0 0, 30% 25%; }
  to   { background-position: 0 80px, 30% 25%; }
}

/* Two thin holographic orbit rings around the disc — purely decorative. */
.ox-pie-orbit {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1.5px dashed rgba(77,212,190,0.5);
  box-shadow: 0 0 24px rgba(77,212,190,0.2), inset 0 0 24px rgba(77,212,190,0.16);
  pointer-events: none;
  animation: oxPieOrbit 18s linear infinite;
}
.ox-pie-orbit.r2 {
  inset: -22%;
  border-style: solid;
  border-color: transparent;
  border-top-color: var(--teal-bright);
  border-right-color: rgba(77,212,190,0.18);
  border-bottom-color: var(--teal-deep);
  animation-duration: 11s;
  animation-direction: reverse;
}
@keyframes oxPieOrbit {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Corner brackets framing the pie like a targeting reticle. */
.ox-pie-bracket {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--teal-bright);
  pointer-events: none;
  filter: drop-shadow(0 0 8px var(--teal-glow));
  /* counter-rotate so brackets sit flat to the viewer */
  transform: rotateX(-58deg);
}
.ox-pie-bracket.tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.ox-pie-bracket.tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }
.ox-pie-bracket.bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
.ox-pie-bracket.br { bottom: -10px; right: -10px; border-left: none; border-top: none; }

/* Tiny radial ticks at 0/90/180/270° — like a compass dial. */
.ox-pie-tick {
  position: absolute;
  width: 2px; height: 12px;
  background: var(--teal-bright);
  box-shadow: 0 0 8px var(--teal-bright);
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}
.ox-pie-tick.t1 { transform: translate(-50%, -50%) rotate(0deg)   translateY(-58%); }
.ox-pie-tick.t2 { transform: translate(-50%, -50%) rotate(90deg)  translateY(-58%); }
.ox-pie-tick.t3 { transform: translate(-50%, -50%) rotate(180deg) translateY(-58%); }
.ox-pie-tick.t4 { transform: translate(-50%, -50%) rotate(270deg) translateY(-58%); }

/* Centre HUD readout — counter-rotates so it always faces the viewer
   and floats on top of the disc. */
.ox-pie-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: inherit;
  transform: rotateX(-58deg) translateZ(40px);
  z-index: 5;
  pointer-events: none;
}
.ox-pie-lbl  {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--teal-bright);
  text-shadow: 0 0 8px var(--teal-glow);
}
.ox-pie-val  {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  color: var(--dark);
  margin-top: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 12px rgba(126,252,219,0.4);
  letter-spacing: -0.01em;
}
.ox-pie-sub  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--teal-bright);
  margin-top: 4px;
  letter-spacing: 0.14em;
}

@media (max-width: 1000px) {
  .ox-pie-frame { transform: rotateX(48deg); }
  .ox-pie-center { transform: rotateX(-48deg) translateZ(40px); }
  .ox-pie-bracket { transform: rotateX(-48deg); }
}

/* ============================================================
   12b. HOLO-REACTOR (replaces flat tilted pie). True 3D vertical
   energy columns rising from a hex base. Whole thing tumbles.
   ============================================================ */
.ox-reactor-stage {
  perspective: 1600px;
  transform-style: preserve-3d;
}
.ox-reactor-frame {
  width: clamp(260px, 28vw, 360px);
  height: clamp(260px, 28vw, 360px);
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(62deg);
  filter: drop-shadow(0 36px 60px rgba(77,212,190,0.28));
}
.ox-reactor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: oxReactorSpin 90s linear infinite;
}
@keyframes oxReactorSpin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Real 3D pie chart — extruded conic-gradient disc with colored
   percentage slices that match the legend. Multiple stacked layers
   along Z give it visible thickness. */
.ox-reactor-base {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  /* Conic-gradient slices matching legend + reactor segments (100%). */
  background: conic-gradient(
    #7efcdb 0%      38.7%,
    #5ce7c6 38.7%   58.7%,
    #3fc4ab 58.7%   73.7%,
    #2ea893 73.7%   83.7%,
    #1c8270 83.7%   89.2%,
    #86f0d6 89.2%   96.2%,
    #a6f5e0 96.2%   97.5%,
    #bdf8e8 97.5%   98.8%,
    #d2faef 98.8%   99.5%,
    #e2fcf5 99.5%   100%
  );
  border: 1.5px solid rgba(126,252,219,0.55);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.4),
    inset 0 0 60px rgba(77,212,190,0.10),
    0 0 30px rgba(77,212,190,0.40);
  transform-style: preserve-3d;
  /* Donut hole so the central core orb is visible */
  -webkit-mask: radial-gradient(circle at center, transparent 22%, black 23%);
          mask: radial-gradient(circle at center, transparent 22%, black 23%);
}
/* 3D extrusion: stacked pie copies at different Z give the disc visible
   thickness without needing 3D-wedge geometry. */
.ox-reactor-base::before,
.ox-reactor-base::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  -webkit-mask: inherit;
          mask: inherit;
  pointer-events: none;
}
.ox-reactor-base::before { transform: translateZ(-6px);  filter: brightness(0.55) saturate(0.7); }
.ox-reactor-base::after  { transform: translateZ(-12px); filter: brightness(0.30) saturate(0.5); }
/* Glow halo just above the base */
.ox-reactor-base-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(126,252,219,0.25), transparent 55%);
  filter: blur(18px);
  transform: translateZ(2px);
  pointer-events: none;
}

/* 24 compass ticks around the base */
.ox-reactor-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ox-reactor-tick {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 8px;
  background: rgba(126,252,219,0.85);
  box-shadow: 0 0 4px rgba(126,252,219,0.85);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(var(--ang)) translateY(calc(-1 * (clamp(260px, 28vw, 360px) * 0.46)));
}

/* Container that holds all column wrappers */
.ox-reactor-cols {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Each column wrapper sits at a specific angle around centre.
   It contains a vertical pillar that rises along Z (which becomes
   "up" once the whole thing is tilted). */
.ox-reactor-col {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotate(var(--ang)) translateY(calc(-1 * (clamp(260px, 28vw, 360px) * 0.30)));
}
.ox-reactor-col-pillar {
  position: absolute;
  left: -10px; top: -10px;
  width: 20px; height: 20px;
  transform-style: preserve-3d;
  transform: rotateX(-90deg);
}
/* The body of the pillar — visible side wall */
.ox-reactor-col-body {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(255,255,255,0.10) 0%,
      var(--c) 15%,
      var(--c) 80%,
      rgba(255,255,255,0.95) 100%);
  border-radius: 4px 4px 0 0;
  box-shadow:
    0 0 12px var(--c),
    0 0 24px color-mix(in srgb, var(--c) 60%, transparent),
    inset 0 0 6px rgba(255,255,255,0.3);
  height: var(--h);
  transform-origin: bottom center;
  transform: translateY(calc(-1 * var(--h)));
  animation: oxReactorPulse 3s ease-in-out infinite;
  animation-delay: calc(var(--pct) * 30ms);
}
/* Bright cap glow at the top of each column */
.ox-reactor-col-cap {
  position: absolute;
  left: 50%; top: 0;
  width: 18px; height: 18px;
  transform: translate(-50%, calc(-1 * var(--h) - 6px));
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--c) 35%, transparent 70%);
  box-shadow: 0 0 18px var(--c), 0 0 36px var(--c);
  animation: oxReactorCap 2.4s ease-in-out infinite;
  animation-delay: calc(var(--pct) * 20ms);
  pointer-events: none;
}
/* Glowing footprint dot at the column base */
.ox-reactor-col-base {
  position: absolute;
  left: -8px; top: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  box-shadow: 0 0 10px var(--c);
  filter: blur(0.5px);
}
/* Floating % tag — counter-rotated so always faces viewer */
.ox-reactor-col-tag {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, calc(-1 * var(--h) - 28px))
             rotateX(-62deg) rotateZ(calc(-1 * var(--ang)));
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--c);
  text-shadow: 0 0 6px var(--c), 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
}
@keyframes oxReactorPulse {
  0%, 100% { filter: brightness(1)   saturate(1); }
  50%      { filter: brightness(1.25) saturate(1.3); }
}
@keyframes oxReactorCap {
  0%, 100% { opacity: 0.85; transform: translate(-50%, calc(-1 * var(--h) - 6px)) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, calc(-1 * var(--h) - 6px)) scale(1.15); }
}

/* Central reactor core — pulsing energy ball sitting on the base */
.ox-reactor-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 88px; height: 88px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  pointer-events: none;
}
.ox-reactor-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(126,252,219,0.6);
  box-shadow: 0 0 18px rgba(126,252,219,0.6), inset 0 0 12px rgba(126,252,219,0.4);
  animation: oxReactorCoreRing 6s linear infinite;
}
.ox-reactor-core-orb {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff, rgba(126,252,219,0.85) 35%, var(--teal) 60%, var(--teal-deep) 95%);
  box-shadow:
    0 0 28px rgba(126,252,219,0.85),
    0 0 60px rgba(77,212,190,0.55),
    inset 0 0 16px rgba(255,255,255,0.4);
  animation: oxReactorCoreOrb 3s ease-in-out infinite;
}
.ox-reactor-core-pulse {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  border: 1px solid rgba(126,252,219,0.5);
  animation: oxReactorCorePulse 2.6s ease-out infinite;
}
@keyframes oxReactorCoreRing { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes oxReactorCoreOrb {
  0%, 100% { filter: brightness(1)   saturate(1.1); transform: scale(1); }
  50%      { filter: brightness(1.2) saturate(1.4); transform: scale(1.06); }
}
@keyframes oxReactorCorePulse {
  0%   { opacity: 0.8; transform: scale(0.55); }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* Holographic scan line sweep across the disc */
.ox-reactor-scan {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 5px,
      rgba(126,252,219,0.06) 6px, rgba(255,255,255,0) 7px),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: oxPieScan 5s linear infinite;
  transform: translateZ(2px);
}

/* HUD readout — needs to counter-rotate the bigger 62deg tilt and sit
   high enough above the base that it doesn't get hidden by columns. */
.ox-reactor-hud {
  transform: rotateX(-62deg) translateZ(110px) !important;
}

@media (max-width: 1000px) {
  .ox-reactor-frame { transform: rotateX(54deg); }
  .ox-reactor-hud   { transform: rotateX(-54deg) translateZ(120px) !important; }
  .ox-reactor-col-tag { transform: translate(-50%, calc(-1 * var(--h) - 28px))
                                   rotateX(-54deg) rotateZ(calc(-1 * var(--ang))); }
}

/* ============================================================
   12c. HERO PLASMA GYROSCOPE — replaces the 3D coin
   ============================================================ */
.ox-gyro-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* Faint 3D grid floor under the gyro */
.ox-gyro-grid {
  position: absolute;
  inset: 12% 8% 8% 8%;
  background:
    linear-gradient(to right, rgba(126,252,219,0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgba(126,252,219,0.08) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, black 30%, transparent 70%);
          mask: radial-gradient(ellipse at 50% 60%, black 30%, transparent 70%);
  transform: rotateX(70deg) translateZ(-60px);
  pointer-events: none;
  opacity: 0.6;
}

/* Corner brackets - hud frame */
.ox-gyro-corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--teal-bright);
  filter: drop-shadow(0 0 8px var(--teal-glow));
  pointer-events: none;
}
.ox-gyro-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.ox-gyro-corner.tr { top: 12px; right: 12px; border-left:  none; border-bottom: none; }
.ox-gyro-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top:    none; }
.ox-gyro-corner.br { bottom: 12px; right: 12px; border-left:  none; border-top:    none; }

/* The 3D stage — perspective + tumble */
.ox-gyro-stage {
  position: relative;
  width: clamp(240px, 70%, 380px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: oxGyroFloat 6s ease-in-out infinite;
}
@keyframes oxGyroFloat {
  0%, 100% { transform: translateY(-6px) rotateX(8deg); }
  50%      { transform: translateY( 6px) rotateX(-2deg); }
}

/* Soft ground shadow under the gyro */
.ox-gyro-shadow {
  position: absolute;
  left: 50%; bottom: -8%;
  width: 70%; height: 14%;
  transform: translate(-50%, 0) rotateX(80deg);
  background: radial-gradient(ellipse at center,
    rgba(77,212,190,0.45) 0%, rgba(77,212,190,0.12) 40%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: oxGyroShadow 6s ease-in-out infinite;
}
@keyframes oxGyroShadow {
  0%, 100% { transform: translate(-50%, 0) rotateX(80deg) scaleX(1);   opacity: 0.85; }
  50%      { transform: translate(-50%, 0) rotateX(80deg) scaleX(1.1); opacity: 1; }
}

/* Vertical plasma beams shooting top/bottom */
.ox-gyro-beam {
  position: absolute;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--teal-bright) 40%, var(--teal-bright) 60%, transparent 100%);
  box-shadow: 0 0 10px var(--teal-bright), 0 0 24px rgba(126,252,219,0.6);
  transform: translateX(-50%);
  animation: oxGyroBeam 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ox-gyro-beam-up   { top: -8%; height: 30%; }
.ox-gyro-beam-down { bottom: -8%; height: 30%; }
@keyframes oxGyroBeam {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* The 3 intersecting gyroscope rings */
.ox-gyro-rings {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.ox-gyro-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 18px rgba(77,212,190,0.4), inset 0 0 18px rgba(77,212,190,0.25);
  transform-style: preserve-3d;
}
.ox-gyro-ring-x {
  border-color: var(--teal-bright);
  border-right-color: rgba(126,252,219,0.25);
  border-bottom-color: rgba(126,252,219,0.25);
  transform: rotateX(75deg);
  animation: oxGyroSpinX 9s linear infinite;
}
.ox-gyro-ring-y {
  inset: 14%;
  border-color: var(--teal-bright);
  border-top-color: rgba(126,252,219,0.25);
  border-left-color: rgba(126,252,219,0.25);
  transform: rotateY(75deg);
  animation: oxGyroSpinY 11s linear infinite reverse;
}
.ox-gyro-ring-z {
  inset: 4%;
  border-style: dashed;
  border-color: rgba(126,252,219,0.6);
  transform: rotateZ(0deg) rotateX(20deg);
  animation: oxGyroSpinZ 16s linear infinite;
}
@keyframes oxGyroSpinX { from { transform: rotateX(75deg) rotateZ(0deg);   } to { transform: rotateX(75deg) rotateZ(360deg);   } }
@keyframes oxGyroSpinY { from { transform: rotateY(75deg) rotateZ(0deg);   } to { transform: rotateY(75deg) rotateZ(360deg);   } }
@keyframes oxGyroSpinZ { from { transform: rotateX(20deg) rotateZ(0deg);   } to { transform: rotateX(20deg) rotateZ(360deg);   } }

/* Two orbits of energy nodes circling around the rings */
.ox-gyro-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}
.ox-gyro-orbit-a {
  transform: rotateX(60deg);
  animation: oxGyroOrbitA 14s linear infinite;
}
.ox-gyro-orbit-b {
  inset: -8%;
  transform: rotateX(30deg) rotateY(20deg);
  animation: oxGyroOrbitB 22s linear infinite reverse;
}
@keyframes oxGyroOrbitA { from { transform: rotateX(60deg) rotateZ(0deg); } to { transform: rotateX(60deg) rotateZ(360deg); } }
@keyframes oxGyroOrbitB { from { transform: rotateX(30deg) rotateY(20deg) rotateZ(0deg); } to { transform: rotateX(30deg) rotateY(20deg) rotateZ(360deg); } }

.ox-gyro-node {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--teal-bright) 40%, transparent 75%);
  box-shadow: 0 0 12px var(--teal-bright), 0 0 24px var(--teal-glow);
  transform-origin: 50% 50%;
  transform: rotate(var(--ang)) translateY(-46%);
  animation: oxGyroNodePulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
.ox-gyro-orbit-b .ox-gyro-node {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: radial-gradient(circle, #ffffff 0%, #56e6cd 40%, transparent 75%);
  box-shadow: 0 0 10px #7efcdb, 0 0 20px rgba(126,252,219,0.5);
}
@keyframes oxGyroNodePulse {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50%      { opacity: 1;   filter: brightness(1.4); }
}

/* The energy core in the center */
.ox-gyro-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.ox-gyro-core-halo {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(126,252,219,0.55) 0%,
    rgba(77,212,190,0.30) 30%,
    rgba(77,212,190,0.10) 55%,
    transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  animation: oxGyroHalo 4s ease-in-out infinite;
}
@keyframes oxGyroHalo {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
/* Orb is now a SUBTLE translucent halo so the logo reads clearly through it. */
.ox-gyro-core-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(126,252,219,0.18) 0%,
      rgba(77,212,190,0.10) 40%,
      rgba(31,148,133,0.05) 70%,
      transparent 100%);
  box-shadow:
    0 0 24px rgba(77,212,190,0.35),
    inset 0 0 12px rgba(126,252,219,0.18);
  border: 1px solid rgba(126,252,219,0.30);
  animation: oxGyroOrb 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes oxGyroOrb {
  0%, 100% { opacity: 0.85; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.ox-gyro-core-logo {
  position: relative;
  z-index: 5;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter:
    brightness(1.15)
    drop-shadow(0 0 8px rgba(126,252,219,0.85))
    drop-shadow(0 0 18px rgba(77,212,190,0.55));
  animation: oxGyroLogoSpin 18s linear infinite;
}
@keyframes oxGyroLogoSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ox-gyro-core-pulse {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px solid rgba(126,252,219,0.6);
  pointer-events: none;
  animation: oxGyroCorePulse 3s ease-out infinite;
}
.ox-gyro-core-pulse.p2 { animation-delay: 1.5s; }
@keyframes oxGyroCorePulse {
  0%   { opacity: 0.85; transform: scale(0.7); }
  100% { opacity: 0;    transform: scale(1.6); }
}

/* Bottom HUD readout */
.ox-gyro-readout {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--teal-bright);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(126,252,219,0.3);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.ox-gyro-readout-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 8px var(--teal-bright);
  animation: oxGyroReadoutDot 1.4s ease-in-out infinite;
}
@keyframes oxGyroReadoutDot {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}

/* ============================================================
   13. Sci-fi roadmap timeline (vertical, alternating, glowing nodes)
   ============================================================ */
.ox-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
  padding: 20px 0;
}
.ox-timeline-rail {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(77,212,190,0.3) 8%,
      rgba(77,212,190,0.6) 50%,
      rgba(77,212,190,0.3) 92%,
      transparent 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 16px rgba(77,212,190,0.5);
}
.ox-timeline-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--teal-bright), transparent);
  background-size: 100% 30%;
  animation: railScan 4s linear infinite;
  opacity: 0.7;
}
@keyframes railScan {
  from { background-position: 0 -30%; }
  to   { background-position: 0 130%; }
}
@media (max-width: 800px) { .ox-timeline-rail { left: 28px; } }

.ox-tl-phase {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: 0;
}
.ox-tl-phase:nth-child(odd) .ox-tl-card { grid-column: 1; text-align: right; align-items: flex-end; }
.ox-tl-phase:nth-child(odd) .ox-tl-card .ox-tl-items li { flex-direction: row-reverse; }
.ox-tl-phase:nth-child(even) .ox-tl-card { grid-column: 3; }
.ox-tl-phase:nth-child(odd) .ox-tl-node { grid-column: 2; }
.ox-tl-phase:nth-child(even) .ox-tl-node { grid-column: 2; }

@media (max-width: 800px) {
  .ox-tl-phase { grid-template-columns: 56px 1fr; }
  .ox-tl-phase:nth-child(odd) .ox-tl-card,
  .ox-tl-phase:nth-child(even) .ox-tl-card { grid-column: 2; text-align: left; align-items: flex-start; }
  .ox-tl-phase:nth-child(odd) .ox-tl-card .ox-tl-items li { flex-direction: row; }
  .ox-tl-phase .ox-tl-node { grid-column: 1; }
}

.ox-tl-node {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--teal-bright), var(--teal-deep));
  border: 1px solid rgba(126,252,219,0.6);
  box-shadow:
    0 0 0 4px rgba(77,212,190,0.18),
    0 0 24px rgba(77,212,190,0.7),
    inset 0 0 8px rgba(255,255,255,0.3);
  position: relative;
  font-family: inherit;
  font-weight: 800;
}
.ox-tl-num { color: #03110e; font-size: 18px; }
.ox-tl-future .ox-tl-node {
  background: radial-gradient(circle at 30% 30%, rgba(126,252,219,0.3), rgba(31,148,133,0.2));
  border-color: rgba(126,252,219,0.3);
}
.ox-tl-live .ox-tl-node::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--teal-bright);
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ox-tl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  background:
    linear-gradient(135deg, rgba(77,212,190,0.06), rgba(0,0,0,0.4));
  border: 1px solid rgba(77,212,190,0.2);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.ox-tl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(77,212,190,0.04) 38px, rgba(77,212,190,0.04) 39px);
  pointer-events: none;
}
.ox-tl-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(232,245,241,0.5);
}
.ox-tl-status {
  color: var(--teal-bright);
  border: 1px solid rgba(77,212,190,0.4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
}
.ox-tl-future .ox-tl-status { color: rgba(232,245,241,0.45); border-color: rgba(255,255,255,0.15); }
.ox-tl-live .ox-tl-status {
  background: var(--teal); color: #03110e; border-color: transparent;
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,212,190,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(77,212,190,0); }
}
.ox-tl-codename {
  font-family: 'LabsAmiga', inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--dark);
  text-shadow: 0 0 18px rgba(77,212,190,0.35);
}
.ox-tl-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit;
  font-size: 13px;
  color: rgba(232,245,241,0.78);
}
.ox-tl-items li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ox-tl-items svg { color: var(--teal-bright); flex-shrink: 0; }

/* ============================================================
   14a. About Us — holographic 3D cube
   --------------------------------------------------------------
   Six logo-clad faces tumble inside a HUD frame with corner ticks,
   a tilted grid floor, and twin orbiting energy rings.
   ============================================================ */
.ox-holo-cube-wrap {
  --cube-size: clamp(140px, 14vw, 200px);
  position: relative;
  width: calc(var(--cube-size) * 1.6);
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1400px;
  display: grid;
  place-items: center;
}

/* Tilted grid floor below the cube — makes the depth read. */
.ox-holo-grid {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(to right, rgba(77,212,190,0.18) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgba(77,212,190,0.18) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 65%, rgba(77,212,190,0.18), transparent 70%);
  -webkit-mask: radial-gradient(ellipse at 50% 65%, black 0%, transparent 75%);
          mask: radial-gradient(ellipse at 50% 65%, black 0%, transparent 75%);
  transform: rotateX(72deg) translateZ(-60px);
  filter: blur(0.3px);
  pointer-events: none;
}

/* Two orbital rings — one dashed, one neon top-arc. */
.ox-holo-ring {
  position: absolute;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(77, 212, 190, 0.5);
  box-shadow:
    0 0 24px rgba(77, 212, 190, 0.25),
    inset 0 0 24px rgba(77, 212, 190, 0.12);
  transform: translate(-50%, -50%) rotateX(70deg);
  left: 50%; top: 50%;
  animation: oxHoloRing 18s linear infinite;
  pointer-events: none;
}
.ox-holo-ring.r2 {
  width: 70%;
  border: 1.5px solid transparent;
  border-top: 1.5px solid var(--teal-bright);
  border-right: 1.5px solid rgba(77,212,190,0.2);
  border-bottom: 1.5px solid var(--teal-deep);
  box-shadow: 0 0 18px rgba(126,252,219,0.45);
  animation-duration: 11s;
  animation-direction: reverse;
}
@keyframes oxHoloRing {
  from { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}

.ox-holo-cube-stage {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation: oxFloatUp 5.5s ease-in-out infinite;
}

.ox-holo-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: oxCubeTumble 18s linear infinite;
}
@keyframes oxCubeTumble {
  0%   { transform: rotateY(0deg)   rotateX(8deg); }
  25%  { transform: rotateY(90deg)  rotateX(-12deg); }
  50%  { transform: rotateY(180deg) rotateX(8deg); }
  75%  { transform: rotateY(270deg) rotateX(-12deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}

.ox-cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 252, 219, 0.55);
  background:
    linear-gradient(135deg, rgba(77,212,190,0.18), rgba(0,0,0,0.55)),
    radial-gradient(circle at 30% 30%, rgba(126,252,219,0.18), transparent 60%);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 24px rgba(77, 212, 190, 0.22),
    0 0 18px rgba(77, 212, 190, 0.32);
  overflow: hidden;
}
.ox-cube-face img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(126, 252, 219, 0.7))
    drop-shadow(0 0 30px rgba(77, 212, 190, 0.35));
}
/* horizontal scan-line on each face */
.ox-cube-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-bright), transparent);
  box-shadow: 0 0 14px var(--teal-bright);
  opacity: 0.55;
  animation: oxCubeScan 3.6s linear infinite;
  pointer-events: none;
}
@keyframes oxCubeScan {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { top: 100%; opacity: 0; }
}

.ox-cube-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.ox-cube-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.ox-cube-right  { transform: rotateY(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.ox-cube-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.ox-cube-top    { transform: rotateX(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.ox-cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

.ox-holo-base {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 70%;
  height: 22px;
  background: radial-gradient(ellipse at center, rgba(77,212,190,0.55), transparent 70%);
  filter: blur(10px);
  transform: translateX(-50%);
  animation: oxShadowPulse 5s ease-in-out infinite;
  pointer-events: none;
}

/* HUD corner ticks */
.ox-holo-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--teal-bright);
  filter: drop-shadow(0 0 8px var(--teal-glow));
  pointer-events: none;
}
.ox-holo-corner.tl { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.ox-holo-corner.tr { top: 6px;    right: 6px;   border-left: none;  border-bottom: none; }
.ox-holo-corner.bl { bottom: 6px; left: 6px;    border-right: none; border-top: none; }
.ox-holo-corner.br { bottom: 6px; right: 6px;   border-left: none;  border-top: none; }

/* ============================================================
   14b. FAQ — orbital sphere of glowing dots
   --------------------------------------------------------------
   Fibonacci-distributed dots on the surface of a 3D sphere with a
   counter-spinning equatorial ring; the centre holds the brand mark
   so it reads as a "data planet" rather than another coin.
   ============================================================ */
.ox-orbital-wrap {
  --orb-r: clamp(80px, 9vw, 110px);
  position: relative;
  width: calc(var(--orb-r) * 2.4);
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 1200px;
  display: grid;
  place-items: center;
}
.ox-orbital-stage {
  position: relative;
  width: calc(var(--orb-r) * 2);
  height: calc(var(--orb-r) * 2);
  transform-style: preserve-3d;
  animation: oxOrbStage 22s linear infinite;
}
@keyframes oxOrbStage {
  from { transform: rotateY(0deg) rotateX(15deg); }
  to   { transform: rotateY(360deg) rotateX(15deg); }
}

.ox-orbital-sphere {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* The dots — distributed on a unit sphere via fibonacci, projected
   to world coords via the --x/--y/--z multipliers from the JS. */
.ox-orb-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow:
    0 0 8px var(--teal-bright),
    0 0 16px rgba(77, 212, 190, 0.6);
  transform: translate3d(
    calc(var(--x) * var(--orb-r)),
    calc(var(--y) * var(--orb-r)),
    calc(var(--z) * var(--orb-r))
  );
  animation: oxOrbPulse 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.04s);
}
@keyframes oxOrbPulse {
  0%, 100% { opacity: 0.35; transform: translate3d(
                calc(var(--x) * var(--orb-r)),
                calc(var(--y) * var(--orb-r)),
                calc(var(--z) * var(--orb-r))) scale(0.8); }
  50%      { opacity: 1;    transform: translate3d(
                calc(var(--x) * var(--orb-r)),
                calc(var(--y) * var(--orb-r)),
                calc(var(--z) * var(--orb-r))) scale(1.2); }
}

/* Equatorial rings cross-cut the sphere. */
.ox-orbital-equator {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--orb-r) * 2);
  height: calc(var(--orb-r) * 2);
  border-radius: 50%;
  border: 1px solid rgba(126, 252, 219, 0.55);
  box-shadow: 0 0 16px rgba(77, 212, 190, 0.3), inset 0 0 16px rgba(77, 212, 190, 0.18);
  transform: translate(-50%, -50%) rotateX(72deg);
  animation: oxOrbEquator 14s linear infinite;
  pointer-events: none;
}
.ox-orbital-equator.e2 {
  border-style: dashed;
  border-color: rgba(77, 212, 190, 0.4);
  transform: translate(-50%, -50%) rotateX(20deg) rotateY(60deg);
  animation-direction: reverse;
  animation-duration: 9s;
}
@keyframes oxOrbEquator {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}

.ox-orb-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 60%; height: 60%;
  margin-left: -30%;
  margin-top: -30%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(126,252,219,0.45), rgba(31,148,133,0.15) 60%, transparent 80%);
  box-shadow:
    0 0 30px rgba(77, 212, 190, 0.55),
    inset 0 0 14px rgba(255,255,255,0.18);
  transform: translateZ(0);
}
.ox-orb-core img {
  width: 70%; height: 70%; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(126,252,219,0.7));
  animation: oxLogoSpin 10s linear infinite;
}
@keyframes oxLogoSpin {
  to { transform: rotateY(360deg); }
}

/* ============================================================
   15. Roadmap timeline — proper gaps + reveal-glow + hover-glow
   --------------------------------------------------------------
   The original layout left phase 1↔2 visually touching because
   alternating cards on opposite sides shared a small 32px row gap.
   Increase the row gap, give each phase a stable min-height and
   add a glow that fires both on hover AND when the phase enters
   the viewport.
   ============================================================ */
.ox-timeline { gap: 120px; padding: 36px 0 56px; }
@media (max-width: 800px) { .ox-timeline { gap: 72px; padding: 20px 0; } }

.ox-tl-phase {
  align-items: stretch;
  min-height: 200px;       /* taller so even short cards have breathing room */
  position: relative;
  isolation: isolate;
}
/* Dramatic radial halo behind the card */
.ox-tl-phase::before {
  content: "";
  position: absolute;
  inset: -24px 0 -24px 0;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(77, 212, 190, 0.32), rgba(77, 212, 190, 0.10) 45%, transparent 75%);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(18px);
}
.ox-tl-phase.ox-reveal--in::before,
.ox-tl-phase:hover::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.ox-tl-phase:hover::before,
.ox-tl-phase.ox-reveal--in::before {
  opacity: 1;
}

.ox-tl-card {
  transition:
    border-color 0.35s ease,
    box-shadow 0.45s ease,
    transform 0.35s ease;
}
/* When a phase comes into view OR the user hovers it, the card lights
   up: brighter border, neon halo, slight lift. */
.ox-tl-phase.ox-reveal--in .ox-tl-card,
.ox-tl-phase:hover .ox-tl-card {
  border-color: rgba(126, 252, 219, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(126, 252, 219, 0.45) inset,
    0 26px 60px -14px rgba(77, 212, 190, 0.75),
    0 0 60px rgba(77, 212, 190, 0.55),
    0 0 100px rgba(77, 212, 190, 0.25) !important;
  transform: translateY(-3px) !important;
}

/* The big circular node also pulses brighter when its phase is in view. */
.ox-tl-phase .ox-tl-node {
  transition: box-shadow 0.45s ease, transform 0.35s ease;
}
.ox-tl-phase.ox-reveal--in .ox-tl-node,
.ox-tl-phase:hover .ox-tl-node {
  box-shadow:
    0 0 0 8px rgba(77, 212, 190, 0.28),
    0 0 0 16px rgba(77, 212, 190, 0.10),
    0 0 40px rgba(126, 252, 219, 1),
    0 0 80px rgba(77, 212, 190, 0.7),
    inset 0 0 12px rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.12) !important;
}

/* The future phase (state=future) uses the same glow as the others when
   it scrolls into view — the only thing dim is its idle state, not the
   reveal. Otherwise Phase 04 looks dead. */
.ox-tl-future.ox-reveal--in .ox-tl-card,
.ox-tl-future:hover .ox-tl-card {
  border-color: rgba(126, 252, 219, 0.55);
  box-shadow:
    0 0 0 1px rgba(126, 252, 219, 0.25) inset,
    0 22px 50px -16px rgba(77, 212, 190, 0.55),
    0 0 38px rgba(77, 212, 190, 0.32);
  transform: translateY(-2px);
}
.ox-tl-future.ox-reveal--in .ox-tl-node,
.ox-tl-future:hover .ox-tl-node {
  background: linear-gradient(140deg, var(--teal-bright), var(--teal));
  color: #03110e;
  box-shadow:
    0 0 0 6px rgba(77, 212, 190, 0.22),
    0 0 32px rgba(126, 252, 219, 0.85),
    0 0 60px rgba(77, 212, 190, 0.55),
    inset 0 0 10px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}
/* Future-state phase halo (the radial bg behind the card) — fire it on
   scroll-in too, with the same intensity. */
.ox-tl-future.ox-reveal--in::before {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(77, 212, 190, 0.28), transparent 70%);
  opacity: 1;
}

/* ============================================================
   16. Footer ("apana vala") — polished Oxchange brand footer
   ============================================================ */
.ox-footer {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 18%, rgba(0,0,0,0.65) 100%);
  border-top: 1px solid rgba(77,212,190,0.22);
  padding: 80px 24px 28px;
  margin-top: 60px;
  overflow: hidden;
}
/* Soft teal glow blooming up from the top edge */
.ox-footer-glow {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(77,212,190,0.22), transparent 70%);
  pointer-events: none;
  filter: blur(6px);
}
/* Animated gradient hairline along the very top of the footer */
.ox-footer-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(77,212,190,0.6) 20%, var(--teal-bright) 50%,
    rgba(77,212,190,0.6) 80%, transparent);
  background-size: 200% 100%;
  animation: oxFooterRule 6s linear infinite;
}
@keyframes oxFooterRule {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

.ox-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 1000px) { .ox-footer-top { grid-template-columns: 1fr; gap: 40px; } }

.ox-footer-brand .ox-footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; margin-bottom: 18px;
}
.ox-footer-brand .ox-footer-logo img {
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(77,212,190,0.5));
}
.ox-footer-brand .ox-footer-logo span {
  font-family: 'LabsAmiga', 'RobotoMono', system-ui, sans-serif;
  font-weight: 700; font-size: 26px; letter-spacing: 0.02em; line-height: 1;
  /* Match the bright mint of the logo icon — was a darker
     teal-bright→teal-deep gradient that read darker than the image. */
  color: var(--teal-bright);
  text-shadow: 0 0 14px rgba(126, 252, 219, 0.35);
  background: none;
  -webkit-text-fill-color: var(--teal-bright);
}
.ox-footer-tag {
  font-family: inherit;
  font-size: 13.5px; line-height: 1.7;
  color: rgba(232, 245, 241, 0.7);
  margin: 0 0 18px;
  max-width: 380px;
}

/* Live status pill */
.ox-footer-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(77, 212, 190, 0.08);
  border: 1px solid rgba(77, 212, 190, 0.28);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em;
  color: rgba(232, 245, 241, 0.85);
  margin-bottom: 22px;
}
.ox-footer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 10px var(--teal-bright);
  animation: pulse 1.6s ease-in-out infinite;
}

/* SVG social icons */
.ox-footer-social {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.ox-footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(77, 212, 190, 0.3);
  background: rgba(77, 212, 190, 0.05);
  color: var(--teal-bright);
  transition: all 0.25s ease;
}
.ox-footer-social a svg { width: 16px; height: 16px; }
.ox-footer-social a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #03110e;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(77, 212, 190, 0.45);
}

/* Telegram Support AI — rounded rectangle CTA below the social row */
.ox-footer-support {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(126, 252, 219, 0.35);
  background:
    linear-gradient(135deg, rgba(126, 252, 219, 0.10), rgba(31, 148, 133, 0.05));
  color: var(--teal-bright, #7efcdb) !important;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  max-width: 100%;
}
.ox-footer-support:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 252, 219, 0.7);
  background:
    linear-gradient(135deg, rgba(126, 252, 219, 0.18), rgba(31, 148, 133, 0.08));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 18px rgba(126, 252, 219, 0.28);
}
.ox-footer-support-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(126, 252, 219, 0.18);
  flex-shrink: 0;
}
.ox-footer-support-icon svg {
  width: 16px; height: 16px;
}
.ox-footer-support-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.ox-footer-support-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal-bright, #7efcdb);
}
.ox-footer-support-sub {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 245, 241, 0.6);
}
.ox-footer-support-arrow {
  margin-left: 4px;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.18s ease;
}
.ox-footer-support:hover .ox-footer-support-arrow {
  transform: translateX(3px);
}
@media (max-width: 480px) {
  .ox-footer-support { padding: 9px 14px; gap: 10px; }
  .ox-footer-support-title { font-size: 12px; }
  .ox-footer-support-sub { font-size: 9.5px; }
}

.ox-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 700px) { .ox-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 420px) { .ox-footer-cols { grid-template-columns: 1fr; } }

.ox-footer-col .ox-footer-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(77, 212, 190, 0.18);
}
.ox-footer-col a {
  display: block; padding: 6px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: rgba(232, 245, 241, 0.65);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.ox-footer-col a:hover {
  color: var(--teal-bright);
  padding-left: 6px;
}

/* Scrolling brand marquee */
.ox-footer-marquee {
  margin: 48px -24px 28px;
  padding: 14px 0;
  border-top: 1px solid rgba(77, 212, 190, 0.15);
  border-bottom: 1px solid rgba(77, 212, 190, 0.15);
  background: rgba(77, 212, 190, 0.03);
  overflow: hidden;
  position: relative;
}
.ox-footer-marquee::before,
.ox-footer-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ox-footer-marquee::before { left: 0;  background: linear-gradient(90deg, #03070a, transparent); }
.ox-footer-marquee::after  { right: 0; background: linear-gradient(-90deg, #03070a, transparent); }

.ox-footer-marquee-track {
  display: inline-flex; align-items: center; gap: 28px;
  white-space: nowrap;
  animation: oxFooterMarquee 28s linear infinite;
  font-family: 'LabsAmiga', 'RobotoMono', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-left: 28px;
}
.ox-footer-marquee-track i {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  -webkit-text-fill-color: var(--teal);
}
@keyframes oxFooterMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Bottom row: copyright + back-to-top */
.ox-footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: inherit;
  font-size: 12px;
  color: rgba(232, 245, 241, 0.55);
}
@media (max-width: 700px) {
  .ox-footer-bottom { grid-template-columns: 1fr; text-align: center; }
}
.ox-footer-bottom strong {
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ox-footer-meta {
  display: inline-block; margin-left: 14px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(232, 245, 241, 0.45);
}
.ox-footer-meta code {
  color: var(--teal-bright);
  font-family: inherit;
}
.ox-footer-mini a {
  color: var(--teal-bright);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(77, 212, 190, 0.3);
  border-radius: 999px;
  transition: all 0.2s ease;
}
.ox-footer-mini a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #03110e;
  box-shadow: 0 0 22px rgba(77, 212, 190, 0.4);
}

/* ============================================================
   17. Scroll-reveal animations
   ============================================================ */
.ox-reveal {
  opacity: 0 !important;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--rev-i, 0) * 60ms);
  will-change: opacity, transform;
}
.ox-reveal.ox-reveal--in {
  opacity: 1 !important;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ox-reveal { opacity: 1; transform: none; transition: none; }
}

/* Selection */
::selection {
  background: var(--teal);
  color: #03110e;
}

/* Hide the original floating social sidebar — we have our own footer socials. */
.social-wrapper,
.w-layout-vflex.social-wrapper,
[class*="social-wrapper"] { display: none !important; }

/* ============================================================
   20. PIE3D — true 3D extruded pie chart (replaces the reactor).
       14 stacked conic-gradient discs along Z create real
       physical thickness. Tilted from below so we see the top
       face AND the colored extruded sides.
   ============================================================ */

/* Give the pie its own column with breathing room from the legend */
.ox-tokenomics-grid {
  grid-template-columns: 1.05fr 0.85fr 1.1fr !important;
  gap: 56px !important;
}
@media (max-width: 1000px) {
  .ox-tokenomics-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

.ox-pie3d-stage {
  position: relative;
  width: 100%;
  min-height: 360px;
  padding: 32px 16px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  perspective-origin: 50% 110%;          /* camera below */
}

/* Sci-fi corner brackets */
.ox-pie3d-corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(126,252,219,0.5);
  pointer-events: none;
}
.ox-pie3d-corner.tl { top: 8px;    left: 8px;    border-right: 0; border-bottom: 0; }
.ox-pie3d-corner.tr { top: 8px;    right: 8px;   border-left: 0;  border-bottom: 0; }
.ox-pie3d-corner.bl { bottom: 8px; left: 8px;    border-right: 0; border-top: 0;    }
.ox-pie3d-corner.br { bottom: 8px; right: 8px;   border-left: 0;  border-top: 0;    }

.ox-pie3d-wrap {
  position: relative;
  width: clamp(240px, 26vw, 340px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

/* The pie itself: tilted on X so we see top + sides; rotates slowly. */
.ox-pie3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg);              /* slightly less tilt so we see more face */
  animation: oxPie3dSpin 60s linear infinite;
  filter: drop-shadow(0 40px 40px rgba(77,212,190,0.45));
}
@keyframes oxPie3dSpin {
  from { transform: rotateX(58deg) rotateZ(0deg);   }
  to   { transform: rotateX(58deg) rotateZ(360deg); }
}

/* Each layer = one conic-gradient disc at a different Z depth.
   Stacked together they form a physically thick pie. Donut hole in
   the centre via radial mask so the HUD readout sits inside it. */
.ox-pie3d-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #7efcdb 0%      38.7%,
    #5ce7c6 38.7%   58.7%,
    #3fc4ab 58.7%   73.7%,
    #2ea893 73.7%   83.7%,
    #1c8270 83.7%   89.2%,
    #86f0d6 89.2%   96.2%,
    #a6f5e0 96.2%   97.5%,
    #bdf8e8 97.5%   98.8%,
    #d2faef 98.8%   99.5%,
    #e2fcf5 99.5%   100%
  );
  -webkit-mask: radial-gradient(circle at center, transparent 28%, black 29%);
          mask: radial-gradient(circle at center, transparent 28%, black 29%);
  transform: translateZ(var(--z, 0));
  filter: brightness(var(--dim, 1)) saturate(var(--sat, 1));
  backface-visibility: visible;
  pointer-events: none;
}
/* Front-most layer gets a bright rim ring */
.ox-pie3d-layer:last-of-type {
  box-shadow:
    0 0 14px rgba(126,252,219,0.6),
    inset 0 0 18px rgba(0,0,0,0.45);
}

/* Hover hotspots — invisible CSS-clip-path wedges sitting on the front face */
.ox-pie3d-hots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translateZ(22px);
  pointer-events: none;
}
.ox-pie3d-hot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  background: rgba(255,255,255,0);
  transition: background 0.25s ease;
  /* Each hotspot is a wedge cut from the disc using clip-path
     pie chart trick: we use a conic-gradient mask of full opaque
     in the slice range and transparent outside. */
  -webkit-mask:
    conic-gradient(from var(--start), black 0deg, black var(--sweep), transparent var(--sweep)),
    radial-gradient(circle at center, transparent 28%, black 29%);
  -webkit-mask-composite: source-in;
          mask:
    conic-gradient(from var(--start), black 0deg, black var(--sweep), transparent var(--sweep)),
    radial-gradient(circle at center, transparent 28%, black 29%);
          mask-composite: intersect;
}
.ox-pie3d-hot--on {
  background: color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 0 24px var(--c);
  filter: brightness(1.4);
}

/* Soft elliptical ground shadow */
.ox-pie3d-shadow {
  position: absolute;
  bottom: -8%;
  left: 12%;
  right: 12%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(77,212,190,0.45), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  animation: oxPie3dShadow 5s ease-in-out infinite;
}
@keyframes oxPie3dShadow {
  0%, 100% { transform: scaleX(1);    opacity: 0.7; }
  50%      { transform: scaleX(0.85); opacity: 1;   }
}

/* HUD readout — sits under the pie, NOT centered inside (the donut hole
   would clip it weirdly under tilt) */
.ox-pie3d-hud {
  margin-top: 28px;
  text-align: center;
  font-family: inherit;
}
.ox-pie3d-hud .ox-pie-lbl {
  font-size: 11px; letter-spacing: 0.18em;
  color: rgba(232,245,241,0.55);
}
.ox-pie3d-hud .ox-pie-val {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--dark);
  text-shadow: 0 0 14px rgba(77,212,190,0.4);
}
.ox-pie3d-hud .ox-pie-sub {
  font-size: 13px;
  color: var(--teal-bright);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

/* Reactor restored — pie3d removed because it didn't read as 3D enough. */
.ox-pie3d-stage, .ox-pie3d-wrap, .ox-pie3d, .ox-pie3d-layer,
.ox-pie3d-hots, .ox-pie3d-hot, .ox-pie3d-shadow, .ox-pie3d-hud,
.ox-pie3d-corner { display: none !important; }

/* Remove the FAQ orbital sphere art — make the FAQ list span full width. */
.ox-faq-art { display: none !important; }
.ox-faq-layout {
  grid-template-columns: 1fr !important;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Preloader — orange→teal recolor + reliable CSS animation since
   Webflow's IX2 trigger isn't firing on our cleaned-up pages.
   ============================================================ */
#line, #preloader #line {
  border-right-color: var(--teal) !important;
}
#line::after, #preloader #line::after {
  background-color: var(--teal-bright) !important;
  box-shadow: 0 0 8px var(--teal-bright);
}
#preloader, .preload-container {
  background-color: #03070a !important;
}
#preloader .pixel,
#line .pixel { background-color: var(--teal) !important; }

/* Force preloader visible on first paint */
html.ox-loading #preloader,
html.ox-loading .preload-container {
  display: flex !important;
  position: fixed !important;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
}

/* Each line bar grows 0% → 100% over 1.8s (staggered like Webflow's original) */
html.ox-loading #preloader #line {
  animation: oxLoaderFill 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
html.ox-loading #preloader #line:nth-child(1) { animation-delay: 0s;    }
html.ox-loading #preloader #line:nth-child(2) { animation-delay: 0.1s;  }
html.ox-loading #preloader #line:nth-child(3) { animation-delay: 0.2s;  }
html.ox-loading #preloader #line:nth-child(4) { animation-delay: 0.3s;  }
html.ox-loading #preloader #line:nth-child(5) { animation-delay: 0.4s;  }
@keyframes oxLoaderFill {
  from { height: 0%;   }
  to   { height: 100% !important; }
}

/* Fade out the entire preloader once the animation is done */
html.ox-loading #preloader,
html.ox-loading .preload-container {
  animation: oxLoaderHide 0.6s ease-in 2.2s forwards;
}
@keyframes oxLoaderHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ============================================================
   19. Reactor — beefier 3D pillars + holographic hover tooltip
   ============================================================ */

/* Original tilt — 56° shows the disc face clearly while still reading 3D. */
.ox-reactor-frame { transform: rotateX(56deg) !important; transform-origin: 50% 60%; }
.ox-reactor-hud   { transform: rotateX(-56deg) translateZ(115px) !important; }
.ox-reactor-stage { perspective: 1400px !important; perspective-origin: 50% 50%; }

/* Tame the base-glow + scan overlays so the new conic pie disc is visible.
   They were full-opacity and washing the slices into a flat teal blur. */
.ox-reactor-base-glow { opacity: 0.25 !important; mix-blend-mode: screen; }
.ox-reactor-scan      { opacity: 0.30 !important; }

/* Make sure the pie disc reads on top of any leftover overlays */
.ox-reactor-base { z-index: 1; }
.ox-reactor-base-glow { z-index: 0; }
.ox-reactor-cols, .ox-reactor-core { z-index: 5; }

/* Pillars: thicker, brighter, with a vertical light shaft behind */
.ox-reactor-col-pillar {
  width: 28px !important;
  height: 28px !important;
  left: -14px !important;
  top: -14px !important;
}
.ox-reactor-col-body {
  border-radius: 6px 6px 0 0 !important;
  box-shadow:
    0 0 16px var(--c),
    0 0 32px color-mix(in srgb, var(--c) 60%, transparent),
    inset 0 0 8px rgba(255,255,255,0.4),
    inset 0 -4px 6px rgba(0,0,0,0.4) !important;
  cursor: pointer;
}

/* Vertical glow shaft running up the pillar — extends the visual height */
.ox-reactor-col-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: var(--h);
  margin-left: -1px;
  background: linear-gradient(to top, var(--c), transparent);
  box-shadow: 0 0 12px var(--c), 0 0 24px var(--c);
  transform: translateY(calc(-1 * var(--h) - 30px));
  opacity: 0.8;
  filter: blur(0.6px);
  pointer-events: none;
}

/* Bigger base footprint */
.ox-reactor-col-base {
  width: 22px !important; height: 22px !important;
  left: -11px !important; top: -11px !important;
}

/* % tag: bigger, more readable */
.ox-reactor-col-tag {
  font-size: 11px !important;
  font-weight: 700;
}

/* Hot column (hovered) — pulse and brighten */
.ox-reactor-col--hot .ox-reactor-col-body,
.ox-reactor-col--hot .ox-reactor-col-cap,
.ox-reactor-col--hot .ox-reactor-col-base {
  filter: brightness(1.6) saturate(1.6);
}
.ox-reactor-col--hot .ox-reactor-col-glow { opacity: 1; }
.ox-reactor-col--hot .ox-reactor-col-tag {
  font-size: 13px !important;
  filter: brightness(1.4) drop-shadow(0 0 6px var(--c));
}

/* Holographic tooltip — appears on column hover */
.ox-reactor-tip {
  --c: var(--teal-bright);
  position: absolute;
  top: 24px;
  right: -8px;
  width: 240px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', 'RobotoMono', monospace;
  background:
    linear-gradient(135deg, rgba(2,8,10,0.92), rgba(5,15,18,0.85));
  border: 1px solid var(--c);
  border-radius: 4px;
  color: var(--dark);
  box-shadow:
    0 0 0 1px rgba(126,252,219,0.15) inset,
    0 0 24px color-mix(in srgb, var(--c) 50%, transparent),
    0 30px 60px -20px rgba(0,0,0,0.8);
  backdrop-filter: blur(14px) saturate(140%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  /* clip-path corner cuts (sci-fi notch) */
  clip-path: polygon(
    0 12px, 12px 0,
    calc(100% - 12px) 0, 100% 12px,
    100% 100%, 12px 100%, 0 calc(100% - 12px)
  );
}
.ox-reactor-tip--on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Top scan-line rule */
.ox-reactor-tip-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  filter: blur(0.5px);
  animation: oxTipScan 2.4s linear infinite;
}
@keyframes oxTipScan {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}

.ox-reactor-tip-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(232,245,241,0.75);
  margin-bottom: 6px;
}
.ox-reactor-tip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c), 0 0 16px var(--c);
}
.ox-reactor-tip-name {
  font-weight: 700;
  color: var(--c);
}
.ox-reactor-tip-pct {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c);
  line-height: 1;
  margin: 4px 0 12px;
  text-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent);
}
.ox-reactor-tip-row {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: rgba(232,245,241,0.55);
  padding: 4px 0;
  border-top: 1px dashed rgba(126,252,219,0.18);
}
.ox-reactor-tip-row:first-of-type { border-top: 0; }
.ox-reactor-tip-row span:last-child {
  color: var(--dark);
  font-weight: 600;
}
.ox-reactor-tip-status { color: var(--c) !important; }

/* Animated bars at the bottom (data activity readout) */
.ox-reactor-tip-bars {
  display: flex; gap: 3px; margin-top: 10px; height: 12px;
}
.ox-reactor-tip-bars span {
  flex: 1;
  background: linear-gradient(to top, var(--c), transparent);
  border-radius: 1px;
  opacity: 0.6;
  animation: oxTipBar 1s ease-in-out infinite;
}
.ox-reactor-tip-bars span:nth-child(1) { animation-delay: 0s;    }
.ox-reactor-tip-bars span:nth-child(2) { animation-delay: 0.15s; }
.ox-reactor-tip-bars span:nth-child(3) { animation-delay: 0.3s;  }
.ox-reactor-tip-bars span:nth-child(4) { animation-delay: 0.45s; }
.ox-reactor-tip-bars span:nth-child(5) { animation-delay: 0.6s;  }
.ox-reactor-tip-bars span:nth-child(6) { animation-delay: 0.75s; }
@keyframes oxTipBar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

/* The reactor stage needs `position: relative` for the absolute tooltip,
   and the columns must capture pointer events */
.ox-reactor-stage { position: relative; }
.ox-reactor-col   { pointer-events: auto; cursor: pointer; }

/* ============================================================
   18. HERO BLACK COIN — obsidian disc with engraved teal logo.
       Replaces the plasma gyroscope. Black body so the teal
       brand mark pops against it. Tumbles slowly (Y-rotation),
       slim metal-teal rims + ground shadow + 3 orbital sparks.
   ============================================================ */

.ox-bcoin-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

/* HUD grid + corner brackets (sci-fi frame, matches the rest of the page) */
.ox-bcoin-grid {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(126, 252, 219, 0.10);
  border-radius: 14px;
  background:
    linear-gradient(rgba(126,252,219,0.05) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(126,252,219,0.05) 1px, transparent 1px) 0 0/40px 40px;
  pointer-events: none;
}
.ox-bcoin-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid rgba(126,252,219,0.6);
  pointer-events: none;
}
.ox-bcoin-corner.tl { top: 16px;    left: 16px;    border-right: none; border-bottom: none; }
.ox-bcoin-corner.tr { top: 16px;    right: 16px;   border-left: none;  border-bottom: none; }
.ox-bcoin-corner.bl { bottom: 16px; left: 16px;    border-right: none; border-top: none;    }
.ox-bcoin-corner.br { bottom: 16px; right: 16px;   border-left: none;  border-top: none;    }

/* Stage holds the coin and its decorations */
.ox-bcoin-stage {
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}

/* Soft elliptical shadow on the ground */
.ox-bcoin-shadow {
  position: absolute;
  bottom: -6%;
  left: 12%;
  right: 12%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(77,212,190,0.4), transparent 65%);
  filter: blur(16px);
  animation: oxBcoinShadow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes oxBcoinShadow {
  0%, 100% { transform: scaleX(1);    opacity: 0.7; }
  50%      { transform: scaleX(0.85); opacity: 1;   }
}

/* The actual coin — preserve-3d so front/back faces sit on opposite sides */
.ox-bcoin {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: oxBcoinTumble 9s linear infinite, oxBcoinFloat 4s ease-in-out infinite;
}
@keyframes oxBcoinTumble {
  0%   { transform: rotateY(0deg)   rotateX(8deg); }
  50%  { transform: rotateY(180deg) rotateX(-6deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}
@keyframes oxBcoinFloat {
  0%, 100% { translate: 0 -6px; }
  50%      { translate: 0  6px; }
}

/* Stacked body — N transparent-edged disc slices give the coin REAL
   physical thickness. Each slice positioned along Z by --z. */
.ox-bcoin-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.ox-bcoin-slice {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Obsidian black with a subtle teal vignette; edges of the stack get a
     bit brighter (--edge) so the rim catches light. */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(26, 42, 40, calc(0.95 + var(--edge, 0))) 0%,
      rgba(13, 22, 20, 0.95) 45%,
      rgba(5,  10, 9,  0.98) 80%,
      rgba(2,  6,  10, 1)    100%);
  border: 1px solid rgba(126, 252, 219, calc(0.18 + var(--edge, 0) * 0.8));
  box-shadow:
    0 0 calc(6px + var(--edge, 0) * 14px) rgba(77, 212, 190, calc(0.18 + var(--edge, 0) * 0.55)),
    inset 0 0 8px rgba(0, 0, 0, 0.55);
  transform: translateZ(var(--z, 0));
  backface-visibility: visible;
}

/* Bright metal-teal rims at the very front and very back of the stack */
.ox-bcoin-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(126, 252, 219, 0.85);
  box-shadow:
    0 0 14px rgba(126, 252, 219, 0.65),
    inset 0 0 14px rgba(126, 252, 219, 0.5);
  pointer-events: none;
  backface-visibility: hidden;
}
.ox-bcoin-rim-front { transform: translateZ(17px); }
.ox-bcoin-rim-back  { transform: translateZ(-17px) rotateY(180deg); }

/* Logo on the front and back faces — sits just in front of the rim */
.ox-bcoin-face {
  position: absolute;
  inset: 16%;
  width: 68%;
  height: 68%;
  object-fit: contain;
  backface-visibility: hidden;
  filter:
    brightness(1.3)
    drop-shadow(0 0 12px rgba(126,252,219,0.95))
    drop-shadow(0 0 28px rgba(77,212,190,0.55));
}
.ox-bcoin-front { transform: translateZ(18px); }
.ox-bcoin-back  { transform: translateZ(-18px) rotateY(180deg); }

/* 3 orbital sparks circling the coin */
.ox-bcoin-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 12px var(--teal-bright), 0 0 26px var(--teal-glow);
  margin: -3px 0 0 -3px;
  pointer-events: none;
}
.ox-bcoin-spark.sa { animation: oxBcoinSpark 4s linear infinite;            --r: 56%; }
.ox-bcoin-spark.sb { animation: oxBcoinSpark 6s linear infinite reverse;    --r: 64%; width: 4px; height: 4px; margin:-2px 0 0 -2px; }
.ox-bcoin-spark.sc { animation: oxBcoinSpark 3s linear infinite;            --r: 48%; width: 4px; height: 4px; margin:-2px 0 0 -2px; background: white; box-shadow: 0 0 8px white, 0 0 18px var(--teal-bright); animation-delay: -1.4s; }
@keyframes oxBcoinSpark {
  from { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

/* Tactical readout under the coin */
.ox-bcoin-readout {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', 'RobotoMono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal-bright);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(126,252,219,0.35);
  border-radius: 6px;
  backdrop-filter: blur(8px);
}
.ox-bcoin-readout-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 8px var(--teal-bright);
  animation: oxBcoinDot 1.4s ease-in-out infinite;
}
@keyframes oxBcoinDot {
  0%, 100% { opacity: 0.6; transform: scale(0.9);  }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---------- Mobile viewport: remove stray horizontal scroll + fluid widths ---------- */
@media (max-width: 991px) {
  html {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
  }

  body {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    position: relative;
  }

  .page-transition-container.w-container,
  .w-layout-blockcontainer.page-transition-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  html body #hero-section.hero-section,
  html body section.hero-section {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
  }

  .hero-marquee-wrapper {
    overflow-x: clip !important;
    max-width: 100%;
  }

  .container.hero-container {
    max-width: 100% !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) {
  .ox-hero-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 16px !important;
    box-sizing: border-box !important;
  }

  .ox-headline {
    font-size: clamp(22px, 7vw, 42px) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ox-contract {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .ox-quicklinks {
    gap: 8px;
  }

  .ox-link-btn {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* ---------- Header cluster (.header-mobile-cluster in index.html): fluid mobile bar ---------- */
.portfolio-apply-header {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Desktop / tablet: preserve original 1fr : 2fr : 1fr proportions as brand | (nav ⅔ + actions ⅓ of the rest) */
@media (min-width: 992px) {
  .header-inner {
    grid-template-columns: 1fr 3fr !important;
  }

  .header-mobile-cluster {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    align-items: center;
    min-width: 0;
    column-gap: 1rem;
  }
}

@media (max-width: 991px) {
  .portfolio-apply-header {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .header-navbar {
    margin-left: max(0.25rem, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(0.25rem, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-navbar .header-container.w-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: clamp(0.15rem, 1.5vw, 0.45rem);
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .brand-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(40%, 9.25rem);
  }

  .header-mobile-cluster {
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.15rem, 2vw, 0.45rem);
    min-width: 0;
    max-width: 100%;
  }

  .header-main-nav {
    flex: 0 1 auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
  }

  .menu-button {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: clamp(36px, 11vw, 41px) !important;
    height: clamp(36px, 11vw, 40px) !important;
    z-index: 106 !important;
  }

  .header-actions {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.15rem, 2vw, 0.45rem) !important;
    min-width: 0 !important;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
  }

  .product-menu {
    flex-shrink: 1;
    min-width: 0;
  }

  .product-menu-toggle {
    max-width: 100%;
  }

  .product-menu-toggle-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28vw;
  }

  .header-actions .button-primary {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }

  .header-actions .button-primary .button-primary-text {
    padding: 0.35rem 0.45rem !important;
    font-size: clamp(8px, 2.6vw, 11px) !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 32vw;
  }

  /* Icon-only ecosystem toggle — frees width on phones */
  @media (max-width: 520px) {
    .product-menu-toggle-text {
      display: none !important;
    }

    .product-menu-toggle {
      padding-left: 0.35rem !important;
      padding-right: 0.35rem !important;
    }
  }
}

@media (max-width: 767px) {
  .brand.brand,
  .brand.w-nav-brand,
  .brand.w--current {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Cookie consent — body copy was too low-contrast on #1b1b1b */
#cookie-consent-banner.cookie-popup .cookie-popup-body,
#cookie-consent-banner .cookie-popup-body,
#cookie-consent-banner .cookie-popup-body p {
  color: rgba(232, 245, 241, 0.95) !important;
}

/* Cookie consent — Accept's 1rem margin-bottom was stretching the flex row,
   causing Reject's outer mint frame to extend past its inner dark slab. */
#cookie-consent-banner .cookie-popup-footer {
  align-items: center;
}
#cookie-consent-banner .button-outline-gradient,
#cookie-consent-banner .button-outline-secondary {
  margin-bottom: 0;
}

/* Tokenomics reactor — tap targets on devices without hover */
@media (hover: none), (pointer: coarse) {
  .ox-reactor-col {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ox-reactor-stage {
    touch-action: manipulation;
  }
}

/*
  iOS Safari / WebKit: `filter` on a 3D parent forces flattening of
  `transform-style: preserve-3d`, so pillar caps / base dots (“circles”) vanish.
  Desktop Chrome often still paints them — hence “missing circles” only on mobile
  after deploy. Strip the drop-shadow filter here; use box-shadow (does not
  flatten the same way) and nudge the column layer toward the camera.
*/
@media (max-width: 1000px) {
  .ox-reactor-frame {
    filter: none !important;
    box-shadow:
      0 32px 56px rgba(77, 212, 190, 0.24),
      0 16px 40px rgba(0, 0, 0, 0.5);
  }

  .ox-reactor-cols {
    transform: translateZ(48px);
    -webkit-transform: translateZ(48px);
  }

  .ox-reactor-scan {
    opacity: 0.16 !important;
  }

  .ox-reactor-col-pillar {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
}

/* ==========================================================================
   3D PIE CHART — tokenomics
   The SVG simulates 3D internally (squished ellipse + side walls), so we
   suppress the inherited reactor frame (rotateX, brackets, big tilted orbit
   rings) — those were designed for the old top-down chart and clashed with
   the new look, spilling rings outside the section.
   ========================================================================== */
.ox-3dpie-stage {
  perspective: none;
  transform-style: flat;
  padding: 0 !important;
}
.ox-3dpie-frame {
  width: clamp(320px, 34vw, 480px) !important;
  aspect-ratio: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 36px 60px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 28px rgba(77, 212, 190, 0.18)) !important;
}
/* Hide the legacy reactor decorations on the new pie (they were sized for
   the old top-down disc and look broken when the parent isn't tilted). */
.ox-3dpie-frame .ox-pie-bracket,
.ox-3dpie-frame .ox-pie-orbit { display: none !important; }

.ox-pie-3d {
  width: 100%; height: auto;
  display: block;
  overflow: visible;
}

/* ----- HUD donut slice interactivity ----- */
.ox-pie-slice {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1.2),
              filter 0.25s ease,
              opacity 0.2s ease;
  cursor: pointer;
}
.ox-pie-slice:hover,
.ox-pie-slice.is-hovered {
  /* slight outward lift + intense neon glow */
  transform: translate(calc(var(--lx) * 8px), calc(var(--ly) * 8px));
  filter: brightness(1.25)
          drop-shadow(0 0 8px rgba(126, 252, 219, 0.65))
          drop-shadow(0 0 18px rgba(126, 252, 219, 0.35));
}
/* When one slice is hovered, dim the others slightly to make it pop */
.ox-hud-donut:has(.ox-pie-slice.is-hovered) .ox-pie-slice:not(.is-hovered),
.ox-hud-donut:hover .ox-pie-slice:not(:hover):not(.is-hovered) {
  opacity: 0.55;
}

/* ----- Outer reticle: slow rotation ----- */
@keyframes oxHudReticleSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ox-hud-reticle {
  animation: oxHudReticleSpin 60s linear infinite;
  transform-origin: 250px 250px;
}

/* ----- Inner radar ticks: counter-rotate slowly ----- */
.ox-hud-inner-ticks {
  animation: oxHudReticleSpin 80s linear infinite reverse;
  transform-origin: 250px 250px;
}

/* ----- Scan beam: full rotation ----- */
@keyframes oxHudScanSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ox-hud-scan {
  animation: oxHudScanSpin 8s linear infinite;
  transform-origin: 250px 250px;
  mix-blend-mode: screen;
}

/* ----- Pulsing core orb ----- */
@keyframes oxHudCorePulse {
  0%, 100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate(0, -2px) scale(1.08);
  }
}
.ox-hud-coreorb {
  transform-box: fill-box;
  transform-origin: center;
  animation: oxHudCorePulse 3s ease-in-out infinite;
}

/* ----- Subtle entire-pie idle float ----- */
@keyframes oxPieFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.ox-pie-3d { animation: oxPieFloat 7s ease-in-out infinite; }

/* Smaller crosshair lines pulse */
@keyframes oxHudGridPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.8; }
}
.ox-hud-grid { animation: oxHudGridPulse 4s ease-in-out infinite; }

/* HUD frame override: bigger to fit the wider design */
.ox-hud-frame {
  width: clamp(340px, 36vw, 500px) !important;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 36px rgba(77, 212, 190, 0.20)) !important;
}

/* Highlight legend item when its slice is hovered (handled in JS) */
.ox-pie-legend li.is-hovered {
  background: rgba(126, 252, 219, 0.06);
  border-radius: 6px;
}

/* ==========================================================================
   TRUSTED-BY STRIP — sits right under hero
   ========================================================================== */
.ox-trusted-section {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.ox-trusted-strip {
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
  padding: 22px 28px;
  border: 1px solid rgba(126, 252, 219, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(126,252,219,0.08), transparent 60%),
    radial-gradient(60% 100% at 100% 50%, rgba(167,98,255,0.06), transparent 60%),
    rgba(8, 18, 16, 0.45);
  backdrop-filter: blur(8px);
}
.ox-trusted-strip-label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(232, 245, 241, 0.55); font-weight: 700;
  white-space: nowrap;
}
.ox-trusted-strip-row {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.ox-trusted-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 14px;
  border: 1px solid rgba(126, 252, 219, 0.18);
  background: rgba(8, 16, 15, 0.6);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.ox-trusted-pill:hover {
  border-color: var(--teal-bright);
  background: rgba(126, 252, 219, 0.05);
  transform: translateY(-2px);
}
.ox-trusted-pill img {
  width: 26px; height: 26px; object-fit: contain;
  filter: brightness(0) invert(1) sepia(1) hue-rotate(120deg) saturate(2) brightness(1.2);
}
.ox-trusted-pill-name {
  font-size: 14px; font-weight: 700; color: #efefe5;
  line-height: 1.1;
}
.ox-trusted-pill-sub {
  font-size: 11px; color: rgba(232, 245, 241, 0.55);
  letter-spacing: 0.02em; margin-top: 2px;
}
@media (max-width: 880px) {
  .ox-trusted-strip { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .ox-trusted-strip-row { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .ox-trusted-strip-row { flex-direction: column; align-items: stretch; }
  .ox-trusted-pill { justify-content: flex-start; }
}

/* ==========================================================================
   OXWALLET SPOTLIGHT — home page section
   ========================================================================== */
#ox-wallet { position: relative; overflow: hidden; }
#ox-wallet::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 100% 30%, rgba(126,252,219,0.10), transparent 60%),
    radial-gradient(500px 320px at 0% 70%, rgba(31,148,133,0.10), transparent 60%);
  pointer-events: none;
}

.ox-wallet-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative; z-index: 1;
}

.ox-wallet-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(126, 252, 219, 0.2);
  background: rgba(126, 252, 219, 0.05);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-bright); font-weight: 700;
}
.ox-wallet-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 10px var(--teal-bright);
  animation: oxWalletPulse 2.4s ease-in-out infinite;
}
@keyframes oxWalletPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.ox-wallet-title {
  text-align: left !important;
  margin: 18px 0 16px;
}
.ox-wallet-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ox-wallet-lede {
  margin: 0 0 24px !important;
  text-align: left !important;
  max-width: 520px;
}

.ox-wallet-bullets {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; gap: 10px;
}
.ox-wallet-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: rgba(232, 245, 241, 0.85);
  line-height: 1.5;
}
.ox-wallet-bullets li strong { color: var(--teal-bright); font-weight: 700; }
.ox-wallet-tick {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(126, 252, 219, 0.14);
  color: var(--teal-bright);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  margin-top: 1px;
}

.ox-wallet-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ox-wallet-cta {
  background: linear-gradient(135deg, var(--teal-bright), var(--teal)) !important;
  color: #02100e !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  padding: 12px 22px !important;
  box-shadow: 0 8px 24px rgba(77, 212, 190, 0.25);
}
.ox-wallet-cta:hover { box-shadow: 0 0 26px rgba(126, 252, 219, 0.5); transform: translateY(-1px); }
.ox-wallet-cta-ghost {
  border: 1px solid rgba(126, 252, 219, 0.28) !important;
  color: var(--teal-bright) !important;
  letter-spacing: 0.04em;
  padding: 12px 22px !important;
}
.ox-wallet-cta-ghost:hover { border-color: var(--teal) !important; background: rgba(126,252,219,0.05); }

.ox-wallet-trust {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(126, 252, 219, 0.1);
  flex-wrap: wrap;
}
.ox-wallet-trust-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(232, 245, 241, 0.55); font-weight: 700;
  margin-right: 4px;
}
.ox-wallet-trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(126, 252, 219, 0.22);
  background: rgba(126, 252, 219, 0.04);
  text-decoration: none;
  color: #efefe5;
  font-size: 13px; font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.ox-wallet-trust-pill:hover {
  border-color: var(--teal-bright);
  background: rgba(126, 252, 219, 0.08);
  transform: translateY(-1px);
}
.ox-wallet-trust-pill img {
  width: 20px; height: 20px; object-fit: contain;
  /* The source SVGs are dark — invert and tint to mint so they stand out
     on the dark background. */
  filter: brightness(0) invert(1) sepia(1) hue-rotate(120deg) saturate(2) brightness(1.2);
}
.ox-wallet-trust-pill span {
  color: #efefe5;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
}

/* Visual / phone */
.ox-wallet-visual {
  position: relative;
  display: grid; place-items: center;
  min-height: 540px;
}
.ox-wallet-visual-glow {
  position: absolute; inset: 8% 12%;
  background: radial-gradient(circle at 50% 50%, rgba(126,252,219,0.18), transparent 65%);
  filter: blur(40px);
  z-index: 0;
}
.ox-wallet-phone {
  position: relative; z-index: 1;
  width: 300px; height: 540px;
  border-radius: 40px;
  background: linear-gradient(140deg, #0a1715 0%, #07100f 100%);
  border: 1.5px solid rgba(126, 252, 219, 0.3);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(77, 212, 190, 0.18),
    inset 0 0 0 6px #050d0c;
  padding: 14px;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
}
.ox-wallet-phone:hover { transform: rotate(0deg) scale(1.02); }
.ox-wallet-phone-notch {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 22px; border-radius: 12px;
  background: #000; z-index: 5;
}
.ox-wallet-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 28px;
  background: #000;
  padding: 36px 14px 12px;
  overflow: hidden;
}
.ox-wallet-phone-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; color: #efefe5;
  padding: 0 6px; margin-bottom: 10px;
}
.ox-wallet-phone-bat {
  background: linear-gradient(90deg, var(--teal-bright), var(--teal));
  color: #021; padding: 1px 6px; border-radius: 4px;
  font-size: 9px;
}
.ox-wallet-phone-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.ox-wallet-phone-logo { width: 28px; height: 28px; border-radius: 8px; }
.ox-wallet-phone-name { font-size: 12px; font-weight: 700; color: #efefe5; line-height: 1.2; }
.ox-wallet-phone-addr { font-size: 10px; color: rgba(232,245,241,0.6); }

.ox-wallet-phone-bal {
  position: relative;
  border-radius: 14px;
  padding: 13px 14px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(31,148,133,0.45), transparent 55%),
    linear-gradient(135deg, rgba(77,212,190,0.22), rgba(31,148,133,0.04) 60%, rgba(8,18,16,0));
  border: 1px solid rgba(126, 252, 219, 0.18);
  overflow: hidden;
  margin-bottom: 12px;
}
.ox-wallet-phone-bal::after {
  content: ''; position: absolute; right: -10px; top: -8px;
  width: 110px; height: 110px;
  background: radial-gradient(circle at 30% 40%, var(--teal-bright), transparent 60%);
  opacity: 0.45; mix-blend-mode: screen;
}
.ox-wallet-phone-bal-label { font-size: 10px; color: rgba(232,245,241,0.7); position: relative; z-index: 1; }
.ox-wallet-phone-bal-amt {
  font-size: 22px; font-weight: 800;
  margin-top: 2px; letter-spacing: -0.02em;
  color: #efefe5;
  position: relative; z-index: 1;
}
.ox-wallet-phone-bal-amt span { color: rgba(232,245,241,0.5); }
.ox-wallet-phone-bal-pct {
  display: inline-flex; padding: 3px 8px; border-radius: 6px;
  background: rgba(126,252,219,0.16); color: var(--teal-bright);
  font-size: 10px; font-weight: 700;
  margin-top: 8px; position: relative; z-index: 1;
}

.ox-wallet-phone-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px;
}
.ox-wallet-phone-q {
  border: 1px solid rgba(126, 252, 219, 0.18);
  border-radius: 12px;
  padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; color: #efefe5;
  background: rgba(8, 16, 15, 0.4);
}
.ox-wallet-phone-q span {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(126,252,219,0.12);
  color: var(--teal-bright);
  display: grid; place-items: center;
  font-size: 12px;
}

.ox-wallet-phone-list {
  border-top: 1px solid rgba(126, 252, 219, 0.08);
  padding-top: 8px;
}
.ox-wallet-phone-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
}
.ox-wallet-phone-tok {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.ox-wallet-phone-tok-oc { background: linear-gradient(135deg, var(--teal-bright), var(--teal-deep)); color: #021; }
.ox-wallet-phone-tok-poly { background: linear-gradient(135deg, #a16ef5, #5b21b6); color: white; }
.ox-wallet-phone-tok-eth { background: linear-gradient(135deg, #627eea, #1d4ed8); color: white; }
.ox-wallet-phone-tok-info { flex: 1; line-height: 1.2; }
.ox-wallet-phone-tok-info > div:first-child { font-size: 11px; font-weight: 700; color: #efefe5; }
.ox-wallet-phone-sub { font-size: 9.5px; color: rgba(232,245,241,0.6); }
.ox-wallet-phone-tok-price { text-align: right; line-height: 1.2; }
.ox-wallet-phone-tok-price > div:first-child { font-size: 11px; font-weight: 700; color: #efefe5; }
.ox-wallet-phone-up { font-size: 10px; color: var(--teal-bright); font-weight: 600; }
.ox-wallet-phone-dn { font-size: 10px; color: #ff7e7e; font-weight: 600; }

@media (max-width: 980px) {
  .ox-wallet-grid { grid-template-columns: 1fr; gap: 48px; }
  .ox-wallet-visual { min-height: 580px; }
  .ox-wallet-phone { transform: rotate(0deg); }
}
@media (max-width: 540px) {
  .ox-wallet-trust img { height: 18px; }
  .ox-wallet-trust { gap: 12px; }
}

/* Hero stake CTA modal */
.ox-soon-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.ox-soon-modal--open { display: flex; }
.ox-soon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 14, 0.72);
  backdrop-filter: blur(3px);
}
.ox-soon-modal-card {
  position: relative;
  width: min(92vw, 360px);
  background: linear-gradient(135deg, rgba(8, 18, 24, 0.98), rgba(6, 15, 20, 0.96));
  border: 1px solid rgba(126, 252, 219, 0.55);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 0 24px rgba(126, 252, 219, 0.22);
  padding: 18px;
  text-align: center;
}
.ox-soon-modal-title {
  color: var(--teal-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.ox-soon-modal-copy {
  margin: 0 0 14px;
  color: rgba(232, 245, 241, 0.86);
  font-size: 14px;
}
.ox-soon-close-btn,
.ox-soon-modal-card .ox-soon-close-btn {
  margin-top: 6px;
  width: auto;
  display: inline-flex;
}

/* "Buy $OC" download-app modal — App Store + Google Play buttons */
.ox-app-store-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 14px;
}
.ox-app-store-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(126,252,219,0.10), rgba(31,148,133,0.06));
  border: 1px solid rgba(126, 252, 219, 0.35);
  color: var(--teal-bright, #7efcdb) !important;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ox-app-store-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 252, 219, 0.7);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 14px rgba(126,252,219,0.28);
}
.ox-app-store-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.ox-app-store-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 420px) {
  .ox-app-store-row { grid-template-columns: 1fr; }
}

/* CertiK Audit links — bold, teal, dashed underline + soft glow on hover */
.ox-certik-link,
.ox-footer-col a.ox-certik-link,
.ox-td-row a.ox-certik-link {
  color: var(--teal-bright, #7efcdb) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  transition: text-shadow 0.2s ease;
}
.ox-certik-link:hover,
.ox-footer-col a.ox-certik-link:hover,
.ox-td-row a.ox-certik-link:hover {
  text-shadow: 0 0 10px rgba(126, 252, 219, 0.6);
}

/* Match the navbar logo's tone to the teal brand text. The shipped logo PNG
   is dark; this filter chain converts black ink → our teal-bright accent.
   We override the prior "img[src*='custom/logo']{ filter: none }" rule that
   was added to keep the homepage logo punchy. */
.brand .brand-image,
img.brand-image[src*="custom/logo"],
.footer-logo .footer-logo-image,
img.footer-logo-image[src*="custom/logo"] {
  filter: brightness(0) saturate(100%) invert(91%) sepia(31%) saturate(528%) hue-rotate(112deg) brightness(101%) contrast(98%) !important;
}

/* ----------------------------------------------------------------- */
/* Wallet phone preview — LIGHT MODE (black iPhone-style bezel) +    */
/* full 3D treatment: perspective container, tilted body, edge       */
/* highlights, glossy screen glare, contact shadow underneath.       */
/* ----------------------------------------------------------------- */
.ox-wallet-visual {
  perspective: 1400px;
  perspective-origin: 50% 35%;
  -webkit-perspective: 1400px;
  -webkit-perspective-origin: 50% 35%;
}
.ox-wallet-phone {
  /* Brushed-aluminium body. The highlight is radial (top-center) so it
     stays believable whether the phone is leaning left or right
     during the swing animation.                                    */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #1c1c1f 0%, #0a0a0c 60%, #050507 100%);
  border: 1.5px solid #000;
  box-shadow:
    /* Big soft drop / contact shadow for the floor                  */
    0 60px 90px -20px rgba(0, 0, 0, 0.55),
    0 30px 50px -15px rgba(0, 0, 0, 0.45),
    /* Soft teal ambient bounce                                     */
    0 0 60px rgba(126, 252, 219, 0.14),
    /* Bezel side-walls — crisp inner ring + thin highlight rim     */
    inset 0 0 0 2px #2a2a2d,
    inset 0 0 0 6px #050507,
    /* Subtle glossy edge along the top                             */
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Continuous left ⇄ right 3D swing. Showcases both bezels.       */
  animation: ox-phone-swing 6s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
  transition: box-shadow 0.5s ease, filter 0.5s ease;
}
.ox-wallet-phone:hover {
  /* Pause the swing on hover so the user can read the wallet UI.   */
  animation-play-state: paused;
  box-shadow:
    0 70px 110px -20px rgba(0, 0, 0, 0.6),
    0 40px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(126, 252, 219, 0.22),
    inset 0 0 0 2px #2a2a2d,
    inset 0 0 0 6px #050507,
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

@keyframes ox-phone-swing {
  0%   { transform: perspective(1400px) rotateY(-16deg) rotateX(7deg)  rotate(-2deg); }
  25%  { transform: perspective(1400px) rotateY(  0deg) rotateX(5deg)  rotate( 0deg) translateZ(8px); }
  50%  { transform: perspective(1400px) rotateY( 16deg) rotateX(7deg)  rotate( 2deg); }
  75%  { transform: perspective(1400px) rotateY(  0deg) rotateX(5deg)  rotate( 0deg) translateZ(8px); }
  100% { transform: perspective(1400px) rotateY(-16deg) rotateX(7deg)  rotate(-2deg); }
}

/* Soft contact shadow under the device (separate from the bezel).
   Sits flat on the floor, fades outward.                           */
.ox-wallet-phone::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: -34px;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), rgba(0,0,0,0) 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

.ox-wallet-phone-notch {
  background: #000;
  /* Lift the notch a hair above the bezel for depth                */
  transform: translateX(-50%) translateZ(2px);
  -webkit-transform: translateX(-50%) translateZ(2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.ox-wallet-phone-screen {
  background: #ffffff;
  /* Push the screen forward in 3D so the bezel reads as a wall.    */
  transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Glossy screen glare — diagonal sweep from top-RIGHT to match
   the right-side tilt.                                              */
.ox-wallet-phone-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    245deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
}

/* Flatten / pause the swing on smaller screens so the wallet UI
   stays legible on phones and tablets.                             */
@media (max-width: 980px) {
  .ox-wallet-phone {
    animation-duration: 9s;
  }
}
@media (max-width: 640px) {
  .ox-wallet-phone {
    animation: none;
    transform: none;
  }
  .ox-wallet-phone:hover {
    transform: scale(1.02);
  }
}

/* Accessibility — kill the motion if the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ox-wallet-phone {
    animation: none;
    transform: perspective(1400px) rotateY(8deg) rotateX(5deg);
  }
}
.ox-wallet-phone-status,
.ox-wallet-phone-name,
.ox-wallet-phone-bal-amt {
  color: #062019;
}
.ox-wallet-phone-addr {
  color: rgba(6, 32, 25, 0.55);
}

/* Battery pill — keep the teal accent but darker text on the chip   */
.ox-wallet-phone-bat {
  background: linear-gradient(90deg, #4dd4be, #1f9485);
  color: #ffffff;
}

/* Balance card                                                      */
.ox-wallet-phone-bal {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(126, 252, 219, 0.55), transparent 55%),
    linear-gradient(135deg, rgba(126, 252, 219, 0.30), rgba(31, 148, 133, 0.06) 60%, rgba(255, 255, 255, 0));
  border: 1px solid rgba(31, 148, 133, 0.22);
}
.ox-wallet-phone-bal::after {
  background: radial-gradient(circle at 30% 40%, rgba(126, 252, 219, 0.85), transparent 60%);
  opacity: 0.55;
  mix-blend-mode: normal;
}
.ox-wallet-phone-bal-label {
  color: rgba(6, 32, 25, 0.65);
}
.ox-wallet-phone-bal-amt span {
  color: rgba(6, 32, 25, 0.45);
}
.ox-wallet-phone-bal-pct {
  background: rgba(31, 148, 133, 0.14);
  color: #1f9485;
}

/* Quick action tiles                                                */
.ox-wallet-phone-q {
  border: 1px solid rgba(31, 148, 133, 0.18);
  background: #f5fbfa;
  color: #062019;
}
.ox-wallet-phone-q span {
  background: rgba(31, 148, 133, 0.14);
  color: #1f9485;
}

/* Token list                                                        */
.ox-wallet-phone-list {
  border-top: 1px solid rgba(31, 148, 133, 0.14);
}
.ox-wallet-phone-tok-info > div:first-child,
.ox-wallet-phone-tok-price > div:first-child {
  color: #062019;
}
.ox-wallet-phone-sub {
  color: rgba(6, 32, 25, 0.55);
}
.ox-wallet-phone-up {
  color: #1f9485;
}
.ox-wallet-phone-dn {
  color: #d23b3b;
}

/* ---------- Wallet picker modal (EIP-6963 multi-wallet selector) ---------- */
.ox-wallet-picker-card {
  width: min(92vw, 380px);
  text-align: left;
}
.ox-wallet-picker-card .ox-soon-modal-title {
  text-align: center;
}
.ox-wallet-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px;
}
.ox-wallet-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(126, 252, 219, 0.22);
  background: linear-gradient(135deg, rgba(126, 252, 219, 0.06), rgba(31, 148, 133, 0.04));
  color: rgba(232, 245, 241, 0.92);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  text-align: left;
}
.ox-wallet-picker-row:hover {
  border-color: rgba(126, 252, 219, 0.6);
  background: linear-gradient(135deg, rgba(126, 252, 219, 0.14), rgba(31, 148, 133, 0.08));
  transform: translateY(-1px);
}
.ox-wallet-picker-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
  flex: 0 0 28px;
}
.ox-wallet-picker-name {
  flex: 1;
}

/* =================================================================
   "Verified by CertiK" hero announcement popup
   Combined design system: Oxchange teal glassmorphism + CertiK Skynet
   visual language (hex shield, lime-green data accent #9aff70, score
   grid, official "Audited by" lockup, uppercase mono micro-typography).
   ================================================================= */

.ox-certik-popup {
  /* CertiK signature crimson — their actual brand red. Our teal is
     kept only as a thin secondary accent for brand continuity.        */
  --ox-skynet:        #ff3a44;   /* CertiK red — primary accent */
  --ox-skynet-dim:    #c8202a;   /* deeper crimson for shadows  */
  --ox-skynet-soft:   rgba(255, 58, 68, 0.16);
  --ox-skynet-line:   rgba(255, 58, 68, 0.40);
  --ox-teal-bright:   #7efcdb;   /* Oxchange teal — minor accent */
  --ox-teal-line:     rgba(126, 252, 219, 0.22);
  --ox-ink:           #f5f5f5;
  --ox-ink-mute:      rgba(245, 245, 245, 0.60);
  /* Pure CertiK black card background */
  --ox-card-bg-1:     rgba(10, 10, 10, 0.98);
  --ox-card-bg-2:     rgba(4, 4, 4, 0.98);

  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ox-certik-popup--open    { opacity: 1; pointer-events: auto; }
.ox-certik-popup--closing { opacity: 0; pointer-events: none; }

.ox-certik-popup-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(255, 58, 68, 0.18), rgba(0, 0, 0, 0.86) 70%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ox-certik-popup-card {
  position: relative;
  width: min(94vw, 480px);
  padding: 26px 28px 22px;
  border-radius: 22px;
  text-align: center;
  color: var(--ox-ink);
  background:
    /* CertiK red halo from above */
    radial-gradient(140% 90% at 50% -10%, rgba(255, 58, 68, 0.20), transparent 55%),
    /* Subtle Oxchange teal kiss from below                             */
    radial-gradient(120% 80% at 50% 110%, rgba(126, 252, 219, 0.06), transparent 60%),
    linear-gradient(160deg, var(--ox-card-bg-1) 0%, var(--ox-card-bg-2) 100%);
  border: 1px solid rgba(255, 58, 68, 0.32);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(255, 58, 68, 0.18),
    0 0 60px rgba(126, 252, 219, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transform: translateY(28px) scale(0.92);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.22, .8, .22, 1), opacity 0.36s ease;
}
.ox-certik-popup--open .ox-certik-popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* CertiK red hairline at the top of the card — with a teal kiss      */
.ox-certik-popup-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ox-skynet) 30%,
    var(--ox-teal-bright) 50%,
    var(--ox-skynet) 70%,
    transparent 100%);
  opacity: 0.9;
  z-index: 3;
}

/* Soft conic glow that sweeps slowly behind the card content         */
.ox-certik-popup-glow {
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(255, 58, 68, 0)     0deg,
    rgba(255, 58, 68, 0.22)  60deg,
    rgba(255, 58, 68, 0)     180deg,
    rgba(126, 252, 219, 0.10) 270deg,
    rgba(255, 58, 68, 0)     360deg);
  filter: blur(50px);
  opacity: 0.7;
  pointer-events: none;
  animation: ox-certik-glow-spin 16s linear infinite;
  z-index: 0;
}
@keyframes ox-certik-glow-spin { to { transform: rotate(360deg); } }

.ox-certik-popup-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.ox-certik-popup-particle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: var(--ox-skynet);
  box-shadow: 0 0 8px var(--ox-skynet);
  opacity: 0;
  animation-name: ox-certik-particle-rise;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
/* Every 5th particle is teal — keeps a small Oxchange kiss in the room */
.ox-certik-popup-particle:nth-child(5n) {
  background: var(--ox-teal-bright);
  box-shadow: 0 0 8px var(--ox-teal-bright);
}
@keyframes ox-certik-particle-rise {
  0%   { transform: translateY(0)    scale(0.6); opacity: 0; }
  15%  { opacity: 0.85; }
  100% { transform: translateY(-460px) scale(0.2); opacity: 0; }
}

/* Close (×) button */
.ox-certik-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--ox-ink-mute);
  background: rgba(255, 58, 68, 0.08);
  border: 1px solid rgba(255, 58, 68, 0.22);
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ox-certik-popup-close:hover {
  color: var(--ox-skynet);
  border-color: var(--ox-skynet);
  background: rgba(255, 58, 68, 0.16);
  transform: rotate(90deg);
}

/* ---------- Skynet status ribbon ---------- */
.ox-certik-popup-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px -10px 16px;
  padding: 7px 12px;
  border: 1px solid var(--ox-skynet-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--ox-skynet-soft), rgba(126, 252, 219, 0.06));
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ox-skynet);
  z-index: 2;
}
.ox-certik-popup-ribbon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ox-skynet);
  box-shadow: 0 0 10px var(--ox-skynet);
  animation: ox-certik-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.ox-certik-popup-ribbon-id {
  color: var(--ox-ink-mute);
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---------- Partnership lockup (CertiK ⟷ Oxchange) ---------- */
.ox-certik-popup-pair {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 18px;
  padding: 10px 18px;
  z-index: 2;
}

/* Subtle horizontal halo behind the lockup */
.ox-certik-popup-pair::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(255, 58, 68, 0.22), transparent 70%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}

/* Decorative dashed orbit that frames both logos at once             */
.ox-certik-popup-pair-orbit {
  position: absolute;
  inset: -6px 18px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 58, 68, 0.45);
  pointer-events: none;
  z-index: 0;
  animation: ox-certik-orbit-glow 4s ease-in-out infinite;
}
@keyframes ox-certik-orbit-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 58, 68, 0); }
  50%      { box-shadow: 0 0 22px rgba(255, 58, 68, 0.32); }
}

/* Logo coin (round badge that holds each brand mark)                  */
.ox-certik-popup-pair-logo {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 58, 68, 0.18), rgba(0, 0, 0, 0.85) 65%);
  border: 1.5px solid rgba(255, 58, 68, 0.55);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 58, 68, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: ox-certik-coin-pop 0.7s cubic-bezier(.22, 1.6, .36, 1) both;
}
.ox-certik-popup-pair-logo--certik { animation-delay: 0.18s; }
.ox-certik-popup-pair-logo--ox     { animation-delay: 0.36s; }
@keyframes ox-certik-coin-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.ox-certik-popup-pair-logo img {
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  object-fit: contain;
  border-radius: 50%;
}
/* The Oxchange PNG is dark; tint it to teal so it stays readable on
   the deep black coin background.                                   */
.ox-certik-popup-pair-logo--ox img {
  filter: brightness(0) saturate(100%) invert(91%) sepia(31%)
          saturate(528%) hue-rotate(112deg) brightness(101%) contrast(98%);
}

/* Inline SVG fallback sits under the <img>; if the network image
   fails (network/CORS issues, expired URL) the .img--failed class
   hides the broken image and the fallback shows.                    */
.ox-certik-popup-pair-logo-fallback {
  position: absolute;
  inset: 0;
  width: 60%;
  height: 60%;
  margin: auto;
  z-index: 0;
  opacity: 0.95;
}
.ox-certik-popup-pair-logo-img--failed { display: none; }
.ox-certik-popup-pair-logo-img--failed + .ox-certik-popup-pair-logo-fallback {
  z-index: 1;
}

/* Connector + verified badge between the two coins                    */
.ox-certik-popup-pair-conn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ox-certik-popup-pair-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 58, 68, 0.1), rgba(255, 58, 68, 0.85));
  border-radius: 1px;
}
.ox-certik-popup-pair-conn .ox-certik-popup-pair-line:last-child {
  background: linear-gradient(90deg, rgba(255, 58, 68, 0.85), rgba(255, 58, 68, 0.1));
}

.ox-certik-popup-pair-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5560 0%, #ff3a44 50%, #c8202a 100%);
  box-shadow:
    0 6px 14px rgba(255, 58, 68, 0.55),
    0 0 14px rgba(255, 58, 68, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: ox-certik-coin-pop 0.6s cubic-bezier(.22, 1.6, .36, 1) 0.5s both;
}
.ox-certik-popup-pair-badge svg {
  width: 16px;
  height: 16px;
}

/* SVG check stroke draw-on */
.ox-certik-popup-pair-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: ox-certik-check-draw 0.55s cubic-bezier(.65, 0, .35, 1) 0.85s forwards;
}
@keyframes ox-certik-check-draw { to { stroke-dashoffset: 0; } }
@keyframes ox-certik-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 1; }
}

@media (max-width: 480px) {
  .ox-certik-popup-pair-logo { width: 64px; height: 64px; }
  .ox-certik-popup-pair-line { width: 14px; }
  .ox-certik-popup-pair-badge { width: 26px; height: 26px; }
  .ox-certik-popup-pair-badge svg { width: 13px; height: 13px; }
}

/* ---------- Eyebrow ---------- */
.ox-certik-popup-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ox-skynet);
  background: var(--ox-skynet-soft);
  border: 1px solid var(--ox-skynet-line);
  border-radius: 999px;
  z-index: 2;
}
.ox-certik-popup-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ox-skynet);
  box-shadow: 0 0 8px var(--ox-skynet);
  animation: ox-certik-pulse 1.6s ease-in-out infinite;
}

/* ---------- Title ---------- */
.ox-certik-popup-title {
  position: relative;
  margin: 0 0 12px;
  font-size: clamp(20px, 4.4vw, 26px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #ffffff;
  z-index: 2;
}
.ox-certik-popup-title-mark {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 12px 4px;
  border-radius: 8px;
  background:
    linear-gradient(120deg,
      var(--ox-skynet) 0%,
      #ffffff 55%,
      var(--ox-skynet) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.005em;
  animation: ox-certik-shimmer 3.4s linear infinite;
}
@keyframes ox-certik-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 220% 0%; }
}

.ox-certik-popup-copy {
  position: relative;
  margin: 0 auto 18px;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ox-ink-mute);
  z-index: 2;
}

/* ---------- Score grid (CertiK project-page style) ---------- */
.ox-certik-popup-scores {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 20px;
  padding: 10px;
  border: 1px solid rgba(255, 58, 68, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 58, 68, 0.06), rgba(0, 0, 0, 0.40));
  z-index: 2;
}
.ox-certik-popup-score {
  position: relative;
  padding: 10px 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 58, 68, 0.12);
  text-align: center;
  overflow: hidden;
}
.ox-certik-popup-score-num {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ox-skynet);
  text-shadow: 0 0 14px rgba(255, 58, 68, 0.55);
  margin-bottom: 4px;
}
.ox-certik-popup-score-num--text {
  font-size: 18px;
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.ox-certik-popup-score-lbl {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ox-ink-mute);
  font-weight: 600;
}
.ox-certik-popup-score-bar {
  position: relative;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 58, 68, 0.10);
  overflow: hidden;
}
.ox-certik-popup-score-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  /* Mostly red, with a small teal tip to keep the brand in the room   */
  background: linear-gradient(90deg, var(--ox-skynet-dim), var(--ox-skynet) 70%, var(--ox-teal-bright));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 58, 68, 0.55);
  animation: ox-certik-bar-fill 1.4s cubic-bezier(.22, .8, .22, 1) 0.6s both;
  transform-origin: left center;
}
@keyframes ox-certik-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- "Audited by CertiK" lockup ---------- */
.ox-certik-popup-lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 18px;
  padding: 8px 16px 8px 14px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 58, 68, 0.08), rgba(0, 0, 0, 0.40));
  border: 1px solid rgba(255, 58, 68, 0.28);
  z-index: 2;
}
.ox-certik-popup-lockup-label {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ox-ink-mute);
  text-transform: uppercase;
}
.ox-certik-popup-lockup-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 110px;
  /* CertiK red wordmark — matches their actual brand color           */
  color: var(--ox-skynet);
}
.ox-certik-popup-lockup-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.98;
}
.ox-certik-popup-lockup-img {
  position: relative;
  z-index: 1;
  height: 22px;
  width: auto;
  /* Tint any colored CDN logo to CertiK's red                       */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(4500%) hue-rotate(343deg) brightness(106%) contrast(106%);
}

/* ---------- Action buttons ---------- */
.ox-certik-popup-actions {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  z-index: 2;
}
.ox-certik-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.ox-certik-popup-btn--primary {
  /* CertiK red — primary brand action */
  background: linear-gradient(135deg, #ff5560 0%, var(--ox-skynet) 55%, var(--ox-skynet-dim) 100%);
  color: #ffffff !important;
  box-shadow:
    0 8px 22px rgba(255, 58, 68, 0.40),
    0 0 18px rgba(255, 58, 68, 0.30);
}
.ox-certik-popup-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(255, 58, 68, 0.55),
    0 0 24px rgba(255, 58, 68, 0.45);
}
.ox-certik-popup-btn--ghost {
  /* Ghost button picks up the Oxchange teal — small brand accent     */
  background: rgba(126, 252, 219, 0.06);
  color: var(--ox-teal-bright);
  border-color: rgba(126, 252, 219, 0.30);
}
.ox-certik-popup-btn--ghost:hover {
  border-color: var(--ox-teal-bright);
  background: rgba(126, 252, 219, 0.12);
}

/* ---------- Bottom meta strip ---------- */
.ox-certik-popup-meta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(232, 245, 241, 0.50);
  text-transform: uppercase;
  z-index: 2;
}
.ox-certik-popup-meta-skynet {
  color: var(--ox-skynet);
  text-shadow: 0 0 8px rgba(255, 58, 68, 0.45);
}
.ox-certik-popup-meta i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 58, 68, 0.55);
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .ox-certik-popup { padding: 16px; }
  .ox-certik-popup-card { padding: 22px 20px 18px; border-radius: 20px; }
  .ox-certik-popup-actions { flex-direction: column; }
  .ox-certik-popup-btn { width: 100%; justify-content: center; }
}

/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ox-certik-popup-glow,
  .ox-certik-popup-particle,
  .ox-certik-popup-pair-orbit,
  .ox-certik-popup-pair-logo,
  .ox-certik-popup-pair-badge,
  .ox-certik-popup-title-mark {
    animation: none !important;
  }
}