/* ==========================================================================
   ZELENCIO X — site-wide design layer (loaded last)
   Exchange-grade look: deep neutral surfaces, crisp 1px lines, cyan brand,
   tabular numbers, rounded 8–14px geometry, purposeful motion.
   ========================================================================== */

html[data-theme="dark"] {
  --bg:#0a0d12; --bg-sunk:#06080c; --bg-raised:#11151c; --bg-inset:#171c25;
  --ink:#eef1f5; --ink-2:#b4bccb; --ink-3:#7f8aa0; --ink-faint:#4c566a;
  --line:#222a36; --line-soft:#181e28;
  --brand:#00d4ff; --brand-bright:#5ce6ff; --brand-deep:#00a9d1; --brand-wash:#05293a;
  --up:#20c77a; --down:#f6465d; --warn:#f0b90b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6);
  --zx-glass:rgba(10,13,18,.78);
  --zx-glow:0 0 0 1px rgba(0,212,255,.35), 0 8px 30px rgba(0,212,255,.18);
}
:root,[data-theme="light"] {
  --zx-glass:rgba(255,255,255,.82);
  --zx-glow:0 0 0 1px rgba(0,184,221,.35), 0 8px 26px rgba(0,184,221,.16);
}
html[data-theme="light"] {
  --bg-sunk:#f5f7fa; --bg-inset:#f0f3f7; --line:#e3e8ef; --line-soft:#eef2f6;
  --ink:#0c1320; --ink-2:#3e4a5c; --ink-3:#717d90;
  --up:#14a867; --down:#e4364d;
}
:root {
  /* The Z-slice corners become soft rounded corners everywhere they are used */
  --cut-sm: inset(0 round 8px);
  --cut-md: inset(0 round 12px);
  --cut-lg: inset(0 round 16px);
  --zx-r:10px; --zx-r-lg:14px; --zx-r-xl:20px;
  --zx-ease:cubic-bezier(.2,.7,.2,1);
  --zx-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { scroll-padding-top: 84px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1,h2,h3,.h1,.h2,.h3 { letter-spacing: -.022em; }
::selection { background: rgba(0,212,255,.28); color: inherit; }
.num, [class*="price"], [class*="-px"], td, .mono, [data-num] { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* Page entrance */
main, #main { animation: zxPage .45s ease-out; }
@keyframes zxPage { from { opacity: 0; } to { opacity: 1; } }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  background: var(--zx-glass) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line-soft) !important;
  transition: box-shadow .3s var(--zx-ease), background .3s, border-color .3s;
}
.site-header.zx-scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); border-bottom-color: var(--line) !important; }
.site-header::after {           /* hairline brand sweep */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.55), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: zxSweep 9s linear infinite; opacity: .7;
}
@keyframes zxSweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.site-header .nav > a, .site-header .nav > .nav-item > a, .site-header .nav > div > a, .site-header .nav > div > button {
  position: relative; font-weight: 600; letter-spacing: -.005em; transition: color .2s;
}
.site-header .nav > a::after, .site-header .nav > .nav-item > a::after, .site-header .nav > div > a::after, .site-header .nav > div > button::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--brand); transition: left .28s var(--zx-ease), right .28s var(--zx-ease);
}
.site-header .nav > a:hover::after, .site-header .nav > .nav-item > a:hover::after,
.site-header .nav > div:hover > a::after, .site-header .nav > div:hover > button::after { left: 14%; right: 14%; }
.site-header .nav a:hover, .site-header .nav button:hover { color: var(--brand) !important; }
.site-header [class*="dd"], .site-header [class*="drop"], .site-header [class*="menu"]:not(.menu-panel):not(.menu-scrim) { transform-origin: top center; }
.site-header [class*="dd-panel"], .site-header [class*="dropdown"], .site-header .nav [class*="panel"] {
  border-radius: var(--zx-r-lg) !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important; animation: zxDrop .22s var(--zx-ease);
}
@keyframes zxDrop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { border-radius: var(--zx-r); font-weight: 700; letter-spacing: -.005em;
  transition: transform .18s var(--zx-ease), box-shadow .25s var(--zx-ease), filter .2s, background-color .2s, color .2s; }
.btn:not(.btn--ghost):not(.btn--google):hover { box-shadow: var(--zx-glow); }
.btn--ghost:hover { background: rgba(0,212,255,.06); }
.btn:active { transform: translateY(0) scale(.98); }
.zx-rip-host { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.zx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.4);
  transform: scale(0); animation: zxRipple .6s ease-out forwards; }
@keyframes zxRipple { to { transform: scale(2.6); opacity: 0; } }

.zh-btn { border-radius: var(--zx-r) !important; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .18s var(--zx-ease), box-shadow .25s var(--zx-ease), background-color .2s !important; }
.zh-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--zx-ease); }
.zh-btn:hover::before { transform: translateX(120%); }
.zh-btn:hover { transform: translateY(-2px); box-shadow: var(--zx-glow); }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); background: var(--bg-raised); box-shadow: var(--shadow-sm);
  transition: border-color .25s, box-shadow .3s var(--zx-ease), transform .3s var(--zx-ease); }
.card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
a.card:hover, .card.is-link:hover, .zx-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Spotlight that follows the pointer on cards (set by zx.js) */
.zx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,212,255,.10), transparent 45%);
  transition: opacity .3s;
}
.zx-spot:hover::after { opacity: 1; }

/* Rounded geometry for every element that used the old sliced corners */
.card, .alert, .feature, .table-wrap, .nav__panel, .reward-hero, .rung__card, .checkin, .history-row,
.zcard, .zgcard, .zgift, .zpane, .zsum, .ztile, .zdev, .zrefcard, .zinvite, .zopt, .ztpl, .zlb, .pod, .zqr, .zcopy, .zhead,
.zh-stat, .zh-board, .zh-pr, .zh-spot__c, .zh-mkt, .zh-bx, .zh-step, .zh-scard, .zh-fee, .zh-blog, .zh-faq, .zh-final, .zh-hero__img,
.prose img, .prose pre, .qr-phone-note, .menu-setting, .cm-left__post { border-radius: 14px !important; }
.seg, .seg__btn, .icon-btn, .input, .select, .textarea, .menu-link, .nav__panel-item, .nav__panel-icon, .social a, .cm-btn, .zcopy button,
.zh-btn, .btn--lg, .btn--sm { border-radius: 10px !important; }
.chip, .zchip, .zpill, .lang-chip, .badge, [class*="badge--"], .avatar, .pod .av, .zlb .av { border-radius: 999px !important; }

/* ── Forms ────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  border-radius: var(--zx-r) !important;
  transition: border-color .2s, box-shadow .2s, background-color .2s !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
  border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(0,212,255,.16) !important; outline: none;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
thead th { font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
tbody tr { transition: background-color .18s; }
tbody tr:hover { background: color-mix(in srgb, var(--bg-inset) 75%, transparent); }

/* Live price flashes (zx.js marks changed numbers) */
.zx-flash-up   { animation: zxUp .9s ease-out; }
.zx-flash-down { animation: zxDn .9s ease-out; }
@keyframes zxUp { 0% { background: rgba(32,199,122,.28); color: var(--up); } 100% { background: transparent; } }
@keyframes zxDn { 0% { background: rgba(246,70,93,.28); color: var(--down); } 100% { background: transparent; } }

/* ── Tabs / pills / badges ───────────────────────────────────────────── */
[role="tab"], .tab, .tabs a, .tabs button, .pill, .chip { transition: color .2s, background-color .2s, border-color .2s, transform .2s; }

/* ── Reveal on scroll (zx.js adds .zx-rv then .zx-in) ────────────────── */
.zx-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--zx-ease), transform .7s var(--zx-ease); transition-delay: var(--zx-d, 0ms); }
.zx-rv.zx-in { opacity: 1; transform: none; }
.zx-rv-scale { transform: translateY(14px) scale(.97); }

/* Skeleton shimmer for loading placeholders */
.zx-skel, .skeleton, .skel {
  background: linear-gradient(90deg, var(--bg-inset) 0%, color-mix(in srgb, var(--bg-inset) 55%, var(--line)) 40%, var(--bg-inset) 80%) !important;
  background-size: 300% 100% !important; animation: zxShim 1.4s linear infinite;
}
@keyframes zxShim { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Ambient float for decorative visuals */
.zx-float { animation: zxFloat 6s ease-in-out infinite; }
@keyframes zxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { position: relative; background: var(--bg-sunk) !important; border-top: 1px solid var(--line) !important; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.5), transparent);
}
.site-footer a { transition: color .18s, padding-left .2s var(--zx-ease); }
.site-footer a:hover { color: var(--brand) !important; }
.site-footer ul a:hover, .site-footer li a:hover { padding-left: 3px; }

/* ── Homepage polish (zh-*) ──────────────────────────────────────────── */
.zh-hero { isolation: isolate; }
.zh-hero h1 { font-weight: 800 !important; letter-spacing: -.035em !important; }
.zh-hero h1 em, .zh-hero h1 span, .zh-hero h1 .grad {
  background: linear-gradient(92deg, #5ce6ff 0%, #00d4ff 35%, #7aa8ff 70%, #5ce6ff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: zxGrad 7s ease-in-out infinite;
}
@keyframes zxGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.zh-sec h2 { font-weight: 800; letter-spacing: -.03em; }
.zh-sec--sunk { background: var(--bg-sunk); border-block: 1px solid var(--line-soft); }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .site-header::after { display: none; }
  .card { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .zx-rv { opacity: 1; transform: none; }
}

/* Hero quick sign-up (exchange-style email capture) */
.zx-hsign { display: flex; gap: 10px; max-width: 520px; margin: 26px 0 14px; padding: 6px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .25s, box-shadow .25s; animation: zhRise .8s var(--zx-ease) .25s both; }
.zx-hsign:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,212,255,.14); }
.zx-hsign input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: inherit; font-size: 1rem; padding: 0 14px; height: 50px; }
.zx-hsign input::placeholder { color: rgba(255,255,255,.55); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zx-hsign { background: #fff; border-color: var(--line); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zx-hsign input::placeholder { color: var(--ink-3); }
.zx-hsign .zh-btn { flex: none; }
.zh-cta--sub { margin-top: 0 !important; }
@media (max-width: 560px) { .zx-hsign { flex-direction: column; } .zx-hsign .zh-btn { width: 100%; } }

/* ══ Homepage palette: one neutral exchange palette instead of navy bands ══ */
.zh { --zn:#07090d; --zn2:#0c1016; --zc:#00d4ff; --zb:#00b8e6; --zw:#eef1f5; --zm:#98a2b3; }
.zh-hero { background:
    radial-gradient(900px 520px at 78% 18%, rgba(0,212,255,.13), transparent 62%),
    radial-gradient(700px 420px at 8% 100%, rgba(0,212,255,.06), transparent 60%),
    var(--zn) !important; }
.zh-orb--b, .zh-orb--c { display: none; }
.zh-orb--a { background: #00d4ff; opacity: .16; width: 620px; height: 620px; left: auto; right: -160px; top: -240px; filter: blur(110px); }
.zh-grid { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); }
.zh-h1 em { background: linear-gradient(90deg, #00d4ff, #7be9ff 50%, #00d4ff) !important; background-size: 200% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.zh-btn--glow { background: var(--zc) !important; color: #00121a !important; box-shadow: 0 10px 28px -10px rgba(0,212,255,.75) !important; }
.zh-btn--glow:hover { background: #33ddff !important; }
.zh-pill { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.28); }
.zh-stat { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s, transform .25s; }
.zh-stat:hover { border-color: rgba(0,212,255,.35); transform: translateY(-2px); }
.zh-board { background: rgba(17,21,28,.86) !important; border: 1px solid #232b37 !important; clip-path: none !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset !important; }
.zh-board::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(0,212,255,.55), transparent 35%, transparent 70%, rgba(0,212,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.zh-brow:hover { background: rgba(0,212,255,.06) !important; }
.zh-app, .zh-final { background:
    radial-gradient(700px 380px at 85% 20%, rgba(0,212,255,.12), transparent 60%), var(--zn) !important; }
.zh-final { border: 1px solid #1d242f; }
.zh-ticks li::before { background: rgba(0,212,255,.12); color: var(--zc); }

/* Light theme: bright Gate-style hero, dark text, white board */
[data-theme="light"] .zh { --zn:#f4f8fb; --zn2:#ffffff; --zw:#0c1320; --zm:#5b6576; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) { background:
    radial-gradient(900px 520px at 80% 10%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(600px 380px at 0% 100%, rgba(0,184,230,.08), transparent 60%),
    linear-gradient(180deg, #f6fafd, #eef4f8) !important; border-bottom: 1px solid var(--line); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-h1,
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-stat b,
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-board__h strong { color: #0c1320 !important; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-h1 em { background: linear-gradient(90deg, #009ec2, #00c2ee 50%, #009ec2) !important;
  background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-orb--a { opacity: .22; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-grid { background-image: linear-gradient(rgba(12,19,32,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,19,32,.05) 1px, transparent 1px); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-stat { background: #fff; border-color: var(--line); box-shadow: 0 6px 18px -12px rgba(12,19,32,.2); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-board { background: #fff !important; border-color: var(--line) !important;
  box-shadow: 0 40px 80px -36px rgba(12,19,32,.28) !important; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-board__h,
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-board__f { border-color: var(--line) !important; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-board__f { color: #0094b8; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-tabs--sm button.is-on { background: rgba(0,184,230,.12); color: #007f9e; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-btn--glass { background: #fff; color: #0c1320; border-color: var(--line); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-btn--glass:hover { border-color: var(--brand); }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-alt__b { background: #fff; border-color: var(--line); color: #0c1320; }
[data-theme="light"] .zh-hero:not(.zh-hero--media) .zh-pill { color: #007f9e; background: rgba(0,184,230,.1); }
[data-theme="light"] .zh-app, [data-theme="light"] .zh-final { --zw:#eef1f5; --zm:#98a2b3; background:
    radial-gradient(700px 380px at 85% 20%, rgba(0,212,255,.16), transparent 60%), #0a0d12 !important; }
html[data-theme="dark"] .zh-float { background: rgba(23,28,37,.92); color: #eef1f5; border: 1px solid #2a3340;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 44px -16px rgba(0,0,0,.8); }
html[data-theme="dark"] .zh-float small { color: #98a2b3; }
html[data-theme="dark"] .zh-float__i { background: rgba(0,212,255,.12); color: #00d4ff; }