/* ════════════════════════════════════════════════════════════════
   ARC NOVA — Institutional DeFi Design System v3.0
   Built to the standards of Stripe · Coinbase · Linear · Apple
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ── Design Tokens ── */
:root {
  /* Core palette */
  --bg-base:      #060812;
  --bg-elevated:  #0c101d;
  --bg-surface:   #12192a;
  --bg-surface-2: #18233c;
  --bg-overlay:   rgba(6,8,18,0.94);

  /* Brand */
  --brand-from:  #8b5cf6;
  --brand-to:    #3b82f6;
  --brand-mid:   #a855f7;
  --brand-light: #a78bfa;
  --brand-pale:  #c4b5fd;

  /* Accent */
  --cyan:        #00f2fe;
  --cyan-dim:    #06b6d4;
  --indigo:      #6366f1;

  /* Semantic */
  --success:     #10b981;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #38bdf8;

  /* Soft semantic */
  --success-bg:  rgba(16,185,129,0.08);
  --warning-bg:  rgba(245,158,11,0.08);
  --danger-bg:   rgba(239,68,68,0.08);
  --info-bg:     rgba(56,189,248,0.08);

  /* Text */
  --text-primary:   #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary:  #64748b;
  --text-inverse:   #0b1220;

  /* Borders */
  --border-dim:     rgba(255,255,255,0.05);
  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.18);
  --border-brand:   rgba(139,92,246,0.35);
  --border-brand-strong: rgba(139,92,246,0.55);

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px -4px rgba(0,0,0,0.5);
  --shadow-lg:   0 20px 48px -8px rgba(0,0,0,0.65);
  --shadow-xl:   0 32px 64px -12px rgba(0,0,0,0.75);
  --shadow-glow: 0 0 50px -4px rgba(139,92,246,0.38);
  --shadow-glow-green: 0 0 32px -4px rgba(16,185,129,0.2);
  --shadow-glow-cyan:  0 0 32px -4px rgba(34,211,238,0.2);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl:24px;
  --radius-full: 9999px;

  /* Typography scale */
  --text-xs:   0.70rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Animation */
  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast:   0.15s;
  --duration-base:   0.22s;
  --duration-slow:   0.35s;
  --transition: all var(--duration-base) var(--ease-out);

  /* Legacy aliases — keep all existing JS working */
  --bg-0:  var(--bg-base);
  --bg-1:  var(--bg-elevated);
  --bg-2:  var(--bg-surface);
  --bg-3:  var(--bg-surface-2);
  --card:           rgba(23,32,51,0.75);
  --card-hover:     rgba(30,41,59,0.88);
  --card-solid:     var(--bg-surface);
  --border:         var(--border-subtle);
  --border-light:   var(--border-default);
  --border-purple:  var(--border-brand);
  --border-purple-hover: var(--border-brand-strong);
  --violet:         var(--brand-mid);
  --violet-400:     var(--brand-light);
  --violet-500:     var(--brand-mid);
  --violet-600:     var(--brand-from);
  --violet-glow:    rgba(139,92,246,0.2);
  --lavender:       var(--brand-light);
  --purple:         var(--brand-from);
  --green:          var(--success);
  --green-glow:     rgba(16,185,129,0.18);
  --red:            var(--danger);
  --yellow:         var(--warning);
  --cyan-light:     var(--cyan);
  --text:           var(--text-primary);
  --text-2:         var(--text-secondary);
  --muted:          var(--text-tertiary);
  --neutral-0:      #ffffff;
  --neutral-100:    #f8fafc;
  --neutral-300:    #cbd5e1;
  --neutral-400:    #94a3b8;
  --neutral-500:    #64748b;
  --neutral-600:    #475569;
  --violet-300:     #c4b5fd;
  --info-soft:      var(--info-bg);
  --success-soft:   var(--success-bg);
  --warning-soft:   var(--warning-bg);
  --danger-soft:    var(--danger-bg);
  --shadow-glow: 0 0 50px -4px rgba(139,92,246,0.38);
  --border-subtle:  rgba(255,255,255,0.05);
  --border-strong:  rgba(255,255,255,0.18);
  --border-accent:  rgba(139,92,246,0.35);
  --radius:    var(--radius-md);
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-sm: 8px;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-base);
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection { background:rgba(139,92,246,0.3); color:#fff; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
button { font-family:inherit; }

/* ── Background canvas ── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 70% -5%,  rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at -5% 90%,  rgba(99,102,241,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(6,182,212,0.04)  0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.013) 1px, transparent 1px);
  background-size:52px 52px;
  pointer-events:none;
  z-index:0;
  opacity:0.7;
}

/* ════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════ */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(2rem, calc((100vw - 1280px)/2 + 2rem));
  background:rgba(11,18,32,0.82);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid var(--border-dim);
}
.nav::after {
  content:'';
  position:absolute;
  bottom:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.25),rgba(34,211,238,0.15),transparent);
}

.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text-primary);
  font-weight:800;
  font-size:1rem;
  letter-spacing:-0.03em;
  flex-shrink:0;
}
.nav-logo img { transition:transform 0.4s var(--ease-spring); }
.nav-logo:hover img { transform:scale(1.12) rotate(-6deg); }

.nav-links {
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  padding:4px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-dim);
}
.nav-links a {
  display:block;
  padding:6px 14px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--text-secondary);
  font-size:var(--text-sm);
  font-weight:500;
  transition:var(--transition);
  white-space:nowrap;
}
.nav-links a:hover {
  color:var(--text-primary);
  background:rgba(255,255,255,0.06);
}
.nav-links a.active {
  color:var(--text-primary);
  background:rgba(139,92,246,0.14);
  border:1px solid rgba(139,92,246,0.26);
  font-weight:600;
}

.nav-right {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Testnet badge */
.badge-testnet {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 11px;
  border-radius:var(--radius-full);
  font-size:0.67rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:rgba(245,158,11,0.07);
  border:1px solid rgba(245,158,11,0.24);
  color:var(--warning);
  white-space:nowrap;
}
.badge-testnet::before {
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--warning);
  box-shadow:0 0 6px var(--warning);
  animation:pulseDot 2.2s ease infinite;
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:7px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  cursor:pointer;
}
.hamburger span {
  display:block;
  width:20px; height:2px;
  background:var(--text-secondary);
  border-radius:2px;
  transition:all 0.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media(max-width:768px) { .hamburger { display:flex; } }

/* Mobile overlay */
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.75); z-index:90; backdrop-filter:blur(6px);
}
.mobile-overlay.show { display:block; }

/* Mobile drawer */
.mobile-nav {
  position:fixed; top:0; right:-300px; width:280px; height:100vh;
  background:var(--bg-elevated);
  border-left:1px solid var(--border-default);
  z-index:95;
  transition:right 0.32s var(--ease-out);
  display:flex; flex-direction:column; padding:24px; overflow-y:auto;
  box-shadow:var(--shadow-xl);
}
.mobile-nav.open { right:0; }
.mobile-nav-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.mobile-nav-close {
  background:var(--card); border:1px solid var(--border-subtle); color:var(--text-secondary);
  width:32px; height:32px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; transition:var(--transition);
}
.mobile-nav-close:hover { border-color:var(--border-brand); color:var(--text-primary); }
.mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:2px; flex:1; }
.mobile-nav-links a {
  display:block; padding:12px 16px; border-radius:var(--radius-md);
  text-decoration:none; color:var(--text-secondary);
  font-size:0.9rem; font-weight:500; transition:var(--transition);
}
.mobile-nav-links a:hover { color:var(--brand-light); background:rgba(139,92,246,0.08); }
.mobile-nav-footer { display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--border-subtle); }

/* ════════════════════════════════════════════
   LIVE TICKER
════════════════════════════════════════════ */
.ticker-bar {
  position:fixed; top:64px; left:0; right:0; height:34px;
  background:rgba(9,14,24,0.97);
  border-bottom:1px solid rgba(139,92,246,0.14);
  overflow:hidden; z-index:99; display:flex; align-items:center;
}
.ticker-track { display:flex; align-items:center; width:100%; overflow:hidden; }
.ticker-scroll {
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:tickerMove 48s linear infinite;
}
.ticker-scroll:hover { animation-play-state:paused; }
@keyframes tickerMove { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tick-item {
  display:inline-flex; align-items:center; gap:6px; padding:0 20px;
  font-size:0.73rem; font-weight:600;
  border-right:1px solid rgba(255,255,255,0.05); flex-shrink:0;
}
.tick-sym   { color:var(--text-secondary); }
.tick-price { color:var(--text-primary); font-weight:700; font-variant-numeric:tabular-nums; }
.tick-up    { color:var(--success); }
.tick-down  { color:var(--danger); }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 18px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  border:1px solid transparent;
  outline:none;
  text-decoration:none;
  white-space:nowrap;
  font-family:inherit;
  position:relative;
  user-select:none;
  letter-spacing:-0.01em;
  -webkit-appearance:none;
}
.btn:focus-visible {
  outline:2px solid var(--brand-mid);
  outline-offset:2px;
}
.btn:active { transform:scale(0.97) translateY(0) !important; }
.btn:disabled,.btn.disabled {
  opacity:0.45; cursor:not-allowed;
  transform:none !important; box-shadow:none !important;
}

/* Primary */
.btn-primary {
  background:linear-gradient(135deg,#7c3aed 0%,#6366f1 100%);
  color:#fff;
  border-color:rgba(255,255,255,0.12);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:var(--shadow-glow),var(--shadow-md);
  border-color:rgba(255,255,255,0.22);
}

/* Ghost */
.btn-ghost {
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
  border-color:var(--border-subtle);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover {
  color:var(--text-primary);
  background:rgba(255,255,255,0.08);
  border-color:var(--border-brand);
  transform:translateY(-1px);
}

/* Outline */
.btn-outline {
  background:rgba(139,92,246,0.04);
  color:var(--brand-light);
  border-color:var(--border-brand);
}
.btn-outline:hover {
  background:rgba(124,58,237,0.12);
  border-color:var(--border-brand-strong);
  color:#fff;
  transform:translateY(-1px);
}

/* Green */
.btn-green {
  background:rgba(16,185,129,0.10);
  color:var(--success);
  border-color:rgba(16,185,129,0.25);
}
.btn-green:hover {
  background:rgba(16,185,129,0.18);
  border-color:rgba(16,185,129,0.42);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(16,185,129,0.18);
}

/* Glow */
.btn-glow {
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;
  box-shadow:0 2px 14px rgba(124,58,237,0.28);
}
.btn-glow:hover {
  box-shadow:0 4px 24px rgba(124,58,237,0.44);
  transform:translateY(-1px);
}

/* Sizes */
.btn-sm { padding:5px 12px; font-size:var(--text-xs); border-radius:var(--radius-sm); }
.btn-lg { padding:13px 26px; font-size:0.9375rem; border-radius:var(--radius-lg); }
.btn-xl { padding:16px 32px; font-size:1rem; border-radius:var(--radius-lg); font-weight:700; }

/* Hero buttons (index.html uses these) */
.btn-hero-primary {
  padding:13px 28px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;
  font-weight:700; font-size:0.9rem;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 0 36px rgba(124,58,237,0.38),0 4px 16px rgba(0,0,0,0.32);
  transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
}
.btn-hero-primary:hover {
  transform:scale(1.04) translateY(-1px);
  box-shadow:0 0 48px rgba(124,58,237,0.55),0 8px 24px rgba(0,0,0,0.32);
}
.btn-hero-outline {
  padding:12px 22px; border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04); color:rgba(248,250,252,0.72);
  font-weight:600; font-size:0.9rem;
  text-decoration:none; border:1px solid rgba(255,255,255,0.12);
  cursor:pointer; transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
}
.btn-hero-outline:hover {
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.22);
  transform:scale(1.02) translateY(-1px);
}

/* ════════════════════════════════════════════
   CARDS & PANELS
════════════════════════════════════════════ */
.card {
  background:var(--card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.card:hover {
  border-color:var(--border-brand);
  background:var(--card-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.glass-panel {
  background:rgba(23,32,51,0.7);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 4px 24px rgba(0,0,0,0.26),inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative; overflow:hidden;
  transition:border-color 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out);
}
.glass-panel:hover {
  border-color:var(--border-brand);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),var(--shadow-glow);
}

/* Stats card */
.stat-card {
  background:var(--card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:var(--transition);
  position:relative;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.3),transparent);
  opacity:0; transition:opacity 0.3s;
}
.stat-card:hover { border-color:var(--border-brand); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card:hover::before { opacity:1; }
.stat-label {
  font-size:var(--text-xs); color:var(--text-tertiary); font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px;
}
.stat-value {
  font-size:2.1rem; font-weight:900;
  letter-spacing:-0.045em; color:var(--text-primary); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-change {
  font-size:var(--text-xs); font-weight:600;
  margin-top:8px; display:flex; align-items:center; gap:4px;
}
.stat-change.up   { color:var(--success); }
.stat-change.down { color:var(--danger);  }

/* Mini stat (defi.html header strip) */
.mini-stat {
  background:var(--card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:14px 18px;
  backdrop-filter:blur(12px);
  transition:var(--transition);
}
.mini-stat:hover { border-color:var(--border-brand); }
.mini-stat-label { font-size:var(--text-xs); color:var(--text-tertiary); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:4px; }
.mini-stat-val   { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }

/* ════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════ */
.section { padding:88px 0; position:relative; z-index:1; }
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-wide { max-width:1400px; margin:0 auto; padding:0 2rem; }

/* Section header components */
.section-label {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(139,92,246,0.08); border:1px solid rgba(139,92,246,0.24);
  color:var(--brand-light); margin-bottom:16px;
  transition:var(--transition);
}
.section-label:hover { border-color:rgba(139,92,246,0.45); transform:translateY(-1px); }

.section-title {
  font-size:clamp(1.9rem,4.2vw,3rem);
  font-weight:900; letter-spacing:-0.035em;
  line-height:1.1; margin-bottom:16px;
  color:var(--text-primary);
}
.section-desc { color:var(--text-secondary); font-size:1.0rem; max-width:520px; line-height:1.78; }

.section-h {
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:900; letter-spacing:-0.04em;
  color:#fff; margin-bottom:14px; line-height:1.14;
}
.section-sub {
  font-size:0.95rem; color:rgba(248,250,252,0.4); line-height:1.8; max-width:520px;
}

/* Grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }

/* Gradient text */
@keyframes gradShift {
  0%  { background-position:0%   50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0%   50%; }
}
.grad-text {
  background:linear-gradient(135deg,#c084fc 0%,#818cf8 30%,#22d3ee 65%,#c084fc 100%);
  background-size:280% 280%;
  animation:gradShift 5s ease infinite;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Dividers */
.divider { height:1px; background:var(--border-subtle); margin:28px 0; }
.section-line {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.28),rgba(34,211,238,0.16),transparent);
  margin:0 0 40px;
}

/* ════════════════════════════════════════════
   TAGS / BADGES
════════════════════════════════════════════ */
.tag {
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:var(--radius-full);
  font-size:0.68rem; font-weight:700; transition:var(--transition);
  white-space:nowrap;
}
.tag:hover { transform:translateY(-1px); }
.tag-green  { background:rgba(16,185,129,0.10);  color:var(--success); border:1px solid rgba(16,185,129,0.25); }
.tag-purple { background:rgba(139,92,246,0.10);  color:var(--brand-light); border:1px solid rgba(139,92,246,0.25); }
.tag-yellow { background:rgba(245,158,11,0.10);  color:var(--warning); border:1px solid rgba(245,158,11,0.25); }
.tag-blue   { background:rgba(34,211,238,0.10);  color:var(--cyan); border:1px solid rgba(34,211,238,0.25); }
.tag-red    { background:rgba(239,68,68,0.10);   color:var(--danger); border:1px solid rgba(239,68,68,0.25); }

.pill-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:0.7rem; font-weight:700;
  background:var(--success-bg); border:1px solid rgba(16,185,129,0.22);
  color:var(--success);
}
.pill-badge.up::before  { content:'↑'; }
.pill-badge.down { background:var(--danger-bg); border-color:rgba(239,68,68,0.22); color:var(--danger); }
.pill-badge.down::before { content:'↓'; }

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:rgba(255,255,255,0.02); }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:13px 20px; text-align:left;
  font-size:var(--text-xs); font-weight:700; color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:0.06em;
  background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border-subtle);
  white-space:nowrap;
}
tbody td { padding:15px 20px; font-size:var(--text-sm); color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,0.033); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(139,92,246,0.05); color:var(--text-primary); }

/* ════════════════════════════════════════════
   FORMS / INPUTS
════════════════════════════════════════════ */
.input {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:10px 14px;
  color:var(--text-primary);
  font-size:var(--text-sm);
  font-family:inherit;
  outline:none;
  transition:var(--transition);
}
.input:focus { border-color:var(--border-brand); box-shadow:0 0 0 3px rgba(139,92,246,0.1); }
.input::placeholder { color:var(--text-tertiary); }

/* Swap-specific inputs */
.swap-box {
  background:rgba(255,255,255,0.035);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  transition:border-color 0.22s, box-shadow 0.22s;
}
.swap-box:focus-within {
  border-color:rgba(139,92,246,0.4);
  box-shadow:0 0 0 1px rgba(139,92,246,0.12);
}
.swap-label { font-size:var(--text-xs); color:var(--text-tertiary); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; }
.swap-row   { display:flex; align-items:center; gap:12px; }
.token-btn {
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  border-radius:var(--radius-full);
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);
  cursor:pointer; font-size:0.875rem; font-weight:800; color:var(--text-primary);
  white-space:nowrap; transition:var(--transition); font-family:inherit; flex-shrink:0;
}
.token-btn:hover { background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.18); transform:scale(1.03); }
.token-dot {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900;
}
.amount-input {
  background:none; border:none; outline:none;
  color:var(--text-primary); font-size:2rem; font-weight:800;
  width:100%; text-align:right; font-family:inherit;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.amount-input::placeholder { color:rgba(255,255,255,0.15); }

/* Token search */
.token-search {
  width:100%; background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:10px 14px; color:var(--text-primary);
  font-size:var(--text-sm); font-family:inherit; outline:none;
  margin-bottom:12px; transition:var(--transition);
}
.token-search:focus { border-color:var(--border-brand); }
.token-search::placeholder { color:var(--text-tertiary); }

/* ════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════ */
.progress-bar {
  height:7px; background:rgba(255,255,255,0.06);
  border-radius:var(--radius-full); overflow:hidden; position:relative;
}
.progress-fill {
  height:100%; border-radius:var(--radius-full);
  transition:width 1.5s cubic-bezier(0.22,1,0.36,1);
  position:relative; overflow:hidden;
}
.progress-fill::after {
  content:'';
  position:absolute; top:0; left:-150%; right:0; bottom:0; width:60%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.25) 50%,transparent 100%);
  animation:barShimmer 2.8s ease-in-out infinite;
}
@keyframes barShimmer { 0%{left:-60%} 100%{left:140%} }

/* ════════════════════════════════════════════
   MODAL
════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.8);
  z-index:200; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--bg-elevated); border:1px solid var(--border-brand);
  border-radius:var(--radius-2xl); width:380px;
  max-width:calc(100vw - 32px); max-height:84vh; overflow-y:auto;
  transform:translateY(18px) scale(0.98); transition:transform 0.26s var(--ease-out),opacity 0.2s;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(139,92,246,0.1);
  scrollbar-width:thin;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 16px; border-bottom:1px solid var(--border-subtle); position:sticky; top:0; background:inherit; z-index:1;
}
.modal-title { font-size:0.9rem; font-weight:800; letter-spacing:-0.02em; }
.modal-close {
  background:var(--card); border:1px solid var(--border-subtle); color:var(--text-secondary);
  width:28px; height:28px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.875rem; display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.modal-close:hover { border-color:var(--border-brand); color:var(--text-primary); }
.modal-body { padding:16px 20px 20px; }

/* Wallet items inside modal */
.wallet-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid var(--border-subtle); transition:var(--transition); margin-bottom:8px;
}
.wallet-item:last-child { margin-bottom:0; }
.wallet-item:hover { background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.38); }

/* Token list */
.token-list { display:flex; flex-direction:column; gap:2px; }
.token-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:var(--radius-md); cursor:pointer; transition:background 0.15s; }
.token-item:hover { background:rgba(255,255,255,0.05); }
.token-item-left { display:flex; align-items:center; gap:12px; }

/* Confirm rows */
.confirm-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:var(--text-sm); }
.confirm-row:last-child { border-bottom:none; }

/* ════════════════════════════════════════════
   NOTIFICATIONS
════════════════════════════════════════════ */
.notif-wrapper { position:relative; }
.notif-btn {
  background:var(--card); border:1px solid var(--border-subtle);
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:0.95rem; transition:var(--transition);
  color:var(--text-secondary); position:relative;
}
.notif-btn:hover { border-color:var(--border-brand); }
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  width:16px; height:16px; background:var(--danger); border-radius:50%;
  font-size:0.58rem; font-weight:900; color:#fff;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-base);
}
.notif-panel {
  position:absolute; top:calc(100% + 8px); right:0; width:300px;
  background:var(--bg-elevated); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:150; display:none; overflow:hidden;
}
.notif-panel.show { display:block; }
.notif-panel-header { padding:13px 16px; border-bottom:1px solid var(--border-subtle); font-weight:700; font-size:var(--text-sm); display:flex; justify-content:space-between; }
.notif-item { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.035); cursor:pointer; transition:background 0.15s; }
.notif-item:hover { background:rgba(255,255,255,0.03); }
.notif-item:last-child { border-bottom:none; }
.notif-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:4px; }

/* ════════════════════════════════════════════
   COUNTDOWN
════════════════════════════════════════════ */
.countdown { display:inline-flex; gap:5px; align-items:center; }
.cd-block { background:rgba(255,255,255,0.07); border-radius:6px; padding:4px 8px; text-align:center; min-width:38px; }
.cd-num { font-size:var(--text-sm); font-weight:900; color:var(--brand-light); line-height:1; display:block; font-variant-numeric:tabular-nums; }
.cd-lbl { font-size:0.5rem; color:var(--text-tertiary); font-weight:700; text-transform:uppercase; display:block; }
.cd-sep { color:var(--text-tertiary); font-weight:700; font-size:var(--text-sm); }

/* ════════════════════════════════════════════
   PAGE HEADER (dashboard/launchpad/defi/portfolio)
════════════════════════════════════════════ */
.page-header {
  padding:136px 0 48px;
  position:relative; z-index:1; overflow:hidden;
}
.page-header::before {
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 0%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 0%, black 20%, transparent 100%);
}
.page-header::after {
  content:'';
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:600px; height:240px;
  background:radial-gradient(ellipse,rgba(124,58,237,0.07) 0%,transparent 70%);
  pointer-events:none; z-index:0;
}
.page-header > * { position:relative; z-index:1; }

/* ════════════════════════════════════════════
   POOL CARD
════════════════════════════════════════════ */
.pool-card {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:var(--transition);
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.pool-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,0.35),transparent);
  opacity:0; transition:opacity 0.3s;
}
.pool-card:hover::before { opacity:1; }
.pool-card:hover { border-color:rgba(139,92,246,0.32); background:rgba(139,92,246,0.035); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ════════════════════════════════════════════
   FEAT CARDS (landing page)
════════════════════════════════════════════ */
.feat-card {
  background:rgba(255,255,255,0.024);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  padding:30px;
  transition:var(--transition);
  text-decoration:none; display:block;
  position:relative; overflow:hidden;
}
.feat-card::before {
  content:'';
  position:absolute; inset:0; opacity:0; transition:opacity 0.3s;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(124,58,237,0.06),transparent);
}
.feat-card:hover { border-color:rgba(139,92,246,0.38); transform:scale(1.022) translateY(-3px); box-shadow:0 20px 56px rgba(124,58,237,0.12); }
.feat-card:hover::before { opacity:1; }
.feat-icon {
  width:50px; height:50px; border-radius:14px;
  background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.24);
  display:flex; align-items:center; justify-content:center;
  font-size:21px; margin-bottom:18px; transition:var(--transition);
}
.feat-card:hover .feat-icon { background:rgba(124,58,237,0.22); border-color:rgba(139,92,246,0.48); transform:scale(1.08); }
.feat-title { font-size:1.05rem; font-weight:800; margin-bottom:9px; color:#fff; letter-spacing:-0.025em; }
.feat-desc  { font-size:var(--text-sm); color:rgba(248,250,252,0.4); line-height:1.75; }
.feat-arrow { margin-top:20px; font-size:var(--text-xs); color:rgba(167,139,250,0.6); font-weight:700; display:flex; align-items:center; gap:6px; transition:all 0.22s; }
.feat-card:hover .feat-arrow { gap:11px; color:var(--brand-light); }

/* ════════════════════════════════════════════
   ECO / PROJECT CARDS
════════════════════════════════════════════ */
.eco-card {
  background:rgba(255,255,255,0.024);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  padding:30px;
  display:flex; align-items:flex-start; gap:20px;
  transition:var(--transition);
}
.eco-card:hover { border-color:rgba(139,92,246,0.28); background:rgba(124,58,237,0.04); }
.eco-logo {
  width:58px; height:58px; border-radius:15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:900;
}
.proj-row { display:flex; align-items:center; justify-content:space-between; padding:14px 12px; border-radius:var(--radius-md); transition:background 0.2s; }
.proj-row:hover { background:rgba(255,255,255,0.04); }
.proj-info { display:flex; align-items:center; gap:13px; }
.proj-av { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; flex-shrink:0; }

/* ════════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════════ */
.cta-banner {
  position:relative; overflow:hidden;
  background:rgba(124,58,237,0.06); border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-2xl); padding:80px 48px; text-align:center;
}
.cta-banner-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(124,58,237,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.06) 1px,transparent 1px);
  background-size:32px 32px; pointer-events:none;
}
.cta-banner-glow {
  position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:700px; height:350px;
  background:radial-gradient(ellipse,rgba(124,58,237,0.2) 0%,transparent 70%);
  pointer-events:none;
}
.cta-title {
  font-size:clamp(1.8rem,4vw,2.9rem); font-weight:900; letter-spacing:-0.04em;
  color:#fff; margin-bottom:16px; position:relative; z-index:1;
}
.cta-desc { color:rgba(248,250,252,0.45); font-size:1rem; margin-bottom:36px; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.78; position:relative; z-index:1; }
.cta-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* ════════════════════════════════════════════
   STEPS / HOW IT WORKS
════════════════════════════════════════════ */
.step-card {
  background:rgba(255,255,255,0.024); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:40px 30px; text-align:center;
  transition:var(--transition); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.step-card:hover { transform:scale(1.022) translateY(-3px); border-color:rgba(139,92,246,0.32); background:rgba(124,58,237,0.05); box-shadow:0 18px 48px rgba(124,58,237,0.12),inset 0 1px 0 rgba(168,85,247,0.12); }
.step-num { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; margin:0 auto 20px; }
.step-title { font-size:1rem; font-weight:800; margin-bottom:12px; letter-spacing:-0.022em; color:#fff; }
.step-desc  { font-size:var(--text-sm); color:rgba(248,250,252,0.4); line-height:1.8; }
.step-circle { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:900; margin:0 auto 18px; transition:var(--transition); }
.step-circle:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(124,58,237,0.28); }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer { border-top:1px solid var(--border-subtle); padding:52px 0 32px; position:relative; z-index:1; }
.footer::before {
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.45),rgba(34,211,238,0.3),rgba(139,92,246,0.45),transparent);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-primary); font-weight:800; font-size:1rem; margin-bottom:12px; }
.footer-desc { color:var(--text-tertiary); font-size:var(--text-sm); line-height:1.75; max-width:260px; }
.footer-heading { font-size:var(--text-xs); font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { text-decoration:none; color:var(--text-secondary); font-size:var(--text-sm); transition:color 0.2s; }
.footer-links a:hover { color:var(--brand-light); }
.footer-bottom { border-top:1px solid var(--border-subtle); padding-top:24px; display:flex; align-items:center; justify-content:space-between; color:var(--text-tertiary); font-size:var(--text-xs); flex-wrap:wrap; gap:12px; }
.footer-social a { color:rgba(248,250,252,0.3); text-decoration:none; font-size:var(--text-sm); font-weight:600; transition:color 0.2s; }
.footer-social a:hover { color:var(--brand-light); }

/* ════════════════════════════════════════════
   SWAP / DEFI COMPONENTS
════════════════════════════════════════════ */
.tab-bar {
  display:flex; gap:4px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg); padding:5px; margin-bottom:24px; backdrop-filter:blur(10px);
}
.tab-btn {
  flex:1; padding:9px 14px; border-radius:var(--radius-md);
  border:1px solid transparent; background:none; color:var(--text-tertiary);
  font-size:var(--text-sm); font-weight:600; cursor:pointer;
  transition:var(--transition); font-family:inherit; letter-spacing:-0.01em;
}
.tab-btn:hover { color:var(--text-secondary); background:rgba(255,255,255,0.04); }
.tab-btn.active {
  background:rgba(139,92,246,0.13); color:var(--brand-light);
  border-color:rgba(139,92,246,0.25);
  box-shadow:0 0 14px rgba(124,58,237,0.14),inset 0 1px 0 rgba(255,255,255,0.05);
}

.swap-card {
  background:var(--card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl); padding:24px; transition:border-color 0.25s;
}
.swap-card:hover { border-color:rgba(139,92,246,0.2); }

.swap-arrow { display:flex; justify-content:center; margin:-4px 0; position:relative; z-index:1; }
.swap-arrow-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-surface); border:1px solid var(--border-default);
  color:var(--text-secondary); cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.swap-arrow-btn:hover { border-color:var(--border-brand); color:var(--brand-light); transform:rotate(180deg); background:rgba(139,92,246,0.08); }

/* Swap route visualizer */
.swap-route { display:flex; align-items:center; gap:0; padding:13px 15px; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-md); margin:12px 0; overflow:hidden; position:relative; }
.swap-route-node { display:flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:700; white-space:nowrap; flex-shrink:0; }
.swap-route-line { flex:1; height:2px; background:rgba(255,255,255,0.08); position:relative; margin:0 8px; overflow:hidden; border-radius:1px; }
.swap-route-dot { position:absolute; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--brand-light); box-shadow:0 0 8px rgba(139,92,246,0.8); animation:routeDot 1.8s ease-in-out infinite; }
@keyframes routeDot { 0%{left:-8px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} }

/* ════════════════════════════════════════════
   SKELETON LOADING
════════════════════════════════════════════ */
@keyframes skeletonPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);
  background-size:400% 100%; animation:skeletonPulse 1.6s ease-in-out infinite;
  border-radius:6px; color:transparent !important; pointer-events:none; user-select:none;
}
.skeleton-line { height:14px; border-radius:4px; margin-bottom:8px; }
.skeleton-line.w-60 { width:60%; } .skeleton-line.w-40 { width:40%; } .skeleton-line.w-80 { width:80%; }

/* ════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════ */
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }
@keyframes pulseGlow { 0%,100%{opacity:0.7} 50%{opacity:1} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Fade-up animation — driven by animations.js IntersectionObserver */
.fade-up { opacity:0; }

/* Live status */
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.7)} 60%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-right:6px; animation:livePulse 2.2s ease infinite; }
@keyframes liveFlash { 0%{opacity:1} 30%{opacity:0.5;color:var(--cyan)} 100%{opacity:1} }
.live-updated { animation:liveFlash 0.6s ease; }

/* Arc status */
.arc-status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; flex-shrink:0; }
@keyframes arcStatusPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.6)} 70%{box-shadow:0 0 0 7px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
.arc-status-pulse { animation:arcStatusPulse 0.9s ease-out; }
@keyframes arcLiveFlash { 0%{color:#c084fc} 100%{color:inherit} }
.arc-live-flash { animation:arcLiveFlash 0.6s ease-out; }

/* ════════════════════════════════════════════
   YIELD CALCULATOR
════════════════════════════════════════════ */
.yield-calc-wrap { background:rgba(20,22,30,0.9); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-xl); padding:36px 40px; }
.yield-slider { -webkit-appearance:none; width:100%; height:6px; border-radius:3px; background:rgba(255,255,255,0.08); outline:none; margin:12px 0 6px; cursor:pointer; }
.yield-slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--brand-light); box-shadow:0 0 12px rgba(139,92,246,0.5); cursor:pointer; }
.yield-result-box { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.yield-result-num { font-size:2.2rem; font-weight:900; color:var(--success); letter-spacing:-0.04em; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:6px; }
@media(max-width:600px) { .yield-result-box{grid-template-columns:repeat(2,1fr)} .yield-calc-wrap{padding:24px 20px} }

/* ════════════════════════════════════════════
   LIVE STATS STRIP
════════════════════════════════════════════ */
.arc-net-stat { text-align:center; padding:18px 16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-lg); flex:1; }
.arc-net-stat-val { font-size:1.2rem; font-weight:900; color:var(--text-primary); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; margin-bottom:4px; }
.arc-net-stat-lbl { font-size:0.63rem; color:var(--text-tertiary); font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.arc-live-strip { background:rgba(16,185,129,0.04); border:1px solid rgba(16,185,129,0.12); border-radius:var(--radius-xl); padding:20px 28px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.arc-live-header { display:flex; align-items:center; gap:8px; flex-shrink:0; min-width:130px; }
.arc-live-stats { display:flex; gap:0; flex:1; flex-wrap:wrap; }
.arc-live-stats .arc-net-stat { border-radius:0; border-right:none; border-top:none; border-bottom:none; border-left:1px solid rgba(255,255,255,0.06); background:transparent; padding:4px 20px; flex:unset; min-width:110px; }
.arc-live-stats .arc-net-stat:first-child { border-left:none; }
.arc-live-stats .arc-net-stat-val { font-size:1rem; }
@media(max-width:700px) { .arc-live-strip{flex-direction:column;align-items:flex-start;gap:16px} .arc-live-stats{gap:0;width:100%} .arc-live-stats .arc-net-stat{padding:8px 14px} }

/* ════════════════════════════════════════════
   NOVA EFFECTS ENGINE
════════════════════════════════════════════ */
.nfx-act-wrap { display:flex; flex-direction:column; gap:0; overflow:hidden; }
.nfx-act-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:var(--text-xs); }
.nfx-act-row:last-child { border-bottom:none; }
.nfx-act-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.nfx-act-body { flex:1; min-width:0; }
.nfx-act-addr { color:var(--brand-light); font-weight:700; font-size:0.76rem; }
.nfx-act-txt  { color:var(--text-secondary); }
.nfx-act-age  { color:var(--text-tertiary); font-size:0.7rem; white-space:nowrap; flex-shrink:0; }

/* Achievement toast */
.nfx-ach {
  position:fixed; right:24px; z-index:99998;
  background:rgba(16,18,26,0.97); border:1px solid rgba(139,92,246,0.42);
  border-radius:var(--radius-lg); padding:14px 18px 18px;
  display:flex; align-items:flex-start; gap:13px;
  min-width:270px; max-width:310px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(139,92,246,0.06);
  transform:translateX(calc(100% + 32px));
  transition:transform 0.42s var(--ease-out); overflow:hidden;
}
.nfx-ach-show { transform:translateX(0); }
.nfx-ach-icon { font-size:1.55rem; line-height:1; flex-shrink:0; margin-top:2px; }
.nfx-ach-title { font-size:0.88rem; font-weight:800; color:#fff; letter-spacing:-0.022em; margin-bottom:3px; }
.nfx-ach-desc  { font-size:0.74rem; color:var(--text-tertiary); line-height:1.55; }
.nfx-ach-bar   { position:absolute; bottom:0; left:0; height:2px; width:100%; background:linear-gradient(90deg,var(--brand-light),var(--cyan)); transform-origin:left; animation:nfxBarShrink 4s linear forwards; }
@keyframes nfxBarShrink { from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* Sparkline */
.nfx-sparkline-wrap { width:100%; height:44px; margin:10px 0 6px; }
.nfx-price-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; font-size:0.76rem; }
.nfx-price-val { font-weight:800; font-size:0.88rem; color:var(--text-primary); }
.nfx-price-pct { font-size:0.73rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-full); background:rgba(16,185,129,0.10); border:1px solid rgba(16,185,129,0.22); color:var(--success); }

/* Live feed card */
.nfx-feed-card { background:rgba(20,22,30,0.9); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:20px 22px; }
.nfx-feed-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nfx-feed-title { font-size:var(--text-sm); font-weight:800; letter-spacing:-0.015em; color:var(--text-primary); }
.nfx-live-badge { display:flex; align-items:center; gap:5px; font-size:0.66rem; font-weight:700; color:var(--success); letter-spacing:0.07em; text-transform:uppercase; }
.nfx-live-dot { width:6px; height:6px; border-radius:50%; background:var(--success); animation:nfxLiveDot 1.6s ease infinite; }
@keyframes nfxLiveDot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ════════════════════════════════════════════
   AIRDROP / TIERS (landing page)
════════════════════════════════════════════ */
.arc-tier-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:48px; }
.arc-earn-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:40px; }

/* ════════════════════════════════════════════
   CARD VALUE HELPERS
════════════════════════════════════════════ */
.val-green  { color:var(--success); font-weight:700; font-variant-numeric:tabular-nums; }
.val-red    { color:var(--danger);  font-weight:700; font-variant-numeric:tabular-nums; }
.val-cyan   { color:var(--cyan);    font-weight:700; font-variant-numeric:tabular-nums; }
.val-purple { color:var(--brand-light); font-weight:700; font-variant-numeric:tabular-nums; }

/* Tabular nums everywhere financial */
.stat-value, .amount-input, .pool-apy, .mini-stat-val,
[data-count], [data-live], .balance-nova, .balance-usdc,
#stakedValue, #miniStakedValue, #earnedRewards, #miniEarnedRewards,
#swapRate, #fromUsd, #toUsd, #userBalance, .hstat-num {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:linear-gradient(to bottom,#7c3aed,#22d3ee); border-radius:3px; }
* { scrollbar-width:thin; scrollbar-color:#7c3aed var(--bg-base); }

/* ════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════ */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:32px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .badge-testnet { display:none; }
  .section { padding:64px 0; }
  .container { padding:0 1.25rem; }
}
@media(max-width:640px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .section-title { font-size:1.75rem; }
  .pool-card { flex-direction:column; align-items:flex-start; }
  .cta-banner { padding:48px 24px; }
  .arc-tier-grid { grid-template-columns:repeat(2,1fr); }
  .arc-earn-grid { grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════
   HERO PAGE (index.html) — scoped locally but
   also defined here for consistency
════════════════════════════════════════════ */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:var(--radius-full);
  background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.32);
  font-size:0.68rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--brand-light); margin-bottom:28px;
  box-shadow:0 0 28px rgba(124,58,237,0.18),inset 0 1px 0 rgba(255,255,255,0.06);
}
.badge-live-dot { width:6px; height:6px; border-radius:50%; background:var(--brand-light); flex-shrink:0; animation:pulseDot 2s ease infinite; }
.hero-title { font-size:clamp(2.8rem,5.8vw,5.2rem); font-weight:900; line-height:1.05; color:#fff; letter-spacing:-0.042em; margin-bottom:24px; }
.hero-title::after { content:''; display:block; width:88px; height:3px; margin-top:22px; background:linear-gradient(90deg,#7c3aed,#22d3ee); border-radius:3px; box-shadow:0 0 12px rgba(124,58,237,0.5); }
.hero-desc { font-size:1.04rem; color:rgba(248,250,252,0.42); line-height:1.88; max-width:445px; margin-bottom:44px; font-weight:400; }
.hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Hero stats strip */
.hero-stats {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; padding-bottom:52px;
  padding-left: max(calc((100vw - 1200px)/2), 2rem);
  padding-right:max(calc((100vw - 1200px)/2), 2rem);
}
.hstat { flex:1; padding-left:32px; border-left:1px solid rgba(255,255,255,0.07); }
.hstat:first-child { padding-left:0; border-left:none; }
.hstat-num { font-size:1.9rem; font-weight:900; color:#fff; letter-spacing:-0.045em; margin-bottom:5px; display:block; }
.hstat-lbl { font-size:0.66rem; color:rgba(248,250,252,0.32); font-weight:600; letter-spacing:0.07em; text-transform:uppercase; }

/* ════════════════════════════════════════════
   PAGE HEADER HERO BADGE
════════════════════════════════════════════ */
.hero-section-label {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(139,92,246,0.08); border:1px solid rgba(139,92,246,0.24);
  color:var(--brand-light); margin-bottom:16px;
}


/* ── Modern Premium Gradient Tokens ── */
.grad-text {
  background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 40%, #00f2fe 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 24px rgba(139,92,246,0.35));
}

.btn-hero-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #06b6d4 100%) !important;
  box-shadow: 0 0 28px -4px rgba(139,92,246,0.55), 0 8px 24px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-hero-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 42px -2px rgba(0,242,254,0.65), 0 14px 32px rgba(0,0,0,0.5) !important;
}

.feat-card, .eco-card, .step-card, .card, .glass-panel {
  background: rgba(14, 20, 35, 0.68) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s !important;
}

.feat-card:hover, .eco-card:hover, .step-card:hover, .card:hover {
  border-color: rgba(139, 92, 246, 0.45) !important;
  box-shadow: 0 24px 50px -10px rgba(139, 92, 246, 0.25), 0 0 30px rgba(0, 242, 254, 0.15), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-4px) !important;
}