:root {
  --ink: #0b0f1a;
  --ink-2: #1b2233;
  --up: #10b981;
  --down: #ef4444;
  --amber: #f59e0b;
  --accent: #6366f1;
}
html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11','ss01','ss03'; }
body { background: #fafafa; color: var(--ink); }
.font-mono { font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-feature-settings: normal; }

.grid-bg {
  background-image:
    linear-gradient(rgba(11,15,26,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,15,26,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 75%);
}
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes ping { 0%{transform:scale(1);opacity:1} 75%,100%{transform:scale(2.4);opacity:0} }
.dot-ping { position: relative; }
.dot-ping::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  background: currentColor; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}

@keyframes rise { from { transform: scaleY(0.15); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.bar { transform-origin: bottom; animation: rise .6s ease both; }

@keyframes drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(-8%,6%,0); }
}
.drift { animation: drift 18s ease-in-out infinite; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.card {
  background: #fff; border: 1px solid rgba(11,15,26,0.08); border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: rgba(11,15,26,0.18); box-shadow: 0 8px 24px -12px rgba(11,15,26,0.15); transform: translateY(-1px); }

.terminal {
  background: linear-gradient(180deg, #0b0f1a 0%, #0f1424 100%);
  color: #e5e7eb; border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(11,15,26,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

section { scroll-margin-top: 80px; }

[aria-current="page"] { color: rgb(15 23 42); font-weight: 500; }

/* --- accents --------------------------------------------------- */

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.card-accent { position: relative; }
.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--a-from,#6366f1), var(--a-to,#10b981));
  opacity: .8;
}

.ring-featured { position: relative; }
.ring-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #10b981 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.divider-glow {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.25) 30%, rgba(16,185,129,0.25) 70%, transparent 100%);
}
.divider-glow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(99,102,241,0.35);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.06);
  transform: translate(-50%,-50%);
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.aurora-bg {
  background: linear-gradient(120deg, rgba(99,102,241,0.07), rgba(16,185,129,0.06) 40%, rgba(245,158,11,0.05) 80%);
  background-size: 200% 200%;
  animation: aurora-shift 18s ease-in-out infinite;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  font-size: 12px;
  color: rgb(51 65 85);
  font-weight: 500;
  white-space: nowrap;
}
.pill-dot { width: 6px; height: 6px; border-radius: 9999px; }

.step-line {
  position: absolute;
  left: 17px; top: 44px; bottom: -24px;
  width: 2px;
  background: linear-gradient(180deg, rgba(99,102,241,.35), rgba(16,185,129,.2) 60%, transparent);
}
.step-line-last { background: linear-gradient(180deg, rgba(16,185,129,.4), rgba(16,185,129,0)); }

.step-num {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 9999px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08), 0 8px 20px -10px rgba(15,23,42,0.4);
}
.step-num-done { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 4px rgba(16,185,129,0.12), 0 8px 20px -10px rgba(5,150,105,0.5); }

.badge-new {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 14px -6px rgba(99,102,241,0.6);
}

.faint-grid-bottom {
  mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
}