/* ============================================================
   basket.fun — design tokens
   Dark crypto-fintech. Brand: #0D0F1A base, #A3FF5B lime,
   #6B7FFF blue, Satoshi type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face { font-family: 'Satoshi'; font-weight: 300; font-style: normal; font-display: swap; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 400; font-style: normal; font-display: swap; src: url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 500; font-style: normal; font-display: swap; src: url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 700; font-style: normal; font-display: swap; src: url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 900; font-style: normal; font-display: swap; src: url('https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2'); }

:root {
  /* ---- brand core ---- */
  --primary:        #0D0F1A;   /* deep navy/ink */
  --accent:         #A3FF5B;   /* lime — fills, buttons, dots, glows */
  --accent-ink:     #A3FF5B;   /* readable accent for TEXT / ICONS / charts (theme-swapped) */
  --accent-dim:     #8DE048;
  --blue:           #6B7FFF;   /* periwinkle */
  --success:        #22C55E;
  --danger:         #FF6B6B;
  --warning:        #FFC65B;

  /* ---- dark app surfaces (derived around #0D0F1A) ---- */
  --bg:             #090B12;   /* page background, a touch deeper than primary */
  --bg-2:           #0D0F1A;   /* primary panels */
  --surface:        #12141F;   /* raised cards */
  --surface-2:      #181B28;   /* nested / hover */
  --surface-3:      #20243210; /* faint fill */
  --hero-2:         #0b1410;   /* hero gradient mid-stop */
  --line:           rgba(255,255,255,0.07);
  --line-2:         rgba(255,255,255,0.12);
  --line-strong:    rgba(255,255,255,0.18);

  /* ---- text ---- */
  --text:           #F4F6FA;
  --text-2:         #A4ABBA;   /* secondary */
  --text-3:         #6B7280;   /* muted */
  --on-accent:      #0B1402;   /* text on lime */

  /* ---- accent washes ---- */
  --accent-wash:    rgba(163,255,91,0.10);
  --accent-glow:    rgba(163,255,91,0.35);
  --blue-wash:      rgba(107,127,255,0.12);
  --grid-line:      rgba(255,255,255,0.035);

  /* ---- type ---- */
  --font: 'Satoshi', 'Manrope', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
  --display: 'Satoshi', 'Plus Jakarta Sans', 'Manrope', sans-serif;

  /* ---- radius ---- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- shadows ---- */
  --shadow-sm: 0 2px 6px -2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 18px 40px -16px rgba(0,0,0,0.72);
  --shadow-lg: 0 36px 70px -24px rgba(0,0,0,0.82);
  --glow:      0 0 0 1px rgba(163,255,91,0.35), 0 8px 28px -6px rgba(163,255,91,0.45);

  /* ---- logo ---- */
  --logo-ink:  var(--accent);
  --logo-glow: drop-shadow(0 0 6px var(--accent-glow));
  --chrome:    rgba(9,11,18,0.82);   /* sticky top/tab bar glass */

  /* ---- spacing base ---- */
  --gut: 24px;
}

/* ============================================================
   LIGHT THEME — lime stays for fills/buttons; --accent-ink
   darkens to a readable green for text/icons/charts.
   ============================================================ */
[data-theme="light"] {
  --primary:        #0D0F1A;
  --accent:         #A3FF5B;            /* keep lime for fills + primary button */
  --accent-ink:     #2C7D17;            /* deep green — readable on white */
  --accent-dim:     #6FBF2E;
  --blue:           #3B50C4;            /* darker periwinkle for text/links */
  --success:        #1E9E4A;
  --danger:         #E0484D;
  --warning:        #B7791F;

  --bg:             #F4F6F0;            /* soft off-white, faint warm-green */
  --bg-2:           #FFFFFF;
  --surface:        #FFFFFF;
  --surface-2:      #EFF2EA;            /* nested / hover */
  --surface-3:      #00000008;
  --hero-2:         #E9F3DE;            /* soft lime tint for hero gradient */
  --line:           rgba(13,15,26,0.09);
  --line-2:         rgba(13,15,26,0.14);
  --line-strong:    rgba(13,15,26,0.24);

  --text:           #14171F;
  --text-2:         #555D6C;
  --text-3:         #8A91A0;
  --on-accent:      #0B1402;            /* dark text on lime button */

  --accent-wash:    rgba(83,168,30,0.13);
  --accent-glow:    rgba(124,200,70,0.45);
  --blue-wash:      rgba(59,80,196,0.10);
  --grid-line:      rgba(13,15,26,0.05);

  --shadow-sm: 0 1px 2px rgba(13,15,26,0.06);
  --shadow:    0 14px 34px -16px rgba(13,15,26,0.20);
  --shadow-lg: 0 30px 64px -24px rgba(13,15,26,0.30);
  --glow:      0 0 0 1px rgba(83,168,30,0.30), 0 10px 28px -8px rgba(124,200,70,0.55);

  --logo-ink:  #2C7D17;                 /* deep-green mark on light surfaces */
  --logo-glow: none;
  --chrome:    rgba(246,248,242,0.82);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}

body {
  font-size: 15px;
  line-height: 1.5;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* numeric alignment for finance figures */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.data { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.display { font-family: var(--display); letter-spacing: -0.035em; line-height: 0.95; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- shared primitives ---------- */
.pos { color: var(--accent-ink); }
.neg { color: var(--danger); }

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

/* grain texture overlay helper */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  mix-blend-mode: overlay;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes drawLine {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
@keyframes orbDrift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(24px,-18px) scale(1.08); }
  66%  { transform: translate(-18px,14px) scale(0.96); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  18%  { opacity: 0.5; }
  40%  { transform: translateX(220%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes ringPop {
  from { opacity: 0; transform: scale(0.82) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes clipUp { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 -2% 0); opacity: 1; } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 0 -44px; } }
@keyframes meshShift {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(-3%, 2%) rotate(8deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes tickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmdIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flashUp { 0% { color: var(--accent-ink); } 100% { color: inherit; } }
@keyframes flashDn { 0% { color: var(--danger); } 100% { color: inherit; } }

/* ---------- scroll reveal (keyframe-based: visible by default, animates in) ---------- */
.reveal { will-change: opacity, transform; }
.reveal.in { animation: revealIn .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes revealIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- kinetic headline (clip reveal, visible by default) ---------- */
.kin-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.kin-line > span { display: inline-block; will-change: transform; }
.kin.in .kin-line > span { animation: kinUp .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes kinUp { from { transform: translateY(115%) rotate(3deg); } to { transform: translateY(0) rotate(0); } }

/* ---------- ambient: technical grid + slow mesh (replaces blurry orbs) ---------- */
.ambient { position: relative; }
.ambient::before {
  content: "";
  position: fixed; inset: -2px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  opacity: 0.6;
}
.ambient::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 8% -6%, var(--accent-glow), transparent 70%),
    radial-gradient(46% 38% at 100% 2%, var(--blue-wash), transparent 66%);
  opacity: 0.5;
  filter: blur(8px);
  animation: meshShift 26s ease-in-out infinite;
}

/* ---------- elevated card surface (depth, not flat) ---------- */
.surface-grad {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 40%),
    var(--surface);
}
[data-theme="light"] .surface-grad {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 46%),
    var(--surface);
}

/* ---------- cursor spotlight card ---------- */
.spot { position: relative; }
.spot::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%), var(--accent-wash), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.spot:hover::before { opacity: 1; }

/* ---------- hairline corner ticks (technical frame) ---------- */
.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid; opacity: .8;
}
.ticks::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.ticks::after  { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* ---------- marquee / ticker ---------- */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; min-width: 100%; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- skeleton shimmer ---------- */
.skel {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: 8px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  transform: translateX(-100%);
  animation: skelSweep 1.3s ease-in-out infinite;
}
@keyframes skelSweep { 100% { transform: translateX(100%); } }

/* sheen sweep helper (for hero / featured cards) */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.sheen:hover::after { animation: sheen 1.1s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .kin .kin-line > span { transform: none !important; animation: none !important; }
  .marquee-track { animation: none !important; }
}